.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1240px;margin:0 auto}
.wcard{display:block;border-radius:28px;overflow:hidden;background:#fff;border:1px solid rgba(20,19,15,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 50px -32px rgba(138,43,255,.4),0 12px 26px -20px rgba(224,20,74,.25);transition:transform .6s var(--ease),box-shadow .6s var(--ease);position:relative}
.wcard::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--sig);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none}
.wcard:hover,.wcard:focus-visible{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(60,30,120,.35)}
.wcard:hover::after,.wcard:focus-visible::after{opacity:1}
.wcard figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:#eee}
.wcard img,.wcard video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.wcard:hover img,.wcard:hover video{transform:scale(1.045)}
.wmeta{padding:22px 26px 26px;display:grid;gap:6px}
.wmeta h3{font-size:24px;font-weight:500;letter-spacing:-.03em}
.wmeta p{color:var(--mut);font-size:15px}
.wtag{font:500 11px/1 "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.wgo{margin-top:6px;font-size:14px;font-weight:500;background:var(--sig);-webkit-background-clip:text;background-clip:text;color:transparent}
.wgo .arr{display:inline-block;transition:transform .4s var(--ease)}.wcard:hover .wgo .arr{transform:translateX(5px)}
.price-note{text-align:center;color:var(--mut);font-size:13px;margin-top:22px}
.cform{max-width:820px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:grid;gap:8px;font-size:13px;color:var(--mut)}
.cform .full{grid-column:1/-1}
.cform input,.cform select,.cform textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid rgba(20,19,15,.12);border-radius:16px;padding:14px 16px;outline:none;transition:border-color .3s,box-shadow .3s}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:#8a2bff;box-shadow:0 0 0 4px rgba(138,43,255,.12)}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.cnote{font-size:12px;color:var(--mut);max-width:420px}
@media(max-width:860px){.work-grid{grid-template-columns:1fr}.cform{grid-template-columns:1fr}
.nav{flex-wrap:wrap}.nav nav{display:flex!important;order:3;width:100%;gap:18px;overflow-x:auto;padding-top:10px;scrollbar-width:none}.nav nav a{font-size:13px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.wcard,.wcard img,.wgo .arr{transition:none}.wcard:hover{transform:none}.wcard:hover img,.wcard:hover video{transform:none}}
/* ambient drifting glow so pricing/contact are never still */
#pricing,#contact{position:relative;isolation:isolate}
#pricing::before,#contact::before{content:"";position:absolute;z-index:-1;width:min(70vw,620px);aspect-ratio:1;border-radius:50%;left:50%;top:30%;background:radial-gradient(closest-side,rgba(138,43,255,.16),rgba(224,20,74,.08) 55%,transparent);filter:blur(30px);pointer-events:none;animation:kdrift 9s ease-in-out infinite alternate}
#contact::before{top:55%;animation-duration:11s;animation-direction:alternate-reverse}
@keyframes kdrift{0%{transform:translate(-80%,-40%) scale(.9)}100%{transform:translate(-20%,-60%) scale(1.15)}}
@media(prefers-reduced-motion:reduce){#pricing::before,#contact::before{animation:none}}

/* ambient motion: gentle staggered 3D float + sheen */
.work-grid{perspective:1400px}
.wcard{animation:wfloat 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * -2.3s)}
.wcard:nth-child(1){--i:0}.wcard:nth-child(2){--i:1}.wcard:nth-child(3){--i:2}.wcard:nth-child(4){--i:3}
@keyframes wfloat{0%,100%{transform:translateY(0) rotateX(0deg) rotateY(0deg)}25%{transform:translateY(-6px) rotateX(1.6deg) rotateY(-2.2deg)}50%{transform:translateY(-2px) rotateX(-1deg) rotateY(1.8deg)}75%{transform:translateY(-7px) rotateX(1deg) rotateY(2.4deg)}}
.wcard figure{position:relative}
.wcard figure{overflow:hidden}.wcard figure::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);transform:translateX(-120%);animation:wsheen 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s)}
@keyframes wsheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(280%)}}
.wcard:hover,.wcard:focus-visible{animation:none}
@media (prefers-reduced-motion:reduce){.wcard,.wcard figure::after{animation:none}}