/**
 * ============================================================
 * KRULUXE FAQ PAGE
 * Premium Luxury + Fully Responsive Styling
 *
 * File:
 * /wp-content/themes/kruluxe-child/assets/css/faq.css
 *
 * Page:
 * /faq/
 * ============================================================
 */


/* ============================================================
   01. ROOT VARIABLES
============================================================ */

:root {

    --kr-faq-black: #0b0b0b;
    --kr-faq-charcoal: #171717;
    --kr-faq-charcoal-2: #222222;

    --kr-faq-white: #ffffff;

    --kr-faq-ivory: #faf8f3;
    --kr-faq-ivory-2: #f5f1e8;
    --kr-faq-ivory-3: #eee7da;

    --kr-faq-gold: #b88d3b;
    --kr-faq-gold-light: #d6b36e;
    --kr-faq-gold-dark: #97702a;

    --kr-faq-gold-soft:
        rgba(184, 141, 59, 0.10);

    --kr-faq-green: #536847;

    --kr-faq-text: #171717;
    --kr-faq-muted: #6c6c6c;
    --kr-faq-muted-2: #8b8b8b;

    --kr-faq-border: #e5dfd4;
    --kr-faq-border-dark:
        rgba(255, 255, 255, 0.14);

    --kr-faq-radius: 18px;
    --kr-faq-radius-lg: 28px;

    --kr-faq-max: 1440px;

    --kr-faq-shadow:
        0 18px 50px rgba(0, 0, 0, 0.07);

    --kr-faq-shadow-small:
        0 10px 28px rgba(0, 0, 0, 0.055);

    --kr-faq-transition:
        0.28s ease;
}


/* ============================================================
   02. RESET / BASE
============================================================ */

.kr-faq-main,
.kr-faq-main *,
.kr-faq-main *::before,
.kr-faq-main *::after {
    box-sizing: border-box;
}

.kr-faq-main {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        var(--kr-faq-white);

    color:
        var(--kr-faq-text);
}

.kr-faq-main img {
    display: block;
    max-width: 100%;
    height: auto;
}

.kr-faq-main a {
    color: inherit;
    text-decoration: none;
}

.kr-faq-main button {
    font: inherit;
}

.kr-faq-main h1,
.kr-faq-main h2,
.kr-faq-main h3,
.kr-faq-main h4,
.kr-faq-main p {
    margin-top: 0;
}


/* ============================================================
   03. CONTAINER
============================================================ */

.kr-faq-container {
    width:
        min(
            calc(100% - 64px),
            var(--kr-faq-max)
        );

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   04. TYPOGRAPHY
============================================================ */

.kr-faq-main h1,
.kr-faq-main h2,
.kr-faq-main h3 {
    color:
        var(--kr-faq-text);
}

.kr-faq-main h1,
.kr-faq-main h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

    letter-spacing:
        -0.025em;
}

.kr-faq-main p {
    color:
        var(--kr-faq-muted);

    line-height: 1.8;
}

.kr-faq-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--kr-faq-gold);

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

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* ============================================================
   05. BUTTONS
============================================================ */

.kr-faq-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}

.kr-faq-btn {
    display: inline-flex;

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

    min-height: 52px;

    padding:
        14px 27px;

    border:
        1px solid transparent;

    border-radius:
        2px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--kr-faq-transition),
        color var(--kr-faq-transition),
        border-color var(--kr-faq-transition),
        transform var(--kr-faq-transition),
        box-shadow var(--kr-faq-transition);
}

.kr-faq-btn:hover {
    transform:
        translateY(-2px);
}

.kr-faq-btn-primary {
    background:
        var(--kr-faq-black);

    color:
        var(--kr-faq-white) !important;

    border-color:
        var(--kr-faq-black);
}

.kr-faq-btn-primary:hover {
    background:
        var(--kr-faq-gold);

    border-color:
        var(--kr-faq-gold);

    box-shadow:
        0 12px 26px rgba(184, 141, 59, 0.20);
}

.kr-faq-btn-secondary {
    background:
        transparent;

    color:
        var(--kr-faq-black) !important;

    border-color:
        #cfc7bb;
}

.kr-faq-btn-secondary:hover {
    color:
        var(--kr-faq-gold) !important;

    border-color:
        var(--kr-faq-gold);
}

.kr-faq-btn-gold {
    background:
        var(--kr-faq-gold);

    color:
        var(--kr-faq-black) !important;

    border-color:
        var(--kr-faq-gold);
}

.kr-faq-btn-gold:hover {
    background:
        var(--kr-faq-gold-light);

    border-color:
        var(--kr-faq-gold-light);
}

.kr-faq-btn-outline-light {
    background:
        transparent;

    color:
        var(--kr-faq-white) !important;

    border-color:
        rgba(255, 255, 255, 0.35);
}

.kr-faq-btn-outline-light:hover {
    border-color:
        var(--kr-faq-gold-light);

    color:
        var(--kr-faq-gold-light) !important;
}


/* ============================================================
   06. HERO
============================================================ */

.kr-faq-hero {
    position: relative;

    padding:
        clamp(90px, 10vw, 155px)
        0
        clamp(85px, 9vw, 140px);

    background:
        radial-gradient(
            circle at 82% 16%,
            rgba(184, 141, 59, 0.12),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #faf8f3 0%,
            #ffffff 58%,
            #f4efe4 100%
        );
}

.kr-faq-hero::after {
    content: "";

    position: absolute;

    right: -180px;
    bottom: -230px;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:
        rgba(184, 141, 59, 0.055);

    pointer-events: none;
}

.kr-faq-hero-inner {
    position: relative;
    z-index: 2;

    max-width: 950px;
}

.kr-faq-hero h1 {
    max-width: 900px;

    margin-bottom: 28px;

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

    line-height: 0.98;
}

.kr-faq-hero p {
    max-width: 720px;

    margin-bottom: 0;

    font-size:
        clamp(
            17px,
            1.5vw,
            21px
        );

    line-height: 1.8;
}


/* ============================================================
   07. SUPPORT STRIP
============================================================ */

.kr-faq-support-strip {
    background:
        var(--kr-faq-white);
}

.kr-faq-support-grid {
    display: grid;

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

    border-top:
        1px solid var(--kr-faq-border);

    border-bottom:
        1px solid var(--kr-faq-border);
}

.kr-faq-support-grid > div {
    min-height: 150px;

    padding:
        34px 28px;

    border-right:
        1px solid var(--kr-faq-border);
}

.kr-faq-support-grid > div:last-child {
    border-right: 0;
}

.kr-faq-support-grid span {
    display: block;

    margin-bottom: 24px;

    color:
        var(--kr-faq-gold);

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

    letter-spacing: 0.14em;
}

.kr-faq-support-grid strong {
    display: block;

    margin-bottom: 8px;

    color:
        var(--kr-faq-text);

    font-size: 16px;
}

.kr-faq-support-grid small {
    display: block;

    color:
        var(--kr-faq-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* ============================================================
   08. INTRO
============================================================ */

.kr-faq-intro {
    padding:
        clamp(80px, 9vw, 135px)
        0
        clamp(60px, 7vw, 95px);
}

.kr-faq-intro-grid {
    display: grid;

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

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

    align-items: end;
}

.kr-faq-intro h2 {
    max-width: 700px;

    margin-bottom: 0;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    line-height: 1;
}

.kr-faq-intro p {
    margin-bottom: 0;

    max-width: 620px;

    font-size: 16px;
}


/* ============================================================
   09. FAQ NAVIGATION
============================================================ */

.kr-faq-navigation {
    padding-bottom:
        clamp(70px, 8vw, 110px);
}

.kr-faq-category-nav {
    display: flex;
    flex-wrap: wrap;

    gap:
        10px;

    padding:
        20px;

    border:
        1px solid var(--kr-faq-border);

    border-radius:
        var(--kr-faq-radius);

    background:
        var(--kr-faq-ivory);
}

.kr-faq-category-nav a {
    display: inline-flex;

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

    min-height: 44px;

    padding:
        10px 18px;

    border:
        1px solid var(--kr-faq-border);

    border-radius:
        999px;

    background:
        var(--kr-faq-white);

    color:
        var(--kr-faq-text);

    font-size: 13px;
    font-weight: 600;

    transition:
        color var(--kr-faq-transition),
        border-color var(--kr-faq-transition),
        background var(--kr-faq-transition),
        transform var(--kr-faq-transition);
}

.kr-faq-category-nav a:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--kr-faq-gold);

    color:
        var(--kr-faq-gold);
}


/* ============================================================
   10. FAQ SECTIONS
============================================================ */

.kr-faq-section {
    padding:
        clamp(85px, 9vw, 135px)
        0;

    scroll-margin-top: 140px;
}

.kr-faq-section-alt {
    background:
        var(--kr-faq-ivory);
}


/* ============================================================
   11. SECTION HEADING
============================================================ */

.kr-faq-section-heading {
    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    margin-bottom:
        clamp(
            45px,
            6vw,
            75px
        );
}

.kr-faq-section-number {
    display: inline-flex;

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

    width: 58px;
    height: 58px;

    border:
        1px solid var(--kr-faq-border);

    border-radius: 50%;

    color:
        var(--kr-faq-gold);

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

    letter-spacing: 0.12em;
}

.kr-faq-section-heading h2 {
    max-width: 760px;

    margin-bottom: 0;

    font-size:
        clamp(
            40px,
            4.8vw,
            66px
        );

    line-height: 1.02;
}


/* ============================================================
   12. FAQ ACCORDION LIST
============================================================ */

.kr-faq-list {
    border-top:
        1px solid var(--kr-faq-border);
}

.kr-faq-item {
    border-bottom:
        1px solid var(--kr-faq-border);

    background:
        transparent;
}

.kr-faq-question {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        46px;

    gap: 28px;

    align-items: center;

    padding:
        30px
        0;

    border: 0;

    background:
        transparent;

    color:
        var(--kr-faq-text);

    text-align: left;

    cursor: pointer;
}

.kr-faq-question > span:first-child {
    display: block;

    max-width: 950px;

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

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    font-weight: 400;

    line-height: 1.25;
}

.kr-faq-question:hover
> span:first-child {
    color:
        var(--kr-faq-green);
}


/* ============================================================
   13. ACCORDION ICON
============================================================ */

.kr-faq-icon {
    position: relative;

    display: inline-flex;

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

    width: 42px;
    height: 42px;

    border:
        1px solid var(--kr-faq-border);

    border-radius: 50%;

    transition:
        border-color var(--kr-faq-transition),
        background var(--kr-faq-transition),
        transform var(--kr-faq-transition);
}

.kr-faq-icon::before,
.kr-faq-icon::after {
    content: "";

    position: absolute;

    background:
        var(--kr-faq-text);

    transition:
        transform var(--kr-faq-transition),
        opacity var(--kr-faq-transition),
        background var(--kr-faq-transition);
}

.kr-faq-icon::before {
    width: 13px;
    height: 1px;
}

.kr-faq-icon::after {
    width: 1px;
    height: 13px;
}

.kr-faq-question:hover
.kr-faq-icon {
    border-color:
        var(--kr-faq-gold);
}

.kr-faq-question:hover
.kr-faq-icon::before,
.kr-faq-question:hover
.kr-faq-icon::after {
    background:
        var(--kr-faq-gold);
}

.kr-faq-question[aria-expanded="true"]
.kr-faq-icon {
    background:
        var(--kr-faq-black);

    border-color:
        var(--kr-faq-black);

    transform:
        rotate(180deg);
}

.kr-faq-question[aria-expanded="true"]
.kr-faq-icon::before {
    background:
        var(--kr-faq-white);
}

.kr-faq-question[aria-expanded="true"]
.kr-faq-icon::after {
    opacity: 0;

    transform:
        rotate(90deg);
}


/* ============================================================
   14. FAQ ANSWER
============================================================ */

.kr-faq-answer {
    display: grid;

    grid-template-rows:
        0fr;

    opacity: 0;

    transition:
        grid-template-rows 0.35s ease,
        opacity 0.28s ease;
}

.kr-faq-answer > div {
    overflow: hidden;
}

.kr-faq-answer p {
    max-width: 900px;

    margin:
        0
        0
        32px;

    padding-right: 75px;

    font-size: 16px;

    line-height: 1.85;
}

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

    opacity: 1;
}


/* ============================================================
   15. SECTION LINKS
============================================================ */

.kr-faq-section-links {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 40px;
}

.kr-faq-section-links a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px 20px;

    border:
        1px solid var(--kr-faq-border);

    background:
        var(--kr-faq-white);

    color:
        var(--kr-faq-text);

    font-size: 14px;
    font-weight: 600;

    transition:
        border-color var(--kr-faq-transition),
        color var(--kr-faq-transition),
        background var(--kr-faq-transition),
        transform var(--kr-faq-transition);
}

.kr-faq-section-links a:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--kr-faq-gold);

    color:
        var(--kr-faq-gold);
}

.kr-faq-section-links span {
    transition:
        transform var(--kr-faq-transition);
}

.kr-faq-section-links a:hover span {
    transform:
        translateX(4px);
}


/* ============================================================
   16. HELPFUL LINKS SECTION
============================================================ */

.kr-faq-links-section {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--kr-faq-ivory) 100%
        );
}

.kr-faq-links-heading {
    max-width: 800px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            75px
        );
}

.kr-faq-links-heading h2 {
    margin-bottom: 0;

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1;
}

.kr-faq-links-grid {
    display: grid;

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

    gap: 18px;
}

.kr-faq-links-grid a {
    position: relative;

    min-height: 240px;

    display: flex;
    flex-direction: column;

    padding:
        32px;

    border:
        1px solid var(--kr-faq-border);

    border-radius:
        var(--kr-faq-radius);

    background:
        var(--kr-faq-white);

    transition:
        transform var(--kr-faq-transition),
        border-color var(--kr-faq-transition),
        box-shadow var(--kr-faq-transition);
}

.kr-faq-links-grid a:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(184, 141, 59, 0.45);

    box-shadow:
        var(--kr-faq-shadow-small);
}

.kr-faq-links-grid span {
    display: block;

    margin-bottom: auto;

    color:
        var(--kr-faq-gold);

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

    letter-spacing: 0.14em;
}

.kr-faq-links-grid strong {
    display: block;

    margin-top: 55px;
    margin-bottom: 12px;

    color:
        var(--kr-faq-green);

    font-size:
        clamp(
            21px,
            1.8vw,
            28px
        );

    font-weight: 400;
}

.kr-faq-links-grid small {
    display: block;

    color:
        var(--kr-faq-muted);

    font-size: 14px;

    line-height: 1.65;
}


/* ============================================================
   17. CONTACT CTA
============================================================ */

.kr-faq-contact {
    padding:
        clamp(90px, 9vw, 145px)
        0;
}

.kr-faq-contact-card {
    display: grid;

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

    gap: 60px;

    align-items: center;

    padding:
        clamp(
            42px,
            5vw,
            72px
        );

    border-radius:
        var(--kr-faq-radius-lg);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(184, 141, 59, 0.18),
            transparent 32%
        ),
        var(--kr-faq-charcoal);

    box-shadow:
        var(--kr-faq-shadow);

    color:
        var(--kr-faq-white);
}

.kr-faq-contact-card
.kr-faq-eyebrow {
    color:
        var(--kr-faq-gold-light);
}

.kr-faq-contact-card h2 {
    max-width: 680px;

    margin-bottom: 18px;

    color:
        var(--kr-faq-white);

    font-size:
        clamp(
            42px,
            4.5vw,
            64px
        );

    line-height: 1;
}

.kr-faq-contact-card p {
    max-width: 650px;

    margin-bottom: 0;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 16px;
}

.kr-faq-contact-actions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

    min-width: 220px;
}


/* ============================================================
   18. FINAL CTA
============================================================ */

.kr-faq-final {
    padding:
        clamp(85px, 9vw, 135px)
        0;

    background:
        linear-gradient(
            135deg,
            var(--kr-faq-ivory-2),
            #ffffff
        );
}

.kr-faq-final-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(
            45px,
            8vw,
            100px
        );

    align-items: center;
}

.kr-faq-final h2 {
    max-width: 780px;

    margin-bottom: 0;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    line-height: 1;
}

.kr-faq-final-links {
    border-top:
        1px solid var(--kr-faq-border);
}

.kr-faq-final-links a {
    display: flex;

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

    gap: 20px;

    padding:
        19px
        0;

    border-bottom:
        1px solid var(--kr-faq-border);

    color:
        var(--kr-faq-text);

    font-size: 15px;
    font-weight: 600;

    transition:
        color var(--kr-faq-transition),
        padding-left var(--kr-faq-transition);
}

.kr-faq-final-links a:hover {
    color:
        var(--kr-faq-gold);

    padding-left:
        5px;
}

.kr-faq-final-links span {
    transition:
        transform var(--kr-faq-transition);
}

.kr-faq-final-links a:hover span {
    transform:
        translateX(5px);
}


/* ============================================================
   19. JS REVEAL SUPPORT
============================================================ */

.kr-faq-reveal {
    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

.kr-faq-reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   20. FOCUS / ACCESSIBILITY
============================================================ */

.kr-faq-main a:focus-visible,
.kr-faq-main button:focus-visible {
    outline:
        2px solid var(--kr-faq-gold);

    outline-offset:
        4px;
}

.kr-faq-question:focus-visible {
    border-radius:
        4px;
}


/* ============================================================
   21. WORDPRESS / ASTRA SAFETY
============================================================ */

body.page-faq
.site-content,
body.page-faq
.content-area,
body.page-faq
.site-main,
body.page-faq
.ast-container {
    max-width:
        none !important;
}

body.page-faq
.ast-container {
    padding-left:
        0 !important;

    padding-right:
        0 !important;
}

body.page-faq
.entry-content {
    margin:
        0 !important;

    padding:
        0 !important;
}

body.page-faq
.entry-header {
    display:
        none !important;
}

.kr-faq-main
.entry-content,
.kr-faq-main
.wp-block-group,
.kr-faq-main
.elementor {
    max-width:
        none;
}


/* ============================================================
   22. LARGE DESKTOP
============================================================ */

@media (min-width: 1600px) {

    .kr-faq-container {
        width:
            min(
                calc(100% - 120px),
                var(--kr-faq-max)
            );
    }

}


/* ============================================================
   23. TABLET LANDSCAPE
============================================================ */

@media (max-width: 1100px) {

    .kr-faq-support-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .kr-faq-support-grid > div:nth-child(2) {
        border-right: 0;
    }

    .kr-faq-support-grid > div:nth-child(-n + 2) {
        border-bottom:
            1px solid var(--kr-faq-border);
    }

    .kr-faq-intro-grid {
        grid-template-columns:
            1fr;

        align-items: start;
    }

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

    .kr-faq-contact-card {
        grid-template-columns:
            1fr;

        gap: 40px;
    }

    .kr-faq-contact-actions {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        min-width: 0;
    }

    .kr-faq-final-inner {
        grid-template-columns:
            1fr;

        gap: 45px;
    }

}


/* ============================================================
   24. TABLET
============================================================ */

@media (max-width: 900px) {

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

    .kr-faq-section-heading {
        grid-template-columns:
            62px
            minmax(0, 1fr);

        gap: 20px;
    }

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

        gap: 20px;
    }

    .kr-faq-answer p {
        padding-right: 55px;
    }

    .kr-faq-contact-actions {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   25. MOBILE
============================================================ */

@media (max-width: 767px) {

    .kr-faq-container {
        width:
            calc(100% - 32px);
    }


    /* HERO */

    .kr-faq-hero {
        padding:
            78px
            0
            82px;
    }

    .kr-faq-hero h1 {
        font-size:
            clamp(
                46px,
                13vw,
                64px
            );

        line-height: 0.98;
    }

    .kr-faq-hero p {
        font-size: 17px;
    }

    .kr-faq-actions {
        display: grid;

        grid-template-columns:
            1fr;

        width: 100%;

        gap: 12px;
    }

    .kr-faq-btn {
        width: 100%;

        min-height: 56px;
    }


    /* SUPPORT */

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

    .kr-faq-support-grid > div,
    .kr-faq-support-grid > div:nth-child(2) {
        border-right: 0;

        border-bottom:
            1px solid var(--kr-faq-border);
    }

    .kr-faq-support-grid > div:last-child {
        border-bottom: 0;
    }

    .kr-faq-support-grid > div {
        min-height: 0;

        padding:
            28px
            6px;
    }


    /* INTRO */

    .kr-faq-intro {
        padding:
            72px
            0
            50px;
    }

    .kr-faq-intro-grid {
        gap: 28px;
    }

    .kr-faq-intro h2 {
        font-size:
            clamp(
                40px,
                11vw,
                56px
            );
    }


    /* NAV */

    .kr-faq-navigation {
        padding-bottom:
            65px;
    }

    .kr-faq-category-nav {
        padding:
            14px;

        gap: 8px;
    }

    .kr-faq-category-nav a {
        min-height: 40px;

        padding:
            9px 14px;

        font-size: 12px;
    }


    /* SECTION */

    .kr-faq-section {
        padding:
            72px
            0;

        scroll-margin-top:
            100px;
    }

    .kr-faq-section-heading {
        grid-template-columns:
            1fr;

        gap: 20px;

        margin-bottom:
            40px;
    }

    .kr-faq-section-number {
        width: 48px;
        height: 48px;
    }

    .kr-faq-section-heading h2 {
        font-size:
            clamp(
                40px,
                11vw,
                55px
            );
    }


    /* FAQ */

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

        gap: 16px;

        padding:
            24px
            0;
    }

    .kr-faq-question > span:first-child {
        font-size:
            clamp(
                20px,
                5.5vw,
                25px
            );
    }

    .kr-faq-icon {
        width: 36px;
        height: 36px;
    }

    .kr-faq-answer p {
        margin-bottom: 26px;

        padding-right: 0;

        font-size: 15px;
    }


    /* LINKS */

    .kr-faq-section-links {
        display: grid;

        grid-template-columns:
            1fr;

        width: 100%;
    }

    .kr-faq-section-links a {
        width: 100%;

        justify-content:
            space-between;
    }


    /* HELP LINKS */

    .kr-faq-links-section {
        padding:
            72px
            0;
    }

    .kr-faq-links-heading h2 {
        font-size:
            clamp(
                40px,
                11vw,
                56px
            );
    }

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

    .kr-faq-links-grid a {
        min-height: 210px;

        padding:
            28px
            24px;
    }


    /* CONTACT */

    .kr-faq-contact {
        padding:
            72px
            0;
    }

    .kr-faq-contact-card {
        gap: 32px;

        padding:
            34px
            24px;

        border-radius:
            20px;
    }

    .kr-faq-contact-card h2 {
        font-size:
            clamp(
                40px,
                11vw,
                54px
            );
    }


    /* FINAL */

    .kr-faq-final {
        padding:
            72px
            0;
    }

    .kr-faq-final h2 {
        font-size:
            clamp(
                41px,
                11vw,
                56px
            );
    }

}


/* ============================================================
   26. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .kr-faq-container {
        width:
            calc(100% - 28px);
    }

    .kr-faq-eyebrow {
        font-size: 11px;

        letter-spacing:
            0.15em;
    }

    .kr-faq-hero {
        padding:
            66px
            0
            70px;
    }

    .kr-faq-hero h1 {
        font-size: 47px;
    }

    .kr-faq-category-nav {
        border-radius:
            14px;
    }

    .kr-faq-section-heading h2 {
        font-size:
            42px;
    }

    .kr-faq-question {
        gap: 12px;
    }

    .kr-faq-question > span:first-child {
        font-size: 21px;
    }

    .kr-faq-links-grid a {
        border-radius:
            15px;
    }

}


/* ============================================================
   27. HOVER-LESS DEVICES
============================================================ */

@media (hover: none) {

    .kr-faq-btn:hover,
    .kr-faq-category-nav a:hover,
    .kr-faq-section-links a:hover,
    .kr-faq-links-grid a:hover {
        transform:
            none;
    }

}


/* ============================================================
   28. PRINT
============================================================ */

@media print {

    .kr-faq-main {
        background:
            #ffffff !important;

        color:
            #000000 !important;
    }

    .kr-faq-navigation,
    .kr-faq-actions,
    .kr-faq-section-links,
    .kr-faq-contact,
    .kr-faq-final {
        display:
            none !important;
    }

    .kr-faq-section,
    .kr-faq-section-alt,
    .kr-faq-links-section {
        background:
            #ffffff !important;
    }

    .kr-faq-answer {
        display:
            block !important;

        opacity:
            1 !important;

        grid-template-rows:
            1fr !important;
    }

    .kr-faq-answer > div {
        overflow:
            visible !important;
    }

    .kr-faq-question {
        color:
            #000000 !important;
    }

    .kr-faq-icon {
        display:
            none !important;
    }

}


/* ============================================================
   29. REDUCED MOTION
============================================================ */

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

    .kr-faq-main *,
    .kr-faq-main *::before,
    .kr-faq-main *::after {
        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }

    .kr-faq-reveal {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}


/* ============================================================
   END OF KRULUXE FAQ.CSS
============================================================ */