Disable site-wide flex animation on mobile except for mobile header

Site URL: https://greyhound-sailfish-a8f6.squarespace.com/

I need to disable site-wide animations on mobile but not on the header, because unsetting the transform affects the mobile menu burger.

When I add this CSS, it accurately removes animations on mobile BUT it also removes all lines except one from the menu burger:

@media screen and (max-width: 991px) {
  * {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
  }
}

So I was trying this instead, in an attempt to stop the header from being affected. It doesn't work.

@media screen and (max-width: 991px) {
  not(.header-element) * {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
  }
}

Any ideas?

site password is: oceans

That worked perfectly – thanks so much!