/* Section: FAQ.
   Figma: Meowgical Web (Updated) — node 3159:7941, frame 1512x982.
   The 1512 frame maps 1:1 onto the theme container: 80px gutters, 1352px of
   content, intro on columns 1-4 (436px), accordion on columns 6-12. Type is
   sized off the global tokens, which land on the designed 80/56/24/16 at
   1512 and clamp down from there — the section still fits one viewport,
   but the list scrolls instead of the type shrinking to fit. */

:is(.section-faq, .services-faq) {
    /* Nav clearance: 112px at the designed viewport. */
    --faq-nav: clamp(3.5rem, 11.4svh, 7rem);
    /* Width the stable scrollbar gutter reserves on the list. */
    --faq-scrollbar: 6px;
    /* The mascot sits flush to the frame bottom in the design. */
    --faq-pad-b: 0rem;
    /* 40px gap between the intro's title / copy / CTA blocks. */
    --faq-intro-gap: clamp(1.5rem, 2.65vw, 2.5rem);
    /* 24px — item padding, and the gap between items. */
    --faq-gap: clamp(1.125rem, 1.6vw, 1.5rem);
    --faq-item-pad: clamp(1.125rem, 1.6vw, 1.5rem);
    /* Raleway 24/-0.75px in the design. */
    --faq-ls: -0.03125em;

    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--faq-nav) 0 var(--faq-pad-b);
    background: var(--color-white);
    color: var(--color-dark-purple);
    box-sizing: border-box;
}

.section-bg:has(> :is(.section-faq, .services-faq)) {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

:is(.section-faq, .services-faq) > .container.grid {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    align-items: center;
}

:is(.section-faq, .services-faq) .services-faq__grid {
    position: relative;
    row-gap: 0;
}

/* ── Intro column (Figma: left 80, top 112, width 436) ───────── */

:is(.section-faq, .services-faq) > .container.grid > .services-faq__intro {
    position: relative;
    z-index: 2;
    grid-column: 1 / span 4;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--faq-intro-gap);
    align-self: start;
    min-height: 0;
    padding-top: 0;
}

:is(.section-faq, .services-faq) .services-faq__title {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}

/* Display/H-Display — Philosopher Bold Italic 80/88. */
:is(.section-faq, .services-faq) .services-faq__title em {
    font-size: var(--text-display);
    font-style: italic;
    line-height: var(--lh-display);
}

/* Headings/H2 — Philosopher Bold 56/64. */
:is(.section-faq, .services-faq) .services-faq__title span {
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
}

/* Sub-heading — Raleway Regular 24/32, tracking -0.75. */
:is(.section-faq, .services-faq) .services-faq__copy {
    width: 100%;
    max-width: 27.25rem;
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title5);
    font-weight: var(--fw-regular);
    line-height: var(--lh-title5);
    letter-spacing: var(--faq-ls);
}

:is(.section-faq, .services-faq) .services-faq__question-cta {
    display: grid;
    gap: 1rem;
    margin-top: 0;
    justify-items: start;
}

/* Sub-heading-BOLD — Raleway SemiBold 24/40, tracking -0.75. */
:is(.section-faq, .services-faq) .services-faq__question-cta p {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title5);
    font-weight: var(--fw-semibold);
    line-height: 1.6667;
    letter-spacing: var(--faq-ls);
}

:is(.section-faq, .services-faq) .services-faq__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0.75rem 3rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-decoration: none;
    /* Shadow/xs */
    box-shadow: 0 1px 2px 0 rgba(198, 228, 246, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── Mascot (Figma: left 61, top 809, 455x174) ───────────────── */
/* Its right edge lines up with the intro column; the extra 19px bleeds
   past the gutter, which the section's overflow: hidden clips. */

:is(.section-faq, .services-faq) > .container.grid > .services-faq__mascot {
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    z-index: 1;
    width: min(455px, calc(100% + 19px), 47svh);
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* ── Accordion (Figma: 792 wide, 24px gap, centred on the frame) ── */

:is(.section-faq, .services-faq) > .container.grid > .services-faq__list {
    position: relative;
    z-index: 2;
    grid-column: 6 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Safe, because this box scrolls: with plain centre alignment, once the
       open answers outgrew it the overflow was split between both ends, and
       the part above the top edge (the first question, with every answer
       open) could not be scrolled back to. Safe centring falls back to the
       top as soon as the stack no longer fits. */
    justify-content: safe center;
    gap: var(--faq-gap);
    min-height: 0;
    /* The design centres the stack on the whole frame, not on the box left
       under the nav — so pull it back up by half the clearance, and cap it
       at a height that keeps that centred stack clear of the nav anyway. */
    /* align-self: center splits the margin, so a full -nav shifts by half. */
    margin-top: calc(var(--faq-nav) * -1);
    max-height: calc(100svh - 2 * var(--faq-nav));
    overflow-y: auto;
    /* Reserve the scrollbar so opening a panel can't shift the stack, but
       bleed the reserved strip into the gutter so the tabs still end on the
       container's right edge. */
    scrollbar-gutter: stable;
    margin-right: calc(-1 * var(--faq-scrollbar));
    padding-right: 0;
}

@supports not selector(::-webkit-scrollbar) {
    :is(.section-faq, .services-faq) .services-faq__list {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) rgba(73, 71, 184, 0.14);
    }
}

:is(.section-faq, .services-faq) .services-faq__list::-webkit-scrollbar {
    width: 6px;
}

:is(.section-faq, .services-faq) .services-faq__list::-webkit-scrollbar-track {
    background: transparent;
}

:is(.section-faq, .services-faq) .services-faq__list::-webkit-scrollbar-thumb {
    background: rgba(73, 71, 184, 0.25);
    border-radius: 999px;
}

:is(.section-faq, .services-faq) .services-faq__list::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

:is(.section-faq, .services-faq) .services-faq__item {
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--color-soft-purple);
    border-radius: 16px;
    background: var(--color-light-purple);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

:is(.section-faq, .services-faq) .services-faq__item.is-open {
    border-color: var(--color-primary);
}

:is(.section-faq, .services-faq) .services-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    min-height: 0;
    padding: var(--faq-item-pad);
    border: 0;
    background: transparent;
    color: var(--color-dark-purple);
    cursor: pointer;
    text-align: left;
}

/* Sub-heading-BOLD — Raleway SemiBold 24/40, tracking -0.75, capped at the
   578px measure the design wraps against so the plus keeps its own column. */
:is(.section-faq, .services-faq) .services-faq__q {
    flex: 0 1 578px;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title5);
    font-weight: var(--fw-semibold);
    line-height: 1.6667;
    letter-spacing: var(--faq-ls);
    overflow-wrap: break-word;
}

:is(.section-faq, .services-faq) .services-faq__icon {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--color-dark-purple);
    /* Same length and curve as the panel, so the plus finishes turning as the
       answer finishes opening. */
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.section-faq, .services-faq) .services-faq__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

:is(.section-faq, .services-faq) .services-faq__trigger[aria-expanded="true"] .services-faq__icon {
    transform: rotate(45deg);
}

:is(.section-faq, .services-faq) .services-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.section-faq, .services-faq) .services-faq__item.is-open .services-faq__panel {
    grid-template-rows: 1fr;
}

:is(.section-faq, .services-faq) .services-faq__panel-inner {
    overflow: hidden;
}

:is(.section-faq, .services-faq) .services-faq__a {
    margin: 0;
    padding: 0 var(--faq-item-pad) var(--faq-item-pad);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    font-weight: var(--fw-regular);
    line-height: var(--lh-copy);
    letter-spacing: var(--faq-ls);
}

:is(.section-faq, .services-faq) .services-faq__a > * {
    margin: 0;
}

:is(.section-faq, .services-faq) .services-faq__a > * + * {
    margin-top: 0.5rem;
}

/* Below the designed width the intro needs the fifth column to keep the
   copy on three lines; the mascot follows it so their edges stay aligned. */
@media (max-width: 1400px) {
    :is(.section-faq, .services-faq) > .container.grid > .services-faq__intro,
    :is(.section-faq, .services-faq) > .container.grid > .services-faq__mascot {
        grid-column: 1 / span 5;
    }
}

@media (max-width: 1024px) {
    :is(.section-faq, .services-faq) {
        --faq-pad-b: clamp(3rem, 6svh, 4rem);

        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        padding: clamp(4.5rem, 10svh, 6rem) 0 var(--faq-pad-b);
        align-items: flex-start;
    }

    .section-bg:has(> :is(.section-faq, .services-faq)) {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
    }

    :is(.section-faq, .services-faq) > .container.grid {
        row-gap: 2rem;
    }

    :is(.section-faq, .services-faq) > .container.grid > .services-faq__intro {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    :is(.section-faq, .services-faq) > .container.grid > .services-faq__list {
        grid-column: 1 / -1;
        grid-row: auto;
        max-height: none;
        overflow-y: visible;
        margin-top: 0;
        margin-right: 0;
        padding-right: 0;
    }

    :is(.section-faq, .services-faq) > .container.grid > .services-faq__mascot {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
        width: min(70vw, 455px);
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    :is(.section-faq, .services-faq) {
        --faq-intro-gap: 1.5rem;

        padding-top: 4.5rem;
        padding-bottom: 3rem;
    }

    :is(.section-faq, .services-faq) .services-faq__title {
        gap: 0.35rem;
    }

    :is(.section-faq, .services-faq) .services-faq__copy {
        max-width: none;
        letter-spacing: -0.02em;
    }

    /* The intro column is flex-start-aligned, so the CTA group has to opt
       into the full measure before the button can fill it. */
    :is(.section-faq, .services-faq) .services-faq__question-cta {
        align-self: stretch;
        justify-items: stretch;
    }

    :is(.section-faq, .services-faq) .services-faq__button {
        width: 100%;
        padding-inline: 1.5rem;
    }

    :is(.section-faq, .services-faq) > .container.grid > .services-faq__list {
        gap: 0.85rem;
    }

    :is(.section-faq, .services-faq) .services-faq__trigger {
        gap: 1rem;
        padding: 1.1rem 1.25rem;
    }

    :is(.section-faq, .services-faq) .services-faq__q {
        flex: 1 1 auto;
        line-height: 1.35;
        letter-spacing: -0.02em;
    }

    :is(.section-faq, .services-faq) .services-faq__icon {
        width: 20px;
        height: 20px;
    }

    :is(.section-faq, .services-faq) .services-faq__a {
        padding: 0 1.25rem 1.1rem;
    }
}

/* Reduced motion: answers open and close at once, the plus turns at once. */
@media (prefers-reduced-motion: reduce) {
    :is(.section-faq, .services-faq) .services-faq__icon,
    :is(.section-faq, .services-faq) .services-faq__panel {
        transition: none;
    }
}