@font-face {
    font-family: "TT Ricordi Allegria";
    src: url(/fonts/TT-Ricordi-Allegria-Trial.woff2) format("woff2"),
         url(/fonts/TT-Ricordi-Allegria-Trial.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Century Gothic Paneuropean";
    src: url(/fonts/Century-Gothic-Paneuropean.woff2) format("woff2"),
         url(/fonts/Century-Gothic-Paneuropean.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ===== ОБЩИЕ СТИЛИ ===== */

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


body {
    background-color: #353432;
    color: #f3eee6;
    font-family: "Century Gothic Paneuropean", Arial, sans-serif;
     width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

.container {
    width: min(100% - 80px, 1720px);
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 1440px) {
    .container {
        width: min(100% - 64px, 1720px);
    }
}

@media (max-width: 1024px) {
    .container {
        width: min(100% - 48px, 1720px);
    }
}

@media (max-width: 767px) {
    .container {
        width: min(100% - 32px, 1720px);
    }
}

button {
    font: inherit;
}

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


/* =========================================
   CONTACTS HERO
========================================= */

.contacts-hero {
    padding-top: 8px;
    margin-bottom: 50px;
}

.contacts-hero__box {
    position: relative;
    min-height: 615px;

    /*
     * Верхняя и боковые границы рисуются обычным border.
     * Нижнюю границу рисуем отдельно через ::before,
     * чтобы плашка могла перекрыть её через z-index.
     */
    border-top: 1px solid rgba(243, 238, 230, 0.28);
    border-left: 1px solid rgba(243, 238, 230, 0.28);
    border-right: 1px solid rgba(243, 238, 230, 0.28);

    border-radius: 14px;

    /*
     * ВАЖНО:
     * не ставим overflow: hidden,
     * иначе плашка и перекрытие нижней линии
     * могут обрезаться.
     */
    overflow: visible;
}


/* =========================================
   НИЖНЯЯ ЛИНИЯ РАМКИ
========================================= */

.contacts-hero__box::before {
    content: "";

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

    height: 1px;

    background: rgba(243, 238, 230, 0.28);

    /*
     * Линия выше изображения,
     * но ниже плашки.
     */
    z-index: 2;

    pointer-events: none;
}


/* =========================================
   CONTENT
========================================= */

.contacts-hero__content {
    position: relative;
    z-index: 3;

    width: 52%;

    padding:
        clamp(46px, 4.5vw, 78px)
        20px
        50px
        clamp(34px, 2.5vw, 48px);
}


.contacts-hero__title {
    margin: 0;

    font-family: "TT Ricordi Allegria", serif;
    font-size: clamp(42px, 3.3vw, 62px);
    font-weight: 400;
    line-height: 1.05;

    color: #f3eee6;
}


/* =========================================
   CONTACTS
========================================= */

.contacts-hero__contacts {
    display: flex;
    flex-direction: column;
    gap: 24px;

    margin-top: 38px;
}


.contacts-hero__contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.contacts-hero__label {
    font-size: 16px;
    line-height: 1.3;

    color: rgba(243, 238, 230, 0.75);
}


.contacts-hero__link {
    width: fit-content;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;

    color: #f3eee6;

    transition: opacity 0.2s ease;
}


.contacts-hero__link:hover {
    opacity: 0.7;
}


/* =========================================
   DESCRIPTION
========================================= */

.contacts-hero__description {
    display: flex;
    flex-direction: column;
    gap: 28px;

    margin-top: clamp(60px, 7vw, 105px);

    max-width: 720px;

    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.45;

    color: rgba(243, 238, 230, 0.82);
}


/* =========================================
   IMAGE
========================================= */

.contacts-hero__media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 1px;

    width: 55%;

    /*
     * Так как у box теперь overflow: visible,
     * изображение ограничиваем отдельно.
     */
    overflow: hidden;

    border-radius: 0 14px 14px 0;

    z-index: 1;
}


.contacts-hero__media picture {
    display: block;

    width: 100%;
    height: 100%;
}


.contacts-hero__image {
    display: block;

    width: 100%;
    height: 100%;

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

    pointer-events: none;
}


/* =========================================
   НИЖНЯЯ ПЛАШКА
========================================= */

.contacts-hero__quote {
    position: absolute;

    right: clamp(45px, 6vw, 105px);

    /*
     * Чуть опускаем плашку относительно
     * нижней линии.
     */
    bottom: -1px;

    width: min(36vw, 570px);
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px 32px 5px;

    background: #353432;

    border: 1px solid rgba(243, 238, 230, 0.28);
    border-bottom: none;

    border-radius: 30px 30px 0 0;

    /*
     * Главное:
     * плашка выше нижней линии box.
     */
    z-index: 5;
}


/*
 * Дополнительная маска под плашкой.
 * Она гарантированно перекрывает
 * нижнюю линию родителя.
 */
.contacts-hero__quote::before {
    content: "";

    position: absolute;

    left: 1px;
    right: 1px;
    bottom: -3px;

    height: 5px;

    background: #353432;

    z-index: 1;

    pointer-events: none;
}


.contacts-hero__quote p {
    position: relative;
    z-index: 2;

    margin: 0;

    text-align: center;

    font-family: "TT Ricordi Allegria", serif;
    font-size: clamp(22px, 1.7vw, 30px);
    line-height: 1.05;
    text-transform: uppercase;

    color: #f3eee6;
}


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

@media (max-width: 1100px) {

    .contacts-hero__box {
        min-height: 560px;
    }


    .contacts-hero__content {
        width: 55%;

        padding-left: 32px;
    }


    .contacts-hero__media {
        width: 52%;
    }


    .contacts-hero__description {
        margin-top: 55px;

        font-size: 16px;
    }


    .contacts-hero__quote {
        right: 30px;

        width: 42%;
    }
}


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

@media (max-width: 767px) {

    .contacts-hero {
        padding-top: 6px;
    }


    .contacts-hero__box {
        display: flex;
        flex-direction: column;

        min-height: 0;

        border-radius: 10px;

        /*
         * Оставляем visible,
         * чтобы плашка не обрезалась.
         */
        overflow: visible;
    }


    /* CONTENT */

    .contacts-hero__content {
        width: 100%;

        padding: 30px 20px 0;
    }


    .contacts-hero__title {
        font-size: clamp(36px, 11vw, 46px);
        line-height: 1.05;
    }


    /* CONTACTS */

    .contacts-hero__contacts {
        margin-top: 30px;

        gap: 20px;
    }


    .contacts-hero__label {
        font-size: 14px;
    }


    .contacts-hero__link {
        font-size: 16px;
    }


    /* IMAGE */

    .contacts-hero__media {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: calc(100% + 40px);
        height: auto;

        margin:
            30px
            -20px
            0;

        overflow: hidden;

        border-radius: 0;

        z-index: 1;
    }


    .contacts-hero__media picture {
        height: auto;
    }


    .contacts-hero__image {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* DESCRIPTION */

    .contacts-hero__description {
        gap: 20px;

        margin-top: 30px;

        /*
         * Оставляем место для нижней плашки.
         */
        padding-bottom: 115px;

        font-size: 15px;
        line-height: 1.45;
    }


    .contacts-hero__desktop-br {
        display: none;
    }


    /* QUOTE */

    .contacts-hero__quote {
        left: 14px;
        right: 14px;
        bottom: -1px;

        width: auto;
        min-height: 75px;

        padding: 12px 20px 4px;

        border-radius: 24px 24px 0 0;

        z-index: 5;
    }


    .contacts-hero__quote p {
        font-size: clamp(19px, 6vw, 24px);
        line-height: 1.08;
    }
}





@media (max-width: 1100px) {

    .contacts-hero__box {
        min-height: 560px;
    }

    .contacts-hero__content {
        width: 55%;
        padding-left: 32px;
    }

    .contacts-hero__media {
        width: 52%;
    }

    .contacts-hero__description {
        margin-top: 55px;
        font-size: 16px;
    }

    .contacts-hero__quote {
        right: 30px;
        width: 42%;
    }
}



@media (max-width: 767px) {

    .contacts-hero {
        padding-top: 6px;
    }

    .contacts-hero__box {
        display: flex;
        flex-direction: column;

        min-height: 0;

        overflow: hidden;

        border-radius: 10px;
    }


    /* CONTENT */

    .contacts-hero__content {
        width: 100%;

        padding: 30px 20px 0;
    }


    .contacts-hero__title {
        font-size: clamp(36px, 11vw, 46px);
        line-height: 1.05;
    }


    /* CONTACTS */

    .contacts-hero__contacts {
        margin-top: 30px;
        gap: 20px;
    }

    .contacts-hero__label {
        font-size: 14px;
    }

    .contacts-hero__link {
        font-size: 16px;
    }


    /* IMAGE */

    .contacts-hero__media {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: calc(100% + 40px);
        height: auto;

        margin:
            30px
            -20px
            0;

        order: initial;
    }

    .contacts-hero__media picture {
        height: auto;
    }

    .contacts-hero__image {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* TEXT */

    .contacts-hero__description {
        gap: 20px;

        margin-top: 30px;
        padding-bottom: 115px;

        font-size: 15px;
        line-height: 1.45;
    }

    .contacts-hero__desktop-br {
        display: none;
    }


    /* QUOTE */

    .contacts-hero__quote {
        right: 14px;
        left: 14px;
        bottom: -1px;

        width: auto;
        min-height: 75px;

        padding: 12px 20px 4px;

        border-radius: 24px 24px 0 0;
    }

    .contacts-hero__quote p {
        font-size: clamp(19px, 6vw, 24px);
        line-height: 1.08;
    }
}