.faq{
  position:relative;
  height:auto;
  margin-top:42px;
  padding:78px clamp(32px,5vw,76px);
  display:grid;
  grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr);
  gap:clamp(40px,7vw,110px);
  overflow:hidden;
  border-radius:32px;
  color:#6c625a
}
.faq-intro,.faq-list{
  position:relative;
  z-index:1
}
.faq-intro h2{
  margin:16px 0 20px;
  font:400 clamp(35px,4vw,57px)/1.05 var(--font-family);
  letter-spacing:-.035em
}
.faq-intro>p{
  max-width:420px;
  margin:0;
  color:#6c625a;
  font-size:18px;
  line-height:1.7
}
.faq-contact{
  margin-top:34px;
  padding:19px 21px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(12px)
}
.faq-contact span{
  margin-bottom:5px;
  color:#6c625a;
  font-size:22px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase
}
.faq-contact a{
  color:#6c625a;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  transition:color .25s,transform .25s
}
.faq-contact a:hover{
  color:#dc9d62;
  transform:translateX(4px)
}
.faq-list{
  width:auto;
  margin:0;
  display:grid;
  gap:11px;
  border:0
}
.faq-list details{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  transition:background .35s,border-color .35s,transform .35s
}
.faq-list details:hover{
  transform:translateX(5px);
  border-color:rgba(212,156,102,.45);
  background:rgba(255,255,255,.08)
}
.faq-list details[open]{
  border-color:rgba(212,156,102,.5);
  background:rgba(255,255,255,.095)
}
.faq-list summary{
  padding:20px 19px;
  display:grid;
  grid-template-columns:42px 1fr 30px;
  gap:15px;
  align-items:center;
  cursor:pointer;
  font-size:clamp(15px,1.15vw,19px);
  font-weight:700;
  line-height:1.35;
  list-style:none
}
.faq-list summary::-webkit-details-marker{
  display:none
}
.faq-number{
  color:#c98c55;
  font-size:clamp(11px,.75vw,14px);
  letter-spacing:.1em
}
.faq-list summary i{
  position:relative;
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  transition:transform .4s,background .3s
}
.faq-list summary i::before,.faq-list summary i::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:1px;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .35s
}
.faq-list summary i::after{
  transform:translate(-50%,-50%) rotate(90deg)
}
.faq-list details[open] summary i{
  background:var(--gold);
  transform:rotate(180deg)
}
.faq-list details[open] summary i::after{
  transform:translate(-50%,-50%) rotate(0deg)
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .5s ease,opacity .35s ease
}
.faq-list details[open] .faq-answer{
  max-height:220px;
  opacity:1
}
.faq-answer p{
  margin:0;
  padding:0 58px 24px 76px;
  color:#211711;
  font-size:clamp(14px,1vw,17px);
  line-height:1.65
}
@media(max-width:1050px){
  .faq{
    grid-template-columns:1fr;
    gap:38px
  }
  .faq-intro{
    max-width:650px
  }
  .faq-contact{
    max-width:420px
  }
}
@media(max-width:800px){
  .faq{
    padding:54px 32px;
    border-radius:24px
  }
}
@media(max-width:520px){
  .faq{
    width:80vw;
    padding:42px 20px;
    border-radius:20px
  }
  .faq-intro h2{
    font-size:35px
  }
  .faq-list summary{
    grid-template-columns:32px 1fr 28px;
    padding:17px 12px;
    gap:9px;
    font-size:15px
  }
  .faq-answer p{
    padding:0 42px 20px 53px;
    font-size:14px
  }
  .faq-contact{
    padding:17px
  }
}