:root {
    --color-primary: #EB7FB1;
    --color-bg-light: #FBE3EE;
    --color-bg-white: #FFFFFF;
    --color-text-dark: #190009;
    --color-text-black: #000000;
    --color-text-white: #FFFFFF;
    /* Сетка как у .header: боковой отступ + max-width: 1300px у внутренних блоков */
    --page-inline: clamp(12px, 4vw, 310px);
    --page-max-width: 1300px;
    /* Высота зоны фиксированного хедера + совпадает с якорным scroll-padding у html */
    --header-fixed-offset: 96px;

    /* UNCAGE — static/css/fonts.css; Encode Sans + Unbounded — includes/fonts.html */
    --font-heading: 'UNCAGE', sans-serif;
    --font-body: 'Encode Sans Expanded', sans-serif;
    --font-accent: 'Unbounded', sans-serif;
    --font-weight-heading: 400;
    --font-weight-accent: 400;
    --font-weight-emphasis: 500;

    /* Микроанимации / вход страницы */
    --lb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --lb-ease-soft: cubic-bezier(0.33, 1, 0.53, 1);
    --lb-duration-enter: 0.48s;
    --lb-duration-fast: 0.22s;
    --lb-micro-enter: 0.36s;
    --lb-stagger-step: 0.045s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: var(--header-fixed-offset); /* фиксированный хеддер, якоря #services / #obuchenie */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    line-height: 1.5;
    overflow-x: hidden;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
}

.hero-list,
.services-header h2,
.service-card .card-title-row h3,
.nav-column h3 {
    font-weight: var(--font-weight-heading);
}

.bg-placeholder {
    background-color: #D9D9D9;
    border-radius: 24px;
}

/* ---------- Микроанимации (вход страницы, ховеры) ---------- */

@keyframes lbFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lbFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes lbSlideFromLeft {
    from {
        opacity: 0;
        transform: translate3d(-14px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Лёгкое появление раскрытого текста FAQ */
@keyframes lbRevealSoft {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lbTap {
    from {
        transform: scale(0.92);
    }
    to {
        transform: scale(1);
    }
}

main.main-shell {
    animation: lbFadeUp var(--lb-duration-enter) var(--lb-ease-out) forwards;
    opacity: 0;
}

footer.footer-enter {
    animation: lbFadeUp calc(var(--lb-duration-enter) + 0.06s) var(--lb-ease-soft) forwards;
    animation-delay: 0.09s;
    opacity: 0;
}

/* Контент в колонке как у .header-inner (ровно с логотипом и иконками) — внутри секций с padding: ... var(--page-inline) */
.page-inner {
    box-sizing: border-box;
    max-width: var(--page-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(235, 127, 177, 0.4); /* Glassmorphism with pink tint */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(10px, 1.8vw, 20px) var(--page-inline);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-white);
    transition: transform 0.3s ease-in-out;
}

.header--hidden {
    transform: translateY(-100%);
}

.header-inner {
    width: 100%;
    max-width: var(--page-max-width);
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Навигация: на широком экране в ряду, до 1200px — панель из-под бургера */
.header-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.header-nav__guest-actions {
    display: none;
}

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform var(--lb-duration-fast) var(--lb-ease-out);
}

.header-logo:hover,
.header-logo:focus-visible {
    transform: scale(1.04);
}

.header-logo:active {
    transform: scale(0.98);
}

.header-logo img {
    height: clamp(28px, 4.2vw, 40px);
    width: auto;
}

.nav-links {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(6px, 2.2vw, 40px);
    list-style: none;
    max-width: 100%;
    margin: 0;
    padding: 0 4px;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    font-family: var(--font-heading);
    font-size: clamp(11px, 1.6vw, 20px);
    color: var(--color-text-white);
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.28s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--color-primary);
    transform: translateY(-2px);
}

.header-actions {
    display: flex;
    flex-shrink: 0;
    gap: clamp(8px, 1.8vw, 20px);
}

/* Круглые иконки: тот же фон и ховер, что у .btn-service; фиксированный размер 40×40 */
.header-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--color-primary);
    border: none;
    padding: 0;
    transition:
        background-color 0.28s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out),
        box-shadow 0.28s ease;
    flex-shrink: 0;
}

.header-icon:hover,
.header-icon:focus-visible {
    background-color: #d66a9c;
    transform: scale(1.06);
}

.header-icon:not(.header-icon--avatar-slot) img {
    display: block;
    width: 24px;
    height: 24px;
    max-height: 24px;
    object-fit: contain;
}

.header-icon--avatar-slot {
    position: relative;
    overflow: hidden;
}

.header-icon--avatar-slot .header-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    display: block;
}

.header-icon--avatar-slot .header-avatar-photo[hidden] {
    display: none !important;
}

.header-icon--avatar-slot .header-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-text-white);
    pointer-events: none;
}

.header-icon--avatar-slot .header-avatar-initials[hidden] {
    display: none !important;
}

.header-icon--link {
    text-decoration: none;
    color: inherit;
}

.header-icon-wrap--chat {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.header-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: var(--font-weight-emphasis);
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 2px 8px rgba(25, 0, 9, 0.12);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
}

.header-icon--chat-unread {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.header-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(25, 0, 9, 0.45);
    cursor: pointer;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.header-overlay[hidden] {
    display: none;
}

/* Бургер: только ≤1200px, справа от иконки профиля (в разметке после неё) */
.header-burger {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background-color 0.28s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out);
    z-index: 3;
}

.header-burger:hover,
.header-burger:focus-visible {
    background-color: #d66a9c;
    transform: scale(1.06);
}

.header-burger__line {
    display: block;
    width: 16px;
    height: 2px;
    background-color: var(--color-text-white);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

body.header--nav-open .header-burger .header-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.header--nav-open .header-burger .header-burger__line:nth-child(2) {
    opacity: 0;
}

body.header--nav-open .header-burger .header-burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1200px) {
    .header {
        z-index: 1000;
    }

    .header-burger {
        display: flex;
    }

    .header-inner {
        position: relative;
        z-index: 2;
    }

    .header-actions {
        position: relative;
        z-index: 5;
    }

    .header-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        width: min(100%, 360px);
        max-width: 100%;
        height: 100%;
        min-height: 100dvh;
        margin: 0;
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        z-index: 2;
        padding: 4.5rem 24px 2rem 24px;
        padding-top: max(4.5rem, calc(env(safe-area-inset-top, 0px) + 3.5rem));
        background: rgba(235, 127, 177, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: -6px 0 28px rgba(25, 0, 9, 0.15);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .header--nav-open .header-nav,
    body.header--nav-open .header .header-nav {
        transform: translateX(0);
    }

    .header .nav-links {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        overflow: visible;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .header .nav-links li {
        width: 100%;
    }

    .header .nav-links a {
        display: block;
        width: 100%;
        white-space: normal;
        font-size: clamp(1.05rem, 3.5vw, 1.25rem);
        padding: 0.7rem 0;
        line-height: 1.3;
    }

    /* Гость на адаптиве: в шапке только логотип и бургер; вход/регистрация — внизу выезжающего меню */
    .header--guest .header-auth {
        display: none;
    }

    .header-nav__guest-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: auto;
        width: 100%;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .header-nav__guest-actions .header-auth__link--pill {
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .header-nav > ul.nav-links {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 20px;
    border: none;
    border-radius: 120px;
    padding: 20px 40px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #d66a9c;
}

.btn-large {
    width: 100%;
    justify-content: center;
}

/* Hero: фон 50/50; текст в ряд; при сужении экрана — clamp по высоте и шрифту, без «столбика» */
.hero-section {
    position: relative;
    min-height: clamp(360px, 88vh, 893px);
    width: 100%;
    overflow: hidden;
    color: var(--color-text-white);
    background-color: var(--color-text-black);
}

.hero-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
    background-color: #1a0a0f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
    filter: brightness(1.2) contrast(0.98);
    transition: filter 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.hero-bg--left {
    left: 0;
    background-image: url('../images/%D0%9D%D0%B0%D1%80%D0%B0%D1%89%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5.jpg');
}

.hero-bg--right {
    right: 0;
    background-image: url('../images/%D0%9E%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5.jpg');
}

/* Невидимые ссылки на всю половину экрана: ховер по фото, не только по тексту */
.hero-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 50%;
    text-decoration: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
}

.hero-hit--left {
    left: 0;
}

.hero-hit--right {
    right: 0;
}

.hero-hit:focus-visible {
    z-index: 5;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.hero-section:has(.hero-hit--left:hover) .hero-bg--left,
.hero-section:has(.hero-hit--left:focus-visible) .hero-bg--left {
    filter: brightness(1.3) contrast(1);
    opacity: 0.95;
}

.hero-section:has(.hero-hit--right:hover) .hero-bg--right,
.hero-section:has(.hero-hit--right:focus-visible) .hero-bg--right {
    filter: brightness(1.3) contrast(1);
    opacity: 0.95;
}

.hero-content {
    position: relative;
    z-index: 4;
    box-sizing: border-box;
    max-width: var(--page-max-width);
    width: min(100%, var(--page-max-width), calc(100% - 2 * var(--page-inline)));
    min-height: clamp(360px, 88vh, 893px);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(72px, 10vw, 100px) 0 clamp(28px, 4.5vw, 60px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: clamp(8px, 1.5vw, 20px);
    pointer-events: none;
}

/* Без width: 100% — иначе flex-элементы растягиваются и схлопывается зазор при space-between */
.hero-text {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    max-width: min(580px, calc(50% - clamp(4px, 0.6vw, 10px)));
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.2vw, 20px);
    box-sizing: border-box;
}

.hero-text--right {
    text-align: left;
    align-items: flex-start;
}

.hero-title {
    font-size: clamp(0.65rem, 2.2vw + 0.4rem, 4.375rem);
    margin: 0 0 0.2em;
    line-height: 1.1;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.hero-section:has(.hero-hit--left:hover) .hero-text--left .hero-title,
.hero-section:has(.hero-hit--left:focus-visible) .hero-text--left .hero-title,
.hero-section:has(.hero-hit--right:hover) .hero-text--right .hero-title,
.hero-section:has(.hero-hit--right:focus-visible) .hero-text--right .hero-title {
    color: var(--color-primary);
}

.hero-list {
    list-style: none;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
    font-family: var(--font-heading);
    margin: 0;
    padding: 0;
}

.hero-list li {
    margin-bottom: clamp(4px, 1.2vw, 10px);
}

.hero-list li:last-child {
    margin-bottom: 0;
}

/* Services Section */
.services-section {
    background-color: var(--color-bg-light);
    padding: 80px var(--page-inline);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.services-header {
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.services-header h2 {
    font-size: 48px;
    color: var(--color-text-black);
}

.cards-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

.services-see-all {
    display: block;
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-heading);
    color: var(--color-primary);
    text-decoration: none;
}

.services-see-all:hover,
.services-see-all:focus-visible,
.services-see-all:active,
.services-see-all:visited {
    color: var(--color-primary);
    text-decoration: none;
}

.services-see-all:hover,
.services-see-all:focus-visible {
    color: #d66a9c;
}


.service-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    max-width: var(--page-max-width);
    height: auto;
    min-height: 422px;
    padding: 0;
    gap: 20px;
    background-color: transparent;
    border-radius: 24px;
    overflow: visible;
}

/* Фиксированная только область фото; карточка тянется по контенту (в т.ч. длинное описание) */
.service-card .card-image {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 0;
    width: 100%;
    max-width: 749px;
    height: 422px;
    min-height: 422px;
    flex-shrink: 0;
    border-radius: 24px;
    background-color: #D9D9D9;
    background-size: cover;
    background-position: center;
}

.service-card .card-content {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 422px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 24px 0 0;
    container-type: inline-size;
    container-name: service-card-content;
}

.service-card .card-info {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    gap: 0;
    box-sizing: border-box;
    padding: 0;
}

.service-card .card-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: 10px;
    align-items: start;
}

.service-card .card-title-row h3 {
    margin: 0;
    grid-column: 1;
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: var(--font-weight-heading);
    line-height: 1.15;
    color: var(--color-text-dark);
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
}

.service-card .card-price {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: var(--font-weight-heading);
    line-height: 1.15;
    color: var(--color-text-dark);
    text-align: right;
    max-width: 100%;
    white-space: nowrap;
}

/* Цена под названием — заголовок на всю ширину, без разрыва слов посередине */
@container service-card-content (max-width: 560px) {
    .service-card .card-title-row {
        grid-template-columns: 1fr;
    }

    .service-card .card-title-row h3 {
        grid-column: 1;
    }

    .service-card .card-price {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 1200px) {
    .service-card .card-title-row {
        grid-template-columns: 1fr;
    }

    .service-card .card-price {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .service-card .card-title-row h3 {
        font-size: clamp(22px, 6.5vw, 28px);
    }

    .service-card .card-price {
        font-size: clamp(18px, 5vw, 22px);
    }
}

.service-card .card-duration {
    margin: 0;
    margin-top: 14px;
    padding: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: var(--font-weight-heading);
    line-height: 1.1;
}

.service-card .card-desc {
    margin: 0;
    margin-top: 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-dark);
    flex: 0 1 auto;
    overflow: visible;
}

/* Кнопка в карточке услуги: высота 56px, на всю ширину блока контента */
.service-card .btn-service {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 20px 0 24px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    border: none;
    border-radius: 120px;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.18s var(--lb-ease-out),
        box-shadow 0.24s ease;
    align-self: stretch;
}

/* Ссылка с видом кнопки: без подчёркивания во всех состояниях (в т.ч. :visited) */
a.btn-service,
a.btn-service:hover,
a.btn-service:focus,
a.btn-service:focus-visible,
a.btn-service:active,
a.btn-service:visited {
    text-decoration: none;
}

.service-card .btn-service:hover {
    background-color: #d66a9c;
}

.service-card .btn-service:active {
    transform: scale(0.988);
}

.service-card .btn-service .arrow-icon,
.steps-section .btn-service .arrow-icon {
    display: block;
    width: 24px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
    transform: rotate(180deg);
    transition: transform 0.26s var(--lb-ease-out);
}

.service-card .btn-service:hover .arrow-icon,
.steps-section .btn-service:hover .arrow-icon {
    transform: rotate(180deg) translate3d(5px, 0, 0);
}

@media (max-width: 1200px) {
    .service-card {
        height: auto;
        min-height: 0;
        flex-direction: column;
        max-width: 100%;
    }

    .service-card .card-image {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 422px;
        min-height: 422px;
        border-radius: 24px;
    }

    .service-card .card-content {
        min-height: 0;
        padding: 20px 0 24px;
        width: 100%;
    }

    .service-card .card-info {
        padding: 0;
    }

    .service-card .btn-service {
        width: 100%;
        max-width: 100%;
    }
}

/* Steps Section: этапы работы, макет node 138-258 */
.steps-section {
    box-sizing: border-box;
    padding: 80px var(--page-inline);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
}

.steps-header {
    width: 100%;
    max-width: var(--page-max-width);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
}

.steps-header h2,
.steps-header__line1,
.steps-header__line2 {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: var(--font-weight-heading);
    line-height: 1.1;
    color: var(--color-text-dark);
    margin: 0;
}

.steps-header__line2 {
    margin-top: 0.15em;
    margin-left: 220px;
}

.steps-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: min(var(--page-max-width), 100%);
    margin: 0 auto;
    box-sizing: border-box;
    min-width: 0;
}

.steps-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    max-width: 640px;
    width: calc((100% - 20px) / 2);
}

/* Карточка 640×420, только обводка 1px; padding и border внутри ширины (box-sizing), контент не вылезает */
.step-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    height: 420px;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--color-primary);
    border-radius: 24px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
}

/* Последняя карточка 640×344 — место под кнопку в колонке */
.step-card--last {
    height: 344px;
    flex: 0 0 auto;
}

.step-card__title {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.step-card__text {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.steps-action {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* Кнопка «записаться»: высота 56px, на всю ширину колонки (как у карточки 640px) */
.steps-section .btn-service {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 0 24px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    border: none;
    border-radius: 120px;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.18s var(--lb-ease-out),
        box-shadow 0.24s ease;
}

.steps-section .btn-service:hover {
    background-color: #d66a9c;
}

.steps-section .btn-service:active {
    transform: scale(0.988);
}

@media (max-width: 1350px) {
    .steps-section {
        padding: 64px var(--page-inline);
    }

    .steps-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .steps-col,
    .step-card {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .step-card {
        height: auto;
        min-height: 240px;
    }

    .step-card--last {
        height: auto;
        min-height: 200px;
    }
}

/* Portfolio: фон Портфолио.jpg, механика как в hero — ховер по зоне ссылки подсвечивает фон и красит заголовок */
.portfolio-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-text-black);
    color: var(--color-text-white);
    min-height: min(720px, 85vh);
    text-align: center;
}

.portfolio-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #1a0a0f;
    overflow: hidden;
    opacity: 0.9;
    filter: brightness(1.2) contrast(0.98);
    transition: filter 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.portfolio-bg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.portfolio-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
}

.portfolio-hit:focus-visible {
    z-index: 5;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.portfolio-inner {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    min-height: min(720px, 85vh);
    max-width: var(--page-max-width);
    width: min(100%, var(--page-max-width), calc(100% - 2 * var(--page-inline)));
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    pointer-events: none;
}

.portfolio-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: var(--font-weight-heading);
    line-height: 1.1;
    margin: 0;
    color: var(--color-text-white);
    transition: color 0.3s ease;
}

.portfolio-section:has(.portfolio-hit:hover) .portfolio-bg,
.portfolio-section:has(.portfolio-hit:focus-visible) .portfolio-bg {
    filter: brightness(1.3) contrast(1);
    opacity: 0.95;
}

.portfolio-section:has(.portfolio-hit:hover) .portfolio-title,
.portfolio-section:has(.portfolio-hit:focus-visible) .portfolio-title {
    color: var(--color-primary);
}

/* Reviews Section */
.reviews-section {
    padding: 80px var(--page-inline);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.reviews-title h2 {
    font-size: 48px;
}

.reviews-nav {
    display: flex;
    gap: 20px;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: none;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out),
        box-shadow 0.25s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.nav-btn__icon {
    display: block;
    width: 20px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
}

/* Та же стрелка, что в кнопке «записаться»; вправо — поворот на 180° */
.nav-btn__icon--next {
    transform: rotate(180deg);
}

.nav-btn:hover,
.nav-btn:focus-visible {
    background-color: #d66a9c;
    transform: scale(1.07);
}

.nav-btn:active {
    transform: scale(0.96);
}

.nav-btn.swiper-button-disabled:hover,
.nav-btn.swiper-button-disabled:focus-visible,
.nav-btn.swiper-button-disabled:active {
    transform: none;
}

.reviews-swiper {
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.reviews-swiper .swiper-wrapper {
    align-items: flex-start;
}

.reviews-swiper .swiper-slide {
    width: 310px;
    max-width: min(310px, calc(100vw - 2 * var(--page-inline)));
    height: auto;
    box-sizing: border-box;
}

.review-card {
    background-color: var(--color-bg-light);
    padding: 20px;
    border-radius: 24px;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.review-stars {
    line-height: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

.review-stars__icon {
    display: block;
    width: 19px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.reviews-section .nav-btn.swiper-button-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.review-text {
    font-size: 16px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Аватар отзыва: как в профиле — градиент + белые инициалы или фото */
.author-avatar-slot {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.author-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, #fce8f2 0%, #fbcfe8 55%, #f9a8d4 100%);
    box-shadow: 0 4px 14px rgba(235, 127, 177, 0.25);
}

.author-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.author-avatar-photo[hidden] {
    display: none !important;
}

.author-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.96);
    text-transform: uppercase;
    pointer-events: none;
}

.author-avatar-initials[hidden] {
    display: none !important;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-family: var(--font-heading);
    font-size: 20px;
}

.author-service {
    font-family: var(--font-heading);
    font-size: 16px;
    colot: grey;
    color: #B79FAA;
}

/* Footer: длинный мягкий переход от --color-bg-light к фирменному розовому */
.footer {
    --footer-gradient-height: clamp(100px, 28vh, 420px);
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary);
    background-image: linear-gradient(
        180deg,
        var(--color-bg-light) 0%,
        #f3cfe0 22%,
        #efa8c4 55%,
        #eb8fb3 78%,
        var(--color-primary) 100%
    );
    background-size: 100% var(--footer-gradient-height);
    background-repeat: no-repeat;
    background-position: top center;
    padding: 80px var(--page-inline) 7rem;
    color: var(--color-text-white);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Карточка: светлое полупрозрачное стекло — иконки читаются на фоне */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.32) 45%,
        rgba(251, 227, 238, 0.38) 100%
    );
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 10px 40px rgba(25, 0, 9, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--color-text-dark);
}

.footer-map-panel {
    flex: 1 1 480px;
    min-width: 0;
    min-height: 400px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.footer-map-iframe {
    display: block;
    width: 100%;
    min-height: min(549px, 60vh);
    height: 520px;
    border: 0;
    border-radius: 20px;
    vertical-align: top;
    background: #e8e8e8;
    max-width: 100%;
}

.footer-contacts {
    flex: 1 1 360px;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    max-width: 100%;
}

.footer-contacts h2 {
    font-size: 48px;
    margin: 0;
    flex-shrink: 0;
}

.footer-contacts__stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex-shrink: 0;
}

.footer-contacts .contact-info,
.footer-contacts .contact-info p,
.footer-contacts .contact-info a,
.footer-contacts .contact-info .footer-contact-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-synthesis: none;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 17px;
    line-height: 1.45;
}

.footer-contact-link,
.footer-contact-link:hover,
.footer-contact-link:focus,
.footer-contact-link:focus-visible,
.footer-contact-link:visited {
    color: var(--color-text-dark);
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    text-shadow: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.footer-hours {
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text-dark);
    opacity: 0.9;
    margin: 0;
    max-width: 36ch;
}

.contact-info {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
}

.contact-info p {
    margin: 0;
    min-width: 0;
    max-width: 100%;
}

.socials {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out),
        box-shadow 0.25s ease;
    flex-shrink: 0;
}

.social-link:hover,
.social-link:focus-visible {
    background-color: #d66a9c;
    transform: scale(1.08);
}

.social-link:active {
    transform: scale(0.95);
}

.social-link img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.footer-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.nav-column h3 {
    font-size: 24px;
    margin-bottom: 20px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-column h3:hover {
    color: var(--color-primary);
}

.nav-column ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* График работы (столбец без ссылок) — тот же ховер, что в hero */
.nav-column:nth-child(2) ul li {
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-column:nth-child(2) ul li:hover {
    color: var(--color-primary);
}

.nav-column a {
    color: var(--color-bg-light);
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-column a:hover,
.nav-column a:focus-visible {
    color: var(--color-primary);
}

.nav-column.legal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-column.legal a {
    color: var(--color-bg-light);
    text-decoration: none;
}

/* Нижняя сетка футера: белый текст; стеклянный блок .footer-top (карта + контакты) — тёмный */
.footer .nav-column a,
.footer .nav-column a:hover,
.footer .nav-column a:focus,
.footer .nav-column a:focus-visible,
.footer .nav-column a:visited {
    color: var(--color-text-white);
    text-decoration: none;
    text-shadow: none;
    transition: none;
    cursor: pointer;
}

.footer .nav-column h3,
.footer .nav-column h3:hover {
    color: var(--color-text-white);
    text-shadow: none;
    transition: none;
    cursor: default;
}

.footer .nav-column:nth-child(2) ul li,
.footer .nav-column:nth-child(2) ul li:hover {
    color: var(--color-text-white);
    text-shadow: none;
    transition: none;
    cursor: default;
}

/* Декор: крупный шрифт, на всю ширину вьюпорта (выпад из padding футера) */
.footer-bottom {
    position: relative;
    min-height: clamp(3rem, 10vw, 5rem);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    text-align: center;
    pointer-events: none;
}

.footer-deco-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.15rem;
    width: 100%;
    transform: translateY(18%);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 12.5vw, 6.5rem);
    font-weight: var(--font-weight-heading);
    line-height: 1;
    text-transform: lowercase;
    white-space: nowrap;
    max-width: 100vw;
    margin: 0;
    user-select: none;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.15));
}

@media (max-width: 1400px) {
    .services-section, .steps-section, .reviews-section, .footer {
        padding: 40px var(--page-inline) 4.5rem;
    }

    .steps-header__line2 {
        margin-left: min(220px, 8vw);
    }
}

/* Узкие экраны и планшеты: заголовки блоков 30px, заголовки в карточках услуг/этапов 24px */
@media (max-width: 1200px) {
    /* Hero: вертикально — две полосы фото и два текстовых блока на всю ширину */
    .hero-bg {
        width: 100%;
        height: 50%;
        bottom: auto;
    }

    .hero-bg--left {
        top: 0;
        left: 0;
        right: 0;
    }

    .hero-bg--right {
        top: 50%;
        left: 0;
        right: 0;
        bottom: auto;
    }

    .hero-hit {
        width: 100%;
        height: 50%;
    }

    .hero-hit--left {
        left: 0;
        right: 0;
        top: 0;
    }

    .hero-hit--right {
        left: 0;
        right: 0;
        top: 50%;
        bottom: auto;
    }

    .hero-section {
        min-height: clamp(520px, 92vh, 980px);
    }

    /* Контент не участвует в потоке высоты; position: static — чтобы absolute-текст якорился к .hero-section */
    .hero-content {
        position: static;
        display: block;
        min-height: 0;
        height: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: none;
        padding: 0;
        pointer-events: none;
    }

    /* Строго верхняя / нижняя половина секции — текст не пересекает шов между фонами */
    .hero-text--left {
        position: absolute;
        z-index: 5;
        top: 0;
        bottom: 50%;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        width: min(100%, var(--page-max-width), calc(100% - 2 * var(--page-inline)));
        max-width: 100%;
        flex: none;
        min-height: 0;
        padding: clamp(72px, 10vw, 100px) 0 clamp(14px, 3vw, 22px);
        justify-content: flex-end;
        overflow: hidden;
        pointer-events: none;
    }

    .hero-text--right {
        position: absolute;
        z-index: 5;
        top: 50%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        width: min(100%, var(--page-max-width), calc(100% - 2 * var(--page-inline)));
        max-width: 100%;
        flex: none;
        min-height: 0;
        padding: clamp(14px, 3vw, 22px) 0 clamp(28px, 4.5vw, 60px);
        justify-content: flex-end;
        overflow: hidden;
        pointer-events: none;
    }

    /* Общие правила для обоих блоков текста в этом режиме */
    .hero-text.hero-text--left,
    .hero-text.hero-text--right {
        display: flex;
        flex-direction: column;
    }
    .hero-title {
        font-size: 30px;
        white-space: normal;
    }

    .services-header h2,
    .services-header h1 {
        font-size: 30px;
    }

    .steps-header h2,
    .steps-header__line1,
    .steps-header__line2 {
        font-size: 30px;
    }

    .portfolio-title {
        font-size: 30px;
    }

    .reviews-title h2 {
        font-size: 30px;
    }

    .footer-contacts h2 {
        font-size: 30px;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    .service-card .card-title-row h3 {
        font-size: 24px;
    }

    .step-card__title {
        font-size: 24px;
    }

    .step-card__text {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Футер: без горизонтального клипа (100vw), карта и текст во всю ширину колонки */
    .footer-bottom {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .footer-top {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: min(var(--page-max-width), 100%);
        padding: clamp(16px, 4vw, 28px);
    }

    .footer-map-panel {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: auto;
    }

    .footer-map-iframe {
        height: 700px;
        min-height: 700px;
        width: 100%;
        max-width: 100%;
    }

    .footer-contacts__stack {
        gap: 18px;
    }

    .footer .contact-info {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .service-card {
        flex-direction: column;
    }

    .portfolio-section,
    .portfolio-inner {
        min-height: 50vh;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-deco-text {
        white-space: normal;
        max-width: 100%;
        font-size: clamp(1.75rem, 11vw, 3rem);
        transform: translateY(10%);
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 40px;
    }
}

/* Вход и регистрация — как в макете: pill-кнопки на десктопе; у гостя на ≤1200 — только в выезжающем меню */
.header-auth {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.8vw, 14px);
    flex-shrink: 0;
    margin-right: clamp(4px, 1vw, 12px);
}

.header-auth__link--pill {
    font-family: var(--font-accent);
    font-size: clamp(11px, 1.35vw, 13px);
    font-weight: var(--font-weight-accent);
    letter-spacing: 0.02em;
    color: var(--color-text-white);
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 18px rgba(25, 0, 9, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.header-auth__link--pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.85);
}

.header-auth__link--pill-fill {
    background: var(--color-primary);
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(235, 127, 177, 0.45);
}

.header-auth__link--pill-fill:hover {
    background: #d66a9c;
    transform: translateY(-1px);
}

.header-auth__link--pill-quiet {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}

.header-auth__logout {
    margin: 0;
}

.header-auth__btn--pill {
    font-family: var(--font-accent);
    font-size: clamp(11px, 1.35vw, 13px);
    font-weight: var(--font-weight-accent);
    color: var(--color-text-white);
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.header-auth__btn--pill:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* У неавторизованного пользователя на широком экране колонка .header-actions не нужна:
   иконок нет, бургер всё равно скрыт до 1200px — убираем лишний отступ справа */
@media (min-width: 1201px) {
    .header--guest .header-actions {
        display: none;
    }
}

/* ---------- Страница профиля ---------- */
/* Хеддер position:fixed — без отступа контент уходит под шапку; +80px по ТЗ после нижней границы хедера */
.profile-page .main-shell {
    padding-top: calc(var(--header-fixed-offset) + 80px);
}

.profile-hero {
    padding: 0 var(--page-inline) clamp(32px, 5vw, 64px);
}

.profile-shell {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

.profile-messages {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.profile-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid rgba(235, 127, 177, 0.35);
    box-sizing: border-box;
    /* На белом фоне страницы — тёмный текст, чтобы табы не «пропадали» */
    color: var(--color-text-dark);
    background-color: rgba(251, 227, 238, 0.85);
    transition:
        background var(--lb-duration-fast) var(--lb-ease-out),
        color var(--lb-duration-fast) var(--lb-ease-out),
        border-color var(--lb-duration-fast) var(--lb-ease-out),
        box-shadow var(--lb-duration-fast) var(--lb-ease-out);
}

.profile-tab:hover {
    background-color: rgba(235, 127, 177, 0.22);
    border-color: rgba(235, 127, 177, 0.5);
}

.profile-tab.is-active {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(235, 127, 177, 0.32);
}

.profile-tab.is-active:hover {
    background: #d66a9c;
    color: var(--color-text-white);
}

.profile-main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 22px);
}

.profile-field-row {
    display: grid;
    grid-template-columns: minmax(100px, 140px) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
}

.profile-field-row--stack {
    grid-template-columns: minmax(100px, 140px) minmax(0, 1fr);
    align-items: stretch;
}

.profile-label {
    font-family: var(--font-accent);
    font-weight: var(--font-weight-emphasis);
    font-size: clamp(13px, 1.5vw, 15px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-black);
    padding-top: 10px;
}

.profile-field-row--stack .profile-label {
    padding-top: 8px;
}

.profile-input,
.profile-textarea {
    font-family: var(--font-body);
    font-size: 16px;
    width: 100%;
    border: none;
    border-radius: 16px;
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: 12px 16px;
    box-sizing: border-box;
}

.profile-input:focus,
.profile-textarea:focus {
    outline: 2px solid rgba(235, 127, 177, 0.55);
    outline-offset: 2px;
}

.profile-input--readonly {
    display: flex;
    align-items: center;
    min-height: 48px;
    opacity: 0.92;
}

.profile-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Вкладка «Безопасность» и выровненные формы */
.profile-panel {
    max-width: 720px;
}

.profile-panel__head {
    margin-bottom: clamp(20px, 3vw, 28px);
}

.profile-panel__title {
    margin: 0 0 8px;
    font-family: var(--font-accent);
    font-size: clamp(1rem, 2vw, 1.125rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-black);
}

.profile-panel__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(25, 0, 9, 0.68);
    max-width: 560px;
}

.profile-panel__lead a {
    color: var(--color-primary);
}

.profile-panel__note {
    margin: 8px 0 0;
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(25, 0, 9, 0.55);
}

.profile-form-grid {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
    column-gap: clamp(16px, 3vw, 28px);
    row-gap: 6px;
    align-items: center;
    max-width: 640px;
}

.profile-form-grid__label {
    font-family: var(--font-accent);
    font-weight: var(--font-weight-emphasis);
    font-size: clamp(13px, 1.5vw, 15px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-black);
    padding: 4px 0;
    justify-self: end;
    text-align: right;
}

.profile-form-grid__input {
    width: 100%;
    min-width: 0;
}

.profile-form-grid__errors {
    grid-column: 2;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.45;
    color: #b42318;
}

.profile-form-grid__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    margin-top: clamp(16px, 2.5vw, 22px);
    padding-top: 4px;
}

.profile-avatar-block {
    justify-self: center;
}

.profile-avatar-wrap {
    position: relative;
    width: min(280px, 72vw);
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 12px 40px rgba(25, 0, 9, 0.12);
}

.profile-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, #fce8f2 0%, #fbcfe8 55%, #f9a8d4 100%);
}

.profile-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.profile-avatar-photo[hidden] {
    display: none !important;
}

.profile-avatar-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: clamp(52px, 14vw, 96px);
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.96);
    text-transform: uppercase;
    pointer-events: none;
}

.profile-avatar-initials[hidden] {
    display: none !important;
}

.profile-avatar-fab {
    z-index: 3;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 6%;
    left: 6%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(235, 127, 177, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.92);
    transition: transform var(--lb-duration-fast) var(--lb-ease-out), background 0.2s ease;
    transform: translate(-18%, 18%);
}

.profile-avatar-fab:hover {
    transform: translate(-18%, 18%) scale(1.06);
    background: #d66a9c;
}

.profile-avatar-fab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-fab__icon img {
    display: block;
    filter: brightness(0) invert(1);
}

.profile-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px 24px;
    margin-top: clamp(32px, 5vw, 48px);
    width: 100%;
}

.profile-logout-form {
    margin: 0;
}

.profile-btn {
    font-family: var(--font-accent);
    font-size: clamp(12px, 1.35vw, 14px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 14px 36px;
    border-radius: 999px;
    border: 2px solid var(--color-primary);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out);
}

.profile-btn--outline {
    background: var(--color-bg-white);
    color: var(--color-primary);
}

.profile-btn--outline:hover {
    background: rgba(251, 227, 238, 0.85);
}

.profile-btn--solid {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

.profile-btn--solid:hover {
    background: #d66a9c;
    border-color: #d66a9c;
}

.profile-orders {
    padding: 8px 0 48px;
}

.profile-orders-board {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.profile-orders-empty {
    font-size: 17px;
    color: var(--color-text-dark);
    opacity: 0.85;
    max-width: 42ch;
}

.profile-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3.5vw, 28px);
}

.profile-order-card {
    display: grid;
    grid-template-columns: minmax(0, 750px) minmax(280px, 1fr);
    align-items: stretch;
    gap: clamp(16px, 2.5vw, 24px);
    padding: clamp(14px, 2.2vw, 20px);
    border-radius: 20px;
    background: var(--color-bg-light);
    box-shadow: 0 8px 30px rgba(25, 0, 9, 0.07);
    border: 1px solid rgba(235, 127, 177, 0.15);
    box-sizing: border-box;
}

.profile-order-card__photo {
    min-width: 0;
    width: 100%;
    max-width: 750px;
    border-radius: 18px;
    overflow: hidden;
    align-self: stretch;
}

.profile-order-card__photo img {
    display: block;
    width: 100%;
    max-width: 750px;
    height: auto;
    min-height: 200px;
    max-height: min(422px, 50vh);
    aspect-ratio: 750 / 422;
    object-fit: cover;
    border-radius: 18px;
}

.profile-order-card__panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.2vw, 20px);
    padding: clamp(20px, 3vw, 28px) clamp(22px, 3.2vw, 32px);
    border-radius: 18px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    box-sizing: border-box;
    min-height: 0;
}

.profile-order-card__panel-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px 18px;
}

.profile-order-card__service {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-emphasis);
    font-size: clamp(18px, 2.6vw, 26px);
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-transform: uppercase;
}

.profile-order-card__date {
    font-family: var(--font-accent);
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: var(--font-weight-accent);
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
}

.profile-order-card__panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.profile-order-card__row {
    margin: 0;
    font-family: var(--font-accent);
    font-size: clamp(12px, 1.4vw, 15px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.profile-order-card__field {
    color: rgba(255, 255, 255, 0.9);
}

.profile-order-card__repeat {
    align-self: flex-start;
    margin-top: auto;
    font-family: var(--font-accent);
    font-size: clamp(12px, 1.35vw, 14px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--color-primary);
    background: var(--color-bg-white);
    padding: 13px clamp(28px, 4vw, 40px);
    border-radius: 999px;
    border: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transition:
        transform var(--lb-duration-fast) var(--lb-ease-out),
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.profile-order-card__repeat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.95);
}

.profile-order-card__repeat:focus-visible {
    outline: 2px solid var(--color-bg-white);
    outline-offset: 3px;
    color: var(--color-primary);
}

.profile-map-strip {
    padding: clamp(24px, 4vw, 56px) var(--page-inline) clamp(40px, 6vw, 80px);
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-light) 100%);
}

.profile-map-strip__card {
    margin: 0 auto;
}

@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-avatar-block {
        order: -1;
        justify-self: center;
    }

    .profile-field-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-label {
        padding-top: 0;
    }

    .profile-actions {
        flex-direction: column;
        align-items: flex-end;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .profile-form-grid__label {
        justify-self: start;
        text-align: left;
    }

    .profile-form-grid__errors {
        grid-column: 1;
    }

    .profile-form-grid__actions {
        grid-column: 1;
        justify-content: stretch;
    }

    .profile-form-grid__actions .profile-btn {
        width: 100%;
    }

    .profile-btn {
        width: min(100%, 360px);
    }

    .profile-order-card {
        grid-template-columns: 1fr;
    }

    .profile-order-card__photo {
        max-width: min(750px, 100%);
        justify-self: center;
    }

    .profile-order-card__photo img {
        max-height: 280px;
        aspect-ratio: 16 / 10;
        max-width: min(750px, 100%);
    }

    .profile-order-card__repeat {
        align-self: stretch;
        text-align: center;
    }
}

/* ---------- Страница услуг (/services/) ---------- */

.services-section--page {
    padding-top: max(80px, calc(var(--header-fixed-offset) + 32px));
}

.services-header h1 {
    font-size: 48px;
    color: var(--color-text-black);
    margin: 0;
    font-weight: var(--font-weight-heading);
    text-transform: uppercase;
}

.services-header--education-title h1 {
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.15;
    max-width: 100%;
}

.services-category-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
}

.services-category-block + .services-category-block {
    margin-top: 20px;
}

.services-category-block__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: var(--font-weight-heading);
    color: var(--color-text-black);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.services-page-empty {
    padding: 2rem 0 4rem;
    font-family: var(--font-body);
    font-size: 18px;
}

.services-page-empty a {
    color: var(--color-primary);
    text-decoration: underline;
}

.services-gallery-section--on-services {
    /* Сетка макета: 12 колонок, зазор 20px (--page-max-width ≈ сумма дорожек) */
    --services-gallery-columns: 12;
    --services-gallery-gap: 20px;

    background-color: var(--color-bg-light);
    padding: 80px var(--page-inline) 96px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(32px, 5vw, 48px);
}

.services-gallery-section--on-services .services-gallery-section__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06em;
    font-family: var(--font-heading);
    font-size: clamp(20px, 3.6vw, 40px);
    font-weight: var(--font-weight-emphasis);
    line-height: 1.12;
    text-align: left;
    color: var(--color-text-black);
    text-transform: uppercase;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--page-max-width);
    width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.services-gallery-section__line {
    display: block;
}

.services-gallery-grid--on-services {
    display: grid;
    grid-template-columns: repeat(var(--services-gallery-columns), minmax(0, 1fr));
    gap: var(--services-gallery-gap);
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    align-items: stretch;
}

/* По умолчанию два элемента в ряд по 6 колонок */
.services-gallery-section--on-services .services-gallery-cell {
    grid-column: span 6;
    min-width: 0;
}

/* Ровно 1 фото на всю ширину сетки */
.services-gallery-grid--on-services:has(> figure:nth-child(1):last-child) .services-gallery-cell {
    grid-column: span 12;
}

/* 2 элемента: 6+6 — совпадает с дефолтом */

.services-gallery-grid--on-services:has(> figure:nth-child(3):last-child) .services-gallery-cell {
    grid-column: span 4;
}

.services-gallery-grid--on-services:has(> figure:nth-child(5):last-child) .services-gallery-cell:nth-child(-n + 3) {
    grid-column: span 4;
}

.services-gallery-grid--on-services:has(> figure:nth-child(5):last-child) .services-gallery-cell:nth-child(n + 4) {
    grid-column: span 6;
}

.services-gallery-grid--on-services:has(> figure:nth-child(6):last-child) .services-gallery-cell {
    grid-column: span 4;
}

.services-gallery-cell {
    margin: 0;
}

.services-gallery-cell__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.services-gallery-section--on-services .services-gallery-cell__img {
    border-radius: 18px;
}

.services-gallery-empty {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-dark);
    opacity: 0.85;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--page-max-width);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.services-gallery-more-wrap {
    text-align: center;
}

.services-gallery-more {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--font-weight-heading);
    color: var(--color-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.services-gallery-more:hover,
.services-gallery-more:focus-visible {
    color: #d66a9c;
}

/* ---------- Блок сертификатов (страница обучения) ---------- */
.education-certs-section {
    padding: 42px var(--page-inline) 56px;
}

.page-education .education-certs-section:first-of-type {
    padding-top: max(84px, calc(var(--header-fixed-offset) + 26px));
}

/* На странице обучения секция услуг идёт сразу после блока сертификатов:
   убираем избыточный верхний отступ и делаем равномерный зазор между блоками. */
.page-education .education-certs-section + .services-section--page {
    padding-top: 56px;
}

.education-certs-inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
}

.education-certs-kicker {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-black);
}

.education-certs-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-emphasis);
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--color-text-black);
}

.education-certs-title__line {
    display: block;
}

.education-certs-grid {
    margin-top: clamp(24px, 4vw, 40px);
    display: grid;
    grid-template-columns: 0.85fr 1.1fr 0.85fr;
    align-items: end;
    gap: clamp(12px, 2vw, 22px);
}

.education-certs-grid--solo {
    grid-template-columns: 1fr;
    justify-items: stretch;
    width: 100%;
    max-width: none;
}

.education-cert-card--solo {
    width: 100%;
}

.education-cert-card--solo .education-cert-card__img {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

.education-cert-card {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #f8e8ee 0%, #f2d7e1 100%);
    box-shadow: 0 10px 28px rgba(24, 0, 8, 0.08);
}

/* Водяной знак логотипом поверх сертификата */
.education-cert-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/images/Логотип.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 56%;
    opacity: 0.16;
    pointer-events: none;
    z-index: 2;
}

.education-cert-card__img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
}

.education-cert-card--narrow .education-cert-card__img {
    aspect-ratio: 3 / 4;
}

.education-cert-card--wide .education-cert-card__img {
    aspect-ratio: 4 / 5;
}

.education-cert-card__fallback {
    position: absolute;
    inset: 0;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(24, 0, 8, 0.55);
    z-index: 1;
}

.education-cert-card--missing .education-cert-card__img {
    opacity: 0;
}

.education-cert-card--missing .education-cert-card__fallback {
    display: flex;
}

@media (max-width: 767px) {
    .education-certs-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .education-cert-card__img {
        min-height: 0;
    }

    .services-gallery-section--on-services {
        --services-gallery-gap: 14px;
    }

    .services-gallery-grid--on-services .services-gallery-cell {
        grid-column: span 12;
    }
}

/* ---------- Страница портфолио (/portfolio/) ---------- */

.portfolio-page {
    box-sizing: border-box;
    min-height: 40vh;
    padding: max(72px, calc(var(--header-fixed-offset) + 28px)) var(--page-inline) 96px;
    background-color: var(--color-bg-light);
}

.portfolio-page__inner.page-inner {
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
}

.portfolio-page__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: var(--font-weight-heading);
    text-transform: uppercase;
    color: var(--color-text-dark);
    text-align: left;
    margin: 0 0 28px;
}

.portfolio-page__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 40px;
}

.portfolio-filter {
    font-family: var(--font-heading);
    font-size: clamp(11px, 1.5vw, 16px);
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    /* Неактивный: тот же розовый что и активный (#EB7FB1), через прозрачность — белый текст */
    background-color: rgba(235, 127, 177, 0.42);
    color: var(--color-text-white);
    -webkit-font-smoothing: antialiased;
    transition:
        background-color 0.22s ease,
        transform var(--lb-duration-fast) var(--lb-ease-out);
}

.portfolio-filter:hover,
.portfolio-filter:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

.portfolio-filter:not(.portfolio-filter--active):hover,
.portfolio-filter:not(.portfolio-filter--active):focus-visible {
    background-color: rgba(235, 127, 177, 0.58);
}

.portfolio-filter--active {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.portfolio-filter--active:hover,
.portfolio-filter--active:focus-visible {
    background-color: #d66a9c;
    color: var(--color-text-white);
    transform: translateY(-1px);
}

.portfolio-filter-empty {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-dark);
    text-align: center;
    margin: 0 0 28px;
}

.portfolio-page__grid--masonry {
    column-count: 2;
    column-gap: clamp(14px, 2vw, 22px);
    width: 100%;
}

.portfolio-page__grid--masonry .portfolio-page__cell {
    break-inside: avoid;
    margin-bottom: clamp(14px, 2vw, 22px);
}

.portfolio-page__cell {
    margin: 0;
}

.portfolio-page__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(560px, 70vh);
    object-fit: cover;
    border-radius: 20px;
}

.portfolio-page__empty {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-text-dark);
    text-align: center;
    margin: 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1000px) {
    .portfolio-page__grid--masonry {
        column-count: 3;
    }
}

@media (max-width: 520px) {
    .portfolio-page__title {
        margin-bottom: 22px;
    }

    .portfolio-page__filters {
        margin-bottom: 32px;
        gap: 8px;
    }

    .portfolio-filter {
        padding: 9px 14px;
        font-size: 11px;
    }
}


/* ---------- Страница «О студии» (/o-studii/) ---------- */

.page-about-studio {
    width: 100%;
    background: linear-gradient(
        180deg,
        #fff8fb 0%,
        #fce8f0 28%,
        #f3bed4 72%,
        #efa8c4 100%
    );
}

.studio-about-section {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-top: max(80px, calc(var(--header-fixed-offset) + 32px));
    padding-bottom: clamp(40px, 5vw, 64px);
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.studio-about-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 750px);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.studio-about-copy {
    text-align: left;
}

.studio-about-kicker {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--color-text-dark);
}

.studio-about-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: var(--font-weight-emphasis);
    line-height: 1.08;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: var(--color-text-black);
}

.studio-about-text {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-text-dark);
    margin: 0 0 16px;
}

.studio-about-text:last-child {
    margin-bottom: 0;
}

.studio-about-media {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    justify-self: end;
}

.studio-about-photo {
    display: block;
    width: 750px;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

@media (max-width: 900px) {
    .studio-about-grid {
        grid-template-columns: 1fr;
    }

    .studio-about-media {
        margin-left: 0;
        justify-self: stretch;
        max-width: 100%;
    }
}

.studio-team-section {
    padding: 40px var(--page-inline) 72px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    background-color: #fde7ef;
}

.studio-team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    gap: 20px;
}

.studio-team-title h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    color: var(--color-text-black);
}

.studio-team-nav {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}

.studio-team-section .nav-btn.swiper-button-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.studio-team-swiper {
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.studio-team-swiper .swiper-slide {
    box-sizing: border-box;
}

.studio-team-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(24px, 4vw, 48px);
}

.studio-team-card__photo-wrap {
    flex: 0 0 auto;
    width: 530px;
    max-width: min(530px, 100%);
    min-width: 0;
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.studio-team-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: min(560px, 72vh);
    object-fit: cover;
    border-radius: 24px;
}

.studio-team-card__body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.studio-team-card__name {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    line-height: 1.15;
    color: var(--color-text-black);
}

.studio-team-card__role {
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: var(--font-weight-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 24px;
    color: var(--color-primary);
    line-height: 1.3;
}

.studio-team-card__bio {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-dark);
    max-width: 52rem;
    flex: 1 1 auto;
    margin: 0;
    padding-bottom: clamp(20px, 2.8vw, 32px);
}

.studio-team-card__bio p {
    margin: 0 0 12px;
}

.studio-team-card__bio p:last-child {
    margin-bottom: 0;
}

/* Кнопка как в карточке Popular services на главной (.service-card .btn-service) */
.studio-team-card .btn-service.studio-team-card__book {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 20px 0 24px;
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    border: none;
    border-radius: 120px;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.18s var(--lb-ease-out),
        box-shadow 0.24s ease;
    align-self: stretch;
    text-decoration: none;
}

.studio-team-card .btn-service.studio-team-card__book:hover {
    background-color: #d66a9c;
    color: var(--color-text-white);
}

.studio-team-card .btn-service.studio-team-card__book:active {
    transform: scale(0.988);
}

.studio-team-card .btn-service.studio-team-card__book .arrow-icon {
    display: block;
    width: 24px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
    transform: rotate(180deg);
    transition: transform 0.26s var(--lb-ease-out);
}

.studio-team-card .btn-service.studio-team-card__book:hover .arrow-icon {
    transform: rotate(180deg) translate3d(5px, 0, 0);
}

@media (max-width: 760px) {
    .studio-team-card {
        flex-direction: column;
        align-items: stretch;
    }

    .studio-team-card__photo-wrap {
        flex: none;
        max-width: none;
        width: 100%;
    }

    .studio-team-card__photo {
        height: auto;
        min-height: 320px;
        max-height: 420px;
    }
}

/* ---------- Страница «Помощь» (/pomosh/) ---------- */

.page-help .help-page-wrap {
    width: 100%;
}

.help-faq-area {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-top: max(80px, calc(var(--header-fixed-offset) + 32px));
    padding-bottom: clamp(64px, 8vw, 120px);
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
    background: #ffffff;
}

.help-faq-kicker {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--color-text-dark);
}

.help-faq-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.8vw, 42px);
    font-weight: var(--font-weight-emphasis);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 clamp(28px, 4vw, 44px);
    color: var(--color-text-black);
    max-width: 42rem;
}

.help-faq-list {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.help-faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.help-faq-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(18px, 2.2vw, 22px) 0;
    font-family: var(--font-heading);
    font-size: clamp(14px, 1.85vw, 18px);
    font-weight: var(--font-weight-heading);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-black);
    transition: color var(--lb-duration-fast) var(--lb-ease-out);
}

.help-faq-summary::-webkit-details-marker {
    display: none;
}

.help-faq-summary:focus {
    outline: none;
}

.help-faq-summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.help-faq-summary::marker {
    content: "";
}

.help-faq-item[open] .help-faq-summary {
    color: var(--color-primary);
}

.help-faq-q {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.help-faq-summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
    color: inherit;
    transition: transform 0.34s var(--lb-ease-soft), opacity 0.22s ease;
}

.help-faq-item[open] .help-faq-summary::after {
    content: "\00d7";
    font-size: 1.5rem;
    animation: lbTap 0.32s var(--lb-ease-out);
}

.help-faq-item[open] .help-faq-body {
    animation: lbRevealSoft 0.42s var(--lb-ease-out) both;
}

.help-faq-panel {
    padding: 0 2rem clamp(14px, 2vw, 22px) 0;
}

.help-faq-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.58;
    color: var(--color-text-dark);
    max-width: 48rem;
}

.help-faq-body p {
    margin: 0 0 12px;
}

.help-faq-body p:last-child {
    margin-bottom: 0;
}

.help-faq-empty {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-text-dark);
    margin: 0;
    max-width: 36rem;
}

/* ---------- Юридические страницы (политика, соглашение) ---------- */

.page-legal .legal-page-wrap {
    width: 100%;
}

.legal-doc-area {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-top: max(80px, calc(var(--header-fixed-offset) + 32px));
    padding-bottom: clamp(64px, 8vw, 120px);
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
    background: #ffffff;
}

.legal-doc-meta {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 10px;
}

.legal-doc-kicker {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--color-text-dark);
}

.legal-doc-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.8vw, 42px);
    font-weight: var(--font-weight-emphasis);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 clamp(20px, 3vw, 32px);
    color: var(--color-text-black);
    max-width: 42rem;
}

.legal-doc {
    max-width: 48rem;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.62;
    color: var(--color-text-dark);
}

.legal-doc > p {
    margin: 0 0 14px;
}

.legal-doc > p:last-child {
    margin-bottom: 0;
}

.legal-doc h2 {
    font-family: var(--font-heading);
    font-size: clamp(17px, 2vw, 20px);
    font-weight: var(--font-weight-emphasis);
    line-height: 1.3;
    margin: clamp(28px, 4vw, 40px) 0 14px;
    color: var(--color-text-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-doc h2:first-of-type {
    margin-top: clamp(8px, 2vw, 16px);
}

.legal-doc ul,
.legal-doc ol {
    margin: 0 0 14px;
    padding-left: 1.35rem;
}

.legal-doc li {
    margin-bottom: 8px;
}

.legal-doc li:last-child {
    margin-bottom: 0;
}

.legal-doc a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-doc a:hover {
    text-decoration: none;
}

/* ─── Страница блога ─── */
.page-blog .blog-page {
    background: var(--color-bg-soft, #fff);
}


.page-blog-index .blog-index-title-section,
.page-blog-index .blog-index-empty {
    padding-top: max(80px, calc(var(--header-fixed-offset) + 32px));
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
}

.page-blog-index .blog-index-title-section {
    padding-bottom: clamp(12px, 2.5vw, 24px);
}

.page-blog-index .blog-index-title-section .studio-about-kicker {
    margin-bottom: 0;
}

.page-blog-index .blog-index-intro {
    margin-top: clamp(12px, 2vw, 20px);
    max-width: 42rem;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.65vw, 17px);
    line-height: 1.58;
    color: var(--color-text-dark);
}

.page-blog-index .blog-index-intro p {
    margin: 0 0 12px;
}

.page-blog-index .blog-index-intro p:last-child {
    margin-bottom: 0;
}

.page-blog-index .blog-index-empty {
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
}

.page-blog-index .blog-mock-board {
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
}

.blog-mock-row {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: clamp(28px, 5vw, 52px) 0;
}

.blog-mock-row:focus-visible .blog-mock-title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.blog-mock-row__grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(22px, 4vw, 48px);
}

.blog-mock-row__grid--reverse {
    flex-direction: row-reverse;
}

.blog-mock-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}








.blog-mock-title {
    font-family: var(--font-display, "Unbounded", sans-serif);
    font-size: clamp(1.55rem, 3.8vw, 2.05rem);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-dark);
    margin: 0 0 1rem;
    line-height: 1.18;
}

.blog-mock-lead {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.58;
    color: var(--color-text-dark);
    margin: 0;
}

.blog-mock-lead p {
    margin: 0 0 12px;
}

.blog-mock-lead p:last-child {
    margin-bottom: 0;
}

.blog-mock-lead--empty {
    color: var(--color-text-muted, #75656b);
}

.blog-mock-media {
    flex: 1;
    min-width: 0;
}

.blog-mock-media__frame {
    display: block;
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(25, 0, 9, 0.1);
}

.blog-mock-media__frame--video-only {
    position: relative;
}

.blog-mock-media__frame--video-only .blog-mock-photo--dark {
    display: block;
    min-height: clamp(260px, 36vw, 420px);
    height: clamp(260px, 36vw, 420px);
    background: linear-gradient(145deg, #2d1420 0%, #5d3848 52%, #8e5f75 100%);
}

.blog-mock-photo {
    display: block;
    width: 100%;
    height: clamp(240px, 34vw, 420px);
    object-fit: cover;
    vertical-align: top;
    transition: transform 0.42s var(--lb-ease-out);
}

.blog-mock-photo--placeholder {
    height: clamp(240px, 34vw, 420px);
    border-radius: 26px;
    background: linear-gradient(145deg, #fce4ec 0%, #f8bbd9 48%, #f48fb1 100%);
    box-shadow: 0 16px 48px rgba(25, 0, 9, 0.08);
}

.blog-mock-row:hover .blog-mock-photo:not(.blog-mock-photo--placeholder):not(.blog-mock-photo--dark) {
    transform: scale(1.015);
}

.blog-mock-play {
    pointer-events: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 14px 40px rgba(25, 0, 9, 0.25);
}

.blog-mock-play::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent rgba(233, 30, 140, 0.85);
    transform: translateX(14%);
}

.blog-mock-play--center {
    position: absolute;
}

@media (max-width: 820px) {
    .blog-mock-row__grid,
    .blog-mock-row__grid--reverse {
        flex-direction: column;
    }

    .blog-mock-row .btn-service.blog-mock-watch {
        margin-top: 20px;
    }

    .blog-mock-media {
        width: 100%;
        max-width: 620px;
    }
}




.page-blog-category .blog-category-heading-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(14px, 2.8vw, 24px);
}

.blog-category-heading-copy {
    flex: 1;
    min-width: 0;
}

.page-blog-category .blog-category-page-header .studio-about-title {
    margin-bottom: 0;
}

.blog-category-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-top: 4px;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.blog-category-back-icon:hover {
    background: rgba(232, 164, 184, 0.24);
    transform: scale(1.04);
}

.blog-category-back-icon:focus-visible {
    outline: 2px solid var(--color-accent-strong, #e91e8c);
    outline-offset: 2px;
}

.blog-category-back-icon img {
    display: block;
    width: 28px;
    height: auto;
    filter: brightness(0);
    opacity: 0.65;
}

.blog-category-posts-area {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: clamp(28px, 5vw, 48px);
    background: #fff;
}

.blog-category-no-posts {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-muted, #75656b);
    margin: clamp(1rem, 3vw, 1.75rem) 0 0;
    max-width: 40rem;
}




.blog-category-strip {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s var(--lb-ease-out),
        transform 0.55s var(--lb-ease-out);
}

.blog-category-strip--visible {
    opacity: 1;
    transform: translateY(0);
}

.blog-category-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(1.25rem, 4vw, 3rem);
}

.blog-category-row--reverse {
    flex-direction: row-reverse;
}

.blog-category-copy {
    flex: 1;
    min-width: 0;
}

.blog-category-title {
    font-family: var(--font-display, "Unbounded", sans-serif);
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-dark);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.blog-category-lead {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.58;
    color: var(--color-text-dark);
    margin: 0;
}

.blog-category-lead p {
    margin: 0 0 12px;
}

.blog-category-lead p:last-child {
    margin-bottom: 0;
}

.blog-category-lead--empty {
    color: var(--color-text-muted, #75656b);
}

.blog-category-media {
    flex: 1;
    min-width: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(25, 0, 9, 0.08);
}

.blog-category-photo {
    display: block;
    width: 100%;
    height: clamp(220px, 32vw, 380px);
    object-fit: cover;
    border-radius: 22px;
    transition: transform 0.48s var(--lb-ease-out);
}

.blog-category-photo.blog-category-video {
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
}

.blog-category-video {
    vertical-align: top;
    background: #111;
}

.blog-category-media:hover .blog-category-photo:not(.blog-category-video) {
    transform: scale(1.02);
}

.blog-category-photo--placeholder {
    background: linear-gradient(145deg, #fce4ec 0%, #f8bbd9 48%, #f48fb1 100%);
    min-height: clamp(220px, 32vw, 340px);
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: clamp(18px, 3vw, 26px);
    align-items: start;
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.blog-post-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(25, 0, 9, 0.07);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(14px, 2.5vw, 22px);
    align-items: start;
    align-self: start;
    min-height: 0;
    height: fit-content;
    padding: clamp(16px, 2.8vw, 22px);
    transition:
        transform 0.38s var(--lb-ease-out),
        box-shadow 0.38s ease;
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(25, 0, 9, 0.11);
}

.blog-post-card__media {
    grid-column: 1;
    grid-row: 1;
    border-radius: 16px;
    overflow: hidden;
    align-self: start;
}

.blog-post-card__img {
    display: block;
    width: 100%;
    height: clamp(160px, 22vw, 220px);
    object-fit: cover;
    vertical-align: top;
    transition: transform 0.45s var(--lb-ease-out);
}

.blog-post-card__img.blog-post-card__video {
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
}

.blog-post-card__video {
    background: #111;
}

.blog-post-card:hover .blog-post-card__img:not(.blog-post-card__video) {
    transform: scale(1.03);
}

.blog-post-card:hover .blog-post-card__video {
    transform: none;
}

.blog-post-card__img--empty {
    height: clamp(160px, 22vw, 220px);
    background: linear-gradient(120deg, #fce4ec, #fce8f0);
}

.blog-post-card__body {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    min-width: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-blog-category .blog-post-card {
    grid-template-columns: 1fr;
}

.page-blog-category .blog-post-card__body {
    grid-column: 1;
    grid-row: 1;
}

.page-blog-category .blog-post-card__media {
    grid-column: 1;
    grid-row: 2;
}

.blog-post-card__title {
    font-family: var(--font-display, "Unbounded", sans-serif);
    font-size: 1.05rem;
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.25;
}

.blog-post-card__excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted, #5c4a50);
}

.blog-post-card__excerpt p {
    margin: 0 0 8px;
}

.blog-post-card__excerpt p:last-child {
    margin-bottom: 0;
}

/* «Смотреть» в строках разделов на главной блога (.btn-service) */
.blog-mock-row .btn-service.blog-mock-watch {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    height: 56px;
    padding: 0 20px 0 24px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    border: none;
    border-radius: 120px;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.18s var(--lb-ease-out),
        box-shadow 0.24s ease;
    align-self: stretch;
    pointer-events: none;
    cursor: inherit;
    margin-top: auto;
    flex-shrink: 0;
}

.blog-mock-row .btn-service.blog-mock-watch .arrow-icon {
    display: block;
    width: 24px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
    transform: rotate(180deg);
    transition: transform 0.26s var(--lb-ease-out);
}

.blog-mock-row:hover .btn-service.blog-mock-watch {
    background-color: #d66a9c;
}

.blog-mock-row:hover .btn-service.blog-mock-watch .arrow-icon {
    transform: rotate(180deg) translate3d(5px, 0, 0);
}

.blog-post-card__expandable {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.blog-post-card__body-full {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-dark);
}

.blog-post-card__expandable > .blog-post-card__toggle {
    align-self: flex-start;
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-emphasis);
    color: var(--color-accent-strong, #c2185b);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-post-card__expandable > .blog-post-card__toggle:hover,
.blog-post-card__expandable > .blog-post-card__toggle:focus-visible {
    color: var(--color-primary, #eb7fb1);
    outline: none;
}

.blog-post-card__expandable > .blog-post-card__toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(235, 127, 177, 0.45);
    border-radius: 4px;
}

.blog-post-card__body-full p {
    margin: 0 0 10px;
}

.blog-post-card__body-full p:last-child {
    margin-bottom: 0;
}

.blog-empty {
    padding: clamp(3rem, 8vw, 5rem) 0;
}

.blog-empty-kicker {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-mid, #e8a4b8);
    margin: 0 0 10px;
}

.blog-empty-title {
    font-family: var(--font-display, "Unbounded", sans-serif);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--color-text-dark);
}

.blog-empty-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 32rem;
}

.blog-social-cta {
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    padding: clamp(2rem, 5vw, 3rem) 0;
    background: linear-gradient(180deg, #fff5f8 0%, #fce4ec 55%, #f8bbd0 100%);
    border-radius: 24px;
}

.page-blog .blog-social-cta .page-inner {
    max-width: 56rem;
}

.blog-social-cta.blog-social-cta--index {
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    box-sizing: border-box;
    margin: clamp(1.85rem, 4.2vw, 3rem) 0 0;
    margin-bottom: 0;
    border-radius: 0;
    padding-top: clamp(2.35rem, 5.5vw, 3.4rem);
    padding-bottom: clamp(2.5rem, 5.8vw, 3.85rem);
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fefafb 42%,
        #fcebf3 78%,
        #f8e0ea 100%
    );
}

.blog-social-title {
    font-family: var(--font-display, "Unbounded", sans-serif);
    font-size: clamp(1.15rem, 2.8vw, 1.45rem);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.04em;
    color: var(--color-text-dark);
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.25;
}

.blog-social-cta.blog-social-cta--index .page-inner {
    max-width: var(--page-max-width);
}

.blog-social-cta.blog-social-cta--index .blog-social-title {
    text-align: left;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.03em;
    color: var(--color-text-black);
}

.blog-social-cta.blog-social-cta--index .blog-social-actions {
    justify-content: flex-start;
}

.blog-social-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
}

.blog-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: min(100%, 280px);
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: #fff;
    background: var(--color-accent-strong, #e91e8c);
    box-shadow: 0 10px 28px rgba(233, 30, 140, 0.28);
    transition:
        transform 0.32s var(--lb-ease-out),
        box-shadow 0.32s ease,
        filter 0.22s ease;
}

.blog-social-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 14px 36px rgba(233, 30, 140, 0.35);
}

.blog-social-btn__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.blog-social-btn__icon-wrap img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

.blog-social-btn__icon-wrap img.blog-social-btn__img-custom {
    filter: none;
    object-fit: contain;
}

/* Тот же файлы/icons/arrow.svg, что у кнопок «записаться» (.arrow-icon), без произвольного поворота -45° */
.blog-social-btn__icon-wrap img.blog-social-btn__img-link {
    width: 24px;
    height: 13px;
    object-fit: contain;
    transform: rotate(180deg);
}

.blog-social-btn--wa {
    background: #128c7e;
    box-shadow: 0 10px 28px rgba(18, 140, 126, 0.3);
}

.blog-social-btn--wa:hover {
    box-shadow: 0 14px 36px rgba(18, 140, 126, 0.38);
}

.blog-social-btn--ig {
    background: linear-gradient(45deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
    box-shadow: 0 10px 28px rgba(221, 42, 123, 0.25);
}

.blog-social-btn--ig:hover {
    box-shadow: 0 14px 36px rgba(129, 52, 175, 0.32);
}

.blog-social-btn--tg {
    background: #0088cc;
    box-shadow: 0 10px 28px rgba(0, 136, 204, 0.3);
}

.blog-social-btn--tg:hover {
    box-shadow: 0 14px 36px rgba(0, 136, 204, 0.38);
}

@media (max-width: 820px) {
    .blog-category-row,
    .blog-category-row--reverse {
        flex-direction: column;
    }

    .blog-category-media {
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }
}
.page-about-studio .studio-about-media {
    border-radius: 20px;
    overflow: hidden;
}

.page-about-studio .studio-about-photo,
.studio-team-card__photo {
    transition: transform 0.46s var(--lb-ease-out), box-shadow 0.42s ease;
}

.page-about-studio .studio-about-media:hover .studio-about-photo,
.studio-team-card:hover .studio-team-card__photo {
    transform: scale(1.02);
    box-shadow: 0 18px 44px rgba(25, 0, 9, 0.12);
}

.help-faq-kicker {
    animation: lbFadeUp var(--lb-micro-enter) var(--lb-ease-out) both;
    animation-delay: 0.05s;
}

.help-faq-title {
    animation: lbFadeUp var(--lb-micro-enter) var(--lb-ease-out) both;
    animation-delay: 0.1s;
}

.help-faq-list .help-faq-item:nth-child(1) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.13s;
}
.help-faq-list .help-faq-item:nth-child(2) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.16s;
}
.help-faq-list .help-faq-item:nth-child(3) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.19s;
}
.help-faq-list .help-faq-item:nth-child(4) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.22s;
}
.help-faq-list .help-faq-item:nth-child(5) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.25s;
}
.help-faq-list .help-faq-item:nth-child(6) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.28s;
}
.help-faq-list .help-faq-item:nth-child(7) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.31s;
}
.help-faq-list .help-faq-item:nth-child(8) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.34s;
}
.help-faq-list .help-faq-item:nth-child(9) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.37s;
}
.help-faq-list .help-faq-item:nth-child(10) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.4s;
}
.help-faq-list .help-faq-item:nth-child(11) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.43s;
}
.help-faq-list .help-faq-item:nth-child(12) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.46s;
}
.help-faq-list .help-faq-item:nth-child(13) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.49s;
}
.help-faq-list .help-faq-item:nth-child(14) {
    animation: lbFadeUp 0.4s var(--lb-ease-out) both;
    animation-delay: 0.52s;
}

@media (prefers-reduced-motion: reduce) {
    main.main-shell,
    footer.footer-enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
        transform: none !important;
    }

    .nav-btn:hover,
    .nav-btn:focus-visible,
    .nav-btn:active {
        transform: none !important;
    }

    .header-icon:hover,
    .header-icon:focus-visible,
    .header-burger:hover,
    .header-burger:focus-visible {
        transform: none !important;
    }

    .header-auth__link--pill-fill:hover {
        transform: none !important;
    }

    .header-logo:hover,
    .header-logo:focus-visible,
    .header-logo:active {
        transform: none !important;
    }

    .social-link:hover,
    .social-link:focus-visible,
    .social-link:active {
        transform: none !important;
    }

    .service-card .btn-service:hover .arrow-icon,
    .steps-section .btn-service:hover .arrow-icon,
    .studio-team-card .btn-service.studio-team-card__book:hover .arrow-icon {
        transform: rotate(180deg) !important;
    }

    .service-card .btn-service:active,
    .steps-section .btn-service:active,
    .studio-team-card .btn-service.studio-team-card__book:active,
    .page-booking .btn-service:active {
        transform: none !important;
    }

    .blog-mock-row:hover .btn-service.blog-mock-watch .arrow-icon {
        transform: rotate(180deg) !important;
    }

    .help-faq-kicker,
    .help-faq-title,
    .help-faq-list .help-faq-item {
        animation: none !important;
        opacity: 1 !important;
    }

    .help-faq-item[open] .help-faq-summary::after {
        animation: none !important;
    }

    .help-faq-item[open] .help-faq-body {
        animation: none !important;
    }

    .page-about-studio .studio-about-photo,
    .studio-team-card__photo {
        transition: none !important;
    }

    .page-about-studio .studio-about-media:hover .studio-about-photo,
    .studio-team-card:hover .studio-team-card__photo {
        transform: none !important;
        box-shadow: none !important;
    }

    .portfolio-filter:hover,
    .portfolio-filter:focus-visible {
        transform: none !important;
    }

    .profile-order-card__repeat:hover {
        transform: none !important;
    }

    .blog-category-strip {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .blog-mock-row:hover .blog-mock-photo {
        transform: none !important;
    }

    .blog-category-back-icon:hover {
        transform: none !important;
    }

    .blog-category-media:hover .blog-category-photo:not(.blog-category-video),
    .blog-post-card:hover .blog-post-card__img:not(.blog-post-card__video) {
        transform: none !important;
    }

    .blog-post-card:hover {
        transform: none !important;
    }

    .blog-social-btn:hover {
        transform: none !important;
    }
}

/* ---------- Страница записи (/services/…/zapis/) ---------- */
.page-booking .main-shell {
    padding-top: calc(var(--header-fixed-offset) + clamp(52px, 8vw, 88px));
    background: linear-gradient(
        180deg,
        #fef8fb 0%,
        #fff 22%,
        #fff 100%
    );
}

/* Как у шапки: отступы по краям вьюпорта + колонка max-width по центру */
.page-booking .booking-page {
    box-sizing: border-box;
    padding-left: var(--page-inline);
    padding-right: var(--page-inline);
}

.booking-page__inner {
    width: 100%;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: clamp(48px, 9vw, 96px);
    box-sizing: border-box;
}

.booking-messages {
    list-style: none;
    margin: 0 0 clamp(16px, 3vw, 24px);
    padding: 0;
}

.booking-breadcrumb {
    font-family: var(--font-heading);
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
    margin: 0 0 clamp(12px, 2vw, 18px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.booking-breadcrumb__link {
    color: var(--color-primary, #eb7fb1);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.booking-breadcrumb__link:hover {
    opacity: 0.82;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.booking-breadcrumb__sep {
    opacity: 0.45;
    user-select: none;
}

.booking-breadcrumb__current {
    color: var(--color-text-dark);
    max-width: min(100%, 28rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-breadcrumb__here {
    color: var(--color-text-black);
    font-weight: var(--font-weight-emphasis);
}

.booking-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.booking-board {
    background: linear-gradient(
        145deg,
        rgba(252, 236, 244, 0.95) 0%,
        rgba(255, 250, 252, 0.98) 48%,
        rgba(253, 241, 247, 0.92) 100%
    );
    border-radius: clamp(20px, 3.5vw, 28px);
    box-shadow: 0 18px 48px rgba(25, 0, 9, 0.07);
    border: 1px solid rgba(235, 127, 177, 0.18);
    padding: clamp(22px, 4vw, 36px);
    margin-bottom: clamp(40px, 7vw, 72px);
    box-sizing: border-box;
}

.booking-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3.8vw, 36px);
    row-gap: clamp(20px, 3.8vw, 36px);
    align-items: start;
}

.booking-grid {
    display: contents;
}

.booking-col--left {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.2vw, 18px);
}

.booking-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.booking-segment__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: clamp(13px, 1.55vw, 15px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    background: rgba(251, 227, 238, 0.88);
    color: var(--color-text-dark);
    border: 1px solid rgba(235, 127, 177, 0.32);
    cursor: pointer;
    transition:
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

a.booking-segment__btn:hover {
    background: rgba(235, 127, 177, 0.2);
    border-color: rgba(235, 127, 177, 0.45);
}

.booking-segment__btn--active {
    background: linear-gradient(92deg, var(--color-primary, #eb7fb1) 0%, #f5a3c4 52%, #f8b8d2 100%);
    color: var(--color-text-white);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(235, 127, 177, 0.35);
    cursor: default;
    pointer-events: none;
}

.booking-float {
    position: relative;
    display: block;
}

.booking-float__label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(60, 42, 52, 0.55);
    pointer-events: none;
    transition: transform 0.2s ease, font-size 0.2s ease, top 0.2s ease, color 0.2s ease;
    z-index: 1;
}

.booking-float__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    padding: 22px 18px 10px;
    border: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-dark);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.2);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.booking-float__input:focus {
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(235, 127, 177, 0.45);
}

.booking-float__input:not(:placeholder-shown) ~ .booking-float__label,
.booking-float__input:focus ~ .booking-float__label,
.booking-float--has-value .booking-float__label {
    top: 11px;
    transform: translateY(0);
    font-size: 9px;
    color: var(--color-text-muted, #75656b);
}

.booking-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-select-wrap__label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
    margin-left: 4px;
}

.booking-select {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 12px 40px 12px 16px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.22);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-dark);
    appearance: none;
    background-image: linear-gradient(
        135deg,
        transparent 46%,
        var(--color-text-muted) 46%,
        var(--color-text-muted) 52%,
        transparent 52%
    );
    background-position: calc(100% - 14px) 50%;
    background-size: 8px 8px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.booking-datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.booking-datetime-row--slots {
    grid-template-columns: 1fr;
}

.booking-datetime-trigger-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-datetime-trigger-group__label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
    margin-left: 4px;
}

.booking-datetime-trigger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.booking-datetime-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 56px;
    padding: 12px 14px 14px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.24);
    cursor: pointer;
    text-align: left;
    transition:
        box-shadow 0.22s ease,
        transform 0.18s ease,
        background 0.22s ease;
    font: inherit;
}

.booking-datetime-trigger:hover {
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.45), 0 6px 22px rgba(235, 127, 177, 0.12);
}

.booking-datetime-trigger:active {
    transform: scale(0.99);
}

.booking-datetime-trigger__hint {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(60, 42, 52, 0.52);
}

.booking-datetime-trigger__value {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-emphasis);
    color: var(--color-text-dark);
    line-height: 1.35;
    word-break: break-word;
}

.booking-datetime-trigger-hint-text {
    margin: 0;
    padding-left: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted, #75656b);
}

body.booking-modal-open {
    overflow: hidden;
}

.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.booking-modal[hidden] {
    display: none !important;
}

.booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 12, 24, 0.38);
    backdrop-filter: blur(4px);
}

.booking-modal__dialog {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: min(calc(100vw - max(24px, var(--page-inline) * 2)), 640px);
    max-height: min(88vh, 720px);
    margin: auto;
    display: flex;
    flex-direction: column;
    border-radius: clamp(22px, 4vw, 28px);
    background: linear-gradient(
        150deg,
        rgba(253, 244, 248, 0.98) 0%,
        rgba(255, 251, 252, 1) 45%,
        rgba(252, 239, 247, 0.96) 100%
    );
    box-shadow:
        0 28px 80px rgba(25, 0, 14, 0.18),
        0 0 0 1px rgba(235, 127, 177, 0.25);
    overflow: hidden;
    box-sizing: border-box;
}

.booking-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(14px, 3vw, 20px) clamp(18px, 4vw, 24px);
    border-bottom: 1px solid rgba(235, 127, 177, 0.15);
}

.booking-modal__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(15px, 2.2vw, 18px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.booking-modal__close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-text-muted, #75656b);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.booking-modal__close:hover {
    background: rgba(235, 127, 177, 0.18);
    color: var(--color-text-dark);
}

.booking-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 1fr);
    gap: clamp(16px, 3vw, 24px);
    padding: clamp(16px, 3.5vw, 24px);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.booking-modal__cal-panel {
    min-width: 0;
}

.booking-modal__time-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-modal__time-heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
}

.booking-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.booking-cal-nav__title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.04em;
    color: var(--color-text-dark);
}

.booking-cal-nav__btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.22);
    font-size: 20px;
    line-height: 1;
    color: var(--color-primary, #eb7fb1);
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.booking-cal-nav__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.booking-cal-nav__btn:not(:disabled):hover {
    background: rgba(235, 127, 177, 0.16);
}

.booking-cal-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    text-align: center;
}

.booking-cal-dow span {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(60, 42, 52, 0.45);
}

.booking-cal-cells {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.booking-cal__cell {
    aspect-ratio: 1;
    min-height: 36px;
    max-height: 48px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.16);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-emphasis);
    color: var(--color-text-dark);
    cursor: pointer;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}

.booking-cal__cell:hover:not(:disabled) {
    box-shadow:
        inset 0 0 0 1px rgba(235, 127, 177, 0.45),
        0 4px 16px rgba(235, 127, 177, 0.12);
}

.booking-cal__cell--muted {
    opacity: 0.42;
}

.booking-cal__cell--disabled {
    opacity: 0.22;
    cursor: not-allowed;
}

.booking-cal__cell--today {
    box-shadow: inset 0 0 0 2px rgba(235, 127, 177, 0.55);
}

.booking-cal__cell--selected {
    background: linear-gradient(132deg, var(--color-primary, #eb7fb1) 0%, #f5a9c9 72%);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 10px 28px rgba(235, 127, 177, 0.35);
}

.booking-cal__cell--selected.booking-cal__cell--muted {
    opacity: 1;
}

.booking-time-plaques {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.booking-time-plaques__loading,
.booking-time-plaques__empty {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted, #75656b);
    line-height: 1.45;
}

.booking-time-plaque {
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.05em;
    cursor: pointer;
    transition:
        box-shadow 0.2s ease,
        transform 0.15s ease,
        background 0.2s ease;
}

.booking-time-plaque--free {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.28);
    color: var(--color-text-dark);
}

.booking-time-plaque--free:hover {
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.5), 0 6px 20px rgba(235, 127, 177, 0.15);
}

.booking-time-plaque--active {
    background: linear-gradient(92deg, var(--color-primary, #eb7fb1) 0%, #f5a3c4 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(235, 127, 177, 0.35);
}

.booking-time-plaque--busy {
    background: rgba(245, 235, 239, 0.55);
    color: rgba(60, 42, 52, 0.38);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: rgba(90, 60, 72, 0.28);
}

.booking-time-plaque--past.booking-time-plaque--busy {
    text-decoration: none;
    opacity: 0.5;
    font-style: italic;
}

.booking-modal__legend {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted, #75656b);
}

.booking-modal__busy-row {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #9a6b78;
}

.booking-modal__foot {
    padding: 12px clamp(18px, 4vw, 24px) calc(clamp(16px, 3vw, 22px) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(235, 127, 177, 0.12);
    display: flex;
    justify-content: flex-end;
}

.booking-modal__done-btn {
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-white, #fff);
    background: linear-gradient(92deg, var(--color-primary, #eb7fb1) 0%, #f5a3c4 52%, #f8b8d2 100%);
    box-shadow: 0 10px 28px rgba(235, 127, 177, 0.38);
}

.booking-modal__done-btn:hover {
    filter: brightness(1.03);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 620px) {
    .booking-modal {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }

    .booking-modal__dialog {
        width: min(100%, calc(100vw - 20px));
        max-height: min(90vh, 720px);
        border-radius: clamp(18px, 4vw, 24px);
    }

    .booking-modal__body {
        grid-template-columns: 1fr;
    }

    .booking-datetime-trigger-row {
        grid-template-columns: 1fr;
    }
}

/* ——— Уведомления: модалка (как окно записи) + карточки ——— */
body.notif-modal-open {
    overflow: hidden;
}

.notif-modal {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.notif-modal[hidden] {
    display: none !important;
}

.notif-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 12, 24, 0.38);
    backdrop-filter: blur(4px);
}

.notif-modal__dialog {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: min(calc(100vw - 24px), 420px);
    max-height: min(86vh, 640px);
    margin: auto;
    display: flex;
    flex-direction: column;
    border-radius: clamp(20px, 4vw, 26px);
    background: linear-gradient(
        150deg,
        rgba(253, 244, 248, 0.98) 0%,
        rgba(255, 251, 252, 1) 44%,
        rgba(252, 239, 247, 0.96) 100%
    );
    box-shadow:
        0 28px 80px rgba(25, 0, 14, 0.16),
        0 0 0 1px rgba(235, 127, 177, 0.25);
    overflow: hidden;
    box-sizing: border-box;
}

.notif-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(14px, 3vw, 18px) clamp(16px, 3vw, 22px);
    border-bottom: 1px solid rgba(235, 127, 177, 0.15);
}

.notif-modal__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(14px, 2vw, 17px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.notif-modal__close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-text-muted, #75656b);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.notif-modal__close:hover {
    background: rgba(235, 127, 177, 0.18);
    color: var(--color-text-dark);
}

.notif-modal__toolbar {
    padding: 10px clamp(16px, 3vw, 22px) 8px;
    display: flex;
    justify-content: flex-start;
}

.notif-modal__mark-all {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--color-text-dark);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.28);
    transition:
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.notif-modal__mark-all:hover {
    box-shadow:
        inset 0 0 0 1px rgba(235, 127, 177, 0.45),
        0 4px 14px rgba(235, 127, 177, 0.12);
}

.notif-modal__body {
    padding: 10px clamp(14px, 3vw, 18px);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.notif-modal__loading,
.notif-modal__empty,
.notif-modal__error {
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted, #75656b);
}

.notif-modal__error {
    color: #9a4660;
}

.notif-modal__listwrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Карточка уведомления (модальное окно) */
.notif-card {
    margin: 0;
    padding: clamp(14px, 2.8vw, 16px);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.18);
    box-sizing: border-box;
}

.notif-card--unread {
    background: rgba(255, 250, 252, 0.95);
    box-shadow:
        inset 0 0 0 2px rgba(235, 127, 177, 0.35),
        0 8px 24px rgba(235, 127, 177, 0.12);
}

.notif-card__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.notif-card__main {
    flex: 1 1 220px;
    min-width: 0;
}

.notif-card__title {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.04em;
    color: var(--color-text-dark);
}

.notif-card__body {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.48;
    color: var(--color-text-muted, #75656b);
    white-space: pre-wrap;
}

.notif-card__time {
    display: block;
    font-size: 11px;
    color: rgba(117, 101, 107, 0.85);
}

.notif-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.notif-card__new {
    font-size: 10px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary, #eb7fb1);
}

.notif-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-text-white, #fff);
    background: linear-gradient(
        92deg,
        var(--color-primary, #eb7fb1) 0%,
        #f5a3c4 52%,
        #f8b8d2 100%
    );
    box-shadow: 0 6px 18px rgba(235, 127, 177, 0.32);
    transition:
        filter 0.18s ease,
        transform 0.15s ease;
}

.notif-card__btn:hover {
    filter: brightness(1.04);
}

@media (max-width: 520px) {
    .notif-modal__dialog {
        width: min(100%, calc(100vw - 18px));
    }

    .notif-card__row {
        flex-direction: column;
    }

    .notif-card__actions {
        flex-direction: row;
        justify-content: flex-end;
        width: 100%;
    }
}

.booking-datetime-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-datetime-field__lab {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
    margin-left: 4px;
}

.booking-datetime-field__inp {
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 14px;
    border: none;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.22);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-dark);
}

.booking-col--right {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.8vw, 22px);
}

.booking-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.booking-note__label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
}

.booking-note__area {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    min-height: clamp(140px, 22vw, 200px);
    padding: 16px;
    border-radius: 18px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(235, 127, 177, 0.18);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.48;
    color: var(--color-text-dark);
    resize: vertical;
}

.booking-note__area:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(235, 127, 177, 0.4);
}

.booking-pay-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.booking-pay-fieldset__legend {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
    margin-bottom: 10px;
    padding: 0;
}

.booking-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.booking-pay-card {
    display: block;
    cursor: pointer;
    margin: 0;
}

.booking-pay-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.booking-pay-card__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 10px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 2px solid transparent;
    box-shadow: 0 4px 16px rgba(25, 0, 9, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.booking-pay-card__input:checked + .booking-pay-card__panel,
.booking-pay-card__input:focus-visible + .booking-pay-card__panel {
    border-color: var(--color-primary, #eb7fb1);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(235, 127, 177, 0.18);
}

.booking-pay-card__text {
    font-family: var(--font-heading);
    font-size: clamp(11px, 1.35vw, 12px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.booking-pay-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
}

.booking-pay-card__icon--cash {
    background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);
}

.booking-pay-card__icon--card {
    background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%);
}

.booking-pay-card__icon--transfer {
    background: linear-gradient(145deg, #fce4ec 0%, #f8bbd0 100%);
}

.booking-pay-hint {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted, #75656b);
    max-width: 38rem;
}

.booking-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: clamp(4px, 1vw, 10px);
    padding-top: clamp(18px, 3vw, 26px);
    border-top: 1px solid rgba(235, 127, 177, 0.2);
}

.booking-total {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

.booking-total strong {
    font-weight: var(--font-weight-emphasis);
    color: var(--color-text-black);
}

/* Как у блока этапов / карточки услуги: розовая «капсула», нижний регистр */
.page-booking .btn-service {
    box-sizing: border-box;
    min-height: 56px;
    height: 56px;
    padding: 0 28px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    letter-spacing: 0;
    border: none;
    border-radius: 120px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        background-color 0.3s ease,
        transform 0.18s var(--lb-ease-out),
        box-shadow 0.24s ease;
}

.page-booking a.btn-service {
    text-decoration: none;
    color: var(--color-text-white);
}

.page-booking .btn-service:hover {
    background-color: #d66a9c;
}

.page-booking .btn-service:active {
    transform: scale(0.988);
}

.booking-submit-btn {
    min-width: min(100%, 220px);
    justify-content: center;
}

.booking-submit-btn.booking-submit {
    cursor: pointer;
}

.booking-review {
    width: 100%;
    max-width: none;
    margin: clamp(36px, 6vw, 56px) 0 0;
    text-align: left;
}

.booking-review-form {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.booking-review__title {
    font-family: var(--font-display, "Unbounded", sans-serif);
    font-size: clamp(1.15rem, 2.9vw, 1.55rem);
    font-weight: var(--font-weight-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-black);
    text-align: left;
    margin: 0 0 clamp(18px, 3vw, 26px);
    line-height: 1.2;
}

.booking-stars {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.booking-star {
    appearance: none;
    border: none;
    padding: 0 4px;
    background: none;
    font-size: clamp(26px, 5vw, 34px);
    line-height: 1;
    color: rgba(235, 127, 177, 0.28);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.booking-star.is-on,
.booking-star:hover {
    color: var(--color-primary, #eb7fb1);
}

.booking-star:active {
    transform: scale(0.92);
}

.booking-review-author-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.booking-review-author-wrap__lab {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--font-weight-emphasis);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #75656b);
}

.booking-review-author-wrap__inp {
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(235, 127, 177, 0.25);
    background: #fff;
    font-family: var(--font-body);
    font-size: 15px;
}

.booking-review-note {
    display: block;
    margin-bottom: 18px;
}

.booking-review-note__area {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(235, 127, 177, 0.22);
    background: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-dark);
    resize: vertical;
}

.booking-review-note__area::placeholder {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(92, 74, 80, 0.45);
}

.booking-review-submit {
    display: inline-flex;
    margin: 0;
    align-self: flex-start;
    min-width: min(100%, 260px);
    justify-content: center;
}

.service-card a.btn-service {
    text-decoration: none;
    color: var(--color-text-white);
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .booking-form {
        grid-template-columns: 1fr;
    }

    .booking-pay-grid {
        grid-template-columns: 1fr;
    }

    .booking-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-submit-btn {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .booking-review-submit {
        align-self: stretch;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

/* Типографика v20260523b: без синтетического bold у display-шрифтов */
:where(h1, h2, h3, h4, h5, h6, [class*="hero"], [class*="card-title"], [class*="services-header"]) {
    font-synthesis: none;
}