/* faqs — externalised head <style> (§9.3) */
/* Page-scoped: single category-filter dropdown for the consolidated FAQ module.
       Custom-built (not a native <select>) so the highlight colour can be branded
       orange — same pattern as the "Our work" service filter. */
    .faq-cat-filter { display: flex; justify-content: center; margin: 0 0 clamp(2rem, 4vw, 3rem); position: relative; }
    .custom-select { position: relative; }
    .custom-select__toggle {
      display: inline-flex; align-items: center; gap: .85rem; font: inherit; font-weight: 700;
      background: var(--orange); color: #fff; border: 0; border-radius: 999px;
      padding: .9rem 1.6rem; cursor: pointer;
    }
    .custom-select__toggle svg { width: 1.1rem; height: 1.1rem; transition: transform .2s ease; }
    .custom-select.open .custom-select__toggle svg { transform: rotate(180deg); }
    .custom-select__list {
      position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%);
      /* Two balanced columns (17 categories → ~9 rows tall instead of 17) so the
         whole list fits without an internal scroll on most screens. */
      width: max-content; min-width: 480px; max-width: min(640px, 92vw);
      columns: 2; column-gap: .4rem;
      max-height: 420px; overflow-y: auto; background: #fff; border-radius: var(--radius-sm);
      box-shadow: 0 24px 60px rgba(16, 16, 60, .16); padding: .4rem; z-index: 20; list-style: none;
    }
    .custom-select__list[hidden] { display: none; }
    .custom-select__list li {
      padding: .65rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--ink);
      break-inside: avoid;
    }
    .custom-select__list li:hover,
    .custom-select__list li:focus-visible,
    .custom-select__list li[aria-selected="true"] { background: var(--orange); color: #fff; }
    .faq-empty { text-align: center; color: var(--body); margin-top: 1rem; }
    @media (max-width: 600px) {
      /* Screen's too narrow for 2 columns to read comfortably — back to 1 column,
         with more height so fewer options need an internal scroll. */
      .custom-select__list { columns: 1; min-width: 260px; max-height: 460px; }
    }