/* MotionSites Services proportions. Scoped to the formal About module. */
.about-services {
  --services-radius: 40px;
  position: relative; isolation: isolate;
  padding: 80px 20px;
  border-radius: var(--services-radius) var(--services-radius) 0 0;
  color: #0c0c0c; background: #fff;
  font-family: 'Kanit', 'PingFang SC', sans-serif;
}
.about-services-heading {
  margin: 0 0 64px; text-align: center;
  font-size: clamp(48px, 12vw, 160px); font-weight: 900; line-height: 1;
  letter-spacing: -.025em; text-transform: uppercase;
}
.about-services-list { max-width: 1024px; margin: 0 auto; padding: 0; list-style: none; }
.about-services-item {
  display: grid; grid-template-columns: clamp(64px, 12.5vw, 180px) minmax(0, 1fr);
  align-items: start; gap: clamp(20px, 2.8vw, 40px); padding: 32px 0;
}
.about-services-item + .about-services-item { border-top: 1px solid rgba(12, 12, 12, .15); }
.about-services-number {
  display: block; font-size: clamp(48px, 10vw, 140px); font-weight: 900; line-height: .95;
  letter-spacing: .02em; font-kerning: none; font-variant-numeric: tabular-nums;
}
.about-services-copy { min-width: 0; }
.about-services-copy h3 {
  margin: 0 0 16px; font-size: clamp(16px, 2.2vw, 33.6px); font-weight: 500;
  line-height: 1.25; text-transform: uppercase; text-wrap: balance;
}
.about-services-copy p {
  max-width: 672px; margin: 0; font-size: clamp(13.6px, 1.6vw, 20px);
  font-weight: 300; line-height: 1.625; opacity: .6; text-wrap: pretty;
}
/* The source's black Projects entry is drawn here, leaving Journey untouched. */
.about-services::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0;
  height: var(--services-radius); pointer-events: none;
  border-radius: var(--services-radius) var(--services-radius) 0 0;
  background: #0c0c0c;
}
.about-services-item:nth-child(2) { --services-delay: .1s; }
.about-services-item:nth-child(3) { --services-delay: .2s; }
.about-services [data-services-enter="pending"] { opacity: 0; transform: translate3d(0, 30px, 0); }
.about-services [data-services-enter="ready"] {
  opacity: 1; transform: translate3d(0, 0, 0);
  transition: opacity .7s cubic-bezier(.25, .1, .25, 1) var(--services-delay, 0s),
    transform .7s cubic-bezier(.25, .1, .25, 1) var(--services-delay, 0s);
}
@media (min-width: 640px) {
  .about-services { --services-radius: 50px; padding: 96px 32px; }
  .about-services-heading { margin-bottom: 80px; }
  .about-services-item { padding-block: 40px; }
}
@media (min-width: 768px) {
  .about-services { --services-radius: 60px; padding: 128px 40px; }
  .about-services-heading { margin-bottom: 112px; }
  .about-services-item { padding-block: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-services [data-services-enter] { transition: none; opacity: 1; transform: none; }
}