/* Round 3: correct actual layout after mobile user review */
@media(max-width:820px){
 .nav-wrap .nav-inner{position:relative!important;display:grid!important;grid-template-columns:64px minmax(0,1fr) 52px!important;width:100%!important;min-height:104px!important;height:auto!important;padding:13px 14px!important;gap:6px!important}
 .nav-wrap .brand{display:contents!important}
 .nav-wrap .brand .dk-mark{grid-column:1!important;grid-row:1!important;width:58px!important;height:58px!important;justify-self:start!important;align-self:center!important}
 .nav-wrap .brand .dk-brand-wordmark{grid-column:2!important;grid-row:1!important;justify-self:center!important;text-align:center!important;font-size:clamp(22px,5.4vw,31px)!important;letter-spacing:2px!important;line-height:1.05!important;font-weight:950!important;text-shadow:0 0 14px #17d9ffe6,0 0 30px #197bffbb!important}
 .nav-wrap .hamburger{grid-column:3!important;grid-row:1!important;justify-self:end!important;align-self:center!important;margin:0!important}
}
@media(min-width:821px){.nav-wrap .brand .dk-brand-wordmark{font-size:clamp(22px,1.8vw,28px)!important;letter-spacing:1.5px!important}}
/* A fully image-tethered interactive layer; whole image remains unchanged. */
.dk-interactive-map{position:relative!important;isolation:isolate!important;width:100%!important;max-width:1550px!important;margin:32px auto!important;overflow:visible!important;line-height:0!important}
.dk-interactive-map>img{display:block!important;width:100%!important;height:auto!important;max-width:none!important;position:relative!important;z-index:0!important}
.dk-interactive-map .dk-route-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:2!important;pointer-events:none!important;overflow:visible!important}
.dk-interactive-map .dk-map-hotspot{position:absolute!important;left:var(--px)!important;top:var(--py)!important;z-index:7!important;display:block!important;width:clamp(28px,4vw,52px)!important;height:clamp(28px,4vw,52px)!important;min-height:28px!important;transform:translate(-50%,-50%)!important;border:2px solid #9defff!important;border-radius:50%!important;background:#12aaff55!important;box-shadow:0 0 15px #52ddff, inset 0 0 8px #71dcff!important;cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important}
.dk-interactive-map .dk-map-hotspot::before{content:'';position:absolute;inset:-8px;border:2px solid #46d8ff;border-radius:50%;animation:dkcity 2.5s ease-out infinite;pointer-events:none}
.dk-interactive-map .dk-map-hotspot::after{content:attr(title);position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;color:#d5faff;background:#031626ed;border:1px solid #36bcffbd;border-radius:5px;padding:5px 7px;letter-spacing:.5px;line-height:1.1;font:800 clamp(8px,.9vw,12px)/1.1 Arial,sans-serif;white-space:nowrap;box-shadow:0 0 12px #159aff77;pointer-events:none}
.dk-interactive-map .dk-map-hotspot:hover,.dk-interactive-map .dk-map-hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.25)!important;outline:2px solid #fff;outline-offset:2px}
.dk-interactive-map .dk-route-trace{stroke-dasharray:14 986!important;animation:dktravel 12s linear infinite!important;stroke:#d5fcff!important;stroke-width:5!important;filter:drop-shadow(0 0 9px #10aeff)!important}
@keyframes dkcity{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes dktravel{to{stroke-dashoffset:-1000}}
@media(max-width:620px){.dk-interactive-map .dk-map-hotspot{width:25px!important;height:25px!important;min-height:25px!important;border-width:1px!important}.dk-interactive-map .dk-map-hotspot::after{font-size:8px!important;padding:3px 4px!important;margin-top:2px!important}.dk-interactive-map .dk-map-hotspot::before{inset:-4px}.dk-interactive-map .dk-route-trace{stroke-width:3!important}}
/* On larger project detail views, show official artwork clearly, not only inside the small previews. */
.page-work .project-image .monitor{width:min(95%,1080px)!important;max-width:1080px!important}
.page-work .project-image .monitor-screen{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;padding:5% 6%!important}
.page-work .project-worx .monitor-title{width:100%!important;display:flex!important;justify-content:center!important;align-items:center!important}
.page-work .project-worx .dk-project-worx-logo{display:block!important;width:min(88%,620px)!important;max-height:180px!important;height:auto!important;object-fit:contain!important}
.page-work .project-lakeland .ld-letter{width:100%!important;display:flex!important;justify-content:center!important}
.page-work .project-lakeland .dk-project-ld-logo{display:block!important;width:min(45%,235px)!important;max-height:205px!important;height:auto!important;object-fit:contain!important}
.page-work .monitor-sub{margin-top:1.5%!important}
@media(max-width:620px){.page-work .project-worx .dk-project-worx-logo{max-height:85px!important}.page-work .project-lakeland .dk-project-ld-logo{max-height:115px!important;width:38%!important}.page-work .project-image .monitor-screen{padding:5%!important}}
@media(prefers-reduced-motion:reduce){.dk-interactive-map .dk-map-hotspot::before,.dk-interactive-map .dk-route-trace{animation:none!important}}
