.tr-content:has(.portfolio-cases){max-width:1520px;padding-inline:clamp(20px,5vw,88px)}
.portfolio-cases{margin:70px 0}.portfolio-case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,100px);align-items:center;padding:100px 0;border-top:1px solid #ffffff18;min-width:0}.portfolio-case:nth-child(even) .portfolio-copy{order:2}.portfolio-copy h2{font-size:clamp(34px,4.3vw,64px);font-weight:500;letter-spacing:-.055em;line-height:1.08;margin:24px 0}.portfolio-copy p{color:#ada8b5;font-size:15px}.portfolio-copy .portfolio-role{color:#e6e1ed;font-size:17px}.portfolio-number{font-size:11px!important;letter-spacing:.05em;display:flex;gap:16px}.portfolio-number span{max-width:290px}.portfolio-copy .text-link{display:inline-flex;margin-top:24px;gap:24px;color:#eee}.portfolio-devices{position:relative;min-width:0;padding:25px 9% 80px 0;perspective:1100px;isolation:isolate}.portfolio-monitor{position:relative;padding:10px 10px 18px;background:linear-gradient(140deg,#535158,#141416 32%,#333139);border:1px solid #78707f;border-radius:17px;box-shadow:0 25px 45px #0009;transform:rotateY(-7deg) rotateX(3deg)}.portfolio-screen{overflow:hidden;position:relative;background:#161619;contain:paint}.portfolio-monitor .portfolio-screen{aspect-ratio:1.62;border-radius:7px}.portfolio-screen img{display:block;width:100%;height:auto;max-height:none;border-radius:0;transform:translate3d(0,var(--image-y,0px),0);transition:none}.portfolio-monitor>i{position:absolute;top:100%;left:39%;height:42px;width:22%;background:linear-gradient(90deg,#343137,#69656c,#242127);clip-path:polygon(22% 0,78% 0,85% 87%,100% 94%,100% 100%,0 100%,0 94%,15% 87%)}.portfolio-phone{position:absolute;right:0;bottom:57px;width:23%;padding:5px;background:linear-gradient(145deg,#b2a8bd,#161318 25%,#665c71);border:1px solid #8e829e;border-radius:22px;box-shadow:-14px 15px 25px #0008;transform:rotate(5deg)}.portfolio-phone .portfolio-screen{aspect-ratio:.47;border-radius:17px}.portfolio-phone>i{position:absolute;top:10px;left:33%;height:7px;width:34%;background:#08070a;border-radius:12px}.portfolio-devices>small{position:absolute;bottom:0;left:0;color:#847d90;letter-spacing:.1em;font-size:8px}.portfolio-record{min-height:310px;border-left:1px solid #aa91c94d;padding:35px clamp(24px,4vw,64px);background:radial-gradient(ellipse at 0 40%,#65527820,transparent 75%);display:flex;flex-direction:column;justify-content:center;gap:20px}.portfolio-record-label{font-size:9px;letter-spacing:.15em;color:#aa99bb}.portfolio-record strong{font-weight:400;font-size:clamp(25px,3vw,42px);line-height:1.15;letter-spacing:-.04em}.portfolio-domain{font-size:13px;color:#ccc2d5;overflow-wrap:anywhere}.portfolio-record small{font-size:11px;line-height:1.7;color:#8e8798}.portfolio-case a:focus-visible{outline:2px solid #baa4d5;outline-offset:6px}.portfolio-case.no-visual{padding-block:64px}
@media(max-width:700px){.portfolio-cases{margin-top:40px}.portfolio-case,.portfolio-case.no-visual{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:44px}.portfolio-case:nth-child(even) .portfolio-copy{order:0}.portfolio-copy h2{font-size:36px}.portfolio-devices{width:100%;padding:12px 12% 65px 2%}.portfolio-phone{right:2%;bottom:47px;width:24%;border-radius:17px}.portfolio-phone .portfolio-screen{border-radius:12px}.portfolio-monitor{padding:6px 6px 12px;border-radius:11px;transform:rotateY(-3deg)}.portfolio-record{min-height:200px;padding-block:12px}.portfolio-record strong{font-size:28px}.portfolio-copy .text-link{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.portfolio-monitor,.portfolio-phone,.portfolio-screen img{transform:none!important}}

.tr-content:has(.portfolio-cases) .tr-filters{flex-direction:row;display:flex;align-items:center;margin-top:30px;gap:14px}.tr-content:has(.portfolio-cases) .tr-filters select{width:auto;min-width:200px;max-width:65vw}.tr-content:has(.portfolio-cases) .tr-filters label{margin:0}.tr-content:has(.portfolio-cases)>h1{margin-bottom:25px}.tr-content:has(.portfolio-cases){padding-top:38px}.portfolio-cases{margin-top:45px}