/* FIXD — service selector.
   Sits on the seam between the hero and the page, overlapping the hero bottom
   on desktop. Six real tabs; a yellow indicator snaps under the active one and
   the panel title clips upward on every switch. */

.selector {
  position: relative;
  z-index: 10;
  background: var(--black);
  color: var(--white);
}
.selector__box {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.selector__inner {
  border-top: 3px solid var(--yellow);
  background: var(--graphite);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.selector__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.2rem;
  margin-bottom: 1.1rem;
}
.selector__head h2 {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-variation-settings: 'wdth' 88;
  letter-spacing: -.01em;
}
.selector__hint {
  font-size: var(--t-label);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--white-48);
}

/* --- tabs -------------------------------------------------------------- */
.selector__tabs {
  position: relative;
  display: flex;
  gap: .5rem;
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--white-16);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.selector__tabs::-webkit-scrollbar { display: none; }

.stab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: .5rem;
  min-width: 88px;
  padding: .85rem .75rem;
  border: 1px solid var(--white-16);
  border-radius: var(--r);
  background: transparent;
  color: var(--white-72);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-xs) linear,
              border-color var(--dur-xs) linear,
              background var(--dur-xs) linear;
  -webkit-tap-highlight-color: transparent;
}
.stab svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.stab:hover { color: var(--white); border-color: var(--white-48); }
.stab[aria-selected='true'] {
  color: var(--yellow);
  border-color: var(--yellow);
  background: rgba(255, 217, 0, .07);
}
/* Icons answer the switch with a short rotation, never a bounce. */
.stab[aria-selected='true'] svg { animation: tick .28s var(--ease-snap); }
@keyframes tick {
  from { transform: rotate(-16deg) scale(.9); }
  to   { transform: none; }
}

/* The yellow indicator that slides between tabs. JS writes --x and --w. */
.selector__ind {
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: 1px;
  background: var(--yellow);
  transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
  transform-origin: left center;
  transition: transform var(--dur-md) var(--ease-snap);
  pointer-events: none;
}

/* --- panel ------------------------------------------------------------- */
.spanel { display: grid; gap: 1.1rem; }
.spanel[hidden] { display: none; }

.spanel__media { aspect-ratio: 16 / 10; }
.spanel__title {
  font-size: clamp(1.6rem, 4.4vw, 2.5rem);
  font-variation-settings: 'wdth' 80;
  line-height: .92;
  margin-bottom: .5rem;
}
.spanel__copy { color: var(--white-72); max-width: 44ch; margin-bottom: 1.1rem; }
.spanel__copy b { color: var(--white); font-weight: 600; }

/* Switch choreography: title clips up into place, copy and image cross-fade
   quickly behind it. */
.js .spanel__title { clip-path: inset(0 0 100% 0); transform: translateY(.2em); }
.js .spanel.is-live .spanel__title {
  clip-path: inset(0 0 -4% 0);
  transform: none;
  transition: clip-path .34s var(--ease-snap), transform .34s var(--ease-snap);
}
.js .spanel__copy, .js .spanel__cta, .js .spanel__media { opacity: 0; }
.js .spanel.is-live .spanel__copy,
.js .spanel.is-live .spanel__cta,
.js .spanel.is-live .spanel__media {
  opacity: 1;
  transition: opacity .26s linear;
  transition-delay: .08s;
}

@media (prefers-reduced-motion: reduce) {
  .js .spanel__title { clip-path: none; transform: none; }
  .js .spanel__copy, .js .spanel__cta, .js .spanel__media { opacity: 1; }
  .selector__ind { transition: none; }
  .stab svg { animation: none; }
}

@media (min-width: 760px) {
  .spanel { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
  .spanel__media { aspect-ratio: 1 / 1; }
}

@media (min-width: 1000px) {
  .selector { margin-top: clamp(-6rem, -6vh, -3rem); }
  .selector__inner { padding: clamp(1.75rem, 2.4vw, 2.5rem); }
  .selector__tabs { gap: .6rem; overflow: visible; }
  .stab { flex: 1 1 0; min-width: 0; }
}