/* ============================================================
   ASMC
   PHASE 9C
   CONTACT PAGE MOTION SUPPORT
============================================================ */


/* ============================================================
   PERFORMANCE HINTS
============================================================ */

.contact-hero-title,
.contact-directory-row,
.contact-location-strip,
.contact-enquiry-title,
.contact-form-shell,
.contact-route-option,
.contact-field,
.contact-form-footer,
.contact-details-title,
.contact-place,
.contact-final-copy,
.contact-final-actions {
    will-change:
        transform,
        opacity;
}



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

   The actual floating movement is controlled by JavaScript.
============================================================ */

.contact-hero-orbit {
    transform-origin:
        center center;

    will-change:
        transform;
}



/* ============================================================
   DIRECTIONAL ARROWS
============================================================ */

.contact-hero-action span,
.contact-directory-value span,
.contact-submit span,
.contact-final-primary span,
.contact-final-secondary span {
    display:
        inline-block;

    transition:
        transform
        280ms
        ease;
}


@media (hover: hover) and (pointer: fine) {

    .contact-hero-action:hover span,
    .contact-directory-value:hover span,
    .contact-submit:hover span,
    .contact-final-primary:hover span,
    .contact-final-secondary:hover span {
        transform:
            translate(
                4px,
                -4px
            );
    }

}



/* ============================================================
   CONTACT DIRECTORY
============================================================ */

.contact-directory-row {
    transform-origin:
        center center;
}


.contact-directory-number {
    display:
        inline-block;

    transform-origin:
        center center;
}



/* ============================================================
   ROUTE SELECTORS
============================================================ */

.contact-route-option {
    transform-origin:
        center center;
}


.contact-route-option.is-route-pulse {
    position:
        relative;
}



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

.contact-route-dot,
.contact-location-dot {
    transform-origin:
        center center;
}



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

.contact-form-shell {
    transform-origin:
        top center;
}


.contact-field {
    transform-origin:
        center center;
}



/* ============================================================
   LOCATION DIRECTORY
============================================================ */

.contact-place-list {
    perspective:
        1200px;
}


.contact-place {
    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;
}


.contact-place-index {
    display:
        inline-block;

    transform-origin:
        center center;

    backface-visibility:
        hidden;
}



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

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

    .contact-hero-action span,
    .contact-directory-value span,
    .contact-submit span,
    .contact-final-primary span,
    .contact-final-secondary span {
        transition:
            none;
    }

}
/* ============================================================
   CONTACT HERO
   RESPONSIVE TITLE LINE FIX
============================================================ */


/*
    Treat the hero heading as two deliberate lines:

    Start a
    conversation.

    The second line is never allowed to split internally.
*/

.contact-hero-title
.contact-hero-line {
    display:
        block;
}


.contact-hero-title
.contact-hero-line-start {
    color:
        inherit;
}


.contact-hero-title
.contact-hero-line-accent {
    white-space:
        nowrap;

    overflow-wrap:
        normal;

    word-break:
        keep-all;

    hyphens:
        none;
}



/* ============================================================
   TABLET / SMALL SCREEN
============================================================ */

@media (max-width: 700px) {

    .contact-hero-title {
        width:
            100%;

        max-width:
            100%;
    }


    .contact-hero-title
    .contact-hero-line-accent {
        width:
            max-content;

        max-width:
            100%;

        font-size:
            clamp(
                2.35rem,
                10.5vw,
                3.25rem
            );

        line-height:
            0.96;
    }

}



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

@media (max-width: 480px) {

    .contact-hero-title {
        width:
            100%;

        max-width:
            100%;
    }


    .contact-hero-title
    .contact-hero-line-start {
        white-space:
            nowrap;
    }


    .contact-hero-title
    .contact-hero-line-accent {
        display:
            block;

        width:
            max-content;

        max-width:
            100%;

        white-space:
            nowrap;

        overflow-wrap:
            normal;

        word-break:
            keep-all;

        hyphens:
            none;

        font-size:
            clamp(
                2.15rem,
                9.8vw,
                2.75rem
            );

        line-height:
            0.95;

        letter-spacing:
            -0.055em;
    }

}



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

@media (max-width: 380px) {

    .contact-hero-title
    .contact-hero-line-accent {
        font-size:
            clamp(
                2rem,
                9.4vw,
                2.35rem
            );
    }

}