/* Services: ordinary desktop cards, manual 01–04 selection on mobile.
   The unenhanced HTML remains a readable four-card list if SVG loading fails. */
.services-page #capability .capability-morph,
.services-page #capability .capability-morph__body,
.services-page #capability .capability-morph__viewport {
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto;
}
.services-page #capability .capability-morph__visual-rail,
.services-page #capability .capability-morph__stage-signal,
.services-page #capability .capability-morph__depth-line {
  display: none;
}
.services-page #capability .capability-morph__stage {
  display: flex;
  min-width: 0;
  scroll-margin-top: 6rem;
}
.services-page #capability .capability-morph__reveal,
.services-page #capability .capability-morph__card {
  width: 100%;
  min-width: 0;
  height: 100%;
}
.services-page #capability .capability-morph__art {
  --wd-ink: #0b6870;
  --wd-ink-dark: #073542;
  --wd-highlight: #dffbf8;
  --wd-aqua: #38bec2;
  --wd-blue: #438a8f;
  --seo-icon-color: #0b7782;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(15rem, 29vw, 23rem);
  min-width: 0;
  padding: 0;
  margin: 0 0 1.25rem;
  border: 0;
  border-radius: 1.2rem;
  background: transparent;
  color: #0b7782;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
.services-page #capability .capability-morph__art > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 27rem;
  color: #0b7782;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(7, 53, 66, .1));
}
.services-page #capability .capability-morph__art--seo .seo-pillar-icon {
  stroke: #0a5f68;
}
.services-page #capability .capability-morph__art--seo .seo-pillar-icon [fill="#dffbf8"] {
  fill: #0a5f68;
}

/* All four supplied timelines have assembled by 9.6 seconds, before their
   looping exit. Pause at that completed frame, not at the invisible start.
   The assets' own reduced-motion rules still take precedence. */
.services-page #capability .capability-morph__art:not(.is-capability-art-playing) svg,
.services-page #capability .capability-morph__art:not(.is-capability-art-playing) svg * {
  animation-delay: -9.6s !important;
  animation-play-state: paused !important;
  animation-fill-mode: both !important;
}
.services-page #capability .capability-morph__art.is-capability-art-resetting svg,
.services-page #capability .capability-morph__art.is-capability-art-resetting svg * {
  animation-name: none !important;
}
.services-page #capability .capability-morph__art:focus-visible,
.services-page #capability .capability-morph__depth-line button:focus-visible {
  outline: 3px solid #0b7782;
  outline-offset: 4px;
}
.services-page #capability.is-capability-manual .capability-morph__card h3 {
  margin-top: 1.5rem;
  font-size: clamp(2.3rem, 4vw, 3.5rem);
}
.services-page #capability.is-capability-manual .service-detail-card__scope {
  padding-top: 1.5rem;
}
.services-page #capability.is-capability-manual .service-detail-card__scope > p,
.services-page #capability.is-capability-manual .service-detail-card__note {
  font-size: .875rem;
}

/* Keep the tallest panel in normal grid flow on phones, even when hidden.
   Switching numbers therefore does not change section height or scrollY.
   No sticky viewport, artificial scroll distance or scroll-linked state. */
@media (max-width: 900px) {
  .services-page #capability.is-capability-manual .capability-morph__viewport {
    margin-top: 2.5rem;
  }
  .services-page #capability.is-capability-manual .capability-morph__depth-line {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin: 0 0 1.25rem;
  }
  .services-page #capability .capability-morph__depth-line button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 48px;
    min-height: 48px;
    padding: .5rem;
    border: 1px solid rgba(11, 119, 130, .35);
    border-radius: 50%;
    background: #f4fafb;
    color: #0a5f68;
    font: 500 .875rem/1 "IBM Plex Mono", monospace;
    cursor: pointer;
    touch-action: manipulation;
  }
  .services-page #capability .capability-morph__depth-line button[aria-pressed="true"] {
    background: #0a5f68;
    border-color: #0a5f68;
    color: #fff;
  }
  .services-page #capability.is-capability-manual .capability-morph__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
  }
  .services-page #capability.is-capability-manual .capability-morph__stage {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
  }
  .services-page #capability.is-capability-manual .capability-morph__stage.is-capability-stage-active {
    visibility: visible;
    pointer-events: auto;
  }
  .services-page #capability.is-capability-manual .capability-morph__card {
    min-height: 0;
    padding: clamp(1.1rem, 4vw, 1.75rem);
    transform: none;
  }
  .services-page #capability .capability-morph__art {
    height: clamp(14rem, 58vw, 21rem);
    margin-bottom: .75rem;
  }
  .services-page #capability.is-capability-manual .service-detail-card__topline {
    align-items: center;
    gap: .75rem;
    padding-bottom: .75rem;
    font-size: .75rem;
  }
  .services-page #capability.is-capability-manual .capability-morph__card h3 {
    margin: 1.25rem 0 .75rem;
    font-size: clamp(2.25rem, 9vw, 3.2rem);
    line-height: .98;
  }
  .services-page #capability.is-capability-manual .service-detail-card__summary,
  .services-page #capability.is-capability-manual .service-detail-card__scope li {
    font-size: 1rem;
    line-height: 1.45;
  }
  .services-page #capability.is-capability-manual .service-detail-card__scope {
    margin-top: 1.25rem;
    padding-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-page #capability .capability-morph__art { cursor: default; }
}
@media print {
  .services-page #capability.is-capability-manual .capability-morph__depth-line { display: none; }
  .services-page #capability.is-capability-manual .capability-morph__steps { display: block; }
  .services-page #capability.is-capability-manual .capability-morph__stage {
    display: block;
    visibility: visible;
    margin-bottom: 1rem;
    break-inside: avoid;
  }
}