/* ==========================================================================
   BRIEF — Desktop (1280px – 1920px)
   Reusable multi-step questionnaire widget, ported from the old
   site's bf-dsk-* styles — same positions, converted from px to rem
   (÷10), !important dropped (no conflicting overrides to fight in
   the new system). Everything here is positioned relative to
   .brief-wrapper, which itself sits inside .ct-interactive-plate
   (see css/contact.desktop.css).
   ========================================================================== */

.brief-wrapper {
    position: absolute;
    top: 5rem;
    left: 83rem;
    width: 79rem;
    height: 70.4rem;
    z-index: 1;
}

.brief-static-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brief-lang-selector {
    position: absolute;
    top: 4.7rem;
    right: 6.5rem;
    background-color: #000000;
    border-radius: 1rem;
    z-index: 5;
    overflow: hidden;
    transition: width 0.3s ease, height 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.brief-lang-selector.lang-en { width: 18.5rem; height: 5.2rem; }
.brief-lang-selector.lang-ua { width: 24rem; height: 5.2rem; }
.brief-lang-selector.lang-jp { width: 24rem; height: 5.2rem; }

.brief-lang-selector.is-open {
    height: 15rem;
}

.brief-lang-current {
    position: relative;
    width: 100%;
    height: 5.2rem;
}

.brief-lang-selector .brief-lang-text-main {
    position: absolute;
    left: 1.5rem;
    top: 1rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.5;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.brief-lang-selector:hover .brief-lang-text-main {
    opacity: 1;
}

.brief-lang-arrow {
    position: absolute;
    top: 2.1rem;
    right: 2.2rem;
    width: 1.1rem;
    height: 1.4rem;
    transition: transform 0.3s ease;
}

.brief-lang-selector.is-open .brief-lang-arrow {
    transform: scaleY(-1);
}

.brief-lang-option {
    position: absolute;
    left: 1.5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.brief-lang-option:hover {
    opacity: 0.7;
}

.brief-opt-1 { top: 7.2rem; }
.brief-opt-2 { top: 10.7rem; }

.brief-step-num {
    position: absolute;
    left: 6.8rem;
    top: 5.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.08em;
    z-index: 2;
}

.brief-protocol-text {
    position: absolute;
    left: 12.2rem;
    top: 6.7rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    color: #828282;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    z-index: 2;
}

.brief-main-question {
    position: absolute;
    left: 9rem;
    top: 15.7rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 4rem;
    line-height: 3.5rem;
    letter-spacing: -0.08em;
    z-index: 2;
}

.brief-description-text {
    position: absolute;
    left: 9rem;
    top: 24.8rem;
    margin: 0;
    width: 61rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    color: #000000;
    opacity: 0.4;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
    white-space: pre-line;
    z-index: 2;
}

.brief-desc-strong {
    font-weight: 600;
}

.brief-input-zone {
    position: absolute;
    left: 9rem;
    top: 32.4rem;
    width: 61rem;
    height: 16.8rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem 1.5rem 1.5rem 1.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    z-index: 2;
}

.brief-project-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    resize: none;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
    color: #000000;
}

.brief-project-input::placeholder {
    color: #000000;
    opacity: 0.2;
}

.brief-continue-btn {
    position: absolute;
    left: 47.4rem;
    top: 51.6rem;
    width: 22.6rem;
    height: 6rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    opacity: 0.2;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.brief-continue-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

.brief-continue-btn.is-active {
    opacity: 1;
}

.brief-continue-btn.is-active:hover {
    transform: translateY(-0.2rem);
}

.brief-optional-badge {
    position: absolute;
    left: 9rem;
    top: 50.9rem;
    width: 12.8rem;
    height: 3rem;
    object-fit: contain;
    z-index: 2;
    display: none;
}

.brief-selection-grid {
    display: none;
}

.brief-selection-btn {
    position: absolute;
    width: 28.5rem;
    height: 7.3rem;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.brief-selection-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

.brief-selection-btn:hover {
    opacity: 0.8;
}

.brief-selection-btn.is-selected {
    opacity: 0.3;
}

.brief-btn-sel-1 { left: 9rem; top: 26.7rem; }
.brief-btn-sel-2 { left: 40.5rem; top: 26.7rem; }
.brief-btn-sel-3 { left: 9rem; top: 35.5rem; }
.brief-btn-sel-4 { left: 40.5rem; top: 35.5rem; }
.brief-btn-sel-5 { left: 9rem; top: 44.3rem; }

.brief-sel-btn-text {
    position: absolute;
    left: 6.3rem;
    width: 25rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.08em;
    color: #ffffff;
}

.brief-text-pos-2line { top: 0.8rem; }
.brief-text-pos-1line { top: 2.1rem; }

.brief-selection-grid-long {
    display: none;
}

.brief-selection-btn-long {
    position: absolute;
    width: 34.7rem;
    height: 7.3rem;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.2s ease;
}

.brief-selection-btn-long img {
    width: 100%;
    height: 100%;
    display: block;
}

.brief-selection-btn-long:hover {
    opacity: 0.8;
}

.brief-selection-btn-long.is-selected {
    opacity: 0.3;
}

.brief-btn-long-1 { left: 9rem; top: 26.7rem; }
.brief-btn-long-2 { left: 9rem; top: 35.5rem; }
.brief-btn-long-3 { left: 9rem; top: 44.3rem; }

.brief-final-form {
    display: none;
}

.brief-form-label {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: #828282;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
    z-index: 3;
}

.brief-lbl-firstname { left: 9rem; top: 27.4rem; }
.brief-lbl-lastname  { left: 44rem; top: 27.4rem; }
.brief-lbl-email     { left: 9rem; top: 38.3rem; }

.brief-form-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
    color: #000000;
    z-index: 3;
    width: 26rem;
}

.brief-inp-firstname { left: 9rem; top: 30.3rem; }
.brief-inp-lastname  { left: 44rem; top: 30.3rem; width: 26rem; }
.brief-inp-email     { left: 9rem; top: 41.2rem; width: 61rem; }

.brief-form-input::placeholder {
    color: #000000;
    opacity: 0.2;
}

.brief-form-line {
    position: absolute;
    height: 1px;
    background-color: #000000;
    opacity: 0.5;
    z-index: 3;
}

.brief-line-1 { left: 9rem; top: 32.8rem; width: 26rem; }
.brief-line-2 { left: auto; right: 9rem; top: 32.8rem; width: 26rem; }
.brief-line-3 { left: 50%; top: 43.7rem; width: 61rem; transform: translateX(-50%); }

.brief-send-btn-wrapper {
    position: absolute;
    width: 22.6rem;
    height: 6rem;
    left: 47.4rem;
    top: 51.6rem;
    z-index: 3;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity 0.2s ease;
}

.brief-send-btn-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
}