.sumak-case{--gold:#e4bd77}.sumak-case .case-hero{background:radial-gradient(ellipse at 80% 35%,#b68c3625,transparent 60%),#101316}.sumak-case .case-title h1 span{color:var(--gold)}.sumak-case .hero-composition{min-height:460px}.sumak-case .hero-screen.front{top:40px;width:100%;transform:rotate(-3deg)}.sumak-case .hero-screen.back{top:80px;left:65%;width:30%;transform:rotate(7deg)}.sumak-case .hero-screen.back figcaption{display:none}.sumak-case .connection-badge{bottom:5px}.sumak-case .view-tabs button[aria-selected=true]{border-bottom-color:#b0873d}.sumak-case .panel-kicker{color:#806124}.sumak-case .case-development{background:var(--gold)}.sumak-case .development-heading h2 span{color:#65451e}.sumak-plan{background:#20221f;padding:90px 0}.sumak-plan .case-heading>p{color:#bdc0b7}.sumak-plan .project-screen{max-width:1050px;margin:auto}.sumak-plan figcaption{color:white}.sumak-plan figcaption p{color:#bdc0b7}.sumak-plan .gallery-note{color:#adb4a7}.plan-details{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px}.plan-details>div{border-top:1px solid #ffffff30;padding-top:22px}.plan-details span{font-size:10px;letter-spacing:.12em;color:var(--gold)}.plan-details h3{font-size:25px;margin:20px 0 12px}.plan-details p{font-size:14px;color:#bdc0b7}.mobile-gallery{grid-template-columns:repeat(3,1fr);gap:35px}.mobile-gallery .screen-button{background:#eae7df;padding:18px;border-radius:24px}.mobile-gallery .screen-button img{width:100%;max-width:250px;margin:auto;border-radius:15px}.mobile-gallery figcaption{padding:18px 6px}.sumak-case .image-dialog img{max-height:75vh;width:auto;max-width:100%;margin:auto;object-fit:contain}@media(max-width:1000px){.sumak-case .hero-composition{min-height:380px}.mobile-gallery{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sumak-case .hero-composition{min-height:430px}.sumak-case .hero-screen.front{top:25px}.sumak-case .hero-screen.back{top:65px;left:66%;width:29%}.sumak-plan{padding:55px 0}.plan-details{grid-template-columns:1fr;gap:25px}.mobile-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}.mobile-gallery .screen-button{padding:10px;border-radius:17px}}@media(max-width:480px){.sumak-case .hero-composition{min-height:320px}.mobile-gallery{grid-template-columns:1fr}.mobile-gallery .project-screen{max-width:310px;margin:auto}.sumak-case .view-tabs button{font-size:12px}}
/* Device frames keep the complete original app screenshot visible. */
.sumak-case .phone-device{display:block;position:relative;width:min(100%,250px);margin:0 auto;padding:27px 7px 19px;background:linear-gradient(120deg,#44474b,#111214 18%,#24262a 65%,#090a0b);border:2px solid #5b5e63;border-radius:34px;box-shadow:inset 0 0 0 2px #090a0b,0 18px 30px #10131626,0 4px 8px #0003;line-height:0;overflow:visible}
.sumak-case .phone-device:before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:43px;height:5px;border-radius:9px;background:#060708;box-shadow:28px 0 0 -1px #303740}
.sumak-case .phone-device:after{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:29%;height:3px;border-radius:9px;background:#919497}
.sumak-case .phone-device img{display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:12px;transform:none!important}
.sumak-case .mobile-gallery .screen-button{background:radial-gradient(ellipse at 50% 65%,#e5dfd0,transparent 65%);border:0;padding:16px 18px 28px;border-radius:0;overflow:visible}
.sumak-case .mobile-gallery figcaption{padding:18px 18px 0}
.sumak-case .mobile-gallery .zoom-label{bottom:4px;right:50%;transform:translateX(50%);white-space:nowrap}
.sumak-case .mobile-gallery .screen-button:hover .zoom-label,.sumak-case .mobile-gallery .screen-button:focus-visible .zoom-label{transform:translateX(50%)}
.sumak-case .hero-screen.back{filter:none}
.sumak-case .hero-screen.back figure,.sumak-case .hero-screen.back .screen-button{background:transparent;border:0;border-radius:0;overflow:visible}
.sumak-case .hero-screen.back .phone-device{width:100%;padding:18px 5px 12px;border-radius:24px;box-shadow:0 18px 30px #0008,inset 0 0 0 1px #000}
.sumak-case .hero-screen.back .phone-device:before{top:7px;width:25px;height:3px;box-shadow:18px 0 0 -1px #303740}
.sumak-case .hero-screen.back .phone-device:after{bottom:5px;height:2px}
.sumak-case .hero-screen.back .phone-device img{border-radius:10px}
@media(max-width:760px){.sumak-case .mobile-gallery .screen-button{padding:15px 10px 28px}.sumak-case .mobile-gallery figcaption{padding:16px 8px 0}.sumak-case .phone-device{border-radius:28px;padding:25px 6px 18px}}