/* =========================================================
   SOEL CONTACT PAGE
   /assets/css/contact-v2.css
   ========================================================= */

body.soel-contact-page {
    background: #fbf9fe;
}

.contact-v2-kicker,
.contact-v2-card-label {
    display: block;
    margin-bottom: 13px;
    color: #633184;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.contact-v2-hero {
    position: relative;
    overflow: hidden;
    padding: 94px 0 82px;

    background:
        radial-gradient(circle at 85% 16%, rgba(171,128,222,.22), transparent 34%),
        linear-gradient(112deg, #fbf8ff 0%, #efe8fa 52%, #e9e0f7 100%);
}

.contact-v2-hero .container {
    position: relative;
    z-index: 2;
}

.contact-v2-orbit {
    position: absolute;
    border: 1px solid rgba(214,166,66,.28);
    border-radius: 50%;
    pointer-events: none;
}

.contact-v2-orbit-one {
    width: 620px;
    height: 180px;
    right: -190px;
    top: 10px;
    transform: rotate(-15deg);
}

.contact-v2-orbit-two {
    width: 480px;
    height: 140px;
    left: -210px;
    bottom: -74px;
    transform: rotate(10deg);
}

.contact-v2-hero-grid {
    display: grid;
    grid-template-columns: 1fr .76fr;
    gap: 62px;
    align-items: center;
}

.contact-v2-hero-copy h1 {
    max-width: 760px;
    margin: 0 0 22px;
    font-size: clamp(3.6rem, 6.5vw, 6.2rem);
    line-height: .94;
    letter-spacing: -.06em;
}

.contact-v2-hero-copy p {
    max-width: 700px;
    margin: 0;
    color: #675b70;
    font-size: clamp(1.06rem, 1.5vw, 1.24rem);
    line-height: 1.72;
}

.contact-v2-decision-card {
    padding: 30px;
    border: 1px solid rgba(70,32,109,.1);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 24px 55px rgba(42,20,72,.1);
    backdrop-filter: blur(8px);
}

.contact-v2-decision-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    align-items: start;
}

.contact-v2-decision-step > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2f1448;
    color: #efcb78;
    font-size: .65rem;
    font-weight: 800;
}

.contact-v2-decision-step strong {
    display: block;
    margin-bottom: 4px;
    color: #30203a;
    font-size: .98rem;
}

.contact-v2-decision-step p {
    margin: 0;
    color: #766a7d;
    font-size: .86rem;
    line-height: 1.5;
}

.contact-v2-decision-line {
    width: 1px;
    height: 22px;
    margin: 7px 0 7px 17px;
    background: rgba(214,166,66,.55);
}


/* MAIN */
.contact-v2-section {
    padding: 88px 0;
    background: #fff;
}

.contact-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 34px;
    align-items: start;
}

.contact-v2-form-card,
.contact-v2-side-card,
.contact-v2-side-note {
    border: 1px solid rgba(70,32,109,.1);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(42,20,72,.065);
}

.contact-v2-form-card {
    padding: 44px;
}

.contact-v2-form-head {
    max-width: 690px;
    margin-bottom: 32px;
}

.contact-v2-form-head h2 {
    margin: 0 0 13px;
    font-size: clamp(2.45rem, 4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.contact-v2-form-head p {
    margin: 0;
    color: #746a7b;
    line-height: 1.65;
}

.contact-v2-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.contact-v2-field-full {
    grid-column: 1 / -1;
}

.contact-v2-field label {
    display: block;
    margin-bottom: 7px;
    color: #3e2d48;
    font-size: .8rem;
    font-weight: 700;
}

.contact-v2-field input,
.contact-v2-field select,
.contact-v2-field textarea {
    width: 100%;
    border: 1px solid rgba(70,32,109,.16);
    border-radius: 11px;
    background: #fbf9fd;
    color: #2d2036;
    font-family: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-v2-field input,
.contact-v2-field select {
    min-height: 52px;
    padding: 0 14px;
}

.contact-v2-field textarea {
    min-height: 160px;
    padding: 14px;
    resize: vertical;
}

.contact-v2-field input:focus,
.contact-v2-field select:focus,
.contact-v2-field textarea:focus {
    border-color: rgba(94,45,126,.7);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(94,45,126,.08);
}

.contact-v2-submit-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 2px;
}

.contact-v2-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #d6a642;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.contact-v2-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(214,166,66,.26);
}

.contact-v2-submit-row > p {
    max-width: 480px;
    margin: 0;
    color: #8a7f90;
    font-size: .74rem;
    line-height: 1.55;
}

.contact-v2-submit-row a {
    color: #5d2b7c !important;
    text-decoration: underline !important;
}


/* SIDE */
.contact-v2-side {
    display: grid;
    gap: 18px;
}

.contact-v2-side-card {
    overflow: hidden;
    padding: 28px;
}

.contact-v2-side-card > a:not(.contact-v2-inline-link) {
    position: relative;
    display: block;
    padding: 18px 42px 18px 0;
    border-top: 1px solid rgba(70,32,109,.09);
    color: inherit !important;
    text-decoration: none !important;
}

.contact-v2-side-card > a:not(.contact-v2-inline-link):first-of-type {
    border-top: 0;
    padding-top: 3px;
}

.contact-v2-side-card > a strong {
    display: block;
    margin-bottom: 4px;
    color: #34203f;
    font-size: .97rem;
}

.contact-v2-side-card > a p {
    margin: 0;
    color: #7a6f81;
    font-size: .82rem;
    line-height: 1.55;
}

.contact-v2-side-card > a > span {
    position: absolute;
    top: 50%;
    right: 2px;
    color: #d6a642;
    transform: translateY(-50%);
    transition: transform .2s ease;
}

.contact-v2-side-card > a:hover > span {
    transform: translate(4px, -50%);
}

.contact-v2-side-card-dark {
    background:
        radial-gradient(circle at 90% 10%, rgba(214,166,66,.14), transparent 30%),
        linear-gradient(135deg, #2d1149, #512371 75%, #3a1857);
}

.contact-v2-side-card-dark .contact-v2-card-label {
    color: #efcb78;
}

.contact-v2-side-card-dark h3 {
    margin: 0 0 11px;
    color: #fff;
    font-size: 1.65rem;
    line-height: 1.1;
}

.contact-v2-side-card-dark > p {
    margin: 0 0 18px;
    color: rgba(255,255,255,.68);
    font-size: .9rem;
    line-height: 1.6;
}

.contact-v2-inline-link {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 0 !important;
    border: 0 !important;
    color: #efcb78 !important;
    font-weight: 750;
}

.contact-v2-inline-link span {
    position: static !important;
    transform: none !important;
    transition: transform .2s ease;
}

.contact-v2-inline-link:hover span {
    transform: translateX(4px) !important;
}

.contact-v2-side-note {
    padding: 24px 26px;
    background: #f7f2fb;
}

.contact-v2-side-note strong {
    display: block;
    margin-bottom: 5px;
    color: #3b2548;
    font-size: .95rem;
}

.contact-v2-side-note p {
    margin: 0;
    color: #786d7e;
    font-size: .84rem;
    line-height: 1.6;
}


/* GUIDE */
.contact-v2-guide {
    padding: 0 0 88px;
    background: #fff;
}

.contact-v2-guide-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 35px;
    align-items: center;
    padding: 44px 48px;
    border: 1px solid rgba(70,32,109,.1);
    border-radius: 23px;
    background: #f3eef8;
}

.contact-v2-guide-box h2 {
    margin: 0 0 10px;
    font-size: clamp(2.25rem, 3.5vw, 3.3rem);
    line-height: 1.04;
}

.contact-v2-guide-box p {
    max-width: 700px;
    margin: 0;
    color: #74697b;
    line-height: 1.65;
}

.contact-v2-guide-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #2f1448;
    color: #fff;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}


/* GUIDE MODAL */
.contact-v2-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(20,10,29,.74);
    backdrop-filter: blur(5px);
}

.contact-v2-modal-overlay.is-visible {
    display: grid;
}

.contact-v2-modal {
    position: relative;
    width: min(100%, 520px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 36px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.contact-v2-modal-close {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f3eef8;
    color: #3d224b;
    font-size: 1.35rem;
    cursor: pointer;
}

.contact-v2-modal h2 {
    max-width: 390px;
    margin: 0 0 12px;
    font-size: 2.35rem;
    line-height: 1.03;
}

.contact-v2-modal-intro {
    margin: 0 0 24px;
    color: #74697b;
    line-height: 1.65;
}

.contact-v2-modal-field {
    margin-bottom: 14px;
}

.contact-v2-modal-field label {
    display: block;
    margin-bottom: 6px;
    color: #402c4b;
    font-size: .78rem;
    font-weight: 700;
}

.contact-v2-modal-field label small {
    color: #918594;
    font-weight: 500;
}

.contact-v2-modal-field input {
    width: 100%;
    min-height: 49px;
    padding: 0 13px;
    border: 1px solid rgba(70,32,109,.16);
    border-radius: 10px;
    background: #fbf9fd;
    outline: 0;
}

.contact-v2-guide-submit {
    width: 100%;
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding: 0 17px;
    border: 0;
    border-radius: 11px;
    background: #d6a642;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.contact-v2-guide-submit:disabled {
    opacity: .62;
    cursor: wait;
}

.contact-v2-guide-status {
    min-height: 20px;
    margin: 12px 0 0;
    font-size: .8rem;
    line-height: 1.5;
}

.contact-v2-guide-status.is-success {
    color: #337a57;
}

.contact-v2-guide-status.is-error {
    color: #b24e57;
}

.contact-v2-modal-privacy {
    margin: 9px 0 0;
    color: #8c8191;
    font-size: .7rem;
    line-height: 1.5;
}

.contact-v2-modal-privacy a {
    color: #5d2b7c !important;
    text-decoration: underline !important;
}

.contact-v2-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* RESPONSIVE */
@media (max-width: 991px) {

    .contact-v2-hero {
        padding: 74px 0 66px;
    }

    .contact-v2-hero-grid,
    .contact-v2-grid {
        grid-template-columns: 1fr;
    }

    .contact-v2-hero-grid {
        gap: 35px;
    }

    .contact-v2-section {
        padding: 70px 0;
    }

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

    .contact-v2-side-note {
        grid-column: 1 / -1;
    }

    .contact-v2-guide-box {
        grid-template-columns: 1fr;
    }

    .contact-v2-guide-button {
        justify-self: start;
    }
}

@media (max-width: 767px) {

    .contact-v2-hero {
        padding: 58px 0 54px;
    }

    .contact-v2-hero-copy h1 {
        font-size: clamp(3.05rem, 14vw, 4.5rem);
    }

    .contact-v2-section {
        padding: 54px 0;
    }

    .contact-v2-form-card {
        padding: 29px 22px;
    }

    .contact-v2-form-grid,
    .contact-v2-side {
        grid-template-columns: 1fr;
    }

    .contact-v2-field-full,
    .contact-v2-side-note {
        grid-column: auto;
    }

    .contact-v2-submit-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-v2-guide {
        padding-bottom: 58px;
    }

    .contact-v2-guide-box {
        padding: 32px 24px;
    }

    .contact-v2-modal {
        padding: 31px 23px 25px;
    }
}