/* Workflow theater enhances the screen only. Original source pages print intact. */
@media screen {
  .portfolio-preview .wf-source-node,
  .portfolio-preview .case-body > .wf-source-page,
  .portfolio-preview .case-rail-nav .wf-nav-merged { display: none !important; }

  .portfolio-preview .wf-showcase {
    --wf-stage-height: clamp(300px, calc(100svh - 430px), 530px);
    --wf-ink: #172e24;
    --wf-accent: #126548;
    width: 100%;
    max-width: 100%;
    color: var(--tx, #17231e);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
  }

  .portfolio-preview .wf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
  }

  .portfolio-preview .wf-showcase .wf-title {
    flex: 0 1 auto;
    margin: 0;
    color: #10221d;
    font-size: clamp(30px, 2.8vw, 40px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.25;
  }

  .portfolio-preview .wf-modes {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 3px;
    margin: 0;
    padding: 4px;
    overflow-x: auto;
    border-radius: 30px;
    background: #f0f2f1;
    scrollbar-width: none;
  }
  .portfolio-preview .wf-modes::-webkit-scrollbar,
  .portfolio-preview .wf-progress::-webkit-scrollbar { display: none; }

  .portfolio-preview .wf-mode {
    appearance: none;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 19px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: #53605a;
    font: 500 13px/1.6 var(--font);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .portfolio-preview .wf-mode:hover { color: #10221d; }
  .portfolio-preview .wf-mode[aria-selected="true"] {
    color: #fff;
    background: #12382b;
    box-shadow: 0 1px 3px rgb(16 34 29 / .16);
    font-weight: 600;
  }

  .portfolio-preview .wf-panel {
    min-width: 0;
    padding: 18px 0 16px;
    overflow: hidden;
    border: 1px solid #e0e6e2;
    border-radius: 9px;
    background: #f7f9f8;
    color: #172e24;
  }
  .portfolio-preview .wf-frame {
    position: relative;
    height: var(--wf-stage-height);
    overflow: hidden;
    border: 0;
    background: #f7f9f8;
    isolation: isolate;
    touch-action: pan-y pinch-zoom;
  }
  .portfolio-preview .wf-deck {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1400px;
  }
  .portfolio-preview .wf-image {
    appearance: none;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    outline-offset: 5px;
    background: transparent;
    color: #fff;
    cursor: zoom-in;
    transform: translate3d(calc(-50% + var(--wf-drag, 0px)), -50%, 0);
    transition: transform .4s cubic-bezier(.22,.72,.2,1), opacity .4s ease, left .4s cubic-bezier(.22,.72,.2,1), width .4s cubic-bezier(.22,.72,.2,1);
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
  }
  .portfolio-preview .wf-image[data-position="0"] { z-index: 3; opacity: 1; }
  .portfolio-preview .wf-image[data-position="-1"] {
    z-index: 2;
    left: 0;
    width: 11%;
    overflow: hidden;
    justify-content: flex-end;
    opacity: .42;
    cursor: pointer;
    transform: translate3d(calc(-8% + var(--wf-drag, 0px)), -50%, 0) rotateY(9deg) scale(.88);
  }
  .portfolio-preview .wf-image[data-position="1"] {
    z-index: 2;
    left: 100%;
    width: 11%;
    overflow: hidden;
    justify-content: flex-start;
    opacity: .42;
    cursor: pointer;
    transform: translate3d(calc(-92% + var(--wf-drag, 0px)), -50%, 0) rotateY(-9deg) scale(.88);
  }
  .portfolio-preview .wf-image[data-position="-2"] {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(-230% + var(--wf-drag, 0px)), -50%, -100px) scale(.8);
  }
  .portfolio-preview .wf-image[data-position="2"] {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(130% + var(--wf-drag, 0px)), -50%, -100px) scale(.8);
  }
  .portfolio-preview .wf-image[data-position="-1"]:hover,
  .portfolio-preview .wf-image[data-position="1"]:hover { opacity: .7; }
  .portfolio-preview .wf-dragging,
  .portfolio-preview .wf-dragging .wf-image { cursor: grabbing; }
  .portfolio-preview .wf-dragging .wf-image { transition: none; }

  .portfolio-preview .wf-showcase .wf-screenshot {
    display: block;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 10px 28px rgb(22 43 30 / .12), 0 0 0 1px rgb(22 43 30 / .08);
    filter: none;
    transform: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  /* Crop only the neighbouring previews; the active screenshot stays complete. */
  .portfolio-preview .wf-showcase .wf-image[data-position="-1"] .wf-screenshot,
  .portfolio-preview .wf-showcase .wf-image[data-position="1"] .wf-screenshot {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    max-width: none;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .portfolio-preview .wf-image[hidden],
  .portfolio-preview .wf-video[hidden],
  .portfolio-preview .wf-media-modes[hidden],
  .portfolio-preview .wf-video-fullscreen[hidden] { display: none; }

  .portfolio-preview .wf-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d4dfd7;
    border-radius: 4px;
    background: rgb(255 255 255 / .94);
    color: #234b37;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .portfolio-preview .wf-image[data-position="0"]:hover .wf-zoom,
  .portfolio-preview .wf-image[data-position="0"]:focus-visible .wf-zoom { opacity: 1; }
  .portfolio-preview .wf-image:not([data-position="0"]) .wf-zoom { display: none; }
  .portfolio-preview .wf-zoom svg { width: 15px; height: 15px; }

  .portfolio-preview .wf-controls { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
  .portfolio-preview .wf-arrow {
    appearance: none;
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    padding: 0;
    border: 1px solid #ccd8d0;
    border-radius: 50%;
    background: rgb(255 255 255 / .94);
    color: #234b37;
    box-shadow: 0 3px 12px rgb(22 43 30 / .08);
    cursor: pointer;
    pointer-events: auto;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
  }
  .portfolio-preview .wf-previous { left: 20px; }
  .portfolio-preview .wf-next { right: 20px; }
  .portfolio-preview .wf-arrow:hover:not(:disabled) {
    border-color: #82ae97;
    background: #e6f0e9;
    color: #126548;
    transform: scale(1.07);
  }
  .portfolio-preview .wf-arrow:disabled { opacity: .2; cursor: default; }
  .portfolio-preview .wf-arrow svg { width: 20px; height: 20px; }

  .portfolio-preview .wf-frame[data-wf-media="video"] { touch-action: auto; }
  .portfolio-preview .wf-video {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 11%;
    display: block;
    width: 78%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    border-radius: 5px;
    background: #0b1511;
    touch-action: auto;
  }
  .portfolio-preview .wf-media-modes {
    position: absolute;
    z-index: 6;
    top: 10px;
    left: calc(11% + 10px);
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid #dce5df;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(16 34 29 / .12);
  }
  .portfolio-preview .wf-media-mode {
    appearance: none;
    min-height: 27px;
    padding: 4px 10px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    color: #59655e;
    font: 500 12px/1.6 var(--font);
    white-space: nowrap;
    cursor: pointer;
  }
  .portfolio-preview .wf-media-mode[aria-pressed="true"] { color: #12382b; background: #eaf4ed; font-weight: 650; }
  .portfolio-preview .wf-video-fullscreen {
    appearance: none;
    position: absolute;
    z-index: 6;
    top: 10px;
    right: calc(11% + 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .5);
    border-radius: 4px;
    background: rgb(16 34 29 / .72);
    color: #fff;
    cursor: pointer;
  }
  .portfolio-preview .wf-video-fullscreen svg { width: 15px; height: 15px; }

  .portfolio-preview .wf-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    min-height: 80px;
    gap: 24px;
    margin: 16px 11% 18px;
  }
  .portfolio-preview .wf-caption-index {
    display: block;
    min-width: 60px;
    padding-right: 24px;
    border-right: 1px solid #d3ded6;
    color: #126548;
    font-size: 44px;
    font-weight: 650;
    letter-spacing: -.05em;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
  }
  .portfolio-preview .wf-caption { min-width: 0; }
  .portfolio-preview .wf-showcase .wf-caption-title {
    margin: 0 0 4px;
    color: #172e24;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.01em;
  }
  .portfolio-preview .wf-description {
    max-width: 760px;
    color: #596b5f;
    font-size: 14px;
    line-height: 1.7;
  }
  .portfolio-preview .wf-description > * { margin: 0 0 6px; font-size: inherit; line-height: inherit; color: inherit; }
  .portfolio-preview .wf-description > :last-child { margin-bottom: 0; }
  .portfolio-preview .wf-description b { color: #234b37; font-weight: 600; }
  .portfolio-preview .wf-description h4 { margin-top: 12px; color: #234b37; font-size: 14px; font-weight: 600; }
  .portfolio-preview .wf-description ul,
  .portfolio-preview .wf-description ol { padding-left: 1.3em; }
  .portfolio-preview .wf-description li + li { margin-top: 5px; }
  .portfolio-preview .wf-source-caption { color: var(--tx2, #5b655f); font-size: 13px; line-height: 1.7; }
  .portfolio-preview .wf-source-caption b { margin-right: 8px; color: var(--tx, #17231e); }
  .portfolio-preview .wf-count {
    min-width: 44px;
    padding-top: 5px;
    color: #78877e;
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .portfolio-preview .wf-progress {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0 22px;
    padding: 0 0 3px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .portfolio-preview .wf-progress-item { position: relative; flex: 0 0 clamp(124px, 12vw, 176px); min-width: 0; margin: 0; padding: 0; }
  .portfolio-preview .wf-step {
    appearance: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 0 9px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #67776c;
    font: 400 12px/1.5 var(--font);
    text-align: left;
    cursor: pointer;
  }
  .portfolio-preview .wf-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(72px, 6vw, 86px);
    padding: 3px;
    overflow: hidden;
    border: 1px solid #d9e2dc;
    border-radius: 5px;
    background: #eef2ef;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .portfolio-preview .wf-showcase .wf-thumbnail-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    filter: none;
    transform: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .portfolio-preview .wf-step-text { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px 0; }
  .portfolio-preview .wf-step-number { flex: 0 0 auto; color: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
  .portfolio-preview .wf-step-label { min-width: 0; overflow-wrap: anywhere; }
  .portfolio-preview .wf-step:hover { color: #172e24; }
  .portfolio-preview .wf-step:hover .wf-thumbnail { border-color: #90b59e; transform: translateY(-2px); }
  .portfolio-preview .wf-step[aria-current="step"] { color: #126548; font-weight: 600; }
  .portfolio-preview .wf-step[aria-current="step"] .wf-thumbnail { border-color: #27805c; box-shadow: 0 0 0 1px #27805c; }
  .portfolio-preview .wf-step[aria-current="step"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 52%;
    height: 2px;
    border-radius: 2px;
    background: #126548;
  }
  .portfolio-preview .wf-showcase button:focus-visible,
  .portfolio-preview .wf-details-label:focus-visible { outline: 2px solid #81cba5; outline-offset: 4px; }

  .portfolio-preview .wf-details { margin-top: 12px; border-top: 1px solid var(--line, #dde4df); color: var(--tx2, #5b655f); font-size: 14px; line-height: 1.75; }
  .portfolio-preview .wf-details[hidden] { display: none; }
  .portfolio-preview .wf-details-label { width: fit-content; padding: 12px 0; color: var(--green, #0b6950); font-size: 13px; font-weight: 500; line-height: 1.7; cursor: pointer; }
  .portfolio-preview .wf-support { max-width: 800px; padding-bottom: 4px; }
  .portfolio-preview .wf-support > * { margin: 0 0 12px; }
  .portfolio-preview .wf-support b { color: var(--tx, #17231e); font-weight: 600; }
  .portfolio-preview .wf-support h4 { margin: 18px 0 8px; color: var(--tx); font-size: 16px; line-height: 1.55; }
  .portfolio-preview .wf-support p { margin: 0 0 10px; }
  .portfolio-preview .wf-support ul { margin: 0 0 12px; padding-left: 1.3em; }
  .portfolio-preview .wf-support table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
  .portfolio-preview .wf-support th,
  .portfolio-preview .wf-support td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
  .portfolio-preview .wf-support thead { background: #f2f5f3; color: var(--tx); }
  .portfolio-preview .wf-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  .portfolio-preview .wf-viewer { width: min(1500px, 96vw); max-width: 96vw; max-height: 95svh; margin: auto; padding: 0; overflow: hidden; border: 1px solid #cad5ce; border-radius: 7px; background: #fff; color: var(--tx, #17231e); }
  .portfolio-preview .wf-viewer::backdrop { background: rgb(18 27 24 / .76); }
  .portfolio-preview .wf-viewer-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .portfolio-preview .wf-viewer-title { flex: 1; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; }
  .portfolio-preview .wf-viewer-size,
  .portfolio-preview .wf-viewer-close { appearance: none; flex-shrink: 0; min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--tx); font: 500 13px/1.5 var(--font); cursor: pointer; }
  .portfolio-preview .wf-viewer-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; }
  .portfolio-preview .wf-viewer-close svg { width: 18px; height: 18px; }
  .portfolio-preview .wf-viewer-body { max-height: calc(95svh - 62px); padding: 12px; overflow: auto; background: #f5f7f6; }
  .portfolio-preview .wf-viewer-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(95svh - 88px); margin: auto; object-fit: contain; }
  .portfolio-preview .wf-viewer-body.wf-actual .wf-viewer-image { max-width: none; max-height: none; margin: 0; }
}

@media screen and (max-width: 1100px) {
  .portfolio-preview .wf-showcase { --wf-stage-height: clamp(300px, calc(100svh - 430px), 500px); }
  .portfolio-preview .wf-header { gap: 16px; }
  .portfolio-preview .wf-mode { padding-inline: 14px; font-size: 12px; }
  .portfolio-preview .wf-footer { gap: 18px; }
  .portfolio-preview .wf-caption-index { padding-right: 18px; font-size: 40px; }
  .portfolio-preview .wf-step-text { gap: 7px; }
}

@media screen and (max-width: 800px) {
  .portfolio-preview .wf-showcase { --wf-stage-height: clamp(280px, 51vw, 450px); }
  .portfolio-preview .wf-header { align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
  .portfolio-preview .wf-modes { max-width: 100%; }
  .portfolio-preview .wf-showcase .wf-title { font-size: 32px; }
  .portfolio-preview .wf-panel { padding-top: 20px; }
  .portfolio-preview .wf-progress { gap: 10px; margin-inline: 18px; }
  .portfolio-preview .wf-caption-index { min-width: 50px; font-size: 36px; }
  .portfolio-preview .wf-showcase .wf-caption-title { font-size: 18px; }
  .portfolio-preview .wf-count { display: none; }
  .portfolio-preview .wf-footer { grid-template-columns: auto minmax(0, 1fr); margin-top: 20px; }
  .portfolio-preview .wf-previous { left: 12px; }
  .portfolio-preview .wf-next { right: 12px; }
  .portfolio-preview .wf-arrow { width: 36px; height: 36px; margin-top: -18px; }
}

@media screen and (max-width: 640px) {
  .portfolio-preview .wf-showcase { --wf-stage-height: clamp(210px, 64vw, 350px); }
  .portfolio-preview .wf-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .portfolio-preview .wf-showcase .wf-title { font-size: 30px; }
  .portfolio-preview .wf-mode { min-height: 33px; padding: 6px 12px; font-size: 12px; }
  .portfolio-preview .wf-modes { padding: 3px; }
  .portfolio-preview .wf-panel { padding: 16px 0; border-radius: 7px; }
  .portfolio-preview .wf-image { width: 86%; }
  .portfolio-preview .wf-image[data-position="-1"] { width: 7%; transform: translate3d(calc(-8% + var(--wf-drag, 0px)), -50%, 0) rotateY(9deg) scale(.88); }
  .portfolio-preview .wf-image[data-position="1"] { width: 7%; transform: translate3d(calc(-92% + var(--wf-drag, 0px)), -50%, 0) rotateY(-9deg) scale(.88); }
  .portfolio-preview .wf-video { left: 7%; width: 86%; }
  .portfolio-preview .wf-arrow { width: 31px; height: 31px; margin-top: -15px; background: rgb(255 255 255 / .96); }
  .portfolio-preview .wf-arrow svg { width: 16px; height: 16px; }
  .portfolio-preview .wf-previous { left: 6px; }
  .portfolio-preview .wf-next { right: 6px; }
  .portfolio-preview .wf-zoom { top: 7px; right: 7px; width: 28px; height: 28px; }
  .portfolio-preview .wf-footer { gap: 13px; margin: 19px 18px 20px; }
  .portfolio-preview .wf-caption-index { min-width: 39px; padding-right: 13px; font-size: 31px; }
  .portfolio-preview .wf-showcase .wf-caption-title { font-size: 17px; line-height: 1.5; }
  .portfolio-preview .wf-description { font-size: 13px; line-height: 1.75; }
  .portfolio-preview .wf-source-caption { margin-top: 7px; font-size: 11px; }
  .portfolio-preview .wf-progress { gap: 10px; margin-inline: 16px; padding: 3px 2px 4px; scroll-padding-inline: 2px; }
  .portfolio-preview .wf-progress-item { flex: 0 0 116px; }
  .portfolio-preview .wf-thumbnail { height: 68px; padding: 2px; }
  .portfolio-preview .wf-step { font-size: 11px; }
  .portfolio-preview .wf-step-text { gap: 7px; padding-top: 8px; }
  .portfolio-preview .wf-step-number { font-size: 11px; }
  .portfolio-preview .wf-media-modes { top: 7px; left: calc(7% + 7px); }
  .portfolio-preview .wf-media-mode { min-height: 25px; padding: 3px 7px; font-size: 11px; }
  .portfolio-preview .wf-video-fullscreen { top: 7px; right: calc(7% + 7px); width: 28px; height: 28px; }
  .portfolio-preview .wf-details { margin-top: 14px; }
  .portfolio-preview .wf-viewer-toolbar { gap: 8px; flex-wrap: wrap; padding: 10px; }
  .portfolio-preview .wf-viewer-title { flex-basis: calc(100% - 50px); }
  .portfolio-preview .wf-viewer-close { order: 1; }
  .portfolio-preview .wf-viewer-size { order: 2; }
  .portfolio-preview .wf-viewer-body { padding: 6px; max-height: calc(95svh - 110px); }
  .portfolio-preview .wf-viewer-image { max-height: calc(95svh - 124px); }
}

@media screen and (max-height: 760px) and (min-width: 801px) {
  .portfolio-preview .wf-showcase { --wf-stage-height: clamp(300px, calc(100svh - 430px), 410px); }
  .portfolio-preview .wf-header { margin-bottom: 18px; }
  .portfolio-preview .wf-panel { padding-top: 18px; padding-bottom: 16px; }
  .portfolio-preview .wf-footer { margin-block: 14px 16px; }
  .portfolio-preview .wf-thumbnail { height: 66px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .portfolio-preview .wf-showcase *,
  .portfolio-preview .wf-showcase *::before,
  .portfolio-preview .wf-showcase *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .portfolio-preview .wf-showcase,
  .portfolio-preview .wf-viewer { display: none !important; }
  .portfolio-preview .wf-source-page { display: block !important; }
  /* wf-source-node is hidden only inside @media screen: its print layout is original. */
  .portfolio-preview .wf-source-node { visibility: visible; }
}