/* ============================================
   SECTION: FAQ
   Cream background runs full-bleed; inner content
   capped at 1240 so it aligns with the header.
   Two-column inside: intro on the left, accordion
   items on the right. Decorative swirl pinned to
   the bottom-left of the section.
   ============================================ */

.faq {
    position: relative;            /* anchor for the swirl */
    /* No overflow:hidden here — it would break position:sticky on the intro.
       The swirl clips itself via .faq__swirl. */
    padding: 100px var(--section-side-padding);
    background-color: var(--color-accent-yellow-bg);
}

.faq__inner {
    position: relative;            /* paint above the swirl */
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Decorative cream swirl in the bottom-left.
   Full-bleed clip layer so the asset can't paint outside the section
   without trapping sticky descendants of .faq. */
.faq__swirl {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.faq__swirl::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    aspect-ratio: 566 / 313;
    background: url("../../../images/decorative/vector-274.2c3d01b48edf.png") no-repeat left bottom / contain;
}

.faq__intro {
    max-width: 550px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Stick the intro while the taller FAQ column scrolls past —
       same pattern as .services-overview__intro. */
    position: sticky;
    top: 100px;                /* clears the 76px sticky navbar + breathing room */
    align-self: flex-start;
}

.faq__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-medium);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.faq__lede {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
    max-width: 468px;
}

.faq__email {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 610px;
}

.faq__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq__group-label {
    margin: 0 0 4px;
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-yellow-label);   /* #846c30 */
}

.faq-item {
    background: var(--color-white);
    border: 2px solid var(--color-accent-yellow-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.faq-item[data-open="true"] {
    border-color: var(--color-primary);
}

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 16px 20px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-strong);
}

.faq-item__question {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    letter-spacing: -0.36px;
    color: var(--color-text-strong);
    flex: 1;
}

.faq-item__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-surface-soft);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    color: var(--color-text-strong);
    transition: transform var(--transition-base), background-color var(--transition-fast);
}

.faq-item[data-open="true"] .faq-item__indicator {
    transform: rotate(180deg);
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.faq-item__panel {
    padding: 0 20px 20px;
}

.faq-item__panel p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

.faq__empty {
    color: var(--color-text-body);
    text-align: center;
    padding: var(--space-2xl);
}

@media (max-width: 1024px) {
    .faq__inner {
        grid-template-columns: 1fr;
    }
    .faq__intro {
        position: static;      /* no sticking once the layout stacks to one column */
    }
}

@media (max-width: 768px) {
    .faq {
        padding: 60px var(--section-side-padding);
    }
    .faq__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .faq__swirl::before {
        width: 60%;
    }
}

/* ----- Phones -----
   Tighter accordion rows: the chevron loses its pill so the question gets
   the width back, and the type steps down a notch. */
@media (max-width: 600px) {
    .faq__lede {
        font-size: 14px;
        line-height: 22px;
    }

    .faq__list {
        gap: 12px;
    }

    .faq-item__question {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: -0.32px;
    }

    .faq-item__indicator {
        width: 20px;
        height: 20px;
        background: none;
        border-radius: 0;
    }

    /* No pill to tint once open — just flip the chevron. */
    .faq-item[data-open="true"] .faq-item__indicator {
        background: none;
    }

    .faq-item__panel p {
        font-size: 15px;
        line-height: 24px;
    }
}