:root {
    --max-width: 1144px;
    --width-991: 991px;
    --width-767: 767px;
    --accent: #D79A29;
    --muted: #6b6f76;
    --bg: #ffffff;
    --brand: #101216;
    --black: #1E1E1E;
    --gray-100: #F5F5F5;
    --gray-200: #E9EAEB;
    --gray-300: #D5D7DA;
    --gray-400: #A4A7AE;
    --gray-500: #717680;
    --gray-700: #4d5159;
    --gray-800: #252B37;
    --gray-900: #181D27;
    --gray-0: #FFFFFF;
    --cta: #DBD9CF;
    --project-single-slide-width: calc(100vw - (50vw - 585px) - 150px);
}

* {
    box-sizing: border-box;
}

figure {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
    margin: 0;
    margin-block: 0;
    padding: 0;
}

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

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', 'system-ui', -apple-system, "Segoe UI", ' Roboto',
        "Helvetica Neue", 'Arial';
    color: var(--brand);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.mb-12 {
    margin-bottom: 12px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.page__title {
    font-style: normal;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.125;
    color: var(--black);
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--gray-900);
}

.page-banner {
    width: 100%;
}

.page-banner img {
    width: 100%;
    height: auto;
    aspect-ratio: 1103 / 486;
    border-radius: 4px;
}

.blog {
    padding: 40px 0;
    background: var(--bg)
}

.blog .container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
}

.post-archive .container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
}


.blog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: auto;
    margin-bottom: 64px;
}



.blog-page__subtitle {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;

    color: var(--gray-800);
    width: 320px;
}

.blog-page-post {
    line-height: 150%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(24px * 3);
}

.learn-more {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;

    color: var(--gray-800);
    display: flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.learn-more:hover {
    gap: 10px;
}

/* post-archive */

.post-archive {
    background-color: var(--gray-100);
    padding: 96px 0;
}

.post-archive .container {
    margin-top: 0;
    margin-bottom: 0;
}

.filter__list {
    display: flex;
    gap: 16px;
    margin-bottom: 64px;
}

.filter__item {
    padding: 15px 24px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    white-space: nowrap;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;

    color: var(--gray-900);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.filter__item.active {
    background-color: var(--gray-800);
    color: var(--gray-0);
}

.filter__item:hover {
    background-color: var(--gray-800);
    color: var(--gray-0);
}

/* Pagination */
.pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 40px
}

.pagination__item {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;

    color: var(--gray-800);

    border-radius: 4px;
    padding: 8px 16px;

    border: 1px solid var(--gray-300);
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pagination__item.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.pagination__item:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}


/* Wrapper */
.page {
    margin: 0 auto;
}



/* Post (block: post) */
.post {
    background: transparent;
}

.blog-post .container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
}



.post__kicker {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.post__title {
    font-size: 28px;
    margin: 6px 0 18px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;

    color: var(--gray-900);
}

.post__hero {
    margin-top: 32px;
}

.post__hero-img {
    width: 100%;
    display: block;
}

.post__meta {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.post__meta-item {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;

    color: var(--gray-800);
}

.post__body {
    font-family: 'Inter';
    margin-top: 32px;
}

.post__body-element {
    margin-bottom: 48px;
}

.post__body-element:last-child {
    padding-bottom: 48px;
    margin-bottom: 0;
}

.post__body h3 {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;

    color: var(--black);
    margin-bottom: 16px;
}

.post__body p {

    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;

    color: #252B37;

}

.post__body p:not(:last-child) {
    margin-bottom: 24px;

}

.social__list {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    justify-content: flex-end;
}

/* .social__item { */
/* } */
.social__item a {
    background-color: var(--gray-800);
    padding: 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease, fill 0.3s ease;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.social__item svg path {
    fill: var(--gray-0)
}

.social__item a:hover {
    background-color: var(--accent);

}

.social__item a:hover svg path {
    fill: var(--gray-900);

}


/* Sidebar (block: sidebar) */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.follow__block .social__list {
    justify-content: flex-start;
    margin-top: 8px;
}

.sidebar__search {
    display: flex;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
    padding-right: 24px;
}

.sidebar__search-input {
    flex: 1;
    padding: 15px 24px;
    border-radius: 4px;
    border: none;

    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;

    color: var(--gray-500);
}

.sidebar__card {
    background: var(--card);
    border-radius: 6px;
    margin-bottom: 18px;
}

@media(max-width: 767px) {
    .sidebar__card {
        margin-bottom: 50px;
    }
}

.sidebar__card .post__meta {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar__card .post__meta-item {
    margin-bottom: 24px;
}

@media(max-width: 767px) {
    .sidebar__card .post__meta-item {
        margin-bottom: 4px;
    }
}


.card__title {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;

    color: var(--black);
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--gray-900);
}

.recent {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent__item {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.recent__thumb {
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}

.recent__meta {
    font-size: 13px;
    color: var(--muted);
}

/* Footer (block: footer) */
.site-footer {
    margin-top: 46px;
    background: #51565b;
    color: #fff;
    padding: 28px;
    border-radius: 6px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.contact .page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

@media (max-width: 991px) {
    .contact .page-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

.contact-page-desc {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--gray-800);
    margin-top: 56px;
}

.contact .address__wrapper {
    border-left: 1px solid #000000;
    padding-left: 40px;
}

.contact {
    /*margin: 194px 0;*/
}



.contact .logo_head {
    margin-top: 28px;
    margin-top: 28px;
    width: 100%;
    height: 100%;
    display: block;
}

.contact .logo_head img {
    aspect-ratio: 260 / 87;
}

.contact .container.page-layout {
    /*max-width: 1044px;*/
    align-items: center;
}

.contact .social__list {
    justify-content: flex-start;
    margin-top: 68px;

}

.contact__header {
    margin-bottom: 24px;
}

.contact__aside-title {
    color: var(--Gray-800, #252B37);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    margin-top: 60px;
}

.contact__title {
    font-size: 40px;
    line-height: 1.05;
    color: var(--gray-900);
    margin: 0;
}

.form__title {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    color: var(--gray-800);
    /* margin-top: 122px; */
}

.contact__form {
    display: grid;
    gap: 24px;
    margin-top: 32px;
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}


#our-form select,
#our-form input {
    height: auto;
}

#our-form select:focus,
#our-form input:focus,
#our-form textarea:focus {
    border: none;
    border-bottom: 1px solid var(--gray-300);
    border-right: 1px solid var(--gray-300);
    box-shadow: none;
}

#our-form .form-note-with-links {
    color: var(--gray-800);
    padding-left: 24px;
}

#our-form .form-note-with-links h4 {
    margin: 0 0 10px;
}

#our-form .form-note-with-links a {
    display: inline-block;
    text-decoration: underline;
}

#our-form .form-note-with-links a:last-of-type {
    margin-top: 4px;
}

#our-form .wpforms-submit-container {
    text-align: right;
}

#our-form .wpforms-submit {
    background: var(--gray-800);
    color: #fff;
    box-shadow: 0 6px 18px rgba(24, 29, 39, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    height: auto;
}

#our-form .wpforms-submit::after {
    display: none;
}

#our-form {

    select,
    input,
    textarea {

        &:focus {
            border: none;
            border-bottom: 1px solid var(--gray-300);
            border-right: 1px solid var(--gray-300);
            box-shadow: none;
        }
    }

    .form-note-with-links {
        color: var(--gray-800);
        padding-left: 24px;

        h4 {
            margin: 0 0 10px;
        }

        a {
            display: inline-block;
            text-decoration: underline;

            &:last-of-type {
                margin-top: 4px;
            }
        }
    }

    .wpforms-submit-container {
        text-align: right;
    }

    .wpforms-submit {
        background: var(--gray-800);
        color: #fff;
        box-shadow: 0 6px 18px rgba(24, 29, 39, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 24px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 18px;
        height: auto;

        &::after {
            display: none;
        }
    }
}

#our-form select,
#our-form input,
#our-form textarea,
.form-control input,
.form-control select,
.form-control textarea {
    width: 100%;
    padding: 15px 24px;
    border: none;
    border-bottom: 1px solid var(--gray-300);
    border-right: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 15px;
    color: var(--gray-900);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    outline: none;
    font-family: "Inter";
    color: var(--gray-500);
}

.form-control input::placeholder,
.form-control textarea::placeholder {
    color: var(--gray-500);
    font-size: 16px;
}

.placeholder {
    color: var(--gray-300, #D5D7DA);
    font-size: 16px;
}

.form-control textarea {
    min-height: 220px;
    resize: vertical;
}


/* actions */
.contact__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    margin-top: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
}

.btn--form {
    background: var(--gray-800);
    color: #fff;
    box-shadow: 0 6px 18px rgba(24, 29, 39, 0.08);
}

.contact aside .social__list {
    justify-content: flex-start;
    margin-bottom: 136px;
}

.address {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
}

.address__name {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;

    color: var(--gray-800);
    margin-bottom: 16px;
}

.address__street,
.address__phone,
.address__email {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;

    color: var(--gray-800);
}

.address__street {
    display: flex;
    align-items: flex-start;
}

.address__phone {
    display: flex;
    align-items: center;
}

.address__email {
    display: flex;
    align-items: center;
}

.address__street::before {
    content: "";
    width: 12px;
    height: 15px;
    flex: 0 0 12px;
    margin-top: 3px;
    /* visually center with text */
    background-color: #000000;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'><path d='M6 0C9.33333 0 12 2.66667 12 6C12 10.9997 6.60067 14.3995 6.33333 14.5332L6 14.7331L5.66667 14.5332C5.4656 14.3992 0 10.9328 0 6C0 2.66667 2.66667 0 6 0ZM6 1.26693C3.4 1.26693 1.33333 3.33359 1.33333 5.93359C1.33351 9.53347 4.86667 12.3335 6 13.1335C7.13333 12.3335 10.6665 9.53347 10.6667 5.93359C10.6667 3.40026 8.6 1.26693 6 1.26693ZM6 2.60026C7.86667 2.60026 9.33333 4.06693 9.33333 5.93359C9.3332 7.80013 7.8666 9.26693 6 9.26693C4.13342 9.26693 2.66681 7.80013 2.66667 5.93359C2.66667 4.06693 4.13333 2.60026 6 2.60026ZM6 3.93359C4.86667 3.93359 4 4.80026 4 5.93359C4.00013 7.0668 4.86673 7.9336 6 7.9336C7.13327 7.9336 7.99987 7.0668 8 5.93359C8 4.80026 7.13333 3.93359 6 3.93359Z' fill='black'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'><path d='M6 0C9.33333 0 12 2.66667 12 6C12 10.9997 6.60067 14.3995 6.33333 14.5332L6 14.7331L5.66667 14.5332C5.4656 14.3992 0 10.9328 0 6C0 2.66667 2.66667 0 6 0ZM6 1.26693C3.4 1.26693 1.33333 3.33359 1.33333 5.93359C1.33351 9.53347 4.86667 12.3335 6 13.1335C7.13333 12.3335 10.6665 9.53347 10.6667 5.93359C10.6667 3.40026 8.6 1.26693 6 1.26693ZM6 2.60026C7.86667 2.60026 9.33333 4.06693 9.33333 5.93359C9.3332 7.80013 7.8666 9.26693 6 9.26693C4.13342 9.26693 2.66681 7.80013 2.66667 5.93359C2.66667 4.06693 4.13333 2.60026 6 2.60026ZM6 3.93359C4.86667 3.93359 4 4.80026 4 5.93359C4.00013 7.0668 4.86673 7.9336 6 7.9336C7.13327 7.9336 7.99987 7.0668 8 5.93359C8 4.80026 7.13333 3.93359 6 3.93359Z' fill='black'/></svg>") no-repeat center / contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: contain;
    margin-right: 14px;
}

.address__phone::before {
    content: "";
    width: 11px;
    height: 16px;
    flex: 0 0 11px;
    margin-right: 14px;
    margin-top: 2px;
    /* visually center with text */
    background-color: var(--gray-800);
    /* icon color */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'><path d='M8.66667 0C9.77127 0 10.6667 0.895433 10.6667 2V14C10.6667 15.1046 9.77127 16 8.66667 16H2C0.895433 16 0 15.1046 0 14V2C0 0.895433 0.895433 0 2 0H8.66667ZM1.33333 13.3333V14C1.33333 14.3682 1.63181 14.6667 2 14.6667H8.66667C9.03487 14.6667 9.33333 14.3682 9.33333 14V13.3333H1.33333ZM1.33333 12H9.33333V4H1.33333V12ZM2 1.33333C1.63181 1.33333 1.33333 1.63181 1.33333 2V2.66667H9.33333V2C9.33333 1.63181 9.03487 1.33333 8.66667 1.33333H2Z' fill='black'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 16'><path d='M8.66667 0C9.77127 0 10.6667 0.895433 10.6667 2V14C10.6667 15.1046 9.77127 16 8.66667 16H2C0.895433 16 0 15.1046 0 14V2C0 0.895433 0.895433 0 2 0H8.66667ZM1.33333 13.3333V14C1.33333 14.3682 1.63181 14.6667 2 14.6667H8.66667C9.03487 14.6667 9.33333 14.3682 9.33333 14V13.3333H1.33333ZM1.33333 12H9.33333V4H1.33333V12ZM2 1.33333C1.63181 1.33333 1.33333 1.63181 1.33333 2V2.66667H9.33333V2C9.33333 1.63181 9.03487 1.33333 8.66667 1.33333H2Z' fill='black'/></svg>") no-repeat center / contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: contain;
}

.address__email::before {
    content: "";
    width: 16px;
    height: 12px;
    flex: 0 0 16px;
    margin-right: 14px;
    background-color: #000000;
    /* icon color */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M15.3333 0C15.7015 0 16 0.29848 16 0.666667V11.3333C16 11.7015 15.7015 12 15.3333 12H0.666667C0.298477 12 0 11.7015 0 11.3333V0.666667C0 0.29848 0.298477 0 0.666667 0H15.3333ZM8.35807 7.2292C8.13967 7.36813 7.86033 7.36813 7.64193 7.2292L1.33333 3.21419V10.6667H14.6667V3.21419L8.35807 7.2292ZM1.33333 1.63347L8 5.87633L14.6667 1.63347V1.33333H1.33333V1.63347Z' fill='black'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M15.3333 0C15.7015 0 16 0.29848 16 0.666667V11.3333C16 11.7015 15.7015 12 15.3333 12H0.666667C0.298477 12 0 11.7015 0 11.3333V0.666667C0 0.29848 0.298477 0 0.666667 0H15.3333ZM8.35807 7.2292C8.13967 7.36813 7.86033 7.36813 7.64193 7.2292L1.33333 3.21419V10.6667H14.6667V3.21419L8.35807 7.2292ZM1.33333 1.63347L8 5.87633L14.6667 1.63347V1.33333H1.33333V1.63347Z' fill='black'/></svg>") no-repeat center / contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: contain;
}

.container.services-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.services-page .divider {
    background-color: var(--gray-400);
}

.services-hero {
    margin-bottom: 28px;
}

.services-hero__title {
    font-size: 48px;
    margin: 0 0 12px 0;
    color: var(--accent);
}

.services-hero__intro {
    margin: 0;
    color: var(--muted);
}

/* Two-column services area using flex */
.services-overview {
    display: flex;
    align-items: flex-start;
    margin-top: 28px;
    margin-bottom: 1px solid var(--gray-400);
}

.services-nav {
    flex: 1 1 auto;
}

.services-nav__list {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.services-nav__item {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 133%;
    color: var(--gray-900);
    border-bottom: 1px solid var(--gray-400);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.services-nav__item:not(:last-child) {}

.services-nav__item.is-active {
    color: var(--accent);
}

.services-nav__item:hover {
    border-color: var(--gray-900);
}

.services-nav__item .arrow {
    color: var(--gray-300);
    transition: color 0.3s ease, transform 0.3s ease;
}

.services-nav__item .arrow path {
    stroke: var(--gray-300);
}

.services-nav__item.open {
    border-bottom: 1px solid var(--gray-900);
    max-height: none;
}

.services-nav__item.open .arrow {
    color: var(--gray-900);
    transform: rotate(180deg);
}

.services-nav__item.open .arrow path {
    stroke: var(--gray-900);
}

.services-nav__item.open .services-nav__btn {
    border-bottom: none;
    /*padding-bottom: 0;*/
}

/* Accordion-specific styles */
.services-nav__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0 0 24px 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    /*border-bottom: 1px solid var(--gray-400);*/
}

.accordion-panel {
    padding: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    border-bottom: 1px solid var(--divider);
    overflow: hidden;
    /*  transition: max-height 260ms ease, opacity 200ms ease;
    max-height: 0;
    opacity: 0;*/
}

.accordion-panel .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

.accordion-panel[aria-hidden="false"] {
    opacity: 1;
}

.services-nav__item.open .accordion-panel {
    /* max-height: 2000px;
    expand to fit content */
    opacity: 1;
    /*padding: 40px 0 0 0;*/
    overflow: visible;
}

.services-nav__item .accordion-panel {
    transform-origin: top;
    transition: transform 300ms ease, opacity 300ms ease;
}

.services-nav__item .accordion-panel.is-hidden {
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}

.panel__text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--gray-800);
    margin-bottom: 24px;
}

.panel__text p strong {
    font-weight: 500;
}

.services-detail {
    flex: 1 1 auto;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.services-detail__content {
    flex: 1 1 420px;
}

.services-detail__title {
    margin: 0 0 12px 0;
    font-size: 20px;
    color: var(--accent);
}

.services-detail__text {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.services-detail__media {
    flex: 0 0 544px;
}

.services-detail__img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    box-shadow: 0 6px 18px rgba(24, 29, 39, 0.06);
}

.section-divider {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: 36px 0;
}

/* Additional services two-column list */

.additional-services {}

.additional-services__title {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    color: var(--gray-900);
}

.additional-services__container {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    margin-top: 64px;
    position: relative;
}

.additional-services__list {
    display: flex;
    gap: 74px;
    justify-content: center;
    flex: 1;
}

.additional-services__list .cols {
    display: flex;
    flex-direction: column;
    gap: 56px;
    position: relative;
}

.additional-services__list .cols li {
    list-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--gray-800);
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    padding-left: 20px;
}

.additional-services__list .cols li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #E1992D;
    border-radius: 0;
}

/*
.additional-services__list .cols li:hover {
    color: var(--accent);
}
*/

.additional-services__image-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 300px;
    pointer-events: none;
    z-index: 10;
}

.additional-services__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Design process cards (flex row) */
.design-process {
    padding: 128px 0;
    position: relative;
    isolation: isolate;
}

.design-process::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: var(--gray-100);
    transform: translateX(-50%);
    z-index: -1;
}

.design-process .container {
    display: flex;
    flex-direction: column;
}

.process__icon {
    color: #D79A29;
    text-align: center;
    min-width: 40px;
    /* Header/H3 */
    font-family: Inter;
    font-size: 64px;
    font-style: normal;
    font-weight: 500;
    line-height: 72px;
    /* 112.5% */
}

.design-process__title {
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;

    color: var(--gray-900);
}

.process__row {
    display: flex;
    column-gap: 80px;
    row-gap: 48px;
    flex-wrap: wrap;
    margin-top: 72px;
    justify-content: center;
}

.process__card {
    display: flex;
    gap: 24px;
    max-width: 510px;
}

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



.process__title {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 133%;
    color: var(--gray-900);
    margin-bottom: 24px;
}

.accent__text {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;

    color: var(--gray-800);
    margin-bottom: 8px;
}

@media(max-width: 767px) {
    .process__title {
        margin-bottom: 11px;
    }

    .accent__text {
        margin-bottom: 3px;
    }

    .process__card .process__icon {
        line-height: 1;
    }

    .team-header {
        gap: 3px;
    }

    .post__body {
        margin-top: 12px;
    }
}

.process__text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;

    color: var(--gray-800);

}

/* CTA hero */
.cta-hero {
    padding: 128px 0;
    position: relative;
    isolation: isolate;
}

.cta-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: var(--cta);
    transform: translateX(-50%);
    z-index: -1;
}

.cta-hero .container {
    display: flex;
    flex-direction: column;
}

.cta-hero__inner {
    display: flex;
    align-items: center;
    gap: 57px;
    justify-content: space-between;
}

.cta__column {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.cta-hero__title {
    font-style: normal;
    font-weight: 500;
    font-size: 96px;
    line-height: 108.333%;
    letter-spacing: -0.05em;

    color: var(--gray-800);
    max-width: 615px;
}

.cta-hero__text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--gray-700);
}


.btn--primary {
    background: var(--gray-0);
    color: var(--gray-800);

}

.cta-hero .btn {
    max-width: 136px;
    padding: 12px 24px;
    border-radius: 4px;
}

/* Gallery preview */
.project.gallery {
    padding: 128px 0;
    margin: 0;
    background: var(--gray-200, #E9EAEB);
}

.gallery {
    margin: 128px 0
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 68px;
}

.btn--ghost {
    background-color: var(--gray-800);
    padding: 12px 24px;
    border-radius: 4px;
    color: var(--gray-0);
    transition: background-color 0.3s ease;
}

.btn--ghost:hover {
    background-color: var(--gray-700);
}

.gallery__title {
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;

    color: var(--gray-900);
}

.gallery__title svg {
    margin-right: 24px;
}


.gallery-row {
    display: flex;
    gap: 18px;
    overflow: hidden;
}


/* Carousel styles */
.gallery-carousel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    position: relative;
}

/* Use padding on the internal slick list to create a "peek" effect
   instead of applying negative margins to the carousel container. */
.gallery-carousel .slick-list {
    padding-right: clamp(30px, 8vw, 300px);
    overflow: hidden;
    /* prevent horizontal scrolling */
}

.gallery-carousel .slick-track {
    gap: 16px;
}

.gallery-carousel .slick-slide {
    margin-right: 16px;
    max-width: min(1104px, 90vw);
}

.project__carousel--one-slide .slick-slide {
    /* width: auto !important; */
    /* max-width: none !important; */
    margin-right: 0 !important;
}



.project__carousel--one-slide .slick-active .project__info {
    opacity: 1;
}

.project__carousel--one-slide .slick-track {
    gap: 16px;
    display: flex;
}

.project__carousel--one-slide .carousel__track-container {
    width: 100vw;
}

.project__carousel--one-slide .project__info {
    padding-top: 56px;
    opacity: 0;
    width: var(--project-single-slide-width);
    max-width: var(--project-single-slide-width);
}

@media(max-width: 767px) {
    .project__carousel--one-slide .project__info {
        padding-top: 25px;
        gap: 9px;
    }
}

.project__carousel--one-slide .slick-slide>img {
    height: 486px;
    border-radius: 4px;
    width: var(--project-single-slide-width) !important;
    max-width: var(--project-single-slide-width) !important;
}

@media(max-width: 1199px) {

    .project__carousel--one-slide .slick-slide>img,
    .project__carousel--one-slide .project__info {
        --project-single-slide-width: calc(100vw - (50vw - 485px) - 100px);
    }
}

@media(max-width: 991px) {

    .project__carousel--one-slide .slick-slide>img,
    .project__carousel--one-slide .project__info {
        --project-single-slide-width: calc(100vw - (50vw - 360px) - 100px);
    }
}

@media(max-width: 767px) {

    .project__carousel--one-slide .slick-slide,
    .project__carousel--one-slide .slick-slide>img,
    .project__carousel--one-slide .project__info {
        --project-single-slide-width: calc(100vw - 75px);
    }

    .project__carousel--one-slide .slick-slide {
        width: var(--project-single-slide-width);
    }
}

@media(max-width: 767px) {

    .project__carousel--one-slide .slick-slide,
    .project__carousel--one-slide .slick-slide>img,
    .project__carousel--one-slide .project__info {
        --project-single-slide-width: calc(100vw - 65px);
    }

    .project__carousel--one-slide .slick-slide {
        width: var(--project-single-slide-width);
    }
}

/* @media(max-width: 991px) { */
/*     .project__carousel--one-slide .slick-slide>img { */
/*         --project-single-slide-width: 100%; */
/*     } */
/* } */


@media (max-width: 768px) {
    .gallery-carousel .slick-list {
        padding-right: 20px;
    }

    .gallery-carousel .slick-slide {
        margin-right: 12px;
        max-width: 100%;
    }
}

.carousel__track-container {
    overflow: hidden;
    flex: 1 1 auto;
    width: 100%;
}

.carousel__track {
    display: flex;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 360ms ease;
}

.carousel__item {
    flex: 0 0 260px;
    display: block;
}

.carousel__item img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    margin-bottom: 32px;
}

.gallery-card__title {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;

    color: var(--gray-900);
}

.gallery-card__description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;

    color: var(--gray-700);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(24px * 4);
}

@media (max-width: 768px) {

    .design-process,
    .cta-hero {
        margin: 0 -15px;
    }


    .services-overview {
        flex-direction: column;
    }

    .services-nav {
        flex: 0 0 auto;
        order: -1;
    }

    .services-detail {
        flex-direction: column;
    }

    .services-detail__media {
        order: 2;
    }

    .services-detail__content {
        order: 1;
    }

    .gallery-row {
        overflow-x: auto;
    }

    .cta-hero__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-hero__title {
        font-size: 32px;
    }

    .cta-hero__title {
        font-size: 28px;
    }
}

/* Carousel progress bar (bottom of carousel) */
.carousel__progress {
    width: 100%;
    margin-top: 12px;
    height: 1px;
    background: var(--gray-400);
    overflow: hidden;
}

.carousel__progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gray-900));
    transition: width 360ms ease;
}

.gallery-carousel {
    align-items: flex-start;
}

.last-update {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--gray-800);
}


/*.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 20px;
}*/

.page-layout {
    display: flex;
    flex-direction: column;
}

.page-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 168px;
    align-items: start;
}

/* Table of contents column */
.toc {
    position: relative;
}

.toc__title {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    color: var(--gray-800);
}

.toc__nav {
    background: transparent;
}

.toc__list {
    margin: 24px;
}

.toc__item {
    border-bottom: 1px solid var(--gray-300);
}

.toc__item:hover {
    border-color: var(--gray-900);
}

.toc__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 12px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: var(--gray-900);
}

.toc__link::after {
    content: '→';
    color: var(--gray-300);
    font-weight: 600;
    margin-left: 8px;
}

.toc__item:hover .toc__link::after {
    color: var(--gray-900);
}

/* Policy content */
.policy-content {
    max-width: 720px;
}

.policy-header {
    margin-bottom: 28px;
}

.project-page .policy-header {
    margin-bottom: 0;
}

.policy-title {
    font-size: 40px;
    line-height: 1.05;
    margin: 0 0 8px 0;
}

.policy-title.font_s48 {
    font-size: 48px;
}

.last-update {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-600, #6b7280);
    margin: 0 0 20px 0;
}

.policy-section {
    margin-bottom: 32px;
}

.policy-section h2 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 133%;
    color: var(--gray-800);
    margin-bottom: 24px;
}

.policy-section h3 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.policy-section p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--gray-800);
    margin-bottom: 24px;
}

.policy__indent {
    margin-left: 24px;
}

/* Lists in content */
.policy-section ul {
    margin-left: 24px;
}

.policy-section li {
    margin-bottom: 8px;
    list-style: disc;
    margin-left: 24px;
}

/* .project-page.container { */
/*     width: 1328px; */
/* } */

.project__title {
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;

    color: var(--gray-900);
    max-width: unset;
}

.project-info__description {
    /* Скидаємо обмеження на 3 рядки для project page */
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    max-height: none;
    max-width: 656px;
}

.project__slug {
    display: flex;
    gap: 48px;
    margin-top: 56px;
}

@media (max-width: 1199px) {
    .project__slug {
        flex-wrap: wrap;
    }
}

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

    }
}

.slug__item {
    border-bottom: 1px solid var(--gray-300);
    padding: 18px 0;
    display: flex;
    min-width: 410px;
    gap: 32px;
}

.slug__title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--gray-600);
}

.slug__value {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 16px;
    letter-spacing: -0.05em;
    color: var(--gray-700);
}

.project-page .carousel__progress {
    margin-top: 56px;
}

.project-page .carousel__track-container {
    overflow-x: hidden;
}

.project-page .project__carousel .carousel__item img {
    height: 445px !important;
}

.project-page .slider {

    margin: clamp(50px, (88 / 1920) * 100vw, 88px) 0 clamp(50px, (88 / 1920) * 100vw, 88px) auto;
}

@media (max-width: 768px) {
    .project-page .slider {
        margin-left: unset;
    }
}

.project-page.container {
    display: flex;
    flex-direction: column;
}

.project-grid {
    padding: 96px 0;
    position: relative;
    isolation: isolate;
}

.project-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: var(--gray-200);
    transform: translateX(-50%);
    z-index: -1;
}

.project-grid .container {
    display: flex;
    flex-direction: column;
    max-width: var(--max-width);
}

.section__title {
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.167;
    color: var(--gray-900);
}

.project__wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 48px;
    margin-top: 56px;
}

.project__item {
    max-width: 357px;
    width: 33.33%;
}

.project__item.hidden {
    display: none !important;
}

.project__item figure img {
    aspect-ratio: 357 / 288;
    margin-bottom: 32px;
    width: 100%;
    object-fit: cover;
}

.project__carousel {
    position: relative;
}

.project__carousel .carousel__item {
    flex: 1 1 auto;
}

.project__carousel .carousel__progress {
    margin-top: 88px;
}

.project__card img {
    aspect-ratio: 1103/486;
    height: auto;
    width: 100%;
    object-fit: cover;
}

.project__info {
    flex-direction: column;
    display: flex;
    gap: 24px;
}

.project__info-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
    gap: 56px;
    justify-content: space-between;
}

@media(max-width: 1199px) {
    .project__info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
}

.project__info-row .btn {
    margin-left: auto;
}

@media(max-width: 1199px) {
    .project__info-row .btn {
        margin-left: 0;
    }
}

.project-info__title {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.25;

    color: var(--gray-900);
    max-width: 320px;
}

.project-info__description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--gray-900);
    line-height: 150%;
}

.btn--ghost {
    max-height: 48px;
}

.slider__button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 0;
    left: -106px;
}

@media(max-width: 1199px) {
    .project__carousel--one-slide .slider__button-wrapper {
        left: -62px;
    }
}

.slider__button {
    padding: 20px;
    border-radius: 4px;
}

@media (max-width: 768px) {

    .project-page.container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .project-grid {
        margin: 0 -15px;
    }

    .project__wrapper {

        margin-top: 0;

    }

    .project__item {
        width: unset;
        max-width: none;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .project__info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .project-info__title {
        max-width: 100%;
    }

    .project-info__description {
        max-width: 90vw;
    }

    /* Стилі для слайдера на мобільних */
    .project__card img {
        aspect-ratio: 16/9;
        /* Краща пропорція для мобільних */
        max-height: 300px;
        object-fit: cover;
    }

    .project__carousel .carousel__progress {
        margin-top: 24px;
    }

    .slider__button-wrapper {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin-top: 24px;
        gap: 12px;
    }

    .project__info {
        gap: 16px;
    }

    .project-info__title {
        font-size: 24px;
        line-height: 133%;
    }
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .page-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .toc {
        position: relative;
        order: -1;
    }

    .toc__link::after {
        display: none;
    }

    .policy-title {
        font-size: 28px;
    }
}

/* Small polish for keyboard focus */
.toc__link:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 700px) {
    .contact__grid {
        grid-template-columns: 1fr;
    }

    .contact__title {
        font-size: 28px;
    }
}


/* Responsive */
@media (max-width: 900px) {
    /*.container {
        grid-template-columns: 1fr;

    }*/

    .sidebar {
        order: 2;
    }
}

@media (max-width: 900px) {
    .blog__content {
        grid-template-columns: 1fr;
        padding: 0 12px
    }

    .teaser {
        grid-template-columns: 1fr
    }

    .sidebar__mini-img {
        width: 84px;
        height: 64px
    }

    .blog__header {
        flex-direction: column;
        margin: 0;
    }

    .blog-page__subtitle {
        width: 100%;
    }
}

@media (max-width: 991px) {

    .blog__header,
    .filter__list {
        margin-bottom: 0;
    }

    .sidebar {
        gap: 0;
    }

    .post-archive .container {

        grid-template-columns: auto;
        gap: 30px;
    }

    .contact .page-grid {
        gap: 30px;
    }

    .services-detail__media {
        flex: unset;
    }

    .services-nav__list {

        gap: 30px;
    }

    .services-nav__item {
        font-size: 21px;
    }

    .process__row {
        justify-content: flex-start;
        margin-top: 40px;
    }

    .gallery {
        margin: 0;
    }

    .cta-hero__inner,
    .cta__column {
        gap: 30px;
    }

    .gallery-header {

        margin-bottom: 40px;
    }

    .panel__text {

        margin-bottom: 10px;
    }

    .pillar-page .comment .rewiev__block {

        gap: 20px;
    }

    article.post__hero {
        margin-top: 0;
    }

    .project-page.mt-90.container {
        margin-top: 0;

    }

    .post {
        margin-bottom: 30px
    }
}

@media (max-width: 767px) {
    .post {
        margin-bottom: 50px
    }

    .project-grid .team_filter {
        margin-bottom: 30px;
    }

    .container {
        width: 100%;
    }

    .process__card {
        gap: 5px;

    }

    .footer__bottom .social__item {
        padding: 16px;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        text-align: center;
    }

    header.policy-header {
        margin-top: 0;
    }

    .main_block.regular>.main_section:first-child {
        padding-top: 0;
    }

    .main_section.contact {
        margin-bottom: 0;
    }

    .policy-title.font_s48 {
        font-size: 40px;
        font-weight: 500;
    }
}

@media (max-width: 650px) {
    .blog-post .container {
        display: grid;
        grid-template-columns: unset;
        gap: 0;
    }

    .blog-post .sidebar .follow__block {
        order: 2;
        text-align: right;
    }

    .blog-post .sidebar .follow__block .social__list {
        margin-top: 20px !important;
        justify-content: flex-end;
    }
}