/* Product-screen fan: sized to the viewport, with motion confined to the stage. */
.hero-heading{padding-top:45px}.hero h1{font-weight:700;letter-spacing:-.065em}.intro em{font:500 15px var(--body);color:var(--ink)}.stage{height:370px;margin-top:10px;perspective:1500px;touch-action:pan-y}.floor{height:16px;bottom:25px;opacity:.09;filter:blur(20px)}#deck{transform-style:preserve-3d}.project-window{top:43%;left:50%;transform-origin:50% 50%;border-radius:7px;border-color:#b8c1d0;box-shadow:0 8px 15px #18273c18;background:#fff;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .3s,box-shadow .3s}.project-window.active{box-shadow:0 15px 24px #17253a20}.project-window.raised{box-shadow:0 23px 32px #17253a30;filter:brightness(1.025)}.project-window.dimmed{filter:brightness(.86) saturate(.7)}.window-bar{font-size:9px;height:23px;background:#fff}.project-window img{height:calc(100% - 23px);background:#e8ecf2}.phone-window{border-radius:20px;border:5px solid #202733}.phone-window .window-bar{display:none}.phone-window img{height:100%;background:#111820;border-radius:14px}.window-open{background:#e3293f;width:30px;height:30px}.raised .window-open{opacity:1}.fan-hint{text-align:center;margin:0 0 20px;font-size:8px;letter-spacing:.15em;color:#697484}.selection-controls{margin:0 0 30px}.round{border-radius:3px}.round:hover{background:#e3293f;border-color:#e3293f}.hero-bottom{padding:20px 0}.section-head h2 em,.about h2 em{font:500 1em var(--display);color:#e3293f;letter-spacing:inherit}.card-visual{border-radius:3px}.card-arrow{border-radius:3px}.filters button{border-radius:3px}.filters button[aria-pressed=true]{background:#e3293f}.about{border-radius:3px}.portrait img{filter:saturate(.8)}dialog{border-radius:6px}dialog::backdrop{backdrop-filter:blur(6px)}.detail-media{background:#e2e7ee}.close-dialog{border-radius:3px}.project-open .project-window{filter:brightness(.7);box-shadow:none}.project-open .hero-heading{opacity:.3;transition:opacity .3s}.footer-title span{color:#f14a5c}
.hero-heading{padding-top:clamp(20px,3.6vh,45px)}.hero h1{font-size:clamp(40px,min(7.4vw,11vh),110px);margin-top:18px;margin-bottom:14px}.stage{height:clamp(270px,42vh,390px)}
@media(min-width:1500px){.stage{height:400px}.hero-heading{padding-top:45px}}
@media(max-width:900px){.stage{height:330px}.hero h1{font-size:7.8vw}}
@media(max-width:560px){.hero h1{font-size:12vw}.hero-heading{padding-top:35px}.intro em{font-size:12px}.stage{height:295px;margin-top:14px}.project-window{top:45%}.fan-hint{font-size:7px;letter-spacing:.11em;margin-bottom:17px}.selection-controls{margin-bottom:25px}.phone-window{border-width:4px;border-radius:16px}.window-bar{height:18px;font-size:7px;padding:0 6px}.project-window:not(.phone-window) img{height:calc(100% - 18px)}.window-open{width:24px;height:24px;font-size:12px;right:7px;bottom:7px}}
@media(prefers-reduced-motion:reduce){.project-window{transition:none}.floor{display:none}}

/* The source capture already contains a device. Keep its pixels, without a second shell. */
.project-window{transition:filter .2s,box-shadow .2s}
.phone-window,.phone-window.active,.phone-window.raised{border:0;border-radius:0;background:transparent;box-shadow:none}
.phone-window img{border:0;border-radius:0;background:transparent;object-fit:contain}
.phone-window .window-open{display:none}
.selection-controls{gap:0}

/* Reserve headroom for the lifted portrait capture at every viewport height. */
.project-window{top:50%}

/* Equal card hit areas keep every adjacent project reachable, including portrait captures. */
.portrait-capture img{object-fit:contain;background:#e8ecf2}

#deck{transform-style:flat;pointer-events:none}.project-window{pointer-events:auto}

.preview-media{display:block;position:relative;width:100%;height:100%;min-height:0;overflow:hidden}.project-window>.preview-media{height:calc(100% - 23px)}.preview-media>img{width:100%;height:100%;object-fit:contain}.preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#e8ecf2;opacity:0;pointer-events:none}.preview-video.is-playing{opacity:1}.video-label{position:absolute;bottom:8px;left:8px;padding:4px 7px;background:#171a20;color:#fff;font-size:9px;line-height:1.3;border-radius:2px;pointer-events:none}.card-visual .preview-media{min-height:0}.card-type,.card-arrow{z-index:2}@media(max-width:560px){.project-window>.preview-media{height:calc(100% - 18px)}}

.stage{overflow:clip;user-select:none;-webkit-user-select:none}body{overflow-x:clip}

.detail-media video{display:block;max-height:44svh;max-width:100%;width:auto}