.faq-page{overflow:hidden}

.faq-hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.faq-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faq-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45)}
.faq-hero-content{position:relative;max-width:520px;margin-inline:auto;color:var(--color-white);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-4)}

.faq-categories .faq-cat-wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.faq-cat{padding:0.6em 1.2em;border:1px solid var(--color-brass);border-radius:var(--radius-lg);font-size:var(--fs-6);letter-spacing:.08em;text-transform:uppercase}
.faq-cat.active,.faq-cat:hover{background:var(--color-brass);color:var(--color-espresso)}

.faq-section .faq-inner{max-width:700px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-4)}

.faq-accordion{display:flex;flex-direction:column;gap:var(--space-3)}

.faq-item{border-bottom:1px solid var(--color-brass);padding-bottom:var(--space-3)}

.faq-question{width:100%;text-align:left;font-family:var(--font-heading);font-size:var(--fs-3);display:flex;justify-content:space-between;align-items:center}

.faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.faq-item.active .faq-answer{max-height:500px;opacity:1;margin-top:var(--space-2)}

.surface-dark .faq-item{border-color:rgba(255,255,255,0.3)}
.surface-dark .faq-question{color:var(--color-white)}
.surface-dark .faq-answer{color:var(--color-white)}

.faq-cta{position:relative;min-height:50vh;display:flex;align-items:center;justify-content:center;text-align:center}
.faq-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faq-cta-overlay{position:absolute;inset:0;background:rgba(23,104,94,0.85)}
.faq-cta-content{position:relative;max-width:500px;margin-inline:auto;color:var(--color-white);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-4)}

@media (max-width:900px){
.faq-hero{min-height:60vh}
}

@media (max-width:600px){
.faq-hero-content{padding:var(--space-5) var(--space-3)}
.faq-section .faq-inner{padding-inline:var(--space-2)}
}