.hero::before {
    background-image:
        linear-gradient(180deg, rgba(33, 33, 33, 0.3) 0%, rgba(183, 183, 183, 0) 40%),
        linear-gradient(-90deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(rgba(33, 33, 33, 0.2), rgba(33, 33, 33, 0.2)),
        var(--img-lg);
}

@media (max-width: 1279px) {
    .hero::before {
        background-image:
            linear-gradient(180deg, rgba(33, 33, 33, 0.3) 0%, rgba(183, 183, 183, 0) 40%),
            linear-gradient(-90deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 100%),
            linear-gradient(rgba(33, 33, 33, 0.2), rgba(33, 33, 33, 0.2)),
            var(--img-md, var(--img-lg));
    }
}

@media (max-width: 767px) {
    .hero::before {
        background-image:
            linear-gradient(180deg, rgba(33, 33, 33, 0.3) 0%, rgba(183, 183, 183, 0) 40%),
            linear-gradient(-90deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 100%),
            linear-gradient(rgba(33, 33, 33, 0.2), rgba(33, 33, 33, 0.2)),
            var(--img-sm, var(--img-md, var(--img-lg)));
    }
}

.split__media--quote {
    background-image:
        linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.3) 100%),
        var(--img-lg);
}

.split__media--intl {
    background-image:
        linear-gradient(180deg, rgba(24, 25, 26, 0) 46%, rgba(24, 25, 26, 0.6) 100%),
        linear-gradient(rgba(42, 72, 105, 0.05), rgba(42, 72, 105, 0.05)),
        var(--img-lg);
}

@media (max-width: 1279px) {
    .split__media--quote {
        background-image:
            linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.3) 100%),
            var(--img-md, var(--img-lg));
    }

    .split__media--intl {
        background-image:
            linear-gradient(180deg, rgba(24, 25, 26, 0) 46%, rgba(24, 25, 26, 0.6) 100%),
            linear-gradient(rgba(42, 72, 105, 0.05), rgba(42, 72, 105, 0.05)),
            var(--img-md, var(--img-lg));
    }
}

@media (max-width: 767px) {
    .split__media--quote {
        background-image:
            linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.3) 100%),
            var(--img-sm, var(--img-md, var(--img-lg)));
    }

    .split__media--intl {
        background-image:
            linear-gradient(180deg, rgba(24, 25, 26, 0) 46%, rgba(24, 25, 26, 0.6) 100%),
            linear-gradient(rgba(42, 72, 105, 0.05), rgba(42, 72, 105, 0.05)),
            var(--img-sm, var(--img-md, var(--img-lg)));
    }
}

.palanga { background-image: var(--img-lg); }

@media (max-width: 1279px) { .palanga { background-image: var(--img-md, var(--img-lg)); } }
@media (max-width: 767px)  { .palanga { background-image: var(--img-sm, var(--img-md, var(--img-lg))); } }

.case__img,
.social-feed__item { background-image: var(--img-lg); }

@media (max-width: 767px) {
    .case__img,
    .social-feed__item { background-image: var(--img-sm, var(--img-lg)); }
}


.video-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: rgba(10, 10, 10, 0.85);
}

.video-modal[hidden] { display: none; }

.video-modal__frame {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.video-modal__close::before,
.video-modal__close::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 21px;
    width: 24px;
    height: 2px;
    background: #fff;
}

.video-modal__close::before { transform: rotate(45deg); }
.video-modal__close::after  { transform: rotate(-45deg); }


button.btn {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.text h2,
.text h3,
.text h4 {
    margin: 0 0 var(--sp-16);
    font-family: var(--font-head);
    font-weight: 400;
    line-height: var(--lh-tight);
}

.text h2 { font-size: var(--fs-h2); }
.text h3 { font-size: var(--fs-h3); }
.text h4 { font-size: var(--fs-h4); }

.text p,
.text li {
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: var(--lh-base);
}

.text > *:first-child { margin-top: 0; }
.text > *:last-child { margin-bottom: 0; }

.text ul,
.text ol { margin: 0 0 var(--sp-16); padding-left: 1.2em; }
.text li + li { margin-top: var(--sp-8); }

.text .text-left   { text-align: left; }
.text .text-center { text-align: center; }
.text .text-right  { text-align: right; }
.text .text-justify { text-align: justify; }

.service-card__list ul { margin: 0; padding: 0; list-style: none; }
.service-card__list p:last-child { margin-bottom: 0; }

.compare__desc p { text-align: center; }
.compare__desc p + p { margin-top: var(--sp-16); }

.icon-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(115, 116, 124, 0.1);
    color: var(--c-grey-2);
}

.icon-item__icon svg { display: block; }

.fp1__feature-icon { color: var(--c-white); }
.fp1__feature-icon svg { display: block; }

.service-card__illustration {
    color: var(--c-grey);
}

.service-card__illustration svg {
    display: block;
    width: 150px;
    height: 150px;
}

.service-card__dot--tl { left: 8px;  top: 24px; }
.service-card__dot--tr { right: 8px; top: 24px; }
.service-card__dot--bl { left: 8px;  bottom: 24px; }
.service-card__dot--br { right: 8px; bottom: 24px; }


.submenu {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 5;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    background: var(--c-white);
    color: var(--c-dark);
    transition:
        grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s;
}

.submenu.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
}

.submenu__inner {
    min-height: 0;
    overflow: hidden;
}

.submenu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-48) var(--sp-24);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-48) var(--gutter);
}

.submenu__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-24);
    padding: var(--sp-24);
    background: var(--c-light);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.submenu.is-open .submenu__card {
    opacity: 1;
    transform: none;
}

.submenu.is-open .submenu__card:nth-child(2) { transition-delay: 0.06s; }
.submenu.is-open .submenu__card:nth-child(3) { transition-delay: 0.12s; }
.submenu.is-open .submenu__card:nth-child(4) { transition-delay: 0.18s; }

.submenu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--c-white);
    color: var(--c-grey-2);
}

.submenu__icon svg,
.submenu__icon img { display: block; width: 36px; height: 36px; }

.submenu__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

.submenu__title { color: var(--c-dark); }
.submenu__text { color: var(--c-grey-2); }

.submenu__more {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.submenu__more-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.submenu__more-row img {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    transition: transform var(--t-fast);
}

.submenu__more::after {
    content: '';
    display: block;
    align-self: stretch;
    height: 1px;
    background: var(--c-dark);
}

.submenu__card:hover .submenu__more-row img { transform: translateX(4px); }

.submenu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(24, 25, 26, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

.submenu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.nav__item--sub[aria-expanded="true"]::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .submenu,
    .submenu__card,
    .submenu-overlay { transition: none; }
}

@media (max-width: 1023px) {
    .submenu { display: none; }
}


@media (min-width: 1024px) {
    .nav__level--main { display: contents; }
    .nav__level--sub,
    .nav__langs { display: none; }
}

@media (max-width: 1023px) {
    .nav {
        padding: 0;
        background: var(--c-white);
        color: var(--c-dark);
    }

    .nav__level {
        display: flex;
        flex-direction: column;
        gap: var(--sp-32);
        min-height: 100%;
        padding: calc(56px + var(--sp-24)) var(--sp-24) var(--sp-24);
        transition: transform var(--t-base), opacity var(--t-base);
    }

    .nav__level--sub {
        position: absolute;
        inset: 0;
        background: var(--c-white);
        overflow-y: auto;
    }

    .nav__level[hidden] { display: none; }

    .nav__level--main,
    .nav__sublist {
        gap: var(--sp-16);
    }

    .nav__item {
        justify-content: space-between;
        padding: 0 0 var(--sp-16);
        border-bottom: 1px solid #E6EAED;
        color: var(--c-dark);
        font-family: var(--font-body);
        font-size: 16px;
        line-height: var(--lh-base);
    }

    .nav__item--sub::after {
        transform: rotate(-90deg);
    }

    .nav__item--sub[aria-expanded="true"]::after {
        transform: rotate(-90deg);
    }

    .nav__back {
        display: flex;
        align-items: center;
        gap: var(--sp-24);
        padding: 0;
        border: 0;
        background: none;
        color: var(--c-dark);
        font-family: var(--font-body);
        font-size: 18px;
        line-height: var(--lh-base);
        text-align: left;
        cursor: pointer;
    }

    .nav__back::before {
        content: '';
        width: 24px;
        height: 24px;
        flex: none;
        background: url('../images/icons/chevron-down.svg') center / contain no-repeat;
        transform: rotate(90deg);
    }

    .nav__level--sub { gap: var(--sp-16); }

    .nav__sublist {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #E6EAED;
        padding-top: var(--sp-16);
    }

    .nav__level--main > .nav__item:first-of-type { margin-top: 0; }

    .nav__langs {
        display: flex;
        gap: var(--sp-12);
        margin-top: auto;
    }

    .nav__lang {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--c-white);
        box-shadow: inset 0 0 0 1px #E6EAED;
        color: var(--c-dark);
        font-size: 14px;
        text-decoration: none;
    }

    .nav__lang.is-active {
        background: var(--c-dark);
        box-shadow: none;
        color: var(--c-white);
    }

    .header.is-nav-open { color: var(--c-dark); }
    .header.is-nav-open .logo__mark,
    .header.is-nav-open .logo__text { filter: invert(1); }

    .header--fixed.is-nav-open {
        transform: none;
        backdrop-filter: none;
        will-change: auto;
    }
}


.header__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__call { display: none; }

@media (max-width: 1023px) {
    .lang { display: none; }

    .header__cta { display: none; }

    .header__call {
        display: flex;
        align-items: center;
        gap: var(--sp-16);
        padding: 4px 4px 4px 16px;
        background: var(--c-white);
    }

    .header.is-nav-open .header__call { background: var(--c-dark); }
    .header.is-nav-open .header__call-icon { filter: invert(1); }
    .header.is-nav-open .header__call-arrow { filter: invert(1); }

    .burger { order: -1; }

    .nav__item--sub::after,
    .nav__item--sub[aria-expanded="true"]::after {
        background-image: url('../images/icons/chevron-right-dark.svg');
        transform: none;
    }

    .nav__back::before {
        background-image: url('../images/icons/chevron-left-dark.svg');
        transform: none;
    }

    .nav__back {
        align-items: center;
        gap: var(--sp-24);
    }
}


@media (min-width: 1024px) and (max-width: 1279px) {
    .header__inner {
        gap: var(--sp-24);
    }

    .nav {
        gap: var(--sp-32);
    }

    .header__actions {
        gap: var(--sp-16);
    }
}


html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


.page-404 .header {
    position: relative;
    background: var(--c-dark);
}

.error-page {
    display: flex;
    align-items: center;
    min-height: 60vh;
}

.error-page__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-16);
    max-width: 720px;
}

.error-page__title {
    margin: 0;
}

.error-page__text {
    color: var(--c-grey-2);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-16);
    margin-top: var(--sp-16);
}

.error-page__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-12) var(--sp-24);
    margin: var(--sp-32) 0 0;
    padding: var(--sp-24) 0 0;
    border-top: 1px solid var(--c-border);
    list-style: none;
}

.error-page__link {
    font-size: var(--fs-sm);
    color: var(--c-grey-2);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--t-fast);
}

.error-page__link:hover {
    color: var(--c-dark);
}

.page-text,
.page-work {
    padding-top: 72px;
}

.page-text .header:not(.header--fixed),
.page-work .header:not(.header--fixed) {
    background: var(--c-dark);
}

.text-page {
    padding-block: var(--section-y);
}

.text-page__inner {
    max-width: calc(800px + 2 * var(--gutter));
}

.text-page__title {
    margin-bottom: var(--sp-48);
}

.text.text-page__body {
    display: block;
    color: var(--c-grey-2);
}

.text.text-page__body > * {
    margin: var(--sp-16) 0 0;
}

.text.text-page__body > *:first-child {
    margin-top: 0;
}

.text.text-page__body > h2 {
    margin-top: var(--sp-48);
    font-size: var(--fs-h3);
    color: var(--c-dark);
}

.text.text-page__body > h3,
.text.text-page__body > h4 {
    margin-top: var(--sp-32);
    font-size: var(--fs-h5);
    color: var(--c-dark);
}

.text.text-page__body > h2 + *,
.text.text-page__body > h3 + *,
.text.text-page__body > h4 + * {
    margin-top: var(--sp-12);
}

.text.text-page__body > h2 + h3 {
    margin-top: var(--sp-24);
}

.text.text-page__body strong,
.text.text-page__body b {
    color: var(--c-dark);
}

.text.text-page__body a {
    color: var(--c-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.text.text-page__body hr {
    margin-block: var(--sp-40);
    border: 0;
    border-top: 1px solid var(--c-border);
}

@media (max-width: 767px) {
    .page-text,
    .page-work {
        padding-top: 56px;
    }

    .text-page__title {
        margin-bottom: var(--sp-32);
    }

    .text.text-page__body > h2 {
        margin-top: var(--sp-40);
    }
}

.text.work-page__text > h1 {
    margin: 0 0 var(--sp-16);
    font-family: var(--font-head);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
}

.work-page__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-48);
    margin-top: var(--sp-48);
}

@media (max-width: 1279px) {
    .work-page__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-48) var(--sp-32);
    }
}

@media (max-width: 1023px) {
    .work-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-40) var(--sp-24);
    }
}

@media (max-width: 599px) {
    .work-page__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-40);
    }
}

.form__picked-text {
    box-shadow: inset 2px 0 0 var(--c-dark);
}
