.home-comparison{position:relative;width:100%;height:100%;--split:50%;overflow:hidden;isolation:isolate;background:#eee}.comparison-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.comparison-after{clip-path:inset(0 0 0 var(--split))}.comparison-label{position:absolute;top:14px;padding:4px 10px;border-radius:20px;background:#161616cc;color:#fff;font:12px/1.5 ui-sans-serif,system-ui,sans-serif;pointer-events:none;z-index:2}.comparison-before-label{left:14px}.comparison-after-label{right:14px}.comparison-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 2px #0005;transform:translateX(-50%);pointer-events:none;z-index:2}.comparison-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff99;border-radius:50%;background:#626262;color:#fff;font:20px/1 system-ui;box-shadow:0 3px 12px #0003}.comparison-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.home-comparison:has(.comparison-range:focus-visible){outline:3px solid #a9602b;outline-offset:-3px}@media(max-width:620px){.comparison-label{top:8px;padding:2px 7px;font-size:10px}.comparison-before-label{left:8px}.comparison-after-label{right:8px}.comparison-handle{width:30px;height:30px;font-size:16px}}

/* The comparison controls belong to the card, outside the device frame. */
.home-comparison{height:auto;padding:56px 36px 44px;border-radius:24px;background:#f0f0f0;overflow:visible}.home-comparison .ipad-stage{aspect-ratio:1.36!important;padding:0!important;background:transparent!important;border-radius:0;overflow:visible}.home-comparison .ipad-slide{inset:0!important}.home-comparison .ipad-screen{position:relative;overflow:hidden;isolation:isolate}.home-comparison .comparison-after{clip-path:inset(0 0 0 var(--screen-split,50%))}.home-comparison .comparison-label{top:20px;padding:4px 10px;background:#111;color:#fff}.home-comparison .comparison-before-label{left:24px}.home-comparison .comparison-after-label{right:24px}.home-comparison .comparison-divider{top:12px;bottom:12px;box-shadow:none}.home-comparison .comparison-range{border-radius:24px}.home-comparison .comparison-handle{background:#737373;border:1px solid #ffffff80;box-shadow:0 4px 12px #0003}
html[data-theme="dark"] .home-comparison{background:#232323}
@media(max-width:620px){.home-comparison{padding:44px 16px 28px;border-radius:18px}.home-comparison .comparison-label{top:12px;font-size:10px;padding:3px 8px}.home-comparison .comparison-before-label{left:16px}.home-comparison .comparison-after-label{right:16px}.home-comparison .comparison-divider{top:8px;bottom:8px}}

/* Keep the device silhouette, tags and checkerboard inside the screen. */
.home-comparison{padding:0;background:transparent;border-radius:0}.home-comparison .ipad-stage{width:100%!important;max-width:100%;margin:0!important;left:auto!important;transform:none!important;aspect-ratio:1.36!important}.home-comparison .ipad-slide{inset:0!important}.home-comparison .comparison-label{top:14px}.home-comparison .comparison-before-label{left:14px}.home-comparison .comparison-after-label{right:14px}.home-comparison .comparison-divider{top:0;bottom:0}.home-comparison .comparison-handle{width:44px;height:44px;border:0;border-radius:0;clip-path:polygon(99.000% 50.000%,98.552% 52.120%,97.319% 54.140%,95.606% 56.004%,93.824% 57.727%,92.373% 59.394%,91.535% 61.129%,91.393% 63.051%,91.816% 65.220%,92.498% 67.603%,93.050% 70.074%,93.107% 72.440%,92.435% 74.500%,90.987% 76.112%,88.910% 77.245%,86.494% 78.003%,84.089% 78.604%,81.999% 79.322%,80.406% 80.406%,79.322% 81.999%,78.604% 84.089%,78.003% 86.494%,77.245% 88.910%,76.112% 90.987%,74.500% 92.435%,72.440% 93.107%,70.074% 93.050%,67.603% 92.498%,65.220% 91.816%,63.051% 91.393%,61.129% 91.535%,59.394% 92.373%,57.727% 93.824%,56.004% 95.606%,54.140% 97.319%,52.120% 98.552%,50.000% 99.000%,47.880% 98.552%,45.860% 97.319%,43.996% 95.606%,42.273% 93.824%,40.606% 92.373%,38.871% 91.535%,36.949% 91.393%,34.780% 91.816%,32.397% 92.498%,29.926% 93.050%,27.560% 93.107%,25.500% 92.435%,23.888% 90.987%,22.755% 88.910%,21.997% 86.494%,21.396% 84.089%,20.678% 81.999%,19.594% 80.406%,18.001% 79.322%,15.911% 78.604%,13.506% 78.003%,11.090% 77.245%,9.013% 76.112%,7.565% 74.500%,6.893% 72.440%,6.950% 70.074%,7.502% 67.603%,8.184% 65.220%,8.607% 63.051%,8.465% 61.129%,7.627% 59.394%,6.176% 57.727%,4.394% 56.004%,2.681% 54.140%,1.448% 52.120%,1.000% 50.000%,1.448% 47.880%,2.681% 45.860%,4.394% 43.996%,6.176% 42.273%,7.627% 40.606%,8.465% 38.871%,8.607% 36.949%,8.184% 34.780%,7.502% 32.397%,6.950% 29.926%,6.893% 27.560%,7.565% 25.500%,9.013% 23.888%,11.090% 22.755%,13.506% 21.997%,15.911% 21.396%,18.001% 20.678%,19.594% 19.594%,20.678% 18.001%,21.396% 15.911%,21.997% 13.506%,22.755% 11.090%,23.888% 9.013%,25.500% 7.565%,27.560% 6.893%,29.926% 6.950%,32.397% 7.502%,34.780% 8.184%,36.949% 8.607%,38.871% 8.465%,40.606% 7.627%,42.273% 6.176%,43.996% 4.394%,45.860% 2.681%,47.880% 1.448%,50.000% 1.000%,52.120% 1.448%,54.140% 2.681%,56.004% 4.394%,57.727% 6.176%,59.394% 7.627%,61.129% 8.465%,63.051% 8.607%,65.220% 8.184%,67.603% 7.502%,70.074% 6.950%,72.440% 6.893%,74.500% 7.565%,76.112% 9.013%,77.245% 11.090%,78.003% 13.506%,78.604% 15.911%,79.322% 18.001%,80.406% 19.594%,81.999% 20.678%,84.089% 21.396%,86.494% 21.997%,88.910% 22.755%,90.987% 23.888%,92.435% 25.500%,93.107% 27.560%,93.050% 29.926%,92.498% 32.397%,91.816% 34.780%,91.393% 36.949%,91.535% 38.871%,92.373% 40.606%,93.824% 42.273%,95.606% 43.996%,97.319% 45.860%,98.552% 47.880%);background:#737373;box-shadow:none}html[data-theme="dark"] .home-comparison{background:transparent}
@media(max-width:620px){.home-comparison{padding:0;border-radius:0}.home-comparison .comparison-label{top:8px}.home-comparison .comparison-before-label{left:8px}.home-comparison .comparison-after-label{right:8px}.home-comparison .comparison-handle{width:36px;height:36px}}

.home-comparison .comparison-handle{font-size:0;display:block}.home-comparison .comparison-handle::before,.home-comparison .comparison-handle::after{content:'';position:absolute;top:50%;width:7px;height:7px;border:solid #fff;border-width:0 2px 2px 0;box-sizing:border-box}.home-comparison .comparison-handle::before{left:calc(50% - 7px);transform:translate(-50%,-50%) rotate(135deg)}.home-comparison .comparison-handle::after{left:calc(50% + 7px);transform:translate(-50%,-50%) rotate(-45deg)}

/* Same wide stage and insets as every other homepage iPad. */
.home-foboh-projects .home-comparison,.home-foboh-projects .home-thumb-stage{width:min(812px,calc(100vw - 16px));max-width:none;margin-left:calc(50% - min(406px,calc(50vw - 8px)))}
.home-foboh-projects .home-comparison,.home-foboh-projects .home-thumb-stage{margin-left:calc(50% - min(406px,calc(50vw - 8px)))}
.home-comparison .ipad-stage{aspect-ratio:1.3!important;padding:20px 16px 40px!important}.home-comparison .ipad-slide{position:absolute;inset:28px 36px 42px!important}.home-comparison .comparison-handle{clip-path:none;border-radius:50%;border:1px solid #ffffff70;box-shadow:0 3px 12px #0003}.home-comparison .comparison-divider{background:transparent;box-shadow:none;z-index:4}.comparison-curve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.comparison-curve path{fill:none;stroke:white;stroke-width:2;vector-effect:non-scaling-stroke}.home-comparison .comparison-range{z-index:5}
@media(max-width:620px){.home-foboh-projects .home-comparison,.home-foboh-projects .home-thumb-stage{width:100%;max-width:100%;margin-left:0}.home-comparison .ipad-stage{aspect-ratio:auto!important;padding:12px 6px 28px!important}.home-comparison .ipad-slide{position:relative;inset:auto!important;width:100%}}

.home-comparison:has(.comparison-range:focus-visible){outline:none}.home-comparison .comparison-handle{top:var(--handle-y,50%)}.home-comparison.comparison-keyboard .comparison-handle{outline:2px solid #a9602b;outline-offset:4px}.home-comparison .comparison-curve{overflow:hidden}

.home-comparison .ipad-slide{inset:20px 16px 40px!important}@media(max-width:620px){.home-comparison .ipad-slide{inset:auto!important}}
.comparison-image[src*="/foboh-"]{object-position:left top}
.home-thumb{display:block;position:relative;aspect-ratio:3720/2400;overflow:hidden;background:#f2f2f2}.home-thumb img,.home-thumb video{display:block;width:100%;height:100%;object-fit:cover}
.home-loop .ipad-screen{background:#fff}.home-loop .loop-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;z-index:0}.home-loop .loop-image.is-prev{opacity:1;z-index:1}.home-loop .loop-image.is-active{opacity:1;z-index:2;transition:opacity .15s ease}@media(prefers-reduced-motion:reduce){.home-loop .loop-image{transition:none}}
.home-thumb-stage{padding:20px 16px 31px}@media(max-width:620px){.home-thumb-stage{padding:12px 6px 28px}}
.home-comparison .ipad-screen{-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}
/* The screen sets the height and the bezel wraps it: Safari resolves height:100% inside an aspect-ratio box differently, letting screens overflow the frame. */
.home-comparison .ipad-edge{aspect-ratio:auto!important;height:auto!important}.home-comparison .ipad-screen{height:auto!important;aspect-ratio:1.38}@media(max-width:620px){.home-comparison .ipad-screen{aspect-ratio:1.39}}
/* Centre the divider between a preview and the next project, with 36px either side. */
.work .project{padding:35px 0}
.work .home-foboh-projects{margin-bottom:-30px}@media(max-width:620px){.work .home-foboh-projects{margin-bottom:-27px}}