.kok-case-page{padding-top:42px;overflow:hidden}
.kok-case-page .case-intro{padding-bottom:44px}
.kok-case-page .case-back{font-size:12px;margin-bottom:38px;color:#a6a6ad}
.kok-case-page .case-back a:hover{color:#99aaff}
.kok-case-page .case-heading{text-align:center}
.kok-case-page .case-heading .eyebrow{justify-content:center;color:#95a6ff;font-size:10px}
.kok-case-page .case-heading h1{font-size:clamp(54px,7.2vw,106px);font-weight:550;letter-spacing:-.06em;margin:20px 0}
.kok-case-page .case-lead{font-size:16px;line-height:1.8}
.kok-case-page .case-stage{position:relative;border:1px solid #2a2d35;border-radius:14px;background:radial-gradient(ellipse at 53% 40%,#272d41 0, #141820 45%,#101115 78%);padding:52px 4% 24px;overflow:hidden}
.kok-case-page .case-devices{position:relative;width:100%;max-width:1080px;aspect-ratio:1.73;margin:0 auto 38px;isolation:isolate}
.kok-case-page .case-devices:after{content:"";position:absolute;width:90%;height:8%;bottom:-5%;left:4%;background:#0008;filter:blur(15px);border-radius:50%;z-index:-1}
.kok-case-page .case-laptop{position:absolute;left:5%;top:1%;width:83%;border:2px solid #676c76;border-bottom:0;border-radius:16px 16px 2px 2px;padding:13px 12px 17px;background:linear-gradient(120deg,#2c2d32,#08090c 30%,#20232a);box-shadow:0 22px 45px #0007;transform:perspective(1800px) rotateY(-5deg) rotateX(2deg)}
.kok-case-page .case-laptop:before{content:"";position:absolute;width:5px;height:5px;top:4px;left:50%;border-radius:50%;background:#758295;box-shadow:0 0 0 2px #16181e}
.kok-case-page .case-laptop:after{content:"";position:absolute;left:-6%;bottom:-18px;width:112%;height:20px;background:linear-gradient(90deg,#686c76,#c4c9d0 20%,#9ba0a9 45%,#5c616d);border-radius:2px 2px 35% 35% / 2px 2px 90% 90%;box-shadow:0 5px 0 #3b3d45,inset 0 2px 1px #dedfe3}
.kok-case-page .case-screen{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:4px;background:#f3ebdd;font-family:Georgia,serif;container-type:inline-size}
.kok-case-page .case-site-backdrop{position:absolute!important;inset:0 0 12%;margin:0!important;width:100%;z-index:0}
.kok-case-page .case-site-backdrop img{width:100%;height:100%;object-fit:cover;filter:brightness(.66)}
.kok-case-page .case-site-nav{position:absolute;top:3%;left:4%;right:4%;height:13%;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:1}
.kok-case-page .case-site-logo{height:100%;width:12%;margin:0!important}
.kok-case-page .case-site-logo img{height:100%;width:100%;object-fit:contain}
.kok-case-page .case-site-menu{font:600 clamp(4px,1.35cqw,13px)/1.5 Georgia,serif;color:#f5f1e8;word-spacing:.25em}
.kok-case-page .case-site-hero{position:absolute;top:41%;left:5%;right:5%;text-align:center;z-index:1}
.kok-case-page .case-site-title{font:400 clamp(14px,5cqw,45px)/1.2 Georgia,serif;letter-spacing:-.035em;color:#f6f2e9;margin-bottom:2%!important}
.kok-case-page .case-site-subtitle{font:400 clamp(6px,1.8cqw,16px)/1.5 Georgia,serif;color:#ddd9cf}
.kok-case-page .case-site-button{display:table;margin:3% auto 0!important;padding:1% 4%;border:1px solid #e1d6bf;color:#f1e8d3;font:600 clamp(6px,1.65cqw,15px)/1.4 Georgia,serif}
.kok-case-page .case-site-intro{position:absolute;bottom:0;left:0;width:100%;height:15%;text-align:center;background:#f3ebdd;padding:2% 3%;clip-path:polygon(0 9%,10% 4%,20% 10%,30% 0,45% 8%,60% 3%,80% 9%,100% 0,100% 100%,0 100%)}
.kok-case-page .case-site-intro-title{color:#383c31;font:400 clamp(6px,2.1cqw,18px)/1.25 Georgia,serif}
.kok-case-page .case-site-intro-title br{display:none}
.kok-case-page .case-site-intro-copy{display:none}
.kok-case-page .case-phone{position:absolute;width:21%;right:1%;bottom:-1%;padding:7px;border:2px solid #858991;border-radius:30px;background:#101115;box-shadow:0 16px 32px #0009;transform:rotate(4deg);z-index:2}
.kok-case-page .case-phone:before{content:"";position:absolute;top:14px;left:33%;height:13px;width:34%;border-radius:20px;background:#08090a;z-index:3}
.kok-case-page .case-phone:after{content:"";position:absolute;bottom:12px;width:30%;height:3px;left:35%;border-radius:5px;background:#444;z-index:3}
.kok-case-page .case-phone .case-screen{aspect-ratio:9/19;border-radius:22px}
.kok-case-page .case-phone .case-site-backdrop{bottom:28%}
.kok-case-page .case-phone .case-site-backdrop img{object-position:55% center}
.kok-case-page .case-phone .case-site-nav{top:10%;left:10%;right:12%;height:12%}
.kok-case-page .case-phone .case-site-logo{width:33%}
.kok-case-page .case-phone .case-site-menu{font:400 9cqw/1 sans-serif}
.kok-case-page .case-phone .case-site-hero{top:36%;left:8%;right:8%}
.kok-case-page .case-phone .case-site-title{font-size:9.7cqw;line-height:1.12}
.kok-case-page .case-phone .case-site-subtitle{font-size:4.9cqw;line-height:1.5;margin-top:8%!important}
.kok-case-page .case-phone .case-site-button{font-size:4.6cqw;padding:5% 3%;margin-top:12%!important}
.kok-case-page .case-phone .case-site-intro{height:31%;padding:15% 9% 8%}
.kok-case-page .case-phone .case-site-intro-title{font-size:8.5cqw}
.kok-case-page .case-phone .case-site-intro-title br{display:block}
.kok-case-page .case-phone .case-site-intro-copy{display:block;font:400 4.3cqw/1.6 Georgia,serif;color:#706a5e;margin-top:8%!important}
.kok-case-page .case-stage-caption{display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.16em;color:#9299aa;padding-inline:2%}
.kok-case-page .case-stage-caption span{color:#b4bacc}
.kok-case-page .case-details{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);gap:12%;padding-top:70px;padding-bottom:75px}
.kok-case-page .case-description .eyebrow{font-size:10px;color:#95a6ff}
.kok-case-page .case-description h2{font-size:clamp(30px,3.4vw,46px);margin:22px 0 25px;line-height:1.15}
.kok-case-page .case-description>p:not(.eyebrow){font-size:15px;line-height:1.95;margin-top:18px;color:#adb0ba}
.kok-case-page .case-facts{align-self:start;border-top:1px solid #34363e}
.kok-case-page .case-fact{padding:20px 0;border-bottom:1px solid #2b2d34}
.kok-case-page .case-fact-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#969bab;margin-bottom:7px}
.kok-case-page .case-fact-value{font-size:16px;line-height:1.6;color:#eeeef2}
.kok-case-page .case-fact-value a{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b1bfff;text-decoration:none}
.kok-case-page .case-fact-value a span{transition:transform .2s;font-size:22px}
.kok-case-page .case-fact-value a:hover{color:#fff}
.kok-case-page .case-fact-value a:hover span{transform:translate(3px,-3px)}
.kok-case-page .case-cta{display:flex;justify-content:space-between;align-items:center;gap:35px;border-top:1px solid #282b33;padding-top:50px;padding-bottom:65px}
.kok-case-page .case-cta h2{font-size:clamp(32px,4vw,52px);margin-top:20px}
.kok-case-page .case-cta .eyebrow{font-size:10px}
.kok-case-page footer{border-top:1px solid #222;padding-top:30px;margin-top:0}
@media(max-width:900px){.kok-case-page .case-details{gap:7%}.kok-case-page .case-stage{padding-top:35px}.kok-case-page .case-site-menu{font-size:1.4cqw}.kok-case-page .case-phone{border-radius:23px;padding:5px}.kok-case-page .case-phone .case-screen{border-radius:17px}.kok-case-page .case-phone:before{height:9px;top:11px}}
@media(max-width:640px){.kok-case-page{padding-top:25px}.kok-case-page .case-back{margin-bottom:32px}.kok-case-page .case-intro{padding-bottom:30px}.kok-case-page .case-heading h1{font-size:50px;margin-block:17px}.kok-case-page .case-heading .eyebrow{font-size:8px;letter-spacing:.09em}.kok-case-page .case-lead{font-size:14px}.kok-case-page .case-stage{padding:27px 3% 17px;border-radius:9px}.kok-case-page .case-devices{aspect-ratio:1.37;margin-bottom:30px}.kok-case-page .case-laptop{top:8%;left:3%;width:86%;padding:7px 5px 9px;border-radius:8px 8px 1px 1px;border-width:1px}.kok-case-page .case-laptop:before{width:3px;height:3px;top:2px}.kok-case-page .case-laptop:after{height:9px;bottom:-8px;box-shadow:0 2px 0 #3b3d45}.kok-case-page .case-phone{width:27%;bottom:0;right:2%;border-radius:15px;padding:3px;border-width:1px}.kok-case-page .case-phone .case-screen{border-radius:11px}.kok-case-page .case-phone:before{height:5px;top:7px}.kok-case-page .case-phone:after{height:2px;bottom:6px}.kok-case-page .case-stage-caption{font-size:7px;letter-spacing:.07em}.kok-case-page .case-details{grid-template-columns:1fr;gap:32px;padding-top:42px;padding-bottom:40px}.kok-case-page .case-description h2{font-size:32px}.kok-case-page .case-description>p:not(.eyebrow){font-size:14px}.kok-case-page .case-fact{padding:17px 0}.kok-case-page .case-cta{align-items:flex-start;flex-direction:column;padding-block:35px 45px}.kok-case-page footer{flex-wrap:wrap;gap:16px;padding-bottom:25px}.kok-case-page footer p:first-child{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.kok-case-page *{scroll-behavior:auto;transition:none!important}}
