/* ============================================================
   AquaLayer™ — faq.css
   Deck-aligned with home/about: pearl FAQ body + closing.
   Accordion base styles live in site.css; pearl overrides here.
   ============================================================ */

.faq-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 110px));
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
}
.faq-hero .breadcrumb { margin-bottom: var(--s5); }
.faq-hero .eyebrow { color: var(--tide); }
.faq-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 0.7rem + 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 12ch;
  margin-top: var(--s3);
  color: var(--pearl);
}
.faq-hero__lead {
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 48ch;
  font-weight: 300;
}

.faq-body { padding-block: var(--section-y); }

.faq-group {
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid rgba(0,16,32,.1);
}
.faq-group--last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.faq-group__head {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.faq-group__head .eyebrow {
  color: var(--tide);
  margin: 0;
}
.faq-group__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.85rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--abyss);
  margin: 0;
  line-height: 1.2;
  max-width: 14ch;
}

.faq-layout {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .faq-group__head {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    margin-bottom: 0;
  }
}

.acc__heading { margin: 0; font-size: inherit; font-weight: inherit; }

/* Pearl accordion — invert dark defaults from site.css */
.band-pearl .accordion { border-top-color: rgba(0,16,32,.12); }
.band-pearl .acc__item { border-bottom-color: rgba(0,16,32,.12); }
.band-pearl .acc__q {
  color: var(--abyss);
  font-size: clamp(1.05rem, 0.95rem + .45vw, 1.25rem);
}
.band-pearl .acc__q:hover { color: var(--tide); }
.band-pearl .acc__icon::before,
.band-pearl .acc__icon::after { background: rgba(0,16,32,.55); }
.band-pearl .acc__q:hover .acc__icon::before,
.band-pearl .acc__q:hover .acc__icon::after { background: var(--tide); }
.band-pearl .acc__panel p {
  color: #2a343c;
  font-weight: 500;
}