.project-faq {
    background: var(--color-light, #d8cbc6);
    color: var(--color-dark, #222d3a);
    padding: clamp(5rem, 10vh, 8rem) 5vw;
    scroll-margin-top: 100px;
}
.project-faq-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 8vw;
    max-width: 1600px;
    margin: auto;
}
.project-faq h2 {
    font: 400 clamp(2.4rem, 4vw, 5rem)/1.15 'Open Sans', sans-serif;
    margin: clamp(2rem, 12vh, 8rem) 0 0;
}
.project-faq h2 span { white-space: nowrap; }
.project-faq details { border-top: 1px solid var(--color-border-light, #a39185); }
.project-faq details:last-child { border-bottom: 1px solid var(--color-border-light, #a39185); }
.project-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    cursor: pointer;
    padding: 1.8rem 0;
    list-style: none;
}
.project-faq summary::-webkit-details-marker { display: none; }
.project-faq summary::marker { content: ''; }
.project-faq h3 { font: 500 1rem/1.5 'Open Sans', sans-serif; text-transform: uppercase; margin: 0; }
.project-faq-toggle {
    position: relative;
    flex: 0 0 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--color-primary-button, #b87333);
    color: #fff;
}
.project-faq-toggle::before,
.project-faq-toggle::after { content: ''; position: absolute; background: currentColor; top: 50%; left: 25%; width: 50%; height: 1px; }
.project-faq-toggle::after { transform: rotate(90deg); }
.project-faq details[open] .project-faq-toggle::after { transform: rotate(0); }
.project-faq-answer { padding: 0 4.1rem 2rem 0; }
.project-faq .project-faq-answer p { margin: 0; font-size: 1rem; line-height: 1.65; }
.project-faq summary:focus-visible { outline: 2px solid var(--color-primary-button, #b87333); outline-offset: 4px; }
@media (min-width: 721px) {
    body.--animated .project-faq { overflow-y: auto; overscroll-behavior-y: contain; }
    body.--animated .project-faq h2 { position: sticky; top: 12vh; }
}
@media (max-width: 720px) {
    .project-faq { padding: 4rem 6vw; }
    .project-faq-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .project-faq h2 { margin: 0; }
    .project-faq summary { gap: 1rem; padding: 1.4rem 0; }
    .project-faq-answer { padding-right: 0; }
}