/* [v4] mobile no horizontal scroll */
html, body{ max-width:100%; overflow-x:hidden; }

/* ============================================================
   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:var(--color-green);
    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;
    white-space:nowrap;
    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;
    padding:calc(var(--header-top) + var(--header-height) + 5rem) 0 5rem;
    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;
    top:-16rem; right:-14rem;
    width:88rem; height:76rem;
    background:radial-gradient(closest-side, rgba(186,148,45,0.18), rgba(186,148,45,0) 100%);
}
.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{
    /* У v3 alt — єдина і перша секція під хедером:
       враховуємо висоту острівного хедера + великі відступи для повітря */
    padding-top:calc(var(--header-top) + var(--header-height) + 7rem);
    padding-bottom:8rem;
}

/* Перевизначаємо центрування 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: filler
   ============================================================ */
.filler{
    padding:7.5rem 0 12.5rem;
    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;
    }
}@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 3rem; }
    .hero--alt{
        padding-top:calc(var(--header-top) + var(--header-height) + 3rem);
        padding-bottom:3rem;
    }
    .hero__markers{ margin-top:3rem; }
}

/* [v4] About/Vtesti responsive прибрано — about приходить з v1, reviews з v2 (див. кінець файлу) */

/* Hero responsive ─ стек і маркери у 2 колонки */
@media (max-width:56.25rem){    /* 900px */
    .hero{ padding:calc(var(--header-top) + var(--header-height) + 4rem) 0 4rem; }
    .hero--alt{
        padding-top:calc(var(--header-top) + var(--header-height) + 4rem);
        padding-bottom: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%;
    }
}

/* Користувач воліє менш агресивну анімацію */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        transition-duration:0.01ms !important;
        animation-duration:0.01ms !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   ЄДИНИЙ РИТМ МІЖ БЛОКАМИ — 160px ПК / 96px моб.
   Кожна секція дає 80px (моб 48px) зверху й знизу → кожен стик = сума 160/96.
   (hero.top лишається з офсетом хедера; filler.bottom — кінець сторінки.)
═══════════════════════════════════════════════════════════════════════ */
.hero{ padding-bottom:5rem; }
.filler{ padding-top:5rem; }@media (max-width:56.25rem) {
   /* 900px */
    .hero{ padding-bottom:3rem; }
    .filler{ padding-top:3rem; }
}

/* ============================================================
   BLOCK: location — «Локація» (v3)
   ------------------------------------------------------------
   Диптих на темному тлі: ліва тактильна cream-картка (офіс,
   абстрактна SVG-мапа + пульсуючий золотий маркер) і права
   скляна green-картка (онлайн, концентричні меридіани).
   Між ними — вертикальний розділювач із золотою рискою.
   Глибина: (1) tile-фон/тінь, (2) SVG-декор-шар, (3) контент.
   ============================================================ */
.location{
    position:relative;
    padding:5rem 0;
    color:var(--color-cream);
}

/* Шар 1 — атмосферне тло секції */
.location__bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}
.location__bg-glow{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 44% 56% at 82% 6%, rgba(186, 148, 45, 0.07) 0%, rgba(186,148,45,0) 60%);
}

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

/* Head — у стилі секцій v3 */
.location__head{
    max-width:50rem;
    margin:0 0 3.5rem;
}
.location__eyebrow{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;                          /* 12px */
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.location__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;                           /* 24px */
    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(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
    line-height:1.12;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.location__title-accent{ color:var(--color-gold); }
.location__lead{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.74);
    max-width:42rem;
}

/* Диптих */
.location__grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
    gap:0;
}

/* Картка */
.location__tile{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:26rem;                           /* 416px */
    padding:2.5rem;
    border:1px solid var(--color-line);
}
.location__tile--office{
    background:linear-gradient(160deg, var(--color-cream) 0%, var(--color-beige-2) 100%);
    color:var(--color-green);
    box-shadow:0 1.5rem 3.5rem rgba(16, 31, 25, 0.32);
}
.location__tile--online{
    background:var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border-color:var(--color-line-strong);
    color:var(--color-cream);
}

/* Шар 2 — SVG-декор у верхній зоні картки */
.location__map,
.location__orbit{
    position:absolute;
    top:0; left:0; right:0;
    height:13rem;                               /* 208px */
    z-index:0;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
}
.location__map-svg,
.location__orbit-svg{
    width:100%;
    height:100%;
    display:block;
}
.location__map{ color:rgba(16, 31, 25, 0.16); }
.location__map-river{ color:rgba(186, 148, 45, 0.5); }
.location__orbit{ color:rgba(207, 191, 177, 0.22); }
.location__orbit-meridian{ opacity:0.7; }

/* Маркер офісу — пульс */
.location__marker-pulse{
    transform-box:fill-box;
    transform-origin:center;
    animation:locPulse 3s var(--ease) infinite;
}
@keyframes locPulse{
    0%   { transform:scale(1);   opacity:0.9; }
    70%  { transform:scale(2.4); opacity:0;   }
    100% { transform:scale(2.4); opacity:0;   }
}
/* Орбітальні вузли — м'яке мерехтіння */
.location__orbit-node{
    transform-box:fill-box;
    transform-origin:center;
    animation:locTwinkle 4s ease-in-out infinite;
}
.location__orbit-node--b{ animation-delay:1.3s; }
.location__orbit-node--c{ animation-delay:2.6s; }
@keyframes locTwinkle{
    0%, 100% { opacity:0.35; }
    50%      { opacity:1; }
}

/* Шар 3 — контент картки */
.location__tile-body{
    position:relative;
    z-index:1;
    margin-top:auto;                            /* контент притиснутий до низу під декором */
}
.location__tile-tag{
    margin:0 0 0.875rem;
    font-size:0.75rem;                        /* 12px */
    letter-spacing:0.26em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-gold);
}
.location__tile-title{
    margin:0 0 0.75rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(1.5rem, 2.4vw, 1.875rem);   /* 24-30px */
    line-height:1.16;
}
.location__tile-text{
    margin:0 0 1.75rem;
    font-size:0.875rem;                        /* 14px */
    line-height:1.62;
    max-width:30rem;
}
.location__tile--office .location__tile-text{ color:var(--color-sage); }
.location__tile--online .location__tile-text{ color:rgba(244, 237, 228, 0.72); }

/* Факти */
.location__facts{
    margin:0 0 2rem;
    display:grid;
    gap:1rem;
}
.location__fact{ margin:0; }
.location__fact-label{
    display:block;
    margin:0 0 0.25rem;
    font-size:0.75rem;                        /* 12px */
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
}
.location__tile--office .location__fact-label{ color:rgba(16, 31, 25, 0.5); }
.location__tile--online .location__fact-label{ color:rgba(244, 237, 228, 0.5); }
.location__fact-value{
    margin:0;
    font-size:1rem;
    line-height:1.5;
    font-weight:500;
}
.location__sep{ opacity:0.5; padding:0 0.375rem; }
.location__link{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid var(--color-line-strong);
    transition:color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.location__link:hover{
    color:var(--color-gold-2);
    border-color:var(--color-gold);
}
.location__link:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:0.25rem;
}

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

/* Розділювач */
.location__divider{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    padding:0 2rem;
}
.location__divider-line{
    flex:1;
    width:1px;
    background:linear-gradient(to bottom, transparent, var(--color-line-strong), transparent);
}
.location__divider-tick{
    font-family:var(--font-display);
    font-size:1.5rem;                           /* 24px */
    line-height:1;
    color:var(--color-gold);
}

/* ---- Адаптив ---- */
@media (max-width:56.25rem){   /* 900px */
    .location{ padding:3rem 0; }
    .location__head{ margin-bottom:2.5rem; }
    .location__grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    .location__tile{
        min-height:0;
        padding:2.25rem 1.75rem;
    }
    .location__map,
    .location__orbit{ height:11rem; }
    /* горизонтальний розділювач між картками */
    .location__divider{
        flex-direction:row;
        padding:0;
        gap:0.875rem;
    }
    .location__divider-line{
        width:auto;
        height:1px;
        background:linear-gradient(to right, transparent, var(--color-line-strong), transparent);
    }
}@media (max-width:35rem) {
   /* 560px */
    .location__tile{ padding:2rem 1.25rem; }
    .location__map,
    .location__orbit{ height:9rem; }
    .location__facts{ gap:0.875rem; }
    .location__cta{ align-self:stretch; }
    .location__sep{ display:none; }
    .location__fact-value .location__link{ display:inline-block; margin-top:0.25rem; }
}

/* Доступність — вимикаємо рух */
@media (prefers-reduced-motion: reduce){
    .location__marker-pulse,
    .location__orbit-node{ animation:none; }
    .location__marker-pulse{ opacity:0; }
    .location__orbit-node{ opacity:0.7; }
}


/* ============================================================
   Prices — прозоре ціноутворення + програма лояльності (2.7)
   Тема: «реєстр» / документ-кошторис. Ліва колонка — оферта,
   права — пронумерований реєстр принципів, знизу — нота лояльності.
   Глибина: (1) радіальне світло + dot-grid, (2) великий символ ₴
   водяним знаком, (3) контент із hairline-роздільниками.
   ============================================================ */
.prices{
    position:relative;
    padding:5rem 0;
    color:var(--color-cream);
}

/* Шар 1+2 — фон */
.prices__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 84%, transparent 100%);
}
.prices__bg::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(207, 191, 177, 0.05) 1px, transparent 1px);
    background-size:1.5rem 1.5rem;            /* 24px */
    opacity:0.6;
}
.prices__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 34% 56% at 18% 10%, rgba(186, 148, 45, 0.10) 0%, rgba(186,148,45,0) 64%);
}
.prices__bg-index{
    position:absolute;
    right:-1rem;
    top:-3rem;
    font-family:var(--font-display);
    font-weight:700;
    font-size:30rem;                          /* 480px */
    line-height:0.8;
    color:transparent;
    -webkit-text-stroke:1px rgba(186, 148, 45, 0.09);
    user-select:none;
}

/* Поле-маржа: тонкий вертикальний штрих, як у краю аркуша-документа */
.prices__margin-rule{
    position:absolute;
    top:10%;
    bottom:10%;
    left:50%;
    width:1px;
    background:linear-gradient(180deg,
        transparent 0%,
        rgba(186, 148, 45, 0.16) 18%,
        rgba(207, 191, 177, 0.08) 50%,
        rgba(186, 148, 45, 0.16) 82%,
        transparent 100%
    );
    opacity:0.7;
}@media (max-width: 64rem) {
                    /* 1024px — маржа лиш на широких */
    .prices__margin-rule{ display:none; }
}

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

/* Шапка — eyebrow ──────── note */
.prices__head{
    display:flex;
    align-items:center;
    gap:1.5rem;
    margin:0 0 3rem;
}
.prices__eyebrow{
    margin:0;
    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;
    flex:none;
}
.prices__eyebrow-text{ display:inline-block; }
.prices__head-rule{
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(90deg,
        rgba(186, 148, 45, 0.55) 0%,
        rgba(186, 148, 45, 0.14) 50%,
        rgba(186, 148, 45, 0.55) 100%
    );
}
.prices__head-note{
    margin:0;
    flex:none;
    font-family:var(--font-display);
    font-size:0.875rem;                       /* 14px */
    color:var(--color-beige-2);
    letter-spacing:0.14em;
    text-transform:uppercase;
}

/* Дві колонки: оферта | реєстр */
.prices__layout{
    display:grid;
    grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap:4rem;
    align-items:start;
}

.prices__intro{
    position:relative;
    max-width:34rem;
    padding-left:1.5rem;                       /* місце під вертикальний штрих */
}
.prices__intro::before{                        /* короткий золотий штрих-індекс зліва */
    content:"";
    position:absolute;
    left:0;
    top:0.5rem;
    width:2px;
    height:2.5rem;                             /* 40px */
    background:linear-gradient(180deg, var(--color-gold) 0%, rgba(186, 148, 45, 0) 100%);
}
.prices__intro-label{
    display:block;
    margin:0 0 0.75rem;
    font-family:var(--font-sans);
    font-size:0.75rem;                         /* 12px */
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--color-sage);
}
.prices__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
    line-height:1.12;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.prices__title-accent{
    font-style:italic;
    color:var(--color-gold);
}
.prices__lead{
    margin:0 0 2.25rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.74);
}
.prices__actions{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

/* Реєстр принципів — кожен рядок як запис у документі, з'єднаний меридіаном */
.prices__ledger{
    position:relative;
    list-style:none;
    margin:0;
    padding:0 0 0 3.5rem;                      /* 56px — місце під меридіан і номери */
}

/* Меридіан — золота нитка, що зшиває три принципи; заповнюється при скролі */
.prices__meridian{
    position:absolute;
    left:0.875rem;                             /* 14px — центр під номерами */
    top:1.75rem;
    bottom:1.75rem;
    width:1px;
    background:var(--color-line);
}
.prices__meridian-fill{
    position:absolute;
    inset:0 0 auto 0;
    height:0;
    width:1px;
    background:linear-gradient(180deg, var(--color-gold-2) 0%, var(--color-gold) 100%);
    box-shadow:0 0 8px rgba(186, 148, 45, 0.45);
    transition:height 900ms var(--ease);
}
.prices--sheet.is-threaded .prices__meridian-fill{ height:100%; }

.prices__row{
    position:relative;
    display:flex;
    gap:1.5rem;
    padding:1.75rem 0;
    border-top:1px solid var(--color-line);
    transition:padding-left 360ms var(--ease);
}
.prices__row:last-child{ border-bottom:1px solid var(--color-line); }

/* Вузол меридіана навпроти кожного номера */
.prices__row-node{
    position:absolute;
    left:-2.625rem;                            /* -42px → на лінії меридіана */
    top:2.25rem;                               /* 36px — рівень номера */
    width:0.5rem;                              /* 8px */
    height:0.5rem;
    margin:-0.25rem 0 0 -0.25rem;
    background:var(--color-green);
    border:1px solid var(--color-gold);
    transform:rotate(45deg) scale(0.7);
    opacity:0.55;
    transition:transform 420ms var(--ease), opacity 420ms var(--ease), background 420ms var(--ease);
}
.prices__row.is-revealed .prices__row-node{
    transform:rotate(45deg) scale(1);
    opacity:1;
}

.prices__row-num{
    position:absolute;
    left:-3.5rem;                              /* над меридіаном, велика editorial-цифра */
    top:1.5rem;
    flex:none;
    font-family:var(--font-display);
    font-size:1.625rem;                        /* 26px */
    line-height:1;
    color:var(--color-gold);
    letter-spacing:0.02em;
}
.prices__row-num::after{                        /* тонке золоте підкреслення, що «креслиться» */
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-0.5rem;
    height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 640ms var(--ease) 120ms;
}
.prices__row.is-revealed .prices__row-num::after{ transform:scaleX(1); }

.prices__row-body{ display:block; }
.prices__row-title{
    display:block;
    margin:0 0 0.5rem;
    font-family:var(--font-display);
    font-size:1.25rem;                        /* 20px */
    font-weight:400;
    color:var(--color-cream);
    letter-spacing:0.005em;
    transition:color 280ms var(--ease);
}
.prices__row-text{
    display:block;
    font-size:0.875rem;                      /* 14px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.66);
}

/* Шар 3 — нота лояльності як тиха «печатка» */
.prices__loyalty{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:2rem;
    margin:4rem 0 0;
    padding:2rem 2.25rem;
    background:
        radial-gradient(ellipse 30% 120% at 0% 50%, rgba(186, 148, 45, 0.10) 0%, rgba(186,148,45,0) 70%),
        var(--color-line-soft);
    border:1px solid var(--color-line);
    border-left:2px solid var(--color-gold);
    transition:border-color 320ms var(--ease), background 320ms var(--ease);
}
.prices__loyalty-mark{
    position:relative;
    flex:none;
    display:block;
    width:4rem;                                /* 64px */
    height:4rem;
    color:var(--color-gold);
}
.prices__loyalty-mark svg{ display:block; width:100%; height:100%; }
.prices__seal-ring{ opacity:0.75; }
.prices__seal-ring--inner{ opacity:0.45; }
.prices__seal-tick{ stroke-linecap:round; stroke-linejoin:round; }
.prices__seal-rays{ opacity:0.5; transition:opacity 480ms var(--ease); }
/* Печатка повільно обертається на reveal — кінетика лишається стриманою */
.prices__loyalty .prices__loyalty-mark svg{
    transition:transform 1200ms var(--ease);
    transform:rotate(-12deg);
}
.prices__loyalty.is-revealed .prices__loyalty-mark svg{ transform:rotate(0deg); }

.prices__loyalty-label{
    display:block;
    margin:0 0 0.5rem;
    font-family:var(--font-sans);
    font-size:0.75rem;                         /* 12px */
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--color-gold-2);
}
.prices__loyalty-title{
    margin:0 0 0.375rem;
    font-family:var(--font-display);
    font-size:1.25rem;                        /* 20px */
    font-weight:400;
    color:var(--color-cream);
    letter-spacing:0.01em;
}
.prices__loyalty-text{
    margin:0;
    font-size:0.875rem;                      /* 14px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.7);
    max-width:48rem;
}
/* Тихий кутовий штрих — натяк на загнутий ріг документа */
.prices__loyalty-corner{
    position:absolute;
    top:0;
    right:0;
    width:1.5rem;                              /* 24px */
    height:1.5rem;
    border-top:1px solid rgba(186, 148, 45, 0.4);
    border-right:1px solid rgba(186, 148, 45, 0.4);
    pointer-events:none;
}

/* ---- Адаптив ---- */
@media (max-width: 64rem){               /* 1024px */
    .prices__layout{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .prices__intro{ max-width:none; }
}@media (max-width: 56.25rem) {
            /* 900px — ритм секції */
    .prices{ padding:3rem 0; }
    .prices__head{ margin:0 0 2rem; }
    .prices__bg-index{ font-size:20rem; top:-1.5rem; }
}@media (max-width: 36rem) {
               /* 576px */
    .prices__head{
        flex-wrap:wrap;
        gap:0.875rem;
    }
    .prices__head-rule{ order:3; flex-basis:100%; }
    .prices__actions .button{ flex:1 1 100%; }

    /* На вузьких — меридіан вужчий, номери компактніші */
    .prices__ledger{ padding-left:2.5rem; }    /* 40px */
    .prices__meridian{ left:0.5rem; }          /* 8px */
    .prices__row-node{ left:-2rem; }           /* -32px */
    .prices__row-num{
        left:-2.5rem;                          /* -40px */
        font-size:1.25rem;                     /* 20px */
    }
    .prices__row{
        gap:1rem;
        padding:1.5rem 0;
    }
    .prices__loyalty{
        flex-direction:column;
        align-items:flex-start;
        gap:1.25rem;
        padding:1.75rem 1.25rem;
    }
}


/* ============================================================
   2.8 — Форма запиту (.contact)
   Тема v3: «офіційне досьє» — поля-рядки з hairline-підкресленням,
   ліва колонка-запевнення.
   ============================================================ */
.contact{
    position:relative;
    padding:5rem 0;
    color:var(--color-cream);
}

/* Шар 1 — тло */
.contact__bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}
.contact::before{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    top:-12rem; left:-12rem; width:66rem; height:58rem;
    background:radial-gradient(closest-side, rgba(186,148,45,0.16), rgba(186,148,45,0) 100%);
}
/* Шар 2 — лінатура офіційного бланка */
.contact__ledger{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    color:rgba(207, 191, 177, 0.06);
}
.contact__ledger-margin{
    color:rgba(186, 148, 45, 0.16);
}

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

/* Сітка — диптих */
.contact__layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:start;
}

/* ---- Ліва колонка ---- */
.contact__eyebrow{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;                          /* 12px */
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.contact__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;                           /* 24px */
    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(1.875rem, 3.2vw, 2.875rem); /* 30-46px */
    line-height:1.12;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.contact__title-accent{ color:var(--color-gold); }
.contact__lead{
    margin:0 0 2rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.74);
    max-width:34rem;
}

/* Шар 3 — реєстраційний рядок «справи» */
.contact__registry{
    display:flex;
    align-items:center;
    gap:1rem;
    margin:0 0 2.5rem;
}
.contact__registry-line{
    flex:0 0 auto;
    width:2.5rem;                               /* 40px */
    height:1px;
    background:var(--color-gold);
}
.contact__registry-text{
    font-size:0.75rem;                          /* 12px */
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:rgba(207, 191, 177, 0.5);
}

/* Запевнення */
.contact__assurances{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.contact__assurance{
    display:flex;
    gap:1rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line-soft);
}
.contact__assurance:first-child{
    padding-top:0;
    border-top:none;
}
.contact__assurance-mark{
    flex:0 0 auto;
    width:2.5rem;                               /* 40px */
    height:2.5rem;
    color:var(--color-gold);
}
.contact__assurance-mark svg{
    display:block;
    width:100%;
    height:100%;
}
.contact__assurance-title{
    display:block;
    margin:0 0 0.375rem;
    font-family:var(--font-display);
    font-size:1.125rem;                         /* 18px */
    line-height:1.2;
    color:var(--color-cream);
}
.contact__assurance-text{
    display:block;
    font-size:0.875rem;                         /* 14px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.68);
}

/* ---- Права колонка: панель форми ---- */
.contact__panel{
    position:relative;
    padding:2.5rem;
    background:rgba(20, 38, 31, 0.42);          /* приглушений green-2 */
    border:1px solid var(--color-line);
}
.contact__panel-edge{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--color-gold);
}
.contact__form{ position:relative; }
.contact__form-note{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0.5rem 0.75rem;
    margin:0 0 2rem;
    font-size:0.75rem;                          /* 12px */
    letter-spacing:0.04em;
    color:rgba(244, 237, 228, 0.56);
}
.contact__form-note-tag{
    font-size:0.625rem;                         /* 10px */
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-gold);
    padding:0.25rem 0.5rem;
    border:1px solid var(--color-line);
}
.contact__req-key,
.contact__req{ color:var(--color-gold-2); }

/* Поле — рядок з hairline-підкресленням + нумерація бланка */
.contact__field{
    position:relative;
    margin:0 0 1.75rem;
    padding-left:2.5rem;                        /* місце під індекс 40px */
}
.contact__field-index{
    position:absolute;
    left:0;
    top:0.125rem;                               /* 2px — вирівняти з лейблом */
    font-family:var(--font-display);
    font-size:0.875rem;                         /* 14px */
    letter-spacing:0.04em;
    color:rgba(207, 191, 177, 0.34);
    transition:color 240ms var(--ease), transform 240ms var(--ease);
}
.contact__label{
    display:block;
    margin:0 0 0.5rem;
    font-size:0.75rem;                          /* 12px */
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-beige);
    transition:color 200ms var(--ease);
}
.contact__input{
    display:block;
    width:100%;
    padding:0.75rem 0;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--color-line-strong);
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.5;
    color:var(--color-cream);
    transition:border-color 200ms var(--ease);
}
.contact__input--area{
    min-height:6rem;                            /* 96px */
    resize:vertical;
}
.contact__input::placeholder{
    color:rgba(244, 237, 228, 0.34);
}
.contact__input:hover{
    border-bottom-color:var(--color-beige);
}
.contact__input:focus{
    outline:none;
    border-bottom-color:var(--color-line-strong);
}
.contact__input:focus-visible{
    outline:none;
    border-bottom-color:var(--color-line-strong);
}

/* Шар: золота каретка — малюється зліва-направо під активним полем */
.contact__rule{
    position:absolute;
    left:2.5rem;                                /* під полем, після індексу */
    right:0;
    bottom:0;
    height:2px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 360ms var(--ease);
    pointer-events:none;
}
.contact__input:focus ~ .contact__rule{
    transform:scaleX(1);
}
/* Активне поле підсвічує власний номер і лейбл */
.contact__field:focus-within .contact__field-index{
    color:var(--color-gold);
    transform:translateY(-0.125rem);            /* -2px */
}
.contact__field:focus-within .contact__label{
    color:var(--color-cream);
}

/* meta-рядок: помилка + лічильник символів */
.contact__meta{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-top:0.5rem;
}
.contact__count{
    flex:0 0 auto;
    font-size:0.75rem;                          /* 12px */
    letter-spacing:0.04em;
    color:rgba(244, 237, 228, 0.4);
    font-variant-numeric:tabular-nums;
    transition:color 200ms var(--ease);
}
.contact__count.is-near{ color:var(--color-gold-2); }

/* Стан помилки — кілька рухомих елементів */
.contact__field.is-invalid .contact__input{
    border-bottom-color:var(--color-gold);
}
.contact__field.is-invalid .contact__field-index{
    color:var(--color-gold);
}
.contact__field.is-invalid .contact__label{
    color:var(--color-beige-2);
}
.contact__field.is-invalid .contact__rule{
    background:var(--color-gold);
    transform:scaleX(1);
    animation:contact-rule-flick 420ms var(--ease) both;
}
.contact__error{
    display:block;
    min-height:1rem;
    margin-top:0.5rem;
    font-size:0.75rem;                          /* 12px */
    line-height:1.3;
    color:var(--color-gold-2);
}
.contact__error:not(:empty){
    animation:contact-error-in 320ms var(--ease) both;
}
/* У полі з meta error не має власного top-margin */
.contact__meta .contact__error{ margin-top:0; }

@keyframes contact-rule-flick{
    0%   { transform:scaleX(0); }
    100% { transform:scaleX(1); }
}
@keyframes contact-error-in{
    0%   { opacity:0; transform:translateY(0.25rem); }
    100% { opacity:1; transform:translateY(0); }
}

/* Сабміт */
.contact__submit{
    margin-top:2rem;
}
.contact__submit .button{
    width:100%;
}

/* Повідомлення-подяка — реєстраційна печатка */
.contact__success{
    position:relative;
    display:flex;
    gap:1.25rem;
    align-items:flex-start;
    margin:2rem 0 0;
    padding:1.75rem 1.5rem;
    border:1px solid var(--color-line);
    background:rgba(16, 31, 25, 0.5);
    overflow:hidden;
    animation:contact-success-in 520ms var(--ease) both;
}
.contact__success::before{                      /* золотий край-маркер, як у панелі */
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--color-gold);
}
.contact__success[hidden]{ display:none; }
.contact__success-mark{
    flex:0 0 auto;
    width:3rem;                                 /* 48px */
    height:3rem;
    color:var(--color-gold);
}
.contact__success-mark svg{
    display:block;
    width:100%;
    height:100%;
}
.contact__seal-ring{
    transform-origin:28px 28px;
    animation:contact-seal-ring 600ms var(--ease) both;
}
.contact__seal-ring--inner{ animation-delay:120ms; }
.contact__seal-check{
    stroke-dasharray:48;
    stroke-dashoffset:48;
    animation:contact-seal-check 520ms var(--ease) 320ms both;
}
.contact__success-title{
    display:block;
    margin:0 0 0.375rem;
    font-family:var(--font-display);
    font-size:1.125rem;                         /* 18px */
    color:var(--color-cream);
}
.contact__success-text{
    display:block;
    font-size:0.875rem;                         /* 14px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.68);
}
.contact__success-stamp{
    display:inline-block;
    margin-top:0.75rem;
    font-size:0.625rem;                         /* 10px */
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--color-gold-2);
}

@keyframes contact-success-in{
    0%   { opacity:0; transform:translateY(0.75rem); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes contact-seal-ring{
    0%   { opacity:0; transform:scale(0.7) rotate(-12deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes contact-seal-check{
    0%   { stroke-dashoffset:48; }
    100% { stroke-dashoffset:0; }
}

/* ---- Адаптив ---- */
@media (max-width: 56.25rem){               /* 900px — одна колонка */
    .contact{ padding:3rem 0; }
    .contact__layout{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .contact__lead{ max-width:none; }
}@media (max-width: 35rem) {
                  /* 560px */
    .contact__panel{ padding:1.75rem 1.25rem; }
    .contact__assurance{ gap:0.75rem; }
    .contact__field{ padding-left:2rem; }       /* 32px — тісніше на малих екранах */
    .contact__field-index{ font-size:0.75rem; } /* 12px */
    .contact__rule{ left:2rem; }
    .contact__meta{ flex-direction:column; gap:0.25rem; }
}@media (prefers-reduced-motion: reduce) {

    .contact__input{ transition:none; }
    .contact__field-index,
    .contact__label,
    .contact__count{ transition:none; }
    .contact__rule{
        transition:none;
        transform:scaleX(1);
        opacity:0;
    }
    .contact__input:focus ~ .contact__rule{ opacity:1; }
    .contact__field.is-invalid .contact__rule{ animation:none; opacity:1; }
    .contact__error:not(:empty){ animation:none; }
    .contact__success,
    .contact__seal-ring,
    .contact__seal-check{ animation:none; }
    .contact__seal-check{ stroke-dashoffset:0; }
}

/* ============================================================
   FAQ (2.9) — вертикальний «реєстр питань» з нативним акордеоном
   ============================================================ */
.faq{
    position:relative;
    padding:5rem 0;
}

/* Шар 1 — глибина: промінь, гравірований стовпчик-rule, дрейфуючий ¶, «?» */
.faq__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}
.faq__bg-beam{
    position:absolute;
    top:0; bottom:0;
    left:50%;
    width:24rem;
    transform:translateX(-50%);
    background:radial-gradient(60% 50% at 50% 30%,
        rgba(186, 148, 45, 0.10) 0%,
        rgba(186, 148, 45, 0) 70%
    );
}
/* Гравірована стовпчикова сітка — ледь помітні вертикалі */
.faq__bg-grid{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0.5;
}
.faq__bg-grid line{
    stroke:var(--color-line-soft);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
}
/* Дрейфуючий параграф-знак — рухається на скролі (data-faq-drift) */
.faq__bg-mark{
    position:absolute;
    top:14%;
    left:8%;
    font-family:var(--font-display);
    font-size:9rem;
    line-height:1;
    color:rgba(207, 191, 177, 0.05);
    user-select:none;
    will-change:transform;
    transition:transform 0.6s var(--ease);
}
.faq__bg-index{
    position:absolute;
    top:50%;
    right:-1rem;
    transform:translateY(-50%);
    font-family:var(--font-display);
    font-size:26rem;
    line-height:1;
    color:var(--color-line-soft);
    user-select:none;
}

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

/* Шапка секції — у ритмі prices/contact */
.faq__head{
    display:flex;
    align-items:center;
    gap:1.5rem;
    margin-bottom:2.5rem;
}
.faq__eyebrow{
    margin:0;
    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;
    flex:none;
    min-width:0;
}
.faq__eyebrow-text{
    display:inline-block;
    min-width:0;
}
.faq__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.faq__head-rule{
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(90deg,
        rgba(186, 148, 45, 0.55) 0%,
        rgba(186, 148, 45, 0.14) 50%,
        rgba(186, 148, 45, 0.55) 100%
    );
}
.faq__head-note{
    margin:0;
    flex:none;
    font-family:var(--font-display);
    font-size:0.875rem;
    color:var(--color-beige-2);
    letter-spacing:0.14em;
    text-transform:uppercase;
}

/* Дві колонки: вступ (sticky) | список */
.faq__layout{
    display:grid;
    grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap:4rem;
    align-items:start;
}

/* Ліва колонка */
.faq__intro{
    position:sticky;
    top:7.5rem;
    max-width:30rem;
}
/* Кастомний знак «відкритий діалог» — дві репліки лініями */
.faq__intro-mark{
    display:block;
    width:3rem;
    height:3rem;
    margin-bottom:1.5rem;
}
.faq__intro-mark svg{
    width:100%;
    height:100%;
    overflow:visible;
}
.faq__intro-mark path{
    fill:none;
    stroke-width:1.25;
    vector-effect:non-scaling-stroke;
}
.faq__intro-mark-a{
    stroke:var(--color-beige);
    opacity:0.55;
}
.faq__intro-mark-b{
    stroke:var(--color-gold-2);
    transform:translate(0, 0);
    transition:transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.faq__intro:hover .faq__intro-mark-b{
    transform:translate(-1px, -1px);
}
.faq__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(1.875rem, 3.2vw, 2.875rem);
    line-height:1.12;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.faq__title-accent{ color:var(--color-gold); }
.faq__lead{
    margin:0 0 2rem;
    font-size:1rem;
    line-height:1.7;
    color:rgba(244, 237, 228, 0.74);
    max-width:26rem;
}
.faq__count{
    margin:0;
    display:flex;
    align-items:baseline;
    gap:0.75rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line);
}
.faq__count-num{
    font-family:var(--font-display);
    font-size:2rem;
    line-height:1;
    color:var(--color-gold);
}
.faq__count-text{
    font-size:0.75rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--color-sage);
}
/* Підпис-«фірмовий знак» унизу вступу */
.faq__sign{
    margin:1.5rem 0 0;
    display:flex;
    align-items:center;
    gap:0.75rem;
}
.faq__sign-line{
    width:2rem;
    height:1px;
    background:var(--color-gold);
    flex:none;
}
.faq__sign-text{
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.04em;
    color:var(--color-sage);
}

/* Права колонка: акордеон */
.faq__list{
    border-top:1px solid var(--color-line);
}
.faq__item{
    position:relative;
    border-bottom:1px solid var(--color-line);
}
/* Ліва прогрес-нитка пункту: тонка лінія, що «наливається» золотом */
.faq__item-rail{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:1px;
    transform:scaleY(0);
    transform-origin:top center;
    background:linear-gradient(180deg,
        var(--color-gold) 0%,
        var(--color-gold-2) 100%);
    transition:transform 0.5s var(--ease);
    pointer-events:none;
}
.faq__item:hover > .faq__item-rail{ transform:scaleY(0.18); }
.faq__item[open] > .faq__item-rail{ transform:scaleY(1); }

/* Summary — рядок-тригер */
.faq__summary{
    position:relative;
    list-style:none;
    cursor:pointer;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1.25rem;
    padding:1.5rem 0.25rem 1.5rem 1.5rem;
    color:var(--color-cream);
    transition:color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
/* Сяйво-підкладка рядка при ховері */
.faq__summary::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        rgba(186, 148, 45, 0.06) 0%,
        rgba(186, 148, 45, 0) 60%);
    opacity:0;
    transition:opacity 0.35s var(--ease);
    pointer-events:none;
}
.faq__summary:hover::before{ opacity:1; }
.faq__item:hover > .faq__summary{ padding-left:1.75rem; }
.faq__item[open] > .faq__summary{ padding-left:1.75rem; }
/* Прибрати дефолтні маркери */
.faq__summary::-webkit-details-marker{ display:none; }
.faq__summary::marker{ content:""; }

.faq__summary:hover{ color:var(--color-gold-2); }
.faq__summary:focus-visible{
    outline:2px solid var(--color-gold);
    outline-offset:4px;
}

.faq__num{
    font-family:var(--font-display);
    font-size:0.875rem;
    line-height:1;
    color:var(--color-gold);
    letter-spacing:0.06em;
    min-width:1.5rem;
    transition:color 0.3s var(--ease), transform 0.4s var(--ease);
}
.faq__item:hover > .faq__summary .faq__num,
.faq__item[open] > .faq__summary .faq__num{
    transform:translateY(-2px);
}
.faq__q{
    font-family:var(--font-display);
    font-size:clamp(1.125rem, 1.6vw, 1.25rem);
    line-height:1.3;
    color:inherit;
}

/* Кастомний індикатор: коло + хрест, що стає мінусом у [open] */
.faq__icon{
    flex:none;
    width:2.5rem;
    height:2.5rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--color-beige);
    border:1px solid var(--color-line-strong);
    transition:border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq__icon svg{
    width:1.25rem;
    height:1.25rem;
    overflow:visible;
}
.faq__icon-v{
    transform-origin:center;
    transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.faq__icon-h{
    transform-origin:center;
    transition:transform 0.4s var(--ease);
}
.faq__summary:hover .faq__icon{
    border-color:var(--color-gold);
    color:var(--color-gold-2);
}

/* Стан розгорнутого пункту */
.faq__item[open] > .faq__summary{ color:var(--color-gold-2); }
.faq__item[open] .faq__num{ color:var(--color-gold-2); }
.faq__item[open] .faq__icon{
    background:rgba(186, 148, 45, 0.12);
    border-color:var(--color-gold);
    color:var(--color-gold-2);
}
.faq__item[open] .faq__icon-v{
    transform:rotate(90deg);
    opacity:0;
}

/* Відповідь */
.faq__answer{
    position:relative;
    padding:0.5rem 4rem 1.75rem calc(1.5rem + 1.5rem + 1.5rem);
    animation:faq-reveal 0.45s var(--ease) both;
}
/* Кастомний кутовий кронштейн перед відповіддю */
.faq__answer-mark{
    position:absolute;
    left:1.5rem;
    top:0.625rem;
    width:1rem;
    height:1rem;
    color:var(--color-gold);
    animation:faq-mark 0.55s var(--ease) 0.08s both;
}
.faq__answer-mark svg{
    width:100%;
    height:100%;
    overflow:visible;
}
.faq__answer-mark path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.25;
    vector-effect:non-scaling-stroke;
}
.faq__answer p{
    margin:0;
    font-size:1rem;
    line-height:1.75;
    color:rgba(244, 237, 228, 0.72);
    max-width:42rem;
}

@keyframes faq-reveal{
    from{ opacity:0; transform:translateY(-0.5rem); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes faq-mark{
    from{ opacity:0; transform:translate(4px, 0); }
    to{ opacity:1; transform:translate(0, 0); }
}

/* Низ секції — перехід на повну сторінку FAQ */
.faq__footer{
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid var(--color-line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    flex-wrap:wrap;
}
.faq__footer-text{
    margin:0;
    font-family:var(--font-display);
    font-size:1.125rem;
    color:var(--color-beige-2);
}

/* ---- Адаптив ---- */
@media (max-width: 56.25rem){               /* 900px — одна колонка */
    .faq{ padding:3rem 0; }
    .faq__layout{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .faq__intro{
        position:static;
        max-width:none;
    }
    .faq__bg-index{ font-size:18rem; right:-1.5rem; }
    .faq__bg-mark{ font-size:6rem; }
    .faq__answer{ padding-right:1.5rem; }
}@media (max-width: 35rem) {
                  /* 560px */
    .faq__head{ gap:1rem; }
    .faq__head-note{ display:none; }
    .faq__eyebrow{ font-size:0.625rem; letter-spacing:0.2em; }
    .faq__bg-mark{ display:none; }
    .faq__intro-mark{ width:2.5rem; height:2.5rem; margin-bottom:1.25rem; }
    .faq__summary{
        gap:1rem;
        padding:1.25rem 0 1.25rem 1rem;
    }
    .faq__item:hover > .faq__summary,
    .faq__item[open] > .faq__summary{ padding-left:1rem; }
    .faq__icon{ width:2rem; height:2rem; }
    .faq__answer{ padding-left:calc(1rem + 1rem + 1.25rem); }
    .faq__answer-mark{ left:1rem; }
    .faq__footer{ justify-content:flex-start; }
}@media (prefers-reduced-motion: reduce) {

    .faq__summary,
    .faq__num,
    .faq__icon,
    .faq__icon-v,
    .faq__icon-h,
    .faq__item-rail,
    .faq__intro-mark-b,
    .faq__bg-mark{ transition:none; }
    .faq__answer,
    .faq__answer-mark{ animation:none; }
    .faq__bg-mark{ transform:none !important; }
}

/* ============================================================
   Site footer — v3 (колофон / фінальний акорд)
   Концепт: монументальна темно-зелена основа у три шари —
     1) фон: градієнт + custom-SVG «компас точності» (мотив
        погляду наперед) + золота межа-волосина зверху;
     2) кінетичний водяний знак «СІКОРА», що дрейфує при скролі;
     3) контент: фінальний заклик (kinetic display), редакційна
        сітка з анімованими підкресленнями, нижній рядок.
   Палітра й типографіка — лише існуючі бренд-змінні.
   ============================================================ */
.site-footer{
    position:relative;
    isolation:isolate;            /* стримує водяний знак / компас на мобільному */
    margin-top:6rem;            /* 96px */
    padding:4rem 0 2rem;        /* 64 / 32 */
    color:var(--color-beige);
    border-top:1px solid var(--color-line);
}
/* Золота волосина-межа зверху */
.site-footer::before{
    content:"";
    position:absolute;
    top:-1px; left:50%;
    width:7rem; height:2px;     /* 112 / 2 */
    transform:translateX(-50%);
    background:linear-gradient(90deg,
        rgba(186, 148, 45, 0) 0%,
        var(--color-gold) 28%,
        var(--color-gold-2) 50%,
        var(--color-gold) 72%,
        rgba(186, 148, 45, 0) 100%);
    z-index:2;
}

/* -------- Шар 1: фон + компас -------- */
.site-footer__backdrop{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}
.site-footer__mark{
    position:absolute; top:3rem; right:-4rem;
    width:22rem; height:auto; opacity:0.05;
    pointer-events:none; user-select:none;
}
@media (max-width:56.25rem){ .site-footer__mark{ width:14rem; right:-3rem; top:2rem; } }
.site-footer__compass{
    position:absolute;
    top:2.5rem; right:-4rem;     /* частково за краєм — surprise */
    width:24rem; height:24rem;   /* 384px */
    color:var(--color-gold-2);
    opacity:0.22;
}
.site-footer__needle-n{ fill:var(--color-gold); }
.site-footer__needle-s{ fill:currentColor; opacity:0.35; }
.site-footer__needle-hub{ fill:var(--color-gold); }
.site-footer__compass-needle{
    transform-box:fill-box;
    transform-origin:center;
    animation:footer-compass 26s linear infinite;
}
@keyframes footer-compass{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(360deg); }
}

/* -------- Шар 2: кінетичний водяний знак -------- */
.site-footer__watermark{
    position:absolute;
    left:0; right:0; bottom:-1.5rem;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    line-height:0.78;
    text-align:center;
}
.site-footer__watermark-word{
    display:inline-block;
    font-family:var(--font-display);
    font-size:clamp(5rem, 22vw, 18rem);
    letter-spacing:0.04em;
    white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1px rgba(207, 191, 177, 0.10);
    background:linear-gradient(180deg,
        rgba(207, 191, 177, 0.08) 0%,
        rgba(207, 191, 177, 0) 78%);
    -webkit-background-clip:text;
    background-clip:text;
    transform:translate3d(0, 0, 0);
    transition:transform 120ms linear;
    will-change:transform;
}

.site-footer__container{ position:relative; z-index:1; }

/* -------- Шар 3.1: фінальний заклик -------- */
.site-footer__prologue{
    padding-bottom:3rem;        /* 48px */
    border-bottom:1px solid var(--color-line);
}
.site-footer__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    margin:0 0 1.5rem;
    font-size:0.75rem;          /* 12px */
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-sage);
}
.site-footer__eyebrow-mark{
    display:inline-block;
    width:2rem; height:1px;
    background:var(--color-gold);
}
.site-footer__call{
    margin:0;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(2rem, 5.5vw, 4rem);
    line-height:1.04;
    letter-spacing:-0.01em;
    color:var(--color-cream);
}
.site-footer__call-line{
    display:block;
    overflow:hidden;
}
/* Kinetic typography: рядки виїжджають знизу при reveal */
.site-footer__call-line > br{ display:none; }
.reveal .site-footer__call-line{
    transform:translateY(110%);
    transition:transform 800ms var(--ease);
}
.reveal.is-revealed .site-footer__call-line{ transform:translateY(0); }
.reveal.is-revealed .site-footer__call-line--accent{ transition-delay:120ms; }
.site-footer__call-line--accent{
    font-style:italic;
    color:var(--color-gold-2);
}

.site-footer__prologue-action{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem 2rem;
    margin-top:2rem;            /* 32px */
}
.site-footer__call-note{
    margin:0;
    max-width:26rem;
    font-size:1rem;
    line-height:1.5;
    color:var(--color-beige);
}
.site-footer__cta{ flex:0 0 auto; }

/* -------- Шар 3.2: основна сітка -------- */
.site-footer__grid{
    display:grid;
    grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
    gap:3rem 2.5rem;            /* 48 / 40 */
    padding:3rem 0;            /* 48px */
}
.site-footer__col{ min-width:0; }

.site-footer__heading{
    margin:0 0 1.5rem;
    font-family:var(--font-sans);
    font-weight:600;
    font-size:0.75rem;          /* 12px */
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold);
}

/* Бренд-колонка */
.site-footer__logo{
    display:inline-block;
    transition:opacity 0.3s var(--ease);
}
.site-footer__logo:hover{ opacity:0.82; }
.site-footer__logo img{
    width:13.75rem;             /* 220px */
    max-width:100%;
    height:auto;
}
.site-footer__slogan{
    margin:1.25rem 0 0;
    max-width:24rem;
    font-family:var(--font-display);
    font-size:1.25rem;          /* 20px */
    line-height:1.4;
    color:var(--color-cream);
}

/* Соцмережі — квадрати з золотим кутовим маркером */
.site-footer__social{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
    margin:2rem 0 0;
    padding:0;
    list-style:none;
}
.site-footer__social-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.75rem; height:2.75rem;   /* 44px — touch target */
    color:var(--color-beige);
    border:1px solid var(--color-line);
    overflow:hidden;
    transition:color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Золота заливка від кута (scale-in), без border-radius */
.site-footer__social-corner{
    position:absolute;
    inset:0;
    background:var(--color-gold);
    transform:scale(0);
    transform-origin:bottom right;
    transition:transform 0.4s var(--ease);
    z-index:0;
}
.site-footer__social-icon{
    position:relative;
    z-index:1;
    width:1.25rem; height:1.25rem;   /* 20px */
    display:block;
    transition:transform 0.4s var(--ease);
}
.site-footer__social-link:hover{
    color:var(--color-green);
    border-color:var(--color-gold);
}
.site-footer__social-link:hover .site-footer__social-corner{ transform:scale(1); }
.site-footer__social-link:hover .site-footer__social-icon{ transform:translateY(-2px); }

/* Контакти — рядки-лінки з підкресленням значення */
.site-footer__contacts{
    font-style:normal;
    display:grid;
    gap:1.25rem;
}
.site-footer__contact-item{
    display:grid;
    gap:0.25rem;
    margin:0;
}
.site-footer__contact-label{
    font-size:0.75rem;          /* 12px */
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--color-sage);
}
.site-footer__contact-value{
    position:relative;
    display:inline;
    font-size:1rem;             /* 16px */
    line-height:1.5;
    color:var(--color-cream);
    background-image:linear-gradient(var(--color-gold-2), var(--color-gold-2));
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0 1px;
    transition:background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.site-footer__contact-item:hover .site-footer__contact-value,
.site-footer__contact-item:focus-visible .site-footer__contact-value{
    color:var(--color-gold-2);
    background-size:100% 1px;
}

/* Графік прийому — leader-dots між днем і часом */
.site-footer__hours{
    display:grid;
    gap:0.75rem;
    margin:0;
    padding:0;
    list-style:none;
}
.site-footer__hours-row{
    display:flex;
    align-items:baseline;
    gap:0.5rem;
    font-size:1rem;             /* 16px */
    color:var(--color-cream);
}
.site-footer__hours-day{ flex:0 0 auto; }
.site-footer__hours-dots{
    flex:1 1 auto;
    align-self:center;
    height:1px;
    min-width:1rem;
    border-bottom:1px dotted var(--color-line-strong);
    transform:translateY(2px);
}
.site-footer__hours-time{
    flex:0 0 auto;
    color:var(--color-beige);
    text-align:right;
}
.site-footer__hours-row--muted{ color:var(--color-sage); }
.site-footer__hours-row--muted .site-footer__hours-time{ color:var(--color-sage); }
.site-footer__hours-note{
    margin:1.25rem 0 0;
    font-size:0.875rem;         /* 14px */
    line-height:1.5;
    color:var(--color-sage);
}

/* Навігація — анімований underline + зсув тексту */
.site-footer__menu{
    display:grid;
    gap:0.75rem;
    margin:0;
    padding:0;
    list-style:none;
}
.site-footer__link{
    position:relative;
    display:inline-flex;
    align-items:center;
    font-size:1rem;             /* 16px */
    color:var(--color-beige);
}
.site-footer__link-text{
    position:relative;
    display:inline-block;
    transition:transform 0.35s var(--ease), color 0.3s var(--ease);
}
.site-footer__link-text::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:1px;
    background:var(--color-gold);
    transition:width 0.35s var(--ease);
}
.site-footer__link:hover .site-footer__link-text,
.site-footer__link:focus-visible .site-footer__link-text{
    transform:translateX(0.625rem);   /* 10px */
    color:var(--color-cream);
}
.site-footer__link:hover .site-footer__link-text::after,
.site-footer__link:focus-visible .site-footer__link-text::after{ width:100%; }

/* -------- Нижній рядок -------- */
.site-footer__base{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem 1.5rem;
    padding-top:2rem;           /* 32px */
    border-top:1px solid var(--color-line);
}
.site-footer__copy{
    margin:0;
    font-size:0.875rem;         /* 14px */
    color:var(--color-sage);
}
.site-footer__legal{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    margin:0;
    padding:0;
    list-style:none;
}
.site-footer__legal-link{
    font-size:0.875rem;         /* 14px */
    color:var(--color-sage);
    transition:color 0.3s var(--ease);
}
.site-footer__legal-link:hover{ color:var(--color-beige); }

/* Кнопка «нагору» — лейбл + квадратна іконка з рухом */
.site-footer__top{
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    font-size:0.75rem;          /* 12px */
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--color-sage);
    transition:color 0.3s var(--ease);
}
.site-footer__top-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.25rem; height:2.25rem;    /* 36px */
    color:var(--color-beige);
    border:1px solid var(--color-line);
    overflow:hidden;
    transition:border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.site-footer__top-icon svg{
    width:1.25rem; height:1.25rem;
    transition:transform 0.4s var(--ease);
}
.site-footer__top:hover{ color:var(--color-gold-2); }
.site-footer__top:hover .site-footer__top-icon{ border-color:var(--color-gold); color:var(--color-gold-2); }
.site-footer__top:hover .site-footer__top-icon svg{ transform:translateY(-0.375rem); }   /* 6px */

/* -------- Focus / motion -------- */
.site-footer a:focus-visible,
.site-footer .button:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:3px;
}

/* -------- Адаптив -------- */
@media (max-width:1080px){
    .site-footer__grid{
        grid-template-columns:1fr 1fr;
        gap:3rem 2.5rem;
    }
    .site-footer__col--brand{ grid-column:1 / -1; }
}@media (max-width:900px) {

    .site-footer{ margin-top:4rem; padding-top:3rem; }
    .site-footer__prologue-action{
        flex-direction:column;
        align-items:flex-start;
    }
    .site-footer__compass{ width:18rem; height:18rem; right:-5rem; }
}@media (max-width:560px) {

    .site-footer{ padding-top:2.5rem; }
    .site-footer__grid{
        grid-template-columns:1fr;
        gap:2.5rem;
        padding:2.5rem 0;
    }
    .site-footer__logo img{ width:11.25rem; }   /* 180px */
    .site-footer__slogan{ font-size:1.125rem; } /* 18px */
    .site-footer__compass{
        width:14rem; height:14rem;
        top:auto; bottom:6rem; right:-6rem;
    }
    .site-footer__base{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem;
    }
    .site-footer__legal{ gap:0.75rem 1.5rem; }
}@media (prefers-reduced-motion:reduce) {

    .site-footer__compass-needle{ animation:none; }
    .site-footer__watermark-word{ transition:none; transform:none !important; }
    .reveal .site-footer__call-line{ transform:none; transition:none; }
    .site-footer__logo,
    .site-footer__social-link,
    .site-footer__social-corner,
    .site-footer__social-icon,
    .site-footer__contact-value,
    .site-footer__link-text,
    .site-footer__link-text::after,
    .site-footer__top,
    .site-footer__top-icon,
    .site-footer__top-icon svg,
    .site-footer__legal-link{ transition:none; }
}


/* ============================================================
   SCROLL-REVEAL — стримана cinematic-поява секцій
   Елемент із класом .reveal стартує приглушеним і трохи нижче;
   JS (IntersectionObserver) додає .is-revealed, коли елемент
   входить у viewport. Лише transform/opacity — GPU-friendly.
   Стаггер задається модифікаторами .reveal--dN на дочірніх
   елементах (картки, рядки, колонки, лого).
   ============================================================ */
.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;
    /* Знімаємо will-change після появи: інакше воно тримає containing
       block і ламає position:sticky (напр. .faq__intro). */
    will-change:auto;
}

/* Затримки стаггеру (кратні 80ms) — застосовуються до transition,
   щоб елементи однієї групи з'являлися каскадом. */
.reveal--d1{ transition-delay:80ms; }
.reveal--d2{ transition-delay:160ms; }
.reveal--d3{ transition-delay:240ms; }
.reveal--d4{ transition-delay:320ms; }
.reveal--d5{ transition-delay:400ms; }
.reveal--d6{ transition-delay:480ms; }
.reveal--d7{ transition-delay:560ms; }

/* М'якший варіант появи — лише opacity, без зсуву (для широких
   медіа-смуг, де translateY виглядав би заважко). */
.reveal--soft{
    transform:none;
    transition:opacity 900ms var(--ease);
}

/* ------------------------------------------------------------
   Посилені мікровзаємодії (стримано, преміально) — лише там, де
   hover/focus раніше був без руху. Усе на transform.
   ------------------------------------------------------------ */

/* Картки локації — ледь помітний підйом при наведенні */
.location__tile{
    transition:transform 360ms var(--ease);
}@media (hover:hover) {

    .location__tile:hover{ transform:translateY(-0.375rem); }
}

/* Рядки реєстру ціноутворення — кілька елементів рухаються разом */
@media (hover:hover){
    .prices__row:hover{ padding-left:0.75rem; }                              /* 12px зсув запису */
    .prices__row:hover .prices__row-num{ transform:translateY(-0.25rem); }  /* -4px */
    .prices__row:hover .prices__row-title{ color:var(--color-gold-2); }
    .prices__row:hover .prices__row-node{
        transform:rotate(45deg) scale(1.25);
        background:var(--color-gold);
    }
    .prices__loyalty:hover{
        border-color:rgba(186, 148, 45, 0.5);
        background:
            radial-gradient(ellipse 36% 130% at 0% 50%, rgba(186, 148, 45, 0.16) 0%, rgba(186,148,45,0) 72%),
            var(--color-line-soft);
    }
    .prices__loyalty:hover .prices__seal-rays{ opacity:0.9; }
}
.prices__row-num{
    transition:transform 320ms var(--ease);
}

/* Сегменти клієнтів — маркер ледь масштабується при наведенні */
.clients__segment-mark{
    transition:color .4s var(--ease), transform 300ms var(--ease);
}@media (hover:hover) {

    .clients__segment:hover .clients__segment-mark{ transform:scale(1.1); }
}

/* Запевнення у контактах — мітка-знак ледь підіймається */
.contact__assurance-mark{
    transition:transform 320ms var(--ease);
}@media (hover:hover) {

    .contact__assurance:hover .contact__assurance-mark{ transform:translateY(-0.25rem); }
}@media (prefers-reduced-motion:reduce) {

    /* Reveal-елементи одразу видимі — без появи й затримок. */
    .reveal,
    .reveal--soft{
        opacity:1;
        transform:none;
        transition:none;
        will-change:auto;
    }
    /* Посилені мікровзаємодії вимкнені. */
    .location__tile,
    .prices__row-num,
    .clients__segment-mark,
    .contact__assurance-mark{ transition:none; }
    .location__tile:hover,
    .prices__row:hover .prices__row-num,
    .clients__segment:hover .clients__segment-mark,
    .contact__assurance:hover .contact__assurance-mark{ transform:none; }

    /* Блок «Ціни» — кінетика меридіана, печатки й підкреслень нейтралізована. */
    .prices__meridian-fill{ transition:none; height:100%; }
    .prices__row-node{
        transition:none;
        transform:rotate(45deg) scale(1);
        opacity:1;
    }
    .prices__row-num::after{ transition:none; transform:scaleX(1); }
    .prices__row{ transition:none; }
    .prices__loyalty,
    .prices__loyalty .prices__loyalty-mark svg,
    .prices__seal-rays{ transition:none; }
    .prices__loyalty .prices__loyalty-mark svg{ transform:none; }
}


/* ============================================================
   [v4] BLOCK: about — editorial dissolve (портовано з ВЕРСІЇ 1)
   ============================================================ */
.about{
    position:relative;
    padding:5rem 0 7rem;
    color:var(--color-cream);
}

/* About abstraction — м'який золотий spotlight зліва-по-центру.
   Маски fade зверху й знизу — на стиках секцій незримо. */
.about::before{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    top:-14rem; right:-12rem;
    width:72rem; height:62rem;
    background:radial-gradient(closest-side, rgba(186,148,45,0.16), rgba(186,148,45,0) 100%);
}

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

/* Editorial page-marker — тонка золота лінія + номер + лейбл */
.about__index{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:0 0 3rem;
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.3em;
    text-transform:uppercase;
}
.about__index-line{
    width:3rem;                          /* 48px */
    height:1px;
    background:var(--color-gold);
    opacity:0.55;
}
.about__index-num{
    font-family:var(--font-display);
    font-size:0.875rem;                 /* 14px */
    font-weight:400;
    color:var(--color-gold);
    letter-spacing:0.1em;
}
.about__index-label{
    color:rgba(244, 237, 228, 0.66);
    font-weight:600;
}

.about__layout{
    display:grid;
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:5rem;
    align-items:center;
}

/* Портрет — без рамки. Знизу dissolve у фон через mask-image,
   тому фото не має жорсткої прямокутної межі знизу */
.about__portrait{
    position:relative;
    margin:0;
}
.about__portrait-img{
    display:block;
    width:100%;
    height:auto;                       /* природні пропорції обрізаного фото (~0.38) */
    -webkit-mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* Підпис — magazine-style з тонкою лівою межею */
.about__caption{
    margin-top:1.5rem;
    padding-left:1.5rem;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    border-left:1px solid var(--color-line);
}
.about__caption-name{
    font-family:var(--font-display);
    font-size:1.125rem;                 /* 18px */
    color:var(--color-cream);
    letter-spacing:-0.005em;
    line-height:1.2;
}
.about__caption-role{
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-gold);
}

/* Текстова частина */
.about__body{
    padding-top:0.5rem;
}

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

.about__title{
    margin:0 0 1.75rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem); /* 32-52px */
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.about__title-accent{ color:var(--color-gold); }

.about__lead{
    margin:0 0 1.25rem;
    max-width:54ch;
    font-size:1.125rem;                 /* 18px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.82);
}

.about__text{
    margin:0 0 2.5rem;
    max-width:54ch;
    font-size:1rem;                     /* 16px */
    line-height:1.7;
    color:rgba(244, 237, 228, 0.64);
}

/* Власний CTA — editorial underline + arrow; окремий від .button */
.about__cta{
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    padding:0.875rem 0;
    font-family:var(--font-sans);
    font-size:0.875rem;                 /* 14px */
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-gold);
    border-bottom:1px solid var(--color-gold);
    transition:gap 280ms cubic-bezier(0.4, 0, 0.2, 1),
               color 280ms cubic-bezier(0.4, 0, 0.2, 1),
               border-bottom-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.about__cta:hover,
.about__cta:focus-visible{
    gap:1.25rem;
    color:var(--color-gold-2);
    border-bottom-color:var(--color-gold-2);
}
.about__cta-arrow{
    width:1rem;                         /* 16px */
    height:1rem;
    transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.about__cta:hover .about__cta-arrow,
.about__cta:focus-visible .about__cta-arrow{
    transform:translateX(0.25rem);
}

/* about responsive (з v1) */
/* About — стек на планшеті/мобільному.
   На стеку фото повертається у межі контейнера, fade — донизу,
   щоб текст під ним «виплив» із темряви, а не збоку. */
@media (max-width:56.25rem){    /* 900px */
    .about{ padding:4rem 0 5rem; }
    .about__index{ margin-bottom:2rem; }
    .about__layout{
        grid-template-columns:1fr;
        gap:3rem;
    }
    .about__portrait-img{
        max-width:28rem;                 /* 448px */
        margin:0 auto;
    }
    .about__caption{
        max-width:28rem;
        margin-left:auto;
        margin-right:auto;
    }
    .about__title{ max-width:none; }
    .about__lead, .about__text{ max-width:none; }
}

@media (max-width:35rem){       /* 560px */
    .about{ padding:3rem 0 4rem; }
    .about__index{ gap:0.5rem; margin-bottom:1.5rem; }
    .about__index-line{ width:1.5rem; }
    .about__layout{ gap:2.5rem; }
    .about__lead{ font-size:1rem; }
}

/* about vertical rhythm (з v1) */
.about{ padding-top:5rem; padding-bottom:5rem; }
@media (max-width:56.25rem){ .about{ padding-top:3rem; padding-bottom:3rem; } }


/* ============================================================
   [v4] BLOCK: testi — «Відео відгуки» marquee (портовано з ВЕРСІЇ 2)
   ============================================================ */
/* ============================================================
   BLOCK: testi — «Відео відгуки»
   Концепція: сітка карток-постерів 3:4 з glass play-control у дусі
   хедера/dossier. Hover піднімає золоту рамку, scrim світлішає, ring
   обертається. Клік → лайтбокс з <video> (focus-trap, ESC, scrim).
   Вертикальний ритм: 160px десктоп / 96px мобільний (як .hero/.filler).
   ============================================================ */
.testi{
    position:relative;
    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%, rgba(186,148,45,0) 70%);
}
.testi__bg::after{
    content:"";
    position:absolute;
    bottom:-12%;
    right:-6%;
    width:34rem;
    height:34rem;
    background:radial-gradient(circle at center, rgba(186,148,45,0.12) 0%, rgba(186,148,45,0.04) 42%, rgba(186,148,45,0) 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__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; }
}





/* ============================================================
   [v4] BLOCK: services — «Наші послуги» (напрями практики)
   Акордеон на нативних <details name="services">.
   Стилістика споріднена з FAQ (В3): золоті лінійки, BalticaC, +/- іконка.
   ============================================================ */
.services{
    position:relative;
    padding:5rem 0;
    background:transparent;
    color:var(--color-cream);
}
.services__bg{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
}
.services__bg::before{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 50% 55% at 86% 10%, rgba(186,148,45,.08) 0, rgba(186,148,45,0) 60%);
}

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

/* ---- head ---- */
.services__head{ max-width:46rem; margin:0 0 3.5rem; }
.services__eyebrow{
    display:flex; align-items:center; gap:.6rem; margin:0 0 1.25rem;
    color:var(--color-gold); font-size:.75rem; letter-spacing:.3em;
    text-transform:uppercase; font-weight:600;
}
.services__title{
    margin:0 0 1.25rem; font-family:var(--font-display); font-weight:400;
    font-size:clamp(2rem,3.6vw,3.25rem); line-height:1.1; letter-spacing:-.005em;
    color:var(--color-cream); text-wrap:balance;
}
.services__title-accent{ color:var(--color-gold); }
.services__lead{
    margin:0 0 1.5rem; max-width:44ch; font-size:1.0625rem;
    line-height:1.6; color:rgba(244,237,228,.7);
}
.services__count{ display:flex; align-items:baseline; gap:.6rem; }
.services__count-num{ font-family:var(--font-display); font-size:1.5rem; color:var(--color-gold-2); }
.services__count-text{ font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-sage); }

/* ---- accordion ---- */
.services__list-wrap{ border-top:1px solid var(--color-line); }
.services__item{ position:relative; border-bottom:1px solid var(--color-line); }
.services__rail{
    position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--color-gold);
    transform:scaleY(0); transform-origin:top; opacity:.75;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.services__item[open] .services__rail{ transform:scaleY(1); }

.services__summary{
    list-style:none; cursor:pointer; display:grid;
    grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem;
    padding:1.6rem .25rem 1.6rem 1.5rem; transition:background .3s ease;
}
.services__summary::-webkit-details-marker{ display:none; }
.services__summary::marker{ content:""; }
.services__summary:hover{ background:linear-gradient(90deg, rgba(186,148,45,.05), transparent 55%); }
.services__summary:focus-visible{ outline:1px solid var(--color-gold); outline-offset:2px; }

.services__num{
    font-family:var(--font-display); font-size:.95rem; color:var(--color-gold);
    letter-spacing:.1em; opacity:.85;
}
.services__heading{ display:flex; flex-direction:column; gap:.3rem; }
.services__name{
    font-family:var(--font-display); font-size:clamp(1.25rem,2.1vw,1.6rem);
    line-height:1.2; color:var(--color-cream); transition:color .3s ease;
}
.services__item[open] .services__name,
.services__summary:hover .services__name{ color:var(--color-gold-2); }
.services__tagline{ font-size:.9rem; line-height:1.45; color:var(--color-sage); }

.services__icon{
    position:relative; width:1.85rem; height:1.85rem; flex:none; color:var(--color-gold);
    display:grid; place-items:center; border:1px solid var(--color-line-strong);
    border-radius:50%; transition:border-color .3s ease, color .3s ease;
}
.services__summary:hover .services__icon,
.services__item[open] .services__icon{ border-color:var(--color-gold); }
.services__icon svg{ width:1rem; height:1rem; }
.services__icon-v{ transform-origin:center; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.services__item[open] .services__icon-v{ transform:scaleY(0); }

/* ---- body ---- */
.services__body{ padding:0 1.5rem 2.75rem; max-width:64rem; }
.services__item[open] .services__body{ animation:services-open .45s cubic-bezier(.4,0,.2,1); }
@keyframes services-open{ from{ opacity:0; transform:translateY(-.5rem); } to{ opacity:1; transform:none; } }

.services__desc{
    margin:0 0 1rem; font-size:1rem; line-height:1.7;
    color:rgba(244,237,228,.78); max-width:62ch;
}

.services__block{ margin-top:1.85rem; }
.services__block-label{
    margin:0 0 1rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
    font-weight:600; color:var(--color-gold); display:flex; align-items:center; gap:.6rem;
}
.services__block-label::before{ content:""; width:1.5rem; height:1px; background:var(--color-gold); opacity:.5; }

.services__list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 2.5rem; }
.services__list li{
    position:relative; padding-left:1.3rem; font-size:.95rem; line-height:1.5;
    color:rgba(244,237,228,.82);
}
.services__list li::before{
    content:""; position:absolute; left:0; top:.55em; width:.4rem; height:.4rem;
    border:1px solid var(--color-gold); transform:rotate(45deg);
}
.services__list--add li::before{ background:var(--color-gold); }

.services__notes{ list-style:none; display:grid; gap:.85rem; }
.services__notes li{
    position:relative; padding-left:1.6rem; font-size:.95rem; line-height:1.55;
    color:rgba(244,237,228,.72);
}
.services__notes li::before{
    content:""; position:absolute; left:0; top:.6em; width:.9rem; height:1px; background:var(--color-gold);
}

.services__when{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 2.5rem; }
.services__when li{
    position:relative; padding-left:1.6rem; font-size:.95rem; line-height:1.5;
    color:rgba(244,237,228,.82);
}
.services__when li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--color-gold); }

.services__cta{
    margin-top:2.25rem; display:inline-flex; align-items:center; gap:.75rem; padding:.75rem 0;
    font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--color-gold); border-bottom:1px solid var(--color-gold);
    transition:gap .3s ease, color .3s ease, border-color .3s ease;
}
.services__cta:hover, .services__cta:focus-visible{ gap:1.25rem; color:var(--color-gold-2); border-bottom-color:var(--color-gold-2); }
.services__cta-arrow{ width:1rem; height:1rem; }

/* ---- responsive ---- */
@media (max-width:56.25rem){
    .services{ padding:3rem 0; }
    .services__head{ margin-bottom:2.5rem; }
    .services__list, .services__when{ grid-template-columns:1fr; gap:.6rem; }
    .services__summary{ padding-left:1.25rem; gap:1rem; }
    .services__body{ padding:0 1.25rem 2.25rem; }
}
@media (max-width:35rem){
    .services__num{ display:none; }
    .services__summary{ grid-template-columns:1fr auto; gap:.85rem; padding-left:1rem; }
    .services__name{ font-size:1.15rem; }
}
@media (prefers-reduced-motion: reduce){
    .services__item[open] .services__body{ animation:none; }
    .services__rail, .services__icon-v{ transition:none; }
}


/* ============================================================
   [v4] BLOCK: svc2 — «Наші послуги» (АЛЬТЕРНАТИВА: плитки-слайдер)
   Тільки назва + лід + короткий опис. Повний перелік — на сторінці напряму.
   ============================================================ */
.svc2{
    position:relative; padding:5rem 0;
    color:var(--color-cream);
}
.svc2__bg{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 14%, black 86%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, black 14%, black 86%, transparent 100%);
}
.svc2__bg::before{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 50% 55% at 12% 8%, rgba(186,148,45,.08) 0, rgba(186,148,45,0) 60%);
}
.svc2__bg-monogram{
    position:absolute; top:-4rem; left:-3rem; font-family:var(--font-display);
    font-size:30rem; line-height:1; color:var(--color-cream); opacity:.02; user-select:none;
}
.svc2__container{ position:relative; z-index:1; }

/* ---- head (текст + стрілки в один ряд) ---- */
.svc2__head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:2rem; margin:0 0 2.75rem;
}
.svc2__head-text{ max-width:46rem; }
.svc2__eyebrow{
    display:flex; align-items:center; gap:.6rem; margin:0 0 1.25rem;
    color:var(--color-gold); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
}
.svc2__title{
    margin:0 0 1.1rem; font-family:var(--font-display); font-weight:400;
    font-size:clamp(2rem,3.6vw,3.25rem); line-height:1.1; letter-spacing:-.005em; color:var(--color-cream);
}
.svc2__title-accent{ color:var(--color-gold); }
.svc2__lead{ margin:0; max-width:46ch; font-size:1.0625rem; line-height:1.6; color:rgba(244,237,228,.7); }

.svc2__nav{ display:flex; gap:.75rem; flex:none; }
.svc2__arrow{
    width:3rem; height:3rem; display:grid; place-items:center; cursor:pointer;
    background:transparent; color:var(--color-cream);
    border:1px solid var(--color-line-strong); border-radius:50%;
    transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.svc2__arrow:hover{ color:var(--color-green); background:var(--color-gold); border-color:var(--color-gold); }
.svc2__arrow svg{ width:1.1rem; height:1.1rem; }
.svc2__arrow.swiper-button-disabled{ opacity:.35; cursor:default; }
.svc2__arrow.swiper-button-disabled:hover{ color:var(--color-cream); background:transparent; border-color:var(--color-line-strong); }

/* ---- slider / cards ---- */
.svc2__slider{ overflow:hidden; padding-block:.5rem; }
/* Фолбек: якщо Swiper не стартував (нема JS/CDN) — плитки сіткою, секція видима завжди */
.svc2__slider:not(.swiper-initialized) .swiper-wrapper{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
@media (max-width:56.25rem){ .svc2__slider:not(.swiper-initialized) .swiper-wrapper{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:35rem){ .svc2__slider:not(.swiper-initialized) .swiper-wrapper{ grid-template-columns:1fr; } }
.svc2-card{ height:auto; display:flex; }
.svc2-card__link{
    position:relative; display:flex; flex-direction:column; width:100%; min-height:19rem;
    padding:2rem 1.85rem 1.85rem; text-decoration:none; color:inherit;
    background:var(--color-green-3); border:1px solid var(--color-line);
    transition:background .35s ease, border-color .35s ease, transform .35s ease;
}
.svc2-card__link::before{
    content:""; position:absolute; left:0; top:0; height:2px; width:0;
    background:var(--color-gold); transition:width .4s cubic-bezier(.4,0,.2,1);
}
.svc2-card__link:hover, .svc2-card__link:focus-visible{
    background:var(--color-green-4); border-color:rgba(186,148,45,.4); transform:translateY(-4px); outline:none;
}
.svc2-card__link:hover::before, .svc2-card__link:focus-visible::before{ width:100%; }

.svc2-card__top{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.svc2-card__num{ font-family:var(--font-display); font-size:1.75rem; line-height:1; color:var(--color-gold-2); opacity:.9; }
.svc2-card__rule{ flex:1; height:1px; background:var(--color-line); }

.svc2-card__name{
    font-family:var(--font-display); font-size:1.4rem; line-height:1.2;
    color:var(--color-cream); margin-bottom:.85rem; transition:color .3s ease;
}
.svc2-card__link:hover .svc2-card__name, .svc2-card__link:focus-visible .svc2-card__name{ color:var(--color-gold-2); }
.svc2-card__lead{
    font-size:.85rem; letter-spacing:.02em; line-height:1.45; color:var(--color-gold);
    margin-bottom:.75rem; font-weight:500;
}
.svc2-card__text{ font-size:.95rem; line-height:1.55; color:rgba(244,237,228,.66); }

.svc2-card__more{
    margin-top:auto; padding-top:1.5rem; display:inline-flex; align-items:center; gap:.6rem;
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-gold-2);
}
.svc2-card__more-arrow{ width:.95rem; height:.95rem; transition:transform .3s ease; }
.svc2-card__link:hover .svc2-card__more-arrow, .svc2-card__link:focus-visible .svc2-card__more-arrow{ transform:translateX(.375rem); }

/* ---- pagination ---- */
.svc2__pagination{ display:flex; justify-content:center; gap:.5rem; margin-top:2.25rem; }
.svc2__pagination .swiper-pagination-bullet{
    width:.5rem; height:.5rem; border-radius:50%; background:var(--color-line-strong);
    opacity:1; transition:background .3s ease, transform .3s ease;
}
.svc2__pagination .swiper-pagination-bullet-active{ background:var(--color-gold); transform:scale(1.25); }

/* ---- responsive ---- */
@media (max-width:56.25rem){
    .svc2{ padding:3rem 0; }
    .svc2__head{ flex-direction:column; align-items:flex-start; gap:1.5rem; margin-bottom:2rem; }
    .svc2__nav{ order:2; }
    .svc2__bg-monogram{ font-size:18rem; }
}
@media (prefers-reduced-motion: reduce){
    .svc2-card__link{ transition:none; }
    .svc2-card__link:hover{ transform:none; }
}


/* ============================================================
   [v4] BLOCK: reviews — текстові відгуки (портовано з ВЕРСІЇ 1)
   + додано: назва бізнесу (.review-card__business) і дата (.review-card__date)
   ============================================================ */
.reviews{
    position:relative;
    color:var(--color-cream);
    isolation:isolate;
}
.reviews::before{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    top:-12rem; right:-10rem; width:74rem; height:60rem;
    background:radial-gradient(closest-side, rgba(186,148,45,0.16), rgba(186,148,45,0) 100%);
}
.reviews__defs{ position:absolute; }
.reviews__container{ position:relative; z-index:1; }

.reviews__head{
    max-width:46rem;
    margin:0 0 4rem;
}
.reviews__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;
}
.reviews__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.reviews__title-accent{ color:var(--color-gold); }
.reviews__lead{
    margin:0;
    max-width:42rem;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}

/* ---- Слайдер ---- */
.reviews__slider{
    position:relative;
    overflow:hidden;
    padding-block:1.25rem;            /* запас під hover-ліфт у межах clip-зони */
    margin-block:-1.25rem;
}
.reviews__slider .swiper-slide{
    height:auto;                      /* картки тягнуться на висоту найвищої */
    display:flex;
}

/* ---- Картка ---- */
.review-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    width:100%;
    padding:2rem;
    background:rgba(26, 48, 39, 0.55);
    border:1px solid var(--color-line);
    transition:border-color 320ms var(--ease), transform 320ms var(--ease), background-color 320ms var(--ease);
}
.review-card:hover{
    border-color:var(--color-gold);
    background:rgba(26, 48, 39, 0.72);
    transform:translateY(-0.375rem);
}
.review-card__mark{
    font-family:var(--font-display);
    font-size:3.5rem;
    line-height:0.6;
    color:var(--color-gold);
    opacity:0.5;
}
.review-card__text{
    margin:0;
    flex:1 1 auto;
    font-size:1rem;
    line-height:1.66;
    color:rgba(244, 237, 228, 0.9);
}
.review-card__author{
    display:flex;
    align-items:center;
    gap:1rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line-soft);
}
.review-card__avatar{
    flex:0 0 auto;
    width:4rem;                       /* 64px */
    height:4rem;
    display:block;
}
.review-card__meta{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    min-width:0;
}
.review-card__name{
    margin:0;
    font-family:var(--font-display);
    font-size:1.125rem;
    line-height:1.2;
    color:var(--color-cream);
}
.review-card__role{
    margin:0;
    font-size:0.875rem;
    line-height:1.35;
    color:var(--color-sage);
}

/* ---- Підвал: стрілки/пагінація ліворуч + кнопки праворуч ---- */
.reviews__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:2rem;
    margin-top:3rem;
}
.reviews__controls{
    display:flex;
    align-items:center;
    gap:1.5rem;
}
.reviews__actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
}
.reviews__arrow{
    flex:0 0 auto;
    width:3rem;
    height:3rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:transparent;
    color:var(--color-cream);
    border:1px solid var(--color-line-strong);
    cursor:pointer;
    transition:border-color 240ms var(--ease), color 240ms var(--ease), background-color 240ms var(--ease);
}
.reviews__arrow svg{ width:1.25rem; height:1.25rem; }
.reviews__arrow:hover{
    border-color:var(--color-gold);
    color:var(--color-gold);
    background:rgba(186,148,45,0.08);
}
.reviews__arrow.swiper-button-disabled{
    opacity:0.32;
    pointer-events:none;
}
.reviews__pagination{
    display:flex;
    align-items:center;
    gap:0.5rem;
    width:auto;
}
.reviews__pagination .swiper-pagination-bullet{
    width:0.5rem;
    height:0.5rem;
    margin:0 !important;
    background:var(--color-sage);
    opacity:0.5;
    border-radius:0;                  /* квадратні маркери — бренд без скруглень */
    transition:opacity 240ms var(--ease), background-color 240ms var(--ease), transform 240ms var(--ease);
}
.reviews__pagination .swiper-pagination-bullet-active{
    background:var(--color-gold);
    opacity:1;
    transform:scaleX(2);
}

@media (max-width:56.25rem){    /* 900px */
    .reviews__head{ margin-bottom:2.5rem; }
    .reviews__lead{ font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
    .review-card,
    .review-card__avatar{ transition:none; }
    .review-card:hover{ transform:none; }
}

/* rhythm + нові поля картки */
.reviews{ padding-top:5rem; padding-bottom:5rem; }
@media (max-width:56.25rem){ .reviews{ padding-top:3rem; padding-bottom:3rem; } }
.review-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.review-card__date{
    flex:none; padding-top:.45rem; font-size:.72rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--color-sage);
    font-variant-numeric:tabular-nums; white-space:nowrap;
}
.review-card__business{
    margin:0; font-size:.85rem; line-height:1.35; letter-spacing:.01em; color:var(--color-gold-2);
}


/* [v4] reviews — стійкість до довгого тексту: clamp 6 рядків + «Читати повністю» */
.review-card__text{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6;
    overflow:hidden; position:relative;
}
.review-card.is-clamped .review-card__text{
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
}
.review-card__more{
    display:none; align-self:flex-start; margin:-.25rem 0 0; padding:0;
    background:none; border:0; cursor:pointer;
    font-family:var(--font-sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-gold-2); border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.review-card.is-clamped .review-card__more{ display:inline-block; }
.review-card{ cursor:pointer; }   /* [v4] вся плитка відкриває поп-ап */
.review-card__more:hover, .review-card__more:focus-visible{ color:var(--color-gold); border-bottom-color:var(--color-gold); outline:none; }
.review-card__author{ margin-top:auto; }   /* автор завжди притиснутий донизу */

/* діалог повного відгуку (Fancybox, type:html) */
.review-modal{
    max-width:40rem; padding:2.5rem; background:var(--color-green-2);
    border:1px solid var(--color-line); color:var(--color-cream);
}
.review-modal__mark{ font-family:var(--font-display); font-size:3rem; line-height:.6; color:var(--color-gold); opacity:.5; display:block; margin-bottom:1rem; }
.review-modal__text{ margin:0 0 1.75rem; font-size:1.0625rem; line-height:1.7; color:rgba(244,237,228,.92); }
.review-modal__foot{ display:flex; align-items:center; gap:1rem; padding-top:1.5rem; border-top:1px solid var(--color-line-soft); }
.review-modal__foot .review-card__avatar{ flex:0 0 auto; width:3.75rem; height:3.75rem; }
.review-modal__name{ margin:0; font-family:var(--font-display); font-size:1.125rem; color:var(--color-cream); }
.review-modal__business{ margin:.15rem 0 0; font-size:.85rem; color:var(--color-gold-2); }
.review-modal__date{ margin-left:auto; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-sage); white-space:nowrap; }


/* ============================================================
   [v4] BLOCK: clients — «Наші клієнти» з логотипами (портовано з ВЕРСІЇ 1)
   ============================================================ */
/* ============================================================
   Clients (2.10) — «Наші клієнти»
   Темна тема: смарагдовий фон, світлий текст, золоті акценти.
   Глибина: 1) атмосферні градієнти, 2) декоративні кільця,
   3) контент. Стіна логотипів — CSS-marquee.
   ============================================================ */
.clients{
    position:relative;
    padding:5rem 0;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
/* Шар 1 — атмосферні градієнти */
.clients__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(44rem 34rem at 106% -8%, rgba(186,148,45,0.10), rgba(186,148,45,0) 60%),
        linear-gradient(180deg, var(--color-green-2) 0%, var(--color-green) 100%);
    pointer-events:none;
}
/* Шар 1b — тонка вертикальна сітка «полів документа» */
.clients__grid-lines{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:linear-gradient(90deg, var(--color-line-soft) 1px, transparent 1px);
    background-size:8rem 100%;
    opacity:0.5;
    mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events:none;
}
/* Шар 2 — печатка конфіденційності праворуч-вгорі */
.clients__mark{
    position:absolute;
    top:-7rem;
    right:-7rem;
    width:24rem;
    height:24rem;
    z-index:0;
    opacity:0.45;
    pointer-events:none;
    animation:clients-seal-spin 90s linear infinite;
}
.clients__mark-ring{
    fill:none;
    stroke:var(--color-line);
    stroke-width:1;
}
.clients__mark-ring--dashed{
    stroke:var(--color-line-soft);
    stroke-dasharray:3 8;
}
.clients__mark-arc{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:1.5;
    opacity:0.55;
}
.clients__mark-core{ fill:var(--color-gold-2); stroke:none; }
@keyframes clients-seal-spin{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(360deg); }
}

/* Шар 3 — контент */
.clients__container{
    position:relative;
    z-index:1;
}
.clients__head{
    max-width:46rem;
    margin:0 0 2.5rem;
}
.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__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.clients__title-accent{ color:var(--color-gold); }
.clients__lead{
    margin:0;
    max-width:42rem;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}

/* --- Леджер довіри (count-up) --- */
.clients__ledger{
    margin:0 0 3.5rem;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--color-line);
    border-top:1px solid var(--color-line);
    border-bottom:1px solid var(--color-line);
}
.clients__stat{
    position:relative;
    padding:2rem 1.5rem 2rem 0;
    background:var(--color-green);
}
.clients__stat:not(:first-child){ padding-left:1.5rem; }
.clients__stat-label{
    margin:0 0 1rem;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-sage);
    font-weight:600;
}
.clients__stat-value{
    margin:0;
    display:flex;
    align-items:baseline;
    font-family:var(--font-display);
    font-weight:400;
    line-height:1;
    color:var(--color-cream);
    font-size:clamp(2.5rem, 4vw, 3.5rem);
    font-variant-numeric:tabular-nums;
}
.clients__stat-suffix{
    margin-left:0.125rem;
    color:var(--color-gold);
    font-size:0.5em;
}
.clients__stat-value--seal{ color:var(--color-gold); }
.clients__stat-glyph{
    font-family:var(--font-display);
    font-size:clamp(2.5rem, 4vw, 3.5rem);
    line-height:1;
    color:var(--color-gold);
    text-shadow:0 0 1.5rem rgba(186,148,45,0.35);
}
.clients__stat-note{
    margin:1rem 0 0;
    max-width:16rem;
    font-size:0.875rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.5);
}

/* --- Підпис-розділювач секцій --- */
.clients__section-tag{
    display:flex;
    align-items:center;
    gap:1rem;
    margin:0 0 1.5rem;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--color-gold-2);
    font-weight:600;
}
.clients__section-tag-line{
    width:2rem;
    height:1px;
    background:var(--color-gold);
    flex:0 0 auto;
}

/* --- Хто є клієнтами: сітка категорій --- */
.clients__audience{
    list-style:none;
    margin:0 0 3rem;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--color-line);
    border:1px solid var(--color-line);
}
.clients__audience-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:1rem;
    padding:1.5rem;
    background:var(--color-green);
    overflow:hidden;
    transition:background 0.4s var(--ease);
}
/* промінь, що ковзає при наведенні */
.clients__audience-item::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.5s var(--ease);
}
.clients__audience-item:hover{
    background:var(--color-green-3);
}
.clients__audience-item:hover::after{ transform:scaleX(1); }
.clients__audience-tick{
    position:absolute;
    top:0.75rem;
    right:0.75rem;
    width:1rem;
    height:1rem;
    color:var(--color-gold);
    opacity:0;
    transition:opacity 0.4s var(--ease);
    pointer-events:none;
}
.clients__audience-tick path{
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 0.6s var(--ease);
}
.clients__audience-item:hover .clients__audience-tick{ opacity:1; }
.clients__audience-item:hover .clients__audience-tick path{ stroke-dashoffset:0; }
.clients__audience-no{
    font-family:var(--font-display);
    font-size:0.875rem;
    color:var(--color-gold);
    letter-spacing:0.08em;
    flex:0 0 auto;
    line-height:1.4;
}
.clients__audience-body{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}
.clients__audience-label{
    font-size:1rem;
    line-height:1.4;
    color:var(--color-beige);
    font-weight:500;
}
.clients__audience-desc{
    font-size:0.875rem;
    line-height:1.4;
    color:var(--color-sage);
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height 0.45s var(--ease), opacity 0.45s var(--ease);
}
.clients__audience-item:hover .clients__audience-desc{
    max-height:4rem;
    opacity:1;
}

/* --- Реєстр довіри (CSS-marquee монограм) --- */
.clients__wall{
    position:relative;
    margin:0 0 3rem;
    padding:1.5rem 0 2rem;
    border-top:1px solid var(--color-line);
    border-bottom:1px solid var(--color-line);
    overflow:hidden;
}
.clients__wall-caption{
    margin:0 0 1.5rem;
    max-width:44rem;
    font-size:0.875rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.5);
}
.clients__wall-tag{
    display:inline-block;
    margin-right:0.5rem;
    padding:0.125rem 0.5rem;
    border:1px solid var(--color-line-strong);
    font-size:0.625rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold-2);
    vertical-align:middle;
}
/* плавне згасання логотипів на краях */
.clients__wall::before,
.clients__wall::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:5rem;
    z-index:2;
    pointer-events:none;
}
.clients__wall::before{
    left:0;
    background:linear-gradient(90deg, var(--color-green), transparent);
}
.clients__wall::after{
    right:0;
    background:linear-gradient(270deg, var(--color-green), transparent);
}
.clients__marquee{
    overflow:hidden;
}
.clients__track{
    display:flex;
    width:max-content;
    animation:clients-marquee 40s linear infinite;
}
.clients__marquee:hover .clients__track{
    animation-play-state:paused;
}
.clients__set{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}
.clients__logo{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:11.5rem;
    height:3rem;
    padding:0 1rem;
    color:var(--color-beige);
    opacity:1;
    filter:none;
    transition:color 0.4s var(--ease);
}
/* гриф конфіденційності — закреслювальна риска, що зникає при наведенні */
.clients__logo::after{ display:none; }
.clients__logo:hover{
    color:var(--color-cream);
    opacity:1;
    filter:blur(0);
}
.clients__logo:hover::after{
    transform:scaleX(0);
    opacity:0;
}
.clients__logo svg{
    width:100%;
    height:100%;
    display:block;
}
.clients__logo-word{
    fill:currentColor;
    font-family:var(--font-display);
    font-size:20px;
    letter-spacing:0.06em;
}
@keyframes clients-marquee{
    from{ transform:translateX(0); }
    to{   transform:translateX(-50%); }
}

/* --- Підвал секції з CTA --- */
.clients__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    flex-wrap:wrap;
    padding-top:1rem;
    border-top:1px solid var(--color-line);
}
.clients__foot-text{
    max-width:40rem;
}
.clients__foot-oath{
    display:inline-flex;
    align-items:center;
    margin-bottom:0.75rem;
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold-2);
}
.clients__foot-note{
    margin:0;
    max-width:38rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.6);
}

/* --- Адаптив --- */
@media (max-width:60rem){
    .clients__audience{
        grid-template-columns:repeat(2, 1fr);
    }
    .clients__ledger{
        grid-template-columns:repeat(2, 1fr);
    }
    .clients__stat{ padding:1.75rem 1.5rem; }
    .clients__stat:not(:first-child){ padding-left:1.5rem; }
}
@media (max-width:37.5rem){
    .clients__audience{
        grid-template-columns:1fr;
    }
    .clients__ledger{
        grid-template-columns:1fr;
    }
    .clients__stat{ padding:1.5rem; }
    .clients__stat-note{ max-width:none; }
    .clients__logo{ width:9.5rem; }
    .clients__grid-lines{ background-size:4rem 100%; }
}
@media (max-width:56.25rem){
    .clients{ padding:3rem 0; }
    .clients__head{ margin-bottom:2.5rem; }
    .clients__lead{ font-size:1rem; }
    .clients__foot{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
    .clients__track{ animation:none; }
    .clients__mark{ animation:none; }
    .clients__audience-item,
    .clients__audience-item::after,
    .clients__audience-tick,
    .clients__audience-tick path,
    .clients__audience-desc,
    .clients__logo,
    .clients__logo::after{ transition:none; }
}




/* ============================================================
   [v4] SERVICES PAGE (services.html) — hero / grid / seo / cta
   ============================================================ */
.spage-hero{
    position:relative; color:var(--color-cream);
    padding:calc(var(--header-top, 0px) + var(--header-height, 5rem) + 5rem) 0 4.5rem;
    background:
        radial-gradient(60rem 40rem at 85% -10%, rgba(186,148,45,.10), rgba(186,148,45,0) 60%),
        linear-gradient(180deg, var(--color-green-2) 0%, var(--color-green) 65%);
}
/* помітніша, більша кнопка в hero сторінки послуг */
.spage-hero__actions .button{
    --button-h:3.5rem;
    padding:0 2.5rem;
    font-size:1rem;
    letter-spacing:.08em;
}
.spage-hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.spage-hero__watermark{
    position:absolute; right:-6rem; top:50%; transform:translateY(-50%);
    width:34rem; max-width:55%; opacity:.05;
}
.spage-hero__inner{ position:relative; z-index:1; }
.spage-hero__eyebrow{
    margin:0 0 1.25rem; color:var(--color-gold); font-size:.75rem;
    letter-spacing:.3em; text-transform:uppercase; font-weight:600;
}
.spage-hero__title{
    margin:0 0 1.5rem; max-width:20ch; font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.25rem, 5vw, 4rem); line-height:1.08; letter-spacing:-.01em; text-wrap:balance;
}
.spage-hero__lead{
    margin:0 0 2rem; max-width:52ch; font-size:1.125rem; line-height:1.6; color:rgba(244,237,228,.74);
}
.spage-hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* перелік послуг */
.spage-services{ position:relative; padding:4.5rem 0 5rem; color:var(--color-cream); background:var(--color-green); }
.spage-services__head{ max-width:46rem; margin:0 0 3rem; }
.spage-services__eyebrow{
    display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
    color:var(--color-gold); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
}
.spage-services__title{
    margin:0 0 1rem; font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.85rem, 3.4vw, 3rem); line-height:1.1; letter-spacing:-.005em;
}
.spage-services__title-accent{ color:var(--color-gold); }
.spage-services__lead{ margin:0; max-width:48ch; font-size:1.0625rem; line-height:1.6; color:rgba(244,237,228,.7); }

.spage-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:60rem){ .spage-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:38rem){ .spage-grid{ grid-template-columns:1fr; } }

/* SEO-текст — editorial двоколонка */
.spage-seo{ position:relative; padding:6rem 0; color:var(--color-cream); background:var(--color-green-2); }
.spage-seo__bg{ position:absolute; inset:0; pointer-events:none; }
.spage-seo__glow{ position:absolute; inset:0; background:radial-gradient(42rem 30rem at 10% 8%, rgba(186,148,45,.10), rgba(186,148,45,0) 60%); }
.spage-seo__inner{ position:relative; z-index:1; }
.spage-seo__layout{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:4rem; align-items:start; }
.spage-seo__aside{ position:sticky; top:6rem; }
.spage-seo__eyebrow{ display:flex; align-items:center; gap:.6rem; margin:0 0 1.5rem; color:var(--color-gold); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600; }
.spage-seo__title{ margin:0 0 1.75rem; font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.18; letter-spacing:-.005em; color:var(--color-cream); text-wrap:balance; }
.spage-seo__sign{ display:flex; align-items:center; gap:.75rem; margin:0; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-sage); }
.spage-seo__sign-line{ width:2.5rem; height:1px; background:var(--color-gold); opacity:.6; }
.spage-seo__body{ display:grid; gap:1.6rem; padding-left:2.75rem; border-left:1px solid var(--color-line); }
.spage-seo__p{ position:relative; margin:0; font-size:1.0625rem; line-height:1.8; color:rgba(244,237,228,.76); }
.spage-seo__p::before{ content:""; position:absolute; left:-2.75rem; top:.75em; width:1.5rem; height:1px; background:var(--color-gold); opacity:.55; }
.spage-seo__p:first-child{ font-size:1.2rem; line-height:1.7; color:var(--color-cream); }
@media (max-width:60rem){
    .spage-seo__layout{ grid-template-columns:1fr; gap:2.5rem; }
    .spage-seo__aside{ position:static; }
    .spage-seo__body{ padding-left:1.5rem; }
    .spage-seo__p::before{ left:-1.5rem; width:.85rem; }
}

/* CTA — горизонтальна панель (текст зліва, кнопка справа), у стилістиці сторінки */
.spage-cta{ padding:3.5rem 0; color:var(--color-cream); background:var(--color-green); }
.spage-cta__panel{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:2.5rem; padding:2.25rem 2.75rem; background:var(--color-green-3); border:1px solid var(--color-line); border-left:3px solid var(--color-gold); }
.spage-cta__panel::after{ content:""; position:absolute; right:-3rem; top:50%; transform:translateY(-50%); width:18rem; height:18rem; background:radial-gradient(closest-side, rgba(186,148,45,.10), rgba(186,148,45,0) 70%); pointer-events:none; }
.spage-cta__lead{ position:relative; z-index:1; max-width:62ch; }
.spage-cta__kicker{ margin:0 0 .65rem; color:var(--color-gold); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; }
.spage-cta__text{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.3; letter-spacing:-.005em; color:var(--color-cream); text-wrap:balance; }
.spage-cta__sub{ margin:.6rem 0 0; font-size:1rem; line-height:1.5; color:rgba(244,237,228,.66); }
.spage-cta__actions{ position:relative; z-index:1; flex:none; }
@media (max-width:48rem){ .spage-cta{ padding:2.5rem 0; } .spage-cta__panel{ flex-direction:column; align-items:flex-start; gap:1.5rem; padding:1.75rem 1.5rem; } }

@media (max-width:56.25rem){
    .spage-hero{ padding-top:calc(var(--header-top, 0px) + var(--header-height, 5rem) + 3rem); padding-bottom:3rem; }
    .spage-services{ padding:3rem 0 3.5rem; }
    .spage-seo{ padding:3.5rem 0; }
}


/* [v4] футер: графік роботи — єдиний колір тексту (без напівпрозорих рядків) */
.site-footer__col--hours .site-footer__hours-day,
.site-footer__col--hours .site-footer__hours-time,
.site-footer__hours-row--muted,
.site-footer__hours-row--muted .site-footer__hours-time{ color:var(--color-cream); }  /* графік: один колір */


/* ============================================================
   [v4] SERVICE PAGE (service-*.html) — окрема послуга
   Рівний фон секцій (плавно), контраст дають картки формату й списки.
   ============================================================ */
.svp-back{ color:var(--color-gold-2); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s var(--ease); }
.svp-back:hover{ border-bottom-color:var(--color-gold-2); }

.svp-section{ position:relative; padding:4.5rem 0; color:var(--color-cream); background:var(--color-green); }
.svp-section--alt{ background:var(--color-green); }   /* однаковий фон — без різких швів */
.svp-section__head{ max-width:46rem; margin:0 0 2.5rem; }
.svp-section__eyebrow{ display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; color:var(--color-gold); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600; }
.svp-section__title{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.12; letter-spacing:-.005em; color:var(--color-cream); }
.svp-section + .svp-section .svp-section__head{ padding-top:0; }
.svp-section__body{ max-width:64rem; }

/* Формат роботи — стек повноширинних панелей (асиметрія за вмістом) */
.svp-formats{ display:grid; gap:1.5rem; }
.svp-formats--two{ grid-template-columns:repeat(2,1fr); align-items:stretch; }
@media (max-width:48rem){ .svp-formats--two{ grid-template-columns:1fr; } }
.svp-format{ position:relative; padding:2rem 2rem; background:var(--color-green-3); border:1px solid var(--color-line); overflow:hidden; }
.svp-format--feature{ border-color:rgba(186,148,45,.40); }
.svp-format--feature::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--color-gold); }
.svp-format__top{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.svp-format__num{ font-family:var(--font-display); font-size:1.5rem; line-height:1; color:var(--color-gold-2); opacity:.9; }
.svp-format__name{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.35rem; line-height:1.2; color:var(--color-cream); }
.svp-format__badge{ margin-left:auto; padding:.35rem .75rem; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-gold); border:1px solid rgba(186,148,45,.45); }
.svp-format__desc{ margin:0; font-size:1rem; line-height:1.65; color:rgba(244,237,228,.76); max-width:72ch; }
.svp-incl{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.75rem 2rem; }
@media (max-width:48rem){ .svp-incl{ grid-template-columns:1fr; } }
.svp-incl li{ position:relative; padding-left:1.7rem; font-size:.95rem; line-height:1.5; color:rgba(244,237,228,.8); }
.svp-incl li::before{ content:""; position:absolute; left:.1rem; top:.35em; width:.5rem; height:.85rem; border-right:1.5px solid var(--color-gold); border-bottom:1.5px solid var(--color-gold); transform:rotate(45deg); }

/* Послуги — міні-плитки */
.svp-lead{ max-width:62ch; margin:0 0 2rem; font-size:1.0625rem; line-height:1.7; color:rgba(244,237,228,.78); }
.svp-outro{ max-width:72ch; margin:2rem 0 0; font-size:1.0625rem; line-height:1.7; color:rgba(244,237,228,.78); }
.svp-subhead{ margin:2.25rem 0 1rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--color-gold); display:flex; align-items:center; gap:.6rem; }
.svp-subhead::before{ content:""; width:1.5rem; height:1px; background:var(--color-gold); opacity:.5; }
.svp-srv-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:60rem){ .svp-srv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:40rem){ .svp-srv-grid{ grid-template-columns:1fr; } }
.svp-srv{ display:flex; align-items:flex-start; gap:.85rem; padding:1.25rem; background:var(--color-green-2); border:1px solid var(--color-line); transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
.svp-srv:hover{ border-color:rgba(186,148,45,.45); transform:translateY(-3px); background:var(--color-green-3); }
.svp-srv__mark{ flex:none; width:.5rem; height:.5rem; margin-top:.45rem; border:1px solid var(--color-gold); transform:rotate(45deg); }
.svp-srv__text{ font-size:.95rem; line-height:1.45; color:rgba(244,237,228,.85); }

/* Коли варто звернутись — картки-сигнали */
.svp-when-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:48rem){ .svp-when-grid{ grid-template-columns:1fr; } }
.svp-when-card{ display:flex; align-items:center; gap:1rem; padding:1.35rem 1.5rem; background:var(--color-green-3); border:1px solid var(--color-line); border-left:2px solid var(--color-gold); }
.svp-when-card__icon{ flex:none; width:1.6rem; height:1.6rem; color:var(--color-gold); }
.svp-when-card__icon svg{ width:100%; height:100%; display:block; }
.svp-when-card__text{ font-size:.98rem; line-height:1.45; color:var(--color-cream); }


/* [v4] плавна каскадна поява плиток у блоках (по рядах) */
.svp-srv-grid .svp-srv.reveal:nth-child(3n+1){ transition-delay:0ms; }
.svp-srv-grid .svp-srv.reveal:nth-child(3n+2){ transition-delay:80ms; }
.svp-srv-grid .svp-srv.reveal:nth-child(3n+3){ transition-delay:160ms; }
.svp-when-grid .svp-when-card.reveal:nth-child(2n+1){ transition-delay:0ms; }
.svp-when-grid .svp-when-card.reveal:nth-child(2n){ transition-delay:90ms; }   /* каскад плиток */
@media (prefers-reduced-motion: reduce){
    .svp-srv.reveal, .svp-when-card.reveal{ transition-delay:0ms !important; }
}

/* [v4] Досвід — нумеровані картки результатів */
.svp-results{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:60rem){ .svp-results{ grid-template-columns:1fr; } }
.svp-result{ display:flex; flex-direction:column; gap:1rem; padding:2rem 1.85rem; background:var(--color-green-3); border:1px solid var(--color-line); border-top:2px solid var(--color-gold); }
.svp-result__num{ font-family:var(--font-display); font-size:2rem; line-height:1; color:var(--color-gold-2); }
.svp-result__text{ margin:0; font-size:1rem; line-height:1.55; color:rgba(244,237,228,.82); }

/* [v4] сторінка «Про нас» — кнопку у блоці засновниці вирівняно донизу
   (на одній лінії з підписом під фото) */
.about--page .about__layout{ align-items:stretch; }
.about--page .about__portrait{ display:flex; flex-direction:column; }
.about--page .about__caption{ margin-top:auto; }
.about--page .about__body{ display:flex; flex-direction:column; }
.about--page .about__body .about__cta{ margin-top:auto; align-self:flex-start; }

/* [v4] програма лояльності — список знижок */
.prices__loyalty-list{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.55rem; }
.prices__loyalty-item{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:.55rem; border-bottom:1px solid var(--color-line); }
.prices__loyalty-item:last-child{ border-bottom:0; padding-bottom:0; }
.prices__loyalty-item-label{ font-size:.92rem; line-height:1.35; color:rgba(244,237,228,.82); }
.prices__loyalty-item-val{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-gold-2); white-space:nowrap; }

/* [v4] прайс-лист (ціни по галузях) */
.pricelist{ list-style:none; margin:0; padding:0; }
.pricelist__row{ display:flex; align-items:baseline; gap:.85rem; padding:1rem 0; border-bottom:1px solid var(--color-line); }
.pricelist__row:first-child{ border-top:1px solid var(--color-line); }
.pricelist__name{ flex:0 1 auto; font-size:1.0rem; line-height:1.5; color:rgba(244,237,228,.9); }
.pricelist__dots{ flex:1 1 auto; min-width:1.5rem; align-self:stretch; border-bottom:1px dotted var(--color-line-strong); transform:translateY(-.35rem); }
.pricelist__val{ flex:0 0 auto; font-family:var(--font-display); font-size:1.05rem; color:var(--color-gold-2); white-space:nowrap; }
.pricelist__note{ margin:1.5rem 0 0; max-width:64ch; font-size:.85rem; line-height:1.6; color:var(--color-sage); }
@media (max-width:38rem){
    .pricelist__row{ flex-wrap:wrap; gap:.2rem; }
    .pricelist__dots{ display:none; }
    .pricelist__val{ width:100%; }
}

/* ============================================================
   [v4] CASES — перелік кейсів (фільтр + сітка + сайдбар + пагінація)
   ============================================================ */
.cases{ padding:4rem 0 5rem; color:var(--color-cream); background:var(--color-green); }
.cases__filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.5rem; }
.cases__tab{ padding:.55rem 1.1rem; background:transparent; border:1px solid var(--color-line); color:rgba(244,237,228,.75); font-family:var(--font-sans); font-size:.85rem; cursor:pointer; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.cases__tab:hover{ border-color:var(--color-gold); color:var(--color-cream); }
.cases__tab.is-active{ background:var(--color-gold); border-color:var(--color-gold); color:var(--color-green); }
.cases__layout{ display:grid; grid-template-columns:1fr 19rem; gap:2.5rem; align-items:start; }
@media (max-width:60rem){ .cases__layout{ grid-template-columns:1fr; } }
.cases__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:44rem){ .cases__grid{ grid-template-columns:1fr; } }
.case-card__link{ display:flex; flex-direction:column; height:100%; background:var(--color-green-3); border:1px solid var(--color-line); text-decoration:none; color:inherit; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.case-card__link:hover{ border-color:rgba(186,148,45,.45); transform:translateY(-4px); }
.case-card__media{ display:block; aspect-ratio:16/10; overflow:hidden; }
.case-card__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2); transition:transform .5s var(--ease); }
.case-card__link:hover .case-card__media img{ transform:scale(1.04); }
.case-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.35rem 0; }
.case-card__tag{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-gold); }
.case-card__date{ font-size:.75rem; color:var(--color-sage); white-space:nowrap; }
.case-card__title{ padding:.6rem 1.35rem 0; font-family:var(--font-display); font-size:1.2rem; line-height:1.25; color:var(--color-cream); }
.case-card__desc{ padding:.55rem 1.35rem 1.1rem; font-size:.92rem; line-height:1.5; color:rgba(244,237,228,.7); }
.case-card__more{ margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; padding:0 1.35rem 1.35rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-gold-2); }
.case-card__more svg{ width:.95rem; height:.95rem; }
.cases-aside{ position:sticky; top:6rem; background:var(--color-green-2); border:1px solid var(--color-line); padding:1.5rem 1.5rem .5rem; }
@media (max-width:60rem){ .cases-aside{ position:static; } }
.cases-aside__head{ margin:0 0 1rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--color-gold); }
.cases-aside__list{ list-style:none; margin:0; padding:0; }
.cases-aside__link{ display:block; padding:.9rem 0; border-bottom:1px solid var(--color-line); text-decoration:none; color:inherit; }
.cases-aside__item:last-child .cases-aside__link{ border-bottom:0; }
.cases-aside__tag{ display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-gold); margin-bottom:.3rem; }
.cases-aside__title{ display:block; font-size:.92rem; line-height:1.35; color:rgba(244,237,228,.88); transition:color .25s var(--ease); }
.cases-aside__link:hover .cases-aside__title{ color:var(--color-gold-2); }
.cases-aside__date{ display:block; margin-top:.3rem; font-size:.72rem; color:var(--color-sage); }
.cases__more{ display:flex; justify-content:center; margin-top:1.5rem; }
.pagination{ display:flex; justify-content:center; gap:.4rem; margin-top:3rem; }
.pagination__btn{ min-width:2.5rem; height:2.5rem; padding:0 .55rem; background:transparent; border:1px solid var(--color-line); color:rgba(244,237,228,.8); font-family:var(--font-sans); font-size:.9rem; cursor:pointer; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.pagination__btn:hover:not([disabled]){ border-color:var(--color-gold); color:var(--color-cream); }
.pagination__btn.is-active{ background:var(--color-gold); border-color:var(--color-gold); color:var(--color-green); }
.pagination__btn[disabled]{ opacity:.4; cursor:default; }

/* CASE page */
.case-facts-wrap{ background:var(--color-green-2); padding:2.5rem 0; }
.case-facts{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin:0; }
@media (max-width:56rem){ .case-facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:34rem){ .case-facts{ grid-template-columns:1fr; } }
.case-fact__label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-gold); margin-bottom:.4rem; }
.case-fact__val{ margin:0; font-family:var(--font-display); font-size:1.15rem; line-height:1.3; color:var(--color-cream); }
.case-prose{ max-width:62rem; }
.case-prose__title{ margin:0 0 1rem; font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--color-cream); }
.case-prose__text{ margin:0; font-size:1.0625rem; line-height:1.75; color:rgba(244,237,228,.8); max-width:65ch; }
.case-hero__tag{ color:var(--color-gold); }


/* [v4] футер: єдиний білий колір тексту (gold-заголовки та примітка-графік — без змін) */
.site-footer__slogan,
.site-footer__contact-label,
.site-footer__link,
.site-footer__copy,
.site-footer__legal-link,
.site-footer__hours-day,
.site-footer__hours-time{ color:var(--color-cream); }
.site-footer__link:hover .site-footer__link-text,
.site-footer__legal-link:hover,
.site-footer__contact-item:hover .site-footer__contact-value{ color:var(--color-gold-2); }

/* [v4] CONTACTS page */
.cinfo-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:60rem){ .cinfo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:38rem){ .cinfo-grid{ grid-template-columns:1fr; } }
.cinfo{ padding:1.75rem; background:var(--color-green-3); border:1px solid var(--color-line); border-top:2px solid var(--color-gold); }
.cinfo__label{ margin:0 0 .75rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-gold); }
.cinfo__value{ margin:0; font-size:1rem; line-height:1.55; color:var(--color-cream); }
.cinfo__value a{ color:inherit; text-decoration:none; transition:color .25s var(--ease); }
.cinfo__value a:hover{ color:var(--color-gold-2); }
.contacts-soc{ margin-top:2rem; }
.contacts-map{ border:1px solid var(--color-line); overflow:hidden; }
.contacts-map iframe{ display:block; width:100%; height:440px; border:0; filter:grayscale(.35) contrast(.95) brightness(.95); }
.svp-section--map{ padding-bottom:5rem; }

/* [v4] NEWS single post */
.post{ padding:3.5rem 0 5rem; color:var(--color-cream); background:var(--color-green); }
.post__body{ max-width:58rem; }
.post__lead{ margin:0 0 2rem; font-size:1.2rem; line-height:1.7; color:var(--color-cream); }
.post__body p{ margin:0 0 1.5rem; font-size:1.0625rem; line-height:1.8; color:rgba(244,237,228,.8); }
.post__h2{ margin:2.25rem 0 1rem; font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--color-cream); }
.post__figure{ margin:2rem 0; }
.post__figure img{ display:block; width:100%; border:1px solid var(--color-line); }
.post__figure figcaption{ margin-top:.6rem; font-size:.85rem; color:var(--color-sage); }

/* [v4] CTA-модалка з формою */
.cta-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.cta-modal[hidden]{ display:none; }
.cta-modal__backdrop{ position:absolute; inset:0; background:rgba(8,16,12,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cta-modal__dialog{ position:relative; z-index:1; width:100%; max-width:34rem; max-height:90vh; overflow-y:auto; padding:2.75rem 2.25rem 2.25rem; background:var(--color-green-2); border:1px solid var(--color-line); border-top:2px solid var(--color-gold); box-shadow:0 2rem 4rem rgba(0,0,0,.5); animation:cta-modal-in .35s cubic-bezier(.4,0,.2,1); }
@keyframes cta-modal-in{ from{ opacity:0; transform:translateY(1rem) scale(.98); } to{ opacity:1; transform:none; } }
.cta-modal__close{ position:absolute; top:.85rem; right:.85rem; width:2.5rem; height:2.5rem; display:grid; place-items:center; background:transparent; border:0; color:var(--color-sage); cursor:pointer; transition:color .25s var(--ease); }
.cta-modal__close:hover{ color:var(--color-cream); }
.cta-modal__close svg{ width:1.25rem; height:1.25rem; }
.cta-modal__eyebrow{ margin:0 0 .5rem; color:var(--color-gold); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; }
.cta-modal__title{ margin:0 0 .6rem; font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); line-height:1.15; color:var(--color-cream); }
.cta-modal__lead{ margin:0 0 1.75rem; font-size:.95rem; line-height:1.55; color:rgba(244,237,228,.7); }
.cta-modal .contact__form{ margin:0; }
.cta-modal .contact__form-note{ display:none; }
@media (prefers-reduced-motion: reduce){ .cta-modal__dialog{ animation:none; } }
/* ============================================================
   2.x — Послуги (Split master-detail) .svcx
   Індекс напрямів зліва, сцена з послугами справа,
   золотий меридіан, рухомий індикатор, kinetic-поява.
   ============================================================ */
.svcx{ position:relative; padding:5rem 0; }
/* Золоте сяйво у верхньо-правому куті — як на hero; гасне зверху/знизу (безшовно) */
.svcx::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    top:-12rem; right:-10rem; width:66rem; height:56rem;
    background:radial-gradient(closest-side, rgba(186,148,45,0.20), rgba(186,148,45,0) 100%);
}
.svcx__container{ position:relative; z-index:1; }

.svcx__head{ max-width:42rem; margin:0 0 3.5rem; }
.svcx__eyebrow{
    margin:0 0 1rem; display:inline-flex; align-items:center; gap:0.75rem;
    font-family:var(--font-sans); font-size:0.75rem; letter-spacing:0.28em;
    text-transform:uppercase; color:var(--color-gold);
}
.svcx__title{
    margin:0 0 1rem; font-family:var(--font-display); font-weight:400;
    font-size:clamp(2rem,4vw,3rem); line-height:1.08; color:var(--color-cream);
}
.svcx__title-accent{ color:var(--color-gold-2); }
.svcx__lead{ margin:0; max-width:36rem; color:var(--color-beige); font-size:1rem; line-height:1.6; }

.svcx__body{
    position:relative; display:grid;
    grid-template-columns:minmax(0,0.92fr) minmax(0,1.4fr); gap:0 4rem;
}
.svcx__body::before{
    content:""; position:absolute; top:0; bottom:0; left:39%; width:1px;
    background:linear-gradient(180deg, transparent, var(--color-line-strong) 12%, var(--color-line-strong) 88%, transparent);
    pointer-events:none;
}

.svcx__index{ position:relative; padding:0.5rem 2.5rem 0.5rem 1.5rem; }
.svcx__rail{ position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--color-line-soft); }
.svcx__marker{
    position:absolute; left:-1px; width:2px; background:var(--color-gold);
    top:0; height:0; transition:top 0.45s var(--ease), height 0.45s var(--ease);
}
.svcx__item{
    position:relative; display:flex; align-items:baseline; gap:1.25rem; width:100%;
    padding:1.25rem 0; text-align:left; border:0; background:none; cursor:pointer;
    color:var(--color-sage); font-family:var(--font-display); font-size:1.5rem; line-height:1.15;
    transition:color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.svcx__item-arrow{
    margin-left:auto; align-self:center; color:var(--color-gold-2);
    opacity:0; transform:translateX(-0.5rem); transition:opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.svcx__item-arrow svg{ width:1.25rem; height:1.25rem; display:block; }
.svcx__item:hover{ color:var(--color-beige-2); padding-left:0.75rem; }
.svcx__item.is-active{ color:var(--color-cream); padding-left:0.75rem; }
.svcx__item.is-active .svcx__item-arrow{ opacity:1; transform:none; }

.svcx__stage{ position:relative; min-height:26rem; padding:0.5rem 0; }
.svcx__panel{
    position:absolute; inset:0; z-index:1; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.4s var(--ease), visibility 0.4s;
}
.svcx__panel.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.svcx__kicker{
    margin:0 0 1rem; font-family:var(--font-sans); font-size:0.75rem; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--color-gold-2);
}
.svcx__name{
    margin:0 0 0.75rem; font-family:var(--font-display); font-weight:400;
    font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.05; color:var(--color-cream);
}
.svcx__desc{ margin:0 0 2rem; max-width:30rem; color:var(--color-beige); font-size:1rem; line-height:1.6; }
.svcx__rule{ width:3rem; height:1px; background:var(--color-gold); margin:0 0 2rem; opacity:0.6; }
.svcx__services{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:1fr; gap:0.875rem;
}
.svcx__service{
    position:relative; padding-left:1.5rem;
    font-size:1.0625rem; line-height:1.4;
}
.svcx__service::before{
    content:""; position:absolute; left:0; top:0.6em; width:0.75rem; height:1px;
    background:var(--color-gold); transition:width 0.3s var(--ease);
}
.svcx__service-link{
    color:var(--color-beige-2); transition:color 0.3s var(--ease);
}
.svcx__service:hover::before{ width:1.125rem; }
.svcx__service-link:hover{ color:var(--color-cream); }

@keyframes svcx-rise{ from{ opacity:0; transform:translateY(0.9rem); } to{ opacity:1; transform:none; } }
.svcx__panel.is-active .svcx__kicker,
.svcx__panel.is-active .svcx__name,
.svcx__panel.is-active .svcx__desc,
.svcx__panel.is-active .svcx__rule,
.svcx__panel.is-active .svcx__service{
    animation:svcx-rise 0.55s var(--ease) both;
}
.svcx__panel.is-active .svcx__name{ animation-delay:0.05s; }
.svcx__panel.is-active .svcx__desc{ animation-delay:0.1s; }
.svcx__panel.is-active .svcx__rule{ animation-delay:0.14s; }
.svcx__panel.is-active .svcx__service{ animation-delay:calc(0.18s + var(--i) * 0.06s); }

@media (prefers-reduced-motion:reduce){
    .svcx__panel.is-active *{ animation:none !important; }
}

@media (max-width:60rem){
    .svcx__body{ grid-template-columns:1fr; gap:2.5rem; }
    .svcx__body::before{ display:none; }
    .svcx__index{ padding-right:1.5rem; }
    .svcx__stage{ position:static; min-height:0; }
    .svcx__panel{ position:static; display:none; opacity:1; visibility:visible; }
    .svcx__panel.is-active{ display:block; }
}
@media (max-width:40rem){
    .svcx__item{ font-size:1.25rem; }
}