/* Only the new examples; retain the service's existing pink design and pricing. */
.clx{--clx-pink:#ff42bc;margin:72px 0 60px;color:#f4f1f5}
.clx,.clx *{box-sizing:border-box}
.clx .clx-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:46px;padding-top:42px;border-top:1px solid #ffffff20}
.clx .clx-eyebrow{color:var(--clx-pink);font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 18px}
.clx h2#clx-title{font-family:inherit;font-size:clamp(34px,4.2vw,60px);font-weight:400;line-height:1.12;letter-spacing:.01em;text-transform:uppercase;margin:0}
.clx .clx-hint{font-size:14px;line-height:1.5;color:#aaa3af;margin:0;flex-shrink:0}
.clx .clx-hint span{color:var(--clx-pink)}
.clx .clx-project{margin:0 0 56px;padding:0 0 48px;border-bottom:1px solid #ffffff20;background:none}
.clx .clx-project-title{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 24px;background:none;border:0;padding:0}
.clx .clx-project-title h3{font-family:inherit;font-size:clamp(24px,2.2vw,34px);font-weight:400;line-height:1.2;letter-spacing:0;margin:0;text-transform:none}
.clx .clx-project-title h3 span,.clx .clx-more-grid figcaption span{color:var(--clx-pink);font-size:13px;vertical-align:middle;margin-right:16px}
.clx .clx-project-title p{font-size:15px;line-height:1.5;color:#aaa3af;margin:0}
.clx .clx-image{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;text-decoration:none;border:0;background:transparent;padding:0;cursor:zoom-in}
.clx .clx-image img{display:block;max-width:100%;height:auto;margin:0;border:0;object-fit:contain;transition:filter .25s ease}
.clx .clx-expand{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#171017de;color:var(--clx-pink);font:22px/1 sans-serif;opacity:0;transition:opacity .2s ease}
.clx .clx-image:focus-visible{outline:3px solid var(--clx-pink);outline-offset:4px}
.clx .clx-image:focus-visible .clx-expand{opacity:1}
@media(hover:hover){.clx .clx-image:hover .clx-expand{opacity:1}.clx .clx-image:hover img{filter:brightness(1.035)}}
.clx .clx-favorit{border-radius:14px;overflow:hidden;background:white}
.clx .clx-favorit-logo{min-height:150px;padding:25px 18%;background:#fff}
.clx .clx-favorit-logo img{width:640px;max-height:150px}
.clx .clx-facade img{width:100%}
.clx .clx-caption{font-size:17px;line-height:1.5;color:#aaa3af;margin:24px 0 0}
.clx .clx-caption strong{display:block;font-size:22px;font-weight:400;color:#f4f1f5;margin-bottom:6px}
.clx .clx-caption span{display:block}
.clx .clx-pers-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:24px;align-items:start}
.clx .clx-pers-logo{background:#192441;border-radius:14px;align-self:stretch;min-height:0}
.clx .clx-pers-logo img{width:100%;height:100%;max-height:640px;object-fit:contain}
.clx .clx-pers-detail{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-self:center}
.clx figure{margin:0;min-width:0}
.clx .clx-pers-detail .clx-image{aspect-ratio:1}
.clx .clx-pers-detail img{width:100%;height:100%;object-fit:contain}
.clx .clx-pers-detail figcaption{font-size:13px;line-height:1.4;color:#aaa3af;margin-top:12px}
.clx .clx-pers-detail{grid-template-columns:1fr;max-width:276px;justify-self:center;width:100%}
.clx .clx-more h3{font-family:inherit;font-size:clamp(27px,2.8vw,40px);line-height:1.2;font-weight:400;letter-spacing:.01em;text-transform:uppercase;margin:0 0 28px}
.clx .clx-more-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.clx .clx-more-grid .clx-image{height:clamp(230px,29vw,390px);border-radius:14px;padding:20px 12%}
.clx .clx-more-grid img{max-height:100%;width:100%;height:100%;object-fit:contain}
.clx .clx-prizma{background:#fff}
.clx .clx-kay{background:#84c092}
.clx .clx-more-grid figcaption{font-size:25px;line-height:1.3;margin-top:20px}
.clx .clx-contact{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #ffffff20;margin-top:58px;padding-top:40px}
.clx .clx-contact p{font-size:clamp(25px,3vw,40px);font-weight:400;line-height:1.15;margin:0}
.clx .clx-contact a{flex-shrink:0}
.clx-dialog{position:fixed;inset:0;max-width:94vw;max-height:94dvh;width:fit-content;height:fit-content;margin:auto;padding:52px 24px 20px;border:1px solid #ffffff35;border-radius:14px;background:#111015;color:#fff;overflow:auto}
.clx-dialog::backdrop{background:#08050dee;backdrop-filter:blur(6px)}
.clx-dialog:not([open]){display:none}
.clx-dialog figure{margin:0;text-align:center}
.clx-dialog img{display:block;width:auto;height:auto;max-width:85vw;max-height:74dvh;object-fit:contain;margin:auto}
.clx-dialog figcaption{font-family:inherit;font-size:16px;line-height:1.5;margin-top:15px;color:#d0c7d3}
.clx-dialog .clx-close{position:absolute;right:10px;top:7px;width:42px;height:42px;border:0;border-radius:50%;background:#281823;color:#ff42bc;font:32px/1 sans-serif;cursor:pointer}
.clx-dialog .clx-close:focus-visible{outline:2px solid #ff42bc}
@media(prefers-reduced-motion:no-preference){.clx .clx-enter{animation:clx-appear .55s ease-out both}@keyframes clx-appear{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}}
@media(max-width:760px){.clx{margin-top:48px}.clx .clx-heading{display:block;padding-top:30px;margin-bottom:32px}.clx .clx-hint{margin-top:18px}.clx .clx-project-title{display:block}.clx .clx-project-title p{margin-top:12px}.clx .clx-favorit-logo{min-height:100px;padding:22px 13%}.clx .clx-favorit-logo img{max-height:110px}.clx .clx-pers-grid{grid-template-columns:1fr}.clx .clx-pers-logo{aspect-ratio:1.4}.clx .clx-pers-detail{max-width:none;grid-template-columns:1fr 1fr;gap:16px}.clx .clx-more-grid{gap:16px}.clx .clx-more-grid .clx-image{height:220px;padding:16px 10%}.clx .clx-more-grid figcaption{font-size:21px}.clx .clx-expand{opacity:1;width:28px;height:28px;font-size:19px;right:8px;top:8px}.clx .clx-contact{align-items:start;flex-direction:column}.clx .clx-contact .sp-cta{max-width:100%}.clx .clx-project{padding-bottom:34px;margin-bottom:36px}.clx .clx-caption{font-size:15px}.clx-dialog{padding:50px 12px 16px}.clx-dialog img{max-width:85vw}}
@media(max-width:450px){.clx .clx-more-grid{grid-template-columns:1fr}.clx .clx-more-grid .clx-image{height:260px;padding:20px 18%}.clx .clx-more-grid figure+figure{margin-top:16px}.clx .clx-more-grid figcaption{margin-top:13px}}