/* Scoped to the two visual case studies. Shared master navigation is untouched. */
.cs-visual{--cs-accent:#ee913e;--cs-ink:#18384b;overflow:clip}
.cs-ox{--cs-accent:#32b7c8;--cs-ink:#123d47}
.cs-kicker{font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.cs-visual .tp-project-details-3-top{padding-bottom:54px}
.cs-visual .tp-section-title-160{font-size:clamp(64px,10vw,160px);line-height:1.05}
.cs-hero{position:relative;overflow:hidden;height:auto!important;background:radial-gradient(ellipse at 50% 0%,#315e73,var(--cs-ink) 65%);margin-bottom:0!important;padding:clamp(65px,7vw,110px) 20px 70px}
.cs-ox .cs-hero{background:radial-gradient(ellipse at 50% 0%,#23717a,#123d47 65%)}
.cs-hero:after{content:"";position:absolute;inset:auto 0 0;height:20%;background:linear-gradient(0deg,rgba(0,0,0,.16),transparent);pointer-events:none}
.cs-hero-row{display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,56px);max-width:1500px;margin:0 auto;padding:30px 0 45px;isolation:isolate}
/* Reference scale: between Bet365 (21/25vw) and Hornet (23/27vw). */
.cs-phone{margin:0;width:clamp(150px,22vw,340px);flex:none;opacity:1;transform-origin:50% 70%;border-radius:14% / 6.5%;box-shadow:0 30px 24px rgba(0,0,0,.35);filter:none;will-change:auto}
.cs-phone:nth-child(1){margin-top:72px;transform:rotate(-4deg);z-index:1}
.cs-phone:nth-child(2){width:clamp(180px,26vw,400px);margin-bottom:45px;z-index:2}
.cs-phone:nth-child(3){margin-top:72px;transform:rotate(4deg);z-index:1}
.cs-phone img{display:block;width:100%;height:auto;border-radius:14% / 6.5%}
.cs-ox .cs-phone{padding:clamp(4px,.5vw,8px);background:linear-gradient(130deg,#8c9699,#263237 45%,#738083);border-radius:14% / 6.5%}
.cs-ox .cs-phone img{border-radius:12% / 5.7%}
.cs-hero.is-active .cs-phone:nth-child(1){animation:csEnterLeft 1.2s cubic-bezier(.16,1,.3,1) both,csDriftLeft 5.8s ease-in-out 1.2s infinite}
.cs-hero.is-active .cs-phone:nth-child(2){animation:csEnterCenter 1.3s cubic-bezier(.16,1,.3,1) .18s both,csDriftCenter 5.2s ease-in-out 1.48s infinite}
.cs-hero.is-active .cs-phone:nth-child(3){animation:csEnterRight 1.2s cubic-bezier(.16,1,.3,1) .36s both,csDriftRight 6.4s ease-in-out 1.56s infinite}
@keyframes csEnterLeft{from{opacity:0;transform:translate(-100px,130px) rotate(-16deg) scale(.88)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes csEnterCenter{from{opacity:0;transform:translateY(180px) rotate(5deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes csEnterRight{from{opacity:0;transform:translate(100px,130px) rotate(16deg) scale(.88)}to{opacity:1;transform:rotate(4deg)}}
@keyframes csDriftLeft{0%,100%{translate:0 0;rotate:0deg}50%{translate:8px -34px;rotate:2deg}}
@keyframes csDriftCenter{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -40px;rotate:-1.5deg}}
@keyframes csDriftRight{0%,100%{translate:0 0;rotate:0deg}50%{translate:-8px -28px;rotate:-2deg}}
.cs-visual .showcase-details-overview{padding-top:96px;padding-bottom:96px}
.cs-visual .showcase-details-overview-right>p{font-size:clamp(24px,3vw,40px);line-height:1.3;max-width:830px}
.cs-visual .showcase-details-overview-info{margin-top:42px}
.cs-visual .showcase-details-overview-info-item{padding:15px 0}
.cs-visual .showcase-details-overview-info span{font-size:16px;line-height:1.5}
.cs-visual .pd-visual-content-area{padding-top:80px;padding-bottom:88px;background:#f2f4f4}
.cs-visual .pd-visual-title-box{margin-bottom:35px}
.cs-visual .pd-visual-subtitle{color:var(--cs-ink)}
.cs-visual .project-details-1-title{font-size:clamp(48px,7vw,92px);line-height:1.05}
.cs-visual .pd-visual-left-text span{font-size:clamp(24px,3vw,38px);line-height:1.3}
.cs-visual .pd-visual-right-content p{font-size:22px;line-height:1.5}
.cs-visual .pd-visual-right-list{margin-top:24px}
.cs-visual .pd-visual-right-list li{font-size:13px;letter-spacing:.08em;line-height:2}
.cs-visual .pd-custom-full-img-2{margin-top:55px;margin-bottom:50px;height:auto;overflow:visible}
.cs-image{margin:0}
.cs-visual .cs-image img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;transform:none;margin:0}
.cs-visual .cs-image figcaption{font-size:14px;line-height:1.5;margin-top:15px;opacity:.9}
.cs-visual .tp-project-details-3-thumb{margin-bottom:0}
.cs-visual .tp-project-details-3-thumb-box,.cs-visual .showcase-details-thumb{height:auto;overflow:visible}
.cs-visual [data-block="4"] .container-1560{max-width:1198px}
.cs-visual [data-block="19"]{padding-top:90px;padding-bottom:30px}
.cs-visual [data-block="19"] .row{--bs-gutter-x:24px;margin-left:-12px;margin-right:-12px}
.cs-visual [data-block="19"] .row>div{padding-left:12px;padding-right:12px}
.cs-visual [data-block="19"] .showcase-details-thumb{margin-bottom:50px}
.cs-system-samples{row-gap:30px}
.cs-system-samples .pd-typography-left,.cs-system-samples .pd-typography-middle,.cs-system-samples .pd-typography-color{padding:0;margin:0}
.cs-system-samples .text-1{display:block;font-size:15px;font-weight:500;margin:0 0 20px;color:var(--mk-color-text-secondary)}
.cs-system-samples .cs-image{background:#193849;min-height:130px;display:flex;align-items:center;padding:25px;border-radius:8px;margin-right:24px}
.cs-system-samples .cs-image img{max-width:180px;margin:auto}
.cs-swatches{display:flex;flex-direction:column;gap:8px}
.cs-visual .cs-swatches span{display:block;width:100%;height:auto;margin:0;padding:10px 18px;border:1px solid rgba(0,0,0,.08);border-radius:4px;font:12px/1.5 monospace}
.cs-next{padding-top:72px;padding-bottom:90px}
.cs-next a{border-top:1px solid rgba(128,128,128,.4);padding-top:32px;display:flex;gap:24px;align-items:baseline;justify-content:space-between}
.cs-next strong{font-size:clamp(36px,5vw,64px);font-weight:500;flex:1}
.cs-next span{font-size:14px}
html.miko-dark-active .cs-visual .pd-visual-content-area{background:#151c20}
html.miko-dark-active .cs-visual .pd-visual-subtitle{color:#ee913e}
@media(max-width:767px){
 .cs-visual .tp-project-details-3-top{padding-bottom:32px}
 .cs-hero{padding:58px 0 42px}
 .cs-hero-row{gap:0;padding:28px 0 24px}
 .cs-phone{width:37vw;max-width:155px;min-width:0}
 .cs-phone:nth-child(2){width:46vw;max-width:190px;margin-bottom:30px}
 .cs-phone:nth-child(1){margin-top:68px;margin-right:-14vw}
 .cs-phone:nth-child(3){margin-top:68px;margin-left:-14vw}
 .cs-ox .cs-phone{padding:4px}
 .cs-visual .showcase-details-overview{padding-top:58px;padding-bottom:58px}
 .cs-visual .showcase-details-overview-left{margin-bottom:20px}
 .cs-visual .showcase-details-overview-info{margin-top:25px}
 .cs-visual .showcase-details-overview-info span{font-size:14px}
 .cs-visual .pd-visual-content-area{padding:55px 0}
 .cs-visual .pd-visual-left-text{margin-bottom:20px}
 .cs-visual .pd-custom-full-img-2{margin:30px 0}
 .cs-system-samples .cs-image{margin-right:0}
 .cs-visual [data-block="19"]{padding-top:55px;padding-bottom:0}
 .cs-visual [data-block="19"] .showcase-details-thumb{margin-bottom:30px}
 .cs-next{padding:55px 15px}
 .cs-next a{gap:18px}
}
@media(prefers-reduced-motion:reduce){.cs-hero.is-active .cs-phone,.cs-phone{animation:none!important;opacity:1;translate:none;rotate:none;will-change:auto}}