/* Laptop construction matched to JKD Website's live-website component. */
.portfolio-laptop{padding-bottom:16px;position:relative;width:100%;min-width:0;line-height:normal}.portfolio-bezel{background:#1b1d1c;border:1px solid #464943;border-radius:15px 15px 4px 4px;padding:17px 9px 10px;position:relative;box-shadow:0 8px 24px #26302712}.portfolio-camera{background:#535b51;border-radius:50%;width:4px;height:4px;position:absolute;top:6px;left:50%;pointer-events:none}.portfolio-screen{aspect-ratio:1100/740;overflow-anchor:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#8b9d80 #edf1e9;background:#fff;position:relative;overflow:hidden auto;line-height:0}.portfolio-base{background:linear-gradient(#d9dcd8,#a9aea7 65%,#747b73);border-radius:1px 1px 50% 50%/1px 1px 100% 100%;width:106%;height:16px;position:absolute;bottom:1px;left:-3%;box-shadow:0 9px 12px -8px #1d271b80;pointer-events:none}.portfolio-base:before{content:'';background:#969e94;border-radius:0 0 8px 8px;width:14%;height:5px;position:absolute;top:0;left:43%}.portfolio-screen>img{width:100%;height:auto;max-width:none;display:block;min-width:0;object-fit:initial}.screen-image,.screen-image.project-shot{aspect-ratio:auto;height:auto;overflow:visible;padding:30px 4%;background:#edf0e5;line-height:normal}.screen-image .portfolio-laptop{max-width:1120px;margin:auto}.screen-pin{display:none}.role-shot{overflow:visible;border:0;background:transparent;margin:22px 20px}.role-shot>div:first-child:not(.portfolio-laptop){border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:16px}.role-shot .portfolio-laptop{width:94%;margin:0 auto}.role-shot .portfolio-bezel{border-radius:10px 10px 3px 3px;padding:13px 6px 7px}.role-shot .portfolio-camera{width:3px;height:3px;top:5px}.role-shot .portfolio-base{height:12px;bottom:4px}.role-shot .portfolio-screen>img{width:100%;height:auto}.hero-device{transform:none;filter:none;width:70%;left:28%;top:80px}.hero-device .device-chin{display:none}.hero-device .frame{border:0;border-radius:0;padding:0;box-shadow:none;max-width:none;width:100%;height:100%!important;background:#fff;position:absolute;inset:0;overflow:hidden}.hero-device .frame iframe{position:absolute;left:0;top:0;border:0;max-width:none;display:block;transform-origin:0 0}.hero-device .caption{transform:none;margin:15px auto 0}.hero-device .portfolio-screen{overflow:hidden}.wide-prototype{padding:30px 4% 16px}.wide-prototype>.portfolio-laptop{margin:18px auto 0;max-width:1120px}.wide-prototype .portfolio-screen{overflow:hidden}.wide-prototype .portfolio-screen iframe{position:absolute;left:0;top:0;border:0;border-radius:0;max-width:none;margin:0;background:#fff;transform-origin:0 0}.wide-prototype .caption{padding-top:10px}.evidence-dialog-body{padding:30px 4% 20px;background:#edf0e5}.evidence-dialog-body>.portfolio-laptop{min-width:700px;width:100%}.evidence-dialog-body .portfolio-screen>img{min-width:0;width:100%;height:auto}.evidence-dialog-body .portfolio-screen{max-height:none;aspect-ratio:1100/740;overflow:auto}.role-comparison figcaption{line-height:1.8}.screen-evidence figcaption>span:after{content:' · Scroll within screen for longer views';color:#7b8473}
@media(max-width:850px){.hero-device{left:7%;top:190px;width:86%}.hero-visual{height:620px}}@media(max-width:600px){.portfolio-bezel{border-radius:10px 10px 3px 3px;padding:13px 6px 7px}.portfolio-camera{width:3px;height:3px;top:5px}.portfolio-base{height:12px;bottom:4px}.screen-image,.screen-image.project-shot{padding:24px 5%}.hero-device{top:180px;left:8%;width:84%}.hero-visual{height:430px}.wide-prototype{padding:20px 5% 12px}.wide-prototype .visual-head{gap:16px;line-height:1.6}.role-shot{margin:20px 16px}.role-shot .portfolio-laptop{width:94%}.evidence-dialog-body{padding:25px 20px}.evidence-dialog-body>.portfolio-laptop{min-width:800px}.screen-evidence figcaption>span:after{content:' · Scroll within screen'}}
.role-shot>.portfolio-laptop{display:block;justify-content:normal;align-items:normal;gap:0;padding:0 0 16px;background:transparent;border:0;border-radius:0}.role-shot>.portfolio-laptop:first-child{margin-bottom:0}
/* Full-width interface presentations: avoid reducing desktop UI to half-column thumbnails. */
.role-pair{grid-template-columns:minmax(0,1fr)}
.role-pair>.role-card+article{border-left:0;border-top:1px solid var(--line)}
.factory-role-card{grid-template-columns:minmax(0,1fr)}
.role-card-heading{padding:28px 4% 22px}
.role-price-summary{padding:20px 4%;gap:36px;grid-template-columns:1fr 1fr}
.role-price-summary strong{font-size:24px}
.role-price-summary small{font-size:10px}
.role-shot{margin:28px 4% 36px}
.role-shot .portfolio-laptop{width:100%;max-width:1120px;margin:0 auto}
.role-shot .portfolio-bezel{border-radius:15px 15px 4px 4px;padding:17px 9px 10px}
.role-shot .portfolio-camera{width:4px;height:4px;top:6px}
.role-shot .portfolio-base{height:16px;bottom:1px}
.role-shot>div:first-child:not(.portfolio-laptop){padding:14px 18px;margin-bottom:22px}
.role-shot>div>span{font-size:12px}
.role-shot .image-expand{font-size:11px;padding:8px 13px}
.role-takeaway,.role-restriction,.factory-role-note{padding:22px 4%}
@media(max-width:600px){.role-card-heading{padding:24px}.role-price-summary{padding:18px 24px;gap:18px}.role-price-summary strong{font-size:19px}.role-price-summary small{font-size:9px}.role-shot{margin:24px 5% 30px}.role-shot .portfolio-bezel{border-radius:10px 10px 3px 3px;padding:13px 6px 7px}.role-shot .portfolio-camera{width:3px;height:3px;top:5px}.role-shot .portfolio-base{height:12px;bottom:4px}.role-shot>div>span{font-size:10px}.role-shot .image-expand{font-size:10px}.role-takeaway,.role-restriction,.factory-role-note{padding:20px 24px}}