.image-comparison{position:absolute;inset:0;overflow:hidden;--reveal:50%}
.image-comparison img{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important}
.image-comparison .comparison-before{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.comparison-line{position:absolute;left:var(--reveal);top:0;bottom:0;width:2px;background:#fff;pointer-events:none;transform:translateX(-50%)}
.comparison-line b{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);border:1px solid #fff9;border-radius:50%;background:#15191bd9;color:#fff;width:40px;height:40px;display:grid;place-items:center;font-size:20px}
.image-comparison input[type=range]{position:absolute;left:0;top:calc(38% - 24px);width:100%;height:48px;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}
.image-comparison:focus-within .comparison-line b{outline:3px solid #d5b78b;outline-offset:3px}
.comparison-label{position:absolute;top:16px;padding:5px 9px;border-radius:20px;background:#101315aa;color:#fff;font-size:10px;z-index:1;pointer-events:none}.before-label{left:12px}.after-label{right:12px}
.comparison-details{position:absolute;inset:auto 0 0;height:45%;z-index:3;background:transparent;border:0;color:inherit;text-align:left;font:inherit;cursor:pointer}
.comparison-details .service-card-copy{width:100%}.comparison-details:focus-visible{outline:2px solid #d5b78b;outline-offset:-4px;border-radius:15px}.comparison-details:focus-visible .service-card-reveal{max-height:220px;opacity:1;transform:none}
.studio-dark .comparison-card:hover::after{background:linear-gradient(180deg,transparent 40%,#000b)}
.service-detail-visual>.image-comparison{position:relative;inset:auto;aspect-ratio:3/2;width:100%}.service-detail-visual>img[hidden]{display:none}
.studio-dark .website-card .service-card-image{inset:15% 7% auto;width:86%;height:60%;margin:0;border:1px solid #ffffff60;border-radius:10px;overflow:hidden;background:#171b1d;box-shadow:0 15px 35px #0008}
.browser-chrome{display:block;height:25px;line-height:25px;font-size:8px;color:#cbd0cb;padding-left:9px;white-space:nowrap;background:#24292a}
.studio-dark .website-card .service-card-image img{height:calc(100% - 25px);object-fit:cover;object-position:left top;transform:none}
.studio-dark .website-card{background:radial-gradient(ellipse at 50% 20%,#7e735966,#121718 80%)}

.studio-dark .website-card .service-card-image{top:20%;height:auto;aspect-ratio:1.5}.studio-dark .website-card .service-card-image img{height:calc(100% - 25px);object-fit:contain}

.image-comparison input[type=range]{top:0;height:55%;width:100%;cursor:ew-resize}.image-comparison:focus-within{outline:2px solid #d5b78b;outline-offset:-3px}.image-comparison:focus-within .comparison-line{background:#d5b78b;width:3px}.service-detail-visual .image-comparison input[type=range]{height:100%}
.studio-dark .social-preview-card{background:radial-gradient(ellipse at 50% 20%,#7e735966,#121718 80%)}
.studio-dark .social-preview-card .service-card-image{inset:9% 8% auto;width:84%;height:auto;aspect-ratio:auto;margin:0;border:1px solid #ffffff60;border-radius:10px;overflow:hidden;background:#fafafa;color:#171a1b;box-shadow:0 15px 35px #0008}
.social-top{display:flex;align-items:center;gap:5px;padding:8px;font-size:8px}.social-avatar{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#202525;color:white;font-size:7px;border:2px solid #bc6d87}.social-menu{margin-left:auto}.social-photo{position:relative;aspect-ratio:1.05;overflow:hidden}.studio-dark .social-preview-card .social-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}.social-post-label{position:absolute;bottom:10px;left:8px;right:8px;font-size:9px;letter-spacing:.08em;color:white;text-shadow:0 1px 4px #000;background:#0004;padding:6px}.social-actions{font-size:17px;padding:4px 9px 0;line-height:1.2}.social-actions>span{float:right}.social-caption{font-size:8px;line-height:1.5;padding:5px 9px 10px}.social-caption b{margin-right:3px}
@media(max-width:1100px){.studio-dark .social-preview-card .service-card-image{width:62%;left:19%;right:19%;top:5%}.social-photo{aspect-ratio:1.5}.social-caption{font-size:9px}}

.social-actions{display:flex;gap:8px;padding:7px 9px 0}.social-actions svg{width:15px;height:15px}.social-actions svg:last-child{margin-left:auto}.studio-dark .social-preview-card .service-card-image{width:76%;left:12%;right:12%}.social-photo{aspect-ratio:1.35}
@media(max-width:1100px){.studio-dark .social-preview-card .service-card-image{width:62%;left:19%;right:19%;top:5%}.social-photo{aspect-ratio:1.5}}

/* Keep comparison imagery clear and the title outside the drag area. */
.studio-dark .comparison-card:hover{transform:none}
.studio-dark .comparison-card::after,.studio-dark .comparison-card:hover::after{background:linear-gradient(180deg,transparent 70%,#0009)}
.comparison-details{height:72px;pointer-events:auto}
.comparison-card .image-comparison input[type=range]{height:calc(100% - 72px)}
.studio-dark .comparison-card .service-card-copy{padding:20px 18px}

/* An editorial property campaign, framed as an Instagram post. */
.studio-dark .social-preview-card .service-card-image{container-type:inline-size;top:5%;left:7%;right:7%;width:86%;max-width:300px;aspect-ratio:auto;background:#f3efe7;border-color:#ded5c5;border-radius:9px}
.studio-dark .social-preview-card .social-photo{aspect-ratio:1.9}
.studio-dark .social-preview-card .social-photo img{object-position:50% 57%;opacity:1}
.social-top{padding:6px 9px;font-size:8px;background:#fff}.social-avatar{width:17px;height:17px}
.social-post-label{top:8px;bottom:auto;left:8px;right:auto;background:#f3efe7;color:#171b1a;font-size:7px;padding:5px 7px;letter-spacing:.14em;text-shadow:none;border-radius:2px}
.social-editorial{padding:9px 12px 8px;color:#1a211f;text-align:left}
.social-kicker{display:block;font-size:6px;letter-spacing:.16em;margin-bottom:5px;color:#78664c}
.social-editorial strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(15px,8cqw,24px);font-weight:500;letter-spacing:-.05em;line-height:1.05}
.social-editorial p{font-size:clamp(6px,3.6cqw,10px);line-height:1.5;margin:7px 0;color:#5e645e}
.social-post-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #b6ad9d;padding-top:6px;font-size:6px;letter-spacing:.1em}
.social-post-footer span:last-child{font-size:14px;line-height:1}
.social-actions{background:#fff;padding:6px 9px 0;gap:7px}.social-actions svg{width:12px;height:12px}
.social-caption{background:#fff;padding:5px 9px 7px;font-size:6px}
.studio-dark .social-preview-card::after{background:linear-gradient(180deg,transparent 75%,#0009)}
@media(max-width:1100px){.studio-dark .social-preview-card .service-card-image{width:62%;left:19%;right:19%;top:4%}.studio-dark .social-preview-card .social-photo{aspect-ratio:2.3}.social-editorial strong{font-size:clamp(15px,7cqw,23px)}}
@media(max-width:540px){.studio-dark .social-preview-card{min-height:390px}.studio-dark .social-preview-card .service-card-image{width:72%;left:14%;right:14%;max-width:none}.studio-dark .social-preview-card .social-photo{aspect-ratio:2}.social-top{font-size:9px}.social-kicker,.social-post-footer{font-size:7px}.social-caption{font-size:7px}}
.studio-dark .social-preview-card .service-card-image{height:calc(100% - 90px);display:flex;flex-direction:column}
.studio-dark .social-preview-card .social-photo{aspect-ratio:auto;flex:1;min-height:65px}
.social-editorial,.social-top,.social-actions,.social-caption{flex-shrink:0}