/* Quiet Frame: one-second, user-triggered product identity motion. */
.mark{background-image:none!important}.quiet-frame-svg{display:block;width:100%;height:100%;overflow:visible}
.drivemoments-studio-wordmark:before{display:none}.drivemoments-studio-wordmark>.quiet-frame-svg{width:46px;height:46px;flex:0 0 46px}
.qf-animate .qf-corner{animation:qf-corner .3s ease-out both}.qf-animate .qf-corner-two{animation-delay:.07s}
.qf-animate .qf-road{animation:qf-road .8s cubic-bezier(.4,0,.2,1) both}
.qf-animate .qf-dot{animation:qf-dot .22s .7s ease-out both;transform-box:fill-box;transform-origin:center}
@keyframes qf-corner{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes qf-road{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes qf-dot{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.qf-animate .qf-corner,.qf-animate .qf-road,.qf-animate .qf-dot{animation:none!important;clip-path:none!important;transform:none!important;opacity:1!important}}

/* Header logo: the visible mark spans from the top of DRIVE to the baseline of "by EGOHEAD WORKS".
   The SVG has a 184-unit margin around a 656x596 glyph, so the SVG overflows its glyph-sized box. */
.nav .wordmark{align-items:flex-start;--glyph-h:36.45px;--glyph-top:6.05px}
.nav .wordmark .mark{position:relative;flex:0 0 auto;width:calc(var(--glyph-h)*656/596);height:var(--glyph-h);margin-top:var(--glyph-top);background:none!important;border-radius:0;overflow:visible}
.nav .wordmark .mark>.quiet-frame-svg{position:absolute;max-width:none;width:calc(var(--glyph-h)*1024/596);height:calc(var(--glyph-h)*1024/596);left:calc(var(--glyph-h)*-184/596);top:calc(var(--glyph-h)*-184/596)}
@media(max-width:900px){.nav .wordmark{--glyph-h:32.15px;--glyph-top:5.35px}}
@media(max-width:560px){.nav .wordmark{--glyph-h:31.2px;--glyph-top:4.8px}}