/* ==========================================================================
   BAD INFLUENCE PREMIUM
   CONTACT PAGE

   Consolidated release stylesheet.

   CONTENT ORDER
   01. Contact Core / Hero
   02. Intake Form
   03. Other Exits / Close

   Source modules remain in their original browser load order.
   ========================================================================== */


/* ==========================================================================
   01. SOURCE MODULE: premium-contact.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM CONTACT HERO V1 START */


.contact-main {
    background:
        #101010;
}


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

.contact-hero {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        calc(100svh - 5rem);

    background:
        #101010;

    color:
        var(--porcelain);
}


.contact-hero::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(47, 94, 255, 0.08),
            transparent 32%
        );
}


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

.contact-hero__shell {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-top:
        clamp(5rem, 9vh, 8rem);

    padding-bottom:
        clamp(6rem, 10vh, 9rem);
}


/* ==========================================================================
   META
   ========================================================================== */

.contact-hero__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.16);

    color:
        rgba(242, 240, 233, 0.42);

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

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-hero__meta span:first-child {
    color:
        #4f73ff;
}


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

.contact-hero__grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(18rem, 0.55fr);

    gap:
        clamp(5rem, 11vw, 14rem);

    align-items:
        end;

    min-height:
        clamp(34rem, 68vh, 48rem);

    padding-top:
        clamp(5rem, 10vh, 9rem);
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.contact-hero__eyebrow {
    margin:
        0
        0
        1.5rem;

    color:
        #4f73ff;

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

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-hero h1 {
    margin:
        0;

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

    font-size:
        clamp(5.3rem, 10.3vw, 12.5rem);

    font-weight:
        700;

    line-height:
        0.73;

    letter-spacing:
        -0.078em;

    text-transform:
        uppercase;
}


/*
 * Same lesson we learned on About:
 * give the reveal mask enough cap-height room.
 */

.contact-hero__mask {
    display:
        block;

    overflow:
        hidden;

    padding:
        0.1em
        0.05em
        0.05em
        0;

    margin:
        -0.1em
        0
        -0.05em
        0;
}


.contact-hero__mask > span {
    display:
        block;

    transform:
        translateY(112%);

    transition:
        transform 950ms
        cubic-bezier(.16,.8,.2,1);
}


.contact-hero.is-visible
.contact-hero__mask > span {
    transform:
        translateY(0);
}


.contact-hero.is-visible
.contact-hero__mask:nth-child(2) > span {
    transition-delay:
        90ms;
}


/* ==========================================================================
   GO AHEAD
   ========================================================================== */

.contact-hero__aside {
    display:
        block;

    width:
        fit-content;

    margin:
        clamp(1.2rem, 2.5vw, 2.5rem)
        0
        0
        clamp(5rem, 15vw, 17rem);

    color:
        #4f73ff;

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

    font-size:
        clamp(2.7rem, 4.8vw, 5.5rem);

    font-weight:
        400;

    font-style:
        italic;

    line-height:
        1;

    opacity:
        0;

    transform:
        translateX(-28px);

    transition:
        opacity 700ms 240ms ease,
        transform 700ms 240ms
        cubic-bezier(.2,.75,.2,1);
}


.contact-hero.is-visible
.contact-hero__aside {
    opacity:
        1;

    transform:
        none;
}


/* ==========================================================================
   BRIEF
   ========================================================================== */

.contact-hero__brief {
    padding-bottom:
        0.8rem;

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity 750ms 300ms ease,
        transform 750ms 300ms
        cubic-bezier(.2,.75,.2,1);
}


.contact-hero.is-visible
.contact-hero__brief {
    opacity:
        1;

    transform:
        none;
}


.contact-hero__brief-label {
    margin:
        0
        0
        1.7rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.18);

    color:
        #4f73ff;

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

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-hero__brief-copy {
    margin:
        0;

    color:
        rgba(242, 240, 233, 0.88);

    font-size:
        clamp(1.1rem, 1.45vw, 1.4rem);

    line-height:
        1.5;
}


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

.contact-hero__status {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        1px;

    margin-top:
        clamp(2.5rem, 5vh, 4rem);

    background:
        rgba(242, 240, 233, 0.16);

    border:
        1px solid
        rgba(242, 240, 233, 0.16);
}


.contact-hero__status > div {
    display:
        grid;

    gap:
        0.7rem;

    padding:
        1rem;

    background:
        #101010;
}


.contact-hero__status span {
    color:
        rgba(242, 240, 233, 0.38);

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

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-hero__status strong {
    color:
        var(--porcelain);

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

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

    line-height:
        1.05;
}


.contact-hero__note {
    margin:
        1.3rem 0 0;

    color:
        rgba(242, 240, 233, 0.4);

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

    font-size:
        clamp(0.95rem, 1.1vw, 1.1rem);

    font-style:
        italic;
}


/* ==========================================================================
   SCAN
   ========================================================================== */

.contact-hero__scan {
    position:
        absolute;

    z-index:
        5;

    bottom:
        3.25rem;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        #2f5eff;

    box-shadow:
        0 0 20px
        rgba(47, 94, 255, 0.55);

    transition:
        width 1100ms 400ms
        cubic-bezier(.2,.75,.2,1);
}


.contact-hero.is-visible
.contact-hero__scan {
    width:
        100%;
}


/* ==========================================================================
   BOTTOM FILE STRIP
   ========================================================================== */

.contact-hero__footer {
    position:
        absolute;

    z-index:
        3;

    right:
        0;

    bottom:
        0;

    left:
        0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding:
        1.25rem
        max(
            clamp(2rem, 5vw, 6rem),
            calc((100vw - 1760px) / 2)
        );

    color:
        rgba(242, 240, 233, 0.36);

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-hero__footer span:first-child {
    color:
        #4f73ff;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .contact-hero__shell {
        width:
            calc(100% - 4rem);
    }


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

        gap:
            5rem;

        align-items:
            start;

        min-height:
            auto;

        padding-bottom:
            5rem;
    }


    .contact-hero__brief {
        max-width:
            34rem;
    }

}


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

@media (max-width: 700px) {

    .contact-hero {
        min-height:
            auto;
    }


    .contact-hero__shell {
        width:
            auto;

        margin-inline:
            1rem;

        padding-top:
            4rem;

        padding-bottom:
            8rem;
    }


    .contact-hero__grid {
        display:
            block;

        min-height:
            auto;

        padding-top:
            4rem;
    }


    .contact-hero h1 {
        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }


    .contact-hero__aside {
        margin-left:
            2rem;

        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            );
    }


    .contact-hero__brief {
        margin-top:
            5rem;
    }


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


    .contact-hero__scan {
        bottom:
            5rem;
    }


    .contact-hero__footer {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0.4rem;

        padding:
            1rem;
    }

}


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

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

    .contact-hero__mask > span,
    .contact-hero__aside,
    .contact-hero__brief,
    .contact-hero__scan {
        transition:
            none;
    }


    .contact-hero__mask > span,
    .contact-hero__aside,
    .contact-hero__brief {
        opacity:
            1;

        transform:
            none;
    }


    .contact-hero__scan {
        width:
            100%;
    }

}


/* BAD INFLUENCE PREMIUM CONTACT HERO V1 END */



/* BAD INFLUENCE CONTACT HERO BACKGROUND ART V1 */


/* ==========================================================================
   CONTACT HERO FULL-BLEED IMAGE
   ========================================================================== */

.contact-hero {
    isolation:
        isolate;
}


/*
 * Override the original decorative ::before layer
 * and turn it into the real full-bleed hero photograph.
 */

.contact-hero::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    background-image:
        url("../images/contact-hero-support-background.webp");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center right;

    opacity:
        0;

    filter:
        saturate(0.82)
        contrast(0.96)
        brightness(0.86);

    transform:
        scale(1.025);

    transform-origin:
        center right;

    animation:
        contactHeroBackgroundIn
        1200ms
        100ms
        cubic-bezier(.2,.75,.2,1)
        forwards;

    pointer-events:
        none;
}


/*
 * Dark editorial wash.
 *
 * Heavy on the left so MAKE IT OUR PROBLEM stays dominant.
 * Much lighter on the right so the actual human remains visible.
 */

.contact-hero::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 9, 10, 0.92) 0%,
            rgba(8, 9, 10, 0.88) 26%,
            rgba(8, 9, 10, 0.72) 46%,
            rgba(8, 9, 10, 0.38) 66%,
            rgba(8, 9, 10, 0.10) 100%
        );

    pointer-events:
        none;
}


/* Existing content stays above both layers. */

.contact-hero__shell {
    z-index:
        2;
}


/* ==========================================================================
   IMAGE REVEAL
   ========================================================================== */

@keyframes contactHeroBackgroundIn {

    from {
        opacity:
            0;

        transform:
            scale(1.025);
    }

    to {
        opacity:
            0.92;

        transform:
            scale(1);
    }

}


/* ==========================================================================
   WIDE DESKTOP
   ========================================================================== */

@media (min-width: 1600px) {

    .contact-hero::before {
        background-position:
            center right;
    }


    .contact-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(8, 9, 10, 0.92) 0%,
                rgba(8, 9, 10, 0.87) 25%,
                rgba(8, 9, 10, 0.68) 44%,
                rgba(8, 9, 10, 0.31) 63%,
                rgba(8, 9, 10, 0.07) 100%
            );
    }

}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 2200px) {

    .contact-hero::before {
        background-position:
            center right;
    }


    .contact-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(8, 9, 10, 0.91) 0%,
                rgba(8, 9, 10, 0.84) 24%,
                rgba(8, 9, 10, 0.61) 42%,
                rgba(8, 9, 10, 0.25) 61%,
                rgba(8, 9, 10, 0.05) 100%
            );
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .contact-hero::before {
        background-position:
            68% center;
    }


    .contact-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(8, 9, 10, 0.92) 0%,
                rgba(8, 9, 10, 0.82) 44%,
                rgba(8, 9, 10, 0.52) 72%,
                rgba(8, 9, 10, 0.24) 100%
            );
    }

}


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

@media (max-width: 700px) {

    .contact-hero::before {
        background-position:
            72% center;
    }


    .contact-hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(8, 9, 10, 0.76) 0%,
                rgba(8, 9, 10, 0.68) 42%,
                rgba(8, 9, 10, 0.84) 100%
            );
    }

}


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

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

    .contact-hero::before {
        opacity:
            0.92;

        transform:
            none;

        animation:
            none;
    }

}


/* BAD INFLUENCE CONTACT HERO BACKGROUND ART V1 END */


/* ==========================================================================
   02. SOURCE MODULE: premium-contact-form.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM CONTACT FORM V1 START */


.contact-intake {
    position:
        relative;

    background:
        var(--porcelain);

    color:
        #101010;
}


.contact-intake__shell {
    display:
        grid;

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

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

    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-block:
        clamp(7rem, 11vw, 12rem);
}


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

.contact-intake__intro {
    align-self:
        start;
}


.contact-intake__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(16, 16, 16, 0.2);

    color:
        rgba(16, 16, 16, 0.46);

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

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-intake__meta span:first-child {
    color:
        #2f5eff;
}


.contact-intake__intro-copy {
    padding-top:
        clamp(5rem, 9vh, 8rem);
}


.contact-intake__eyebrow {
    margin:
        0
        0
        1.5rem;

    color:
        #2f5eff;

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

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-intake h2 {
    margin:
        0;

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

    font-size:
        clamp(4.7rem, 7vw, 8.4rem);

    font-weight:
        700;

    line-height:
        0.76;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;
}


.contact-intake h2 span {
    display:
        block;
}


.contact-intake__intro-copy > em {
    display:
        block;

    width:
        fit-content;

    margin:
        1.8rem
        0
        0
        clamp(3rem, 7vw, 7rem);

    color:
        #2f5eff;

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

    font-size:
        clamp(2rem, 3vw, 3.5rem);

    font-style:
        italic;

    line-height:
        1;
}


.contact-intake__dek {
    max-width:
        28rem;

    margin:
        3rem 0 0;

    color:
        rgba(16, 16, 16, 0.62);

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

    line-height:
        1.5;
}


.contact-intake__fineprint {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        clamp(6rem, 11vh, 10rem);

    padding-top:
        1rem;

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

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

    font-size:
        0.54rem;

    letter-spacing:
        0.08em;
}


.contact-intake__fineprint span {
    color:
        rgba(16, 16, 16, 0.42);
}


.contact-intake__fineprint strong {
    color:
        #2f5eff;
}


/* ==========================================================================
   BLACK FORM PANEL
   ========================================================================== */

.contact-intake__panel {
    position:
        relative;

    overflow:
        hidden;

    background:
        #101010;

    color:
        var(--porcelain);

    box-shadow:
        0 2rem 6rem
        rgba(0, 0, 0, 0.12);

    opacity:
        0;

    transform:
        translateY(38px);

    transition:
        opacity 750ms
        cubic-bezier(.2,.75,.2,1),

        transform 750ms
        cubic-bezier(.2,.75,.2,1);
}


.contact-intake.is-visible
.contact-intake__panel {
    opacity:
        1;

    transform:
        none;
}


.contact-intake__panel::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        #2f5eff;

    box-shadow:
        0 0 20px
        rgba(47, 94, 255, 0.55);

    transition:
        width 950ms 200ms
        cubic-bezier(.2,.75,.2,1);
}


.contact-intake.is-visible
.contact-intake__panel::before {
    width:
        100%;
}


.contact-intake__panel-head {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding:
        1rem
        clamp(1.4rem, 2.2vw, 2.2rem);

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.14);

    color:
        rgba(242, 240, 233, 0.4);

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

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-intake__panel-head span:last-child {
    color:
        #4f73ff;
}


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

.contact-form {
    padding:
        0
        clamp(1.4rem, 2.2vw, 2.2rem)
        clamp(1.5rem, 2.5vw, 2.5rem);
}


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

.contact-form__field {
    position:
        relative;

    padding:
        clamp(1.5rem, 2.2vw, 2.2rem)
        0;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.15);
}


.contact-form__field label,
.contact-form__type legend {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    width:
        100%;

    margin-bottom:
        clamp(1rem, 1.5vw, 1.5rem);
}


.contact-form__field label span,
.contact-form__type legend span {
    color:
        #4f73ff;

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

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-form__field label em,
.contact-form__type legend em {
    color:
        rgba(242, 240, 233, 0.36);

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

    font-size:
        0.95rem;

    font-style:
        italic;

    text-align:
        right;
}


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

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    display:
        block;

    width:
        100%;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--porcelain);

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

    font-size:
        clamp(1.4rem, 2.1vw, 2.25rem);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -0.045em;

    text-transform:
        uppercase;

    caret-color:
        #4f73ff;
}


.contact-form textarea {
    min-height:
        8rem;

    resize:
        vertical;

    font-size:
        clamp(1.1rem, 1.45vw, 1.5rem);

    line-height:
        1.25;
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:
        rgba(242, 240, 233, 0.18);

    opacity:
        1;
}


.contact-form__field::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        -1px;

    left:
        0;

    height:
        2px;

    background:
        #2f5eff;

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 280ms ease;
}


.contact-form__field:focus-within::after {
    transform:
        scaleX(1);
}


/* ==========================================================================
   INQUIRY TYPE
   ========================================================================== */

.contact-form__type {
    margin:
        0;

    padding:
        clamp(1.5rem, 2.2vw, 2.2rem)
        0;

    border:
        0;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.15);
}


.contact-form__choices {
    display:
        grid;

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

    gap:
        1px;

    background:
        rgba(242, 240, 233, 0.16);

    border:
        1px solid
        rgba(242, 240, 233, 0.16);
}


.contact-form__choice {
    position:
        relative;

    cursor:
        pointer;

    background:
        #101010;

    transition:
        background-color 220ms ease,
        color 220ms ease;
}


.contact-form__choice input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.contact-form__choice span {
    display:
        flex;

    align-items:
        center;

    min-height:
        3.6rem;

    padding:
        1rem
        1.2rem;

    color:
        rgba(242, 240, 233, 0.58);

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

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    transition:
        background-color 220ms ease,
        color 220ms ease;
}


.contact-form__choice input:checked + span {
    background:
        #2f5eff;

    color:
        #fff;
}


.contact-form__choice:focus-within {
    outline:
        2px solid
        #4f73ff;

    outline-offset:
        -2px;
}


/* ==========================================================================
   MESSAGE META + ERRORS
   ========================================================================== */

.contact-form__message-meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        1.2rem;

    color:
        rgba(242, 240, 233, 0.32);

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

    font-size:
        0.52rem;

    letter-spacing:
        0.06em;
}


.contact-form__error {
    min-height:
        1em;

    color:
        #7f9cff;

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

    font-size:
        0.52rem;

    letter-spacing:
        0.05em;
}


.contact-form__field.has-error::after {
    transform:
        scaleX(1);
}


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

.contact-form__submit-row {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(18rem, 1.3fr);

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

    align-items:
        end;

    padding-top:
        clamp(2rem, 3vw, 3rem);
}


.contact-form__submit-note span {
    color:
        #4f73ff;

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

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-form__submit-note p {
    max-width:
        18rem;

    margin:
        0.8rem 0 0;

    color:
        rgba(242, 240, 233, 0.34);

    font-size:
        0.8rem;

    line-height:
        1.4;
}


.contact-form__submit {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    align-items:
        center;

    width:
        100%;

    min-height:
        4.75rem;

    padding:
        1.5rem
        1.7rem;

    border:
        1px solid
        #4f73ff;

    border-radius:
        0;

    cursor:
        pointer;

    background:
        transparent;

    color:
        #fff;

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

    font-size:
        clamp(1.05rem, 1.35vw, 1.4rem);

    font-weight:
        700;

    letter-spacing:
        -0.035em;

    text-align:
        left;

    transition:
        background-color 220ms ease,
        color 220ms ease;
}


.contact-form__submit span:last-child {
    color:
        #4f73ff;

    font-size:
        1.8em;

    transition:
        color 220ms ease,
        transform 220ms ease;
}


@media (hover: hover) {

    .contact-form__submit:hover {
        background:
            #2f5eff;

        color:
            #fff;
    }


    .contact-form__submit:hover span:last-child {
        color:
            #fff;

        transform:
            translate(0.15em, -0.15em);
    }

}


/* ==========================================================================
   SUCCESS
   ========================================================================== */

.contact-form__success {
    margin-top:
        3rem;

    padding:
        clamp(1.5rem, 3vw, 2.5rem);

    border:
        1px solid
        #4f73ff;

    background:
        rgba(47, 94, 255, 0.08);
}


.contact-form__success[hidden] {
    display:
        none;
}


.contact-form__success span {
    display:
        block;

    margin-bottom:
        1rem;

    color:
        #4f73ff;

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

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-form__success strong {
    display:
        block;

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

    font-size:
        clamp(1.6rem, 2.5vw, 2.8rem);

    line-height:
        0.95;

    letter-spacing:
        -0.04em;
}


.contact-form__success p {
    margin:
        1rem 0 0;

    color:
        rgba(242, 240, 233, 0.5);

    font-size:
        0.9rem;

    line-height:
        1.4;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

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

        width:
            calc(100% - 4rem);

        gap:
            5rem;
    }


    .contact-intake__intro {
        max-width:
            42rem;
    }


    .contact-intake__fineprint {
        margin-top:
            4rem;
    }

}


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

@media (max-width: 700px) {

    .contact-intake__shell {
        display:
            block;

        width:
            auto;

        margin-inline:
            1rem;

        padding-block:
            5rem;
    }


    .contact-intake h2 {
        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }


    .contact-intake__fineprint {
        margin-top:
            4rem;
    }


    .contact-intake__panel {
        margin-top:
            5rem;
    }


    .contact-form__field label,
    .contact-form__type legend {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0.6rem;
    }


    .contact-form__field label em,
    .contact-form__type legend em {
        text-align:
            left;
    }


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


    .contact-form__submit-row {
        grid-template-columns:
            1fr;
    }


    .contact-form__submit-note {
        order:
            2;
    }

}


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

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

    .contact-intake__panel,
    .contact-intake__panel::before,
    .contact-form__field::after,
    .contact-form__submit,
    .contact-form__submit span:last-child {
        transition:
            none;
    }


    .contact-intake__panel {
        opacity:
            1;

        transform:
            none;
    }


    .contact-intake__panel::before {
        width:
            100%;
    }

}


/* BAD INFLUENCE PREMIUM CONTACT FORM V1 END */


/* ==========================================================================
   03. SOURCE MODULE: premium-contact-close.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM CONTACT CLOSE V1 START */


.contact-close {
    position:
        relative;

    overflow:
        hidden;

    background:
        #101010;

    color:
        var(--porcelain);
}


/* ==========================================================
   SCAN
   ========================================================== */

.contact-close__scan {
    position:
        absolute;

    z-index:
        4;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        #2f5eff;

    box-shadow:
        0 0 18px
        rgba(47, 94, 255, 0.52);

    transition:
        width 900ms
        cubic-bezier(.2,.75,.2,1);
}


.contact-close.is-visible
.contact-close__scan {
    width:
        100%;
}


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

.contact-close__shell {
    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-top:
        clamp(5rem, 8vw, 8rem);

    padding-bottom:
        clamp(4rem, 6vw, 6rem);
}


/* ==========================================================
   META
   ========================================================== */

.contact-close__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.15);

    color:
        rgba(242, 240, 233, 0.42);

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

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-close__meta span:first-child {
    color:
        #4f73ff;
}


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

.contact-close__intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(16rem, 0.34fr);

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

    align-items:
        end;

    padding-top:
        clamp(3.5rem, 6vw, 6rem);
}


.contact-close__eyebrow {
    margin:
        0
        0
        1rem;

    color:
        #4f73ff;

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

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-close h2 {
    margin:
        0;

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

    font-size:
        clamp(4.5rem, 8vw, 9rem);

    font-weight:
        700;

    line-height:
        0.74;

    letter-spacing:
        -0.07em;

    text-transform:
        uppercase;
}


.contact-close h2 span {
    display:
        block;
}


.contact-close__intro > div > em {
    display:
        block;

    width:
        fit-content;

    margin:
        1.1rem
        0
        0
        clamp(3rem, 8vw, 8rem);

    color:
        #4f73ff;

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

    font-size:
        clamp(2rem, 3.2vw, 3.6rem);

    font-style:
        italic;
}


.contact-close__dek {
    max-width:
        22rem;

    margin:
        0 0 0.4rem;

    color:
        rgba(242, 240, 233, 0.56);

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

    line-height:
        1.5;
}


/* ==========================================================
   ROUTES
   ========================================================== */

.contact-close__routes {
    display:
        grid;

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

    border-top:
        1px solid
        rgba(242, 240, 233, 0.15);

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.15);
}


.contact-close__route {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    grid-template-rows:
        auto 1fr;

    gap:
        1rem;

    min-height:
        10rem;

    padding:
        clamp(1.5rem, 2.6vw, 2.6rem);

    border-right:
        1px solid
        rgba(242, 240, 233, 0.15);

    color:
        var(--porcelain);

    text-decoration:
        none;

    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        opacity 600ms
        cubic-bezier(.2,.75,.2,1),

        transform 600ms
        cubic-bezier(.2,.75,.2,1),

        background-color 220ms ease;
}


.contact-close__route:last-child {
    border-right:
        0;
}


.contact-close.is-visible
.contact-close__route {
    opacity:
        1;

    transform:
        none;
}


.contact-close.is-visible
.contact-close__route:nth-child(1) {
    transition-delay:
        180ms;
}


.contact-close.is-visible
.contact-close__route:nth-child(2) {
    transition-delay:
        250ms;
}


.contact-close.is-visible
.contact-close__route:nth-child(3) {
    transition-delay:
        320ms;
}


.contact-close__number {
    color:
        #4f73ff;

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-close__route strong {
    grid-column:
        1 / 3;

    align-self:
        end;

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

    font-size:
        clamp(2rem, 3vw, 3.4rem);

    line-height:
        0.9;

    letter-spacing:
        -0.05em;
}


.contact-close__route em {
    grid-column:
        2 / 4;

    grid-row:
        1;

    justify-self:
        end;

    max-width:
        15rem;

    color:
        rgba(242, 240, 233, 0.45);

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

    font-size:
        0.95rem;

    font-style:
        italic;

    text-align:
        right;
}


.contact-close__arrow {
    grid-column:
        3;

    grid-row:
        2;

    align-self:
        end;

    color:
        #4f73ff;

    font-size:
        1.8rem;

    transition:
        transform 220ms ease,
        color 220ms ease;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) {

    .contact-close__route:hover {
        background:
            #2f5eff;
    }


    .contact-close__route:hover
    .contact-close__number,

    .contact-close__route:hover
    .contact-close__arrow {
        color:
            #fff;
    }


    .contact-close__route:hover
    em {
        color:
            rgba(255, 255, 255, 0.78);
    }


    .contact-close__route:hover
    .contact-close__arrow {
        transform:
            translate(0.14em, -0.14em);
    }

}


/* ==========================================================
   BOTTOM NOTE
   ========================================================== */

.contact-close__bottom {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    align-items:
        baseline;

    padding:
        1.4rem
        max(
            clamp(2rem, 5vw, 6rem),
            calc((100vw - 1760px) / 2)
        );

    color:
        rgba(242, 240, 233, 0.38);

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.contact-close__bottom span {
    color:
        #4f73ff;
}


.contact-close__bottom em {
    color:
        rgba(242, 240, 233, 0.55);

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

    font-size:
        1rem;

    font-weight:
        400;

    font-style:
        italic;

    letter-spacing:
        -0.01em;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .contact-close__shell {
        width:
            calc(100% - 4rem);
    }


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

        gap:
            3rem;
    }


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


    .contact-close__route {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(242, 240, 233, 0.15);
    }

}


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

@media (max-width: 700px) {

    .contact-close__shell {
        width:
            auto;

        margin-inline:
            1rem;

        padding-block:
            4rem;
    }


    .contact-close__intro {
        display:
            block;

        padding-top:
            3rem;
    }


    .contact-close h2 {
        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }


    .contact-close__dek {
        margin-top:
            3rem;
    }


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


    .contact-close__route {
        min-height:
            9rem;

        padding:
            1.5rem;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(242, 240, 233, 0.15);
    }


    .contact-close__bottom {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0.5rem;

        padding:
            1.3rem
            1rem;
    }

}


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

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

    .contact-close__scan,
    .contact-close__route,
    .contact-close__arrow {
        transition:
            none;
    }


    .contact-close__scan {
        width:
            100%;
    }


    .contact-close__route {
        opacity:
            1;

        transform:
            none;
    }

}


/* BAD INFLUENCE PREMIUM CONTACT CLOSE V1 END */