@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-extrabold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

.home-service-nav {
  background: #f7f9f7;
  border-bottom: 1px solid #d6dfdc;
}

.home-service-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.home-service-links > li {
  min-width: 0;
}

.home-service-links > li + li {
  border-left: 1px solid #d6dfdc;
}

.service-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 114px;
  height: 100%;
  padding: 22px 14px;
  color: #14272e;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(23px, 1.95vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .18s, background-color .18s;
}

.service-choice-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--service-colour);
}

.service-choice-label {
  min-width: 0;
  flex: 1;
  overflow-wrap: break-word;
}

.service-choice > svg {
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--service-colour);
}

.service-choice-maintenance {
  --service-colour: #17637a;
  --service-tint: #e8f3f6;
}

.service-choice-farm {
  --service-colour: #355a38;
  --service-tint: #edf2e6;
}

.service-choice-storage {
  --service-colour: #806322;
  --service-tint: #f2efe5;
}

.service-choice-portequip {
  --service-colour: #436c44;
  --service-tint: #e9f0e3;
}

.service-choice:hover,
.service-choice:focus-visible {
  color: var(--service-colour);
  background: var(--service-tint);
}

.service-choice:focus-visible {
  outline: 3px solid var(--service-colour);
  outline-offset: -4px;
}

@media (max-width: 1280px) {
  .service-choice {
    padding: 20px 12px;
    gap: 8px;
    font-size: clamp(21px, 1.9vw, 25px);
  }
}

@media (max-width: 760px) {
  .home-service-links {
    grid-template-columns: 1fr;
  }

  .home-service-links > li + li {
    border-left: 0;
    border-top: 1px solid #d6dfdc;
  }

  .service-choice {
    min-height: 63px;
    padding: 16px 4px;
    gap: 10px;
    font-size: clamp(24px, 7.6vw, 29px);
  }

  .service-choice-farm {
    font-size: clamp(20px, calc(8.5vw - 7px), 29px);
  }

  .service-choice > svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-choice {
    transition: none;
  }
}