@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
  font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;


}
.main{
    overflow-x:hidden;
}
#team,
#contacts{
    scroll-margin-top: 100px;
}
.price-catalog__categories{
    scroll-margin-top: 200px;
}
@media (max-width: 1100px) {

    #team,
    #contacts{
        scroll-margin-top: 70px;
    }
    .price-catalog__categories{
    scroll-margin-top: 175px;
}
}
body.menu-open {
    overflow: hidden;
}
body {
    overflow-x: hidden;
    
    margin: 0;
    min-width: 320px;
  
    color: #fff;
    background: #121212;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

:root {
    --color-white: #fff;
    --color-black: #000;
    --color-orange: #f25d1a;
}

/* Header */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    height: 79px;

    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5.35px);
    -webkit-backdrop-filter: blur(5.35px);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    width: 100%;
    max-width: 1358px;
    height: 100%;
    margin: 0 auto;
    padding: 0 62px;
}

.header__logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: 172px;
}

.header__logo-image {
    display: block;
    width: 100%;
    height: auto;
}

.header__nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.header__nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 17px;
    border-radius: 35px;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-white);

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
    color: var(--color-orange);
}

.header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 22px;
}

.header__contacts {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header__contact {
    display: flex;
    align-items: center;
    gap: 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-white);

    white-space: nowrap;
}

a.header__contact {
    transition: color 0.25s ease;
}

a.header__contact:hover,
a.header__contact:focus-visible {
    color: var(--color-orange);
}

.header__contact-icon {
    flex: 0 0 20px;
    color: var(--color-orange);
}

.header__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 50px;
    border: 1px solid var(--color-orange);

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-orange);

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.header__button:hover,
.header__button:focus-visible {
    color: var(--color-black);
    background: var(--color-orange);
}


/* Burger */

.header__burger {
    display: none;
    width: 32px;
    height: 32px;
    padding: 4px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    color: var(--color-white);
}

.header__burger-line {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Mobile menu */

.header__mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: calc(100dvh - 50px);

    visibility: hidden;
    overflow-y: auto;

    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    transform: translateY(-12px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.header--menu-open .header__mobile-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.header__mobile-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 100%;
    padding: 34px 16px 24px;
}

.header__mobile-nav {
    display: flex;
    flex-direction: column;
}

.header__mobile-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-white);

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}

.header__mobile-link::after {
    content: "";

    position: absolute;
    right: 0;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--color-orange);
    border-right: 1px solid var(--color-orange);

    transform: rotate(45deg);
}

.header__mobile-link:hover,
.header__mobile-link:focus-visible {
    color: var(--color-orange);
}

.header__mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 18px;

    padding-top: 42px;
}

.header__mobile-contact {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-white);
}

.header__mobile-contact svg {
    flex: 0 0 20px;
    color: var(--color-orange);
}

.header__mobile-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 50px;
    margin-top: 6px;

    border: 1px solid var(--color-orange);

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-orange);

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.header__mobile-button:hover,
.header__mobile-button:focus-visible {
    color: var(--color-black);
    background: var(--color-orange);
}


/* Open burger */

.header--menu-open .header__burger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.header--menu-open .header__burger-line:nth-child(2) {
    opacity: 0;
}

.header--menu-open .header__burger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* Adaptive */

@media (max-width: 1350px) {
    .header__inner {
        gap: 24px;
        padding-right: 30px;
        padding-left: 30px;
    }

    .header__nav-link {
        padding-right: 12px;
        padding-left: 12px;
    }

    .header__actions {
        gap: 15px;
    }

    .header__contacts {
        gap: 10px;
    }
}

@media (max-width: 1100px) {
    .header {
        height: 50px;
    }

    .header__inner {
        justify-content: space-between;
        gap: 45px;

        max-width: none;
        padding: 0 16px;
    }

    .header__logo {
        width: 76px;
        padding: 0 4px;
    }

    .header__nav,
    .header__actions {
        display: none;
    }

    .header__burger {
        display: flex;
    }
}

/* Hero */

.hero {
    position: relative;

    width: 100%;
    min-height: 635px;

    overflow: hidden;

    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.hero__video {
    position: absolute;
    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    pointer-events: none;
}

.hero__overlay {
    position: absolute;
    z-index: 1;

    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    pointer-events: none;
}
.hero__container {
        position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;

    width: 100%;
    max-width: 1240px;
    min-height: 635px;

    margin: 0 auto;
    padding: 0 0 24px;
}

.hero__card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 454px;
    min-height: 344px;

    padding: 34px;
    gap: 40px;

    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    gap: 24px;
}

.hero__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    gap: 16px;
}

.hero__pretitle {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.22;

    color: #d44f1b;
}

.hero__title {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.225;

    color: #fff;
    text-transform: uppercase;
}

.hero__text {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.41;

    color: #fff;
}

.hero__text p {
    margin: 0;
}

.hero__accent {
    color: #d44f1b;
}

.hero__actions {
    display: flex;
    align-items: center;

    width: 100%;
    gap: 14px;
}

.hero__button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 50px;

    padding: 10px 20px;
    border: 1px solid transparent;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.hero__button--primary {
    width: 207px;

    color: #fff;
    background: #d44f1b;
    border-color: #d44f1b;
}

.hero__button--primary:hover,
.hero__button--primary:focus-visible {
    background: #f25d1a;
    border-color: #f25d1a;
}

.hero__button--outline {
    width: 168px;

    color: #f25d1a;
    background: transparent;
    border-color: #f25d1a;
}

.hero__button--outline:hover,
.hero__button--outline:focus-visible {
    color: #fff;
    background: #f25d1a;
}


/* Hero responsive */

@media (max-width: 1279px) {
    .hero__container {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 767px) {
  
    .hero {
        min-height: 463px;

        border-radius: 5px;

        background-position: center center;
    }

    .hero__container {
        align-items: flex-start;

        min-height: 463px;

        padding: 48px 16px;
    }

    .hero__card {
        width: 100%;
        min-height: 367px;

        padding: 34px;
        gap: 24px;
    }

    .hero__content {
        gap: 16px;
    }

    .hero__heading {
        gap: 12px;
    }

    .hero__pretitle {
        font-size: 16px;
        line-height: 1.25;
    }

    .hero__title {
        font-size: 27px;
        line-height: 1.22;
        white-space: nowrap;
    }

    .hero__text {
        font-size: 16px;
        line-height: 1.41;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;

        gap: 14px;
    }

    .hero__button {
        width: 100%;
        height: 44px;

        font-size: 14px;
        line-height: 1.2;
    }
}

@media (max-width: 374px) {
    .hero__card {
        padding-right: 24px;
        padding-left: 24px;
    }

    .hero__title {
        font-size: 25px;
    }
}

/* Stats */

.stats {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 858px;

    background-image: var(--stats-bg-desktop);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.stats__container {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1232px;
    min-height: 858px;

    margin: 0 auto;
    padding-top: 90px;
}

.stats__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 614px;
    gap: 24px;
}

.stats__title {
    margin: 0;

    font-size: 40px;
    font-weight: 500;
    line-height: 1.225;

    color: #fff;
    text-transform: uppercase;
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: 100%;
}

.stats__item {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-width: 0;
    height: 179px;

    padding: 20px;
    gap: 18px;
}

/* Вертикальные разделители */

.stats__item:not(:nth-child(3n))::after {
    content: "";

    position: absolute;
    top: 20px;
    right: 0;

    width: 1px;
    height: 141px;

    background: #f25d1a;
}

/* Горизонтальные разделители */

.stats__item:nth-child(-n + 3)::before {
    content: "";

    position: absolute;
    right: 13px;
    bottom: 0;
    left: 13px;

    height: 1px;

    background: #d44f1b;
}

.stats__number {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.29;

    color: #f25d1a;
}

.stats__text {
    max-width: 158px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.41;

    color: #fff;
}
.stats__mobile-image {
    display: none;
}

/* Tablet */

@media (max-width: 1279px) {
    .stats__container {
        padding-right: 24px;
        padding-left: 24px;
    }
}


/* Mobile */

@media (max-width: 767px) {
      .stats {
        min-height: 0;

        background-image: none;
        background-color: #121212;
    }

    .stats__container {
        min-height: 0;
        padding: 48px 0 0;
    }

    .stats__content {
        align-items: center;

        width: 100%;
        gap: 16px;
    }

    .stats__title {
        width: 100%;

        font-size: 27px;
        line-height: 1.22;

        text-align: center;
    }

    .stats__grid {
        grid-template-columns: repeat(2, 140px);
        justify-content: center;

        width: 100%;
        column-gap: 14px;
    }

    .stats__item {
        align-items: center;

        width: 140px;
        height: 148px;

        padding: 10px;
        gap: 10px;

        text-align: center;
    }

    .stats__item:not(:nth-child(3n))::after,
    .stats__item:nth-child(-n + 3)::before {
        display: none;
    }

    .stats__item:nth-child(odd)::after {
        content: "";

        position: absolute;
        top: 12px;
        right: -7px;

        display: block;

        width: 1px;
        height: 124px;

        background: #f25d1a;
    }

    .stats__item:nth-child(-n + 4)::before {
        content: "";

        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        height: 1px;

        background: #f25d1a;
    }

    .stats__number {
        font-size: 42px;
        line-height: 1.29;
    }

    .stats__text {
        max-width: 105px;

        font-size: 14px;
        line-height: 1.41;

        text-align: center;
    }

    .stats__mobile-image {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .stats__mobile-image img {
        display: block;
        width: 100%;
        height: auto;
    }
}


/* Services */

.services {
    position: relative;
    z-index: 1;
    width: 100%;

    padding: 83px 0 134px;

    color: #000;
    background: #f25d1a;
}
.services__decor {
    position: absolute;
    z-index: 0;

    top: -201px;
    right: -170px;

    width: 846px;
    height: 897px;

    pointer-events: none;
    user-select: none;
}

.services__container {
        position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 1232px;

    margin: 0 auto;
    gap: 26px;
}


/* Heading */

.services__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;
    min-height: 117px;
}

.services__heading-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 24px;
}

.services__title {
    margin: 0;

    font-size: 40px;
    font-weight: 500;
    line-height: 1.225;

    color: #000;
    text-transform: uppercase;
}


/* Tabs */

.services__tabs {
    display: flex;
    align-items: center;

    gap: 20px;
}

.services__tab {
    position: relative;

    min-height: 44px;

    padding: 10px;

    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;

    color: rgba(0, 0, 0, 0.7);

    transition: color 0.2s ease;
}

.services__tab::after {
    content: "";

    position: absolute;
    right: 10px;
    bottom: 3px;
    left: 10px;

    height: 2px;

    background: #000;

    opacity: 0;

    transition: opacity 0.2s ease;
}

.services__tab:hover,
.services__tab:focus-visible {
    color: #000;
}

.services__tab.is-active {
    font-weight: 600;
    color: #000;
}




/* Controls */

.services__controls {
    display: flex;
    align-items: center;

    padding: 10px;

    gap: 22px;
}

.services__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: #121212;

    transition: opacity 0.2s ease;
}

.services__arrow:disabled {
    opacity: 0.25;
    cursor: default;
}


/* Panels */

.services__panel[hidden] {
    display: none;
}

.services__viewport {
    width: 100%;

    overflow: hidden;
}

.services__track {
    display: flex;
    align-items: stretch;

    gap: 17px;

    counter-reset: service-card;

    transition: transform 0.35s ease;
    will-change: transform;
}


/* Card */

.services__card {
    position: relative;

    flex: 0 0 calc((100% - 51px) / 4);

    height: 496px;

    overflow: hidden;

    background: #000;

    counter-increment: service-card;
}

.services__card-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.services__card-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            #000 0%,
            rgba(0, 0, 0, 0.92) 8%,
            rgba(0, 0, 0, 0) 40%
        );
}

.services__card-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.services__card-info {
    position: absolute;
    z-index: 2;
    inset: 24px 24px 34px;

    display: flex;
    flex-direction: column;

    color: #fff;
}

.services__card-number::before {
    content: counter(service-card, decimal-leading-zero);
}

.services__card-number {
    display: block;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;

    color: #f25d1a;
}

.services__card-body {
    display: flex;
    flex-direction: column;

    margin-top: auto;

    gap: 14px;
}

.services__card-title {
    margin: 0;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;

    color: #f25d1a;
    text-transform: uppercase;
}

.services__card-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.41;

    color: #fff;
}

.services__card-text p {
    margin: 0;
}


/* Buttons */

.services__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 16px;
}

.services__button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 50px;

    padding: 10px 20px;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.services__button--price {
    min-width: 158px;

    border: 1px solid #000;

    color: #000;
    background: transparent;
}

.services__button--price:hover,
.services__button--price:focus-visible {
    color: #fff;
    background: #000;
}

.services__button--booking {
    min-width: 227px;

    color: #fff;
    background: #000;
}

.services__button--booking:hover,
.services__button--booking:focus-visible {
    color: #000;
    background: #fff;
}


/* Tablet */

@media (max-width: 1279px) {
    .services {
        padding-right: 24px;
        padding-left: 24px;
    }

    .services__card {
        flex-basis: calc((100% - 17px) / 2);
    }
}


/* Mobile */

@media (max-width: 767px) {
    .services {
        padding: 48px 16px;
    }
    .services__decor {
        display: none;
    }
    .services__container {
        max-width: 328px;

        gap: 16px;
    }

    .services__heading {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        min-height: 81px;
    }

    .services__heading-content {
        align-items: center;

        gap: 8px;
    }

    .services__title {
        font-size: 27px;
        line-height: 1.22;

        text-align: center;
    }

    .services__tabs {
        gap: 8px;
    }

    .services__tab {
        min-height: 37px;

        padding: 10px;

        font-size: 14px;
        line-height: 1.2;
    }

    .services__tab::after {
        display: none;
    }

    .services__controls {
        display: none;
    }


    /* Cards */

    .services__viewport {
        overflow: visible;
    }

    .services__track {
        flex-direction: column;

        gap: 8px;

        transform: none !important;
    }

    .services__card {
        display: flex;

        flex: none;

        width: 100%;
        height: 154px;
    }

    .services__card-media {
        position: relative;

        flex: 0 0 111px;

        width: 111px;
        height: 154px;
    }

    .services__card-media::after {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0) 78%,
                #000 100%
            );
    }

    .services__card-info {
        position: relative;
        inset: auto;

        display: flex;
        flex: 1;
        justify-content: center;

        min-width: 0;

        padding: 10px 10px 10px 20px;

        background: #000;
    }

    .services__card-number {
        font-size: 12px;
        line-height: 1.25;
    }

    .services__card-body {
        margin-top: 10px;

        gap: 10px;
    }

    .services__card-title {
        font-size: 16px;
        line-height: 1.25;
    }

    .services__card-text {
        font-size: 12px;
        line-height: 1.41;
    }


    /* Buttons */

    .services__actions {
        justify-content: center;

        width: calc(100% + 8px);

        margin-left: -4px;

        gap: 8px;
    }

    .services__button {
        height: 44px;

        padding: 10px 20px;

        font-size: 14px;
    }

    .services__button--price {
        flex: 0 0 140px;
        min-width: 0;
    }

    .services__button--booking {
        flex: 1;
        min-width: 0;
    }
}

/* Interior */

.interior {
    position: relative;
    z-index: 2;
    isolation: isolate;

    width: 100%;
    min-height: 724px !important;
    max-height: 724px !important;
    overflow: visible;

    background: #121212;
}
.interior__decor {
    position: absolute;
    z-index: 3;

    left: -210px;
    bottom: -98px;

    width: 546px;
    height: 589px;

    pointer-events: none;
    user-select: none;
}

/*
 * Белая область не занимает всю высоту секции.
 * Поэтому снизу автоматически остаётся
 * чёрная полоса как в макете.
 */
.interior::before {
    content: "";

    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    left: 0;

    height: 627px;

    background-image: url("/assets/images/bg/interior-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}




/* Content */

.interior__content {
    position: relative;
    top: -62px;
z-index: 4;
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 1232px;

    margin: 0 auto;

    gap: 16px;
}


/* Top */

.interior__top {
    display: flex;
    align-items: flex-end;

    width: 100%;
    height: 366px;

    gap: 37px;
}


/* Info */

.interior__info {
    display: flex;
    flex: 0 0 511px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    height: 320px;

    padding: 61px 0;

    gap: 24px;
}

.interior__title {
    margin: 0;

    font-size: 40px;
    font-weight: 500;
    line-height: 1.225;

    color: #121212;
    text-transform: uppercase;
}

.interior__text {
    max-width: 511px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.41;

    color: #121212;
}

.interior__text p {
    margin: 0;
}

.interior__accent {
    color: #f25d1a;
}


/* Top gallery */

.interior__gallery-top {
    display: flex;
    flex: 1;
    align-items: stretch;

    height: 366px;

    gap: 19px;
}

.interior__image {
    overflow: hidden;
}

.interior__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.interior__image--1 {
    width: 332px;
    height: 366px;

    outline: 15px solid #fff;
}

.interior__image--2 {
    width: 333px;
    height: 366px;

     outline: 15px solid #fff;
}


/* Bottom gallery */

.interior__gallery-bottom {
    display: flex;
    align-items: stretch;

    width: 100%;
    height: 388px;

    gap: 14px;
}

.interior__image--3 {
    flex: 0 0 460px;

    width: 460px;
    height: 388px;

     outline: 15px solid #fff;
}

.interior__image--4 {
    flex: 0 0 284px;

    width: 284px;
    height: 388px;

     outline: 15px solid #fff;
}

.interior__image--5 {
    flex: 0 0 460px;

    width: 460px;
    height: 388px;

     outline: 15px solid #fff;
}


/* Tablet */

@media (max-width: 1279px) {
    .interior__content {
        max-width: none;

        padding-right: 24px;
        padding-left: 24px;
    }

    .interior__info {
        flex-basis: 40%;
    }

    .interior__gallery-top {
        min-width: 0;
    }

    .interior__image--1,
    .interior__image--2 {
        width: 50%;
    }

    .interior__image--3,
    .interior__image--5 {
        flex: 1;
        width: auto;
    }

    .interior__image--4 {
        flex: 0 0 23%;
        width: auto;
    }
}


/* Mobile */

@media (max-width: 767px) {
    .interior {
        min-height: 0;

        padding: 48px 8px;

        background: #121212;
    }

    .interior::before,
    .interior::after {
        display: none;
    }

    .interior__content {
        top: 0;

        max-width: 344px;

        padding: 0;

        gap: 0px;
    }
.interior__decor{
    DISPLAY:NONE;
}

    /* Heading */

    .interior__top {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        height: auto;

        gap: 32px;
    }

    .interior__info {
        flex: none;
        align-items: center;

        width: 100%;
        height: auto;

        padding: 0;

        gap: 16px;

        text-align: center;
    }

    .interior__title {
        width: 100%;

        font-size: 27px;
        line-height: 1.22;

        color: #fff;

        text-align: center;
    }

    .interior__text {
        width: 100%;
        max-width: none;

        font-size: 14px;
        line-height: 1.41;

        color: #fff;

        text-align: center;
    }


    /* Mobile gallery top */

    .interior__gallery-top {
        display: block;

        width: 100%;
        height: 254px;

        padding: 8px 8px 0;

        background: #fff;
    }

    .interior__image--1 {
        width: 100%;
        height: 246px;
        outline: 8PX;
        border: 0;
    }

    .interior__image--2 {
        display: none;
    }


    /* Mobile gallery bottom */

    .interior__gallery-bottom {
        display: flex;

        width: 100%;
        height: 158px;

        padding: 8px;

        gap: 8px;

        background: #fff;
    }

    .interior__image--3,
    .interior__image--5 {
        flex: 1;
      outline: 8PX;
        width: calc(50% - 4px);
        height: 142px;

        border: 0;
    }

    .interior__image--4 {
        display: none;
    }
}



/* Footer */

.footer {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 50px 0;

    background: #121212;
    color: #fff;
}
.footer__decor {
    position: absolute;
    top: -105px;
    right: 0;

    width: 610px;
    height: 482px;

    pointer-events: none;
    z-index: 1;
}

.footer__decor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right top;
}
@media (max-width: 767px) {
    .footer__decor {
        display: none;
    }
}
.footer__inner {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 1232px;

    margin: 0 auto;

    gap: 54px;
}


/* Main */

.footer__main {
    display: flex;
    align-items: flex-start;

    width: 100%;
    min-height: 291px;

    gap: 115px;
}


/* Logo */

.footer__logo {
    display: block;
    flex: 0 0 314px;

    width: 314px;
}

.footer__logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* Content */

.footer__content {
    z-index:2;
    display: flex;
    align-items: flex-start;

    gap: 152px;
}


/* Titles */

.footer__section-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;

    color: #d44f1b;
}


/* Navigation */

.footer__nav {
    display: flex;
    flex: 0 0 97px;
    flex-direction: column;

    width: 97px;

    gap: 16px;
}

.footer__nav-list {
    display: flex;
    flex-direction: column;

    gap: 28px;
}

.footer__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;

    color: #fff;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
    color: #f25d1a;
}

.footer__nav-arrow {
    display: none;
}


/* Contacts */

.footer__contacts {
    display: flex;
    flex: 0 0 377px;
    flex-direction: column;

    width: 377px;

    gap: 19px;
}

.footer__contact-list {
    display: flex;
    flex-direction: column;

    gap: 28px;
}

.footer__contact-item {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.4);
}

a.footer__contact-item {
    transition: color 0.2s ease;
}

a.footer__contact-item:hover,
a.footer__contact-item:focus-visible {
    color: #fff;
}

.footer__contact-icon {
    flex: 0 0 24px;

    color: #d44f1b;
}


/* Social */

.footer__socials {
    display: flex;
    align-items: center;

    margin-top: 13px;

    gap: 18px;
}

.footer__social {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    color: #121212;
    background: #d44f1b;

    transition: background-color 0.2s ease;
}

.footer__social:hover,
.footer__social:focus-visible {
    background: #f25d1a;
}


/* Legal */

.footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
}

.footer__copyright {
    flex: 0 0 auto;

    color: #fff;
}

.footer__legal-links {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 1;

    margin-left: 62px;

    gap: 30px;
}

.footer__legal-links a {
    color: rgba(255, 255, 255, 0.4);

    transition: color 0.2s ease;
}

.footer__legal-links a:hover,
.footer__legal-links a:focus-visible {
    color: #fff;
}


/* Tablet */

@media (max-width: 1279px) {
    .footer {
        padding-right: 24px;
        padding-left: 24px;
    }

    .footer__main {
        gap: 60px;
    }

    .footer__content {
        flex: 1;
        justify-content: space-between;

        gap: 50px;
    }

    .footer__legal-links {
        margin-left: 40px;

        gap: 20px;
    }
}
/* =========================================================
   Footer / Price page
   ========================================================= */

.footer--price {
    background: #fff;
    color: #121212;

    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer--price .footer__decor {
    display: none;
}


/* Navigation */

.footer--price .footer__nav-link {
    color: #121212;
}

.footer--price .footer__nav-link:hover,
.footer--price .footer__nav-link:focus-visible {
    color: #f25d1a;
}


/* Contacts */

.footer--price .footer__contact-item {
    color: #121212;
}

.footer--price a.footer__contact-item:hover,
.footer--price a.footer__contact-item:focus-visible {
    color: #f25d1a;
}


/* Copyright */

.footer--price .footer__copyright {
    color: #121212;
}


/* Legal */

.footer--price .footer__legal-links a {
    color: rgba(0, 0, 0, 0.4);
}

.footer--price .footer__legal-links a:hover,
.footer--price .footer__legal-links a:focus-visible {
    color: #121212;
}

/* Mobile */

@media (max-width: 767px) {
    .footer {
        padding: 48px 16px;
    }

    .footer__inner {
        max-width: 328px;

        gap: 32px;
    }


    /* Main */

    .footer__main {
        flex-direction: column;
        align-items: center;

        min-height: 0;

        gap: 32px;
    }


    /* Logo */

    .footer__logo {
        flex: none;

        width: 159px;
    }


    /* Content */

    .footer__content {
        flex-direction: column;

        width: 100%;

        gap: 32px;
    }


    /* Navigation */

    .footer__nav {
        flex: none;

        width: 100%;

        gap: 16px;
    }

    .footer__nav-list {
        width: 100%;

        gap: 8px;
    }

    .footer__nav-link {
        width: 100%;
        min-height: 36px;

        padding: 8px 0;

        border-bottom: 1px solid #171717;

        font-size: 14px;
        line-height: 1.2;
    }

    .footer__nav-arrow {
        display: block;

        width: 8px;
        height: 8px;

        margin-right: 3px;

        border-top: 1px solid #fff;
        border-right: 1px solid #fff;

        transform: rotate(45deg);
    }


    /* Contacts */

    .footer__contacts {
        flex: none;

        width: 100%;

        gap: 16px;
    }

    .footer__contact-list {
        gap: 12px;
    }

    .footer__contact-item {
        width: 100%;

        font-size: 14px;
        line-height: 1.2;

        color: #fff;
    }

    .footer__contact-icon {
        flex-basis: 24px;
    }


    /* Socials */

    .footer__socials {
        justify-content: center;

        width: 100%;

        margin-top: 16px;
    }


    /* Legal */

    .footer__legal {
        flex-direction: column;

        width: 100%;

        font-size: 12px;
        line-height: 1.25;
    }

    .footer__copyright {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 43px;

        border-top: 1px solid #171717;
    }

    .footer__legal-links {
        flex-direction: column;

        width: 100%;

        margin: 8px 0 0;

        gap: 8px;
    }

    .footer__legal-links a {
        width: 100%;

        color: rgba(255, 255, 255, 0.4);

        text-align: center;
        text-decoration: underline;
    }
}
@media (max-width: 767px) {

    .footer--price {
        background: #fff;
    }

    .footer--price .footer__nav-link {
        color: #121212;

        border-bottom-color: rgba(0, 0, 0, 0.1);
    }

    .footer--price .footer__nav-arrow {
        border-top-color: #121212;
        border-right-color: #121212;
    }

    .footer--price .footer__contact-item {
        color: #121212;
    }

    .footer--price .footer__copyright {
        color: #121212;

        border-top-color: rgba(0, 0, 0, 0.1);
    }

    .footer--price .footer__legal-links a {
        color: rgba(0, 0, 0, 0.4);
    }
}
/* Contacts */
.contacts {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 580px;

    padding: 44px 0;

    overflow: hidden;

    background:
        url("/assets/images/bg-contacts.png") center top / cover no-repeat;

    color: #121212;
}



.contacts__inner {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    width: 100%;
    max-width: 1232px;

    margin: 0 auto;

    gap: 57px;
}


/* Map */

.contacts__map {
    position: relative;

    flex: 0 0 678px;

    width: 678px;
    height: 492px;

    overflow: hidden;

    background: #eee;
}

.contacts__map iframe {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(1)
        contrast(1)
        brightness(1);
}

.contacts__map-link {
    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;

    font-size: 12px;

    color: #eee;
}

/* Content */

.contacts__content {
    display: flex;
    flex: 0 0 497px;
    flex-direction: column;
    align-items: flex-start;

    width: 497px;

    gap: 24px;
}


/* Heading */

.contacts__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;

    gap: 16px;
}

.contacts__heading--mobile {
    display: none;
}

.contacts__subtitle {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.23;

    color: #d44f1b;
}

.contacts__title {
    margin: 0;

    font-size: 40px;
    font-weight: 700;
    line-height: 1.225;

    color: #121212;
    text-transform: uppercase;
}


/* Info */

.contacts__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 32px;
}

.contacts__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 22px;
}

.contacts__item {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.22;

    color: #121212;
}

a.contacts__item {
    transition: color 0.2s ease;
}

a.contacts__item:hover,
a.contacts__item:focus-visible {
    color: #d44f1b;
}

.contacts__icon {
    flex: 0 0 24px;

    color: #d44f1b;
}


/* Social */

.contacts__socials {
    display: flex;
    align-items: center;

    gap: 18px;
}

.contacts__social {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    color: #fff;
    background: #d44f1b;

    transition: background-color 0.2s ease;
}

.contacts__social:hover,
.contacts__social:focus-visible {
    background: #f25d1a;
}


/* Button */

.contacts__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 224px;
    height: 50px;

    padding: 10px 30px;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;

    color: #fff;
    background: #f25d1a;

    transition: background-color 0.2s ease;
}

.contacts__button:hover,
.contacts__button:focus-visible {
    background: #d44f1b;
}


/* Tablet */

@media (max-width: 1279px) {
    .contacts {
        padding-right: 24px;
        padding-left: 24px;
    }

    .contacts__inner {
        gap: 36px;
    }

    .contacts__map {
        flex: 1;

        min-width: 0;
    }

    .contacts__content {
        flex: 0 0 42%;

        width: auto;
    }

    .contacts__title {
        font-size: 34px;
    }
}


/* Mobile */

@media (max-width: 767px) {
.contacts {
        min-height: 0;

        padding: 48px 16px;

        background: #fff;
    }


    .contacts__inner {
        flex-direction: column;
        align-items: stretch;

        max-width: 328px;

        gap: 24px;
    }


    /* Heading первым */

    .contacts__heading--desktop {
        display: none;
    }

    .contacts__heading--mobile {
        display: flex;

        gap: 12px;
    }

    .contacts__subtitle {
        font-size: 16px;
        line-height: 1.25;
    }

    .contacts__title {
        font-size: 27px;
        font-weight: 500;
        line-height: 1.22;
    }


    /* Map */

    .contacts__map {
        flex: none;

        width: 100%;
        height: auto;

        aspect-ratio: 328 / 213;
    }


    /* Content */

    .contacts__content {
        flex: none;

        width: 100%;

        gap: 0;
    }

    .contacts__info {
        width: 100%;

        gap: 32px;
    }

    .contacts__list {
        width: 100%;

        gap: 26px;
    }

    .contacts__item {
        width: 100%;

        font-size: 14px;
        line-height: 1.2;
    }

    .contacts__icon {
        flex-basis: 20px;

        width: 20px;
        height: 20px;
    }


    /* Social */

    .contacts__socials {
        gap: 18px;
    }


    /* Button */

    .contacts__button {
        width: 100%;
        height: 50px;

        font-size: 14px;
        line-height: 1.2;
    }
}


/* Cosmetics + Team */

.cosmetics-team {
    width: 100%;

    padding: 72px 0;

    background:
        linear-gradient(
            180deg,
            #121212 8%,
            rgba(18, 18, 18, 0) 18%,
            rgba(18, 18, 18, 0.5) 88%
        ),
        linear-gradient(
            90deg,
            #121212 0%,
            rgba(18, 18, 18, 0.6) 12%,
            #121212 50%,
            rgba(18, 18, 18, 0.1) 74%,
            rgba(18, 18, 18, 0.7) 86%,
            #121212 100%
        ),
        var(--cosmetics-team-bg);

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cosmetics,
.team {
    width: 100%;
    max-width: 1232px;

    margin: 0 auto;
}

.team {
    margin-top: 71px;
}


/* Cosmetics */

.cosmetics {
    display: flex;
    flex-direction: column;

    gap: 56px;
}

.cosmetics__heading {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 40px;

    text-align: center;
}

.cosmetics__heading-text {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;
}

.cosmetics__subtitle {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.23;

    color: #f25d1a;
}

.cosmetics__title {
    max-width: 1000px;

    margin: 0;

    font-size: 40px;
    font-weight: 500;
    line-height: 1.225;

    color: #fff;
    text-transform: uppercase;
}

.cosmetics__text {
    max-width: 900px;

    margin-top: -16px;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;

    color: #999;
}

.cosmetics__text p {
    margin: 0;
}


/* Actions */

.cosmetics__actions {
    display: flex;

    width: 586px;

    gap: 16px;
}

.cosmetics__button {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    height: 50px;

    padding: 10px 30px;

    font-size: 18px;
    font-weight: 500;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.cosmetics__button--price {
    color: #fff;
    background: #d44f1b;
}

.cosmetics__button--price:hover {
    background: #f25d1a;
}

.cosmetics__button--instagram {
    gap: 10px;

    border: 1px solid #d44f1b;

    color: #d44f1b;
}

.cosmetics__button--instagram:hover {
    color: #fff;
    background: #d44f1b;
}


/* Media */

.cosmetics__media {
    display: flex;
    align-items: flex-start;

    gap: 20px;
}

.cosmetics__gallery {
    flex: 0 0 882px;

    width: 882px;
    height: 643px;

    overflow: hidden;
}

.cosmetics__track,
.cosmetics__slide {
    width: 100%;
    height: 100%;
}

.cosmetics__slide:not(:first-child) {
    display: none;
}

.cosmetics__slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.cosmetics__pagination {
    display: none;
}

/* =========================================================
   Cosmetics media
   ========================================================= */

.cosmetics__media {
    display: flex;
    align-items: stretch;

    width: 100%;
    min-width: 0;

    gap: 20px;

    /*
     * 1232 × 644 из Figma.
     * На desktop получаем ровно исходную высоту,
     * ниже блок пропорционально уменьшается.
     */
    aspect-ratio: 1232 / 644;
}


/* Gallery */

.cosmetics__gallery {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    height: 100%;

    overflow: hidden;
}

.cosmetics__track {
    width: 100%;
    height: 100%;
}

.cosmetics__slide {
    width: 100%;
    height: 100%;
}

.cosmetics__slide:not(:first-child) {
    display: none;
}

.cosmetics__slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Pagination desktop */

.cosmetics__pagination {
    display: none;
}


/* Instagram */

.cosmetics__instagram {
    display: block;

    flex: 0 0 26.7857%;

    width: 26.7857%;
    min-width: 0;
    height: 100%;

    overflow: hidden;
}

.cosmetics__instagram img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: opacity 0.25s ease;
}

.cosmetics__instagram:hover img,
.cosmetics__instagram:focus-visible img {
    opacity: 0.9;
}

.cosmetics__instagram {
    display: block;
    flex: 0 0 330px;

    width: 330px;
    height: 644px;

    overflow: hidden;
}

.cosmetics__instagram img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: opacity 0.25s ease;
}

.cosmetics__instagram:hover img,
.cosmetics__instagram:focus-visible img {
    opacity: 0.9;
}

@media (max-width: 767px) {

     .cosmetics__instagram {
        flex: none;

        width: 328px;
        height: auto;

        overflow: hidden;
    }

    .cosmetics__instagram img {
        width: 100%;
        height: auto;

        object-fit: cover;
    }
}
/* Team */

.team {
    display: flex;
    flex-direction: column;

    gap: 56px;
}

.team__heading {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    text-align: center;
}

.team__subtitle {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.23;

    color: #f25d1a;
}

.team__title {
    margin: 0;

    font-size: 40px;
    font-weight: 500;
    line-height: 1.225;

    color: #fff;
    text-transform: uppercase;
}


/* Cards */

.team__cards {
    display: flex;

    width: 100%;
    height: 679px;

    gap: 24px;
}

.team__card {
    position: relative;

    flex: 0 0 240px;

    height: 679px;

    overflow: hidden;

    transition: flex-basis 0.45s ease;
}

.team__card-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.team__card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0) 38%
        );
}

.team__card-info {
    position: absolute;
    z-index: 2;

    right: 30px;
    bottom: 36px;
    left: 30px;

    display: flex;
    align-items: flex-end;

    gap: 4px;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.25s ease 0.12s,
        transform 0.25s ease 0.12s;
}

.team__brand {
    flex: 0 0 auto;

    font-size: 16px;

    color: #f25d1a;
    text-transform: uppercase;

    transform: rotate(-90deg) translateX(10px);
    transform-origin: left bottom;
}

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

.team__name {
    font-size: 18px;
    font-weight: 400;

    color: #fff;
    text-transform: uppercase;
}

.team__position {
    font-size: 29px;
    font-weight: 500;
    line-height: 1.2;

    color: #fff;
    text-transform: uppercase;
}


/* Активная карточка */

.team__card.is-active {
    flex-basis: 440px;
}

.team__card.is-active .team__card-info {
    opacity: 1;
    transform: translateY(0);
}


/* Лёгкий эффект фото только при наведении */

.team__card:hover .team__card-image {
    transform: scale(1.02);
}
@media (max-width: 767px) {
    .cosmetics-team {
        padding: 0;

        background: #121212;
    }
}

/* =========================================================
   Cosmetics / tablet
   ========================================================= */

@media (max-width: 1279px) and (min-width: 992px) {

    .cosmetics {
        width: calc(100% - 48px);
    }

    .cosmetics__media {
        gap: 16px;
    }
}


@media (max-width: 991px) and (min-width: 768px) {

    .cosmetics {
        width: calc(100% - 48px);
    }

    .cosmetics__media {
        flex-direction: column;
        align-items: center;

        width: 100%;

        gap: 24px;

        aspect-ratio: auto;
    }

    .cosmetics__gallery {
        flex: none;

        width: 100%;
        height: min(560px, 68vw);

        overflow: hidden;
    }

    .cosmetics__instagram {
        flex: none;

        width: min(330px, 100%);
        height: auto;
    }

    .cosmetics__instagram img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }
}
@media (max-width: 767px) {

    .cosmetics-team {
        padding: 0;

        background: #121212;
    }

    .cosmetics {
        width: 100%;
        max-width: 360px;

        padding: 40px 16px 32px;

        gap: 32px;
    }

    .cosmetics__heading {
        gap: 24px;
    }

    .cosmetics__heading-text {
        gap: 12px;
    }

    .cosmetics__subtitle {
        font-size: 16px;
    }

    .cosmetics__title {
        width: 100%;

        font-size: 27px;
        line-height: 1.22;
    }

    .cosmetics__text {
        width: 100%;
        max-width: none;

        margin-top: -8px;

        font-size: 14px;
        font-weight: 400;
        line-height: 1.41;

        color: #fff;
    }


    /* Actions */

    .cosmetics__actions {
        width: 100%;

        gap: 8px;
    }

    .cosmetics__button {
        height: 44px;

        padding: 10px 12px;

        font-size: 14px;
    }

    .cosmetics__button--price {
        flex: 0 0 35%;
        width: auto;
    }

    .cosmetics__button--instagram {
        flex: 1;
        width: auto;
        min-width: 0;
    }


    /* Media */

    .cosmetics__media {
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        min-width: 0;

        gap: 32px;

        aspect-ratio: auto;
    }


    /* Slider */

    .cosmetics__gallery {
        flex: none;

        width: 100%;
        height: auto;

        aspect-ratio: 328 / 229;

        overflow: hidden;
    }

    .cosmetics__track {
        display: flex;

        width: 100%;
        height: 100%;

        transition: transform 0.35s ease;
        will-change: transform;
    }

    .cosmetics__slide,
    .cosmetics__slide:not(:first-child) {
        display: block;

        flex: 0 0 100%;

        width: 100%;
        min-width: 100%;
        height: 100%;
    }

    .cosmetics__slide img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* Pagination */

    .cosmetics__pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        margin-top: 10px;

        gap: 6px;
    }

    .cosmetics__pagination button {
        flex: 0 0 7px;

        width: 7px;
        height: 7px;

        padding: 0;

        border-radius: 50%;

        background: #343434;
    }

    .cosmetics__pagination button.is-active {
        background: #f25d1a;
    }


    /* Instagram */

    .cosmetics__instagram {
        flex: none;

        width: 100%;
        height: auto;
    }

    .cosmetics__instagram img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
    }
}
@media (max-width: 767px) {
    .team {
        max-width: none;

        margin-top: 0;
        padding: 48px 16px;

        gap: 32px;
    }

    .team__heading {
        gap: 12px;
    }

    .team__subtitle {
        font-size: 16px;
    }

    .team__title {
        max-width: 328px;

        font-size: 27px;
        line-height: 1.22;
    }

    .team__cards,
    .team__cards:hover {
        width: 100%;
        height: 302px;

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        scroll-snap-type: x proximity;
    }

    .team__cards::-webkit-scrollbar {
        display: none;
    }

   .team__card,
.team__card.is-active {
    flex: 0 0 188px;

    width: 188px;
    height: 302px;

    scroll-snap-align: start;
}

    .team__card-image,
    .team__card:hover .team__card-image {
        transform: none;
    }

   .team__card-info,
.team__card.is-active .team__card-info {
    right: 20px;
    bottom: 20px;
    left: 20px;

    display: block;

    opacity: 1;

    transform: none;
}

    .team__brand {
        display: none;
    }

    .team__name {
        margin-top: 8px;

        font-size: 12px;

        text-transform: none;
    }

    .team__position {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;

        color: #f25d1a;
    }
}




.team__cards:hover .team__card {
    flex-basis: 240px;
}

.team__cards:hover .team__card:hover {
    flex-basis: 440px;
}

.team__cards:hover .team__card:hover .team__card-info {
    opacity: 1;
    transform: translateY(0);
}

/* Price Hero */

.price-hero {
    max-width:1920px;
    margin: 0 auto;
    position: relative;

    width: 100%;
    height: 675px;

    color: #000;

    background-image: var(--price-hero-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.price-hero__container {
    width: 100%;
    max-width: 1232px;
    height: 100%;

    margin: 0 auto;
    padding-top: 50px;
}

.price-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;
}

.price-hero__title {
    margin: 0;

    font-size: 60px;
    font-weight: 500;
    line-height: 1.22;

    color: #000;
    text-transform: uppercase;
}

.price-hero__text {
    max-width: 512px;

    font-size: 20px;
    font-weight: 400;
    line-height: 1.41;

    color: #000;
}

.price-hero__text p {
    margin: 0;
}


/* Tablet */

@media (max-width: 1279px) {
    .price-hero__container {
        padding-right: 24px;
        padding-left: 24px;
    }
}


/* Mobile */

@media (max-width: 767px) {
    .price-hero {
        height: 235px;

        background-image: var(--price-hero-image-mobile);
        background-position: center;
        background-size: cover;
    }


    .price-hero__container {
        padding: 25px 18px 0;
    }

    .price-hero__heading {
        width: 100%;

        gap: 16px;
    }

    .price-hero__title {
        font-size: 27px;
        line-height: 1.22;
    }

    .price-hero__text {
        max-width: 324px;

        font-size: 16px;
        line-height: 1.41;
    }
}
/* =========================================================
   PRICE CATALOG
   ========================================================= */

.price-catalog {
    width: 100%;

    padding: 32px 0 60px;

    background: #fff;
    color: #121212;
}

.price-catalog__container {
    display: flex;
    align-items: flex-start;

    width: 100%;
    max-width: 1234px;

    margin: 0 auto;

    gap: 63px;
}


/* =========================================================
   LEFT MENU
   ========================================================= */

.price-catalog__aside {
    position: sticky;
    top: 100px;

    display: flex;
    flex: 0 0 283px;
    flex-direction: column;

    width: 283px;

    gap: 32px;
}

.price-catalog__aside-title {
    margin: 0;

    padding: 10px 0;

    font-size: 40px;
    font-weight: 500;
    line-height: 1.41;

    color: #121212;
    text-transform: uppercase;
}

.price-catalog__aside-lists {
    width: 100%;
}

.price-catalog__aside-list {
    display: none;
    flex-direction: column;

    gap: 14px;
}

.price-catalog__aside-list.is-active {
    display: flex;
}

.price-catalog__aside-item {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 8px 0;

    gap: 16px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.22;

    color: #121212;

    text-align: left;
    text-transform: uppercase;

    transition: color 0.2s ease;
}

.price-catalog__aside-item:hover,
.price-catalog__aside-item:focus-visible,
.price-catalog__aside-item.is-active {
    color: #f25d1a;
}

.price-catalog__aside-item.is-active {
    font-weight: 500;
}

.price-catalog__aside-arrow {
    display: none;

    width: 9px;
    height: 9px;

    margin-left: auto;

    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;

    transform: rotate(45deg);
}

.price-catalog__aside-item.is-active .price-catalog__aside-arrow {
    display: block;
}


/* booking */

.price-catalog__booking {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 283px;
    height: 50px;

    padding: 10px 20px;

    font-size: 16px;
    font-weight: 500;

    color: #fff;
    background: #d44f1b;

    transition: background-color 0.2s ease;
}

.price-catalog__booking:hover,
.price-catalog__booking:focus-visible {
    background: #f25d1a;
}

.price-catalog__booking--mobile {
    display: none;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.price-catalog__divider {
    flex: 0 0 1px;

    width: 1px;
    min-height: 694px;

    background: rgba(0, 0, 0, 0.1);
}


/* =========================================================
   RIGHT
   ========================================================= */

.price-catalog__content {
    display: flex;
    flex: 0 0 824px;
    flex-direction: column;

    width: 824px;

    gap: 32px;
}


/* Gender tabs */

.price-catalog__gender-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
    height: 70px;

    gap: 42px;
}

.price-catalog__gender-tab {
    padding: 10px 0;

    font-size: 40px;
    font-weight: 400;
    line-height: 1.22;

    color: #000;

    text-align: center;
    text-transform: uppercase;

    transition: color 0.2s ease;
}

.price-catalog__gender-tab:hover,
.price-catalog__gender-tab:focus-visible,
.price-catalog__gender-tab.is-active {
    color: #f25d1a;
}

.price-catalog__gender-tab.is-active {
    font-weight: 500;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.price-catalog__category {
    display: none;
}

.price-catalog__category.is-active {
    display: block;
}

/*
 * На desktop название категории уже есть слева,
 * поэтому accordion-header здесь скрываем.
 */
.price-catalog__category-toggle {
    display: none;
}

.price-catalog__category-body {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 0;
}


/* =========================================================
   ITEM
   ========================================================= */

.price-catalog__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;

    padding: 16px 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.price-catalog__item:first-child {
    padding-top: 0;
}

.price-catalog__service {
    display: flex;
    flex: 0 0 618px;
    flex-direction: column;

    width: 618px;
}

.price-catalog__service-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.41;

    color: #121212;
    opacity:0.8;
}

.price-catalog__note {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.41;

    color: rgba(0, 0, 0, 0.5);

    white-space: pre-line;
}

.price-catalog__price {
    flex: 0 0 187px;

    width: 187px;

    font-size: 24px;
    font-weight: 500;
    line-height: 1.41;

    color: #f25d1a;

    text-align: right;
  
}


/* Вложенный заголовок группы */

.price-catalog__group-title {
    padding: 22px 0 10px;

    font-size: 20px;
    font-weight: 600;

    color: #121212;

    text-transform: uppercase;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1279px) {

    .price-catalog {
        padding-right: 24px;
        padding-left: 24px;
    }

    .price-catalog__container {
        gap: 32px;
    }

    .price-catalog__aside {
        flex-basis: 240px;

        width: 240px;
    }

    .price-catalog__booking {
        width: 240px;
    }

    .price-catalog__content {
        flex: 1;

        width: auto;
        min-width: 0;
    }

    .price-catalog__service {
        flex: 1;

        width: auto;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .price-catalog {
        padding: 16px 16px 48px;
    }

    .price-catalog__container {
        display: block;

    }


    /* desktop sidebar off */

    .price-catalog__aside,
    .price-catalog__divider {
        display: none;
    }


    /* content */

    .price-catalog__content {
        width: 100%;

        gap: 16px;
    }


    /* gender */

    .price-catalog__gender-tabs {
        justify-content: center;

        width: 100%;
        height: 40px;

        gap: 42px;
    }

    .price-catalog__gender-tab {
        padding: 10px 0;

        font-size: 16px;
        line-height: 1.25;

        white-space: nowrap;
    }


    /* Categories */

    .price-catalog__categories {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 16px;
    }

    /*
     * На mobile показываем ВСЕ категории
     * выбранного пола.
     */
    .price-catalog__category {
        display: none;

        width: 100%;
    }

    .price-catalog__category.is-gender-visible {
        display: block;
    }


    /* accordion button */

    .price-catalog__category-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 42px;

        padding: 8px 0;

        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;

        color: #121212;

        text-align: left;
        text-transform: uppercase;
    }

    .price-catalog__category.is-open
    .price-catalog__category-toggle {
        color: #f25d1a;
    }


    /* Arrow */

    .price-catalog__category-arrow {
        width: 12px;
        height: 12px;

        margin-right: 5px;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform: rotate(45deg);

        transition: transform 0.25s ease;
    }

    .price-catalog__category.is-open
    .price-catalog__category-arrow {
        transform: rotate(225deg);
    }


    /* body */

    .price-catalog__category-body {
        display: none;

        padding-top: 8px;
    }

    .price-catalog__category.is-open
    .price-catalog__category-body {
        display: flex;
    }


    /* item */

    .price-catalog__item {
        gap: 14px;

        padding: 10px 0;
    }

    .price-catalog__item:first-child {
        padding-top: 0;
    }

    .price-catalog__service {
        flex: 0 0 217px;

        width: 217px;
    }

    .price-catalog__service-title {
        font-size: 16px;
        line-height: 1.41;
    }

    .price-catalog__note {
        margin-top: 2px;

        font-size: 12px;
        line-height: 1.41;
    }

    .price-catalog__price {
        flex: 1;

        width: auto;
        min-width: 0;

        font-size: 16px;
        line-height: 1.41;
    }


    .price-catalog__group-title {
        padding: 14px 0 6px;

        font-size: 14px;
    }


    /* booking bottom */

    .price-catalog__booking--mobile {
        display: flex;

        width: 100%;
        height: 50px;

        margin-top: 16px;

        font-size: 16px;
    }
}
.footer--price .footer__decor {
    display: none;
}

.footer__dev {
    display: flex;
    flex: 0 0 auto;
    align-items: center;

    gap: 12px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;

    color: rgba(255, 255, 255, 0.25);

    transition: color 0.2s ease;
}

.footer__dev::after {
    content: "";

    display: block;

    width: 103px;
    height: 27px;

    background-image: url("/assets/images/nbd.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    filter: grayscale(1) brightness(0) invert(1);

    opacity: 0.25;

    transition:
        filter 0.2s ease,
        opacity 0.2s ease;
}
.footer--price .footer__dev::after {
   
    background-image: url("/assets/images/nbd-black.svg");
}

.footer__dev:hover,
.footer__dev:focus-visible {
    color: rgba(255, 255, 255, 0.7);
}

.footer__dev:hover::after,
.footer__dev:focus-visible::after {
    filter: none;
    opacity: 1;
}
.footer--price .footer__dev {
    color: rgba(0, 0, 0, 0.35);
}

.footer--price .footer__dev::after {
    filter: grayscale(1) brightness(0);
    opacity: 0.35;
}

.footer--price .footer__dev:hover,
.footer--price .footer__dev:focus-visible {
    color: #121212;
}

.footer--price .footer__dev:hover::after,
.footer--price .footer__dev:focus-visible::after {
    filter: none;
    opacity: 1;
}
@media (max-width: 767px) {
    .footer__dev {
    justify-content: center;

    margin-top: 12px;
}

.footer__dev::after {
    width: 90px;
    height: 24px;
}

}

/* =========================================================
   FINAL RESPONSIVE OVERRIDE
   COSMETICS + TEAM
   ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css
   ========================================================= */


/* =========================================================
   COMMON
   ========================================================= */

.cosmetics,
.team {
    min-width: 0;
}

.cosmetics__media,
.team__cards {
    max-width: 100%;
    min-width: 0;
}


/* =========================================================
   COSMETICS
   DESKTOP 1280+
   ========================================================= */

.cosmetics__media {
    display: flex;
    align-items: stretch;

    width: 100%;
    min-width: 0;

    gap: 20px;

    /*
     * Исходная пропорция блока из макета:
     * 1232 × 644
     */
    aspect-ratio: 1232 / 644;
}


/* Gallery */

.cosmetics__gallery {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    height: 100%;

    overflow: hidden;
}

.cosmetics__track {
    width: 100%;
    height: 100%;
}

.cosmetics__slide {
    width: 100%;
    height: 100%;
}

.cosmetics__slide:not(:first-child) {
    display: none;
}

.cosmetics__slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Pagination only mobile */

.cosmetics__pagination {
    display: none;
}


/* Instagram */

.cosmetics__instagram {
    display: block;

    flex: 0 0 26.785714%;

    width: 26.785714%;
    min-width: 0;
    height: 100%;

    overflow: hidden;
}

.cosmetics__instagram img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: opacity 0.25s ease;
}

.cosmetics__instagram:hover img,
.cosmetics__instagram:focus-visible img {
    opacity: 0.9;
}


/* =========================================================
   TEAM
   DESKTOP
   ========================================================= */

.team__cards {
    display: flex;

    width: 100%;
    height: 679px;

    gap: 24px;

    overflow: hidden;
}


/*
 * Вместо жестких 240 / 440 используем пропорции.
 *
 * При 1232px получается практически ровно:
 * обычная = 240px
 * активная = 440px
 */
.team__card {
    position: relative;

    flex: 6 1 0 !important;

    width: auto;
    min-width: 0;
    height: 100%;

    overflow: hidden;

    transition:
        flex-grow 0.45s ease,
        flex-basis 0.45s ease;
}

.team__card.is-active,
.team__cards:hover .team__card.is-active,
.team__cards:hover .team__card:hover {
    flex: 11 1 0 !important;
}


/* Image */

.team__card-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.team__card:hover .team__card-image {
    transform: scale(1.02);
}


/* Overlay */

.team__card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0) 38%
        );
}


/* Info */

.team__card-info {
    position: absolute;
    z-index: 2;

    right: 30px;
    bottom: 36px;
    left: 30px;

    display: flex;
    align-items: flex-end;

    gap: 4px;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.25s ease 0.12s,
        transform 0.25s ease 0.12s;
}

.team__card.is-active .team__card-info,
.team__cards:hover .team__card:hover .team__card-info {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   LAPTOP
   992 - 1279
   ========================================================= */

@media (max-width: 1279px) and (min-width: 992px) {

    /* Cosmetics */

    .cosmetics,
    .team {
        width: calc(100% - 48px);
    }

    .cosmetics__media {
        gap: 16px;
    }


    /* Team */

    .team__cards {
        height: clamp(520px, 53vw, 679px);

        gap: 18px;
    }

    .team__card-info {
        right: 20px;
        bottom: 28px;
        left: 20px;
    }

    .team__name {
        font-size: 16px;
    }

    .team__position {
        font-size: clamp(21px, 2.25vw, 29px);
    }

    .team__brand {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
   768 - 991
   ========================================================= */

@media (max-width: 991px) and (min-width: 768px) {

    /* =========================
       Cosmetics
       ========================= */

    .cosmetics {
        width: calc(100% - 48px);
    }

    .cosmetics__media {
        flex-direction: column;
        align-items: center;

        width: 100%;

        gap: 24px;

        aspect-ratio: auto;
    }

    .cosmetics__gallery {
        flex: none;

        width: 100%;
        height: auto;

        aspect-ratio: 882 / 643;

        overflow: hidden;
    }

    .cosmetics__track,
    .cosmetics__slide {
        width: 100%;
        height: 100%;
    }

    .cosmetics__instagram {
        flex: none;

        width: min(330px, 100%);
        height: auto;
    }

    .cosmetics__instagram img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* =========================
       Team
       ========================= */

    .team {
        width: calc(100% - 48px);

        margin-top: 56px;

        gap: 40px;
    }

    .team__cards,
    .team__cards:hover {
        width: 100%;
        height: auto;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;
    }

    .team__cards::-webkit-scrollbar {
        display: none;
    }

    .team__card,
    .team__card.is-active,
    .team__cards:hover .team__card,
    .team__cards:hover .team__card:hover,
    .team__cards:hover .team__card.is-active {
        flex: 0 0 clamp(220px, 28vw, 250px) !important;

        width: clamp(220px, 28vw, 250px);
        min-width: clamp(220px, 28vw, 250px);
        height: auto;

        aspect-ratio: 188 / 302;

        scroll-snap-align: start;
    }

    .team__card-image,
    .team__card:hover .team__card-image {
        transform: none;
    }

    .team__card-info,
    .team__card.is-active .team__card-info,
    .team__cards:hover .team__card .team__card-info,
    .team__cards:hover .team__card:hover .team__card-info {
        right: 20px;
        bottom: 20px;
        left: 20px;

        display: block;

        opacity: 1 !important;

        transform: none !important;
    }

    .team__brand {
        display: none;
    }

    .team__name {
        margin-top: 8px;

        font-size: 13px;

        text-transform: none;
    }

    .team__position {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.25;

        color: #f25d1a;
    }
}


/* =========================================================
   MOBILE
   320 - 767
   ========================================================= */

@media (max-width: 767px) {

    /* =========================
       Wrapper
       ========================= */

    .cosmetics-team {
        padding: 0;

        background: #121212;
    }


    /* =====================================================
       COSMETICS MOBILE
       ===================================================== */

    .cosmetics {
        width: 100%;
        max-width: 360px;

        margin-right: auto;
        margin-left: auto;

        padding: 40px 16px 32px;

        gap: 32px;
    }


    /* Heading */

    .cosmetics__heading {
        width: 100%;

        gap: 24px;
    }

    .cosmetics__heading-text {
        width: 100%;

        gap: 12px;
    }

    .cosmetics__subtitle {
        font-size: 16px;
        line-height: 1.25;
    }

    .cosmetics__title {
        width: 100%;
        max-width: 100%;

        font-size: 27px;
        line-height: 1.22;
    }

    .cosmetics__text {
        width: 100%;
        max-width: none;

        margin-top: -8px;

        font-size: 14px;
        font-weight: 400;
        line-height: 1.41;

        color: #fff;
    }


    /* Buttons */

    .cosmetics__actions {
        width: 100%;

        gap: 8px;
    }

    .cosmetics__button {
        min-width: 0;
        height: 44px;

        padding: 10px 12px;

        font-size: 14px;
        line-height: 1.2;
    }

    .cosmetics__button--price {
        flex: 0 0 35%;

        width: auto;
    }

    .cosmetics__button--instagram {
        flex: 1;

        width: auto;
        min-width: 0;
    }


    /* =========================
       Media
       ========================= */

    .cosmetics__media {
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        gap: 32px;

        aspect-ratio: auto;
    }


    /* Gallery */

    .cosmetics__gallery {
        flex: none;

        width: 100%;
        max-width: 100%;
        height: auto;

        aspect-ratio: 328 / 229;

        overflow: hidden;
    }

    .cosmetics__track {
        display: flex;

        width: 100%;
        height: 100%;

        transition: transform 0.35s ease;

        will-change: transform;
    }

    .cosmetics__slide,
    .cosmetics__slide:not(:first-child) {
        display: block;

        flex: 0 0 100%;

        width: 100%;
        min-width: 100%;
        height: 100%;
    }

    .cosmetics__slide img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* Pagination */

    .cosmetics__pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        margin-top: 10px;

        gap: 6px;
    }

    .cosmetics__pagination button {
        flex: 0 0 7px;

        width: 7px;
        height: 7px;

        padding: 0;

        border-radius: 50%;

        background: #343434;
    }

    .cosmetics__pagination button.is-active {
        background: #f25d1a;
    }


    /* Instagram */

    .cosmetics__instagram {
        flex: none;

        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .cosmetics__instagram img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* =====================================================
       TEAM MOBILE
       ===================================================== */

    .team {
        width: 100%;
        max-width: none;

        margin-top: 0;

        padding: 48px 16px;

        gap: 32px;
    }


    /* Heading */

    .team__heading {
        width: 100%;

        gap: 12px;
    }

    .team__subtitle {
        font-size: 16px;
        line-height: 1.25;
    }

    .team__title {
        width: 100%;
        max-width: 328px;

        margin-right: auto;
        margin-left: auto;

        font-size: 27px;
        line-height: 1.22;
    }


    /* Cards */

    .team__cards,
    .team__cards:hover {
        width: 100%;
        max-width: 100%;
        height: auto;

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;
    }

    .team__cards::-webkit-scrollbar {
        display: none;
    }


    /*
     * 320px:
     * viewport 320
     * padding 16 + 16
     * рабочая зона 288px
     *
     * карточка будет 168px,
     * поэтому следующая карточка будет частично видна.
     *
     * 360px+ карточка доходит до макетных 188px.
     */
    .team__card,
    .team__card.is-active,
    .team__cards:hover .team__card,
    .team__cards:hover .team__card:hover,
    .team__cards:hover .team__card.is-active {
        flex: 0 0 clamp(168px, 52vw, 188px) !important;

        width: clamp(168px, 52vw, 188px);
        min-width: clamp(168px, 52vw, 188px);
        height: auto;

        aspect-ratio: 188 / 302;

        scroll-snap-align: start;
    }


    /* Image */

    .team__card-image,
    .team__card:hover .team__card-image {
        transform: none;
    }


    /* Info всегда видно */

    .team__card-info,
    .team__card.is-active .team__card-info,
    .team__cards:hover .team__card .team__card-info,
    .team__cards:hover .team__card:hover .team__card-info,
    .team__cards:hover .team__card.is-active .team__card-info {
        right: 16px;
        bottom: 16px;
        left: 16px;

        display: block;

        opacity: 1 !important;

        transform: none !important;
    }

    .team__brand {
        display: none;
    }

    .team__employee {
        display: block;
    }

    .team__name {
        margin-top: 8px;

        font-size: 12px;
        line-height: 1.25;

        text-transform: none;
    }

    .team__position {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;

        color: #f25d1a;
    }
}


/* =========================================================
   SMALL MOBILE
   320 - 359
   ========================================================= */

@media (max-width: 359px) {

    /*
     * На 320px две длинные кнопки уже не помещаются
     * нормально в одну строку — делаем вертикально.
     */

    .cosmetics__actions {
        flex-direction: column;

        gap: 8px;
    }

    .cosmetics__button--price,
    .cosmetics__button--instagram {
        flex: none;

        width: 100%;
    }

    .cosmetics__title,
    .team__title {
        font-size: 25px;
    }

    .cosmetics__media {
        gap: 24px;
    }

    .team {
        padding-right: 16px;
        padding-left: 16px;
    }
}
/* =========================================================
   FINAL FIX
   COSMETICS MEDIA + INSTAGRAM EMBED
   ВСТАВИТЬ В САМЫЙ КОНЕЦ style.css
   ========================================================= */


/* =========================================================
   DESKTOP + TABLET
   768px+
   ========================================================= */

@media (min-width: 768px) {

    .cosmetics__media {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 1232px !important;
        min-width: 0 !important;

        margin: 0 auto;

        /*
         * 1232 × 644 по макету.
         * При уменьшении экрана высота автоматически
         * уменьшается пропорционально.
         */
        aspect-ratio: 1232 / 644 !important;

        gap: clamp(12px, 1.62vw, 20px) !important;
    }


    /* =====================================================
       LEFT — GALLERY

       Соотношение:
       gallery 882
       instagram 330
       всего без gap = 1212
       ===================================================== */

    .cosmetics__gallery {
        flex: 882 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        height: 100% !important;

        aspect-ratio: auto !important;

        overflow: hidden !important;
    }

    .cosmetics__track,
    .cosmetics__slide {
        width: 100% !important;
        height: 100% !important;
    }

    .cosmetics__slide img {
        display: block;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover;
    }


    /* =====================================================
       RIGHT — INSTAGRAM

       На 1232px:
       width = 330px
       height = 644px

       Ниже уменьшается вместе со всей секцией.
       ===================================================== */

    .cosmetics__instagram {
        display: block !important;

        flex: 330 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;

        overflow: hidden !important;
    }


    /*
     * Если Instagram сейчас сделан картинкой
     */

    .cosmetics__instagram > img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /*
     * Если Instagram — настоящий embed.
     *
     * ВАЖНО:
     * Instagram сам добавляет min-width, max-width,
     * margin и высоту inline-стилями.
     * Поэтому здесь нужны !important.
     */

    .cosmetics__instagram blockquote.instagram-media {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;

        margin: 0 !important;
    }

    .cosmetics__instagram iframe,
    .cosmetics__instagram iframe.instagram-media,
    .cosmetics__instagram .instagram-media-rendered {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        overflow: hidden !important;
    }
}


/* =========================================================
   MOBILE
   < 768px
   ========================================================= */

@media (max-width: 767px) {

    .cosmetics__media {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        aspect-ratio: auto !important;

        gap: 32px !important;
    }


    /* =====================================================
       GALLERY MOBILE
       ===================================================== */

    .cosmetics__gallery {
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        aspect-ratio: 328 / 229 !important;

        overflow: hidden !important;
    }

    .cosmetics__track {
        width: 100% !important;
        height: 100% !important;
    }

    .cosmetics__slide {
        height: 100% !important;
    }


    /* =====================================================
       INSTAGRAM MOBILE

       Ровно той же ширины, что gallery.
       ===================================================== */

    .cosmetics__instagram {
        display: block !important;

        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: hidden !important;
    }


    /*
     * Если картинка
     */

    .cosmetics__instagram > img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }


    /*
     * Instagram embed
     */

    .cosmetics__instagram blockquote.instagram-media {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    .cosmetics__instagram iframe,
    .cosmetics__instagram iframe.instagram-media,
    .cosmetics__instagram .instagram-media-rendered {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        border: 0 !important;
    }
}
/* =========================================================
   Instagram embed final fix
   ========================================================= */

.cosmetics__instagram {
    min-width: 0 !important;
    overflow: hidden !important;
}
.instagram-media.instagram-media-rendered{
    margin:0px !important;
    height:100%;
}
.cosmetics__instagram .instagram-media,
.cosmetics__instagram .instagram-media-rendered,
.cosmetics__instagram iframe {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}
@media (min-width: 768px) {

    .cosmetics__instagram {
        flex: 0 1 330px !important;

        width: 330px !important;
        max-width: 330px !important;
        min-width: 0 !important;

        height: 644px !important;
    }

    .cosmetics__instagram .instagram-media,
    .cosmetics__instagram .instagram-media-rendered,
    .cosmetics__instagram iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 100% !important;
        max-height: 100% !important;

        margin: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1231px) {
.instagram-media.instagram-media-rendered{
    margin:0px !important;
    height:auto;
}
    .cosmetics__instagram {
        flex: 330 1 0 !important;

        width: auto !important;
        max-width: none !important;

        height: 100% !important;
    }
}
@media (max-width: 767px) {
.instagram-media.instagram-media-rendered{
    margin:0px !important;
            height: revert-layer !important;
}
    .cosmetics__instagram {
        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
    }

    .cosmetics__instagram .instagram-media,
    .cosmetics__instagram .instagram-media-rendered,
    .cosmetics__instagram iframe {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
    }
}