.service-carousel { max-width: 460px; margin-top: 28px; }
.service-carousel .service-options { margin: 0; max-width: none; }
.service-carousel .service-options .service-name { flex: 1; min-width: 0; font: inherit; color: inherit; opacity: 1; }
.service-carousel .service-options a { min-height: 52px; gap: 14px; flex-shrink: 0; }
.service-carousel-ready .service-window { height: var(--service-page-height); overflow: clip; touch-action: pan-x pinch-zoom; }
.service-carousel-ready .service-options { display: flex; flex-direction: column; border-top: 0; transform: translate3d(0, var(--service-offset, 0px), 0); }
.service-carousel-ready .service-page { flex: 0 0 var(--service-page-height); height: var(--service-page-height); }
.service-carousel-ready .service-page a { border-top: 0; }
.service-carousel-ready .service-window { border-top: 1px solid #729d784d; }
.service-carousel-animated .service-options { transition: transform .38s cubic-bezier(.22,.68,.2,1); }
.service-carousel-measuring .service-options { transition: none; }
.service-carousel-scrubbed .service-options { transition: none; }
.service-carousel-scrubbed .service-window { touch-action: pan-y pinch-zoom; }
.service-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; }
.service-carousel-scrubbed .service-controls { position: relative; padding-bottom: 9px; }
.service-carousel-scrubbed .service-controls::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--acid); opacity: .6; transform: scaleX(var(--service-progress, 0)); transform-origin: left; }
.service-controls[hidden] { display: none; }
.service-position { color: var(--acid); font: 10px/1.4 var(--mono); letter-spacing: .08em; }
.service-arrows { display: flex; gap: 8px; }
.service-arrows button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #729d7866; color: var(--acid); background: #071311; cursor: pointer; }
.service-arrows button:hover:not(:disabled) { background: var(--acid); color: #071311; }
.service-arrows button:disabled { opacity: .25; cursor: default; }
.service-arrows svg { width: 18px; height: 18px; transform: rotate(90deg); }
.service-arrows [data-service-prev] svg { transform: rotate(-90deg); }
.experience-ready .scene-work .work-copy { left: 9vw; right: auto; width: 38%; top: 18%; }
.experience-ready .work-software .work-copy { left: 54%; }
/* Long editorial copy keeps the same side as the normal composition. */
.experience-ready .scene-work.scene-readable { left: 9vw; right: 53%; }
.experience-ready .work-software.scene-readable { left: 54%; right: 8%; }
.experience-ready .scene-work.scene-readable .work-copy { position: relative; inset: auto; width: auto; max-width: none; }
@media (min-width: 701px) and (max-height: 760px) {
    .service-carousel { margin-top: 18px; }
    .service-carousel .service-options a { min-height: 40px; }
}
@media (max-width: 700px) {
    .experience-ready .scene-work .work-copy, .experience-ready .work-software .work-copy { left: var(--page-left); right: 24px; width: auto; }
    .experience-ready .scene-work.scene-readable, .experience-ready .work-software.scene-readable { left: var(--page-left); right: 24px; }
    .service-carousel { margin-top: 18px; }
    .service-carousel .service-options a { min-height: 40px; gap: 10px; }
    .service-controls { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .service-carousel-animated .service-options { transition: none; } }