/* ============================================================ FAQ — LAYOUT C Two-column accordion grid. Questions split into two columns. Each column has its own independent accordion behavior. ============================================================ */ .faq-c { padding: 6rem 0; background-color: var(--color-surface); transition: background-color 0.4s ease; } .faq-c-header { text-align: center; max-width: 600px; margin: 0 auto 4rem; } .faq-c-header .section-subtitle { margin: 0 auto; } .faq-c-contact-nudge { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; margin-top: 1rem; } .faq-c-contact-nudge a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; } .faq-c-contact-nudge a:hover { text-decoration-color: var(--color-primary); } /* ── Two-col grid ──────────────────────────────────────── */ .faq-c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; align-items: start; } /* ── Column ────────────────────────────────────────────── */ .faq-c-col { border-top: 1px solid var(--color-border); } /* ── Item ──────────────────────────────────────────────── */ .faq-c-item { border-bottom: 1px solid var(--color-border); transition: border-color 0.3s ease; } .faq-c-item.is-open { border-bottom-color: var(--color-primary); } .faq-c-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0; cursor: pointer; background: none; border: none; width: 100%; text-align: left; user-select: none; } .faq-c-question-text { font-family: var(--font-heading); font-size: 0.98rem; font-weight: 700; color: var(--color-heading); line-height: 1.4; transition: color 0.2s ease; } .faq-c-item.is-open .faq-c-question-text { color: var(--color-primary); } .faq-c-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; background-color: var(--card-bg); } .faq-c-item.is-open .faq-c-icon { background-color: var(--color-primary); border-color: var(--color-primary); transform: rotate(45deg); } .faq-c-icon svg { width: 10px; height: 10px; stroke: var(--color-text-muted); fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke 0.3s ease; } .faq-c-item.is-open .faq-c-icon svg { stroke: var(--color-btn-text); } .faq-c-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-c-item.is-open .faq-c-answer { max-height: 300px; } .faq-c-answer-inner { padding-bottom: 1.35rem; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.8; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 768px) { .faq-c-grid { grid-template-columns: 1fr; gap: 0; } .faq-c-col:last-child { border-top: none; } }