/* FAQ SECTION - sticky intro + light accordion (native <details>) */
.faq{padding-top:calc(var(--sec-y) * .9)}
.faq__grid{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7fr);gap:clamp(36px,7vw,110px);align-items:start}
.faq__intro{position:sticky;top:calc(var(--head-h) + 40px)}
.faq__intro > p{max-width:360px;margin:22px 0 26px;color:var(--muted)}
.faq__list{display:grid;gap:12px}

.faq__list details{border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.55);transition:background-color .3s,border-color .3s,box-shadow .3s}
.faq__list details[open]{background:var(--paper);border-color:var(--sage);box-shadow:var(--shadow-s)}
.faq__list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font:500 clamp(1.05rem,1.4vw,1.25rem)/1.3 var(--font-head);letter-spacing:-.01em;color:var(--forest);cursor:pointer;list-style:none;transition:color .25s}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary:hover{color:var(--leaf)}

/* plus / minus icon: two gradient bars on a round chip; the vertical bar collapses when open */
.faq__list summary::after{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:
  linear-gradient(var(--forest),var(--forest)) center / 12px 1.8px no-repeat,
  linear-gradient(var(--forest),var(--forest)) center / 1.8px 12px no-repeat,
  var(--sage-2);transition:background-color .3s,background-size .35s var(--ease)}
.faq__list details[open] summary::after{background:
  linear-gradient(var(--forest),var(--forest)) center / 12px 1.8px no-repeat,
  linear-gradient(var(--forest),var(--forest)) center / 1.8px 0 no-repeat,
  var(--lime)}

.faq__list details p{max-width:620px;padding:0 26px 24px;font-size:15.5px;color:var(--muted);animation:faqIn .4s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media only screen and (max-width:991px){
  .faq__grid{grid-template-columns:1fr}
  .faq__intro{position:static}
}
@media only screen and (max-width:575px){
  .faq__list summary{padding:18px}
  .faq__list details p{padding:0 18px 20px}
}