.service-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--page-radius);
  isolation: isolate;
}

.service-card__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.service-card__image {
  position: absolute;
  left: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  /* Self-relative centering must follow the rendered image width. */
  transform: translateX(-50%) scale(1);
  transform-origin: 50% 50%;
  transition: transform 300ms ease-out;
}

.service-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.service-card__content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  width: 426px;
  max-width: calc(100% - 48px);
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 38px;
  text-align: center;
}

.service-card--cocktails .service-card__content {
  width: 417px;
}

.service-card__copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: transform 300ms ease-out;
}

.service-card__title {
  color: var(--color-secondary-cream);
  font-weight: var(--font-weight-black);
}

.service-card--cocktails .service-card__title {
  color: var(--color-primary-lime);
}

.service-card__description {
  color: var(--color-secondary-cream);
}

.service-card__cta {
  display: flex;
  width: 187px;
  min-width: 187px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  overflow: hidden;
  border-radius: var(--button-radius);
  text-decoration: none;
  transform-origin: 50% 50%;
  transition: transform 300ms ease-out;
}

.service-card--coffee .service-card__cta {
  color: var(--color-secondary-cream);
  background: var(--color-primary-orange);
}

.service-card--cocktails .service-card__cta {
  color: var(--color-secondary-ink);
  background: var(--color-primary-lime);
}

.service-card__cta-label {
  flex: none;
  transform-origin: 50% 50%;
  transition: transform 300ms ease-out;
}

.service-card:focus-within .service-card__copy {
  transform: translateY(-9px);
}

.service-card--cocktails:focus-within .service-card__copy {
  transform: translateY(-4px);
}

.service-card--coffee:focus-within .service-card__image {
  transform: translateX(-50%) scale(1.0646);
}

.service-card--cocktails:focus-within .service-card__image {
  transform: translateX(-50%) scale(1.078);
}

.service-card--coffee:focus-within .service-card__cta {
  transform: translate(0.5px, -1px) scale(1.1551, 1.1304);
}

.service-card--cocktails:focus-within .service-card__cta {
  transform: translateY(-2px) scale(1.1551, 1.087);
}

.service-card--coffee:focus-within .service-card__cta-label {
  transform: scale(1.0391, 1.0616);
}

.service-card--cocktails:focus-within .service-card__cta-label {
  transform: scale(1.0131, 1.077);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card__copy {
    transform: translateY(-9px);
  }

  .service-card--cocktails:hover .service-card__copy {
    transform: translateY(-4px);
  }

  .service-card--coffee:hover .service-card__image {
    transform: translateX(-50%) scale(1.0646);
  }

  .service-card--cocktails:hover .service-card__image {
    transform: translateX(-50%) scale(1.078);
  }

  .service-card--coffee:hover .service-card__cta {
    transform: translate(0.5px, -1px) scale(1.1551, 1.1304);
  }

  .service-card--cocktails:hover .service-card__cta {
    transform: translateY(-2px) scale(1.1551, 1.087);
  }

  .service-card--coffee:hover .service-card__cta-label {
    transform: scale(1.0391, 1.0616);
  }

  .service-card--cocktails:hover .service-card__cta-label {
    transform: scale(1.0131, 1.077);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card__image,
  .service-card__copy,
  .service-card__cta-label,
  .service-card__cta {
    transition-duration: 0.01ms;
  }
}

.stat-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 10px 33px;
  border-radius: 8px;
  color: var(--color-secondary-ink);
  background: var(--color-secondary-cream);
  text-align: center;
}

.stat-card__number {
  position: absolute;
  top: -23px;
  left: 50%;
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--button-radius);
  color: var(--color-secondary-cream);
  background: var(--color-primary-orange);
  transform: translateX(-50%);
}

.stat-card__copy {
  max-width: 216px;
}