/* Paired desktop and mobile presentations of the studio's active projects. */
.real-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.real-project{display:block;min-width:0;border:1px solid #c5a45e30;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#ffffff04,#ffffff01);transition:border-color .3s,transform .3s}
.real-project:hover{border-color:#c5a45e70;transform:translateY(-3px)}
.project-devices{position:relative;width:100%;aspect-ratio:1.35;isolation:isolate;background:radial-gradient(ellipse at 50% 95%,#b58a3830,transparent 65%),#101216;overflow:hidden}
.project-desktop{position:absolute;width:84%;left:5%;top:15%;border:1px solid #8f8774;border-radius:7px;overflow:hidden;box-shadow:0 12px 20px #0008;background:#222328;transform:perspective(900px) rotateY(-5deg)}
.project-browser-chrome{height:16px;display:flex;align-items:center;gap:3px;padding:0 6px;background:#222328}
.project-browser-chrome i{width:3px;height:3px;background:#9b8d72;border-radius:50%}
.project-browser-chrome span{font-size:5px;margin:auto;color:#c2bbad}
.project-desktop>img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;background:#fff}
.project-mobile{position:absolute;width:27%;right:5%;bottom:7%;border:3px solid #79776d;border-radius:16px;padding:3px;background:#070809;box-shadow:-8px 10px 20px #0009;transform:rotate(5deg);overflow:hidden}
.project-mobile img{width:100%;height:auto;display:block;border-radius:11px;aspect-ratio:1/2}
.project-speaker{position:absolute;z-index:2;width:30%;height:4px;border-radius:5px;background:#070809;top:6px;left:35%}
.real-project-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 22px 12px}
.real-project-caption small{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#c8ad77;line-height:1.6}
.real-project-caption h3{font-size:22px;line-height:1.3;margin:8px 0;color:#f0f0eb}
.real-project-caption p{font-size:11px;line-height:1.7;color:#969ba5;margin:0}
.real-project-caption>span{flex:none;width:32px;height:32px;border:1px solid #c5a45e55;border-radius:50%;display:grid;place-items:center;color:#e4c384}
.real-project-status{font-size:8px;text-transform:uppercase;letter-spacing:1.2px;color:#9c8c6b;padding:8px 22px 22px}
.real-project:focus-visible{outline:2px solid #e4c384;outline-offset:4px}
.testimonial-project{padding:0 0 16px}
.testimonial-project .review-project-open{padding-right:20px;margin-top:0}
@media(max-width:1050px){.real-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.real-project:last-child{grid-column:1 / -1;max-width:calc(50% - 12px)}}
@media(max-width:650px){.real-project-grid{grid-template-columns:minmax(0,1fr);gap:20px}.real-project:last-child{grid-column:auto;max-width:none}.project-browser-chrome{height:20px}.project-browser-chrome span{font-size:6px}.project-mobile{border-radius:19px}.project-mobile img{border-radius:13px}.testimonial-project{padding:0 0 16px}}
@media(prefers-reduced-motion:reduce){.real-project{transition:none}.real-project:hover{transform:none}}

/* Portfolio and reviews use the same native swipe and arrow controls. */
.real-project-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:4px 0 8px}
.real-project-grid::-webkit-scrollbar{display:none}
.real-project-grid>.real-project{flex:0 0 calc((100% - 48px)/3);max-width:none;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box}
.studio-carousel-nav{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 14px}
.studio-carousel-nav>span{color:#a89570;font-size:10px;letter-spacing:1.2px;text-transform:uppercase}
.studio-carousel-arrow{width:42px;height:42px;border-radius:50%;border:1px solid #c5a45e70;background:#c5a45e0b;color:#e4c384;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .2s}
.studio-carousel-arrow svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.studio-carousel-arrow:hover{background:#c5a45e22}.studio-carousel-arrow:disabled{opacity:.3;cursor:default}.studio-carousel-arrow:focus-visible,.real-project-grid:focus-visible{outline:2px solid #e4c384;outline-offset:4px}
@media(max-width:650px){.real-project-grid{gap:20px}.real-project-grid>.real-project{flex-basis:100%;max-width:none}}
@media(prefers-reduced-motion:reduce){.studio-carousel-arrow{transition:none}}

/* Keep the original card scale and put portfolio arrows beside the images. */
.portfolio-carousel-frame{position:relative}
.portfolio-carousel-frame .studio-carousel-nav{display:contents}
.portfolio-carousel-frame .studio-carousel-arrow{position:absolute;z-index:4;top:28%;background:#111318ed;box-shadow:0 4px 16px #0005}
.portfolio-carousel-frame .studio-carousel-arrow:first-child{left:-21px}
.portfolio-carousel-frame .studio-carousel-arrow:last-child{right:-21px}
@media(max-width:1050px) and (min-width:651px){.real-project-grid>.real-project{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:650px){.portfolio-carousel-frame .studio-carousel-arrow{width:34px;height:34px;top:29%}.portfolio-carousel-frame .studio-carousel-arrow:first-child{left:-12px}.portfolio-carousel-frame .studio-carousel-arrow:last-child{right:-12px}}

/* Dedicated gutters keep arrow buttons completely outside the cards. */
.studio-carousel-frame{position:relative;padding:0 52px}
.studio-carousel-frame .studio-carousel-nav{display:contents}
.studio-carousel-frame .studio-carousel-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);background:#111318ed;box-shadow:0 4px 16px #0005}
.studio-carousel-frame .studio-carousel-arrow:first-child,.studio-carousel-frame.portfolio-carousel-frame .studio-carousel-arrow:first-child{left:0}
.studio-carousel-frame .studio-carousel-arrow:last-child,.studio-carousel-frame.portfolio-carousel-frame .studio-carousel-arrow:last-child{right:0}
.studio-carousel-frame.portfolio-carousel-frame .studio-carousel-arrow{top:28%}
@media(max-width:650px){.studio-carousel-frame{padding:0 34px}.studio-carousel-frame .studio-carousel-arrow{width:28px;height:28px}.studio-carousel-frame .studio-carousel-arrow svg{width:15px;height:15px}}