/* ============================================================
   CHOICES v2 · FAQ + contact. Loaded after styles.css.
   Wall page-head, then flat black content, then the list poster.
============================================================ */

/* ---------- FAQ ---------- */
.faq-sec{padding:var(--sp-7) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-7);align-items:start}
.faq-list{grid-column:2;grid-row:1}
.faq-aside{grid-column:1;grid-row:1;position:sticky;top:100px;display:grid;justify-items:start;gap:var(--sp-3)}
.faq-quote{margin-bottom:var(--sp-3);font-family:var(--font-ui);font-style:normal;font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:clamp(30px,2.9vw,46px);line-height:.94;letter-spacing:-.01em;color:var(--wing)}
.faq-note{max-width:30ch;margin-bottom:10px;font-size:15px;line-height:1.6;color:var(--stone)}
.faq-list{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line-2)}
.fq summary{display:grid;grid-template-columns:clamp(52px,4.8vw,70px) minmax(0,1fr) 22px;align-items:center;column-gap:var(--sp-4);padding:var(--sp-4) 2px;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary::marker{content:""}
.fq .n{position:relative;isolation:isolate;justify-self:start;padding:6px 10px 6px 8px;font-size:11px;font-weight:800;letter-spacing:.18em;line-height:1;color:var(--stone);transition:color .3s}
.fq .n::before{content:"";position:absolute;inset:-9px -14px -9px -8px;z-index:-1;background:var(--violet);-webkit-mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;opacity:0;transform:scaleX(.4);transform-origin:0 50%;transition:opacity .3s ease,transform .45s var(--ease)}
.fq[open] .n{color:#fff}
.fq[open] .n::before{opacity:1;transform:none}
.fq .q{font-size:clamp(15px,1.5vw,21px);font-weight:800;font-variation-settings:"wdth" 112;letter-spacing:.02em;text-transform:uppercase;line-height:1.22;color:var(--wing);transition:color .25s}
.fq .ind{position:relative;justify-self:end;width:20px;height:20px;color:var(--stone);transition:color .25s}
.fq .ind::before,.fq .ind::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.fq .ind::after{transform:rotate(90deg)}
.fq[open] .ind{color:var(--ice)}
.fq[open] .ind::after{transform:rotate(0deg)}
.fq summary:hover .q{color:#fff}
.fq summary:hover .ind{color:var(--ice)}
.fq:not([open]) summary:hover .n{color:var(--spark)}
.fq .a{padding:0 44px var(--sp-5) calc(clamp(52px,4.8vw,70px) + var(--sp-4) + 2px)}
.fq .a p{max-width:62ch;font-size:15.5px;line-height:1.75;color:rgba(242,239,233,.86)}
.fq .a p+p{margin-top:.9em}
.fq .a b{font-weight:700;color:var(--ice)}
.fq .a a{color:var(--wing);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.fq .a a:hover{color:var(--ice);border-color:var(--ice)}
.fq[open] .a{animation:fqIn .5s var(--ease)}
@keyframes fqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- contact ---------- */
.ct-sec{padding:var(--sp-7) 0}
.ct-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);max-width:1180px;margin:0 auto}
/* the two channels are paste-up posters (.poster-sheet gives paper + tape); rotation rides on `rotate` so reveals keep `transform` */
.ct-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6);min-height:clamp(210px,17vw,268px);padding:var(--sp-5);border:0;border-radius:0;background:var(--paper) url(assets/wall/paper.webp) center/cover;color:#0b0b0c;transform:none;rotate:var(--rot,0deg);box-shadow:0 30px 60px -22px #000,0 8px 18px rgba(0,0,0,.6);transition:rotate .55s var(--ease),translate .55s var(--ease),opacity .5s ease-out,transform .5s ease-out}
.js .ct-card.rv{transition:rotate .55s var(--ease),translate .55s var(--ease),opacity .5s ease-out,transform .5s ease-out}
.ct-card:hover,.ct-card:focus-visible{rotate:0deg;translate:0 -6px}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.ct-ico{display:flex;align-items:center;justify-content:center;width:clamp(46px,4vw,58px);aspect-ratio:1;border:2px solid currentColor;border-radius:50%}
.ct-ico svg{width:50%;height:50%;fill:currentColor}
.ct-go{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.ct-go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.ct-card:hover .ct-go svg{transform:translateX(4px)}
.ct-plat{display:block;width:max-content;max-width:100%;font-family:var(--font-tag);font-weight:400;font-size:clamp(52px,5.6vw,92px);line-height:1;letter-spacing:0;background:linear-gradient(100deg,#4464B2 0%,#584EB2 55%,#6B4FC9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.08em .12em .44em .02em;margin:-.08em 0 -.44em}
.ct-handle{display:block;margin-top:var(--sp-3);font-size:clamp(17px,1.7vw,24px);font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.01em;line-height:1.2;overflow-wrap:anywhere}
.ct-note{max-width:640px;margin:var(--sp-8) auto 0}
.ct-or{display:flex;align-items:center;gap:var(--sp-3);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.ct-or::before,.ct-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ct-form{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.ct-form input,.ct-form textarea{width:100%;background:rgba(242,239,233,.02);border:1px solid var(--line);border-radius:0;color:var(--bone);font:400 16px var(--font-ui);padding:15px 18px;transition:border-color .25s}
.ct-form textarea{min-height:150px;resize:vertical;line-height:1.6}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:var(--stone)}
.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:var(--ice)}
.ct-form .btn{width:100%;margin-top:4px}
.ct-foot{margin-top:var(--sp-4);font-size:12.5px;text-align:center;color:var(--stone)}
.ct-foot a{color:var(--wing);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.ct-foot a:hover{color:var(--ice);border-color:var(--ice)}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:960px){
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
  .faq-list{grid-column:1;grid-row:1}
  .faq-aside{grid-column:1;grid-row:2;position:static}
}
@media (max-width:820px){
  .ct-cards{grid-template-columns:minmax(0,1fr);gap:var(--sp-6);max-width:560px}
  .ct-card{min-height:0}
}
@media (max-width:560px){
  .fq summary{grid-template-columns:40px minmax(0,1fr) 18px;column-gap:var(--sp-3);padding:var(--sp-4) 0}
  .fq .ind{width:18px;height:18px}
  .fq .ind::before,.fq .ind::after{top:8px;width:18px}
  .fq .n{padding:5px 6px 5px 4px;font-size:10.5px;letter-spacing:.12em}
  .fq .a{padding:0 0 var(--sp-5) 52px}
  .fq .a p{font-size:15px}
  .ct-card{padding:var(--sp-5);gap:var(--sp-6)}
}
@media (prefers-reduced-motion:reduce){
  .fq[open] .a{animation:none}
  .fq .n::before,.fq .ind::before,.fq .ind::after,.ct-card,.ct-go svg{transition:none}
  .ct-card:hover,.ct-card:focus-visible{translate:none}
}

/* keyboard focus ring on the contact fields, matching the drop-list forms */
.ct-form input:focus-visible,.ct-form textarea:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}