/* Portfolio objects stay true to the work while the frame belongs to the brand. */
/* The Projects hero uses the same black as the clip composite. A body glow
   beneath the fixed black stage would reveal its rectangular footprint. */
body.projects-page{background:var(--obsidian,#07090c)}
/* Unframed ambient scene: the outer pixels dissolve into the page itself. */
.projects-animation{position:relative;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.projects-animation::before,.projects-animation::after{content:none}
.projects-animation-stage{aspect-ratio:16/9;background:var(--obsidian,#07090c);border:0;border-radius:0!important;box-shadow:none!important;overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 86%,rgba(0,0,0,.94) 89%,rgba(0,0,0,.72) 92%,rgba(0,0,0,.38) 95%,rgba(0,0,0,.08) 97.5%,transparent 99%,transparent 100%),linear-gradient(to bottom,transparent,#000 9%,#000 86%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 86%,rgba(0,0,0,.94) 89%,rgba(0,0,0,.72) 92%,rgba(0,0,0,.38) 95%,rgba(0,0,0,.08) 97.5%,transparent 99%,transparent 100%),linear-gradient(to bottom,transparent,#000 9%,#000 86%,transparent);-webkit-mask-composite:source-in}
/* Anchor near-black video pixels to the site black; retain bright scene detail. */
.projects-animation-stage>img,.projects-animation-stage>video{object-fit:contain;filter:contrast(1.12) brightness(.96);mix-blend-mode:lighten}
.trio-view-controls{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:17px 0 0}
.trio-view-controls button{font-size:.66rem;line-height:1.35;padding:7px 9px;border-radius:8px;border:1px solid #afc4de38;color:#d3dce7;min-height:33px}
.trio-view-controls button[aria-pressed=true]{color:#fff;border-color:#c2ddec}
.trio-hint{text-align:center;margin:9px 0 0;font-size:.67rem!important;color:#a0adbd!important}
.trio-interactive .trio-stage{touch-action:pan-y}
.trio-interactive .trio-shot[data-trio-position=front]{width:80%;left:10%;right:auto;top:26%;transform:rotate(-1deg);z-index:5}
.trio-interactive .trio-shot[data-trio-position=left]{width:66%;left:0;right:auto;top:6%;transform:rotate(-8deg);z-index:1}
.trio-interactive .trio-shot[data-trio-position=right]{width:66%;left:auto;right:0;top:3%;transform:rotate(7deg);z-index:2}
.trio-interactive .trio-shot[data-trio-position=front]:hover{transform:translateY(-5px) rotate(0)}
.trio-interactive .trio-shot:focus-visible{z-index:8}
.case-try{position:relative;margin-block:40px 70px;border:1px solid #a6bfda40;border-radius:25px;background:radial-gradient(ellipse at 95% 0%,#8477d221,transparent 60%),#111820;box-shadow:0 25px 60px -25px #000c;overflow:hidden}
.case-try-head{padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #a8bbce2e}
.case-try-head h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:6px 0 8px}.case-try-head p{font-size:.9rem;color:#acbacb;max-width:57ch;margin:0}
.case-try-screen{position:relative;min-height:610px;background:#0b0f14;display:grid;place-items:center}
.case-try-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.35;filter:blur(1px)}
.case-try-launch{position:relative;z-index:1;text-align:center;padding:30px;border:1px solid #c0d3e247;border-radius:20px;background:#101720ed;box-shadow:0 15px 65px #000b;max-width:390px;margin:28px}
.case-try-launch p{color:#bfccd9;font-size:.84rem;margin:14px 0 0}
.case-try iframe{width:100%;height:710px;border:0;display:block;background:#fff}.case-try iframe[hidden]{display:none}
.case-try.is-loaded .case-try-screen{display:block;min-height:0}.case-try.is-loaded .case-try-screen>.case-try-launch,.case-try.is-loaded .case-try-screen>img{display:none}
.case-try-foot{display:flex;justify-content:space-between;gap:20px;padding:15px 24px;border-top:1px solid #adbfd229;color:#acbacb;font-size:.75rem}.case-try-foot a{color:#dfebf7;text-decoration:underline;text-underline-offset:4px}
.case-phone-preview{padding:27px;background:linear-gradient(145deg,#222b37,#0d131b);border:1px solid #a5bad23d;border-radius:22px;box-shadow:0 20px 50px #0006}
.case-phone-preview .phone-mini-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#a5d7e6;margin:0 0 18px}
.case-phone-preview blockquote{font-size:1.25rem;line-height:1.5;font-weight:500;margin:0;min-height:5em;letter-spacing:-.015em}
.case-phone-preview .phone-mini-status{font-size:.78rem;color:#a9b9c8;margin:18px 0}
.case-phone-options{display:flex;gap:8px;flex-wrap:wrap}.case-phone-options button{font-size:.75rem;padding:9px 12px;border-radius:999px;border:1px solid #b1c7df44;color:#e7edf4}
@media(max-width:700px){.trio-view-controls button{font-size:.61rem;padding:7px}.trio-hint{font-size:.62rem!important}.case-try{margin-block:28px 45px;border-radius:20px}.case-try-head{padding:24px 20px;display:block}.case-try-head>.btn{margin-top:18px}.case-try-screen{min-height:510px}.case-try iframe{height:740px}.case-try-foot{padding:16px;display:block}.case-try-foot a{display:inline-block;margin-top:7px}.case-phone-preview{padding:22px}.case-phone-preview blockquote{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.trio-interactive .trio-shot{transition:none!important}}
html.motion-off .trio-interactive .trio-shot{transition:none!important}

@media(max-width:700px){.trio-view-controls button{min-height:44px}.case-phone-options button{min-height:44px}}