/* The two project columns share one grid, so width changes remain continuous. */
html[data-art-direction="orbit"] .work-comparison {
  grid-column: 1 / -1;
  width: 100%;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 5.8fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  scroll-margin-top: 130px;
  color: #292827;
  transition: grid-template-columns 650ms cubic-bezier(.22, 1, .36, 1);
}
html[data-art-direction="orbit"] .work-comparison.is-expanded { grid-template-columns: minmax(0, 6.8fr) minmax(0, 3.2fr); }
.work-comparison *, .work-comparison *::before, .work-comparison *::after { box-sizing: border-box; }
.work-comparison button { font: inherit; }
.work-comparison .wc-preview, .work-comparison .wc-projects { min-width: 0; border: 1px solid #e6e1dc; border-radius: 24px; background: #fff; }
.work-comparison .wc-preview { display: flex; flex-direction: column; overflow: hidden; }
.work-comparison .wc-preview--screen { align-self: start; }
.work-comparison .wc-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; }
.work-comparison .wc-preview__identity { min-width: 0; }
.work-comparison .wc-eyebrow { display: block; margin-bottom: 6px; color: #89817c; font: 9px/1.3 'Supply Mono', monospace; letter-spacing: .05em; }
html[data-art-direction="orbit"] .work-comparison .wc-preview__title { margin: 0; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.05; letter-spacing: -.035em; }
.work-comparison .wc-expand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 6px; min-height: 36px; padding: 8px 10px; border: 1px solid #e6e1dc; border-radius: 999px; color: #625c58; background: #faf9f6; cursor: pointer; font-size: 11px; transition: background .2s, color .2s; }
.work-comparison .wc-expand svg { width: 16px; height: 16px; }
.work-comparison .wc-expand:hover { background: #f1e8e0; color: #292827; }
.work-comparison .wc-stage { --wc-view-height: 520px; flex: 0 0 auto; height: var(--wc-view-height); min-width: 0; margin: 0 10px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #e6e1dc; }
.work-comparison .wc-scroll { position: relative; width: 100%; height: 100%; overflow: hidden; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #c4b9ae #f3efe9; touch-action: pan-y; }
.work-comparison .wc-scroll.is-scrollable { overflow-y: auto; overscroll-behavior-y: contain; }
.work-comparison .wc-scroll::-webkit-scrollbar { width: 7px; }
.work-comparison .wc-scroll::-webkit-scrollbar-track { background: #f3efe9; }
.work-comparison .wc-scroll::-webkit-scrollbar-thumb { border: 1px solid #f3efe9; border-radius: 9px; background: #c4b9ae; }
.work-comparison .wc-scroll__track { position: relative; min-height: 100%; }
.work-comparison .wc-screen { position: sticky; top: 0; width: 100%; height: var(--wc-view-height); isolation: isolate; overflow: hidden; background: #fff; }
.work-comparison .wc-preview--screen .wc-stage, .work-comparison .wc-preview--screen .wc-screen { height: min(var(--wc-view-height), var(--wc-page-height)); }
.work-comparison .wc-screen__images { position: absolute; inset: 0; overflow: hidden; }
.work-comparison .wc-page { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; background: #fff; will-change: transform; }
.work-comparison .wc-screen__image { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; user-select: none; }
.work-comparison .wc-screen__before { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: #fff; }
.work-comparison .wc-screen__labels { position: absolute; z-index: 2; top: 14px; right: 14px; left: 14px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.work-comparison .wc-screen__labels span, .work-comparison .wc-screen__new-label { padding: 6px 10px; background: #fffef2e8; border: 1px solid #ffffff8f; border-radius: 999px; color: #292827; font-size: 11px; line-height: 1; box-shadow: 0 2px 12px #2928270b; backdrop-filter: blur(8px); }
.work-comparison .wc-screen__new-label { position: absolute; z-index: 2; top: 14px; left: 14px; }
.work-comparison .wc-divider { position: absolute; z-index: 2; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 6px #29282740; pointer-events: none; }
.work-comparison .wc-divider__handle { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border: 3px solid #fff; border-radius: 50%; color: #292827; background: #ff791d; box-shadow: 0 2px 16px #29282726; }
.work-comparison .wc-range { position: absolute; z-index: 3; top: calc(50% - 24px); left: 0; width: 100%; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.work-comparison .wc-stage:has(.wc-range:focus-visible), .work-comparison .wc-stage:has(.wc-scroll:focus-visible) { outline: 2px solid #ba4400; outline-offset: 3px; }
.work-comparison .wc-screen__open { position: absolute; z-index: 3; inset: 0; display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; padding: 16px; border: 0; background: linear-gradient(transparent 55%, #29282735); cursor: pointer; }
.work-comparison .wc-screen__open-label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 36px; padding: 10px 14px; border: 1px solid #ffffffb8; border-radius: 999px; background: #fffef5eb; color: #292827; backdrop-filter: blur(10px); font-size: 12px; line-height: 1.2; transition: background .2s, gap .2s; }
.work-comparison .wc-screen__open:hover .wc-screen__open-label { gap: 20px; background: #fff; }
.work-comparison .wc-screen__open-label svg { width: 17px; height: 17px; }
.work-comparison .wc-preview__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 18px; }
.work-comparison .wc-preview__hint { color: #89817c; font-size: 11px; line-height: 1.3; }
.work-comparison .wc-preview__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.work-comparison .wc-preview__note { color: #a09891; font-size: 10px; line-height: 1.3; }
.work-comparison .wc-preview__count { flex: 0 0 auto; color: #89817c; font: 9px/1.3 'Supply Mono', monospace; }
.work-comparison .wc-status-preview { display: flex; flex-direction: column; min-height: 300px; margin: 0 10px; padding: 24px; border: 1px solid #ede6dd; border-radius: 16px; background: #faf7f2; }
.work-comparison .wc-status-preview__labels { display: flex; align-items: center; gap: 8px; }
.work-comparison .wc-status-preview__body { flex: 1; padding: 30px 0; }
.work-comparison .wc-status-preview__symbol { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 20px; border-radius: 50%; background: #ffe7d3; color: #db5e0b; }
html[data-art-direction="orbit"] .work-comparison .wc-status-preview__title { margin: 0; max-width: 17em; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.work-comparison .wc-status-preview__text { max-width: 29em; margin: 12px 0 0; color: #89817c; font-size: 13px; line-height: 1.45; }
.work-comparison .wc-status-preview__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.work-comparison .wc-status-preview__steps li { padding-top: 10px; border-top: 2px solid #e5ddd3; color: #a19890; font-size: 10px; line-height: 1.3; }
.work-comparison .wc-status-preview__steps .is-current { border-color: #ff6808; color: #a75524; }
/* Project index and cover actions. */
.work-comparison .wc-visit { position: absolute; z-index: 5; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 10px 14px; border: 1px solid #ffffffa3; border-radius: 999px; background: #292827; color: #fff; text-decoration: none; font-size: 11px; line-height: 1.2; opacity: 0; transform: translateY(7px); transition: opacity .2s, transform .2s, background .2s; pointer-events: none; box-shadow: 0 3px 14px #29282715; }
.work-comparison .wc-visit svg { width: 15px; height: 15px; }
.work-comparison .wc-stage:hover .wc-visit, .work-comparison .wc-stage:focus-within .wc-visit { opacity: 1; transform: translateY(0); pointer-events: auto; }
.work-comparison .wc-visit:hover { background: #e95000; }
/* One queue using the compact rows from the selected folder concept. */
.work-comparison .wc-projects { padding: 26px; }
.work-comparison .wc-projects__header { padding-bottom: 24px; }
.work-comparison .wc-projects__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #89817c; font: 9px/1.35 'Supply Mono', monospace; letter-spacing: .04em; }
.work-comparison .wc-projects__eyebrow::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ff6808; }
html[data-art-direction="orbit"] .work-comparison .wc-projects__title { margin: 0; font-size: clamp(26px, 2.25vw, 34px); line-height: 1.1; letter-spacing: -.045em; }
.work-comparison .wc-projects__intro { margin: 12px 0 0; max-width: 42em; color: #79716b; font-size: 14px; line-height: 1.4; }
.work-comparison .wc-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #eeeae4; color: #81766c; font-size: 10px; line-height: 1.1; white-space: nowrap; }
.work-comparison .wc-status::before { content: ''; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.work-comparison .wc-status--working { background: #ffe8d5; color: #a14d20; }
.work-comparison .wc-status--ready { background: #edf1e8; color: #63735f; }
.work-comparison .wc-demo-label { color: #9b8c80; font: 9px/1.3 'Supply Mono', monospace; text-transform: uppercase; letter-spacing: .03em; }
.work-comparison .wc-projects__scroll { max-height: 340px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #c4b9ae transparent; scrollbar-gutter: stable; padding: 7px; border: 1px solid #e7e1da; border-radius: 20px; background: #fbf9f6; }
.work-comparison .wc-projects__scroll::-webkit-scrollbar { width: 6px; }
.work-comparison .wc-projects__scroll::-webkit-scrollbar-thumb { border-radius: 9px; background: #c4b9ae; }
.work-comparison .wc-projects__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.work-comparison .wc-projects__item { min-width: 0; }
.work-comparison .wc-project { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: 100%; min-height: 74px; padding: 11px 13px; text-align: left; border: 1px solid transparent; border-radius: 14px; background: transparent; color: #292827; cursor: pointer; transition: background .25s, border-color .25s; }
.work-comparison .wc-project:hover { background: #f1ede7; }
.work-comparison .wc-project.is-selected { background: #fff; border-color: #ddd4c9; box-shadow: 0 3px 9px #36271805; }
.work-comparison .wc-project__thumb { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border: 1px solid #29282708; border-radius: 11px; background: #ece6dd; }
.work-comparison .wc-project__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 0; }
.work-comparison .wc-project__thumb.is-pending { background: #eee3d5; color: #846448; }
.work-comparison .wc-project__monogram { font-size: 26px; line-height: 1; letter-spacing: -.06em; }
.work-comparison .wc-project__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.work-comparison .wc-project__name { display: block; font-size: 19px; line-height: 1.15; letter-spacing: -.03em; overflow-wrap: anywhere; }
.work-comparison .wc-project__description { display: block; color: #81776f; font-size: 12px; line-height: 1.35; }
.work-comparison .wc-project__statuses { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.work-comparison .wc-project__statuses .wc-status { padding: 0; background: transparent; font-size: 10px; }
.work-comparison .wc-project__statuses .wc-demo-label { font-size: 8px; }
.work-comparison .wc-project__arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; color: #8d8178; transition: transform .25s, color .25s, background .25s; }
.work-comparison .wc-project__arrow svg { width: 18px; height: 18px; }
.work-comparison .wc-project:hover .wc-project__arrow, .work-comparison .wc-project.is-selected .wc-project__arrow { color: #a9450d; transform: translateX(3px); }
.work-comparison .wc-projects__cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 18px; border: 1px solid #ede6dd; border-radius: 16px; background: #faf7f2; }
.work-comparison .wc-queue__copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.work-comparison .wc-queue__status { display: flex; align-items: center; gap: 6px; color: #a75524; font: 9px/1.35 'Supply Mono', monospace; text-transform: uppercase; letter-spacing: .025em; }
.work-comparison .wc-queue__status::before { content: ''; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #ff6808; }
.work-comparison .wc-projects__tagline { margin: 0; color: #292827; font-size: 17px; line-height: 1.2; letter-spacing: -.02em; }
.work-comparison .wc-queue__text { margin: 0; color: #89817c; font-size: 12px; line-height: 1.4; }
.work-comparison .wc-projects__cta .btn-main { flex-shrink: 0; max-width: 100%; font-size: 12px; }
.work-comparison .wc-project:focus-visible, .work-comparison .wc-expand:focus-visible, .work-comparison .wc-visit:focus-visible, .work-comparison .wc-projects__scroll:focus-visible { outline: 2px solid #c5520c; outline-offset: 3px; }
.work-comparison.is-expanded .wc-projects { padding: 22px; }
.work-comparison.is-expanded .wc-projects__header { padding-bottom: 18px; }
html[data-art-direction="orbit"] .work-comparison.is-expanded .wc-projects__title { font-size: 27px; }
.work-comparison.is-expanded .wc-projects__intro { font-size: 12px; margin-top: 10px; }
.work-comparison.is-expanded .wc-project { grid-template-columns: 35px minmax(0, 1fr) 18px; gap: 9px; padding: 10px 8px; }
.work-comparison.is-expanded .wc-project__thumb { width: 35px; height: 35px; border-radius: 9px; }
.work-comparison.is-expanded .wc-project__name { font-size: 17px; }
.work-comparison.is-expanded .wc-projects__cta { align-items: flex-start; flex-direction: column; gap: 15px; margin-top: 20px; padding: 16px; }
.work-comparison.is-expanded .wc-projects__tagline { font-size: 16px; }
.work-comparison.is-expanded .wc-stage { --wc-view-height: clamp(420px, 62vh, 580px); }
@media (max-width: 1100px) and (min-width: 768px) {
  .work-comparison .wc-preview__header, .work-comparison .wc-preview__footer { padding-inline: 18px; }
  .work-comparison .wc-expand span { display: none; }
  .work-comparison .wc-expand { width: 36px; padding: 0; }
  .work-comparison .wc-projects { padding: 22px; }
  .work-comparison .wc-project { padding: 10px; }
  .work-comparison.is-expanded .wc-projects { padding: 20px 16px; }
  .work-comparison.is-expanded .wc-project { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 7px; padding: 10px 6px; }
  .work-comparison.is-expanded .wc-project__thumb { width: 30px; height: 30px; }
  .work-comparison.is-expanded .wc-project__name { font-size: 16px; }
  .work-comparison .wc-projects__cta { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  html[data-art-direction="orbit"] .work-comparison, html[data-art-direction="orbit"] .work-comparison.is-expanded { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .work-comparison .wc-preview, .work-comparison .wc-projects { border-radius: 22px; }
  .work-comparison .wc-preview { scroll-margin-top: 140px; }
  .work-comparison .wc-preview__header { padding: 18px; }
  .work-comparison .wc-stage, .work-comparison.is-expanded .wc-stage { --wc-view-height: 480px; margin-inline: 10px; border-radius: 12px; }
  .work-comparison .wc-preview__footer { padding: 14px 18px 16px; }
  .work-comparison .wc-preview__hint { font-size: 10px; }
  .work-comparison .wc-screen__labels { top: 9px; right: 9px; left: 9px; }
  .work-comparison .wc-screen__labels span { font-size: 10px; padding: 6px 8px; }
  .work-comparison .wc-screen__open { padding: 12px; }
  .work-comparison .wc-screen__open-label { gap: 6px; font-size: 10px; padding-inline: 11px; }
  .work-comparison .wc-visit { right: 12px; bottom: 12px; font-size: 10px; padding-inline: 11px; opacity: 1; transform: none; pointer-events: auto; }
  .work-comparison .wc-projects, .work-comparison.is-expanded .wc-projects { padding: 22px 18px; }
  .work-comparison .wc-projects__header, .work-comparison.is-expanded .wc-projects__header { padding-bottom: 20px; }
  html[data-art-direction="orbit"] .work-comparison .wc-projects__title, html[data-art-direction="orbit"] .work-comparison.is-expanded .wc-projects__title { font-size: 28px; }
  .work-comparison .wc-projects__intro, .work-comparison.is-expanded .wc-projects__intro { font-size: 13px; }
  .work-comparison .wc-projects__scroll { max-height: 320px; }
  .work-comparison .wc-project, .work-comparison.is-expanded .wc-project { grid-template-columns: 35px minmax(0, 1fr) 18px; min-height: 72px; gap: 9px; padding: 10px 8px; }
  .work-comparison .wc-project__thumb, .work-comparison.is-expanded .wc-project__thumb { width: 35px; height: 35px; }
  .work-comparison .wc-project__name, .work-comparison.is-expanded .wc-project__name { font-size: 18px; }
  .work-comparison .wc-status-preview { min-height: 300px; padding: 20px; }
  .work-comparison .wc-projects__cta, .work-comparison.is-expanded .wc-projects__cta { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 20px; padding: 18px; }
  .work-comparison .wc-projects__tagline, .work-comparison.is-expanded .wc-projects__tagline { font-size: 17px; }
}
@media (hover: none), (pointer: coarse) {
  .work-comparison .wc-visit { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-art-direction="orbit"] .work-comparison, .work-comparison *, .work-comparison *::before, .work-comparison *::after { transition: none !important; }
}