@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");

* {
    box-sizing: border-box;
}

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

body.arhio-page {
    background: #ffffff;
    color: #2c2b2b;
    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("./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, 0.9);

    color: #ffffff;
    text-decoration: none;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;

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


.arhio-hero__consult:hover {
    background: #ffffff;
    color: #2c2b2b;
}


/* Правая верхняя белая панель */

.arhio-hero__header {
    position: absolute;
    z-index: 3;

    right: 0;
    top: 0;

    width: 50%;
    height: 290px;

    display: grid;
    grid-template-columns: 32% 68%;

    background: transparent;

    padding:
        33px
        35px
        25px
        27px;
}


/* Меню */

.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;
}


.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;
}


/* Telegram + VK */

.arhio-hero__socials {
    display: flex;
    justify-content: flex-end;

    gap: 5px;

    margin-top: 12px;
}


.arhio-hero__social {
    width: 56px;
    height: 56px;

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

    border: 1px solid #342f2c;
}


.arhio-hero__social img {
    display: block;

    max-width: 23px;
    max-height: 23px;
}


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

.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;
}


/* Социальные сети — единый ряд */
.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;
}

.arhio-hero__social img {
    display: block;
    width: 21px;
    height: 21px;
    object-fit: contain;
}