@import url("hero-portfolio.css");
/* Portfolio v16: original product compositions, not flattened mockups. */
.portfolio-section{background:#f6f4f0}.portfolio-section .section-heading h2{font-size:clamp(32px,4vw,52px);line-height:1.2}.portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:20px}.portfolio-toolbar .portfolio-filters{margin:0}.portfolio-instruction{font-size:13px;color:var(--muted)}.portfolio-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.portfolio-project{min-width:0}.project-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:674px;padding:50px 20px 30px;border-radius:20px;border:1px solid #e5e0d8;background:#e9e4dc}.stage-trainer{background:#e6e9dd}.stage-cafe{background:#f1dfce}.project-index{position:absolute;top:20px;left:22px;font-size:10px;letter-spacing:1.5px;color:#64625e;direction:ltr}.phone-shell{width:286px;max-width:100%;height:590px;border:7px solid #292c2c;border-radius:36px;padding:0;overflow:hidden;box-shadow:0 24px 35px -20px #171b254d;position:relative;background:#fff}.phone-shell:after{content:'';position:absolute;bottom:6px;left:calc(50% - 37px);width:74px;height:4px;background:#292c2c;border-radius:5px;pointer-events:none;opacity:.5}.business-card{width:100%;height:100%;font-family:Heebo,Arial,sans-serif;text-align:center;overflow:hidden;background:#fff;color:#292c2c;line-height:1.5}.bc-photo{position:relative;height:202px;overflow:hidden}.bc-photo img{display:block;width:100%;height:100%;object-fit:cover}.bc-content{padding:23px 18px 25px}.business-card h3{font-size:25px;line-height:1.2;margin:7px 0 10px;letter-spacing:-.5px}.business-card p{font-size:13px;line-height:1.7;margin:0 0 19px;color:inherit}.business-card small{font-size:10px;letter-spacing:.4px}.bc-photo-tag{position:absolute;bottom:14px;left:0;right:0;color:white;font-size:9px;letter-spacing:2px;text-shadow:0 1px 7px #000}.bc-architect{background:#fffdf8}.bc-architect .bc-photo:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#3336);pointer-events:none}.bc-photo-tag{z-index:1}.bc-architect .bc-content{padding-top:0}.bc-monogram{position:relative;margin:-26px auto 17px;width:64px;height:64px;border:4px solid #fffdf8;background:#5a6757;color:white;font-family:Georgia,serif;line-height:1;padding-top:9px;font-size:28px;border-radius:50%;z-index:2}.bc-monogram span{display:block;font-size:6px;font-family:Arial;letter-spacing:2px;margin-top:4px}.business-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:22px 0}.business-actions button{display:flex;align-items:center;flex-direction:column;gap:8px;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;font-family:inherit;font-size:9px;white-space:nowrap}.business-actions svg{width:42px;height:42px;padding:11px;border-radius:50%;background:#eef0e9;color:#43533f}.bc-note{border-top:1px solid #deded3;padding:17px 0;font-size:11px;line-height:1.7}.bc-note b,.bc-note span,.bc-note small{display:block}.bc-save{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 6px;font-family:inherit;font-size:11px;font-weight:700;border:0;border-radius:7px;background:#52634e;color:#fff;cursor:pointer}.bc-save svg{width:15px;height:15px}.bc-trainer .bc-photo{height:275px}.bc-trainer .bc-photo img{object-position:50% 20%}.bc-trainer .bc-photo:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#172313e8)}.bc-move{position:absolute;top:17px;left:16px;font-size:27px;letter-spacing:-1.5px;line-height:1;color:#fff;font-weight:900;direction:ltr;text-shadow:0 1px 4px #000}.bc-move span{color:#d9ef8d}.bc-trainer-title{position:absolute;bottom:20px;right:20px;text-align:right;color:white;z-index:1}.bc-trainer-title h3{font-size:32px;margin:3px 0 0}.bc-trainer-title small{letter-spacing:1.8px;font-size:8px}.bc-trainer .bc-content{padding:18px}.bc-trainer .bc-content>p{margin-bottom:10px;text-align:right;font-size:14px}.bc-trainer .business-actions{grid-template-columns:1fr 1fr;margin:15px 0;gap:10px}.bc-trainer .business-actions button{flex-direction:row;border:1px solid #e2e7d9;border-radius:8px;gap:8px;font-size:10px;padding:8px;text-align:right}.bc-trainer .business-actions svg{width:27px;height:27px;padding:5px;border-radius:5px;background:#e7f0ce;flex-shrink:0}.bc-trainer .bc-note{padding:11px 0;font-size:10px}.bc-trainer .bc-save{background:#243e2c;color:#e7f3ce}.bc-cafe{background:#fff9f0;color:#56392b}.bc-cafe-header{height:83px;padding:13px 0;background:#fff9f0}.bc-cafe-header>b{font-size:34px;line-height:1;display:block}.bc-cafe-header>b>span{color:#c66e39}.bc-cafe-header small{font-size:7px;letter-spacing:1.5px}.bc-cafe .bc-photo{height:172px}.bc-cafe .bc-photo img{object-position:50% 65%}.bc-cafe .bc-content{padding:20px 15px}.bc-cafe h3{font-size:23px}.bc-cafe .business-actions{margin:21px 0}.bc-cafe .business-actions svg{background:#f0e0c9;color:#774e31}.bc-cafe .bc-note{padding:13px 0;border-color:#eadccb}.bc-cafe .bc-note small{font-size:8px;opacity:.7;margin-top:3px}.bc-cafe .bc-save{background:#76462e}.project-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 12px;text-align:right}.project-meta small{font-size:11px;color:#797466}.project-meta h3{font-size:23px;margin:4px 0;line-height:1.3;color:#282a2a}.project-meta p{font-size:13px;margin:6px 0 0;color:#66645e;line-height:1.6}.preview-card{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:10px 13px;background:#fff;border:1px solid #d9d5cf;border-radius:100px;font:500 12px Heebo,Arial;cursor:pointer}.preview-card svg{width:16px;height:16px}.project-order{display:block;font-size:13px;font-weight:600;color:var(--blue);padding-top:12px;border-top:1px solid #dfdcd4}.preview-card:hover{background:#eee9fa;border-color:#947bc3}.portfolio-project button:focus-visible,.portfolio-web-project a:focus-visible{outline:3px solid #8965dd;outline-offset:4px}.portfolio-caption{max-width:770px;margin:35px auto 0;font-size:12px;line-height:1.8;color:#6b685f;text-align:center}.portfolio-web-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.portfolio-web-project:first-child{grid-column:1/-1}.web-stage{display:block;position:relative;background:#e6e2d9;border-radius:20px;padding:30px 30px 62px;overflow:hidden;color:inherit}.browser-preview{border-radius:10px;overflow:hidden;background:#faf8f2;box-shadow:0 17px 30px -20px #3338;border:1px solid #fff8}.browser-bar{display:flex;gap:5px;align-items:center;height:27px;padding:0 12px;background:#fff;direction:ltr}.browser-bar i{display:block;width:5px;height:5px;background:#d0ccc3;border-radius:50%}.browser-bar span{font-size:8px;margin:auto;color:#777}.web-mini-nav{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:9px}.web-mini-nav b{font-size:18px;letter-spacing:-.5px}.web-mini-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:12px 22px 22px}.web-mini-hero h3{font-size:clamp(23px,3vw,35px);line-height:1.2;margin:15px 0 22px}.web-mini-hero small{font-size:9px}.web-mini-hero img{width:100%;height:260px;object-fit:cover;border-radius:2px}.portfolio-web-project:first-child .web-mini-hero img{height:330px}.portfolio-web-project:first-child .web-mini-hero{grid-template-columns:1fr 1.4fr}.portfolio-web-project:first-child .web-mini-hero h3{font-size:clamp(35px,5vw,63px);max-width:330px}.web-mini-cta{display:inline-block;padding:10px 13px;font-size:9px;background:#394439;color:#fff;border-radius:3px}.web-mini-footer{border-top:1px solid #0001;font-size:9px;text-align:center;padding:12px}.web-open{position:absolute;bottom:20px;right:30px;font-size:12px;font-weight:600}.web-move .web-stage{background:#dfe6cc}.web-move .browser-preview{background:#eef1e8;color:#243e2c}.web-move .web-mini-nav b{font-size:25px;font-weight:900}.web-move .web-mini-hero img{object-position:50% 20%;border-radius:12px}.web-move .web-mini-cta{background:#263e2b;color:#e3edce}.web-coffee .web-stage{background:#ecd7c1}.web-coffee .browser-preview{background:#fbf0dd;color:#72472d}.web-coffee .web-mini-nav b{font-size:27px}.web-coffee .web-mini-hero img{border-radius:80px 80px 4px 4px;object-position:50% 65%}.web-coffee .web-mini-cta{background:#77492c}.portfolio-web-project .project-meta{margin-top:18px}.web-stage:hover .browser-preview{transform:translateY(-4px)}.browser-preview{transition:transform .2s ease}.portfolio-panel[hidden]{display:none!important}
#cardPreviewDialog{width:min(410px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #ded9ce;border-radius:22px;background:#faf8f3;color:#292c2c;box-shadow:0 30px 100px #0005;overflow:auto}#cardPreviewDialog::backdrop{background:#202128b3;backdrop-filter:blur(5px)}.card-preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 19px;background:#fff;position:sticky;top:0;z-index:4;border-bottom:1px solid #e4e0d8}.card-preview-toolbar small{font-size:10px;color:#74716a}.card-preview-toolbar h3{margin:4px 0 0;font-size:17px}#closeCardPreview{border:1px solid #ddd;background:#f6f4f0;border-radius:50%;width:36px;height:36px;font-size:26px;cursor:pointer}#cardPreviewContent{padding:18px}#cardPreviewContent .business-card{height:auto;min-height:620px;border:1px solid #e6e1d8;border-radius:15px}#cardPreviewContent .bc-photo{height:235px}#cardPreviewContent .bc-trainer .bc-photo{height:320px}#cardPreviewContent .bc-cafe .bc-photo{height:205px}#cardPreviewContent .business-card h3{font-size:29px}#cardPreviewContent .business-actions button{font-size:11px}#cardPreviewStatus{font-size:11px;line-height:1.7;padding:0 20px 17px;text-align:center;margin:0;color:#635f56}.card-preview-open{overflow:hidden}.demo-toast{z-index:1000}
@media(max-width:1100px){.project-stage{padding-left:12px;padding-right:12px}.portfolio-card-grid{gap:15px}.phone-shell{height:585px}.project-meta{align-items:flex-start}.preview-card{padding:9px}.project-meta h3{font-size:21px}.web-mini-hero{gap:12px;padding:12px}.web-mini-nav{padding:15px 12px}.web-mini-nav>span{display:none}.web-mini-hero img{height:235px}}
@media(max-width:900px){.portfolio-card-grid{grid-template-columns:1fr;max-width:520px;margin:auto}.project-stage{min-height:660px;padding:48px 30px 30px}.phone-shell{width:302px;height:590px}.project-meta h3{font-size:25px}.project-meta{margin-top:20px}.portfolio-project{margin-bottom:24px}.portfolio-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.portfolio-web-grid{grid-template-columns:1fr}.portfolio-web-project:first-child{grid-column:auto}.portfolio-web-project:first-child .web-mini-hero{grid-template-columns:1fr 1fr}.portfolio-web-project:first-child .web-mini-hero img{height:260px}.portfolio-web-project:first-child .web-mini-hero h3{font-size:32px}.web-mini-hero h3{font-size:30px}.web-stage{padding:20px 20px 55px}.web-open{right:20px;bottom:17px}}
@media(max-width:480px){.portfolio-section .section-heading h2{font-size:34px}.portfolio-toolbar .portfolio-filters{width:100%;display:flex}.portfolio-toolbar .portfolio-filters button{flex:1;padding:12px 9px;font-size:12px}.project-stage{min-height:644px;padding:42px 15px 22px;border-radius:17px}.phone-shell{width:286px;height:580px}.business-card .bc-content{padding-left:13px;padding-right:13px}.bc-trainer .bc-photo{height:265px}.project-meta h3{font-size:23px}.web-stage{padding:16px 12px 50px}.web-mini-hero{gap:10px}.web-mini-hero img,.portfolio-web-project:first-child .web-mini-hero img{height:220px}.web-mini-hero h3,.portfolio-web-project:first-child .web-mini-hero h3{font-size:25px}.web-mini-cta{padding:8px;font-size:8px}.web-mini-nav{padding:12px}.web-mini-hero small{font-size:8px}.portfolio-caption{margin-top:20px}}
@media(max-width:350px){.project-stage{padding-left:7px;padding-right:7px}.business-actions{gap:4px}.business-actions button{font-size:8px}.business-actions svg{width:38px;height:38px;padding:9px}.bc-trainer .business-actions button{font-size:9px;padding:7px 4px}.bc-trainer .business-actions svg{width:24px;height:24px}.business-card h3{font-size:23px}.bc-note{font-size:10px}.web-mini-hero h3,.portfolio-web-project:first-child .web-mini-hero h3{font-size:22px}}
.web-move .browser-preview{background:#202127;color:#f5f7ef}.web-move .web-mini-cta{background:#b6ef4c;color:#22291b}.web-move .web-mini-footer{border-color:#ffffff20}.project-stage{min-height:714px}.phone-shell{height:630px}
@media(max-width:900px){.project-stage{min-height:700px}.phone-shell{height:630px}}
@media(max-width:480px){.project-stage{min-height:694px}.phone-shell{height:630px}}
.portfolio-web-grid{gap:35px}.web-stage{padding:22px 22px 58px}.site-shot-wrap{border-radius:9px;overflow:hidden;box-shadow:0 20px 35px -25px #0007;border:1px solid #ffffff80;background:#f7f5ed}.actual-site-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .25s ease}.web-stage:hover .actual-site-shot{transform:scale(1.015)}.web-move .web-stage{background:#dce3d1}.web-coffee .web-stage{background:#f0e4ce}.portfolio-web-project .project-meta h3{font-size:25px}@media(max-width:480px){.web-stage{padding:12px 12px 48px}.web-open{right:14px;font-size:11px}.portfolio-web-grid{gap:30px}.portfolio-web-project .project-meta h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.browser-preview,.actual-site-shot{transition:none}}