.faq {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 70px;
  background:
    linear-gradient(90deg, #050504 0 38%, transparent 38%),
    radial-gradient(circle at 85% 30%, #211707, #070605 58%);
  border-bottom: 1px solid #302513;
}

.faq-heading {
  position: sticky;
  top: 120px;
  align-self: start;
}

.faq-heading h2 {
  margin: 8px 0 17px;
  color: var(--cream);
  font: 500 clamp(34px, 4vw, 55px)/1.25 Georgia, "Noto Serif SC", serif;
}

.faq-heading > p:last-child {
  color: var(--muted);
}

.faq-list {
  border-top: 1px solid #4b391d;
}

.faq details {
  border-bottom: 1px solid #4b391d;
}

.faq summary {
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 23px 4px;
  color: #d8c79b;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary span {
  color: #80632f;
  font: 17px Georgia, serif;
}

.faq summary b {
  font-size: 16px;
  font-weight: 600;
}

.faq summary i {
  position: relative;
  width: 16px;
  height: 16px;
}

.faq summary i::before,
.faq summary i::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 1px;
  width: 14px;
  height: 1px;
  background: var(--gold);
  transition: transform 0.2s ease;
}

.faq summary i::after {
  transform: rotate(90deg);
}

.faq details[open] summary {
  color: var(--bright);
}

.faq details[open] summary span {
  color: var(--gold);
}

.faq details[open] summary i::after {
  transform: rotate(0);
}

.faq details p {
  margin: -3px 42px 24px 60px;
  color: var(--muted);
  font-size: 15px;
}

.faq-contact {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
  padding: 18px 20px;
  border-left: 2px solid var(--gold);
  background: #100d08;
}

.faq-contact span {
  color: var(--muted);
}

.faq-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; gap: 35px; background: radial-gradient(circle at 85% 20%, #211707, #070605 58%); }
  .faq-heading { position: static; }
  .faq-contact { grid-column: 1; }
}

@media (max-width: 560px) {
  .faq summary { grid-template-columns: 32px 1fr 20px; gap: 10px; padding-block: 20px; }
  .faq details p { margin: -2px 30px 22px 42px; }
  .faq-contact { align-items: flex-start; flex-direction: column; }
}