/* Start:/local/templates/arhio_new/template_styles.css?1788464107134539*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body.arhio-page {
    margin: 0;

    background: #ffffff;

    color: #342f2c;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}


/* ==================================================
   BLOCK 01 — HERO
   ================================================== */

.arhio-hero {
    position: relative;

    width: 100%;

    height: clamp(760px, 90vh, 860px);

    overflow: hidden;

    background-image:
        url("/local/templates/arhio_new/./assets/img/hero.jpg");

    background-repeat: no-repeat;

    background-position:
        center top;

    background-size:
        cover;
}


/* --------------------------------------------------
   Затемнение слева
   -------------------------------------------------- */

.arhio-hero__dark {
    position: absolute;

    z-index: 1;

    left: 0;
    top: 0;
    bottom: 0;

    width: 50%;

    background:
        rgba(34, 34, 33, 0.87);
}


/* --------------------------------------------------
   Левая часть
   -------------------------------------------------- */

.arhio-hero__left {
    position: absolute;

    z-index: 2;

    left: 0;
    top: 0;

    width: 50%;
    height: 100%;
}


/* Логотип */

.arhio-hero__logo {
    position: absolute;

    top: 4.5%;
    left: 50%;

    width: 290px;

    transform:
        translateX(-50%);
}


.arhio-hero__logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* Заголовок */

.arhio-hero__heading {
    position: absolute;

    top: 365px;
    left: 50%;

    width: 532px;
    max-width: 86%;

    transform:
        translateX(-50%);

    color: #ffffff;

    text-align: center;
}


.arhio-hero__heading h1 {
    margin: 0;

    font-size: 42px;

    line-height: 1.22;

    font-weight: 500;

    letter-spacing: 0;
}


/* Подзаголовок */

.arhio-hero__subtitle {
    margin-top: 38px;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 400;
}


/* Получить консультацию */

.arhio-hero__consult {
    position: absolute;

    left: 11.5%;
    bottom: 36px;

    width: 77%;
    height: 72px;

    display: flex;

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

    border:
        1px solid rgba(255,255,255,.9);

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.arhio-hero__consult:hover {
    background: #efe4d8;

    color: #342f2c;
}


/* ==================================================
   ПРАВАЯ ВЕРХНЯЯ ЧАСТЬ
   ================================================== */

.arhio-hero__header {
    position: absolute;

    z-index: 3;

    right: 0;
    top: 0;

    width: 50%;
    height: 290px;

    display: grid;

    grid-template-columns:
        32% 68%;

    padding:
        33px
        35px
        25px
        27px;

    background:
        transparent;
}


/* --------------------------------------------------
   Меню
   -------------------------------------------------- */

.arhio-hero__nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 23px;

    padding-top: 6px;
}


.arhio-hero__nav a {
    color: #342f2c;

    text-decoration: none;

    font-size: 16px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;
}


.arhio-hero__nav a:hover {
    opacity: .6;
}


/* --------------------------------------------------
   Контакты
   -------------------------------------------------- */

.arhio-hero__contacts {
    display: flex;

    flex-direction: column;
}


.arhio-hero__contact-row {
    display: grid;

    grid-template-columns:
        1.1fr 1fr;

    gap: 6px;
}


.arhio-hero__contact {
    min-height: 64px;

    display: flex;

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

    border:
        1px solid #342f2c;

    color: #342f2c;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    white-space: nowrap;
}


/* --------------------------------------------------
   Социальные сети
   -------------------------------------------------- */

.arhio-hero__socials {
    display: flex;

    justify-content: flex-end;

    gap: 7px;

    margin-top: 12px;
}


.arhio-hero__social {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;

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

    border:
        1px solid #342f2c;

    background:
        transparent;

    text-decoration: none;
}


.arhio-hero__social img {
    display: block;

    width: 21px;
    height: 21px;

    object-fit: contain;
}


/* --------------------------------------------------
   Частные заказчики
   -------------------------------------------------- */

.arhio-hero__private-wrap {
    display: flex;

    justify-content: flex-end;

    margin-top: 14px;
}


.arhio-hero__private {
    min-height: 46px;

    padding:
        0 22px;

    display: flex;

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

    background: #66625f;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}


/* ==================================================
   BLOCK 02 — ЛЕГКИЕ ФАСАДНЫЕ РЕШЕНИЯ
   ================================================== */

.arhio-about {
    position: relative;

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

    display: grid;
    grid-template-columns: 50% 50%;

    background: #ffffff;

    color: #342f2c;
}


/* --------------------------------------------------
   Левая часть
   -------------------------------------------------- */

.arhio-about__content {
    position: relative;

    min-height: 760px;

    padding:
        78px
        58px
        70px
        38px;
}


.arhio-about__title {
    margin: 0;

    max-width: 720px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 50px;

    line-height: 1.20;

    font-weight: 500;

    letter-spacing: -.02em;

    color: #342f2c;
}


/* Текстовая часть ниже заголовка */

.arhio-about__copy {
    position: absolute;

    left: 38px;
    right: 80px;

    top: 250px;

    padding-left: 28px;

    border-left:
        1px solid #d7d1ca;
}


.arhio-about__copy p {
    max-width: 660px;

    margin:
        0
        0
        54px;

    font-size: 21px;

    line-height: 1.52;

    font-weight: 400;

    letter-spacing: -.01em;

    color: #403b38;
}


.arhio-about__copy p:last-child {
    margin-bottom: 0;
}


/* ==================================================
   ГАЛЕРЕЯ
   ================================================== */

.arhio-about__gallery {
    position: relative;

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

    overflow: hidden;

    border-left:
        1px solid #dfdbd7;

    background: #eee9e3;
}


.arhio-about__image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    opacity: 1;

    transition:
        opacity .22s ease;
}


.arhio-about__image.is-changing {
    opacity: 0;
}


/* --------------------------------------------------
   Стрелки — обе ВНУТРИ фотографии
   -------------------------------------------------- */

.arhio-about__arrow {
    position: absolute;

    z-index: 5;

    top: 50%;

    width: 58px;
    height: 58px;

    padding: 0;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background:
        rgba(31, 29, 28, .90);

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background .18s ease,
        transform .18s ease;
}


.arhio-about__arrow:hover {
    background: #342f2c;

    transform:
        translateY(-50%)
        scale(1.05);
}


.arhio-about__arrow--prev {
    left: 24px;
}


.arhio-about__arrow--next {
    right: 24px;
}


/* Рисуем стрелки CSS */

.arhio-about__arrow span {
    width: 16px;
    height: 16px;

    border-top:
        1px solid #ffffff;

    border-left:
        1px solid #ffffff;
}


.arhio-about__arrow--prev span {
    transform:
        translateX(4px)
        rotate(-45deg);
}


.arhio-about__arrow--next span {
    transform:
        translateX(-4px)
        rotate(135deg);
}


/* --------------------------------------------------
   Точки галереи
   -------------------------------------------------- */

.arhio-about__dots {
    position: absolute;

    z-index: 6;

    left: 50%;
    bottom: 24px;

    display: flex;

    gap: 12px;

    transform:
        translateX(-50%);
}


.arhio-about__dot {
    width: 11px;
    height: 11px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255,255,255,.67);

    cursor: pointer;

    box-shadow:
        0 0 0 1px
        rgba(35,31,28,.10);

    transition:
        background .18s ease,
        transform .18s ease;
}


.arhio-about__dot:hover {
    transform: scale(1.15);
}


.arhio-about__dot.is-active {
    background: #342f2c;
}



/* ==================================================
   BLOCK 02 — внешние белые поля
   ================================================== */

.arhio-about {
    padding-top: 150px;
    padding-bottom: 100px;

    align-items: start;
}

/*
   Верхнее поле теперь создаёт сама секция,
   поэтому внутренний отступ заголовка уменьшаем.
*/
.arhio-about__content {
    min-height: 760px;

    padding:
        18px
        58px
        70px
        38px;
}

/*
   Галерея начинается только после верхнего
   белого поля и не касается следующего блока снизу.
*/
.arhio-about__gallery {
    min-height: 760px;
    height: 760px;
}



/* ==================================================
   BLOCK 03 — ПРЕИМУЩЕСТВА
   ================================================== */

.arhio-features {
    width: 100%;
    height: 980px;

    display: grid;
    grid-template-columns: 50% 50%;

    background: #efe5d9;

    color: #342f2c;
}


/* Фото */

.arhio-features__photo {
    width: 100%;
    height: 980px;

    overflow: hidden;
}


.arhio-features__photo img {
    display: block;

    width: 100%;
    height: 100%;

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


/* Правая часть */

.arhio-features__content {
    height: 850px;
    align-self: center;

    padding:
        72px
        70px
        58px;

    display: flex;
    flex-direction: column;
}


.arhio-features__title {
    margin: 0;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 34px;
    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -.025em;

    color: #342f2c;
}


/* Сетка преимуществ */

.arhio-features__grid {
    margin-top: 52px;

    display: grid;
    grid-template-columns: 1fr 1fr;
}


.arhio-features__item {
    min-height: 158px;

    padding:
        24px
        20px
        20px
        0;
}


.arhio-features__item:nth-child(even) {
    padding-left: 20px;

    border-left:
        1px solid rgba(52,47,44,.22);
}


.arhio-features__item:nth-child(n+3) {
    padding-top: 26px;

    border-top:
        1px solid rgba(52,47,44,.18);
}


.arhio-features__item h3 {
    margin: 0 0 17px;

    font-size: 19px;
    line-height: 1.18;

    font-weight: 600;
}


.arhio-features__item p {
    margin: 0;

    max-width: 245px;

    font-size: 15px;
    line-height: 1.42;

    font-weight: 400;
}


/* Кнопка */

.arhio-features__button {
    margin-top: auto;

    flex: 0 0 64px;

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

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

    border:
        1px solid rgba(52,47,44,.65);

    color: #342f2c;

    text-decoration: none;

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

    transition:
        background .18s ease,
        color .18s ease;
}


.arhio-features__button:hover {
    background: #342f2c;
    color: #ffffff;
}



/* ==================================================
   BLOCK 04 — ПОЛИМЕРБЕТОН
   ================================================== */

.arhio-material {
    width: 100%;

    padding:
        105px
        0
        120px;

    background: #2d2a2a;

    color: #f5f0e9;
}


.arhio-material__inner {
    width:
        calc(100% - 120px);

    max-width: 1540px;

    margin:
        0
        auto;
}


/* ==================================================
   INTRO
   ================================================== */

.arhio-material__intro {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    margin-bottom:
        92px;
}


.arhio-material__intro-left {
    padding-right:
        70px;
}


.arhio-material__intro-right {
    padding-left:
        70px;

    border-left:
        1px solid rgba(230,218,203,.22);
}


.arhio-material__title {
    margin:
        0
        0
        38px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        48px;

    line-height:
        1.08;

    font-weight:
        500;

    letter-spacing:
        -.025em;

    color:
        #f6f2ed;
}


.arhio-material__lead {
    max-width:
        520px;

    margin:
        0;

    font-size:
        17px;

    line-height:
        1.48;

    color:
        rgba(246,242,237,.90);
}


.arhio-material__statement {
    max-width:
        590px;

    margin-bottom:
        46px;

    font-size:
        25px;

    line-height:
        1.18;

    font-weight:
        600;

    color:
        #f6f2ed;
}


.arhio-material__more {
    width:
        min(100%, 500px);

    min-height:
        68px;

    padding:
        18px
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(235,225,211,.70);

    color:
        #f5efe7;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.arhio-material__more:hover {
    background:
        #efe4d8;

    border-color:
        #efe4d8;

    color:
        #342f2c;
}


/* ==================================================
   GRID
   ================================================== */

.arhio-material__grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ==================================================
   CARD
   ================================================== */

.arhio-material__card {
    position:
        relative;

    min-width:
        0;

    padding:
        0
        30px
        62px;

    border-right:
        1px solid rgba(230,218,203,.15);
}


.arhio-material__card:nth-child(4n) {
    border-right:
        0;
}


/* Вторая строка */

.arhio-material__card:nth-child(n+5) {
    padding-top:
        58px;

    padding-bottom:
        0;

    border-top:
        1px solid rgba(230,218,203,.16);
}


/* ==================================================
   ICON
   ================================================== */

.arhio-material__visual {
    height:
        250px;

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.arhio-material__icon {
    display:
        block;

    width:
        225px;

    height:
        225px;

    max-width:
        100%;

    object-fit:
        contain;
}


/* ==================================================
   NUMBER
   ================================================== */

.arhio-material__number {
    position:
        relative;

    margin-bottom:
        20px;

    padding-bottom:
        13px;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        400;

    letter-spacing:
        .08em;

    color:
        rgba(225,211,194,.64);
}


.arhio-material__number::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        1px;

    background:
        rgba(225,211,194,.18);
}


/* ==================================================
   CARD TYPOGRAPHY
   ================================================== */

.arhio-material__card-title {
    margin:
        0
        0
        15px;

    min-height:
        50px;

    font-size:
        18px;

    line-height:
        1.18;

    font-weight:
        600;

    color:
        #f5f0e9;
}


.arhio-material__card-text {
    max-width:
        270px;

    margin:
        0;

    font-size:
        14px;

    line-height:
        1.48;

    color:
        rgba(245,240,233,.82);
}


/* ==================================================
   RESPONSIVE — пока базовая страховка
   Финальную мобильную версию сделаем отдельно.
   ================================================== */

@media (max-width: 1200px) {

    .arhio-material__inner {
        width:
            calc(100% - 70px);
    }

    .arhio-material__title {
        font-size:
            42px;
    }

    .arhio-material__intro-left {
        padding-right:
            45px;
    }

    .arhio-material__intro-right {
        padding-left:
            45px;
    }

    .arhio-material__statement {
        font-size:
            22px;
    }

    .arhio-material__visual {
        height:
            210px;
    }

    .arhio-material__icon {
        width:
            190px;

        height:
            190px;
    }

}


@media (max-width: 850px) {

    .arhio-material__intro {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

    .arhio-material__intro-left {
        padding-right:
            0;
    }

    .arhio-material__intro-right {
        padding-left:
            0;

        border-left:
            0;
    }

    .arhio-material__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .arhio-material__card:nth-child(4n) {
        border-right:
            1px solid rgba(230,218,203,.15);
    }

    .arhio-material__card:nth-child(2n) {
        border-right:
            0;
    }

}


/* ==========================================
   BLOCK 04 — убираем лишние разделители
   ========================================== */

.arhio-material__card,
.arhio-material__card:nth-child(4n),
.arhio-material__card:nth-child(2n),
.arhio-material__card:nth-child(n+5) {
    border-right: 0 !important;
    border-top: 0 !important;
}


/* BLOCK 04 — финальная плотность рядов */
.arhio-material__card:nth-child(n+5) {
    padding-top: 46px;
}



/* ==================================================
   BLOCK 05 — ФАСАДНЫЕ ИЗДЕЛИЯ
   ================================================== */

.arhio-products {
    width: 100%;

    padding:
        90px
        0
        105px;

    background:
        #efe5d9;

    color:
        #342f2c;
}


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

    max-width:
        1660px;

    margin:
        0 auto;
}


/* ==================================================
   INTRO
   ================================================== */

.arhio-products__intro {
    width:
        66.666%;

    margin:
        0 auto 76px;

    padding-left:
        22px;
}


.arhio-products__title {
    margin:
        0 0 38px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        50px;

    line-height:
        1.08;

    font-weight:
        500;

    letter-spacing:
        -.025em;

    color:
        #342f2c;
}


.arhio-products__lead {
    max-width:
        410px;

    margin:
        0;

    font-size:
        16px;

    line-height:
        1.45;

    color:
        #49433f;
}


/* ==================================================
   GRID
   ================================================== */

.arhio-products__grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        36px;
}


/* ==================================================
   CARD
   ================================================== */

.arhio-products__card {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.arhio-products__image-wrap {
    width:
        100%;

    aspect-ratio:
        1.72 / 1;

    overflow:
        hidden;

    background:
        #ddd3c8;
}


.arhio-products__image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.arhio-products__body {
    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    padding-top:
        22px;
}


.arhio-products__card-title {
    margin:
        0 0 15px;

    font-size:
        20px;

    line-height:
        1.15;

    font-weight:
        600;

    color:
        #342f2c;
}


.arhio-products__list {
    margin:
        0 0 28px;

    padding-left:
        20px;

    font-size:
        15px;

    line-height:
        1.55;

    color:
        #4a4541;
}


.arhio-products__list li {
    padding-left:
        1px;
}


/* ==================================================
   BUTTON
   ================================================== */

.arhio-products__button {
    margin-top:
        auto;

    align-self:
        flex-start;

    min-height:
        52px;

    padding:
        0 28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(52,47,44,.55);

    color:
        #342f2c;

    text-decoration:
        none;

    font-size:
        13px;

    line-height:
        1.15;

    font-weight:
        600;

    text-align:
        center;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.arhio-products__button:hover {
    background:
        #342f2c;

    border-color:
        #342f2c;

    color:
        #ffffff;
}


/* ==================================================
   BASE RESPONSIVE
   ================================================== */

@media (max-width: 1100px) {

    .arhio-products__grid {
        gap:
            24px;
    }

    .arhio-products__title {
        font-size:
            44px;
    }

}


@media (max-width: 780px) {

    .arhio-products__intro {
        width:
            100%;

        padding-left:
            0;

        margin-bottom:
            50px;
    }

    .arhio-products__grid {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

}


/* BLOCK 05 — финальная плотность верхней части */

.arhio-products__title {
    font-size: 44px;
    line-height: 1.06;
    margin-bottom: 24px;
}

.arhio-products__intro {
    margin-bottom: 50px;
}


/* ==================================================
   BLOCK 05 — общая кнопка каталога
   ================================================== */

.arhio-products__catalog-wrap {
    display: flex;
    justify-content: center;

    margin:
        -10px
        0
        48px;
}

.arhio-products__catalog {
    min-height: 54px;

    padding:
        0
        38px;

    display: inline-flex;

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

    border:
        1px solid rgba(52,47,44,.55);

    color:
        #342f2c;

    text-decoration: none;

    font-size: 13px;
    line-height: 1.15;

    font-weight: 600;

    text-align: center;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.arhio-products__catalog:hover {
    background: #342f2c;
    border-color: #342f2c;
    color: #ffffff;
}


/* ==================================================
   BLOCK 05 — финальная компоновка intro
   ================================================== */

.arhio-products__intro {
    width: 100%;
    margin: 0 0 50px;
    padding-left: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;
}

.arhio-products__intro-left {
    padding-left: 28px;
}

.arhio-products__intro-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arhio-products__catalog-wrap {
    display: none !important;
}

.arhio-products__catalog {
    min-width: 410px;
    min-height: 58px;

    padding: 0 34px;

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

    border: 1px solid rgba(52,47,44,.55);

    color: #342f2c;
    text-decoration: none;

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

    text-align: center;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.arhio-products__catalog:hover {
    background: #342f2c;
    border-color: #342f2c;
    color: #ffffff;
}



/* ==================================================
   BLOCK 06 — ЗАЯВКА
   ================================================== */

.arhio-request {
    width: 100%;
    min-height: 690px;

    display: grid;
    grid-template-columns: 50% 50%;

    background: #2d2a2a;

    color: #f5efe7;
}


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

.arhio-request__left {
    position: relative;

    min-height: 690px;

    display: flex;
    align-items: center;

    padding:
        80px
        70px;

    border-right:
        1px solid rgba(235,225,211,.18);
}


.arhio-request__left-inner {
    max-width: 600px;
}


.arhio-request__title {
    margin:
        0
        0
        46px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 54px;
    line-height: 1.12;

    font-weight: 500;

    letter-spacing: -.025em;

    color: #f5efe7;
}


.arhio-request__lead {
    max-width: 470px;

    margin: 0;

    font-size: 22px;
    line-height: 1.48;

    font-weight: 400;

    color: rgba(245,239,231,.92);
}


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

.arhio-request__right {
    min-height: 690px;

    display: flex;
    align-items: center;

    padding:
        72px
        90px;
}


.arhio-request__form {
    width: 100%;
    max-width: 690px;

    margin: 0 auto;
}


/* ==================================================
   FIELDS
   ================================================== */

.arhio-request__field {
    margin-bottom: 40px;
}


.arhio-request__label {
    display: block;

    margin-bottom: 11px;

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

    font-weight: 500;

    color: rgba(245,239,231,.60);
}


.arhio-request__input {
    width: 100%;
    height: 58px;

    padding: 0;

    border: 0;
    border-bottom:
        1px solid rgba(245,239,231,.26);

    border-radius: 0;

    outline: 0;

    background: transparent;

    color: #f5efe7;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 22px;

    transition:
        border-color .2s ease;
}


.arhio-request__input:focus {
    border-bottom-color:
        rgba(245,239,231,.80);
}


.arhio-request__input::placeholder {
    color:
        rgba(245,239,231,.47);
}


/* ==================================================
   PHONE
   ================================================== */

.arhio-request__phone {
    display: flex;
    align-items: center;

    border-bottom:
        1px solid rgba(245,239,231,.26);
}


.arhio-request__country {
    flex: 0 0 auto;

    margin-right: 14px;

    font-size: 22px;

    font-weight: 500;

    color: #f5efe7;
}


.arhio-request__input--phone {
    border-bottom: 0;
}


/* ==================================================
   CHECKBOX
   ================================================== */

.arhio-request__check {
    position: relative;

    display: grid;

    grid-template-columns:
        28px
        1fr;

    gap: 16px;

    margin-bottom: 25px;

    cursor: pointer;
}


.arhio-request__check input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.arhio-request__check-box {
    width: 26px;
    height: 26px;

    margin-top: 2px;

    border:
        1px solid rgba(245,239,231,.40);

    position: relative;
}


.arhio-request__check input:checked
+ .arhio-request__check-box::after {
    content: "";

    position: absolute;

    left: 6px;
    top: 2px;

    width: 8px;
    height: 14px;

    border-right:
        2px solid #f5efe7;

    border-bottom:
        2px solid #f5efe7;

    transform:
        rotate(45deg);
}


.arhio-request__check-text {
    font-size: 15px;
    line-height: 1.4;

    color:
        rgba(245,239,231,.88);
}


.arhio-request__check-text a {
    color: inherit;

    text-decoration:
        underline;

    text-underline-offset:
        3px;
}


/* ==================================================
   BUTTON
   ================================================== */

.arhio-request__submit {
    width: 100%;
    height: 68px;

    margin-top: 14px;

    border:
        1px solid rgba(245,239,231,.75);

    background:
        transparent;

    color: #f5efe7;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

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

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.arhio-request__submit:hover {
    background:
        #efe4d8;

    color:
        #342f2c;
}


/* ==================================================
   RESPONSIVE BASE
   ================================================== */

@media (max-width: 950px) {

    .arhio-request {
        grid-template-columns:
            1fr;
    }

    .arhio-request__left,
    .arhio-request__right {
        min-height: auto;
    }

    .arhio-request__left {
        padding:
            80px
            45px;

        border-right: 0;

        border-bottom:
            1px solid rgba(235,225,211,.18);
    }

    .arhio-request__right {
        padding:
            70px
            45px;
    }

}


/* BLOCK 06 — увеличиваем типографику формы */

.arhio-request__label {
    font-size: 18px;
}

.arhio-request__input {
    font-size: 25px;
}

.arhio-request__country {
    font-size: 25px;
}

.arhio-request__check-text {
    font-size: 17px;
    line-height: 1.42;
}

.arhio-request__submit {
    font-size: 18px;
}



/* ==================================================
   BLOCK 07 — РЕАЛИЗОВАННЫЕ ПРОЕКТЫ
   ================================================== */

.arhio-projects {
    width: 100%;

    padding:
        92px
        0
        105px;

    background:
        #ffffff;

    color:
        #342f2c;
}


.arhio-projects__inner {
    width:
        calc(100% - 56px);

    max-width:
        1660px;

    margin:
        0 auto;
}


/* ==================================================
   INTRO
   ================================================== */

.arhio-projects__intro {
    width:
        66%;

    margin:
        0 auto 48px;
}


.arhio-projects__title {
    margin:
        0
        0
        22px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        46px;

    line-height:
        1.08;

    font-weight:
        500;

    letter-spacing:
        -.02em;

    color:
        #342f2c;
}


.arhio-projects__lead {
    max-width:
        590px;

    margin:
        0;

    font-size:
        16px;

    line-height:
        1.48;

    color:
        #514b47;
}


/* ==================================================
   SLIDER
   ================================================== */

.arhio-projects__slider {
    position:
        relative;

    width:
        100%;
}


.arhio-projects__viewport {
    overflow:
        hidden;
}


.arhio-projects__track {
    display:
        flex;

    gap:
        36px;

    transition:
        transform .48s
        cubic-bezier(.22,.61,.36,1);

    will-change:
        transform;
}


/* 2 карточки на экране */

.arhio-projects__card {
    flex:
        0 0 calc((100% - 36px) / 2);

    min-width:
        0;
}


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

.arhio-projects__image-button {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        1.77 / 1;

    margin:
        0;

    padding:
        0;

    border:
        0;

    overflow:
        hidden;

    background:
        #eee;

    cursor:
        zoom-in;
}


.arhio-projects__image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .45s ease;
}


.arhio-projects__image-button:hover
.arhio-projects__image {
    transform:
        scale(1.025);
}


/* ==================================================
   CARD TEXT
   ================================================== */

.arhio-projects__body {
    padding-top:
        25px;
}


.arhio-projects__card-title {
    margin:
        0
        0
        15px;

    font-size:
        19px;

    line-height:
        1.2;

    font-weight:
        600;

    color:
        #342f2c;
}


.arhio-projects__text {
    min-height:
        68px;

    margin:
        0
        0
        25px;

    font-size:
        15px;

    line-height:
        1.5;

    color:
        #514b47;
}


.arhio-projects__more {
    min-width:
        150px;

    min-height:
        50px;

    padding:
        0
        26px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(52,47,44,.52);

    color:
        #342f2c;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        background .2s ease,
        color .2s ease;
}


.arhio-projects__more:hover {
    background:
        #342f2c;

    color:
        #ffffff;
}


/* ==================================================
   SLIDER ARROWS
   ================================================== */

.arhio-projects__arrow {
    position:
        absolute;

    z-index:
        10;

    top:
        34%;

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(38,35,33,.88);

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background .2s ease,
        opacity .2s ease;
}


.arhio-projects__arrow:hover {
    background:
        #2d2a2a;
}


.arhio-projects__arrow:disabled {
    opacity:
        .25;

    cursor:
        default;
}


.arhio-projects__arrow--prev {
    left:
        22px;
}


.arhio-projects__arrow--next {
    right:
        22px;
}


.arhio-projects__arrow span {
    width:
        15px;

    height:
        15px;

    border-top:
        1px solid #ffffff;

    border-left:
        1px solid #ffffff;
}


.arhio-projects__arrow--prev span {
    transform:
        translateX(3px)
        rotate(-45deg);
}


.arhio-projects__arrow--next span {
    transform:
        translateX(-3px)
        rotate(135deg);
}


/* ==================================================
   LIGHTBOX
   ================================================== */

.arhio-lightbox {
    position:
        fixed;

    z-index:
        99999;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        55px;

    background:
        rgba(22,20,19,.94);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.arhio-lightbox.is-open {
    opacity:
        1;

    visibility:
        visible;
}


.arhio-lightbox__content {
    max-width:
        1450px;

    max-height:
        calc(100vh - 110px);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


.arhio-lightbox__image {
    display:
        block;

    max-width:
        100%;

    max-height:
        calc(100vh - 160px);

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;
}


.arhio-lightbox__caption {
    margin-top:
        18px;

    font-size:
        15px;

    color:
        rgba(255,255,255,.82);
}


.arhio-lightbox__close {
    position:
        absolute;

    top:
        25px;

    right:
        30px;

    width:
        50px;

    height:
        50px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        44px;

    line-height:
        1;

    font-weight:
        200;

    cursor:
        pointer;
}


/* запрещаем прокрутку страницы под lightbox */

body.arhio-lightbox-open {
    overflow:
        hidden;
}


/* ==================================================
   RESPONSIVE BASE
   ================================================== */

@media (max-width: 800px) {

    .arhio-projects__intro {
        width:
            100%;
    }

    .arhio-projects__card {
        flex-basis:
            100%;
    }

    .arhio-projects__track {
        gap:
            20px;
    }

    .arhio-projects__arrow {
        width:
            50px;

        height:
            50px;
    }

}


/* ==================================================
   BLOCK 07 — финальная коррекция
   ================================================== */


/* 1. Заголовок и описание возвращаем влево */

.arhio-projects__intro {
    width: 100%;
    margin: 0 0 48px;
}

.arhio-projects__title {
    max-width: 900px;
}

.arhio-projects__lead {
    max-width: 650px;
}


/* 2. Обе стрелки визуально одинаковые */

.arhio-projects__arrow,
.arhio-projects__arrow:disabled {
    opacity: 1;
    background: rgba(38,35,33,.92);

    box-shadow:
        0 3px 14px rgba(0,0,0,.16);
}

.arhio-projects__arrow:disabled {
    cursor: default;
}


/* 3. Увеличиваем изображение в lightbox */

.arhio-lightbox {
    padding: 35px;
}

.arhio-lightbox__content {
    width: 94vw;
    max-width: 1700px;

    max-height: 92vh;
}

.arhio-lightbox__image {
    width: 92vw;
    height: 84vh;

    max-width: 1700px;
    max-height: 84vh;

    object-fit: contain;
}



/* ==================================================
   BLOCK 08 — МАЛАЯ ЛЕНТА ПРОЕКТОВ
   ================================================== */

.arhio-project-strip {
    width: 100%;

    padding:
        76px
        0
        92px;

    overflow: hidden;

    background:
        #2d2a2a;

    color:
        #f5efe7;
}


.arhio-project-strip__inner {
    width:
        calc(100% - 84px);

    max-width:
        1700px;

    margin:
        0 auto;
}


/* ==================================================
   CONTROLS
   ================================================== */

.arhio-project-strip__controls {
    display: flex;

    justify-content: flex-end;

    gap: 9px;

    margin:
        0
        92px
        34px
        0;
}


.arhio-project-strip__arrow {
    width: 48px;
    height: 48px;

    display: flex;

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

    padding: 0;

    border:
        1px solid rgba(245,239,231,.72);

    background:
        transparent;

    cursor:
        pointer;

    transition:
        background-color .2s ease;
}


.arhio-project-strip__arrow:hover {
    background:
        rgba(255,255,255,.08);
}


.arhio-project-strip__arrow-icon {
    width: 12px;
    height: 12px;

    border-top:
        1px solid #f5efe7;

    border-left:
        1px solid #f5efe7;
}


.arhio-project-strip__arrow-icon--prev {
    transform:
        translateX(3px)
        rotate(-45deg);
}


.arhio-project-strip__arrow-icon--next {
    transform:
        translateX(-3px)
        rotate(135deg);
}


/* ==================================================
   SLIDER
   ================================================== */

.arhio-project-strip__viewport {
    overflow:
        hidden;
}


.arhio-project-strip__track {
    display: flex;

    gap:
        46px;

    transform:
        translate3d(0,0,0);

    will-change:
        transform;
}


/* ==================================================
   CARD
   ================================================== */

.arhio-project-strip__card {
    flex:
        0 0 clamp(165px, 11.4vw, 205px);

    min-width: 0;
}


.arhio-project-strip__image-button {
    width: 100%;

    aspect-ratio:
        1 / 1;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    overflow: hidden;

    background:
        #45413e;

    cursor:
        zoom-in;
}


.arhio-project-strip__image-button img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit:
        cover;

    transition:
        transform .4s ease,
        opacity .25s ease;
}


.arhio-project-strip__image-button:hover img {
    transform:
        scale(1.035);

    opacity:
        .92;
}


.arhio-project-strip__title {
    margin-top:
        18px;

    font-size:
        16px;

    line-height:
        1.3;

    font-weight:
        400;

    white-space:
        nowrap;

    color:
        rgba(245,239,231,.92);
}


/* ==================================================
   BUTTON ALL PROJECTS
   ================================================== */

.arhio-project-strip__footer {
    display: flex;

    justify-content: center;

    margin-top:
        72px;
}


.arhio-project-strip__all {
    width:
        min(100%, 600px);

    min-height:
        68px;

    display: flex;

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

    padding:
        18px
        35px;

    border:
        1px solid rgba(245,239,231,.72);

    color:
        #f5efe7;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.arhio-project-strip__all:hover {
    background:
        #efe4d8;

    color:
        #342f2c;
}


/* ==================================================
   RESPONSIVE BASE
   ================================================== */

@media (max-width: 900px) {

    .arhio-project-strip__inner {
        width:
            calc(100% - 40px);
    }

    .arhio-project-strip__controls {
        margin-right:
            0;
    }

    .arhio-project-strip__track {
        gap:
            24px;
    }

    .arhio-project-strip__card {
        flex-basis:
            175px;
    }

}



/* ==================================================
   BLOCK 09 — ЭТАПЫ СОТРУДНИЧЕСТВА
   ================================================== */

.arhio-process {
    width: 100%;

    padding:
        92px
        0
        105px;

    background:
        #efe5d9;

    color:
        #342f2c;
}


.arhio-process__inner {
    width:
        calc(100% - 84px);

    max-width:
        1660px;

    margin:
        0 auto;
}


/* ==================================================
   INTRO
   ================================================== */

.arhio-process__intro {
    margin-bottom:
        72px;
}


.arhio-process__title {
    margin:
        0
        0
        24px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        46px;

    line-height:
        1.08;

    font-weight:
        500;

    letter-spacing:
        -.025em;

    color:
        #342f2c;
}


.arhio-process__lead {
    max-width:
        850px;

    margin:
        0;

    font-size:
        17px;

    line-height:
        1.5;

    color:
        #514b47;
}


/* ==================================================
   GRID
   ================================================== */

.arhio-process__grid {
    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        34px;
}


/* ==================================================
   STEP
   ================================================== */

.arhio-process__step {
    position:
        relative;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.arhio-process__number {
    margin-bottom:
        12px;

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        .08em;

    color:
        rgba(52,47,44,.48);
}


/* ==================================================
   ICON
   ================================================== */

.arhio-process__icon-wrap {
    position:
        relative;

    width:
        100%;

    height:
        205px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    padding:
        5px
        10px
        19px;

    border-bottom:
        1px solid rgba(52,47,44,.22);
}


.arhio-process__icon {
    display:
        block;

    width:
        180px;

    height:
        180px;

    max-width:
        100%;

    object-fit:
        contain;
}


/* ==================================================
   TEXT
   ================================================== */

.arhio-process__content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;
}


.arhio-process__step-title {
    min-height:
        52px;

    margin:
        0
        0
        24px;

    font-size:
        20px;

    line-height:
        1.25;

    font-weight:
        600;

    color:
        #342f2c;
}


.arhio-process__party {
    margin-bottom:
        20px;
}


.arhio-process__party-label {
    margin-bottom:
        7px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        .10em;

    color:
        rgba(52,47,44,.52);
}


.arhio-process__party-text {
    font-size:
        15px;

    line-height:
        1.43;

    color:
        #48423e;
}


.arhio-process__time {
    margin-top:
        auto;

    padding-top:
        13px;

    font-size:
        14px;

    line-height:
        1.3;

    color:
        rgba(52,47,44,.54);
}


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

@media (max-width: 1200px) {

    .arhio-process__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        row-gap:
            60px;
    }

}


/* ==================================================
   MOBILE — ВЕРТИКАЛЬНАЯ ИНФОГРАФИКА
   ================================================== */

@media (max-width: 700px) {

    .arhio-process {
        padding:
            70px
            0
            80px;
    }


    .arhio-process__inner {
        width:
            calc(100% - 38px);
    }


    .arhio-process__title {
        font-size:
            34px;
    }


    .arhio-process__intro {
        margin-bottom:
            50px;
    }


    .arhio-process__grid {
        position:
            relative;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0;
    }


    /*
       Общая вертикальная линия этапов
    */

    .arhio-process__grid::before {
        content: "";

        position:
            absolute;

        left:
            29px;

        top:
            5px;

        bottom:
            30px;

        width:
            1px;

        background:
            rgba(52,47,44,.20);
    }


    .arhio-process__step {
        display:
            grid;

        grid-template-columns:
            74px
            minmax(0, 1fr);

        grid-template-rows:
            auto
            auto;

        column-gap:
            18px;

        padding-bottom:
            52px;
    }


    .arhio-process__number {
        position:
            relative;

        z-index:
            2;

        grid-column:
            1;

        grid-row:
            1;

        width:
            58px;

        height:
            58px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        margin:
            0;

        border:
            1px solid rgba(52,47,44,.28);

        border-radius:
            50%;

        background:
            #efe5d9;

        color:
            #342f2c;
    }


    .arhio-process__icon-wrap {
        grid-column:
            2;

        grid-row:
            1;

        height:
            125px;

        justify-content:
            flex-start;

        margin:
            0
            0
            20px;

        padding:
            0
            0
            17px;

        border-bottom:
            1px solid rgba(52,47,44,.20);
    }


    .arhio-process__icon {
        width:
            120px;

        height:
            120px;
    }


    .arhio-process__content {
        grid-column:
            2;

        grid-row:
            2;
    }


    .arhio-process__step-title {
        min-height:
            0;

        margin-bottom:
            20px;
    }


    .arhio-process__time {
        margin-top:
            5px;
    }

}



/* ==================================================
   BLOCK 09 — коррекция структуры этапов
   ================================================== */


/* Цифры больше не используются */

.arhio-process__number {
    display: none !important;
}


/* Название теперь находится НАД иконкой */

.arhio-process__step-title {
    min-height: 50px;

    margin:
        0
        0
        17px;

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

    font-weight: 600;

    color: #342f2c;
}


/* Вся иконка является ссылкой */

.arhio-process__icon-link {
    display: block;

    width: 100%;

    color: inherit;
    text-decoration: none;
}


/* Иконка */

.arhio-process__icon-wrap {
    height: 205px;

    margin-bottom: 25px;

    padding:
        0
        10px
        18px;

    transition:
        opacity .22s ease;
}


.arhio-process__icon {
    transition:
        transform .28s ease;
}


/* Очень лёгкое поведение при наведении */

.arhio-process__icon-link:hover
.arhio-process__icon {
    transform: scale(1.035);
}


.arhio-process__icon-link:hover
.arhio-process__icon-wrap {
    opacity: .88;
}


/* ==================================================
   MOBILE — без цифровой временной линии
   ================================================== */

@media (max-width: 700px) {

    .arhio-process__grid::before {
        display: none;
    }


    .arhio-process__step {
        display: block;

        padding-bottom: 55px;
    }


    .arhio-process__step:last-child {
        padding-bottom: 0;
    }


    .arhio-process__step-title {
        min-height: 0;

        margin-bottom: 14px;

        font-size: 21px;
    }


    .arhio-process__icon-wrap {
        height: 180px;

        justify-content: flex-start;

        margin-bottom: 24px;

        padding:
            0
            0
            17px;
    }


    .arhio-process__icon {
        width: 165px;
        height: 165px;
    }


    .arhio-process__content {
        display: block;
    }

}


/* ==================================================
   BLOCK 09 — финальная типографика
   ================================================== */

/* Названия этапов центрируем над иконками */

.arhio-process__step-title {
    width: 100%;
    text-align: center;
}


/* КЛИЕНТ / ARHIO делаем заметнее */

.arhio-process__party-label {
    color: #342f2c;
    font-weight: 700;
}


/* Срок тоже выделяем сильнее */

.arhio-process__time {
    color: #342f2c;
    font-weight: 600;
}


/* На мобильном сохраняем центрирование */

@media (max-width: 700px) {

    .arhio-process__step-title {
        text-align: center;
    }

}



/* ==================================================
   BLOCK 09 — выравнивание КЛИЕНТ / ARHIO / СРОК
   ================================================== */

/*
   Первый блок во всех пяти колонках имеет одинаковую высоту.
   Поэтому ARHIO начинается строго на одной горизонтальной линии.
*/

.arhio-process__content > .arhio-process__party:first-child {
    min-height: 76px;
    margin-bottom: 18px;
}


/*
   Блок ARHIO тоже получает одинаковую высоту.
   За счёт этого сроки больше не зависят от количества строк текста.
*/

.arhio-process__content > .arhio-process__party:nth-child(2) {
    min-height: 91px;
    margin-bottom: 0;
}


/*
   Убираем прежнее прижатие срока к самому низу карточки
   и немного поднимаем его.
*/

.arhio-process__time {
    margin-top: 0;
    padding-top: 5px;
}


/* На мобильном жёсткое выравнивание по горизонтали уже не требуется */

@media (max-width: 700px) {

    .arhio-process__content > .arhio-process__party:first-child,
    .arhio-process__content > .arhio-process__party:nth-child(2) {
        min-height: 0;
        margin-bottom: 20px;
    }

    .arhio-process__time {
        margin-top: 0;
        padding-top: 0;
    }

}



/* ==================================================
   BLOCK 10 — PRODUCTION
   ================================================== */

.arhio-production {
    width: 100%;
    padding: 100px 0 105px;

    background: #f5efe7;
    color: #342f2c;

    overflow: hidden;
}


.arhio-production__inner {
    width: calc(100% - 84px);
    max-width: 1660px;
    margin: 0 auto;
}


/* ==================================================
   TOP
   ================================================== */

.arhio-production__top {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 85px;

    align-items: center;

    margin-bottom: 80px;
}


.arhio-production__content {
    max-width: 620px;
}


.arhio-production__title {
    margin: 0 0 34px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 45px;
    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -.025em;

    color: #342f2c;
}


.arhio-production__text {
    max-width: 550px;

    margin: 0 0 38px;

    font-size: 17px;
    line-height: 1.55;

    color: #4c4642;
}


/* ==================================================
   BUTTON
   ================================================== */

.arhio-production__button {
    display: inline-flex;

    min-height: 54px;

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

    padding: 0 26px;

    border: 1px solid #342f2c;

    color: #342f2c;

    text-decoration: none;

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

    font-weight: 600;
    letter-spacing: .025em;

    transition:
        background .22s ease,
        color .22s ease;
}


.arhio-production__button:hover {
    background: #342f2c;
    color: #f5efe7;
}


/* ==================================================
   VIDEO
   ================================================== */

.arhio-production__video {
    width: 100%;
}


.arhio-production__video-link {
    display: block;

    width: 100%;

    text-decoration: none;
    color: inherit;
}


.arhio-production__video-placeholder {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    display: flex;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(255,255,255,.10),
            transparent 38%
        ),
        #342f2c;
}


.arhio-production__video-placeholder::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            transparent 55%
        );
}


/* play */

.arhio-production__play {
    position: relative;
    z-index: 2;

    width: 78px;
    height: 78px;

    display: flex;

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

    border: 1px solid rgba(245,239,231,.75);
    border-radius: 50%;

    transition:
        transform .25s ease,
        background .25s ease;
}


.arhio-production__play span {
    width: 0;
    height: 0;

    margin-left: 6px;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #f5efe7;
}


.arhio-production__video-link:hover
.arhio-production__play {
    transform: scale(1.06);

    background: rgba(245,239,231,.08);
}


.arhio-production__video-caption {
    position: absolute;

    left: 26px;
    bottom: 22px;

    z-index: 2;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .09em;

    color: rgba(245,239,231,.82);
}


/* ==================================================
   TEXTURES
   ================================================== */

.arhio-textures {
    position: relative;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        52px;

    gap: 18px;

    align-items: center;
}


.arhio-textures__viewport {
    width: 100%;

    overflow: hidden;
}


.arhio-textures__track {
    display: flex;

    gap: 18px;

    transform: translate3d(0,0,0);

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1);

    will-change: transform;
}


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

.arhio-textures__item {
    flex:
        0
        0
        calc((100% - 72px) / 5);

    min-width: 0;

    aspect-ratio: 1 / 1;

    display: block;

    padding: 0;

    border: 0;

    overflow: hidden;

    background: #ddd4ca;

    cursor: zoom-in;
}


.arhio-textures__item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}


.arhio-textures__item:hover img {
    transform: scale(1.035);
}


/* ==================================================
   SQUARE ARROWS
   ================================================== */

.arhio-textures__arrow {
    width: 52px;
    height: 52px;

    display: flex;

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

    padding: 0;

    border:
        1px solid rgba(52,47,44,.48);

    border-radius: 0;

    background: transparent;

    color: #342f2c;

    font-size: 23px;
    font-family: Arial, sans-serif;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.arhio-textures__arrow:hover {
    background: #342f2c;

    color: #f5efe7;
}


/* ==================================================
   LIGHTBOX
   ================================================== */

.arhio-texture-lightbox {
    position: fixed;

    inset: 0;

    z-index: 10050;

    display: flex;

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

    visibility: hidden;
    opacity: 0;

    background:
        rgba(24,22,21,.93);

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


.arhio-texture-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}


.arhio-texture-lightbox__image-wrap {
    width: min(82vw, 980px);
    height: min(84vh, 980px);

    display: flex;

    align-items: center;
    justify-content: center;
}


.arhio-texture-lightbox__image {
    display: block;

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

    width: auto;
    height: auto;

    object-fit: contain;
}


/* LIGHTBOX CLOSE */

.arhio-texture-lightbox__close {
    position: absolute;

    top: 26px;
    right: 30px;

    width: 50px;
    height: 50px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.55);

    background: transparent;

    color: #fff;

    font-size: 32px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;
}


/* LIGHTBOX NAV */

.arhio-texture-lightbox__nav {
    position: absolute;

    top: 50%;

    width: 54px;
    height: 54px;

    display: flex;

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

    padding: 0;

    border: 1px solid rgba(255,255,255,.55);

    border-radius: 0;

    background: rgba(24,22,21,.25);

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    transform: translateY(-50%);
}


.arhio-texture-lightbox__nav--prev {
    left: 28px;
}


.arhio-texture-lightbox__nav--next {
    right: 28px;
}


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

@media (max-width: 1100px) {

    .arhio-production__top {
        gap: 50px;
    }


    .arhio-production__title {
        font-size: 38px;
    }


    .arhio-textures__item {
        flex-basis:
            calc((100% - 54px) / 4);
    }

}


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

@media (max-width: 700px) {

    .arhio-production {
        padding:
            70px
            0
            78px;
    }


    .arhio-production__inner {
        width:
            calc(100% - 38px);
    }


    .arhio-production__top {
        grid-template-columns:
            1fr;

        gap:
            42px;

        margin-bottom:
            55px;
    }


    .arhio-production__title {
        font-size:
            33px;
    }


    .arhio-production__button {
        width:
            100%;

        padding-left:
            16px;

        padding-right:
            16px;
    }


    .arhio-textures {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px;

        gap:
            10px;
    }


    .arhio-textures__arrow {
        width:
            42px;

        height:
            42px;
    }


    .arhio-textures__track {
        gap:
            12px;
    }


    .arhio-textures__item {
        flex-basis:
            calc((100% - 12px) / 2);
    }


    .arhio-texture-lightbox__image-wrap {
        width:
            calc(100vw - 90px);

        height:
            75vh;
    }


    .arhio-texture-lightbox__nav {
        width:
            40px;

        height:
            48px;
    }


    .arhio-texture-lightbox__nav--prev {
        left:
            8px;
    }


    .arhio-texture-lightbox__nav--next {
        right:
            8px;
    }

}



/* ==================================================
   BLOCK 10 — визуальная коррекция по референсу
   ================================================== */

.arhio-production {
    padding: 92px 0 92px;

    background: #2d2a2a;
    color: #f5efe7;
}


.arhio-production__top {
    grid-template-columns:
        minmax(360px, .68fr)
        minmax(0, 1.32fr);

    gap: 70px;

    align-items: center;

    margin-bottom: 48px;
}


.arhio-production__title {
    color: #ffffff;
}


.arhio-production__text {
    color: rgba(255,255,255,.92);
}


/* Кнопка остаётся под текстом слева */

.arhio-production__button {
    border-color: rgba(245,239,231,.72);
    color: #f5efe7;
}


.arhio-production__button:hover {
    background: #f5efe7;
    color: #2d2a2a;
}


/* Видео на тёмном фоне */

.arhio-production__video-placeholder {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 55%
        ),
        #1c232a;
}


/* ==================================================
   ФАКТУРЫ
   ================================================== */

/*
   Стрелки больше не занимают место слева/справа.
   Поэтому viewport фактур занимает ВСЮ ширину контейнера.
*/

.arhio-textures {
    position: relative;

    display: block;

    width: 100%;

    padding-top: 62px;
}


.arhio-textures__viewport {
    width: 100%;
    overflow: hidden;
}


.arhio-textures__track {
    gap: 34px;
}


/*
   Маленькие квадратные образцы,
   близкие по размеру к исходному скриншоту.
*/

.arhio-textures__item {
    flex: 0 0 145px;

    width: 145px;
    height: 145px;

    aspect-ratio: auto;

    background: #242222;
}


.arhio-textures__item img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==================================================
   СТРЕЛКИ — НАД СЛАЙДЕРОМ СПРАВА
   ================================================== */

.arhio-textures__arrow {
    position: absolute;

    top: 0;

    z-index: 5;

    width: 48px;
    height: 48px;

    border:
        1px solid rgba(245,239,231,.60);

    background: transparent;

    color: #f5efe7;

    font-size: 21px;

    border-radius: 0;
}


.arhio-textures__arrow--prev {
    left: auto;
    right: 60px;
}


.arhio-textures__arrow--next {
    left: auto;
    right: 0;
}


.arhio-textures__arrow:hover {
    background: #f5efe7;
    color: #2d2a2a;
}


/* LIGHTBOX оставляем тёмным */

.arhio-texture-lightbox {
    background: rgba(20,19,19,.96);
}


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

@media (max-width: 700px) {

    .arhio-production__top {
        grid-template-columns: 1fr;

        gap: 40px;

        margin-bottom: 45px;
    }


    .arhio-textures {
        grid-template-columns: none;

        padding-top: 54px;
    }


    .arhio-textures__track {
        gap: 14px;
    }


    .arhio-textures__item {
        flex-basis: 118px;

        width: 118px;
        height: 118px;
    }


    .arhio-textures__arrow {
        width: 42px;
        height: 42px;
    }


    .arhio-textures__arrow--prev {
        right: 52px;
    }

}



/* ==================================================
   BLOCK 11 — FAQ
   ================================================== */

.arhio-faq {
    width: 100%;

    padding:
        112px
        0
        128px;

    background:
        #f5efe7;

    color:
        #342f2c;
}


.arhio-faq__inner {
    width:
        calc(100% - 84px);

    max-width:
        1420px;

    margin:
        0 auto;
}


/* ==================================================
   TITLE
   ================================================== */

.arhio-faq__title {
    margin:
        0
        0
        72px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        48px;

    line-height:
        1.08;

    font-weight:
        500;

    letter-spacing:
        -.025em;

    color:
        #342f2c;
}


/* ==================================================
   LIST
   ================================================== */

.arhio-faq__list {
    width:
        100%;

    border-top:
        1px solid rgba(52,47,44,.10);
}


.arhio-faq__item {
    margin:
        0;

    border-bottom:
        1px solid rgba(52,47,44,.10);
}


/* убираем системный треугольник */

.arhio-faq__question {
    list-style:
        none;

    position:
        relative;

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    padding:
        20px
        0;

    cursor:
        pointer;

    font-size:
        20px;

    line-height:
        1.35;

    font-weight:
        500;

    color:
        #342f2c;
}


.arhio-faq__question::-webkit-details-marker {
    display:
        none;
}


.arhio-faq__question::marker {
    display:
        none;

    content:
        "";
}


/* ==================================================
   PLUS
   ================================================== */

.arhio-faq__plus {
    position:
        relative;

    flex:
        0
        0
        42px;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    background:
        #ffffff;
}


.arhio-faq__plus::before,
.arhio-faq__plus::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    background:
        #342f2c;

    transform:
        translate(-50%, -50%);

    transition:
        transform .22s ease,
        opacity .22s ease;
}


.arhio-faq__plus::before {
    width:
        18px;

    height:
        1px;
}


.arhio-faq__plus::after {
    width:
        1px;

    height:
        18px;
}


/* при открытии плюс превращается в минус */

.arhio-faq__item[open]
.arhio-faq__plus::after {
    opacity:
        0;

    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* ==================================================
   ANSWER
   ================================================== */

.arhio-faq__answer {
    max-width:
        860px;

    padding:
        0
        90px
        28px
        0;

    color:
        #5a544f;

    font-size:
        16px;

    line-height:
        1.6;
}


.arhio-faq__answer p {
    margin:
        0
        0
        10px;
}


.arhio-faq__answer p:last-child {
    margin-bottom:
        0;
}


/* ==================================================
   HOVER
   ================================================== */

@media (hover: hover) {

    .arhio-faq__question:hover {
        color:
            #6b625c;
    }

}


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

@media (max-width: 700px) {

    .arhio-faq {
        padding:
            70px
            0
            82px;
    }


    .arhio-faq__inner {
        width:
            calc(100% - 38px);
    }


    .arhio-faq__title {
        margin-bottom:
            45px;

        font-size:
            34px;
    }


    .arhio-faq__question {
        min-height:
            72px;

        gap:
            20px;

        padding:
            18px
            0;

        font-size:
            17px;
    }


    .arhio-faq__plus {
        flex-basis:
            38px;

        width:
            38px;

        height:
            38px;
    }


    .arhio-faq__answer {
        max-width:
            none;

        padding:
            0
            58px
            24px
            0;

        font-size:
            15px;
    }

}



/* ==================================================
   BLOCK 12 — BLOG
   ================================================== */

.arhio-blog {
    width: 100%;

    padding:
        105px
        0
        112px;

    background: #ffffff;
    color: #342f2c;
}


.arhio-blog__inner {
    width: calc(100% - 84px);
    max-width: 1420px;

    margin: 0 auto;
}


/* TITLE */

.arhio-blog__title {
    margin:
        0
        0
        72px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 48px;
    line-height: 1.08;

    font-weight: 500;
    letter-spacing: -.025em;

    color: #342f2c;
}


/* ==================================================
   GRID
   ================================================== */

.arhio-blog__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        38px;

    align-items: stretch;
}


/* CARD */

.arhio-blog__card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: #f2e8dc;
}


.arhio-blog__card[hidden] {
    display: none;
}


/* IMAGE */

.arhio-blog__image-link {
    display: block;

    width: 100%;

    color: inherit;
    text-decoration: none;

    overflow: hidden;
}


.arhio-blog__image {
    width: 100%;

    aspect-ratio: 1.72 / 1;

    background-size: cover;
    background-position: center;

    transition:
        transform .35s ease;
}


/*
   Пока используем аккуратные нейтральные изображения-заглушки.
   Когда подключим блог к Bitrix, сюда будет приходить
   PREVIEW_PICTURE каждой статьи.
*/

.arhio-blog__image--01 {
    background:
        linear-gradient(
            120deg,
            #ded2c7,
            #bea899 52%,
            #887c76
        );
}


.arhio-blog__image--02 {
    background:
        linear-gradient(
            120deg,
            #8f9090,
            #5f6264 55%,
            #cbc5bd
        );
}


.arhio-blog__image--03 {
    background:
        linear-gradient(
            120deg,
            #c9beb0,
            #a69b93 55%,
            #6e6967
        );
}


.arhio-blog__image--04 {
    background:
        linear-gradient(
            125deg,
            #cfc6bb,
            #807872
        );
}


.arhio-blog__image--05 {
    background:
        linear-gradient(
            125deg,
            #b8aea4,
            #686462
        );
}


.arhio-blog__image--06 {
    background:
        linear-gradient(
            125deg,
            #ddd2c4,
            #9d8f83
        );
}


.arhio-blog__image-link:hover
.arhio-blog__image {
    transform: scale(1.025);
}


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

.arhio-blog__content {
    flex: 1;

    padding:
        27px
        29px
        31px;
}


.arhio-blog__card-title {
    margin:
        0
        0
        12px;

    font-size: 19px;
    line-height: 1.36;

    font-weight: 600;

    color: #342f2c;
}


.arhio-blog__card-title a {
    color: inherit;
    text-decoration: none;
}


.arhio-blog__excerpt {
    margin: 0;

    font-size: 15px;
    line-height: 1.47;

    color: #514b47;
}


/* ==================================================
   BUTTONS
   ================================================== */

.arhio-blog__actions {
    display: flex;

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

    gap: 20px;

    margin-top: 72px;
}


.arhio-blog__button {
    min-width: 230px;
    min-height: 56px;

    display: inline-flex;

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

    padding:
        0
        25px;

    border:
        1px solid rgba(52,47,44,.70);

    border-radius: 0;

    background: transparent;

    color: #342f2c;

    text-decoration: none;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1;

    font-weight: 600;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.arhio-blog__button:hover {
    background: #342f2c;
    color: #ffffff;
}


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

@media (max-width: 1000px) {

    .arhio-blog__grid {
        gap: 24px;
    }


    .arhio-blog__content {
        padding:
            23px
            23px
            27px;
    }

}


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

@media (max-width: 700px) {

    .arhio-blog {
        padding:
            70px
            0
            82px;
    }


    .arhio-blog__inner {
        width:
            calc(100% - 38px);
    }


    .arhio-blog__title {
        margin-bottom:
            45px;

        font-size:
            34px;
    }


    .arhio-blog__grid {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .arhio-blog__actions {
        flex-direction:
            column;

        gap:
            12px;

        margin-top:
            45px;
    }


    .arhio-blog__button {
        width:
            100%;
    }

}


/* BLOCK 13 — полный набор социальных сетей */

.arhio-footer-contact__social {
    flex-wrap: wrap;
}

.arhio-footer-contact__social a {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

.arhio-footer-contact__social svg {
    width: 27px;
    height: 27px;
}

.arhio-footer-contact__rutube span {
    font-size: 25px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}



/* ==================================================
   BLOCK 13 — FINAL CONTACT / FOOTER
   ================================================== */

.arhio-footer-contact {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    min-height: 940px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}


/* LEFT */

.arhio-footer-contact__left {
    background: #2d2a2a;
    color: #f5efe7;
}


.arhio-footer-contact__left-inner {
    min-height: 940px;

    display: flex;
    flex-direction: column;

    padding:
        90px
        72px
        58px;
}


/* LOGO */

.arhio-footer-contact__logo {
    width: 330px;

    display: flex;
    flex-direction: column;

    align-items: center;

    color: #fff;
    text-decoration: none;

    margin-bottom: 70px;
}


.arhio-footer-contact__logo-mark {
    width: 90px;
    height: 90px;

    margin-bottom: 13px;
}


.arhio-footer-contact__brand {
    font-size: 52px;
    line-height: 1;

    font-weight: 300;

    letter-spacing: .38em;

    margin-left: .38em;
}


.arhio-footer-contact__tagline {
    margin-top: 20px;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .34em;
}


.arhio-footer-contact__since {
    margin-top: 18px;

    font-size: 12px;

    letter-spacing: .38em;
}


/* NAV */

.arhio-footer-contact__nav {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 28px;

    margin-bottom: 55px;
}


.arhio-footer-contact__nav a {
    color: #fff;
    text-decoration: none;

    font-size: 15px;
    line-height: 1;

    font-weight: 600;

    transition: opacity .2s ease;
}


.arhio-footer-contact__nav a:hover {
    opacity: .62;
}


/* CONTACTS */

.arhio-footer-contact__contacts {
    width: min(100%, 480px);

    display: flex;
    flex-direction: column;

    gap: 20px;

    margin-top: auto;
}


.arhio-footer-contact__contacts a {
    min-height: 72px;

    display: flex;

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

    border:
        1px solid rgba(255,255,255,.72);

    color: #fff;

    text-decoration: none;

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

    transition:
        background .2s ease,
        color .2s ease;
}


.arhio-footer-contact__contacts a:hover {
    background: #f5efe7;
    color: #2d2a2a;
}


/* SOCIAL */

.arhio-footer-contact__social {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 42px;
}


.arhio-footer-contact__social a {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    display: flex;

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

    border:
        1px solid rgba(255,255,255,.72);

    color: #fff;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease;
}


.arhio-footer-contact__social a:hover {
    background: #f5efe7;
    color: #2d2a2a;
}


.arhio-footer-contact__social svg {
    width: 27px;
    height: 27px;
}


.arhio-footer-contact__social-text {
    font-size: 18px;
    font-weight: 700;
}


.arhio-footer-contact__rutube {
    font-size: 25px;
    font-weight: 700;
    font-style: italic;
}


/* COPYRIGHT */

.arhio-footer-contact__copyright {
    margin-top: 70px;

    font-size: 15px;

    line-height: 1.6;

    color:
        rgba(255,255,255,.72);
}



/* RIGHT */

.arhio-footer-contact__right {
    background: #f5efe7;
    color: #342f2c;
}


.arhio-footer-contact__right-inner {
    min-height: 940px;

    display: flex;
    flex-direction: column;

    padding:
        100px
        82px
        58px;
}


/* FORM HEAD */

.arhio-footer-contact__form-head h2 {
    margin:
        0
        0
        42px;

    font-size: 53px;

    line-height: 1.02;

    font-weight: 500;

    letter-spacing: -.03em;
}


.arhio-footer-contact__form-head p {
    max-width: 560px;

    margin: 0;

    font-size: 20px;

    line-height: 1.5;

    color: #514b47;
}


/* FORM */

.arhio-footer-contact__form {
    width: 100%;

    margin-top: 82px;
}


.arhio-footer-contact__field {
    display: block;

    margin-bottom: 34px;

    border-bottom:
        1px solid rgba(52,47,44,.14);
}


.arhio-footer-contact__field > span {
    display: block;

    margin-bottom: 12px;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .03em;

    color:
        rgba(52,47,44,.52);
}


.arhio-footer-contact__field input {
    width: 100%;

    height: 52px;

    border: 0;
    outline: 0;

    padding: 0;

    background: transparent;

    color: #342f2c;

    font-family: inherit;

    font-size: 22px;
}


/* PHONE */

.arhio-footer-contact__phone {
    display: flex;

    align-items: center;

    min-height: 58px;
}


.arhio-footer-contact__country {
    margin-right: 12px;

    font-size: 20px;
}


.arhio-footer-contact__prefix {
    margin-right: 8px;

    font-size: 23px;

    font-weight: 600;
}


.arhio-footer-contact__phone input {
    flex: 1;

    min-width: 0;
}


.arhio-footer-contact__phone input::placeholder {
    color:
        rgba(52,47,44,.44);
}


/* CHECKS */

.arhio-footer-contact__check {
    position: relative;

    display: grid;

    grid-template-columns:
        26px
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;

    margin-bottom: 24px;

    cursor: pointer;

    font-size: 15px;

    line-height: 1.45;

    color: #514b47;
}


.arhio-footer-contact__check input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.arhio-footer-contact__checkbox {
    width: 26px;
    height: 26px;

    border:
        1px solid rgba(52,47,44,.62);

    margin-top: 1px;
}


.arhio-footer-contact__check input:checked
+ .arhio-footer-contact__checkbox {
    position: relative;

    background: #342f2c;
}


.arhio-footer-contact__check input:checked
+ .arhio-footer-contact__checkbox::after {
    content: "";

    position: absolute;

    left: 8px;
    top: 4px;

    width: 7px;
    height: 12px;

    border: solid #fff;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


.arhio-footer-contact__check a {
    color: inherit;

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* SUBMIT */

.arhio-footer-contact__submit {
    width: 100%;

    min-height: 74px;

    margin-top: 12px;

    border:
        1px solid #342f2c;

    background: transparent;

    color: #342f2c;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.arhio-footer-contact__submit:hover {
    background: #342f2c;
    color: #f5efe7;
}


/* LEGAL */

.arhio-footer-contact__legal {
    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-top: auto;

    padding-top: 65px;

    font-size: 15px;

    line-height: 1.4;

    color: #514b47;
}


.arhio-footer-contact__legal a {
    color: inherit;
    text-decoration: none;
}


/* BACK TO TOP */

.arhio-backtop {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 1000;

    width: 54px;
    height: 54px;

    display: flex;

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

    border: 0;

    background: #342f2c;

    color: #fff;

    font-size: 27px;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}


.arhio-backtop.is-visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* TABLET */

@media (max-width: 1100px) {

    .arhio-footer-contact__left-inner,
    .arhio-footer-contact__right-inner {
        padding-left: 48px;
        padding-right: 48px;
    }


    .arhio-footer-contact__form-head h2 {
        font-size: 45px;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .arhio-footer-contact {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .arhio-footer-contact__right {
        order: 1;
    }


    .arhio-footer-contact__left {
        order: 2;
    }


    .arhio-footer-contact__left-inner,
    .arhio-footer-contact__right-inner {
        min-height: 0;

        padding:
            70px
            19px;
    }


    .arhio-footer-contact__form-head h2 {
        font-size: 40px;
    }


    .arhio-footer-contact__form-head p {
        font-size: 17px;
    }


    .arhio-footer-contact__form {
        margin-top: 55px;
    }


    .arhio-footer-contact__logo {
        width: 100%;

        margin-bottom: 60px;
    }


    .arhio-footer-contact__brand {
        font-size: 42px;
    }


    .arhio-footer-contact__contacts {
        width: 100%;

        margin-top: 45px;
    }


    .arhio-footer-contact__copyright {
        margin-top: 60px;
    }


    .arhio-backtop {
        right: 14px;
        bottom: 14px;

        width: 48px;
        height: 48px;
    }

}

/* ==================================================
   BLOCK 02 — ARHIO REVEAL
   FINAL PHOTO CONTINUATION
   ================================================== */


.arhio-about {
    position: relative;

    overflow: hidden;

    padding-top:
        clamp(300px, 18vw, 345px);
}


/* ==================================================
   ЗОНА ПРОДОЛЖЕНИЯ ФОТОГРАФИИ
   ================================================== */

.arhio-about__arhio-reveal {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    z-index: 10;

    height:
        calc(
            clamp(245px, 14.4vw, 275px)
            + 5px
        );

    overflow: hidden;

    pointer-events: none;

    /*
       Фон нужен только как страховка
       до загрузки фотографии.
    */
    background: #2d2a2a;
}


/* ==================================================
   САМА ФОТОГРАФИЯ
   ================================================== */

.arhio-about__arhio-reveal::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background-image:
        var(
            --arhio-continuation-image,
            none
        );

    background-repeat:
        no-repeat;

    background-size:
        var(
            --arhio-continuation-size,
            cover
        );

    background-position:
        var(
            --arhio-continuation-position,
            center center
        );

    /*
       ВАЖНО.

       Верх фотографии остаётся точно
       на прежнем месте и продолжает HERO.

       Но нижнюю часть растягиваем,
       чтобы исходное изображение
       больше не заканчивалось раньше
       зоны с ARHIO.

       Благодаря transform-origin: top
       верхний стык фотографии НЕ СДВИГАЕТСЯ.
    */

    transform:
        scaleY(1.24);

    transform-origin:
        center top;

    will-change:
        transform;
}


/* ==================================================
   ТОЧНОЕ ПРОДОЛЖЕНИЕ ТЁМНОЙ ПОЛОВИНЫ HERO
   ================================================== */

.arhio-about__arhio-reveal::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left:
        var(
            --arhio-overlay-left,
            0%
        );

    width:
        var(
            --arhio-overlay-width,
            50%
        );

    z-index: 2;

    background-color:
        var(
            --arhio-overlay-color,
            rgba(34,34,33,.84)
        );

    background-image:
        var(
            --arhio-overlay-image,
            none
        );

    background-repeat:
        var(
            --arhio-overlay-repeat,
            no-repeat
        );

    background-size:
        var(
            --arhio-overlay-size,
            auto
        );

    background-position:
        var(
            --arhio-overlay-position,
            0 0
        );

    opacity:
        var(
            --arhio-overlay-opacity,
            1
        );

    pointer-events: none;
}


/* ==================================================
   БОЛЬШОЕ ARHIO
   ================================================== */

.arhio-about__arhio-word {
    position: absolute;

    z-index: 3;

    left: 2.2%;
    right: 2.2%;

    /*
       Оставляем удачную посадку:
       буквы касаются нижней белой границы.
    */
    bottom: -.082em;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    color: #ffffff;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    /*
       Оставляем уже утверждённую толщину.
    */
    font-weight: 400;

    font-size:
        clamp(205px, 16.5vw, 300px);

    line-height: .82;

    letter-spacing: 0;

    transform:
        translate3d(
            0,
            var(--arhio-about-word-y, 115%),
            0
        );

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

    text-shadow:
        0 2px 18px
        rgba(0,0,0,.12);

    will-change:
        transform;
}


.arhio-about__arhio-word span {
    display: block;

    flex: 0 0 auto;

    /*
       Никаких отдельных смещений O
       больше нет.
    */
    transform: none;
}


/* ==================================================
   ОСНОВНОЙ КОНТЕНТ BLOCK 02
   ================================================== */

.arhio-about__content,
.arhio-about__gallery {
    position: relative;

    /*
       Весь reveal находится выше обычного
       содержимого второго блока.
       Поэтому белый фон больше не может
       преждевременно перекрыть буквы.
    */
    z-index: 1;
}


/* ==================================================
   СРЕДНИЕ ЭКРАНЫ
   ================================================== */

@media (max-width: 1400px) {

    .arhio-about__arhio-word {
        left: 2%;
        right: 2%;

        font-size:
            clamp(185px, 16vw, 265px);
    }

}


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

@media (max-width: 900px) {

    .arhio-about {
        padding-top: 190px;
    }


    .arhio-about__arhio-reveal {
        height: 155px;
    }


    .arhio-about__arhio-reveal::before {
        transform: none;
    }


    .arhio-about__arhio-word {
        left: 4%;
        right: 4%;

        bottom: -.05em;

        font-size: 26vw;

        font-weight: 400;

        transform:
            translate3d(0,0,0);
    }

}



/* ==================================================
   GLOBAL — STICKY HORIZONTAL NAV
   появляется со второго экрана
   ================================================== */

.arhio-sticky-nav {
    position: fixed;

    left: 0;
    right: 0;
    top: 0;

    z-index: 9000;

    height: 74px;

    display: flex;
    align-items: center;

    background:
        rgba(245, 239, 231, .97);

    border-bottom:
        1px solid rgba(52, 47, 44, .12);

    transform:
        translate3d(0, -105%, 0);

    opacity: 0;
    visibility: hidden;

    transition:
        transform .32s ease,
        opacity .25s ease,
        visibility .32s ease;

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


.arhio-sticky-nav.is-visible {
    transform:
        translate3d(0, 0, 0);

    opacity: 1;
    visibility: visible;
}


.arhio-sticky-nav__inner {
    width:
        calc(100% - 84px);

    max-width:
        1660px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        42px;
}


/* ==================================================
   LOGO
   ================================================== */

.arhio-sticky-nav__logo {
    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    color:
        #342f2c;

    text-decoration:
        none;
}


.arhio-sticky-nav__logo img {
    display:
        block;

    width:
        74px;

    height:
        auto;
}


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

.arhio-sticky-nav__links {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        clamp(20px, 2.2vw, 42px);

    margin-left:
        auto;
}


.arhio-sticky-nav__links a {
    position:
        relative;

    color:
        #342f2c;

    text-decoration:
        none;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        .025em;

    white-space:
        nowrap;

    transition:
        opacity .2s ease;
}


.arhio-sticky-nav__links a:hover {
    opacity:
        .55;
}


/*
   Маленькая линия под пунктом.
*/

.arhio-sticky-nav__links a::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        100%;

    bottom:
        -7px;

    height:
        1px;

    background:
        #342f2c;

    transition:
        right .22s ease;
}


.arhio-sticky-nav__links a:hover::after {
    right:
        0;
}


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

@media (max-width: 1150px) {

    .arhio-sticky-nav__inner {
        width:
            calc(100% - 48px);

        gap:
            25px;
    }


    .arhio-sticky-nav__links {
        gap:
            18px;
    }


    .arhio-sticky-nav__links a {
        font-size:
            11px;
    }


    .arhio-sticky-nav__logo img {
        width:
            62px;
    }

}


/*
   Мобильную навигацию позже делаем отдельно.
   Пока горизонтальное меню на телефоне скрываем,
   чтобы оно не ломало экран.
*/

@media (max-width: 800px) {

    .arhio-sticky-nav {
        display:
            none;
    }

}



/* ==================================================
   STICKY NAV — DARK ORIGINAL STYLE
   ================================================== */

.arhio-sticky-nav {
    position: fixed;

    left: 0;
    right: 0;
    top: 0;

    z-index: 9000;

    height: 68px;

    display: flex;
    align-items: center;

    background:
        rgba(45,42,42,.97);

    border: 0;

    box-shadow:
        0 1px 0
        rgba(255,255,255,.05);

    transform:
        translate3d(0,-105%,0);

    opacity: 0;
    visibility: hidden;

    transition:
        transform .30s ease,
        opacity .22s ease,
        visibility .30s ease;

    -webkit-backdrop-filter:
        blur(7px);

    backdrop-filter:
        blur(7px);
}


.arhio-sticky-nav.is-visible {
    transform:
        translate3d(0,0,0);

    opacity: 1;
    visibility: visible;
}


/* ==================================================
   INNER
   ================================================== */

.arhio-sticky-nav__inner {
    width:
        calc(100% - 48px);

    max-width:
        none;

    height: 100%;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        190px
        minmax(0,1fr)
        190px;

    align-items: center;

    column-gap: 30px;
}


/* ==================================================
   LOGO
   ================================================== */

.arhio-sticky-nav__logo {
    display: flex;

    align-items: center;

    justify-self: start;

    gap: 13px;

    color: #ffffff;

    text-decoration: none;
}


.arhio-sticky-nav__mark {
    display: block;

    width: 34px;
    height: 42px;

    flex: 0 0 auto;
}


.arhio-sticky-nav__brand {
    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: .43em;

    margin-right: -.43em;

    color: #ffffff;
}


/* ==================================================
   LINKS
   ================================================== */

.arhio-sticky-nav__links {
    min-width: 0;

    display: flex;

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

    gap:
        clamp(22px, 2.2vw, 46px);

    margin: 0;

    padding: 0;
}


.arhio-sticky-nav__links a {
    position: relative;

    color:
        rgba(255,255,255,.94);

    text-decoration: none;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .01em;

    white-space: nowrap;

    transition:
        opacity .20s ease;
}


.arhio-sticky-nav__links a:hover {
    opacity: .58;
}


/*
   Убираем подчёркивание,
   которое было в первой версии меню.
*/

.arhio-sticky-nav__links a::after {
    display: none !important;
}


/* ==================================================
   PHONE
   ================================================== */

.arhio-sticky-nav__phone {
    justify-self: end;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    transition:
        opacity .20s ease;
}


.arhio-sticky-nav__phone:hover {
    opacity: .62;
}


/* ==================================================
   DESKTOP — SMALLER
   ================================================== */

@media (max-width: 1500px) {

    .arhio-sticky-nav__inner {
        grid-template-columns:
            165px
            minmax(0,1fr)
            165px;

        column-gap: 20px;
    }


    .arhio-sticky-nav__links {
        gap:
            clamp(16px, 1.55vw, 30px);
    }


    .arhio-sticky-nav__links a {
        font-size: 11px;
    }


    .arhio-sticky-nav__phone {
        font-size: 12px;
    }

}


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

@media (max-width: 1180px) {

    .arhio-sticky-nav__inner {
        width:
            calc(100% - 30px);

        grid-template-columns:
            135px
            minmax(0,1fr)
            135px;

        column-gap: 14px;
    }


    .arhio-sticky-nav__mark {
        width: 28px;
        height: 34px;
    }


    .arhio-sticky-nav__brand {
        font-size: 14px;
    }


    .arhio-sticky-nav__links {
        gap: 13px;
    }


    .arhio-sticky-nav__links a {
        font-size: 10px;
    }


    .arhio-sticky-nav__phone {
        font-size: 10px;
    }

}


/*
   Мобильное меню позже делаем отдельно.
*/

@media (max-width: 900px) {

    .arhio-sticky-nav {
        display: none;
    }

}

/* ==================================================
   BLOCK 04 — MATERIAL FINAL TUNING V2
   ================================================== */


/* ==================================================
   1. ЦИФРЫ УБИРАЕМ, ЛИНИЮ СОХРАНЯЕМ
   ================================================== */

/*
   Элемент number НЕ скрываем.

   Вместо "01, 02..." превращаем его
   непосредственно в тонкую линию.
*/

.arhio-material__number {
    display: block !important;

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

    margin:
        10px
        0
        24px !important;

    padding: 0 !important;

    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 0 !important;

    color: transparent !important;

    border: 0 !important;
    border-top:
        1px solid rgba(239,229,217,.22) !important;
}


/* ==================================================
   2. ЛИНИЮ ПОДНИМАЕМ БЛИЖЕ К ИКОНКЕ
   ================================================== */

/*
   Реальный контейнер изображения называется visual.
   Уменьшаем пространство между иконкой и линией.
*/

.arhio-material__visual {
    margin-bottom: 0 !important;
}


.arhio-material__icon {
    margin-bottom: 0 !important;
}


/* ==================================================
   3. УБИРАЕМ ОШИБОЧНЫЙ ROW-GAP
   ================================================== */

/*
   В исходной сетке отдельного gap между рядами
   вообще не было.

   Моя предыдущая правка добавила 65–90px,
   поэтому расстояние визуально выросло.
*/

.arhio-material__grid {
    row-gap: 0 !important;
}


/* ==================================================
   4. СОКРАЩАЕМ РАССТОЯНИЕ МЕЖДУ РЯДАМИ
   ================================================== */

/*
   Было:

   верхний ряд:
   padding-bottom 62px

   нижний ряд:
   padding-top 46px

   Итого около 108px.


   Делаем:

   36px + 36px = 72px.

   То есть расстояние сокращается
   примерно ровно в 1.5 раза.
*/


/* Только верхний ряд */

.arhio-material__card:nth-child(-n+4) {
    padding-bottom: 36px !important;
}


/* Только нижний ряд */

.arhio-material__card:nth-child(n+5) {
    padding-top: 36px !important;
}


/*
   Нижний внутренний отступ второго ряда
   оставляем исходным — он отвечает уже
   за воздух внизу всего блока, а не между рядами.
*/


/* ==================================================
   5. НА ВСЯКИЙ СЛУЧАЙ НЕ ВОЗВРАЩАЕМ
   СТАРЫЕ РАЗДЕЛИТЕЛИ КАРТОЧЕК
   ================================================== */

.arhio-material__card,
.arhio-material__card:nth-child(4n),
.arhio-material__card:nth-child(2n),
.arhio-material__card:nth-child(n+5) {
    border-right: 0 !important;
    border-top: 0 !important;
}


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

@media (max-width: 900px) {

    .arhio-material__grid {
        row-gap: 0 !important;
    }


    .arhio-material__number {
        margin:
            8px
            0
            20px !important;
    }


    .arhio-material__card:nth-child(-n+4),
    .arhio-material__card:nth-child(n+5) {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

}



/* ==================================================
   FASAD KOTTEDZHA — BLOCK 01
   ================================================== */


/* ==================================================
   FIXED NAV
   ================================================== */

.arhio-private-nav {
    position: fixed;

    left: 0;
    right: 0;
    top: 0;

    z-index: 9500;

    height: 72px;

    display: flex;
    align-items: center;

    background:
        #2d2a2a;

    color:
        #ffffff;
}


.arhio-private-nav__inner {
    width:
        calc(100% - 64px);

    height:
        100%;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        190px
        minmax(0,1fr)
        190px;

    align-items:
        center;

    column-gap:
        30px;
}


/* LOGO */

.arhio-private-nav__logo {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #ffffff;

    text-decoration: none;
}


.arhio-private-nav__mark {
    width: 34px;
    height: 42px;

    flex: 0 0 auto;
}


.arhio-private-nav__brand {
    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1;

    font-weight: 300;

    letter-spacing:
        .43em;

    margin-right:
        -.43em;
}


/* MENU */

.arhio-private-nav__links {
    display: flex;

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

    gap:
        clamp(20px, 2vw, 42px);

    min-width: 0;
}


.arhio-private-nav__links a {
    color:
        rgba(255,255,255,.94);

    text-decoration: none;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    transition:
        opacity .2s ease;
}


.arhio-private-nav__links a:hover {
    opacity: .58;
}


/* PHONE */

.arhio-private-nav__phone {
    justify-self: end;

    min-width: 166px;
    height: 38px;

    display: flex;

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

    border:
        1px solid rgba(255,255,255,.45);

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    transition:
        background .2s ease,
        color .2s ease;
}


.arhio-private-nav__phone:hover {
    background: #f5efe7;
    color: #2d2a2a;
}


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

.arhio-private-hero {
    width: 100%;

    background:
        #2d2a2a;
}


.arhio-private-hero__image {
    position: relative;

    width: 100%;

    min-height:
        calc(100vh - 72px);

    margin-top:
        0;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-image:
        url("/local/templates/arhio_new/./pages/fasad-kottedzha/assets/hero.png");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center center;
}


/* Общая затемняющая вуаль */

.arhio-private-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        rgba(24,20,18,.47);

    pointer-events: none;
}


/* Дополнительное затемнение слева для текста */

.arhio-private-hero__image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(20,18,17,.40) 0%,
            rgba(20,18,17,.22) 45%,
            rgba(20,18,17,.05) 72%,
            rgba(20,18,17,0) 100%
        );

    pointer-events: none;
}


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

.arhio-private-hero__content {
    position: relative;

    z-index: 3;

    width:
        calc(100% - 120px);

    max-width:
        1160px;

    margin:
        0 auto;

    padding:
        75px
        0
        65px;
}


.arhio-private-hero__title {
    max-width:
        760px;

    margin:
        0
        0
        36px;

    color:
        #ffffff;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        clamp(48px, 4vw, 68px);

    line-height:
        1.13;

    font-weight:
        500;

    letter-spacing:
        -.025em;
}


.arhio-private-hero__lead {
    max-width:
        850px;

    margin:
        0
        0
        76px;

    color:
        rgba(255,255,255,.94);

    font-size:
        19px;

    line-height:
        1.55;

    font-weight:
        400;
}


/* ==================================================
   BUTTONS
   ================================================== */

.arhio-private-hero__actions {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap:
        13px;
}


.arhio-private-hero__button {
    width:
        420px;

    min-height:
        58px;

    display: flex;

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

    padding:
        14px
        26px;

    border-radius:
        30px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.2;

    font-weight:
        600;

    text-align:
        center;

    text-decoration:
        none;

    transition:
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}


/* Верхняя кнопка */

.arhio-private-hero__button--filled {
    border:
        1px solid rgba(239,229,217,.70);

    background:
        rgba(239,229,217,.72);

    color:
        #ffffff;

    -webkit-backdrop-filter:
        blur(4px);

    backdrop-filter:
        blur(4px);
}


.arhio-private-hero__button--filled:hover {
    background:
        #efe5d9;

    color:
        #342f2c;
}


/* Нижняя кнопка */

.arhio-private-hero__button--outline {
    border:
        1px solid rgba(255,255,255,.90);

    background:
        rgba(0,0,0,.06);

    color:
        #ffffff;
}


.arhio-private-hero__button--outline:hover {
    background:
        #ffffff;

    color:
        #342f2c;
}


/* ==================================================
   SMALL DESKTOP
   ================================================== */

@media (max-width: 1450px) {

    .arhio-private-nav__inner {
        grid-template-columns:
            165px
            minmax(0,1fr)
            165px;

        column-gap:
            20px;
    }


    .arhio-private-nav__links {
        gap:
            18px;
    }


    .arhio-private-nav__links a {
        font-size:
            10px;
    }


    .arhio-private-hero__content {
        width:
            calc(100% - 90px);
    }

}


/* ==================================================
   MOBILE / TABLET
   Финальную адаптацию сделаем потом
   ================================================== */

@media (max-width: 900px) {

    .arhio-private-nav__links {
        display: none;
    }


    .arhio-private-nav__inner {
        grid-template-columns:
            1fr auto;

        width:
            calc(100% - 38px);
    }


    .arhio-private-nav__phone {
        min-width:
            auto;

        padding:
            0 14px;
    }


    .arhio-private-hero__content {
        width:
            calc(100% - 38px);

        padding:
            70px
            0;
    }


    .arhio-private-hero__title {
        font-size:
            39px;
    }


    .arhio-private-hero__lead {
        margin-bottom:
            50px;

        font-size:
            16px;
    }


    .arhio-private-hero__button {
        width:
            100%;
    }

}

/* ==================================================
   FASAD KOTTEDZHA — HERO SIZE TUNING
   ================================================== */


/* Заголовок немного уменьшаем */

.arhio-private-hero__title {
    max-width: 700px;

    margin-bottom: 31px;

    font-size:
        clamp(43px, 3.45vw, 59px);

    line-height: 1.12;

    font-weight: 500;
}


/* Подзаголовок тоже чуть спокойнее */

.arhio-private-hero__lead {
    max-width: 790px;

    margin-bottom: 62px;

    font-size: 17px;

    line-height: 1.5;
}


/* Кнопки компактнее */

.arhio-private-hero__button {
    width: 390px;

    min-height: 52px;

    padding:
        12px
        23px;

    border-radius: 27px;

    font-size: 13px;

    font-weight: 600;
}


/* Чуть уменьшаем расстояние между кнопками */

.arhio-private-hero__actions {
    gap: 11px;
}


/*
   Сам текстовый блок немного компактнее,
   но положение на фотографии не меняем.
*/

.arhio-private-hero__content {
    padding:
        68px
        0
        58px;
}


/* ==================================================
   SMALL DESKTOP
   ================================================== */

@media (max-width: 1450px) {

    .arhio-private-hero__title {
        font-size:
            clamp(41px, 3.3vw, 54px);
    }


    .arhio-private-hero__lead {
        font-size: 16px;
    }


    .arhio-private-hero__button {
        width: 370px;

        min-height: 50px;

        font-size: 12px;
    }

}


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

@media (max-width: 900px) {

    .arhio-private-hero__title {
        font-size: 35px;
    }


    .arhio-private-hero__lead {
        font-size: 15px;

        margin-bottom: 45px;
    }


    .arhio-private-hero__button {
        width: 100%;

        min-height: 50px;

        font-size: 12px;
    }

}

/* ==================================================
   FASAD KOTTEDZHA — BLOCK 02 FINAL
   WHY CHOOSE US
   ================================================== */


.arhio-cottage-why {
    width: 100%;

    padding:
        105px
        0
        105px;

    background:
        #f7f7f6;

    color:
        #292526;
}


.arhio-cottage-why__inner {
    width:
        calc(100% - 100px);

    max-width:
        1560px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        390px;

    gap:
        72px;

    align-items:
        start;
}


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

.arhio-cottage-why__left {
    min-width:
        0;
}


.arhio-cottage-why__title {
    margin:
        0
        0
        58px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        46px;

    line-height:
        1.08;

    font-weight:
        600;

    letter-spacing:
        -.025em;

    color:
        #292526;
}


/* ==================================================
   GRID
   ================================================== */

.arhio-cottage-why__grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    column-gap:
        82px;

    row-gap:
        54px;
}


.arhio-cottage-why__item {
    min-width:
        0;
}


/* ==================================================
   LARGE BLACK SVG ICONS
   ================================================== */

.arhio-cottage-why__icon {
    width:
        160px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    /*
       Центрируем относительно всей карточки.
    */

    margin:
        0
        auto
        20px;
}


.arhio-cottage-why__icon img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    /*
       НИКАКИХ фильтров.
       SVG уже нарисованы чёрными.
    */

    filter:
        none !important;
}


/* ==================================================
   CARD TEXT
   ================================================== */

.arhio-cottage-why__item-title {
    margin:
        0
        0
        15px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size:
        27px;

    line-height:
        1.12;

    font-weight:
        600;

    color:
        #292526;
}


.arhio-cottage-why__text {
    max-width:
        400px;

    margin:
        0;

    font-size:
        17px;

    line-height:
        1.52;

    font-weight:
        400;

    color:
        #514d4a;
}


.arhio-cottage-why__text strong {
    color:
        #292526;

    font-weight:
        700;
}


/* ==================================================
   BOTTOM HEADLINE
   ================================================== */

.arhio-cottage-why__bottom-title {
    margin:
        70px
        0
        0;

    text-align:
        center;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    /*
       Ровно размер верхнего заголовка блока.
    */

    font-size:
        46px;

    line-height:
        1.12;

    font-weight:
        600;

    letter-spacing:
        -.025em;

    color:
        #292526;
}


/* ==================================================
   TEXTURES
   ================================================== */

.arhio-cottage-why__textures {
    width:
        390px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        24px;

    padding:
        5px
        0;

    align-items:
        stretch;
}


/*
   ВСЕ пять образцов теперь абсолютно одинаковые.
*/

.arhio-cottage-why__textures img {
    display:
        block;

    width:
        390px;

    height:
        155px;

    flex:
        0 0
        155px;

    object-fit:
        cover;

    object-position:
        center;

    background:
        #dedbd7;

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.17);
}


/* ==================================================
   SMALL DESKTOP
   ================================================== */

@media (max-width: 1300px) {

    .arhio-cottage-why__inner {
        grid-template-columns:
            minmax(0,1fr)
            330px;

        gap:
            48px;
    }


    .arhio-cottage-why__textures {
        width:
            330px;
    }


    .arhio-cottage-why__textures img {
        width:
            330px;

        height:
            135px;

        flex-basis:
            135px;
    }


    .arhio-cottage-why__grid {
        column-gap:
            48px;
    }


    .arhio-cottage-why__icon {
        width:
            140px;

        height:
            135px;
    }

}


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

@media (max-width: 900px) {

    .arhio-cottage-why {
        padding:
            70px
            0
            75px;
    }


    .arhio-cottage-why__inner {
        width:
            calc(100% - 38px);

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .arhio-cottage-why__title {
        font-size:
            35px;

        margin-bottom:
            45px;
    }


    .arhio-cottage-why__grid {
        grid-template-columns:
            1fr;

        row-gap:
            42px;
    }


    .arhio-cottage-why__icon {
        width:
            135px;

        height:
            125px;
    }


    .arhio-cottage-why__bottom-title {
        margin-top:
            52px;

        font-size:
            35px;
    }


    .arhio-cottage-why__textures {
        width:
            min(100%,420px);

        margin:
            0 auto;
    }


    .arhio-cottage-why__textures img {
        width:
            100%;

        height:
            145px;

        flex-basis:
            145px;
    }

}



/* ==================================================
   MAIN NAV — SYNC WITH FASAD-KOTTEDZHA
   ================================================== */

/*
   Унифицируем горизонтальную навигацию главной
   с меню страницы /fasad-kottedzha/.

   ВАЖНО:
   поведение sticky/reveal главной сохраняется.
*/


/* --------------------------------------------------
   САМА ПЛАШКА
   -------------------------------------------------- */

.arhio-sticky-nav,
.arhio-main-nav,
.arhio-header-sticky {
    min-height:
        64px !important;

    height:
        64px !important;

    background:
        #2d2a2a !important;
}


/* --------------------------------------------------
   ВНУТРЕННИЙ КОНТЕЙНЕР
   -------------------------------------------------- */

.arhio-sticky-nav__inner,
.arhio-main-nav__inner,
.arhio-header-sticky__inner {
    min-height:
        64px !important;

    height:
        64px !important;

    padding-left:
        28px !important;

    padding-right:
        28px !important;

    box-sizing:
        border-box !important;
}


/* --------------------------------------------------
   ЛОГОТИП
   -------------------------------------------------- */

.arhio-sticky-nav__logo,
.arhio-main-nav__logo,
.arhio-header-sticky__logo {
    height:
        34px !important;

    width:
        auto !important;

    flex:
        0 0 auto !important;
}


.arhio-sticky-nav__logo img,
.arhio-main-nav__logo img,
.arhio-header-sticky__logo img {
    display:
        block !important;

    height:
        34px !important;

    width:
        auto !important;

    object-fit:
        contain !important;
}


/* --------------------------------------------------
   МЕНЮ
   -------------------------------------------------- */

.arhio-sticky-nav__menu,
.arhio-main-nav__menu,
.arhio-header-sticky__menu {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        30px !important;
}


.arhio-sticky-nav__menu a,
.arhio-main-nav__menu a,
.arhio-header-sticky__menu a,
.arhio-sticky-nav__link,
.arhio-main-nav__link,
.arhio-header-sticky__link {
    padding:
        0 !important;

    margin:
        0 !important;

    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;

    font-size:
        12px !important;

    line-height:
        1 !important;

    font-weight:
        600 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;
}


/* --------------------------------------------------
   ТЕЛЕФОН
   -------------------------------------------------- */

.arhio-sticky-nav__phone,
.arhio-main-nav__phone,
.arhio-header-sticky__phone {
    min-width:
        188px !important;

    height:
        44px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    padding:
        0
        18px !important;

    border:
        1px solid
        rgba(255,255,255,.34) !important;

    border-radius:
        0 !important;

    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;

    font-size:
        12px !important;

    line-height:
        1 !important;

    font-weight:
        600 !important;

    white-space:
        nowrap !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;
}


/* --------------------------------------------------
   НЕ ДАЁМ ГЛОБАЛЬНЫМ СТИЛЯМ УВЕЛИЧИВАТЬ
   ЭЛЕМЕНТЫ НА НЕБОЛЬШИХ DESKTOP-ЭКРАНАХ
   -------------------------------------------------- */

@media (max-width: 1450px) {

    .arhio-sticky-nav__menu,
    .arhio-main-nav__menu,
    .arhio-header-sticky__menu {
        gap:
            24px !important;
    }


    .arhio-sticky-nav__menu a,
    .arhio-main-nav__menu a,
    .arhio-header-sticky__menu a,
    .arhio-sticky-nav__link,
    .arhio-main-nav__link,
    .arhio-header-sticky__link {
        font-size:
            11px !important;
    }


    .arhio-sticky-nav__phone,
    .arhio-main-nav__phone,
    .arhio-header-sticky__phone {
        min-width:
            170px !important;

        padding:
            0
            14px !important;

        font-size:
            11px !important;
    }

}


/* ==========================================================
   HOME PRODUCTS — SEO PAGE LINKS
   ========================================================== */

.arhio-products__image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.arhio-products__image-link .arhio-products__image {
    display: block;
    width: 100%;
    height: 100%;
}

.arhio-products__title-link {
    color: inherit;
    text-decoration: none;
}

.arhio-products__title-link:hover {
    opacity: .62;
}

.arhio-products__image-link .arhio-products__image {
    transition: opacity .25s ease;
}

.arhio-products__image-link:hover .arhio-products__image {
    opacity: .88;
}

/* ===== END HOME PRODUCTS SEO LINKS ===== */



/* ===== GLOBAL MOBILE SECTION TITLES START ===== */

@media(max-width:900px){

    .arhio-mobile-section-heading{
        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }

}

/* ===== GLOBAL MOBILE SECTION TITLES END ===== */


/* ===== ARHIO GLOBAL MOBILE CENTERING V2 START ===== */

@media(max-width:900px){

    html body .arhio-global-mobile-section-title{
        display:block !important;

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

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }


    html body .arhio-global-mobile-centered-action{
        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
        justify-content:center !important;
    }

}

/* ===== ARHIO GLOBAL MOBILE CENTERING V2 END ===== */



/* ===== SERVICES MOBILE CENTER FINAL START ===== */

@media(max-width:900px){

    /*
     * Главный заголовок страницы.
     */

    body.arhio-services-mobile-page h1{
        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }


    /*
     * Списки услуг.
     * marker становится INSIDE, поэтому точка
     * центрируется вместе с текстом.
     */

    body.arhio-services-mobile-page main ul,
    body.arhio-services-mobile-page section ul{

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

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;

        list-style-position:inside !important;

        text-align:center !important;
    }


    body.arhio-services-mobile-page main li,
    body.arhio-services-mobile-page section li{

        padding-left:0 !important;

        text-align:center !important;

        list-style-position:inside !important;
    }


    /*
     * Убираем возможные кастомные смещения
     * псевдо-маркеров.
     */

    body.arhio-services-mobile-page main li::marker,
    body.arhio-services-mobile-page section li::marker{
        text-align:center !important;
    }


    /*
     * Подробнее
     */

    body.arhio-services-mobile-page
    .arhio-services-mobile-more{

        display:flex !important;

        width:fit-content !important;
        max-width:calc(100% - 30px) !important;

        margin-left:auto !important;
        margin-right:auto !important;

        align-items:center !important;
        justify-content:center !important;

        text-align:center !important;
    }


    body.arhio-services-mobile-page
    .arhio-services-mobile-more-wrap{

        width:100% !important;

        text-align:center !important;
    }

}

/* ===== SERVICES MOBILE CENTER FINAL END ===== */




/* ===== ARHIO GLOBAL MOBILE BREADCRUMBS FINAL START ===== */

@media(max-width:900px){

    .arhio-gallery-breadcrumbs,
    [data-arhio-global-breadcrumbs]{
        position:relative !important;

        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;

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

        margin-top:
            var(--arhio-mobile-fixed-header-height,60px)
            !important;

        z-index:20 !important;

        background:#fff !important;

        overflow:hidden !important;
    }

    .arhio-gallery-breadcrumbs__inner{
        display:block !important;

        width:calc(100% - 38px) !important;
        max-width:1040px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }
}

/* ===== ARHIO GLOBAL MOBILE BREADCRUMBS FINAL END ===== */

/* ===== CATALOG MOBILE BREADCRUMBS HORIZONTAL SCROLL START ===== */

@media(max-width:900px){

    body.arhio-catalog-mobile-crumbs
    .arhio-gallery-breadcrumbs__inner{

        display:block !important;

        white-space:nowrap !important;

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

        text-overflow:clip !important;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;

        touch-action:pan-x !important;
    }

    body.arhio-catalog-mobile-crumbs
    .arhio-gallery-breadcrumbs__inner::-webkit-scrollbar{
        display:none !important;
    }

}

/* ===== CATALOG MOBILE BREADCRUMBS HORIZONTAL SCROLL END ===== */


/* ===== HOME FINAL CORRECTIONS 2026-09-03 START ===== */

.arhio-texture-lightbox {
    z-index: 120000 !important;
}

body.arhio-consult-modal-open {
    overflow: hidden !important;
}

.arhio-consult-modal {
    position: fixed;
    inset: 0;
    z-index: 130000;

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

    padding: 28px;
    box-sizing: border-box;

    background: rgba(20,19,19,.88);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.arhio-consult-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.arhio-consult-modal__dialog {
    position: relative;

    width: min(100%, 650px);
    max-height: calc(100vh - 56px);
    overflow: auto;

    padding: 54px 58px 48px;
    box-sizing: border-box;

    background: #342f2c;
    color: #f5efe7;
}

.arhio-consult-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;

    width: 42px;
    height: 42px;

    padding: 0;
    border: 0;
    background: transparent;
    color: #f5efe7;

    font: 300 34px/1 Arial, sans-serif;
    cursor: pointer;
}

.arhio-consult-modal__title {
    margin: 0 52px 14px 0;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(27px, 4vw, 42px);
    line-height: 1.08;
    font-weight: 500;
}

.arhio-consult-modal__lead {
    max-width: 520px;
    margin: 0 0 30px;

    font-size: 16px;
    line-height: 1.55;
    color: rgba(245,239,231,.78);
}

.arhio-consult-modal .arhio-request__form {
    max-width: none;
}

.arhio-consult-modal .arhio-request__field {
    margin-bottom: 24px;
}

.arhio-consult-modal .arhio-request__input {
    height: 50px;
    font-size: 19px;
}

.arhio-consult-modal .arhio-request__country {
    font-size: 19px;
}

.arhio-consult-modal .arhio-request__label {
    font-size: 14px;
}

.arhio-consult-modal .arhio-request__check {
    margin-bottom: 16px;
}

.arhio-consult-modal .arhio-request__check-text {
    font-size: 13px;
}

.arhio-consult-modal .arhio-request__submit {
    height: 56px;
    font-size: 15px;
}

@media (max-width: 700px) {

    .arhio-consult-modal {
        padding: 12px;
    }

    .arhio-consult-modal__dialog {
        max-height: calc(100vh - 24px);
        padding: 48px 20px 24px;
    }

    .arhio-consult-modal__title {
        margin-right: 38px;
        font-size: 28px;
    }

    .arhio-consult-modal__lead {
        margin-bottom: 22px;
        font-size: 14px;
    }

    .arhio-consult-modal .arhio-request__field {
        margin-bottom: 17px;
    }

    .arhio-consult-modal .arhio-request__input {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        font-size: 16px !important;
        line-height: 44px !important;
    }

    .arhio-consult-modal .arhio-request__check {
        margin: 8px 0 !important;
    }

    .arhio-consult-modal .arhio-request__submit {
        height: 48px !important;
        min-height: 48px !important;
        margin-top: 12px !important;
        font-size: 13px !important;
    }

}

/* ===== HOME FINAL CORRECTIONS 2026-09-03 END ===== */


/* ===== ARHIO GLOBAL DESKTOP BREADCRUMBS FINAL START ===== */

@media(min-width:901px){

    .arhio-gallery-breadcrumbs,
    [data-arhio-global-breadcrumbs]{
        position:relative !important;

        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;

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

        margin-top:72px !important;

        z-index:20 !important;

        background:#fff !important;

        box-sizing:border-box !important;
    }

}

/* ===== ARHIO GLOBAL DESKTOP BREADCRUMBS FINAL END ===== */

/* End */
/* /local/templates/arhio_new/template_styles.css?1788464107134539 */