/* ============================================================
   AVDH — Адвокатське бюро Вікторії Сікори
   Робочий макет хедера v1 (HTML2)

   Методологія: BEM. Виняток — внутрішня розмітка меню, де
   класи (.menu, .sub-menu, .menu-item, .menu-item-has-children)
   жорстко прив'язані до того, як WordPress генерує wp_nav_menu().
   Це навмисно — щоб у майбутньому верстка лягла у WP без змін.

   Правила:
     · ЖОДНИХ скруглень.
     · Розміри — у rem/em. 1rem = 16px. Всі px-еквіваленти парні.
     · 1px — тільки для hairline-бордерів.
   ============================================================ */

/* -------- Fonts -------- */
@font-face{
    font-family:"BalticaC";
    src:url("../../Resources/Logo%20Style/Font/BalticaC/BalticaC.otf") format("opentype");
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"BalticaC";
    src:url("../../Resources/Logo%20Style/Font/BalticaC/BalticaC_Bold.otf") format("opentype");
    font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../../Resources/Logo%20Style/Font/Involve/Involve-Regular.ttf") format("truetype");
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../../Resources/Logo%20Style/Font/Involve/Involve-Medium.ttf") format("truetype");
    font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../../Resources/Logo%20Style/Font/Involve/Involve-SemiBold.ttf") format("truetype");
    font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../../Resources/Logo%20Style/Font/Involve/Involve-Bold.ttf") format("truetype");
    font-weight:700; font-style:normal; font-display:swap;
}

/* ============================================================
   Tokens
   ============================================================ */
:root{
    --color-green:        #101F19;
    --color-green-2:      #14261F;
    --color-green-3:      #1A3027;
    --color-green-4:      #25382C;
    --color-sage:         #5A6960;
    --color-beige:        #CFBFB1;
    --color-beige-2:      #E7DCD0;
    --color-cream:        #F4EDE4;
    --color-gold:         #BA942D;
    --color-gold-2:       #D7B65C;

    --color-line:         rgba(207, 191, 177, 0.18);
    --color-line-soft:    rgba(207, 191, 177, 0.10);
    --color-line-strong:  rgba(207, 191, 177, 0.32);

    /* Glass-фон для скляних поверхонь */
    --glass-bg:           rgba(16, 31, 25, 0.62);
    --glass-bg-strong:    rgba(16, 31, 25, 0.78);
    --glass-bg-mobile:    rgba(16, 31, 25, 0.86);
    --glass-blur:         blur(1rem) saturate(140%);
    --glass-blur-strong:  blur(1.5rem) saturate(140%);

    --font-display:       "BalticaC", Georgia, serif;
    --font-sans:          "Involve", "Helvetica Neue", Arial, sans-serif;

    /* .container ширина = зовнішня ширина острівного хедера — щоб
       усі секції на сторінці мали ті самі бокові межі */
    --container-max:      86.25rem;  /* 1380px — як --header-max */
    --container-pad:      1rem;      /* 16px — як --header-side */
    --header-max:         86.25rem;
    --header-pad:         1.25rem;
    --header-height:      5.375rem;

    /* Острівний хедер v2: відступ від верху і боків вьюпорта */
    --header-top:         1rem;      /* 16px зверху */
    --header-side:        1rem;      /* 16px з кожного боку */
    --header-mega-gap:    0.5rem;    /* 8px між хедером і mega-панеллю */

    --z-header:           40;
    --z-mega:             39;
    --z-mobile-menu:      50;
    --z-skip:             60;

    --ease:               cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }

html{
    font-size:100%;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body, .page{
    margin:0;
    font-family:var(--font-sans);
    color:var(--color-beige);
    background:
        linear-gradient(180deg,
            #0D1B16 0%,
            #101F19 22%,
            #14261F 58%,
            #101F19 86%,
            #0C1813 100%
        );
    min-height:100vh;
    line-height:1.55;
    overflow-x:hidden;
    font-weight:400;
}

body.is-menu-open{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button, input, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
ul{ margin:0; padding:0; list-style:none; }

code{
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:0.875em;
    color:var(--color-gold-2);
    background:rgba(186, 148, 45, 0.08);
    padding:0.125rem 0.375rem;
}

::selection{ background:rgba(186, 148, 45, 0.42); color:var(--color-cream); }

:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:0.25rem;
}

/* ============================================================
   Utilities
   ============================================================ */
.container{
    width:min(var(--container-max), calc(100% - var(--container-pad) * 2));
    margin:0 auto;
}

.skip-link{
    position:absolute;
    top:0.875rem; left:0.875rem;
    z-index:var(--z-skip);
    transform:translateY(-200%);
    padding:0.625rem 0.875rem;
    background:var(--color-gold);
    color:var(--color-green);
    font-weight:700;
}
.skip-link:focus{ transform:translateY(0); }

.kicker{
    margin:0 0 1rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}


/* ============================================================
   BLOCK: header — ОСТРІВЕЦЬ (v2)
   Хедер плаває як окрема плашка: відсунутий від верху і боків
   вьюпорта, обведений з усіх боків, з вічно-увімкненим glass.
   ============================================================ */
.header{
    position:fixed;
    top:var(--header-top);
    left:50%;
    transform:translateX(-50%);
    width:min(var(--header-max), calc(100% - var(--header-side) * 2));
    z-index:var(--z-header);
    color:var(--color-cream);
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--color-line-soft);
    box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.22);
    transition:background 220ms var(--ease), border-color 220ms var(--ease);
}

/* При скролі трохи затемнюємо для більшої щільності */
.header.is-scrolled{
    background:var(--glass-bg-strong);
}

.header__inner{
    width:100%;
    min-height:var(--header-height);
    padding:0 var(--header-pad);
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:2rem;
}

/* -- header__brand -- */
.header__brand{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    min-width:0;
}
.header__brand-logo{
    width:2.5rem;
    height:2.5rem;
    flex:none;
}
.header__brand-text{
    display:block;
    font-size:0.875rem;
    line-height:1.2;
    color:var(--color-beige-2);
    letter-spacing:0.01em;
}
.header__brand-name{
    display:block;
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:400;
    line-height:1.05;
    color:var(--color-cream);
    letter-spacing:0.005em;
}

/* -- header__nav (контейнер) -- */
.header__nav{
    align-self:stretch;          /* розтягуємо на повну висоту хедера */
    display:flex;
    align-items:stretch;
    justify-content:center;
}

/* -- header__actions -- */
.header__actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:0.625rem;
}

/* -- header__burger -- */
.header__burger{
    display:none;
    width:2.625rem;
    height:2.625rem;
    border:1px solid var(--color-line);
    background:rgba(16, 31, 25, 0.6);
    color:var(--color-cream);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:0.25rem;
}
.header__burger-bar{
    display:block;
    width:1.125rem;
    height:1px;
    background:var(--color-cream);
}


/* ============================================================
   MENU (WordPress-сумісна розмітка)
   .menu / .sub-menu / .menu-item / .menu-item-has-children
   ============================================================ */

/* ---- Рівень 1 — горизонтальне меню в хедері ----
   .menu і .menu-item розтягуються на повну висоту хедера, щоб
   між <a> і dropdown-панеллю не було мертвої зони, де ховер злітає. */
.header__nav > .menu{
    display:flex;
    align-items:stretch;
    gap:0.25rem;
    height:100%;
}

.header__nav > .menu > .menu-item{
    position:relative;
    display:flex;
    align-items:stretch;
}

.header__nav > .menu > .menu-item > a{
    position:relative;
    align-self:center;            /* <a> не розтягується — лише <li> */
    display:inline-flex;
    align-items:center;
    gap:0.375rem;
    padding:0.625rem 0.875rem;
    color:rgba(244, 237, 228, 0.78);
    font-size:0.875rem;
    line-height:1;
    letter-spacing:0.02em;
    transition:color 180ms var(--ease);
}
.header__nav > .menu > .menu-item > a::after{
    content:"";
    position:absolute;
    left:0.875rem; right:0.875rem;
    bottom:0.25rem;
    height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 260ms var(--ease);
}
.header__nav > .menu > .menu-item:hover > a,
.header__nav > .menu > .menu-item:focus-within > a{
    color:var(--color-cream);
}
.header__nav > .menu > .menu-item:hover > a::after,
.header__nav > .menu > .menu-item:focus-within > a::after{
    transform:scaleX(1);
}

/* Шеврон біля пунктів з дітьми (інжектується через JS — клас .menu-item__chevron) */
.menu-item__chevron{
    width:0.75rem;
    height:0.75rem;
    flex:none;
    transition:transform 220ms var(--ease);
}
.header__nav > .menu > .menu-item-has-children.is-open > a .menu-item__chevron{
    transform:rotate(-180deg);
}

/* ---- DROPDOWN для .menu-item-has-children:not(.mega) ----
   (Про нас, Вартість) Залишаються у <li>. У v2 без backdrop-filter:
   хедер уже сам має backdrop-filter, який створює containing block
   для своїх descendants — отже власний blur тут не спрацює. Тому
   solid-ish заливка без блюру; візуально все одно щільно та цілісно
   завдяки glass-фону хедера за ними. */
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:14rem;
    padding:0.75rem;
    background:rgba(16, 31, 25, 0.94);
    border:1px solid var(--color-line-soft);
    border-top:1px solid rgba(186, 148, 45, 0.4);
    box-shadow:0 1.5rem 2.5rem rgba(0, 0, 0, 0.4);
    display:flex;
    flex-direction:column;
    gap:0.125rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-0.5rem);
    pointer-events:none;
    transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms var(--ease);
    z-index:var(--z-mega);
}

.header__nav > .menu > .menu-item-has-children:not(.mega).is-open > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu .menu-item > a{
    display:block;
    padding:0.625rem 0.875rem;
    color:rgba(244, 237, 228, 0.86);
    font-size:0.875rem;
    line-height:1.2;
    letter-spacing:0.01em;
    transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu .menu-item > a:hover{
    color:var(--color-cream);
    background:rgba(207, 191, 177, 0.06);
}

/* ---- MEGA-MENU (Послуги) — портується у body через JS ----
   У хедері залишається лише <li.mega> з <a>; <ul.sub-menu> JS переносить
   у .mega-portal у <body>, щоб backdrop-filter хедера не створював
   containing-block для mega-panel. */
.header__nav > .menu > .menu-item.mega{
    position:static;
}


/* ============================================================
   BLOCK: mega-portal (v2) — теж острівець, тієї ж ширини, що хедер
   ============================================================ */
.mega-portal{
    position:fixed;
    top:calc(var(--header-top) + var(--header-height) + var(--header-mega-gap));
    left:50%;
    transform:translateX(-50%);
    width:min(var(--header-max), calc(100% - var(--header-side) * 2));
    z-index:var(--z-mega);
    pointer-events:none;
}

/* <ul.sub-menu> після переносу — і є mega-панель */
.mega-portal > .sub-menu{
    width:100%;
    margin:0;
    padding:2.5rem;                  /* рівномірний внутрішній padding */
    background:var(--glass-bg-strong);
    backdrop-filter:var(--glass-blur-strong);
    -webkit-backdrop-filter:var(--glass-blur-strong);
    border:1px solid var(--color-line-soft);
    border-top:1px solid rgba(186, 148, 45, 0.4);
    box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.22);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:2rem;
    row-gap:2rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-0.5rem);
    pointer-events:none;
    transition:opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms var(--ease);
    list-style:none;
}
.mega-portal > .sub-menu.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

/* Рівень 2 — заголовки колонок */
.mega-portal > .sub-menu > .menu-item > a{
    display:block;
    padding:0 0 0.75rem;
    margin-bottom:0.75rem;
    border-bottom:1px solid var(--color-line-soft);
    font-family:var(--font-display);
    font-size:1.125rem;
    font-weight:400;
    color:var(--color-cream);
    letter-spacing:0.005em;
    transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.mega-portal > .sub-menu > .menu-item > a:hover{
    color:var(--color-gold-2);
    border-bottom-color:var(--color-gold);
}

/* Рівень 3 — вкладений .sub-menu всередині колонки */
.mega-portal > .sub-menu .sub-menu{
    display:flex;
    flex-direction:column;
    gap:0.375rem;
    list-style:none;
    margin:0;
    padding:0;
}
.mega-portal > .sub-menu .sub-menu .menu-item > a{
    display:inline-block;
    padding:0.25rem 0;
    color:rgba(244, 237, 228, 0.72);
    font-size:0.875rem;
    line-height:1.4;
    letter-spacing:0.005em;
    transition:color 180ms var(--ease), transform 180ms var(--ease);
}
.mega-portal > .sub-menu .sub-menu .menu-item > a:hover{
    color:var(--color-cream);
    transform:translateX(0.25rem);
}

/* На рівні 2 mega-меню шеврон не потрібен */
.mega-portal .menu-item__chevron{ display:none; }


/* ============================================================
   BLOCK: mobile-menu
   ============================================================ */
.mobile-menu{
    position:fixed;
    inset:0;
    z-index:var(--z-mobile-menu);
    visibility:hidden;
    pointer-events:none;
    /* Затримка visibility = тривалості анімації панелі.
       Так контейнер залишається visible поки панель і бекдроп
       плавно «їдуть» назад, і лише потім зникає. */
    transition:visibility 0s 360ms;
}
.mobile-menu.is-open{
    visibility:visible;
    pointer-events:auto;
    transition:visibility 0s 0s;
}

.mobile-menu__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.5);
    opacity:0;
    transition:opacity 320ms var(--ease);
    cursor:pointer;
}
.mobile-menu.is-open .mobile-menu__backdrop{ opacity:1; }

.mobile-menu__panel{
    position:absolute;
    top:0; right:0; bottom:0;
    width:min(26rem, 100%);
    background:var(--glass-bg-mobile);
    backdrop-filter:var(--glass-blur-strong);
    -webkit-backdrop-filter:var(--glass-blur-strong);
    border-left:1px solid var(--color-line-soft);
    box-shadow:-1.5rem 0 3rem rgba(0, 0, 0, 0.5);
    transform:translateX(100%);
    transition:transform 360ms var(--ease);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }

.mobile-menu__head{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.5rem;
    min-height:var(--header-height);
    padding:0 var(--header-pad);
    border-bottom:1px solid var(--color-line-soft);
}
.mobile-menu__brand{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    color:var(--color-cream);
}
.mobile-menu__brand-logo{
    width:2.25rem;
    height:2.25rem;
    flex:none;
}
.mobile-menu__brand-text{
    display:block;
    font-size:0.75rem;
    line-height:1.2;
    color:var(--color-beige-2);
}
.mobile-menu__brand-name{
    display:block;
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    line-height:1.05;
    color:var(--color-cream);
}

.mobile-menu__close{
    width:2.625rem;              /* 42px — як кнопка телефону та бургер */
    height:2.625rem;
    border:1px solid var(--color-line);
    color:var(--color-cream);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu__close svg{ width:1.25rem; height:1.25rem; }
.mobile-menu__close:hover{
    border-color:var(--color-gold);
    background:rgba(186, 148, 45, 0.08);
}

.mobile-menu__nav{
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.mobile-menu__foot{
    flex:none;
    display:flex;
    flex-direction:column;
    gap:0.625rem;
    padding:1.25rem 1.5rem;
    border-top:1px solid var(--color-line-soft);
    background:rgba(16, 31, 25, 0.4);
}
.mobile-menu__foot .button{ width:100%; }


/* ---- Меню всередині mobile-menu ---- */
.mobile-menu .menu{
    display:flex;
    flex-direction:column;
}

/* .menu-item на мобільному — flex-wrap, щоб <a> і toggle йшли рядком,
   а <ul.sub-menu> переносилась на новий рядок 100% ширини */
.mobile-menu .menu-item{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    border-bottom:1px solid var(--color-line-soft);
}
.mobile-menu .menu-item:last-child{ border-bottom:0; }

.mobile-menu .menu-item > a{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    padding:1rem 1.5rem;
    color:var(--color-cream);
    font-size:1rem;
    line-height:1.3;
    letter-spacing:0.005em;
    transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu .menu-item > a:hover{
    color:var(--color-gold-2);
    background:rgba(207, 191, 177, 0.04);
}

/* Toggle-кнопка стрілки — інжектується JS, сидить поряд з <a> */
.mobile-menu .menu-item__toggle{
    flex:none;
    width:3.5rem;
    align-self:stretch;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--color-beige-2);
    border-left:1px solid var(--color-line-soft);
    transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu .menu-item__toggle svg{
    width:1rem;
    height:1rem;
    transition:transform 240ms var(--ease);
}
.mobile-menu .menu-item__toggle:hover{
    color:var(--color-gold-2);
    background:rgba(186, 148, 45, 0.06);
}
.mobile-menu .menu-item.is-open > .menu-item__toggle svg{
    transform:rotate(-180deg);
}

/* Вкладений sub-menu — займає 100% ширини під рядком, акордеон */
.mobile-menu .sub-menu{
    flex:1 0 100%;
    display:none;
    flex-direction:column;
    background:rgba(0, 0, 0, 0.18);
    border-top:1px solid var(--color-line-soft);
}
.mobile-menu .menu-item.is-open > .sub-menu{ display:flex; }

/* Рівень 2 — менший шрифт, більший лівий відступ */
.mobile-menu .sub-menu .menu-item > a{
    padding:0.875rem 1.5rem 0.875rem 2.5rem;
    font-size:0.875rem;
}
/* Рівень 3 — ще більший лівий відступ і приглушений колір */
.mobile-menu .sub-menu .sub-menu .menu-item > a{
    padding-left:3.5rem;
    color:rgba(244, 237, 228, 0.78);
}


/* ============================================================
   BLOCK: button (реюзний)
   ============================================================ */
.button{
    --button-h: 2.75rem;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--button-h);
    padding:0 1.125rem;
    border:0;
    background:transparent;
    color:var(--color-cream);
    font-family:var(--font-sans);
    font-size:0.875rem;
    font-weight:600;
    line-height:1;
    letter-spacing:0.04em;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    transition:color 220ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
    user-select:none;
}
.button__icon{
    width:1rem; height:1rem;
    flex:none;
    margin-right:0.5rem;
}
.button__label{ display:inline-block; }
.button--phone{ letter-spacing:0.06em; }

.button--primary{
    background:var(--color-gold);
    color:var(--color-green);
    border:1px solid var(--color-gold);
}
.button--primary:hover{
    background:var(--color-gold-2);
    border-color:var(--color-gold-2);
}
.button--primary:active{ transform:translateY(1px); }

.button--ghost{
    border:1px solid var(--color-line-strong);
    background:rgba(16, 31, 25, 0.32);
    color:var(--color-cream);
}
.button--ghost:hover{
    border-color:var(--color-beige);
    background:rgba(207, 191, 177, 0.08);
}
.button--ghost:active{ transform:translateY(1px); }

/* ============================================================
   КНОПКИ — ВАРІАНТИ ЗАЛИВКИ (fill)
   Спільна механіка: шар .button__fill «заливає» кнопку при ховері.
   Напрям задає -h (горизонт.) / -v (вертик.) / -c (з центру),
   роль і кольори — -cta (золота, як у хедері) / -ghost (контурна).
   Відтінок заливки CTA — is-deep (глибокий green-4) або зелений.
   ============================================================ */
.button--fill{ overflow:hidden; padding:0; border:1px solid transparent; }
.button__fill{
    position:absolute; inset:0; z-index:0;
    transition:transform 420ms cubic-bezier(.6,.05,.2,1);
    will-change:transform;
}
.button--fill .button__content{
    position:relative; z-index:1;
    display:inline-flex; align-items:center;
    padding:0 1.25rem; min-height:var(--button-h);
    transition:color 300ms var(--ease);
}

/* --- напрями заливки --- */
.button--fill-h .button__fill{ transform:translateX(-101%); }
.button--fill-h:hover .button__fill,
.button--fill-h:focus-visible .button__fill{ transform:translateX(0); }

.button--fill-v .button__fill{ transform:translateY(101%); }
.button--fill-v:hover .button__fill,
.button--fill-v:focus-visible .button__fill{ transform:translateY(0); }

.button--fill-c .button__fill{ transform:scaleX(0); transform-origin:center; }
.button--fill-c:hover .button__fill,
.button--fill-c:focus-visible .button__fill{ transform:scaleX(1); }

/* --- CTA: суцільне золото у спокої, заливка іншим кольором --- */
.button--fill-cta{
    background:var(--color-gold);
    color:var(--color-green);
    border-color:var(--color-gold);
}
.button--fill-cta .button__fill{ background:var(--color-green); }
.button--fill-cta:hover{ color:var(--color-gold-2); }

.button--fill-cta.is-deep .button__fill{ background:var(--color-green-4); }

/* --- Ghost (контурна, як «телефон») --- */
.button--fill-ghost{
    background:rgba(16, 31, 25, 0.32);
    color:var(--color-beige);
    border-color:var(--color-line-strong);
}
.button--fill-ghost .button__fill{ background:var(--color-beige); }
.button--fill-ghost:hover{ color:var(--color-green); border-color:var(--color-beige); }

.button--fill:active{ transform:translateY(1px); }

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


/* ============================================================
   BLOCK: hero (загальні стилі)
   ============================================================ */
.hero{
    position:relative;
    overflow:hidden;
    padding:calc(var(--header-top) + var(--header-height) + 7rem) 0 10rem; /* низ = 160px: ритм між блоками */
    background:transparent;
    color:var(--color-cream);
}

.hero__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    /* Fade зверху і знизу — секційні абстракції щезають на стиках,
       тому body-gradient проходить наскрізь без видимих швів. */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%);
}
.hero__bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 85% 12%, rgba(186, 148, 45, 0.14) 0%, transparent 45%),
        radial-gradient(ellipse at 8% 92%, rgba(90, 105, 96, 0.20) 0%, transparent 55%);
}
.hero__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(207, 191, 177, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(207, 191, 177, 0.028) 1px, transparent 1px);
    background-size:4rem 4rem;
}

.hero__container{
    position:relative;
    z-index:1;
}

.hero__eyebrow{
    margin:0 0 1.5rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:600;
}

.hero__title{
    margin:0 0 1.5rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2.5rem, 5.5vw, 4.5rem);
    line-height:1.06;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.hero__title-accent{ color:var(--color-gold); }

.hero__lead{
    margin:0 0 2.5rem;
    max-width:54ch;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.78);
}

.hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}

.hero__markers{
    list-style:none;
    margin:5rem 0 0;
    padding:0;
}

.hero-marker__num{
    display:inline-flex;
    align-items:baseline;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-gold);
    font-size:clamp(2rem, 4vw, 3.5rem);
    line-height:1;
    letter-spacing:-0.01em;
}

/* Odometer — переписуємо стилі бібліотеки під наш бренд (BalticaC, золотий).
   Theme-minimal задає Helvetica і line-height:1.1em — нам це не треба. */
.hero-marker__num .odometer{
    font-family:var(--font-display);
    line-height:1;
}
.hero-marker__suffix{
    font-family:var(--font-display);
    color:inherit;
}
.hero-marker__label{
    display:block;
    margin-top:0.75rem;
    font-size:0.75rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.66);
    line-height:1.4;
}


/* ============================================================
   BLOCK: hero — модифікатор .hero--alt
   Альтернативна композиція: той самий theater, але текст ліворуч,
   watermark зміщений у праву половину секції (того ж розміру/прозорості).
   ============================================================ */
.hero--alt{
    /* Збільшені відступи зверху і знизу — секція дихає */
    padding-top:7rem;
    padding-bottom:7rem;
    border-top:1px solid var(--color-line-soft);
}

/* Перевизначаємо центрування theater на ліве вирівнювання */
.hero--theater.hero--alt{ text-align:left; }
.hero--theater.hero--alt .hero__container{
    align-items:stretch;
}
/* Title — широкий, інший контент тримаємо вужче, щоб не лізли на watermark */
.hero--theater.hero--alt .hero__title{
    max-width:64rem;                  /* 1024px */
}
.hero--theater.hero--alt .hero__eyebrow,
.hero--theater.hero--alt .hero__lead,
.hero--theater.hero--alt .hero__actions{
    max-width:38rem;                  /* 608px */
}
.hero--theater.hero--alt .hero__lead{ text-align:left; }
.hero--theater.hero--alt .hero__actions{ justify-content:flex-start; }

/* Watermark — той самий розмір і прозорість, тільки зміщений праворуч */
.hero--theater.hero--alt .hero__watermark{
    left:75%;
    top:50%;
    transform:translate(-50%, -50%);
}


/* ============================================================
   BLOCK: hero — модифікатор theater (v2)
   Центрований текст, монограм як watermark, маркери в glass-панелі
   з вертикальними розділювачами.
   ============================================================ */
.hero--theater{ text-align:center; }

.hero--theater .hero__container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero--theater .hero__title{
    max-width:24ch;
    font-size:clamp(2.5rem, 6vw, 5rem);   /* 40-80px */
}

.hero--theater .hero__lead{
    max-width:58ch;
    text-align:center;
}

.hero--theater .hero__actions{
    justify-content:center;
}

/* Watermark — монограм за текстом, дуже приглушено */
.hero--theater .hero__watermark{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:clamp(20rem, 60vw, 48rem);
    height:auto;
    opacity:0.045;
    pointer-events:none;
}

/* Маркери — у скляній панелі з вертикальними розділювачами */
.hero--theater .hero__markers{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    padding:2rem 1rem;
    background:rgba(20, 38, 31, 0.55);
    border:1px solid var(--color-line-soft);
    backdrop-filter:blur(0.5rem);
    -webkit-backdrop-filter:blur(0.5rem);
}

.hero--theater .hero-marker{
    position:relative;
    padding:0 1rem;
    text-align:center;
}
.hero--theater .hero-marker + .hero-marker::before{
    content:"";
    position:absolute;
    left:0;
    top:0.5rem;
    bottom:0.5rem;
    width:1px;
    background:var(--color-line-soft);
}


/* ============================================================
   BLOCK: intro (заглушка під хедером)
   ============================================================ */
.intro{
    padding:calc(var(--header-top) + var(--header-height) + 4.5rem) 0 3.5rem;
    border-bottom:1px solid var(--color-line-soft);
}
.intro__title{
    margin:0 0 1.125rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    max-width:22ch;
}
.intro__lead{
    margin:0;
    max-width:62ch;
    color:rgba(244, 237, 228, 0.74);
    font-size:1rem;
    line-height:1.6;
}



/* ============================================================
   BLOCK: about — "Stacked Glass Dossier" (v2)
   Концепція: вертикальний портрет; поверх нього — велика glass-карта
   досьє з номером, тайтлом, текстом і кнопкою; знизу-зліва — другий
   скляний "штамп" з роком і статистикою. На фоні — watermark-літери
   ESSE (від essentia/правової сутності), кутова рамка з notch і
   орбіти-кола як декоративний геометричний акцент.
   Унікальні рішення проти v1:
     · overlap glass-карток на портреті (v1 — жорстка 5/7 сітка)
     · clip-path notch на портреті замість mask-fade
     · watermark-typography "ESSE" замість "01 · Про бюро"
     · button з 4-corner brackets + arrow (не border-bottom)
   ============================================================ */
.about{
    position:relative;
    overflow:hidden;
    padding:7.5rem 0 8rem;
    color:var(--color-cream);
    isolation:isolate;
}

.about__bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 80%, transparent 100%);
}
.about__bg::before{
    /* Радіальний bloom — у правому верхньому куті, золотий */
    content:"";
    position:absolute;
    top:-12%;
    right:-8%;
    width:42rem;
    height:42rem;
    background:radial-gradient(circle at center, rgba(186,148,45,0.12) 0%, rgba(186,148,45,0.05) 35%, transparent 70%);
}
.about__bg::after{
    /* Сольовий sage glow зліва-знизу */
    content:"";
    position:absolute;
    bottom:-8%;
    left:-6%;
    width:36rem;
    height:36rem;
    background:radial-gradient(circle at center, rgba(90,105,96,0.18) 0%, rgba(90,105,96,0.06) 40%, transparent 72%);
}
.about__bg-watermark{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(12rem, 28vw, 28rem);
    line-height:0.85;
    letter-spacing:-0.04em;
    color:rgba(207, 191, 177, 0.035);
    user-select:none;
    white-space:nowrap;
}
.about__bg-frame{
    position:absolute;
    inset:1.5rem;
    width:auto;
    height:auto;
    left:1.5rem; right:1.5rem; top:1.5rem; bottom:1.5rem;
    pointer-events:none;
}
.about__bg-orbit{
    position:absolute;
    top:50%;
    right:-12rem;
    transform:translateY(-50%);
    width:38rem;
    height:38rem;
    opacity:0.6;
}

.about__container{
    position:relative;
    z-index:1;
}

/* Kicker з символом параграфа */
.about__kicker{
    margin:0 0 3rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.about__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.about__kicker-text{
    border-bottom:1px solid rgba(186, 148, 45, 0.4);
    padding-bottom:0.25rem;
}

/* Сцена — relative-контейнер для overlap-композиції */
.about__stage{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:0;
    min-height:42rem;
}

/* ---------- Portrait ---------- */
.about__portrait{
    grid-column:2;
    grid-row:1;
    position:relative;
    margin:0;
    justify-self:end;
    width:100%;
    max-width:32rem;          /* 512px */
}
.about__portrait-frame{
    position:relative;
    aspect-ratio:3 / 4;
    overflow:hidden;
    /* Notch — нижній лівий і верхній правий кути зрізані */
    clip-path:polygon(
        0 0,
        calc(100% - 1.5rem) 0,
        100% 1.5rem,
        100% 100%,
        1.5rem 100%,
        0 calc(100% - 1.5rem)
    );
    background:var(--color-green-2);
}
.about__portrait-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 22%;
    filter:contrast(1.04) saturate(0.92);
}
/* Внутрішня обводка — імітує "паспарту" */
.about__portrait-frame::after{
    content:"";
    position:absolute;
    inset:0.75rem;
    border:1px solid rgba(244, 237, 228, 0.14);
    pointer-events:none;
}
/* Невеликі L-кутики на портреті — поверх img */
.about__portrait-corner{
    position:absolute;
    width:1.5rem;
    height:1.5rem;
    pointer-events:none;
    z-index:2;
}
.about__portrait-corner--tl{
    top:1.5rem; left:1.5rem;
    border-top:1px solid var(--color-gold);
    border-left:1px solid var(--color-gold);
}
.about__portrait-corner--br{
    bottom:1.5rem; right:1.5rem;
    border-bottom:1px solid var(--color-gold);
    border-right:1px solid var(--color-gold);
}

/* Підпис під портретом */
.about__portrait-tag{
    display:block;
    margin-top:1.25rem;
    padding-left:1rem;
    border-left:2px solid var(--color-gold);
}
.about__portrait-tag-label{
    display:block;
    font-size:0.625rem;     /* 10px */
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.58);
    margin-bottom:0.25rem;
}
.about__portrait-tag-name{
    display:block;
    font-family:var(--font-display);
    font-size:1.125rem;
    color:var(--color-cream);
    letter-spacing:0.01em;
}

/* ---------- Dossier glass card — overlap портрета зліва ---------- */
.about__dossier{
    grid-column:1 / span 2;
    grid-row:1;
    align-self:center;
    justify-self:start;
    position:relative;
    width:min(34rem, 58%);      /* 544px */
    margin-top:4rem;
    padding:2.5rem 2.75rem;
    background:rgba(20, 38, 31, 0.62);
    backdrop-filter:blur(1rem) saturate(140%);
    -webkit-backdrop-filter:blur(1rem) saturate(140%);
    border:1px solid var(--color-line-soft);
    box-shadow:
        0 1.5rem 3rem rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(244, 237, 228, 0.06);
    /* Notch у правому верхньому куті — повторює notch портрета */
    clip-path:polygon(
        0 0,
        calc(100% - 1.5rem) 0,
        100% 1.5rem,
        100% 100%,
        0 100%
    );
    z-index:2;
}
/* Золотий акцент-лінія зверху */
.about__dossier::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:5rem;
    height:2px;
    background:var(--color-gold);
}

.about__dossier-head{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:2rem;
    font-size:0.625rem;       /* 10px */
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.62);
}
.about__dossier-no{
    color:var(--color-gold);
    font-weight:600;
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.16em;
}
.about__dossier-divider{
    flex:1 1 auto;
    height:1px;
    background:var(--color-line-soft);
}
.about__dossier-meta{
    font-weight:600;
}

.about__title{
    margin:0 0 1.5rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.4vw, 3rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.about__title-accent{
    color:var(--color-gold);
    font-style:italic;
}

.about__lead{
    margin:0 0 1rem;
    font-size:1rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.86);
}
.about__text{
    margin:0 0 2rem;
    font-size:0.875rem;
    line-height:1.7;
    color:rgba(244, 237, 228, 0.66);
}

.about__actions{
    display:flex;
    align-items:center;
}

/* ---- "Читати більше" — bracket-button з arrow ---- */
.about__btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    padding:1rem 1.75rem;
    color:var(--color-cream);
    font-family:var(--font-sans);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.24em;
    text-transform:uppercase;
    line-height:1;
    transition:color 240ms var(--ease), background-color 240ms var(--ease);
    background:transparent;
}
.about__btn-frame{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.about__btn-corner{
    position:absolute;
    width:0.75rem;
    height:0.75rem;
    transition:width 280ms var(--ease), height 280ms var(--ease), border-color 240ms var(--ease);
}
.about__btn-corner--tl{ top:0; left:0;     border-top:1px solid var(--color-gold); border-left:1px solid var(--color-gold); }
.about__btn-corner--tr{ top:0; right:0;    border-top:1px solid var(--color-gold); border-right:1px solid var(--color-gold); }
.about__btn-corner--bl{ bottom:0; left:0;  border-bottom:1px solid var(--color-gold); border-left:1px solid var(--color-gold); }
.about__btn-corner--br{ bottom:0; right:0; border-bottom:1px solid var(--color-gold); border-right:1px solid var(--color-gold); }
.about__btn:hover .about__btn-corner,
.about__btn:focus-visible .about__btn-corner{
    width:100%;
    height:100%;
    border-color:var(--color-gold-2);
}
.about__btn-label{ position:relative; z-index:1; }
.about__btn-arrow{
    position:relative;
    z-index:1;
    width:1.125rem;
    height:1.125rem;
    color:var(--color-gold);
    transition:transform 240ms var(--ease), color 240ms var(--ease);
}
.about__btn:hover .about__btn-arrow,
.about__btn:focus-visible .about__btn-arrow{
    transform:translateX(0.375rem);
    color:var(--color-gold-2);
}

/* ---------- Stamp — другий скляний модуль, лівий низ ---------- */
.about__stamp{
    grid-column:1;
    grid-row:1;
    align-self:end;
    justify-self:start;
    position:relative;
    margin-top:2rem;
    padding:1.5rem 1.75rem;
    background:rgba(16, 31, 25, 0.72);
    backdrop-filter:blur(0.75rem) saturate(140%);
    -webkit-backdrop-filter:blur(0.75rem) saturate(140%);
    border:1px solid rgba(186, 148, 45, 0.28);
    box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.28);
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
    z-index:3;
    transform:translate(-1rem, 1rem);
}
.about__stamp-year{
    font-family:var(--font-display);
    font-size:2.5rem;
    line-height:1;
    color:var(--color-gold);
    letter-spacing:-0.02em;
}
.about__stamp-rule{
    width:1px;
    align-self:stretch;
    background:rgba(186, 148, 45, 0.4);
}
.about__stamp-rows{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}
.about__stamp-row{
    display:flex;
    align-items:baseline;
    gap:0.625rem;
    white-space:nowrap;
}
.about__stamp-val{
    font-family:var(--font-display);
    font-size:1rem;
    color:var(--color-cream);
    line-height:1;
    min-width:2.5rem;
}
.about__stamp-key{
    font-size:0.625rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.58);
    line-height:1.2;
}

/* ---------- Responsive ---------- */
@media (max-width:73.75rem){    /* 1180px */
    .about{ padding:6rem 0 6rem; }
    .about__stage{ min-height:38rem; }
    .about__dossier{
        width:min(30rem, 60%);
        padding:2rem 2.25rem;
    }
    .about__portrait{ max-width:26rem; }
    .about__bg-watermark{ font-size:clamp(10rem, 26vw, 22rem); }
}

@media (max-width:56.25rem){    /* 900px — стек */
    .about{ padding:4.5rem 0 5rem; }
    .about__stage{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        min-height:0;
        gap:1.5rem;
    }
    .about__portrait{
        order:1;
        max-width:24rem;
        margin:0 auto;
    }
    .about__dossier{
        order:2;
        width:100%;
        margin-top:-3rem;       /* трохи overlap на портрет навіть на mobile */
        align-self:auto;
        justify-self:auto;
        padding:2rem 1.75rem;
    }
    .about__stamp{
        order:3;
        align-self:flex-start;
        margin:1rem 0 0;
        transform:none;
    }
    .about__bg-watermark{
        font-size:clamp(8rem, 32vw, 16rem);
    }
    .about__bg-orbit{
        width:24rem;
        height:24rem;
        right:-10rem;
    }
}

@media (max-width:35rem){       /* 560px */
    .about{ padding:3.5rem 0 4rem; }
    .about__kicker{ margin-bottom:2rem; }
    .about__dossier{
        padding:1.5rem 1.25rem;
        margin-top:-2rem;
    }
    .about__dossier-head{ gap:0.5rem; font-size:0.5rem; }
    .about__dossier-no{ font-size:0.75rem; }
    .about__stamp{
        padding:1.125rem 1.25rem;
        gap:1rem;
    }
    .about__stamp-year{ font-size:2rem; }
    .about__btn{ padding:0.875rem 1.25rem; }
}


/* ============================================================
   BLOCK: testi — «Відео відгуки»
   Концепція: сітка карток-постерів 3:4 з glass play-control у дусі
   хедера/dossier. Hover піднімає золоту рамку, scrim світлішає, ring
   обертається. Клік → лайтбокс з <video> (focus-trap, ESC, scrim).
   Вертикальний ритм: 160px десктоп / 96px мобільний (як .hero/.filler).
   ============================================================ */
.testi{
    position:relative;
    overflow:hidden;
    padding:10rem 0;                 /* 160px зверху/знизу — ритм між блоками */
    color:var(--color-cream);
    isolation:isolate;
}

.testi__bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}
.testi__bg::before{
    content:"";
    position:absolute;
    top:-10%;
    left:-8%;
    width:40rem;
    height:40rem;
    background:radial-gradient(circle at center, rgba(186,148,45,0.10) 0%, rgba(186,148,45,0.04) 38%, transparent 70%);
}
.testi__bg::after{
    content:"";
    position:absolute;
    bottom:-12%;
    right:-6%;
    width:34rem;
    height:34rem;
    background:radial-gradient(circle at center, rgba(90,105,96,0.16) 0%, rgba(90,105,96,0.05) 42%, transparent 72%);
}
.testi__container{
    position:relative;
    z-index:1;
}

/* ---- Head ---- */
.testi__head{
    max-width:46rem;
    margin:0 0 4rem;
}
.testi__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.testi__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.testi__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.testi__title-accent{ color:var(--color-gold); }
.testi__lead{
    margin:0;
    max-width:54ch;
    font-size:1.0625rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Marquee — нескінченна стрічка відео (висота 500px, ширина довільна) ---- */
.testi-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
    height:31.25rem;                 /* 500px */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.testi-marquee__track{
    display:flex;
    width:max-content;
    height:100%;
    animation:testi-marquee 48s linear infinite;
    will-change:transform;
}
/* пауза при наведенні / фокусі всередині */
.testi-marquee:hover .testi-marquee__track,
.testi-marquee:focus-within .testi-marquee__track{ animation-play-state:paused; }
@keyframes testi-marquee{
    from{ transform:translateX(0); }
    to{   transform:translateX(-50%); }   /* -50% = рівно один набір → безшовно */
}

.testi-marquee__item{
    position:relative;
    flex:0 0 auto;
    width:var(--w, 22rem);           /* довільна ширина кожного відео */
    height:100%;
    margin-right:1.25rem;            /* кожен «несе» свій відступ → -50% безшовно */
    overflow:hidden;
    border:1px solid var(--color-line-soft);
    background:var(--color-green-2);
    color:var(--color-cream);
}
.testi-marquee__poster{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    filter:grayscale(0.30) brightness(0.84);
    transition:transform 640ms var(--ease), filter 480ms var(--ease);
}
.testi-marquee__item:hover .testi-marquee__poster{ transform:scale(1.05); filter:grayscale(0) brightness(0.95); }
.testi-marquee__scrim{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(12,24,19,0.05) 40%, rgba(10,20,16,0.86) 100%);
}
/* play — кругле кільце (SVG) */
.testi-marquee__play{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:4rem; height:4rem;
    display:flex; align-items:center; justify-content:center;
    color:var(--color-gold-2);
    transition:color 320ms var(--ease);
}
.testi-marquee__play-ring{ position:absolute; inset:0; width:100%; height:100%; color:var(--color-gold); }
.testi-marquee__play-icon{ position:relative; width:1.25rem; height:1.25rem; margin-left:0.1875rem; }
.testi-marquee__item:hover .testi-marquee__play{ color:var(--color-cream); }
/* caption — оверлей знизу */
.testi-marquee__caption{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; flex-direction:column; gap:0.25rem;
    padding:1rem 1.125rem 1.125rem;
}
.testi-marquee__name{
    font-family:var(--font-display);
    font-size:1.125rem; line-height:1.2;
    color:var(--color-cream);
    text-shadow:0 1px 8px rgba(8,16,13,0.55);
}
.testi-marquee__role{
    font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--color-gold);
}

/* ---- Responsive: testi ---- */
@media (max-width:56.25rem){    /* 900px */
    .testi{ padding:6rem 0; }    /* 96px — мобільний ритм */
    .testi__head{ margin-bottom:3rem; }
    .testi-marquee{ height:24rem; }              /* 384px */
}
@media (max-width:35rem){       /* 560px */
    .testi-marquee{ height:20rem; }              /* 320px */
}

@media (prefers-reduced-motion: reduce){
    .testi-marquee__track{ animation:none; }
    .testi-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }  /* гортання вручну */
    .testi-marquee__item:hover .testi-marquee__poster{ transform:none; }
}


/* ============================================================
   BLOCK: filler
   ============================================================ */
.filler{
    padding:10rem 0 12.5rem;      /* 160px зверху — ритм після cinema */
    color:rgba(244, 237, 228, 0.5);
    border-top:1px solid var(--color-line-soft);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Між 1024 і 1180 — стискаємо горизонтальне меню */
@media (max-width:73.75rem){    /* 1180px */
    .header__inner{ gap:1.25rem; }
    .header__nav > .menu > .menu-item > a{
        padding:0.625rem 0.625rem;
        font-size:0.75rem;
    }
    .button{ padding:0 0.875rem; font-size:0.75rem; }

    /* mega-portal у 3 колонки */
    .mega-portal > .sub-menu{
        grid-template-columns:repeat(3, 1fr);
    }
}

/* Ховаємо desktop-меню, показуємо бургер */
@media (max-width:56.25rem){    /* 900px */
    :root{
        --header-height: 4.25rem; /* 68px */
        --header-top:    0.5rem;  /* 8px */
        --header-side:   0.5rem;  /* 8px */
        --container-pad: 0.5rem;  /* синхронно з --header-side */
    }
    .header__inner{ gap:0.5rem; }
    .header__nav{ display:none; }

    /* Лого + текст залишаємо, але зменшуємо */
    .header__brand{ gap:0.25rem; }             /* 4px */
    .header__brand-logo{
        width:2.25rem;                         /* 36px */
        height:2.25rem;
    }
    /* Текст біля логотипу — рівно як у .mobile-menu__brand-* */
    .header__brand-text{
        display:block;
        font-size:0.75rem;                     /* 12px */
        line-height:1.2;
        letter-spacing:0;
    }
    .header__brand-name{
        font-size:1rem;                        /* 16px */
        line-height:1.05;
        letter-spacing:0;
        font-weight:700;
    }

    /* Всі кнопки в actions — однієї висоти 42px (як бургер) */
    .header__actions .button{ --button-h:2.625rem; }

    .header__actions .button--phone,
    .header__actions .button--phone .button__content{ padding:0 0.75rem; }
    .header__actions .button--phone .button__label{ display:none; }
    .header__actions .button--phone .button__icon{ margin-right:0; }

    .header__actions .header__cta{ font-size:0.75rem; }
    .header__actions .header__cta .button__content{ padding:0 0.875rem; }
    .header__burger{
        display:inline-flex;
        margin-left:0.25rem;
    }

    /* Мобільний ритм між блоками — 96px */
    .filler{ padding:6rem 0 8rem; }
}

@media (max-width:35rem){       /* 560px */
    :root{
        --header-pad: 1rem;
        /* --container-pad успадковує 0.5rem з @900 — синхронно з --header-side */
    }
    .header__actions .header__cta{ display:none; }
    .intro{ padding-top:calc(var(--header-top) + var(--header-height) + 3rem); }
    .hero{ padding:calc(var(--header-top) + var(--header-height) + 3rem) 0 6rem; } /* низ = 96px */
    .hero--alt{ padding-top:3rem; padding-bottom:3rem; }
    .hero__markers{ margin-top:3rem; }

    /* About (Cinematic Stripe) — mobile: 16:9 для практичності */
}

/* Hero responsive ─ стек і маркери у 2 колонки */
@media (max-width:56.25rem){    /* 900px */
    .hero{ padding:calc(var(--header-top) + var(--header-height) + 4rem) 0 6rem; } /* низ = 96px */
    .hero--alt{ padding-top:4rem; }

    /* Theater маркери: 2 колонки */
    .hero--theater .hero__markers{
        grid-template-columns:repeat(2, 1fr);
        gap:1.5rem 0;
        padding:2rem 0.5rem;
    }
    .hero--theater .hero-marker:nth-child(odd) + .hero-marker::before{
        top:0.5rem; bottom:0.5rem;
    }
    .hero--theater .hero-marker:nth-child(even) + .hero-marker::before{
        display:none;
    }

    /* Alt-композиція на мобільному: знімаємо обмеження ширини
       тексту, watermark повертається до центру (як у головного theater) */
    .hero--theater.hero--alt .hero__eyebrow,
    .hero--theater.hero--alt .hero__title,
    .hero--theater.hero--alt .hero__lead,
    .hero--theater.hero--alt .hero__actions{
        max-width:none;
    }
    .hero--theater.hero--alt .hero__watermark{
        left:50%;
    }

    /* About (Cinematic Stripe) — tablet */
}

/* Користувач воліє менш агресивну анімацію */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        transition-duration:0.01ms !important;
        animation-duration:0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT CINEMA — pinned scroll-scrub.
   Ширина медіа, ліве затемнення (scrim) і текст керуються --p (0→1) з JS:
   на старті — оригінальне фото без затемнення, далі все проявляється.
═══════════════════════════════════════════════════════════════════════ */
.cinema{ position:relative; background:var(--color-green); overflow-x:clip; }

.cinema__stage{ position:relative; display:flex; justify-content:center; width:100%; }

.cinema__media{
    position:relative; margin:0;
    aspect-ratio:3 / 2;                          /* висота йде за шириною — фото не обрізається */
    max-width:100vw; overflow:hidden;
}
.cinema__img{
    width:100%; height:100%; object-fit:cover;   /* бокс уже 3:2, тож cover не ріже */
    filter:saturate(0.92) contrast(1.02);
}
.cinema__scrim{                                  /* затемнення зліва — під текст */
    position:absolute; inset:0; pointer-events:none;
    opacity:0;                                   /* старт: оригінальне фото, scrim керується --p */
    background:linear-gradient(100deg,
        var(--color-green) 0%,
        rgba(16,31,25,0.82) 28%,
        rgba(16,31,25,0.30) 52%,
        rgba(16,31,25,0) 68%);
}

.cinema__panel{
    position:absolute; z-index:3;
    top:50%; transform:translateY(-50%);
    left:max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
    width:min(34rem, 44vw);                      /* 544px */
    color:var(--color-cream);
}
.cinema__kicker{
    font-family:var(--font-sans);
    font-size:0.75rem; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--color-gold-2); margin:0 0 1.5rem;
}
.cinema__kicker-mark{ color:var(--color-gold); }
.cinema__title{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.08;
    margin:0 0 1.5rem;
}
.cinema__title-accent{ color:var(--color-gold-2); }
.cinema__lead{
    font-family:var(--font-sans);
    font-size:1.0625rem; line-height:1.7; color:var(--color-beige-2);
    margin:0 0 1rem; max-width:30rem;
}
.cinema__text{
    font-family:var(--font-sans);
    font-size:1rem; line-height:1.7; color:var(--color-beige);
    margin:0 0 2rem; max-width:30rem;
}
.cinema__btn{
    display:inline-flex; align-items:center; gap:0.625rem;   /* 10px */
    padding:0.875rem 1.5rem;                                 /* 14px 24px */
    font-family:var(--font-sans); font-size:0.9375rem;       /* 15px */
    letter-spacing:0.04em; text-transform:uppercase;
    color:var(--color-gold-2); border:1px solid var(--color-line-strong);
    transition:color .3s, border-color .3s, background .3s;
}
.cinema__btn:hover{ color:var(--color-green); background:var(--color-gold); border-color:var(--color-gold); }
.cinema__btn-arrow{ width:1.25rem; height:1.25rem; }

/* ── pinned scroll-scrub ─────────────────────────────────────────── */
.cinema--scrub .cinema__track{ position:relative; height:200vh; }
.cinema--scrub .cinema__sticky{
    position:sticky; top:0; height:100vh;
    display:flex; align-items:center;
}
.cinema--scrub .cinema__media{
    width:calc((100vw - var(--container-max)) * var(--p, 0) + var(--container-max));
}
.cinema--scrub .cinema__scrim{               /* затемнення проявляється трохи раніше за текст */
    opacity:clamp(0, calc((var(--p, 0) - 0.1) * 1.8), 1);
}
.cinema--scrub .cinema__panel{
    opacity:clamp(0, calc((var(--p, 0) - 0.35) * 2.8), 1);
    transform:translateY(-50%) translateX(calc((1 - clamp(0, calc((var(--p,0) - 0.35) * 2.8), 1)) * -1.5rem));
}

@media (prefers-reduced-motion: reduce){
    .cinema--scrub .cinema__track{ height:auto; }
    .cinema--scrub .cinema__sticky{ position:static; height:82vh; }
    .cinema--scrub .cinema__media{ width:100vw; }
    .cinema--scrub .cinema__scrim{ opacity:1; }
    .cinema--scrub .cinema__panel{ opacity:1; transform:translateY(-50%); }
}
@media (max-width:48rem){
    .cinema__panel{ width:min(88vw, 30rem); }
    .cinema--scrub .cinema__track{ height:165vh; }
}

/* ============================================================
   BLOCK: location — «Локація»
   Композиція: асиметрична. Шапка (§ kicker + title + lead) ліворуч,
   нижче — пара панелей, зміщених по вертикалі (office піднята, online
   опущена). Фон — абстрактні меридіани/маршрути SVG + gold-glow.
   Глибина 3 шари: (1) .location__grid (меридіани), (2) gold-glow у SVG,
   (3) .location__panels передній план.
   Ритм: 5rem 0 (80px) десктоп / 3rem 0 (48px) ≤900px.
   ============================================================ */
.location{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    color:var(--color-cream);
    isolation:isolate;
    border-top:1px solid var(--color-line-soft);
}

/* Шар 1+2: меридіани та маршрути */
.location__grid{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 86%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 86%, transparent 100%);
}
.location__map{
    position:absolute;
    top:50%;
    left:50%;
    width:min(86.25rem, 100%);
    height:100%;
    transform:translate(-50%, -50%);
    color:var(--color-beige);
}
.location__meridians{ opacity:0.16; }
.location__routes{ color:var(--color-gold); opacity:0.42; }
.location__node{
    fill:var(--color-gold-2);
}
.location__node--a{ animation:location-twinkle 4.2s var(--ease) infinite; }
.location__node--b{ animation:location-twinkle 4.2s var(--ease) 1.4s infinite; }
.location__node--c{ animation:location-twinkle 4.2s var(--ease) 2.8s infinite; }
@keyframes location-twinkle{
    0%, 100%{ opacity:0.35; }
    50%{ opacity:1; }
}

.location__container{
    position:relative;
    z-index:1;
}

/* ---- Head ---- */
.location__head{
    max-width:44rem;
    margin:0 0 3.5rem;
}
.location__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.location__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.location__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.location__title-accent{ color:var(--color-gold); }
.location__lead{
    margin:0;
    max-width:52ch;
    font-size:1.125rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Panels: асиметрична пара ---- */
.location__panels{
    display:grid;
    grid-template-columns:1.06fr 0.94fr;
    gap:1.5rem;
    align-items:start;
}
.location__panel{
    position:relative;
    overflow:hidden;
    padding:2.5rem;
    border:1px solid var(--color-line);
    transition:border-color 320ms var(--ease), transform 320ms var(--ease);
}
.location__panel:hover{ border-color:var(--color-line-strong); }

/* Офіс — світла панель (cream), виступає вгору → композ. контраст */
.location__panel--office{
    background:var(--color-cream);
    color:var(--color-green);
    transform:translateY(-2.5rem);
}
.location__panel--office .location__panel-text{ color:var(--color-green-3); }
.location__panel--office .location__fact-label{ color:var(--color-sage); }
.location__panel--office .location__fact-value{ color:var(--color-green); }
.location__panel--office .location__panel-index{ color:rgba(16, 31, 25, 0.12); }

/* Онлайн — glass-панель на темному, опущена вниз */
.location__panel--online{
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    color:var(--color-cream);
    transform:translateY(2.5rem);
}
.location__panel--online .location__panel-text{ color:rgba(244, 237, 228, 0.74); }
.location__panel--online .location__fact-label{ color:var(--color-gold); }
.location__panel--online .location__fact-value{ color:var(--color-cream); }
.location__panel--online .location__panel-index{ color:rgba(244, 237, 228, 0.10); }

.location__panel-index{
    position:absolute;
    top:1.75rem;
    right:2rem;
    font-family:var(--font-display);
    font-size:2.5rem;
    line-height:1;
    pointer-events:none;
}
.location__panel-title{
    margin:0 0 0.875rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.75rem;
    line-height:1.12;
    letter-spacing:-0.005em;
}
.location__panel-text{
    margin:0 0 2rem;
    font-size:1rem;
    line-height:1.6;
    max-width:34ch;
}

/* ---- Facts ---- */
.location__facts{
    margin:0 0 2.25rem;
    display:grid;
    gap:1.25rem;
}
.location__fact{ margin:0; }
.location__fact-label{
    margin:0 0 0.375rem;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:600;
}
.location__fact-value{
    margin:0;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    font-size:1rem;
    line-height:1.5;
}
.location__link{
    color:inherit;
    text-decoration:none;
    width:fit-content;
    border-bottom:1px solid var(--color-line-strong);
    transition:border-color 200ms var(--ease), color 200ms var(--ease);
}
.location__link:hover,
.location__link:focus-visible{
    color:var(--color-gold);
    border-color:var(--color-gold);
}

.location__panel-cta{ margin-top:auto; }

/* ---- Pulse marker (онлайн) — кола через <circle> ---- */
.location__pulse{
    position:absolute;
    top:1.75rem;
    left:2rem;
    width:3rem;
    height:3rem;
}
.location__pulse svg{ width:100%; height:100%; overflow:visible; }
.location__pulse-core{ fill:var(--color-gold); }
.location__pulse-wave{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:1.5;
    transform-origin:center;
    transform-box:fill-box;
    animation:location-pulse 3s var(--ease) infinite;
}
.location__pulse-wave--2{ animation-delay:1.5s; }
@keyframes location-pulse{
    0%{ transform:scale(0.5); opacity:0.9; }
    100%{ transform:scale(2.1); opacity:0; }
}

/* ============================================================
   Responsive: location
   ============================================================ */
@media (max-width:56.25rem){    /* 900px */
    .location{ padding:3rem 0; }
    .location__head{ margin-bottom:2.5rem; }
    .location__panels{
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    /* знімаємо вертикальний зсув на вузьких — стопка читається рівно */
    .location__panel--office,
    .location__panel--online{ transform:none; }
}
@media (max-width:35rem){    /* 560px */
    .location__panel{ padding:1.75rem 1.5rem; }
    .location__panel-index{ top:1.25rem; right:1.5rem; font-size:2rem; }
    .location__pulse{ top:1.25rem; left:1.5rem; width:2.5rem; height:2.5rem; }
    .location__panel-title{ font-size:1.5rem; }
}

@media (prefers-reduced-motion: reduce){
    .location__node,
    .location__pulse-wave{ animation:none; }
    .location__pulse-wave{ opacity:0.4; }
    .location__panel{ transition:none; }
}

/* ============================================================
   BLOCK: prices — «Ціни» (2.7)
   Композиція (відмінна від .location та .testi): центрована редакційна
   шапка → горизонтальний «реєстр» з трьох принципів прозорості з
   гравірованими номерами → glass-панель лояльності з SVG-емблемою
   (концентричні кола через <circle>) → пара кнопок.
   Глибина 3 шари: (1) .prices__rule — фонові гравіровані лінії,
   (2) gold-glow radial, (3) .prices__container передній план.
   Ритм: 5rem 0 (80px) десктоп / 3rem 0 (48px) ≤900px.
   ============================================================ */
.prices{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    color:var(--color-cream);
    isolation:isolate;
    border-top:1px solid var(--color-line-soft);
}
/* Шар 2: gold-glow (верхній правий) */
.prices::before{
    content:"";
    position:absolute;
    z-index:0;
    top:-20%;
    right:-10%;
    width:42rem;
    height:42rem;
    pointer-events:none;
    background:radial-gradient(circle at center, rgba(186, 148, 45, 0.16), transparent 62%);
    animation:prices-glow 14s var(--ease) infinite;
}
/* Шар 2: другий, прохолодніший glow (нижній лівий) для глибини */
.prices::after{
    content:"";
    position:absolute;
    z-index:0;
    left:-12%;
    bottom:-16%;
    width:36rem;
    height:36rem;
    pointer-events:none;
    background:radial-gradient(circle at center, rgba(26, 48, 39, 0.55), transparent 64%);
    animation:prices-glow 18s var(--ease) 2s infinite reverse;
}
@keyframes prices-glow{
    0%, 100%{ transform:translate3d(0, 0, 0) scale(1); opacity:0.9; }
    50%{ transform:translate3d(-1.5rem, 1rem, 0) scale(1.08); opacity:1; }
}

/* Шар 1: вертикальна гравірована «мірна шкала» */
.prices__measure{
    position:absolute;
    z-index:0;
    top:14%;
    left:max(1.5rem, calc((100% - 72rem) / 2 - 2.5rem));
    width:2.5rem;
    height:60%;
    pointer-events:none;
    color:var(--color-gold);
    opacity:0.16;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}
.prices__measure-svg{ width:100%; height:100%; display:block; }

/* Шар 1: фонові гравіровані лінії-лінійка */
.prices__rule{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    color:var(--color-beige);
    opacity:0.10;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 22%, black 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 22%, black 80%, transparent 100%);
}
.prices__rule-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.prices__container{
    position:relative;
    z-index:1;
}

/* ---- Head (центрована) ---- */
.prices__head{
    max-width:46rem;
    margin:0 auto 3.5rem;
    text-align:center;
}
.prices__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.prices__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.prices__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.prices__title-accent{ color:var(--color-gold); }
.prices__lead{
    margin:0 auto;
    max-width:54ch;
    font-size:1.125rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Принципи: гравірований «реєстр» з лінією-зв'язком ---- */
.prices__ledger{
    position:relative;
    margin:0 0 2.5rem;
    padding-top:1.5rem;
}
/* Гравірована нитка, що поєднує записи; малюється на reveal */
.prices__ledger-thread{
    position:absolute;
    top:1.5rem;
    left:0;
    width:100%;
    height:0.5rem;
    color:var(--color-gold);
    opacity:0.4;
    pointer-events:none;
}
.prices__ledger-thread-line{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition:stroke-dashoffset 1200ms var(--ease);
}
.prices__ledger-thread.is-revealed .prices__ledger-thread-line{ stroke-dashoffset:0; }

.prices__principles{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.5rem;
}
.prices__principle{
    position:relative;
    padding:2.75rem 2rem 2.5rem;
    border:1px solid var(--color-line);
    background:rgba(20, 38, 31, 0.30);
    overflow:hidden;
}
/* Вузол на нитці-зв'язку (квадратний — без скруглень) */
.prices__principle-node{
    position:absolute;
    top:-1.5rem;
    left:2rem;
    width:0.5rem;
    height:0.5rem;
    background:var(--color-green);
    border:1px solid var(--color-gold);
    transform:rotate(45deg);
    transition:background 320ms var(--ease);
}
.prices__principle:hover .prices__principle-node{ background:var(--color-gold); }
/* Верхня gold-засічка, що розтягується на hover */
.prices__principle::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:2.5rem;
    height:2px;
    background:var(--color-gold);
    transition:width 360ms var(--ease);
}
.prices__principle:hover::before{ width:100%; }
/* М'яке внутрішнє свічення, що проявляється на hover */
.prices__principle::after{
    content:"";
    position:absolute;
    z-index:0;
    top:-30%;
    left:-20%;
    width:14rem;
    height:14rem;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(circle at center, rgba(186, 148, 45, 0.14), transparent 64%);
    transition:opacity 360ms var(--ease);
}
.prices__principle:hover::after{ opacity:1; }
.prices__principle-index{
    position:relative;
    z-index:1;
    display:block;
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-size:3rem;
    line-height:1;
    font-variant-numeric:tabular-nums;
    color:rgba(244, 237, 228, 0.14);
    transition:color 360ms var(--ease);
}
.prices__principle:hover .prices__principle-index{ color:rgba(215, 182, 92, 0.55); }
.prices__principle-title{
    position:relative;
    z-index:1;
    margin:0 0 0.875rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.5rem;
    line-height:1.14;
    letter-spacing:-0.005em;
    color:var(--color-cream);
}
.prices__principle-text{
    position:relative;
    z-index:1;
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Ціновий орієнтир: редакційний рядок із tabular-числом ---- */
.prices__anchor{
    display:flex;
    align-items:baseline;
    gap:1.25rem;
    margin:0 0 3rem;
    padding:0 0.25rem;
}
.prices__anchor-label{
    flex:0 0 auto;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:600;
    color:rgba(244, 237, 228, 0.62);
}
.prices__anchor-hair{
    flex:1 1 auto;
    height:1px;
    background:var(--color-line);
    transform:translateY(-0.25rem);
}
.prices__anchor-value{
    flex:0 0 auto;
    display:inline-flex;
    align-items:baseline;
    gap:0.5rem;
    color:var(--color-cream);
}
.prices__anchor-from{
    font-size:0.875rem;
    letter-spacing:0.04em;
    color:rgba(244, 237, 228, 0.6);
}
.prices__anchor-num{
    font-family:var(--font-display);
    font-size:clamp(2rem, 4vw, 3rem);
    line-height:1;
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
    color:var(--color-gold-2);
}
.prices__anchor-unit{
    font-size:0.875rem;
    letter-spacing:0.04em;
    color:rgba(244, 237, 228, 0.6);
}

/* ---- Лояльність: glass-панель з SVG-емблемою ---- */
.prices__loyalty{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:2rem;
    margin:0 0 3rem;
    padding:2.5rem;
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--color-line);
}
.prices__loyalty-emblem{
    width:6rem;
    height:6rem;
    flex:0 0 auto;
    color:var(--color-gold);
}
.prices__loyalty-emblem svg{ width:100%; height:100%; overflow:visible; }
.prices__loyalty-core{ fill:var(--color-gold); }
.prices__loyalty-ticks{ opacity:0.5; }
.prices__loyalty-ring{
    transform-origin:center;
    transform-box:fill-box;
}
.prices__loyalty-ring--outer{
    opacity:0.55;
    animation:prices-ring 6s var(--ease) infinite;
}
.prices__loyalty-ring--mid{
    opacity:0.85;
    animation:prices-ring 6s var(--ease) 1.2s infinite;
}
/* Орбітальний вузол — повільне обертання навколо центру емблеми */
.prices__loyalty-orbit{
    transform-origin:48px 48px;
    animation:prices-orbit 16s linear infinite;
}
.prices__loyalty-node{ fill:var(--color-gold-2); }
@keyframes prices-ring{
    0%, 100%{ transform:scale(1); opacity:0.4; }
    50%{ transform:scale(1.06); opacity:0.9; }
}
@keyframes prices-orbit{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}
.prices__loyalty-kicker{
    margin:0 0 0.625rem;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-gold);
}
.prices__loyalty-title{
    margin:0 0 0.75rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.625rem;
    line-height:1.14;
    letter-spacing:-0.005em;
    color:var(--color-cream);
}
.prices__loyalty-text{
    margin:0 0 1.5rem;
    max-width:60ch;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.74);
}
/* Тарифні «привілеї» — горизонтальний ряд гравірованих позначок */
.prices__loyalty-tiers{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem 1.5rem;
}
.prices__loyalty-tier{
    position:relative;
    padding-left:1.25rem;
    font-size:0.875rem;
    letter-spacing:0.02em;
    color:rgba(244, 237, 228, 0.82);
}
.prices__loyalty-tier::before{
    content:"";
    position:absolute;
    top:0.5rem;
    left:0;
    width:0.375rem;
    height:0.375rem;
    background:var(--color-gold);
    transform:rotate(45deg);
}

/* ---- Actions ---- */
.prices__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
}

/* ============================================================
   Responsive: prices
   ============================================================ */
@media (max-width:56.25rem){    /* 900px */
    .prices{ padding:3rem 0; }
    .prices__measure{ display:none; }
    .prices__head{ margin-bottom:2.5rem; }
    .prices__ledger-thread{ display:none; }
    .prices__principles{
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    .prices__principle-node{ left:1.5rem; }
}
@media (max-width:35rem){    /* 560px */
    .prices__principle{ padding:2rem 1.5rem; }
    .prices__anchor{
        flex-wrap:wrap;
        gap:0.75rem 1rem;
    }
    .prices__anchor-hair{ display:none; }
    .prices__loyalty{
        grid-template-columns:1fr;
        gap:1.5rem;
        padding:1.75rem 1.5rem;
        text-align:center;
    }
    .prices__loyalty-emblem{ margin:0 auto; width:4.5rem; height:4.5rem; }
    .prices__loyalty-text{ margin:0 auto 1.5rem; }
    .prices__loyalty-tiers{ justify-content:center; }
    .prices__actions{ flex-direction:column; }
    .prices__action{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
    .prices::before,
    .prices::after{ animation:none; }
    .prices__principle::before{ transition:none; }
    .prices__loyalty-ring,
    .prices__loyalty-orbit{ animation:none; opacity:0.6; }
    .prices__ledger-thread-line{ transition:none; stroke-dashoffset:0; }
}

/* ============================================================
   BLOCK: contact — ФОРМА ЗАПИТУ (v2, секція 2.8)
   Двоколонкова композиція: зліва — запрошення + гарантії,
   справа — glass-панель з формою (3 поля + сабміт).
   Глибина 3 шари: (1) .contact__seal (гравірована печатка-фон),
   (2) gold-glow radial, (3) .contact__container передній план.
   Ритм: 5rem 0 (80px) десктоп / 3rem 0 (48px) ≤900px.
   ============================================================ */
.contact{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    color:var(--color-cream);
    isolation:isolate;
    border-top:1px solid var(--color-line-soft);
}

/* Шар 1: фонова печатка — гравіровані кола праворуч */
.contact__seal{
    position:absolute;
    top:50%;
    right:-3rem;
    z-index:0;
    width:30rem;
    height:30rem;
    transform:translateY(-50%);
    pointer-events:none;
    color:var(--color-beige);
    opacity:0.10;
    -webkit-mask-image:radial-gradient(circle at center, black 40%, transparent 72%);
    mask-image:radial-gradient(circle at center, black 40%, transparent 72%);
}
.contact__seal-svg{ width:100%; height:100%; overflow:visible; }
.contact__seal-ring{ transform-origin:center; }
.contact__seal-ring--outer{ animation:contact-rotate 48s linear infinite; }
.contact__seal-ring--mid{ animation:contact-rotate 36s linear reverse infinite; }
.contact__seal-core{ fill:var(--color-gold-2); }
@keyframes contact-rotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* Шар 2: gold-glow за панеллю форми */
.contact::before{
    content:"";
    position:absolute;
    top:50%;
    right:8%;
    z-index:0;
    width:32rem;
    height:32rem;
    transform:translateY(-50%);
    pointer-events:none;
    background:radial-gradient(circle, rgba(186, 148, 45, 0.12) 0%, transparent 68%);
}

/* Шар 3: передній план — двоколонкова сітка */
.contact__container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:start;
}

/* ---- Ліва колонка: запрошення ---- */
.contact__intro{ max-width:34rem; }
.contact__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.contact__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.contact__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.contact__title-accent{ color:var(--color-gold); }
.contact__lead{
    margin:0 0 2.5rem;
    max-width:46ch;
    font-size:1.125rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Гарантії ---- */
.contact__assurances{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:1.5rem;
}
.contact__assurance{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:1rem;
    align-items:start;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line);
}
.contact__assurance-icon{
    display:inline-flex;
    width:2.5rem;
    height:2.5rem;
    color:var(--color-gold);
}
.contact__assurance-icon svg{ width:100%; height:100%; }
.contact__assurance-title{
    margin:0 0 0.5rem;
    font-family:var(--font-sans);
    font-weight:600;
    font-size:1rem;
    letter-spacing:0.01em;
    color:var(--color-cream);
}
.contact__assurance-text{
    margin:0;
    font-size:0.875rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.66);
}

/* ---- Права колонка: glass-панель з формою ---- */
.contact__panel{
    position:relative;
    padding:2.5rem;
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--color-line);
    box-shadow:0 1.5rem 3rem rgba(12, 24, 19, 0.36);
}
/* Золота капітель-лінія зверху панелі */
.contact__panel::after{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-2) 50%, transparent 100%);
}
/* Декор-шар: гравіровані кутові засічки панелі (як на бланку) */
.contact__panel-corner{
    position:absolute;
    width:1rem;
    height:1rem;
    pointer-events:none;
    z-index:1;
}
.contact__panel-corner--tl{
    top:0.75rem; left:0.75rem;
    border-top:1px solid var(--color-gold);
    border-left:1px solid var(--color-gold);
    opacity:0.7;
}
.contact__panel-corner--br{
    bottom:0.75rem; right:0.75rem;
    border-bottom:1px solid var(--color-line-strong);
    border-right:1px solid var(--color-line-strong);
}

/* ---- Editorial-шапка панелі ---- */
.contact__panel-head{
    margin:0 0 2rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--color-line);
}
.contact__panel-index{
    display:inline-flex;
    align-items:baseline;
    gap:0.25rem;
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.18em;
    color:var(--color-gold-2);
}
.contact__panel-index-mark{
    font-size:1.25rem;
    line-height:1;
}
.contact__panel-title{
    margin:0.5rem 0 0;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.5rem;
    line-height:1.1;
    color:var(--color-cream);
}
.contact__panel-sub{
    margin:0.5rem 0 0;
    font-size:0.875rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.62);
}

.contact__form{
    display:grid;
    gap:1.5rem;
}
.contact__form-note{
    margin:0;
    font-size:0.75rem;
    letter-spacing:0.02em;
    color:var(--color-sage);
}
.contact__req{ color:var(--color-gold); }

.contact__field{
    display:grid;
    gap:0.5rem;
}
.contact__label{
    display:inline-flex;
    align-items:baseline;
    gap:0.5rem;
    font-size:0.875rem;
    font-weight:500;
    letter-spacing:0.02em;
    color:var(--color-beige);
}
/* Гравірований індекс поля (editorial-нумерація бланку) */
.contact__label-no{
    font-family:var(--font-display);
    font-size:0.75rem;
    letter-spacing:0.1em;
    color:var(--color-sage);
    transition:color 0.2s var(--ease);
}
.contact__field:focus-within .contact__label-no{ color:var(--color-gold-2); }

/* Обгортка поля — носій underline та позначок стану */
.contact__control{ position:relative; }

.contact__input{
    width:100%;
    padding:0.875rem 1rem;
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.5;
    color:var(--color-cream);
    background:rgba(12, 24, 19, 0.5);
    border:1px solid var(--color-line-strong);
    transition:border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    -webkit-appearance:none;
    appearance:none;
}
.contact__input::placeholder{ color:rgba(207, 191, 177, 0.42); }
.contact__input:hover{ border-color:var(--color-beige); }
.contact__input:focus{
    outline:none;
    border-color:var(--color-gold);
    background:rgba(12, 24, 19, 0.72);
    box-shadow:inset 0 0 0 1px var(--color-gold);
}
.contact__input:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:2px;
}
.contact__textarea{
    min-height:7rem;
    resize:vertical;
    display:block;
}

/* Кінетична золота лінія, що «розкривається» з центру при фокусі */
.contact__line{
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    transform:scaleX(0);
    transform-origin:center;
    background:linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-2) 100%);
    transition:transform 0.36s var(--ease);
    pointer-events:none;
}
.contact__control:focus-within .contact__line{ transform:scaleX(1); }
/* у textarea лінія тримається біля нижнього краю контролю */
.contact__textarea ~ .contact__line{ bottom:0.375rem; }

/* Позначка стану «коректно заповнено» — золота галочка */
.contact__state{
    position:absolute;
    top:0.875rem; right:0.875rem;
    width:1.25rem;
    height:1.25rem;
    color:var(--color-gold-2);
    opacity:0;
    transform:scale(0.6);
    transition:opacity 0.24s var(--ease), transform 0.24s var(--ease);
    pointer-events:none;
}
.contact__state-ok{ width:100%; height:100%; }
.contact__field.is-valid .contact__state{ opacity:1; transform:scale(1); }
/* галочку не показуємо, поки поле у фокусі (щоб не заважати вводу) */
.contact__field.is-valid .contact__control:focus-within .contact__state{ opacity:0; }

/* ---- Кастомний select ---- */
.contact__select{
    padding-right:2.75rem;
    cursor:pointer;
}
.contact__select-mark{
    position:absolute;
    top:50%;
    right:1rem;
    width:1rem;
    height:1rem;
    transform:translateY(-50%);
    color:var(--color-beige);
    pointer-events:none;
    transition:color 0.2s var(--ease), transform 0.2s var(--ease);
}
.contact__select-mark svg{ width:100%; height:100%; }
.contact__control--select:focus-within .contact__select-mark{ color:var(--color-gold-2); }
.contact__select option{
    background:var(--color-green-2);
    color:var(--color-cream);
}

/* Стан помилки поля */
.contact__field.is-invalid .contact__input{
    border-color:var(--color-gold);
    background:rgba(186, 148, 45, 0.08);
}
.contact__field.is-invalid .contact__line{
    transform:scaleX(1);
    background:var(--color-gold);
}

/* Нижній рядок поля: помилка + лічильник */
.contact__field-foot{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
}
.contact__error{
    min-height:1rem;
    font-size:0.75rem;
    line-height:1.4;
    color:var(--color-gold-2);
}
.contact__field.is-invalid .contact__error{
    animation:contact-err-in 0.28s var(--ease) both;
}
@keyframes contact-err-in{
    from{ opacity:0; transform:translateY(-0.25rem); }
    to{ opacity:1; transform:translateY(0); }
}
.contact__count{
    flex:0 0 auto;
    font-size:0.75rem;
    letter-spacing:0.04em;
    color:var(--color-sage);
    font-variant-numeric:tabular-nums;
}

.contact__submit{ width:100%; margin-top:0.5rem; }

.contact__privacy{
    margin:0;
    font-size:0.75rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.5);
}

/* ---- Екран-подяка ---- */
.contact__thanks{
    display:flex;
    align-items:flex-start;
    gap:1rem;
    margin:0;
    padding:1.5rem;
    background:rgba(186, 148, 45, 0.1);
    border:1px solid var(--color-line-strong);
    animation:contact-thanks-in 0.4s var(--ease) both;
}
.contact__thanks[hidden]{ display:none; }
@keyframes contact-thanks-in{
    from{ opacity:0; transform:translateY(0.75rem); }
    to{ opacity:1; transform:translateY(0); }
}
.contact__thanks-mark{
    flex:0 0 auto;
    width:3rem;
    height:3rem;
    color:var(--color-gold-2);
}
.contact__thanks-mark svg{ width:100%; height:100%; }
.contact__thanks-ring{ opacity:0.4; }
.contact__thanks-check{
    stroke-dasharray:48;
    stroke-dashoffset:48;
    animation:contact-check 0.5s var(--ease) 0.2s forwards;
}
@keyframes contact-check{ to{ stroke-dashoffset:0; } }
.contact__thanks-body{ display:grid; gap:0.25rem; }
.contact__thanks-title{
    font-family:var(--font-display);
    font-size:1.125rem;
    line-height:1.2;
    color:var(--color-cream);
}
.contact__thanks-text{
    margin:0;
    font-size:0.875rem;
    line-height:1.55;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Адаптив ---- */
@media (max-width:56.25rem){    /* 900px — одна колонка */
    .contact{ padding:3rem 0; }
    .contact__container{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .contact__intro{ max-width:none; }
    .contact__seal{ right:-6rem; opacity:0.06; }
    .contact::before{ right:-10%; }
}
@media (max-width:35rem){       /* 560px */
    .contact__panel{ padding:1.75rem 1.5rem; }
    .contact__lead{ margin-bottom:2rem; }
    .contact__panel-head{ margin-bottom:1.5rem; }
}

@media (prefers-reduced-motion: reduce){
    .contact__seal-ring--outer,
    .contact__seal-ring--mid{ animation:none; }
    .contact__input,
    .contact__line,
    .contact__state,
    .contact__label-no,
    .contact__select-mark{ transition:none; }
    .contact__line{ transition:none; }
    .contact__error,
    .contact__thanks{ animation:none; }
    .contact__thanks-check{ animation:none; stroke-dashoffset:0; }
}

/* ============================================================
   BLOCK: faq
   Композиція: дві колонки — sticky-інтро ліворуч,
   акордеон на нативних <details>/<summary> праворуч.
   Тема v2: cream-on-green, gold-акцент, гравірований знак «§».
   ============================================================ */
.faq{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    color:var(--color-cream);
    isolation:isolate;
    border-top:1px solid var(--color-line-soft);
}
/* Шар 2: тонкий gold-glow ліворуч-знизу */
.faq::before{
    content:"";
    position:absolute;
    z-index:0;
    bottom:-18%;
    left:-12%;
    width:40rem;
    height:40rem;
    pointer-events:none;
    background:radial-gradient(circle at center, rgba(186, 148, 45, 0.14), transparent 64%);
}
/* Шар 2b: верхня hairline-тінь — підкреслює стик секцій */
.faq::after{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    right:0;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--color-line-strong) 22%, var(--color-line-strong) 78%, transparent);
}

/* Шар 0: гравірований guilloché — концентричні дуги праворуч-зверху */
.faq__guilloche{
    position:absolute;
    z-index:0;
    top:-14rem;
    right:-16rem;
    width:44rem;
    height:44rem;
    pointer-events:none;
    color:var(--color-beige);
    opacity:0.05;
}
.faq__guilloche-svg{
    width:100%;
    height:100%;
}
.faq__arc{
    transform-origin:300px 300px;
    transform:scale(1);
    transition:transform 0.6s var(--ease);
}
/* дихання дуг при наведенні на список */
.faq__list:hover ~ .faq__guilloche,
.faq:hover .faq__arc:nth-of-type(2){ transform:scale(1.02); }
.faq:hover .faq__arc:nth-of-type(4){ transform:scale(0.985); }

/* Шар 1: фоновий гравірований знак «§» */
.faq__mark{
    position:absolute;
    z-index:0;
    top:50%;
    right:-4rem;
    width:24rem;
    height:32rem;
    transform:translateY(-50%);
    pointer-events:none;
    color:var(--color-beige);
    opacity:0.07;
}
.faq__mark-svg{
    width:100%;
    height:100%;
}
.faq__mark-glyph{
    font-family:var(--font-display);
    font-size:9rem;
    fill:currentColor;
}

.faq__container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap:3rem;
    align-items:start;
}

/* ---- Ліва колонка: інтро ---- */
.faq__head{
    position:sticky;
    top:7.5rem;          /* нижче острівного хедера */
    align-self:start;
}
.faq__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.faq__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.faq__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.faq__title-accent{ color:var(--color-gold); }
.faq__lead{
    margin:0 0 2rem;
    max-width:42ch;
    font-size:1.125rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
}

/* Шар 3: kinetic-лічильник активного питання */
.faq__counter{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:0 0 2rem;
    font-family:var(--font-display);
    line-height:1;
}
.faq__counter-current{
    display:inline-block;
    min-width:1.75rem;
    font-size:2rem;
    color:var(--color-gold-2);
    font-variant-numeric:tabular-nums;
    transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__counter-current.is-ticking{
    transform:translateY(-0.25rem);
    opacity:0;
}
.faq__counter-sep{
    display:block;
    width:2.5rem;
    height:0.75rem;
    color:var(--color-line-strong);
}
.faq__counter-sep svg{ display:block; width:100%; height:100%; }
.faq__counter-line--fill{
    color:var(--color-gold);
    transform-origin:left center;
    transform:scaleX(var(--faq-progress, 0.11));
    transition:transform 0.4s var(--ease);
}
.faq__counter-total{
    font-size:1rem;
    color:var(--color-sage);
    font-variant-numeric:tabular-nums;
}

.faq__action{ align-self:flex-start; }

/* Шар 3: контакт-картка під CTA */
.faq__aside{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line-soft);
    max-width:38ch;
}
.faq__aside-dot{
    display:block;
    flex:none;
    width:1rem;
    height:1rem;
    margin-top:0.25rem;
    color:var(--color-gold-2);
}
.faq__aside-dot svg{ display:block; width:100%; height:100%; }
.faq__aside-pulse{ transform-origin:center; }
.faq__aside-text{
    margin:0;
    font-size:0.875rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.62);
}
.faq__aside-link{
    color:var(--color-gold-2);
    text-decoration:none;
    border-bottom:1px solid var(--color-line-strong);
    transition:border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.faq__aside-link:hover{
    color:var(--color-gold);
    border-color:var(--color-gold);
}

/* ---- Права колонка: акордеон ---- */
.faq__list{
    border-top:1px solid var(--color-line);
}
.faq__item{
    position:relative;
    border-bottom:1px solid var(--color-line);
    transition:background-color 0.3s var(--ease);
}
/* тонке gold-підсвічування активного питання */
.faq__item[open]{
    background:linear-gradient(90deg, rgba(186, 148, 45, 0.05), transparent 70%);
}

/* summary — рядок-тригер */
.faq__summary{
    position:relative;
    display:grid;
    grid-template-columns:0.5rem auto 1fr auto;
    align-items:center;
    gap:1.5rem;
    padding:1.5rem 0.5rem 1.5rem 0;
    cursor:pointer;
    list-style:none;
    transition:color 0.2s var(--ease);
}
.faq__summary::-webkit-details-marker{ display:none; }
.faq__summary:focus-visible{
    outline:2px solid var(--color-gold);
    outline-offset:0.25rem;
}

/* вертикальний gold-bar, що виростає при hover/open */
.faq__bar{
    align-self:stretch;
    width:2px;
    background:var(--color-gold);
    transform:scaleY(0);
    transform-origin:center;
    opacity:0;
    transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__summary:hover .faq__bar{
    transform:scaleY(0.45);
    opacity:0.5;
}
.faq__item[open] .faq__bar{
    transform:scaleY(1);
    opacity:1;
}

.faq__index{
    font-family:var(--font-display);
    font-size:0.875rem;
    line-height:1;
    color:var(--color-gold);
    letter-spacing:0.06em;
    transition:transform 0.3s var(--ease), color 0.2s var(--ease);
}
.faq__summary:hover .faq__index{ transform:translateX(2px); }

.faq__body{
    display:flex;
    flex-direction:column;
    gap:0.375rem;
    min-width:0;
}
.faq__meta{
    font-size:0.625rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-sage);
    /* прихована до hover/open — surprise-шар */
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-4px);
    transition:max-height 0.32s var(--ease), opacity 0.28s var(--ease), transform 0.32s var(--ease), color 0.2s var(--ease);
}
.faq__summary:hover .faq__meta,
.faq__item[open] .faq__meta{
    max-height:1.5rem;
    opacity:1;
    transform:translateY(0);
}
.faq__item[open] .faq__meta{ color:var(--color-gold-2); }

.faq__question{
    font-size:1.125rem;
    line-height:1.4;
    font-weight:500;
    color:inherit;
    text-wrap:balance;
    transition:color 0.2s var(--ease), transform 0.3s var(--ease);
}
.faq__summary:hover .faq__question{
    color:var(--color-gold-2);
    transform:translateX(4px);
}

/* індикатор +/− (SVG-коло, без border-radius) */
.faq__indicator{
    display:block;
    width:1.75rem;
    height:1.75rem;
    flex:none;
    color:var(--color-beige);
    transition:color 0.2s var(--ease), transform 0.4s var(--ease);
}
.faq__indicator svg{ display:block; width:100%; height:100%; }
.faq__indicator-h,
.faq__indicator-v{
    transform-origin:center;
    transition:transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.faq__summary:hover .faq__indicator{
    color:var(--color-gold-2);
    transform:rotate(90deg);
}
/* у відкритому стані «+» стає «−»: ховаємо вертикальну риску, коло обертається */
.faq__item[open] .faq__indicator{
    color:var(--color-gold-2);
    transform:rotate(180deg);
}
.faq__item[open] .faq__indicator-v{
    transform:scaleY(0);
    opacity:0;
}
.faq__item[open] .faq__index{ color:var(--color-gold-2); }
.faq__item[open] .faq__question{ color:var(--color-cream); }

/* відповідь */
.faq__answer{
    padding:0 4rem 1.75rem 3.25rem;   /* вирівняно під текст питання */
}
.faq__answer p{
    position:relative;
    margin:0;
    max-width:62ch;
    padding-left:1.25rem;
    font-size:1rem;
    line-height:1.7;
    color:rgba(244, 237, 228, 0.78);
    /* тонка вертикальна цитатна лінія ліворуч від відповіді */
    border-left:1px solid var(--color-line);
}

/* плавне розкриття контенту, де браузер підтримує */
@supports (interpolate-size: allow-keywords){
    .faq__item{
        interpolate-size:allow-keywords;
    }
    .faq__item::details-content{
        height:0;
        overflow:hidden;
        opacity:0;
        transition:height 0.32s var(--ease), opacity 0.32s var(--ease), content-visibility 0.32s allow-discrete;
    }
    .faq__item[open]::details-content{
        height:auto;
        opacity:1;
    }
}

/* ---- Адаптив ---- */
@media (max-width:56.25rem){    /* 900px — одна колонка */
    .faq{ padding:3rem 0; }
    .faq__container{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .faq__head{
        position:static;
        max-width:none;
    }
    .faq__lead{ max-width:none; }
    .faq__mark{ right:-8rem; opacity:0.05; }
    .faq__guilloche{ top:-10rem; right:-22rem; }
    .faq__counter{ display:none; }   /* лічильник прив'язаний до sticky-скролу */
}
@media (max-width:35rem){       /* 560px */
    .faq__summary{
        grid-template-columns:0.375rem auto 1fr auto;
        gap:1rem;
        padding:1.25rem 0.5rem 1.25rem 0;
    }
    .faq__question{ font-size:1rem; }
    .faq__answer{ padding:0 0 1.5rem 2.25rem; }
}

@media (prefers-reduced-motion: reduce){
    .faq__summary,
    .faq__index,
    .faq__question,
    .faq__bar,
    .faq__meta,
    .faq__arc,
    .faq__counter-current,
    .faq__counter-line--fill,
    .faq__indicator,
    .faq__indicator-h,
    .faq__indicator-v{ transition:none; }
    .faq__summary:hover .faq__indicator,
    .faq__item[open] .faq__indicator{ transform:none; }
    .faq__summary:hover .faq__question,
    .faq__summary:hover .faq__index{ transform:none; }
    @supports (interpolate-size: allow-keywords){
        .faq__item::details-content{ transition:none; }
    }
}

/* ============================================================
   BLOCK: clients — «Наші клієнти» (v2)
   Етичний підхід: жодних фейкових логотипів. Інтро + гравіровані
   сегменти клієнтів + реєстр довіри з count-up + принцип
   конфіденційності + CTA.
   Глибина: фон (кільця, меридіанна сітка, gold-glow) — шар 1;
   сегменти/реєстр/принцип — шар 2; інтро/CTA — шар 3.
   ============================================================ */
.clients{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    color:var(--color-cream);
    isolation:isolate;
    border-top:1px solid var(--color-line-soft);
}
/* Шар 1: gold-glow праворуч-зверху */
.clients::before{
    content:"";
    position:absolute;
    z-index:0;
    top:-16%;
    right:-10%;
    width:38rem;
    height:38rem;
    pointer-events:none;
    background:radial-gradient(circle at center, rgba(186, 148, 45, 0.12), transparent 64%);
}
/* Шар 1: гравіровані кільця ліворуч */
.clients__mark{
    position:absolute;
    z-index:0;
    top:50%;
    left:-6rem;
    width:28rem;
    height:28rem;
    transform:translateY(-50%);
    pointer-events:none;
    color:var(--color-beige);
    opacity:0.06;
}
.clients__mark-svg{ width:100%; height:100%; }
.clients__mark-ring{
    transform-origin:160px 160px;
    animation:clients-ring-rotate 64s linear infinite;
}
.clients__mark-ring--inner{ animation-duration:48s; animation-direction:reverse; }
.clients__mark-ring--core{ animation-duration:36s; }
@keyframes clients-ring-rotate{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(360deg); }
}

/* Шар 1: меридіанна сітка праворуч */
.clients__grid{
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    width:12rem;
    height:100%;
    pointer-events:none;
    color:var(--color-beige);
    opacity:0.05;
}
.clients__grid-svg{ width:100%; height:100%; }

.clients__container{
    position:relative;
    z-index:1;
}

/* ---- Інтро (шар 3) ---- */
.clients__head{ max-width:48rem; }
.clients__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.clients__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.clients__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.clients__title-accent{ color:var(--color-gold); }
.clients__lead{
    margin:0;
    max-width:54ch;
    font-size:1.125rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
}

/* ---- Сегменти клієнтів (шар 2): гравіровані картки ---- */
.clients__segments{
    list-style:none;
    margin:3rem 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
}
.clients__segment{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:1rem;
    padding:1.25rem 1.5rem;
    border:1px solid var(--color-line);
    background:rgba(207, 191, 177, 0.04);
    overflow:hidden;
    transition:border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
/* gold-нитка, що проступає зліва на hover */
.clients__segment::before{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    width:2px;
    height:100%;
    background:var(--color-gold);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 0.4s var(--ease);
}
.clients__segment:hover{
    border-color:var(--color-line-strong);
    background:rgba(186, 148, 45, 0.07);
    transform:translateY(-0.25rem);
}
.clients__segment:hover::before{ transform:scaleY(1); }

.clients__segment-mark{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:2.5rem;       /* 40px */
    height:2.5rem;      /* 40px */
    color:var(--color-gold-2);
    opacity:0.78;
    transition:color 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.clients__segment-mark svg{ display:block; width:100%; height:100%; }
.clients__segment:hover .clients__segment-mark{
    color:var(--color-gold);
    opacity:1;
    transform:scale(1.06);
}
.clients__segment-body{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:0.375rem;
}
.clients__segment-name{
    font-family:var(--font-display);
    font-size:1.25rem;
    line-height:1.2;
    color:var(--color-cream);
}
.clients__segment-note{
    font-size:0.875rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.62);
}

/* ---- Реєстр довіри (шар 2): count-up ---- */
.clients__ledger{
    margin-top:3rem;
    padding:2rem 0 0;
    border-top:1px solid var(--color-line);
}
.clients__ledger-caption{
    margin:0 0 1.75rem;
    font-size:0.75rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--color-sage);
}
.clients__stats{
    margin:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem;
}
.clients__stat{
    position:relative;
    padding-left:1.25rem;
    border-left:1px solid var(--color-line);
}
.clients__stat-label{
    margin:0 0 0.75rem;
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.6);
}
.clients__stat-value{
    margin:0;
    display:flex;
    align-items:baseline;
    gap:0.125rem;
    font-family:var(--font-display);
    font-weight:400;
    line-height:1;
    color:var(--color-cream);
}
.clients__stat-num{
    font-size:clamp(2.5rem, 4vw, 3.5rem);
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
}
.clients__stat-suffix{
    font-size:clamp(1.5rem, 2.5vw, 2rem);
    color:var(--color-gold);
}
.clients__stat-foot{
    margin:0.75rem 0 0;
    font-size:0.875rem;
    line-height:1.45;
    color:rgba(244, 237, 228, 0.56);
}

/* ---- Принцип конфіденційності (шар 2) ---- */
.clients__pledge{
    margin-top:3rem;
    display:flex;
    align-items:center;
    gap:1.25rem;
    padding:1.5rem 1.75rem;
    border:1px solid var(--color-line);
    background:linear-gradient(90deg, rgba(186, 148, 45, 0.07), rgba(207, 191, 177, 0.02));
}
.clients__pledge-mark{
    flex:0 0 auto;
    width:2.5rem;
    height:2.5rem;
    color:var(--color-gold-2);
}
.clients__pledge-mark svg{ display:block; width:100%; height:100%; }
.clients__pledge-text{
    margin:0;
    font-size:1.125rem;
    line-height:1.55;
    color:rgba(244, 237, 228, 0.78);
}
.clients__pledge-accent{
    display:block;
    margin-top:0.25rem;
    font-family:var(--font-display);
    color:var(--color-cream);
}

/* ---- CTA (шар 3) ---- */
.clients__cta{
    margin-top:3rem;
    display:flex;
    align-items:center;
    gap:1.5rem;
    flex-wrap:wrap;
}
.clients__cta-note{
    margin:0;
    max-width:28ch;
    font-size:0.875rem;
    line-height:1.5;
    color:var(--color-sage);
}

/* ---- Адаптив ---- */
@media (max-width:56.25rem){    /* 900px */
    .clients{ padding:3rem 0; }
    .clients__mark{ left:-8rem; opacity:0.045; }
    .clients__grid{ opacity:0.035; }
    .clients__segments{ margin-top:2rem; gap:0.75rem; }
    .clients__ledger{ margin-top:2.5rem; }
    .clients__stats{ grid-template-columns:repeat(2, 1fr); gap:1.5rem 1.25rem; }
    .clients__pledge{ margin-top:2.5rem; }
    .clients__cta{ margin-top:2.5rem; }
}
@media (max-width:35rem){       /* 560px */
    .clients__lead{ font-size:1rem; }
    .clients__segments{ grid-template-columns:1fr; }
    .clients__segment{ padding:1rem 1.25rem; gap:0.875rem; }
    .clients__segment-name{ font-size:1.125rem; }
    .clients__stats{ grid-template-columns:1fr 1fr; gap:1.25rem 1rem; }
    .clients__stat{ padding-left:1rem; }
    .clients__pledge{ flex-direction:column; align-items:flex-start; gap:1rem; padding:1.25rem; }
    .clients__pledge-text{ font-size:1rem; }
    .clients__cta{ flex-direction:column; align-items:stretch; gap:1rem; }
    .clients__cta .button{ width:100%; }
    .clients__cta-note{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
    .clients__mark-ring{ animation:none; }
    .clients__segment,
    .clients__segment-mark,
    .clients__segment::before{ transition:none; }
}

/* ============================================================
   FOOTER (v2 / 2.11) — преміальна багатоколонкова композиція
   BEM-корінь .site-footer. Жодних border-radius (кола — SVG <circle>).
   ============================================================ */
.site-footer{
    position:relative;
    margin-top:6rem;
    padding:4rem 0 2rem;
    background:
        radial-gradient(120% 80% at 78% 0%, rgba(26, 48, 39, 0.65) 0%, rgba(26, 48, 39, 0) 58%),
        linear-gradient(180deg,
            rgba(12, 24, 19, 0) 0%,
            var(--color-green-2) 24%,
            var(--color-green) 100%
        );
    border-top:1px solid var(--color-line);
    color:var(--color-beige);
    overflow:hidden;
    isolation:isolate;
}

/* Тонка золота лінія-акцент уздовж верхньої межі */
.site-footer::before{
    content:"";
    position:absolute;
    top:-1px; left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,
        rgba(186, 148, 45, 0) 0%,
        var(--color-gold) 50%,
        rgba(186, 148, 45, 0) 100%
    );
    opacity:0.5;
    z-index:2;
}

/* ============================================================
   ШАР 1 · ДЕКОРАТИВНЕ ТЛО
   ============================================================ */
.site-footer__decor{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

/* Aurora-світіння — два повільні дихаючі плями */
.site-footer__glow{
    position:absolute;
    width:42rem;
    height:42rem;
    border-radius:0;          /* кола формуємо радіальним градієнтом, не radius */
    background:radial-gradient(circle at center,
        rgba(186, 148, 45, 0.16) 0%,
        rgba(186, 148, 45, 0.06) 32%,
        rgba(186, 148, 45, 0) 68%);
    filter:blur(8px);
}
.site-footer__glow--a{
    top:-14rem; right:-8rem;
    animation:footer-glow 22s ease-in-out infinite;
}
.site-footer__glow--b{
    bottom:-18rem; left:-12rem;
    width:34rem; height:34rem;
    background:radial-gradient(circle at center,
        rgba(90, 105, 96, 0.22) 0%,
        rgba(90, 105, 96, 0) 64%);
    animation:footer-glow 28s ease-in-out infinite reverse;
}
@keyframes footer-glow{
    0%,100%{ transform:translate3d(0, 0, 0) scale(1); opacity:0.9; }
    50%{ transform:translate3d(-2rem, 1.5rem, 0) scale(1.08); opacity:1; }
}

/* Гігантський водяний знак-монограм, повільний дрейф */
.site-footer__watermark{
    position:absolute;
    left:50%;
    bottom:-2.5rem;
    transform:translateX(-50%);
    font-family:var(--font-display);
    font-size:clamp(8rem, 24vw, 22rem);
    line-height:0.8;
    letter-spacing:0.02em;
    white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1px rgba(207, 191, 177, 0.07);
    text-stroke:1px rgba(207, 191, 177, 0.07);
    user-select:none;
    animation:footer-drift 30s ease-in-out infinite;
}
@keyframes footer-drift{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-52%) translateY(-0.75rem); }
}

/* Кутова марка-герб: ваги правосуддя + меридіанне коло */
.site-footer__seal{
    position:absolute;
    top:3rem; right:-3rem;
    width:18rem; height:18rem;
    color:var(--color-gold);
    opacity:0.16;
}
.site-footer__seal-ring--inner{
    transform-origin:100px 100px;
    animation:footer-seal-spin 60s linear infinite;
}
.site-footer__seal-ring--outer{
    transform-origin:100px 100px;
    animation:footer-seal-spin 90s linear infinite reverse;
}
@keyframes footer-seal-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* Контент завжди над декором */
.site-footer__container{
    position:relative;
    z-index:1;
}

/* ============================================================
   ШАР 2 · ФІНАЛЬНИЙ КІНЕТИЧНИЙ АКОРД
   ============================================================ */
.site-footer__chord{
    padding-bottom:3rem;
    margin-bottom:1rem;
}
.site-footer__chord-eyebrow{
    margin:0 0 1rem;
    font-size:0.75rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-sage);
}
.site-footer__chord-title{
    margin:0;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(2.5rem, 6vw, 5rem);
    line-height:1.02;
    letter-spacing:-0.01em;
    color:var(--color-cream);
}
.site-footer__chord-word{
    display:inline-block;
    margin-right:0.25rem;
}
.site-footer__chord-word--accent{
    color:var(--color-gold-2);
    position:relative;
}
.site-footer__chord-word--accent::after{
    content:"";
    position:absolute;
    left:0; bottom:0.125rem;
    width:100%; height:2px;
    background:linear-gradient(90deg, var(--color-gold) 0%, rgba(186, 148, 45, 0) 100%);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.9s var(--ease) 0.4s;
}
.site-footer__chord.is-revealed .site-footer__chord-word--accent::after{ transform:scaleX(1); }

/* --- Верхня смуга: бренд + CTA --- */
.site-footer__top{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:2.5rem;
    padding-bottom:3rem;
    border-bottom:1px solid var(--color-line-soft);
}

.site-footer__brand{
    max-width:32rem;
}
.site-footer__brand-link{
    display:inline-block;
    transition:opacity 0.3s var(--ease);
}
.site-footer__brand-link:hover{ opacity:0.82; }
.site-footer__brand-logo{
    width:auto;
    height:3.5rem;
}
.site-footer__slogan{
    margin:1.5rem 0 0;
    max-width:30rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}

.site-footer__cta{
    flex:0 1 22rem;
    text-align:right;
}
.site-footer__cta-eyebrow{
    display:block;
    margin-bottom:0.5rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:600;
}
.site-footer__cta-text{
    margin:0 0 1.5rem;
    margin-left:auto;
    max-width:22rem;
    font-size:1rem;
    line-height:1.55;
    color:rgba(244, 237, 228, 0.78);
}

/* --- Сітка колонок --- */
.site-footer__grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:3rem;
    padding:3rem 0;
}

.site-footer__col{ min-width:0; }

.site-footer__title{
    margin:0 0 1.5rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.25rem;
    line-height:1.2;
    letter-spacing:0.01em;
    color:var(--color-cream);
}

/* Контакти */
.site-footer__contacts{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}
.site-footer__contact{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}
.site-footer__contact-label{
    font-size:0.75rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-sage);
    font-weight:600;
}
.site-footer__contact-value{
    font-size:1rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.82);
}
.site-footer__contact-link{
    position:relative;
    align-self:flex-start;
    font-size:1rem;
    color:var(--color-cream);
    transition:color 0.3s var(--ease);
}
.site-footer__contact-link::after{
    content:"";
    position:absolute;
    left:0; bottom:-0.125rem;
    width:100%;
    height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.35s var(--ease);
}
.site-footer__contact-link:hover{ color:var(--color-gold-2); }
.site-footer__contact-link:hover::after{ transform:scaleX(1); }

/* Соцмережі */
.site-footer__social{
    display:flex;
    gap:0.75rem;
    margin-top:2rem;
}
.site-footer__social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    color:var(--color-beige);
    border:1px solid var(--color-line);
    transition:color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.site-footer__social-link:hover{
    color:var(--color-green);
    background:var(--color-gold);
    border-color:var(--color-gold);
    transform:translateY(-2px);
}
.site-footer__social-icon{
    width:1.25rem;
    height:1.25rem;
    display:block;
}

/* Сторінки */
.site-footer__links{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}
.site-footer__link{
    position:relative;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    align-self:flex-start;
    font-size:1rem;
    color:rgba(244, 237, 228, 0.78);
    transition:color 0.3s var(--ease), transform 0.3s var(--ease);
}
.site-footer__link-index{
    font-family:var(--font-display);
    font-size:0.75rem;
    letter-spacing:0.05em;
    color:var(--color-sage);
    transition:color 0.3s var(--ease);
}
.site-footer__link-text{
    position:relative;
}
.site-footer__link-text::after{
    content:"";
    position:absolute;
    left:0; bottom:-0.125rem;
    width:100%; height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.32s var(--ease);
}
.site-footer__link:hover{
    color:var(--color-cream);
    transform:translateX(0.375rem);
}
.site-footer__link:hover .site-footer__link-index{ color:var(--color-gold-2); }
.site-footer__link:hover .site-footer__link-text::after{ transform:scaleX(1); }

/* Акцент-колонка */
.site-footer__col--accent{
    position:relative;
    padding:1.5rem;
    background:rgba(20, 38, 31, 0.5);
    border:1px solid var(--color-line);
    overflow:hidden;
    transition:border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.site-footer__col--accent::after{
    content:"";
    position:absolute;
    top:-50%; right:-30%;
    width:18rem; height:18rem;
    background:radial-gradient(circle at center, rgba(186, 148, 45, 0.18) 0%, rgba(186, 148, 45, 0) 60%);
    opacity:0;
    transition:opacity 0.5s var(--ease);
    pointer-events:none;
}
.site-footer__col--accent:hover{
    border-color:var(--color-line-strong);
    background:rgba(26, 48, 39, 0.6);
}
.site-footer__col--accent:hover::after{ opacity:1; }
.site-footer__accent-mark{
    display:block;
    width:2rem; height:2rem;
    margin-bottom:1rem;
    color:var(--color-gold-2);
}
.site-footer__accent-mark svg{ width:100%; height:100%; display:block; }
.site-footer__accent-text{
    margin:0 0 1.5rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.78);
}
.site-footer__accent-link{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.875rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-gold-2);
    transition:color 0.3s var(--ease), gap 0.3s var(--ease);
}
.site-footer__accent-link:hover{
    color:var(--color-cream);
    gap:0.875rem;
}
.site-footer__accent-arrow{
    width:1.25rem;
    height:1.25rem;
    display:block;
}

/* --- Нижній рядок --- */
.site-footer__bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding-top:2rem;
    border-top:1px solid var(--color-line-soft);
}
.site-footer__copy{
    margin:0;
    font-size:0.875rem;
    color:var(--color-sage);
}
.site-footer__legal{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}
.site-footer__legal-link{
    position:relative;
    font-size:0.875rem;
    color:rgba(244, 237, 228, 0.7);
    transition:color 0.3s var(--ease);
}
.site-footer__legal-link::after{
    content:"";
    position:absolute;
    left:0; bottom:-0.125rem;
    width:100%;
    height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.35s var(--ease);
}
.site-footer__legal-link:hover{ color:var(--color-cream); }
.site-footer__legal-link:hover::after{ transform:scaleX(1); }

/* Back-to-top: меридіанний компас */
.site-footer__totop{
    display:inline-flex;
    align-items:center;
    gap:0.625rem;
    margin-left:auto;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-sage);
    transition:color 0.3s var(--ease);
}
.site-footer__totop-compass{
    width:2.5rem; height:2.5rem;
    color:var(--color-line-strong);
    transition:color 0.4s var(--ease);
}
.site-footer__totop-needle{
    color:var(--color-gold);
    transform-origin:20px 20px;
    transition:transform 0.6s var(--ease), color 0.4s var(--ease);
}
.site-footer__totop:hover{ color:var(--color-cream); }
.site-footer__totop:hover .site-footer__totop-compass{ color:var(--color-gold-2); }
.site-footer__totop:hover .site-footer__totop-needle{ transform:rotate(360deg); }

/* Доступність: видимий фокус */
.site-footer a:focus-visible,
.site-footer__social-link:focus-visible{
    outline:2px solid var(--color-gold);
    outline-offset:3px;
}

/* --- Адаптив ≤900px --- */
@media (max-width:56.25rem){
    .site-footer{
        margin-top:4rem;
        padding:3rem 0 2rem;
    }
    .site-footer__chord{ padding-bottom:2.5rem; }
    .site-footer__seal{
        top:auto; bottom:8rem; right:-6rem;
        width:14rem; height:14rem;
    }
    .site-footer__top{
        flex-direction:column;
        gap:2rem;
    }
    .site-footer__cta{
        flex:1 1 auto;
        text-align:left;
    }
    .site-footer__cta-text{ margin-left:0; }
    .site-footer__grid{
        grid-template-columns:1fr 1fr;
        gap:2.5rem;
    }
    .site-footer__col--contacts{ grid-column:1 / -1; }
}

/* --- Адаптив ≤560px --- */
@media (max-width:35rem){
    .site-footer__chord-title{ font-size:clamp(2.25rem, 11vw, 3rem); }
    .site-footer__seal{ display:none; }
    .site-footer__watermark{ font-size:clamp(7rem, 36vw, 11rem); bottom:-1.5rem; }
    .site-footer__grid{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .site-footer__col--contacts{ grid-column:auto; }
    .site-footer__bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:1.25rem;
    }
    .site-footer__legal{ gap:1.25rem; }
    .site-footer__totop{ margin-left:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .site-footer__brand-link,
    .site-footer__contact-link,
    .site-footer__contact-link::after,
    .site-footer__social-link,
    .site-footer__link,
    .site-footer__link-index,
    .site-footer__link-text::after,
    .site-footer__col--accent,
    .site-footer__col--accent::after,
    .site-footer__accent-link,
    .site-footer__legal-link,
    .site-footer__legal-link::after,
    .site-footer__chord-word--accent::after,
    .site-footer__totop,
    .site-footer__totop-compass,
    .site-footer__totop-needle{
        transition:none;
    }
    .site-footer__social-link:hover{ transform:none; }
    .site-footer__link:hover{ transform:none; }
    .site-footer__totop:hover .site-footer__totop-needle{ transform:none; }
    .site-footer__glow--a,
    .site-footer__glow--b,
    .site-footer__watermark,
    .site-footer__seal-ring--inner,
    .site-footer__seal-ring--outer{
        animation:none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL-REVEAL — стримана cinematic поява під час скролу.
   Базовий стан невидимий + лёгкий зсув знизу; .is-revealed (JS)
   повертає у фінал. Лише opacity/transform для GPU-перформансу.
   Варіанти --d* дають стаггер усередині однієї секції.
═══════════════════════════════════════════════════════════════════════ */
.reveal{
    opacity:0;
    transform:translateY(1.5rem);    /* 24px */
    transition:opacity 700ms var(--ease), transform 700ms var(--ease);
    will-change:opacity, transform;
}
.reveal.is-revealed{
    opacity:1;
    transform:none;
}
.reveal--d1{ transition-delay:90ms; }
.reveal--d2{ transition-delay:180ms; }
.reveal--d3{ transition-delay:270ms; }
.reveal--d4{ transition-delay:360ms; }
.reveal--d5{ transition-delay:450ms; }

/* Посилені мікровзаємодії нових секцій — стримано, преміально.
   Лише transform/opacity; без border-radius, без зміни :root. */
.location__panel{ transition:border-color 320ms var(--ease), transform 320ms var(--ease); }
.location__panel:hover{ transform:translateY(-0.25rem); }

.prices__principle{ transition:border-color 320ms var(--ease), transform 320ms var(--ease); }
.prices__principle:hover{ transform:translateY(-0.25rem); }


@media (prefers-reduced-motion: reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
        will-change:auto;
    }
    .reveal--d1,
    .reveal--d2,
    .reveal--d3,
    .reveal--d4,
    .reveal--d5{ transition-delay:0ms; }
    .location__panel,
    .prices__principle{ transition:border-color 320ms var(--ease); }
    .location__panel:hover,
    .prices__principle:hover,
    .clients__segment:hover{ transform:none; }
}