/* FAQ section (home page). Uses the existing palette, type scale and breakpoints from site.css. */
.faq{background:var(--cream);border-top:1px solid #1b183333;grid-template-columns:1fr 2.4fr;align-items:start;gap:4vw;padding:9vw 4.5vw 10vw;display:grid}
.faq h2{font-size:clamp(52px,7vw,104px)}
.faq h2 em{color:var(--coral)}
.faq-list{border-bottom:1px solid #1b18334d}
.faq-item{border-top:1px solid #1b18334d}
.faq-item summary{cursor:pointer;list-style:none;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;display:flex}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-q{letter-spacing:-.035em;font-family:Georgia,serif;font-size:28px;font-weight:500;line-height:1.2}
.faq-item summary:hover .faq-q{color:var(--purple)}
.faq-icon{border:1px solid var(--ink);border-radius:50%;flex:none;width:34px;height:34px;position:relative}
.faq-icon:before,.faq-icon:after{content:"";background:var(--ink);width:12px;height:1.5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s}
.faq-icon:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-icon:after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-a p{max-width:650px;margin:0;padding:0 58px 28px 0;font-size:14px;line-height:1.7}
.faq-a a{text-underline-offset:3px;font-weight:800;text-decoration:underline}
.faq-a a:hover{color:var(--purple)}
.faq-item summary:focus-visible,.faq-a a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.faq-icon:before,.faq-icon:after{transition:none}}
@media (width<=900px){.faq{grid-template-columns:1fr;gap:45px}}
@media (width<=560px){
.faq{padding:80px 20px;gap:30px}
.faq h2{font-size:50px}
.faq-q{font-size:22px}
.faq-item summary{gap:18px;padding:22px 0}
.faq-a p{padding-right:0;font-size:15px}
}