The accordion panel is a button when collapsed and a container when expanded

The FormAccordion renders up to three panels — packages, book a call, and send a brief. Each panel is an AccordionPanel component that receives an active boolean. When active is false, the panel gets role set to button, tabIndex set to 0, and an onKeyDown handler that listens for Enter and Space. When active is true, all three attributes disappear. The panel becomes a plain div with no interactive semantics. A screen reader user tabbing through the sidebar hears Book a call, button for a collapsed panel. When they activate it, the panel expands and the button role vanishes — there is nothing to activate because it is already open. The expanded panel's heading keeps its text, but the element is no longer announced as interactive. This matters because a button that does nothing when pressed is worse than no button at all. The cursor property follows the same logic. Collapsed panels set cursor to pointer through the cursor-pointer class on the outer div. The expanded panel has no cursor override so it falls back to the default arrow. The click handler itself also short-circuits on active panels — the onClick fires only when the negation of active evaluates to true. The border transitions from one pixel at the glass border colour to two pixels at the service accent. The background shifts from the glass token to a five percent color-mix of the accent, using the CSS color-mix function in srgb space. The heading text changes from white to the accent colour. Three visual cues — border width, background tint, heading colour — all driven by one boolean. The BlurReveal wrapper on each panel staggers their appearance by 100 milliseconds so the accordion builds itself visually from top to bottom. One component, one boolean, three conditional ARIA attributes, and the sidebar is fully keyboard-accessible without a single aria-expanded in sight.