{"id":91253,"date":"2026-10-27T01:33:42","date_gmt":"2026-10-27T01:33:42","guid":{"rendered":"https:\/\/www.harsle.com\/?page_id=91253"},"modified":"2026-10-29T02:52:38","modified_gmt":"2026-10-29T02:52:38","slug":"doorpress","status":"publish","type":"page","link":"https:\/\/www.harsle.com\/pl\/doorpress\/","title":{"rendered":"DoorPress"},"content":{"rendered":"\n<!-- DoorPress 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        \/* -- Safety carousel: responsive width -- *\/\n        #safety-carousel-wrap { width: 90%; }\n        @media (min-width: 640px) {\n            #safety-carousel-wrap { width: 80%; }\n        }\n        @media (min-width: 768px) {\n            #safety-carousel-wrap { width: 70%; }\n        }\n        @media (min-width: 1280px) {\n            #safety-carousel-wrap { width: 1200px; }\n        }\n        \/* -- Back Gauge: desktop 50\/50 split -- *\/\n        @media (min-width: 1280px) {\n            #bg-img-col { width: 50%; flex-shrink: 0; }\n            #bg-text-col { width: 50%; }\n        }\n        \/* -- Back Gauge image: wider ratio on mobile\/tablet -- *\/\n        @media (max-width: 1279px) {\n            .bg-card-wrap { aspect-ratio: 16\/10 !important; }\n            .comp-img-wrap { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }\n        }\n        @media (min-width: 640px) and (max-width: 1279px) {\n            .comp-img-wrap { width: 80% !important; }\n        }\n        @media (min-width: 768px) and (max-width: 1279px) {\n            .comp-img-wrap { width: 70% !important; }\n        }\n\n        .mb-page {\n            font-family: inherit; color: #e0e0e0; overflow-x: hidden; line-height: 1.6;\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n        }\n        .mb-page * { box-sizing: border-box; }\n        .mb-page img { max-width: 100%; height: auto; }\n        .mb-page .servo-card img,\n        .mb-page .bg-card img,\n        .mb-page .comp-img img,\n        .mb-page .auto-card-img img,\n                .mb-page [style*=\"aspect-ratio\"] > img,\n        .mb-page .relative > img.object-cover,\n        .mb-page img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }\n        .mb-page .ctrl-slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; }\n        .mb-page ::selection { background: #00A0E9; color: #fff; }\n        .mb-page button { outline: none !important; box-shadow: none !important; font: inherit; margin: 0; -webkit-appearance: none; appearance: none; }\n        .mb-page .ctrl-tab,\n        .mb-page .ctrl-tab:hover,\n        .mb-page .ctrl-tab:focus,\n        .mb-page .ctrl-tab:active { background: transparent !important; border-top: none !important; border-right: none !important; border-bottom: none !important; }\n        .mb-page .ctrl-tab .ctrl-desc { color: #9ca3af !important; text-transform: none !important; }\n        @media (min-width: 1280px) {\n            .mb-page .ctrl-tab { transition: background 0.3s ease; }\n            .mb-page .ctrl-tab:hover { background: rgba(255,255,255,0.04) !important; }\n            .mb-page .ctrl-tab:hover h4 { color: rgba(255,255,255,0.75) !important; }\n            .mb-page .ctrl-tab.ctrl-active:hover h4 { color: #ffffff !important; }\n            .mb-page .ctrl-tab:hover { border-left-color: rgba(255,255,255,0.3) !important; }\n            .mb-page .ctrl-tab.ctrl-active:hover { border-left-color: #00A0E9 !important; }\n        }\n        .mb-page .hero-btn-quote,\n        .mb-page .hero-btn-video { min-width: 220px; justify-content: center; }\n        @media (max-width: 1279px) {\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video { min-width: 0; width: 72%; }\n        }\n        .mb-page .hero-btn-quote { color: #fff !important; }\n        .mb-page .hero-btn-quote:hover { background: #0080BA !important; color: #fff !important; }\n        .mb-page .hero-btn-video { color: #fff !important; }\n        .mb-page .hero-btn-video:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; border-color: #00A0E9 !important; }\n        .mb-page .app-dot { height: 3px !important; border-radius: 2px !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; border: none !important; line-height: 0 !important; font-size: 0 !important; cursor: pointer; }\n        .mb-page .comp-tab,\n        .mb-page .comp-tab:hover,\n        .mb-page .comp-tab:focus,\n        .mb-page .comp-tab:active { background: transparent !important; border: none !important; display: flex !important; flex-direction: column !important; }\n        .mb-page .comp-tab span { display: block !important; }\n        .mb-page .comp-tab div { width: 100% !important; }\n        .mb-page a { color: inherit; text-decoration: none; }\n    \n        .fp-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; z-index: 1; }\n        .fp-section .fp-bg { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n        .fp-section .fp-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }\n        .fp-section .fp-overlay { position: absolute; top: -20%; left: 0; right: 0; bottom: -20%; }\n    \n        .mb-page section { display: block; position: relative; z-index: 1; }\n        .mb-page .fp-section { display: flex; }\n    \n        [data-parallax] { will-change: transform; }\n        .counter-value { font-variant-numeric: tabular-nums; }\n    \n        .scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }\n        @keyframes scrollBounce {\n            0%, 100% { transform: translateY(0); opacity: 1; }\n            50% { transform: translateY(12px); opacity: 0.5; }\n        }\n    \n        .reveal { opacity: 0; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal.active { opacity: 1; transform: translateY(0); }\n        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-left.active { opacity: 1; transform: translateX(0); }\n        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-right.active { opacity: 1; transform: translateX(0); }\n        .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n        .reveal-scale.active { opacity: 1; transform: scale(1); }\n    \n        .stat-card {\n            position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);\n            backdrop-filter: blur(20px); transition: all 0.5s ease;\n        }\n        .stat-card::before {\n            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;\n            background: linear-gradient(135deg, rgba(0,160,233,0.3), transparent 60%);\n            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n            -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s;\n        }\n        .stat-card:hover::before { opacity: 1; }\n        .stat-card:hover { background: rgba(0,160,233,0.05); transform: translateY(-4px); }\n    \n        .brand-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); transition: all 0.4s ease; }\n        .brand-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(0,160,233,0.4); transform: translateY(-6px); }\n    \n        .text-shimmer {\n            background: linear-gradient(90deg, #fff 0%, #00A0E9 50%, #fff 100%); background-size: 200% 100%;\n            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n            animation: shimmer 3s ease-in-out infinite;\n        }\n        @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }\n    \n        .h-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,160,233,0.5), transparent); }\n        .icon-ring { width: 56px; height: 56px; border: 2px solid rgba(0,160,233,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s; }\n        @media (min-width: 1280px) { .icon-ring { width: 72px; height: 72px; } }\n        .icon-ring:hover { border-color: #00A0E9; background: rgba(0,160,233,0.1); }\n            \n        \/* Scroll-driven transition zone *\/\n        .transition-zone { position: relative; overflow: hidden; }\n        .tz-layer { position: absolute; inset: 0; }\n    \n        .white-zone { background: #ffffff; color: #1a1a1a; }\n        .white-zone .spec-table th { color: #666; }\n        .white-zone .spec-table td { color: #333; border-color: #e5e7eb; }\n        .white-zone .spec-table td.label-cell { color: #111; font-weight: 600; }\n        .white-zone .spec-table tr:hover { background: #f8fafc; }\n    \n        \/* Spec comparison rows *\/\n        .spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: none; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }\n        .spec-row.visible { opacity: 1; transform: translateY(0); }\n        .spec-cell { text-align: center; padding: 18px 8px; }\n        .spec-cell-value { font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.2; }\n        .spec-cell-label { font-size: 11px; color: #aaa; margin-top: 4px; font-weight: 400; }\n        .spec-header { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid #ddd; padding-bottom: 14px; margin-bottom: 0; }\n        .spec-header-cell { text-align: center; }\n        .spec-header-name { font-size: 20px; font-weight: 700; color: #111; }\n        .spec-header-sub { font-size: 11px; color: #aaa; margin-top: 2px; }\n        .spec-learn-more { display:inline-block; margin-top:10px; padding:5px 16px; font-size:11px; font-weight:600; color:#333; text-decoration:none; letter-spacing:0.03em; background:#f1f5f9; border:1px solid #e5e7eb; border-radius:9999px; transition:all 0.3s ease; text-transform:uppercase; }\n        .spec-learn-more:hover { background:#00A0E9; color:#fff; border-color:#00A0E9; }\n        \/* === TABLET & MOBILE (max 1279px): content-fit height === *\/\n        @media (max-width: 1279px) {\n            .fp-section { min-height: auto !important; }\n            .fp-section#hero { min-height: 100vh !important; min-height: 100dvh !important; }\n            .fp-section .fp-bg { top: -10%; bottom: -10%; }\n            .fp-section .fp-overlay { top: -10%; bottom: -10%; }\n            .tooling-card-bg { border: 1px solid rgba(255,255,255,0.08); }\n        }\n        \/* === MOBILE: extra-compact spacing === *\/\n        @media (max-width: 767px) {\n            .tooling-content-wrap { padding: 40px 0 32px !important; }\n        }\n        \/* === TABLET: moderate spacing === *\/\n        @media (min-width: 768px) and (max-width: 1279px) {\n            .tooling-content-wrap { padding: 56px 0 44px !important; }\n        }\n    \n        \/* === DESKTOP tooling padding & form padding === *\/\n        @media (min-width: 1280px) {\n            #tooling > .relative { padding-top: 180px !important; padding-bottom: 160px !important; }\n        }\n    \n        \/* === Spec Mobile Carousel === *\/\n        .spec-carousel { display: none; overflow: hidden; }\n        @media (max-width: 1279px) {\n            .spec-desktop { display: none !important; }\n            .spec-carousel { display: block; }\n        }\n        .spec-carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n        .spec-carousel-slide { min-width: 100%; padding: 0 4px; box-sizing: border-box; }\n        .spec-carousel-slide-inner { background: #f8fafc; border-radius: 16px; padding: 24px 20px; border: 1px solid #eee; }\n        .spec-carousel-model { font-size: 18px; font-weight: 700; color: #111; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px;}\n        .spec-carousel-link { display: inline-block; margin-top: 8px; padding: 5px 16px; font-size: 11px; font-weight: 600; color: #333; text-decoration: none; letter-spacing: 0.03em; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; transition: all 0.3s ease; text-transform: uppercase; }\n        .spec-carousel-link:hover { background: #00A0E9; color: #fff; border-color: #00A0E9; }\n        .spec-carousel-specs { margin-top: 20px; }\n        .spec-carousel-item { text-align: center; padding: 14px 6px; border-bottom: 1px solid #eee; }\n        .spec-carousel-item-value { font-size: 17px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.2; }\n        .spec-carousel-item-label { font-size: 11px; color: #aaa; margin-top: 4px; font-weight: 400; }\n        .spec-carousel-indicator { user-select: none; }\n\n        \/* === Hero background switching === *\/\n        .hero-bg-mobile { display: none !important; }\n        .hero-overlay-mobile { display: none !important; }\n        @media (max-width: 1279px) {\n            .hero-bg-desktop { display: none !important; }\n            .hero-bg-mobile { display: block !important; }\n            .hero-overlay-desktop { display: none !important; }\n            .hero-overlay-mobile { display: block !important; }\n        }\n\n        \/* === Hero & tablet layout === *\/\n        \/* --- Hero: auto-reveal on page load (no scroll needed) --- *\/\n        @keyframes heroFadeUp {\n            from { opacity: 0; transform: translateY(40px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        #hero .reveal {\n            opacity: 0;\n            transform: translateY(40px);\n            animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;\n        }\n        #hero .reveal:nth-child(1) { animation-delay: 0.1s; }\n        #hero .reveal:nth-child(2) { animation-delay: 0.25s; }\n        #hero .reveal:nth-child(3) { animation-delay: 0.4s; }\n        #hero .reveal:nth-child(4) { animation-delay: 0.55s; }\n        #hero .reveal:nth-child(5) { animation-delay: 0.7s; }\n\n        \/* --- Hero: shared mobile+tablet layout --- *\/\n        @media (max-width: 1279px) {\n            #hero .hero-bg-mobile {\n                object-position: center 100%;\n            }\n            #hero > .relative.z-10 {\n                display: flex;\n                align-items: flex-end;\n                justify-content: center;\n                min-height: 100vh;\n                min-height: 100dvh;\n                padding-bottom: 0;\n            }\n            #hero > .relative.z-10 > div > div {\n                max-width: 100%;\n                text-align: center;\n            }\n            #hero > .relative.z-10 h1 { text-align: center; }\n            #hero > .relative.z-10 p { text-align: center; margin-left: auto; margin-right: auto; }\n            #hero > .relative.z-10 .flex.flex-wrap.gap-3 { justify-content: center; }\n            #hero > .relative.z-10 .flex.flex-wrap.gap-6 { justify-content: center; margin-left: auto; margin-right: auto; }\n        }\n        \/* --- Hero: MOBILE only (\u2264767px) --- *\/\n        @media (max-width: 767px) {\n            #hero .hero-bg-mobile {\n                object-position: center 100%;  \/* \u624b\u673a\u7aef\u80cc\u666f\u56fe\u4f4d\u7f6e *\/\n            }\n            #hero > .relative.z-10 > div {\n                width: 100%;\n                padding: 0 20px 40px 20px;  \/* \u624b\u673a\u7aef\u6587\u5b57\u5e95\u90e8\u95f4\u8ddd *\/\n            }\n        }\n        \/* --- Hero: MOBILE portrait only \u2014 \u673a\u5668\u4e0a\u79fb\uff0c\u6587\u6848\u4e0e\u6309\u94ae\u4f4d\u4e8e\u673a\u5668\u4e0b\u65b9 --- *\/\n        @media (max-width: 767px) and (orientation: portrait) {\n            #hero { background-color: #050505; }\n            #hero .fp-bg img.hero-bg-mobile {\n                transform: translateY(-15%);  \/* \u624b\u673a\u7aef\u673a\u5668\u4e0a\u79fb\u5e45\u5ea6\uff1a\u6570\u503c\u8d8a\u5927\u673a\u5668\u8d8a\u9760\u4e0a *\/\n            }\n            #hero > .relative.z-10 > div {\n                padding-bottom: 32px;\n            }\n            #hero > .relative.z-10 p {\n                margin-top: 12px;\n                margin-bottom: 20px;\n            }\n        }\n        \/* --- Hero: TABLET only (768px\u20131279px) --- *\/\n        @media (min-width: 768px) and (max-width: 1279px) {\n            #hero .hero-bg-mobile {\n                object-position: center 10%;  \/* \u5e73\u677f\u7aef\u80cc\u666f\u56fe\u4f4d\u7f6e *\/\n            }\n            #hero > .relative.z-10 > div {\n                width: 100%;\n                padding: 0 24px 60px 24px;  \/* \u5e73\u677f\u7aef\u6587\u5b57\u5e95\u90e8\u95f4\u8ddd *\/\n            }\n        }\n\n        \/* === Hero: short viewport height optimization === *\/\n        \/* Desktop (\u22651280px) \u2014 short viewport: text at bottom, machine visible above *\/\n        @media (min-width: 1280px) and (max-height: 900px) {\n            #hero.fp-section {\n                align-items: flex-end !important;\n            }\n            #hero .fp-bg {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .fp-bg[data-parallax] {\n                transform: none !important;\n            }\n            #hero .fp-bg img.hero-bg-desktop {\n                width: 100% !important;\n                height: auto !important;\n                object-fit: unset !important;\n                position: absolute !important;\n                top: 50% !important;\n                left: 0 !important;\n                transform: translateY(-50%) !important;\n            }\n            #hero .fp-overlay {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .hero-overlay-desktop {\n                background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 30%, transparent 55%),\n                            linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 35%, transparent 65%) !important;\n            }\n            #hero > .relative.z-10 > div:first-child {\n                padding-top: 0 !important;\n                padding-bottom: clamp(4rem, 10vh, 8rem) !important;\n            }\n            #hero h1 {\n                font-size: clamp(2rem, 9vh, 6rem) !important;\n            }\n            #hero > .relative.z-10 p {\n                font-size: clamp(0.8rem, 2.8vh, 1.25rem) !important;\n                margin-bottom: clamp(0.375rem, 1.5vh, 2.5rem) !important;\n                margin-top: clamp(0.25rem, 1.2vh, 1.5rem) !important;\n            }\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video {\n                padding: clamp(0.3rem, 1.2vh, 1rem) clamp(1rem, 2vw, 2rem) !important;\n                font-size: clamp(0.6rem, 1.5vh, 0.875rem) !important;\n                min-width: 140px !important;\n            }\n            #hero .flex.flex-wrap.gap-3 {\n                margin-bottom: 0 !important;\n                gap: clamp(0.375rem, 0.8vh, 1rem) !important;\n            }\n            #hero .border-t {\n                display: none !important;\n            }\n            #hero .xl\\:flex.flex-wrap {\n                display: none !important;\n            }\n        }\n        \/* Tablet & mobile \u2014 landscape or short viewport: text at bottom, machine visible *\/\n        @media (max-width: 1279px) and (orientation: landscape) {\n            #hero .fp-bg {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .fp-bg[data-parallax] {\n                transform: none !important;\n            }\n            #hero .fp-bg img.hero-bg-mobile {\n                width: 100% !important;\n                height: auto !important;\n                object-fit: unset !important;\n                position: absolute !important;\n                top: 50% !important;\n                left: 0 !important;\n                transform: translateY(-50%) !important;\n            }\n            #hero .fp-overlay {\n                top: 0 !important;\n                bottom: 0 !important;\n            }\n            #hero .hero-overlay-mobile {\n                background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 35%, transparent 60%) !important;\n                display: block !important;\n            }\n            #hero > .relative.z-10 > div {\n                padding: 0 20px clamp(4rem, 10vh, 8rem) 20px !important;\n            }\n            #hero h1 {\n                font-size: clamp(1.5rem, 7vh, 3.75rem) !important;\n            }\n            #hero > .relative.z-10 p {\n                font-size: clamp(0.7rem, 2.2vh, 1.125rem) !important;\n                margin-bottom: clamp(0.25rem, 1.2vh, 1.5rem) !important;\n                margin-top: clamp(0.2rem, 0.8vh, 1rem) !important;\n            }\n            .mb-page .hero-btn-quote,\n            .mb-page .hero-btn-video {\n                padding: clamp(0.25rem, 1vh, 0.75rem) clamp(1rem, 3vw, 1.5rem) !important;\n                font-size: clamp(0.55rem, 1.3vh, 0.75rem) !important;\n                width: auto !important;\n                min-width: auto !important;\n            }\n            #hero .flex.flex-wrap.gap-3 {\n                gap: clamp(0.25rem, 0.6vh, 0.75rem) !important;\n                margin-bottom: 0 !important;\n            }\n        }\n\n        \/* === Control section horizontal tabs (below lg breakpoint) === *\/\n        @media (max-width: 1279px) {\n            #control .flex.flex-col.xl\\:flex-row {\n                flex-direction: column !important;\n            }\n            #control .xl\\:w-\\[35\\%\\] {\n                order: 1;\n            }\n            #control .xl\\:w-\\[65\\%\\] {\n                order: 2;\n            }\n            #control .ctrl-mobile-desc {\n                order: 3;\n                display: block !important;\n            }\n            #control .flex.flex-col.justify-between {\n                flex-direction: row !important;\n                gap: 0;\n            }\n            .ctrl-tab {\n                text-align: center !important;\n                padding: 0 !important;\n                padding-bottom: 0 !important;\n                border-left: none !important;\n                border-right: none !important;\n                border-top: none !important;\n                flex: 1 !important;\n                display: flex !important;\n                flex-direction: column !important;\n                align-items: center !important;\n            }\n            .ctrl-tab .pl-4, .ctrl-tab .xl\\:pl-6, .ctrl-tab > div {\n                padding-left: 0 !important;\n                padding-right: 0 !important;\n                width: 100%;\n                text-align: center;\n            }\n            .ctrl-tab h4,\n            .comp-tab span {\n                font-size: 13px !important;\n                margin-bottom: 8px;\n                transition: color 0.3s !important;\n            }\n            .ctrl-tab:hover h4 {\n                color: rgba(255,255,255,0.7) !important;\n            }\n            .ctrl-tab .ctrl-desc {\n                display: none !important;\n            }\n            .ctrl-tab::after {\n                content: '';\n                display: block;\n                width: 100%;\n                height: 2px;\n                background: rgba(255,255,255,0.15);\n                transition: background 0.4s ease;\n            }\n            .ctrl-tab.ctrl-active::after {\n                background: #00A0E9;\n            }\n            .ctrl-tab:hover::after {\n                background: rgba(255,255,255,0.35);\n            }\n            .ctrl-tab.ctrl-active:hover::after {\n                background: #00A0E9;\n            }\n        }\n\n        \/* === MOBILE & TABLET (max 1023px) === *\/\n        @media (max-width: 1279px) {\n    \n            .stat-card { padding: 20px !important; }\n    \n            #hero h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); }\n    \n            #tooling a#tooling-card { min-height: 240px !important; }\n\n            .mb-page .servo-card .servo-card-inner {\n                aspect-ratio: auto !important;\n                display: flex;\n                flex-direction: column;\n            }\n            .mb-page .servo-card .servo-card-inner > img {\n                position: relative !important;\n                inset: auto !important;\n                width: 100% !important;\n                height: auto !important;\n                aspect-ratio: 4\/3;\n                object-fit: cover !important;\n                flex-shrink: 0;\n            }\n            .mb-page .servo-card .servo-card-inner > .servo-overlay {\n                display: none !important;\n            }\n            .mb-page .servo-card .servo-card-inner > .servo-text {\n                position: relative !important;\n                inset: auto !important;\n                background: rgba(17,17,17,0.95);\n                padding: 16px 20px !important;\n            }\n        }\n\n        \/* === Auto card: top image + bottom text === *\/\n        \/* Mobile-first: most compact *\/\n        .auto-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }\n        .auto-card-img { position: relative; width: 100%; aspect-ratio: 16\/10; overflow: hidden; flex-shrink: 0; }\n        .auto-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }\n        .auto-card:hover .auto-card-img img { transform: scale(1.03); }\n        .auto-card-body { padding: 14px 16px; background: rgba(17,17,17,0.95); flex: 1; }\n        .auto-card-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }\n        .auto-card-body p { font-size: 12px; line-height: 1.55; }\n        \/* Tablet portrait (\u2265640px): moderate *\/\n        @media (min-width: 640px) {\n            .auto-card-body { padding: 16px 20px; }\n            .auto-card-body h3 { font-size: 17px; margin-bottom: 7px; }\n            .auto-card-body p { font-size: 13px; line-height: 1.6; }\n        }\n        \/* Tablet landscape (\u2265768px) *\/\n        @media (min-width: 768px) {\n            .auto-card-body { padding: 18px 22px; }\n            .auto-card-body h3 { font-size: 18px; }\n            .auto-card-body p { font-size: 13px; }\n        }\n        \/* Desktop (\u22651280px): comfortable reading *\/\n        @media (min-width: 1280px) {\n            .auto-card { border-radius: 16px; }\n            .auto-card-img { aspect-ratio: unset; height: calc(100vh - 380px); }\n            .auto-card-body { padding: 20px 24px; }\n            .auto-card-body h3 { font-size: 20px; margin-bottom: 8px; }\n            .auto-card-body p { font-size: 13.5px; line-height: 1.6; }\n        }\n\n        \/* === Safety carousel slide image: taller on mobile === *\/\n        .app-slide .auto-card-img { aspect-ratio: 4\/3; }\n        @media (min-width: 640px) {\n            .app-slide .auto-card-img { aspect-ratio: 16\/9; }\n        }\n        @media (min-width: 1280px) {\n            .app-slide .auto-card-img { aspect-ratio: 16\/9; }\n        }\n\n        \/* ============================================ *\/\n        \/* Fluid Responsive Typography                  *\/\n        \/* Scales smoothly across all device widths     *\/\n        \/* Phone (320px) \u2192 Tablet (768\u20131279px)          *\/\n        \/* Desktop (\u22651280px) uses Tailwind xl: classes   *\/\n        \/* ============================================ *\/\n        @media (max-width: 1279px) {\n            \/* \u2500\u2500 Tier 2: Section headings (H2) \u2500\u2500 *\/\n            \/* base text-3xl=1.875rem \u2192 scales to 2.75rem on large tablets *\/\n            .mb-page h2 {\n                font-size: clamp(1.875rem, 4.5vw, 2.75rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 3: Large display numbers (stat counters) \u2500\u2500 *\/\n            \/* base text-4xl=2.25rem \u2192 scales to 3.25rem *\/\n            .mb-page .stat-card .text-4xl {\n                font-size: clamp(2.25rem, 6vw, 3.25rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4a: Card headings \u2014 servo, safety, automation \u2500\u2500 *\/\n            .mb-page .servo-text h3,\n            .mb-page .auto-card-body h3 {\n                font-size: clamp(1.0625rem, 2.5vw, 1.375rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4b: Card headings \u2014 back gauge overlay \u2500\u2500 *\/\n            .mb-page .bg-card-text h4 {\n                font-size: clamp(1rem, 2.2vw, 1.25rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 4c: Stat card titles \u2500\u2500 *\/\n            .mb-page .stat-card h3 {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 5: Body text \u2014 primary descriptions \u2500\u2500 *\/\n            .mb-page p.text-lg {\n                font-size: clamp(1rem, 2.2vw, 1.125rem) !important;\n            }\n            .mb-page p.text-base {\n                font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 6: Body text \u2014 secondary (card descriptions) \u2500\u2500 *\/\n            .mb-page p.text-sm,\n            .mb-page .auto-card-body p,\n            .mb-page .servo-text p {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n\n            \/* \u2500\u2500 Tier 7: Upgrade option tab labels \u2500\u2500 *\/\n            .mb-page .comp-tab span {\n                font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;\n            }\n        }\n\n        \/* === WordPress \/ Elementor \/ Shortcode gap fix === *\/\n        .wp-block-html {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding: 0 !important;\n            clear: none !important;\n        }\n        .entry-content > .wp-block-html + .wp-block-html {\n            margin-top: 0 !important;\n        }\n        .elementor-widget-html,\n        .elementor-widget-html .elementor-widget-container {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .elementor-element + .elementor-element {\n            margin-top: 0 !important;\n        }\n        .elementor-widget:not(:last-child) {\n            margin-bottom: 0 !important;\n        }\n        .wp-block-shortcode {\n            margin: 0 !important;\n            padding: 0 !important;\n        }\n        .mb-page {\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            padding-top: 0;\n            padding-bottom: 0;\n        }\n        \/* Remove parent container padding when mb-page sections are present *\/\n        .entry-content:has(.mb-page),\n        .page-content:has(.mb-page),\n        .post-content:has(.mb-page),\n        article:has(.mb-page) .entry-content,\n        .elementor-widget-container:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n        }\n        .elementor-section:has(.mb-page),\n        .elementor-column:has(.mb-page),\n        .elementor-widget-wrap:has(.mb-page),\n        .e-con:has(.mb-page) {\n            padding-top: 0 !important;\n            padding-bottom: 0 !important;\n            margin-top: 0 !important;\n            margin-bottom: 0 !important;\n            gap: 0 !important;\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- 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\/10\/DoorPress-Hero-Computer.png\" alt=\"DoorPress hydraulic door panel press\">\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\/10\/DoorPress-Hero-Mobile.png\" alt=\"DoorPress hydraulic door panel press \u2014 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                        Door<span class=\"text-brand\">Press<\/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                        Up to 3000 tons of hydraulic force for deep, crisp steel door embossing.\n                    <\/p>\n                    <div class=\"reveal flex flex-wrap gap-3 xl:gap-4 mb-6 xl:mb-16\">\n                        <button onclick=\"openQuoteModal()\" 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()\" 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\">3000T<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Max. Nominal Force<\/div>\n                        <\/div>\n                        <div>\n                            <div class=\"text-2xl xl:text-4xl font-bold text-white font-display\">6<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Plunger Cylinders<\/div>\n                        <\/div>\n                        <div>\n                            <div class=\"text-2xl xl:text-4xl font-bold text-white font-display\">25 MPa<\/div>\n                            <div class=\"text-xs text-gray-500 uppercase tracking-widest mt-1\">Working Pressure<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Video Lightbox Modal -->\n    <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()\">\n        <div style=\"position:relative;width:92vw;max-width:1100px;aspect-ratio:16\/9;\" onclick=\"event.stopPropagation()\">\n            <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>\n            <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>\n        <\/div>\n    <\/div>\n\n    <!-- Quote Popup Modal -->\n    <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()\">\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()\" 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;highlighted_vertical_offset&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;highlighted_vertical_offset_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;highlighted_vertical_offset_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&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=\"HARSLE - 2nd page-CTA-\u4e0d\u80fd\u5220\" aria-label=\"HARSLE - 2nd page-CTA-\u4e0d\u80fd\u5220\">\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        \/\/ Counter animation\n        document.querySelectorAll('.counter-value').forEach(el => {\n            new IntersectionObserver((entries) => {\n                entries.forEach(e => {\n                    if (!e.isIntersecting || el.dataset.counted) return;\n                    el.dataset.counted = 'true';\n                    const target = parseInt(el.dataset.target);\n                    let cur = 0; const step = target \/ 60;\n                    const t = setInterval(() => {\n                        cur += step;\n                        if (cur >= target) { el.textContent = target; clearInterval(t); }\n                        else el.textContent = Math.floor(cur);\n                    }, 16);\n                });\n            }, { threshold: 0.5 }).observe(el);\n        });\n    \n        var isMobileParallax = window.innerWidth < 1280;\n        window.addEventListener('resize', function(){ isMobileParallax = window.innerWidth < 1280; });\n        window.addEventListener('scroll', () => {\n            var factor = isMobileParallax ? 0.03 : 0.08;\n            document.querySelectorAll('[data-parallax]').forEach(el => {\n                const parent = el.closest('section, [style*=\"height\"]');\n                if (!parent) return;\n                const r = parent.getBoundingClientRect();\n                const h = parent.offsetHeight;\n                const maxShift = h * (isMobileParallax ? 0.06 : 0.15);\n                const raw = r.top * factor;\n                const clamped = Math.max(-maxShift, Math.min(maxShift, raw));\n                el.style.transform = 'translateY(' + clamped + 'px)';\n            });\n        });\n    \n        \/\/ ========== Servo Drive Toggle ==========\n        (function() {\n            var togBtns = document.querySelectorAll('.servo-tog-btn');\n            var cards = document.querySelectorAll('.servo-card');\n            var bgs = document.querySelectorAll('.servo-bg');\n            if (!togBtns.length) return;\n    \n            togBtns.forEach(function(btn) {\n                btn.addEventListener('click', function() {\n                    var idx = parseInt(this.dataset.servo);\n                    togBtns.forEach(function(b) {\n                        var active = parseInt(b.dataset.servo) === idx;\n                        b.style.background = active ? '#fff' : 'transparent';\n                        b.style.color = active ? '#111' : 'rgba(255,255,255,0.5)';\n                    });\n                    cards.forEach(function(c) {\n                        var show = parseInt(c.dataset.servo) === idx;\n                        c.style.opacity = show ? '1' : '0';\n                        c.style.transform = show ? 'translateY(0)' : 'translateY(20px)';\n                        c.style.pointerEvents = show ? 'auto' : 'none';\n                    });\n                    bgs.forEach(function(bg) {\n                        bg.style.opacity = parseInt(bg.dataset.servo) === idx ? '1' : '0';\n                    });\n                });\n            });\n        })();\n    \n        \/\/ ========== Back Gauge Tab Switcher ==========\n        (function() {\n            const tabs = document.querySelectorAll('.bg-tab');\n            const cards = document.querySelectorAll('.bg-card');\n            const texts = document.querySelectorAll('.bg-card-text');\n            let activeBg = 0;\n    \n            tabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const idx = parseInt(tab.dataset.bg);\n                    if (idx === activeBg) return;\n                    activeBg = idx;\n    \n                    cards.forEach((c, i) => { c.style.opacity = i === idx ? '1' : '0'; });\n                    texts.forEach((t, i) => { t.style.opacity = i === idx ? '1' : '0'; });\n                    tabs.forEach((tb, i) => {\n                        if (i === idx) {\n                            tb.style.background = '#fff';\n                            tb.style.color = '#111';\n                        } else {\n                            tb.style.background = 'transparent';\n                            tb.style.color = 'rgba(255,255,255,0.5)';\n                        }\n                    });\n                });\n            });\n        })();\n    \n        \/\/ ========== MasterControl Tab Switcher ==========\n        (function() {\n            const tabs = document.querySelectorAll('.ctrl-tab');\n            const slides = document.querySelectorAll('.ctrl-slide');\n            const bgs = document.querySelectorAll('.ctrl-bg');\n            const mobileDesc = document.getElementById('ctrl-mobile-desc');\n            const descMap = {};\n            tabs.forEach(function(tb) {\n                var key = tb.dataset.ctrl;\n                var d = tb.querySelector('.ctrl-desc');\n                descMap[key] = d ? d.textContent : '';\n            });\n            let activeCtrl = '0';\n\n            tabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const key = tab.dataset.ctrl;\n                    if (key === activeCtrl) return;\n                    activeCtrl = key;\n\n                    slides.forEach(s => {\n                        if (s.dataset.ctrl === key) { s.style.opacity = '1'; s.style.transform = 'scale(1)'; }\n                        else { s.style.opacity = '0'; s.style.transform = 'scale(1.04)'; }\n                    });\n                    bgs.forEach(b => { b.style.opacity = b.dataset.ctrl === key ? '1' : '0'; });\n                    tabs.forEach(tb => {\n                        const h4 = tb.querySelector('h4');\n                        const desc = tb.querySelector('.ctrl-desc');\n                        if (tb.dataset.ctrl === key) {\n                            tb.classList.add('ctrl-active');\n                            tb.style.borderLeftColor = '#00A0E9';\n                            h4.style.color = '#ffffff';\n                            desc.style.opacity = '1';\n                            desc.style.transform = 'translateY(0)';\n                            desc.style.color = '#9ca3af';\n                        } else {\n                            tb.classList.remove('ctrl-active');\n                            tb.style.borderLeftColor = 'rgba(255,255,255,0.1)';\n                            h4.style.color = 'rgba(255,255,255,0.4)';\n                            desc.style.opacity = '0';\n                            desc.style.transform = 'translateY(6px)';\n                        }\n                    });\n                    if (mobileDesc) {\n                        mobileDesc.querySelector('p').textContent = descMap[key] || '';\n                    }\n                });\n            });\n        })();\n    \n        \/\/ ========== Premium Components Tab Switcher ==========\n        (function() {\n            const tabs = document.querySelectorAll('.comp-tab');\n            const slides = document.querySelectorAll('.comp-slide');\n            const texts = document.querySelectorAll('.comp-text');\n            const imgs = document.querySelectorAll('.comp-img');\n            let activeComp = 0;\n    \n            tabs.forEach(tab => {\n                tab.addEventListener('click', () => {\n                    const idx = parseInt(tab.dataset.comp);\n                    if (idx === activeComp) return;\n                    activeComp = idx;\n    \n                    slides.forEach((s, i) => {\n                        s.style.opacity = i === idx ? '1' : '0';\n                        s.style.zIndex = i === idx ? '1' : '0';\n                    });\n                    texts.forEach((t, i) => { t.style.opacity = i === idx ? '1' : '0'; });\n                    imgs.forEach((img, i) => { img.style.opacity = i === idx ? '1' : '0'; });\n                    tabs.forEach((tb, i) => {\n                        const span = tb.querySelector('span');\n                        const line = tb.querySelector('div');\n                        if (i === idx) {\n                            span.style.color = '#ffffff';\n                            line.className = line.className.replace('bg-white\/15', 'bg-brand');\n                        } else {\n                            span.style.color = 'rgba(255,255,255,0.4)';\n                            line.className = line.className.replace('bg-brand', 'bg-white\/15');\n                        }\n                    });\n                });\n            });\n        })();\n    \n        \/\/ ========== Automation Solutions Carousel ==========\n        (function() {\n            var track = document.getElementById('auto-track');\n            var cards = document.querySelectorAll('.auto-card');\n            var prevBtn = document.getElementById('auto-prev');\n            var nextBtn = document.getElementById('auto-next');\n            var counter = document.getElementById('auto-counter');\n            if (!track || cards.length === 0) return;\n            var current = 0;\n            var total = cards.length;\n    \n            function getShift() {\n                var card = cards[0];\n                return card.offsetWidth + parseFloat(getComputedStyle(card).marginRight);\n            }\n    \n            function goTo(idx) {\n                current = idx;\n                if (current >= total) current = 0;\n                if (current < 0) current = total - 1;\n                track.style.transform = 'translateX(-' + (current * getShift()) + 'px)';\n                counter.textContent = String(current + 1).padStart(2, '0') + ' \/ ' + String(total).padStart(2, '0');\n            }\n    \n            nextBtn.addEventListener('click', function() { goTo(current + 1); });\n            prevBtn.addEventListener('click', function() { goTo(current - 1); });\n    \n            var startX = 0, moveX = 0;\n            track.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; }, { passive: true });\n            track.addEventListener('touchmove', function(e) { moveX = e.touches[0].clientX - startX; }, { passive: true });\n            track.addEventListener('touchend', function() {\n                if (Math.abs(moveX) > 50) goTo(current + (moveX < 0 ? 1 : -1));\n                moveX = 0;\n            });\n        })();\n    \n        \/\/ ========== Upgrade Accessories Carousel ==========\n        (function() {\n            const track = document.getElementById('app-carousel-track');\n            if (!track) return;\n            const slides = track.querySelectorAll('.app-slide');\n            const prevBtn = document.getElementById('app-prev');\n            const nextBtn = document.getElementById('app-next');\n            const dots = document.querySelectorAll('.app-dot');\n            const counterEl = document.getElementById('app-counter');\n            const total = slides.length;\n            let cur = 0, animating = false;\n    \n            function goTo(i) {\n                if (animating) return;\n                animating = true;\n                cur = (i + total) % total;\n                track.style.transform = 'translateX(-' + (cur * 100) + '%)';\n                dots.forEach((d, j) => {\n                    if (j === cur) {\n                        d.style.background = '#00A0E9';\n                        d.style.width = '24px';\n                    } else {\n                        d.style.background = 'rgba(255,255,255,0.2)';\n                        d.style.width = '10px';\n                    }\n                });\n                counterEl.textContent = String(cur + 1).padStart(2, '0') + ' \/ ' + String(total).padStart(2, '0');\n                setTimeout(() => { animating = false; }, 700);\n            }\n            prevBtn.addEventListener('click', () => goTo(cur - 1));\n            nextBtn.addEventListener('click', () => goTo(cur + 1));\n            dots.forEach(d => d.addEventListener('click', () => goTo(parseInt(d.dataset.index))));\n    \n            let sx = 0, drag = false;\n            const c = document.getElementById('app-carousel');\n            c.addEventListener('touchstart', e => { sx = e.touches[0].clientX; drag = true; }, { passive: true });\n            c.addEventListener('touchend', e => {\n                if (!drag) return; drag = false;\n                const dx = sx - e.changedTouches[0].clientX;\n                if (Math.abs(dx) > 50) dx > 0 ? goTo(cur + 1) : goTo(cur - 1);\n            });\n        })();\n    \n        \/\/ ========== Tooling Section: Scroll-Driven Dark-to-White + Card Shrink ==========\n        (function() {\n            const section = document.getElementById('tooling');\n            if (!section) return;\n            const darkL = document.getElementById('tooling-dark');\n            const whiteL = document.getElementById('tooling-white');\n            const mainTxts = section.querySelectorAll('.tooling-txt-main');\n            const subTxts = section.querySelectorAll('.tooling-txt-sub');\n            const cardBgs = section.querySelectorAll('.tooling-card-bg');\n            const card = document.getElementById('tooling-card');\n    \n            function lerp(a, b, t) { return a + (b - a) * t; }\n    \n            function update() {\n                const rect = section.getBoundingClientRect();\n                const vh = window.innerHeight;\n    \n                \/\/ --- Background transition ---\n                const totalRange = rect.height + vh * 0.15;\n                const scrolled = vh - rect.top;\n                const raw = Math.max(0, Math.min(1, scrolled \/ totalRange));\n                const eased = raw < 0.5\n                    ? 2 * raw * raw\n                    : 1 - Math.pow(-2 * raw + 2, 2) \/ 2;\n    \n                whiteL.style.opacity = eased;\n                darkL.style.opacity = 1 - eased * 0.4;\n    \n                const c = Math.round(lerp(255, 17, eased));\n                mainTxts.forEach(el => { el.style.color = 'rgb(' + c + ',' + c + ',' + c + ')'; });\n    \n                const sc = Math.round(lerp(255, 102, eased));\n                const sa = lerp(0.5, 0.8, eased).toFixed(2);\n                subTxts.forEach(el => { el.style.color = 'rgba(' + sc + ',' + sc + ',' + sc + ',' + sa + ')'; });\n    \n                \/\/ --- Card backgrounds: dark bg \u2192 light bg ---\n                const bgR = Math.round(lerp(30, 243, eased));\n                const bgG = Math.round(lerp(30, 244, eased));\n                const bgB = Math.round(lerp(35, 246, eased));\n                const bdR = Math.round(lerp(50, 229, eased));\n                const bdG = Math.round(lerp(50, 231, eased));\n                const bdB = Math.round(lerp(55, 235, eased));\n                cardBgs.forEach(el => {\n                    el.style.background = 'rgb(' + bgR + ',' + bgG + ',' + bgB + ')';\n                    el.style.borderColor = 'rgb(' + bdR + ',' + bdG + ',' + bdB + ')';\n                });\n    \n                \/\/ --- Card shrink: oversized \u2192 normal size ---\n                if (card) {\n                    const cardShrinkRange = vh * 0.9;\n                    const cardScrolled = vh - rect.top;\n                    const cp = Math.max(0, Math.min(1, cardScrolled \/ cardShrinkRange));\n                    const ce = cp < 0.5 ? 2 * cp * cp : 1 - Math.pow(-2 * cp + 2, 2) \/ 2;\n    \n                    const s = lerp(1.55, 1, ce);\n                    const r = Math.round(lerp(0, 16, ce));\n                    card.style.transform = 'scale(' + s.toFixed(4) + ')';\n                    card.style.borderRadius = r + 'px';\n                }\n            }\n            window.addEventListener('scroll', update, { passive: true });\n            update();\n        })();\n    \n        \/\/ ========== Spec Rows Scroll Reveal (bidirectional) ==========\n        (function() {\n            const rows = document.querySelectorAll('.spec-row');\n            const header = document.querySelector('.spec-header');\n    \n            const rowObs = new IntersectionObserver((entries) => {\n                entries.forEach(e => {\n                    if (e.isIntersecting) {\n                        e.target.classList.add('visible');\n                    } else {\n                        e.target.classList.remove('visible');\n                    }\n                });\n            }, { threshold: 0.15, rootMargin: '0px 0px -30px 0px' });\n            rows.forEach((r, i) => {\n                r.style.transitionDelay = (i * 0.04) + 's';\n                rowObs.observe(r);\n            });\n    \n            if (header) {\n                header.style.opacity = '0';\n                header.style.transform = 'translateY(15px)';\n                header.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n                const hObs = new IntersectionObserver((entries) => {\n                    entries.forEach(e => {\n                        if (e.isIntersecting) {\n                            e.target.style.opacity = '1';\n                            e.target.style.transform = 'translateY(0)';\n                        } else {\n                            e.target.style.opacity = '0';\n                            e.target.style.transform = 'translateY(15px)';\n                        }\n                    });\n                }, { threshold: 0.1 });\n                hObs.observe(header);\n            }\n        })();\n\n        \/\/ ========== Spec Mobile Carousel ==========\n        (function() {\n            const carousel = document.getElementById('spec-carousel');\n            if (!carousel) return;\n\n            const headerCells = document.querySelectorAll('.spec-header-cell');\n            const specRows = document.querySelectorAll('.spec-row');\n            const numModels = headerCells.length;\n            if (numModels === 0) return;\n\n            const models = [];\n            headerCells.forEach(function(cell, i) {\n                var name = cell.querySelector('.spec-header-name').textContent;\n                var linkEl = cell.querySelector('.spec-learn-more');\n                var href = linkEl ? linkEl.getAttribute('href') : '#';\n                var specs = [];\n                specRows.forEach(function(row) {\n                    var cells = row.querySelectorAll('.spec-cell');\n                    if (cells[i]) {\n                        specs.push({\n                            value: cells[i].querySelector('.spec-cell-value').textContent,\n                            label: cells[i].querySelector('.spec-cell-label').textContent\n                        });\n                    }\n                });\n                models.push({ name: name, href: href, specs: specs });\n            });\n\n            var trackHTML = '<div class=\"spec-carousel-track\">';\n            models.forEach(function(m, i) {\n                trackHTML += '<div class=\"spec-carousel-slide\"><div class=\"spec-carousel-slide-inner\">';\n                trackHTML += '<div style=\"text-align:center;\">';\n                trackHTML += '<div class=\"spec-carousel-model\">' + m.name + '<\/div>';\n                trackHTML += '<\/div>';\n                trackHTML += '<div class=\"spec-carousel-specs\">';\n                m.specs.forEach(function(s) {\n                    trackHTML += '<div class=\"spec-carousel-item\">';\n                    trackHTML += '<div class=\"spec-carousel-item-value\">' + s.value + '<\/div>';\n                    trackHTML += '<div class=\"spec-carousel-item-label\">' + s.label + '<\/div>';\n                    trackHTML += '<\/div>';\n                });\n                trackHTML += '<\/div>';\n                trackHTML += '<div style=\"text-align:center; margin-top:16px;\">';\n                trackHTML += '<a href=\"' + m.href + '\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spec-carousel-link\">Learn More<\/a>';\n                trackHTML += '<\/div>';\n                trackHTML += '<\/div><\/div>';\n            });\n            trackHTML += '<\/div>';\n            var indicatorHTML = '<div class=\"spec-carousel-indicator\" style=\"display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;\">';\n            for (var d = 0; d < numModels; d++) {\n                var dotBg = d === 0 ? '#00A0E9' : 'rgba(0,0,0,0.15)';\n                var dotW = d === 0 ? '24px' : '8px';\n                indicatorHTML += '<span class=\"spec-dot\" data-idx=\"' + d + '\" style=\"display:inline-block;height:3px;width:' + dotW + ';border-radius:2px;background:' + dotBg + ';cursor:pointer;transition:all 0.3s;\"><\/span>';\n            }\n            indicatorHTML += '<span class=\"spec-carousel-counter\" style=\"margin-left:8px;color:#aaa;font-size:12px;font-family:ui-monospace,monospace;\">01 \/ 0' + numModels + '<\/span>';\n            indicatorHTML += '<\/div>';\n            carousel.innerHTML = trackHTML + indicatorHTML;\n\n            var track = carousel.querySelector('.spec-carousel-track');\n            var counter = carousel.querySelector('.spec-carousel-counter');\n            var specDots = carousel.querySelectorAll('.spec-dot');\n            var current = 0;\n\n            function goTo(idx) {\n                if (idx < 0) idx = 0;\n                if (idx >= numModels) idx = numModels - 1;\n                current = idx;\n                track.style.transform = 'translateX(-' + (current * 100) + '%)';\n                var c = (current + 1).toString().padStart(2, '0');\n                var t = numModels.toString().padStart(2, '0');\n                if (counter) counter.textContent = c + ' \/ ' + t;\n                specDots.forEach(function(dot, i) {\n                    dot.style.background = i === current ? '#00A0E9' : 'rgba(0,0,0,0.15)';\n                    dot.style.width = i === current ? '24px' : '8px';\n                });\n            }\n\n            specDots.forEach(function(dot) {\n                dot.addEventListener('click', function() {\n                    goTo(parseInt(this.getAttribute('data-idx')));\n                });\n            });\n\n            var startX = 0, startY = 0, moveX = 0, isDragging = false, isHorizontal = null;\n            track.addEventListener('touchstart', function(e) {\n                startX = e.touches[0].clientX;\n                startY = e.touches[0].clientY;\n                moveX = 0;\n                isDragging = true;\n                isHorizontal = null;\n                track.style.transition = 'none';\n            }, { passive: true });\n            track.addEventListener('touchmove', function(e) {\n                if (!isDragging) return;\n                var dx = e.touches[0].clientX - startX;\n                var dy = e.touches[0].clientY - startY;\n                if (isHorizontal === null) {\n                    isHorizontal = Math.abs(dx) > Math.abs(dy);\n                }\n                if (!isHorizontal) return;\n                e.preventDefault();\n                moveX = dx;\n                var pct = -current * 100 + (moveX \/ track.offsetWidth) * 100;\n                track.style.transform = 'translateX(' + pct + '%)';\n            }, { passive: false });\n            track.addEventListener('touchend', function() {\n                if (!isDragging) return;\n                isDragging = false;\n                track.style.transition = '';\n                if (isHorizontal && Math.abs(moveX) > 50) {\n                    goTo(moveX < 0 ? current + 1 : current - 1);\n                } else {\n                    goTo(current);\n                }\n            }, { passive: true });\n        })();\n    })();\n    <\/script>\n\n    <!-- Video Lightbox JS -->\n    <script>\n    function openVideoModal() {\n        var modal = document.getElementById('video-modal');\n        var iframe = document.getElementById('video-modal-iframe');\n        iframe.src = 'https:\/\/www.youtube.com\/embed\/arkBu9APK8U?si=H1MX4e2GBhiDpRE9&autoplay=1&rel=0&modestbranding=1';\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    }\n    function closeVideoModal() {\n        var modal = document.getElementById('video-modal');\n        var iframe = document.getElementById('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);\n    document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeVideoModal(); closeQuoteModal(); } });\n\n    function openQuoteModal() {\n        var modal = document.getElementById('quote-modal');\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    }\n    function closeQuoteModal() {\n        var modal = document.getElementById('quote-modal');\n        modal.style.display = 'none';\n        document.body.style.overflow = '';\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<!-- \u9996\u9875 -->\n\n\n\n<!-- DoorPress Series \u2014 Overview Section (Fast, Reliable Embossing) \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        \/* ============================================ *\/\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        .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\n        \/* ===== DoorPress overview section ===== *\/\n        .dp-sec { padding: 72px 0; }\n        @media (min-width: 1280px) { .dp-sec { padding: 112px 0; } }\n        .dp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n        @media (min-width: 1280px) { .dp-wrap { padding: 0 40px; } }\n        .mb-page .dp-dark { background: #050505; color: #e0e0e0; }\n        .mb-page .dp-eyebrow { color: #00A0E9; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }\n        .mb-page .dp-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 14px 0 0; letter-spacing: -0.02em; }\n        @media (min-width: 1280px) { .mb-page .dp-h2 { font-size: 3.5rem; } }\n        .mb-page .dp-dark .dp-h2, .mb-page .dp-dark h3, .mb-page .dp-dark h4 { color: #fff; }\n        .mb-page .dp-lead { font-size: 1.125rem; font-weight: 300; line-height: 1.7; margin: 20px 0 0; max-width: 720px; }\n        .mb-page .dp-dark .dp-lead { color: #9ca3af; }\n        .dp-mt { margin-top: 48px; }\n        @media (min-width: 1280px) { .dp-mt { margin-top: 64px; } }\n        .dp-split { display: flex; flex-direction: column; gap: 32px; }\n        .dp-split > * { min-width: 0; }\n        @media (min-width: 1280px) {\n            .dp-split { flex-direction: row; align-items: center; gap: 64px; }\n            .dp-split > * { flex: 1 1 0; }\n            .dp-split.dp-split-top { align-items: flex-start; }\n        }\n        .dp-grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }\n        @media (min-width: 1280px) { .dp-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } }\n        .dp-media { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }\n        .dp-media img { display: block; width: 100%; height: auto; }\n        .dp-media-round { border-radius: 24px; }\n        .mb-page .dp-checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr; gap: 12px; }\n        @media (min-width: 640px) { .mb-page .dp-checks { grid-template-columns: 1fr 1fr; } }\n        .mb-page .dp-checks li { color: #e5e7eb; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; margin: 0; }\n        .mb-page .dp-checks i { color: #00A0E9; font-size: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,160,233,0.4); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n        .dp-stat-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,160,233,0.12); color: #00A0E9; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 18px; }\n        .mb-page .stat-card h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 8px; color: #fff; }\n        .mb-page .stat-card p { font-size: 0.875rem; line-height: 1.6; color: #9ca3af; margin: 0; }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 2: OVERVIEW \u2014 Function & Key Advantages -->\n    <!-- ============================================ -->\n    <section id=\"overview\" class=\"dp-sec dp-dark\">\n        <div class=\"dp-wrap\">\n            <div class=\"dp-split\">\n                <div>\n                    <div class=\"reveal\"><span class=\"dp-eyebrow\">Door Panel Embossing<\/span><\/div>\n                    <h2 class=\"reveal dp-h2\">Fast, Reliable <span class=\"text-brand\">Embossing<\/span><\/h2>\n                    <p class=\"reveal dp-lead\">A high-performance hydraulic forming system built specifically to create surface textures on metal door panels. Precisely aligned upper and lower molds apply uniform pressure to the sheet, producing crisp, three-dimensional patterns with stable, repeatable results \u2014 for every pattern, texture and structural design you need.<\/p>\n                    <ul class=\"reveal dp-checks\">\n                        <li><i class=\"fas fa-check\"><\/i>High-pressure hydraulic system<\/li>\n                        <li><i class=\"fas fa-check\"><\/i>Precise embossing control<\/li>\n                        <li><i class=\"fas fa-check\"><\/i>Wide application<\/li>\n                        <li><i class=\"fas fa-check\"><\/i>High security<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"reveal-right\">\n                    <div class=\"dp-media dp-media-round\">\n                        <img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Door-Panel-Embossing.png\" alt=\"DoorPress upper and lower molds embossing a steel door panel\" loading=\"lazy\">\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"dp-grid-4 dp-mt\">\n                <div class=\"stat-card reveal rounded-2xl p-6 xl:p-8\">\n                    <div class=\"dp-stat-icon\"><i class=\"fas fa-crosshairs\"><\/i><\/div>\n                    <h3>High Precision<\/h3>\n                    <p>Precisely aligned upper and lower molds for sharp, accurate patterns.<\/p>\n                <\/div>\n                <div class=\"stat-card reveal rounded-2xl p-6 xl:p-8\">\n                    <div class=\"dp-stat-icon\"><i class=\"fas fa-layer-group\"><\/i><\/div>\n                    <h3>Stable Forming<\/h3>\n                    <p>Uniform pressure across the whole sheet, panel after panel.<\/p>\n                <\/div>\n                <div class=\"stat-card reveal rounded-2xl p-6 xl:p-8\">\n                    <div class=\"dp-stat-icon\"><i class=\"fas fa-hourglass-half\"><\/i><\/div>\n                    <h3>Long Service<\/h3>\n                    <p>Chrome-plated cylinders and imported seals for a longer lifetime.<\/p>\n                <\/div>\n                <div class=\"stat-card reveal rounded-2xl p-6 xl:p-8\">\n                    <div class=\"dp-stat-icon\"><i class=\"fas fa-hand-pointer\"><\/i><\/div>\n                    <h3>Easy Operation<\/h3>\n                    <p>PLC control with an optional touchscreen for intuitive operation.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var els = document.querySelectorAll('#overview .reveal, #overview .reveal-left, #overview .reveal-right');\n        if ('IntersectionObserver' in window) {\n            var obs = 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            els.forEach(function(el) { obs.observe(el); });\n        } else {\n            els.forEach(function(el) { el.classList.add('active'); });\n        }\n    })();\n    <\/script>\n\n\n\n<!-- DoorPress Series \u2014 Oil Cylinder Section \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        \/* ============================================ *\/\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\n        \/* ===== DoorPress oil cylinder section ===== *\/\n        .dp-sec { padding: 72px 0; }\n        @media (min-width: 1280px) { .dp-sec { padding: 112px 0; } }\n        .dp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n        @media (min-width: 1280px) { .dp-wrap { padding: 0 40px; } }\n        .mb-page .dp-dark { background: #050505; color: #e0e0e0; }\n        .mb-page .dp-eyebrow { color: #00A0E9; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }\n        .mb-page .dp-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 14px 0 0; letter-spacing: -0.02em; }\n        @media (min-width: 1280px) { .mb-page .dp-h2 { font-size: 3.5rem; } }\n        .mb-page .dp-dark .dp-h2, .mb-page .dp-dark h3 { color: #fff; }\n        .mb-page .dp-lead { font-size: 1.125rem; font-weight: 300; line-height: 1.7; margin: 20px 0 0; max-width: 720px; }\n        .mb-page .dp-dark .dp-lead { color: #9ca3af; }\n        .mb-page .dp-note { font-size: 12px; color: #888; margin: 0; }\n        .dp-head { margin-bottom: 40px; }\n        @media (min-width: 1280px) { .dp-head { margin-bottom: 56px; } }\n\n        .dp-split { display: flex; flex-direction: column; gap: 32px; }\n        .dp-split > * { min-width: 0; }\n        @media (min-width: 1280px) {\n            .dp-split { flex-direction: row; align-items: center; gap: 64px; }\n            .dp-split > * { flex: 1 1 0; }\n        }\n        .dp-stack { display: grid; }\n        .dp-stack > * { grid-area: 1 \/ 1; transition: opacity 0.5s ease; min-width: 0; }\n        .dp-stack > .comp-text { align-self: center; }\n        .mb-page .comp-text .dp-body { margin-bottom: 0; }\n        .dp-media-light { background: linear-gradient(180deg, #f5f7fa 0%, #e6eaf0 100%); border-radius: 16px; overflow: hidden; }\n\n        \/* Tabs *\/\n        .dp-comp-tabs { display: flex; gap: 16px; margin-bottom: 32px; }\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 .dp-comp-tabs .comp-tab { flex: 1; text-align: left; padding: 0 !important; cursor: pointer; }\n        .mb-page .comp-tab span { display: block !important; font-size: 15px; font-weight: 600; margin-bottom: 12px; transition: color 0.3s; }\n        .mb-page .comp-tab div { width: 100% !important; transition: background-color 0.4s; }\n        @media (min-width: 1280px) { .dp-comp-tabs { gap: 24px; margin-bottom: 48px; } .mb-page .comp-tab span { font-size: 18px; } }\n        @media (max-width: 1279px) { .mb-page .comp-tab span { font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important; } }\n\n        \/* Image + text *\/\n        .comp-img-wrap { aspect-ratio: 16\/10; grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr); }\n        .comp-img-wrap > * { min-height: 0; overflow: hidden; }\n        .comp-img { height: 100%; }\n        .mb-page .comp-img img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; }\n        @media (max-width: 1279px) { .comp-img-wrap { width: 90%; margin-left: auto; margin-right: auto; } }\n        @media (min-width: 640px) and (max-width: 1279px) { .comp-img-wrap { width: 80%; } }\n        @media (min-width: 768px) and (max-width: 1279px) { .comp-img-wrap { width: 70%; } }\n        .mb-page .dp-h3 { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; }\n        @media (min-width: 1280px) { .mb-page .dp-h3 { font-size: 2rem; } }\n        .mb-page .dp-body { font-size: 1rem; line-height: 1.75; color: #9ca3af; margin: 0 0 14px; }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 5: OIL CYLINDER \u2014 Tab Switcher -->\n    <!-- ============================================ -->\n    <section id=\"cylinder\" class=\"dp-sec dp-dark\" style=\"background:#0a0a0a;\">\n        <div class=\"dp-wrap\">\n            <div class=\"dp-head\">\n                <div class=\"reveal\"><span class=\"dp-eyebrow\">Core Components<\/span><\/div>\n                <h2 class=\"reveal dp-h2\">Oil <span class=\"text-brand\">Cylinder<\/span><\/h2>\n                <p class=\"reveal dp-lead\">The link between hydraulic control and the machine. Every cylinder is designed with computer-aided calculations and drawings and built in our own dedicated factory.<\/p>\n            <\/div>\n\n            <div class=\"reveal dp-comp-tabs\">\n                <button class=\"comp-tab\" data-comp=\"0\"><span style=\"color:#ffffff;\">Plunger Cylinder<\/span><div class=\"h-[2px] bg-brand\"><\/div><\/button>\n                <button class=\"comp-tab\" data-comp=\"1\"><span style=\"color:rgba(255,255,255,0.4);\">Seal Rings<\/span><div class=\"h-[2px] bg-white\/15\"><\/div><\/button>\n                <button class=\"comp-tab\" data-comp=\"2\"><span style=\"color:rgba(255,255,255,0.4);\">Chrome Coating<\/span><div class=\"h-[2px] bg-white\/15\"><\/div><\/button>\n            <\/div>\n\n            <div class=\"dp-split\">\n                <div class=\"comp-img-wrap dp-stack dp-media-light reveal\">\n                    <div class=\"comp-img\" style=\"opacity:1;\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Plunger-Cylinder.png\" alt=\"Plunger cylinder cross-section: cylinder barrel, plunger and guide bushing\" loading=\"lazy\"><\/div>\n                    <div class=\"comp-img\" style=\"opacity:0;\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Seal-Rings.png\" alt=\"Imported hydraulic seal rings\" loading=\"lazy\"><\/div>\n                    <div class=\"comp-img\" style=\"opacity:0;\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Chrome-Coating.png\" alt=\"Chrome-coated hydraulic cylinder rod\" loading=\"lazy\"><\/div>\n                <\/div>\n                <div class=\"dp-stack\">\n                    <div class=\"comp-text\" style=\"opacity:1;\">\n                        <h3 class=\"dp-h3\">Plunger Cylinder<\/h3>\n                        <p class=\"dp-body\">Each DoorPress runs six plunger cylinders, built from a cylinder barrel, plunger and guide bushing. The multi-cylinder layout spreads force evenly over the full mold for consistent embossing depth across the panel.<\/p>\n                    <\/div>\n                    <div class=\"comp-text\" style=\"opacity:0;\">\n                        <h3 class=\"dp-h3\">Seal Rings<\/h3>\n                        <p class=\"dp-body\">Seal rings seal the cylinder on the piston or rod to prevent medium leakage and keep the press working properly under all conditions. Oversized lips create linear force for a better seal. HARSLE uses high-quality imported seal rings in its hydraulic cylinders.<\/p>\n                    <\/div>\n                    <div class=\"comp-text\" style=\"opacity:0;\">\n                        <h3 class=\"dp-h3\">Chrome Coating<\/h3>\n                        <p class=\"dp-body\">The cylinder rods are chrome-coated to protect the rod surface, giving a longer lifetime and a clean, shiny finish.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        \/\/ Reveal on scroll\n        var els = document.querySelectorAll('#cylinder .reveal');\n        if ('IntersectionObserver' in window) {\n            var obs = 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            els.forEach(function(el) { obs.observe(el); });\n        } else {\n            els.forEach(function(el) { el.classList.add('active'); });\n        }\n\n        \/\/ Tab switcher\n        var root = document.getElementById('cylinder');\n        if (!root) return;\n        var tabs = root.querySelectorAll('.comp-tab');\n        var texts = root.querySelectorAll('.comp-text');\n        var imgs = root.querySelectorAll('.comp-img');\n        var active = 0;\n        tabs.forEach(function(tab) {\n            tab.addEventListener('click', function() {\n                var idx = parseInt(tab.dataset.comp);\n                if (idx === active) return;\n                active = idx;\n                texts.forEach(function(t, i) { t.style.opacity = i === idx ? '1' : '0'; t.style.pointerEvents = i === idx ? 'auto' : 'none'; });\n                imgs.forEach(function(m, i) { m.style.opacity = i === idx ? '1' : '0'; });\n                tabs.forEach(function(tb, i) {\n                    var span = tb.querySelector('span');\n                    var line = tb.querySelector('div');\n                    span.style.color = i === idx ? '#ffffff' : 'rgba(255,255,255,0.4)';\n                    line.style.backgroundColor = i === idx ? '#00A0E9' : 'rgba(255,255,255,0.15)';\n                });\n            });\n        });\n    })();\n    <\/script>\n\n\n\n<!-- DoorPress Series \u2014 Hydraulics & Control Section \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        \/* ============================================ *\/\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\n        \/* ===== DoorPress hydraulics & control section ===== *\/\n        .dp-sec { padding: 72px 0; }\n        @media (min-width: 1280px) { .dp-sec { padding: 112px 0; } }\n        .dp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n        @media (min-width: 1280px) { .dp-wrap { padding: 0 40px; } }\n        .mb-page .dp-dark { background: #050505; color: #e0e0e0; }\n        .mb-page .dp-eyebrow { color: #00A0E9; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }\n        .mb-page .dp-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 14px 0 0; letter-spacing: -0.02em; }\n        @media (min-width: 1280px) { .mb-page .dp-h2 { font-size: 3.5rem; } }\n        .mb-page .dp-dark .dp-h2, .mb-page .dp-dark h4 { color: #fff; }\n        .mb-page .dp-lead { font-size: 1.125rem; font-weight: 300; line-height: 1.7; margin: 20px 0 0; max-width: 720px; }\n        .mb-page .dp-dark .dp-lead { color: #9ca3af; }\n        .mb-page .dp-note { font-size: 12px; color: #888; margin: 0; }\n        .dp-head { margin-bottom: 40px; }\n        @media (min-width: 1280px) { .dp-head { margin-bottom: 56px; } }\n\n        \/* Layout *\/\n        .dp-ctrl { display: flex; flex-direction: column; gap: 32px; }\n        .dp-ctrl-tabs { display: flex; flex-direction: column; justify-content: center; }\n        .dp-ctrl-media { min-width: 0; }\n        @media (min-width: 1280px) {\n            .dp-ctrl { flex-direction: row; align-items: center; gap: 64px; }\n            .dp-ctrl-tabs { width: 35%; flex-shrink: 0; }\n            .dp-ctrl-media { flex: 1 1 0; }\n        }\n\n        \/* Tabs (desktop: vertical list) *\/\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 { width: 100%; text-align: left; padding: 22px 0; cursor: pointer; display: block; }\n        .mb-page .ctrl-tab .ctrl-inner { padding-left: 24px; }\n        .mb-page .ctrl-tab h4 { font-size: 1.375rem; font-weight: 700; margin: 0 0 8px; transition: color 0.3s; }\n        .mb-page .ctrl-tab .ctrl-desc { font-size: 0.9rem; line-height: 1.65; margin: 0; color: #9ca3af !important; text-transform: none !important; transition: opacity 0.4s ease, transform 0.4s ease; }\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        }\n\n        \/* Image stage *\/\n        .dp-ctrl-stage { display: grid; grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr); aspect-ratio: 16\/10; width: 100%; border-radius: 16px; overflow: hidden; background: #e6eaf0; }\n        .dp-ctrl-stage > .ctrl-slide { grid-area: 1 \/ 1; min-height: 0; overflow: hidden; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }\n        .mb-page .ctrl-slide img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; }\n        \/* The frame takes the active image's own proportions (set by the script), so the whole image shows and fills the frame *\/\n        .ctrl-mobile-desc { display: none; }\n\n        \/* Tablet & mobile: horizontal tabs, description below image *\/\n        @media (max-width: 1279px) {\n            .dp-ctrl-tabs { flex-direction: row !important; order: 1; }\n            .dp-ctrl-media { order: 2; }\n            .ctrl-mobile-desc { display: block; order: 3; }\n            .mb-page .ctrl-mobile-desc p { color: #9ca3af; font-size: 0.95rem; line-height: 1.65; margin: 0; text-align: center; }\n            .mb-page .ctrl-tab { flex: 1; text-align: center; padding: 0 !important; border-left: none !important; display: flex; flex-direction: column; align-items: center; }\n            .mb-page .ctrl-tab .ctrl-inner { padding: 0; width: 100%; }\n            .mb-page .ctrl-tab h4 { font-size: 13px !important; margin-bottom: 8px; }\n            .mb-page .ctrl-tab .ctrl-desc { display: none !important; }\n            .mb-page .ctrl-tab::after { content: ''; display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.15); transition: background 0.4s ease; }\n            .mb-page .ctrl-tab.ctrl-active::after { background: #00A0E9; }\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 7: HYDRAULICS & CONTROL \u2014 Tab Switcher -->\n    <!-- ============================================ -->\n    <section id=\"control\" class=\"dp-sec dp-dark\" style=\"background:#0a0a0a;\">\n        <div class=\"dp-wrap\">\n            <div class=\"dp-head\">\n                <div class=\"reveal\"><span class=\"dp-eyebrow\">Automation<\/span><\/div>\n                <h2 class=\"reveal dp-h2\">Hydraulics &amp; <span class=\"text-brand\">Control<\/span><\/h2>\n                <p class=\"reveal dp-lead\">Automation in the pressing process improves efficiency, accuracy and operating convenience, and makes production more flexible and responsive.<\/p>\n            <\/div>\n\n            <div class=\"dp-ctrl\">\n                <div class=\"dp-ctrl-tabs\">\n                    <button class=\"ctrl-tab ctrl-active\" data-ctrl=\"0\" style=\"border-left:2px solid #00A0E9;\">\n                        <div class=\"ctrl-inner\">\n                            <h4 style=\"color:#ffffff;\">Pre-fill Valve<\/h4>\n                            <p class=\"ctrl-desc\" style=\"opacity:1;transform:translateY(0);\">Fast oil filling during the slide's idle stroke, stable high-pressure holding while forming, and high-volume discharge on return \u2014 for smooth, efficient embossing.<\/p>\n                        <\/div>\n                    <\/button>\n                    <button class=\"ctrl-tab\" data-ctrl=\"1\" style=\"border-left:2px solid rgba(255,255,255,0.1);\">\n                        <div class=\"ctrl-inner\">\n                            <h4 style=\"color:rgba(255,255,255,0.4);\">PLC<\/h4>\n                            <p class=\"ctrl-desc\" style=\"opacity:0;transform:translateY(6px);\">Two-axis arc and linear interpolation, 64k-step battery-free flash memory, 150% faster scanning, up to 8 expansion modules and an Ethernet port supporting Modbus-TCP.<\/p>\n                        <\/div>\n                    <\/button>\n                    <button class=\"ctrl-tab\" data-ctrl=\"2\" style=\"border-left:2px solid rgba(255,255,255,0.1);\">\n                        <div class=\"ctrl-inner\">\n                            <h4 style=\"color:rgba(255,255,255,0.4);\">Touch Screen *<\/h4>\n                            <p class=\"ctrl-desc\" style=\"opacity:0;transform:translateY(6px);\">Optional industrial touchscreen for visual operation and status monitoring, with switchable production modes for continuous, stable output.<\/p>\n                        <\/div>\n                    <\/button>\n                <\/div>\n\n                <div class=\"dp-ctrl-media reveal\">\n                    <div class=\"dp-ctrl-stage\">\n                        <div class=\"ctrl-slide\" data-ctrl=\"0\" style=\"opacity:1;transform:scale(1);\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Pre-Fill-Valve.png\" alt=\"Pre-fill valves\" loading=\"lazy\"><\/div>\n                        <div class=\"ctrl-slide\" data-ctrl=\"1\" style=\"opacity:0;transform:scale(1.04);\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/PLC.png\" alt=\"PLC controller\" loading=\"lazy\"><\/div>\n                        <div class=\"ctrl-slide\" data-ctrl=\"2\" style=\"opacity:0;transform:scale(1.04);\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Touch-Screen.png\" alt=\"Industrial touchscreen\" loading=\"lazy\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div id=\"ctrl-mobile-desc\" class=\"ctrl-mobile-desc\">\n                    <p>Fast oil filling during the slide's idle stroke, stable high-pressure holding while forming, and high-volume discharge on return \u2014 for smooth, efficient embossing.<\/p>\n                <\/div>\n            <\/div>\n            <p class=\"reveal dp-note\" style=\"margin-top:24px;\">* Optional<\/p>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var root = document.getElementById('control');\n        if (!root) return;\n\n        \/\/ Reveal on scroll\n        var els = root.querySelectorAll('.reveal');\n        if ('IntersectionObserver' in window) {\n            var obs = 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            els.forEach(function(el) { obs.observe(el); });\n        } else {\n            els.forEach(function(el) { el.classList.add('active'); });\n        }\n\n        \/\/ Tab switcher\n        var tabs = root.querySelectorAll('.ctrl-tab');\n        var slides = root.querySelectorAll('.ctrl-slide');\n        var mobileDesc = root.querySelector('#ctrl-mobile-desc p');\n        var active = '0';\n        var stage = root.querySelector('.dp-ctrl-stage');\n\n        \/\/ Match the frame to the active image's proportions: whole image visible, no gaps\n        function fitStage(key) {\n            var slide = root.querySelector('.ctrl-slide[data-ctrl=\"' + key + '\"]');\n            var img = slide && slide.querySelector('img');\n            if (stage && img && img.naturalWidth) {\n                stage.style.aspectRatio = img.naturalWidth + ' \/ ' + img.naturalHeight;\n            }\n        }\n        slides.forEach(function(s) {\n            var img = s.querySelector('img');\n            if (!img) return;\n            img.loading = 'eager';\n            img.addEventListener('load', function() { if (s.dataset.ctrl === active) fitStage(active); });\n        });\n        fitStage(active);\n        tabs.forEach(function(tab) {\n            tab.addEventListener('click', function() {\n                var key = tab.dataset.ctrl;\n                if (key === active) return;\n                active = key;\n                fitStage(key);\n                slides.forEach(function(s) {\n                    var on = s.dataset.ctrl === key;\n                    s.style.opacity = on ? '1' : '0';\n                    s.style.transform = on ? 'scale(1)' : 'scale(1.04)';\n                });\n                tabs.forEach(function(tb) {\n                    var on = tb.dataset.ctrl === key;\n                    var h4 = tb.querySelector('h4');\n                    var desc = tb.querySelector('.ctrl-desc');\n                    tb.classList.toggle('ctrl-active', on);\n                    tb.style.borderLeftColor = on ? '#00A0E9' : 'rgba(255,255,255,0.1)';\n                    h4.style.color = on ? '#ffffff' : 'rgba(255,255,255,0.4)';\n                    desc.style.opacity = on ? '1' : '0';\n                    desc.style.transform = on ? 'translateY(0)' : 'translateY(6px)';\n                    if (on && mobileDesc) mobileDesc.textContent = desc.textContent;\n                });\n            });\n        });\n    })();\n    <\/script>\n\n\n\n<!-- DoorPress Series \u2014 Automation Solutions Section \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        \/* ============================================ *\/\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\n        \/* ===== DoorPress automation solutions section ===== *\/\n        .dp-sec { padding: 72px 0; }\n        @media (min-width: 1280px) { .dp-sec { padding: 112px 0; } }\n        .dp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n        @media (min-width: 1280px) { .dp-wrap { padding: 0 40px; } }\n        .mb-page .dp-dark { background: #050505; color: #e0e0e0; }\n        .mb-page .dp-eyebrow { color: #00A0E9; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }\n        .mb-page .dp-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 14px 0 0; letter-spacing: -0.02em; color: #fff; }\n        @media (min-width: 1280px) { .mb-page .dp-h2 { font-size: 3.5rem; } }\n        .mb-page .dp-lead { font-size: 1.125rem; font-weight: 300; line-height: 1.7; margin: 20px 0 0; max-width: 720px; color: #9ca3af; }\n        .mb-page .dp-note { font-size: 12px; color: #888; margin: 0; }\n        .dp-head-row { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }\n        @media (min-width: 1280px) { .dp-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } }\n\n        \/* Nav buttons *\/\n        .dp-nav { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }\n        .mb-page .dp-nav-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2) !important; background: transparent !important; color: #fff !important; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; padding: 0; }\n        .mb-page .dp-nav-btn:hover { background: #00A0E9 !important; border-color: #00A0E9 !important; }\n        .dp-counter { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #9ca3af; min-width: 64px; text-align: center; }\n\n        \/* Carousel *\/\n        .dp-auto-viewport { overflow: hidden; }\n        .dp-auto-track { display: flex; align-items: flex-start; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }\n        .auto-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; width: 85%; margin-right: 16px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); }\n        @media (min-width: 640px) { .auto-card { width: 70%; } }\n        @media (min-width: 1024px) { .auto-card { width: 55%; margin-right: 24px; } }\n        @media (min-width: 1280px) { .auto-card { width: 45%; border-radius: 16px; } }\n        \/* Image keeps its own proportions: the whole picture shows and fills the card width *\/\n        \/* The script sets each frame to its image's exact width:height ratio *\/\n        .mb-page .auto-card-img { position: relative; width: 100%; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 3 \/ 2; flex: 0 0 auto !important; overflow: hidden; background: #e6eaf0; padding: 0 !important; margin: 0 !important; line-height: 0; }\n        .mb-page .auto-card-img img { position: absolute !important; inset: 0 !important; display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; transition: transform 0.7s; }\n        .auto-card:hover .auto-card-img img { transform: scale(1.03); }\n        .auto-card-body { padding: 16px 18px; background: rgba(17,17,17,0.95); flex: 1; }\n        .mb-page .auto-card-body h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #fff; }\n        .mb-page .auto-card-body p { font-size: 13px; line-height: 1.6; margin: 0; color: #9ca3af; }\n        @media (min-width: 1280px) {\n            .auto-card-body { padding: 20px 24px; }\n            .mb-page .auto-card-body h3 { font-size: 20px; margin-bottom: 8px; }\n            .mb-page .auto-card-body p { font-size: 13.5px; }\n        }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 8: AUTOMATION SOLUTIONS \u2014 Carousel -->\n    <!-- ============================================ -->\n    <section id=\"automation\" class=\"dp-sec dp-dark\">\n        <div class=\"dp-wrap\">\n            <div class=\"dp-head-row\">\n                <div>\n                    <div class=\"reveal\"><span class=\"dp-eyebrow\">From Coil to Embossing<\/span><\/div>\n                    <h2 class=\"reveal dp-h2\">Automation <span class=\"text-brand\">Solutions<\/span><\/h2>\n                    <p class=\"reveal dp-lead\">Optional equipment that turns a single press into a continuous line \u2014 from coil unwinding and leveling to sheet cutting and precise feeding.<\/p>\n                <\/div>\n                <div class=\"reveal dp-nav\">\n                    <button id=\"auto-prev\" class=\"dp-nav-btn\" aria-label=\"Previous\"><i class=\"fas fa-arrow-left\"><\/i><\/button>\n                    <span id=\"auto-counter\" class=\"dp-counter\">01 \/ 04<\/span>\n                    <button id=\"auto-next\" class=\"dp-nav-btn\" aria-label=\"Next\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"dp-wrap\">\n            <div class=\"dp-auto-viewport reveal\">\n                <div id=\"auto-track\" class=\"dp-auto-track\">\n                    <div class=\"auto-card\">\n                        <div class=\"auto-card-img\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Uncoiler-Machine.png\" alt=\"Uncoiler machine\" loading=\"lazy\"><\/div>\n                        <div class=\"auto-card-body\"><h3>Uncoiler Machine *<\/h3><p>Supports steel or aluminum coils on an expanding mandrel for smooth unwinding, working in tandem with leveling and feeding equipment.<\/p><\/div>\n                    <\/div>\n                    <div class=\"auto-card\">\n                        <div class=\"auto-card-img\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Roller-Straightener-Machine.png\" alt=\"Roller straightener machine\" loading=\"lazy\"><\/div>\n                        <div class=\"auto-card-body\"><h3>Roller Straightener *<\/h3><p>Precision rollers level the sheet for better flatness, driven by a three-phase motor and reducer with geared correction rollers.<\/p><\/div>\n                    <\/div>\n                    <div class=\"auto-card\">\n                        <div class=\"auto-card-img\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Sheet-Cutting-Station.png\" alt=\"Sheet cutting station\" loading=\"lazy\"><\/div>\n                        <div class=\"auto-card-body\"><h3>Sheet Cutting Station *<\/h3><p>Automatic conveying, positioning and high-precision cutting with smooth, burr-free edges \u2014 less manual work and less material waste.<\/p><\/div>\n                    <\/div>\n                    <div class=\"auto-card\">\n                        <div class=\"auto-card-img\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Electronic-CNC-Feeder.png\" alt=\"Electronic CNC feeder\" loading=\"lazy\"><\/div>\n                        <div class=\"auto-card-body\"><h3>Electronic CNC Feeder *<\/h3><p>CNC-controlled sheet feeding with high positioning accuracy and stable performance for continuous production.<\/p><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <p class=\"dp-note\" style=\"margin-top:20px;\">* Optional<\/p>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var root = document.getElementById('automation');\n        if (!root) return;\n\n        \/\/ Reveal on scroll\n        var els = root.querySelectorAll('.reveal');\n        if ('IntersectionObserver' in window) {\n            var obs = 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            els.forEach(function(el) { obs.observe(el); });\n        } else {\n            els.forEach(function(el) { el.classList.add('active'); });\n        }\n\n        \/\/ Carousel\n        var viewport = root.querySelector('.dp-auto-viewport');\n        var track = document.getElementById('auto-track');\n        var cards = track ? track.querySelectorAll('.auto-card') : [];\n        var prevBtn = document.getElementById('auto-prev');\n        var nextBtn = document.getElementById('auto-next');\n        var counter = document.getElementById('auto-counter');\n        if (!track || !cards.length) return;\n        var total = cards.length, current = 0;\n\n        \/\/ Match each image frame to the image's own proportions\n        cards.forEach(function(card) {\n            var box = card.querySelector('.auto-card-img');\n            var img = box && box.querySelector('img');\n            if (!img) return;\n            function fit() {\n                if (img.naturalWidth && img.naturalHeight) {\n                    box.style.setProperty('aspect-ratio', img.naturalWidth + ' \/ ' + img.naturalHeight, 'important');\n                }\n            }\n            img.loading = 'eager';\n            if (img.complete) fit();\n            img.addEventListener('load', fit);\n        });\n\n        function step() { return cards[0].offsetWidth + parseFloat(getComputedStyle(cards[0]).marginRight); }\n\n        function goTo(idx) {\n            if (idx > total - 1) idx = 0;\n            if (idx < 0) idx = total - 1;\n            current = idx;\n            track.style.transform = 'translateX(-' + (current * step()) + 'px)';\n            counter.textContent = String(current + 1).padStart(2, '0') + ' \/ ' + String(total).padStart(2, '0');\n        }\n\n        goTo(0);\n        nextBtn.addEventListener('click', function() { goTo(current + 1); });\n        prevBtn.addEventListener('click', function() { goTo(current - 1); });\n        window.addEventListener('resize', function() { goTo(current); });\n\n        var startX = 0, moveX = 0;\n        track.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; moveX = 0; }, { passive: true });\n        track.addEventListener('touchmove', function(e) { moveX = e.touches[0].clientX - startX; }, { passive: true });\n        track.addEventListener('touchend', function() {\n            if (Math.abs(moveX) > 50) goTo(current + (moveX < 0 ? 1 : -1));\n            moveX = 0;\n        });\n    })();\n    <\/script>\n\n\n\n<!-- DoorPress Series \u2014 Hydraulic Cushion Section \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        \/* ============================================ *\/\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\n        \/* ===== DoorPress hydraulic cushion section ===== *\/\n        .dp-sec { padding: 72px 0; }\n        @media (min-width: 1280px) { .dp-sec { padding: 112px 0; } }\n        .dp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n        @media (min-width: 1280px) { .dp-wrap { padding: 0 40px; } }\n        .mb-page .dp-dark { background: #0a0a0a; color: #e0e0e0; }\n        .mb-page .dp-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.02em; color: #fff; }\n        @media (min-width: 1280px) { .mb-page .dp-h2 { font-size: 3.5rem; } }\n        .mb-page .dp-lead { font-size: 1.125rem; font-weight: 300; line-height: 1.7; margin: 20px 0 0; max-width: 720px; color: #9ca3af; }\n        .mb-page .dp-note { font-size: 12px; color: #888; margin: 0; }\n\n        .dp-split { display: flex; flex-direction: column; gap: 32px; }\n        .dp-split > * { min-width: 0; }\n        @media (min-width: 1280px) {\n            .dp-split { flex-direction: row; align-items: center; gap: 64px; }\n            .dp-split > * { flex: 1 1 0; }\n        }\n\n        \/* Image: frame takes the image's own ratio (set by the script), so it shows whole and fills *\/\n        .mb-page .dp-media { position: relative; width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 16 \/ 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: #1a1a1a; padding: 0 !important; line-height: 0; }\n        .mb-page .dp-media img { position: absolute !important; inset: 0 !important; display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; }\n\n        \/* Benefit chips *\/\n        .dp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }\n        .dp-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; font-size: 13px; font-weight: 600; line-height: 1.2; }\n        .dp-chips i { color: #00A0E9; }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- HYDRAULIC CUSHION -->\n    <!-- ============================================ -->\n    <section id=\"cushion\" class=\"dp-sec dp-dark\">\n        <div class=\"dp-wrap\">\n            <div class=\"dp-split\">\n                <div class=\"reveal-left\">\n                    <div class=\"dp-media dp-fit\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Hydraulic-Cushion.jpg\" alt=\"Hydraulic cushion on DoorPress Y27 worktable\" loading=\"lazy\"><\/div>\n                <\/div>\n                <div>\n                    <h2 class=\"reveal dp-h2\">Hydraulic <span class=\"text-brand\">Cushion *<\/span><\/h2>\n                    <p class=\"reveal dp-lead\">Provides stable upward support during embossing, spreading pressure evenly across the panel. Ejector rods in the worktable move with the lower cylinders and work with the mold for border and pattern forming \u2014 reducing deformation, defects and material waste.<\/p>\n                    <div class=\"reveal dp-chips\">\n                        <span><i class=\"fas fa-wave-square\"><\/i>Vibration Reduction<\/span>\n                        <span><i class=\"fas fa-crosshairs\"><\/i>Enhanced Precision<\/span>\n                        <span><i class=\"fas fa-shield-halved\"><\/i>Increased Safety<\/span>\n                        <span><i class=\"fas fa-clock-rotate-left\"><\/i>Extended Lifespan<\/span>\n                        <span><i class=\"fas fa-chart-line\"><\/i>Efficiency Boost<\/span>\n                    <\/div>\n                    <p class=\"reveal dp-note\" style=\"margin-top:20px;\">* Optional. DoorPress Y27-3000T\/1500T provides 15000 kN knock-out pressure.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var root = document.getElementById('cushion');\n        if (!root) return;\n\n        \/\/ Reveal on scroll\n        var els = root.querySelectorAll('.reveal, .reveal-left, .reveal-right');\n        if ('IntersectionObserver' in window) {\n            var obs = 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            els.forEach(function(el) { obs.observe(el); });\n        } else {\n            els.forEach(function(el) { el.classList.add('active'); });\n        }\n\n        \/\/ Match the image frame to the image's own proportions\n        root.querySelectorAll('.dp-media').forEach(function(box) {\n            var img = box.querySelector('img');\n            if (!img) return;\n            function fit() {\n                if (img.naturalWidth && img.naturalHeight) {\n                    box.style.setProperty('aspect-ratio', img.naturalWidth + ' \/ ' + img.naturalHeight, 'important');\n                }\n            }\n            img.loading = 'eager';\n            if (img.complete) fit();\n            img.addEventListener('load', fit);\n        });\n    })();\n    <\/script>\n\n\n\n<!-- DoorPress Series \u2014 Reliable Systems Section \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        \/* ============================================ *\/\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\n        \/* ===== DoorPress reliable systems section ===== *\/\n        .dp-sec { padding: 72px 0; }\n        @media (min-width: 1280px) { .dp-sec { padding: 112px 0; } }\n        .dp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n        @media (min-width: 1280px) { .dp-wrap { padding: 0 40px; } }\n        .mb-page .dp-dark { background: #050505; color: #e0e0e0; }\n        .mb-page .dp-eyebrow { color: #00A0E9; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }\n        .mb-page .dp-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 14px 0 0; letter-spacing: -0.02em; color: #fff; }\n        @media (min-width: 1280px) { .mb-page .dp-h2 { font-size: 3.5rem; } }\n        .dp-head { margin-bottom: 40px; }\n        @media (min-width: 1280px) { .dp-head { margin-bottom: 56px; } }\n        .dp-head.center { text-align: center; }\n\n        .dp-grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }\n        @media (min-width: 768px) { .dp-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; } }\n\n        \/* Cards *\/\n        .dp-card { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: transform 0.4s ease, border-color 0.4s ease; }\n        .dp-card:hover { transform: translateY(-4px); border-color: rgba(0,160,233,0.4); }\n        \/* Image frame takes the image's own ratio (set by the script): whole image, filled *\/\n        .mb-page .dp-card-img { position: relative; width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 16 \/ 10; overflow: hidden; background: #e6eaf0; padding: 0 !important; line-height: 0; }\n        .mb-page .dp-card-img img { position: absolute !important; inset: 0 !important; display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: cover !important; }\n        .dp-card-body { padding: 22px 24px 26px; }\n        .mb-page .dp-card-body h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; color: #fff; }\n        .mb-page .dp-card-body p { font-size: 0.9rem; line-height: 1.65; color: #9ca3af; margin: 0; }\n\n    <\/style>\n\n<div class=\"mb-page\">\n\n    <!-- ============================================ -->\n    <!-- SECTION 10: ELECTRIC PARTS & LUBRICATION -->\n    <!-- ============================================ -->\n    <section id=\"reliability\" class=\"dp-sec dp-dark\">\n        <div class=\"dp-wrap\">\n            <div class=\"dp-head center\">\n                <div class=\"reveal\"><span class=\"dp-eyebrow\">Built to Last<\/span><\/div>\n                <h2 class=\"reveal dp-h2\">Reliable <span class=\"text-brand\">Systems<\/span><\/h2>\n            <\/div>\n            <div class=\"dp-grid-2\">\n                <div class=\"reveal dp-card\">\n                    <div class=\"dp-card-img\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Electric-Parts.png\" alt=\"Brand-name circuit breakers\" loading=\"lazy\"><\/div>\n                    <div class=\"dp-card-body\">\n                        <h3>Electric Parts<\/h3>\n                        <p>The central control hub for precise machine operation and easy maintenance monitoring, built with well-known brands such as Siemens or Schneider.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"reveal dp-card\">\n                    <div class=\"dp-card-img\"><img decoding=\"async\" src=\"https:\/\/www.harsle.com\/wp-content\/uploads\/2026\/10\/Lubrication-System.png\" alt=\"Manual lubrication pump\" loading=\"lazy\"><\/div>\n                    <div class=\"dp-card-body\">\n                        <h3>Lubrication System<\/h3>\n                        <p>Pull the handle to force grease to the lubrication points; release it and the spring-loaded piston refills the chamber. Simple, effortless and effective.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div><!-- \/.mb-page -->\n\n    <script>\n    (function() {\n        var root = document.getElementById('reliability');\n        if (!root) return;\n\n        \/\/ Reveal on scroll\n        var els = root.querySelectorAll('.reveal');\n        if ('IntersectionObserver' in window) {\n            var obs = 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            els.forEach(function(el) { obs.observe(el); });\n        } else {\n            els.forEach(function(el) { el.classList.add('active'); });\n        }\n\n        \/\/ Match each image frame to the image's own proportions\n        root.querySelectorAll('.dp-card-img').forEach(function(box) {\n            var img = box.querySelector('img');\n            if (!img) return;\n            function fit() {\n                if (img.naturalWidth && img.naturalHeight) {\n                    box.style.setProperty('aspect-ratio', img.naturalWidth + ' \/ ' + img.naturalHeight, 'important');\n                }\n            }\n            img.loading = 'eager';\n            if (img.complete) fit();\n            img.addEventListener('load', fit);\n        });\n    })();\n    <\/script>\n\n\n\n<!-- DoorPress Series \u2014 Video Statement \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        .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        \/* 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\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 11: VIDEO STATEMENT \u2014 Full Page -->\n    <!-- ============================================ -->\n    <section class=\"relative overflow-hidden\" style=\"height:100vh; z-index:1; background:#111;\">\n        <!-- YouTube Background Video -->\n        <div class=\"absolute inset-0\" style=\"pointer-events:none;\">\n            <div style=\"position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);\">\n                <iframe src=\"https:\/\/www.youtube.com\/embed\/arkBu9APK8U?autoplay=1&#038;mute=1&#038;loop=1&#038;playlist=arkBu9APK8U&#038;controls=0&#038;showinfo=0&#038;rel=0&#038;modestbranding=1&#038;playsinline=1&#038;start=5&#038;disablekb=1&#038;iv_load_policy=3\" style=\"width:100%;height:100%;border:none;\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n            <\/div>\n        <\/div>\n        <div class=\"absolute inset-0\" style=\"background:rgba(0,0,0,0.45);\"><\/div>\n        <!-- Text content -->\n        <div class=\"relative z-10 h-full flex items-center justify-center text-center px-6\">\n            <div class=\"reveal\">\n                <h2 class=\"font-display text-3xl xl:text-5xl xl:text-7xl font-bold text-white mb-4 leading-tight\" style=\"text-shadow:0 2px 30px rgba(0,0,0,0.5);\">Fast, Reliable Embossing<\/h2>\n                <p class=\"text-gray-300 text-base xl:text-xl max-w-xl mx-auto font-light mb-8\" style=\"text-shadow:0 1px 10px rgba(0,0,0,0.5);\">Heavy-Duty Hydraulic Pressing for Crisp, Consistent Steel Door Panels<\/p>\n                <button id=\"vb-play-btn-arkBu9APK8U\" class=\"group\" style=\"width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.35s ease;\" onmouseover=\"this.style.background='#00A0E9';this.style.borderColor='#00A0E9'\" onmouseout=\"this.style.background='rgba(255,255,255,0.08)';this.style.borderColor='rgba(255,255,255,0.4)'\">\n                    <i class=\"fas fa-play text-white text-lg\" style=\"margin-left:3px;\"><\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Video Lightbox Modal -->\n    <div id=\"vb-modal-arkBu9APK8U\" 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=\"vbClose_arkBu9APK8U()\">\n        <div style=\"position:relative;width:92vw;max-width:1100px;aspect-ratio:16\/9;\" onclick=\"event.stopPropagation()\">\n            <iframe id=\"vb-iframe-arkBu9APK8U\" 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=\"vbClose_arkBu9APK8U()\" 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\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    <\/script>\n\n    <!-- Video Lightbox JS -->\n    <script>\n    function vbOpen_arkBu9APK8U() {\n        var modal = document.getElementById('vb-modal-arkBu9APK8U');\n        var iframe = document.getElementById('vb-iframe-arkBu9APK8U');\n        iframe.src = 'https:\/\/www.youtube.com\/embed\/arkBu9APK8U?si=uz-fiHFuvHIgJZSK&autoplay=1&rel=0&modestbranding=1';\n        modal.style.display = 'flex';\n        document.body.style.overflow = 'hidden';\n    }\n    function vbClose_arkBu9APK8U() {\n        var modal = document.getElementById('vb-modal-arkBu9APK8U');\n        var iframe = document.getElementById('vb-iframe-arkBu9APK8U');\n        iframe.src = '';\n        modal.style.display = 'none';\n        document.body.style.overflow = '';\n    }\n    var _vpb = document.getElementById('vb-play-btn-arkBu9APK8U'); if (_vpb) _vpb.addEventListener('click', vbOpen_arkBu9APK8U);\n    document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { vbClose_arkBu9APK8U(); } });\n    <\/script>\n\n\n\n<div style=\"font-size:0;line-height:0;margin:0;padding:0;border:none;background:#000;\"><!-- DoorPress Applications \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            align-items: start;\n        }\n        @media (min-width: 640px) {\n            .industry-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n        }\n        @media (min-width: 1280px) {\n            .industry-grid { grid-template-columns: repeat(6, 1fr); gap: 1.125rem; }\n        }\n\n        \/* Each card takes its own image's width:height ratio (set by the script below),\n           so the whole picture shows and fills the card with no cropping or gaps *\/\n        .mb-page .industry-card {\n            display: block;\n            position: relative;\n            overflow: hidden;\n            border-radius: 12px;\n            height: auto !important;\n            min-height: 0 !important;\n            padding: 0 !important;\n            aspect-ratio: 9 \/ 16;\n            text-decoration: none;\n            cursor: pointer;\n            background: #1a1a1a;\n        }\n        @media (min-width: 1280px) {\n            .industry-card { border-radius: 14px; }\n        }\n\n        .mb-page .industry-card img {\n            position: absolute !important;\n            inset: 0 !important;\n            margin: 0 !important;\n            max-width: none !important;\n            max-height: none !important;\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]\">Applications<\/span>\n                    <h2 class=\"font-display text-4xl xl:text-5xl font-bold mt-4 leading-[1.1] tooling-txt-main\" style=\"color:#fff;\">Embossed Door Panels<br>for Every Market<\/h2>\n                    <p class=\"text-lg leading-relaxed mt-4 max-w-lg tooling-txt-sub\" style=\"color:rgba(255,255,255,0.5);\">DoorPress embosses security, steel and stainless steel door panels \u2014 from clean geometric layouts to richly carved relief and framed patterns.<\/p>\n                <\/div>\n\n                <!-- Application Cards Grid -->\n                <!-- Portrait door-panel cards: 6 per row on desktop, 3 on tablet, 2 on mobile -->\n                <div class=\"reveal industry-grid tooling-card-bg\" style=\"background:transparent;border:none;padding:0;\">\n                    <!-- 1. Security Doors -->\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\/10\/Security-Doors.png\" alt=\"Embossed security door panel\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Security Doors<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Security Doors<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 2. Steel Entry Doors -->\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\/10\/Steel-Entry-Doors.png\" alt=\"Embossed steel entry door panel\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Steel Entry Doors<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Steel Entry Doors<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 3. Stainless Steel Doors -->\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\/10\/Stainless-Steel-Doors.png\" alt=\"Embossed stainless steel door panel\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Stainless Steel Doors<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Stainless Steel Doors<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 4. Framed Pattern Panels -->\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\/10\/Framed-Pattern-Panels.png\" alt=\"Framed pattern door panel\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Framed Pattern Panels<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Framed Pattern Panels<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 5. Custom Relief Patterns -->\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\/10\/Custom-Relief-Patterns.png\" alt=\"Custom relief pattern door panel\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Custom Relief Patterns<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Custom Relief Patterns<\/span>\n                            <span class=\"industry-card-cta\">View Applications<\/span>\n                        <\/div>\n                    <\/a>\n\n                    <!-- 6. Main & Secondary Doors -->\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\/10\/Main-Secondary-Doors.png\" alt=\"Complex pattern main door panel\">\n                        <div class=\"industry-card-overlay\"><\/div>\n                        <div class=\"industry-card-label\">\n                            <div class=\"industry-card-label-text\">Main &amp; Secondary Doors<\/div>\n                        <\/div>\n                        <div class=\"industry-card-hover\">\n                            <span class=\"industry-card-name\">Main &amp; Secondary Doors<\/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;highlighted_vertical_offset&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;highlighted_vertical_offset_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;highlighted_vertical_offset_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&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=\"HARSLE - 2nd page-CTA-\u4e0d\u80fd\u5220\" aria-label=\"HARSLE - 2nd page-CTA-\u4e0d\u80fd\u5220\">\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    \/\/ ========== Application cards: match each card to its image's proportions ==========\n    document.querySelectorAll('#tooling .industry-card').forEach(function(card) {\n        var img = card.querySelector('img');\n        if (!img) return;\n        function fit() {\n            if (img.naturalWidth && img.naturalHeight) {\n                card.style.setProperty('aspect-ratio', img.naturalWidth + ' \/ ' + img.naturalHeight, 'important');\n            }\n        }\n        if (img.complete) fit();\n        img.addEventListener('load', fit);\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<!-- 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\">DoorPress<span class=\"text-brand\"><br>Y32-2000T<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DoorPress<span class=\"text-brand\"><br>Y32-2500T<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DoorPress<span class=\"text-brand\"><br>Y32-3000T<\/span><\/div>\n                    <\/div>\n                    <div class=\"spec-header-cell\">\n                        <div class=\"spec-header-name\">DoorPress<span class=\"text-brand\"><br>Y27-3000T\/1500T<\/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\">20000 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">25000 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">30000 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">30000 kN<\/div><div class=\"spec-cell-label\">Nominal Force<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">502 kN<\/div><div class=\"spec-cell-label\">Return Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">785 kN<\/div><div class=\"spec-cell-label\">Return Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">785 kN<\/div><div class=\"spec-cell-label\">Return Force<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">785 kN<\/div><div class=\"spec-cell-label\">Return Force<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">600 mm<\/div><div class=\"spec-cell-label\">Max. Daylight Opening<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">600 mm<\/div><div class=\"spec-cell-label\">Max. Daylight Opening<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">600 mm<\/div><div class=\"spec-cell-label\">Max. Daylight Opening<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">600 mm<\/div><div class=\"spec-cell-label\">Max. Daylight Opening<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">500 mm<\/div><div class=\"spec-cell-label\">Slide Stroke<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">25 MPa<\/div><div class=\"spec-cell-label\">Max. Working Pressure<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">25 MPa<\/div><div class=\"spec-cell-label\">Max. Working Pressure<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">25 MPa<\/div><div class=\"spec-cell-label\">Max. Working Pressure<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">25 MPa<\/div><div class=\"spec-cell-label\">Max. Working Pressure<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">22\u00d72 kW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">22\u00d71 + 30\u00d71 kW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">30\u00d72 kW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">30\u00d72 kW<\/div><div class=\"spec-cell-label\">Motor Power<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">ZSG420\u00d7500\u00d76pcs<\/div><div class=\"spec-cell-label\">Model of Plunger Cylinder<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">ZSG460\u00d7500\u00d76pcs<\/div><div class=\"spec-cell-label\">Model of Plunger Cylinder<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">ZSG500\u00d7500\u00d76pcs<\/div><div class=\"spec-cell-label\">Model of Plunger Cylinder<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">ZSG500\u00d7500\u00d76pcs<\/div><div class=\"spec-cell-label\">Model of Plunger Cylinder<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">N46# Hydraulic Oil<\/div><div class=\"spec-cell-label\">Working Medium<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">N46# Hydraulic Oil<\/div><div class=\"spec-cell-label\">Working Medium<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">N46# Hydraulic Oil<\/div><div class=\"spec-cell-label\">Working Medium<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">N46# Hydraulic Oil<\/div><div class=\"spec-cell-label\">Working Medium<\/div><\/div>\n                    <\/div>\n                    <div class=\"spec-row\">\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">HY100Y\u00d72<\/div><div class=\"spec-cell-label\">Oil Pump<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">HY100Y + HY160Y<\/div><div class=\"spec-cell-label\">Oil Pump<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">HY160Y\u00d72<\/div><div class=\"spec-cell-label\">Oil Pump<\/div><\/div>\n                        <div class=\"spec-cell\"><div class=\"spec-cell-value\">HY160Y\u00d72<\/div><div class=\"spec-cell-label\">Oil Pump<\/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\/\" 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').innerHTML;\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\n\n<p class=\"wp-block-paragraph\">\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;highlighted_vertical_offset&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;highlighted_vertical_offset_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;highlighted_vertical_offset_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&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=\"HARSLE - 2nd page-CTA-\u4e0d\u80fd\u5220\" aria-label=\"HARSLE - 2nd page-CTA-\u4e0d\u80fd\u5220\">\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<\/p>\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<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    .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: DoorPress (Current) -->\n                        <a href=\"https:\/\/www.harsle.com\/doorpress\/\" 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\/10\/qita-DoorPress.png\" alt=\"DoorPress\" 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;\">DoorPress<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Heavy-duty door-frame structure ensures superior stability and powerful pressing performance. Ideal for large workpieces, heavy-duty stamping, and precision metal forming applications.<\/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: Y32 -->\n                        <a href=\"http:\/\/www.harsle.com\/Y32\/\" 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\/Y32-22-1.png\" alt=\"Y32 Hydraulic Press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">PillarPress<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Four-column design with independent upper and lower cylinder action for versatile forming. Suitable for bending, flanging, stretching, and cold extrusion of various materials.<\/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: Y27 -->\n                        <a href=\"http:\/\/www.harsle.com\/Y27\/\" target=\"_blank\" rel=\"model-slide flex-shrink-0 block\" 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\/Y27-22-1.png\" alt=\"Y27 Hydraulic Press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">DrawPress<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Four-column three-beam structure delivers balanced pressure and consistent forming accuracy. Ideal for stamping, drawing, and general metal forming 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: Y41 -->\n                        <a href=\"http:\/\/www.harsle.com\/Y41\/\" 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\/Y41-22-1.png\" alt=\"Y41 Hydraulic Press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">C-Press<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Single-column C-frame structure offers open three-side access for easy loading of large workpieces. Compact footprint with stable output for straightening, pressing, and assembly tasks.<\/p>\n                                    <div class=\"flex items-center justify-end pt-4\" style=\"border-top:1px solid #f0f0f0;\">\n                                        <span class=\"inline-flex items-center text-brand text-sm font-semibold\">\n                                            Learn More <i class=\"fas fa-arrow-right ml-2 text-xs\"><\/i>\n                                        <\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n\n                        <!-- Model 5: FramePress -->\n                        <a href=\"https:\/\/www.harsle.com\/framepress\/\" 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\/09\/qita-FramePress.png\" alt=\"FramePress Hydraulic Press\" class=\"w-full h-full object-cover hover:scale-105 transition duration-700\">\n                                <\/div>\n                                <div class=\"p-4 flex flex-col flex-grow\">\n                                    <h3 class=\"text-xl font-bold mb-2 font-display\" style=\"color:#111;\">FramePress<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">High-rigidity frame construction delivers stable pressure, precise forming, and reliable performance for demanding metal forming 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 6: MultiTherm -->\n                        <a href=\"https:\/\/www.harsle.com\/multitherm\/\" 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\/09\/qita-MultiTherm.png\" alt=\"MultiTherm Hot Press 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;\">MultiTherm<\/h3>\n                                    <p class=\"text-sm leading-relaxed mb-4 flex-grow\" style=\"color:#666;\">Advanced hot press technology delivers uniform heating, stable pressure, and precise temperature control for efficient thermal forming 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\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        \/\/ Hide nav buttons when all cards fit\n        const noScroll = total <= vis;\n        prevBtn.style.display = noScroll ? 'none' : '';\n        nextBtn.style.display = noScroll ? 'none' : '';\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<!-- Y27\u578b\u53f7 -->\n","protected":false},"excerpt":{"rendered":"<p>DoorPress Up to 3000 tons of hydraulic force for deep, crisp steel door embossing. Request a Quote Watch Video 3000T<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"footnotes":""},"class_list":["post-91253","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/pages\/91253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/comments?post=91253"}],"version-history":[{"count":0,"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/pages\/91253\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.harsle.com\/pl\/wp-json\/wp\/v2\/media?parent=91253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}