{"id":75060,"date":"2025-12-15T11:15:35","date_gmt":"2025-12-15T11:15:35","guid":{"rendered":"https:\/\/www.harsle.com\/?page_id=75060"},"modified":"2026-04-16T07:55:17","modified_gmt":"2026-04-16T07:55:17","slug":"deeppunch","status":"publish","type":"page","link":"https:\/\/www.harsle.com\/fr\/deeppunch\/","title":{"rendered":"Presse \u00e0 gorge profonde"},"content":{"rendered":"\n<!-- Bend Series \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n    <!-- Fonts inherited from WordPress theme typography settings -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page .servo-card img,\n        .mb-page .bg-card img,\n        .mb-page .comp-img img,\n        .mb-page .auto-card-img img,\n                .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page .ctrl-slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page .ctrl-tab,\n        .mb-page .ctrl-tab:hover,\n        .mb-page .ctrl-tab:focus,\n        .mb-page .ctrl-tab:active { background: transparent !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }\n        .mb-page .ctrl-tab .ctrl-desc { color: #9ca3af !important; text-transform: none !important; }\n        @media (min-width: 1280px) {\n            .mb-page .ctrl-tab { transition: background 0.3s ease; }\n            .mb-page .ctrl-tab:hover { background: rgba(255,255,255,0.04) !important; }\n            .mb-page .ctrl-tab:hover h4 { color: rgba(255,255,255,0.75) !important; }\n            .mb-page .ctrl-tab.ctrl-active:hover h4 { color: #ffffff !important; }\n            .mb-page .ctrl-tab:hover { border-left-color: rgba(255,255,255,0.3) !important; }\n            .mb-page .ctrl-tab.ctrl-active:hover { border-left-color: #00A0E9 !important; }\n        }\n        .mb-page .hero-btn-quote,\n        .mb-page .hero-btn-video { min-width: 220px; justify-content: center; }\n        @media (max-width: 1279px) {\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video { min-width: 0; width: 72%; }\n        }\n        .mb-page .hero-btn-quote { color: #fff !important; }\n        .mb-page .hero-btn-quote:hover { background: #0080BA !important; color: #fff !important; }\n        .mb-page .hero-btn-video { color: #fff !important; }\n        .mb-page .hero-btn-video:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; border-color: #00A0E9 !important; }\n        .mb-page .app-dot { height: 3px !important; border-radius: 2px !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; border: none !important; line-height: 0 !important; font-size: 0 !important; cursor: pointer; }\n        .mb-page .comp-tab,\n        .mb-page .comp-tab:hover,\n        .mb-page .comp-tab:focus,\n        .mb-page .comp-tab:active { background: transparent !important; border: none !important; display: flex !important; flex-direction: column !important; }\n        .mb-page .comp-tab span { display: block !important; }\n        .mb-page .comp-tab div { width: 100% !important; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .fp-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; z-index: 1; }\n        .fp-section .fp-bg { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n        .fp-section .fp-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }\n        .fp-section .fp-overlay { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n        .mb-page .fp-section { display: flex; }\n    \n        [data-parallax] { will-change: transform; }\n        .counter-value { font-variant-numeric: tabular-nums; }\n    \n        .scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }\n        @keyframes scrollBounce {\n            0%, 100% { transform: translateY(0); opacity: 1; }\n            50% { transform: translateY(12px); opacity: 0.5; }\n        }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .fp-section { min-height: auto !important; }\n            .fp-section#hero { min-height: 100vh !important; min-height: 100dvh !important; }\n            .fp-section .fp-bg { top: -10%; bottom: -10%; }\n            .fp-section .fp-overlay { top: -10%; bottom: -10%; }\n        }\n\n        \/* === Hero background switching === *\/\n        .hero-bg-mobile { display: none !important; }\n        .hero-overlay-mobile { display: none !important; }\n        @media (max-width: 1279px) {\n            .hero-bg-desktop { display: none !important; }\n            .hero-bg-mobile { display: block !important; }\n            .hero-overlay-desktop { display: none !important; }\n            .hero-overlay-mobile { display: block !important; }\n        }\n\n        \/* === Hero & tablet layout === *\/\n        \/* --- Hero: auto-reveal on page load (no scroll needed) --- *\/\n        @keyframes heroFadeUp {\n            from { opacity: 0; transform: translateY(40px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        #hero .reveal {\n            opacity: 0;\n            transform: translateY(40px);\n            animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;\n        }\n        #hero .reveal:nth-child(1) { animation-delay: 0.1s; }\n        #hero .reveal:nth-child(2) { animation-delay: 0.25s; }\n        #hero .reveal:nth-child(3) { animation-delay: 0.4s; }\n        #hero .reveal:nth-child(4) { animation-delay: 0.55s; }\n        #hero .reveal:nth-child(5) { animation-delay: 0.7s; }\n\n        \/* --- Hero: shared mobile+tablet layout --- *\/\n        @media (max-width: 1279px) {\n            #hero .hero-bg-mobile {\n                object-position: center 100%;\n            }\n            #hero > .relative.z-10 {\n                display: flex;\n                align-items: flex-end;\n                justify-content: center;\n                min-height: 100vh;\n                min-height: 100dvh;\n                padding-bottom: 0;\n            }\n            #hero > .relative.z-10 > div > div {\n                max-width: 100%;\n                text-align: center;\n            }\n            #hero > .relative.z-10 h1 { text-align: center; }\n            #hero > .relative.z-10 p { text-align: center; margin-left: auto; margin-right: auto; }\n            #hero > .relative.z-10 .flex.flex-wrap.gap-3 { justify-content: center; }\n            #hero > .relative.z-10 .flex.flex-wrap.gap-6 { justify-content: center; margin-left: auto; margin-right: auto; }\n        }\n        \/* --- Hero: MOBILE only (\u2264767px) --- *\/\n        @media (max-width: 767px) {\n            #hero .hero-bg-mobile {\n                object-position: center 100%;  \/* \u624b\u673a\u7aef\u80cc\u666f\u56fe\u4f4d\u7f6e *\/\n            }\n            #hero > .relative.z-10 > div {\n                width: 100%;\n                padding: 0 20px 40px 20px;  \/* \u624b\u673a\u7aef\u6587\u5b57\u5e95\u90e8\u95f4\u8ddd *\/\n            }\n        }\n        \/* --- Hero: TABLET only (768px\u20131279px) --- *\/\n        @media (min-width: 768px) and (max-width: 1279px) {\n            #hero .hero-bg-mobile {\n                object-position: center 10%;  \/* \u5e73\u677f\u7aef\u80cc\u666f\u56fe\u4f4d\u7f6e *\/\n            }\n            #hero > .relative.z-10 > div {\n                width: 100%;\n                padding: 0 24px 60px 24px;  \/* \u5e73\u677f\u7aef\u6587\u5b57\u5e95\u90e8\u95f4\u8ddd *\/\n            }\n        }\n\n        \/* === Hero: short viewport height optimization === *\/\n        \/* Desktop (\u22651280px) \u2014 short viewport: text at bottom, machine visible above *\/\n        @media (min-width: 1280px) and (max-height: 900px) {\n            #hero.fp-section {\n                align-items: flex-end !important;\n            }\n            #hero .fp-bg {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .fp-bg[data-parallax] {\n                transform: none !important;\n            }\n            #hero .fp-bg img.hero-bg-desktop {\n                width: 100% !important;\n                height: auto !important;\n                object-fit: unset !important;\n                position: absolute !important;\n                top: 50% !important;\n                left: 0 !important;\n                transform: translateY(-50%) !important;\n            }\n            #hero .fp-overlay {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .hero-overlay-desktop {\n                background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 30%, transparent 55%),\n                            linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 35%, transparent 65%) !important;\n            }\n            #hero > .relative.z-10 > div:first-child {\n                padding-top: 0 !important;\n                padding-bottom: clamp(4rem, 10vh, 8rem) !important;\n            }\n            #hero h1 {\n                font-size: clamp(2rem, 9vh, 6rem) !important;\n            }\n            #hero > .relative.z-10 p {\n                font-size: clamp(0.8rem, 2.8vh, 1.25rem) !important;\n                margin-bottom: clamp(0.375rem, 1.5vh, 2.5rem) !important;\n                margin-top: clamp(0.25rem, 1.2vh, 1.5rem) !important;\n            }\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video {\n                padding: clamp(0.3rem, 1.2vh, 1rem) clamp(1rem, 2vw, 2rem) !important;\n                font-size: clamp(0.6rem, 1.5vh, 0.875rem) !important;\n                min-width: 140px !important;\n            }\n            #hero .flex.flex-wrap.gap-3 {\n                margin-bottom: 0 !important;\n                gap: clamp(0.375rem, 0.8vh, 1rem) !important;\n            }\n            #hero .border-t {\n                display: none !important;\n            }\n            #hero .xl\\:flex.flex-wrap {\n                display: none !important;\n            }\n        }\n        \/* Tablet & mobile \u2014 landscape or short viewport: text at bottom, machine visible *\/\n        @media (max-width: 1279px) and (orientation: landscape) {\n            #hero .fp-bg {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .fp-bg[data-parallax] {\n                transform: none !important;\n            }\n            #hero .fp-bg img.hero-bg-mobile {\n                width: 100% !important;\n                height: auto !important;\n                object-fit: unset !important;\n                position: absolute !important;\n                top: 50% !important;\n                left: 0 !important;\n                transform: translateY(-50%) !important;\n            }\n            #hero .fp-overlay {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .hero-overlay-mobile {\n                background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 35%, transparent 60%) !important;\n                display: block !important;\n            }\n            #hero > .relative.z-10 > div {\n                padding: 0 20px clamp(4rem, 10vh, 8rem) 20px !important;\n            }\n            #hero h1 {\n                font-size: clamp(1.5rem, 7vh, 3.75rem) !important;\n            }\n            #hero > .relative.z-10 p {\n                font-size: clamp(0.7rem, 2.2vh, 1.125rem) !important;\n                margin-bottom: clamp(0.25rem, 1.2vh, 1.5rem) !important;\n                margin-top: clamp(0.2rem, 0.8vh, 1rem) !important;\n            }\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video {\n                padding: clamp(0.25rem, 1vh, 0.75rem) clamp(1rem, 3vw, 1.5rem) !important;\n                font-size: clamp(0.55rem, 1.3vh, 0.75rem) !important;\n                width: auto !important;\n                min-width: auto !important;\n            }\n            #hero .flex.flex-wrap.gap-3 {\n                gap: clamp(0.25rem, 0.6vh, 0.75rem) !important;\n                margin-bottom: 0 !important;\n            }\n        }\n\n        \/* === MOBILE & TABLET === *\/\n        @media (max-width: 1279px) {\n            #hero h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); }\n        }\n\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            \/* base text-3xl=1.875rem \u2192 scales to 2.75rem on large tablets *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 3: Large display numbers (stat counters) \u2500\u2500 *\/\n            \/* base text-4xl=2.25rem \u2192 scales to 3.25rem *\/\n            .mb-page .stat-card .text-4xl {\n                font-size: clamp(2.25rem, 6vw, 3.25rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4a: Card headings \u2014 servo, safety, automation \u2500\u2500 *\/\n            .mb-page .servo-text h3,\n            .mb-page .auto-card-body h3 {\n                font-size: clamp(1.0625rem, 2.5vw, 1.375rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4b: Card headings \u2014 back gauge overlay \u2500\u2500 *\/\n            .mb-page .bg-card-text h4 {\n                font-size: clamp(1rem, 2.2vw, 1.25rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4c: Stat card titles \u2500\u2500 *\/\n            .mb-page .stat-card h3 {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n            .mb-page p.text-base {\n                font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 6: Body text \u2014 secondary (card descriptions) \u2500\u2500 *\/\n            .mb-page p.text-sm,\n            .mb-page .auto-card-body p,\n            .mb-page .servo-text p {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 7: Upgrade option tab labels \u2500\u2500 *\/\n            .mb-page .comp-tab span {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 1: HERO \u2014 Brand Identity & First Impression -->\n    <!-- ============================================ -->\n    <section id=\"hero\" class=\"fp-section\" style=\"min-height:100vh;\">\n        <div class=\"fp-bg\" data-parallax>\n            <img decoding=\"async\" class=\"hero-bg-desktop\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/j21s-1-1.png\" alt=\"background image desktop\">\n            <!-- TODO: \u66ff\u6362\u4e0b\u65b9\u94fe\u63a5\u4e3a\u79fb\u52a8\u7aef\u4e13\u7528\u7ad6\u7248\u80cc\u666f\u56fe -->\n            <img decoding=\"async\" class=\"hero-bg-mobile\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j21s1-2gai.png\" alt=\"background image mobile view\">\n        <\/div>\n        <div class=\"fp-overlay hero-overlay-desktop bg-gradient-to-r from-black\/80 via-black\/40 to-transparent\"><\/div>\n        <div class=\"fp-overlay hero-overlay-mobile bg-gradient-to-b from-transparent via-black\/40 to-black\/90\"><\/div>\n        <div class=\"fp-overlay bg-gradient-to-t from-[#050505] via-transparent to-transparent opacity-40\"><\/div>\n    \n        <div class=\"relative z-10 w-full\">\n            <div class=\"max-w-[1400px] mx-auto px-6 xl:px-10 py-20 xl:py-32 xl:py-40\">\n                <div class=\"max-w-2xl\">\n                    <h1 class=\"reveal font-display text-4xl sm:text-6xl xl:text-7xl xl:text-8xl font-bold text-white tracking-tight leading-[0.95]\">\n                        Deep<span class=\"text-brand\">Punch<\/span>\n                    <\/h1>\n                    <p class=\"reveal text-lg xl:text-xl text-gray-300\/90 leading-relaxed mb-6 xl:mb-10 max-w-xl font-light mt-4 xl:mt-6\">\n                        Designed for fast, stable punching performance.\n                    <\/p>\n                    <div class=\"reveal flex flex-wrap gap-3 xl:gap-4 mb-6 xl:mb-16\">\n                        <button onclick=\"openQuoteModal_hero()\" class=\"hero-btn-quote inline-flex items-center justify-center bg-brand text-white font-semibold px-6 py-3 xl:px-8 xl:py-4 rounded transition-all text-xs xl:text-sm tracking-wide uppercase group cursor-pointer\" style=\"color:#fff !important; border:none;\">\n                            Request a Quote\n                            <i class=\"fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform\"><\/i>\n                        <\/button>\n                        <button onclick=\"openVideoModal_hero()\" class=\"hero-btn-video inline-flex items-center justify-center border border-white\/30 text-white font-semibold px-6 py-3 xl:px-8 xl:py-4 rounded transition-all text-xs xl:text-sm tracking-wide uppercase backdrop-blur-sm cursor-pointer\" style=\"background:rgba(255,255,255,0.05) !important; color:#fff !important;\">\n                            <i class=\"fas fa-play mr-3 text-brand text-xs\"><\/i>\n                            Watch Video\n                        <\/button>\n                    <\/div>\n                    <div class=\"reveal border-t border-white\/15 max-w-md mt-8 xl:mt-12 mb-0 hidden xl:block\"><\/div>\n                    <div class=\"reveal flex-wrap gap-6 xl:gap-14 pt-6 xl:pt-8 w-fit hidden xl:flex\">\n                        <div>\n                            <div class=\"text-2xl xl:text-4xl font-bold text-white font-display\">Fast<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Stroke<\/div>\n                        <\/div>\n                        <div>\n                            <div class=\"text-2xl xl:text-4xl font-bold text-white font-display\">Rigid<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Frame<\/div>\n                        <\/div>\n                        <div>\n                            <div class=\"text-2xl xl:text-4xl font-bold text-white font-display\">Easy<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Operation<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Video Lightbox Modal -->\n    <div id=\"hero-video-modal\" style=\"display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);align-items:center;justify-content:center;\" onclick=\"closeVideoModal_hero()\">\n        <div style=\"position:relative;width:92vw;max-width:1100px;aspect-ratio:16\/9;\" onclick=\"event.stopPropagation()\">\n            <iframe id=\"hero-video-modal-iframe\" src=\"\" style=\"width:100%;height:100%;border:none;border-radius:8px;\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n            <button onclick=\"closeVideoModal_hero()\" style=\"position:absolute;top:-36px;right:0;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px;opacity:0.7;transition:opacity 0.2s;\" onmouseover=\"this.style.opacity='1'\" onmouseout=\"this.style.opacity='0.7'\"><i class=\"fas fa-times\"><\/i><\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Quote Popup Modal -->\n    <div id=\"hero-quote-modal\" style=\"display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;\" onclick=\"closeQuoteModal_hero()\">\n        <div style=\"position:relative;width:92vw;max-width:720px;max-height:90vh;background:#fff;border-radius:12px;overflow:hidden;\" onclick=\"event.stopPropagation()\">\n            <button onclick=\"closeQuoteModal_hero()\" style=\"position:absolute;top:12px;right:12px;z-index:10;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.06);border:none;border-radius:50%;color:#333;font-size:16px;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(0,0,0,0.12)'\" onmouseout=\"this.style.background='rgba(0,0,0,0.06)'\"><i class=\"fas fa-times\"><\/i><\/button>\n            <div style=\"overflow-y:auto;max-height:90vh;padding:0;\">\n                \t\t<div data-elementor-type=\"container\" data-elementor-id=\"80748\" class=\"elementor elementor-80748\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-aa8062a e-flex e-con-boxed e-con e-parent\" data-id=\"aa8062a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27de7ea wd-width-100 elementor-widget elementor-widget-wd_title\" data-id=\"27de7ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"wd_title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"title-wrapper wd-set-mb reset-last-child wd-title-color-default wd-title-style-default wd-title-size-default text-left\">\n\n\t\t\t\n\t\t\t<div class=\"liner-continer\">\n\t\t\t\t<h4 class=\"woodmart-title-container title wd-fontsize-l\">Request a Quote<\/h4> \n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"title-after_title reset-last-child wd-fontsize-xs\">\n\t\t\t\t\t<p>Fill in the details below and we'll get back to you within 24 hours<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e19d02c elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"e19d02c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;,&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"80748\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"e19d02c\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Industrial Deep Drawing Press Equipment | HARSLE\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"74763\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tNAME\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Your Name\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-Company elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-Company\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tCOMPANY\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[Company]\" id=\"form-field-Company\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Company Name\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tEMAIL\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"you@company.com\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-WhatsApp elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-WhatsApp\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tWHATSAPP\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[WhatsApp]\" id=\"form-field-WhatsApp\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"WhatsApp Number\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tMESSAGE\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-md\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"5\" placeholder=\"Tell us about your requirements...\" required=\"required\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">SUBMIT INQUIRY<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        \/\/ Reveal on scroll (skip hero \u2014 hero uses CSS auto-animation)\n        var heroSection = document.getElementById('hero');\n        var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n        if ('IntersectionObserver' in window) {\n            var revealObs = new IntersectionObserver(function(entries) {\n                entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n            }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n            revealEls.forEach(function(el) {\n                if (heroSection && heroSection.contains(el)) {\n                    el.classList.add('active');\n                } else {\n                    revealObs.observe(el);\n                }\n            });\n        } else {\n            revealEls.forEach(function(el) { el.classList.add('active'); });\n        }\n    \n        var isMobileParallax = window.innerWidth < 1280;\n        window.addEventListener('resize', function(){ isMobileParallax = window.innerWidth < 1280; });\n        window.addEventListener('scroll', () => {\n            var factor = isMobileParallax ? 0.03 : 0.08;\n            document.querySelectorAll('[data-parallax]').forEach(el => {\n                const parent = el.closest('section, [style*=\"height\"]');\n                if (!parent) return;\n                const r = parent.getBoundingClientRect();\n                const h = parent.offsetHeight;\n                const maxShift = h * (isMobileParallax ? 0.06 : 0.15);\n                const raw = r.top * factor;\n                const clamped = Math.max(-maxShift, Math.min(maxShift, raw));\n                el.style.transform = 'translateY(' + clamped + 'px)';\n            });\n        });\n    })();\n    <\/script>\n\n    <!-- Video Lightbox JS -->\n    <script>\n    function openVideoModal_hero() {\n        var modal = document.getElementById('hero-video-modal');\n        var iframe = document.getElementById('hero-video-modal-iframe');\n        iframe.src = 'https:\/\/www.youtube.com\/embed\/98XB7khDR74?autoplay=1&rel=0&modestbranding=1';\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    }\n    function closeVideoModal_hero() {\n        var modal = document.getElementById('hero-video-modal');\n        var iframe = document.getElementById('hero-video-modal-iframe');\n        iframe.src = '';\n        modal.style.display = 'none';\n        document.body.style.overflow = '';\n    }\n    var _vpb = document.getElementById('video-play-btn'); if (_vpb) _vpb.addEventListener('click', openVideoModal_hero);\n    document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeVideoModal_hero(); closeQuoteModal_hero(); } });\n\n    function openQuoteModal_hero() {\n        var modal = document.getElementById('hero-quote-modal');\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    }\n    function closeQuoteModal_hero() {\n        var modal = document.getElementById('hero-quote-modal');\n        modal.style.display = 'none';\n        document.body.style.overflow = '';\n    }\n    <\/script>\n<!--J21S-01-hero -->\n\n\n\n<!-- Bend Series \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n    <!-- Fonts inherited from WordPress theme typography settings -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-5 { gap: 1.25rem; }\n            .xl\\:gap-8 { gap: 2rem; }\n            .xl\\:gap-10 { gap: 2.5rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .fp-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; z-index: 1; }\n        .fp-section .fp-bg { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n        .fp-section .fp-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }\n        .fp-section .fp-overlay { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n        .mb-page .fp-section { display: flex; }\n    \n        [data-parallax] { will-change: transform; }\n        .counter-value { font-variant-numeric: tabular-nums; }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n        .stat-card {\n            position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);\n            backdrop-filter: blur(20px); transition: all 0.5s ease;\n        }\n        .stat-card::before {\n            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;\n            background: linear-gradient(135deg, rgba(0,160,233,0.3), transparent 60%);\n            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s;\n        }\n        .stat-card:hover::before { opacity: 1; }\n        .stat-card:hover { background: rgba(0,160,233,0.05); transform: translateY(-4px); }\n    \n        .text-shimmer {\n            background: linear-gradient(90deg, #fff 0%, #00A0E9 50%, #fff 100%); background-size: 200% 100%;\n            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n            animation: shimmer 3s ease-in-out infinite;\n        }\n        @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }\n    \n        .icon-ring { width: 56px; height: 56px; border: 2px solid rgba(0,160,233,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s; }\n        @media (min-width: 1280px) { .icon-ring { width: 72px; height: 72px; } }\n        .icon-ring:hover { border-color: #00A0E9; background: rgba(0,160,233,0.1); }\n\n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .fp-section { min-height: auto !important; }\n            .fp-section .fp-bg { top: -10%; bottom: -10%; }\n            .fp-section .fp-overlay { top: -10%; bottom: -10%; }\n            .stat-card { padding: 20px !important; }\n        }\n\n\n        \/* === Gallery caption hover (desktop only) === *\/\n        \/* Mobile\/tablet: bottom bar always visible *\/\n        .gallery-square .gallery-caption {\n            top: auto;\n        }\n        @media (min-width: 1280px) {\n            .gallery-square .gallery-caption {\n                top: 0;\n                opacity: 0;\n                transition: opacity 0.4s ease, transform 0.4s ease;\n                transform: translateY(8px);\n                display: flex;\n                align-items: flex-end;\n            }\n            .gallery-square:hover .gallery-caption {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        \/* === Gallery: 1 wide image (left) + 2 auto images (right) === *\/\n        .gallery-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 1.25rem;\n        }\n        .gallery-grid .gallery-tall {\n            aspect-ratio: 16\/9;\n        }\n        .gallery-grid .gallery-square {\n            aspect-ratio: 16\/9;\n        }\n        @media (min-width: 1280px) {\n            .gallery-grid {\n                grid-template-columns: 60fr 40fr;\n                grid-template-rows: 1fr 1fr;\n                gap: 1.5rem;\n            }\n            .gallery-grid .gallery-tall {\n                grid-row: 1 \/ 3;\n                aspect-ratio: 4\/3;\n            }\n            .gallery-grid .gallery-square {\n                aspect-ratio: unset;\n            }\n        }\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4c: Stat card titles \u2500\u2500 *\/\n            .mb-page .stat-card h3 {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n            .mb-page p.text-base {\n                font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 6: Body text \u2014 secondary \u2500\u2500 *\/\n            .mb-page p.text-sm {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- !!! -->\n    <!-- ============================================ -->\n    <section id=\"performance\" class=\"fp-section\">\n        <div class=\"fp-bg\" data-parallax>\n            <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/bj1.png\" alt=\"background image\">\n        <\/div>\n        <div class=\"fp-overlay bg-black\/0\"><\/div>\n        <div class=\"fp-overlay bg-gradient-to-b from-[#050505]\/80 via-transparent to-[#050505]\/90\"><\/div>\n    \n        <div class=\"relative z-10 w-full py-12 sm:py-16 xl:py-32\">\n            <div class=\"max-w-[1400px] mx-auto px-6 xl:px-10\">\n                <div class=\"text-center mb-6 sm:mb-8 xl:mb-16\">\n                    <div class=\"reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Extended Reach<\/span><\/div>\n                    <h2 class=\"reveal font-display text-3xl xl:text-5xl xl:text-6xl font-bold text-white mt-4 mb-6\">\n                        Deep<span class=\"text-shimmer\"> Throat<\/span>\n                    <\/h2>\n                    <p class=\"reveal text-gray-400 text-lg max-w-2xl mx-auto font-light\">The deep throat design provides increased working depth, allowing easy processing of large or offset workpieces with greater flexibility.<\/p>\n                <\/div>\n\n                <div class=\"gallery-grid\">\n                    <!-- LEFT: Tall rectangular image \u2014 replace src below -->\n                    <div class=\"gallery-tall rounded-2xl overflow-hidden reveal-left\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/j21s-shenhoukou.png\" alt=\"deep throat\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <!-- RIGHT TOP: image with caption \u2014 replace src & text below -->\n                    <div class=\"gallery-square rounded-2xl overflow-hidden reveal-right relative\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/shenhoukou-1.png\" alt=\"Detail Image 1\" class=\"w-full h-full object-cover\">\n                        <div class=\"gallery-caption absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/60 via-black\/30 to-transparent px-5 py-3\">\n                            <p class=\"text-white text-sm font-semibold m-0\">The deep throat C-frame design provides extended working space, making it easier to handle large or offset workpieces.<\/p>\n                        <\/div>\n                    <\/div>\n                    <!-- RIGHT BOTTOM: image with caption \u2014 replace src & text below -->\n                    <div class=\"gallery-square rounded-2xl overflow-hidden reveal-right relative\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/j21s-gongzuotai.png\" alt=\"Detail Image 2\" class=\"w-full h-full object-cover\">\n                        <div class=\"gallery-caption absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/70 via-black\/30 to-transparent px-5 py-3\">\n                            <p class=\"text-white text-sm font-semibold m-0\">The reinforced working table offers reliable support for large workpieces, ensuring stable positioning and consistent accuracy.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n   \n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n        if ('IntersectionObserver' in window) {\n            var revealObs = new IntersectionObserver(function(entries) {\n                entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n            }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n            revealEls.forEach(function(el) { revealObs.observe(el); });\n        } else {\n            revealEls.forEach(function(el) { el.classList.add('active'); });\n        }\n    \n        var isMobileParallax = window.innerWidth < 1280;\n        window.addEventListener('resize', function(){ isMobileParallax = window.innerWidth < 1280; });\n        window.addEventListener('scroll', () => {\n            var factor = isMobileParallax ? 0.03 : 0.08;\n            document.querySelectorAll('[data-parallax]').forEach(el => {\n                const parent = el.closest('section, [style*=\"height\"]');\n                if (!parent) return;\n                const r = parent.getBoundingClientRect();\n                const h = parent.offsetHeight;\n                const maxShift = h * (isMobileParallax ? 0.06 : 0.15);\n                const raw = r.top * factor;\n                const clamped = Math.max(-maxShift, Math.min(maxShift, raw));\n                el.style.transform = 'translateY(' + clamped + 'px)';\n            });\n        });\n           \n    })();\n    <\/script>\n<!--J21S-02-deep -->\n\n\n\n<!-- Bend Series \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n    <!-- Fonts inherited from WordPress theme typography settings -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n        \/* -- Safety carousel: responsive width -- *\/\n        #safety-carousel-wrap { width: 90%; }\n        @media (min-width: 640px) {\n            #safety-carousel-wrap { width: 80%; }\n        }\n        @media (min-width: 768px) {\n            #safety-carousel-wrap { width: 70%; }\n        }\n        @media (min-width: 1280px) {\n            #safety-carousel-wrap { width: 1200px; }\n        }\n        \/* -- Back Gauge: desktop 50\/50 split -- *\/\n        @media (min-width: 1280px) {\n            #bg-img-col { width: 50%; flex-shrink: 0; }\n            #bg-text-col { width: 50%; }\n        }\n        \/* -- Back Gauge image: wider ratio on mobile\/tablet -- *\/\n        @media (max-width: 1279px) {\n            .bg-card-wrap { aspect-ratio: 16\/10 !important; }\n            .comp-img-wrap { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }\n        }\n        @media (min-width: 640px) and (max-width: 1279px) {\n            .comp-img-wrap { width: 80% !important; }\n        }\n        @media (min-width: 768px) and (max-width: 1279px) {\n            .comp-img-wrap { width: 70% !important; }\n        }\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page .servo-card img,\n        .mb-page .bg-card img,\n        .mb-page .comp-img img,\n        .mb-page .auto-card-img img,\n                .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page .ctrl-slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page .ctrl-tab,\n        .mb-page .ctrl-tab:hover,\n        .mb-page .ctrl-tab:focus,\n        .mb-page .ctrl-tab:active { background: transparent !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }\n        .mb-page .ctrl-tab .ctrl-desc { color: #9ca3af !important; text-transform: none !important; }\n        @media (min-width: 1280px) {\n            .mb-page .ctrl-tab { transition: background 0.3s ease; }\n            .mb-page .ctrl-tab:hover { background: rgba(255,255,255,0.04) !important; }\n            .mb-page .ctrl-tab:hover h4 { color: rgba(255,255,255,0.75) !important; }\n            .mb-page .ctrl-tab.ctrl-active:hover h4 { color: #ffffff !important; }\n            .mb-page .ctrl-tab:hover { border-left-color: rgba(255,255,255,0.3) !important; }\n            .mb-page .ctrl-tab.ctrl-active:hover { border-left-color: #00A0E9 !important; }\n        }\n        .mb-page .hero-btn-quote,\n        .mb-page .hero-btn-video { min-width: 220px; justify-content: center; }\n        @media (max-width: 1279px) {\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video { min-width: 0; width: 72%; }\n        }\n        .mb-page .hero-btn-quote { color: #fff !important; }\n        .mb-page .hero-btn-quote:hover { background: #0080BA !important; color: #fff !important; }\n        .mb-page .hero-btn-video { color: #fff !important; }\n        .mb-page .hero-btn-video:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; border-color: #00A0E9 !important; }\n        .mb-page .app-dot { height: 3px !important; border-radius: 2px !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; border: none !important; line-height: 0 !important; font-size: 0 !important; cursor: pointer; }\n        .mb-page .comp-tab,\n        .mb-page .comp-tab:hover,\n        .mb-page .comp-tab:focus,\n        .mb-page .comp-tab:active { background: transparent !important; border: none !important; display: flex !important; flex-direction: column !important; }\n        .mb-page .comp-tab span { display: block !important; }\n        .mb-page .comp-tab div { width: 100% !important; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .fp-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; z-index: 1; }\n        .fp-section .fp-bg { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n        .fp-section .fp-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }\n        .fp-section .fp-overlay { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n        .mb-page .fp-section { display: flex; }\n    \n        [data-parallax] { will-change: transform; }\n        .counter-value { font-variant-numeric: tabular-nums; }\n    \n        .scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }\n        @keyframes scrollBounce {\n            0%, 100% { transform: translateY(0); opacity: 1; }\n            50% { transform: translateY(12px); opacity: 0.5; }\n        }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n        .stat-card {\n            position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);\n            backdrop-filter: blur(20px); transition: all 0.5s ease;\n        }\n        .stat-card::before {\n            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;\n            background: linear-gradient(135deg, rgba(0,160,233,0.3), transparent 60%);\n            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s;\n        }\n        .stat-card:hover::before { opacity: 1; }\n        .stat-card:hover { background: rgba(0,160,233,0.05); transform: translateY(-4px); }\n    \n        .brand-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); transition: all 0.4s ease; }\n        .brand-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(0,160,233,0.4); transform: translateY(-6px); }\n    \n        .text-shimmer {\n            background: linear-gradient(90deg, #fff 0%, #00A0E9 50%, #fff 100%); background-size: 200% 100%;\n            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n            animation: shimmer 3s ease-in-out infinite;\n        }\n        @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }\n    \n        .h-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,160,233,0.5), transparent); }\n        .icon-ring { width: 56px; height: 56px; border: 2px solid rgba(0,160,233,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s; }\n        @media (min-width: 1280px) { .icon-ring { width: 72px; height: 72px; } }\n        .icon-ring:hover { border-color: #00A0E9; background: rgba(0,160,233,0.1); }\n            \n        \/* Scroll-driven transition zone *\/\n        .transition-zone { position: relative; overflow: hidden; }\n        .tz-layer { position: absolute; inset: 0; }\n    \n        .white-zone { background: #ffffff; color: #1a1a1a; }\n        .white-zone .spec-table th { color: #666; }\n        .white-zone .spec-table td { color: #333; border-color: #e5e7eb; }\n        .white-zone .spec-table td.label-cell { color: #111; font-weight: 600; }\n        .white-zone .spec-table tr:hover { background: #f8fafc; }\n    \n        \/* Spec comparison rows *\/\n        .spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: none; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }\n        .spec-row.visible { opacity: 1; transform: translateY(0); }\n        .spec-cell { text-align: center; padding: 18px 8px; }\n        .spec-cell-value { font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.2; }\n        .spec-cell-label { font-size: 11px; color: #aaa; margin-top: 4px; font-weight: 400; }\n        .spec-header { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid #ddd; padding-bottom: 14px; margin-bottom: 0; }\n        .spec-header-cell { text-align: center; }\n        .spec-header-name { font-size: 20px; font-weight: 700; color: #111; }\n        .spec-header-sub { font-size: 11px; color: #aaa; margin-top: 2px; }\n        .spec-learn-more { display:inline-block; margin-top:10px; padding:5px 16px; font-size:11px; font-weight:600; color:#333; text-decoration:none; letter-spacing:0.03em; background:#f1f5f9; border:1px solid #e5e7eb; border-radius:9999px; transition:all 0.3s ease; text-transform:uppercase; }\n        .spec-learn-more:hover { background:#00A0E9; color:#fff; border-color:#00A0E9; }\n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .fp-section { min-height: auto !important; }\n            .fp-section#hero { min-height: 100vh !important; min-height: 100dvh !important; }\n            .fp-section .fp-bg { top: -10%; bottom: -10%; }\n            .fp-section .fp-overlay { top: -10%; bottom: -10%; }\n            .tooling-card-bg { border: 1px solid rgba(255,255,255,0.08); }\n        }\n        \/* === MOBILE: extra-compact spacing === *\/\n        @media (max-width: 767px) {\n            .tooling-content-wrap { padding: 40px 0 32px !important; }\n        }\n        \/* === TABLET: moderate spacing === *\/\n        @media (min-width: 768px) and (max-width: 1279px) {\n            .tooling-content-wrap { padding: 56px 0 44px !important; }\n        }\n    \n        \/* === DESKTOP tooling padding & form padding === *\/\n        @media (min-width: 1280px) {\n            #tooling > .relative { padding-top: 180px !important; padding-bottom: 160px !important; }\n        }\n    \n        \/* === Spec Mobile Carousel === *\/\n        .spec-carousel { display: none; overflow: hidden; }\n        @media (max-width: 1279px) {\n            .spec-desktop { display: none !important; }\n            .spec-carousel { display: block; }\n        }\n        .spec-carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n        .spec-carousel-slide { min-width: 100%; padding: 0 4px; box-sizing: border-box; }\n        .spec-carousel-slide-inner { background: #f8fafc; border-radius: 16px; padding: 24px 20px; border: 1px solid #eee; }\n        .spec-carousel-model { font-size: 18px; font-weight: 700; color: #111; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px;}\n        .spec-carousel-link { display: inline-block; margin-top: 8px; padding: 5px 16px; font-size: 11px; font-weight: 600; color: #333; text-decoration: none; letter-spacing: 0.03em; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; transition: all 0.3s ease; text-transform: uppercase; }\n        .spec-carousel-link:hover { background: #00A0E9; color: #fff; border-color: #00A0E9; }\n        .spec-carousel-specs { margin-top: 20px; }\n        .spec-carousel-item { text-align: center; padding: 14px 6px; border-bottom: 1px solid #eee; }\n        .spec-carousel-item-value { font-size: 17px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.2; }\n        .spec-carousel-item-label { font-size: 11px; color: #aaa; margin-top: 4px; font-weight: 400; }\n        .spec-carousel-indicator { user-select: none; }\n\n        \/* === Hero background switching === *\/\n        .hero-bg-mobile { display: none !important; }\n        .hero-overlay-mobile { display: none !important; }\n        @media (max-width: 1279px) {\n            .hero-bg-desktop { display: none !important; }\n            .hero-bg-mobile { display: block !important; }\n            .hero-overlay-desktop { display: none !important; }\n            .hero-overlay-mobile { display: block !important; }\n        }\n\n        \/* === Hero & tablet layout === *\/\n        \/* --- Hero: auto-reveal on page load (no scroll needed) --- *\/\n        @keyframes heroFadeUp {\n            from { opacity: 0; transform: translateY(40px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        #hero .reveal {\n            opacity: 0;\n            transform: translateY(40px);\n            animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;\n        }\n        #hero .reveal:nth-child(1) { animation-delay: 0.1s; }\n        #hero .reveal:nth-child(2) { animation-delay: 0.25s; }\n        #hero .reveal:nth-child(3) { animation-delay: 0.4s; }\n        #hero .reveal:nth-child(4) { animation-delay: 0.55s; }\n        #hero .reveal:nth-child(5) { animation-delay: 0.7s; }\n\n        \/* --- Hero: shared mobile+tablet layout --- *\/\n        @media (max-width: 1279px) {\n            #hero .hero-bg-mobile {\n                object-position: center 100%;\n            }\n            #hero > .relative.z-10 {\n                display: flex;\n                align-items: flex-end;\n                justify-content: center;\n                min-height: 100vh;\n                min-height: 100dvh;\n                padding-bottom: 0;\n            }\n            #hero > .relative.z-10 > div > div {\n                max-width: 100%;\n                text-align: center;\n            }\n            #hero > .relative.z-10 h1 { text-align: center; }\n            #hero > .relative.z-10 p { text-align: center; margin-left: auto; margin-right: auto; }\n            #hero > .relative.z-10 .flex.flex-wrap.gap-3 { justify-content: center; }\n            #hero > .relative.z-10 .flex.flex-wrap.gap-6 { justify-content: center; margin-left: auto; margin-right: auto; }\n        }\n        \/* --- Hero: MOBILE only (\u2264767px) --- *\/\n        @media (max-width: 767px) {\n            #hero .hero-bg-mobile {\n                object-position: center 100%;  \/* \u624b\u673a\u7aef\u80cc\u666f\u56fe\u4f4d\u7f6e *\/\n            }\n            #hero > .relative.z-10 > div {\n                width: 100%;\n                padding: 0 20px 40px 20px;  \/* \u624b\u673a\u7aef\u6587\u5b57\u5e95\u90e8\u95f4\u8ddd *\/\n            }\n        }\n        \/* --- Hero: TABLET only (768px\u20131279px) --- *\/\n        @media (min-width: 768px) and (max-width: 1279px) {\n            #hero .hero-bg-mobile {\n                object-position: center 10%;  \/* \u5e73\u677f\u7aef\u80cc\u666f\u56fe\u4f4d\u7f6e *\/\n            }\n            #hero > .relative.z-10 > div {\n                width: 100%;\n                padding: 0 24px 60px 24px;  \/* \u5e73\u677f\u7aef\u6587\u5b57\u5e95\u90e8\u95f4\u8ddd *\/\n            }\n        }\n\n        \/* === Hero: short viewport height optimization === *\/\n        \/* Desktop (\u22651280px) \u2014 short viewport: text at bottom, machine visible above *\/\n        @media (min-width: 1280px) and (max-height: 900px) {\n            #hero.fp-section {\n                align-items: flex-end !important;\n            }\n            #hero .fp-bg {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .fp-bg[data-parallax] {\n                transform: none !important;\n            }\n            #hero .fp-bg img.hero-bg-desktop {\n                width: 100% !important;\n                height: auto !important;\n                object-fit: unset !important;\n                position: absolute !important;\n                top: 50% !important;\n                left: 0 !important;\n                transform: translateY(-50%) !important;\n            }\n            #hero .fp-overlay {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .hero-overlay-desktop {\n                background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 30%, transparent 55%),\n                            linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 35%, transparent 65%) !important;\n            }\n            #hero > .relative.z-10 > div:first-child {\n                padding-top: 0 !important;\n                padding-bottom: clamp(4rem, 10vh, 8rem) !important;\n            }\n            #hero h1 {\n                font-size: clamp(2rem, 9vh, 6rem) !important;\n            }\n            #hero > .relative.z-10 p {\n                font-size: clamp(0.8rem, 2.8vh, 1.25rem) !important;\n                margin-bottom: clamp(0.375rem, 1.5vh, 2.5rem) !important;\n                margin-top: clamp(0.25rem, 1.2vh, 1.5rem) !important;\n            }\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video {\n                padding: clamp(0.3rem, 1.2vh, 1rem) clamp(1rem, 2vw, 2rem) !important;\n                font-size: clamp(0.6rem, 1.5vh, 0.875rem) !important;\n                min-width: 140px !important;\n            }\n            #hero .flex.flex-wrap.gap-3 {\n                margin-bottom: 0 !important;\n                gap: clamp(0.375rem, 0.8vh, 1rem) !important;\n            }\n            #hero .border-t {\n                display: none !important;\n            }\n            #hero .xl\\:flex.flex-wrap {\n                display: none !important;\n            }\n        }\n        \/* Tablet & mobile \u2014 landscape or short viewport: text at bottom, machine visible *\/\n        @media (max-width: 1279px) and (orientation: landscape) {\n            #hero .fp-bg {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .fp-bg[data-parallax] {\n                transform: none !important;\n            }\n            #hero .fp-bg img.hero-bg-mobile {\n                width: 100% !important;\n                height: auto !important;\n                object-fit: unset !important;\n                position: absolute !important;\n                top: 50% !important;\n                left: 0 !important;\n                transform: translateY(-50%) !important;\n            }\n            #hero .fp-overlay {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .hero-overlay-mobile {\n                background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 35%, transparent 60%) !important;\n                display: block !important;\n            }\n            #hero > .relative.z-10 > div {\n                padding: 0 20px clamp(4rem, 10vh, 8rem) 20px !important;\n            }\n            #hero h1 {\n                font-size: clamp(1.5rem, 7vh, 3.75rem) !important;\n            }\n            #hero > .relative.z-10 p {\n                font-size: clamp(0.7rem, 2.2vh, 1.125rem) !important;\n                margin-bottom: clamp(0.25rem, 1.2vh, 1.5rem) !important;\n                margin-top: clamp(0.2rem, 0.8vh, 1rem) !important;\n            }\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video {\n                padding: clamp(0.25rem, 1vh, 0.75rem) clamp(1rem, 3vw, 1.5rem) !important;\n                font-size: clamp(0.55rem, 1.3vh, 0.75rem) !important;\n                width: auto !important;\n                min-width: auto !important;\n            }\n            #hero .flex.flex-wrap.gap-3 {\n                gap: clamp(0.25rem, 0.6vh, 0.75rem) !important;\n                margin-bottom: 0 !important;\n            }\n        }\n\n        \/* === Control section horizontal tabs (below lg breakpoint) === *\/\n        @media (max-width: 1279px) {\n            #control .flex.flex-col.xl\\:flex-row {\n                flex-direction: column !important;\n            }\n            #control .xl\\:w-\\[35\\%\\] {\n                order: 1;\n            }\n            #control .xl\\:w-\\[65\\%\\] {\n                order: 2;\n            }\n            #control .ctrl-mobile-desc {\n                order: 3;\n                display: block !important;\n            }\n            #control .flex.flex-col.justify-between {\n                flex-direction: row !important;\n                gap: 0;\n            }\n            .ctrl-tab {\n                text-align: center !important;\n                padding: 0 !important;\n                padding-bottom: 0 !important;\n                border-left: none !important;\n                border-right: none !important;\n                border-top: none !important;\n                flex: 1 !important;\n                display: flex !important;\n                flex-direction: column !important;\n                align-items: center !important;\n            }\n            .ctrl-tab .pl-4, .ctrl-tab .xl\\:pl-6, .ctrl-tab > div {\n                padding-left: 0 !important;\n                padding-right: 0 !important;\n                width: 100%;\n                text-align: center;\n            }\n            .ctrl-tab h4,\n            .comp-tab span {\n                font-size: 13px !important;\n                margin-bottom: 8px;\n                transition: color 0.3s !important;\n            }\n            .ctrl-tab:hover h4 {\n                color: rgba(255,255,255,0.7) !important;\n            }\n            .ctrl-tab .ctrl-desc {\n                display: none !important;\n            }\n            .ctrl-tab::after {\n                content: '';\n                display: block;\n                width: 100%;\n                height: 2px;\n                background: rgba(255,255,255,0.15);\n                transition: background 0.4s ease;\n            }\n            .ctrl-tab.ctrl-active::after {\n                background: #00A0E9;\n            }\n            .ctrl-tab:hover::after {\n                background: rgba(255,255,255,0.35);\n            }\n            .ctrl-tab.ctrl-active:hover::after {\n                background: #00A0E9;\n            }\n        }\n\n        \/* === MOBILE & TABLET (max 1023px) === *\/\n        @media (max-width: 1279px) {\n    \n            .stat-card { padding: 20px !important; }\n    \n            #hero h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); }\n    \n            #tooling a#tooling-card { min-height: 240px !important; }\n\n            .mb-page .servo-card .servo-card-inner {\n                aspect-ratio: auto !important;\n                display: flex;\n                flex-direction: column;\n            }\n            .mb-page .servo-card .servo-card-inner > img {\n                position: relative !important;\n                inset: auto !important;\n                width: 100% !important;\n                height: auto !important;\n                aspect-ratio: 4\/3;\n                object-fit: cover !important;\n                flex-shrink: 0;\n            }\n            .mb-page .servo-card .servo-card-inner > .servo-overlay {\n                display: none !important;\n            }\n            .mb-page .servo-card .servo-card-inner > .servo-text {\n                position: relative !important;\n                inset: auto !important;\n                background: rgba(17,17,17,0.95);\n                padding: 16px 20px !important;\n            }\n        }\n\n        \/* === Auto card: top image + bottom text === *\/\n        \/* Mobile-first: most compact *\/\n        .auto-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }\n        .auto-card-img { position: relative; width: 100%; aspect-ratio: 16\/10; overflow: hidden; flex-shrink: 0; }\n        .auto-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }\n        .auto-card:hover .auto-card-img img { transform: scale(1.03); }\n        .auto-card-body { padding: 14px 16px; background: rgba(17,17,17,0.95); flex: 1; }\n        .auto-card-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }\n        .auto-card-body p { font-size: 12px; line-height: 1.55; }\n        \/* Tablet portrait (\u2265640px): moderate *\/\n        @media (min-width: 640px) {\n            .auto-card-body { padding: 16px 20px; }\n            .auto-card-body h3 { font-size: 17px; margin-bottom: 7px; }\n            .auto-card-body p { font-size: 13px; line-height: 1.6; }\n        }\n        \/* Tablet landscape (\u2265768px) *\/\n        @media (min-width: 768px) {\n            .auto-card-body { padding: 18px 22px; }\n            .auto-card-body h3 { font-size: 18px; }\n            .auto-card-body p { font-size: 13px; }\n        }\n        \/* Desktop (\u22651280px): comfortable reading *\/\n        @media (min-width: 1280px) {\n            .auto-card { border-radius: 16px; }\n            .auto-card-img { aspect-ratio: unset; height: calc(100vh - 380px); }\n            .auto-card-body { padding: 20px 24px; }\n            .auto-card-body h3 { font-size: 20px; margin-bottom: 8px; }\n            .auto-card-body p { font-size: 13.5px; line-height: 1.6; }\n        }\n\n        \/* === Safety carousel slide image: taller on mobile === *\/\n        .app-slide .auto-card-img { aspect-ratio: 4\/3; }\n        @media (min-width: 640px) {\n            .app-slide .auto-card-img { aspect-ratio: 16\/9; }\n        }\n        @media (min-width: 1280px) {\n            .app-slide .auto-card-img { aspect-ratio: 16\/9; }\n        }\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            \/* base text-3xl=1.875rem \u2192 scales to 2.75rem on large tablets *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 3: Large display numbers (stat counters) \u2500\u2500 *\/\n            \/* base text-4xl=2.25rem \u2192 scales to 3.25rem *\/\n            .mb-page .stat-card .text-4xl {\n                font-size: clamp(2.25rem, 6vw, 3.25rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4a: Card headings \u2014 servo, safety, automation \u2500\u2500 *\/\n            .mb-page .servo-text h3,\n            .mb-page .auto-card-body h3 {\n                font-size: clamp(1.0625rem, 2.5vw, 1.375rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4b: Card headings \u2014 back gauge overlay \u2500\u2500 *\/\n            .mb-page .bg-card-text h4 {\n                font-size: clamp(1rem, 2.2vw, 1.25rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4c: Stat card titles \u2500\u2500 *\/\n            .mb-page .stat-card h3 {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n            .mb-page p.text-base {\n                font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 6: Body text \u2014 secondary (card descriptions) \u2500\u2500 *\/\n            .mb-page p.text-sm,\n            .mb-page .auto-card-body p,\n            .mb-page .servo-text p {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 7: Upgrade option tab labels \u2500\u2500 *\/\n            .mb-page .comp-tab span {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- UPGRADE OPTIONS \u2014 Tab Image Switcher -->\n    <!-- ============================================ -->\n    <section id=\"components\" class=\"fp-section\" style=\"flex-direction:column; justify-content:center;\">\n    \n        <div class=\"comp-slide absolute inset-0 transition-opacity duration-700\" data-comp=\"0\" style=\"opacity:1; z-index:1;\">\n            <div class=\"fp-bg\" data-parallax><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/bj2.png\" alt=\"background photo\"><\/div>\n            <div class=\"fp-overlay bg-gradient-to-t from-black\/70 via-black\/20 to-black\/60\"><\/div>\n        <\/div>\n        <div class=\"comp-slide absolute inset-0 transition-opacity duration-700\" data-comp=\"1\" style=\"opacity:0; z-index:0;\">\n            <div class=\"fp-bg\" data-parallax><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/bj2.png\" alt=\"background photo\"><\/div>\n            <div class=\"fp-overlay bg-gradient-to-t from-black\/70 via-black\/20 to-black\/60\"><\/div>\n        <\/div>\n        <div class=\"comp-slide absolute inset-0 transition-opacity duration-700\" data-comp=\"2\" style=\"opacity:0; z-index:0;\">\n            <div class=\"fp-bg\" data-parallax><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/bj2.png\" alt=\"background photo\"><\/div>\n            <div class=\"fp-overlay bg-gradient-to-t from-black\/70 via-black\/20 to-black\/60\"><\/div>\n        <\/div>\n    \n        <div class=\"relative z-10 w-full px-6 py-10 xl:py-16\">\n            <div class=\"max-w-[900px] w-full mx-auto\">\n    \n                <!-- Title (top) -->\n                <div class=\"text-center mb-6 xl:mb-10\">\n                    <div class=\"reveal\"><span class=\"text-brand text-xs xl:text-sm font-semibold uppercase tracking-[0.3em]\">Stable Motion<\/span><\/div>\n                    <h2 class=\"reveal font-display text-3xl xl:text-5xl xl:text-6xl font-bold text-white mt-3 xl:mt-4\">Reliable Drive<\/h2>\n                <\/div>\n    \n                <!-- Image card -->\n                <div class=\"comp-img-wrap flex items-center justify-center mb-6 xl:mb-10\" style=\"max-width:133.33%; margin-left:-16.67%; width:133.33%;\">\n                    <div class=\"relative rounded-xl overflow-hidden w-full\" style=\"aspect-ratio:16\/9; border:1px solid rgba(255,255,255,0.12);\">\n                        <div class=\"comp-img absolute inset-0 transition-all duration-700\" data-comp=\"0\" style=\"opacity:1;\">\n                            <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/j23-huakuai.png\" alt=\"Precision Slider\" class=\"w-full h-full object-cover\">\n                        <\/div>\n                        <div class=\"comp-img absolute inset-0 transition-all duration-700\" data-comp=\"1\" style=\"opacity:0;\">\n                            <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/j23-quzhou-1.png\" alt=\"Crankshaft System\" class=\"w-full h-full object-cover\">\n                        <\/div>\n                        <div class=\"comp-img absolute inset-0 transition-all duration-700\" data-comp=\"2\" style=\"opacity:0;\">\n                            <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/j23zhidongxitong-1.png\" alt=\"Braking System\" class=\"w-full h-full object-cover\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n    \n                <!-- Tabs + description (bottom) -->\n                <div>\n                <div class=\"grid grid-cols-3 gap-0 items-end\">\n                    <button class=\"comp-tab group text-center cursor-pointer\" data-comp=\"0\" style=\"padding:0;\">\n                        <span class=\"block text-xs xl:text-lg font-semibold mb-3 leading-tight\" style=\"color:#ffffff; padding:0 4px; transition:color 0.3s;\">Precision<br class=\"xl:hidden\"> Slider<\/span>\n                        <div class=\"h-[2px] w-full transition-all duration-500 bg-brand\"><\/div>\n                    <\/button>\n                    <button class=\"comp-tab group text-center cursor-pointer\" data-comp=\"1\" style=\"padding:0;\">\n                        <span class=\"block text-xs xl:text-lg font-semibold mb-3 leading-tight\" style=\"color:rgba(255,255,255,0.4); padding:0 4px; transition:color 0.3s;\">Crankshaft<br class=\"xl:hidden\"> System<\/span>\n                        <div class=\"h-[2px] w-full transition-all duration-500 bg-white\/15\"><\/div>\n                    <\/button>\n                    <button class=\"comp-tab group text-center cursor-pointer\" data-comp=\"2\" style=\"padding:0;\">\n                        <span class=\"block text-xs xl:text-lg font-semibold mb-3 leading-tight\" style=\"color:rgba(255,255,255,0.4); padding:0 4px; transition:color 0.3s;\">Braking<br class=\"xl:hidden\"> System<\/span>\n                        <div class=\"h-[2px] w-full transition-all duration-500 bg-white\/15\"><\/div>\n                    <\/button>\n                <\/div>\n                <div class=\"relative mt-5\" style=\"min-height:40px;\">\n                    <div class=\"comp-text transition-all duration-500 opacity-100\" data-comp=\"0\">\n                        <p class=\"text-gray-400 text-sm leading-relaxed text-center max-w-2xl mx-auto\">The slider ensures stable movement and reliable pressing accuracy during continuous operation.<\/p>\n                    <\/div>\n                    <div class=\"comp-text transition-all duration-500 opacity-0 absolute inset-0\" data-comp=\"1\">\n                        <p class=\"text-gray-400 text-sm leading-relaxed text-center max-w-2xl mx-auto\">The crankshaft system delivers efficient power transmission and stable punching performance.<\/p>\n                    <\/div>\n                    <div class=\"comp-text transition-all duration-500 opacity-0 absolute inset-0\" data-comp=\"2\">\n                        <p class=\"text-gray-400 text-sm leading-relaxed text-center max-w-2xl mx-auto\">The braking system provides fast stopping response for safer and more controlled operation.<\/p>\n                    <\/div>\n                <\/div>\n                <\/div><!-- \/tabs+desc -->\n    \n            <\/div><!-- \/max-w -->\n        <\/div><!-- \/relative z-10 -->\n    <\/section>\n\n\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        \/\/ Reveal on scroll (skip hero \u2014 hero uses CSS auto-animation)\n        var heroSection = document.getElementById('hero');\n        var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n        if ('IntersectionObserver' in window) {\n            var revealObs = new IntersectionObserver(function(entries) {\n                entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n            }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n            revealEls.forEach(function(el) {\n                if (heroSection && heroSection.contains(el)) {\n                    el.classList.add('active');\n                } else {\n                    revealObs.observe(el);\n                }\n            });\n        } else {\n            revealEls.forEach(function(el) { el.classList.add('active'); });\n        }\n    \n        \/\/ Counter animation\n        document.querySelectorAll('.counter-value').forEach(el => {\n            new IntersectionObserver((entries) => {\n                entries.forEach(e => {\n                    if (!e.isIntersecting || el.dataset.counted) return;\n                    el.dataset.counted = 'true';\n                    const target = parseInt(el.dataset.target);\n                    let cur = 0; const step = target \/ 60;\n                    const t = setInterval(() => {\n                        cur += step;\n                        if (cur >= target) { el.textContent = target; clearInterval(t); }\n                        else el.textContent = Math.floor(cur);\n                    }, 16);\n                });\n            }, { threshold: 0.5 }).observe(el);\n        });\n    \n        var isMobileParallax = window.innerWidth < 1280;\n        window.addEventListener('resize', function(){ isMobileParallax = window.innerWidth < 1280; });\n        window.addEventListener('scroll', () => {\n            var factor = isMobileParallax ? 0.03 : 0.08;\n            document.querySelectorAll('[data-parallax]').forEach(el => {\n                const parent = el.closest('section, [style*=\"height\"]');\n                if (!parent) return;\n                const r = parent.getBoundingClientRect();\n                const h = parent.offsetHeight;\n                const maxShift = h * (isMobileParallax ? 0.06 : 0.15);\n                const raw = r.top * factor;\n                const clamped = Math.max(-maxShift, Math.min(maxShift, raw));\n                el.style.transform = 'translateY(' + clamped + 'px)';\n            });\n        });\n        \/\/ ========== Back Gauge Tab Switcher ==========\n        (function() {\n            const tabs = document.querySelectorAll('.bg-tab');\n            const cards = document.querySelectorAll('.bg-card');\n            const texts = document.querySelectorAll('.bg-card-text');\n            let activeBg = 0;\n    \n            tabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const idx = parseInt(tab.dataset.bg);\n                    if (idx === activeBg) return;\n                    activeBg = idx;\n    \n                    cards.forEach((c, i) => { c.style.opacity = i === idx ? '1' : '0'; });\n                    texts.forEach((t, i) => { t.style.opacity = i === idx ? '1' : '0'; });\n                    tabs.forEach((tb, i) => {\n                        if (i === idx) {\n                            tb.style.background = '#fff';\n                            tb.style.color = '#111';\n                        } else {\n                            tb.style.background = 'transparent';\n                            tb.style.color = 'rgba(255,255,255,0.5)';\n                        }\n                    });\n                });\n            });\n        })();\n    \n        \/\/ ========== Control Tab Switcher ==========\n        (function() {\n            const tabs = document.querySelectorAll('.ctrl-tab');\n            const slides = document.querySelectorAll('.ctrl-slide');\n            const bgs = document.querySelectorAll('.ctrl-bg');\n            const mobileDesc = document.getElementById('ctrl-mobile-desc');\n            const descMap = {};\n            tabs.forEach(function(tb) {\n                var key = tb.dataset.ctrl;\n                var d = tb.querySelector('.ctrl-desc');\n                descMap[key] = d ? d.textContent : '';\n            });\n            let activeCtrl = '0';\n\n            tabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const key = tab.dataset.ctrl;\n                    if (key === activeCtrl) return;\n                    activeCtrl = key;\n\n                    slides.forEach(s => {\n                        if (s.dataset.ctrl === key) { s.style.opacity = '1'; s.style.transform = 'scale(1)'; }\n                        else { s.style.opacity = '0'; s.style.transform = 'scale(1.04)'; }\n                    });\n                    bgs.forEach(b => { b.style.opacity = b.dataset.ctrl === key ? '1' : '0'; });\n                    tabs.forEach(tb => {\n                        const h4 = tb.querySelector('h4');\n                        const desc = tb.querySelector('.ctrl-desc');\n                        if (tb.dataset.ctrl === key) {\n                            tb.classList.add('ctrl-active');\n                            tb.style.borderLeftColor = '#00A0E9';\n                            h4.style.color = '#ffffff';\n                            desc.style.opacity = '1';\n                            desc.style.transform = 'translateY(0)';\n                            desc.style.color = '#9ca3af';\n                        } else {\n                            tb.classList.remove('ctrl-active');\n                            tb.style.borderLeftColor = 'rgba(255,255,255,0.1)';\n                            h4.style.color = 'rgba(255,255,255,0.4)';\n                            desc.style.opacity = '0';\n                            desc.style.transform = 'translateY(6px)';\n                        }\n                    });\n                    if (mobileDesc) {\n                        mobileDesc.querySelector('p').textContent = descMap[key] || '';\n                    }\n                });\n            });\n        })();\n    \n        \/\/ ========== Premium Components Tab Switcher ==========\n        (function() {\n            const tabs = document.querySelectorAll('.comp-tab');\n            const slides = document.querySelectorAll('.comp-slide');\n            const texts = document.querySelectorAll('.comp-text');\n            const imgs = document.querySelectorAll('.comp-img');\n            let activeComp = 0;\n    \n            tabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const idx = parseInt(tab.dataset.comp);\n                    if (idx === activeComp) return;\n                    activeComp = idx;\n    \n                    slides.forEach((s, i) => {\n                        s.style.opacity = i === idx ? '1' : '0';\n                        s.style.zIndex = i === idx ? '1' : '0';\n                    });\n                    texts.forEach((t, i) => { t.style.opacity = i === idx ? '1' : '0'; });\n                    imgs.forEach((img, i) => { img.style.opacity = i === idx ? '1' : '0'; });\n                    tabs.forEach((tb, i) => {\n                        const span = tb.querySelector('span');\n                        const line = tb.querySelector('div');\n                        if (i === idx) {\n                            span.style.color = '#ffffff';\n                            line.className = line.className.replace('bg-white\/15', 'bg-brand');\n                        } else {\n                            span.style.color = 'rgba(255,255,255,0.4)';\n                            line.className = line.className.replace('bg-brand', 'bg-white\/15');\n                        }\n                    });\n                });\n            });\n        })();\n    \n        \/\/ ========== Automation Solutions Carousel ==========\n        (function() {\n            var track = document.getElementById('auto-track');\n            var cards = document.querySelectorAll('.auto-card');\n            var prevBtn = document.getElementById('auto-prev');\n            var nextBtn = document.getElementById('auto-next');\n            var counter = document.getElementById('auto-counter');\n            if (!track || cards.length === 0) return;\n            var current = 0;\n            var total = cards.length;\n    \n            function getShift() {\n                var card = cards[0];\n                return card.offsetWidth + parseFloat(getComputedStyle(card).marginRight);\n            }\n    \n            function goTo(idx) {\n                current = idx;\n                if (current >= total) current = 0;\n                if (current < 0) current = total - 1;\n                track.style.transform = 'translateX(-' + (current * getShift()) + 'px)';\n                counter.textContent = String(current + 1).padStart(2, '0') + ' \/ ' + String(total).padStart(2, '0');\n            }\n    \n            nextBtn.addEventListener('click', function() { goTo(current + 1); });\n            prevBtn.addEventListener('click', function() { goTo(current - 1); });\n    \n            var startX = 0, moveX = 0;\n            track.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; }, { passive: true });\n            track.addEventListener('touchmove', function(e) { moveX = e.touches[0].clientX - startX; }, { passive: true });\n            track.addEventListener('touchend', function() {\n                if (Math.abs(moveX) > 50) goTo(current + (moveX < 0 ? 1 : -1));\n                moveX = 0;\n            });\n        })();\n    \n        \/\/ ========== Upgrade Accessories Carousel ==========\n        (function() {\n            const track = document.getElementById('app-carousel-track');\n            if (!track) return;\n            const slides = track.querySelectorAll('.app-slide');\n            const prevBtn = document.getElementById('app-prev');\n            const nextBtn = document.getElementById('app-next');\n            const dots = document.querySelectorAll('.app-dot');\n            const counterEl = document.getElementById('app-counter');\n            const total = slides.length;\n            let cur = 0, animating = false;\n    \n            function goTo(i) {\n                if (animating) return;\n                animating = true;\n                cur = (i + total) % total;\n                track.style.transform = 'translateX(-' + (cur * 100) + '%)';\n                dots.forEach((d, j) => {\n                    if (j === cur) {\n                        d.style.background = '#00A0E9';\n                        d.style.width = '24px';\n                    } else {\n                        d.style.background = 'rgba(255,255,255,0.2)';\n                        d.style.width = '10px';\n                    }\n                });\n                counterEl.textContent = String(cur + 1).padStart(2, '0') + ' \/ ' + String(total).padStart(2, '0');\n                setTimeout(() => { animating = false; }, 700);\n            }\n            prevBtn.addEventListener('click', () => goTo(cur - 1));\n            nextBtn.addEventListener('click', () => goTo(cur + 1));\n            dots.forEach(d => d.addEventListener('click', () => goTo(parseInt(d.dataset.index))));\n    \n            let sx = 0, drag = false;\n            const c = document.getElementById('app-carousel');\n            c.addEventListener('touchstart', e => { sx = e.touches[0].clientX; drag = true; }, { passive: true });\n            c.addEventListener('touchend', e => {\n                if (!drag) return; drag = false;\n                const dx = sx - e.changedTouches[0].clientX;\n                if (Math.abs(dx) > 50) dx > 0 ? goTo(cur + 1) : goTo(cur - 1);\n            });\n        })();\n    \n        \/\/ ========== Tooling Section: Scroll-Driven Dark-to-White + Card Shrink ==========\n        (function() {\n            const section = document.getElementById('tooling');\n            if (!section) return;\n            const darkL = document.getElementById('tooling-dark');\n            const whiteL = document.getElementById('tooling-white');\n            const mainTxts = section.querySelectorAll('.tooling-txt-main');\n            const subTxts = section.querySelectorAll('.tooling-txt-sub');\n            const cardBgs = section.querySelectorAll('.tooling-card-bg');\n            const card = document.getElementById('tooling-card');\n    \n            function lerp(a, b, t) { return a + (b - a) * t; }\n    \n            function update() {\n                const rect = section.getBoundingClientRect();\n                const vh = window.innerHeight;\n    \n                \/\/ --- Background transition ---\n                const totalRange = rect.height + vh * 0.15;\n                const scrolled = vh - rect.top;\n                const raw = Math.max(0, Math.min(1, scrolled \/ totalRange));\n                const eased = raw < 0.5\n                    ? 2 * raw * raw\n                    : 1 - Math.pow(-2 * raw + 2, 2) \/ 2;\n    \n                whiteL.style.opacity = eased;\n                darkL.style.opacity = 1 - eased * 0.4;\n    \n                const c = Math.round(lerp(255, 17, eased));\n                mainTxts.forEach(el => { el.style.color = 'rgb(' + c + ',' + c + ',' + c + ')'; });\n    \n                const sc = Math.round(lerp(255, 102, eased));\n                const sa = lerp(0.5, 0.8, eased).toFixed(2);\n                subTxts.forEach(el => { el.style.color = 'rgba(' + sc + ',' + sc + ',' + sc + ',' + sa + ')'; });\n    \n                \/\/ --- Card backgrounds: dark bg \u2192 light bg ---\n                const bgR = Math.round(lerp(30, 243, eased));\n                const bgG = Math.round(lerp(30, 244, eased));\n                const bgB = Math.round(lerp(35, 246, eased));\n                const bdR = Math.round(lerp(50, 229, eased));\n                const bdG = Math.round(lerp(50, 231, eased));\n                const bdB = Math.round(lerp(55, 235, eased));\n                cardBgs.forEach(el => {\n                    el.style.background = 'rgb(' + bgR + ',' + bgG + ',' + bgB + ')';\n                    el.style.borderColor = 'rgb(' + bdR + ',' + bdG + ',' + bdB + ')';\n                });\n    \n                \/\/ --- Card shrink: oversized \u2192 normal size ---\n                if (card) {\n                    const cardShrinkRange = vh * 0.9;\n                    const cardScrolled = vh - rect.top;\n                    const cp = Math.max(0, Math.min(1, cardScrolled \/ cardShrinkRange));\n                    const ce = cp < 0.5 ? 2 * cp * cp : 1 - Math.pow(-2 * cp + 2, 2) \/ 2;\n    \n                    const s = lerp(1.55, 1, ce);\n                    const r = Math.round(lerp(0, 16, ce));\n                    card.style.transform = 'scale(' + s.toFixed(4) + ')';\n                    card.style.borderRadius = r + 'px';\n                }\n            }\n            window.addEventListener('scroll', update, { passive: true });\n            update();\n        })();\n    \n        \/\/ ========== Spec Rows Scroll Reveal (bidirectional) ==========\n        (function() {\n            const rows = document.querySelectorAll('.spec-row');\n            const header = document.querySelector('.spec-header');\n    \n            const rowObs = new IntersectionObserver((entries) => {\n                entries.forEach(e => {\n                    if (e.isIntersecting) {\n                        e.target.classList.add('visible');\n                    } else {\n                        e.target.classList.remove('visible');\n                    }\n                });\n            }, { threshold: 0.15, rootMargin: '0px 0px -30px 0px' });\n            rows.forEach((r, i) => {\n                r.style.transitionDelay = (i * 0.04) + 's';\n                rowObs.observe(r);\n            });\n    \n            if (header) {\n                header.style.opacity = '0';\n                header.style.transform = 'translateY(15px)';\n                header.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n                const hObs = new IntersectionObserver((entries) => {\n                    entries.forEach(e => {\n                        if (e.isIntersecting) {\n                            e.target.style.opacity = '1';\n                            e.target.style.transform = 'translateY(0)';\n                        } else {\n                            e.target.style.opacity = '0';\n                            e.target.style.transform = 'translateY(15px)';\n                        }\n                    });\n                }, { threshold: 0.1 });\n                hObs.observe(header);\n            }\n        })();\n\n        \/\/ ========== Spec Mobile Carousel ==========\n        (function() {\n            const carousel = document.getElementById('spec-carousel');\n            if (!carousel) return;\n\n            const headerCells = document.querySelectorAll('.spec-header-cell');\n            const specRows = document.querySelectorAll('.spec-row');\n            const numModels = headerCells.length;\n            if (numModels === 0) return;\n\n            const models = [];\n            headerCells.forEach(function(cell, i) {\n                var name = cell.querySelector('.spec-header-name').textContent;\n                var linkEl = cell.querySelector('.spec-learn-more');\n                var href = linkEl ? linkEl.getAttribute('href') : '#';\n                var specs = [];\n                specRows.forEach(function(row) {\n                    var cells = row.querySelectorAll('.spec-cell');\n                    if (cells[i]) {\n                        specs.push({\n                            value: cells[i].querySelector('.spec-cell-value').textContent,\n                            label: cells[i].querySelector('.spec-cell-label').textContent\n                        });\n                    }\n                });\n                models.push({ name: name, href: href, specs: specs });\n            });\n\n            var trackHTML = '<div class=\"spec-carousel-track\">';\n            models.forEach(function(m, i) {\n                trackHTML += '<div class=\"spec-carousel-slide\"><div class=\"spec-carousel-slide-inner\">';\n                trackHTML += '<div style=\"text-align:center;\">';\n                trackHTML += '<div class=\"spec-carousel-model\">' + m.name + '<\/div>';\n                trackHTML += '<\/div>';\n                trackHTML += '<div class=\"spec-carousel-specs\">';\n                m.specs.forEach(function(s) {\n                    trackHTML += '<div class=\"spec-carousel-item\">';\n                    trackHTML += '<div class=\"spec-carousel-item-value\">' + s.value + '<\/div>';\n                    trackHTML += '<div class=\"spec-carousel-item-label\">' + s.label + '<\/div>';\n                    trackHTML += '<\/div>';\n                });\n                trackHTML += '<\/div>';\n                trackHTML += '<div style=\"text-align:center; margin-top:16px;\">';\n                trackHTML += '<a href=\"' + m.href + '\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spec-carousel-link\">Learn More<\/a>';\n                trackHTML += '<\/div>';\n                trackHTML += '<\/div><\/div>';\n            });\n            trackHTML += '<\/div>';\n            var indicatorHTML = '<div class=\"spec-carousel-indicator\" style=\"display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;\">';\n            for (var d = 0; d < numModels; d++) {\n                var dotBg = d === 0 ? '#00A0E9' : 'rgba(0,0,0,0.15)';\n                var dotW = d === 0 ? '24px' : '8px';\n                indicatorHTML += '<span class=\"spec-dot\" data-idx=\"' + d + '\" style=\"display:inline-block;height:3px;width:' + dotW + ';border-radius:2px;background:' + dotBg + ';cursor:pointer;transition:all 0.3s;\"><\/span>';\n            }\n            indicatorHTML += '<span class=\"spec-carousel-counter\" style=\"margin-left:8px;color:#aaa;font-size:12px;font-family:ui-monospace,monospace;\">01 \/ 0' + numModels + '<\/span>';\n            indicatorHTML += '<\/div>';\n            carousel.innerHTML = trackHTML + indicatorHTML;\n\n            var track = carousel.querySelector('.spec-carousel-track');\n            var counter = carousel.querySelector('.spec-carousel-counter');\n            var specDots = carousel.querySelectorAll('.spec-dot');\n            var current = 0;\n\n            function goTo(idx) {\n                if (idx < 0) idx = 0;\n                if (idx >= numModels) idx = numModels - 1;\n                current = idx;\n                track.style.transform = 'translateX(-' + (current * 100) + '%)';\n                var c = (current + 1).toString().padStart(2, '0');\n                var t = numModels.toString().padStart(2, '0');\n                if (counter) counter.textContent = c + ' \/ ' + t;\n                specDots.forEach(function(dot, i) {\n                    dot.style.background = i === current ? '#00A0E9' : 'rgba(0,0,0,0.15)';\n                    dot.style.width = i === current ? '24px' : '8px';\n                });\n            }\n\n            specDots.forEach(function(dot) {\n                dot.addEventListener('click', function() {\n                    goTo(parseInt(this.getAttribute('data-idx')));\n                });\n            });\n\n            var startX = 0, startY = 0, moveX = 0, isDragging = false, isHorizontal = null;\n            track.addEventListener('touchstart', function(e) {\n                startX = e.touches[0].clientX;\n                startY = e.touches[0].clientY;\n                moveX = 0;\n                isDragging = true;\n                isHorizontal = null;\n                track.style.transition = 'none';\n            }, { passive: true });\n            track.addEventListener('touchmove', function(e) {\n                if (!isDragging) return;\n                var dx = e.touches[0].clientX - startX;\n                var dy = e.touches[0].clientY - startY;\n                if (isHorizontal === null) {\n                    isHorizontal = Math.abs(dx) > Math.abs(dy);\n                }\n                if (!isHorizontal) return;\n                e.preventDefault();\n                moveX = dx;\n                var pct = -current * 100 + (moveX \/ track.offsetWidth) * 100;\n                track.style.transform = 'translateX(' + pct + '%)';\n            }, { passive: false });\n            track.addEventListener('touchend', function() {\n                if (!isDragging) return;\n                isDragging = false;\n                track.style.transition = '';\n                if (isHorizontal && Math.abs(moveX) > 50) {\n                    goTo(moveX < 0 ? current + 1 : current - 1);\n                } else {\n                    goTo(current);\n                }\n            }, { passive: true });\n        })();\n    })();\n    <\/script>\n<!--J21S-03-move -->\n\n\n\n<!-- Bend Series \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n    <!-- Fonts inherited from WordPress theme typography settings -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .fp-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; z-index: 1; }\n        .fp-section .fp-bg { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n        .fp-section .fp-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }\n        .fp-section .fp-overlay { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n        .mb-page .fp-section { display: flex; }\n    \n        [data-parallax] { will-change: transform; }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .fp-section { min-height: auto !important; }\n            .fp-section .fp-bg { top: -10%; bottom: -10%; }\n            .fp-section .fp-overlay { top: -10%; bottom: -10%; }\n        }\n\n\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n            .mb-page p.text-base {\n                font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 6: Body text \u2014 secondary \u2500\u2500 *\/\n            .mb-page p.text-sm {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION: Reinforced Frame \u2014 Text + Image -->\n    <!-- ============================================ -->\n    <section id=\"safety\" class=\"fp-section\">\n        <div class=\"fp-bg\" data-parallax>\n            <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/bj7.png\" alt=\"background image\">\n        <\/div>\n        <div class=\"fp-overlay bg-gradient-to-t from-[#050505] via-transparent to-[#050505]\/50\"><\/div>\n\n        <div class=\"relative z-10 w-full py-12 sm:py-16 xl:py-32\">\n            <div class=\"max-w-[1400px] mx-auto px-6 xl:px-10\">\n                <div class=\"text-center mb-6 sm:mb-8 xl:mb-12\">\n                    <div class=\"reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Stable Drive<\/span><\/div>\n                    <h2 class=\"reveal font-display text-3xl xl:text-5xl xl:text-6xl font-bold text-white mt-4 mb-4 xl:mb-6\">Power Transfer<\/h2>\n                    <p class=\"reveal text-gray-400 text-base xl:text-lg max-w-2xl mx-auto font-light\">The optimized transmission system ensures smooth power delivery and stable operation, supporting consistent punching performance in deep throat applications.<\/p>\n                <\/div>\n\n                <div class=\"reveal w-[90%] sm:w-[80%] md:w-[70%] xl:w-[1080px] mx-auto\">\n                    <div class=\"rounded-xl xl:rounded-2xl overflow-hidden\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j21schuandong-2-2.png\" alt=\"Power Transfer\" class=\"w-full block object-cover\" style=\"aspect-ratio:16\/9;\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n        if ('IntersectionObserver' in window) {\n            var revealObs = new IntersectionObserver(function(entries) {\n                entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n            }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n            revealEls.forEach(function(el) { revealObs.observe(el); });\n        } else {\n            revealEls.forEach(function(el) { el.classList.add('active'); });\n        }\n\n        var isMobileParallax = window.innerWidth < 1280;\n        window.addEventListener('resize', function(){ isMobileParallax = window.innerWidth < 1280; });\n        window.addEventListener('scroll', () => {\n            var factor = isMobileParallax ? 0.03 : 0.08;\n            document.querySelectorAll('[data-parallax]').forEach(el => {\n                const parent = el.closest('section, [style*=\"height\"]');\n                if (!parent) return;\n                const r = parent.getBoundingClientRect();\n                const h = parent.offsetHeight;\n                const maxShift = h * (isMobileParallax ? 0.06 : 0.15);\n                const raw = r.top * factor;\n                const clamped = Math.max(-maxShift, Math.min(maxShift, raw));\n                el.style.transform = 'translateY(' + clamped + 'px)';\n            });\n        });\n    })();\n    <\/script>\n<!--J21S-04-frame -->\n\n\n\n<!-- Bend Series \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n    <!-- Fonts inherited from WordPress theme typography settings -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-5 { gap: 1.25rem; }\n            .xl\\:gap-8 { gap: 2rem; }\n            .xl\\:gap-10 { gap: 2.5rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .fp-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; z-index: 1; }\n        .fp-section .fp-bg { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n        .fp-section .fp-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }\n        .fp-section .fp-overlay { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n        .mb-page .fp-section { display: flex; }\n    \n        [data-parallax] { will-change: transform; }\n        .counter-value { font-variant-numeric: tabular-nums; }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n        .stat-card {\n            position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);\n            backdrop-filter: blur(20px); transition: all 0.5s ease;\n        }\n        .stat-card::before {\n            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;\n            background: linear-gradient(135deg, rgba(0,160,233,0.3), transparent 60%);\n            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s;\n        }\n        .stat-card:hover::before { opacity: 1; }\n        .stat-card:hover { background: rgba(0,160,233,0.05); transform: translateY(-4px); }\n    \n        .text-shimmer {\n            background: linear-gradient(90deg, #fff 0%, #00A0E9 50%, #fff 100%); background-size: 200% 100%;\n            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n            animation: shimmer 3s ease-in-out infinite;\n        }\n        @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }\n    \n        .icon-ring { width: 56px; height: 56px; border: 2px solid rgba(0,160,233,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s; }\n        @media (min-width: 1280px) { .icon-ring { width: 72px; height: 72px; } }\n        .icon-ring:hover { border-color: #00A0E9; background: rgba(0,160,233,0.1); }\n\n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .fp-section { min-height: auto !important; }\n            .fp-section .fp-bg { top: -10%; bottom: -10%; }\n            .fp-section .fp-overlay { top: -10%; bottom: -10%; }\n            .stat-card { padding: 20px !important; }\n        }\n\n\n        \/* === Gallery caption hover (desktop only) === *\/\n        \/* Mobile\/tablet: bottom bar always visible *\/\n        .gallery-square .gallery-caption {\n            top: auto;\n        }\n        @media (min-width: 1280px) {\n            .gallery-square .gallery-caption {\n                top: 0;\n                opacity: 0;\n                transition: opacity 0.4s ease, transform 0.4s ease;\n                transform: translateY(8px);\n                display: flex;\n                align-items: flex-end;\n            }\n            .gallery-square:hover .gallery-caption {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        \/* === Gallery: 2 auto images (left) + 1 wide image (right) \u2014 reversed === *\/\n        .gallery-grid-rev {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 1.25rem;\n        }\n        .gallery-grid-rev .gallery-tall {\n            aspect-ratio: 16\/9;\n        }\n        .gallery-grid-rev .gallery-square {\n            aspect-ratio: 16\/9;\n        }\n        @media (min-width: 1280px) {\n            .gallery-grid-rev {\n                grid-template-columns: 40fr 60fr;\n                grid-template-rows: 1fr 1fr;\n                gap: 1.5rem;\n            }\n            .gallery-grid-rev .gallery-tall {\n                grid-column: 2;\n                grid-row: 1 \/ 3;\n                aspect-ratio: 4\/3;\n            }\n            .gallery-grid-rev .gallery-square {\n                aspect-ratio: unset;\n            }\n            .gallery-grid-rev > :nth-child(2) {\n                grid-column: 1;\n                grid-row: 1;\n            }\n            .gallery-grid-rev > :nth-child(3) {\n                grid-column: 1;\n                grid-row: 2;\n            }\n        }\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4c: Stat card titles \u2500\u2500 *\/\n            .mb-page .stat-card h3 {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n            .mb-page p.text-base {\n                font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 6: Body text \u2014 secondary \u2500\u2500 *\/\n            .mb-page p.text-sm {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- long -->\n    <!-- ============================================ -->\n    <section id=\"performance\" class=\"fp-section\">\n        <div class=\"fp-bg\" data-parallax>\n            <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/bj1.png\" alt=\"background image\">\n        <\/div>\n        <div class=\"fp-overlay bg-black\/0\"><\/div>\n        <div class=\"fp-overlay bg-gradient-to-b from-[#050505]\/80 via-transparent to-[#050505]\/90\"><\/div>\n    \n        <div class=\"relative z-10 w-full py-12 sm:py-16 xl:py-32\">\n            <div class=\"max-w-[1400px] mx-auto px-6 xl:px-10\">\n                <div class=\"text-center mb-6 sm:mb-8 xl:mb-16\">\n                    <div class=\"reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Dual Safety<\/span><\/div>\n                    <h2 class=\"reveal font-display text-3xl xl:text-5xl xl:text-6xl font-bold text-white mt-4 mb-6\">\n                        Safe<span class=\"text-shimmer\"> Control<\/span>\n                    <\/h2>\n                    <p class=\"reveal text-gray-400 text-lg max-w-2xl mx-auto font-light\">The control panel is designed with dual-button operation to enhance operator safety, reduce accidental activation, and ensure more reliable pressing control.<\/p>\n                <\/div>\n\n                <div class=\"gallery-grid-rev\">\n                    <!-- RIGHT: Tall rectangular image (on mobile appears first) \u2014 replace src below -->\n                    <div class=\"gallery-tall rounded-2xl overflow-hidden reveal-right\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j21sxitong1-1.png\" alt=\"Control Panel Section\" class=\"w-full h-full object-cover\">\n                    <\/div>\n                    <!-- LEFT TOP: image with caption \u2014 replace src & text below -->\n                    <div class=\"gallery-square rounded-2xl overflow-hidden reveal-left relative\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j21sxitong2-1.png\" alt=\"Detail Image 1\" class=\"w-full h-full object-cover\">\n                        <div class=\"gallery-caption absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/70 via-black\/30 to-transparent px-5 py-4\">\n                            <p class=\"text-white text-sm font-semibold m-0\">Immediate stop helps reduce operational risks<\/p>\n                        <\/div>\n                    <\/div>\n                    <!-- LEFT BOTTOM: image with caption \u2014 replace src & text below -->\n                    <div class=\"gallery-square rounded-2xl overflow-hidden reveal-left relative\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j21sxitong3-1.png\" alt=\"Detail Image 2\" class=\"w-full h-full object-cover\">\n                        <div class=\"gallery-caption absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/70 via-black\/30 to-transparent px-5 py-4\">\n                            <p class=\"text-white text-sm font-semibold m-0\">Two-hand operation greatly enhances operator protection<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n   \n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n        if ('IntersectionObserver' in window) {\n            var revealObs = new IntersectionObserver(function(entries) {\n                entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n            }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n            revealEls.forEach(function(el) { revealObs.observe(el); });\n        } else {\n            revealEls.forEach(function(el) { el.classList.add('active'); });\n        }\n    \n        var isMobileParallax = window.innerWidth < 1280;\n        window.addEventListener('resize', function(){ isMobileParallax = window.innerWidth < 1280; });\n        window.addEventListener('scroll', () => {\n            var factor = isMobileParallax ? 0.03 : 0.08;\n            document.querySelectorAll('[data-parallax]').forEach(el => {\n                const parent = el.closest('section, [style*=\"height\"]');\n                if (!parent) return;\n                const r = parent.getBoundingClientRect();\n                const h = parent.offsetHeight;\n                const maxShift = h * (isMobileParallax ? 0.06 : 0.15);\n                const raw = r.top * factor;\n                const clamped = Math.max(-maxShift, Math.min(maxShift, raw));\n                el.style.transform = 'translateY(' + clamped + 'px)';\n            });\n        });\n           \n    })();\n    <\/script>\n<!--J21S-05-control -->\n\n\n\n\n<div style=\"font-size:0;line-height:0;margin:0;padding:0;border:none;background:#000;\"><!-- Industries We Serve \u2014 WordPress Embeddable Content Block -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n        .mb-page {\n            font-family: inherit; font-size: 16px; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page .industry-card img,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page a { color: inherit; text-decoration: none; }\n\n        .mb-page section { display: block; position: relative; z-index: 1; }\n\n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n\n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .tooling-card-bg { border: 1px solid rgba(255,255,255,0.08); }\n        }\n        \/* === MOBILE: extra-compact spacing === *\/\n        @media (max-width: 767px) {\n            .tooling-content-wrap { padding: 40px 0 32px !important; }\n        }\n        \/* === TABLET: moderate spacing === *\/\n        @media (min-width: 768px) and (max-width: 1279px) {\n            .tooling-content-wrap { padding: 56px 0 44px !important; }\n        }\n\n        \/* === DESKTOP tooling padding === *\/\n        @media (min-width: 1280px) {\n            #tooling > .relative { padding-top: 180px !important; padding-bottom: 160px !important; }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Kill wpautop empty <p> and <br> gaps near mb-page *\/\n        .entry-content > p:empty,\n        .entry-content > p > br:only-child,\n        .entry-content > br,\n        .page-content > p:empty,\n        .page-content > br {\n            display: none !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            line-height: 0 !important;\n            font-size: 0 !important;\n            height: 0 !important;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n        \/* ============================================ *\/\n        \/* Industry Cards                               *\/\n        \/* ============================================ *\/\n        .industry-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 0.875rem;\n        }\n        @media (min-width: 640px) {\n            .industry-grid { gap: 1rem; }\n        }\n        @media (min-width: 1280px) {\n            .industry-grid {\n                grid-template-columns: repeat(4, 1fr);\n                gap: 1.125rem;\n            }\n        }\n\n        .industry-card {\n            display: block;\n            position: relative;\n            overflow: hidden;\n            border-radius: 12px;\n            aspect-ratio: 4\/3;\n            text-decoration: none;\n            cursor: pointer;\n        }\n        @media (min-width: 1280px) {\n            .industry-card { border-radius: 14px; aspect-ratio: 3\/2; }\n\n            \/* \u5de6\u5217\u7ad6\u5411\u5361\uff1a\u56fa\u5b9a\u5728\u7b2c1\u5217\uff0c\u8de82\u884c\uff0c\u9ad8\u5ea6\u7531\u666e\u901a\u5361\u884c\u9ad8\u00d72+gap\u6491\u5f00 *\/\n            \/* aspect-ratio: unset + min-height:0 \u786e\u4fdd\u4e0d\u81ea\u5df1\u6491\u884c\u9ad8\uff0c\u9760stretch\u586b\u6ee1 *\/\n            .industry-card-tall {\n                grid-column: 1;\n                grid-row: 1 \/ span 2;\n                aspect-ratio: unset;\n                min-height: 0;\n                align-self: stretch;\n            }\n\n            \/* \u7b2c\u4e00\u884c\u53f3\u4fa7\u6a2a\u5411\u5bbd\u5361\uff1a\u56fa\u5b9a\u5728\u7b2c3\u5217\u8d77\uff0c\u8de82\u5217\uff0c\u9ad8\u5ea6\u4e0e\u540c\u884c\u666e\u901a\u5361\u4e00\u81f4 *\/\n            .industry-card-wide {\n                grid-column: 3 \/ span 2;\n                grid-row: 1;\n                \/* \u7ee7\u627f aspect-ratio: 3\/2\uff0c\u5bbd\u5ea6\u53d8\u4e3a2\u5217\u5bbd+gap\uff0c\u9ad8\u5ea6\u8ddf\u968f\u540c\u884c *\/\n                aspect-ratio: unset;\n                align-self: stretch;\n            }\n\n            \/* grid\u884c\u9ad8\u5b8c\u5168\u7531\u666e\u901a\u5361\uff08Aerospace\u3001Energy\u3001Agricultural\u3001HVAC\uff09\u7684\n               aspect-ratio: 3\/2 \u51b3\u5b9a\uff1b\u7ad6\u5361\u548c\u5bbd\u5361\u5747\u7528 align-self:stretch \u586b\u6ee1\u5206\u914d\u5230\u7684\u7a7a\u95f4 *\/\n            .industry-grid {\n                align-items: stretch;\n            }\n        }\n\n\n\n        .industry-card img {\n            position: absolute;\n            inset: 0;\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            will-change: transform;\n        }\n        .industry-card:hover img {\n            transform: scale(1.07);\n        }\n\n        \/* Default overlay \u2014 subtle gradient always visible *\/\n        .industry-card-overlay {\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.08) 60%, transparent 100%);\n            transition: opacity 0.4s ease;\n        }\n        .industry-card:hover .industry-card-overlay {\n            opacity: 0;\n        }\n\n        \/* Hover cover \u2014 brand blue *\/\n        .industry-card-hover {\n            position: absolute;\n            inset: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 1rem;\n            background: rgba(0, 140, 210, 0.82);\n            backdrop-filter: blur(3px);\n            -webkit-backdrop-filter: blur(3px);\n            opacity: 0;\n            transition: opacity 0.4s ease;\n        }\n        .industry-card:hover .industry-card-hover {\n            opacity: 1;\n        }\n\n        .industry-card-name {\n            color: #fff;\n            font-weight: 700;\n            font-size: 1rem;\n            text-align: center;\n            line-height: 1.25;\n            letter-spacing: 0.01em;\n        }\n        @media (min-width: 640px) {\n            .industry-card-name { font-size: 1.0625rem; }\n        }\n        @media (min-width: 1280px) {\n            .industry-card-name { font-size: 1.125rem; }\n        }\n\n        .industry-card-cta {\n            margin-top: 8px;\n            color: rgba(255,255,255,0.88);\n            font-size: 0.75rem;\n            font-weight: 500;\n            letter-spacing: 0.04em;\n            display: flex;\n            align-items: center;\n            gap: 4px;\n        }\n        .industry-card-cta::after {\n            content: '\u2192';\n            transition: transform 0.3s ease;\n        }\n        .industry-card:hover .industry-card-cta::after {\n            transform: translateX(3px);\n        }\n\n        \/* Default bottom label (always visible, hidden on hover) *\/\n        .industry-card-label {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            padding: 10px 12px 12px;\n            transition: opacity 0.3s ease;\n        }\n        @media (min-width: 1280px) {\n            .industry-card-label { padding: 12px 14px 14px; }\n        }\n        .industry-card:hover .industry-card-label {\n            opacity: 0;\n        }\n\n        .industry-card-label-text {\n            color: #fff;\n            font-size: 0.8125rem;\n            font-weight: 600;\n            letter-spacing: 0.02em;\n            text-shadow: 0 1px 4px rgba(0,0,0,0.6);\n        }\n        @media (min-width: 1280px) {\n            .industry-card-label-text { font-size: 0.875rem; }\n        }\n\n    <\/style><div class=\"mb-page\" style=\"display:flex; flex-direction:column; background:#000;\"><section id=\"tooling\" style=\"position:relative; z-index:1; overflow:hidden;\">\n        <div id=\"tooling-dark\" style=\"position:absolute;inset:0;background:#000;z-index:0;\"><\/div>\n        <div id=\"tooling-white\" style=\"position:absolute;inset:0;background:#fff;opacity:0;z-index:1;\"><\/div>\n\n        <div class=\"relative tooling-content-wrap\" style=\"z-index:2; padding:80px 0 60px;\">\n            <div class=\"max-w-[1400px] mx-auto px-6 xl:px-10\">\n\n                <!-- Section Title -->\n                <div class=\"reveal mb-6 sm:mb-8 xl:mb-12\">\n                    <span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Industries We Serve<\/span>\n                    <h2 class=\"font-display text-4xl xl:text-5xl font-bold mt-4 leading-[1.1] tooling-txt-main\" style=\"color:#fff;\">Powering Metal Fabrication<br>Across Every Sector<\/h2>\n                    <p class=\"text-lg leading-relaxed mt-4 max-w-lg tooling-txt-sub\" style=\"color:rgba(255,255,255,0.5);\">HARSLE serve a wide range of industries, delivering the precision, efficiency, and reliability needed for diverse metalworking applications.<\/p>\n                <\/div>\n\n                <!-- Industry Cards Grid -->\n                <!-- NOTE: Replace each img src with your actual industry photo before going live -->\n                <!--\n                  Desktop layout (4 cols \u00d7 2 rows):\n                  col1            col2        col3+4 (wide)\n                  [Automotive     ][Aerospace ][Construction+Electronics (wide)]\n                  [  (tall\/col1)  ][Energy    ][Agricultural  ][HVAC           ]\n                  Mobile\/Tablet: uniform 2-col grid, tall\/wide classes have no effect\n                -->\n                <div class=\"reveal industry-grid tooling-card-bg\" style=\"background:transparent;border:none;padding:0;\">\n\n                    <!-- 1. Automotive \u2014 tall: spans 2 rows on desktop (col1) -->\n                    <a href=\"https:\/\/www.harsle.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"industry-card industry-card-tall\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2024\/11\/product-1523456-415.jpg\" alt=\"Automotive industry applications\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Automotive<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Automotive<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 2. Aerospace \u2014 normal card (col2 row1) -->\n                    <a href=\"https:\/\/www.harsle.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"industry-card\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2024\/11\/product-1523456-1.jpg\" alt=\"Aerospace industry press brake applications\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Aerospace<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Aerospace<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 3. Construction & Electronics \u2014 wide: spans 2 cols on desktop (col3+4 row1) -->\n                    <a href=\"https:\/\/www.harsle.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"industry-card industry-card-wide\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2024\/11\/product-1523456-4856.jpg\" alt=\"Construction and electronics press brake applications\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Construction &amp; Electronics<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Construction &amp; Electronics<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 4. Energy & Power \u2014 normal card (col2 row2) -->\n                    <a href=\"https:\/\/www.harsle.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"industry-card\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2025\/08\/Wind-Energy-\u2013-Precision-Forming-for-Blades-and-Housings.jpg\" alt=\"Energy and power press brake applications\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Energy &amp; Power<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Energy &amp; Power<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 5. Machinery \u2014 normal card (col3 row2) -->\n                    <a href=\"https:\/\/www.harsle.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"industry-card\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2024\/11\/product-1523456-\u62f7\u8d1d.jpg\" alt=\"Machinery applications\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Wide Range Machinery<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Wide Range Machinery<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 6. HVAC & Ventilation \u2014 normal card (col4 row2) -->\n                    <a href=\"https:\/\/www.harsle.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"industry-card\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/03\/Air-conditioner-ventilation-installation-system-in-Building.jpg\" alt=\"HVAC ventilation press brake applications\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">HVAC &amp; Ventilation<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">HVAC &amp; Ventilation<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section><div id=\"video-modal\" style=\"display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);align-items:center;justify-content:center;\" onclick=\"closeVideoModal()\"><div style=\"position:relative;width:92vw;max-width:1100px;aspect-ratio:16\/9;\" onclick=\"event.stopPropagation()\"><iframe id=\"video-modal-iframe\" src=\"\" style=\"width:100%;height:100%;border:none;border-radius:8px;\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><button onclick=\"closeVideoModal()\" style=\"position:absolute;top:-36px;right:0;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px;opacity:0.7;transition:opacity 0.2s;\" onmouseover=\"this.style.opacity='1'\" onmouseout=\"this.style.opacity='0.7'\"><i class=\"fas fa-times\"><\/i><\/button><\/div><\/div><div id=\"quote-modal\" style=\"display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;\" onclick=\"closeQuoteModal()\"><div style=\"position:relative;width:92vw;max-width:720px;max-height:90vh;background:#fff;border-radius:12px;overflow:hidden;\" onclick=\"event.stopPropagation()\"><button onclick=\"closeQuoteModal()\" style=\"position:absolute;top:12px;right:12px;z-index:10;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.06);border:none;border-radius:50%;color:#333;font-size:16px;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(0,0,0,0.12)'\" onmouseout=\"this.style.background='rgba(0,0,0,0.06)'\"><i class=\"fas fa-times\"><\/i><\/button><div style=\"overflow-y:auto;max-height:90vh;padding:0;\">\t\t<div data-elementor-type=\"container\" data-elementor-id=\"80748\" class=\"elementor elementor-80748\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-aa8062a e-flex e-con-boxed e-con e-parent\" data-id=\"aa8062a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27de7ea wd-width-100 elementor-widget elementor-widget-wd_title\" data-id=\"27de7ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"wd_title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"title-wrapper wd-set-mb reset-last-child wd-title-color-default wd-title-style-default wd-title-size-default text-left\">\n\n\t\t\t\n\t\t\t<div class=\"liner-continer\">\n\t\t\t\t<h4 class=\"woodmart-title-container title wd-fontsize-l\">Request a Quote<\/h4> \n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"title-after_title reset-last-child wd-fontsize-xs\">\n\t\t\t\t\t<p>Fill in the details below and we'll get back to you within 24 hours<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e19d02c elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"e19d02c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;,&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"80748\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"e19d02c\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Industrial Deep Drawing Press Equipment | HARSLE\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"74763\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tNAME\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Your Name\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-Company elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-Company\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tCOMPANY\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[Company]\" id=\"form-field-Company\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Company Name\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tEMAIL\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"you@company.com\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-WhatsApp elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-WhatsApp\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tWHATSAPP\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[WhatsApp]\" id=\"form-field-WhatsApp\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"WhatsApp Number\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tMESSAGE\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-md\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"5\" placeholder=\"Tell us about your requirements...\" required=\"required\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">SUBMIT INQUIRY<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div><\/div><\/div><\/div><script>\n(function() {\n    \/\/ Reveal on scroll\n    var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n    if ('IntersectionObserver' in window) {\n        var revealObs = new IntersectionObserver(function(entries) {\n            entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n        }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n        revealEls.forEach(function(el) { revealObs.observe(el); });\n    } else {\n        revealEls.forEach(function(el) { el.classList.add('active'); });\n    }\n\n    \/\/ ========== Tooling Section: Scroll-Driven Dark-to-White ==========\n    (function() {\n        const section = document.getElementById('tooling');\n        if (!section) return;\n        const darkL = document.getElementById('tooling-dark');\n        const whiteL = document.getElementById('tooling-white');\n        const wrappers = [];\n        var _p = section.parentElement;\n        while (_p && _p !== document.body) { wrappers.push(_p); _p = _p.parentElement; }\n        const mainTxts = section.querySelectorAll('.tooling-txt-main');\n        const subTxts = section.querySelectorAll('.tooling-txt-sub');\n\n        function lerp(a, b, t) { return a + (b - a) * t; }\n\n        function update() {\n            const rect = section.getBoundingClientRect();\n            const vh = window.innerHeight;\n\n            \/\/ --- Background transition ---\n            const totalRange = rect.height + vh * 0.15;\n            const scrolled = vh - rect.top;\n            const raw = Math.max(0, Math.min(1, scrolled \/ totalRange));\n            const eased = raw < 0.5\n                ? 2 * raw * raw\n                : 1 - Math.pow(-2 * raw + 2, 2) \/ 2;\n\n            whiteL.style.opacity = eased;\n            darkL.style.opacity = 1 - eased * 0.4;\n\n            var bgVal = Math.round(lerp(0, 255, eased));\n            var bgColor = 'rgb(' + bgVal + ',' + bgVal + ',' + bgVal + ')';\n            wrappers.forEach(function(w) { w.style.backgroundColor = bgColor; });\n\n            const c = Math.round(lerp(255, 17, eased));\n            mainTxts.forEach(el => { el.style.color = 'rgb(' + c + ',' + c + ',' + c + ')'; });\n\n            const sc = Math.round(lerp(255, 102, eased));\n            const sa = lerp(0.5, 0.8, eased).toFixed(2);\n            subTxts.forEach(el => { el.style.color = 'rgba(' + sc + ',' + sc + ',' + sc + ',' + sa + ')'; });\n        }\n        window.addEventListener('scroll', update, { passive: true });\n        update();\n    })();\n})();\n<\/script>\n\n\n\n<script>\n(function(){\n    var pages = document.querySelectorAll('.mb-page');\n    if (!pages.length) return;\n    pages.forEach(function(el) {\n        \/\/ 1. Remove empty <p>, <br>, whitespace-only text nodes adjacent to .mb-page\n        var sibling = el.previousSibling;\n        while (sibling) {\n            var prev = sibling.previousSibling;\n            if (sibling.nodeType === 3 && !sibling.textContent.trim()) {\n                sibling.parentNode.removeChild(sibling);\n            } else if (sibling.nodeType === 1) {\n                var tag = sibling.tagName.toLowerCase();\n                if ((tag === 'p' && !sibling.textContent.trim()) || tag === 'br') {\n                    sibling.parentNode.removeChild(sibling);\n                }\n            }\n            sibling = prev;\n        }\n        sibling = el.nextSibling;\n        while (sibling) {\n            var next = sibling.nextSibling;\n            if (sibling.nodeType === 3 && !sibling.textContent.trim()) {\n                sibling.parentNode.removeChild(sibling);\n            } else if (sibling.nodeType === 1) {\n                var tag = sibling.tagName.toLowerCase();\n                if ((tag === 'p' && !sibling.textContent.trim()) || tag === 'br') {\n                    sibling.parentNode.removeChild(sibling);\n                }\n            }\n            sibling = next;\n        }\n        \/\/ 2. Zero out padding\/margin on ALL ancestors up to body\n        var p = el.parentElement;\n        while (p && p !== document.body && p !== document.documentElement) {\n            p.style.paddingTop = '0';\n            p.style.paddingBottom = '0';\n            p.style.marginTop = '0';\n            p.style.marginBottom = '0';\n            p.style.gap = '0';\n            p = p.parentElement;\n        }\n    });\n})();\n<\/script><\/div>\n<!-- \u9002\u7528\u884c\u4e1a -->\n\n\n\n\n\n<!-- Bend Series \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n    <!-- Fonts inherited from WordPress theme typography settings -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: '#00A0E9',\n                        'brand-dark': '#0080BA',\n                        dark: { 50:'#1a1a1a', 100:'#141414', 200:'#0f0f0f', 300:'#0a0a0a', 400:'#050505' },\n                    },\n                    fontFamily: {\n                        sans: ['inherit'],\n                        display: ['inherit'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* =============================================\n           Tailwind CDN Fallback \u2014 Pure CSS\n           Ensures correct rendering when cdn.tailwindcss.com\n           is blocked (incognito \/ ad-blockers \/ CSP).\n           ============================================= *\/\n\n        \/* -- Display & Layout -- *\/\n        .hidden { display: none; }\n        .block { display: block; }\n        .inline-block { display: inline-block; }\n        .inline-flex { display: inline-flex; }\n        .flex { display: flex; }\n        .grid { display: grid; }\n        .flex-col { flex-direction: column; }\n        .flex-row { flex-direction: row; }\n        .flex-wrap { flex-wrap: wrap; }\n        .flex-shrink-0 { flex-shrink: 0; }\n        .flex-1 { flex: 1 1 0%; }\n        .items-center { align-items: center; }\n        .items-start { align-items: start; }\n        .items-end { align-items: end; }\n        .items-stretch { align-items: stretch; }\n        .justify-center { justify-content: center; }\n        .justify-between { justify-content: space-between; }\n        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .gap-0 { gap: 0; }\n        .gap-3 { gap: 0.75rem; }\n        .gap-4 { gap: 1rem; }\n        .gap-6 { gap: 1.5rem; }\n        .gap-8 { gap: 2rem; }\n        .gap-5 { gap: 1.25rem; }\n        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }\n        .group { \/* marker *\/ }\n\n        \/* -- Position -- *\/\n        .relative { position: relative; }\n        .absolute { position: absolute; }\n        .fixed { position: fixed; }\n        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }\n        .top-0 { top: 0; }\n        .bottom-0 { bottom: 0; }\n        .left-0 { left: 0; }\n        .right-0 { right: 0; }\n        .left-2 { left: 0.5rem; }\n        .right-2 { right: 0.5rem; }\n        .top-1\\\/2 { top: 50%; }\n        .-translate-y-1\\\/2 { transform: translateY(-50%); }\n        .z-10 { z-index: 10; }\n        .z-20 { z-index: 20; }\n\n        \/* -- Sizing -- *\/\n        .w-full { width: 100%; }\n        .w-fit { width: fit-content; }\n        .w-9 { width: 2.25rem; }\n        .w-10 { width: 2.5rem; }\n        .h-full { height: 100%; }\n        .h-9 { height: 2.25rem; }\n        .h-10 { height: 2.5rem; }\n        .h-\\[2px\\] { height: 2px; }\n        .w-\\[72vw\\] { width: 72vw; }\n        .w-\\[85\\%\\] { width: 85%; }\n        .w-\\[90\\%\\] { width: 90%; }\n        .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; }\n        .max-w-xl { max-width: 36rem; }\n        .max-w-2xl { max-width: 42rem; }\n        .max-w-md { max-width: 28rem; }\n        .max-w-\\[70\\%\\] { max-width: 70%; }\n        .max-w-\\[800px\\] { max-width: 800px; }\n        .max-w-\\[900px\\] { max-width: 900px; }\n        .max-w-\\[1200px\\] { max-width: 1200px; }\n        .max-w-\\[1400px\\] { max-width: 1400px; }\n\n        \/* -- Spacing -- *\/\n        .p-1 { padding: 0.25rem; }\n        .p-5 { padding: 1.25rem; }\n        .p-6 { padding: 1.5rem; }\n        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }\n        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }\n        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }\n        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }\n        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }\n        .pt-6 { padding-top: 1.5rem; }\n        .pb-0 { padding-bottom: 0; }\n        .pl-4 { padding-left: 1rem; }\n        .m-0 { margin: 0; }\n        .mx-auto { margin-left: auto; margin-right: auto; }\n        .mb-0 { margin-bottom: 0; }\n        .mb-1 { margin-bottom: 0.25rem; }\n        .mb-2 { margin-bottom: 0.5rem; }\n        .mb-3 { margin-bottom: 0.75rem; }\n        .mb-4 { margin-bottom: 1rem; }\n        .mb-5 { margin-bottom: 1.25rem; }\n        .mb-6 { margin-bottom: 1.5rem; }\n        .mb-8 { margin-bottom: 2rem; }\n        .mb-10 { margin-bottom: 2.5rem; }\n        .mt-1 { margin-top: 0.25rem; }\n        .mt-3 { margin-top: 0.75rem; }\n        .mt-4 { margin-top: 1rem; }\n        .mt-5 { margin-top: 1.25rem; }\n        .mt-8 { margin-top: 2rem; }\n        .ml-1 { margin-left: 0.25rem; }\n        .ml-3 { margin-left: 0.75rem; }\n        .ml-4 { margin-left: 1rem; }\n        .mr-3 { margin-right: 0.75rem; }\n        .mr-5 { margin-right: 1.25rem; }\n\n        \/* -- Typography -- *\/\n        .text-xs { font-size: 0.75rem; line-height: 1rem; }\n        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n        .text-base { font-size: 1rem; line-height: 1.5rem; }\n        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n        .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n        .text-5xl { font-size: 3rem; line-height: 1; }\n        .text-6xl { font-size: 3.75rem; line-height: 1; }\n        .text-7xl { font-size: 4.5rem; line-height: 1; }\n        .text-\\[10px\\] { font-size: 10px; }\n        .font-bold { font-weight: 700; }\n        .font-semibold { font-weight: 600; }\n        .font-light { font-weight: 300; }\n        .font-display { font-family: inherit; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }\n        .leading-tight { line-height: 1.25; }\n        .leading-relaxed { line-height: 1.625; }\n        .leading-\\[0\\.95\\] { line-height: 0.95; }\n        .leading-\\[1\\.1\\] { line-height: 1.1; }\n        .tracking-tight { letter-spacing: -0.025em; }\n        .tracking-wide { letter-spacing: 0.025em; }\n        .tracking-widest { letter-spacing: 0.1em; }\n        .tracking-\\[0\\.3em\\] { letter-spacing: 0.3em; }\n        .tracking-\\[0\\.25em\\] { letter-spacing: 0.25em; }\n        .uppercase { text-transform: uppercase; }\n        .text-center { text-align: center; }\n        .text-left { text-align: left; }\n        .text-right { text-align: right; }\n\n        \/* -- Colors -- *\/\n        .text-brand { color: #00A0E9; }\n        .text-white { color: #fff; }\n        .text-gray-300 { color: #d1d5db; }\n        .text-gray-300\\\/80 { color: rgba(209,213,219,0.8); }\n        .text-gray-300\\\/90 { color: rgba(209,213,219,0.9); }\n        .text-gray-400 { color: #9ca3af; }\n        .text-gray-500 { color: #6b7280; }\n        .bg-brand { background-color: #00A0E9; }\n        .bg-black\\\/40 { background-color: rgba(0,0,0,0.4); }\n        .bg-black\\\/50 { background-color: rgba(0,0,0,0.5); }\n        .bg-black\\\/65 { background-color: rgba(0,0,0,0.65); }\n        .bg-black\\\/70 { background-color: rgba(0,0,0,0.7); }\n        .bg-black\\\/75 { background-color: rgba(0,0,0,0.75); }\n        .bg-white\\\/5 { background-color: rgba(255,255,255,0.05); }\n        .bg-white\\\/10 { background-color: rgba(255,255,255,0.1); }\n        .bg-white\\\/15 { background-color: rgba(255,255,255,0.15); }\n        .bg-brand\\\/15 { background-color: rgba(0,160,233,0.15); }\n\n        \/* -- Gradients -- *\/\n        .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n        .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }\n        .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }\n        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }\n        .from-black\\\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/85 { --tw-gradient-from: rgba(0,0,0,0.85); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/70 { --tw-gradient-from: rgba(0,0,0,0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-black\\\/50 { --tw-gradient-from: rgba(0,0,0,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .from-\\[\\#050505\\] { --tw-gradient-from: #050505; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/80 { --tw-gradient-from: rgba(5,5,5,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .from-\\[\\#050505\\]\\\/50 { --tw-gradient-from: rgba(5,5,5,0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5,5,5,0)); }\n        .via-black\\\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.4), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.5), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-black\\\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }\n        .to-transparent { --tw-gradient-to: transparent; }\n        .to-black\\\/90 { --tw-gradient-to: rgba(0,0,0,0.9); }\n        .to-black\\\/60 { --tw-gradient-to: rgba(0,0,0,0.6); }\n        .to-\\[\\#050505\\]\\\/90 { --tw-gradient-to: rgba(5,5,5,0.9); }\n        .to-\\[\\#050505\\]\\\/50 { --tw-gradient-to: rgba(5,5,5,0.5); }\n        .to-\\[\\#050505\\] { --tw-gradient-to: #050505; }\n\n        \/* -- Borders & Rounded -- *\/\n        .border { border-width: 1px; border-style: solid; }\n        .border-t { border-top-width: 1px; }\n        .border-white\\\/5 { border-color: rgba(255,255,255,0.05); }\n        .border-white\\\/10 { border-color: rgba(255,255,255,0.1); }\n        .border-white\\\/15 { border-color: rgba(255,255,255,0.15); }\n        .border-white\\\/20 { border-color: rgba(255,255,255,0.2); }\n        .border-white\\\/30 { border-color: rgba(255,255,255,0.3); }\n        .border-brand { border-color: #00A0E9; }\n        .rounded { border-radius: 0.25rem; }\n        .rounded-xl { border-radius: 0.75rem; }\n        .rounded-2xl { border-radius: 1rem; }\n        .rounded-full { border-radius: 9999px; }\n\n        \/* -- Effects & Transitions -- *\/\n        .opacity-0 { opacity: 0; }\n        .opacity-40 { opacity: 0.4; }\n        .opacity-100 { opacity: 1; }\n        .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }\n        .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }\n        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }\n        .duration-500 { transition-duration: 500ms; }\n        .duration-700 { transition-duration: 700ms; }\n        .ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }\n        .ease-\\[cubic-bezier\\(0\\.16\\2c 1\\2c 0\\.3\\2c 1\\)\\] { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }\n\n        \/* -- Overflow & Misc -- *\/\n        .overflow-hidden { overflow: hidden; }\n        .object-cover { object-fit: cover; }\n        .object-contain { object-fit: contain; }\n        .cursor-pointer { cursor: pointer; }\n        .pointer-events-none { pointer-events: none; }\n        .pointer-events-auto { pointer-events: auto; }\n\n        \/* -- Hover states -- *\/\n        .hover\\:bg-brand:hover { background-color: #00A0E9; }\n        .hover\\:border-brand:hover { border-color: #00A0E9; }\n        .group:hover .group-hover\\:translate-x-1 { transform: translateX(0.25rem); }\n        .group:hover .group-hover\\:scale-110 { transform: scale(1.1); }\n\n        \/* -- Responsive: sm (\u2265640px) -- *\/\n        @media (min-width: 640px) {\n            .sm\\:w-\\[55vw\\] { width: 55vw; }\n            .sm\\:w-\\[65vw\\] { width: 65vw; }\n            .sm\\:w-\\[75\\%\\] { width: 75%; }\n            .sm\\:w-\\[80\\%\\] { width: 80%; }\n            .sm\\:w-\\[90\\%\\] { width: 90%; }\n            .sm\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .sm\\:text-base { font-size: 1rem; line-height: 1.5rem; }\n            .sm\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .sm\\:mb-6 { margin-bottom: 1.5rem; }\n            .sm\\:mb-8 { margin-bottom: 2rem; }\n            .sm\\:gap-8 { gap: 2rem; }\n            .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            .sm\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n        }\n\n        \/* -- Responsive: md (\u2265768px) -- *\/\n        @media (min-width: 768px) {\n            .md\\:w-\\[45vw\\] { width: 45vw; }\n            .md\\:w-\\[55vw\\] { width: 55vw; }\n            .md\\:w-\\[65\\%\\] { width: 65%; }\n            .md\\:w-\\[70\\%\\] { width: 70%; }\n            .md\\:w-\\[85\\%\\] { width: 85%; }\n        }\n\n        \/* -- Responsive: xl (\u22651280px) -- *\/\n        @media (min-width: 1280px) {\n            .xl\\:flex { display: flex; }\n            .xl\\:block { display: block; }\n            .xl\\:flex-row { flex-direction: row; }\n            .xl\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n            .xl\\:gap-4 { gap: 1rem; }\n            .xl\\:gap-14 { gap: 3.5rem; }\n            .xl\\:gap-16 { gap: 4rem; }\n            .xl\\:w-14 { width: 3.5rem; }\n            .xl\\:h-14 { height: 3.5rem; }\n            .xl\\:w-\\[32vw\\] { width: 32vw; }\n            .xl\\:w-\\[1080px\\] { width: 1080px; }\n            .xl\\:w-\\[28\\%\\] { width: 28%; }\n            .xl\\:w-\\[32\\%\\] { width: 32%; }\n            .xl\\:w-\\[35\\%\\] { width: 35%; }\n            .xl\\:w-\\[38\\%\\] { width: 38%; }\n            .xl\\:w-\\[40\\%\\] { width: 40%; }\n            .xl\\:w-\\[45\\%\\] { width: 45%; }\n            .xl\\:w-\\[50\\%\\] { width: 50%; }\n            .xl\\:w-\\[55\\%\\] { width: 55%; }\n            .xl\\:w-\\[58\\%\\] { width: 58%; }\n            .xl\\:w-\\[60\\%\\] { width: 60%; }\n            .xl\\:w-\\[62\\%\\] { width: 62%; }\n            .xl\\:w-\\[65\\%\\] { width: 65%; }\n            .xl\\:w-\\[68\\%\\] { width: 68%; }\n            .xl\\:w-\\[72\\%\\] { width: 72%; }\n            .xl\\:flex-shrink-0 { flex-shrink: 0; }\n            .xl\\:aspect-\\[4\\\/3\\] { aspect-ratio: 4\/3; }\n            .xl\\:h-full { height: 100%; }\n            .xl\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n            .xl\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n            .xl\\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n            .xl\\:py-0 { padding-top: 0; padding-bottom: 0; }\n            .xl\\:py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }\n            .xl\\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }\n            .xl\\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }\n            .xl\\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }\n            .xl\\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }\n            .xl\\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }\n            .xl\\:pt-8 { padding-top: 2rem; }\n            .xl\\:pl-6 { padding-left: 1.5rem; }\n            .xl\\:p-7 { padding: 1.75rem; }\n            .xl\\:p-8 { padding: 2rem; }\n            .xl\\:p-10 { padding: 2.5rem; }\n            .xl\\:mb-4 { margin-bottom: 1rem; }\n            .xl\\:mb-6 { margin-bottom: 1.5rem; }\n            .xl\\:mb-10 { margin-bottom: 2.5rem; }\n            .xl\\:mb-12 { margin-bottom: 3rem; }\n            .xl\\:mb-16 { margin-bottom: 4rem; }\n            .xl\\:mb-20 { margin-bottom: 5rem; }\n            .xl\\:mt-6 { margin-top: 1.5rem; }\n            .xl\\:mt-12 { margin-top: 3rem; }\n            .xl\\:mt-14 { margin-top: 3.5rem; }\n            .xl\\:mr-6 { margin-right: 1.5rem; }\n            .xl\\:mx-0 { margin-left: 0; margin-right: 0; }\n            .xl\\:left-6 { left: 1.5rem; }\n            .xl\\:right-6 { right: 1.5rem; }\n            .xl\\:left-8 { left: 2rem; }\n            .xl\\:right-8 { right: 2rem; }\n            .xl\\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n            .xl\\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n            .xl\\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n            .xl\\:text-2xl { font-size: 1.5rem; line-height: 2rem; }\n            .xl\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .xl\\:text-6xl { font-size: 3.75rem; line-height: 1; }\n            .xl\\:text-7xl { font-size: 4.5rem; line-height: 1; }\n            .xl\\:text-8xl { font-size: 6rem; line-height: 1; }\n            .xl\\:rounded-2xl { border-radius: 1rem; }\n        }\n\n        \/* ============= End Tailwind Fallback ============= *\/\n\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n                .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n    \n        .white-zone { background: #ffffff; color: #1a1a1a; }\n        .white-zone .spec-table th { color: #666; }\n        .white-zone .spec-table td { color: #333; border-color: #e5e7eb; }\n        .white-zone .spec-table td.label-cell { color: #111; font-weight: 600; }\n        .white-zone .spec-table tr:hover { background: #f8fafc; }\n    \n        \/* Spec comparison rows *\/\n        .spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: none; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }\n        .spec-row.visible { opacity: 1; transform: translateY(0); }\n        .spec-cell { text-align: center; padding: 18px 8px; }\n        .spec-cell-value { font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.2; }\n        .spec-cell-label { font-size: 11px; color: #aaa; margin-top: 4px; font-weight: 400; }\n        .spec-header { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid #ddd; padding-bottom: 14px; margin-bottom: 0; }\n        .spec-header-cell { text-align: center; }\n        .spec-header-name { font-size: 20px; font-weight: 700; color: #111; }\n        .spec-header-sub { font-size: 11px; color: #aaa; margin-top: 2px; }\n        .spec-learn-more { display:inline-block; margin-top:10px; padding:5px 16px; font-size:11px; font-weight:600; color:#333; text-decoration:none; letter-spacing:0.03em; background:#f1f5f9; border:1px solid #e5e7eb; border-radius:9999px; transition:all 0.3s ease; text-transform:uppercase; }\n        .spec-learn-more:hover { background:#00A0E9; color:#fff; border-color:#00A0E9; }\n    \n        \/* === Spec Mobile Carousel === *\/\n        .spec-carousel { display: none; overflow: hidden; }\n        @media (max-width: 1279px) {\n            .spec-desktop { display: none !important; }\n            .spec-carousel { display: block; }\n        }\n        .spec-carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n        .spec-carousel-slide { min-width: 100%; padding: 0 4px; box-sizing: border-box; }\n        .spec-carousel-slide-inner { background: #f8fafc; border-radius: 16px; padding: 24px 20px; border: 1px solid #eee; }\n        .spec-carousel-model { font-size: 18px; font-weight: 700; color: #111; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px;}\n        .spec-carousel-link { display: inline-block; margin-top: 8px; padding: 5px 16px; font-size: 11px; font-weight: 600; color: #333; text-decoration: none; letter-spacing: 0.03em; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; transition: all 0.3s ease; text-transform: uppercase; }\n        .spec-carousel-link:hover { background: #00A0E9; color: #fff; border-color: #00A0E9; }\n        .spec-carousel-specs { margin-top: 20px; }\n        .spec-carousel-item { text-align: center; padding: 14px 6px; border-bottom: 1px solid #eee; }\n        .spec-carousel-item-value { font-size: 17px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.2; }\n        .spec-carousel-item-label { font-size: 11px; color: #aaa; margin-top: 4px; font-weight: 400; }\n        .spec-carousel-indicator { user-select: none; }\n\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 13: SPECIFICATIONS -->\n    <!-- ============================================ -->\n    <section id=\"specs\" class=\"white-zone py-10 xl:py-16\" style=\"background:#fff;\">\n        <div class=\"max-w-[1200px] mx-auto px-6 xl:px-10 relative\">\n    \n            <div class=\"text-center mb-6 xl:mb-10\">\n                <div class=\"reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Technical Data<\/span><\/div>\n                <h2 class=\"reveal font-display text-4xl xl:text-5xl font-bold mt-4 mb-2 leading-[1.1]\" style=\"color:#111;\">Specifications<\/h2>\n                <p class=\"reveal text-lg font-light\" style=\"color:#999;\">All models at a glance \u2014 compare side by side<\/p>\n            <\/div>\n    \n              <!-- Desktop: Model Column Headers + Rows (hidden on mobile) -->\n            <div class=\"spec-desktop\">\n                <div class=\"spec-header reveal\">\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DeepPunch<span class=\"text-brand\"><br>25T<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DeepPunch<span class=\"text-brand\"><br>63T<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DeepPunch<span class=\"text-brand\"><br>125T<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DeepPunch<span class=\"text-brand\"><br>200T<\/span><\/div>\n                    <\/div>\n                <\/div>\n                <div id=\"spec-rows\">\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">250 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">630 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">1250 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2000 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">70 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">100 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">130 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">140 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">70 Times\/min<\/div><div class=\"spec-cell-label\">Number of Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">50 Times\/min<\/div><div class=\"spec-cell-label\">Number of Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">40 Times\/min<\/div><div class=\"spec-cell-label\">Number of Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">35 Times\/min<\/div><div class=\"spec-cell-label\">Number of Stroke<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">270 mm<\/div><div class=\"spec-cell-label\">Closed Height<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">360 mm<\/div><div class=\"spec-cell-label\">Closed Height<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">400 mm<\/div><div class=\"spec-cell-label\">Closed Height<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">490 mm<\/div><div class=\"spec-cell-label\">Closed Height<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">200 mm<\/div><div class=\"spec-cell-label\">Max. Die Set Height<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">260 mm<\/div><div class=\"spec-cell-label\">Max. Die Set Height<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">270 mm<\/div><div class=\"spec-cell-label\">Max. Die Set Height<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">350 mm<\/div><div class=\"spec-cell-label\">Max. Die Set Height<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">40 mm<\/div><div class=\"spec-cell-label\">Die Height Adjustment<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">60 mm<\/div><div class=\"spec-cell-label\">Die Height Adjustment<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">80 mm<\/div><div class=\"spec-cell-label\">Die Height Adjustment<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">100 mm<\/div><div class=\"spec-cell-label\">Die Height Adjustment<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Throat Depth<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Throat Depth<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Throat Depth<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Throat Depth<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2.2 KW<\/div><div class=\"spec-cell-label\">Motor<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">4 KW<\/div><div class=\"spec-cell-label\">Motor<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">11 KW<\/div><div class=\"spec-cell-label\">Motor<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">18.5 KW<\/div><div class=\"spec-cell-label\">Motor<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\" style=\"border-bottom:none;\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\" style=\"font-size:15px;\">1370*950*1950 mm<\/div><div class=\"spec-cell-label\">Dimension (L*W*H)<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\" style=\"font-size:15px;\">1970*1200*2400 mm<\/div><div class=\"spec-cell-label\">Dimension (L*W*H)<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\" style=\"font-size:15px;\">2360*1450*2770 mm<\/div><div class=\"spec-cell-label\">Dimension (L*W*H)<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\" style=\"font-size:15px;\">2350*1740*3050 mm<\/div><div class=\"spec-cell-label\">Dimension (L*W*H)<\/div><\/div>\n                    <\/div>\n                <\/div>\n                <!-- TODO: Replace href below with the actual external link (e.g. PDF catalog or product page URL) -->\n                <div class=\"reveal\" style=\"text-align:center; margin-top:30px;\">\n                    <a href=\"https:\/\/www.harsle.com\/technical-specifications-press-brake\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spec-learn-more\" style=\"padding:14px 48px; font-size:14px;\">LEARN MORE<\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Mobile: Spec Carousel (auto-built by JS from desktop data) -->\n            <div id=\"spec-carousel\" class=\"spec-carousel\"><\/div>\n\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        \/\/ Reveal on scroll (skip hero \u2014 hero uses CSS auto-animation)\n        var heroSection = document.getElementById('hero');\n        var revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n        if ('IntersectionObserver' in window) {\n            var revealObs = new IntersectionObserver(function(entries) {\n                entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('active'); });\n            }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n            revealEls.forEach(function(el) {\n                if (heroSection && heroSection.contains(el)) {\n                    el.classList.add('active');\n                } else {\n                    revealObs.observe(el);\n                }\n            });\n        } else {\n            revealEls.forEach(function(el) { el.classList.add('active'); });\n        }\n    \n        \/\/ ========== Spec Rows Scroll Reveal (bidirectional) ==========\n        (function() {\n            const rows = document.querySelectorAll('.spec-row');\n            const header = document.querySelector('.spec-header');\n    \n            const rowObs = new IntersectionObserver((entries) => {\n                entries.forEach(e => {\n                    if (e.isIntersecting) {\n                        e.target.classList.add('visible');\n                    } else {\n                        e.target.classList.remove('visible');\n                    }\n                });\n            }, { threshold: 0.15, rootMargin: '0px 0px -30px 0px' });\n            rows.forEach((r, i) => {\n                r.style.transitionDelay = (i * 0.04) + 's';\n                rowObs.observe(r);\n            });\n    \n            if (header) {\n                header.style.opacity = '0';\n                header.style.transform = 'translateY(15px)';\n                header.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n                const hObs = new IntersectionObserver((entries) => {\n                    entries.forEach(e => {\n                        if (e.isIntersecting) {\n                            e.target.style.opacity = '1';\n                            e.target.style.transform = 'translateY(0)';\n                        } else {\n                            e.target.style.opacity = '0';\n                            e.target.style.transform = 'translateY(15px)';\n                        }\n                    });\n                }, { threshold: 0.1 });\n                hObs.observe(header);\n            }\n        })();\n\n        \/\/ ========== Spec Mobile Carousel ==========\n        (function() {\n            const carousel = document.getElementById('spec-carousel');\n            if (!carousel) return;\n\n            const headerCells = document.querySelectorAll('.spec-header-cell');\n            const specRows = document.querySelectorAll('.spec-row');\n            const numModels = headerCells.length;\n            if (numModels === 0) return;\n\n            const models = [];\n            headerCells.forEach(function(cell, i) {\n                var name = cell.querySelector('.spec-header-name').textContent;\n                var linkEl = cell.querySelector('.spec-learn-more');\n                var href = linkEl ? linkEl.getAttribute('href') : '#';\n                var specs = [];\n                specRows.forEach(function(row) {\n                    var cells = row.querySelectorAll('.spec-cell');\n                    if (cells[i]) {\n                        specs.push({\n                            value: cells[i].querySelector('.spec-cell-value').textContent,\n                            label: cells[i].querySelector('.spec-cell-label').textContent\n                        });\n                    }\n                });\n                models.push({ name: name, href: href, specs: specs });\n            });\n\n            var trackHTML = '<div class=\"spec-carousel-track\">';\n            models.forEach(function(m, i) {\n                trackHTML += '<div class=\"spec-carousel-slide\"><div class=\"spec-carousel-slide-inner\">';\n                trackHTML += '<div style=\"text-align:center;\">';\n                trackHTML += '<div class=\"spec-carousel-model\">' + m.name + '<\/div>';\n                trackHTML += '<\/div>';\n                trackHTML += '<div class=\"spec-carousel-specs\">';\n                m.specs.forEach(function(s) {\n                    trackHTML += '<div class=\"spec-carousel-item\">';\n                    trackHTML += '<div class=\"spec-carousel-item-value\">' + s.value + '<\/div>';\n                    trackHTML += '<div class=\"spec-carousel-item-label\">' + s.label + '<\/div>';\n                    trackHTML += '<\/div>';\n                });\n                trackHTML += '<\/div>';\n                trackHTML += '<div style=\"text-align:center; margin-top:16px;\">';\n                trackHTML += '<a href=\"' + m.href + '\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spec-carousel-link\">Learn More<\/a>';\n                trackHTML += '<\/div>';\n                trackHTML += '<\/div><\/div>';\n            });\n            trackHTML += '<\/div>';\n            var indicatorHTML = '<div class=\"spec-carousel-indicator\" style=\"display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;\">';\n            for (var d = 0; d < numModels; d++) {\n                var dotBg = d === 0 ? '#00A0E9' : 'rgba(0,0,0,0.15)';\n                var dotW = d === 0 ? '24px' : '8px';\n                indicatorHTML += '<span class=\"spec-dot\" data-idx=\"' + d + '\" style=\"display:inline-block;height:3px;width:' + dotW + ';border-radius:2px;background:' + dotBg + ';cursor:pointer;transition:all 0.3s;\"><\/span>';\n            }\n            indicatorHTML += '<span class=\"spec-carousel-counter\" style=\"margin-left:8px;color:#aaa;font-size:12px;font-family:ui-monospace,monospace;\">01 \/ 0' + numModels + '<\/span>';\n            indicatorHTML += '<\/div>';\n            carousel.innerHTML = trackHTML + indicatorHTML;\n\n            var track = carousel.querySelector('.spec-carousel-track');\n            var counter = carousel.querySelector('.spec-carousel-counter');\n            var specDots = carousel.querySelectorAll('.spec-dot');\n            var current = 0;\n\n            function goTo(idx) {\n                if (idx < 0) idx = 0;\n                if (idx >= numModels) idx = numModels - 1;\n                current = idx;\n                track.style.transform = 'translateX(-' + (current * 100) + '%)';\n                var c = (current + 1).toString().padStart(2, '0');\n                var t = numModels.toString().padStart(2, '0');\n                if (counter) counter.textContent = c + ' \/ ' + t;\n                specDots.forEach(function(dot, i) {\n                    dot.style.background = i === current ? '#00A0E9' : 'rgba(0,0,0,0.15)';\n                    dot.style.width = i === current ? '24px' : '8px';\n                });\n            }\n\n            specDots.forEach(function(dot) {\n                dot.addEventListener('click', function() {\n                    goTo(parseInt(this.getAttribute('data-idx')));\n                });\n            });\n\n            var startX = 0, startY = 0, moveX = 0, isDragging = false, isHorizontal = null;\n            track.addEventListener('touchstart', function(e) {\n                startX = e.touches[0].clientX;\n                startY = e.touches[0].clientY;\n                moveX = 0;\n                isDragging = true;\n                isHorizontal = null;\n                track.style.transition = 'none';\n            }, { passive: true });\n            track.addEventListener('touchmove', function(e) {\n                if (!isDragging) return;\n                var dx = e.touches[0].clientX - startX;\n                var dy = e.touches[0].clientY - startY;\n                if (isHorizontal === null) {\n                    isHorizontal = Math.abs(dx) > Math.abs(dy);\n                }\n                if (!isHorizontal) return;\n                e.preventDefault();\n                moveX = dx;\n                var pct = -current * 100 + (moveX \/ track.offsetWidth) * 100;\n                track.style.transform = 'translateX(' + pct + '%)';\n            }, { passive: false });\n            track.addEventListener('touchend', function() {\n                if (!isDragging) return;\n                isDragging = false;\n                track.style.transition = '';\n                if (isHorizontal && Math.abs(moveX) > 50) {\n                    goTo(moveX < 0 ? current + 1 : current - 1);\n                } else {\n                    goTo(current);\n                }\n            }, { passive: true });\n        })();\n    })();\n    <\/script>\n\n<script>\n(function(){\n    var pages = document.querySelectorAll('.mb-page');\n    if (!pages.length) return;\n    pages.forEach(function(el) {\n        var p = el.parentElement;\n        while (p && p !== document.body && p !== document.documentElement) {\n            var tag = p.tagName.toLowerCase();\n            if (tag === 'main' || tag === 'article' ||\n                p.classList.contains('entry-content') ||\n                p.classList.contains('page-content') ||\n                p.classList.contains('post-content') ||\n                p.classList.contains('elementor-widget-container') ||\n                p.classList.contains('elementor-widget-wrap') ||\n                p.classList.contains('elementor-column-wrap') ||\n                p.classList.contains('elementor-element') ||\n                p.classList.contains('e-con') ||\n                p.classList.contains('wp-block-shortcode') ||\n                p.classList.contains('wp-block-html')) {\n                p.style.paddingTop = '0';\n                p.style.paddingBottom = '0';\n                p.style.marginTop = '0';\n                p.style.marginBottom = '0';\n            }\n            p = p.parentElement;\n        }\n    });\n})();\n<\/script>\n<!--J21S-08-data -->\n\n\n\n\n<!-- Quote CTA Section \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    tailwind.config = {\n        theme: {\n            extend: {\n                colors: {\n                    brand: '#00A0E9',\n                    'brand-dark': '#0080BA',\n                },\n                fontFamily: {\n                    sans: ['inherit'],\n                    display: ['inherit'],\n                }\n            }\n        }\n    }\n<\/script>\n\n<style>\n    .quote-section {\n        font-family: inherit;\n        overflow-x: hidden;\n        line-height: 0;\n        font-size: 0;\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        margin-bottom: 0 !important;\n        padding-bottom: 0 !important;\n        box-sizing: border-box;\n    }\n    .quote-section #contact {\n        margin-bottom: 0 !important;\n    }\n    .quote-section * { box-sizing: border-box; }\n    .quote-section ::selection { background: #00A0E9; color: #fff; }\n\n    \/* Eliminate WordPress\/Elementor wrapper spacing *\/\n    .quote-section + *,\n    .elementor-widget-container > .quote-section:last-child {\n        margin-top: 0 !important;\n    }\n    .elementor-element:has(> .elementor-widget-container > .quote-section),\n    .elementor-widget:has(.quote-section) {\n        margin-bottom: 0 !important;\n        padding-bottom: 0 !important;\n    }\n\n    .quote-reveal {\n        opacity: 0;\n        transform: translateY(60px);\n        transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .quote-reveal.active {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    @media (max-width: 767px) {\n        .quote-section .quote-heading {\n            font-size: 2rem !important;\n        }\n    }\n\n    \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n    .wp-block-html {\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n        padding: 0 !important;\n        clear: none !important;\n    }\n    .entry-content > .wp-block-html + .wp-block-html {\n        margin-top: 0 !important;\n    }\n    .elementor-widget-html,\n    .elementor-widget-html .elementor-widget-container {\n        margin: 0 !important;\n        padding: 0 !important;\n    }\n    .elementor-element + .elementor-element {\n        margin-top: 0 !important;\n    }\n    .elementor-widget:not(:last-child) {\n        margin-bottom: 0 !important;\n    }\n    .wp-block-shortcode {\n        margin: 0 !important;\n        padding: 0 !important;\n    }\n    .quote-section {\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n        padding-top: 0;\n        padding-bottom: 0;\n    }\n    .entry-content:has(.quote-section),\n    .page-content:has(.quote-section),\n    .post-content:has(.quote-section),\n    article:has(.quote-section) .entry-content,\n    .elementor-widget-container:has(.quote-section) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n    }\n    .elementor-section:has(.quote-section),\n    .elementor-column:has(.quote-section),\n    .elementor-widget-wrap:has(.quote-section),\n    .e-con:has(.quote-section) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n        gap: 0 !important;\n    }\n<\/style>\n\n<div class=\"quote-section\">\n    <section id=\"contact\" class=\"py-16 md:py-28\" style=\"background:#f0f2f5; color:#1a1a1a; font-size:16px; line-height:1.6;\">\n        <div class=\"max-w-[1400px] mx-auto px-6 xl:px-10\">\n            <div class=\"quote-reveal grid lg:grid-cols-2 gap-16 lg:gap-20 items-center\">\n\n                <!-- Left: Text -->\n                <div>\n                    <span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Get Started<\/span>\n                    <h2 class=\"quote-heading font-display text-4xl md:text-5xl font-bold mt-4 mb-6\" style=\"color:#111; font-size:48px; line-height:1.15;\">Ready to<br>Master Your<br>Production?<\/h2>\n                    <p class=\"text-base font-light leading-relaxed mb-8\" style=\"color:#666; max-width:420px;\">Get a personalized quote tailored to your exact specifications. Our engineering team will help you configure the perfect solution for your production needs.<\/p>\n\n                    <h4 class=\"text-sm font-semibold uppercase tracking-wider mb-4\" style=\"color:#111;\">What You'll Get<\/h4>\n                    <div class=\"grid grid-cols-2 gap-3\" style=\"max-width:420px;\">\n                        <div class=\"flex items-center gap-3 rounded-xl px-4 py-3.5\" style=\"background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.04);\">\n                            <i class=\"fas fa-cogs text-brand\"><\/i>\n                            <span class=\"text-sm font-medium\" style=\"color:#333;\">Machine Selection<\/span>\n                        <\/div>\n                        <div class=\"flex items-center gap-3 rounded-xl px-4 py-3.5\" style=\"background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.04);\">\n                            <i class=\"fas fa-headset text-brand\"><\/i>\n                            <span class=\"text-sm font-medium\" style=\"color:#333;\">Technical Support<\/span>\n                        <\/div>\n                        <div class=\"flex items-center gap-3 rounded-xl px-4 py-3.5\" style=\"background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.04);\">\n                            <i class=\"fas fa-file-invoice-dollar text-brand\"><\/i>\n                            <span class=\"text-sm font-medium\" style=\"color:#333;\">Detailed Quotation<\/span>\n                        <\/div>\n                        <div class=\"flex items-center gap-3 rounded-xl px-4 py-3.5\" style=\"background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.04);\">\n                            <i class=\"fas fa-bolt text-brand\"><\/i>\n                            <span class=\"text-sm font-medium\" style=\"color:#333;\">24-Hour Response<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Right: Elementor Form (WordPress Shortcode) -->\n                <div>\n                    \t\t<div data-elementor-type=\"container\" data-elementor-id=\"80748\" class=\"elementor elementor-80748\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-aa8062a e-flex e-con-boxed e-con e-parent\" data-id=\"aa8062a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27de7ea wd-width-100 elementor-widget elementor-widget-wd_title\" data-id=\"27de7ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"wd_title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"title-wrapper wd-set-mb reset-last-child wd-title-color-default wd-title-style-default wd-title-size-default text-left\">\n\n\t\t\t\n\t\t\t<div class=\"liner-continer\">\n\t\t\t\t<h4 class=\"woodmart-title-container title wd-fontsize-l\">Request a Quote<\/h4> \n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t<div class=\"title-after_title reset-last-child wd-fontsize-xs\">\n\t\t\t\t\t<p>Fill in the details below and we'll get back to you within 24 hours<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e19d02c elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"e19d02c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;,&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"80748\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"e19d02c\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Industrial Deep Drawing Press Equipment | HARSLE\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"74763\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tNAME\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Your Name\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-Company elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-Company\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tCOMPANY\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[Company]\" id=\"form-field-Company\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"Company Name\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tEMAIL\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"you@company.com\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-WhatsApp elementor-col-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-WhatsApp\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tWHATSAPP\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[WhatsApp]\" id=\"form-field-WhatsApp\" class=\"elementor-field elementor-size-md  elementor-field-textual\" placeholder=\"WhatsApp Number\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100 elementor-field-required elementor-mark-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tMESSAGE\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-md\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"5\" placeholder=\"Tell us about your requirements...\" required=\"required\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">SUBMIT INQUIRY<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<script>\n    (function() {\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('active');\n                }\n            });\n        }, { threshold: 0.15 });\n\n        document.querySelectorAll('.quote-reveal').forEach(el => observer.observe(el));\n    })();\n<\/script>\n\n<script>\n(function(){\n    var wrappers = document.querySelectorAll('.quote-section');\n    if (!wrappers.length) return;\n    wrappers.forEach(function(el) {\n        var p = el.parentElement;\n        while (p && p !== document.body && p !== document.documentElement) {\n            var tag = p.tagName.toLowerCase();\n            if (tag === 'main' || tag === 'article' ||\n                p.classList.contains('entry-content') ||\n                p.classList.contains('page-content') ||\n                p.classList.contains('post-content') ||\n                p.classList.contains('elementor-widget-container') ||\n                p.classList.contains('elementor-widget-wrap') ||\n                p.classList.contains('elementor-column-wrap') ||\n                p.classList.contains('elementor-element') ||\n                p.classList.contains('e-con') ||\n                p.classList.contains('wp-block-shortcode') ||\n                p.classList.contains('wp-block-html')) {\n                p.style.paddingTop = '0';\n                p.style.paddingBottom = '0';\n                p.style.marginTop = '0';\n                p.style.marginBottom = '0';\n            }\n            p = p.parentElement;\n        }\n    });\n})();\n<\/script>\n\n\n\n\n\n<!-- Other Models Carousel \u2014 WordPress Embeddable Content Block -->\n<!-- No <html>, <head>, <body>, nav, or footer \u2014 inherits from WordPress theme -->\n\n<style>\n    .models-section {\n        font-family: inherit;\n        overflow-x: hidden;\n        line-height: 1.6;\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n        box-sizing: border-box;\n    }\n    .models-section * { box-sizing: border-box; }\n    .models-section,\n    .models-section section,\n    .models-section div,\n    .models-section h2,\n    .models-section p,\n    .models-section span {\n        text-align: left !important;\n    }\n    .models-section .models-header-row {\n        display: flex !important;\n        width: 100% !important;\n        justify-content: space-between !important;\n        align-items: flex-end !important;\n    }\n    .models-section .models-header-text {\n        flex: 1 1 0% !important;\n        min-width: 0 !important;\n        margin-right: auto !important;\n        margin-left: 0 !important;\n        text-align: left !important;\n        float: none !important;\n    }\n    .models-section img { max-width: 100%; height: auto; }\n    .models-section .model-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n    .models-section ::selection { background: #00A0E9; color: #fff; }\n\n    .models-reveal {\n        opacity: 0;\n        transform: translateY(60px);\n        transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .models-reveal.active {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    #models-track { align-items: stretch; }\n    .model-slide { display: flex; }\n    .model-card {\n        background: #fff;\n        border: 1px solid #e5e7eb;\n        border-radius: 16px;\n        transition: all 0.4s;\n        overflow: hidden;\n        width: 100%;\n    }\n    .model-card:hover {\n        border-color: #00A0E9;\n        box-shadow: 0 20px 60px rgba(0,160,233,0.1);\n        transform: translateY(-4px);\n    }\n\n    \/* Responsive H2: match index5.0.html fluid typography *\/\n    .models-section h2 {\n        font-size: 48px;\n        line-height: 1.15;\n    }\n    @media (max-width: 1279px) {\n        .models-section h2 {\n            font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            line-height: 1.15 !important;\n        }\n    }\n\n    \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n    .wp-block-html {\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n        padding: 0 !important;\n        clear: none !important;\n    }\n    .entry-content > .wp-block-html + .wp-block-html {\n        margin-top: 0 !important;\n    }\n    .elementor-widget-html,\n    .elementor-widget-html .elementor-widget-container {\n        margin: 0 !important;\n        padding: 0 !important;\n    }\n    .elementor-element + .elementor-element {\n        margin-top: 0 !important;\n    }\n    .elementor-widget:not(:last-child) {\n        margin-bottom: 0 !important;\n    }\n    .wp-block-shortcode {\n        margin: 0 !important;\n        padding: 0 !important;\n    }\n    .models-section {\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n        padding-top: 0;\n        padding-bottom: 0;\n    }\n    .entry-content:has(.models-section),\n    .page-content:has(.models-section),\n    .post-content:has(.models-section),\n    article:has(.models-section) .entry-content,\n    .elementor-widget-container:has(.models-section) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n    }\n    .elementor-section:has(.models-section),\n    .elementor-column:has(.models-section),\n    .elementor-widget-wrap:has(.models-section),\n    .e-con:has(.models-section) {\n        padding-top: 0 !important;\n        padding-bottom: 0 !important;\n        margin-top: 0 !important;\n        margin-bottom: 0 !important;\n        gap: 0 !important;\n    }\n<\/style>\n\n<div class=\"models-section\">\n    <section class=\"py-16 md:py-24\" style=\"background:#fff; color:#1a1a1a; overflow:hidden;\">\n        <div class=\"max-w-[1400px] mx-auto px-6 lg:px-10 text-left\">\n            <div class=\"models-header-row flex flex-col md:flex-row md:items-end justify-between mb-8 md:mb-12 gap-4\">\n                <div class=\"models-header-text flex-1 min-w-0 text-left\">\n                    <div class=\"models-reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Explore More<\/span><\/div>\n                    <h2 class=\"models-reveal font-display text-3xl md:text-5xl font-bold mt-4 mb-0\" style=\"color:#111;\">Find the Right Machine<br>for Your Needs<\/h2>\n                    <p class=\"models-reveal text-base md:text-lg max-w-2xl font-light mt-4\" style=\"color:#666;\">Browse our complete range of machines. Each series is optimized for different production scales and precision requirements.<\/p>\n                <\/div>\n                <div class=\"flex items-center gap-3 flex-shrink-0\">\n                    <button id=\"models-prev\" class=\"w-11 h-11 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-brand hover:text-white hover:border-brand transition-all group\" style=\"color:#333;\">\n                        <i class=\"fas fa-chevron-left text-sm group-hover:scale-110 transition-transform\"><\/i>\n                    <\/button>\n                    <button id=\"models-next\" class=\"w-11 h-11 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-brand hover:text-white hover:border-brand transition-all group\" style=\"color:#333;\">\n                        <i class=\"fas fa-chevron-right text-sm group-hover:scale-110 transition-transform\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"models-reveal\">\n                <div id=\"models-carousel\" style=\"overflow:visible;\">\n                    <div id=\"models-track\" class=\"flex\" style=\"gap:24px; will-change:transform; transition:transform 0.8s cubic-bezier(0.25,1,0.5,1);\">\n\n                        <!-- Model 1: DeepPunch (Current) -->\n                        <a href=\"http:\/\/www.harsle.com\/DeepPunch\/\" class=\"model-slide flex-shrink-0 block\" style=\"text-decoration:none; color:inherit;\">\n                            <div class=\"model-card h-full flex flex-col\" style=\"border-color:#00A0E9; box-shadow:0 0 0 2px #00A0E9;\">\n                                <div class=\"relative overflow-hidden flex-shrink-0\" style=\"aspect-ratio:4\/3;\">\n                                    <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j21s-22.png\" alt=\"DeepPunch CNC punch press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                    <div class=\"absolute top-4 right-4 bg-brand text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider\">Current<\/div>\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">DeepPunch<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Extended deep-throat design for punching large or wide workpieces with ease. Ideal for applications requiring maximum throat depth and consistent punching force.<\/p>\n                                    <div class=\"flex items-center justify-end pt-4\" style=\"border-top:1px solid #00A0E9;\">\n                                        <span class=\"inline-flex items-center text-brand text-sm font-semibold group\">\n                                            You're Here <i class=\"fas fa-arrow-up ml-2 text-xs\"><\/i>\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n\n                        <!-- Model 2: TiltPunch -->\n                        <a href=\"http:\/\/www.harsle.com\/TiltPunch\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"model-slide flex-shrink-0 block\" style=\"text-decoration:none; color:inherit;\">\n                            <div class=\"model-card h-full flex flex-col\">\n                                <div class=\"relative overflow-hidden flex-shrink-0\" style=\"aspect-ratio:4\/3;\">\n                                    <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/j23-22.png\" alt=\"TiltPunch deep-throat punch press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">TiltPunch<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Precision tilting-head punch press engineered for complex hole patterns and angular perforation. Delivers superior accuracy and flexibility for high-mix, demanding production.<\/p>\n                                    <div class=\"flex items-center justify-end pt-4\" style=\"border-top:1px solid #f0f0f0;\">\n                                        <span class=\"inline-flex items-center text-brand text-sm font-semibold\">\n                                            Learn More <i class=\"fas fa-arrow-right ml-2 text-xs\"><\/i>\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n\n                        <!-- Model 3: FlexPunch -->\n                        <a href=\"http:\/\/www.harsle.com\/FlexPunch\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"model-slide flex-shrink-0 block\" style=\"text-decoration:none; color:inherit;\">\n                            <div class=\"model-card h-full flex flex-col\">\n                                <div class=\"relative overflow-hidden flex-shrink-0\" style=\"aspect-ratio:4\/3;\">\n                                    <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/je23-22.png\" alt=\"FlexPunch versatile punch press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">FlexPunch<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Adjustable-stroke punch press offering precise stroke length control for different material thicknesses and tooling requirements. Reduces energy consumption and improves efficiency across varied production runs.<\/p>\n                                    <div class=\"flex items-center justify-end pt-4\" style=\"border-top:1px solid #f0f0f0;\">\n                                        <span class=\"inline-flex items-center text-brand text-sm font-semibold\">\n                                            Learn More <i class=\"fas fa-arrow-right ml-2 text-xs\"><\/i>\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n\n                        <!-- Model 4: AirPunch -->\n                        <a href=\"http:\/\/www.harsle.com\/AirPunch\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"model-slide flex-shrink-0 block\" style=\"text-decoration:none; color:inherit;\">\n                            <div class=\"model-card h-full flex flex-col\">\n                                <div class=\"relative overflow-hidden flex-shrink-0\" style=\"aspect-ratio:4\/3;\">\n                                    <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/jh21-22.png\" alt=\"AirPunch pneumatic punch press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">AirPunch<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">High-speed pneumatic punch press for lightweight sheet metal and thin-gauge materials. Delivers rapid cycle times, low noise, and energy-efficient operation on the production floor.<\/p>\n                                    <div class=\"flex items-center justify-end pt-4\" style=\"border-top:1px solid #f0f0f0;\">\n                                        <span class=\"inline-flex items-center text-brand text-sm font-semibold\">\n                                            Learn More <i class=\"fas fa-arrow-right ml-2 text-xs\"><\/i>\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n\n                        <!-- Model 5: TurretPunch -->\n                        <a href=\"http:\/\/www.harsle.com\/TurretPunch\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"model-slide flex-shrink-0 block\" style=\"text-decoration:none; color:inherit;\">\n                            <div class=\"model-card h-full flex flex-col\">\n                                <div class=\"relative overflow-hidden flex-shrink-0\" style=\"aspect-ratio:4\/3;\">\n                                    <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/ztc-22.png\" alt=\"TurretPunch CNC turret punch press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">TurretPunch<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">CNC turret punch press with multi-station tooling for complex, high-volume sheet metal fabrication. Automates punching, forming, and nibbling in a single efficient setup.<\/p>\n                                    <div class=\"flex items-center justify-end pt-4\" style=\"border-top:1px solid #f0f0f0;\">\n                                        <span class=\"inline-flex items-center text-brand text-sm font-semibold\">\n                                            Learn More <i class=\"fas fa-arrow-right ml-2 text-xs\"><\/i>\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<script>\n(function() {\n    \/\/ Scroll-reveal\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) entry.target.classList.add('active');\n        });\n    }, { threshold: 0.15 });\n    document.querySelectorAll('.models-reveal').forEach(el => observer.observe(el));\n\n    \/\/ Carousel\n    const track = document.getElementById('models-track');\n    const slides = track.querySelectorAll('.model-slide');\n    const prevBtn = document.getElementById('models-prev');\n    const nextBtn = document.getElementById('models-next');\n    const carousel = document.getElementById('models-carousel');\n    const total = slides.length;\n    let pos = 0;\n    let autoTimer = null;\n\n    function getVisibleCount() {\n        const w = window.innerWidth;\n        if (w >= 1024) return 3;\n        if (w >= 640) return 2;\n        return 1;\n    }\n\n    function update(instant) {\n        const vis = getVisibleCount();\n        const gap = 24;\n        const containerW = carousel.offsetWidth;\n        const slideW = (containerW - gap * (vis - 1)) \/ vis;\n\n        slides.forEach(s => { s.style.width = slideW + 'px'; s.style.minWidth = slideW + 'px'; });\n\n        const maxPos = Math.max(0, total - vis);\n        if (pos > maxPos) pos = 0;\n        if (pos < 0) pos = maxPos;\n        const offset = pos * (slideW + gap);\n\n        if (instant) track.style.transition = 'none';\n        else track.style.transition = 'transform 0.8s cubic-bezier(0.25,1,0.5,1)';\n\n        requestAnimationFrame(() => {\n            track.style.transform = 'translateX(-' + offset + 'px)';\n        });\n    }\n\n    function next() { pos++; update(); }\n    function prev() { pos--; update(); }\n\n    prevBtn.addEventListener('click', () => { prev(); resetAuto(); });\n    nextBtn.addEventListener('click', () => { next(); resetAuto(); });\n\n    \/\/ Touch support\n    let sx = 0, dragging = false;\n    carousel.addEventListener('touchstart', e => { sx = e.touches[0].clientX; dragging = true; }, { passive: true });\n    carousel.addEventListener('touchend', e => {\n        if (!dragging) return; dragging = false;\n        const dx = sx - e.changedTouches[0].clientX;\n        if (Math.abs(dx) > 50) { dx > 0 ? pos++ : pos--; update(); resetAuto(); }\n    });\n\n    \/\/ Auto-play: advance every 5 seconds\n    function startAuto() {\n        stopAuto();\n        autoTimer = setInterval(next, 3000);\n    }\n    function stopAuto() {\n        if (autoTimer) { clearInterval(autoTimer); autoTimer = null; }\n    }\n    function resetAuto() { startAuto(); }\n\n    \/\/ Pause on hover\n    let isVisible = false;\n    carousel.addEventListener('mouseenter', stopAuto);\n    carousel.addEventListener('mouseleave', () => { if (isVisible) startAuto(); });\n\n    \/\/ Only auto-play when the section is in the viewport\n    const sectionEl = document.querySelector('.models-section section');\n    const visObs = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            isVisible = entry.isIntersecting;\n            if (isVisible) startAuto();\n            else stopAuto();\n        });\n    }, { threshold: 0.15 });\n    visObs.observe(sectionEl);\n\n    \/\/ Resize\n    let resizeTimer;\n    window.addEventListener('resize', () => {\n        clearTimeout(resizeTimer);\n        resizeTimer = setTimeout(() => { update(true); }, 100);\n    });\n\n    update(true);\n})();\n<\/script>\n\n<script>\n(function(){\n    var wrappers = document.querySelectorAll('.models-section');\n    if (!wrappers.length) return;\n    wrappers.forEach(function(el) {\n        var p = el.parentElement;\n        while (p && p !== document.body && p !== document.documentElement) {\n            var tag = p.tagName.toLowerCase();\n            if (tag === 'main' || tag === 'article' ||\n                p.classList.contains('entry-content') ||\n                p.classList.contains('page-content') ||\n                p.classList.contains('post-content') ||\n                p.classList.contains('elementor-widget-container') ||\n                p.classList.contains('elementor-widget-wrap') ||\n                p.classList.contains('elementor-column-wrap') ||\n                p.classList.contains('elementor-element') ||\n                p.classList.contains('e-con') ||\n                p.classList.contains('wp-block-shortcode') ||\n                p.classList.contains('wp-block-html')) {\n                p.style.paddingTop = '0';\n                p.style.paddingBottom = '0';\n                p.style.marginTop = '0';\n                p.style.marginBottom = '0';\n            }\n            p = p.parentElement;\n        }\n    });\n})();\n<\/script>\n<!-- J21S-10-models -->\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>DeepPunch Designed for fast, stable punching performance. Request a Quote Watch Video Fast Stroke Rigid Frame Easy Operation Extended Reach<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-75060","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/pages\/75060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/comments?post=75060"}],"version-history":[{"count":0,"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/pages\/75060\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.harsle.com\/fr\/wp-json\/wp\/v2\/media?parent=75060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}