/* ==========================================================================
   DR. BRONOVA — main.css
   ЗІБРАНИЙ ФАЙЛ. Не редагуйте напряму — правте модулі у css/ і зберіть заново.
   ========================================================================== */



/* ===== VARIABLES ===== */
/* ==========================================================================
   DR. BRIONOVA — main.css
   Скелет під макет. Усі кольори та шрифти — у :root.
   ========================================================================== */

:root {
    /* --- Базова палітра (точно як у Figma) --- */
    --color-white: #fff;
    --color-dark: #303152;
    --color-pink: #d24ba7;
    --color-background: #f4f4f9;

    /* --- Похідні для інтерфейсу (посилаються на базові) --- */
    --c-accent: var(--color-pink);
    --c-accent-dark: #b23a8c;
    /* pink темніший — hover кнопок */
    --c-dark: var(--color-dark);
    --c-text: var(--color-dark);
    --c-bg: var(--color-white);
    --c-bg-alt: var(--color-background);
    --c-on-dark: var(--color-white);
    --c-muted: #8a8bac;
    /* сірий для підписів/описів */
    --c-border: #e4e4ee;
    /* тонкі лінії та рамки */

    /* --- ШРИФТИ (з Figma) --- */
    --font-family: 'Poppins', system-ui, sans-serif;
    /* основний (як у Figma) */
    --second-family: 'EB Garamond', Georgia, serif;
    /* заголовки (як у Figma) */

    /* Аліаси теми (посилаються на Figma-шрифти) */
    --font-body: var(--font-family);
    --font-display: var(--second-family);

    /* --- ТИПОГРАФІКА --- */
    --fs-h1: clamp(45px, 30px + 4.2vw, 70px);
    --fs-h2: clamp(36px, 20px + 3.5vw, 50px);
    --fs-body: 1rem;

    /* --- РОЗКЛАДКА --- */
    --container: 1440px;
    --gap: 24px;
    --radius: 4px;
}

html {
    scroll-behavior: smooth;
}

#booking {
    scroll-margin-top: 120px;
}

/* ===== BASE ===== */
/* --- Reset / база --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 .5em;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--c-accent);
    text-decoration: none;
}

a:hover {
    color: var(--c-accent-dark);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(20px, 8vw, 100px);
}

/* --- Кнопки --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.btn--primary {
    background: var(--color-pink);
    color: var(--color-white);
}

.btn--primary:hover {
    background: var(--c-accent-dark);
    color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-pink);
    border-color: var(--color-pink)
}

.btn--outline svg {
    margin-left: 10px;
}

.btn--outline:hover {
    background: var(--color-pink);
    color: var(--color-white);
}

/* Более точный вариант */
.hero__services:hover svg path,
.btn--outline.hero__services:hover svg path {
    stroke: #fff;
}


/* ===== UTILS ===== */
/* ==========================================================================
   Спільні утиліти
   ========================================================================== */
.eyebrow {
    font-size: 16px;
    font-weight: 600;
    color: #8a8bac;
    margin: 0 0 20px;
}

.text-accent {
    color: var(--c-accent);
}

/* Список із квадратними галочками (переваги) */
.check-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 140%;
    color: var(--c-text);
}


/* ===== HEADER ===== */
/* --- Топбар --- */
.topbar {
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
}

.topbar__inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Шапка --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-bg);
}

.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    min-height: 97px;
}

.site-header__title {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--color-pink);
}

.site-nav {
    justify-self: center;
}

.site-nav__list {
    display: flex;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list a {
    color: var(--c-text);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}

.site-nav__list a:hover {
    color: var(--c-accent);
}

.site-header__cta {
    justify-self: end;
    white-space: nowrap;
    /* width: 316px;
    max-width: 100%; */
    width: auto;
    padding: clamp(12px, 1.2vw, 16px) clamp(20px, 2.5vw, 32px);
    font-size: clamp(15px, 1.5vw, 18px);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.site-header__burger span {
    width: 28px;
    height: 2px;
    background: var(--color-pink);
    transition: .3s;
}

.site-header__burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header__burger.is-active span:nth-child(2) {
    opacity: 0;
}

.site-header__burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav__close {
    display: none;
    position: absolute;
    top: 24px;
    right: 20px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-pink);
    line-height: 0;
}

/* --- Адаптив --- */
@media (max-width: 860px) {
    .topbar {
        font-size: 14px;
        line-height: 140%;
    }

    .site-header__inner {
        grid-template-columns: auto auto;
        min-height: 60px;
    }

    .site-header__cta {
        display: none;
    }

    .site-header__burger {
        display: flex;
        justify-self: end;
    }

    /* Повноекранне меню */
    .site-nav {
        justify-self: initial;
        position: fixed;
        inset: 0;
        /* top/right/bottom/left = 0 */
        z-index: 100;
        background: var(--color-white);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 25vh;
        /* пункти трохи вище центру, як у макеті */

        /* Анімація появи */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .3s ease, transform .3s ease, visibility .3s;
    }

    .site-nav__close {
        display: block;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        width: 100%;
    }

    .site-nav__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__list li {
        padding: 0;
        border: none;
    }

    .site-nav__list a {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 18px;
        line-height: 140%;
        text-align: center;
        color: var(--color-dark);
        text-decoration: none;
    }

    .site-nav__list a:hover,
    .site-nav__list a:focus {
        color: var(--color-pink);
    }

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


/* ===== FOOTER ===== */
/* ==========================================================================
   ФУТЕР
   ========================================================================== */
.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 100px 0 60px;
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

/* Колонка бренду */
.site-footer__brand-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.site-footer__brand {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
}

.site-footer__desc {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-white);
    max-width: 360px;
    width: 100%;
}

.site-footer__copy {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-white);
    opacity: 0.5;
}

/* Меню */
.site-footer__nav {
    flex: 0 0 auto;
}

.site-footer__menu {
    display: flex;
    flex-direction: column;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__menu a {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    color: var(--color-white);
    text-decoration: none;
}

.site-footer__menu a:hover {
    color: var(--color-pink);
}

/* Контакти */
.site-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.site-footer__contacts a,
.site-footer__contacts span {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    color: var(--color-white);
    text-decoration: none;
}

.site-footer__contacts a:hover {
    color: var(--color-pink);
}

/* --- Мобільний: одна колонка, копірайт останній --- */
@media (max-width: 860px) {

    .site-footer {
        padding: 60px 0 20px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Контейнер зникає з розкладки — діти стають прямими нащадками флекса */
    .site-footer__brand-col {
        display: contents;
    }

    /* Тепер order працює над усіма елементами разом */
    .site-footer__brand {
        order: 1;
    }

    .site-footer__desc {
        order: 2;
        margin-top: 20px;
    }

    .site-footer__nav {
        order: 3;
        margin-left: 0;
        margin-top: 30px;
    }

    .site-footer__menu {
        gap: 30px;
    }

    .site-footer__contacts {
        order: 4;
        gap: 30px;
    }

    .site-footer__copy {
        order: 5;
    }

    /* Лінії: після меню і після контактів */
    .site-footer__nav {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .site-footer__contacts {
        padding-top: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid #4e4f70;
    }

    .site-footer__copy {
        padding-top: 30px;
        text-align: left;
    }

    /* Скидаємо фіксовані ширини */
    .site-footer__contacts {
        flex: 1 1 auto;
    }
}


/* ===== HERO ===== */
/* --- Hero --- */
.hero {
    background: var(--c-bg);
    padding: 60px 0 100px;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: flex-start;
}

.hero__eyebrow {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-muted);
    line-height: 140%;
    margin: 0 0 20px;
}

.hero__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.hero__title-accent {
    color: var(--color-pink);
    display: block;
}

.hero__list {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

.hero__list li {
    position: relative;
    font-family: var(--font-family);
    font-weight: 400;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 140%;
    color: var(--c-text);
}

.hero__list li::before,
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='4' fill='%23D24BA7'/%3E%3Cpath d='M13 6.5L8.33333 11.5L6 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__services span {
    transition: transform .2s;
    display: inline-block;
}

.hero__services:hover span {
    transform: translateX(4px);
}

.hero__media {
    position: relative;
}

.hero__img {
    border-radius: var(--radius);
    width: 100%;
    object-fit: cover;
}

/* --- Адаптив --- */
@media (max-width: 860px) {
    .hero {
        padding: 20px 0 60px;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero__media {
        order: -1;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        text-align: center;
    }
}


/* ===== DIRECTIONS ===== */
/* ==========================================================================
   НАПРЯМКИ РОБОТИ (лікування / діагностика) — грід рядами
   ========================================================================== */
.directions {
    position: relative;
    overflow: hidden;
}

/* Двоколірний фон на всю ширину екрана */
.directions::before,
.directions::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.directions::before {
    left: 0;
    background: var(--color-dark);
}

.directions::after {
    right: 0;
    background: var(--color-white);
}

/* Грід: 2 колонки × 3 ряди.
   Рядки авто-висоти, елементи одного ряду вирівнюються між колонками. */
.directions__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 120px;
    align-items: start;
}

/* --- Колонкові відступи (ліва тёмна / права світла) --- */
.directions__head--dark,
.directions__media--dark,
.directions__cards--dark {
    padding-right: 0;
    padding-left: 0;
}

/* Вертикальні padding по рядах через самі елементи */
.directions__head {
    padding-top: 100px;
}

.directions__cards {
    padding-bottom: 100px;
}

/* Ліва колонка притиснута до лівого краю контейнера,
   права — до правого; зазор дає column-gap */
.directions__head--dark,
.directions__media--dark,
.directions__cards--dark {
    grid-column: 1;
}

.directions__head--light,
.directions__media--light,
.directions__cards--light {
    grid-column: 2;
}

/* --- Заголовки (ряд 1) --- */
.directions__eyebrow {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    margin: 0 0 20px;
}

.directions__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 100%;
    margin: 0 0 20px;
}

.directions__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    max-width: 520px;
    margin: 0;
}

/* Кольори тексту за колонками */
.directions__head--dark .directions__eyebrow {
    color: rgba(255, 255, 255, .7);
}

.directions__head--dark .directions__title,
.directions__head--dark .directions__text {
    color: var(--color-white);
}

.directions__head--light .directions__eyebrow {
    color: var(--c-muted);
}

.directions__head--light .directions__title {
    color: var(--color-dark);
}

.directions__head--light .directions__text {
    color: var(--color-dark);
}

/* --- Зображення (ряд 2) — вирівняні автоматично --- */
.directions__media {
    padding: 32px 0;
}

.directions__img {
    display: block;
    width: 100%;
    aspect-ratio: 560 / 322;
    object-fit: cover;
    border-radius: 8px;
}

/* --- Карточки (ряд 3) --- */
.directions__cards {
    list-style: none;
    margin: 0 0 100px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dcard {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 16px;
    align-items: start;
    padding: 12px;
    border-radius: 4px;
    background: var(--color-white);
}

.directions__cards--dark .dcard {
    background: rgba(255, 255, 255, .06);
}

.directions__cards--light .dcard {
    background: #f4f4f9;
}

.dcard__check {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='4' fill='%23D24BA7'/%3E%3Cpath d='M13 6.5L8.33333 11.5L6 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.dcard__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    margin: 0;
}

.dcard__desc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    margin: 6px 0 0;
}

.directions__cards--dark .dcard__title,
.directions__cards--dark .dcard__desc {
    color: var(--color-white);
}


.directions__cards--light .dcard__title,
.directions__cards--light .dcard__desc {
    color: var(--color-dark);
}

/* --- Адаптив --- */
@media (max-width: 860px) {
    .directions__grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 0;
        padding-left: 0;
        padding-right: 0;
        background: var(--color-dark);
    }

    /* Прибираємо half-split фони — вішаємо фон поколонково */
    .directions::before,
    .directions::after {
        display: none;
    }

    /* Скидаємо grid-column, керуємо порядком через order */
    .directions__head--dark,
    .directions__media--dark,
    .directions__cards--dark,
    .directions__head--light,
    .directions__media--light,
    .directions__cards--light {
        grid-column: 1;
    }

    .directions__head--dark {
        order: 1;
    }

    .directions__media--dark {
        order: 2;
    }

    .directions__cards--dark {
        order: 3;
    }

    .directions__head--light {
        order: 4;
    }

    .directions__media--light {
        order: 5;
    }

    .directions__cards--light {
        order: 6;
    }

    /* Фони блоків по колонках */
    .directions__media--dark {
        background: var(--color-dark);
        padding-left: clamp(20px, 6vw, 100px);
        padding-right: clamp(20px, 6vw, 100px);
    }

    .directions__head--light,
    .directions__media--light,
    .directions__cards--light {
        background: var(--color-white);
        padding-left: clamp(20px, 6vw, 100px);
        padding-right: clamp(20px, 6vw, 100px);
    }

    /* Padding замість margin — щоб фон був суцільний, без білих смуг */
    .directions__head {
        padding: 60px 20px 0;
    }

    .directions__media {
        margin: 0;
        padding: 20px;
    }

    .directions__cards {
        margin-bottom: 0;
        padding: 0 20px 60px;
    }

    .directions__text {
        font-family: 16px;
    }
}


/* ===== SERVICES ===== */
/* ==========================================================================
   ВСІ ПОСЛУГИ — сітка карток
   ========================================================================== */
.services {
    background: var(--color-background);
    padding: 100px 0;
}

.services__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.services__lead {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--c-muted);
    max-width: 380px;
    margin: 0 0 60px;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    border: 1px solid #e4e5ff;
    background: var(--color-white);
    border-radius: 4px;
    padding: 35px;
    display: flex;
    flex-direction: column;
}

.service-card__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 28px;
    line-height: 120%;
    color: var(--color-dark);
    margin: 0 0 24px;
}

.service-card__media {
    margin: 0 0 24px;
}

.service-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 4px;
}

.service-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-card__item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 110%;
    color: var(--color-dark);
}

.service-card__check {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='4' fill='%23D24BA7'/%3E%3Cpath d='M13 6.5L8.33333 11.5L6 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Планшет: 2 колонки */
@media (max-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобільний: 1 колонка */
@media (max-width: 640px) {
    .services {
        padding: 60px 0;
    }

    .services__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-card {
        padding: 35px;
    }

    .services__lead {
        font-size: 16px;
        max-width: 330px;
        margin: 0 0 40px;
    }

    .service-card__title {
        font-size: 20px;
    }


}


/* ===== APPROACH ===== */
/* ==========================================================================
   МІЙ ПІДХІД — тёмна секція
   ========================================================================== */
.approach {
    background: var(--color-dark);
    padding: 100px 0;
}

.approach__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: flex-start;
}

/* --- Ліва: фото + підпис --- */
.approach__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    margin: 0 0 10px;
}

.approach__name {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 30px;
    line-height: 140%;
    color: var(--color-white);
    margin: 0 0 10px;
}

.approach__role {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-white);
    margin: 0;
}

/* --- Права: контент --- */
.approach__eyebrow {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #8a8bac;
}

.approach__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    color: var(--color-white);
    margin: 0 0 20px;
}

.approach__title span {
    color: #ff87e3;
}

.approach__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-white);
    margin: 0 0 60px;
}

/* Цитата в напівпрозорій плашці */
.approach__quote {
    position: relative;
    background: #4e4f70;
    border-radius: 4px;
    padding: 35px;
    margin: 0 0 60px;
}

.approach__quote::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 32px;
    width: 52px;
    height: 39px;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='39' viewBox='0 0 52 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.26888 39C7.90735 39 6.59819 38.7379 5.34139 38.2137C4.08459 37.6895 2.8278 36.7984 1.571 35.5403C0.942598 34.0726 0.523666 32.5524 0.3142 30.9798C0.104733 29.3024 0 27.625 0 25.9476C0 19.8669 1.93756 14.625 5.81269 10.2218C9.68781 5.71371 14.5055 2.30645 20.2659 0L22.3082 4.71774C18.1188 6.70967 14.8721 8.75403 12.568 10.8508C10.2638 12.9476 8.53575 15.6734 7.38369 19.0282L12.0967 22.0161C15.8671 24.5323 17.7523 27.4153 17.7523 30.6653C17.7523 32.9718 17.0191 34.9637 15.5529 36.6411C14.0866 38.2137 11.9919 39 9.26888 39ZM38.9607 39C37.5992 39 36.29 38.7379 35.0332 38.2137C33.7764 37.6895 32.5196 36.7984 31.2628 35.5403C30.6344 34.0726 30.2155 32.5524 30.006 30.9798C29.7966 29.3024 29.6918 27.625 29.6918 25.9476C29.6918 19.8669 31.6294 14.625 35.5045 10.2218C39.3797 5.71371 44.1974 2.30645 49.9577 0L52 4.71774C47.8107 6.70967 44.5639 8.75403 42.2598 10.8508C39.9557 12.9476 38.2276 15.6734 37.0755 19.0282L41.7885 22.0161C45.5589 24.5323 47.4441 27.4153 47.4441 30.6653C47.4441 32.9718 46.711 34.9637 45.2447 36.6411C43.7785 38.2137 41.6838 39 38.9607 39Z' fill='%23FF87E3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.approach__quote p {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 32px;
    line-height: 110%;
    color: var(--color-white);
    margin: 0;
}

/* Кнопки */
.approach__actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}


.btn__arrow {
    flex-shrink: 0;
    transition: transform .2s;
    margin-left: 10px;
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

/* Світла outline-кнопка для тёмного фону */
.btn--outline-light {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 16px 32px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}

.btn--outline-light:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

/* --- Мобільна версія --- */
@media (max-width: 860px) {
    .approach {
        padding: 60px 0;
    }

    .approach__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .approach__media {
        display: flex;
        flex-direction: column;
    }

    .approach__caption {
        order: -1;
        margin: 0 0 20px;
    }

    .approach__img {
        margin: 0;
        aspect-ratio: auto;
        height: 230px;
        object-fit: cover;
        object-position: center top;
    }

    .approach__name {
        font-size: 20px;
        margin: 0 0 20px;
    }

    .approach__title {
        font-size: 36px;
    }

    .approach__text {
        font-size: 16px;
        margin: 0 0 40px;
    }

    .approach__quote {
        padding: 24px;
        margin: 0 0 40px;
    }

    .approach__quote p {
        font-size: 26px;
    }

    .approach__quote::before {
        width: 42px;
        height: 31px;
        background-size: contain;
        top: -15px;
        left: 22px;
    }

    .approach__actions {
        flex-direction: column;
    }

    .approach__actions .btn {
        text-align: center;
    }
}


/* ===== PROCESS ===== */
/* ==========================================================================
   ЯК ЦЕ ПРАЦЮЄ — 3 кроки
   ========================================================================== */
.process {
    padding: 100px 0;
    background: var(--color-white);
    text-align: center;
}

.process__eyebrow {
    color: #8a8bac;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #8a8bac;

}

.process__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.process__lead {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 60px;
}

.process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}

.process-card {
    background: var(--color-background);
    border: 1px solid #e4e5ff;
    border-radius: 4px;
    padding: 32px;
}


.process-card svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background: var(--color-pink);
    margin: 0 0 20px;
}

.process-card__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-pink);
    line-height: 120%;
    margin: 0 0 12px;
}

.process-card__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0;
}

.process__cta {
    margin-top: 60px;
}

@media (max-width: 900px) {
    .process__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
    }
}

/* --- Мобільний --- */
@media (max-width: 640px) {
    .process {
        padding: 60px 0;
    }

    .process__eyebrow,
    .process__title,
    .process__lead {
        text-align: left;
    }

    .process__title {
        font-size: 36px;
    }

    .process__lead {
        font-size: 16px;
        margin: 0 0 40px;
    }

    .process-card {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        row-gap: 16px;
        align-items: center;
        padding: 24px;
    }

    .process-card svg {
        width: 40px;
        height: 40px;
        margin: 0;
        grid-column: 1;
        grid-row: 1;
    }

    .process-card__title {
        margin: 0;
        grid-column: 2;
        grid-row: 1;
    }

    .process-card__text {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
    }

    .process__cta .btn {
        display: block;
        width: 100%;
    }
}


/* ===== REVIEWS ===== */
/* ==========================================================================
   ВІДГУКИ — Slick слайдер
   ========================================================================== */
.reviews {
    padding: 100px 0 60px;
    background: var(--color-background);
    overflow: hidden;
}

.reviews__eyebrow {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #8a8bac;
}


.reviews__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.reviews__lead {
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 60px;
}

/* Слайд — відступ між картками через padding слайда */
.reviews__slide {
    padding: 0 20px;
}

.review-card {
    background: var(--color-white);
    border: 1px solid #e4e5ff;
    border-radius: 4px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.review-card__quote {
    display: block;
    color: var(--color-pink);
    margin: 0 0 16px;
    line-height: 0;
    position: absolute;
    top: -16px;
    left: 32px;
}

.review-card__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.review-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.review-card__author {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-pink);
}

.review-card__author::before {
    content: "— ";
}

.review-card__date {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    text-align: right;
    color: #8a8bac;
}

/* --- Slick dots під макет --- */

.reviews .slick-list {
    padding-top: 20px !important;
    margin-top: -20px;
}

.reviews .slick-dots {
    position: static;
    margin-top: 40px;
    display: flex !important;
    justify-content: center;
    gap: 10px;
}

.reviews .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.reviews .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
}

.reviews .slick-dots li button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-pink);
    opacity: 0.3;
    transition: opacity .2s;
}

.reviews .slick-dots li.slick-active button::before {
    opacity: 1;
}



.review-card__text p {
    margin: 0 0 1em;
}

.review-card__text p:last-child {
    margin-bottom: 0;
}

.review-card__text p {
    margin: 0 0 1em;
}

.review-card__text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .reviews {
        padding: 60px 0;
    }

    /* Праворуч визирає наступний слайд */
    .reviews .slick-list {
        padding-top: 20px !important;
        padding-right: 60px !important;
        /* скільки видно сусіднього слайда */
    }

    /* Прибираємо бічний padding слайда, щоб ширина рахувалась точно */
    .reviews .reviews__slide {
        padding: 0 8px;
    }
}


/* ===== PAGES ===== */
/* --- Контент сторінок --- */

/* 
.page-content {
    padding: 56px 0;
}

.page-content p {
    margin: 0 0 1.2em;
}

.page__hero {
    padding: 56px 0 0;
}

.page__subtitle {
    font-size: 1.15rem;
    color: var(--c-muted);
}

.page__thumb {
    border-radius: var(--radius);
    margin: 0 0 32px;
} */


/* ===== PRICING ===== */
/* --- Ціни --- */
.pricing {
    padding: 60px 0 0;
}

.pricing__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.pricing__intro {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin-bottom: 60px;
}

.price-group {
    margin-bottom: 60px;
}

.price-group__title {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 140%;
    color: var(--color-pink);
    margin: 0 0 20px;
}

.price-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background: var(--color-pink);
    color: var(--color-white);
    flex-shrink: 0;
}

.price-group__icon svg {
    width: 24px;
    height: 24px;
}

.price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 40px;
    margin-bottom: 20px;
    background: #f4f4f9;
}

.price-row__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.price-row__name {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: var(--color-dark);
    overflow-wrap: break-word;
}

.price-row__desc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-dark);
}

.price-row__price {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 120%;
    text-align: right;
    color: var(--color-pink);
    white-space: nowrap;
    flex-shrink: 0;
}

.price-row__price.is-free {
    color: var(--c-dark);
}

.pricing__cta {
    text-align: center;
    margin-top: 60px;
}

.pricing__note {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: var(--color-dark);
    margin: 20px 0 0;
}

.pricing__empty {
    color: var(--c-muted);
}

@media (max-width: 860px) {
    .pricing {
        padding: 20px 0 0;
    }

    .pricing__title {
        font-family: var(--second-family);
        font-weight: 400;
        font-size: 32px;
        line-height: 100%;
        color: var(--color-dark);
        margin: 0 0 20px;
    }

    .pricing__intro {
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        color: var(--color-dark);
        margin: 0 0 40px;
    }

    .price-group {
        margin: 0 0 40px;
    }

    .price-group__title {
        font-size: 20px;
        margin: 0 0 12px;
    }

    .price-group__icon {
        width: 40px;
        height: 40px;
    }

    .price-row {
        gap: 16px;
        padding: 24px;
        margin-bottom: 12px;
        align-items: start;
    }

    .price-row__name {
        font-size: 16px;

    }

    .price-row__desc {
        font-size: 14px;
    }

    .price-row__price {
        font-size: 16px;
    }

    .pricing__cta {
        margin-top: 40px;
    }

    .pricing__cta .btn--primary {
        width: 100%;
    }

    .pricing__note {
        margin: 12px auto 0;
        max-width: 200px;
        width: 100%;
        text-align: center;
    }

}

/* ===== BOOKING ===== */
/* ==========================================================================
   ФОРМА ЗАПИСУ
   ========================================================================== */
.booking {
    padding: 100px 0;
    background: var(--color-white);
}

.booking__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* Ліва колонка */
.booking__eyebrow {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #8a8bac;
    margin: 0 0 20px;
}

.booking__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.mobile-break {
    display: none;
}

.booking__lead {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 40px;
    max-width: 400px;
    width: 100%;
}

.booking__contact {
    margin-bottom: 20px;
}

.booking__contact-label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-pink);
    margin: 0 0 12px;
}

.booking__contact-value {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-dark);
    margin: 0;
}

.booking__contact-value a {
    color: var(--color-dark);
}

.booking__contact-value a:hover {
    color: var(--color-pink);
}

/* Права колонка: сітка полів 2 колонки */
.booking__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.booking__field {
    display: flex;
    flex-direction: column;
}

.booking__field span {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.booking__field b {
    color: var(--color-pink);
    font-weight: 500;
}

.booking__field input,
.booking__field select {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--color-background);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    opacity: 0.5;
    color: var(--color-dark);
    transition: border-color .2s;
}

.booking__field input::placeholder {
    color: var(--c-muted);
}

/* Focus — тёмна обводка */
.booking__field input:focus,
.booking__field select:focus {
    outline: none;
    /* прибираємо браузерний */
    border-color: var(--color-dark);
}

/* Помилка — червона обводка */
.booking__field.has-error input,
.booking__field.has-error select {
    border-color: #ff1d21;
}

.booking__error {
    display: none;
    margin: 8px 0 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 140%;
    color: #ff1d21;
}

.booking__field.has-error .booking__error {
    display: block;
}

.booking__field.has-error input,
.booking__field.has-error select {
    border-color: #ff1d21;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='18' viewBox='0 0 4 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0v12' stroke='%23ff1d21' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='2' cy='16.5' r='1.5' fill='%23ff1d21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 48px;
}

.booking__field.has-error select {
    border-color: #ff1d21;
    /* стрілку не чіпаємо, знак оклику не додаємо */
}

.booking__consent {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    cursor: pointer;
}

.booking__consent input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-pink);
    flex-shrink: 0;
}

.booking__consent span {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-dark);
}

.booking__consent.has-error .booking__error {
    display: block;
    width: 100%;
}

.booking__submit {
    width: 100%;
}

.booking__hp {
    position: absolute;
    left: -9999px;
}

.booking__status {
    margin-top: 16px;
    font-weight: 500;
}

.booking__status.is-success {
    color: #1a7f37;
}

.booking__status.is-error {
    color: var(--color-pink);
}

/* --- Мобільний --- */
@media (max-width: 860px) {
    .booking__row {
        grid-template-columns: 1fr;
    }

    .booking {
        padding: 60px 0;
    }

    .booking__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .booking__title {
        font-size: 36px;
    }

    .mobile-break {
        display: inline;
    }

    .booking__lead {
        font-size: 16px;
        margin: 0 0 30px;
        max-width: 330px;
    }

    .booking__contact {
        margin-bottom: 16px;
    }

    .booking__contact-label {
        margin: 0 0 6px;
    }

    .booking__grid {
        grid-template-columns: 1fr;
    }

    .booking__consent {
        gap: 12px;
        margin-bottom: 40px;
    }

    .booking__consent span {
        max-width: 270px;
    }

    .hero__list li::before,
    .check-list li::before {
        width: 16px;
        height: 16px;
    }

    .hero__list li {
        padding-left: 24px;
        font-size: 16px;
    }
}


/* ===== ABOUT ===== */
/* ==========================================================================
   ПРО МЕНЕ
   ========================================================================== */
.about-hero {
    padding: 60px 0 100px;
}

.about-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.about-hero__media {
    height: 100%;
}

.about-hero__img {
    display: block;
    width: 100%;
    /* aspect-ratio: 3 / 4; */
    max-height: 600px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: var(--radius);
}

.about-hero__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 100%;
    color: var(--color-pink);
    margin: 0 0 20px;
}

.about-hero__sub {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 40px;
    max-width: 580px;
    width: 100%;
}

.about-hero__content .check-list {
    margin: 0 0 40px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
}

.about-hero__content .check-list li {
    padding-left: 30px;
}

.timeline-section {
    padding: 100px 0;
    background: var(--c-bg-alt);
}

.timeline-section__title {
    font-size: var(--fs-h2);
    margin: 0 0 60px;
}

.timeline-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.timeline-section__media img {
    border-radius: var(--radius);
    margin-bottom: 10px;
    width: 100%;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;

}

.timeline__item {
    position: relative;
    padding: 0 0 40px 18px;
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 24px;
}

/* Лінія тільки між крапками */
.timeline__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -1.5px;
    /* центр крапки */
    top: 10px;
    /* від центру своєї крапки */
    bottom: -10px;
    /* до центру наступної */
    width: 2px;
    background: var(--c-accent);
}

.timeline__item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;

}

.timeline__item::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-accent);
    border: 2px solid var(--c-accent);
}

.timeline__year {
    display: block;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: var(--color-pink);
    margin: 0;
    white-space: nowrap;
}

.timeline__role {
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 120%;
    color: var(--color-dark);
    margin: 0 0 6px;
}

.timeline__body p {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-dark);
}

.about-gallery__slide {
    padding-right: 16px;
    box-sizing: border-box;
}

.about-gallery {
    min-width: 0;
}

.about-gallery .slick-list {
    padding-right: 90px !important;
    /* скільки визирає наступне фото */
}

.about-gallery__slide {
    padding-right: 12px;
}

.about-gallery img,
.about-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 444 / 390;
    object-fit: cover;
    border-radius: 4px;
}

/* Стрілки під галереєю зліва */
.about-gallery .slick-prev,
.about-gallery .slick-next {
    top: auto;
    bottom: -48px;
    transform: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.about-gallery .slick-prev::before,
.about-gallery .slick-next::before {
    display: none;
}

.about-gallery .slick-prev {
    left: 0;
}

.about-gallery .slick-next {
    left: 48px;
    right: auto;
}

.about-gallery .slick-arrow.slick-disabled {
    opacity: 0.5;
    cursor: default;
}

.timeline-section__media {
    padding-bottom: 60px;
    min-width: 0;
}

/* Планшет і нижче */
@media (max-width: 1024px) {
    .about-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    .about-hero__media {
        order: -1;
        height: auto;
    }

    .about-hero__img {
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: 480px;
    }
}

@media (max-width: 860px) {
    .about-hero {
        padding: 20px 0 60px;
    }

    .about-hero__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .about-hero__content {
        display: contents;
    }

    .about-hero__content .eyebrow {
        order: 1;
    }

    .about-hero__title {
        order: 2;
        font-size: 32px;
        line-height: 100%;
    }

    .about-hero__sub {
        order: 3;
        margin: 0 0 20px;
        font-size: 16px;
        line-height: 140%;
    }

    .about-hero__media {
        order: 4;
        margin: 0 0 20px;
        width: 100%;
    }

    .about-hero__content .check-list {
        order: 5;
    }

    .check-list li::before {
        top: 5px;
        transform: none;
    }

    .about-hero__content .check-list li {
        padding-left: 24px;
        margin-bottom: 14px;
    }

    .about-hero__content .hero__actions {
        order: 6;
        width: 100%;
    }


    .timeline-section__grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .timeline-section__media {
        order: 2;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    /* галерея після таймлайну */
    .timeline {
        order: 1;
    }

    .timeline-section {
        padding: 60px 0 16px;
    }

    .timeline-section__title {
        font-size: 36px;
        margin: 0 0 40px;
    }

    .timeline__item {
        grid-template-columns: 55px 1fr;
        gap: 10px;
        padding: 0 0 20px 14px;
    }

    .timeline__year {
        white-space: normal;
    }

    .timeline__role {
        font-size: 16px;
        line-height: 140%;
    }

    .about-gallery {
        min-width: 0;
        max-width: 100%;
    }

    .about-hero__img {
        margin: 0;
        aspect-ratio: auto;
        height: 260px;
        object-fit: cover;
        object-position: center top;
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 4px;
        max-width: 100%;
        display: block;
    }

    .about-gallery .slick-list {
        padding-right: 40px !important;
        /* менший пік */
    }
}



/* ===== ACNE ===== */
/* ==========================================================================
   ПРО АКНЕ
   ========================================================================== */
.acne-hero {
    padding: 100px 0;
}

.acne-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.acne-hero__media {
    height: 100%;
    min-width: 0;
}

.acne-hero__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 100%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.acne-hero__lead {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 60px;
    max-width: 500px;
    width: 100%;
}

.acne-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
}

.acne-card__img {
    margin-bottom: 20px;
    min-width: 0;
}

.acne-card__photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 4px;
    max-height: 260px;
    height: 100%;
}

/* Активний пункт меню — рожевий */
.site-nav__list .current-menu-item>a,
.site-nav__list .current_page_item>a {
    color: var(--color-pink);
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stats__item {
    background: #f4f4f9;
    border-radius: var(--radius);
    padding: 20px;
}

.stats__num {
    display: block;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 40px;
    line-height: 120%;
    color: var(--color-pink);
    margin-bottom: 6px;
}

.stats__label {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--color-dark);
}

.acne-info {
    padding: 100px 0;
    background: var(--c-bg-alt);
}

.acne-info__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.acne-info__left {
    display: flex;
    flex-direction: column;
    gap: 115px;
    min-width: 0;
}

.acne-card {
    background: var(--c-dark);
    color: var(--c-on-dark);
    border-radius: var(--radius);
    padding: 40px;
}

.acne-card__eyebrow {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #8a8bac;
}

.acne-card__img {
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
    min-height: 260px;
    margin-bottom: 20px;
}

.acne-card p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-white);
    margin: 0 0 20px;
}

.acne-card__quote {
    width: 100%;
    margin: 0;
    padding: 35px;
    border: 0;
    background: #4e4f70;
    border-radius: 4px;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 30px;
    line-height: 120%;
    color: var(--color-white);
}

.q-break {
    display: none;
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qa {
    display: grid;
    grid-template-rows: 2fr;
    align-items: start;
    border: 1px solid #e4e5ff;
    border-radius: 4px;
    padding: 32px;
    background: var(--color-white);
}

.qa__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 26px;
    line-height: 120%;
    color: var(--color-pink);
    margin: 0;
}

.qa p {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
}

.acne-cta {
    padding: 0;
}

.acne-cta__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.acne-cta__text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-dark);
    margin: 0 0 40px;
}

@media (max-width: 1024px) {
    .acne-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    .acne-hero__media {
        order: -1;
        height: auto;
    }

    .acne-hero__img {
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: 480px;
    }
}

@media (max-width: 860px) {
    .acne-hero {
        padding: 20px 0 60px;
    }

    .acne-hero__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .acne-hero__content {
        display: contents;
    }

    .acne-hero__content .eyebrow {
        order: 1;
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 16px;
        line-height: 140%;
        color: #8a8bac;
        margin: 0 0 20px;
    }

    .acne-hero__title {
        order: 2;
        font-family: var(--second-family);
        font-weight: 400;
        font-size: 32px;
        line-height: 100%;
        color: var(--color-dark);
        margin: 0 0 20px;
    }

    .acne-hero__lead {
        order: 3;
        margin: 0 0 30px;
        font-family: var(--font-family);
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        color: var(--color-dark);
    }


    .acne-hero__media {
        order: 4;
        margin: 0 0 30px;
        width: 100%;
    }

    .acne-info {
        padding: 60px 0;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        order: 5;
    }

    .stats__num {
        font-size: 28px;
    }

    .stats__label {
        font-size: 14px;
        letter-spacing: 0%;
    }

    .acne-info__inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .qa-list {
        order: 1;
    }

    .acne-info__left {
        order: 2;
    }

    .acne-card {
        padding: 24px;
    }

    .acne-card p:first-child {
        font-size: 16px;
        font-weight: 600;
        color: #8a8bac;
    }

    .acne-card p {
        font-size: 16px;
    }

    .acne-card__quote {
        padding: 24px;
        font-size: 26px;
    }

    .q-break {
        display: inline;
    }

    .acne-info__left {
        gap: 40px;
    }

    .acne-cta__title {
        font-size: 32px;
    }

    .acne-cta__text {
        font-size: 16px;
    }

    .acne-cta .btn--primary {
        width: 100%;
    }
}


/* ===== A11Y ===== */
/* ==========================================================================
   ДОСТУПНІСТЬ
   ========================================================================== */

/* Прибираємо анімації для тих, хто їх вимкнув у системі */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Видимий фокус для клавіатурної навігації */
:focus-visible {
    outline: 2px solid var(--color-pink);
    outline-offset: 2px;
}

/* Приховано візуально, доступно скрінрідеру */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .container {
        padding: 0 20px;
    }

    .directions__grid {
        padding-left: 0;
        padding-right: 0;
    }
}



/* ===== 404 ===== */
/* ==========================================================================
   404
   ========================================================================== */

.page-content.error-404 {
    padding: 100px 0;
}

.page-content.error-404 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-content.error-404 .container svg {
    margin: 0 0 40px;
}

.page-content.error-404 .container h1 {
    margin: 0 0 20px;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 50px;
    line-height: 120%;
    text-align: center;
    color: var(--color-dark);
}

.page-content.error-404 .container p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: var(--color-dark);
    margin: 0 0 60px;
}

@media (max-width: 860px) {
    .page-content.error-404 {
        padding: 20px 0 120px;
    }

    .page-content.error-404 .container svg {
        margin: 0 0 24px;
    }

    .page-content.error-404 .container h1 {
        font-size: 32px;
        margin: 0 0 16px;
    }

    .page-content.error-404 .container p {
        max-width: 320px;
        width: 100%;
    }
}

/* ==========================================================================
   СТОРІНКА ПОДЯКИ
   ========================================================================== */
.thankyou {
    padding-block: clamp(60px, 12vw, 140px);
    background: var(--color-background);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.thankyou__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.thankyou__icon {
    color: var(--color-pink);
    margin: 0 auto 32px;
    width: 72px;
    height: 72px;
}

.thankyou__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 110%;
    color: var(--color-dark);
    margin: 0 0 20px;
}

.thankyou__text {
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 150%;
    color: var(--color-dark);
    margin: 0 0 40px;
}

.thankyou__actions {
    margin-bottom: 32px;
}

.thankyou__contact {
    font-family: var(--font-family);
    font-size: 16px;
    color: var(--c-muted);
    margin: 0;
}