@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   MARK ROBERTS MAGICIAN
   FREQUENTLY ASKED QUESTIONS
   ========================================================================== */


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

.mr-faq-hero {

    position:
    relative;

    min-height:
    720px;

    display:
    flex;

    align-items:
    flex-end;

    overflow:
    hidden;

    isolation:
    isolate;

    background:

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

        linear-gradient(
            135deg,
            #060607,
            #111113 58%,
            #080808
        );

}


.mr-faq-hero::before {

    content:
    "";

    position:
    absolute;

    inset:
    0;

    z-index:
    -2;

    background-image:

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

    background-size:
    100% 80px;

}


.mr-faq-glow {

    position:
    absolute;

    width:
    min(75vw,950px);

    aspect-ratio:
    1;

    right:
    -28%;

    top:
    -42%;

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

    border-radius:
    50%;

}


.mr-faq-glow::after {

    content:
    "";

    position:
    absolute;

    inset:
    12%;

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

    border-radius:
    inherit;

}


.mr-faq-hero-content {

    max-width:
    930px;

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

}


.mr-faq-hero h1 {

    margin-top:
    14px;

}


.mr-faq-hero h1 span {

    display:
    block;

}


.mr-faq-hero p {

    max-width:
    730px;

    margin-top:
    26px;

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

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

}


.mr-faq-hero-actions {

    display:
    flex;

    flex-wrap:
    wrap;

    align-items:
    center;

    gap:
    25px;

    margin-top:
    34px;

}


.mr-faq-jump {

    display:
    inline-flex;

    align-items:
    center;

    gap:
    9px;

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

    font-size:
    .88rem;

    font-weight:
    700;

}


.mr-faq-jump span {

    color:
    var(--red-bright);

    transition:
    transform .2s ease;

}


.mr-faq-jump:hover {

    color:
    #fff;

}


.mr-faq-jump:hover span {

    transform:
    translateY(4px);

}



/* =====================================================
INTRODUCTION
===================================================== */

.mr-faq-intro-grid {

    display:
    grid;

    grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

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

    align-items:
    start;

}


.mr-faq-intro-heading h2 {

    margin-top:
    14px;

}


.mr-faq-intro-copy {

    max-width:
    700px;

}


.mr-faq-intro-copy p {

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

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

    line-height:
    1.8;

}


.mr-faq-intro-copy p + p {

    margin-top:
    20px;

}



/* =====================================================
CATEGORY NAVIGATION
===================================================== */

.mr-faq-categories {

    padding:
    0 0 clamp(80px,10vw,140px);

    background:
    var(--paper);

    color:
    var(--ink);

}


.mr-faq-category-grid {

    display:
    grid;

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

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

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

}


.mr-faq-category {

    position:
    relative;

    min-height:
    150px;

    display:
    flex;

    flex-direction:
    column;

    justify-content:
    space-between;

    padding:
    24px;

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

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

    transition:

        background .22s ease,
        color .22s ease;

}


.mr-faq-category > span {

    color:
    var(--red);

    font-family:
    var(--serif);

    font-size:
    .76rem;

    font-weight:
    700;

}


.mr-faq-category strong {

    max-width:
    180px;

    font-family:
    var(--serif);

    font-size:
    1.08rem;

    line-height:
    1.3;

}


.mr-faq-category small {

    position:
    absolute;

    right:
    22px;

    bottom:
    20px;

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

    font-size:
    1.1rem;

    transition:
    transform .2s ease;

}


.mr-faq-category:hover {

    background:
    var(--black);

    color:
    #fff;

}


.mr-faq-category:hover small {

    color:
    var(--red-bright);

    transform:
    translateY(4px);

}



/* =====================================================
FAQ LAYOUT
===================================================== */

.mr-faq-section {

    scroll-margin-top:
    var(--header-h);

}


.mr-faq-layout {

    display:
    grid;

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

    align-items:
    start;

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

}


.mr-faq-section-intro {

    position:
    sticky;

    top:
    calc(
        var(--header-h)
        + 50px
    );

}


.mr-faq-section-intro h2 {

    margin-top:
    13px;

}


.mr-faq-section-intro p {

    margin-top:
    20px;

    max-width:
    430px;

    opacity:
    .66;

}


.mr-faq-section-number {

    display:
    block;

    margin-top:
    45px;

    font-family:
    var(--serif);

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

    font-weight:
    700;

    line-height:
    1;

    opacity:
    .07;

}



/* =====================================================
FAQ LIST
===================================================== */

.mr-faq-list {

    border-top:
    1px solid currentColor;

    border-color:
    rgba(127,127,127,.22);

}


.mr-faq-item {

    border-bottom:
    1px solid currentColor;

    border-color:
    rgba(127,127,127,.22);

}


.mr-faq-item .faq-question {

    min-height:
    96px;

    padding:
    22px 0;

}


.mr-faq-item .faq-question > span:first-child {

    max-width:
    720px;

    padding-right:
    30px;

    font-family:
    var(--serif);

    font-size:
    clamp(1.05rem,1.6vw,1.3rem);

    line-height:
    1.4;

}


.mr-faq-item .faq-answer p {

    max-width:
    760px;

    padding:
    0 60px 30px 0;

    opacity:
    .68;

    line-height:
    1.8;

}


.section-light
.mr-faq-item .faq-answer p {

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

}


.section-dark
.mr-faq-item .faq-answer p {

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

}



/* =====================================================
CONTACT CARD
===================================================== */

.mr-faq-contact-card {

    display:
    grid;

    grid-template-columns:
    minmax(0,1.25fr)
    minmax(250px,.75fr);

    align-items:
    center;

    gap:
    clamp(35px,7vw,90px);

    padding:
    clamp(35px,6vw,70px);

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

    border-radius:
    var(--radius);

    background:
    #fff;

    box-shadow:
    0 24px 70px rgba(0,0,0,.08);

}


.mr-faq-contact-card h2 {

    margin-top:
    14px;

}


.mr-faq-contact-card p {

    max-width:
    680px;

    margin-top:
    20px;

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

}


.mr-faq-contact-actions {

    display:
    grid;

    justify-items:
    start;

    gap:
    18px;

}


.mr-faq-contact-link {

    font-weight:
    700;

    color:
    var(--ink);

}


.mr-faq-contact-link:hover {

    color:
    var(--red);

}



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

.mr-faq-final {

    position:
    relative;

    overflow:
    hidden;

    isolation:
    isolate;

    padding:
    clamp(100px,13vw,175px)
    0;

    background:
    #080809;

}


.mr-faq-final-glow {

    position:
    absolute;

    z-index:
    -1;

    width:
    min(80vw,900px);

    aspect-ratio:
    1;

    left:
    50%;

    top:
    50%;

    transform:
    translate(-50%,-50%);

    background:

        radial-gradient(
            circle,
            rgba(193,18,31,.18),
            transparent 60%
        );

}


.mr-faq-final-content {

    max-width:
    860px;

    margin:
    auto;

    text-align:
    center;

}


.mr-faq-final-content h2 {

    margin-top:
    14px;

}


.mr-faq-final-content h2 span {

    display:
    block;

}


.mr-faq-final-content p {

    max-width:
    680px;

    margin:
    24px auto 0;

    color:
    var(--muted);

}


.mr-faq-final-content
.button {

    margin-top:
    32px;

}



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

@media
(max-width:1000px) {

    .mr-faq-category-grid {

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

    }


    .mr-faq-layout {

        grid-template-columns:
        1fr;

    }


    .mr-faq-section-intro {

        position:
        static;

        max-width:
        700px;

    }


    .mr-faq-section-number {

        display:
        none;

    }

}



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

@media
(max-width:820px) {

    .mr-faq-intro-grid {

        grid-template-columns:
        1fr;

    }


    .mr-faq-contact-card {

        grid-template-columns:
        1fr;

    }

}



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

@media
(max-width:620px) {

    .mr-faq-hero {

        min-height:
        650px;

    }


    .mr-faq-hero-content {

        padding:
        150px 0 65px;

    }


    .mr-faq-hero-actions {

        align-items:
        stretch;

        flex-direction:
        column;

    }


    .mr-faq-hero-actions
    .button {

        width:
        100%;

    }


    .mr-faq-category-grid {

        grid-template-columns:
        1fr;

    }


    .mr-faq-category {

        min-height:
        125px;

    }


    .mr-faq-item
    .faq-question {

        min-height:
        82px;

        padding:
        18px 0;

    }


    .mr-faq-item
    .faq-question
    > span:first-child {

        padding-right:
        15px;

    }


    .mr-faq-item
    .faq-answer p {

        padding-right:
        25px;

    }


    .mr-faq-contact-card {

        padding:
        28px 22px;

    }


    .mr-faq-contact-actions
    .button {

        width:
        100%;

    }

}