/* The original grid remains usable when JavaScript is unavailable. */
.work-carousel { --work-card-width: min(74%, 460px); }
.work-carousel.is-ready .work-viewport {
  position: relative;
  height: var(--work-stage-height, 480px);
  margin-inline: calc(-1 * var(--pad));
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 44%;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.work-carousel.is-dragging .work-viewport,
.work-carousel.is-dragging .project-card { cursor: grabbing; }
.work-carousel.is-ready .work-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--work-card-width);
  height: var(--work-card-height, 380px);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(calc(-1 * var(--work-radius, 420px))) rotateX(-6deg) rotateY(var(--work-turn, 0deg));
}
.work-carousel.is-ready .work-panel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--work-angle, 0deg)) translateZ(var(--work-radius, 420px));
}
.work-carousel.is-ready .project-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid rgb(244 240 223 / 10%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgb(0 0 0 / 22%);
  transform: rotateY(var(--work-facing, 0deg));
  opacity: var(--work-opacity, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.work-carousel.is-ready .project-visual {
  flex-shrink: 0;
  width: 100%;
  border-radius: 0;
  padding: 26px 16px;
}
.work-carousel.is-ready .portfolio-wordmark { font-size: clamp(1.75rem, 4.3vw, 3.25rem); }
.work-carousel.is-ready .project-dirtypop .portfolio-wordmark { font-size: clamp(2.25rem, 5.5vw, 4rem); }
.work-carousel.is-ready .project-mrklean .portfolio-wordmark > span { font-size: 1rem; letter-spacing: .12em; }
.work-carousel.is-ready .project-meta { flex-shrink: 0; padding: 20px 22px 24px; }
.work-carousel.is-ready .project-type { font-size: 1rem; }
.work-carousel.is-ready .project-name { font-size: 1.375rem; }
.work-carousel.is-ready .project-blurb { min-height: 3.1em; font-size: 1.125rem; }
.work-carousel.is-ready .project-card:focus-visible { outline-offset: -4px; }
.work-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.work-arrow, .work-playback, .work-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
}
.work-arrow { border: 1px solid rgb(244 240 223 / 24%); }
.work-arrow:hover { color: var(--black); background: var(--orange); border-color: var(--orange); }
.work-arrow svg { width: 22px; height: 22px; }
.work-playback { color: #cbc6b8; }
.work-playback:hover { color: var(--orange); }
.work-playback svg { width: 18px; height: 18px; }
.work-playback .work-play-icon, .work-playback.is-paused .work-pause-icon { display: none; }
.work-playback.is-paused .work-play-icon { display: block; }
.work-dots { display: flex; align-items: center; }
.work-dot span { width: 7px; height: 7px; border-radius: 50%; background: #727579; transition: width .2s ease, background .2s ease; }
.work-dot[aria-current="true"] span { width: 22px; border-radius: 8px; background: var(--orange); }
.work-dot:hover span { background: var(--paper); }
@media (max-width: 599px) {
  .work-head { margin-bottom: 14px; }
  .work-carousel.is-ready .work-viewport { perspective: 950px; }
  .work-carousel.is-ready .project-meta { padding: 18px; }
  .work-carousel.is-ready .project-name { font-size: 1.25rem; }
  .work-controls { column-gap: 4px; }
  .work-dot { width: 38px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-dot span { transition: none; }
}

.project-eric-maynez { background: #282536; color: #f5e7cd; }
.project-lake-havasu-pool-repair { background: #103e58; color: #97e5f6; }
.project-affinity-pool-services { background: #164b42; color: #e0f5e7; }
.project-yuma-pool-repair-services { background: #8c351e; color: #ffe2ad; }
.project-added .portfolio-wordmark > span { display: block; margin-top: 12px; font-family: 'DM Sans', Arial, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.5; letter-spacing: .12em; }
.work-carousel.is-ready .project-added .portfolio-wordmark { font-size: clamp(1.5rem, 4vw, 2.8rem); }
@media (max-width: 599px) {
  .work-dots { order: 4; flex-basis: 100%; justify-content: center; flex-wrap: wrap; }
  .work-dot { width: 32px; }
}