/* ═══ SOCIAL · SECTION 8 — FAQ ═══ */
.faq{position:relative;padding:clamp(74px,12vh,150px) var(--gut);
  background:#080808;border-top:1px solid var(--border)}
.faq h2{margin-top:20px;font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1;max-width:16ch}
.faq-list{margin-top:clamp(30px,5vh,54px);border-top:1px solid var(--border)}
.q{border-bottom:1px solid var(--border);opacity:0;transform:translateY(14px);
  transition:opacity .65s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.q.is-in{opacity:1;transform:none}
.q summary{list-style:none;cursor:pointer;position:relative;overflow:hidden;
  padding:clamp(20px,3vh,30px) clamp(46px,6vw,72px) clamp(20px,3vh,30px) clamp(0px,2vw,26px);
  display:flex;align-items:center;
  font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(.98rem,1.8vw,1.3rem);letter-spacing:-.022em;
  transition:padding .45s cubic-bezier(.2,.7,.2,1)}
.q summary::-webkit-details-marker{display:none}
.q summary::before{content:"";position:absolute;inset:0;background:var(--surface);
  transform:translateX(-101%) skewX(-9deg);transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:0}
.q summary:hover::before{transform:translateX(0) skewX(-9deg)}
.q summary:hover{padding-left:clamp(14px,3.2vw,48px)}
.q summary > *{position:relative;z-index:1}
.q .plus{position:absolute;right:clamp(4px,2vw,24px);top:50%;translate:0 -50%;
  width:16px;height:16px;z-index:1}
.q .plus::before,.q .plus::after{content:"";position:absolute;background:var(--cut);
  left:50%;top:50%;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.q .plus::before{width:16px;height:1.5px;transform:translate(-50%,-50%)}
.q .plus::after{width:1.5px;height:16px;transform:translate(-50%,-50%)}
.q[open] .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.q .a{padding:0 clamp(46px,6vw,72px) clamp(22px,3.4vh,32px) clamp(0px,2vw,26px);
  font-size:clamp(.94rem,1.04vw,1.04rem);line-height:1.66;color:var(--muted);max-width:70ch}
.q[open] .a{animation:ansIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes ansIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.q .a .todo{display:block;margin-top:10px;color:var(--cut);font-size:10.5px;letter-spacing:.14em}

@media(prefers-reduced-motion:reduce){
  .q{opacity:1;transform:none}
}
