.work-gallery {
  width: calc(100% - clamp(10px, 2.2vw, 32px) * 2);
  max-width: 1600px;
  margin: 72px auto 0;
  color: #1f2936;
  --work-ease: cubic-bezier(.22, 1, .36, 1);
}
.work-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 4px 26px; }
.work-heading h2 { margin: 0; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
.work-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.work-control, .work-lightbox-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 15px; background: #eff3f7; color: #1f2936; cursor: pointer;
  transition: background 160ms, transform 160ms;
}
.work-control svg { width: 21px; height: 21px; }
.work-autoplay { margin-right: 8px; background: transparent; }
.work-autoplay .work-play-symbol, .work-autoplay.is-paused .work-pause-symbol { display: none; }
.work-autoplay.is-paused .work-play-symbol { display: block; }
.work-stage { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.work-tile {
  display: block; position: relative; overflow: hidden; min-width: 0; padding: 0; border: 0;
  border-radius: 30px; background: #eceef3; cursor: pointer; color: #1f2936;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y;
}
.work-tile img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.work-gallery.is-enhanced .work-stage { display: block; height: clamp(400px, 42vw, 630px); }
.is-enhanced .work-tile {
  position: absolute; left: 0; top: 0; width: var(--tile-w); height: var(--tile-h);
  transform: translate3d(var(--tile-x),var(--tile-y),0); opacity: 0; visibility: hidden;
  transition: transform 850ms var(--work-ease), width 850ms var(--work-ease), height 850ms var(--work-ease), opacity 500ms, visibility 0s 850ms;
}
.is-enhanced .work-tile[data-slot] { opacity: 1; visibility: visible; transition-delay: 0s; }
.is-enhanced .work-tile:not([data-slot]) { pointer-events: none; }
.work-tile[data-slot="feature"] { z-index: 3; }
.work-expand { position: absolute; bottom: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #ffffffde; box-shadow: 0 2px 8px #1f29360b; opacity: 0; transform: scale(.9); transition: opacity 180ms, transform 180ms; pointer-events: none; }
.work-expand svg { width: 21px; height: 21px; }
.work-tile[data-slot="feature"] .work-expand { opacity: 1; transform: none; }
.work-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 66px; margin: 8px 6px 0; }
.work-caption { display: flex; align-items: center; gap: 22px; }
.work-counter { flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: #87929d; white-space: nowrap; }
.work-counter b { font-weight: 600; color: #1f2936; }
.work-current-title { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; }
.work-pagination { display: flex; gap: 1px; }
.work-dot { display: grid; place-items: center; width: 30px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; }
.work-dot span { display: block; width: 19px; height: 3px; border-radius: 3px; background: #dce3e9; transition: background 200ms, transform 200ms; }
.work-dot[aria-current] span { background: linear-gradient(105deg,#0d7da0,#4a69d1); transform: scaleY(1.5); }
.work-sr-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.work-stage.is-resizing .work-tile { transition: none; }
.work-lightbox {
  position: fixed; width: min(1200px,calc(100% - 48px)); height: min(940px,calc(100dvh - 48px));
  max-width: none; max-height: none; margin: auto; padding: 22px; border: 0;
  border-radius: 32px; background: #eff3f7; color: #1f2936; overflow: hidden;
}
.work-lightbox[open] { display: flex; flex-direction: column; }
.work-lightbox::backdrop { background: #17222fe6; backdrop-filter: blur(8px); }
body:has(.work-lightbox[open]) { overflow: hidden; }
.work-lightbox-close { position: absolute; right: 12px; top: 12px; z-index: 2; border-radius: 20px; background: linear-gradient(135deg,#e5e9ee,#e8e2f0); }
.work-lightbox-close svg { width: 22px; height: 22px; }
.work-lightbox-image { display: grid; place-items: center; flex: 1; min-height: 0; overflow: hidden; border-radius: 20px; touch-action: pan-y; }
.work-lightbox-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; user-select: none; }
.work-lightbox-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px 0; flex-shrink: 0; }
.work-lightbox-footer p { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.work-lightbox-counter { font-size: 12px; color: #7a8794; font-variant-numeric: tabular-nums; }
.work-lightbox-footer .work-controls { gap: 3px; }
.work-lightbox-footer .work-control {
  flex: 0 0 44px; width: 44px; height: 44px; background: transparent;
  border: 0; border-radius: 14px; color: #304252;
}
.work-lightbox .work-control:focus-visible { outline: 2px solid #2184ac; outline-offset: 3px; }
@media (hover:hover) and (pointer:fine) {
  .work-control:hover, .work-lightbox-close:hover { background: #dfe7ef; transform: scale(1.06); }
  .work-lightbox-footer .work-control:hover { background: #e2eaf1; }
  .work-tile:hover .work-expand { opacity: 1; transform: none; }
  .work-dot:hover span { background: #899baa; }
}
@media (max-width:760px) {
  .work-gallery { margin-top: 48px; }
  .work-heading { margin: 0 4px 20px; gap: 10px; }
  .work-heading h2 { font-size: clamp(23px,5.8vw,32px); }
  .work-controls { gap: 4px; }
  .work-control { width: 38px; height: 42px; border-radius: 13px; }
  .work-autoplay { margin-right: 2px; }
  .work-gallery.is-enhanced .work-stage { height: clamp(370px,112vw,550px); }
  .work-tile { border-radius: 22px; }
  .work-expand { bottom: 12px; right: 12px; width: 36px; height: 36px; }
  .work-footer { flex-direction: column; align-items: stretch; gap: 2px; margin-top: 18px; }
  .work-caption { gap: 16px; }
  .work-current-title { font-size: 16px; }
  .work-pagination { justify-content: center; }
  .work-dot { width: 32px; }
  .work-lightbox { width: calc(100% - 16px); height: calc(100dvh - 24px); padding: 12px; border-radius: 26px; }
  .work-lightbox-image { padding-top: 36px; }
  .work-lightbox-footer p { font-size: 16px; }
  .work-stage { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:350px) {
  .work-heading h2 { max-width: 150px; }
  .work-heading { align-items: flex-end; }
}
@media (prefers-reduced-motion:reduce) {
  .work-gallery *, .work-lightbox * { transition: none !important; }
}