/* Shared portfolio component: one real implementation, separate from demos. */
.client-project{background:var(--fx-ink);color:var(--fx-paper);padding:clamp(56px,7vw,112px) 7%;scroll-margin-top:90px;font-family:var(--fx-body);overflow:hidden}
.client-project *{box-sizing:border-box;min-width:0}
.client-project-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #eeeade40;padding-top:20px;margin-bottom:55px;font-size:.66rem;font-weight:700;letter-spacing:.1em;line-height:1.6}
.client-project-top p{margin:0}.client-project-top>span{display:flex;align-items:center;gap:9px;letter-spacing:0;font-weight:500}
.client-project-top i{display:block;width:7px;height:7px;border-radius:50%;background:var(--fx-lime);flex-shrink:0}
.client-project-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8%;align-items:center}
.client-project-visual{position:relative;padding:0 12% 0 0;align-self:center}
.client-desktop{display:block;overflow:hidden;border:1px solid #eeeade50;border-radius:8px;box-shadow:0 25px 65px #060e0980;transform:perspective(1400px) rotateY(5deg) rotate(-2deg);transition:transform .35s ease}
.client-browser{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#e9e7dd;color:#33483a;padding:11px 13px;font-size:.55rem;line-height:1.3}
.client-browser>span:first-child{letter-spacing:3px;font-size:.42rem}
.client-desktop img,.client-phone img{display:block;width:100%;height:auto}
.client-phone{position:absolute;width:25%;right:0;top:30%;border:5px solid #101914;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px #060e0980;transform:rotate(5deg);transition:transform .35s ease;background:#101914}
.client-preview-note{font-size:.58rem;line-height:1.7!important;margin:25px 26% 0 0!important;color:#c6ccbc}
.client-project-copy p{margin:0;line-height:1.75}
.client-project-kicker{font-size:.67rem;color:#c6ccbc;letter-spacing:.04em}
.client-project .client-project-copy h2{font:600 clamp(80px,8vw,132px)/.9 var(--fx-display);letter-spacing:-.02em;color:var(--fx-paper);margin:18px 0 24px;text-transform:none}
.client-project-copy h2 span{color:var(--fx-lime)}
.client-project-copy .client-project-intro{font-size:clamp(20px,2vw,30px);line-height:1.25;margin-bottom:22px;font-weight:500;letter-spacing:-.025em}
.client-project-intro+p{font-size:.82rem;color:#dae0d1;max-width:38em}
.client-project-features{margin:28px 0}
.client-project-features>div{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:13px 0;border-top:1px solid #eeeade30;font-size:.72rem;line-height:1.6}
.client-project-features dt{font-weight:700;color:var(--fx-lime)}.client-project-features dd{margin:0;color:#dae0d1}
.client-project-cta{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;padding:16px 23px;background:var(--fx-lime);color:var(--fx-ink)!important;border:1px solid var(--fx-lime);border-radius:40px;font-size:.78rem;font-weight:700;text-decoration:none;line-height:1.4;transition:background .2s}
.client-project-cta:hover{background:#edffc0}.client-project-more{margin-top:18px!important;font-size:.72rem}.client-project-more a{text-decoration:underline;text-underline-offset:5px}
.client-project-note{margin-top:26px!important;font-size:.62rem;color:#c6ccbc;max-width:42em}
.client-project a:focus-visible{outline:3px solid var(--fx-lime);outline-offset:6px}
@media(hover:hover){.client-desktop:hover{transform:perspective(1400px) rotateY(0) rotate(0)}.client-phone:hover{transform:rotate(0)}}
@media(max-width:1000px){.client-project-grid{grid-template-columns:1fr;gap:55px}.client-project-visual{max-width:780px;width:100%;padding-right:17%;margin:auto}.client-phone{width:23%;right:1%;top:16%}.client-preview-note{margin-right:30%!important}.client-project-copy{max-width:780px;width:100%;margin:auto}.client-project .client-project-copy h2{font-size:clamp(80px,15vw,132px)}}
@media(max-width:600px){.client-project{padding-inline:7%}.client-project-top{align-items:start;flex-wrap:wrap;gap:10px;margin-bottom:35px;font-size:.6rem}.client-project-grid{gap:36px}.client-project-visual{padding-right:17%}.client-phone{border-width:3px;border-radius:11px;width:25%;top:18%;right:0}.client-browser{font-size:.43rem;padding:8px}.client-browser>span:first-child{display:none}.client-preview-note{margin:21px 27% 0 0!important;font-size:.54rem}.client-project .client-project-copy h2{font-size:24vw;margin-top:14px}.client-project-features>div{grid-template-columns:80px 1fr;gap:12px}.client-project-copy .client-project-intro{font-size:1.35rem}.client-project-intro+p{font-size:.78rem}.client-project-note{font-size:.63rem}.client-project-cta{max-width:100%}}
.large-text .client-project-grid{grid-template-columns:1fr}.large-text .client-project-copy,.large-text .client-project-visual{max-width:900px;width:100%;margin-inline:auto}.large-text .client-project-features>div{grid-template-columns:1fr;gap:5px}.large-text .client-project-note,.large-text .client-project-intro+p{max-width:none}.large-text .client-project-top{flex-wrap:wrap}.large-text .client-project-cta{flex-wrap:wrap}.large-text .client-project a,.large-text .client-project p{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.client-desktop,.client-phone{transition:none;transform:none}}