.hire-customer-carousel {
  /* 48px 页面边距 + 24px 轮播内边距；超过最大内容宽度后继续居中。
     只用绝对长度，避免同一百分比在 scroll-padding 中换参照系。 */
  --hire-customer-carousel-bleed: max(
    72px,
    calc((100vw - 1128px) / 2)
  );
  --hire-customer-carousel-gap: 12px;
  box-sizing: border-box;
  container: hire-customer-carousel / inline-size;
  position: relative;
  width: 100%;
  margin: 80px 0 0;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hire-customer-carousel__stage {
  position: relative;
  width: 100%;
}

.hire-customer-carousel__viewport {
  box-sizing: border-box;
  width: calc(100% + var(--hire-customer-carousel-bleed) * 2);
  margin-inline: calc(var(--hire-customer-carousel-bleed) * -1);
  padding-inline: var(--hire-customer-carousel-bleed);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--hire-customer-carousel-bleed);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.hire-customer-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.hire-customer-carousel__track {
  display: flex;
  gap: var(--hire-customer-carousel-gap);
  width: 100%;
  min-width: 0;
  transform: none;
  transition: none;
}

/* The track itself is only 100% wide, so its trailing padding ends behind the
   slides that overflow it instead of after the final slide. A generated flex
   item makes the end gutter part of the actual flex flow and therefore of the
   scroll range; the preceding gap is included in that gutter. */
.hire-customer-carousel__track::after {
  content: "";
  flex: 0 0
    max(
      0px,
      calc(
        var(--hire-customer-carousel-bleed) -
          var(--hire-customer-carousel-gap)
      )
    );
  pointer-events: none;
}

.hire-customer-carousel__slide {
  min-width: 0;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hire-customer-carousel__nav {
  position: absolute;
  top: 50%;
  right: -20px;
  left: -20px;
  z-index: 5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  opacity: 1;
  transform: translateY(-50%);
  transition:
    opacity 160ms ease,
    visibility 0s linear;
  visibility: visible;
}

.hire-customer-carousel__nav-button {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 160ms ease,
    background 160ms ease;
}

.hire-customer-carousel__nav-button::before {
  position: absolute;
  inset: -2px -12px;
  content: "";
}

.hire-customer-carousel__nav-button:hover {
  background: #fff;
}

.hire-customer-carousel__nav-button:active {
  background:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    #fff;
}

.hire-customer-carousel__nav-button:focus-visible,
.hire-customer-carousel__indicator-item:focus-visible {
  outline: 2px solid rgba(0, 124, 255, 0.32);
  outline-offset: 3px;
}

.hire-customer-carousel__nav-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.hire-customer-carousel__indicator {
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire-customer-carousel__indicator-rail {
  position: relative;
  height: 16px;
  flex: 0 0 auto;
  transition-property: width;
  transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  will-change: width;
}

.hire-customer-carousel__indicator-item {
  appearance: none;
  position: absolute;
  top: 0;
  height: 16px;
  display: block;
  padding: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition-property: left, width, background-color;
  transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  will-change: left, width;
}

.hire-customer-carousel__indicator-item.is-active {
  z-index: 1;
}

.hire-customer-carousel__indicator-track {
  position: relative;
  width: 100%;
  height: 8px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hire-customer-card-background);
  pointer-events: none;
  transition: background-color 1s ease-in-out;
}

.hire-customer-carousel__indicator-fill,
.hire-customer-carousel__indicator-exit {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  width: 0;
  max-width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #007cff;
}

.hire-customer-carousel__indicator-fill {
  animation: hireCustomerIndicatorProgress
    var(--hire-customer-cycle-duration, 4000ms) linear forwards;
}

.hire-customer-carousel__indicator-fill.is-paused {
  animation-play-state: paused;
}

.hire-customer-carousel__indicator-exit {
  width: var(--hire-customer-exit-width);
  opacity: 1;
  animation-name: hireCustomerIndicatorExit;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  animation-fill-mode: forwards;
}

.hire-customer-carousel__indicator-item:active
  .hire-customer-carousel__indicator-track {
  background:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    var(--hire-customer-card-background);
}

.hire-customer-carousel__indicator-item:active
  .hire-customer-carousel__indicator-fill,
.hire-customer-carousel__indicator-item:active
  .hire-customer-carousel__indicator-exit {
  background: #007cff;
}

@keyframes hireCustomerIndicatorProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes hireCustomerIndicatorExit {
  from {
    width: var(--hire-customer-exit-width);
    opacity: 1;
  }

  to {
    width: 100%;
    opacity: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hire-customer-carousel__nav {
    opacity: 0;
    transition:
      opacity 160ms ease,
      visibility 0s linear 160ms;
    visibility: hidden;
  }

  .hire-customer-carousel:hover .hire-customer-carousel__nav,
  .hire-customer-carousel:focus-within .hire-customer-carousel__nav {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hire-customer-carousel__viewport {
    scroll-behavior: auto;
  }

  .hire-product-tab__indicator,
  .hire-product-tab__indicator-track {
    transition: none;
  }

  .hire-product-tab__indicator-fill {
    width: 100%;
    animation: none;
  }

  .hire-product-tab__indicator-exit {
    display: none;
    animation: none;
  }

  .hire-customer-carousel__track,
  .hire-customer-carousel__indicator-rail,
  .hire-customer-carousel__indicator-item,
  .hire-customer-carousel__indicator-track,
  .hire-customer-quote {
    transition: none;
  }

  .hire-customer-carousel__indicator-fill {
    width: 100%;
    animation: none;
  }

  .hire-customer-carousel__indicator-exit {
    display: none;
    animation: none;
  }
}

.hire-customer-quote {
  box-sizing: border-box;
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 16px;
  color: var(--hire-ink);
  background: var(--hire-customer-card-background);
  transition: background-color 1s ease-in-out;
}

.hire-customer-quote__body {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-style: normal;
}

.hire-customer-quote__body p {
  min-width: 0;
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.2px;
}

.hire-customer-quote__mark {
  flex: 0 0 auto;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -1.2px;
}

.hire-customer-quote__mark--open {
  line-height: 60px;
}

.hire-customer-quote__tail {
  white-space: nowrap;
}

.hire-customer-quote__mark--close {
  position: relative;
  top: 4px;
  margin-left: 12px;
  line-height: 0;
  vertical-align: -0.12em;
}

.hire-customer-quote__author {
  min-width: 0;
  margin: 0;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hire-customer-quote__avatars {
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.hire-customer-quote__avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: block;
  object-fit: cover;
  background: #ffffff;
  border-radius: 999px;
}

.hire-customer-quote__avatar--team {
  position: relative;
  z-index: 0;
}

.hire-customer-quote__avatars.has-person-avatar
  .hire-customer-quote__avatar--team {
  margin-right: -10px;
}

.hire-customer-quote__avatar--person {
  position: relative;
  z-index: 1;
}

.hire-customer-quote__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hire-customer-quote__name {
  color: var(--hire-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3125px;
  opacity: 0.8;
}

.hire-customer-quote__meta {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--hire-ink-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1504px;
}

.hire-cases {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.hire-case__result {
  margin: 0 0 18px;
  color: #007cff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hire-case h3 {
  font-size: 30px;
  line-height: 38px;
}

.hire-case__roles {
  margin: 18px 0 0;
  color: var(--hire-ink-secondary);
  font-size: 16px;
  line-height: 28px;
  white-space: pre-line;
}