/* =========================================
   ASMC CONTACT PAGE
   PHASE 7B
   ENQUIRY FORM
========================================= */


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

.contact-enquiry {
    position: relative;

    padding:
        clamp(
            5rem,
            7vw,
            7rem
        )
        0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #FBF9FC 0%,
            #F6F2F9 100%
        );
}



/* =========================================
   MAIN GRID
========================================= */

.contact-enquiry-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

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

    align-items: start;
}



/* =========================================
   INTRO
========================================= */

.contact-enquiry-intro {
    position: sticky;

    top:
        calc(
            var(--header-height)
            +
            2rem
        );

    max-width:
        450px;

    padding-top:
        1rem;
}



/* =========================================
   INTRO KICKER
========================================= */

.contact-enquiry-kicker {
    width: fit-content;

    margin:
        0
        0
        1rem;

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

    font-size:
        0.82rem;

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

    line-height: 1;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    color:
        var(--color-orange);
}



/* =========================================
   INTRO TITLE
========================================= */

.contact-enquiry-title {
    max-width:
        440px;

    margin:
        0
        0
        1.5rem;

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

    font-size:
        clamp(
            3.2rem,
            5vw,
            5.4rem
        );

    font-weight:
        var(--fw-bold);

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

    color:
        var(--color-ink);
}


.contact-enquiry-title span {
    display: block;

    color:
        var(--color-violet);
}



/* =========================================
   INTRO LEAD
========================================= */

.contact-enquiry-lead {
    max-width:
        410px;

    margin:
        0;

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

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.15rem
        );

    line-height:
        1.7;

    color:
        var(--color-text-secondary);
}



/* =========================================
   SMALL EDITORIAL DEVICE
========================================= */

.contact-enquiry-note {
    max-width:
        360px;

    margin-top:
        clamp(
            2.5rem,
            4vw,
            3.75rem
        );

    display: flex;

    align-items: flex-start;

    gap:
        1rem;
}


.contact-enquiry-note-line {
    width:
        34px;

    height:
        2px;

    margin-top:
        0.65rem;

    flex-shrink: 0;

    background:
        var(--color-orange);
}


.contact-enquiry-note p {
    margin: 0;

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

    font-size:
        0.9rem;

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

    line-height:
        1.6;

    color:
        var(--color-ink-soft);
}


.contact-enquiry-note p span {
    color:
        var(--color-violet);
}



/* =========================================
   FORM SHELL
========================================= */

.contact-form-shell {
    position: relative;

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

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.12
        );

    border-radius:
        clamp(
            24px,
            2.5vw,
            34px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    box-shadow:
        0 22px 54px
        rgba(
            33,
            22,
            39,
            0.07
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}



/* =========================================
   ORANGE DETAIL
========================================= */

.contact-form-shell::before {
    content: "";

    position: absolute;

    left:
        clamp(
            2rem,
            3.5vw,
            3.5rem
        );

    top: 0;

    width:
        78px;

    height:
        4px;

    border-radius:
        0
        0
        4px
        4px;

    background:
        var(--color-orange);
}



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

.contact-form {
    width: 100%;
}



/* =========================================
   ROUTING
========================================= */

.contact-form-routing {
    margin:
        0
        0
        clamp(
            2.5rem,
            4vw,
            3.5rem
        );

    padding: 0;

    border: 0;
}


.contact-form-routing legend {
    margin-bottom:
        1.25rem;

    padding: 0;

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

    font-size:
        clamp(
            1.25rem,
            1.6vw,
            1.55rem
        );

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

    color:
        var(--color-ink);
}



/* =========================================
   ROUTING OPTIONS
========================================= */

.contact-route-options {
    display: grid;

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

    gap:
        0.65rem;
}



/* =========================================
   ROUTING OPTION
========================================= */

.contact-route-option {
    position: relative;

    cursor: pointer;
}


.contact-route-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.contact-route-option span {
    min-height:
        50px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        0.7rem
        0.9rem;

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.15
        );

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

    background:
        transparent;

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

    font-size:
        0.84rem;

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

    color:
        var(--color-ink-soft);

    transition:
        background-color
        180ms
        ease,
        color
        180ms
        ease,
        border-color
        180ms
        ease,
        transform
        180ms
        ease;
}


.contact-route-option input:checked + span {
    border-color:
        var(--color-violet);

    background:
        var(--color-violet);

    color:
        var(--color-white);
}


.contact-route-option:hover span {
    transform:
        translateY(-1px);
}



/* =========================================
   ROUTE FOCUS
========================================= */

.contact-route-option input:focus-visible + span {
    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.35
        );

    outline-offset:
        3px;
}



/* =========================================
   ROUTING INDICATOR
========================================= */

.contact-route-indicator {
    margin-top:
        1rem;

    display: flex;

    align-items: center;

    gap:
        0.7rem;

    padding:
        0.85rem
        1rem;

    border-radius:
        12px;

    background:
        rgba(
            102,
            46,
            147,
            0.055
        );
}


.contact-route-dot {
    width:
        7px;

    height:
        7px;

    flex-shrink: 0;

    border-radius:
        50%;

    background:
        var(--color-orange);
}


.contact-route-indicator p {
    margin: 0;

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

    font-size:
        0.82rem;

    line-height:
        1.5;

    color:
        var(--color-text-secondary);
}


.contact-route-indicator strong {
    color:
        var(--color-violet);

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



/* =========================================
   FIELDS GRID
========================================= */

.contact-form-fields {
    display: grid;

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

    column-gap:
        clamp(
            1.25rem,
            2.5vw,
            2rem
        );

    row-gap:
        clamp(
            1.75rem,
            3vw,
            2.4rem
        );
}



/* =========================================
   FIELD
========================================= */

.contact-field {
    min-width: 0;
}


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



/* =========================================
   LABEL
========================================= */

.contact-field label {
    display: flex;

    justify-content: space-between;

    gap:
        1rem;

    margin-bottom:
        0.65rem;

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

    font-size:
        0.78rem;

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

    letter-spacing:
        0.035em;

    color:
        var(--color-ink);
}


.contact-field label span {
    font-family:
        var(--font-body);

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

    letter-spacing:
        0;

    color:
        var(--color-text-secondary);
}



/* =========================================
   INPUTS
========================================= */

.contact-field input,
.contact-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 0;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.22
        );

    border-radius: 0;

    outline: none;

    background:
        transparent;

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

    font-size:
        1rem;

    color:
        var(--color-ink);

    transition:
        border-color
        180ms
        ease;
}


.contact-field input {
    height:
        48px;

    padding:
        0
        0.2rem;
}


.contact-field textarea {
    min-height:
        150px;

    padding:
        0.8rem
        0.2rem;

    resize:
        vertical;
}



/* =========================================
   PLACEHOLDERS
========================================= */

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color:
        rgba(
            58,
            45,
            64,
            0.45
        );
}



/* =========================================
   FIELD FOCUS
========================================= */

.contact-field input:focus,
.contact-field textarea:focus {
    border-color:
        var(--color-violet);
}



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

.contact-form-footer {
    margin-top:
        clamp(
            2.5rem,
            4vw,
            3.5rem
        );

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        1.5rem;
}


.contact-form-footer p {
    max-width:
        290px;

    margin: 0;

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

    font-size:
        0.78rem;

    line-height:
        1.5;

    color:
        var(--color-text-secondary);
}



/* =========================================
   SUBMIT
========================================= */

.contact-submit {
    min-height:
        52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        0.8rem;

    padding:
        0.8rem
        1.3rem;

    border: 0;

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

    background:
        var(--color-deep-ink, #211627);

    cursor: pointer;

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

    font-size:
        0.9rem;

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

    color:
        var(--color-white);

    transition:
        transform
        180ms
        ease,
        background-color
        180ms
        ease;
}


.contact-submit:hover {
    transform:
        translateY(-2px);

    background:
        var(--color-violet);
}


.contact-submit:focus-visible {
    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.38
        );

    outline-offset:
        4px;
}



/* =========================================
   STATUS
========================================= */

.contact-form-status {
    min-height:
        1.4em;

    margin:
        1rem
        0
        0;

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

    font-size:
        0.8rem;

    color:
        var(--color-violet);
}



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

@media (max-width: 950px) {

    .contact-enquiry-grid {
        grid-template-columns:
            1fr;

        gap:
            3.5rem;
    }


    .contact-enquiry-intro {
        position:
            static;

        max-width:
            700px;

        padding-top:
            0;
    }


    .contact-enquiry-note {
        margin-top:
            2rem;
    }

}



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

@media (max-width: 700px) {

    .contact-enquiry {
        padding:
            4rem
            0;
    }


    .contact-enquiry-grid {
        gap:
            3rem;
    }


    .contact-enquiry-title {
        font-size:
            clamp(
                3rem,
                14vw,
                4.4rem
            );
    }


    .contact-form-shell {
        padding:
            2rem
            1.4rem;

        border-radius:
            24px;
    }


    .contact-form-shell::before {
        left:
            1.4rem;
    }


    .contact-route-options {
        grid-template-columns:
            1fr;
    }


    .contact-form-fields {
        grid-template-columns:
            1fr;
    }


    .contact-field-full {
        grid-column:
            auto;
    }


    .contact-form-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .contact-form-footer p {
        max-width:
            none;
    }


    .contact-submit {
        width:
            100%;
    }

}



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

@media (max-width: 480px) {

    .contact-enquiry {
        padding:
            3.5rem
            0;
    }


    .contact-enquiry-title {
        font-size:
            clamp(
                2.7rem,
                13vw,
                3.7rem
            );
    }


    .contact-form-shell {
        padding:
            1.75rem
            1.2rem;
    }


    .contact-form-shell::before {
        left:
            1.2rem;

        width:
            60px;
    }

}



/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-route-option span,
    .contact-submit {
        transition:
            none;
    }

}

/* =========================================
   ROUTING INDICATOR — CENTRED
========================================= */

.contact-route-indicator {
    justify-content: center;

    text-align: center;
}


.contact-route-indicator p {
    text-align: center;
}


.contact-route-indicator strong {
    display: inline-block;
}