/* ========================================================================== FAQ — single-open accordion. Content mirrors the FAQPage JSON-LD in index.html ; keep the two in sync if questions change. ========================================================================== */ .faq { display: flex; align-items: center; background: var(--color-white); padding: var(--sp-6) 0; } .faq__inner { position: relative; z-index: 1; } .faq__heading { position: relative; text-align: center; margin: 0 auto var(--sp-6); max-width: 46ch; } .faq__heading h2 { font-size: var(--fs-h1); } .faq__heading p { margin-top: var(--sp-2); color: var(--color-ink-soft); } .faq__heading a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } /* Faint wireframe-ridge motif behind the heading, echoing the hero video */ .faq__wireframe { position: absolute; z-index: -1; top: -34px; left: 50%; transform: translateX(-50%); width: 160%; max-width: 900px; height: 140px; opacity: 0.08; pointer-events: none; } .faq__wireframe svg { width: 100%; height: 100%; display: block; } .faq__wireframe polyline { fill: none; stroke: var(--color-accent); stroke-width: 1.5; } .faq__list { max-width: 760px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__item:first-child { border-top: 1px solid var(--color-border); } .faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); text-align: left; font-size: var(--fs-sub); font-weight: var(--fw-subheading); color: var(--color-ink); transition: color var(--dur-fast) ease, background var(--dur-fast) ease; } .faq__question:hover { color: var(--color-accent); background: rgba(0, 127, 126, 0.03); } .faq__icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out-soft); } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--color-accent); transform: translate(-50%, -50%); } .faq__icon::before { width: 14px; height: 1.5px; } .faq__icon::after { width: 1.5px; height: 14px; } .faq__item.is-open .faq__icon { transform: rotate(45deg); } .faq__answer { max-height: 0; opacity: 0; overflow: hidden; padding: 0 var(--sp-2); color: var(--color-ink-soft); transition: max-height var(--dur-med) var(--ease-out-soft), opacity var(--dur-fast) ease, padding var(--dur-med) ease; } .faq__item.is-open .faq__answer { max-height: 320px; opacity: 1; padding: 0 var(--sp-2) var(--sp-4); } .faq__answer p { max-width: 62ch; } @media (max-width: 720px) { .faq__question { font-size: var(--fs-body); padding: var(--sp-3) var(--sp-1); } }