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

:where(html) {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
}

:where(body) {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

:where(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
    height: auto;
}

:where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
}

:where(button, [type="button"], [type="submit"], [type="reset"]) {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

:where(textarea) {
    resize: vertical;
}

:where(ul, ol):not([class]) {
    list-style: none;
}

:where(a):not([class]) {
    color: inherit;
    text-decoration: none;
}

:where(table) {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

:where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

[hidden], .hidden {
    display: none !important;
}

.oh {
    overflow: hidden!important;
}

.vh {
    opacity: 0!important;
    visibility: hidden!important;
}

.vv {
    opacity: 1!important;
    visibility: visible!important;
}

.br {
    border-radius: var(--border-radius);
}

.resize-animation-stopper *, .resize-animation-stopper {
    transition: none!important;
    animation: none!important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    --transition-fast: 0.15s cubic-bezier(.22, .61, .36, 1);
    --transition-base: 0.25s cubic-bezier(.22, .61, .36, 1);
    --transition-smooth: 0.4s cubic-bezier(.22, .61, .36, 1);
    --transition-smooth-long: 0.7s cubic-bezier(.22, .61, .36, 1); 
    --transition-long: 3s cubic-bezier(.22, .61, .36, 1);

    --color-white: #ffffff;
    --header-height: 56px;

    --border-radius: 4px;
}

:where(a, button, [type="button"], [type="submit"]) {
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

:where(input, textarea, select) {
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}



html.lenis, html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain;
}

.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--graphite) var(--wp--preset--color--light-gray);
}

html.lenis.lenis-stopped {
    --f-scrollbar-compensate: 0!important;
}



body {
    background-color: var(--wp--preset--color--light-gray);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    color: var(--wp--preset--color--graphite);
    overflow-x: hidden;
    z-index: 1;
}

body,
header,
footer,
main,
nav,
section,
article {
    display: block;
    position: relative;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

ul, ol {
    list-style: none;
}

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

h1, h2, h3 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 800;
}

h6 {
    font-size: 1.125rem;
    line-height: 1.33333;
    letter-spacing: 0;
    font-weight: 400;
}

.pretitle, .pretitle-link, .subtitle {
    font-size: .875rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--dark-graphite-80);
}

.pretitle {
    margin-bottom: .5rem;
}

.pretitle-link {
    line-height: 1.6;
}

.pretitle-link-text {
    white-space: nowrap;
}

.section-title {
    margin-bottom: 4em;
}

.section-title .subtitle {
    margin-top: .5rem;
}

.section-title.section {
    padding-block: 0;
}

@media (min-width: 48em) {
    h1, h2 {
        font-size: 3rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        font-weight: 800;
    }

    h3 {
        font-size: 2.5rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        font-weight: 700;
    }

    h5 {
        font-size: 1.5rem;
        line-height: 1.33333;
        letter-spacing: 0;
        font-weight: 700;
    }

    .section-title {
        margin-bottom: 6em;
    }

    .section-title .subtitle {
        margin-top: 1rem;
    }

    .pretitle, .subtitle {
        font-size: 1.125rem;
        line-height: 1.33333;
        font-weight: 400;
        letter-spacing: 0;
    }

    .pretitle {
        margin-bottom: 1rem;
    }
}

@media (min-width: 75em) {
    h1, h2 {
        font-size: 4rem;
        line-height: 1.1;
        letter-spacing: -0.01em;
        font-weight: 800;
    }

    h5 {
        font-size: 2rem;
        font-weight: 800;
    }

    .section-title {
        margin-bottom: 8em;
    }

    .pretitle, .subtitle {
        font-size: 1.5rem;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -0.01em;
    }

    .pretitle {
        margin-bottom: 1em;
    }
}


input:not([type="submit"]):not([type="checkbox"]), select, textarea {
    display: block;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.375;
    padding: 1.0625em 1.25em;
    color: var(--wp--preset--color--dark-graphite-80);
    border: 1px solid var(--wp--preset--color--dark-graphite-80);
    border-radius: var(--border-radius);
    background: var(--color-white);
    resize: none;
    outline: 0;
    cursor: text;
    width: 100%;
    height: 3.5em;
    overflow: hidden;
}
input:not([type="submit"]):focus, select:focus, textarea:focus {
    color: var(--wp--preset--color--dark-graphite);
    border-color: var(--wp--preset--color--dark-graphite);
}


.mask-icon {
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: var(--wp--preset--color--graphite);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

a:hover > .mask-icon, button:hover > .mask-icon {
    background-color: var(--wp--preset--color--orange-dark)!important;
    opacity: 1!important;
}

.icon-phone {
    mask-image: url('../img/icons/phone.svg');
    -webkit-mask-image: url('../img/icons/phone.svg');
    width: 16px;
    height: 16px;
}

.icon-email {
    mask-image: url('../img/icons/email.svg');
    -webkit-mask-image: url('../img/icons/email.svg');
    width: 19px;
    height: 18px;
}

.icon-address {
    mask-image: url('../img/icons/address.svg');
    -webkit-mask-image: url('../img/icons/address.svg');
    width: 14px;
    height: 21px;
}

.icon-worktime {
    mask-image: url('../img/icons/worktime.svg');
    -webkit-mask-image: url('../img/icons/worktime.svg');
    width: 18px;
    height: 18px;
}



.button, .button-submit {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
    padding: 16px 32px;
    text-align: center;
}

.button-3d {
    display: inline-block;
    position: relative;
    min-width: 200px;
    padding: 0;
    perspective: 100000px;
}

.button-3d-transparent {
    background-color: transparent;
}

.button-3d-inner {
    position: relative;
    width: 100%;
    transform: translate3d(0px, 0%, 0px) rotateX(0deg);
    transition: transform var(--transition-base);
    transform-style: preserve-3d;
}

.button-3d-inner:hover {
    transform: translate3d(0px, -50%, 0px) rotateX(90deg);
    transform-style: preserve-3d;
}

.button-3d-face {
    position: relative;
    padding: 16px 32px;
    width: 100%;
}

.button-3d-face-main {
    background-color: var(--wp--preset--color--graphite);
}

.button-3d-transparent .button-3d-face-main {
    background-color: rgba(36, 37, 38, .2);;
}

.button-3d-face-hover {
    background-color: var(--wp--preset--color--orange-dark);
    position: absolute;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    top: 100%;
    transform: rotateX(-90deg) rotateY(0) rotateZ(0);
    z-index: 1;
}

.button-submit {
    background-color: var(--wp--preset--color--orange);
    border-radius: var(--border-radius);
    height: 3.5rem;
    width: 100%;
}

.button-submit:hover, .button-submit:focus {
    background-color: var(--wp--preset--color--orange-dark);
}

/* .button-3d-transparent .button-3d-face-hover {
    background-color: rgba(140, 38, 11, .2);
} */

.button-3d-label {
    position: relative;
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
}

.button-3d-line {
    background-color: var(--wp--preset--color--orange);
    height: 5px;
    position: absolute;
    inset: auto 0 0;
}




.section {
    min-width: 320px;
    padding-inline: 1em;
    padding-block: 6em;
}

.pt {
    padding-top: 6em;
}

@media (min-width: 48em) {
    .section {
        padding-block: 8em;
    }

    .pt {
        padding-top: 8em;
    }
}

@media (min-width: 75em) {
    .section {
        padding-inline: 2em;
        padding-block: 10em;
    }

    .section.container {
        max-width: calc(1200px + 4em);
    }

    .pt {
        padding-top: 10em;
    }
}

.container {
    width: 100%;
    min-width: 320px;
    max-width: 1200px;
    margin-inline: auto;
}

.section .container {
    min-width: calc(320px - 2em);
}



.dialog.container {
    min-width: 288px;
}

.fancybox__dialog .fancybox__slide {
    padding-inline: 1em;
}

.dialog {
    padding: 1em;
    border-radius: var(--border-radius);
}

.dialog .section-title {
    margin-bottom: 2em;
}

.dialog .section-title h2 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.dialog .section-title .subtitle {
    margin-top: 0.25em;
}

#callback-modal {
    max-width: 30em;
}

@media (min-width: 48em) {
    .dialog {
        padding: 2em;
    }

    .dialog .section-title {
        margin-bottom: 3em;
    }

    .dialog .section-title h2 {
        font-size: 2.25em;
        letter-spacing: -0.02em;
    }

    .dialog .section-title .subtitle {
        margin-top: .25em;
    }
}

@media (min-width: 75em) {
    .dialog {
        padding: 3em;
    }

    .dialog .section-title h2 {
        font-size: 2.5em;
    }

    .dialog .section-title .subtitle {
        font-size: 1.25em;
        font-weight: 400;
    }
}



.header {
    background-color: transparent;
    position: absolute;
    inset: 0 0 auto;
    padding-block: 1em;
    z-index: 9999999;/*TODO*/
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.header.active {
    background-color: var(--wp--preset--color--graphite);
}

.header.scrolled:not(.active) {
    background-color: var(--color-white);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3em;
    height: calc(var(--header-height) - 2em);
    overflow: hidden;
}

.header-logo {
    flex-shrink: 0;
}

.header-logo-img {
    width: 120px;
    height: 24px;
}

.header-logo-img-accent {
    fill: var(--wp--preset--color--orange);
}

.header-logo-img-text {
    fill: var(--wp--preset--color--light-gray);
    transition: fill var(--transition-fast);
}

.header.active .header-logo .header-logo-img-text {
    fill: var(--color-white)!important;
}

.header.scrolled {
    position: fixed;
}

.header.scrolled:not(.active) .header-logo .header-logo-img-text {
    fill: var(--wp--preset--color--graphite);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5em;
    width: 100%;
}

.header-contacts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1em;
    width: 100%;
}

.header-contacts-item:not(.header-contacts-phone), .header-contacts-phone > .header-contacts-item-content {
    display: none;
}

.header-contacts-address .header-contacts-item-content {
    color: var(--wp--preset--color--light-gray);
}

.header-contacts-item-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.header-contacts-item-icon-link .mask-icon {
    background-color: var(--wp--preset--color--light-gray);
    opacity: .5;
}

.header.scrolled:not(.active) .header-contacts-item-icon-link .mask-icon {
    background-color: var(--wp--preset--color--graphite);
}

.hamburger {
    display: block;
    position: relative;
    width: 24px;
    flex-shrink: 0;
}

.hamburger i {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    transition: background-color var(--transition-fast), width var(--transition-fast), transform var(--transition-fast);
}

.header.scrolled:not(.active) .hamburger i {
    background-color: var(--wp--preset--color--graphite);
}

.hamburger:hover i, .header.scrolled:not(.active) .hamburger:hover i {
    background-color: var(--wp--preset--color--orange-dark);
}

.hamburger i + i {
    margin-top: 5px;
}

.hamburger.active i {
    width: 16px;
}

.hamburger.active i:nth-child(1) {
    transform: translateX(9px) translateY(4px) rotate(45deg);
}

.hamburger.active i:nth-child(2) {
    transform: translateX(9px) translateY(-3px) rotate(-45deg);
}

.header-main-menu {
    background-color: var(--wp--preset--color--graphite);
    position: fixed;
    inset: var(--header-height) 0 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3em;
    padding: 3em 1em 1em;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-fast);
    z-index: -1;
}

.header-main-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    z-index: 1;
    overflow-y: auto;
}

.header-main-menu-contacts {
    display: flex;
    flex-direction: column;
    gap: .5em;
    color: var(--color-white);
}

.header-main-menu.active .header-main-menu-contacts {
    align-items: flex-start;
    font-size: 1em;
}

.header-main-menu-contacts > .header-contacts-item.header-contacts-phone {
    display: none;
}

.header-main-menu-phone {
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.nav-main-menu ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: 1em;
}

.nav-main-menu ul li {
    display: block;
    position: relative;
    font-size: .875em;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--wp--preset--color--light-gray);
}

.menu-list a, .link-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
}

.link-text-main, .link-text-hover {
    display: block;
    transform: translate3d(0px, 0%, 0px);
    transition: transform var(--transition-base), opacity var(--transition-base);
    transform-style: preserve-3d;
}

.link-text-main {
    position: static;
    opacity: 1;
    
}

.link-text-hover {
    position: absolute;
    opacity: 0;
}

.menu-list a:hover .link-text-main, a.link-text:hover .link-text-main {
    opacity: 0;
    transform: translate3d(0px, -100%, 0px);
}

.menu-list a:hover .link-text-hover, a.link-text:hover .link-text-hover {
    opacity: 1;
    transform: translate3d(0px, -100%, 0px);
}

@media (min-width: 48em) {
    :root {
        --header-height: 78px;
    }

    .header-right {
        gap: 3em;
    }

    .header-logo-img {
        width: 200px;
        height: 40px;
    }

    .header-contacts-phone > .header-contacts-item-content {
        display: flex;
    }

    .header-contacts-item {
        display: flex;
        align-items: flex-start;
        gap: .5em;
        flex-shrink: 0;
    }

    .header-contacts-item-icon-link {
        width: 32px;
        height: 32px;
        margin-top: -3px;
    }

    .header-contacts-item-content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .header-contacts-item-contact {
        font-size: 1.125em;
        line-height: 1.2;
        letter-spacing: -0.01em;
        font-weight: 700;
        color: var(--wp--preset--color--light-gray);
    }

    .header.scrolled:not(.active) .header-contacts-item-contact {
        color: var(--wp--preset--color--graphite);
    }

    .header-contacts-item-contact:hover {
        color: var(--wp--preset--color--orange-dark)!important;
    }

    .header-contacts-item-link {
        font-size: .875em;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: 0.01em;
        color: var(--wp--preset--color--orange);
    }

    .header-contacts-item-link:hover {
        color: var(--wp--preset--color--orange-dark);
    }

    .header-main-menu.active .nav-main-menu ul {
        gap: 2em 10em;
    }

    .header-main-menu.active .nav-main-menu ul li {
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0;
        font-weight: 400;
    }

    .header-main-menu.active .header-main-menu-contacts {
        font-size: 1.25em;
    }
}

@media (min-width: 75em) {
    :root {
        --header-height: 180px;
    }

    .header {
        padding-block: 2em;
    }

    .header-top {
        height: auto;
    }

    .hamburger {
        display: none;
    }

    .header-contacts-item:not(.header-contacts-address) {
        display: flex;
    }

    .header-contacts {
        gap: 7%;
        align-items: flex-start;
    }

    .header-contacts-cta, .header-contacts-cta > .button-3d {
        width: 200px;
    }

    .header-contacts-cta .button-3d-face {
        padding-block: 12px;
    }

    .header-main-menu {
        display: block;
        position: relative;
        inset: 0;
        height: auto;
        margin: 3em auto 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        background-color: transparent;
        max-width: 1200px;
        transition: none;
    }

    .nav-main-menu ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4vw;
    }

    .header-main-menu-contacts > .link-text {
        display: none;
    }

    .header.scrolled .header-top {
        width: 200px;
    }

    .header.scrolled .header-right {
        display: none;
    }

    .header.scrolled .header-main-menu {
        margin: 0;
        max-width: inherit;
        position: absolute;
        right: 0;
        left: 0;
    }

    .header.scrolled .nav-main-menu {
        position: absolute;
        left: 216px;
        top: 50%;
        transform: translateY(-50%);
        width: calc(100% - 422px);
        padding-inline: 6vw;
    }

    .header.scrolled .nav-main-menu ul {
        justify-content: space-around;
        gap: 1em;
        margin: auto;
    }

    .header.scrolled .nav-main-menu ul li {
        color: var(--wp--preset--color--graphite);
    }

    .header.scrolled .header-main-menu-contacts {
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
    }

    .header.scrolled .header-main-menu-contacts > .header-contacts-item.header-contacts-phone {
        display: flex;
    }
}

@media (min-width: 90em) {
    .header-contacts-item.header-contacts-address {
        display: flex;
    }
}



.section-form {
    background-color: var(--wp--preset--color--graphite);
    padding: 1em;
    color: var(--color-white);
}

.section-form::after {
    content: '';
    display: block;
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background-color: var(--wp--preset--color--light-gray);
    opacity: .15;
}

.section-form .container {
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 1em;
}

.section-form .subtitle {
    color: var(--wp--preset--color--light-gray);
}

.section-form input:not([type="submit"]):not([type="checkbox"]), .section-form select, .section-form textarea {
    border: none;
}

.wpcf7-form-control-wrap {
    display: contents;
}

.cf7-custom-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
}

.cf7-custom-form > .form-column:nth-child(1) {
    order: 1;
}

.cf7-custom-form > .form-column:nth-child(2) {
    order: 3;
}

.cf7-custom-form > .form-column:nth-child(3) {
    order: 2;
}

.form-group + .form-group {
    margin-top: 1.5em;
}

.consent-checkbox .wpcf7-list-item {
    margin-left: 0;
}

.wpcf7-acceptance label {
    display: flex;
    gap: .75em;
    cursor: pointer;
}

.wpcf7-acceptance input[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--wp--preset--color--orange);
    flex-shrink: 0;
    cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item-label {
    font-size: .875em;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.wpcf7-acceptance a {
    text-decoration: underline;
}

.wpcf7-acceptance a:hover {
    color: var(--wp--preset--color--orange);
}

.file-upload-zone {
    position: relative;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed var(--wp--preset--color--graphite);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    padding: .5em 1em;
    height: 100%;
    min-height: 12em;
    cursor: pointer;
    position: relative;
}

.file-upload-label input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.icon-upload {
    width: 60px;
    height: 41px;
    mask-image: url('../img/icons/upload.svg');
    -webkit-mask-image: url('../img/icons/upload.svg');
    background-color: var(--wp--preset--color--dark-graphite-60);
    margin-bottom: 1em;
}

.file-upload-zone:hover .icon-upload {
    background-color: var(--wp--preset--color--orange);
}

.upload-title {
    color: var(--wp--preset--color--graphite);
    margin-bottom: 1em;
}
.upload-formats, .upload-max-size {
    color: var(--wp--preset--color--dark-graphite-80);
    font-size: .75em;
    line-height: 1.5;
}

.file-upload-label.is-dragged {
    border-color: var(--wp--preset--color--orange);
    background-color: var(--wp--preset--color--orange-light);
}

.file-upload-label.is-loaded {
    border-color: var(--wp--preset--color--graphite);
    background-color: var(--wp--preset--color--light-gray);
}

.file-upload-label.is-loaded .upload-title strong {
    color: var(--wp--preset--color--dark-graphite);
}

.file-upload-zone .wpcf7-not-valid-tip {
    margin-bottom: 1rem;
}

.wpcf7-not-valid-tip {
    font-size: .875em;
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: 0.01em;
    margin-top: .5em;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border: none;
    color: #dc3232;
    font-weight: 500;
    padding: 0;
    margin: 1em 0 0;
}

.wpcf7-spinner {
    display: none!important;
}

@media (min-width: 75em) {
    .section-form {
        padding: 4em 2em;
    }
    .section-form .container {
        padding: 4em;
    }

    .section-form .section-title {
        text-align: center;
    }

    .cf7-custom-form {
        grid-template-columns: repeat(3, 1fr);
    }

    .cf7-custom-form > .form-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cf7-custom-form > .form-column:nth-child(2) {
        order: 2;
    }

    .cf7-custom-form > .form-column:nth-child(3) {
        order: 3;
    }

    .consent-checkbox .wpcf7-list-item {
        height: 3.5em;
    }
}


.footer {
    background-color: var(--wp--preset--color--dark-graphite);
    color: var(--wp--preset--color--light-gray);
    padding-block: 2em;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3em;
}

.footer a:not(.footer-contacts-item) {
    text-decoration: underline;
}

.footer a:not(.footer-contacts-item):hover {
    color: var(--color-white);
}

.footer .footer-column-title a {
    text-decoration: none;
}

.footer-logo svg {
    width: 147px;
    height: 29px;
}

.footer-column-title {
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 1.33333em;
}

.footer-column-content p + p, .footer-column-content ul li + li, .footer-contacts-item + .footer-contacts-item {
    margin-top: 1em;
}

.footer-contacts-item {
    display: flex;
    align-items: flex-start;
    gap: .5em;
}

.footer-contacts-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    min-width: 2em;
    opacity: .2;
    margin-left: -.5em;
    margin-top: -.25em;
}

.footer-contacts-item-icon .mask-icon {
    background-color: var(--wp--preset--color--light-gray);
}

.footer-bottom {
    margin-top: 4em;
    display: flex;
    flex-direction: column-reverse;
    gap: 1em;
}

.footer-support {
    margin-top: 4em;
}

.footer-support-text {
    margin-bottom: .5em;
}

.footer-support-grid {
    display: flex;
    align-items: center;
    gap: 1em;
}

.footer-support-grid > a:nth-child(2) {
    flex-shrink: 0;
}

.footer-support-grid > a {
    display: block;
    position: relative;
}

.footer-support-grid > a > img {
    width: auto;
    height: auto;
    max-width: 160px;
}

@media (min-width: 48em) {
    .footer {
        padding-top: 4em;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (min-width: 75em) {
    .footer {
        padding-top: 5em;
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6em;
    padding-block: 6em 1em;
    overflow: hidden;
    color: var(--color-white)
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-video {
    position: absolute;
    left: 50%;
    top: -10%;
    width: 100%;
    height: 120%;
    transform: translate(-50%, 0);
    max-width: inherit;
    max-height: inherit;
    object-fit: cover;
    object-position: center center;
}

.overlay {
    position: absolute;
    inset: 0;
    pointer-events: 0;
    background-color: var(--wp--preset--color--dark-graphite);
    opacity: .6;
    mix-blend-mode: luminosity;
}

.hero .container {
    z-index: 2;
}

.hero h1 {
    font-size: clamp(2.5em, 9.26cqw, 111.14px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-pros {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

.hero h1, .hero-pros {
    position: relative;
    z-index: 2;
    will-change: transform;
}

.hero-plus {
    display: flex;
    align-items: center;
    gap: .5em;
}

.hero-plus-value-container {
    position: relative;
    font-size: 1.75em;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--color-white);
    flex-shrink: 0;
}

.hero-plus-text {
    font-size: .875em;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--light-gray);
}

.js-counter {
    display: inline-block;
    position: relative;
}

.js-counter-shadow {
    position: absolute;
    inset: 0;
    white-space: nowrap;
    text-align: right;
}

@media (min-width: 48em) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding-block: calc(2 * var(--header-height)) calc(3 * var(--header-height));
    }

    .hero-pros {
        position: absolute;
        inset: auto 1em 1em;
        width: auto;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }

    .hero-plus {
        gap: 1em;
    }

    .hero-plus-value-container {
        font-size: 3.5em;
        line-height: 1.1;
        letter-spacing: -0.01em;
        font-weight: 700;
    }

    .hero-plus-text {
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0;
    }
}

@media (min-width: 75em) {
    .hero {
        padding-block: calc(1.5 * var(--header-height));
    }

    .hero-pros {
        grid-template-columns: repeat(4, 1fr);
        gap: 4em;
        bottom: 3em;
    }

    .hero-plus-value-container {
        font-size: 4em;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }
}

@media (min-width: 102em) {
    .hero-pros::before, .hero-pros::after {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% - 1px);
        height: 1px;
        width: 200px;
        background-color: var(--color-white);
        opacity: .5;
    }

    .hero-pros::before {
        left: calc(((var(--vw) - 100%) / 2 - 1em) * (-1));
    }

    .hero-pros::after {
        right: calc(((var(--vw) - 100%) / 2 - 1em) * (-1));
    }
}



.scroll-top-button {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 104;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    color: var(--wp--preset--color--orange);
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--border-radius);
    cursor: pointer;
    gap: .25em;
    backdrop-filter: blur(1.5px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4em);
    transition: all var(--transition-base);
}

.scroll-top-button.vv {
    transform: translateY(0);
}

.scroll-top-button:hover {
    color: var(--wp--preset--color--dark-graphite);
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(3px);
}

.icon-top {
    mask-image: url('../img/icons/top.svg');
    -webkit-mask-image: url('../img/icons/top.svg');
    width: .875em;
    height: .875em;
    background-color: var(--wp--preset--color--orange);
}

.scroll-top-button:hover .icon-top {
    background-color: var(--wp--preset--color--graphite)!important;
}

.scroll-top-percent {
    font-size: .75em;
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums; 
    white-space: nowrap;
}

@media (min-width: 75em) {
    .scroll-top-button {
        bottom: 2em;
        right: 2em;
    }
}



.fade-in-up {
    opacity: 0;
    transform: translateY(16em);
    transition: opacity var(--transition-smooth), transform var(--transition-smooth);
    will-change: transform, opacity;
}

.fade-in-up.is-animated {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay, 0ms);
}



.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em 1em;
}

.about-stats-item {
    border-left: 3px solid var(--wp--preset--color--orange);
    padding-left: calc(.5em + 3px);
}

.about-stats-item-text {
    font-size: .875em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.about-stats-item-value {
    font-size: 1.25em;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--wp--preset--color--dark-graphite);
    white-space: nowrap;
}

@media (min-width: 48em) {
    .about-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2em;
    }

    .about-stats-item {
        border-left-width: 5px;
        padding-left: calc(1em + 5px);
    }

    .about-stats-item-text {
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0;
    }

    .about-stats-item-value {
        font-size: 2em;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }
}

@media (min-width: 75em) {
    .about-stats-grid {
        gap: 4em;
    }

    .about-stats-item-text {
        font-size: 1.125em;
        line-height: 1.33333;
    }

    .about-stats-item-value {
        font-size: 2.5em;
        line-height: 1.2;
        letter-spacing: -0.01em;
    }
}



.services-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.services-section-item {
    display: block;
    position: relative;
    aspect-ratio: 5 / 6;
    width: 100%;
    color: var(--color-white);
    transition: transform var(--transition-smooth-long), filter var(--transition-smooth-long);
    filter: blur(9px);
    z-index: 1;
    overflow: hidden;
}

.services-section-item.is-animated {
    filter: blur(0px);
}

.services-section-item::after {
    content: '';
    position: absolute;
    inset: 65% 0 0;
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 1;
}

.services-section-item-project-image, .services-section-item-service-image {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1.2);
    transform-origin: 50% 50%;
    object-fit: cover;
    object-position: center center;
    max-width: inherit;
    max-height: inherit;
}

.services-section-item-project-image {
    opacity: 0;
    transition: opacity var(--transition-smooth-long), transform var(--transition-smooth-long);
    will-change: opacity, transform;
}

.services-section-item:hover .services-section-item-project-image {
    opacity: 1;
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-50% + var(--mouse-y, 0px))) scale(1.2);
}

.services-section-item .icon-link {
    backface-visibility: hidden;
    will-change: transform;
    transition: transform var(--transition-smooth);
}

.services-section-item:hover .icon-link {
    /*transform: matrix(0, 1, 1, 0, 0, 0);*/
    transform: rotate(90deg);
}

.services-section-item .overlay {
    opacity: .4;
}

.services-section-item-text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
    position: absolute;
    inset: auto 1em 1em;
    z-index: 2;
}

.services-section-item-text h5 {
    font-weight: 700;
    word-wrap: anywhere;
}

.icon-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    padding: .375em;
    border-radius: var(--border-radius);
    background-color: var(--wp--preset--color--orange);
}

.icon-link {
    mask-image: url('../img/icons/link.svg');
    -webkit-mask-image: url('../img/icons/link.svg');
    width: .75em;
    height: .75em;
    background-color: var(--color-white);
}

@media (min-width: 30em) {
    .services-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 48em) {
    .services-section-item-text {
        inset: auto 2em 2em;
        gap: 2em;
    }

    .services-section-item-text h5 {
        font-size: 1.5rem;
        line-height: 1.33333;
        letter-spacing: 0;
        font-weight: 700;
    }
}

@media (min-width: 75em) {
    .services-section-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .services-section-item {
        margin-inline: -.5px;
    }
}

@media (min-width: 100em) {
    .services-section-item-text h5 {
        font-size: 2rem;
        font-weight: 800;
    }

    .icon-link-wrapper {
        width: 2em;
        height: 2em;
        padding: .5em;
    }

    .icon-link {
        width: 1em;
        height: 1em;
    }
}

.pretitle.dn {
    display: none;
}

.title-with-link {
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
}

.pretitle-link {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--wp--preset--color--orange);
}

.pretitle-link:hover {
    color: var(--wp--preset--color--orange-dark);
}

.icon-text-link {
    width: .6875rem;
    height: .6875rem;
    mask-image: url('../img/icons/text-link.svg');
    -webkit-mask-image: url('../img/icons/text-link.svg');
    background-color: var(--wp--preset--color--orange);
}

.pretitle-link .icon-text-link {
    backface-visibility: hidden;
    will-change: transform;
    transition: transform var(--transition-fast);
}

.pretitle-link:hover .icon-text-link {
    /*transform: matrix(0, 1, 1, 0, 0, 0);*/
    transform: rotate(90deg);
}

@media (min-width: 48em) {
    .pretitle.dn {
        display: block;
    }

    .title-with-link {
        align-items: baseline;
        justify-content: space-between;
        flex-direction: row;
    }
}

.company-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3em;
    margin-bottom: 6em;
}

.company-values-item-title {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.company-values-item-title h6 {
    font-size: 1.25em;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.company-values-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75em;
    height: 3.75em;
    background-color: var(--wp--preset--color--graphite);
    border-radius: 50%;
    flex-shrink: 0;
}

@media (min-width: 48em) {
    .company-values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4em 2em;
        margin-bottom: 8em;
    }

    .company-values-item-title {
        gap: 1.5em;
        margin-bottom: 1.5em;
    }

    .company-values-item-title h6 {
        font-size: 1.5em;
        line-height: 1.2;
    }
}

@media (min-width: 75em) {
    .company-values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6em 4em;
        margin-bottom: 10em;
    }
}

.company-mission-block {
    display: grid;
    grid-template-areas:    "title"
                            "image"
                            "text";
    gap: 1.5em;
}

.company-mission-block h3 {
    grid-area: title;
}

.company-mission-block img {
    grid-area: image;
}

.company-mission-text {
    grid-area: text;
}

.company-mission-text p + p {
    margin-top: 1em;
}

@media (min-width: 48em) {
    .company-mission-block h3 {
        margin-bottom: 1rem;
    }
}

@media (min-width: 75em) {
    .company-mission-block {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:    "image title"
                                "image text";
        gap: 2em 4em;
    }

    .company-mission-block h3 {
        margin-bottom: 0;
    }
}



.projects-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

.projects-section-item {
    display: block;
    position: relative;
    aspect-ratio: 5 / 6;
    width: 100%;
    color: var(--color-white);
    transition: transform var(--transition-smooth-long), filter var(--transition-smooth-long);
    filter: blur(9px);
    z-index: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    z-index: 1;
}

.projects-section-item.is-animated {
    filter: blur(0px);
}

.projects-section-item:hover {
    z-index: 2;
    transform: scale(1.05);
}

.projects-section-item .icon-link {
    backface-visibility: hidden;
    will-change: transform;
    transition: transform var(--transition-smooth);
}

.projects-section-item:hover .icon-link {
    /*transform: matrix(0, 1, 1, 0, 0, 0);*/
    transform: rotate(90deg);
}

.projects-section-item::after {
    content: '';
    position: absolute;
    inset: 65% 0 0;
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 1;
}

.projects-section-item-image {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1.2);
    transform-origin: 50% 50%;
    object-fit: cover;
    object-position: center center;
    max-width: inherit;
    max-height: inherit;
}

.projects-section-item-image {
    transition: transform var(--transition-smooth-long);
    will-change: transform;
}

.projects-section-item:hover .projects-section-item-image {
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-50% + var(--mouse-y, 0px))) scale(1.2);
}

.projects-section-item .overlay {
    opacity: .5;
}

.projects-section-item-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
    position: absolute;
    inset: auto 1em 1em;
    z-index: 2;
}

.projects-section-item-text {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.projects-section-item-text h5 {
    font-weight: 700;
    word-wrap: anywhere;
}

.projects-section-item-text p {
    color: var(--wp--preset--color--light-gray);
}

@media (min-width: 30em) {
    .projects-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 48em) {
    .projects-section-item-title {
        gap: 2em;
        inset: auto 2em 2em;
    }

    .projects-section-item-text {
        gap: 1em;
    }

    .projects-section-item-text p {
        font-size: 1.125em;
        line-height: 1.3333;
    }
}


@media (min-width: 75em) {
    .projects-section-grid {
        gap: 2em;
    }

    .projects-section-item-text {
        gap: 2em;
    }

    .projects-section-item-text p {
        font-size: 1.5em;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -0.01em;
    }
}

.button-link {
    display: block;
    width: 100%;
    margin: 3em auto 0;
}

@media (min-width: 48em) {
    .button-link {
        width: 200px;
        margin-top: 4em;
    }
}

@media (min-width: 75em) {
    .button-link {
        margin-top: 5em;
    }
}



.projects-section-interesting::before {
    content: '';
    display: block;
    position: sticky;
    top: 0;
    height: 6em;
    z-index: 2;
    background-color: var(--wp--preset--color--light-gray);
}

.projects-section-interesting h3 {
    position: relative;
    margin-bottom: 2rem;
    z-index: 3;
}

.projects-interesting-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
}

.projects-interesting-left {
    position: sticky;
    top: var(--header-height);
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.projects-left-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    font-weight: 500;
    border-radius: 0 0 0 var(--border-radius);
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--wp--preset--color--light-gray);
    z-index: 2;
}

.projects-interesting-images-holder {
    position: relative;
    width: 100%;
    max-height: 30vh;
    max-height: 30dvh;
    aspect-ratio: 4 / 3;
    flex-grow: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--wp--preset--color--graphite);
    z-index: 1;
}

.projects-interesting-images-holder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: inherit;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
    will-change: opacity;
}

.projects-interesting-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 1;
}

.projects-interesting-item {
    min-height: auto;
    display: flex;
    flex-direction: column;
    opacity: .2;
    transition: opacity var(--transition-smooth);
    will-change: opacity;
    min-height: calc(100vh - var(--header-height) - var(--pilh, calc((100vw - 2em) / 4 * 3)));
    min-height: calc(100dvh - var(--header-height) - var(--pilh, calc((100vw - 2em) / 4 * 3)));
}

.projects-interesting-item + .projects-interesting-item  {
    margin-top: 3em;
}

.projects-interesting-item h4 {
    font-size: 1.25em;
    line-height: 1.2;
    letter-spacing: -.01;
    margin-bottom: 1em;
}

.projects-interesting-item .icon-link {
    width: .5em;
    height: .5em;
    background-color: var(--wp--preset--color--orange);
}

.projects-interesting-item h4 a .icon-link {
    backface-visibility: hidden;
    will-change: transform;
    transition: transform var(--transition-smooth);
}

.projects-interesting-item h4 a:hover .icon-link {
    /*transform: matrix(0, 1, 1, 0, 0, 0);*/
    transform: rotate(90deg);
}

.projects-interesting-item .icon-link-wrapper {
    display: inline-flex;
    font-size: 1rem;
    width: 1em;
    height: 1em;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--orange);
    vertical-align: .1875em;
    margin-left: .25em;
}

.projects-interesting-item h4 a:hover {
    color: var(--wp--preset--color--orange-dark);
}

.projects-interesting-item h4 a:hover .icon-link-wrapper {
    border-color: var(--wp--preset--color--orange-dark);
}

.projects-interesting-item h4 a:hover .icon-link {
    background-color: var(--wp--preset--color--orange-dark);
}

.projects-interesting-item-text p + p {
    margin-top: 1em;
}

@media (min-width: 48em) {
    .projects-section-interesting {
        margin-top: 8em;
    }

    .projects-section-interesting::before {
        display: none;
    }

    .projects-section-interesting h3 {
        margin-bottom: 3rem;
    }

    .projects-interesting-container {
        grid-template-columns: 6fr 4fr;
        gap: 3em;
    }

    .projects-interesting-left {
        top: var(--header-height);
        height: calc((100vw - 5em) * 0.6 / 4 * 3);
    }

    .projects-left-num {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125em;
        line-height: 1.33333;
    }

    .projects-interesting-images-holder {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: inherit;
    }

    .projects-interesting-item {
        min-height: calc(100vh - var(--header-height));
        min-height: calc(100dvh - var(--header-height));
    }

    .projects-interesting-item + .projects-interesting-item  {
        margin-top: 0;
    }

    .projects-interesting-item h4 {
        font-size: 1.5em;
        font-weight: 700;
    }

    .projects-interesting-item .icon-link-wrapper {
        font-size: 1.25rem;
    }
}

@media (min-width: 75em) {
    .projects-section-interesting {
        margin-top: 10em;
    }

    .projects-section-interesting h3 {
        margin-bottom: 3rem;
    }

    .projects-interesting-container {
        gap: 4em;
    }

    .projects-interesting-left {
        top: 104px;
        height: calc(100vh - 104px);
        height: calc(100dvh - 104px);
    }

    .projects-left-num {
        width: 3rem;
        height: 3rem;
        font-size: 1.5em;
        line-height: 1.2;
        font-weight: 700;
    }

    .projects-interesting-images-holder {
        left: 0;
        width: 100%;
        max-height: 100%;
    }

    .projects-interesting-item {
        min-height: calc(100vh - 104px);
        min-height: calc(100dvh - 104px);
    }

    .projects-interesting-item h4 {
        font-size: 2em;
    }
}

@media (min-width: 79em) {
    .projects-interesting-images-holder {
        left: calc((100vw - 1200px) / 2 * (-1) + 2em);
        width: calc(100% + ((100vw - 1200px) / 2) - 2em);
    }
}



.clients-section-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.clients-section-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 1em;
}

.clients-section-item > img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.clients-section-item.is-finished {
    transition: transform var(--transition-smooth);
    transition-delay: 0s;
    will-change: transform;
}

.clients-section-item.is-finished:hover {
    transform: scale(1.05);
}

@media (min-width: 48em) {
    .clients-section-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5em;
    }
}

@media (min-width: 75em) {
    .clients-section-grid {
        gap: 2em;
    }

    .clients-section-item {
        aspect-ratio: 4 / 3;
    }
}



.page-fs-section {
    position: relative;
    display: block;
    padding-block: 6em;
    overflow: hidden;
    color: var(--color-white);
}

.page-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.page-bg-img {
    position: absolute;
    left: 50%;
    top: -10%;
    width: 100%;
    height: 120%;
    transform: translate(-50%, 0);
    max-width: inherit;
    max-height: inherit;
    object-fit: cover;
    object-position: center center;
}

.page-fs-section .container {
    position: relative;
    z-index: 2;
    padding-inline: 1em;
}

.breadcrumbs {
    display: block;
    position: relative;
    margin-bottom: .5em;
}

.breadcrumbs-list {
    line-height: 1.2;
}

.crumb-item {
    display: inline;
    position: relative;
    font-size: .75em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--light-gray);
}

.crumb-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -.25em;
    margin-inline: .375em;
}

.icon-separator {
    mask-image: url('../img/icons/bc-separator.svg');
    -webkit-mask-image: url('../img/icons/bc-separator.svg');
    background-color: var(--wp--preset--color--light-gray);
    width: .5em;
}

.crumb-item > a {
    color: var(--wp--preset--color--orange-light);
}

.crumb-item > a:hover {
    color: var(--wp--preset--color--orange);
}

.page-description {
    color: var(--wp--preset--color--light-gray);
    margin-top: 4em;
}

.page-description p + p {
    margin-top: 1em;
}

.page-description a {
    text-decoration: underline;
}

.page-description a:hover {
    color: var(--wp--preset--color--orange);
}

@media (min-width: 48em) {
    .page-fs-section {
        padding-block: 8em;
    }

    .breadcrumbs {
        margin-bottom: 1em;
    }

    .crumb-item {
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0;
    }

    .crumb-separator {
        width: 1.125em;
        height: 1.125em;
        vertical-align: -.25em;
        margin-inline: .44444em;
    }

    .icon-separator {
        width: .625em;
    }

    .page-description {
        max-width: 800px;
        margin-top: 6rem;
        font-size: 1.125em;
    }
}

@media (min-width: 75em) {
    .page-fs-section {
        padding-block: 16em 10em;
    }

    .page-fs-section .container {
        max-width: calc(1200px + 4em);
        padding-inline: 2em;
    }

    .breadcrumbs {
        margin-bottom: 1.5em;
    }

    .page-description {
        margin-top: 8rem;
    }
}



.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25em;
    width: 100%;
}

.chart-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-container {
    width: 17.5em;
    height: 17.5em;
}

.chart-title {
    margin-top: .5em;
    font-size: 1em;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--wp--preset--color--graphite);
    text-align: center;
    text-transform: uppercase;
}

@media (min-width: 39em) {
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-title {
        margin-top: .5em;
        font-size: 1.25em;
    }
}

@media (min-width: 77em) {
    .charts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}



.experience-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 2em;
}

.experience-values-item:nth-child(2n + 2) {
    justify-self: flex-start;
}

.experience-values-item-value {
    display: flex;
    align-items: baseline;
    font-size: 2em;
    line-height: 1.33333;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.experience-values-item-value .value-text {
    font-size: .625em;
    line-height: 1.2;
    margin-left: .2em;
}

.experience-values-item-text {
    margin-top: .25em;
}

@media (min-width: 48em) {
    .experience-values-item-value {
        font-size: 3em;
        line-height: 1.33333;
        letter-spacing: -0.01em;
        font-weight: 700;
    }

    .experience-values-item-value .value-text {
        font-size: .66666em;
        line-height: 1.2;
        margin-left: .25em;
    }

    .experience-values-item-text {
        font-size: 1.25em;
        line-height: 1.2;
        letter-spacing: -0.01em;
        font-weight: 300;
    }
}

@media (min-width: 75em) {
    .experience-values-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .experience-values-item:nth-child(2n + 2) {
        justify-self: center;
    }

    .experience-values-item-value {
        font-size: 4em;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .experience-values-item-value .value-text {
        font-size: .5em;
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin-left: .25em;
    }

    .experience-values-item-text {
        font-size: 1.5em;
        margin-top: .66666em;
    }
}



.employees-section {
    margin-top: 4em;
}

.employees-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3em;
}

.employees-item {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: .5em;
}

.employees-item-image {
    display: block;
    position: relative;
    width: 100%;
    border-radius: var(--border-radius);
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.employees-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employees-item-speciality {
    margin-block: .85714em 1.14286em;
    font-size: .875em;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

@media (min-width: 48em) {
    .employees-section {
        margin-top: 6em;
    }

    .employees-grid {
        gap: 4em;
    }

    .employees-item {
        flex-direction: row;
        gap: 2em;
    }

    .employees-item-image {
        width: 50%;
        height: inherit;
    }

    .employees-item h5 {
        font-size: 2em;
        line-height: 1.2;
        letter-spacing: 0;
        font-weight: 800;
    }

    .employees-item-speciality {
        margin-block: .75em 2em;
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0;
    }

    .employees-item-decription {
        font-size: 1.125em;
        line-height: 1.6;
    }
}

@media (min-width: 75em) {
    .employees-section {
        margin-top: 10em;
    }

    .employees-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4em;
    }

    .employees-item-image {
        width: 30%;
        aspect-ratio: 3 / 4;
    }
}



.history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

.history-item {
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding: 1em;
    border-radius: var(--border-radius);
    background-color: var(--wp--preset--color--graphite);
    color: var(--wp--preset--color--light-gray);
}

.history-item:last-child {
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--orange-dark);
}

.history-item-year {
    font-size: 2em;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-white);
}

@media (min-width: 48em) {
    .history-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    .history-item {
        padding: 1.5em;
    }

    .history-item-year {
        font-size: 2.5em;
    }

    .history-item-text {
        font-size: 1.125em;
    }
}

@media (min-width: 75em) {
    .history-grid {
        gap: 4em;
    }

    .history-item {
        padding: 2em;
    }

    .history-item-year {
        font-size: 3em;
    }
}



.events-section {
    padding-block: 6em;
}

.events-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.container .events-section-grid {
    gap: 1em;
}

.events-section-item {
    display: block;
    position: relative;
    aspect-ratio: 5 / 6;
    width: 100%;
    color: var(--color-white);
    transition: transform var(--transition-smooth-long), filter var(--transition-smooth-long);
    filter: blur(9px);
    z-index: 1;
    overflow: hidden;
}

.events-section-item.is-animated {
    filter: blur(0px);
}

.events-section-item::after {
    content: '';
    position: absolute;
    inset: 65% 0 0;
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 1;
}

.events-section-item-image {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1.2);
    transform-origin: 50% 50%;
    object-fit: cover;
    object-position: center center;
    max-width: inherit;
    max-height: inherit;
    transition: transform var(--transition-smooth-long);
    will-change: transform;
}

.events-section-item:hover .events-section-item-image {
    opacity: 1;
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-50% + var(--mouse-y, 0px))) scale(1.2);
}

.events-section-item .icon-link {
    backface-visibility: hidden;
    will-change: transform;
    transition: transform var(--transition-smooth);
}

.events-section-item:hover .icon-link {
    /*transform: matrix(0, 1, 1, 0, 0, 0);*/
    transform: rotate(90deg);
}

.events-section-item .overlay {
    opacity: .4;
}

.events-section-item-text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
    position: absolute;
    inset: auto 1em 1em;
    z-index: 2;
}

.events-section-item-year {
    color: var(--wp--preset--color--light-gray);
    font-weight: 300;
}

.events-section-item-text h5 {
    font-weight: 700;
    word-wrap: anywhere;
}


@media (min-width: 30em) {
    .events-section-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .events-section-item-year + h5 {
        margin-top: .5rem;
    }
}

@media (min-width: 48em) {
    .events-section {
        padding-block: 8em;
    }

    .events-section-item-text {
        inset: auto 2em 2em;
        gap: 2em;
    }

    .events-section-item-text h5 {
        font-size: 1.5rem;
        line-height: 1.33333;
        letter-spacing: 0;
        font-weight: 700;
    }

    .events-section-item-year {
        font-size: 1.125em;
        line-height: 1.3333;
    }
}

@media (min-width: 75em) {
    .events-section {
        padding-block: 10em;
    }

    .events-section-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .container .events-section-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    .events-section-item {
        margin-inline: -.5px;
    }
}

@media (min-width: 100em) {
    .events-section-item-text h5 {
        font-size: 2rem;
        font-weight: 800;
    }

    .events-section-item-year {
        font-size: 1.25em;
        line-height: 1.2;
    }
}



.contacts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

.contacts-grid-item {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: 1em;
}

.contacts-grid-item-container {
    display: flex;
    align-items: flex-start;
    gap: .25em;
}

.contacts-grid-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    margin-top: 1.625em;
}

.contacts-grid-item-icon .mask-icon {
    background-color: var(--wp--preset--color--dark-graphite-40);
}

.contacts-grid-item .icon-phone {
    width: 12px;
    height: 12px;
}

.contacts-grid-item .icon-email {
    width: 14.25px;
    height: 13.6px;
}

.contacts-grid-item .icon-address {
    width: 10.5px;
    height: 14.82px;
}

.contacts-grid-item .icon-worktime {
    width: 13.5px;
    height: 13.5px;
}

.contacts-grid-item label {
    font-size: .75em;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--dark-graphite-40);
}

.contacts-grid-item-content {
    font-size: 1.125em;
    line-height: 1.3333;
    color: var(--wp--preset--color--graphite);
}

.contacts-grid-item-content a:hover {
    color: var(--wp--preset--color--orange-dark);
}

.contacts-section-map {
    margin-top: 1em;
}

@media (min-width: 48em) {
    .contacts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    .contacts-grid-item {
        padding: 2em;
    }

    .contacts-section-map {
        margin-top: 2em;
    }

    .contacts-grid-item-icon {
        width: 2em;
        height: 2em;
        margin-top: 1.625em;
    }

    .contacts-grid-item .icon-phone {
        width: 16px;
        height: 16px;
    }

    .contacts-grid-item .icon-email {
        width: 19px;
        height: 18px;
    }

    .contacts-grid-item .icon-address {
        width: 14px;
        height: 20px;
    }

    .contacts-grid-item .icon-worktime {
        width: 18px;
        height: 18px;
    }

    .contacts-grid-item-content {
        font-size: 1.5em;
        line-height: 1.2;
        letter-spacing: -0.01em;
        font-weight: 600;
    }
}

@media (min-width: 75em) {
    .contacts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}



.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.document-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    position: relative;
    border-radius: var(--border-radius);
    border: 1px solid #d0d1d1;
    background-color: #eeeeee;
    z-index: 1;
}

.document-image.is-finished {
    transition: transform var(--transition-smooth);
    transition-delay: 0s;
}

.document-image.is-finished:hover {
    transform: scale(1.05);
    z-index: 2;
}

.document-image img {
    border-radius: var(--border-radius);
    border: 1px solid #d0d1d1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    aspect-ratio: 89 / 128;
    object-fit: cover;
}

.document-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    background-color: rgba(255, 255, 255, .8);
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    position: absolute;
    bottom: calc(1em + 1px);
    right: calc(1em + 1px);
}

.icon-zoom {
    mask-image: url('../img/icons/zoom.svg');
    -webkit-mask-image: url('../img/icons/zoom.svg');
    background-color: var(--wp--preset--color--graphite);
    width: 10.67px;
    height: 10.67px;
}

.document-image:hover .icon-zoom {
    background-color: var(--wp--preset--color--orange);
}

@media (min-width: 48em) {
    .document-zoom {
        width: 3em;
        height: 3em;
    }

    .icon-zoom {
        width: 1em;
        height: 1em;
    }
}

@media (min-width: 75em) {
    .documents-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2em;
    }

    .document-image {
        padding: 2em;
    }

    .document-zoom {
        bottom: calc(2em + 1px);
        right: calc(2em + 1px);
    }
}


.dark-section {
    background-color: var(--wp--preset--color--graphite);
}

.date {
    display: inline-block;
    position: relative;
    background-color: var(--wp--preset--color--orange-dark);
    color: var(--wp--preset--color--light-gray);
    border-radius: var(--border-radius);
    padding-inline: .57143em;
    font-size: .875em;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.date + .content, .date + .gallery {
    margin-top: 1rem;
}

.content h2 {
    font-size: 1.25em;
    line-height: 1.33333;
    letter-spacing: 0;
    margin-bottom: 1.5em;
}

.content * + h2 {
    margin-top: 3em;
}

.content h3 {
    font-size: 1.125em;
    line-height: 1.33333;
    letter-spacing: 0;
    margin-bottom: 1.5em;
}

.content * + h3 {
    margin-top: 3em;
}

.content h2 + h3 {
    margin-top: 0;
}

.content p + p, ul + p, ol + p, p + ul, p + ol, figure + p, p + figure {
    margin-top: 1em;
}

.content ul > li {
    padding-left: 1em;
    position: relative;
}

.content ul > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background-color: var(--wp--preset--color--orange-light);
    top: .75em;
    left: 0;
}

.content a {
    text-decoration: underline;
}

.content a:hover {
    color: var(--wp--preset--color--orange);
    text-decoration: none;
}

.content + .gallery {
    margin-top: 4em;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.gallery-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform var(--transition-smooth);
    aspect-ratio: 4 / 3;
}

.gallery-img:hover {
    transform: scale(1.05);
}

.gallery-img > img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

@media (min-width: 48em) {
    .date + .content, .date + .gallery {
        margin-top: 2rem;
    }

    .date {
        padding-inline: .625em;
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0;
    }

    .content {
        font-size: 1.125em;
        line-height: 1.5;
    }

    .content h2 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .content h2 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .content + .gallery {
        margin-top: 6em;
    }

    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 75em) {
    .content + .gallery {
        margin-top: 8em;
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 2em;
    }
}


.scroll-arrow {
    position: absolute;
    bottom: .25em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: .625em;
    cursor: pointer;
    outline: none;
    gap: .25em;
}

.chevron {
    display: block;
    width: .75em;
    height: .75em;
    border-right: 2px solid var(--wp--preset--color--orange-light);
    border-bottom: 2px solid var(--wp--preset--color--orange-light);
    transform: rotate(45deg); 
    margin-top: -.375em;
    opacity: 0;
    animation: chevron-wave 1.5s infinite;
    transition: border-color var(--transition-smooth);
}

.scroll-arrow:hover .chevron {
    border-color: var(--wp--preset--color--orange);
}

.chevron:nth-child(1) {
    animation-delay: 0s;
}
.chevron:nth-child(2) {
    animation-delay: 0.2s;
}
.chevron:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes chevron-wave {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-2px, -2px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(2px, 2px);
    }
}


.project-content-title {
    margin-bottom: .8em;
}

@media (min-width: 48em) {
    .project-content-title {
        margin-bottom: 1em;
    }
}



.cookies_message {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 103;
    background-color: var(--wp--preset--color--dark-graphite);
}

.cookies_message_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 1em;
    max-width: 79em;
    width: 100%;
    margin-inline: auto;
    padding: 1.25em 1em;
}

.cookies_message_text {
    font-size: .75em;
    line-height: 1.5;
    color: white;
}

.cookies_message_text a {
    color: white;
    text-decoration: underline;
}

.cookies_message_text a:hover {
    text-decoration: none;
}



@media (min-width: 48em) {
    .cookies_message_content {
        flex-direction: row;
        gap: 2em;
        padding: 2em;
    }
    
    .cookies_message_text {
        font-size: .875em;
    }

    .cookies_message_accept {
        max-width: 200px;
    }
}