/* ==========================================================================
   Component — FAQ accordion
   ========================================================================== */
.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--border-card); }
.faq__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  text-align: left;
}
.faq__q {
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  line-height: 1.15; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.faq__item.is-open .faq__q { color: var(--brand); }
.faq__head:hover .faq__q { color: var(--brand); }

/* +/- toggle icon built from two bars */
.faq__toggle {
  position: relative; width: 20px; height: 20px; flex-shrink: 0;
  margin-right: 8px;
}
.faq__toggle::before, .faq__toggle::after {
  content: ""; position: absolute; background: var(--brand);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__toggle::before { left: 9.5px; top: 0; width: 1px; height: 20px; }   /* vertical */
.faq__toggle::after  { left: 0; top: 9.5px; width: 20px; height: 1px; }   /* horizontal */
.faq__item.is-open .faq__toggle::before { transform: rotate(90deg); opacity: 0; }

/* Answer panel */
.faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.faq__answer {
  padding: 0 60px 30px 0;
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  color: var(--slate);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.faq__item.is-open .faq__answer { opacity: 1; transform: none; transition-delay: 0.12s; }

/* Items reveal one-by-one when the accordion scrolls into view.
   Let the items do the entrance; neutralise the block-level reveal fade. */
.faq.reveal { opacity: 1; transform: none; transition: none; }
.faq.reveal .faq__item {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.faq.is-visible .faq__item { opacity: 1; transform: none; }
.faq.is-visible .faq__item:nth-child(1) { transition-delay: 0.06s; }
.faq.is-visible .faq__item:nth-child(2) { transition-delay: 0.14s; }
.faq.is-visible .faq__item:nth-child(3) { transition-delay: 0.22s; }
.faq.is-visible .faq__item:nth-child(4) { transition-delay: 0.30s; }
.faq.is-visible .faq__item:nth-child(5) { transition-delay: 0.38s; }
.faq.is-visible .faq__item:nth-child(6) { transition-delay: 0.46s; }
.faq.is-visible .faq__item:nth-child(7) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .faq.reveal .faq__item { opacity: 1; transform: none; transition: none; }
  .faq__answer { opacity: 1; transform: none; transition: none; }
}