The breadcrumb dropdown knows every service and every colour

Every service page has a navigation bar at the top. It looks like a breadcrumb — my logo on the left, a slash, then the current service name. The service name is a button. Tap it and a dropdown appears listing all six sections — Software, Accessibility, Audio, Production, Musician, and Notes. Each item in the dropdown has its own icon rendered in that service's accent colour. The active service gets a tinted background using color-mix to blend twelve percent of the accent into transparent. The component is called ServiceNav. It takes the current service name as a prop, finds the matching entry in a navLinks array, and extracts the accent colour based on the current theme. Dark mode gets the -400 shade. Light mode gets the -600 or -700 shade. The dropdown button has aria-expanded and aria-haspopup attributes so assistive technology announces whether the menu is open or closed. A full-viewport invisible overlay behind the dropdown closes the menu when you tap outside it. The overlay is aria-hidden because it is decorative — screen readers close the menu through the button. On desktop, two action buttons appear to the right — Call me about a project and E-mail your dream. Both link to anchor sections in the sidebar accordion using hash fragments. Both buttons are styled with the current service accent — border, text, and a ten-percent tinted background for the call button, solid fill for the email button. Both hit the 44-pixel minimum touch target. The ServiceNav does not know which service it is rendering. It reads a prop and picks a colour. One component, six services, six colour pairs, two action buttons, and a dropdown that closes on outside click and keyboard escape.