/*
 * The services nav (see ServiceIndexNav.tsx), ported from the prototype's
 * pages/WhatWeDo/ServiceIndex.module.css (.side, .eyebrow, .nav*, .pill).

 * Pinning: .side is sticky (top: --p2-pin, set from the Pin at prop), which
 * works when the host has no box of its own (display: contents) and .side is
 * the grid item; the component also styles its host sticky from code for the
 * case where the host is a block. Whichever has the box pins.
 */

/* A code component's Shadow DOM doesn't inherit the page's box-sizing reset or font smoothing. */
.yCYNWlH2XkvpsnRssGOz,
.yCYNWlH2XkvpsnRssGOz *,
.yCYNWlH2XkvpsnRssGOz *::before,
.yCYNWlH2XkvpsnRssGOz *::after {
  box-sizing: border-box;
}

.yCYNWlH2XkvpsnRssGOz {
  position: sticky;
  top: var(--p2-pin, 200px);
  align-self: start;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary, #171717);
}

/* The eyebrow (Utility / Eyebrow), 24px over the nav at 1728, in from the left as far as the nav's labels (their pills' padding). */
.TKxySls84HoB0wVh_7HP {
  margin: 0 0 max(16px, 1.39vw);
  padding-left: 24px;
  color: var(--text-primary, #171717);
  font-size: var(--type-eyebrow-size, 16px);
  font-weight: var(--type-eyebrow-weight, 600);
  line-height: var(--type-eyebrow-lh, 22px);
  letter-spacing: var(--type-eyebrow-ls, 4px);
  text-transform: uppercase;
}

.K8i89kLP8ctZQjRajeii {
  --gap: 4px;
  --item-h: calc(var(--type-large-lh, 26px) + 24px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The pill behind the one being read: the row's colour (brand blue until a
 * row is read), an item tall, sliding to it (every item the one height: a
 * line of Body Large in 12px of padding).
 */
.Hgws965Jd01y0NKjOhOd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--item-h);
  border-radius: 999px;
  background: var(--hue, var(--action-primary-default, #0073e6));
  translate: 0 calc(var(--current, 0) * (var(--item-h) + var(--gap)));
  transition:
    translate 500ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 500ms ease;
  pointer-events: none;
}

/* Each service's key words: Body Large, SemiBold, soft black; on the pill, the ink that reads on its colour. */
.w1ee5HFe725Ejzfh8KbJ {
  position: relative;
  display: block;
  width: 100%;
  height: var(--item-h);
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-primary, #171717);
  font: inherit;
  font-size: var(--type-large-size, 18px);
  font-weight: var(--type-weight-semibold, 600);
  line-height: var(--type-large-lh, 26px);
  letter-spacing: var(--type-large-ls, 0);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 350ms ease;
}

.w1ee5HFe725Ejzfh8KbJ:hover {
  color: var(--action-primary-default, #0073e6);
}

.w1ee5HFe725Ejzfh8KbJ[aria-current='true'],
.w1ee5HFe725Ejzfh8KbJ[aria-current='true']:hover {
  color: var(--ink, var(--text-inverse, #ffffff));
}

.w1ee5HFe725Ejzfh8KbJ:focus-visible {
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}

/* On the canvas, with no rows yet. */
.i3FdLuh85K4voE3Rt_zS {
  margin: 0;
  padding: 12px 24px;
  color: var(--neutral-700, #353535);
  font-size: var(--type-default-size, 16px);
  line-height: var(--type-default-lh, 23px);
}

/* Under 992px: no nav; the eyebrow alone, close over the rows. */
@media (max-width: 991px) {
  .TKxySls84HoB0wVh_7HP {
    margin-bottom: 0;
    padding-left: 0;
  }

  .J27_PszbDkefyvSxFpyN {
    display: none;
  }

  .yCYNWlH2XkvpsnRssGOz {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Hgws965Jd01y0NKjOhOd,
  .w1ee5HFe725Ejzfh8KbJ {
    transition: none !important;
  }
}