.project-dialog {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--color-text);
}

.project-dialog:not([open]) {
    display: none;
}

.project-dialog::backdrop {
    background: rgba(0, 0, 0, .24);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: project-dialog-backdrop-in .18s ease-out both;
}

.project-dialog__surface {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(219, 31, 38, .08), transparent 28%),
        linear-gradient(180deg, #090909 0%, #101010 100%);
    clip-path: circle(0 at 50% 50%);
    transition: clip-path .62s cubic-bezier(.72, 0, .2, 1);
    will-change: clip-path;
}

.project-dialog.is-open .project-dialog__surface {
    clip-path: circle(150vmax at 50% 50%);
    animation: project-dialog-reveal .76s cubic-bezier(.72, 0, .2, 1) .08s backwards;
}

@keyframes project-dialog-backdrop-in {
    from {
        background: rgba(0, 0, 0, 0);
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }

    to {
        background: rgba(0, 0, 0, .24);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }
}

@keyframes project-dialog-reveal {
    0% {
        clip-path: circle(0 at 50% 50%);
    }

    26%,
    34% {
        clip-path: circle(6vmax at 50% 50%);
    }

    100% {
        clip-path: circle(150vmax at 50% 50%);
    }
}

.project-dialog__scroll {
    width: 100%;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, .7) transparent;
    scrollbar-width: thin;
}

.project-dialog__scroll::-webkit-scrollbar {
    width: 6px;
}

.project-dialog__scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .7);
}

.project-dialog__content {
    width: 100%;
    min-height: 100%;
    padding: 54px clamp(32px, 4vw, 72px) 72px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .24s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}

.project-dialog.is-open .project-dialog__content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .46s;
}

.project-dialog__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: start;
}

.project-dialog__header h2 {
    max-width: none;
    margin: 0;
    font-size: 48px;
    font-weight: var(--font-weight-regular);
    line-height: .98;
    white-space: pre-line;
}

.project-dialog__close {
    position: relative;
    width: 84px;
    height: 84px;
    color: #fff;
    cursor: pointer;
    justify-self: end;
    transition: transform .22s ease;
}

.project-dialog__close::before,
.project-dialog__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 119px;
    height: 1px;
    background: currentColor;
    content: "";
    transform-origin: center;
}

.project-dialog__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.project-dialog__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.project-dialog__close:hover,
.project-dialog__close:focus-visible {
    transform: rotate(8deg) scale(1.06);
}

.project-dialog__close:focus-visible,
.project-tooltip__trigger:focus-visible,
.project-form__submit:focus-visible {
    outline: 1px solid #fff;
    outline-offset: 4px;
}

.project-request-form {
    display: grid;
    width: 100%;
    gap: 54px;
    margin-top: 86px;
}

.project-form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.project-field {
    position: relative;
    min-width: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .58);
    transition: border-color .2s ease;
}

.project-field:focus-within {
    border-color: #fff;
}

.project-field input,
.project-field textarea {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 28px;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
}

.project-field input {
    height: 78px;
    padding: 30px 0 10px;
}

.project-field textarea {
    height: 198px;
    min-height: 198px;
    max-height: 198px;
    padding: 48px 62px 18px 0;
    overflow-y: auto;
    line-height: 1.18;
    resize: none;
    scrollbar-color: rgba(255, 255, 255, .42) transparent;
    scrollbar-width: thin;
}

.project-field textarea::-webkit-scrollbar {
    width: 4px;
}

.project-field textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .42);
}

.project-field__hidden {
    display: none !important;
}

.project-field > label {
    position: absolute;
    top: calc(50% + 10px);
    left: 0;
    max-width: calc(100% - 16px);
    color: #fff;
    font-size: 28px;
    font-weight: var(--font-weight-regular);
    line-height: 1.1;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left top;
    transition: top .2s ease, color .2s ease, font-size .2s ease, transform .2s ease;
}

.project-field--textarea > label {
    top: 48px;
    transform: none;
}

.project-field input:focus + label,
.project-field input:not(:placeholder-shown) + label,
.project-field textarea:focus + label,
.project-field textarea:not(:placeholder-shown) + label {
    top: 9px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    transform: none;
}

.project-field__message {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    max-width: 100%;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
}

.project-telegram-prefix {
    position: absolute;
    top: 49px;
    left: 0;
    color: rgba(255, 255, 255, .48);
    font-size: 28px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .18s ease;
}

.project-field--telegram input:focus,
.project-field--telegram input:not(:placeholder-shown) {
    padding-left: 92px;
}

.project-field--telegram input:focus ~ .project-telegram-prefix,
.project-field--telegram input:not(:placeholder-shown) ~ .project-telegram-prefix {
    opacity: 1;
}

.project-field--phone {
    --project-phone-country-bg: #111;
    --iti-border-color: rgba(255, 255, 255, .18);
    --iti-country-selector-bg: var(--project-phone-country-bg);
    --iti-hover-color: rgba(255, 255, 255, .12);
    --iti-dial-code-color: rgba(255, 255, 255, .7);
    --iti-arrow-color: rgba(255, 255, 255, .72);
    --iti-icon-color: rgba(255, 255, 255, .72);
    --iti-strict-reject-flash-color: rgba(219, 31, 38, .3);
}

.project-field--phone .iti {
    width: 100%;
}

.project-field--phone .iti__selected-country {
    color: #fff;
}

.project-field--phone .iti__selected-country-primary {
    position: relative;
    top: 10px;
    width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    transition: background-color .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.project-field--phone .iti__selected-country:hover .iti__selected-country-primary,
.project-field--phone .iti__selected-country:focus-visible .iti__selected-country-primary,
.project-field--phone.is-country-open .iti__selected-country-primary {
    background: var(--project-phone-country-bg);
    transform: scale(1.06);
}

.project-field--phone .iti__selected-country:focus-visible {
    outline: none;
}

.project-field--phone .iti__selected-dial-code {
    position: relative;
    top: 10px;
    margin-left: 8px;
    color: #fff;
    font-size: 28px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
}

.project-field--phone .iti__arrow {
    margin-left: 5px;
}

.project-field--phone.is-ready > label {
    left: var(--project-phone-label-offset, 124px);
    max-width: calc(100% - var(--project-phone-label-offset, 124px) - 16px);
}

.project-field--phone:focus-within > label,
.project-field--phone.is-country-open > label,
.project-field--phone.has-value > label {
    top: 9px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    transform: none;
}

.project-dialog .project-phone-country-dropdown {
    z-index: 120;
    top: calc(anchor(bottom) + 8px) !important;
    bottom: auto !important;
    width: min(300px, calc(100vw - 36px)) !important;
    max-width: 300px;
    overflow: visible;
    isolation: isolate;
    position-try-fallbacks: none;
}

.project-dialog .project-phone-country-dropdown .iti__country-selector {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: var(--project-phone-country-bg, #111);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
    transform-origin: 25px 0;
}

.project-dialog .project-phone-country-dropdown.is-project-phone-opening .iti__country-selector {
    animation: project-phone-country-dropdown-in .28s cubic-bezier(.2, .86, .28, 1) both;
}

.project-phone-country-goo {
    position: absolute;
    z-index: 0;
    inset: -27px 0 0;
    filter: url("#localeShadowedGoo");
    pointer-events: none;
}

.project-phone-country-goo::before,
.project-phone-country-goo::after {
    content: "";
    position: absolute;
    display: block;
    background: var(--project-phone-country-bg, #111);
}

.project-phone-country-goo::before {
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform-origin: 50% 65%;
}

.project-phone-country-goo::after {
    inset: 27px 0 0;
    border-radius: 8px;
}

.project-phone-country-dropdown.is-project-phone-opening .project-phone-country-goo::before {
    animation: project-phone-country-goo-in .32s cubic-bezier(.18, .88, .32, 1.18) both;
}

.project-dialog .iti__search-input {
    height: 46px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: var(--font-weight-text);
}

.project-dialog .iti__country-list {
    width: calc(100% - 6px);
    height: calc(100% - 48px);
    max-height: 240px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: var(--color-accent) rgba(255, 255, 255, .06);
    scrollbar-width: thin;
}

.project-dialog .iti__country-list::-webkit-scrollbar {
    width: 6px;
}

.project-dialog .iti__country-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
}

.project-dialog .iti__country-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--color-accent);
}

.project-dialog .iti__country {
    min-height: 44px;
    margin: 2px 4px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: var(--font-weight-text);
    line-height: 1.2;
}

.project-dialog .iti__country:hover,
.project-dialog .iti__country.iti__highlight {
    background: #fff;
    color: #000;
}

.project-dialog .iti__country:hover .iti__dial-code,
.project-dialog .iti__country.iti__highlight .iti__dial-code {
    color: rgba(0, 0, 0, .62);
}

@keyframes project-phone-country-dropdown-in {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(.92, .72);
    }

    68% {
        opacity: 1;
        transform: translateY(1px) scale(1, 1.025);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes project-phone-country-goo-in {
    0% {
        border-radius: 44% 56% 42% 58%;
        transform: translateY(-10px) scale(.68, 1.24);
    }

    72% {
        border-radius: 54% 46% 58% 42%;
        transform: translateY(1px) scale(1.08, .94);
    }

    100% {
        border-radius: 50%;
        transform: translateY(0) scale(1);
    }
}

.project-field label b {
    font-weight: inherit;
}

.project-tooltip {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 0;
}

.project-tooltip__trigger {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    cursor: pointer;
}

.project-tooltip__content {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(420px, calc(100vw - 40px));
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 4px;
    background: #090909;
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
    font-weight: var(--font-weight-text);
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}

.project-tooltip:hover .project-tooltip__content,
.project-tooltip:focus-within .project-tooltip__content,
.project-tooltip.is-open .project-tooltip__content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.project-file {
    display: flex;
    min-height: 32px;
    align-items: center;
}

.project-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.project-file__input:focus-visible + .project-file__select {
    outline: 1px solid #fff;
    outline-offset: 4px;
}

.project-file__select,
.project-file__selected {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: var(--font-weight-regular);
    cursor: pointer;
}

.project-file__select svg {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.project-file__select small {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    font-weight: var(--font-weight-text);
}

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

.project-file__select[hidden],
.project-file__selected[hidden] {
    display: none;
}

.project-file__selected > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file__selected button {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.project-budget {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.project-budget legend {
    margin: 0 0 18px;
    color: #fff;
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
}

.project-budget__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-budget__option {
    cursor: pointer;
}

.project-budget__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-budget__option span {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius-button);
    color: #fff;
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.project-budget__option:hover span {
    transform: translateY(-2px);
}

.project-budget__option input:checked + span {
    border-color: #fff;
    background: #fff;
    color: #090909;
}

.project-budget__option input:focus-visible + span {
    outline: 1px solid #fff;
    outline-offset: 4px;
}

.project-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 52px;
}

.project-contacts {
    margin-top: 24px;
}

.project-form__footer {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 10px;
}

.project-form__submit {
    display: inline-flex;
    min-width: 260px;
    height: 72px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 42px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-button);
    background: var(--color-accent);
    color: #fff;
    font-size: 28px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    cursor: pointer;
    justify-self: start;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}

.project-form__submit:hover {
    background: #fff;
    color: #090909;
    transform: scale(1.04);
}

.project-form__submit:disabled {
    opacity: .52;
    cursor: wait;
    transform: none;
}

.project-form__submit-arrow {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-self: center;
    background: currentColor;
    -webkit-mask: url("/assets/images/arrow-up-right.svg") center / contain no-repeat;
    mask: url("/assets/images/arrow-up-right.svg") center / contain no-repeat;
    transform: translateY(1px);
}

.project-consent {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 680px;
}

.project-consent input {
    position: absolute;
    opacity: 0;
}

.project-consent__box {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, .8);
    cursor: pointer;
}

.project-consent__box::after {
    position: absolute;
    top: 4px;
    left: 7px;
    width: 6px;
    height: 10px;
    border: solid #090909;
    border-width: 0 2px 2px 0;
    content: "";
    opacity: 0;
    transform: rotate(45deg);
}

.project-consent input:checked + .project-consent__box {
    border-color: #fff;
    background: #fff;
}

.project-consent input:checked + .project-consent__box::after {
    opacity: 1;
}

.project-consent input:focus-visible + .project-consent__box {
    outline: 1px solid #fff;
    outline-offset: 4px;
}

.project-consent p {
    margin: 1px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: var(--font-weight-text);
    line-height: 1.4;
}

.project-consent__ru-only {
    display: none;
}

html[lang="ru"] .project-consent__ru-only {
    display: inline;
}

.project-consent a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .85);
    text-underline-offset: 3px;
}

.project-captcha {
    min-height: 0;
}

.project-form__status {
    min-height: 22px;
    margin: -34px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
}

.project-form__status.is-error {
    color: var(--color-accent);
}

body.has-project-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
}

body.has-custom-cursor.has-project-dialog {
    cursor: auto;
}

body.has-project-dialog .custom-cursor {
    display: none;
}

@media (max-width: 900px) {
    .project-dialog__content {
        padding: 40px 32px 58px;
    }

    .project-dialog__header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
    }

    .project-dialog__header h2 {
        font-size: 42px;
    }

    .project-dialog__close {
        width: 62px;
        height: 62px;
    }

    .project-dialog__close::before,
    .project-dialog__close::after {
        width: 88px;
    }

    .project-request-form {
        gap: 46px;
        margin-top: 68px;
    }

    .project-form__footer {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .project-dialog__content {
        padding: 26px 18px 44px;
    }

    .project-dialog__header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
    }

    .project-dialog__header h2 {
        font-size: 32px;
        line-height: 1.02;
    }

    .project-dialog__close {
        width: 48px;
        height: 48px;
    }

    .project-dialog__close::before,
    .project-dialog__close::after {
        width: 68px;
    }

    .project-request-form {
        gap: 38px;
        margin-top: 54px;
    }

    .project-field input,
    .project-field textarea,
    .project-field > label {
        font-size: 22px;
    }

    .project-field > label {
        top: calc(50% + 8px);
    }

    .project-field input {
        height: 68px;
        padding-top: 26px;
    }

    .project-field textarea {
        height: 166px;
        min-height: 166px;
        max-height: 166px;
        padding-top: 44px;
    }

    .project-field--textarea > label {
        top: 44px;
    }

    .project-field input:focus + label,
    .project-field input:not(:placeholder-shown) + label,
    .project-field textarea:focus + label,
    .project-field textarea:not(:placeholder-shown) + label {
        font-size: 12px;
    }

    .project-field--phone:focus-within > label,
    .project-field--phone.is-country-open > label,
    .project-field--phone.has-value > label {
        font-size: 12px;
    }

    .project-field--phone.is-ready > label {
        left: var(--project-phone-label-offset, 112px);
        max-width: calc(100% - var(--project-phone-label-offset, 112px) - 12px);
    }

    .project-field--phone .iti__selected-country-primary {
        top: 8px;
        width: 44px;
        height: 44px;
    }

    .project-field--phone .iti__selected-dial-code {
        top: 8px;
        font-size: 22px;
    }

    .project-phone-country-goo::before {
        width: 44px;
        height: 44px;
    }

    .project-telegram-prefix {
        top: 42px;
        font-size: 22px;
    }

    .project-field--telegram input:focus,
    .project-field--telegram input:not(:placeholder-shown) {
        padding-left: 72px;
    }

    .project-tooltip__content {
        position: fixed;
        top: auto;
        right: 18px;
        bottom: 18px;
        left: 18px;
        width: auto;
    }

    .project-file__select {
        flex-wrap: wrap;
        font-size: 15px;
    }

    .project-budget__options {
        gap: 8px;
    }

    .project-budget__option span {
        min-height: 40px;
        padding: 0 14px;
        font-size: 14px;
    }

    .project-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-form__submit {
        width: 100%;
        min-width: 0;
        height: 66px;
        font-size: 22px;
    }

    .project-form__submit-arrow {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-dialog::backdrop,
    .project-dialog.is-open .project-dialog__surface {
        animation-delay: 0s;
        animation-duration: .01ms;
    }

    .project-dialog__surface,
    .project-dialog__content,
    .project-dialog__close,
    .project-field--phone .iti__selected-country-primary,
    .project-form__submit,
    .project-budget__option span,
    .project-tooltip__content {
        transition-duration: .01ms;
    }

    .project-phone-country-dropdown.is-project-phone-opening .iti__country-selector,
    .project-phone-country-dropdown.is-project-phone-opening .project-phone-country-goo::before {
        animation-duration: .01ms;
    }

    .project-dialog.is-open .project-dialog__content {
        transition-delay: 0s;
    }
}
