.template-eleven{--t11-background:#f7f8fa;--t11-title-color:#172b45;--t11-text-color:#718096;--t11-accent-color:#b89a6a;--t11-image-background:#dce2e8;--t11-label-background:#0f1e32;--t11-label-color:#fff;--t11-divider-color:#fff;--t11-handle-background:#fff;--t11-handle-color:#172b45;--t11-position:50%;--t11-columns:1;--t11-ratio:16/7;--t11-mobile-ratio:4/3;--t11-image-fit:cover;--t11-max-width:1100px;--t11-gap:25px;--t11-padding-y:35px;--t11-padding-x:25px;--t11-radius:0px;--t11-image-radius:10px;--t11-header-gap:25px;--t11-heading-size:35px;--t11-eyebrow-size:11px;--t11-description-size:13px;--t11-project-size:19px;--t11-subtitle-size:12px;--t11-button-size:12px;--t11-handle-size:54px;--t11-handle-radius:50%;--t11-divider-width:3px;--t11-label-size:11px;--t11-label-radius:4px;--t11-label-offset:20px;--t11-info-gap:23px;container-type:inline-size;width:100%;min-width:0;box-sizing:border-box;background:var(--t11-background);padding:var(--t11-padding-y) var(--t11-padding-x);border-radius:var(--t11-radius);font-family:var(--t11-font,"Segoe UI",Arial,sans-serif)}.template-eleven *{box-sizing:border-box}.template-eleven-inner{max-width:var(--t11-max-width);margin:auto}.template-eleven-header{margin-bottom:var(--t11-header-gap);overflow-wrap:anywhere}.template-eleven-header small{display:block;color:var(--t11-accent-color);font-size:var(--t11-eyebrow-size);font-weight:700;letter-spacing:2px;margin-bottom:10px}.template-eleven-header h2{font-size:var(--t11-heading-size);color:var(--t11-title-color);margin:0 0 10px;letter-spacing:-1px}.template-eleven-header p{color:var(--t11-text-color);font-size:var(--t11-description-size);line-height:1.7;margin:0;white-space:pre-line}.template-eleven-grid{display:grid;grid-template-columns:repeat(var(--t11-columns),minmax(0,1fr));gap:var(--t11-gap)}.template-eleven-project{min-width:0;container-type:inline-size}
.template-eleven-compare{position:relative;width:100%;aspect-ratio:var(--t11-ratio);overflow:hidden;border-radius:var(--t11-image-radius);background:var(--t11-image-background);touch-action:pan-y;user-select:none}.template-eleven[data-shadow=true] .template-eleven-compare{box-shadow:0 15px 35px rgba(20,40,65,.12)}.template-eleven-before,.template-eleven-after{position:absolute;inset:0;background:var(--t11-image-background)}.template-eleven-after{clip-path:inset(0 0 0 var(--t11-position));background:var(--t11-accent-color)}.template-eleven-compare img{width:100%;height:100%;object-fit:var(--t11-image-fit);display:block}.template-eleven-placeholder{display:grid;place-items:center;height:100%;font-size:20px;color:var(--t11-title-color)}.template-eleven-label{position:absolute;z-index:3;top:var(--t11-label-offset);padding:9px 15px;background:var(--t11-label-background);color:var(--t11-label-color);font-size:var(--t11-label-size);font-weight:700;letter-spacing:1px;border-radius:var(--t11-label-radius);pointer-events:none;max-width:calc(50% - var(--t11-label-offset));overflow-wrap:anywhere}.template-eleven-label-before{left:var(--t11-label-offset)}.template-eleven-label-after{right:var(--t11-label-offset)}.template-eleven-divider{position:absolute;z-index:4;top:0;bottom:0;left:var(--t11-position);width:var(--t11-divider-width);background:var(--t11-divider-color);transform:translateX(-50%);pointer-events:none}.template-eleven-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--t11-handle-size);height:var(--t11-handle-size);border-radius:var(--t11-handle-radius);background:var(--t11-handle-background);display:grid;place-items:center;color:var(--t11-handle-color);font-size:22px;font-weight:700}.template-eleven[data-shadow=true] .template-eleven-handle{box-shadow:0 5px 20px rgba(0,0,0,.25)}.template-eleven-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:10;margin:0}.template-eleven-compare:has(.template-eleven-range:focus-visible){outline:3px solid var(--t11-accent-color);outline-offset:3px}
.template-eleven-info{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:var(--t11-info-gap);overflow-wrap:anywhere}.template-eleven-info>div{min-width:0}.template-eleven-info h3{font-size:var(--t11-project-size);color:var(--t11-title-color);margin:0 0 7px}.template-eleven-info p{font-size:var(--t11-subtitle-size);color:var(--t11-text-color);margin:0}.template-eleven-info a{text-decoration:none;color:var(--t11-title-color);font-size:var(--t11-button-size);font-weight:700;border-bottom:1px solid var(--t11-accent-color);padding-bottom:7px}.template-eleven-info a:focus-visible{outline:3px solid var(--t11-accent-color);outline-offset:3px}
.template-eleven[data-orientation=vertical] .template-eleven-after{clip-path:inset(var(--t11-position) 0 0 0)}.template-eleven[data-orientation=vertical] .template-eleven-divider{top:var(--t11-position);left:0;right:0;bottom:auto;height:var(--t11-divider-width);width:auto;transform:translateY(-50%)}.template-eleven[data-orientation=vertical] .template-eleven-label-after{top:auto;bottom:var(--t11-label-offset)}.template-eleven[data-orientation=vertical] .template-eleven-range{writing-mode:vertical-lr;cursor:ns-resize}.template-eleven[data-orientation=vertical] .template-eleven-compare{touch-action:none}
@container(max-width:750px){.template-eleven-grid{grid-template-columns:minmax(0,1fr)}}
@container(max-width:600px){.template-eleven-compare{aspect-ratio:var(--t11-mobile-ratio)}.template-eleven-info{flex-direction:column;align-items:flex-start}.template-eleven-handle{width:min(var(--t11-handle-size),45px);height:min(var(--t11-handle-size),45px)}.template-eleven-label{padding:7px 10px}.template-eleven-header h2{font-size:min(var(--t11-heading-size),29px)}}