/* ânia · case study and service pages */
body{margin:0}
/* keycap: hover lifts the cap, press sinks it into a dark well and it springs back */
.kc svg>*,#ania-gate .agk svg>*{transition:transform .26s cubic-bezier(.34,1.7,.5,1);transform-box:view-box}
.kc svg>polygon:first-of-type,#ania-gate .agk svg>polygon:first-of-type{transform-box:fill-box;transform-origin:50% 100%}
.kc .kl{transition:transform .26s cubic-bezier(.34,1.7,.5,1)}
.kc:hover,.kc:active,#ania-gate .agk:hover,#ania-gate .agk:active{transform:none !important}
.kc:hover svg>path[fill="#fff"],.kc:hover svg>path[fill="#fff"]~*,#ania-gate .agk:hover svg>path[fill="#fff"],#ania-gate .agk:hover svg>path[fill="#fff"]~*{transform:translateY(-7px)}
.kc:hover svg>polygon:first-of-type,#ania-gate .agk:hover svg>polygon:first-of-type{transform:scaleY(1.14)}
.kc:hover .kl{transform:translateY(-3.5%)}
.kc:active svg>path[fill="#fff"],.kc:active svg>path[fill="#fff"]~*,#ania-gate .agk:active svg>path[fill="#fff"],#ania-gate .agk:active svg>path[fill="#fff"]~*{transform:translateY(16px);transition-duration:.05s;transition-timing-function:ease-out}
.kc:active svg>polygon:first-of-type,#ania-gate .agk:active svg>polygon:first-of-type{transform:scaleY(.62);transition-duration:.05s;transition-timing-function:ease-out}
.kc:active .kl{transform:translateY(8%);transition-duration:.05s;transition-timing-function:ease-out}
@media (hover: none){.kc:hover svg>*,.kc:hover .kl,#ania-gate .agk:hover svg>*{transform:none}}
@media (prefers-reduced-motion: reduce){.kc svg>*,.kc .kl,#ania-gate .agk svg>*{transition:none}}
/* navbar: one line always; the call button only shows when it fits */
.navbar,.nav2{flex-wrap:nowrap !important}
.navlinks,.nlinks{flex-wrap:nowrap !important;white-space:nowrap}
@media (max-width: 1240px){.navcta,.ncta{display:none !important}}
/* logo snapped to whole pixels so the vector stays sharp on 1x screens */
.nk{height:54px !important}
/* call button: blue on hover, keycap press on click */
.navcta,.ncta{position:relative;box-shadow:0 0 0 #000010;transition:background-color .18s ease,color .18s ease,transform .22s cubic-bezier(.3,1.7,.5,1),box-shadow .22s ease;will-change:transform}
.navcta:hover,.ncta:hover,.navcta:focus-visible,.ncta:focus-visible{background:#4A86D9 !important;color:#FFFFFF !important;transform:translateY(-3px);box-shadow:0 3px 0 #000010}
.navcta:active,.ncta:active{transform:translateY(1px) scale(.95);box-shadow:0 0 0 #000010;transition-duration:.06s}
@media (prefers-reduced-motion: reduce){.navcta,.ncta{transition:background-color .18s ease}.navcta:hover,.ncta:hover,.navcta:active,.ncta:active{transform:none}}
@media (min-width: 761px) and (max-width: 1060px){.navlinks,.nlinks{gap:10px !important;font-size:13px !important}}
@media (min-width: 761px) and (max-width: 900px){.navlinks,.nlinks{gap:6px !important;font-size:12px !important}.nw{display:none !important}}
@media (max-width: 760px){.sfx-pill{left:auto !important;right:16px !important}}
.ncs{position:relative;display:inline-block}
.ncs-menu{display:none;position:absolute;top:100%;left:-14px;padding-top:12px;z-index:70}
.ncs:hover .ncs-menu,.ncs:focus-within .ncs-menu{display:block}
.ncs-menu a:hover,.ncs-menu a:focus{background:#E4EAF4}
/* videos always fully visible: never cropped, never taller than the screen */
video{object-fit:contain !important}
[style*="aspect-ratio"]:has(video){max-height:calc(100svh - 110px)}
@media (max-width: 760px){[style*="aspect-ratio"]:has(video){max-height:calc(100svh - 90px)}}
a{color:#12121F}a:hover{color:#2F6BC4}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.grid{background-color:#FFFFFF;background-image:linear-gradient(rgba(74,134,217,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(74,134,217,.32) 1px,transparent 1px);background-size:64px 64px}
.ph{background:#E4EAF4;border:3px solid #12121F;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:#2B2B3A;text-align:center;padding:10px;box-sizing:border-box}
.key{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;border:3px solid #12121F;border-radius:16px;box-shadow:0 9px 0 #4A86D9,0 9px 0 3px #12121F;font-family:'Montserrat',sans-serif;font-weight:800;color:#12121F;box-sizing:border-box}
.key-a{background:#4A86D9;box-shadow:0 9px 0 #12121F,0 9px 0 3px #12121F}
.sel{position:relative;border:2px solid #12121F;box-sizing:border-box}
.sel>.h{position:absolute;width:16px;height:16px;background:#FFFFFF;border:3px solid #12121F;box-sizing:border-box}
.svc{outline:none}
.svc-paper{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.svc-front{transform-origin:50% 100%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc-paper,.svc:focus .svc-paper{transform:translateY(-34%)}
.svc:hover .svc-front,.svc:focus .svc-front{transform:perspective(900px) rotateX(-16deg)}
.svc:focus-visible .svc-art{outline:3px solid #2F6BC4;outline-offset:6px}
@media (max-width: 760px){
.nk{width:40px !important;height:44px !important}
.nw{height:28px !important}
.nback{display:none !important}
.cta-long{display:none !important}
.cta-short{display:inline !important}
.nav2{padding:10px 16px !important;gap:10px !important;flex-wrap:nowrap !important}
.navcta,.ncta{padding:10px 14px !important;font-size:13px !important;white-space:nowrap}
}
.cta-short{display:none}
.nmenu{display:none}
.nmob{display:none}
@media (max-width: 760px){
.nlinks{display:none !important}
.nmenu{display:inline-flex !important}
.nmob{display:flex !important}
.ncta{display:none !important}
}