CSS sticky header overlapping anchor links only on mobile browsers?

I'm facing a strange issue with a position: sticky header on a WordPress-based site. On desktop, everything works fine, but on mobile (Chrome/Safari), when clicking an anchor link to a specific section, the sticky header overlaps the top 80px of the content.

I’ve tried using scroll-margin-top: 100px; on the target sections, but it seems to be ignored by the mobile viewport.

You can see the behavior on the live site here: https://portaking.pk/ (Try clicking any of the "Product Specifications" jump links in the menu on a mobile device).

My CSS:

.site-header { position: sticky; top: 0; z-index: 9999; } .section-target { scroll-margin-top: 100px; }

Is there a specific mobile browser quirk with scroll-margin-top and sticky headers that I'm missing, or is there a better JavaScript-based way to calculate the offset dynamically?