/* =========================================================
   SYMKH FAQ + LICENSE
========================================================= */

.faq-page {
    margin: 0;
    background: #f8f3eb;
    color: #171512;
}


/* =========================================================
   ACTIVE NAV
========================================================= */

.faq-page .nav nav a.active {
    color: #b17e39;
    border-bottom: 1px solid #b17e39;
}


/* =========================================================
   COMMON
========================================================= */

.faq-page .eyebrow {
    margin: 0 0 14px;

    color: #aa7837;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}


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

.faq-hero {
    min-height: 500px;

    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    background: #f7efe4;

    border-bottom:
        1px solid #dacbb8;
}


/* COPY */

.faq-hero-copy {
    padding:
        80px
        7vw;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.faq-hero h1 {
    margin: 0;

    color: #161411;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(65px, 7vw, 105px);

    font-weight: 400;

    line-height: .84;

    letter-spacing: -4px;
}

.faq-hero-copy > p:last-child {
    max-width: 570px;

    margin:
        30px
        0
        0;

    color: #5e574e;

    font-size: 14px;

    line-height: 1.75;
}


/* HERO SIDE */

.faq-hero-side {
    min-width: 0;

    padding:
        60px
        5vw;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(191,140,65,.16),
            transparent 35%
        ),
        #171512;

    color: #fff;

    box-sizing: border-box;
}

.faq-mark {
    position: absolute;

    right: -5px;
    top: -55px;

    color:
        rgba(198,150,76,.12);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 420px;

    line-height: 1;
}

.faq-hero-side > div {
    position: relative;

    z-index: 2;
}

.faq-hero-side > div > p {
    margin: 0 0 12px;

    color: #c6974f;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}

.faq-hero-side h2 {
    margin: 0 0 25px;

    color: #f5eee6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3vw, 46px);

    font-weight: 400;

    line-height: 1.05;
}

.faq-hero-side a {
    color: #d1a35c;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-decoration: none;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.faq-links {
    display: grid;

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

    background: #fff;

    border-bottom:
        1px solid #dfd2c2;
}

.faq-links a {
    min-height: 95px;

    padding:
        20px
        30px;

    display: grid;

    grid-template-columns:
        35px
        1fr;

    align-content: center;

    column-gap: 12px;

    border-right:
        1px solid #dfd2c2;

    color: #171512;

    text-decoration: none;

    box-sizing: border-box;
}

.faq-links a:last-child {
    border-right: 0;
}

.faq-links span {
    grid-row:
        1 / span 2;

    color: #ae7d3b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
}

.faq-links strong {
    font-size: 9px;

    letter-spacing: 1.2px;
}

.faq-links small {
    margin-top: 5px;

    color: #776e64;

    font-size: 9px;
}


/* =========================================================
   FAQ SECTIONS
========================================================= */

.faq-section {
    padding:
        90px
        7vw;

    display: grid;

    grid-template-columns:
        .65fr
        1.35fr;

    gap: 85px;

    background: #fff;

    scroll-margin-top: 100px;
}

.services-faq {
    background: #f4eadc;
}

.support-faq {
    background: #fff;
}


/* HEADING */

.faq-section-heading {
    max-width: 470px;
}

.faq-section-heading h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px, 4.5vw, 66px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -2px;
}

.faq-section-heading > p:last-child {
    margin:
        24px
        0
        0;

    color: #665f56;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   ACCORDION
========================================================= */

.faq-list {
    border-top:
        1px solid #cfc1b0;
}

.faq-list details {
    border-bottom:
        1px solid #cfc1b0;
}

.faq-list summary {
    min-height: 75px;

    padding:
        20px
        5px;

    display: grid;

    grid-template-columns:
        45px
        1fr
        35px;

    align-items: center;

    gap: 10px;

    color: #1d1a17;

    cursor: pointer;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height: 1.3;

    list-style: none;

    box-sizing: border-box;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary > span {
    color: #a97838;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 700;
}

.faq-list summary b {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    justify-self: end;

    border:
        1px solid #b98a4b;

    border-radius: 50%;

    color: #9e6e30;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    transition:
        transform .2s ease;
}

.faq-list details[open] summary b {
    transform: rotate(45deg);
}


/* ANSWER */

.faq-answer {
    padding:
        0
        45px
        24px;

    color: #625b52;
}

.faq-answer p {
    max-width: 720px;

    margin: 0;

    font-size: 12px;

    line-height: 1.8;
}

.faq-answer a {
    margin-top: 18px;

    display: inline-block;

    color: #9d6d2f;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none;
}


/* =========================================================
   LICENSE
========================================================= */

.license-section {
    padding:
        95px
        7vw;

    display: grid;

    grid-template-columns:
        .65fr
        1.35fr;

    gap: 80px;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(188,137,63,.12),
            transparent 28%
        ),
        #171512;

    color: #fff;

    scroll-margin-top: 100px;
}

.license-section .eyebrow {
    color: #c89951;
}

.license-heading h2 {
    margin: 0;

    color: #f7f0e8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 5vw, 76px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -2px;
}

.license-heading > p:last-child {
    margin:
        28px
        0
        0;

    color: #bbb2a7;

    font-size: 12px;

    line-height: 1.75;
}


/* LICENSE COLUMNS */

.license-content {
    display: grid;

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

    border-top:
        1px solid #51483c;

    border-bottom:
        1px solid #51483c;
}

.license-column {
    padding:
        28px;

    box-sizing: border-box;
}

.license-column:first-child {
    border-right:
        1px solid #51483c;
}

.license-label {
    margin:
        0
        0
        25px;

    color: #c89951;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.license-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.license-column li {
    padding:
        18px
        0;

    border-top:
        1px solid #39342d;
}

.license-column li:first-child {
    border-top: 0;
}

.license-column strong {
    margin-bottom: 7px;

    display: block;

    color: #f3ede5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 400;
}

.license-column span {
    display: block;

    color: #aaa198;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   LICENSE NOTE
========================================================= */

.license-note {
    padding:
        28px
        7vw;

    display: grid;

    grid-template-columns:
        120px
        1fr;

    gap: 35px;

    align-items: center;

    background: #b68440;

    color: #fff;
}

.license-note > span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.license-note h3 {
    margin:
        0
        0
        6px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 400;
}

.license-note p {
    margin: 0;

    max-width: 900px;

    color: #fff8ee;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.faq-disclaimer {
    padding:
        70px
        8vw;

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items: center;

    gap: 80px;

    background: #eee0cd;
}

.faq-disclaimer h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(40px, 4vw, 60px);

    font-weight: 400;

    line-height: .95;
}

.faq-disclaimer > p {
    margin: 0;

    color: #5b544b;

    font-size: 12px;

    line-height: 1.8;
}


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

.faq-final {
    padding:
        95px
        7vw;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            #f8f1e7,
            #ead5ba,
            #f8f1e7
        );
}

.faq-final h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(55px, 6vw, 88px);

    font-weight: 400;

    line-height: .86;

    letter-spacing: -3px;
}

.faq-final > p:not(.eyebrow) {
    max-width: 500px;

    margin:
        25px
        auto;

    color: #615950;

    font-size: 12px;

    line-height: 1.7;
}

.faq-final > a {
    padding:
        15px
        24px;

    display: inline-flex;

    gap: 18px;

    background: #171512;

    color: #fff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none;
}


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

@media (max-width: 1000px) {

    .faq-hero {
        grid-template-columns:
            1fr
            .55fr;
    }

    .faq-links {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .faq-links a:nth-child(2) {
        border-right: 0;
    }

    .faq-links a:nth-child(1),
    .faq-links a:nth-child(2) {
        border-bottom:
            1px solid #dfd2c2;
    }

    .faq-section,
    .license-section {
        gap: 50px;
    }

}


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

@media (max-width: 760px) {

    .faq-hero {
        grid-template-columns: 1fr;
    }

    .faq-hero-copy {
        padding:
            65px
            7vw;
    }

    .faq-hero h1 {
        font-size:
            clamp(58px, 17vw, 82px);
    }

    .faq-hero-side {
        min-height: 300px;

        padding:
            55px
            7vw;
    }


    /* QUICK LINKS */

    .faq-links {
        grid-template-columns: 1fr;
    }

    .faq-links a,
    .faq-links a:nth-child(2) {
        border-right: 0;

        border-bottom:
            1px solid #dfd2c2;
    }

    .faq-links a:last-child {
        border-bottom: 0;
    }


    /* FAQ */

    .faq-section {
        padding:
            70px
            7vw;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .faq-list summary {
        grid-template-columns:
            30px
            1fr
            32px;

        font-size: 15px;
    }

    .faq-answer {
        padding:
            0
            30px
            22px;
    }


    /* LICENSE */

    .license-section {
        padding:
            70px
            7vw;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .license-content {
        grid-template-columns: 1fr;
    }

    .license-column:first-child {
        border-right: 0;

        border-bottom:
            1px solid #51483c;
    }


    /* NOTE */

    .license-note {
        padding:
            30px
            7vw;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* DISCLAIMER */

    .faq-disclaimer {
        padding:
            65px
            7vw;

        grid-template-columns: 1fr;

        gap: 30px;
    }


    /* FINAL */

    .faq-final {
        padding:
            75px
            7vw;
    }

}