/* Each project is one Elementor widget; duplicate rows to build a gallery. */
.esco-comparison {
    --esco-image-width: 50%;
    --esco-handle-size: 56px;
    --esco-icon-size: 28px;
    --esco-handle-color: var(--e-global-color-6a5be85, #fafaf8);
    --esco-handle-bg: var(--e-global-color-primary, #1d2522);
    --esco-divider-color: var(--e-global-color-6a5be85, #fafaf8);
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
    width: 100%;
}
.esco-comparison--image-left { flex-direction: row-reverse; }
.esco-comparison__copy { flex: 1 1 0; min-width: 0; }
.esco-comparison__media { flex: 0 1 var(--esco-image-width); min-width: 0; }
.esco-comparison .esco-comparison__subheading {
    margin: 0 0 1.25rem;
    color: var(--e-global-color-secondary, #5f6b66);
    font-family: var(--e-global-typography-accent-font-family, inherit), sans-serif;
    font-size: var(--e-global-typography-accent-font-size, .95em);
    font-weight: var(--e-global-typography-accent-font-weight, 500);
    line-height: var(--e-global-typography-accent-line-height, 1.3);
    letter-spacing: var(--e-global-typography-accent-letter-spacing, .1em);
    text-transform: var(--e-global-typography-accent-text-transform, uppercase);
}
.esco-comparison .esco-comparison__heading { margin: 0 0 1.5rem; overflow-wrap: anywhere; }
.esco-comparison__description { color: var(--e-global-color-text, #495650); line-height: 1.65; }
.esco-comparison__description > :last-child { margin-bottom: 0; }
.esco-comparison__viewer {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0;
    background: var(--e-global-color-8bf446a, #f4f4f1);
    width: 100%;
}
.esco-comparison .esco-comparison__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
    border-radius: 0;
}
.esco-comparison__image--before { clip-path: inset(0 calc(100% - var(--esco-position, 50%)) 0 0); }
.esco-comparison__control { position: absolute; inset: 0; cursor: ew-resize; touch-action: pan-y; user-select: none; outline: none; }
.esco-comparison__divider { position: absolute; left: var(--esco-position, 50%); top: 0; bottom: 0; width: 2px; background: var(--esco-divider-color); transform: translateX(-50%); }
.esco-comparison__viewer--no-divider .esco-comparison__divider { display: none; }
.esco-comparison__handle {
    position: absolute;
    left: clamp(calc(var(--esco-handle-size) / 2 + 3px), var(--esco-position, 50%), calc(100% - var(--esco-handle-size) / 2 - 3px));
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--esco-handle-size);
    height: var(--esco-handle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--esco-handle-color);
    border-radius: 50%;
    color: var(--esco-handle-color);
    background: var(--esco-handle-bg);
    box-shadow: 0 2px 12px #0003;
    pointer-events: none;
}
.esco-comparison__handle svg { width: var(--esco-icon-size); height: var(--esco-icon-size); fill: currentColor; }
.esco-comparison__handle i { font-size: var(--esco-icon-size); }
.esco-comparison__control:focus-visible .esco-comparison__handle { outline: 3px solid var(--esco-handle-bg); outline-offset: 4px; box-shadow: 0 0 0 4px #fff; }
.esco-comparison__label { position: absolute; top: 1rem; padding: .5em .85em; background: #1d2522d9; color: #fafaf8; font: 500 .85rem/1.2 var(--e-global-typography-accent-font-family, sans-serif); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.esco-comparison__label--before { left: 1rem; }
.esco-comparison__label--after { right: 1rem; }
.esco-comparison__placeholder { display: grid; place-items: center; aspect-ratio: 4/3; padding: 2rem; border: 1px dashed #8d9691; background: #f4f4f1; color: #495650; text-align: center; }
@media (max-width: 767px) {
    .esco-comparison { flex-direction: column; gap: 2rem; }
    .esco-comparison--image-first { flex-direction: column-reverse; }
    .esco-comparison__copy, .esco-comparison__media { flex: auto; width: 100%; }
    .esco-comparison__label { top: .75rem; }
    .esco-comparison__label--before { left: .75rem; }
    .esco-comparison__label--after { right: .75rem; }
}