.services-projects-shell { position: relative; }
.services-projects-viewport { display: grid; gap: 5rem; }
.services-project-slide { min-width: 0; }
.services-project-slide figure { border: 1px solid rgb(255 255 255 / 16%); touch-action: pan-y; }
.services-live-stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #111b29; }
.services-live-mount { position: absolute; inset: 0; }
.services-live-mount iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 960px; max-width: none; border: 0; transform: scale(var(--demo-scale, .4)); transform-origin: top left; opacity: 0; pointer-events: none; }
.services-live-demo.is-ready iframe { opacity: 1; }
.services-live-demo.is-interacting iframe { pointer-events: auto; }
.services-live-cover { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; width: 100%; padding: 1.2rem; border: 0; background: transparent; cursor: pointer; }
.services-live-cover span { padding: .65rem 1rem; border: 1px solid rgb(255 255 255 / 40%); border-radius: 2rem; background: rgb(7 21 47 / 94%); color: white; box-shadow: 0 .3rem 1rem rgb(0 0 0 / 16%); font: 700 .72rem/1.3 Poppins, sans-serif; }
.services-live-cover[hidden], .services-live-toolbar[hidden], .services-live-demo.is-interacting .services-live-cover { display: none; }
.services-live-demo:not(.is-ready) .services-live-cover { visibility: hidden; }
.services-live-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; min-height: 3.7rem; padding: .35rem .7rem .35rem 1rem; background: #102345; }
.services-live-hint { color: #c9d5e7; font: 400 .72rem/1.4 Poppins, sans-serif; }
.services-live-toggle { min-height: 2.75rem; flex-shrink: 0; padding: .55rem .8rem; border: 1px solid rgb(74 223 201 / 35%); border-radius: 2rem; background: transparent; color: var(--mint); font: 700 .7rem/1.3 Poppins, sans-serif; cursor: pointer; }
.services-live-toggle:hover, .services-live-toggle[aria-pressed="true"] { background: var(--mint); color: var(--navy); }
.services-live-toggle:disabled { cursor: wait; opacity: .55; }
.services-live-demo.is-interacting { border-color: var(--mint); }
.services-projects[data-ready] .services-projects-viewport { gap: 0; }
.services-projects[data-ready] .services-project-slide { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.services-projects[data-ready] .services-project-slide.is-active { visibility: visible; pointer-events: auto; z-index: 1; }
.services-projects[data-ready] .services-project-slide.is-leaving { visibility: visible; }
.services-projects-controls[hidden] { display: none; }
.services-projects-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.services-project-arrow { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; color: white; background: var(--navy); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.services-project-arrow svg { width: 1.4rem; height: 1.4rem; }
.services-project-arrow:hover { color: var(--navy); background: var(--mint); border-color: var(--mint); }
.services-project-options { display: flex; justify-content: center; align-items: center; gap: .5rem; }
.services-project-options button { min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid transparent; border-radius: 2rem; background: transparent; color: #b7c2d4; font: 600 .76rem/1.25 Poppins, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.services-project-options button[aria-pressed="true"] { background: rgb(68 220 203 / 12%); color: var(--mint); border-color: rgb(68 220 203 / 35%); }
.services-project-options button:hover { color: white; }
.services-projects button:focus-visible, .services-projects a:focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
.services-project-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1100px) {
  .services-projects-shell { width: min(calc(var(--page) + 8.6rem), calc(100% - 2rem)); padding-inline: 4.3rem; }
  .services-project-arrow { position: absolute; top: calc((100% - 5.25rem) / 2); transform: translateY(-50%); }
  .services-project-prev { left: 0; }
  .services-project-next { right: 0; }
  .services-project-slide { gap: clamp(2rem, 4.5vw, 5rem); }
}
@media (max-width: 980px) {
  .services-project-slide { align-content: start; gap: 2.2rem; }
  .services-project-slide > div { max-width: none; }
}
@media (max-width: 560px) {
  .services-projects { padding-block: 3.5rem; }
  .services-projects-controls { gap: .35rem; margin-top: 1.6rem; }
  .services-project-options { gap: .2rem; flex: 1; }
  .services-project-options button { padding: .45rem .3rem; font-size: .64rem; flex: 1; }
  .services-project-arrow { flex-basis: 2.75rem; width: 2.75rem; height: 2.75rem; }
  .services-project-slide figure { border-radius: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .services-projects button { transition: none; }
}