/* =========================================================
   08-service-pills.css — SERVICE PILLS COMPONENT
   Depends on: 01-tokens.css
   ========================================================= */

.services-label {
  font-family: var(--font-serif);
  font-size: var(--fs-xs); letter-spacing: .42em;
  color: var(--clr-dim); text-transform: uppercase;
  margin-bottom: var(--sp-4); text-align: center;
}

.service-pill {
  background: var(--clr-bg-700);
  border: 1px solid rgba(200,137,10,.22);
  border-radius: 4px;
  padding: var(--sp-4) var(--sp-6);
  text-align: center;
  flex: 1 1 150px; max-width: 190px;
  transition: border-color var(--dur-med) ease,
              box-shadow   var(--dur-med) ease,
              transform    var(--dur-fast) ease;
  cursor: default;
}
.service-pill:hover {
  border-color: var(--clr-gold-400);
  box-shadow: 0 0 22px rgba(200,137,10,.18);
  transform: translateY(-3px);
}
.service-pill__icon { font-size: 1.6rem; display: block; margin-bottom: var(--sp-2); line-height: 1; }
.service-pill__name {
  font-family: var(--font-serif);
  font-size: var(--fs-xs); letter-spacing: .18em;
  color: var(--clr-gold-400); text-transform: uppercase; line-height: 1.4;
}