/* ===== HERO NAV — colors for FAQ page ===== */
.faq-hero-wrap .hero-nav{
    color:var(--color-text);
}
.faq-hero-wrap .corner a{
    opacity:.85;
}
.faq-hero-wrap .corner a:hover{
    opacity:1;
}
.faq-hero-wrap .dropdown-btn{
    color:var(--color-text);
}
.faq-hero-wrap .dropdown-btn:hover{
    border-color:currentColor;
    opacity:1;
}
/*.faq-hero-wrap .dropdown-menu{
    background:var(--color-bg-alt);
    border:1px solid var(--color-border);
}*/
.faq-hero-wrap .dropdown-menu a,
.faq-hero-wrap .dropdown-menu .menu-item a{
    color:var(--color-text);
    opacity:.7;
}
.faq-hero-wrap .dropdown-menu .menu-item a:hover{
    opacity:1;
}
/* ===== PAGE HERO (static top area, not pinned like home/about) ===== */
.faq-hero-wrap{
    position:relative;
    background:var(--color-bg-alt);
}

.page-hero{
    position:relative;
    padding:clamp(4rem,7vw,6rem) var(--pad-x) clamp(4rem,7vw,6rem);
    max-width:var(--max-w);
    margin:0 auto;
    text-align:center;
}
.page-hero .eyebrow{color:var(--color-rust);margin-bottom:1.2rem;}
.page-hero h1{
    font-size:clamp(2rem,4.4vw,3.2rem);
    line-height:1.3;
    color:var(--color-text);
}
.page-hero p{
    margin-top:1.4rem;
    color:var(--color-text-soft);
    font-size:1rem;
    line-height:1.9;
    max-width:600px;
    margin-inline:auto;
}

/* ===== CONTENT SHEET ===== */
.sheet{
    position:relative;
    background:var(--color-bg-alt);
}

/* ===== SECTION 2 : FAQ ===== */
.faq-section{
    padding-top:0;
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
    padding-bottom:clamp(4rem,8vw,7rem);
}
.faq-categories{
    display:flex;
    gap:.8rem;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:3.6rem;
}
.faq-cat-btn{
    padding:.6rem 1.4rem;
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    border:1px solid var(--color-border);
    color:var(--color-text-soft);
    border-radius:999px;
    transition:all .3s var(--ease);
}
.faq-cat-btn:hover{border-color:var(--color-accent);color:var(--color-text);}
.faq-cat-btn.active{
    background:var(--color-olive);
    border-color:var(--color-olive);
    color:var(--color-white);
}

.faq-group{max-width:820px;margin:0 auto 3.6rem;}
.faq-group:last-child{margin-bottom:0;}
.faq-group-title{
    font-size:1.05rem;
    color:var(--color-text);
    margin-bottom:1.2rem;
    padding-bottom:.8rem;
    border-bottom:1px solid var(--color-border);
}

.faq-item{
    border-bottom:1px solid var(--color-border);
}
.faq-item:first-child{border-top:1px solid var(--color-border);}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.2rem;
    padding:1.3rem 0;
    text-align:left;
    font-size:.96rem;
    color:var(--color-text);
    cursor:pointer;
}
.faq-question .q-text{font-family:'Noto Serif TC',serif;font-weight:500;}
.faq-question .q-icon{
    flex-shrink:0;
    width:20px;height:20px;
    position:relative;
}
.faq-question .q-icon::before,
.faq-question .q-icon::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    background:var(--color-text);
    transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-question .q-icon::before{
    width:14px;height:1.5px;
    transform:translate(-50%,-50%);
}
.faq-question .q-icon::after{
    width:1.5px;height:14px;
    transform:translate(-50%,-50%);
}
.faq-item.open .q-icon::after{
    transform:translate(-50%,-50%) rotate(90deg);
    opacity:0;
}
.faq-item.open .faq-question .q-text{color:var(--color-accent);}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease);
}
.faq-answer-inner{
    padding-bottom:1.5rem;
    font-size:.88rem;
    line-height:1.9;
    color:var(--color-text-soft);
    max-width:700px;
}

/* ===== SECTION 3 : CTA ===== */
.cta{
    position:relative;padding:0;height:60vh;min-height:420px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    max-width:100%;
}
.cta .ph{position:absolute;inset:0;}
.cta .ph img{filter:saturate(.9) brightness(.6);}
.cta::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 50%, rgba(20,15,10,.35), rgba(20,15,10,.72));
}
.cta-inner{position:relative;z-index:2;text-align:center;color:var(--color-white);
    width:min(90vw,720px);}
.cta-inner .eyebrow{color:var(--color-accent-soft);}
.cta-inner h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:1rem;line-height:1.3;color:var(--color-white);}
.cta-inner p{margin-top:1.2rem;font-size:.96rem;line-height:1.9;color:#e6ddcd;max-width:520px;margin-inline:auto;}
.cta-btns{margin-top:2.2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn-outline.on-dark{border:1px solid rgba(255,255,255,.55);color:var(--color-white);}
.btn-outline.on-dark:hover{border-color:var(--color-white);background:rgba(255,255,255,.08);}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
    .page-hero{padding-top:6.5rem;}
    .faq-group-title{font-size:.96rem;}
}

@media (max-width:560px){
    .page-hero{padding-top:1.6rem;}
    .faq-categories{gap:.5rem;}
    .faq-cat-btn{padding:.5rem 1rem;font-size:.65rem;}
    .cta{height:70vh;}
}