{"id":75627,"date":"2025-12-18T08:31:10","date_gmt":"2025-12-18T08:31:10","guid":{"rendered":"https:\/\/www.harsle.com\/?page_id=75627"},"modified":"2026-04-16T08:31:15","modified_gmt":"2026-04-16T08:31:15","slug":"triroll","status":"publish","type":"page","link":"https:\/\/www.harsle.com\/es\/triroll\/","title":{"rendered":"TriRoll"},"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\/04\/sangun1-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\/sangun1-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                        Tri<span class=\"text-brand\">Roll<\/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                        Built for reliable, efficient plate rolling\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\">Smooth<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Rolling<\/div>\n                        <\/div>\n                        <div>\n                            <div class=\"text-2xl xl:text-4xl font-bold text-white font-display\">Stable<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Structure<\/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=\"HARSLE\" \/>\n\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\/MKFJrVZsGSQ?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<!--TR-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-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]\">Rolling Process<\/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\">Working Principle<\/h2>\n                    <p class=\"reveal text-gray-400 text-base xl:text-lg max-w-2xl mx-auto font-light\">The three-roll plate rolling machine bends metal sheets through the coordinated movement of one upper roll and two lower rolls, gradually forming the desired curvature by applying continuous pressure.<\/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\/sangunyuanli22.png\" alt=\"Working Principle\" 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<!--TR-02-yuanli -->\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            .sm\\:flex-row { flex-direction: row; }\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        \/* -- Clamp cards: side-by-side on all screens \u2265640px -- *\/\n        @media (min-width: 640px) {\n            #clamp-card-row { flex-direction: row !important; }\n            #clamp-card-row > .auto-card { flex: 1 1 0%; min-width: 0; }\n        }\n        \/* -- Clamp card image: fixed ratio, overrides other pages' auto-card-img rules -- *\/\n        #clamp-card-row .auto-card-img {\n            height: 0 !important;\n            padding-bottom: 62.5% !important;\n            aspect-ratio: unset !important;\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% !important; aspect-ratio: 16\/10 !important; overflow: hidden; flex-shrink: 0; height: 0 !important; padding-bottom: 62.5% !important; }\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): full-image hover-reveal style *\/\n        \/* Hide desktop overlay on mobile\/tablet by default *\/\n        .desktop-hover-overlay { display: none; }\n        @media (min-width: 1280px) {\n            \/* Switch card to block so aspect-ratio controls height cleanly *\/\n            #clamp-card-row .auto-card {\n                display: block !important;\n                position: relative;\n                overflow: hidden;\n                border-radius: 16px;\n                aspect-ratio: 4\/3;\n                height: auto;\n            }\n            \/* Image fills the entire card *\/\n            #clamp-card-row .auto-card .auto-card-img {\n                aspect-ratio: unset !important;\n                height: 100% !important;\n                padding-bottom: 0 !important;\n                position: absolute !important;\n                inset: 0 !important;\n            }\n            \/* Hide text body on desktop *\/\n            #clamp-card-row .auto-card .auto-card-body { display: none !important; }\n            \/* Hover overlay: slides up from bottom *\/\n            #clamp-card-row .auto-card .desktop-hover-overlay {\n                display: flex;\n                flex-direction: column;\n                justify-content: flex-end;\n                position: absolute;\n                inset: 0;\n                background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 45%, transparent 75%);\n                padding: 28px;\n                opacity: 0;\n                transform: translateY(12px);\n                transition: opacity 0.4s ease, transform 0.4s ease;\n                z-index: 2;\n            }\n            #clamp-card-row .auto-card:hover .desktop-hover-overlay {\n                opacity: 1;\n                transform: translateY(0);\n            }\n            #clamp-card-row .auto-card:hover .auto-card-img img { transform: scale(1.05); }\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    \n    <!-- ============================================ -->\n    <!--  -->\n    <!-- ============================================ -->\n    <section id=\"automation\" 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-black\/10\"><\/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-16 flex flex-col justify-center\">\n            <!-- Centered Title -->\n            <div class=\"text-center px-6 mb-6 sm:mb-8 xl:mb-10\">\n                <div class=\"reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Core Power<\/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\">Stable Performance<\/h2>\n                <p class=\"reveal text-gray-400 text-base xl:text-lg max-w-2xl mx-auto font-light\">The three-roll structure and electromechanical system ensure stable force distribution and reliable power output for precise and efficient rolling.<\/p>\n            <\/div>\n    \n            <!-- Two-column card layout -->\n            <div class=\"reveal w-full px-6 xl:px-10\">\n                <div id=\"clamp-card-row\" class=\"max-w-[1400px] mx-auto flex flex-col sm:flex-row gap-6\">\n\n                        <!-- Card 1 -->\n                        <div class=\"auto-card flex-1 cursor-pointer\">\n                            <div class=\"auto-card-img\">\n                                <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/sangun.png\" alt=\"Triple Rolls\">\n                            <\/div>\n                            <!-- Desktop hover overlay (hidden on mobile\/tablet via CSS) -->\n                            <div class=\"desktop-hover-overlay\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase mb-2\" style=\"letter-spacing:0.25em;\">Rolling Core<\/span>\n                                <h3 style=\"color:#fff; font-size:20px; font-weight:700; margin-bottom:8px;\">Triple Rolls<\/h3>\n                                <p style=\"color:rgba(209,213,219,0.85); font-size:13.5px; line-height:1.6;\">The three-roll structure delivers continuous bending through coordinated movement, ensuring smooth forming and precise curvature control.<\/p>\n                            <\/div>\n                            <div class=\"auto-card-body\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase tracking-[0.25em] mb-2 px-3 py-1 rounded-full border\" style=\"letter-spacing:0.25em; background:rgba(0,160,233,0.1); border-color:rgba(0,160,233,0.2);\">Rolling Core<\/span>\n                                <h3 class=\"text-white font-display\" style=\"color:#fff;\">Triple Rolls<\/h3>\n                                <p style=\"color:#9ca3af;\">The three-roll structure delivers continuous bending through coordinated movement, ensuring smooth forming and precise curvature control.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Card 2-->\n                        <div class=\"auto-card flex-1 cursor-pointer\">\n                            <div class=\"auto-card-img\">\n                                <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/sgdj.png\" alt=\"Power System\">\n                            <\/div>\n                            <!-- Desktop hover overlay (hidden on mobile\/tablet via CSS) -->\n                            <div class=\"desktop-hover-overlay\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase mb-2\" style=\"letter-spacing:0.25em;\">Drive Control<\/span>\n                                <h3 style=\"color:#fff; font-size:20px; font-weight:700; margin-bottom:8px;\">Power System<\/h3>\n                                <p style=\"color:rgba(209,213,219,0.85); font-size:13.5px; line-height:1.6;\">The electromechanical system provides stable power transmission and precise control, ensuring smooth operation and consistent rolling performance.<\/p>\n                            <\/div>\n                            <div class=\"auto-card-body\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase tracking-[0.25em] mb-2 px-3 py-1 rounded-full border\" style=\"letter-spacing:0.25em; background:rgba(0,160,233,0.1); border-color:rgba(0,160,233,0.2);\">Drive Control<\/span>\n                                <h3 class=\"text-white font-display\" style=\"color:#fff;\">Power System<\/h3>\n                                <p style=\"color:#9ca3af;\">The electromechanical system provides stable power transmission and precise control, ensuring smooth operation and consistent rolling performance.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n\n                <\/div>\n            <\/div>\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        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<!--TR-03-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: 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]\">Flexible Forming<\/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                        Cone<span class=\"text-shimmer\"> Rolling<\/span>\n                    <\/h2>\n                    <p class=\"reveal text-gray-400 text-lg max-w-2xl mx-auto font-light\">The cone rolling function supports efficient processing of conical workpieces.<\/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\/04\/juanzhui1-1.png\" alt=\"Cone Rolling\" 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\/04\/juanzhui2.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\">Handles conical forming for wider application flexibility<\/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\/04\/juanzhui3.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\">Ensures smooth cone curvature with stable rolling 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<!--TR-04-juanzhui -->\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            .sm\\:flex-row { flex-direction: row; }\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        \/* -- Clamp cards: side-by-side on all screens \u2265640px -- *\/\n        @media (min-width: 640px) {\n            #clamp-card-row { flex-direction: row !important; }\n            #clamp-card-row > .auto-card { flex: 1 1 0%; min-width: 0; }\n        }\n        \/* -- Clamp card image: fixed ratio, overrides other pages' auto-card-img rules -- *\/\n        #clamp-card-row .auto-card-img {\n            height: 0 !important;\n            padding-bottom: 62.5% !important;\n            aspect-ratio: unset !important;\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% !important; aspect-ratio: 16\/10 !important; overflow: hidden; flex-shrink: 0; height: 0 !important; padding-bottom: 62.5% !important; }\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): full-image hover-reveal style *\/\n        \/* Hide desktop overlay on mobile\/tablet by default *\/\n        .desktop-hover-overlay { display: none; }\n        @media (min-width: 1280px) {\n            \/* Switch card to block so aspect-ratio controls height cleanly *\/\n            #clamp-card-row .auto-card {\n                display: block !important;\n                position: relative;\n                overflow: hidden;\n                border-radius: 16px;\n                aspect-ratio: 4\/3;\n                height: auto;\n            }\n            \/* Image fills the entire card *\/\n            #clamp-card-row .auto-card .auto-card-img {\n                aspect-ratio: unset !important;\n                height: 100% !important;\n                padding-bottom: 0 !important;\n                position: absolute !important;\n                inset: 0 !important;\n            }\n            \/* Hide text body on desktop *\/\n            #clamp-card-row .auto-card .auto-card-body { display: none !important; }\n            \/* Hover overlay: slides up from bottom *\/\n            #clamp-card-row .auto-card .desktop-hover-overlay {\n                display: flex;\n                flex-direction: column;\n                justify-content: flex-end;\n                position: absolute;\n                inset: 0;\n                background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 45%, transparent 75%);\n                padding: 28px;\n                opacity: 0;\n                transform: translateY(12px);\n                transition: opacity 0.4s ease, transform 0.4s ease;\n                z-index: 2;\n            }\n            #clamp-card-row .auto-card:hover .desktop-hover-overlay {\n                opacity: 1;\n                transform: translateY(0);\n            }\n            #clamp-card-row .auto-card:hover .auto-card-img img { transform: scale(1.05); }\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    \n    <!-- ============================================ -->\n    <!--  -->\n    <!-- ============================================ -->\n    <section id=\"automation\" 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-black\/10\"><\/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-16 flex flex-col justify-center\">\n            <!-- Centered Title -->\n            <div class=\"text-center px-6 mb-6 sm:mb-8 xl:mb-10\">\n                <div class=\"reveal\"><span class=\"text-brand text-sm font-semibold uppercase tracking-[0.3em]\">Forming Core<\/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\">Stable Rolling<\/h2>\n                <p class=\"reveal text-gray-400 text-base xl:text-lg max-w-2xl mx-auto font-light\">The upper and lower rolls work together to deliver balanced force and stable motion, ensuring smooth rolling and consistent forming accuracy.<\/p>\n            <\/div>\n    \n            <!-- Two-column card layout -->\n            <div class=\"reveal w-full px-6 xl:px-10\">\n                <div id=\"clamp-card-row\" class=\"max-w-[1400px] mx-auto flex flex-col sm:flex-row gap-6\">\n\n                        <!-- Card 1 -->\n                        <div class=\"auto-card flex-1 cursor-pointer\">\n                            <div class=\"auto-card-img\">\n                                <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/shanggun.png\" alt=\"Up Roll\">\n                            <\/div>\n                            <!-- Desktop hover overlay (hidden on mobile\/tablet via CSS) -->\n                            <div class=\"desktop-hover-overlay\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase mb-2\" style=\"letter-spacing:0.25em;\">Primary Drive<\/span>\n                                <h3 style=\"color:#fff; font-size:20px; font-weight:700; margin-bottom:8px;\">Up Roll<\/h3>\n                                <p style=\"color:rgba(209,213,219,0.85); font-size:13.5px; line-height:1.6;\">The upper roll applies main pressure and drives the rolling process, playing a key role in forming accuracy and overall stability.<\/p>\n                            <\/div>\n                            <div class=\"auto-card-body\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase tracking-[0.25em] mb-2 px-3 py-1 rounded-full border\" style=\"letter-spacing:0.25em; background:rgba(0,160,233,0.1); border-color:rgba(0,160,233,0.2);\">Primary Drive<\/span>\n                                <h3 class=\"text-white font-display\" style=\"color:#fff;\">Up Roll<\/h3>\n                                <p style=\"color:#9ca3af;\">The upper roll applies main pressure and drives the rolling process, playing a key role in forming accuracy and overall stability.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Card 2-->\n                        <div class=\"auto-card flex-1 cursor-pointer\">\n                            <div class=\"auto-card-img\">\n                                <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/04\/xiagun.png\" alt=\"Lower Roll\">\n                            <\/div>\n                            <!-- Desktop hover overlay (hidden on mobile\/tablet via CSS) -->\n                            <div class=\"desktop-hover-overlay\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase mb-2\" style=\"letter-spacing:0.25em;\">Support Base<\/span>\n                                <h3 style=\"color:#fff; font-size:20px; font-weight:700; margin-bottom:8px;\">Lower Roll<\/h3>\n                                <p style=\"color:rgba(209,213,219,0.85); font-size:13.5px; line-height:1.6;\">The lower rolls support and position the plate, enabling stable feeding and precise control of rolling radius.<\/p>\n                            <\/div>\n                            <div class=\"auto-card-body\">\n                                <span class=\"inline-block text-brand text-xs font-bold uppercase tracking-[0.25em] mb-2 px-3 py-1 rounded-full border\" style=\"letter-spacing:0.25em; background:rgba(0,160,233,0.1); border-color:rgba(0,160,233,0.2);\">Support Base<\/span>\n                                <h3 class=\"text-white font-display\" style=\"color:#fff;\">Lower Roll<\/h3>\n                                <p style=\"color:#9ca3af;\">The lower rolls support and position the plate, enabling stable feeding and precise control of rolling radius.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n\n                <\/div>\n            <\/div>\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        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<!--TR-05-gun -->\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=\"HARSLE\" \/>\n\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\">TriRoll<span class=\"text-brand\"><br>0420<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">TriRoll<span class=\"text-brand\"><br>1020<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">TriRoll<span class=\"text-brand\"><br>3020<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">TriRoll<span class=\"text-brand\"><br>4020<\/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\">4 mm<\/div><div class=\"spec-cell-label\">Rolling Thickness<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">10 mm<\/div><div class=\"spec-cell-label\">Rolling Thickness<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">30 mm<\/div><div class=\"spec-cell-label\">Rolling Thickness<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">40 mm<\/div><div class=\"spec-cell-label\">Rolling Thickness<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2000 mm<\/div><div class=\"spec-cell-label\">Max Rolling Sheet Length<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2000 mm<\/div><div class=\"spec-cell-label\">Max Rolling Sheet Length<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2000 mm<\/div><div class=\"spec-cell-label\">Max Rolling Sheet Length<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2000 mm<\/div><div class=\"spec-cell-label\">Max Rolling Sheet Length<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">150 mm<\/div><div class=\"spec-cell-label\">Top Roller Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">220 mm<\/div><div class=\"spec-cell-label\">Top Roller Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">370 mm<\/div><div class=\"spec-cell-label\">Top Roller Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">450 mm<\/div><div class=\"spec-cell-label\">Top Roller Diameter<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">120 mm<\/div><div class=\"spec-cell-label\">Lower Rollers Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">160 mm<\/div><div class=\"spec-cell-label\">Lower Rollers Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">270 mm<\/div><div class=\"spec-cell-label\">Lower Rollers Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">360 mm<\/div><div class=\"spec-cell-label\">Lower Rollers Diameter<\/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\">Central Distance\u00a0Between Lower Rollers<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">260 mm<\/div><div class=\"spec-cell-label\">Central Distance\u00a0Between Lower Rollers<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">480 mm<\/div><div class=\"spec-cell-label\">Central Distance\u00a0Between Lower Rollers<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">600 mm<\/div><div class=\"spec-cell-label\">Central Distance\u00a0Between Lower Rollers<\/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\">Min Rolling Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">360 mm<\/div><div class=\"spec-cell-label\">Min Rolling Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">700 mm<\/div><div class=\"spec-cell-label\">Min Rolling Diameter<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">850 mm<\/div><div class=\"spec-cell-label\">Min Rolling Diameter<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">4 m\/min<\/div><div class=\"spec-cell-label\">Rolling Speed<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">4 m\/min<\/div><div class=\"spec-cell-label\">Rolling Speed<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">4 m\/min<\/div><div class=\"spec-cell-label\">Rolling Speed<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">4 m\/min<\/div><div class=\"spec-cell-label\">Rolling Speed<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">2.2+1.1 KW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">7.5+2.2 KW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">22+7.5 KW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">37+18.5 KW<\/div><div class=\"spec-cell-label\">Motor Power<\/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;\">3400*650*1000 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;\">3800*850*1260 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;\">4300*1550*1700 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;\">4800*1900*2200 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<!--TR-07-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=\"HARSLE\" \/>\n\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: TriRoll (Current) -->\n                        <a href=\"http:\/\/www.harsle.com\/TriRoll\/\" 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\/jbj2-1.png\" alt=\"TriRoll three-roll plate bending machine\" 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;\">TriRoll<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Three-roll plate bending machine engineered for rolling cylindrical, conical, and curved workpieces. Features a compact symmetric roll layout with efficient pre-bending capability for versatile sheet metal fabrication.<\/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: QuadRoll -->\n                        <a href=\"http:\/\/www.harsle.com\/QuadRoll\/\" 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\/jbj1-1.png\" alt=\"QuadRoll four-roll plate bending machine\" 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;\">QuadRoll<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Four-roll plate bending machine offering superior pre-bending performance and one-pass rolling capability. The additional side roll eliminates manual repositioning, maximizing throughput for high-volume cylindrical shell 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: AsyRoll -->\n                        <a href=\"http:\/\/www.harsle.com\/AsyRoll\/\" 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\/jbj4-1.png\" alt=\"AsyRoll asymmetric plate bending machine\" 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;\">AsyRoll<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Asymmetric three-roll plate bending machine with an offset lower roll for enhanced pre-bending at both plate ends. Delivers improved edge utilization and reduced flat zones, ideal for medium-to-heavy plate rolling applications.<\/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: AngleRoll -->\n                        <a href=\"http:\/\/www.harsle.com\/AngleRoll\/\" 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\/jbj3-1.png\" alt=\"AngleRoll section bending machine\" 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;\">AngleRoll<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Section bending machine purpose-built for rolling structural profiles including angle iron, flat bar, round bar, square tube, and channel steel. Delivers precise arc radii on complex sections for architectural and structural fabrication.<\/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<!--TR-09-models -->\n","protected":false},"excerpt":{"rendered":"<p>TriRoll Built for reliable, efficient plate rolling Request a Quote Watch Video Smooth Rolling Stable Structure Easy Operation Rolling Process<\/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-75627","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/pages\/75627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/comments?post=75627"}],"version-history":[{"count":0,"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/pages\/75627\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.harsle.com\/es\/wp-json\/wp\/v2\/media?parent=75627"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}