:root {
  --services-menu-w: 1200px;
  --services-menu-dark: #0f3a0f;
  --services-menu-light: #1a4a1a;
  --services-item-h: 100px;
  --services-img-h: 120px;
  --services-outline: 8px;
  --services-ease-swing: cubic-bezier(.02, .7, .25, 1);
}

/* --- MOBILE TRIGGER (Hidden on Desktop) --- */
.services-menu-mobile-bar {
  display: none;
  background: var(--services-menu-dark);
  color: #fff;
  padding: 0 20px;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.services-menu-mobile-bar span {
  font-weight: 700;
  font-size: 18px;
}

.services-menu-mobile-bar .services-icon {
  width: 24px;
  height: 18px;
  position: relative;
  transition: transform .3s ease;
}

.services-menu-mobile-bar .services-icon::before,
.services-menu-mobile-bar .services-icon::after,
.services-menu-mobile-bar .services-icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform .3s ease, top .3s ease, bottom .3s ease, opacity .3s ease;
}

.services-menu-mobile-bar .services-icon::before {
  top: 0;
}

.services-menu-mobile-bar .services-icon span {
  top: 8px;
}

.services-menu-mobile-bar .services-icon::after {
  bottom: 0;
}

/* Transition to X when open */
.services-menu-container.services-open .services-menu-mobile-bar .services-icon span {
  opacity: 0;
}

.services-menu-container.services-open .services-menu-mobile-bar .services-icon::before {
  top: 8px;
  transform: rotate(45deg);
}

.services-menu-container.services-open .services-menu-mobile-bar .services-icon::after {
  bottom: 8px;
  transform: rotate(-45deg);
}

/* --- MENU SHARED --- */
.services-menu-container {
  width: 100%;
  max-width: var(--services-menu-w);
  margin-top: -50px;
  margin-left: 0;
  padding-left: 0;
}

.services-menu {
  display: flex;
  text-decoration: none;
  margin-left: 0;
}

.services-menu-item {
  flex: 1;
  position: relative;
  cursor: pointer;
  z-index: 1;
  text-decoration: none;
  display: block;
}

.services-menu-label {
  height: var(--services-item-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.12;
}

.services-menu-label br {
  display: inline;
}

.services-menu-line {
  width: 2px;
  height: 36px;
  background: #fff;
  opacity: .9;
}

/* --- BOTTOM ACTION SHARED --- */
.services-bottom-action {
  width: 100%;
  max-width: var(--services-menu-w);
  margin: 0 auto;
  height: var(--services-item-h);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

/* --- DESKTOP (>= 1201px) --- */
@media (min-width: 1201px) {

  .services-menu-item:hover,
  .services-menu-item.services-is-hovered {
    z-index: 50;
  }

  .services-menu-item:nth-child(odd) .services-menu-label {
    background: var(--services-menu-dark);
  }

  .services-menu-item:nth-child(even) .services-menu-label {
    background: var(--services-menu-light);
  }

  .services-menu-item:nth-child(odd):hover .services-menu-label,
  .services-menu-item:nth-child(odd).services-is-hovered .services-menu-label {
    background: #144814;
  }

  .services-menu-item:nth-child(even):hover .services-menu-label,
  .services-menu-item:nth-child(even).services-is-hovered .services-menu-label {
    background: #245c24;
  }

  /* HOVER CARD */
  .services-hover-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--services-img-h) + var(--services-item-h));
    pointer-events: none;
    z-index: 999;
  }

  .services-hover-card {
    width: 100%;
    height: 100%;
    outline: var(--services-outline) solid #fff;
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(.92);
    transition:
      opacity .24s var(--services-ease-swing),
      transform .42s var(--services-ease-swing);
    box-shadow: 0 26px 55px rgba(0, 0, 0, .35);
  }

  .services-menu-item:hover .services-hover-card,
  .services-menu-item.services-is-hovered .services-hover-card {
    opacity: 1;
    transform: scale(1);
  }

  .services-hover-card img {
    width: 100%;
    height: var(--services-img-h);
    object-fit: cover;
  }

  .services-hover-bottom {
    height: var(--services-item-h);
  }

  /* BOTTOM ACTION DESKTOP */
  .services-bottom-img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    overflow: hidden;
    transition: width .42s var(--services-ease-swing);
  }

  .services-bottom-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .services-bottom-panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #008000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.08em;
    transition: width .42s var(--services-ease-swing);
  }

  .services-bottom-action:hover .services-bottom-img,
  .services-bottom-action.services-is-hovered .services-bottom-img {
    width: 35%;
  }

  .services-bottom-action:hover .services-bottom-panel,
  .services-bottom-action.services-is-hovered .services-bottom-panel {
    width: 65%;
  }
}

/* --- TABLET & MOBILE (< 1201px) --- */
@media (max-width: 1200px) {
  .services-hover-wrap {
    display: none;
  }

  .services-menu-item:nth-child(odd) .services-menu-label {
    background: var(--services-menu-dark);
  }

  .services-menu-item:nth-child(even) .services-menu-label {
    background: var(--services-menu-light);
  }

  .services-bottom-panel {
    width: 100%;
    height: 100%;
    background: #008000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.08em;
  }

  .services-bottom-img {
    display: none;
  }

  .services-menu-item:hover,
  .services-bottom-action:hover {
    filter: brightness(1.1);
  }
}

/* --- TABLET SPECIFIC FONT SCALING (768px - 1119px) --- */
@media (max-width: 1119px) and (min-width: 768px) {

  .services-menu-label {
    font-size: clamp(12px, -1.13px + 1.71vw, 18px);
    line-height: 1.12;
  }

  .services-bottom-panel {
    font-size: clamp(14px, 0.87px + 1.71vw, 20px);
  }
}

/* --- MOBILE (<= 767px) --- */
@media (max-width: 767px) {
  .services-menu-container {
    margin-top: 0;
  }

  .services-menu-mobile-bar {
    display: flex;
  }

  .services-menu {
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .services-menu-container.services-open .services-menu {
    max-height: 800px;
  }

  .services-menu-label {
    height: 70px;
    font-size: clamp(17px, 4.5vw, 21px);
    line-height: 1.12;
    padding: 0 20px;
  }

  .services-menu-label br {
    display: none;
    content: ' ';
  }

  .services-menu-line {
    height: 24px;
  }

  .services-bottom-action {
    height: 70px;
  }

  .services-bottom-panel {
    font-size: calc(1em - 1px);
    text-align: center;
    padding: 0 20px;
    background: #008000;
    letter-spacing: 0.08em;
  }
}

/* --- ACCESSIBILITY FOCUS --- */
.services-menu-item:focus-visible,
.services-bottom-action:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: -3px;
}