@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   MARK ROBERTS MAGICIAN
   CONTACT PAGE
   ========================================================================== */


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

.mr-contact-hero {

    position:
    relative;

    min-height:
    620px;

    display:
    flex;

    align-items:
    flex-end;

    overflow:
    hidden;

    isolation:
    isolate;

    background:

    radial-gradient(
        circle at 72% 40%,
        rgba(193,18,31,.22),
        transparent 32%
    ),

    linear-gradient(
        135deg,
        #070708,
        #111113 60%,
        #080808
    );

}


.mr-contact-hero::before {

    content:
    "";

    position:
    absolute;

    inset:
    0;

    z-index:
    -2;

    background-image:

    linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
    );

    background-size:
    100% 80px;

}


.mr-contact-glow {

    position:
    absolute;

    width:
    min(65vw,850px);

    aspect-ratio:
    1;

    right:
    -20%;

    top:
    -35%;

    border:
    1px solid rgba(193,18,31,.12);

    border-radius:
    50%;

}


.mr-contact-hero-content {

    max-width:
    900px;

    padding:
    calc(var(--header-h) + 130px)
    0
    90px;

}


.mr-contact-hero h1 {

    margin-top:
    14px;

}


.mr-contact-hero h1 span {

    display:
    block;

}


.mr-contact-hero p {

    max-width:
    720px;

    margin-top:
    26px;

    color:
    rgba(255,255,255,.7);

    font-size:
    clamp(1.05rem,1.7vw,1.25rem);

}



/* =====================================================
CONTACT METHODS
===================================================== */

.mr-contact-method-grid {

    display:
    grid;

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

    gap:
    18px;

}


.mr-contact-method {

    position:
    relative;

    min-height:
    280px;

    display:
    flex;

    flex-direction:
    column;

    padding:
    30px;

    overflow:
    hidden;

    border:
    1px solid var(--border-dark);

    border-radius:
    var(--radius);

    background:
    rgba(255,255,255,.025);

    transition:

    transform .25s ease,
    border-color .25s ease,
    background .25s ease;

}


.mr-contact-method:hover {

    transform:
    translateY(-5px);

    border-color:
    rgba(224,25,40,.45);

    background:
    rgba(255,255,255,.05);

}


.mr-contact-method-icon {

    width:
    52px;

    height:
    52px;

    display:
    grid;

    place-items:
    center;

    margin-bottom:
    38px;

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

    border-radius:
    50%;

    color:
    var(--red-bright);

    background:
    rgba(255,255,255,.035);

}


.mr-contact-method-icon svg {

    width:
    23px;

    height:
    23px;

    fill:
    currentColor;

}


.mr-contact-method-label {

    margin-bottom:
    8px;

    color:
    var(--red-bright);

    font-size:
    .72rem;

    font-weight:
    700;

    letter-spacing:
    .15em;

    text-transform:
    uppercase;

}


.mr-contact-method strong {

    font-family:
    var(--serif);

    font-size:
    1.22rem;

}


.mr-contact-method small {

    margin-top:
    6px;

    color:
    var(--muted);

}


.mr-contact-arrow {

    position:
    absolute;

    right:
    28px;

    bottom:
    24px;

    color:
    rgba(255,255,255,.5);

    font-size:
    1.4rem;

    transition:
    transform .2s ease;

}


.mr-contact-method:hover
.mr-contact-arrow {

    transform:
    translateX(5px);

    color:
    var(--red-bright);

}



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

.mr-contact-layout {

    display:
    grid;

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

    align-items:
    start;

    gap:
    clamp(50px,8vw,110px);

}


.mr-contact-copy {

    position:
    sticky;

    top:
    130px;

}


.mr-contact-copy h2 {

    margin-top:
    14px;

}


.mr-contact-copy > p {

    margin-top:
    22px;

    color:
    rgba(21,21,21,.7);

    font-size:
    1.05rem;

}


.mr-contact-notes {

    display:
    grid;

    margin-top:
    42px;

    border-top:
    1px solid var(--border-light);

}


.mr-contact-notes > div {

    display:
    grid;

    padding:
    19px 0;

    border-bottom:
    1px solid var(--border-light);

}


.mr-contact-notes strong {

    font-size:
    .92rem;

}


.mr-contact-notes span {

    margin-top:
    3px;

    color:
    rgba(21,21,21,.58);

    font-size:
    .88rem;

}



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

.mr-contact-form-panel {

    padding:
    clamp(28px,4vw,48px);

    border:
    1px solid rgba(9,9,9,.1);

    border-radius:
    var(--radius);

    background:
    #fff;

    box-shadow:
    0 28px 80px rgba(0,0,0,.1);

}



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

.mr-contact-success {

    display:
    flex;

    align-items:
    flex-start;

    gap:
    18px;

    margin-bottom:
    30px;

    padding:
    22px;

    border:
    1px solid rgba(26,120,72,.2);

    border-radius:
    14px;

    background:
    rgba(26,120,72,.07);

}


.mr-contact-success > span {

    width:
    36px;

    height:
    36px;

    flex:
    0 0 auto;

    display:
    grid;

    place-items:
    center;

    border-radius:
    50%;

    background:
    #177844;

    color:
    #fff;

    font-weight:
    800;

}


.mr-contact-success h2 {

    font-family:
    var(--sans);

    font-size:
    1rem;

}


.mr-contact-success p {

    margin-top:
    5px;

    color:
    rgba(21,21,21,.67);

    font-size:
    .9rem;

}



/* =====================================================
ERRORS
===================================================== */

.mr-contact-errors {

    margin-bottom:
    30px;

    padding:
    22px;

    border:
    1px solid rgba(193,18,31,.22);

    border-radius:
    14px;

    background:
    rgba(193,18,31,.055);

}


.mr-contact-errors strong {

    color:
    #8f111a;

}


.mr-contact-errors ul {

    margin:
    12px 0 0;

    padding-left:
    20px;

    color:
    rgba(21,21,21,.75);

}



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

.mr-contact-form {

    color:
    var(--ink);

}


.mr-form-grid {

    display:
    grid;

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

    gap:
    22px;

}


.mr-form-field {

    position:
    relative;

    display:
    grid;

    gap:
    8px;

}


.mr-form-full {

    grid-column:
    1 / -1;

}


.mr-form-field label {

    font-size:
    .82rem;

    font-weight:
    700;

}


.mr-form-field label span {

    color:
    var(--red);

}


.mr-form-field input,
.mr-form-field select,
.mr-form-field textarea {

    width:
    100%;

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

    border-radius:
    11px;

    outline:
    none;

    background:
    #fafafa;

    color:
    #111;

    transition:

    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;

}


.mr-form-field input,
.mr-form-field select {

    min-height:
    54px;

    padding:
    0 15px;

}


.mr-form-field textarea {

    min-height:
    175px;

    padding:
    15px;

    resize:
    vertical;

    line-height:
    1.6;

}


.mr-form-field input:focus,
.mr-form-field select:focus,
.mr-form-field textarea:focus {

    border-color:
    var(--red);

    background:
    #fff;

    box-shadow:
    0 0 0 4px rgba(193,18,31,.07);

}


.mr-form-field
::placeholder {

    color:
    #929292;

}


.mr-character-count {

    position:
    absolute;

    right:
    12px;

    bottom:
    9px;

    color:
    #989898;

    font-size:
    .7rem;

    pointer-events:
    none;

}



/* =====================================================
HONEYPOT
===================================================== */

.mr-honeypot {

    position:
    absolute !important;

    left:
    -99999px !important;

    width:
    1px !important;

    height:
    1px !important;

    overflow:
    hidden !important;

    opacity:
    0 !important;

}



/* =====================================================
TURNSTILE
===================================================== */

.mr-turnstile {

    margin-top:
    24px;

}



/* =====================================================
CONSENT
===================================================== */

.mr-consent {

    display:
    flex;

    align-items:
    flex-start;

    gap:
    11px;

    margin-top:
    25px;

    color:
    rgba(21,21,21,.66);

    font-size:
    .82rem;

    line-height:
    1.55;

}


.mr-consent input {

    width:
    17px;

    height:
    17px;

    flex:
    0 0 auto;

    margin-top:
    2px;

    accent-color:
    var(--red);

}


.mr-consent a {

    color:
    var(--red);

    font-weight:
    700;

}



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

.mr-form-submit {

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    gap:
    20px;

    margin-top:
    30px;

    padding-top:
    26px;

    border-top:
    1px solid var(--border-light);

}


.mr-form-submit p {

    color:
    rgba(21,21,21,.48);

    font-size:
    .74rem;

}



/* =====================================================
FINAL CTA
===================================================== */

.mr-contact-final {

    position:
    relative;

    overflow:
    hidden;

    padding:
    clamp(90px,12vw,160px)
    0;

    background:

    radial-gradient(
        circle at 50% 40%,
        rgba(193,18,31,.17),
        transparent 32%
    ),

    #090909;

}


.mr-contact-final-content {

    max-width:
    780px;

    margin:
    auto;

    text-align:
    center;

}


.mr-contact-final h2 {

    margin-top:
    14px;

}


.mr-contact-final p {

    max-width:
    620px;

    margin:
    22px auto 0;

    color:
    var(--muted);

}


.mr-contact-final
.button-row {

    justify-content:
    center;

    margin-top:
    30px;

}



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

@media
(max-width:1050px) {

    .mr-contact-method-grid {

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

    }

}



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

@media
(max-width:820px) {

    .mr-contact-layout {

        grid-template-columns:
        1fr;

    }


    .mr-contact-copy {

        position:
        static;

    }

}



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

@media
(max-width:620px) {

    .mr-contact-hero {

        min-height:
        590px;

    }


    .mr-contact-hero-content {

        padding:
        150px 0 65px;

    }


    .mr-contact-method-grid {

        grid-template-columns:
        1fr;

    }


    .mr-contact-method {

        min-height:
        230px;

    }


    .mr-form-grid {

        grid-template-columns:
        1fr;

    }


    .mr-form-full {

        grid-column:
        auto;

    }


    .mr-contact-form-panel {

        padding:
        24px 18px;

    }


    .mr-form-submit {

        flex-direction:
        column;

        align-items:
        stretch;

    }


    .mr-form-submit
    .button {

        width:
        100%;

    }


    .mr-form-submit p {

        text-align:
        center;

    }

}