/* LOCKEDIN3D: FAQ on the Contact page (Carlos, 29 Oct). Questions on the left, each answer is a printed card dealt to the front of a deck.
   Same philosophy as the order cards (assets/cards.css): bronze light, a card in front, the others resting behind. Phones: an accordion of the same cards. */
.faq{position:relative;padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.faq::before{content:"";position:absolute;z-index:-1;right:-8%;top:18%;width:66%;height:78%;background:radial-gradient(50% 50% at 50% 50%,rgba(196,154,98,.12),transparent 70%);pointer-events:none}
.faq-head{grid-column:1;display:grid;grid-template-columns:1fr;row-gap:18px;margin-bottom:clamp(34px,4vw,52px)}
.faq-head .h-xl{margin-top:18px}
.faq-head .lead{max-width:46ch;font-size:15px;line-height:1.7}

.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto repeat(6,auto) 1fr;column-gap:clamp(40px,7vw,110px);align-items:start}
.fq{display:contents}

/* the questions */
.fq-h{grid-column:1;margin:0;font:inherit}
.fq-q{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:20px 4px 20px 0;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left;color:var(--fg-2)}
.faq-head + .fq .fq-q{border-top-color:transparent}
.fq-q::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--bronze),rgba(196,154,98,0));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.fq-n{font:italic 400 26px/1 var(--serif);color:var(--dim);transition:color .5s var(--ease)}
.fq-t{font:600 clamp(15px,1.15vw,17px)/1.35 var(--display);font-stretch:108%;letter-spacing:-.006em;text-wrap:balance;transition:color .5s var(--ease)}
.fq-go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);color:var(--fg-2);transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),transform .6s var(--ease)}
.fq-go svg{width:14px;height:14px}
.fq-q:hover .fq-t{color:var(--fg)}
.fq-q:hover .fq-go{border-color:var(--bronze-line);color:var(--bronze-hi)}
.fq-q[aria-expanded="true"]{color:var(--fg)}
.fq-q[aria-expanded="true"]::before{transform:scaleX(1)}
.fq-q[aria-expanded="true"] .fq-n{color:var(--bronze-hi)}
.fq-q[aria-expanded="true"] .fq-t{color:var(--fg)}
.fq-q[aria-expanded="true"] .fq-go{background:var(--bronze);border-color:var(--bronze);color:var(--on-bronze)}

/* the deck */
.fq-a{grid-column:2;grid-row:1 / 9;align-self:stretch;position:relative;margin:clamp(40px,4vw,60px) 9% 6% 0;perspective:1600px;
  transition:transform 1s var(--ease),opacity .8s var(--ease),filter .8s var(--ease)}
.fq-clip{height:100%}
.fq-card{position:relative;height:100%;display:flex;flex-direction:column;padding:clamp(28px,3vw,44px) clamp(26px,3.2vw,48px) clamp(24px,2.6vw,36px);border-radius:16px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 85% 0%,#1a1611,#0d0c0a 58%,#090807);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 44px 80px -34px rgba(0,0,0,.95),0 18px 32px -18px rgba(0,0,0,.8);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease)}
/* printed-card details: an inset bronze frame and a light sweep */
.fq-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(196,154,98,.22);border-radius:10px;pointer-events:none;z-index:-1}
.fq-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,240,220,.07) 45%,transparent 60%);background-size:250% 100%;background-position:100% 0;transition:background-position 1.6s var(--ease);pointer-events:none}
.fq-a.is-on:hover .fq-card::after{background-position:0 0}
.fq-num{position:absolute;z-index:-1;right:clamp(18px,2.4vw,34px);bottom:-.16em;font:italic 400 clamp(150px,15vw,230px)/1 var(--serif);color:rgba(196,154,98,.07);pointer-events:none;user-select:none}
.fq-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.fq-k{font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.fq-k b{font-weight:500;color:var(--bronze-hi)}
.fq-top img{height:9px;width:auto;opacity:.55}
.fq-cq{margin:clamp(26px,3vw,40px) 0 0;font:700 clamp(21px,1.9vw,28px)/1.12 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.fq-body{margin-top:20px;display:grid;gap:14px;max-width:58ch}
.fq-body > div{display:grid;gap:14px}
.fq-body p{font-size:15px;line-height:1.72;color:var(--fg-2)}
.fq-body p b{font-weight:500;color:var(--fg)}
.fq-list{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.fq-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;align-items:start;font-size:14px;line-height:1.55;color:var(--fg-2)}
.fq-list li svg{width:18px;height:18px;margin-top:1px;color:var(--bronze-hi)}
.fq-list li b{display:block;margin-bottom:2px;font:600 13px/1.3 var(--display);font-stretch:108%;letter-spacing:.01em;color:var(--fg)}
.fq-list.steps li span:first-child{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--bronze-line);font:500 9.5px/1 var(--mono);color:var(--bronze-hi);margin-top:1px}
.fq-cta{margin-top:6px;justify-self:start}
.fq-sign{margin-top:auto;padding-top:clamp(24px,2.6vw,34px);display:flex;align-items:center;gap:12px;font:italic 400 17px/1 var(--serif);color:var(--bronze-hi)}
.fq-sign::before{content:"";width:28px;height:1px;background:var(--bronze-line)}

/* deck positions (set by assets/faq.js): 0 in front, 1 and 2 resting behind, the last one dealt away to the left */
.fq-a .fq-in{transition:opacity .6s var(--ease)}
.fq-a[data-pos="0"]{z-index:5}
.fq-a[data-pos="1"]{z-index:4;transform:translate3d(4.5%,-5.5%,0) rotate(2.6deg) scale(.97);filter:brightness(.55) saturate(.8);opacity:.7;cursor:pointer}
.fq-a[data-pos="2"]{z-index:3;transform:translate3d(9%,-11%,0) rotate(5.2deg) scale(.94);filter:brightness(.4) saturate(.7);opacity:.45;cursor:pointer}
.fq-a[data-pos="3"],.fq-a[data-pos="4"]{z-index:2;transform:translate3d(9%,-11%,0) rotate(5.2deg) scale(.94);opacity:0;pointer-events:none}
.fq-a[data-pos="5"]{z-index:6;transform:translate3d(-16%,6%,0) rotate(-7deg) scale(.96);opacity:0;pointer-events:none}
.fq-a:not([data-pos="0"]) .fq-in{opacity:0}
.fq-a[data-pos="1"]:hover{filter:brightness(.75)}
/* first entrance: the deck is dealt in */
.faq:not(.in) .fq-a{transform:translate3d(0,14%,0) rotate(-3deg) scale(.96);opacity:0}
.faq.dealing .fq-a{transition-delay:calc(var(--i,0) * 110ms)}

@media (max-width:1000px){
  .faq-head{grid-template-columns:1fr;row-gap:18px}
  .faq-grid{display:block}
  .fq{display:block;border-top:1px solid var(--line)}
  .fq:last-child{border-bottom:1px solid var(--line)}
  .fq-q{border-top:0;padding:18px 0;grid-template-columns:36px minmax(0,1fr) auto;gap:12px}
  .fq-q::before{top:-1px}
  .fq-n{font-size:22px}
  .fq-go svg{transition:transform .6s var(--ease)}
  .fq-q[aria-expanded="true"] .fq-go svg{transform:rotate(90deg)}
  .fq-a,.fq-a[data-pos],.faq:not(.in) .fq-a{margin:0;transform:none;filter:none;opacity:1;cursor:auto;pointer-events:auto;perspective:none;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
  .fq-a.is-on{grid-template-rows:1fr}
  .fq-clip{min-height:0;overflow:hidden;height:auto}
  .fq-a .fq-in,.fq-a:not([data-pos="0"]) .fq-in{opacity:1}
  .fq-card{margin:2px 0 22px;height:auto;transform:none}
  .fq-cq{display:none}
  .fq-body{margin-top:18px}
  .fq-sign{padding-top:22px}
}
@media (max-width:560px){
  .fq-card{padding:22px 20px 22px;border-radius:12px}
  .fq-card::before{inset:7px;border-radius:7px}
  .fq-t{font-size:15px}
  .fq-body p{font-size:14.5px}
  .fq-cta{width:100%}
}
/* the courier warning in answer 04 */
.fq-body p.fq-note{position:relative;padding:14px 16px 14px 18px;border-radius:10px;background:linear-gradient(180deg,rgba(196,154,98,.09),rgba(196,154,98,.03));box-shadow:inset 0 0 0 1px rgba(196,154,98,.22);color:var(--fg-2)}
.fq-body p.fq-note::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--bronze)}
.fq-body p.fq-note b{display:block;margin-bottom:2px;color:var(--bronze-hi)}
.fq-body > .fq-list:first-child{border-top:0;padding-top:0;margin-top:0}