/* our-work — externalised head <style> (§9.3) */
/* Page-scoped: widen the shared .cases-grid to 3 columns on this page only */
    .our-work-grid { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 1024px) { .our-work-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 860px) { .our-work-grid { grid-template-columns: 1fr; } }
    .our-work-empty { text-align: center; color: var(--body); margin-top: 1rem; }
    /* .case-card's shared "display: flex" beats the browser's default [hidden]
       rule, so a filtered-out card would stay visible without this override. */
    #casesGrid .case-card[hidden] { display: none; }
    /* Decorative, non-functional filter pill shown under the "Our work" intro copy.
       Custom-built (not a native <select>) so the highlight colour can be
       branded orange — a native <select>'s option list is OS-rendered and its
       highlight colour can't be styled with CSS in any browser. */
    .our-work-filter { display:flex; justify-content:center; margin: 2rem 0 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%);
      min-width: 280px; 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);
      white-space: nowrap;
    }
    .custom-select__list li:hover,
    .custom-select__list li:focus-visible,
    .custom-select__list li[aria-selected="true"] { background: var(--orange); color: #fff; }