XF 1.4 my logo gets too small in responsive-medium mode

[mfman]

I would really appreciate some input on a problem I'm having.

So, in order to make sure I had a very sharp looking logo, I output my logo as a PNG from Adobe Illustrator at 771x130. However, I make it display at 41% of that size to get the proportions I'm going for on the site. At responsive-wide, everything looks great. I made this one change in the header.css template as you can see below in #logo:

#header
{
    @property "header";
    background-color: @contentBackground;
    @property "/header";
}

{xen:helper clearfix, '#header .pageWidth .pageContent'}

    #logo
    {
        display: block;
        float: left;
        line-height: {xen:calc '@headerLogoHeight - 4'}px;
        *line-height: @headerLogoHeight;
        height: @headerLogoHeight;
        max-width: 41%;
        vertical-align: middle;
    }

        /* IE6/7 vertical align fix */
        #logo span
        {
            *display: inline-block;
            *height: 100%;
        }

        #logo a:hover
        {
            text-decoration: none;
        }

        #logo img
        {
            vertical-align: middle;
            max-width: 100%;
        }

The problem is that when I reduce the size of the browser window, moving the right side of the browser to the right (while retaining the height) toward responsive-medium, the logo shrinks very quickly to an extremely small unacceptable size. Why is this happening? Is there a way to still use my 771x130 logo but display it at a smaller size in order to retain its sharpness, and have it look the size I want as I move from responsive-wide to responsive-medium? When I upload a regular size logo, it just looks too blurry and fuzzy on my Mac, iPad, and iPhone.

By the way, I do have the Respollo add-on installed with a mobile logo for responsive-narrow, and it works great, although I'm not able to upload a mobile logo double the size and have it display smaller...not sure why that is.

I had a thought. Is it possible, and is it a favorable solution, to move the whole header area out of the responsive area in the PAGE_CONTAINER template?