refactor(hero): rewrite 9 product hero sections to canonical template

- Extract data from each page (pill, title, image, features, hasPricelist)
- Generate hero from canonical template (text-LEFT, image-RIGHT, animated bg)
- Remove dead <Header slot=Footer slot= StickyBottomCTA slots (BaseLayout renders defaults)
- Remove dead data-price-button when id="pricelist" missing (auto-detect hides it)
- Drop legacy justify-center/max-w-md workarounds; use canonical classes
- Apply consistent TEXT-LEFT order across all product heroes
- Drop unused mobile-only sections in ตู้ดับเพลิง (page now follows template)
- Add overflow-x-clip on header/footer (submenu overflow fix)
- Add .submenu-anchor class for submenu positioning

Verified: 9 pages render with valid HTML, TEXT-LEFT, correct features, no dead links.

src/styles/global.css

@@ -860,3 +860,23 @@ html {
   scroll-behavior: smooth;
   scroll-padding-top: 200px;
 }
+
+/* ============================================
+   CUSTOM UTILITIES
+   ============================================ */
+
+/* Submenu anchor — the project's tailwind `-translate-x-1/2` resolves
+   to `-70%` instead of the default `-50%` (custom local config), so
+   we use this class to pin the submenu to a known good offset.
+   !important is required to win against the local -70% override.
+   - Default (<1024px): flush-right of parent (no x-translate)
+   - lg+ (>=1024px): centered with -70% x-translate */
+.submenu-anchor {
+  --tw-translate-x: 0 !important;
+}
+
+@media (min-width: 1024px) {
+  .submenu-anchor {
+    --tw-translate-x: -70% !important;
+  }
+}