/* Retain the 24-track composition; Paak's bracketed indices fit the left column. */
.inner-page--services {
  --capability-description-type: var(--paak-type-section);
  --about-capability-gutter: clamp(
    8px,
    calc(8px + 10.3224 * (100vw - 390px) / 1122),
    18.3224px
  );
  --about-capability-gap: clamp(
    4px,
    calc(4px + 13.6884 * (100vw - 390px) / 1122),
    17.6884px
  );
  --about-capability-index: clamp(76px, 10vw, 152px);
  --about-capability-panel: calc(100svh - var(--paak-inner-header-height));
  --about-capability-indent: calc(
    (100% + var(--about-capability-gap)) * 4 / 11
  );
}
.about-capabilities {
  padding: 36px 0 var(--paak-lower-section-space);
}
.inner-page--services .about-capabilities > h2 {
  margin: 0 var(--about-capability-gutter) 80px;
  font-size: var(--paak-type-section);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.about-capability-folds {
  position: relative;
}
.about-capability {
  position: sticky;
  top: var(--paak-inner-header-height);
  min-height: var(--about-capability-panel);
  background: var(--paak-surface-light);
  border-radius: 13px 13px 0 0;
  border-top: 1px solid var(--paak-border-on-light);
}
.about-capability-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: var(--about-capability-gap);
  align-content: start;
  min-height: var(--about-capability-panel);
  padding: 32px var(--about-capability-gutter);
}
.inner-page--services .about-capability-number {
  grid-column: 1 / span 6;
  grid-row: 1;
  height: 0;
  font-size: var(--about-capability-index);
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.inner-page--services .about-capability h3 {
  grid-column: 7 / span 6;
  grid-row: 1;
  font-size: var(--paak-type-label);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.about-capability h3 a {
  text-decoration: none;
}
.about-capability h3 a:hover {
  text-decoration: underline;
}
.inner-page--services .about-capability-description {
  grid-column: 13 / span 11;
  grid-row: 1;
  font-size: var(--capability-description-type);
  line-height: var(--paak-leading-heading);
  letter-spacing: var(--paak-tracking-heading);
  text-indent: var(--about-capability-indent);
  text-wrap: wrap;
}
.about-capability-media {
  grid-column: 13 / span 5;
  grid-row: 2;
  margin: 48px 0;
  border-radius: 13px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paak-surface-dark);
}
.about-capability-media :is(img, video) {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.about-capability ul {
  grid-column: 13 / span 12;
  grid-row: 3;
  padding: 48px 0 0;
  border-top: 1px solid var(--paak-border-on-light);
  list-style: none;
  column-count: 3;
  column-gap: var(--about-capability-gap);
  color: var(--paak-surface-dark);
  font-size: var(--paak-type-label);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.about-capability li {
  break-inside: avoid;
  margin: 0;
}
@media (width >= 1512px) {
  .inner-page--services {
    --about-capability-gutter: calc(18.3224px * var(--scale));
    --about-capability-gap: calc(17.6884px * var(--scale));
    --about-capability-index: calc(152px * var(--scale));
  }
}
@media (width < 768px) {
  .inner-page--services {
    --about-capability-index: clamp(68px, 22.56vw, 88px);
    --about-capability-gutter: 8px;
    --about-capability-gap: 4px;
    --about-capability-indent: calc(50% + var(--about-capability-gap) / 2);
  }
  .about-capability-grid {
    padding-top: 64px;
  }
  .inner-page--services .about-capability-number {
    grid-column: 1 / span 12;
    height: auto;
    text-align: center;
  }
  .inner-page--services .about-capability h3 {
    grid-column: 1 / span 12;
    grid-row: 2;
    justify-self: center;
    margin-top: 8px;
    font-size: var(--paak-type-label);
    text-align: center;
  }
  .inner-page--services .about-capability h3 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--paak-hit-target);
    padding: 0 10px;
  }
  .about-capability-media {
    grid-column: 13 / span 12;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
  }
  .inner-page--services .about-capability-description {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 32px 0 16px;
  }
  .about-capability ul {
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 16px;
    column-count: 1;
    font-size: var(--paak-type-label);
  }
}
/* Flow normally when a full panel would compete with the reading viewport. */
@media (height < 800px), (prefers-reduced-motion: reduce) {
  .about-capability {
    position: relative;
    top: auto;
  }
}
.about-capability-grid > * {
  min-width: 0;
}