/* ==========================================================
   REVISI DESIGN SYSTEM
   CONTACT PAGE
========================================================== */


/* ==========================================================
   ACTIVE NAVIGATION
========================================================== */

.rv-menu a[aria-current="page"],
.rv-mobile-menu a[aria-current="page"] {

    color:
        var(--color-primary);

}


.rv-menu a[aria-current="page"]::after,
.rv-mobile-menu a[aria-current="page"]::after {

    opacity:
        1;

    transform:
        scaleX(1);

}


/* ==========================================================
   ORGANIC WAVES
========================================================== */

.rv-contact-organic-wave {

    position:
        absolute;

    left:
        0;

    bottom:
        -1px;

    width:
        100%;

    height:
        clamp(
            150px,
            18vw,
            260px
        );

    display:
        block;

    pointer-events:
        none;

    z-index:
        0;

}


.rv-contact-hero-wave path {

    fill:
        var(--color-dark);

}


.rv-contact-form-wave path {

    fill:
        var(--color-accent);

}


/* ==========================================================
   HERO
========================================================== */

.rv-contact-hero {

    position:
        relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    padding-top:
        clamp(
            9rem,
            15vh,
            12rem
        );

    padding-bottom:
        clamp(
            10rem,
            18vw,
            15rem
        );

    background:
        var(--color-light);

    overflow:
        hidden;

    isolation:
        isolate;

}


.rv-contact-hero::after {

    content:
        "";

    position:
        absolute;

    top:
        -15%;

    right:
        -32%;

    width:
        78vw;

    height:
        130%;

    max-width:
        1150px;

    background:
        var(--color-accent);

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        -1;

}


.rv-contact-hero-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(10, 12, 12, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(10, 12, 12, .045) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events:
        none;

    z-index:
        1;

}


.rv-contact-hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(390px, .85fr);

    align-items:
        center;

    gap:
        clamp(
            4rem,
            8vw,
            9rem
        );

}


.rv-contact-hero-copy {

    max-width:
        900px;

}


.rv-contact-hero-title {

    max-width:
        16ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    line-height:
        var(--lh-tight);

    color:
        var(--color-dark);

}


.rv-contact-hero-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-contact-hero-description {

    max-width:
        var(--text-width-md);

    margin-top:
        var(--space-6);

    font-size:
        var(--fs-lg);

    font-weight:
        var(--font-medium);

    color:
        var(--color-dark);

}


.rv-contact-hero-cta {

    margin-top:
        var(--space-6);

}


.rv-contact-hero-cta .rv-btn-icon svg {

    transform:
        rotate(-135deg);

}


.rv-contact-hero-cta:hover .rv-btn-icon svg {

    transform:
        rotate(-90deg);

}


/* ==========================================================
   RESPONSE CARD
========================================================== */

.rv-contact-response-card {

    position:
        relative;

    padding:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    background:
        var(--color-dark);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-lg);

    color:
        var(--color-light);

    overflow:
        hidden;

}


.rv-contact-response-art {

    width:
        min(
            54%,
            220px
        );

    margin-left:
        auto;

    margin-bottom:
        var(--space-6);

}


.rv-contact-response-art svg {

    width:
        100%;

    height:
        auto;

    overflow:
        visible;

}


.rv-contact-art-back {

    fill:
        var(--color-accent);

}


.rv-contact-art-front {

    fill:
        var(--color-light);

}


.rv-contact-art-dot-one,
.rv-contact-art-dot-three {

    fill:
        var(--color-dark);

}


.rv-contact-art-dot-two {

    fill:
        var(--color-accent);

}


.rv-contact-response-title {

    max-width:
        11ch;

    margin:
        0;

    font-size:
        var(--fs-h3);

    color:
        var(--color-light);

}


.rv-contact-response-description {

    max-width:
        var(--text-width-sm);

    margin-top:
        var(--space-5);

    font-size:
        var(--fs-sm);

    color:
        var(--color-muted);

}


.rv-contact-response-time {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-2);

    margin-top:
        var(--space-8);

    padding-top:
        var(--space-6);

    border-top:
        1px solid
        rgba(248, 248, 248, .16);

}


.rv-contact-response-time span {

    margin-bottom:
        var(--space-2);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    text-transform:
        uppercase;

    color:
        var(--color-accent);

}


.rv-contact-response-time strong {

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-medium);

    color:
        var(--color-light);

}


.rv-contact-direct {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-6);

    margin-top:
        var(--space-8);

    padding-top:
        var(--space-6);

    border-top:
        1px solid
        rgba(248, 248, 248, .16);

}


.rv-contact-direct-row {

    min-width:
        0;

}


.rv-contact-direct-label,
.rv-contact-direct-value {

    display:
        block;

}


.rv-contact-direct-label {

    margin-bottom:
        var(--space-2);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted);

}


.rv-contact-direct-value {

    overflow-wrap:
        anywhere;

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-semibold);

    color:
        var(--color-light);

    cursor:
        text;

    user-select:
        text;

}


/* ==========================================================
   FORM SECTION
========================================================== */

.rv-contact-form-section {

    position:
        relative;

    padding-top:
        var(--space-32);

    padding-bottom:
        clamp(
            13rem,
            23vw,
            21rem
        );

    background:
        var(--color-dark);

    color:
        var(--color-light);

    overflow:
        hidden;

    scroll-margin-top:
        clamp(
            7rem,
            10vw,
            9rem
        );

}


.rv-contact-form-layout {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(300px, .65fr)
        minmax(0, 1.35fr);

    align-items:
        start;

    gap:
        clamp(
            4rem,
            9vw,
            10rem
        );

}


.rv-contact-form-intro {

    position:
        sticky;

    top:
        clamp(
            7rem,
            10vw,
            9rem
        );

}


.rv-contact-form-title {

    max-width:
        12ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-light);

}


.rv-contact-form-title span {

    display:
        block;

    color:
        var(--color-accent);

}


.rv-contact-form-description {

    max-width:
        var(--text-width-sm);

    margin-top:
        var(--space-6);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted);

}


.rv-contact-brief-help {

    margin-top:
        var(--space-10);

    padding-top:
        var(--space-8);

    border-top:
        1px solid
        rgba(248, 248, 248, .16);

}


.rv-contact-brief-label {

    display:
        block;

    margin-bottom:
        var(--space-5);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    text-transform:
        uppercase;

    color:
        var(--color-accent);

}


.rv-contact-brief-help ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.rv-contact-brief-help li {

    display:
        grid;

    grid-template-columns:
        var(--space-8)
        minmax(0, 1fr);

    gap:
        var(--space-3);

    padding-block:
        var(--space-3);

    font-size:
        var(--fs-sm);

    color:
        var(--color-light);

}


.rv-contact-brief-help li span {

    font-size:
        var(--fs-xs);

    color:
        var(--color-muted);

}


.rv-contact-privacy-note {

    max-width:
        var(--text-width-sm);

    margin-top:
        var(--space-8);

    padding-top:
        var(--space-6);

    border-top:
        1px solid
        rgba(248, 248, 248, .16);

    font-size:
        var(--fs-xs);

    color:
        var(--color-muted);

}


/* ==========================================================
   FORM CARD
========================================================== */

.rv-contact-form {

    min-width:
        0;

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    background:
        var(--color-light);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-lg);

    color:
        var(--color-dark);

}


.rv-contact-form-row {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-5);

}


.rv-contact-field,
.rv-contact-choice-group {

    min-width:
        0;

    margin:
        0
        0
        var(--space-8);

}


.rv-contact-field > label,
.rv-contact-choice-group > legend {

    display:
        block;

    width:
        100%;

    margin-bottom:
        var(--space-3);

    padding:
        0;

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-semibold);

    line-height:
        1.4;

    color:
        var(--color-dark);

}


.rv-contact-field > label > span:not([aria-hidden]),
.rv-contact-choice-group > legend > span:not([aria-hidden]) {

    margin-left:
        var(--space-2);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-regular);

    color:
        var(--color-muted-alpha);

}


.rv-contact-field > label > span[aria-hidden],
.rv-contact-choice-group > legend > span[aria-hidden] {

    color:
        var(--color-primary);

}


.rv-contact-field input,
.rv-contact-field textarea {

    width:
        100%;

    border:
        1px solid
        rgba(10, 12, 12, .16);

    border-radius:
        var(--radius-md);

    background:
        var(--color-light);

    font-family:
        var(--font-body);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-regular);

    line-height:
        var(--lh-body);

    color:
        var(--color-dark);

    caret-color:
        var(--color-primary);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}


.rv-contact-field input {

    min-height:
        3.75rem;

    padding:
        var(--space-3)
        var(--space-4);

}


.rv-contact-field textarea {

    min-height:
        230px;

    padding:
        var(--space-4);

    resize:
        vertical;

}


.rv-contact-field input:hover,
.rv-contact-field textarea:hover {

    border-color:
        rgba(10, 12, 12, .3);

}


.rv-contact-field input:focus,
.rv-contact-field textarea:focus {

    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 4px
        rgba(67, 16, 252, .1);

}


.rv-contact-field.is-invalid input,
.rv-contact-field.is-invalid textarea {

    border-color:
        var(--color-primary);

    background:
        rgba(67, 16, 252, .035);

}


.rv-contact-field-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    margin-top:
        var(--space-2);

    font-size:
        var(--fs-xs);

    color:
        var(--color-muted-alpha);

}


.rv-contact-field-error {

    display:
        none;

    margin-top:
        var(--space-2);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-medium);

    line-height:
        1.4;

    color: #D92D20;

}


.rv-contact-field.is-invalid > .rv-contact-field-error,
.rv-contact-choice-group.is-invalid > .rv-contact-field-error {

    display:
        block;

}


/* ==========================================================
   CUSTOM CHOICES
========================================================== */

.rv-contact-choice-group {

    min-inline-size:
        0;

    border:
        0;

    padding:
        0;

}


.rv-contact-choice-grid {

    display:
        grid;

    gap:
        var(--space-3);

}


.rv-contact-choice-grid-services {

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

}


.rv-contact-choice-grid-cooperation {

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

}


.rv-contact-choice {

    position:
        relative;

    min-width:
        0;

    cursor:
        pointer;

}


.rv-contact-choice input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    clip-path:
        inset(50%);

    white-space:
        nowrap;

}


.rv-contact-choice > span {

    min-height:
        3.5rem;

    display:
        flex;

    align-items:
        center;

    padding:
        var(--space-3)
        var(--space-4);

    border:
        1px solid
        rgba(10, 12, 12, .16);

    border-radius:
        var(--radius-md);

    background:
        var(--color-light);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-medium);

    line-height:
        1.35;

    color:
        var(--color-dark);

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

}


.rv-contact-choice:hover > span {

    border-color:
        rgba(10, 12, 12, .32);

}


.rv-contact-choice input:focus-visible + span {

    outline:
        2px solid
        var(--color-primary);

    outline-offset:
        3px;

}


.rv-contact-choice input:checked + span {

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    color:
        var(--color-light);

}


.rv-contact-choice-large > span {

    min-height:
        108px;

    align-items:
        flex-start;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        var(--space-2);

}


.rv-contact-choice-large strong,
.rv-contact-choice-large small {

    display:
        block;

    color:
        currentColor;

}


.rv-contact-choice-large strong {

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-semibold);

}


.rv-contact-choice-large small {

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-regular);

    opacity:
        .72;

}


/* ==========================================================
   FORM FOOTER / STATUS
========================================================== */

.rv-contact-honeypot {

    position:
        absolute !important;

    left:
        -10000px !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;

}


.rv-contact-form-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-6);

}


.rv-contact-submit {

    min-width:
        220px;

}


.rv-contact-submit:disabled {

    cursor:
        wait;

}


.rv-contact-required-note {

    font-size:
        var(--fs-xs);

    color:
        var(--color-muted-alpha);

}


.rv-contact-required-note span {

    color:
        var(--color-primary);

}


.rv-contact-form-status {

    display:
        none;

    margin-top:
        var(--space-6);

    padding:
        var(--space-5);

    border-radius:
        var(--radius-md);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-medium);

    line-height:
        1.5;

}


.rv-contact-form-status.is-success,
.rv-contact-form-status.is-error {

    display:
        block;

}


.rv-contact-form-status.is-success {

    background:
        var(--color-accent);

    color:
        var(--color-dark);

}


.rv-contact-form-status.is-error {

    background:#D92D20;

    color:
        var(--color-light);

}


/* ==========================================================
   NEXT STEPS
========================================================== */

.rv-contact-next {

    padding-top:
        var(--space-32);

    padding-bottom:
        var(--section-padding);

    background:
        var(--color-accent);

}


.rv-contact-next-header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .65fr);

    align-items:
        end;

    gap:
        var(--space-16);

    padding-bottom:
        var(--space-20);

}


.rv-contact-next-title {

    max-width:
        12ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-dark);

}


.rv-contact-next-title span {

    display:
        block;

    color:
        var(--color-primary);

}


.rv-contact-next-description {

    max-width:
        var(--text-width-sm);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-dark);

}


.rv-contact-next-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-contact-next-item,
.rv-contact-next-item:first-child,
.rv-contact-next-item:last-child {
    display: flex;
    min-width: 0;
    min-height: 320px;
    flex-direction: column;
    padding: var(--space-10);
    background: var(--color-dark);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition:
        transform var(--transition-base),
        background-color var(--transition-base);
}

.rv-contact-next-number {
    display: block;
    margin-bottom: var(--space-16);
    font-size: var(--fs-xs);
    font-weight: var(--font-semibold);
    color: var(--color-accent);
}

.rv-contact-next-item > div {
    margin-top: auto;
}

.rv-contact-next-item h3 {
    font-family: var(--font-body);
    font-size: var(--fs-xl);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    color: var(--color-light);
}

.rv-contact-next-item p {
    max-width: 34ch;
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .rv-contact-hero {

        min-height:
            auto;

        padding-top:
            clamp(
                9rem,
                16vw,
                11rem
            );

        padding-bottom:
            clamp(
                11rem,
                22vw,
                15rem
            );

    }


    .rv-contact-hero::after {

        top:
            -12%;

        right:
            -47%;

        width:
            105vw;

        height:
            125%;

    }


    .rv-contact-hero-content {

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

    }


    .rv-contact-hero-copy {

        max-width:
            760px;

    }


    .rv-contact-response-card {

        width:
            min(
                100%,
                680px
            );

        margin-inline:
            auto;

    }


    .rv-contact-form-layout {

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

    }


    .rv-contact-form-intro {

        position:
            static;

        max-width:
            760px;

    }


    .rv-contact-next-header {

        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            var(--space-6);

    }


    .rv-contact-next-title {

        max-width:
            16ch;

    }


    .rv-contact-next-list {

        grid-template-columns:
            1fr;

    }


.rv-contact-next-item,
.rv-contact-next-item:first-child,
.rv-contact-next-item:last-child {
    min-height: 240px;
    padding: var(--space-8);
    border: 0;
}

.rv-contact-next-number {
    margin-bottom: var(--space-10);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .rv-contact-organic-wave {

        height:
            clamp(
                105px,
                27vw,
                170px
            );

    }


    .rv-contact-hero {

        min-height:
            100svh;

        align-items:
            flex-start;

        padding-top:
            clamp(
                8.5rem,
                27vw,
                10rem
            );

        padding-bottom:
            clamp(
                8rem,
                28vw,
                11rem
            );

    }


    .rv-contact-hero::after {

        top:
            -10%;

        right:
            -95%;

        width:
            190vw;

        height:
            110%;

    }


    .rv-contact-hero-title {

        max-width:
            13ch;

        font-size:
            var(--fs-h2);

    }


    .rv-contact-hero-description {

        max-width:
            36ch;

        margin-top:
            var(--space-5);

        font-size:
            var(--fs-base);

    }


    .rv-contact-hero-cta {

        margin-top:
            var(--space-5);

    }


    .rv-contact-response-card {

        padding:
            var(--space-8)
            var(--space-6);

        border-radius:
            var(--radius-md);

    }


    .rv-contact-response-art {

        width:
            min(
                48%,
                180px
            );

    }


    .rv-contact-response-title {

        font-size:
            var(--fs-h3);

    }


    .rv-contact-direct {

        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

    }


    .rv-contact-form-section {

        padding-top:
            var(--space-20);

        padding-bottom:
            clamp(
                10rem,
                35vw,
                14rem
            );

    }


    .rv-contact-form-title,
    .rv-contact-next-title {

        font-size:
            var(--fs-h2);

    }


    .rv-contact-form-description,
    .rv-contact-next-description {

        font-size:
            var(--fs-sm);

    }


    .rv-contact-form {

        padding:
            var(--space-8)
            var(--space-6);

        border-radius:
            var(--radius-md);

    }


    .rv-contact-form-row,
    .rv-contact-choice-grid-services,
    .rv-contact-choice-grid-cooperation {

        grid-template-columns:
            1fr;

    }


    .rv-contact-field,
    .rv-contact-choice-group {

        margin-bottom:
            var(--space-6);

    }


    .rv-contact-choice-large > span {

        min-height:
            88px;

    }


    .rv-contact-form-footer {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .rv-contact-submit {

        width:
            100%;

    }


    .rv-contact-required-note {

        text-align:
            center;

    }


    .rv-contact-next {

        padding-top:
            var(--space-20);

        padding-bottom:
            var(--space-20);

    }


    .rv-contact-next-header {

        padding-bottom:
            var(--space-12);

    }


    .rv-contact-next-item h3 {

        font-size:
            var(--fs-lg);

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .rv-contact-hero-title {

        max-width:
            12ch;

    }


    .rv-contact-response-art {

        width:
            min(
                52%,
                160px
            );

    }


    .rv-contact-form {

        padding:
            var(--space-6)
            var(--space-5);

    }


    .rv-contact-submit {

        white-space:
            normal;

        text-align:
            center;

    }
}
}

.rv-contact-hero-cta .rv-btn-icon svg {
    transform: rotate(-135deg);
}

.rv-contact-hero-cta:hover .rv-btn-icon svg {
    transform: rotate(0deg);
}