/* ==========================================================================
   FAQs  —  Figma "FAQs - Animate" (720:2779)
   1920 x 1206 at y 8273, transparent over the FAQ backdrop.

   The list is a flow accordion at x 643, width 1229. Closed items sit on an
   82px pitch (34px question + 23.5/24.5 padding) separated by a 1px
   #595959 rule at 15% opacity, matching Figma's rule set exactly.

   Default -> Animate:
     rule set     width 47 -> 1228
     "FAQs"       translateX -40  -> 0
     last-updated translateX +190 -> 0
     "Questions,
      Answered"   translateY +20  -> 0
     both h2s     translateY +70  -> 0
     Contact Us   translateX -180 -> 0
     item numbers translateX -30  -> 0
     questions    translateY +30  -> 0
     open answer  translateY +142 -> 0
   ========================================================================== */

.faq {
  top: calc(8273 * var(--s));
  height: calc(1206 * var(--s));
  overflow: hidden;
  z-index: 2;
}

/* On the front page the grey ground comes from the separate `faqbg` section,
   which overlaps this one exactly (both 1206 tall at y 8273). About is a
   flow column, where two stacked sections cannot overlap — so the
   plate is drawn here instead, with the same inset -> full-bleed reveal.
   Paints below the section's content because ::before precedes children. */
/* Above the reflow only: below it the shared rule paints the FAQ
   Light/Grey, exactly as the front page's, and this dark ground plus its
   plate would otherwise leave About's the one dark FAQ on the site. */
@media (min-width: 1201px), (min-width: 1024px) and (orientation: landscape) {
  .o-page--about .faq { background: var(--c-mono-dark); }
}

.o-page--about .faq::before {
  content: "";
  position: absolute;
  inset: calc(30.15 * var(--s)) calc(48 * var(--s));
  background: var(--c-light-grey);
  transition: inset calc(var(--rv-dur) * 1.2) var(--rv-ease);
}

.o-page--about .faq.is-in::before { inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .o-page--about .faq::before { inset: 0; transition: none; }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .o-page--about .faq::before { display: none; }
}

.faq__rule {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(94.5 * var(--s));
  width: calc(1824 * var(--s));
  --rule-color: #595959;
  opacity: 0.15;
}

.faq__meta {
  position: absolute;
  top: calc(48 * var(--s));
  height: calc(22 * var(--s));
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: #767676;
  white-space: nowrap;
}
.faq__meta--a { left: calc(48 * var(--s)); width: calc(134 * var(--s)); }
.faq__meta--b { left: calc(33.33% + 3 * var(--s)); width: calc(156 * var(--s)); }
.faq__meta--c { left: calc(83.33% + 86 * var(--s)); width: calc(185 * var(--s)); text-align: right; }

.faq__h {
  position: absolute;
  left: calc(48 * var(--s));
  width: calc(461 * var(--s));
  height: calc(77 * var(--s));
}
.faq__h--1 { top: calc(158 * var(--s)); }
.faq__h--2 { top: calc(235 * var(--s)); }
.faq__h h2,
.faq__h span {
  display: block;
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-3.2 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
}

.faq__cta {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(376 * var(--s));
  width: calc(172 * var(--s));
  height: calc(48 * var(--s));
}
.faq__cta .rv { height: 100%; }
.faq__cta .btn { width: 100%; height: 100%; }

/* --- the list ------------------------------------------------------------ */

.faq__list {
  position: absolute;
  left: calc(33.33% + 3 * var(--s));
  top: calc(158 * var(--s));
  width: calc(1229 * var(--s));
}

.faq__item + .faq__item { border-top: 1px solid rgba(89, 89, 89, 0.15); }

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--s));
  width: 100%;
  padding: calc(23.5 * var(--s)) 0 calc(24.5 * var(--s));
  text-align: left;
  cursor: pointer;
}
.faq__item:first-child .faq__q { padding-top: 0; }

.faq__n {
  flex: none;
  width: calc(29 * var(--s));
  padding-top: calc(7.5 * var(--s));
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-sky-blue);
  white-space: nowrap;
}
.faq__n .kern { letter-spacing: calc(1.6 * var(--s)); }

.faq__qt {
  font-size: calc(24 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.72 * var(--s));
  color: #595959;
  transition: color var(--ui-dur) var(--ui-ease);
}
.faq__item.is-open .faq__qt,
.faq__q:hover .faq__qt { color: var(--c-mono-dark); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ui-dur) var(--ui-ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }

.faq__a p {
  font-weight: 300;
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-mono-dark);
}
.faq__a p:first-child { padding-top: calc(30 * var(--s)); }
.faq__a p:last-child { padding-bottom: calc(32 * var(--s)); }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1400px) {
  .faq__qt { font-size: calc(20 * var(--s)); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .faq { height: auto; padding: 48px 20px 56px; background: var(--c-light-grey); }
  .faq__rule { position: static; width: 100%; margin-bottom: 24px; }
  .faq__meta { position: static; display: block; width: auto; font-size: 12px; text-align: left; }
  .faq__meta--b, .faq__meta--c { margin-top: 6px; }
  .faq__h { position: static; width: auto; height: auto; margin-top: 20px; }
  .faq__h span, .faq__h h2 { font-size: clamp(30px, 8vw, 44px); white-space: normal; letter-spacing: -0.05em; }
  .faq__cta { position: static; margin-top: 24px; width: 172px; height: 48px; }
  .faq__list { position: static; width: auto; margin-top: 36px; }
  .faq__qt { font-size: 17px; }
  .faq__n { width: 34px; }
  .faq__a p { font-size: 15px; }
}