/* #region FAQ SECTION */

    .faq-section {
        padding:
            clamp(60px, 6vw, 85px)
            0
            clamp(70px, 7vw, 95px);

        background: var(--cream);

        color: var(--burgundy);
    }


    .faq-inner {
        width: min(
            1050px,
            calc(100% - clamp(40px, 7vw, 100px))
        );

        margin: 0 auto;
    }


    /* =========================
    HEADING
    ========================= */

    .faq-heading {
        margin-bottom: clamp(35px, 4vw, 50px);

        text-align: center;
    }


    .faq-eyebrow {
        margin: 0 0 6px;

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

        font-size: clamp(0.7rem, 0.9vw, 0.85rem);
        font-weight: 500;

        letter-spacing: 0.28em;

        text-transform: uppercase;
    }


    .faq-heading h2 {
        margin: 0;

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

        font-size: clamp(3rem, 5vw, 5rem);
        font-weight: 500;

        line-height: 0.95;

        letter-spacing: 0.18em;

        text-transform: uppercase;
    }


    .faq-title-divider {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 12px;

        margin: 14px 0 16px;
    }


    .faq-title-divider span {
        width: clamp(70px, 8vw, 110px);
        height: 1px;

        background: rgba(133, 77, 80, 0.4);
    }


    .faq-title-divider img {
        width: 28px;
        height: auto;
    }


    .faq-intro {
        margin: 0 auto;

        max-width: 720px;

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

        line-height: 1.5;
    }


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

    .faq-list {
        border-top: 1px solid rgba(133, 77, 80, 0.35);
    }


    .faq-item {
        border-bottom: 1px solid rgba(133, 77, 80, 0.35);

        transition:
            background var(--transition);
    }


    .faq-item.is-open {
        background: rgba(216, 166, 171, 0.12);
    }


    /* =========================
    QUESTION
    ========================= */

    .faq-question {
        display: grid;

        grid-template-columns: 1fr auto;

        align-items: center;

        width: 100%;

        gap: clamp(20px, 3vw, 40px);

        padding:
            clamp(18px, 2vw, 24px)
            clamp(12px, 2vw, 22px);

        border: 0;

        background: transparent;

        color: var(--burgundy);

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

        font-size: clamp(1.15rem, 1.8vw, 1.45rem);
        font-weight: 500;

        letter-spacing: 0.16em;

        text-align: left;
        text-transform: uppercase;

        cursor: pointer;
    }


    /* =========================
    ICON
    ========================= */

    .faq-icon {
        color: var(--rose);

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

        font-size: clamp(1.4rem, 2vw, 1.8rem);
        font-weight: 300;

        line-height: 1;
    }


    /* =========================
    ANSWER
    ========================= */

    .faq-answer {
        display: grid;

        grid-template-rows: 0fr;

        opacity: 0;

        transition:
            grid-template-rows 0.4s ease,
            opacity 0.3s ease;
    }


    .faq-answer.is-open {
        grid-template-rows: 1fr;

        opacity: 1;
    }


    .faq-answer-inner {
        overflow: hidden;
    }


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

        margin: 0;

        padding:
            0
            clamp(55px, 6vw, 85px)
            clamp(24px, 3vw, 32px);

        color: rgba(51, 17, 18, 0.82);

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

        line-height: 1.65;
    }

/* #endregion */

/* #region FAQ RESPONSIVE */


    /* =========================================================
    1025PX AND BELOW
    ========================================================= */

    @media (max-width: 1025px) {

        .faq-section {
            padding:
                54px
                0
                66px;
        }


        .faq-inner {
            width: calc(100% - 56px);
        }


        /* =========================
        HEADING
        ========================= */

        .faq-heading {
            margin-bottom: 40px;
        }


        .faq-eyebrow {
            font-size: 0.76rem;

            letter-spacing: 0.24em;
        }


        .faq-heading h2 {
            font-size:
                clamp(
                    2.7rem,
                    5vw,
                    4.2rem
                );

            letter-spacing: 0.15em;
        }


        .faq-title-divider {
            gap: 10px;

            margin:
                12px
                0
                14px;
        }


        .faq-title-divider span {
            width: 82px;
        }


        .faq-title-divider img {
            width: 26px;
        }


        .faq-intro {
            max-width: 660px;

            font-size: 0.96rem;
        }


        /* =========================
        QUESTIONS
        ========================= */

        .faq-question {
            gap: 28px;

            padding:
                20px
                16px;

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

            letter-spacing: 0.14em;
        }


        .faq-icon {
            font-size: 1.55rem;
        }


        /* =========================
        ANSWERS
        ========================= */

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

            padding:
                0
                60px
                26px;

            font-size: 0.94rem;

            line-height: 1.6;
        }

    }


    /* =========================================================
    768PX AND BELOW
    ========================================================= */

    @media (max-width: 768px) {

        .faq-section {
            padding:
                46px
                0
                56px;
        }


        .faq-inner {
            width: calc(100% - 40px);
        }


        /* =========================
        HEADING
        ========================= */

        .faq-heading {
            margin-bottom: 34px;
        }


        .faq-eyebrow {
            font-size: 0.7rem;

            letter-spacing: 0.2em;
        }


        .faq-heading h2 {
            font-size:
                clamp(
                    2.35rem,
                    7vw,
                    3.4rem
                );

            letter-spacing: 0.12em;
        }


        .faq-title-divider span {
            width: 64px;
        }


        .faq-title-divider img {
            width: 25px;
        }


        .faq-intro {
            max-width: 540px;

            font-size: 0.9rem;

            line-height: 1.5;
        }


        /* =========================
        QUESTIONS
        ========================= */

        .faq-question {
            gap: 20px;

            padding:
                18px
                12px;

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

            line-height: 1.25;

            letter-spacing: 0.11em;
        }


        .faq-icon {
            font-size: 1.45rem;
        }


        /* =========================
        ANSWERS
        ========================= */

        .faq-answer p {
            padding:
                0
                42px
                24px;

            font-size: 0.9rem;

            line-height: 1.6;
        }

    }


    /* =========================================================
    480PX AND BELOW
    ========================================================= */

    @media (max-width: 480px) {

        .faq-section {
            padding:
                38px
                0
                46px;
        }


        .faq-inner {
            width: calc(100% - 30px);
        }


        /* =========================
        HEADING
        ========================= */

        .faq-heading {
            margin-bottom: 28px;
        }


        .faq-eyebrow {
            margin-bottom: 5px;

            font-size: 0.64rem;

            letter-spacing: 0.17em;
        }


        .faq-heading h2 {
            font-size:
                clamp(
                    2rem,
                    10vw,
                    2.8rem
                );

            line-height: 1;

            letter-spacing: 0.1em;
        }


        .faq-title-divider {
            gap: 8px;

            margin:
                10px
                0
                12px;
        }


        .faq-title-divider span {
            width: 48px;
        }


        .faq-title-divider img {
            width: 23px;
        }


        .faq-intro {
            max-width: 330px;

            font-size: 0.84rem;

            line-height: 1.5;
        }


        /* =========================
        QUESTIONS
        ========================= */

        .faq-question {
            grid-template-columns:
                minmax(0, 1fr)
                auto;

            gap: 14px;

            padding:
                16px
                8px;

            font-size: 0.96rem;

            line-height: 1.25;

            letter-spacing: 0.08em;
        }


        .faq-icon {
            font-size: 1.35rem;
        }


        /* =========================
        ANSWERS
        ========================= */

        .faq-answer p {
            max-width: 100%;

            padding:
                0
                18px
                20px;

            font-size: 0.84rem;

            line-height: 1.55;
        }

    }


/* #endregion FAQ RESPONSIVE */

/* #region DIVIDER TEMPLATE */
/* #endregion */