@font-face {
    font-family: "Inter Variable";
    src: url("/assets/framerusercontent.com/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.b517f9feb3.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

.nc-client-modal,
.nc-client-modal * {
    box-sizing: border-box;
}

.nc-client-modal {
    --nc-client-font: "Inter Variable", Inter, sans-serif;
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    padding: 24px;
    opacity: 0;
    place-items: center;
    font-family: var(--nc-client-font);
    font-synthesis: none;
    font-variation-settings: "wght" 300;
    font-weight: 300;
    transition: opacity 260ms cubic-bezier(.22, 1, .36, 1);
}

.nc-client-modal :where(h2, p, label, span, small, em, a, button, input, select, textarea) {
    font-family: var(--nc-client-font) !important;
}

.nc-client-modal[hidden] {
    display: none !important;
}

.nc-client-modal.is-open {
    opacity: 1;
}

.nc-client-modal:focus {
    outline: 0;
}

.nc-client-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: rgba(220, 220, 217, .5);
    cursor: default;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nc-client-modal__panel {
    position: relative;
    z-index: 1;
    width: min(1722px, calc(100vw - 48px), calc((100dvh - 48px) * 1.7033));
    aspect-ratio: 1722 / 1011;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    padding: 0;
    background: rgba(252, 252, 250, .86);
    color: #303030;
    box-shadow: 0 22px 70px rgba(48, 48, 48, .1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translate3d(0, 8px, 0);
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.nc-client-modal.is-open .nc-client-modal__panel {
    transform: translate3d(0, 0, 0);
}

.nc-client-modal__visual {
    position: absolute;
    left: -7.2%;
    top: -6.5%;
    width: 45%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 34% 60% at 58% 38%, #000 0 52%, rgba(0, 0, 0, .9) 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 34% 60% at 58% 38%, #000 0 52%, rgba(0, 0, 0, .9) 70%, transparent 100%);
    pointer-events: none;
}

.nc-client-modal__visual video {
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: darken;
    object-fit: cover;
}

.nc-client-modal__content {
    position: absolute;
    left: 33.1%;
    top: 24.7%;
    width: 37.2%;
    min-width: 0;
}

.nc-client-modal__header,
.nc-client-modal__header h2,
.nc-client-modal__success p,
.nc-client-modal__status {
    margin: 0;
}

.nc-client-modal__header h2 {
    color: #303030;
    font-size: clamp(16px, 1.05vw, 18px);
    font-variation-settings: "wght" 300;
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.35;
}

.nc-client-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: #6f6f6f;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease;
}

.nc-client-modal__close:hover {
    background: rgba(48, 48, 48, .06);
    color: #303030;
}

.nc-client-modal__form {
    margin-top: 36px;
}

.nc-client-modal__form[hidden],
.nc-client-modal__success[hidden] {
    display: none !important;
}

.nc-client-modal__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.nc-client-modal__field {
    position: relative;
    display: block;
    min-width: 0;
}

.nc-client-modal__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.nc-client-modal__field input,
.nc-client-modal__field select {
    width: 100%;
    min-width: 0;
    min-height: 69px;
    border: 1px solid rgba(136, 136, 136, .13);
    border-radius: 13px;
    padding: 0 26px;
    outline: 0;
    background: rgba(247, 247, 247, .9);
    color: #303030;
    font-size: clamp(16px, 1.05vw, 18px);
    font-variation-settings: "wght" 300;
    font-weight: 300;
    line-height: 1.35;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.nc-client-modal__field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 56px;
}

.nc-client-modal__select-field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 26px;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}

.nc-client-modal__field input::placeholder {
    color: #303030;
    opacity: .6;
}

.nc-client-modal__field select:required:invalid {
    color: rgba(48, 48, 48, .6);
}

.nc-client-modal__field input:hover,
.nc-client-modal__field select:hover {
    border-color: rgba(48, 48, 48, .22);
}

.nc-client-modal__field input:focus,
.nc-client-modal__field select:focus {
    border-color: rgba(48, 48, 48, .44);
    background: rgba(252, 252, 250, .96);
    box-shadow: 0 0 0 3px rgba(48, 48, 48, .045);
}

.nc-client-modal__field input[aria-invalid="true"],
.nc-client-modal__field select[aria-invalid="true"] {
    border-color: rgba(140, 47, 36, .55);
}

.nc-client-modal__field small {
    position: absolute;
    left: 14px;
    bottom: -9px;
    z-index: 2;
    color: #8c2f24;
    font-size: 9px;
    line-height: 1;
}

.nc-client-modal__field small:empty {
    display: none;
}

.nc-client-modal__upload {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 76px;
    overflow: hidden;
    border: 1px solid rgba(136, 136, 136, .14);
    border-radius: 13px;
    background: rgba(247, 247, 245, .88);
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.nc-client-modal__upload:hover,
.nc-client-modal__upload:focus-within {
    border-color: rgba(48, 48, 48, .34);
    background: rgba(252, 252, 250, .96);
}

.nc-client-modal__upload:focus-within {
    box-shadow: 0 0 0 3px rgba(48, 48, 48, .045);
}

.nc-client-modal__upload input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.nc-client-modal__filename {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    padding: 0 0 0 26px;
    color: #303030;
    font-size: clamp(16px, 1.05vw, 18px);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nc-client-modal__upload .nc-client-modal__file-note {
    grid-column: 2;
    justify-self: end;
    position: static;
    padding: 0 26px 0 18px;
    color: #ababab;
    font-size: clamp(12px, .82vw, 14px);
    line-height: 1.3;
    white-space: nowrap;
}

.nc-client-modal__footer {
    display: grid;
    justify-items: end;
    gap: 10px;
    margin-top: 48px;
}

.nc-client-modal__status {
    max-width: 100%;
    color: #8c2f24;
    font-size: 10px;
    line-height: 1.45;
    text-align: right;
}

.nc-client-modal__status:empty {
    display: none;
}

.nc-client-modal__send,
.nc-client-modal__done {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 187px;
    min-height: 47px;
    border: 1px solid #000;
    border-radius: 24px;
    padding: 10px 18px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-variation-settings: "wght" 300;
    font-weight: 300;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 160ms ease;
}

.nc-client-modal__send {
    width: max-content;
    min-width: 0;
    gap: 11px;
    border-radius: 5px;
    padding: 10px 22px 10px 18px;
}

.nc-client-modal__send-pulse {
    position: relative;
    display: block;
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .86;
    animation: nc-client-send-pulse 2.8s ease-in-out infinite;
}

.nc-client-modal__send:hover,
.nc-client-modal__done:hover {
    background: rgba(0, 0, 0, .82);
}

.nc-client-modal__send:active,
.nc-client-modal__done:active {
    transform: scale(.98);
}

.nc-client-modal__send:disabled {
    opacity: .48;
    cursor: wait;
}

.nc-client-modal__success {
    display: grid;
    min-height: 500px;
    place-items: center;
    align-content: center;
    gap: 7px;
    text-align: center;
}

.nc-client-modal__success p {
    color: #6f6f6f;
    font-size: 14px;
    line-height: 1.5;
}

.nc-client-modal__success .nc-client-modal__thanks {
    color: #303030;
    font-size: 24px;
    letter-spacing: -.02em;
}

.nc-client-modal__done {
    margin-top: 24px;
}

.nc-client-modal :where(a, button, input, select, textarea):focus-visible {
    outline: 1px solid #303030;
    outline-offset: 4px;
}

body.nc-client-modal-open {
    overflow: hidden;
}

.nc-client-modal-text-trigger {
    cursor: pointer;
}

.nc-client-modal-text-trigger:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

.nc-client-modal.is-instant,
.nc-client-modal.is-instant .nc-client-modal__panel {
    transition: none;
}

@media (min-width: 721px) and (max-width: 1199px) {
    .nc-client-modal__panel {
        width: calc(100vw - 48px);
        height: calc(100dvh - 48px);
        aspect-ratio: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nc-client-modal__visual {
        left: -10%;
        top: -5%;
        width: 54%;
    }

    .nc-client-modal__content {
        left: 40%;
        top: 11%;
        width: 52%;
    }

    .nc-client-modal__field input,
    .nc-client-modal__field select {
        min-height: 62px;
    }

    .nc-client-modal__upload {
        min-height: 68px;
    }

    .nc-client-modal__form {
        margin-top: 26px;
    }

    .nc-client-modal__footer {
        margin-top: 30px;
    }
}

@media (max-width: 720px) {
    .nc-client-modal {
        padding: 14px;
    }

    .nc-client-modal__panel {
        width: calc(100vw - 28px);
        height: calc(100dvh - 28px);
        aspect-ratio: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 18px;
    }

    .nc-client-modal__visual {
        left: 50%;
        top: -34px;
        width: 330px;
        transform: translateX(-50%);
    }

    .nc-client-modal__content {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        padding: 142px 18px 28px;
    }

    .nc-client-modal__close {
        position: fixed;
        top: 24px;
        right: 24px;
    }

    .nc-client-modal__header h2 {
        font-size: 17px;
    }

    .nc-client-modal__form {
        margin-top: 25px;
    }

    .nc-client-modal__fields {
        gap: 11px;
    }

    .nc-client-modal__field input,
    .nc-client-modal__field select {
        min-height: 58px;
        padding: 0 18px;
        font-size: 15px;
    }

    .nc-client-modal__field select {
        padding-right: 50px;
    }

    .nc-client-modal__select-field::after {
        right: 18px;
    }

    .nc-client-modal__upload {
        min-height: 64px;
    }

    .nc-client-modal__filename {
        padding: 0 0 0 18px;
        font-size: 14px;
    }

    .nc-client-modal__upload .nc-client-modal__file-note {
        max-width: 130px;
        padding: 0 18px 0 10px;
        font-size: 11px;
        text-align: right;
        white-space: normal;
    }

    .nc-client-modal__footer {
        margin-top: 28px;
    }

    .nc-client-modal__send,
    .nc-client-modal__done {
        min-height: 48px;
        font-size: 15px;
    }

    .nc-client-modal__send {
        width: max-content;
    }

    .nc-client-modal__done {
        width: 100%;
    }

    .nc-client-modal__success {
        min-height: 440px;
    }
}

@keyframes nc-client-send-pulse {
    0%,
    100% {
        opacity: .74;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .28);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    }
}



@media (prefers-reduced-motion: reduce) {
    .nc-client-modal,
    .nc-client-modal__panel,
    .nc-client-modal__close,
    .nc-client-modal__field input,
    .nc-client-modal__field select,
    .nc-client-modal__upload,
    .nc-client-modal__send,
    .nc-client-modal__done {
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .nc-client-modal__send-pulse {
        animation: none !important;
    }
}
