Hide Twenty Twelve drop shadow

As simple as it seems, for some reason I cannot override the drop shadow in Twenty Twelve. It’s defined as this:

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

But I can’t override it. I’ve tried body { box-shadow: none; }, as well as writing a new @media screen and (min-width: 960px) in my child style.css, but it won’t take effect. It’s being overriden by the the @media query in the parent style.

Here’s the site: https://daleandsands.co.uk/