/* selr-nav.css — pairs with selr-nav.js.
 *
 * Five items in the bar (Workshops · Services · Case studies · Gallery ·
 * About us). The template sized the pill for four: 450px links container,
 * 383px row, hover selector 25% wide sliding under items 2-4 with 25/50/75%
 * spacers. Re-base to fifths and give the row room. Case studies (template
 * item 1) now sits THIRD, About us (template item 3) sits FIFTH.
 *
 * Desktop only: below 1200px the template swaps to the phone menu (a column).
 */
[data-selr-nav-hidden] {
  display: none !important;
}

@media (min-width: 1200px) {
  .framer-fula0 .framer-1n7ywq0 {
    width: 610px !important;
  }
  .framer-SHJYb.framer-s8enno:not(.framer-v-1bcu2px) {
    width: 540px !important;
  }
  .framer-fula0 .framer-zlutz2 {
    width: 20% !important;
  }
  .framer-fula0.framer-v-7z5dbg .framer-zlutz2 {
    margin-left: 40%;
  }
  .framer-fula0.framer-v-9lxek9 .framer-kgwf81 {
    width: 80% !important;
  }
}

/* The injected items carry no React hover state, so give them the same
 * quiet hover the template links show: the brand purple on the label. */
[data-selr-nav] a:hover .framer-text {
  color: rgb(103, 54, 226) !important;
}

/* ---------- our hover pill (2026-08-19) ----------
 * Replaces the template's variant-driven selector, which was sized off the
 * 610px row instead of the 540px link group (28px right, 14px too wide) and
 * ignored the three injected items. selr-nav.js measures the hovered item and
 * moves this one under it. Overshoot curve + 400ms, the site's structural move.
 * The template bar stays in the DOM (React owns it) but never shows. */
@media (min-width: 1200px) {
  .framer-fula0 .framer-zlutz2 { opacity: 0 !important; }
  .framer-fula0 .framer-s8enno { position: relative; }
  .framer-fula0 .framer-s8enno > [data-framer-name^="Nav Item"] { position: relative; z-index: 1; }
  .selr-nav-pill {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: 0; height: 100%;
    border-radius: 30px; background: #6736E2;
    opacity: 0; pointer-events: none;
    transform: translateX(0);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                width .4s cubic-bezier(.22, 1, .36, 1),
                opacity .3s cubic-bezier(.4, 0, .2, 1);
  }
  .selr-nav-pill.is-on { opacity: 1; }
  /* Framer keeps a template item's hover state (white label) while the pointer
     sits on an injected clone it knows nothing about, so pin every label that
     is NOT under our pill back to ink. */
  .framer-fula0 .framer-s8enno > [data-framer-name^="Nav Item"]:not(.is-selr-hover) .framer-text {
    color: #242424 !important;
    transition: color .3s cubic-bezier(.44, 0, .56, 1);
  }
  /* label over the pill reads white, template item or injected clone alike */
  .framer-fula0 .framer-s8enno > .is-selr-hover .framer-text,
  .framer-fula0 .framer-s8enno > [data-selr-nav].is-selr-hover a:hover .framer-text {
    color: #FCFCFA !important;
    transition: color .3s cubic-bezier(.44, 0, .56, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .selr-nav-pill { transition: opacity .01s !important; }
}