.page-faq{
    --faq-side-width: 260px;
    background: var(--paper);
    color: var(--ink);
}
.page-faq .container{ max-width:var(--width-container); margin-inline:auto; padding-inline:20px; }
.page-faq .faq-hero{
    position:relative;
    overflow:hidden;
    padding:40px 0 56px;
    background:linear-gradient(135deg, var(--deep-purple) 0%, var(--deep-purple-light) 78%, rgba(255,107,53,.9) 100%);
    color:var(--white);
}
.page-faq .faq-hero::before{
    content:"";
    position:absolute;
    top:-90px;
    right:-80px;
    width:240px;
    height:240px;
    background:repeating-linear-gradient(45deg, transparent 0 12px, rgba(212,175,55,.3) 12px 14px);
    transform:rotate(16deg);
}
.page-faq .faq-hero::after{
    content:"";
    position:absolute;
    left:12%;
    bottom:-120px;
    width:200px;
    height:200px;
    border:28px solid rgba(255,255,255,.08);
    transform:rotate(-24deg);
}
.page-faq .faq-hero-inner{ position:relative; z-index:1; }
.page-faq .faq-hero .breadcrumb{ margin-bottom:22px; }
.page-faq .faq-hero .breadcrumb ol{ gap:6px; padding:0; margin:0; }
.page-faq .faq-hero .breadcrumb a{ color:var(--gold-light); text-decoration:none; }
.page-faq .faq-hero .breadcrumb a:hover{ color:var(--gold); }
.page-faq .hero-mark{
    display:inline-block;
    vertical-align:middle;
    margin-left:10px;
    font-family:var(--font-body);
    font-size:14px;
    letter-spacing:.18em;
    color:var(--deep-purple);
    background:var(--gold);
    padding:5px 12px;
}
.page-faq .faq-hero h1{
    font-family:var(--font-display);
    font-size:44px;
    line-height:1.08;
    margin:0 0 16px;
    color:#fff;
}
.page-faq .faq-hero-lead{
    max-width:560px;
    font-size:16px;
    line-height:1.7;
    opacity:.92;
    margin-bottom:22px;
}
.page-faq .faq-hero-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
.page-faq .faq-hero-media{ margin:0; }
.page-faq .faq-hero-media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:800 / 400;
    object-fit:cover;
    max-width:760px;
    margin-left:auto;
    box-shadow:12px 12px 0 var(--gold), 16px 16px 0 var(--shadow);
}
.page-faq .faq-hero-media figcaption{
    margin-top:10px;
    font-size:13px;
    text-align:right;
    color:var(--gold-light);
}
.page-faq .faq-search-row{ display:flex; flex-wrap:wrap; gap:10px; }
.page-faq .faq-search-query{
    flex:1 1 240px;
    border:2px solid var(--border-gold);
    background:rgba(255,255,255,.96);
    color:var(--ink);
    padding:12px 14px;
    font-family:var(--font-body);
    font-size:16px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.page-faq .faq-search-query:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(212,175,55,.3);
}
.page-faq .faq-search-btn{ white-space:nowrap; text-decoration:none; }
.page-faq .faq-search-hint{ font-size:13px; margin:10px 0 14px; opacity:.75; line-height:1.5; }
.page-faq .faq-search-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.page-faq .faq-search-tag{
    padding:6px 12px;
    border:1px solid var(--gold-light);
    color:var(--gold-light);
    text-decoration:none;
    font-size:13px;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.page-faq .faq-search-tag:hover{
    background:var(--gold);
    color:var(--deep-purple);
    border-color:var(--gold);
}
.page-faq .faq-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}
.page-faq .faq-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    padding-top:36px;
    padding-bottom:60px;
}
.page-faq .faq-side-sticky{
    background:var(--deep-purple);
    color:var(--white);
    padding:24px 20px 26px;
}
.page-faq .faq-side-label{
    margin:0 0 14px;
    font-family:var(--font-body);
    font-size:13px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
}
.page-faq .faq-cat-list{
    list-style:none;
    margin:0 0 22px;
    padding:0 0 4px;
    display:flex;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.page-faq .faq-cat-list a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    background:rgba(255,255,255,.06);
    color:var(--white);
    text-decoration:none;
    border-left:none;
    border-bottom:3px solid transparent;
    white-space:nowrap;
    transition:background .2s ease, border-color .2s ease;
}
.page-faq .faq-cat-list a:hover{
    background:rgba(212,175,55,.16);
    border-bottom-color:var(--orange);
}
.page-faq .faq-cat-count{
    font-size:12px;
    background:var(--deep-purple-light);
    color:var(--gold-light);
    padding:2px 8px;
}
.page-faq .faq-side-btn{
    display:block;
    text-align:center;
    margin-bottom:14px;
    border-color:var(--gold);
    color:var(--gold);
    text-decoration:none;
}
.page-faq .faq-side-btn:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--deep-purple);
}
.page-faq .faq-side-note{
    margin:0;
    font-size:13px;
    color:var(--gold-light);
    opacity:.85;
    line-height:1.6;
}
.page-faq .faq-main{ min-width:0; }
.page-faq .faq-index{
    background:var(--gold-light);
    border:1px solid var(--border-gold);
    padding:18px 18px 16px;
    margin-bottom:32px;
    scroll-margin-top:28px;
}
.page-faq .faq-index-title{
    font-family:var(--font-display);
    font-size:18px;
    margin:0 0 12px;
    color:var(--deep-purple);
}
.page-faq .faq-index-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px 20px;
}
.page-faq .faq-index-col h3{
    font-size:14px;
    color:var(--deep-purple);
    margin:0 0 6px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.page-faq .faq-index-col ul{ margin:0; padding-left:18px; }
.page-faq .faq-index-col li{ margin:4px 0; font-size:13px; line-height:1.45; }
.page-faq .faq-index-col a{
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease, color .2s ease;
}
.page-faq .faq-index-col a:hover{
    color:var(--deep-purple);
    border-bottom-color:var(--deep-purple);
}
.page-faq .faq-group{ margin-bottom:36px; scroll-margin-top:28px; }
.page-faq .faq-group-title{
    font-family:var(--font-display);
    font-size:26px;
    line-height:1.2;
    color:var(--deep-purple);
    border-left:6px solid var(--orange);
    padding-left:14px;
    margin:0 0 14px;
}
.page-faq .faq-item{
    background:#fff;
    border:1px solid var(--border-gold);
    margin-bottom:12px;
    box-shadow:0 1px 0 rgba(15,15,15,.06);
    scroll-margin-top:28px;
}
.page-faq .faq-item summary{
    list-style:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 16px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    line-height:1.45;
    color:var(--deep-purple);
    transition:background .2s ease;
}
.page-faq .faq-item summary::-webkit-details-marker{ display:none; }
.page-faq .faq-item summary::before{
    content:"+";
    flex:0 0 26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--deep-purple);
    color:var(--gold);
    font-size:18px;
    font-weight:700;
    transition:transform .25s ease, background .25s ease, color .25s ease;
}
.page-faq .faq-item summary:hover{ background:var(--paper); }
.page-faq .faq-item details[open] summary{ background:var(--paper); }
.page-faq .faq-item details[open] summary::before{
    background:var(--orange);
    color:#fff;
    transform:rotate(45deg);
}
.page-faq .faq-answer{
    max-height:0;
    opacity:0;
    overflow:hidden;
    padding:0 18px;
    transition:max-height .4s ease, opacity .3s ease, padding .3s ease;
}
.page-faq .faq-item details[open] .faq-answer{
    max-height:900px;
    opacity:1;
    padding:4px 18px 18px;
}
.page-faq .faq-answer p{
    margin:0 0 10px;
    font-size:15px;
    line-height:1.75;
    color:var(--ink);
}
.page-faq .faq-answer ol,
.page-faq .faq-answer ul{
    margin:0 0 10px;
    padding-left:20px;
}
.page-faq .faq-answer li{
    margin-bottom:6px;
    font-size:15px;
    line-height:1.7;
}
.page-faq .faq-answer a{
    color:var(--deep-purple);
    text-decoration:underline;
    text-underline-offset:3px;
}
.page-faq .faq-contact{
    display:flex;
    align-items:center;
    gap:20px;
    background:var(--deep-purple);
    color:var(--white);
    padding:26px 24px;
    margin-top:8px;
    scroll-margin-top:28px;
}
.page-faq .faq-contact img{
    width:120px;
    height:120px;
    object-fit:cover;
    border:3px solid var(--gold);
    flex:0 0 auto;
}
.page-faq .faq-contact-content h2{
    font-family:var(--font-display);
    font-size:24px;
    margin:0 0 10px;
    color:var(--gold);
}
.page-faq .faq-contact-content p{
    margin:0 0 14px;
    font-size:15px;
    line-height:1.7;
    opacity:.92;
}
.page-faq .faq-contact-content .btn{
    text-decoration:none;
    display:inline-block;
}
@media (min-width: 640px){
    .page-faq .faq-hero h1{ font-size:56px; }
    .page-faq .faq-index-grid{ grid-template-columns:repeat(4, 1fr); }
    .page-faq .faq-contact img{ width:160px; height:160px; }
}
@media (min-width: 960px){
    .page-faq .faq-hero{ padding:56px 0 72px; }
    .page-faq .faq-hero-grid{
        grid-template-columns:1.1fr .9fr;
        align-items:center;
    }
    .page-faq .faq-layout{
        grid-template-columns:var(--faq-side-width) 1fr;
        gap:40px;
        padding-top:44px;
    }
    .page-faq .faq-side-sticky{ position:sticky; top:32px; }
    .page-faq .faq-cat-list{
        flex-direction:column;
        overflow:visible;
        padding-bottom:0;
    }
    .page-faq .faq-cat-list a{
        border-left:3px solid transparent;
        border-bottom:none;
        white-space:normal;
    }
    .page-faq .faq-cat-list a:hover{
        border-left-color:var(--orange);
        border-bottom:none;
    }
    .page-faq .faq-answer ol,
    .page-faq .faq-answer ul{ padding-left:22px; }
    .page-faq .faq-contact img{ width:200px; height:200px; }
}