.work.section{padding-top:48px;padding-bottom:42px;scroll-margin-top:0;background:#f8f8fc}
.work .section-heading{margin-bottom:28px;gap:40px;align-items:end}
.work .section-heading h2{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.04em}
.work .section-heading>p{max-width:430px;font-size:16px;line-height:1.65}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.portfolio-card{border:1px solid #dfe3ef;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 8px 28px #01073606;min-width:0;transition:box-shadow .3s,border-color .3s}
.portfolio-card:hover{border-color:#bbc6df;box-shadow:0 14px 36px #01073610}
.portfolio-preview{display:block;position:relative;width:100%;height:clamp(230px,23vw,315px);padding:22px 28px 0;background:radial-gradient(ellipse at 80% 10%,#d3eae7,transparent 65%),#e6efef;overflow:hidden;border:0;text-align:left;color:#233e48;cursor:pointer;text-decoration:none}
.shop-card .portfolio-preview{background:radial-gradient(ellipse at 80% 10%,#efddbd,transparent 65%),#f0e9dc;color:#5d4b35}
.preview-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:.12em;margin-bottom:22px}
.preview-label>span{font-weight:400;opacity:.65}
.preview-window{display:block;width:100%;border-radius:9px 9px 0 0;background:#fff;border:1px solid #01073616;box-shadow:0 12px 28px #01073619;overflow:hidden;transform:translateY(6px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.portfolio-preview:hover .preview-window,.portfolio-preview:focus-visible .preview-window{transform:translateY(0)}
.preview-chrome{display:flex;align-items:center;gap:4px;height:24px;background:#fff;padding:0 10px;border-bottom:1px solid #e9edf2}
.preview-chrome i{width:4px;height:4px;border-radius:50%;background:#bcc5d0}
.preview-chrome>span{font-size:8px;color:#798295;margin-left:8px;letter-spacing:.02em}
.preview-window img{display:block;width:100%;height:230px;object-fit:cover;object-position:top}
.shop-card .preview-window img{object-position:center;height:230px}
.preview-open{position:absolute;right:18px;bottom:14px;font-size:11px;font-weight:600;background:#fff;color:#010736;border-radius:30px;padding:9px 13px;box-shadow:0 2px 10px #01073612}
.portfolio-body{padding:23px 25px 18px}
.project-name{display:flex;justify-content:space-between;align-items:center;gap:12px}
.project-name h3{font-size:25px;line-height:1.15;letter-spacing:-.035em;margin:0}
.project-name>span{font-size:10px;color:#667086;background:#f3f5f9;padding:5px 8px;border-radius:4px;white-space:nowrap}
.portfolio-body>p{font-size:14px;line-height:1.65;color:#626a7b;margin:12px 0 16px;max-width:490px}
.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.project-tags span{font-size:10px;line-height:1.4;color:#43526f;padding:5px 8px;border:1px solid #e2e6ef;border-radius:5px}
.portfolio-actions{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e7eaf1;padding-top:16px}
.portfolio-actions a,.portfolio-actions button{font-size:12px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:14px;background:none;border:0;padding:4px 0;color:#22396f;cursor:pointer;min-height:32px}
.portfolio-actions a:hover,.portfolio-actions button:hover{color:#010736;text-decoration:underline;text-underline-offset:5px}
.portfolio-actions span{font-size:14px;font-weight:400}
.shop-access{font-size:10px;color:#71798b;margin-top:8px}.shop-access summary{cursor:pointer;min-height:24px;padding:4px 0}.shop-access p{font-size:12px;line-height:1.6;margin:6px 0}.shop-access code{color:#22396f;font-weight:700}
.portfolio-note{font-size:11px;color:#7b8293;margin:20px 0 0;text-align:center}
#dental-dialog{width:min(1080px,94vw);max-width:none;max-height:90svh;padding:0;border:1px solid #d9dcef;border-radius:16px;color:#010736;background:#fff;overflow:auto}
#dental-dialog::backdrop{background:#010736a6;backdrop-filter:blur(6px)}
.project-dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e6ef;position:sticky;top:0;background:#fff;z-index:2}
.project-dialog-heading h2{font-size:20px;margin:0}.project-dialog-heading button{background:#f0f2f8;color:#22396f;border:0;border-radius:6px;padding:10px 15px;cursor:pointer}
#dental-dialog .build-showcase{border:0;border-radius:0;box-shadow:none;max-width:none;margin:0}
#dental-dialog .build-screen-scroll{height:350px;overflow:auto;display:block}
#dental-dialog .build-screen-scroll img{width:100%;height:auto;object-fit:contain}
#dental-dialog .build-stage{padding:24px;grid-template-columns:2fr 1fr}
#dental-dialog .build-story h3{font-size:24px}
@media(max-width:900px){.portfolio-preview{height:245px;padding:18px 20px 0}.portfolio-body{padding:20px}.project-name h3{font-size:22px}.portfolio-actions{gap:8px}.portfolio-actions a,.portfolio-actions button{font-size:11px;gap:7px}}
@media(max-width:640px){.work.section{padding-top:36px;padding-bottom:32px}.work .section-heading{gap:14px;margin-bottom:24px}.work .section-heading>p{font-size:14px}.portfolio-grid{grid-template-columns:1fr;gap:24px}.portfolio-preview{height:235px}.portfolio-body>p{font-size:14px}.portfolio-actions a,.portfolio-actions button{font-size:12px;min-height:40px}#dental-dialog .build-stage{grid-template-columns:1fr;padding:16px}#dental-dialog .build-screen-scroll{height:300px}.project-dialog-heading{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.portfolio-card,.preview-window{transition:none}}