.services[data-service-stack] {
  height: 100svh;
  height: 100lvh;
  min-height: 0;
  padding: 0;
  overflow: clip;
}

:root[data-services-steps] #projects { height: 100svh; min-height: 0; }

/* Established before a new swipe starts. Only the opening deck owns panning. */
:root[data-services-owned], :root[data-services-owned] body {
  overflow-y: hidden;
  touch-action: pinch-zoom;
}
/* The body is the scroller here. It keeps its overflow, and gestures are claimed by touch-action and the swipe handler. */
html.inner-scroll[data-services-owned] body { overflow-y: auto; }
:root[data-services-owned] .deck { touch-action: pinch-zoom; }

.services[data-service-stack] .services-inner {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 2.2svh, 20px);
  width: 100%;
  height: 100svh;
  height: 100lvh;
  padding: clamp(19px, 4.3svh, 42px) 0 max(25px, env(safe-area-inset-bottom));
  padding-bottom: calc(max(25px, env(safe-area-inset-bottom)) + max(0px, 100lvh - 100svh));
}

.services[data-service-stack] .services-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 9px;
  padding: 0 20px;
  text-align: center;
}

.services[data-service-stack] .services-heading h2 {
  font-size: clamp(30px, 7.9vw, 47px);
  line-height: 1;
}

.services[data-service-stack] .services-intro {
  width: auto;
  max-width: 310px;
  margin: 0;
  font-size: 14px;
  line-height: 1.38;
}

.services[data-service-stack] .services-intro-break { display: none; }

.services[data-service-stack] .services-cards {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.services[data-service-stack] .service-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(100% - 76px), 304px);
  height: min(calc(100% - 46px), 426px);
  transform-origin: center;
  pointer-events: none;
}

.services[data-service-stack] .service-card[data-stack-front] { pointer-events: auto; }

.services[data-service-stack] .service-card-surface {
  border-radius: 24px;
  background: linear-gradient(150deg, #1b1d22, #08090c 75%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.services[data-service-stack] .service-artwork {
  top: 4%;
  left: 8%;
  right: 8%;
  height: calc(100% - 113px);
  max-width: none;
  aspect-ratio: auto;
}

.services[data-service-stack] .service-artwork img {
  transform: perspective(480px) translate3d(var(--stack-icon-x, 0px), var(--stack-icon-y, 0px), 0)
    rotateX(var(--stack-icon-rx, 0deg)) rotateY(var(--stack-icon-ry, 0deg)) scale(var(--stack-icon-scale, 1));
  transition: transform .32s cubic-bezier(.2, .65, .28, 1);
}

.services[data-service-stack] .service-card[data-icon-touch] .service-artwork img {
  --stack-icon-scale: 1.09;
  transition-duration: .12s;
}

.services[data-service-stack] .service-copy { left: 23px; right: 16px; bottom: 22px; }
.services[data-service-stack] .service-copy h3 { font-size: clamp(23px, 6.25vw, 29px); }
.services[data-service-stack] .service-copy p { font-size: 14px; line-height: 1.35; }