.slidemenu {
  font-family: 'Work Sans', sans-serif; /* same as gea.css */
  max-width: 100%;
  margin: 60px auto;
  overflow: hidden;
  text-align: center;
}

/* Hide radio buttons */
.slide-toggle {
  display: none;
}

/* Labels ABOVE the bar */
.slidemenu label {
  width: 25%;
  float: left;
  font-size: 21px;              /* same size as your H2 / common-content */
  font-weight: 200;             /* ultra-thin like your h1/h2/p */
  color: var(--mywhite);
  opacity: 0.40;
  padding-bottom: 12px;         /* spacing ABOVE the bar */
  transition: all 220ms ease;
}

/* Hover effect */
.slidemenu label:hover {
  opacity: 0.75;
  color: var(--myblue);
  cursor: pointer;
}

/* Active label */
.slidemenu .slide-toggle:checked + label {
  opacity: 1;
  color: var(--mywhite);
}

/* Slider bar */
.slider {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}

.slider .bar {
  width: 25%;
  height: 3px;
  background: var(--myblue);
  border-radius: 4px;
  transition: all 200ms ease;
}

/* Sliding logic */
.slidemenu #slide-item-1:checked ~ .slider .bar { margin-left: 0%; }
.slidemenu #slide-item-2:checked ~ .slider .bar { margin-left: 25%; }
.slidemenu #slide-item-3:checked ~ .slider .bar { margin-left: 50%; }
.slidemenu #slide-item-4:checked ~ .slider .bar { margin-left: 75%; }