/* Website devices and visual-development portfolios. */
.web-device-cover{aspect-ratio:1.45;position:relative;display:flex;align-items:center;justify-content:center;padding:9% 10% 13%;overflow:hidden;background:var(--case-bg,#e5e7df);isolation:isolate}
.web-device-cover:before{content:'';position:absolute;width:52%;height:70%;border:1px solid var(--case-accent,#3a7b51);opacity:.3;transform:rotate(-12deg);z-index:-1}
.web-laptop{position:relative;width:100%;transform:perspective(1100px) rotateX(4deg) rotateY(-8deg) rotateZ(-3deg);transition:transform .5s ease}
.web-laptop-display{padding:3.2% 2.6% 3.5%;border-radius:12px 12px 4px 4px;background:#242522;box-shadow:0 16px 28px #17291d30}
.web-laptop-display:before{content:'';display:block;width:3px;height:3px;background:#6e736b;border-radius:50%;position:absolute;top:1.9%;left:50%}
.web-screen{aspect-ratio:1.6;overflow:hidden;background:#fff;position:relative}
.web-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.web-laptop-base{height:7px;background:linear-gradient(#d9dcd6,#9daba4);border-radius:1px 1px 65% 65%;margin:0 -7%;position:relative;box-shadow:0 15px 13px #29372e24}
.web-laptop-base:after{content:'';position:absolute;top:0;left:42%;width:16%;height:3px;background:#7c8881;border-radius:0 0 7px 7px}
.web-phone{width:23%;padding:1.5%;border:2px solid #181b18;border-radius:15px;background:#242522;position:absolute;inset:auto 5% 6% auto;box-shadow:8px 14px 20px #1f342841;transform:rotate(6deg);transition:transform .5s ease}
.web-phone:before{content:'';position:absolute;top:2.5%;left:32%;width:36%;height:3%;border-radius:20px;background:#181b18;z-index:1}
.web-phone img{aspect-ratio:390/844;width:100%;height:auto;display:block;border-radius:9px}
.web-device-cover:hover .web-laptop,.web-device-cover:focus-within .web-laptop{transform:perspective(1100px) rotateX(0) rotateY(-3deg) rotateZ(-1deg)}
.web-device-cover:hover .web-phone,.web-device-cover:focus-within .web-phone{transform:translateY(-6px) rotate(3deg)}
.web-cover-label{position:absolute;inset:auto auto 14px 18px;font-size:8px;letter-spacing:.12em;color:#3f4e44;direction:ltr}
.web-case .web-device-cover{max-width:1120px;margin:0 auto 50px;aspect-ratio:1.65;padding:6% 13% 9%}
.web-case .web-phone{width:18%;right:12%;bottom:5%}
.web-live-link{display:inline-flex;align-items:center;gap:24px;margin-top:22px;border-bottom:1px solid #3a7b51;padding-bottom:8px;font-size:13px;color:#24563c}
.web-overview{display:grid;grid-template-columns:1.6fr .7fr;gap:35px;align-items:start;margin:45px 0 60px}
.web-overview figure{margin:0;min-width:0}.web-scroll-preview{max-height:710px;overflow:auto;overscroll-behavior:contain;border:9px solid #252923;border-radius:12px;background:white;scrollbar-color:#3a7b51 #eee}
.web-scroll-preview img{display:block;width:100%;height:auto}.web-mobile-preview{max-width:300px;margin:auto;border:9px solid #252923;border-radius:28px;overflow:hidden;background:white}.web-mobile-preview img{display:block;width:100%;height:auto}
.web-overview figcaption{font-size:11px;color:#656b5e;line-height:1.8;padding-top:12px}
.cv-cover{aspect-ratio:1.45;background:var(--case-bg,#ebe7ef);position:relative;padding:9% 8% 13%;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center}
.cv-cover:before{content:'';position:absolute;inset:11% 5% 7% 11%;background:var(--case-accent,#3a7b51);opacity:.12;transform:rotate(7deg);z-index:-1}
.cv-cover .cv-main{display:block;max-width:100%;width:100%;height:100%;max-height:100%;object-fit:contain;box-shadow:9px 14px 0 #252b2414;transform:rotate(-2deg);transition:transform .45s ease}
.cv-cover .cv-sketch{position:absolute;width:29%;max-height:48%;object-fit:contain;bottom:9%;right:4%;border:6px solid #f6f3eb;box-shadow:4px 7px 12px #17291d2a;transform:rotate(7deg);background:#f6f3eb}
.cv-cover:hover .cv-main{transform:rotate(0deg) translateY(-3px)}.cv-cover--portrait .cv-main{width:48%;box-shadow:8px 12px 0 #252b2414}.cv-cover--portrait .cv-sketch{width:25%;right:9%;height:62%;max-height:75%;object-fit:contain}
.cv-cover-label{position:absolute;left:14px;bottom:12px;font-size:8px;letter-spacing:.08em;color:#555a4d}.portfolio-source-credit{font-size:10px!important;line-height:1.7;margin-top:10px!important;color:#6d685e}.katto-ar .portfolio-source-credit{font-size:11px!important}
.frame-workspace{margin:35px 0 65px;padding:28px;background:#e7e8df;border:1px solid #d4d8cb;position:relative;scroll-margin-top:25px}
.frame-workspace:before{content:'';display:block;height:8px;width:100px;background:url('../images/pattern-mosaic.svg') center/260px;margin-bottom:24px}
.frame-toolbar{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-bottom:22px}.frame-toolbar h2{margin:0;font-size:35px;letter-spacing:-.04em}.frame-tabs{display:flex;flex-wrap:wrap;gap:6px}.frame-tabs button{font:inherit;font-size:11px;background:transparent;border:1px solid #bac3b3;padding:9px 12px;cursor:pointer;color:inherit}.frame-tabs button[aria-pressed=true]{background:#3a7b51;color:#fff;border-color:#3a7b51}
.frame-stage{margin:0;background:#252923;position:relative;min-width:0}.frame-stage>a{display:flex;aspect-ratio:16/9;align-items:center;justify-content:center;padding:15px}.frame-stage img{display:block;max-width:100%;width:100%;max-height:100%;height:100%;object-fit:contain}.frame-stage figcaption{display:flex;justify-content:space-between;gap:25px;color:#f4f0e5;font-size:12px;padding:16px 20px;line-height:1.8;border-top:1px solid #50594a}.frame-stage [data-frame-counter]{white-space:nowrap;direction:ltr;flex:none;font-variant-numeric:tabular-nums}
.frame-rail{display:flex;gap:12px;overflow-x:auto;margin-top:16px;padding:0 0 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#3a7b51 #d4d8cb}.frame-rail button{font:inherit;flex:0 0 142px;min-width:0;cursor:pointer;background:#f7f5ee;border:2px solid transparent;padding:5px;color:#50584b;text-align:start;scroll-snap-align:start}.frame-rail button[hidden]{display:none}.frame-rail button[aria-current=true]{border-color:#3a7b51;background:#fff}.frame-rail img{display:block;width:100%;height:80px;object-fit:contain;background:#f2f1ea}.frame-rail span{display:block;font-size:10px;padding:7px 3px;line-height:1.5}
.frame-workspace[data-orientation=portrait] .frame-stage>a{aspect-ratio:1.6;max-height:720px}.frame-credit{font-size:13px;line-height:1.9;margin:24px 0 0;color:#56614d}.frame-origin{font-size:11px;line-height:1.8;margin-top:7px;color:#747968}
.visual-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#c9d1c1;border:1px solid #c9d1c1;margin:55px 0}.visual-capabilities article{background:#f3f2eb;padding:28px}.visual-capabilities h3{font-size:22px;margin:0 0 15px}.visual-capabilities p{font-size:14px;line-height:1.8;margin:0}
.service .service-work-link{display:inline-flex;gap:20px;margin-top:22px;font-size:12px;border-bottom:1px solid currentColor;padding-bottom:7px}.katto-services .services{grid-template-columns:repeat(6,minmax(0,1fr))}.katto-services .service{grid-column:span 2}.katto-services .service:nth-last-child(-n+2){grid-column:span 3}.service-graphic{aspect-ratio:16/9;margin:0 0 24px;background:#eeeade;position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate}.service-graphic:before{content:'';position:absolute;inset:15% -10% auto;height:32%;background:url('../images/pattern-mosaic.svg') center/290px;opacity:.14;transform:rotate(-10deg);z-index:-1}.service-graphic .mini-browser{width:55%;height:55%;border:7px solid #302e2b;background:#f7f3e8;transform:perspective(600px) rotateY(-12deg) rotateZ(-4deg);box-shadow:10px 16px 0 #3a7b5120;position:relative}.mini-browser:before{content:'';position:absolute;inset:12% 10% 53%;background:#3a7b51}.mini-browser:after{content:'';position:absolute;inset:55% 10% 12%;background:linear-gradient(90deg,#f9a735 0 30%,transparent 30% 35%,#bd3b45 35% 65%,transparent 65% 70%,#3a7b51 70%)}
.mini-storyboards{display:flex;width:72%;gap:10px;align-items:center}.mini-storyboards i{display:block;aspect-ratio:4/5;flex:1;background:#f7f3e8;border:3px solid #302e2b;box-shadow:7px 9px 0 #3a7b5120;position:relative;transform:rotate(-7deg)}.mini-storyboards i:nth-child(2){transform:translateY(-12px) rotate(4deg)}.mini-storyboards i:nth-child(3){transform:rotate(10deg)}.mini-storyboards i:before{content:'';position:absolute;width:42%;height:38%;top:24%;left:29%;background:#3a7b51;clip-path:polygon(0 0,100% 50%,0 100%)}.mini-storyboards i:nth-child(2):before{background:#f9a735}.mini-storyboards i:nth-child(3):before{background:#bd3b45}
.katto-ar .frame-toolbar h2,.katto-ar .visual-capabilities h3{font-family:Lalezar,Tahoma,sans-serif;font-weight:400}.katto-ar .web-cover-label,.katto-ar .cv-cover-label{font-size:10px}.katto-ar .web-live-link{font-size:15px}.katto-ar .frame-tabs button{font-size:12px}.katto-ar .frame-rail span{font-size:11px}
@media(max-width:900px){.frame-toolbar{align-items:start;flex-direction:column}.visual-capabilities{grid-template-columns:1fr}.web-overview{gap:20px}.katto-services .services{grid-template-columns:1fr 1fr}.katto-services .service,.katto-services .service:nth-last-child(-n+2){grid-column:auto}.katto-services .service:last-child{grid-column:1/-1}}
@media(max-width:700px){.katto-services .services{grid-template-columns:1fr}.katto-services .service:last-child{grid-column:auto}.web-overview{grid-template-columns:1fr;gap:35px}.web-mobile-preview{max-width:230px}.web-scroll-preview{max-height:480px}.web-case .web-device-cover{padding:12% 9% 16%;aspect-ratio:1.35}.web-case .web-phone{width:22%;right:5%;bottom:4%}.web-cover-label,.cv-cover-label{font-size:7px!important;left:12px;bottom:9px}.frame-workspace{padding:16px;margin-top:25px}.frame-toolbar h2{font-size:29px}.frame-stage>a{aspect-ratio:1.4;padding:8px}.frame-stage figcaption{font-size:11px;padding:12px;gap:12px}.frame-rail button{flex-basis:114px}.frame-rail img{height:68px}.frame-tabs button{font-size:10px;padding:8px 10px}.frame-workspace[data-orientation=portrait] .frame-stage>a{aspect-ratio:.8;height:auto;max-height:none}.frame-credit{font-size:12px}.cv-cover .cv-sketch{border-width:4px}.web-device-cover{aspect-ratio:1.3}}
@media(prefers-reduced-motion:reduce){.web-laptop,.web-phone,.cv-cover .cv-main{transition:none!important}}