/* FAQ page only. Sitewide chrome/primitives live in base.css, nav.css, footer.css. */

/* PAGE HERO */
.faq-hero { position: relative; overflow: hidden; background: var(--obsidian); color: var(--ivory); padding: 100px 0 80px; }
.faq-hero h1 { margin-top: 18px; max-width: 700px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.16; color: var(--ivory); font-weight: 500; }

/* Q&A LIST — editorial hairline rows, not an accordion or card grid */
/* Last section on the page, before the footer — needs its own bottom padding
   now that the generic `section{}` rule (base.css) only supplies top padding. */
.faq-list { background: var(--ivory); padding-bottom: 110px; }
.faq-list .eyebrow { margin-bottom: 24px; }
.faq-items { border-top: 1px solid var(--hair); }
.faq-item { display: grid; grid-template-columns: 70px 1fr; gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--hair); max-width: 840px; }
.faq-item .rn { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--bronze); }
.faq-item h3 { font-family: var(--font-serif); font-weight: 500; font-size: 21px; color: var(--obsidian); }
.faq-item p { margin-top: 10px; font-size: 15.5px; color: var(--stone); line-height: 1.8; }
.faq-item p b { color: var(--obsidian); font-weight: 600; }

@media (max-width: 920px) {
  .faq-hero { padding: 72px 0 56px; }
  .faq-list { padding-bottom: 64px; }
  .faq-item { grid-template-columns: 40px 1fr; }
}