/* Emil Kowalski: shared motion tokens, interruptible transitions, no layout animation. */
:root{--m-ease:cubic-bezier(.23,1,.32,1);--m-ease-io:cubic-bezier(.77,0,.175,1);--m-panel:220ms;--m-press:120ms}
.logo,.footer-logo{display:flex;align-items:center;gap:12px;width:248px;padding:0;background:none;border-radius:0}
.logo .brand-mark,.footer-logo .brand-mark{display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0}
.brand-name{display:flex;flex-direction:column;white-space:nowrap;line-height:1.05}
.brand-name strong{font:600 22px/1.05 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.brand-name small{font:400 12px/1.25 var(--font-text);letter-spacing:.015em;margin-top:6px;color:var(--muted)}
.footer-logo{width:fit-content;max-width:100%;gap:16px}
.footer-logo .brand-mark{width:56px;height:56px;filter:brightness(0) invert(1)}
.footer-logo .brand-name strong{color:var(--bg);font-size:28px}
.footer-logo .brand-name small{color:#bbcbd7;font-size:12px}
.nav{background:transparent;border:0;pointer-events:none;isolation:isolate}
.nav::before{content:'';position:absolute;inset:0;background:var(--bg);box-shadow:inset 0 -1px 0 #081f3820;clip-path:inset(0 0 0 0 round 0);transition:clip-path 250ms var(--m-ease-io);z-index:-1}
.nav__inner>.logo,.nav__links,.nav__actions,.mobile-menu{pointer-events:auto}
.nav__inner>.logo{transform-origin:left center;transition:transform 250ms var(--m-ease-io);clip-path:inset(-4px -4px -4px -4px)}
.nav .brand-name{transition:opacity 160ms var(--m-ease),transform 250ms var(--m-ease-io);transition-delay:60ms}
.nav__links,.nav__actions{transition:opacity 160ms var(--m-ease),transform 250ms var(--m-ease-io);transition-delay:60ms}
.nav.is-compact::before{clip-path:inset(12px calc((100% - 264px)/2) 12px calc((100% - 264px)/2) round 32px)}
.nav.is-compact .nav__inner>.logo{transform:translateX(calc(50vw - 116px - max(var(--gut),(100vw - 1312px)/2)));clip-path:inset(-4px calc(100% - 52px) -4px -4px)}
.nav.is-compact .brand-name{opacity:0;transform:translateX(-12px);transition-delay:0ms}
.nav.is-compact .nav__links,.nav.is-compact .nav__actions{opacity:0;transform:translateX(-16px);transition-delay:0ms;pointer-events:none}
.nav-dock-controls{position:absolute;top:22px;left:calc(50% - 52px);width:164px;display:grid;grid-template-columns:108px 44px;gap:12px;opacity:0;transform:translateX(-10px);visibility:hidden;pointer-events:none;transition:opacity 120ms var(--m-ease),transform 180ms var(--m-ease),visibility 0s 180ms}
.nav.is-compact .nav-dock-controls{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:70ms,70ms,0ms;transition-duration:180ms,180ms,0s}
.dock-menu{display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;border:0;padding:0 8px;color:var(--ink);font-size:14px;font-weight:500;border-radius:6px}
.dock-contact{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--yellow);color:var(--ink);border-radius:50%;transition:transform 120ms var(--m-ease)}
.dock-menu:active,.dock-contact:active,.menu-toggle:active{transform:scale(.97)}
.nav.is-menu-open .menu-toggle{display:flex}
.nav.is-menu-open .nav__links{visibility:hidden}
.mobile-menu{transform-origin:calc(100% - var(--gut)) 0;animation:none;transition:opacity 220ms var(--m-ease),transform 220ms var(--m-ease)}
@starting-style{.mobile-menu:not([hidden]){opacity:0;transform:translateY(-6px)}
}
.nav [inert],.nav-dock-controls[inert]{pointer-events:none}
html:not([data-motion=off]) .btn:active{transform:translateY(1px) scale(.97)}
@media(hover:hover) and (pointer:fine){.dock-menu:hover{color:var(--blue)}
.dock-contact:hover{transform:translateY(-1px)}
.dock-contact:active{transform:translateY(1px) scale(.97)}
}
@media(hover:none),(pointer:coarse){.hero-secondary:hover .icon,.service-extra:hover .icon{transform:none}
.hero-bottom:hover .scroll-circle .icon{transform:rotate(90deg)}
}
@media(max-width:1199px){.logo{width:224px;gap:10px}
.brand-name strong{font-size:20px}
.nav__links{gap:20px}
.nav__inner{gap:20px}
}
@media(max-width:959px){.logo{width:248px}
.brand-name strong{font-size:22px}
.nav-dock-controls{top:18px}
.nav.is-compact::before{clip-path:inset(8px calc((100% - 264px)/2) 8px calc((100% - 264px)/2) round 32px)}
}
@media(max-width:639px){:root{--nav:72px}
.nav__inner>.logo{width:auto;min-width:0;flex:0 1 auto;gap:10px;min-height:44px}
.logo .brand-mark{width:40px;height:40px}
.nav .brand-name{min-width:0}
.nav .brand-name strong{font:500 17px/1.3 var(--font-text);letter-spacing:-.025em}
.nav .brand-name small{display:none}
.nav__actions>.btn{display:none}
.nav__actions{flex-shrink:0}
.nav__inner{gap:16px}
.nav.is-compact::before{clip-path:inset(8px calc((100% - 232px)/2) 8px calc((100% - 232px)/2) round 28px)}
.nav.is-compact .nav__inner>.logo{transform:translateX(calc(50vw - 100px - var(--gut)));clip-path:inset(-4px calc(100% - 44px) -4px -4px)}
.nav-dock-controls{top:14px;left:calc(50% - 44px);width:140px;grid-template-columns:88px 44px;gap:8px}
.dock-menu{font-size:13px;padding-inline:4px}
.dock-contact{width:44px;height:44px}
.footer-logo{gap:12px}
.footer-logo .brand-mark{width:48px;height:48px}
.footer-logo .brand-name strong{font-size:25px}
.footer-logo .brand-name small{font-size:11px}
}
@media(max-width:359px){.nav__inner{gap:12px}
.nav .brand-name strong{font-size:16px}
.footer-logo .brand-name strong{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.nav::before,.nav__inner>.logo,.nav .brand-name,.nav__links,.nav__actions,.nav-dock-controls,.mobile-menu{transition-property:opacity;transition-duration:120ms;transition-delay:0ms}
.dock-contact,.dock-menu{transition:none}
.dock-contact:hover,.dock-contact:active,.dock-menu:active,.menu-toggle:active{transform:none}
}
html[data-input=keyboard] .nav::before,html[data-input=keyboard] .nav__inner>.logo,html[data-input=keyboard] .nav .brand-name,html[data-input=keyboard] .nav__links,html[data-input=keyboard] .nav__actions,html[data-input=keyboard] .nav-dock-controls,html[data-input=keyboard] .mobile-menu{transition:none;animation:none}

/* A small amount of separation keeps the compact header legible over text. */
.nav.is-compact{filter:drop-shadow(0 2px 5px #081f381c)}
.brand-name strong{letter-spacing:-.025em}
.dock-menu{min-height:44px}