/* Product photography rhythm, with real client websites inside sculpted displays. */
.device-showcase{padding-top:18px;padding-bottom:28px;background:#f5f5f7}
.device-showcase .project-track{position:relative;--project-width:min(82vw,1120px);gap:24px}
.device-showcase .project-slide{margin:0;aspect-ratio:auto;height:auto;overflow:hidden;border-radius:24px;background:transparent}
.device-showcase .project-slide:after{display:none}
.project-device-stage{position:relative;display:grid;place-items:center;padding:56px 8% 36px;min-height:0;background:transparent;overflow:hidden}
.desktop-device{position:relative;width:100%;max-width:880px;filter:drop-shadow(0 24px 22px #08090b66)}
.desktop-screen{position:relative;background:#131416;border:2px solid #696b70;border-bottom:0;border-radius:16px 16px 0 0;padding:18px 12px 12px;overflow:hidden}
.desktop-screen img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:2px;background:#202227}
.desktop-camera{position:absolute;top:7px;left:50%;width:4px;height:4px;border-radius:50%;background:#273846;box-shadow:0 0 0 2px #090b0d}
.desktop-chin{height:clamp(15px,2.5vw,34px);background:linear-gradient(100deg,#909298,#dadbde 48%,#a5a7ab);border:1px solid #b8b9bc;border-top:0;border-radius:0 0 14px 14px}
.desktop-stand{position:relative;width:19%;height:clamp(28px,5vw,66px);margin:0 auto 9px;background:linear-gradient(#64666a,#b5b7bb 72%,#d2d3d6);clip-path:polygon(20% 0,80% 0,86% 85%,100% 94%,100% 100%,0 100%,0 94%,14% 85%)}
.device-stage-label{font-size:8px;letter-spacing:.18em;color:#6e6e73;margin-top:16px}
.device-showcase .project-slide figcaption{position:relative;inset:auto;display:flex;align-items:center;gap:20px;padding:25px 32px 30px;border-top:0;background:transparent;color:#1d1d1f}
.device-showcase .project-slide figcaption>div{gap:9px}
.device-showcase .project-slide figcaption strong{font-size:clamp(22px,2.8vw,38px);font-weight:600;line-height:1.1;letter-spacing:-.04em}
.device-showcase .project-slide figcaption>div>span{color:#6e6e73;font-size:12px}
.device-showcase .project-slide figcaption a{color:#0066cc;font-size:13px;margin:0}
.device-showcase .project-controls{max-width:1120px}
/* A landscape phone preserves the film's original framing and full player controls. */
.showcase-service.service-content .iphone-video-scene{margin:0;padding:38px 28px 32px;background:#e9e9ed;display:flex;flex-direction:column;justify-content:center;overflow:visible}
.landscape-iphone{position:relative;padding:9px 12px;border:2px solid #8b8c90;border-radius:38px;background:#17181b;box-shadow:0 22px 32px #1d1d1f26,0 0 0 2px #d4d4d7;transform:rotate(-5deg);margin:15px 0 27px}
.landscape-iphone:after{content:'';position:absolute;left:32%;right:32%;bottom:11px;height:3px;border-radius:4px;background:#ffffff90;pointer-events:none}
.iphone-video-screen{position:relative;aspect-ratio:16/9;border-radius:27px;overflow:hidden;background:#131416}
.iphone-island{position:absolute;z-index:2;left:18px;top:50%;transform:translateY(-50%);height:28%;width:12px;border-radius:12px;background:#111214;pointer-events:none}
.iphone-video-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;color:#fff;background:#131416;cursor:pointer}
.showcase-service .iphone-video-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.iphone-video-play:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#11121499)}
.video-play-icon{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:58px;height:58px;border:1px solid #ffffff80;border-radius:50%;background:#ffffffeb;color:#1d1d1f;font-size:20px;padding-left:3px;box-sizing:border-box}
.video-play-caption{position:absolute;z-index:1;bottom:18px;left:0;right:0;font-size:12px;font-weight:500;text-align:center}
.iphone-video-play:hover img{transform:scale(1.04)}
.iphone-video-play:focus-visible{outline:3px solid #0071e3;outline-offset:-5px}
.iphone-video-screen iframe{display:block;width:100%;height:100%;border:0}
.iphone-video-scene figcaption{font-size:12px;line-height:1.6;color:#515154;text-align:center;padding:0 8px}
.iphone-video-scene figcaption a{display:block;color:#0066cc;text-decoration:none;margin-top:4px}
.iphone-video-scene figcaption a:hover{text-decoration:underline}
@media(max-width:760px){
 .device-showcase{padding-top:4px;padding-bottom:18px}
 .device-showcase .project-track{--project-width:88vw;gap:12px}
 .device-showcase .project-slide{height:auto;border-radius:18px}
 .project-device-stage{padding:35px 5% 25px}
 .desktop-screen{padding:12px 6px 6px;border-radius:10px 10px 0 0;border-width:1px}
 .desktop-camera{top:5px;width:3px;height:3px}
 .desktop-chin{border-radius:0 0 8px 8px}
 .device-stage-label{font-size:6px;margin-top:10px;letter-spacing:.13em}
 .device-showcase .project-slide figcaption{display:block;padding:20px;min-height:125px;box-sizing:border-box}
 .device-showcase .project-slide figcaption strong{font-size:25px}
 .device-showcase .project-slide figcaption a{display:inline-block;margin-top:15px;font-size:12px}
 .device-showcase .project-pagination button{padding-inline:9px}
 .showcase-service.service-content .iphone-video-scene{padding:20px 18px 25px}
 .landscape-iphone{border-radius:28px;padding:7px 9px;transform:rotate(-3deg)}
 .iphone-video-screen{border-radius:19px}
 .iphone-island{left:13px;width:9px}
 .video-play-icon{width:46px;height:46px;font-size:16px}
 .video-play-caption{bottom:12px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.showcase-service .iphone-video-play img{transition:none}.iphone-video-play:hover img{transform:none}}
/* Keep the full phone and its fallback link within the service card. */
.showcase-service-grid .showcase-service.service-content{aspect-ratio:auto;height:auto;min-height:620px;padding-bottom:24px}
.showcase-service.service-content .iphone-video-scene{flex:1;min-height:0;width:100%;max-width:480px;height:auto;margin:24px auto 0;padding:10px 12px 12px;background:transparent}
.iphone-video-scene .landscape-iphone{width:100%;max-width:360px;flex:none;margin:12px auto 25px}
.iphone-video-scene figcaption{color:#a1a1a6}
.iphone-video-scene figcaption a{color:#8ac2ff}
@media(max-width:760px){.showcase-service-grid .showcase-service.service-content{min-height:580px;padding-bottom:24px}.showcase-service.service-content .iphone-video-scene{margin-top:18px;padding:8px 0 10px}}
/* Compact upper-half phones showcase social work below Ways to Work. */
.client-social-showcase{padding:52px 0 42px;background:#f5f5f7;color:#1d1d1f;overflow:hidden}
.client-social-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 auto 32px;padding:0 5vw;max-width:1440px}
.client-social-heading h2{font-size:clamp(32px,4.5vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1.06;margin:14px 0}
.client-social-heading p:not(.design-eyebrow){font-size:16px;line-height:1.6;color:#6e6e73;margin:0}
.client-social-controls{display:flex;gap:8px;flex-shrink:0}
.client-social-controls[hidden]{display:none}
.client-social-controls button{width:44px;height:44px;border:0;border-radius:50%;background:#e3e3e7;color:#1d1d1f;font-size:22px;cursor:pointer}
.client-social-controls button:hover{background:#d4d4da}
.client-social-controls button:disabled{opacity:.35;cursor:default}
.client-phone-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:5vw;padding:10px 5vw 30px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b8b8bf transparent}
.client-phone-card{flex:0 0 228px;min-width:0;scroll-snap-align:start;text-align:center}
.portrait-iphone{position:relative;height:270px;overflow:hidden;padding:7px 7px 0;border:2px solid #8b8c90;border-bottom:0;border-radius:35px 35px 0 0;background:#17181b;box-shadow:0 14px 22px #1d1d1f20,inset 0 0 0 2px #383a40;margin:0 0 26px}
.portrait-iphone-top{position:relative;display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 16px;background:#fff;border-radius:28px 28px 0 0;color:#1d1d1f;font:600 12px/1 Archivo,sans-serif}
.portrait-iphone-top i{position:absolute;width:70px;height:21px;left:50%;top:5px;transform:translateX(-50%);border-radius:20px;background:#17181b}
.portrait-iphone-screen{height:440px;overflow:hidden;background:#fff}
/* Fit the full profile width; the device crop reveals its upper content. */
.portrait-iphone-screen iframe{display:block;width:calc(100% / .5);height:880px;border:0;background:#fff;transform:scale(.5);transform-origin:top left}
.client-phone-card h3{font-size:19px;line-height:1.3;letter-spacing:-.025em;margin:0 0 8px;font-weight:600}
.client-phone-card>a{font-size:13px;color:#0066cc;text-decoration:none;overflow-wrap:anywhere}
.client-phone-card>a:hover{text-decoration:underline}
.client-social-note{padding:0 5vw;font-size:12px;color:#6e6e73;line-height:1.6;margin:18px 0 0}
.client-social-showcase :focus-visible{outline:3px solid #0066cc;outline-offset:4px}
@media(max-width:600px){.client-social-showcase{padding-top:32px}.client-social-heading{gap:14px;align-items:center}.client-social-heading p:not(.design-eyebrow){font-size:14px}.client-social-heading .design-eyebrow{font-size:9px}.client-social-controls{gap:5px}.client-social-controls button{width:36px;height:36px;font-size:18px}.client-phone-track{gap:24px}.client-phone-card{flex-basis:min(228px,80vw)}}
.desktop-screen img[src$="boca-grove-header.webp"],.desktop-screen img[src$="solaris-power-header.webp"]{object-fit:contain;object-position:center;background:#fff}