{"id":8499,"date":"2026-08-08T09:08:49","date_gmt":"2026-08-08T09:08:49","guid":{"rendered":"https:\/\/hysfsubsea.com\/?page_id=8499"},"modified":"2026-10-06T12:38:54","modified_gmt":"2026-10-06T12:38:54","slug":"hysf-connector-selector","status":"publish","type":"page","link":"https:\/\/hysfsubsea.com\/nb\/hysf-connector-selector\/","title":{"rendered":"HYSF Underwater Connector Selector"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8499\" class=\"elementor elementor-8499\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2906eb e-con-full e-flex e-con e-parent\" data-id=\"e2906eb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1d18e6 elementor-widget elementor-widget-html\" data-id=\"b1d18e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  HYSF SUBSEA \u2014 Connector Selector front-end prototype\r\n  Elementor usage: paste this entire file into ONE Elementor HTML widget.\r\n\r\n  IMPORTANT BEFORE PUBLISHING\r\n  1) The PRODUCTS array near the bottom contains DEMO specifications.\r\n     Replace every value with engineering-approved HYSF data.\r\n  2) Install the companion hysf-connector-selector-mail-handler.php through\r\n     Code Snippets or a child theme so inquiries are mailed securely.\r\n  3) Each product family opens an approved HYSF category PDF.\r\n  4) Add Media Library image URLs to each product's imageUrl field after the\r\n     local product-image folders have been uploaded to WordPress.\r\n-->\r\n\r\n<style>\r\n  #hysf-selector {\r\n    --hs-navy-950: #061524;\r\n    --hs-navy-900: #09243b;\r\n    --hs-navy-800: #103b5c;\r\n    --hs-blue-700: #0767d7;\r\n    --hs-blue-600: #087df1;\r\n    --hs-blue-500: #25a2ff;\r\n    --hs-cyan-400: #27d3c2;\r\n    --hs-orange-500: #ff8a2a;\r\n    --hs-slate-900: #142334;\r\n    --hs-slate-700: #46586a;\r\n    --hs-slate-500: #708295;\r\n    --hs-slate-300: #cbd6df;\r\n    --hs-slate-200: #dde5eb;\r\n    --hs-slate-100: #edf3f7;\r\n    --hs-slate-50: #f6f9fb;\r\n    --hs-white: #ffffff;\r\n    --hs-success: #0e936d;\r\n    --hs-warning: #b65e12;\r\n    --hs-danger: #b93c42;\r\n    --hs-radius-lg: 24px;\r\n    --hs-radius-md: 16px;\r\n    --hs-radius-sm: 11px;\r\n    --hs-shadow-lg: 0 24px 70px rgba(4, 28, 48, .14);\r\n    --hs-shadow-md: 0 12px 32px rgba(5, 32, 55, .10);\r\n    --hs-shadow-sm: 0 6px 18px rgba(5, 32, 55, .07);\r\n    --hs-shell: 1240px;\r\n    color: var(--hs-slate-900);\r\n    font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif;\r\n    line-height: 1.5;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector,\r\n  #hysf-selector * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  #hysf-selector button,\r\n  #hysf-selector input,\r\n  #hysf-selector select,\r\n  #hysf-selector textarea {\r\n    font: inherit;\r\n  }\r\n\r\n  #hysf-selector button,\r\n  #hysf-selector a {\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  #hysf-selector .hs-shell {\r\n    margin: 0 auto;\r\n    max-width: var(--hs-shell);\r\n    padding-left: 24px;\r\n    padding-right: 24px;\r\n    position: relative;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-hero {\r\n    background:\r\n      radial-gradient(circle at 82% 14%, rgba(37, 162, 255, .26), transparent 30%),\r\n      radial-gradient(circle at 72% 80%, rgba(39, 211, 194, .15), transparent 27%),\r\n      linear-gradient(128deg, #051422 0%, #092943 53%, #0c3a5b 100%);\r\n    color: var(--hs-white);\r\n    min-height: 640px;\r\n    overflow: hidden;\r\n    padding: 92px 0 82px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-hero::before,\r\n  #hysf-selector .hs-hero::after {\r\n    border: 1px solid rgba(255, 255, 255, .08);\r\n    border-radius: 50%;\r\n    content: \"\";\r\n    pointer-events: none;\r\n    position: absolute;\r\n  }\r\n\r\n  #hysf-selector .hs-hero::before {\r\n    height: 520px;\r\n    right: -120px;\r\n    top: -160px;\r\n    width: 520px;\r\n  }\r\n\r\n  #hysf-selector .hs-hero::after {\r\n    bottom: -300px;\r\n    height: 630px;\r\n    left: 34%;\r\n    width: 630px;\r\n  }\r\n\r\n  #hysf-selector .hs-grid-lines {\r\n    background-image:\r\n      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);\r\n    background-size: 46px 46px;\r\n    inset: 0;\r\n    mask-image: linear-gradient(to bottom, #000, transparent 92%);\r\n    pointer-events: none;\r\n    position: absolute;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-grid {\r\n    align-items: center;\r\n    display: grid;\r\n    gap: 58px;\r\n    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);\r\n  }\r\n\r\n  #hysf-selector .hs-eyebrow {\r\n    align-items: center;\r\n    color: #8ed2ff;\r\n    display: inline-flex;\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    gap: 10px;\r\n    letter-spacing: .18em;\r\n    margin-bottom: 22px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-eyebrow::before {\r\n    background: var(--hs-orange-500);\r\n    border-radius: 99px;\r\n    content: \"\";\r\n    height: 8px;\r\n    box-shadow: 0 0 20px rgba(255, 138, 42, .7);\r\n    width: 8px;\r\n  }\r\n\r\n  #hysf-selector .hs-hero h1 {\r\n    color: var(--hs-white);\r\n    font-size: clamp(44px, 5vw, 72px);\r\n    font-weight: 760;\r\n    letter-spacing: -.045em;\r\n    line-height: .99;\r\n    margin: 0 0 24px;\r\n    max-width: 760px;\r\n  }\r\n\r\n  #hysf-selector .hs-hero h1 span {\r\n    background: linear-gradient(90deg, #ffffff 0%, #80d5ff 55%, #56e2d4 100%);\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    color: transparent;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-copy {\r\n    color: #bfd0de;\r\n    font-size: 18px;\r\n    line-height: 1.7;\r\n    margin: 0 0 32px;\r\n    max-width: 650px;\r\n  }\r\n\r\n  #hysf-selector .hs-actions {\r\n    align-items: center;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 13px;\r\n  }\r\n\r\n  #hysf-selector .hs-btn {\r\n    align-items: center;\r\n    border: 0;\r\n    border-radius: 11px;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n    font-size: 14px;\r\n    font-weight: 750;\r\n    gap: 9px;\r\n    justify-content: center;\r\n    line-height: 1;\r\n    min-height: 48px;\r\n    padding: 0 19px;\r\n    text-decoration: none;\r\n    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;\r\n  }\r\n\r\n  #hysf-selector .hs-btn:hover {\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  #hysf-selector .hs-btn:focus-visible,\r\n  #hysf-selector input:focus-visible,\r\n  #hysf-selector select:focus-visible,\r\n  #hysf-selector textarea:focus-visible {\r\n    outline: 3px solid rgba(37, 162, 255, .34);\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  #hysf-selector .hs-btn-primary {\r\n    background: linear-gradient(135deg, var(--hs-blue-600), #13a6fa);\r\n    box-shadow: 0 12px 30px rgba(8, 125, 241, .32);\r\n    color: var(--hs-white);\r\n  }\r\n\r\n  #hysf-selector .hs-btn-primary:hover {\r\n    box-shadow: 0 16px 34px rgba(8, 125, 241, .42);\r\n  }\r\n\r\n  #hysf-selector .hs-btn-secondary {\r\n    background: rgba(255,255,255,.08);\r\n    border: 1px solid rgba(255,255,255,.19);\r\n    color: var(--hs-white);\r\n  }\r\n\r\n  #hysf-selector .hs-btn-light {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    color: var(--hs-navy-900);\r\n  }\r\n\r\n  #hysf-selector .hs-btn-ghost {\r\n    background: transparent;\r\n    border: 1px solid var(--hs-slate-200);\r\n    color: var(--hs-slate-700);\r\n  }\r\n\r\n  #hysf-selector .hs-btn-small {\r\n    min-height: 41px;\r\n    padding: 0 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-arrow {\r\n    font-size: 18px;\r\n    line-height: 0;\r\n    transition: transform .18s ease;\r\n  }\r\n\r\n  #hysf-selector .hs-btn:hover .hs-arrow {\r\n    transform: translateX(3px);\r\n  }\r\n\r\n  #hysf-selector .hs-proof-row {\r\n    display: grid;\r\n    gap: 0;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    margin-top: 48px;\r\n    max-width: 720px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof {\r\n    border-left: 1px solid rgba(255,255,255,.15);\r\n    padding: 2px 18px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof:first-child {\r\n    border-left: 0;\r\n    padding-left: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-proof strong {\r\n    color: var(--hs-white);\r\n    display: block;\r\n    font-size: 17px;\r\n    margin-bottom: 3px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof span {\r\n    color: #8eabc0;\r\n    display: block;\r\n    font-size: 11px;\r\n    line-height: 1.35;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-visual {\r\n    align-items: center;\r\n    display: flex;\r\n    justify-content: center;\r\n    min-height: 430px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint {\r\n    background: linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.025));\r\n    border: 1px solid rgba(255,255,255,.15);\r\n    border-radius: 28px;\r\n    box-shadow: 0 34px 80px rgba(0,0,0,.28);\r\n    overflow: hidden;\r\n    padding: 25px;\r\n    position: relative;\r\n    transform: perspective(900px) rotateY(-7deg) rotateX(3deg);\r\n    width: min(100%, 470px);\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint::before {\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);\r\n    content: \"\";\r\n    height: 1px;\r\n    left: 0;\r\n    position: absolute;\r\n    right: 0;\r\n    top: 66px;\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint-top {\r\n    align-items: center;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 29px;\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint-title {\r\n    color: #d9f1ff;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: .14em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-demo-badge {\r\n    background: rgba(255, 138, 42, .13);\r\n    border: 1px solid rgba(255, 160, 82, .34);\r\n    border-radius: 999px;\r\n    color: #ffbd86;\r\n    display: inline-flex;\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    letter-spacing: .1em;\r\n    padding: 6px 9px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-connector-stage {\r\n    align-items: center;\r\n    display: flex;\r\n    height: 235px;\r\n    justify-content: center;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-orbit {\r\n    border: 1px dashed rgba(111, 203, 255, .28);\r\n    border-radius: 50%;\r\n    height: 230px;\r\n    position: absolute;\r\n    width: 230px;\r\n  }\r\n\r\n  #hysf-selector .hs-orbit::before,\r\n  #hysf-selector .hs-orbit::after {\r\n    background: var(--hs-cyan-400);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 18px rgba(39,211,194,.8);\r\n    content: \"\";\r\n    height: 6px;\r\n    position: absolute;\r\n    width: 6px;\r\n  }\r\n\r\n  #hysf-selector .hs-orbit::before { left: 20px; top: 39px; }\r\n  #hysf-selector .hs-orbit::after { bottom: 18px; right: 42px; }\r\n\r\n  #hysf-selector .hs-hero-connector {\r\n    filter: drop-shadow(0 24px 18px rgba(0,0,0,.3));\r\n    max-width: 320px;\r\n    position: relative;\r\n    width: 82%;\r\n    z-index: 2;\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint-specs {\r\n    display: grid;\r\n    gap: 8px;\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint-spec {\r\n    background: rgba(1,17,29,.35);\r\n    border: 1px solid rgba(255,255,255,.08);\r\n    border-radius: 10px;\r\n    padding: 11px;\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint-spec span {\r\n    color: #7f9eb3;\r\n    display: block;\r\n    font-size: 9px;\r\n    margin-bottom: 4px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-blueprint-spec strong {\r\n    color: #e9f8ff;\r\n    font-size: 12px;\r\n  }\r\n\r\n  #hysf-selector .hs-main {\r\n    background: linear-gradient(180deg, #edf4f8 0%, #f8fafc 28%, #f8fafc 100%);\r\n    padding: 0 0 88px;\r\n  }\r\n\r\n  #hysf-selector .hs-wizard-wrap {\r\n    padding-top: 74px;\r\n  }\r\n\r\n  #hysf-selector .hs-section-intro {\r\n    align-items: end;\r\n    display: flex;\r\n    gap: 30px;\r\n    justify-content: space-between;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  #hysf-selector .hs-kicker {\r\n    color: var(--hs-blue-700);\r\n    display: block;\r\n    font-size: 11px;\r\n    font-weight: 850;\r\n    letter-spacing: .16em;\r\n    margin-bottom: 8px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-section-intro h2,\r\n  #hysf-selector .hs-results-title h2 {\r\n    color: var(--hs-navy-950);\r\n    font-size: clamp(30px, 4vw, 45px);\r\n    letter-spacing: -.035em;\r\n    line-height: 1.08;\r\n    margin: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-section-intro p {\r\n    color: var(--hs-slate-500);\r\n    font-size: 14px;\r\n    margin: 0;\r\n    max-width: 450px;\r\n  }\r\n\r\n  #hysf-selector .hs-wizard {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: var(--hs-radius-lg);\r\n    box-shadow: var(--hs-shadow-lg);\r\n    overflow: hidden;\r\n  }\r\n\r\n  #hysf-selector .hs-progress {\r\n    background: var(--hs-slate-50);\r\n    border-bottom: 1px solid var(--hs-slate-200);\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    padding: 0 36px;\r\n  }\r\n\r\n  #hysf-selector .hs-progress-item {\r\n    align-items: center;\r\n    color: var(--hs-slate-500);\r\n    display: flex;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    gap: 8px;\r\n    justify-content: center;\r\n    min-height: 62px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-progress-item::after {\r\n    background: transparent;\r\n    bottom: -1px;\r\n    content: \"\";\r\n    height: 3px;\r\n    left: 16px;\r\n    position: absolute;\r\n    right: 16px;\r\n  }\r\n\r\n  #hysf-selector .hs-progress-item.is-active,\r\n  #hysf-selector .hs-progress-item.is-complete {\r\n    color: var(--hs-blue-700);\r\n  }\r\n\r\n  #hysf-selector .hs-progress-item.is-active::after {\r\n    background: var(--hs-blue-600);\r\n  }\r\n\r\n  #hysf-selector .hs-step-number {\r\n    align-items: center;\r\n    background: var(--hs-slate-200);\r\n    border-radius: 50%;\r\n    color: var(--hs-slate-700);\r\n    display: inline-flex;\r\n    flex: 0 0 auto;\r\n    height: 23px;\r\n    justify-content: center;\r\n    width: 23px;\r\n  }\r\n\r\n  #hysf-selector .hs-progress-item.is-active .hs-step-number,\r\n  #hysf-selector .hs-progress-item.is-complete .hs-step-number {\r\n    background: var(--hs-blue-600);\r\n    color: var(--hs-white);\r\n  }\r\n\r\n  #hysf-selector .hs-wizard-body {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1fr) 310px;\r\n    min-height: 540px;\r\n  }\r\n\r\n  #hysf-selector .hs-question-area {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 42px 42px 30px;\r\n  }\r\n\r\n  #hysf-selector .hs-step {\r\n    display: none;\r\n  }\r\n\r\n  #hysf-selector .hs-step.is-active {\r\n    animation: hsFade .24s ease both;\r\n    display: block;\r\n  }\r\n\r\n  @keyframes hsFade {\r\n    from { opacity: 0; transform: translateY(5px); }\r\n    to { opacity: 1; transform: none; }\r\n  }\r\n\r\n  #hysf-selector .hs-question-number {\r\n    color: var(--hs-blue-700);\r\n    display: block;\r\n    font-size: 11px;\r\n    font-weight: 850;\r\n    letter-spacing: .14em;\r\n    margin-bottom: 8px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-question-area h3 {\r\n    color: var(--hs-navy-950);\r\n    font-size: clamp(25px, 3vw, 34px);\r\n    letter-spacing: -.025em;\r\n    line-height: 1.18;\r\n    margin: 0 0 9px;\r\n  }\r\n\r\n  #hysf-selector .hs-question-help {\r\n    color: var(--hs-slate-500);\r\n    font-size: 13px;\r\n    margin: 0 0 25px;\r\n  }\r\n\r\n  #hysf-selector .hs-option-grid {\r\n    display: grid;\r\n    gap: 12px;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  }\r\n\r\n  #hysf-selector .hs-option {\r\n    cursor: pointer;\r\n    display: block;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-option input {\r\n    height: 1px;\r\n    opacity: 0;\r\n    overflow: hidden;\r\n    position: absolute;\r\n    width: 1px;\r\n  }\r\n\r\n  #hysf-selector .hs-option-card {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: 14px;\r\n    display: block;\r\n    min-height: 118px;\r\n    padding: 17px;\r\n    position: relative;\r\n    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;\r\n  }\r\n\r\n  #hysf-selector .hs-option:hover .hs-option-card {\r\n    border-color: #9acbfa;\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  #hysf-selector .hs-option input:checked + .hs-option-card {\r\n    background: #f2f8ff;\r\n    border-color: var(--hs-blue-600);\r\n    box-shadow: 0 0 0 3px rgba(8,125,241,.1);\r\n  }\r\n\r\n  #hysf-selector .hs-option input:focus-visible + .hs-option-card {\r\n    outline: 3px solid rgba(37, 162, 255, .34);\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  #hysf-selector .hs-option-icon {\r\n    align-items: center;\r\n    background: var(--hs-slate-100);\r\n    border-radius: 9px;\r\n    color: var(--hs-blue-700);\r\n    display: inline-flex;\r\n    font-size: 19px;\r\n    height: 36px;\r\n    justify-content: center;\r\n    margin-bottom: 11px;\r\n    width: 36px;\r\n  }\r\n\r\n  #hysf-selector .hs-option input:checked + .hs-option-card .hs-option-icon {\r\n    background: var(--hs-blue-600);\r\n    color: var(--hs-white);\r\n  }\r\n\r\n  #hysf-selector .hs-option-card strong {\r\n    color: var(--hs-navy-950);\r\n    display: block;\r\n    font-size: 13px;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  #hysf-selector .hs-option-card small {\r\n    color: var(--hs-slate-500);\r\n    display: block;\r\n    font-size: 10px;\r\n    line-height: 1.35;\r\n    margin-top: 4px;\r\n  }\r\n\r\n  #hysf-selector .hs-check {\r\n    align-items: center;\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-300);\r\n    border-radius: 50%;\r\n    color: transparent;\r\n    display: flex;\r\n    font-size: 10px;\r\n    height: 19px;\r\n    justify-content: center;\r\n    position: absolute;\r\n    right: 11px;\r\n    top: 11px;\r\n    width: 19px;\r\n  }\r\n\r\n  #hysf-selector .hs-option input:checked + .hs-option-card .hs-check {\r\n    background: var(--hs-blue-600);\r\n    border-color: var(--hs-blue-600);\r\n    color: var(--hs-white);\r\n  }\r\n\r\n  #hysf-selector .hs-form-grid {\r\n    display: grid;\r\n    gap: 17px;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  }\r\n\r\n  #hysf-selector .hs-field {\r\n    display: block;\r\n  }\r\n\r\n  #hysf-selector .hs-field.hs-span-2 {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  #hysf-selector .hs-field-label {\r\n    color: var(--hs-navy-900);\r\n    display: flex;\r\n    font-size: 12px;\r\n    font-weight: 750;\r\n    justify-content: space-between;\r\n    margin-bottom: 7px;\r\n  }\r\n\r\n  #hysf-selector .hs-field-label small {\r\n    color: var(--hs-slate-500);\r\n    font-size: 10px;\r\n    font-weight: 500;\r\n  }\r\n\r\n  #hysf-selector .hs-field select,\r\n  #hysf-selector .hs-field input,\r\n  #hysf-selector .hs-field textarea {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-300);\r\n    border-radius: 10px;\r\n    color: var(--hs-navy-950);\r\n    min-height: 46px;\r\n    padding: 10px 12px;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-field textarea {\r\n    min-height: 105px;\r\n    resize: vertical;\r\n  }\r\n\r\n  #hysf-selector .hs-field select:hover,\r\n  #hysf-selector .hs-field input:hover,\r\n  #hysf-selector .hs-field textarea:hover {\r\n    border-color: #9fb0bf;\r\n  }\r\n\r\n  #hysf-selector .hs-wizard-nav {\r\n    align-items: center;\r\n    border-top: 1px solid var(--hs-slate-200);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-top: auto;\r\n    padding-top: 25px;\r\n  }\r\n\r\n  #hysf-selector .hs-nav-hint {\r\n    color: var(--hs-slate-500);\r\n    font-size: 11px;\r\n    margin-left: auto;\r\n    margin-right: 12px;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-panel {\r\n    background:\r\n      radial-gradient(circle at 90% 8%, rgba(37,162,255,.18), transparent 27%),\r\n      linear-gradient(160deg, #08243a, #061827);\r\n    color: var(--hs-white);\r\n    padding: 37px 27px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-panel h4 {\r\n    color: var(--hs-white);\r\n    font-size: 17px;\r\n    margin: 0 0 5px;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-panel > p {\r\n    color: #8fa9bd;\r\n    font-size: 11px;\r\n    margin: 0 0 22px;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-list {\r\n    border-bottom: 1px solid rgba(255,255,255,.1);\r\n    border-top: 1px solid rgba(255,255,255,.1);\r\n    margin-bottom: 23px;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-row {\r\n    align-items: center;\r\n    border-bottom: 1px solid rgba(255,255,255,.07);\r\n    display: flex;\r\n    font-size: 11px;\r\n    gap: 12px;\r\n    justify-content: space-between;\r\n    min-height: 43px;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-row:last-child {\r\n    border-bottom: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-row span {\r\n    color: #7f9db3;\r\n  }\r\n\r\n  #hysf-selector .hs-summary-row strong {\r\n    color: #e6f5ff;\r\n    font-size: 10px;\r\n    max-width: 155px;\r\n    overflow: hidden;\r\n    text-align: right;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  #hysf-selector .hs-engineer-mini {\r\n    background: rgba(255,255,255,.065);\r\n    border: 1px solid rgba(255,255,255,.1);\r\n    border-radius: 13px;\r\n    padding: 17px;\r\n  }\r\n\r\n  #hysf-selector .hs-engineer-mini strong {\r\n    color: var(--hs-white);\r\n    display: block;\r\n    font-size: 12px;\r\n    margin-bottom: 5px;\r\n  }\r\n\r\n  #hysf-selector .hs-engineer-mini p {\r\n    color: #8fa9bd;\r\n    font-size: 10px;\r\n    line-height: 1.55;\r\n    margin: 0 0 13px;\r\n  }\r\n\r\n  #hysf-selector .hs-results {\r\n    display: none;\r\n    padding-top: 86px;\r\n  }\r\n\r\n  #hysf-selector .hs-results.is-visible {\r\n    display: block;\r\n  }\r\n\r\n  #hysf-selector .hs-results-title {\r\n    align-items: end;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  #hysf-selector .hs-results-meta {\r\n    color: var(--hs-slate-500);\r\n    font-size: 12px;\r\n    text-align: right;\r\n  }\r\n\r\n  #hysf-selector .hs-results-meta strong {\r\n    color: var(--hs-navy-950);\r\n  }\r\n\r\n  #hysf-selector .hs-results-layout {\r\n    align-items: start;\r\n    display: grid;\r\n    gap: 24px;\r\n    grid-template-columns: 276px minmax(0, 1fr);\r\n  }\r\n\r\n  #hysf-selector .hs-filters {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: var(--hs-radius-md);\r\n    box-shadow: 0 8px 24px rgba(5,32,55,.06);\r\n    overflow: hidden;\r\n    position: sticky;\r\n    top: 20px;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-head {\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--hs-slate-200);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 17px 18px;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-head strong {\r\n    color: var(--hs-navy-950);\r\n    font-size: 13px;\r\n  }\r\n\r\n  #hysf-selector .hs-reset {\r\n    background: transparent;\r\n    border: 0;\r\n    color: var(--hs-blue-700);\r\n    cursor: pointer;\r\n    font-size: 10px;\r\n    font-weight: 750;\r\n    padding: 3px;\r\n  }\r\n\r\n  #hysf-selector #hs-close-mobile-filter {\r\n    display: none;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-body {\r\n    padding: 5px 18px 18px;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-group {\r\n    border-bottom: 1px solid var(--hs-slate-200);\r\n    padding: 15px 0;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-group:last-child {\r\n    border-bottom: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-group label {\r\n    color: var(--hs-navy-900);\r\n    display: block;\r\n    font-size: 10px;\r\n    font-weight: 750;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  #hysf-selector .hs-filter-group select {\r\n    background: var(--hs-slate-50);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: 8px;\r\n    color: var(--hs-slate-700);\r\n    font-size: 11px;\r\n    min-height: 39px;\r\n    padding: 7px 9px;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-advanced-toggle {\r\n    align-items: center;\r\n    background: transparent;\r\n    border: 0;\r\n    color: var(--hs-blue-700);\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-size: 11px;\r\n    font-weight: 750;\r\n    justify-content: space-between;\r\n    padding: 15px 0 0;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-advanced {\r\n    display: none;\r\n  }\r\n\r\n  #hysf-selector .hs-advanced.is-open {\r\n    display: block;\r\n  }\r\n\r\n  #hysf-selector .hs-results-toolbar {\r\n    align-items: center;\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: 12px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 16px;\r\n    min-height: 54px;\r\n    padding: 9px 13px;\r\n  }\r\n\r\n  #hysf-selector .hs-active-tags {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 6px;\r\n  }\r\n\r\n  #hysf-selector .hs-active-tag {\r\n    background: #edf6ff;\r\n    border: 1px solid #d1e8fb;\r\n    border-radius: 999px;\r\n    color: #255f91;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    padding: 5px 8px;\r\n  }\r\n\r\n  #hysf-selector .hs-sort {\r\n    background: transparent;\r\n    border: 0;\r\n    color: var(--hs-slate-700);\r\n    font-size: 10px;\r\n    max-width: 155px;\r\n    padding: 5px;\r\n  }\r\n\r\n  #hysf-selector .hs-product-grid {\r\n    display: grid;\r\n    gap: 18px;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  }\r\n\r\n  #hysf-selector .hs-product-card {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: var(--hs-radius-md);\r\n    box-shadow: 0 8px 24px rgba(5,32,55,.055);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    position: relative;\r\n    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;\r\n  }\r\n\r\n  #hysf-selector .hs-product-card:hover {\r\n    border-color: #b9d8ef;\r\n    box-shadow: var(--hs-shadow-md);\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  #hysf-selector .hs-product-media {\r\n    align-items: center;\r\n    background:\r\n      linear-gradient(rgba(8,125,241,.035) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(8,125,241,.035) 1px, transparent 1px),\r\n      linear-gradient(145deg, #eef6fb, #f9fcfe);\r\n    background-size: 24px 24px, 24px 24px, auto;\r\n    border-bottom: 1px solid var(--hs-slate-200);\r\n    display: flex;\r\n    height: 185px;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    padding: 20px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-product-media svg {\r\n    filter: drop-shadow(0 18px 13px rgba(4,39,65,.16));\r\n    height: 128px;\r\n    width: 245px;\r\n  }\r\n\r\n  #hysf-selector .hs-product-photo {\r\n    height: 145px;\r\n    max-width: 88%;\r\n    object-fit: contain;\r\n    position: relative;\r\n    width: auto;\r\n    z-index: 1;\r\n  }\r\n\r\n  #hysf-selector .hs-match-badge {\r\n    border-radius: 999px;\r\n    font-size: 9px;\r\n    font-weight: 850;\r\n    left: 14px;\r\n    letter-spacing: .04em;\r\n    padding: 6px 9px;\r\n    position: absolute;\r\n    text-transform: uppercase;\r\n    top: 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-match-best {\r\n    background: #e2f7f0;\r\n    color: #08795a;\r\n  }\r\n\r\n  #hysf-selector .hs-match-compatible {\r\n    background: #e7f3ff;\r\n    color: #1465a8;\r\n  }\r\n\r\n  #hysf-selector .hs-match-review {\r\n    background: #fff0e4;\r\n    color: #a95410;\r\n  }\r\n\r\n  #hysf-selector .hs-score {\r\n    background: rgba(255,255,255,.82);\r\n    border: 1px solid rgba(145,170,189,.28);\r\n    border-radius: 999px;\r\n    color: var(--hs-slate-700);\r\n    font-size: 9px;\r\n    font-weight: 750;\r\n    padding: 5px 8px;\r\n    position: absolute;\r\n    right: 14px;\r\n    top: 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-product-body {\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n    padding: 19px;\r\n  }\r\n\r\n  #hysf-selector .hs-product-series {\r\n    color: var(--hs-blue-700);\r\n    font-size: 9px;\r\n    font-weight: 850;\r\n    letter-spacing: .11em;\r\n    margin-bottom: 6px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-product-card h3 {\r\n    color: var(--hs-navy-950);\r\n    font-size: 17px;\r\n    letter-spacing: -.018em;\r\n    line-height: 1.25;\r\n    margin: 0 0 5px;\r\n  }\r\n\r\n  #hysf-selector .hs-models {\r\n    color: var(--hs-slate-500);\r\n    font-family: \"SFMono-Regular\", Consolas, monospace;\r\n    font-size: 10px;\r\n    margin-bottom: 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-spec-grid {\r\n    display: grid;\r\n    gap: 0;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    margin-bottom: 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-spec {\r\n    border-left: 1px solid var(--hs-slate-200);\r\n    min-width: 0;\r\n    padding: 3px 9px;\r\n  }\r\n\r\n  #hysf-selector .hs-spec:first-child {\r\n    border-left: 0;\r\n    padding-left: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-spec span {\r\n    color: var(--hs-slate-500);\r\n    display: block;\r\n    font-size: 8px;\r\n    margin-bottom: 2px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-spec strong {\r\n    color: var(--hs-navy-900);\r\n    display: block;\r\n    font-size: 10px;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  #hysf-selector .hs-why {\r\n    background: var(--hs-slate-50);\r\n    border-left: 3px solid var(--hs-blue-500);\r\n    border-radius: 7px;\r\n    color: var(--hs-slate-700);\r\n    font-size: 10px;\r\n    line-height: 1.45;\r\n    margin-bottom: 16px;\r\n    min-height: 50px;\r\n    padding: 9px 10px;\r\n  }\r\n\r\n  #hysf-selector .hs-why strong {\r\n    color: var(--hs-navy-900);\r\n  }\r\n\r\n  #hysf-selector .hs-card-actions {\r\n    display: grid;\r\n    gap: 7px;\r\n    grid-template-columns: 1fr 1fr;\r\n    margin-top: auto;\r\n  }\r\n\r\n  #hysf-selector .hs-card-actions .hs-btn {\r\n    font-size: 10px;\r\n    min-height: 39px;\r\n    padding: 0 10px;\r\n  }\r\n\r\n  #hysf-selector .hs-no-results {\r\n    background: var(--hs-white);\r\n    border: 1px dashed #b6c9d7;\r\n    border-radius: var(--hs-radius-md);\r\n    display: none;\r\n    padding: 55px 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  #hysf-selector .hs-no-results.is-visible {\r\n    display: block;\r\n  }\r\n\r\n  #hysf-selector .hs-no-results-icon {\r\n    align-items: center;\r\n    background: #eaf5ff;\r\n    border-radius: 50%;\r\n    color: var(--hs-blue-700);\r\n    display: flex;\r\n    font-size: 25px;\r\n    height: 58px;\r\n    justify-content: center;\r\n    margin: 0 auto 15px;\r\n    width: 58px;\r\n  }\r\n\r\n  #hysf-selector .hs-no-results h3 {\r\n    color: var(--hs-navy-950);\r\n    font-size: 22px;\r\n    margin: 0 0 7px;\r\n  }\r\n\r\n  #hysf-selector .hs-no-results p {\r\n    color: var(--hs-slate-500);\r\n    font-size: 12px;\r\n    margin: 0 auto 18px;\r\n    max-width: 540px;\r\n  }\r\n\r\n  #hysf-selector .hs-disclaimer {\r\n    align-items: flex-start;\r\n    background: #fff8ef;\r\n    border: 1px solid #f3ddc1;\r\n    border-radius: 11px;\r\n    color: #825229;\r\n    display: flex;\r\n    font-size: 10px;\r\n    gap: 9px;\r\n    line-height: 1.5;\r\n    margin-top: 18px;\r\n    padding: 11px 13px;\r\n  }\r\n\r\n  #hysf-selector .hs-content-section {\r\n    padding-top: 92px;\r\n  }\r\n\r\n  #hysf-selector .hs-content-head {\r\n    align-items: end;\r\n    display: flex;\r\n    gap: 28px;\r\n    justify-content: space-between;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  #hysf-selector .hs-content-head h2 {\r\n    color: var(--hs-navy-950);\r\n    font-size: clamp(31px, 4vw, 48px);\r\n    letter-spacing: -.035em;\r\n    line-height: 1.06;\r\n    margin: 0;\r\n    max-width: 670px;\r\n  }\r\n\r\n  #hysf-selector .hs-content-head > p {\r\n    color: var(--hs-slate-500);\r\n    font-size: 13px;\r\n    line-height: 1.65;\r\n    margin: 0;\r\n    max-width: 440px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-panel {\r\n    background:\r\n      radial-gradient(circle at 88% 0%, rgba(29, 156, 246, .25), transparent 34%),\r\n      linear-gradient(138deg, #061725 0%, #0a3553 100%);\r\n    border: 1px solid rgba(255,255,255,.08);\r\n    border-radius: var(--hs-radius-lg);\r\n    box-shadow: var(--hs-shadow-lg);\r\n    color: var(--hs-white);\r\n    overflow: hidden;\r\n    padding: 42px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-panel::after {\r\n    border: 1px solid rgba(98, 205, 255, .13);\r\n    border-radius: 50%;\r\n    content: \"\";\r\n    height: 360px;\r\n    position: absolute;\r\n    right: -150px;\r\n    top: -205px;\r\n    width: 360px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-top {\r\n    align-items: end;\r\n    display: flex;\r\n    gap: 32px;\r\n    justify-content: space-between;\r\n    margin-bottom: 30px;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-top h2 {\r\n    color: var(--hs-white);\r\n    font-size: clamp(30px, 4vw, 46px);\r\n    letter-spacing: -.035em;\r\n    line-height: 1.06;\r\n    margin: 0;\r\n    max-width: 650px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-top p {\r\n    color: #a9c0d0;\r\n    font-size: 12px;\r\n    line-height: 1.65;\r\n    margin: 0;\r\n    max-width: 390px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-grid {\r\n    display: grid;\r\n    gap: 11px;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-card {\r\n    background: rgba(255,255,255,.065);\r\n    border: 1px solid rgba(255,255,255,.1);\r\n    border-radius: 14px;\r\n    min-height: 205px;\r\n    padding: 20px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-icon {\r\n    align-items: center;\r\n    background: rgba(26, 158, 250, .16);\r\n    border: 1px solid rgba(93, 200, 255, .2);\r\n    border-radius: 11px;\r\n    color: #76d2ff;\r\n    display: flex;\r\n    font-size: 21px;\r\n    height: 43px;\r\n    justify-content: center;\r\n    margin-bottom: 25px;\r\n    width: 43px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-card h3 {\r\n    color: var(--hs-white);\r\n    font-size: 15px;\r\n    line-height: 1.35;\r\n    margin: 0 0 8px;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-card p {\r\n    color: #9fb7c8;\r\n    font-size: 10px;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-footer {\r\n    align-items: center;\r\n    border-top: 1px solid rgba(255,255,255,.1);\r\n    color: #a7c2d3;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    font-size: 10px;\r\n    gap: 8px 19px;\r\n    margin-top: 25px;\r\n    padding-top: 19px;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  #hysf-selector .hs-proof-footer span::before {\r\n    color: #3fbaff;\r\n    content: \"\u2713\";\r\n    font-weight: 900;\r\n    margin-right: 7px;\r\n  }\r\n\r\n  #hysf-selector .hs-delivery-grid {\r\n    counter-reset: delivery-step;\r\n    display: grid;\r\n    gap: 12px;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  }\r\n\r\n  #hysf-selector .hs-delivery-card {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: var(--hs-radius-md);\r\n    box-shadow: var(--hs-shadow-sm);\r\n    min-height: 225px;\r\n    padding: 23px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-delivery-card::before {\r\n    align-items: center;\r\n    background: var(--hs-blue-600);\r\n    border-radius: 50%;\r\n    color: var(--hs-white);\r\n    content: counter(delivery-step);\r\n    counter-increment: delivery-step;\r\n    display: flex;\r\n    font-size: 11px;\r\n    font-weight: 850;\r\n    height: 31px;\r\n    justify-content: center;\r\n    margin-bottom: 35px;\r\n    width: 31px;\r\n  }\r\n\r\n  #hysf-selector .hs-delivery-card:not(:last-child)::after {\r\n    background: linear-gradient(90deg, var(--hs-blue-500), transparent);\r\n    content: \"\";\r\n    height: 1px;\r\n    left: 55px;\r\n    position: absolute;\r\n    right: -12px;\r\n    top: 38px;\r\n  }\r\n\r\n  #hysf-selector .hs-delivery-card h3 {\r\n    color: var(--hs-navy-950);\r\n    font-size: 17px;\r\n    line-height: 1.3;\r\n    margin: 0 0 9px;\r\n  }\r\n\r\n  #hysf-selector .hs-delivery-card p {\r\n    color: var(--hs-slate-500);\r\n    font-size: 11px;\r\n    line-height: 1.65;\r\n    margin: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-grid {\r\n    display: grid;\r\n    gap: 15px;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-card {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: var(--hs-radius-md);\r\n    box-shadow: var(--hs-shadow-sm);\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 370px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-visual {\r\n    background:\r\n      linear-gradient(rgba(10, 75, 118, .11) 1px, transparent 1px),\r\n      linear-gradient(90deg, rgba(10, 75, 118, .11) 1px, transparent 1px),\r\n      linear-gradient(145deg, #08223a, #0d5f8b);\r\n    background-size: 22px 22px, 22px 22px, auto;\r\n    min-height: 122px;\r\n    overflow: hidden;\r\n    padding: 20px;\r\n    position: relative;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-visual::after {\r\n    border: 1px solid rgba(100, 213, 255, .23);\r\n    border-radius: 50%;\r\n    content: \"\";\r\n    height: 150px;\r\n    position: absolute;\r\n    right: -30px;\r\n    top: -65px;\r\n    width: 150px;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-icon {\r\n    align-items: center;\r\n    background: rgba(255,255,255,.1);\r\n    border: 1px solid rgba(255,255,255,.16);\r\n    border-radius: 16px;\r\n    color: #7bd7ff;\r\n    display: flex;\r\n    font-size: 32px;\r\n    height: 70px;\r\n    justify-content: center;\r\n    position: relative;\r\n    width: 70px;\r\n    z-index: 1;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-body {\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n    padding: 23px;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-body h3 {\r\n    color: var(--hs-navy-950);\r\n    font-size: 20px;\r\n    margin: 0 0 6px;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-body > p {\r\n    color: var(--hs-slate-500);\r\n    font-size: 11px;\r\n    line-height: 1.55;\r\n    margin: 0 0 17px;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-specs {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 6px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-specs span {\r\n    background: var(--hs-slate-100);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: 999px;\r\n    color: var(--hs-slate-700);\r\n    font-size: 9px;\r\n    font-weight: 750;\r\n    padding: 6px 8px;\r\n  }\r\n\r\n  #hysf-selector .hs-usecase-body .hs-btn {\r\n    margin-top: auto;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-layout {\r\n    align-items: start;\r\n    display: grid;\r\n    gap: 48px;\r\n    grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);\r\n  }\r\n\r\n  #hysf-selector .hs-faq-intro {\r\n    position: sticky;\r\n    top: 30px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-intro h2 {\r\n    color: var(--hs-navy-950);\r\n    font-size: clamp(31px, 4vw, 46px);\r\n    letter-spacing: -.035em;\r\n    line-height: 1.08;\r\n    margin: 0 0 12px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-intro p {\r\n    color: var(--hs-slate-500);\r\n    font-size: 12px;\r\n    line-height: 1.65;\r\n    margin: 0 0 21px;\r\n    max-width: 380px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-list {\r\n    display: grid;\r\n    gap: 9px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-item {\r\n    background: var(--hs-white);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: 13px;\r\n    box-shadow: var(--hs-shadow-sm);\r\n    overflow: hidden;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-item summary {\r\n    align-items: center;\r\n    color: var(--hs-navy-950);\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-size: 13px;\r\n    font-weight: 780;\r\n    gap: 14px;\r\n    justify-content: space-between;\r\n    list-style: none;\r\n    min-height: 65px;\r\n    padding: 14px 18px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-item summary::-webkit-details-marker {\r\n    display: none;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-item summary::after {\r\n    align-items: center;\r\n    background: var(--hs-slate-100);\r\n    border-radius: 50%;\r\n    color: var(--hs-blue-700);\r\n    content: \"+\";\r\n    display: flex;\r\n    flex: 0 0 auto;\r\n    font-size: 18px;\r\n    height: 29px;\r\n    justify-content: center;\r\n    width: 29px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-item[open] summary::after {\r\n    content: \"\u2212\";\r\n  }\r\n\r\n  #hysf-selector .hs-faq-answer {\r\n    border-top: 1px solid var(--hs-slate-200);\r\n    color: var(--hs-slate-500);\r\n    font-size: 11px;\r\n    line-height: 1.7;\r\n    padding: 16px 18px 19px;\r\n  }\r\n\r\n  #hysf-selector .hs-faq-answer p {\r\n    margin: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-contact {\r\n    align-items: center;\r\n    border-top: 1px solid rgba(146, 204, 237, .2);\r\n    color: #a9c5d7;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    font-size: 11px;\r\n    gap: 7px 15px;\r\n    margin-top: 27px;\r\n    padding-top: 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-contact-label {\r\n    color: #72ceff;\r\n    font-size: 9px;\r\n    font-weight: 850;\r\n    letter-spacing: .13em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-contact a,\r\n  #hysf-selector .hs-hero-contact strong {\r\n    color: #f2f9fd;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    line-height: 1.45;\r\n    text-decoration: none;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-contact a:hover {\r\n    color: #72ceff;\r\n  }\r\n\r\n  #hysf-selector .hs-hero-contact-separator {\r\n    color: rgba(255,255,255,.24);\r\n  }\r\n\r\n  #hysf-selector .hs-hp {\r\n    height: 1px !important;\r\n    left: -10000px !important;\r\n    opacity: 0 !important;\r\n    overflow: hidden !important;\r\n    position: absolute !important;\r\n    width: 1px !important;\r\n  }\r\n\r\n  #hysf-selector .hs-mobile-filter {\r\n    bottom: 14px;\r\n    display: none;\r\n    left: 16px;\r\n    position: fixed;\r\n    right: 16px;\r\n    z-index: 50;\r\n  }\r\n\r\n  #hysf-selector .hs-mobile-filter .hs-btn {\r\n    box-shadow: 0 14px 30px rgba(5,32,55,.25);\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-modal {\r\n    align-items: center;\r\n    background: rgba(2, 15, 25, .74);\r\n    display: none;\r\n    inset: 0;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    position: fixed;\r\n    z-index: 9999;\r\n  }\r\n\r\n  #hysf-selector .hs-modal.is-open {\r\n    display: flex;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-card {\r\n    background: var(--hs-white);\r\n    border-radius: 20px;\r\n    box-shadow: 0 30px 90px rgba(0,0,0,.34);\r\n    max-height: calc(100vh - 40px);\r\n    max-width: 720px;\r\n    overflow: auto;\r\n    position: relative;\r\n    width: 100%;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-head {\r\n    background:\r\n      radial-gradient(circle at 95% 0%, rgba(37,162,255,.26), transparent 32%),\r\n      linear-gradient(145deg, #071c2e, #0a3452);\r\n    color: var(--hs-white);\r\n    padding: 27px 30px;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-head .hs-kicker {\r\n    color: #75caff;\r\n    margin-bottom: 5px;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-head h3 {\r\n    color: var(--hs-white);\r\n    font-size: 25px;\r\n    letter-spacing: -.02em;\r\n    margin: 0 0 5px;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-head p {\r\n    color: #9db4c5;\r\n    font-size: 11px;\r\n    margin: 0;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-close {\r\n    align-items: center;\r\n    background: rgba(255,255,255,.1);\r\n    border: 1px solid rgba(255,255,255,.16);\r\n    border-radius: 50%;\r\n    color: var(--hs-white);\r\n    cursor: pointer;\r\n    display: flex;\r\n    font-size: 18px;\r\n    height: 37px;\r\n    justify-content: center;\r\n    position: absolute;\r\n    right: 18px;\r\n    top: 18px;\r\n    width: 37px;\r\n  }\r\n\r\n  #hysf-selector .hs-modal-body {\r\n    padding: 27px 30px 30px;\r\n  }\r\n\r\n  #hysf-selector .hs-selected-summary {\r\n    background: var(--hs-slate-50);\r\n    border: 1px solid var(--hs-slate-200);\r\n    border-radius: 11px;\r\n    color: var(--hs-slate-700);\r\n    font-size: 10px;\r\n    line-height: 1.55;\r\n    margin-bottom: 20px;\r\n    padding: 12px 14px;\r\n  }\r\n\r\n  #hysf-selector .hs-form-status {\r\n    background: #e9f8f3;\r\n    border: 1px solid #bde7d8;\r\n    border-radius: 9px;\r\n    color: #087358;\r\n    display: none;\r\n    font-size: 11px;\r\n    margin-top: 14px;\r\n    padding: 11px 13px;\r\n  }\r\n\r\n  #hysf-selector .hs-form-status.is-visible {\r\n    display: block;\r\n  }\r\n\r\n  #hysf-selector .hs-form-status.is-error {\r\n    background: #fff0f0;\r\n    border-color: #efc3c5;\r\n    color: #9b3036;\r\n  }\r\n\r\n  #hysf-selector .hs-submit-button[disabled] {\r\n    cursor: wait;\r\n    opacity: .68;\r\n    transform: none;\r\n  }\r\n\r\n  @media (max-width: 1024px) {\r\n    #hysf-selector .hs-hero-grid { gap: 30px; grid-template-columns: 1fr .8fr; }\r\n    #hysf-selector .hs-hero { min-height: 590px; padding: 75px 0; }\r\n    #hysf-selector .hs-proof-row { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }\r\n    #hysf-selector .hs-proof:nth-child(3) { border-left: 0; padding-left: 0; }\r\n    #hysf-selector .hs-wizard-body { grid-template-columns: minmax(0, 1fr) 270px; }\r\n    #hysf-selector .hs-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    #hysf-selector .hs-results-layout { grid-template-columns: 240px minmax(0, 1fr); }\r\n    #hysf-selector .hs-product-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    #hysf-selector .hs-delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    #hysf-selector .hs-delivery-card:nth-child(2)::after { display: none; }\r\n    #hysf-selector .hs-faq-layout { gap: 34px; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    #hysf-selector .hs-shell { padding-left: 17px; padding-right: 17px; }\r\n    #hysf-selector .hs-hero { min-height: auto; padding: 62px 0 55px; }\r\n    #hysf-selector .hs-hero-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-hero h1 { font-size: 44px; }\r\n    #hysf-selector .hs-hero-copy { font-size: 15px; }\r\n    #hysf-selector .hs-hero-visual { display: none; }\r\n    #hysf-selector .hs-actions .hs-btn { flex: 1; min-width: 150px; }\r\n    #hysf-selector .hs-proof-row { margin-top: 38px; }\r\n    #hysf-selector .hs-proof { padding-left: 13px; padding-right: 13px; }\r\n    #hysf-selector .hs-section-intro { align-items: start; flex-direction: column; gap: 8px; }\r\n    #hysf-selector .hs-wizard-wrap { padding-top: 52px; }\r\n    #hysf-selector .hs-progress { gap: 5px; padding: 0 12px; }\r\n    #hysf-selector .hs-progress-item { min-height: 51px; }\r\n    #hysf-selector .hs-progress-label { display: none; }\r\n    #hysf-selector .hs-wizard-body { grid-template-columns: 1fr; min-height: 0; }\r\n    #hysf-selector .hs-question-area { min-height: 590px; padding: 29px 20px 22px; }\r\n    #hysf-selector .hs-summary-panel { display: none; }\r\n    #hysf-selector .hs-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n    #hysf-selector .hs-option-card { min-height: 110px; padding: 14px; }\r\n    #hysf-selector .hs-form-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-field.hs-span-2 { grid-column: auto; }\r\n    #hysf-selector .hs-nav-hint { display: none; }\r\n    #hysf-selector .hs-results { padding-top: 65px; }\r\n    #hysf-selector .hs-results-title { align-items: start; flex-direction: column; gap: 8px; }\r\n    #hysf-selector .hs-results-meta { text-align: left; }\r\n    #hysf-selector .hs-results-layout { display: block; }\r\n    #hysf-selector .hs-filters {\r\n      border-radius: 18px 18px 0 0;\r\n      bottom: 0;\r\n      display: none;\r\n      left: 0;\r\n      max-height: 82vh;\r\n      overflow: auto;\r\n      position: fixed;\r\n      right: 0;\r\n      top: auto;\r\n      z-index: 90;\r\n    }\r\n    #hysf-selector .hs-filters.is-mobile-open { display: block; }\r\n    #hysf-selector #hs-close-mobile-filter { display: inline-block; }\r\n    #hysf-selector .hs-product-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-mobile-filter.is-visible { display: block; }\r\n    #hysf-selector .hs-results-toolbar { align-items: start; flex-direction: column; gap: 8px; }\r\n    #hysf-selector .hs-sort { border-top: 1px solid var(--hs-slate-200); max-width: none; padding-top: 9px; width: 100%; }\r\n    #hysf-selector .hs-content-section { padding-top: 66px; }\r\n    #hysf-selector .hs-content-head { align-items: start; flex-direction: column; gap: 8px; }\r\n    #hysf-selector .hs-proof-panel { padding: 28px 20px; }\r\n    #hysf-selector .hs-proof-top { align-items: start; flex-direction: column; gap: 10px; }\r\n    #hysf-selector .hs-proof-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-proof-card { min-height: 0; }\r\n    #hysf-selector .hs-proof-icon { margin-bottom: 18px; }\r\n    #hysf-selector .hs-delivery-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-delivery-card { min-height: 0; }\r\n    #hysf-selector .hs-delivery-card::after { display: none; }\r\n    #hysf-selector .hs-usecase-grid { grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-usecase-card { min-height: 0; }\r\n    #hysf-selector .hs-faq-layout { gap: 24px; grid-template-columns: 1fr; }\r\n    #hysf-selector .hs-faq-intro { position: static; }\r\n    #hysf-selector .hs-hero-contact { gap: 6px 11px; margin-top: 30px; }\r\n    #hysf-selector .hs-hero-contact-address { flex-basis: 100%; }\r\n    #hysf-selector .hs-hero-contact-separator:last-of-type { display: none; }\r\n    #hysf-selector .hs-modal { padding: 8px; }\r\n    #hysf-selector .hs-modal-card { border-radius: 16px; max-height: calc(100vh - 16px); }\r\n    #hysf-selector .hs-modal-head, #hysf-selector .hs-modal-body { padding-left: 20px; padding-right: 20px; }\r\n  }\r\n\r\n  @media (max-width: 420px) {\r\n    #hysf-selector .hs-hero h1 { font-size: 38px; }\r\n    #hysf-selector .hs-proof strong { font-size: 14px; }\r\n    #hysf-selector .hs-option-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\r\n    #hysf-selector .hs-option-card { min-height: 101px; }\r\n    #hysf-selector .hs-card-actions { grid-template-columns: 1fr; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    #hysf-selector *, #hysf-selector *::before, #hysf-selector *::after {\r\n      scroll-behavior: auto !important;\r\n      transition-duration: .01ms !important;\r\n      animation-duration: .01ms !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section id=\"hysf-selector\" aria-label=\"HYSF Underwater Connector Selector\">\r\n  <header class=\"hs-hero\">\r\n    <div class=\"hs-grid-lines\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"hs-shell hs-hero-grid\">\r\n      <div>\r\n        <div class=\"hs-eyebrow\">Engineering Selection Tool<\/div>\r\n        <h1>Find Your <span>Subsea Connector<\/span><\/h1>\r\n        <p class=\"hs-hero-copy\">Answer a few engineering questions and compare suitable HYSF connector families for power, signal, Ethernet, fiber and coaxial applications.<\/p>\r\n        <div class=\"hs-actions\">\r\n          <button class=\"hs-btn hs-btn-primary\" type=\"button\" data-hs-scroll=\"wizard\">Start Selecting <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n          <button class=\"hs-btn hs-btn-secondary\" type=\"button\" data-hs-modal=\"General Engineering Review\">Ask an Engineer<\/button>\r\n          <a class=\"hs-btn hs-btn-secondary\" href=\"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-SUBSEA-Catalog-2026.pdf\" target=\"_blank\" rel=\"noopener\">2026 Catalog<\/a>\r\n        <\/div>\r\n        <div class=\"hs-proof-row\" aria-label=\"Engineering capabilities\">\r\n          <div class=\"hs-proof\"><strong>2\u201361<\/strong><span>Contact configurations<\/span><\/div>\r\n          <div class=\"hs-proof\"><strong>Up to 6000m<\/strong><span>Depth options<\/span><\/div>\r\n          <div class=\"hs-proof\"><strong>180A<\/strong><span>High-current capability<\/span><\/div>\r\n          <div class=\"hs-proof\"><strong>STEP Files<\/strong><span>For engineering review<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs-hero-visual\" aria-hidden=\"true\">\r\n        <div class=\"hs-blueprint\">\r\n          <div class=\"hs-blueprint-top\">\r\n            <div class=\"hs-blueprint-title\">Connector Selection Preview<\/div>\r\n            <div class=\"hs-demo-badge\">Prototype<\/div>\r\n          <\/div>\r\n          <div class=\"hs-connector-stage\">\r\n            <div class=\"hs-orbit\"><\/div>\r\n            <svg class=\"hs-hero-connector\" viewBox=\"0 0 620 280\" role=\"img\" aria-label=\"Subsea connector illustration\">\r\n              <defs>\r\n                <linearGradient id=\"hsMetalA\" x1=\"0\" x2=\"1\"><stop stop-color=\"#647e8f\"\/><stop offset=\".45\" stop-color=\"#e5eef3\"\/><stop offset=\".72\" stop-color=\"#7791a2\"\/><stop offset=\"1\" stop-color=\"#385466\"\/><\/linearGradient>\r\n                <linearGradient id=\"hsRubberA\" x1=\"0\" x2=\"1\"><stop stop-color=\"#07121a\"\/><stop offset=\".48\" stop-color=\"#243844\"\/><stop offset=\"1\" stop-color=\"#02090e\"\/><\/linearGradient>\r\n                <linearGradient id=\"hsBlueA\" x1=\"0\" x2=\"1\"><stop stop-color=\"#087df1\"\/><stop offset=\"1\" stop-color=\"#22b8ff\"\/><\/linearGradient>\r\n              <\/defs>\r\n              <path d=\"M62 128H4M62 153H18\" stroke=\"#43caff\" stroke-width=\"2\" opacity=\".5\"\/>\r\n              <path d=\"M558 128h58M558 153h44\" stroke=\"#43caff\" stroke-width=\"2\" opacity=\".5\"\/>\r\n              <rect x=\"76\" y=\"95\" width=\"150\" height=\"90\" rx=\"42\" fill=\"url(#hsRubberA)\"\/>\r\n              <path d=\"M94 102v76M112 99v82M130 98v84M148 98v84M166 99v82M184 102v76\" stroke=\"#4a5f6b\" stroke-width=\"5\" opacity=\".66\"\/>\r\n              <rect x=\"211\" y=\"82\" width=\"110\" height=\"116\" rx=\"18\" fill=\"url(#hsMetalA)\"\/>\r\n              <path d=\"M223 91h86M223 189h86\" stroke=\"#eff8fc\" stroke-width=\"3\" opacity=\".65\"\/>\r\n              <rect x=\"305\" y=\"94\" width=\"162\" height=\"92\" rx=\"36\" fill=\"url(#hsBlueA)\"\/>\r\n              <path d=\"M326 103v74M347 98v84M368 97v86M389 97v86M410 98v84M431 104v72\" stroke=\"#94d9ff\" stroke-width=\"5\" opacity=\".38\"\/>\r\n              <rect x=\"455\" y=\"82\" width=\"83\" height=\"116\" rx=\"17\" fill=\"url(#hsMetalA)\"\/>\r\n              <ellipse cx=\"535\" cy=\"140\" rx=\"49\" ry=\"58\" fill=\"#1e3644\"\/>\r\n              <ellipse cx=\"535\" cy=\"140\" rx=\"37\" ry=\"45\" fill=\"#07141c\" stroke=\"#718b9a\" stroke-width=\"3\"\/>\r\n              <g fill=\"#f5c864\">\r\n                <circle cx=\"524\" cy=\"121\" r=\"5\"\/><circle cx=\"546\" cy=\"121\" r=\"5\"\/>\r\n                <circle cx=\"517\" cy=\"140\" r=\"5\"\/><circle cx=\"535\" cy=\"140\" r=\"5\"\/><circle cx=\"553\" cy=\"140\" r=\"5\"\/>\r\n                <circle cx=\"524\" cy=\"159\" r=\"5\"\/><circle cx=\"546\" cy=\"159\" r=\"5\"\/>\r\n                <circle cx=\"535\" cy=\"172\" r=\"5\"\/>\r\n              <\/g>\r\n              <path d=\"M236 60v-22h79\" stroke=\"#65d9ff\" stroke-width=\"1.5\" opacity=\".7\"\/>\r\n              <text x=\"321\" y=\"41\" fill=\"#8bdbff\" font-size=\"13\" font-family=\"Arial\">316L BULKHEAD<\/text>\r\n              <path d=\"M426 215v25h-82\" stroke=\"#65d9ff\" stroke-width=\"1.5\" opacity=\".7\"\/>\r\n              <text x=\"229\" y=\"245\" fill=\"#8bdbff\" font-size=\"13\" font-family=\"Arial\">MOLDED INLINE CABLE<\/text>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"hs-blueprint-specs\">\r\n            <div class=\"hs-blueprint-spec\"><span>Function<\/span><strong>Power + Data<\/strong><\/div>\r\n            <div class=\"hs-blueprint-spec\"><span>Interface<\/span><strong>Bulkhead + Inline<\/strong><\/div>\r\n            <div class=\"hs-blueprint-spec\"><span>Output<\/span><strong>Matched Series<\/strong><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"hs-shell hs-hero-contact\" aria-label=\"HYSF SUBSEA direct contact\">\r\n      <span class=\"hs-hero-contact-label\">Direct Contact<\/span>\r\n      <a href=\"mailto:info@hysfsubsea.com\">Email: info@hysfsubsea.com<\/a>\r\n      <span class=\"hs-hero-contact-separator\" aria-hidden=\"true\">\u2022<\/span>\r\n      <a href=\"https:\/\/wa.me\/8615960131727\" target=\"_blank\" rel=\"noopener\">WhatsApp \/ Phone: +86 159 6013 1727<\/a>\r\n      <span class=\"hs-hero-contact-separator\" aria-hidden=\"true\">\u2022<\/span>\r\n      <strong class=\"hs-hero-contact-address\">1-1207, Building A1, Shengde Garden, No. 133 Yonghua Road, Anci District, Langfang City, Hebei Province, China<\/strong>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <main class=\"hs-main\">\r\n    <div class=\"hs-shell hs-wizard-wrap\" id=\"hs-wizard-anchor\">\r\n      <div class=\"hs-section-intro\">\r\n        <div>\r\n          <span class=\"hs-kicker\">60-Second Selection<\/span>\r\n          <h2>Tell us what your system needs.<\/h2>\r\n        <\/div>\r\n        <p>Choose \u201cNot sure\u201d whenever a specification is unknown. The final inquiry will keep your selections for engineering review.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"hs-wizard\">\r\n        <div class=\"hs-progress\" aria-label=\"Selection progress\">\r\n          <div class=\"hs-progress-item is-active\" data-progress=\"1\"><span class=\"hs-step-number\">1<\/span><span class=\"hs-progress-label\">Application<\/span><\/div>\r\n          <div class=\"hs-progress-item\" data-progress=\"2\"><span class=\"hs-step-number\">2<\/span><span class=\"hs-progress-label\">Transmission<\/span><\/div>\r\n          <div class=\"hs-progress-item\" data-progress=\"3\"><span class=\"hs-step-number\">3<\/span><span class=\"hs-progress-label\">Mating<\/span><\/div>\r\n          <div class=\"hs-progress-item\" data-progress=\"4\"><span class=\"hs-step-number\">4<\/span><span class=\"hs-progress-label\">Electrical<\/span><\/div>\r\n          <div class=\"hs-progress-item\" data-progress=\"5\"><span class=\"hs-step-number\">5<\/span><span class=\"hs-progress-label\">Environment<\/span><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hs-wizard-body\">\r\n          <div class=\"hs-question-area\">\r\n            <div class=\"hs-step is-active\" data-step=\"1\">\r\n              <span class=\"hs-question-number\">Question 01<\/span>\r\n              <h3>What is your application?<\/h3>\r\n              <p class=\"hs-question-help\">This helps rank suitable series. It will not automatically exclude other compatible products.<\/p>\r\n              <div class=\"hs-option-grid\">\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-application\" value=\"rov-auv\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u2301<\/span><strong>ROV \/ AUV<\/strong><small>Robotics and vehicle systems<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-application\" value=\"camera\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u25c9<\/span><strong>Camera & Imaging<\/strong><small>Video, Ethernet and lighting<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-application\" value=\"sensor\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u2301<\/span><strong>Sensor \/ Sonar<\/strong><small>Signals and instrumentation<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-application\" value=\"thruster\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u21bb<\/span><strong>Thruster & Power<\/strong><small>High-current power delivery<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-application\" value=\"pbof\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u224b<\/span><strong>PBOF System<\/strong><small>Oil-filled compensated systems<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-application\" value=\"other\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\uff0b<\/span><strong>Other \/ Not Sure<\/strong><small>Continue with technical needs<\/small><\/span><\/label>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hs-step\" data-step=\"2\">\r\n              <span class=\"hs-question-number\">Question 02<\/span>\r\n              <h3>What will the connector transmit?<\/h3>\r\n              <p class=\"hs-question-help\">Select the primary function. Choose Hybrid when power and data\/fiber\/coax must share one connector.<\/p>\r\n              <div class=\"hs-option-grid\">\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-transmission\" value=\"power\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u03df<\/span><strong>Power<\/strong><small>Low to high current<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-transmission\" value=\"signal\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u223f<\/span><strong>Signal<\/strong><small>Control and sensor signals<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-transmission\" value=\"ethernet\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u21c4<\/span><strong>Ethernet<\/strong><small>Fast, Gigabit or 10Gbps<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-transmission\" value=\"fiber\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u2726<\/span><strong>Fiber Optic<\/strong><small>Single-mode or multi-mode<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-transmission\" value=\"coaxial\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u25ce<\/span><strong>Coaxial \/ RF<\/strong><small>50\u03a9 or 75\u03a9 systems<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-transmission\" value=\"hybrid\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u2318<\/span><strong>Hybrid<\/strong><small>Power plus data or optical<\/small><\/span><\/label>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hs-step\" data-step=\"3\">\r\n              <span class=\"hs-question-number\">Question 03<\/span>\r\n              <h3>Where will mating take place?<\/h3>\r\n              <p class=\"hs-question-help\">Wet-mateable connectors can be mated in the intended underwater environment. Confirm the exact mating procedure with engineering.<\/p>\r\n              <div class=\"hs-option-grid\">\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-mating\" value=\"wet\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u224b<\/span><strong>Wet-Mateable<\/strong><small>Mating required underwater<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-mating\" value=\"dry\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">\u25c7<\/span><strong>Dry-Mate<\/strong><small>Mated before deployment<\/small><\/span><\/label>\r\n                <label class=\"hs-option\"><input type=\"radio\" name=\"hs-mating\" value=\"\"><span class=\"hs-option-card\"><span class=\"hs-check\">\u2713<\/span><span class=\"hs-option-icon\">?<\/span><strong>Not Sure<\/strong><small>Engineer will confirm<\/small><\/span><\/label>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hs-step\" data-step=\"4\">\r\n              <span class=\"hs-question-number\">Question 04<\/span>\r\n              <h3>Enter the electrical requirements.<\/h3>\r\n              <p class=\"hs-question-help\">Use continuous current per contact. Leave unknown values as Not sure.<\/p>\r\n              <div class=\"hs-form-grid\">\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Required contacts <small>total<\/small><\/span><select id=\"hs-w-contacts\"><option value=\"\">Not sure<\/option><option value=\"1\">1 contact<\/option><option value=\"2\">2 contacts<\/option><option value=\"3\">3 contacts<\/option><option value=\"4\">4 contacts<\/option><option value=\"5\">5 contacts<\/option><option value=\"6\">6 contacts<\/option><option value=\"8\">8 contacts<\/option><option value=\"10\">10 contacts<\/option><option value=\"12\">12 contacts<\/option><option value=\"16\">16 contacts<\/option><option value=\"24\">24 or more<\/option><\/select><\/label>\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Current per contact <small>A<\/small><\/span><select id=\"hs-w-current\"><option value=\"\">Not sure<\/option><option value=\"5\">Up to 5A<\/option><option value=\"10\">Up to 10A<\/option><option value=\"25\">Up to 25A<\/option><option value=\"40\">Up to 40A<\/option><option value=\"60\">Up to 60A<\/option><option value=\"150\">Up to 150A<\/option><option value=\"180\">Up to 180A<\/option><\/select><\/label>\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Operating voltage <small>V<\/small><\/span><select id=\"hs-w-voltage\"><option value=\"\">Not sure<\/option><option value=\"48\">48V or below<\/option><option value=\"300\">Up to 300V<\/option><option value=\"400\">Up to 400V<\/option><option value=\"550\">Up to 550V<\/option><option value=\"600\">Up to 600V<\/option><option value=\"1000\">Up to 1000V<\/option><\/select><\/label>\r\n                <label class=\"hs-field\" id=\"hs-speed-field\"><span class=\"hs-field-label\">Ethernet speed <small>minimum<\/small><\/span><select id=\"hs-w-speed\"><option value=\"\">Not sure \/ Not applicable<\/option><option value=\"100\">100 Mbps<\/option><option value=\"1000\">1 Gbps<\/option><option value=\"10000\">10 Gbps<\/option><\/select><\/label>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hs-step\" data-step=\"5\">\r\n              <span class=\"hs-question-number\">Question 05<\/span>\r\n              <h3>Define the mechanical environment.<\/h3>\r\n              <p class=\"hs-question-help\">Depth is treated as a minimum requirement. Advanced filters remain available on the result screen.<\/p>\r\n              <div class=\"hs-form-grid\">\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Minimum operating depth <small>m<\/small><\/span><select id=\"hs-w-depth\"><option value=\"\">Not sure<\/option><option value=\"300\">300m<\/option><option value=\"1000\">1000m<\/option><option value=\"3000\">3000m<\/option><option value=\"4000\">4000m<\/option><option value=\"6000\">6000m<\/option><\/select><\/label>\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Connector style<\/span><select id=\"hs-w-style\"><option value=\"\">Any \/ Not sure<\/option><option value=\"bulkhead\">Bulkhead<\/option><option value=\"inline\">Inline cable<\/option><option value=\"pbof\">PBOF \/ Penetrator<\/option><option value=\"right-angle\">Right angle<\/option><option value=\"flange\">Flange mount<\/option><\/select><\/label>\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Thread<\/span><select id=\"hs-w-thread\"><option value=\"\">Any \/ Not sure<\/option><option value=\"5\/16-24UNF\">5\/16-24UNF<\/option><option value=\"3\/8-24UNF\">3\/8-24UNF<\/option><option value=\"7\/16-20UNF\">7\/16-20UNF<\/option><option value=\"1\/2-20UNF\">1\/2-20UNF<\/option><option value=\"5\/8-18UNF\">5\/8-18UNF<\/option><option value=\"3\/4-16UNF\">3\/4-16UNF<\/option><option value=\"7\/8-14UNF\">7\/8-14UNF<\/option><\/select><\/label>\r\n                <label class=\"hs-field\"><span class=\"hs-field-label\">Compatible brand<\/span><select id=\"hs-w-brand\"><option value=\"\">Any \/ New design<\/option><option value=\"SubConn\">SubConn style<\/option><option value=\"SEACON\">SEACON style<\/option><option value=\"Impulse\">Impulse style<\/option><option value=\"Blue Robotics\">Blue Robotics interface<\/option><\/select><\/label>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hs-wizard-nav\">\r\n              <button class=\"hs-btn hs-btn-ghost hs-btn-small\" id=\"hs-back\" type=\"button\" style=\"visibility:hidden\">\u2190 Back<\/button>\r\n              <span class=\"hs-nav-hint\" id=\"hs-nav-hint\">Choose one option to continue<\/span>\r\n              <button class=\"hs-btn hs-btn-primary hs-btn-small\" id=\"hs-next\" type=\"button\">Continue <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <aside class=\"hs-summary-panel\">\r\n            <h4>Your requirements<\/h4>\r\n            <p>Selections update as you continue.<\/p>\r\n            <div class=\"hs-summary-list\">\r\n              <div class=\"hs-summary-row\"><span>Application<\/span><strong data-summary=\"application\">Not selected<\/strong><\/div>\r\n              <div class=\"hs-summary-row\"><span>Transmission<\/span><strong data-summary=\"transmission\">Not selected<\/strong><\/div>\r\n              <div class=\"hs-summary-row\"><span>Mating<\/span><strong data-summary=\"mating\">Not selected<\/strong><\/div>\r\n              <div class=\"hs-summary-row\"><span>Contacts<\/span><strong data-summary=\"contacts\">Not sure<\/strong><\/div>\r\n              <div class=\"hs-summary-row\"><span>Current<\/span><strong data-summary=\"current\">Not sure<\/strong><\/div>\r\n              <div class=\"hs-summary-row\"><span>Depth<\/span><strong data-summary=\"depth\">Not sure<\/strong><\/div>\r\n            <\/div>\r\n            <div class=\"hs-engineer-mini\">\r\n              <strong>Unsure about a specification?<\/strong>\r\n              <p>Send your project requirements, existing connector reference or drawing to an HYSF engineer.<\/p>\r\n              <button class=\"hs-btn hs-btn-secondary hs-btn-small\" type=\"button\" data-hs-modal=\"Engineering Selection Help\">Ask an Engineer<\/button>\r\n            <\/div>\r\n          <\/aside>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <section class=\"hs-shell hs-results\" id=\"hs-results\" aria-live=\"polite\">\r\n      <div class=\"hs-results-title\">\r\n        <div>\r\n          <span class=\"hs-kicker\">Recommended Products<\/span>\r\n          <h2>Connector families to review<\/h2>\r\n        <\/div>\r\n        <div class=\"hs-results-meta\"><strong id=\"hs-result-count\">0 matches<\/strong><br>Verify final specifications with engineering.<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hs-results-layout\">\r\n        <aside class=\"hs-filters\" id=\"hs-filters\">\r\n          <div class=\"hs-filter-head\"><strong>Refine Results<\/strong><button class=\"hs-reset\" id=\"hs-close-mobile-filter\" type=\"button\">Close<\/button><\/div>\r\n          <div class=\"hs-filter-body\">\r\n            <div class=\"hs-filter-group\"><label for=\"hs-f-transmission\">Transmission<\/label><select id=\"hs-f-transmission\"><option value=\"\">All types<\/option><option value=\"power\">Power<\/option><option value=\"signal\">Signal<\/option><option value=\"ethernet\">Ethernet<\/option><option value=\"fiber\">Fiber optic<\/option><option value=\"coaxial\">Coaxial \/ RF<\/option><option value=\"hybrid\">Hybrid<\/option><\/select><\/div>\r\n            <div class=\"hs-filter-group\"><label for=\"hs-f-mating\">Mating type<\/label><select id=\"hs-f-mating\"><option value=\"\">Any<\/option><option value=\"wet\">Wet-mateable<\/option><option value=\"dry\">Dry-mate<\/option><\/select><\/div>\r\n            <div class=\"hs-filter-group\"><label for=\"hs-f-contacts\">Required contacts<\/label><select id=\"hs-f-contacts\"><option value=\"\">Any<\/option><option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option><option value=\"4\">4<\/option><option value=\"5\">5<\/option><option value=\"6\">6<\/option><option value=\"8\">8<\/option><option value=\"10\">10<\/option><option value=\"12\">12<\/option><option value=\"16\">16<\/option><option value=\"24\">24+<\/option><\/select><\/div>\r\n            <div class=\"hs-filter-group\"><label for=\"hs-f-current\">Minimum current \/ contact<\/label><select id=\"hs-f-current\"><option value=\"\">Any<\/option><option value=\"5\">5A<\/option><option value=\"10\">10A<\/option><option value=\"25\">25A<\/option><option value=\"40\">40A<\/option><option value=\"60\">60A<\/option><option value=\"150\">150A<\/option><option value=\"180\">180A<\/option><\/select><\/div>\r\n            <div class=\"hs-filter-group\"><label for=\"hs-f-depth\">Minimum depth<\/label><select id=\"hs-f-depth\"><option value=\"\">Any<\/option><option value=\"300\">300m<\/option><option value=\"1000\">1000m<\/option><option value=\"3000\">3000m<\/option><option value=\"4000\">4000m<\/option><option value=\"6000\">6000m<\/option><\/select><\/div>\r\n\r\n            <button class=\"hs-advanced-toggle\" id=\"hs-advanced-toggle\" type=\"button\" aria-expanded=\"false\">Advanced Filters <span>\uff0b<\/span><\/button>\r\n            <div class=\"hs-advanced\" id=\"hs-advanced\">\r\n              <div class=\"hs-filter-group\"><label for=\"hs-f-voltage\">Minimum voltage rating<\/label><select id=\"hs-f-voltage\"><option value=\"\">Any<\/option><option value=\"48\">48V<\/option><option value=\"300\">300V<\/option><option value=\"400\">400V<\/option><option value=\"550\">550V<\/option><option value=\"600\">600V<\/option><option value=\"1000\">1000V<\/option><\/select><\/div>\r\n              <div class=\"hs-filter-group\"><label for=\"hs-f-style\">Connector style<\/label><select id=\"hs-f-style\"><option value=\"\">Any<\/option><option value=\"bulkhead\">Bulkhead<\/option><option value=\"inline\">Inline cable<\/option><option value=\"pbof\">PBOF \/ Penetrator<\/option><option value=\"right-angle\">Right angle<\/option><option value=\"flange\">Flange mount<\/option><\/select><\/div>\r\n              <div class=\"hs-filter-group\"><label for=\"hs-f-thread\">Thread<\/label><select id=\"hs-f-thread\"><option value=\"\">Any<\/option><option value=\"5\/16-24UNF\">5\/16-24UNF<\/option><option value=\"3\/8-24UNF\">3\/8-24UNF<\/option><option value=\"7\/16-20UNF\">7\/16-20UNF<\/option><option value=\"1\/2-20UNF\">1\/2-20UNF<\/option><option value=\"5\/8-18UNF\">5\/8-18UNF<\/option><option value=\"3\/4-16UNF\">3\/4-16UNF<\/option><option value=\"7\/8-14UNF\">7\/8-14UNF<\/option><\/select><\/div>\r\n              <div class=\"hs-filter-group\"><label for=\"hs-f-brand\">Compatible brand<\/label><select id=\"hs-f-brand\"><option value=\"\">Any<\/option><option value=\"SubConn\">SubConn style<\/option><option value=\"SEACON\">SEACON style<\/option><option value=\"Impulse\">Impulse style<\/option><option value=\"Blue Robotics\">Blue Robotics interface<\/option><\/select><\/div>\r\n            <\/div>\r\n            <button class=\"hs-btn hs-btn-ghost hs-btn-small\" id=\"hs-reset\" type=\"button\" style=\"margin-top:16px;width:100%\">Reset All Filters<\/button>\r\n          <\/div>\r\n        <\/aside>\r\n\r\n        <div>\r\n          <div class=\"hs-results-toolbar\">\r\n            <div class=\"hs-active-tags\" id=\"hs-active-tags\"><\/div>\r\n            <select class=\"hs-sort\" id=\"hs-sort\" aria-label=\"Sort results\"><option value=\"score\">Sort: Best match<\/option><option value=\"depth\">Depth: High to low<\/option><option value=\"current\">Current: High to low<\/option><option value=\"contacts\">Contacts: Low to high<\/option><\/select>\r\n          <\/div>\r\n          <div class=\"hs-product-grid\" id=\"hs-product-grid\"><\/div>\r\n          <div class=\"hs-no-results\" id=\"hs-no-results\">\r\n            <div class=\"hs-no-results-icon\">\u2315<\/div>\r\n            <h3>No exact standard match found<\/h3>\r\n            <p>Your requirements may need a custom contact layout, cable assembly, mounting thread or housing solution. Send the selected requirements to our engineering team.<\/p>\r\n            <button class=\"hs-btn hs-btn-primary\" type=\"button\" data-hs-modal=\"Custom Connector Review\">Request Custom Solution<\/button>\r\n          <\/div>\r\n          <div class=\"hs-disclaimer\"><span>\u24d8<\/span><span><strong>Prototype data:<\/strong> product names and technical values in this demo must be checked against the approved HYSF catalogue and drawings before the selector is published.<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"hs-shell hs-content-section\" aria-labelledby=\"hs-proof-title\">\r\n      <div class=\"hs-proof-panel\">\r\n        <div class=\"hs-proof-top\">\r\n          <div>\r\n            <span class=\"hs-kicker\">Engineering Proof<\/span>\r\n            <h2 id=\"hs-proof-title\">Built for critical subsea connections.<\/h2>\r\n          <\/div>\r\n          <p>Recommended configurations are reviewed against the approved electrical, mechanical and environmental requirements. Test parameters are confirmed by product series and project.<\/p>\r\n        <\/div>\r\n        <div class=\"hs-proof-grid\">\r\n          <article class=\"hs-proof-card\">\r\n            <div class=\"hs-proof-icon\" aria-hidden=\"true\">\u224b<\/div>\r\n            <h3>Hyperbaric Pressure Testing<\/h3>\r\n            <p>Pressure and hold-time parameters are defined against the approved series specification and operating requirement.<\/p>\r\n          <\/article>\r\n          <article class=\"hs-proof-card\">\r\n            <div class=\"hs-proof-icon\" aria-hidden=\"true\">\u03a9<\/div>\r\n            <h3>Insulation Resistance<\/h3>\r\n            <p>Electrical isolation is checked to help identify sealing, material or assembly defects before product release.<\/p>\r\n          <\/article>\r\n          <article class=\"hs-proof-card\">\r\n            <div class=\"hs-proof-icon\" aria-hidden=\"true\">\u2194<\/div>\r\n            <h3>Contact Resistance<\/h3>\r\n            <p>Electrical pathways are measured to confirm stable low-resistance power and signal transmission.<\/p>\r\n          <\/article>\r\n          <article class=\"hs-proof-card\">\r\n            <div class=\"hs-proof-icon\" aria-hidden=\"true\">\u03df<\/div>\r\n            <h3>Continuity &amp; Withstand Voltage<\/h3>\r\n            <p>Pin-to-pin continuity and dielectric performance are checked according to the selected configuration.<\/p>\r\n          <\/article>\r\n        <\/div>\r\n        <div class=\"hs-proof-footer\" aria-label=\"Engineering documentation\">\r\n          <span>Series-specific test parameters<\/span>\r\n          <span>Documented inspection records<\/span>\r\n          <span>Engineering configuration review<\/span>\r\n          <span>Test reports available on request<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"hs-shell hs-content-section\" aria-labelledby=\"hs-delivery-title\">\r\n      <div class=\"hs-content-head\">\r\n        <div>\r\n          <span class=\"hs-kicker\">What You Receive<\/span>\r\n          <h2 id=\"hs-delivery-title\">From selected requirements to an integration-ready proposal.<\/h2>\r\n        <\/div>\r\n        <p>Your submission gives our engineering and sales teams a structured starting point, reducing repeated questions and helping confirm the right series faster.<\/p>\r\n      <\/div>\r\n      <div class=\"hs-delivery-grid\">\r\n        <article class=\"hs-delivery-card\">\r\n          <h3>Engineering Review<\/h3>\r\n          <p>We review the selected transmission, mating method, electrical load, depth and installation requirements.<\/p>\r\n        <\/article>\r\n        <article class=\"hs-delivery-card\">\r\n          <h3>Series Recommendation<\/h3>\r\n          <p>A suitable HYSF connector family and configuration are proposed for final technical confirmation.<\/p>\r\n        <\/article>\r\n        <article class=\"hs-delivery-card\">\r\n          <h3>Technical Package<\/h3>\r\n          <p>Receive the relevant series PDF, dimensional information, pin assignment and available STEP file.<\/p>\r\n        <\/article>\r\n        <article class=\"hs-delivery-card\">\r\n          <h3>Quotation &amp; Lead Time<\/h3>\r\n          <p>Pricing, cable options, production lead time and sample availability are confirmed for the project.<\/p>\r\n        <\/article>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"hs-shell hs-content-section\" aria-labelledby=\"hs-usecase-title\">\r\n      <div class=\"hs-content-head\">\r\n        <div>\r\n          <span class=\"hs-kicker\">Application Examples<\/span>\r\n          <h2 id=\"hs-usecase-title\">Start with a common subsea requirement.<\/h2>\r\n        <\/div>\r\n        <p>Choose a typical application to load example requirements into the selector. Every final configuration remains subject to engineering confirmation.<\/p>\r\n      <\/div>\r\n      <div class=\"hs-usecase-grid\">\r\n        <article class=\"hs-usecase-card\">\r\n          <div class=\"hs-usecase-visual\"><div class=\"hs-usecase-icon\" aria-hidden=\"true\">\u25c9<\/div><\/div>\r\n          <div class=\"hs-usecase-body\">\r\n            <h3>ROV Camera Connection<\/h3>\r\n            <p>High-speed video and power connection for an underwater imaging system.<\/p>\r\n            <div class=\"hs-usecase-specs\"><span>Gigabit Ethernet<\/span><span>48V<\/span><span>5A<\/span><span>8 contacts<\/span><span>3000m<\/span><\/div>\r\n            <button class=\"hs-btn hs-btn-light\" type=\"button\" data-hs-preset=\"camera\">Use These Requirements <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n          <\/div>\r\n        <\/article>\r\n        <article class=\"hs-usecase-card\">\r\n          <div class=\"hs-usecase-visual\"><div class=\"hs-usecase-icon\" aria-hidden=\"true\">\u21bb<\/div><\/div>\r\n          <div class=\"hs-usecase-body\">\r\n            <h3>Subsea Thruster Power<\/h3>\r\n            <p>Wet-mateable high-current delivery for work-class ROV power systems.<\/p>\r\n            <div class=\"hs-usecase-specs\"><span>Power<\/span><span>600V<\/span><span>40A\/contact<\/span><span>4 contacts<\/span><span>6000m<\/span><\/div>\r\n            <button class=\"hs-btn hs-btn-light\" type=\"button\" data-hs-preset=\"thruster\">Use These Requirements <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n          <\/div>\r\n        <\/article>\r\n        <article class=\"hs-usecase-card\">\r\n          <div class=\"hs-usecase-visual\"><div class=\"hs-usecase-icon\" aria-hidden=\"true\">\u224b<\/div><\/div>\r\n          <div class=\"hs-usecase-body\">\r\n            <h3>PBOF Sensor System<\/h3>\r\n            <p>Pressure-balanced oil-filled connection for deep-water sensing and instrumentation.<\/p>\r\n            <div class=\"hs-usecase-specs\"><span>Signal<\/span><span>300V<\/span><span>5A\/contact<\/span><span>4 contacts<\/span><span>6000m<\/span><\/div>\r\n            <button class=\"hs-btn hs-btn-light\" type=\"button\" data-hs-preset=\"pbof\">Use These Requirements <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n          <\/div>\r\n        <\/article>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"hs-shell hs-content-section\" aria-labelledby=\"hs-faq-title\">\r\n      <div class=\"hs-faq-layout\">\r\n        <div class=\"hs-faq-intro\">\r\n          <span class=\"hs-kicker\">Technical FAQ<\/span>\r\n          <h2 id=\"hs-faq-title\">Questions before final selection?<\/h2>\r\n          <p>These answers cover the information most often needed before a connector series can be confirmed.<\/p>\r\n          <button class=\"hs-btn hs-btn-primary\" type=\"button\" data-hs-modal=\"Technical Selection Question\">Ask an Engineer <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n        <\/div>\r\n        <div class=\"hs-faq-list\">\r\n          <details class=\"hs-faq-item\">\r\n            <summary>What is the difference between wet-mate and dry-mate connectors?<\/summary>\r\n            <div class=\"hs-faq-answer\"><p>Wet-mateable connectors are designed for mating in the intended submerged environment, while dry-mate connectors should be connected before deployment. The correct choice depends on the operating procedure, pressure environment and maintenance plan.<\/p><\/div>\r\n          <\/details>\r\n          <details class=\"hs-faq-item\">\r\n            <summary>How should I select the required depth rating?<\/summary>\r\n            <div class=\"hs-faq-answer\"><p>Use the maximum operating depth, not the normal or average depth. Also identify pressure cycles, temperature, fluid exposure and whether the connector will be mated at depth. Engineering will confirm the suitable safety margin for the selected series.<\/p><\/div>\r\n          <\/details>\r\n          <details class=\"hs-faq-item\">\r\n            <summary>Can one connector carry both power and Ethernet?<\/summary>\r\n            <div class=\"hs-faq-answer\"><p>Yes, hybrid configurations may combine power contacts with Ethernet, signal, coaxial or fiber channels. The pin layout, shielding, current load and cable construction must be reviewed together to control interference and maintain the required data performance.<\/p><\/div>\r\n          <\/details>\r\n          <details class=\"hs-faq-item\">\r\n            <summary>Can cable length, cable OD and conductor size be customized?<\/summary>\r\n            <div class=\"hs-faq-answer\"><p>Yes. Provide the required cable length, outer diameter, conductor quantity and gauge, jacket material, shielding, bend requirement and termination details. HYSF can review standard and project-specific cable assembly options.<\/p><\/div>\r\n          <\/details>\r\n          <details class=\"hs-faq-item\">\r\n            <summary>Can you provide dimensional drawings and STEP files?<\/summary>\r\n            <div class=\"hs-faq-answer\"><p>Series PDFs and dimensional information are available through the selector. STEP files can be requested for engineering integration. Confirm the final connector model, mounting style and thread before releasing a design for production.<\/p><\/div>\r\n          <\/details>\r\n          <details class=\"hs-faq-item\">\r\n            <summary>What information is needed for an accurate quotation?<\/summary>\r\n            <div class=\"hs-faq-answer\"><p>Please provide the application, mating method, contact count, voltage, current per contact, data type, operating depth, mounting style, cable specification, quantity and any existing drawing. Unknown values can remain open for engineering review.<\/p><\/div>\r\n          <\/details>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/main>\r\n\r\n  <div class=\"hs-mobile-filter\" id=\"hs-mobile-filter\"><button class=\"hs-btn hs-btn-primary\" type=\"button\" id=\"hs-open-mobile-filter\">Filter & View Results<\/button><\/div>\r\n\r\n  <div class=\"hs-modal\" id=\"hs-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"hs-modal-title\">\r\n    <div class=\"hs-modal-card\">\r\n      <button class=\"hs-modal-close\" type=\"button\" id=\"hs-modal-close\" aria-label=\"Close\">\u00d7<\/button>\r\n      <div class=\"hs-modal-head\">\r\n        <span class=\"hs-kicker\">Engineering Support<\/span>\r\n        <h3 id=\"hs-modal-title\">Ask an HYSF Engineer<\/h3>\r\n        <p>Share your application and technical requirements for a connector recommendation.<\/p>\r\n      <\/div>\r\n      <div class=\"hs-modal-body\">\r\n        <div class=\"hs-selected-summary\" id=\"hs-selected-summary\">No selection details yet.<\/div>\r\n        <form id=\"hs-inquiry-form\">\r\n          <input type=\"hidden\" id=\"hs-inquiry-action\" name=\"inquiry_action\" value=\"Engineering Review\">\r\n          <input type=\"hidden\" id=\"hs-inquiry-selection\" name=\"selected_requirements\" value=\"\">\r\n          <input type=\"hidden\" id=\"hs-inquiry-pdf\" name=\"series_pdf\" value=\"\">\r\n          <input type=\"hidden\" id=\"hs-form-started\" name=\"form_started\" value=\"\">\r\n          <label class=\"hs-hp\" aria-hidden=\"true\">Website<input type=\"text\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\"><\/label>\r\n          <div class=\"hs-form-grid\">\r\n            <label class=\"hs-field\"><span class=\"hs-field-label\">Name *<\/span><input type=\"text\" name=\"name\" required autocomplete=\"name\"><\/label>\r\n            <label class=\"hs-field\"><span class=\"hs-field-label\">Company *<\/span><input type=\"text\" name=\"company\" required autocomplete=\"organization\"><\/label>\r\n            <label class=\"hs-field\"><span class=\"hs-field-label\">Business email *<\/span><input type=\"email\" name=\"email\" required autocomplete=\"email\"><\/label>\r\n            <label class=\"hs-field\"><span class=\"hs-field-label\">Phone \/ WhatsApp<\/span><input type=\"tel\" name=\"phone\" autocomplete=\"tel\"><\/label>\r\n            <label class=\"hs-field hs-span-2\"><span class=\"hs-field-label\">Project notes<\/span><textarea name=\"project_notes\" placeholder=\"Application, quantity, existing connector model, cable requirements or special conditions...\"><\/textarea><\/label>\r\n          <\/div>\r\n          <button class=\"hs-btn hs-btn-primary hs-submit-button\" id=\"hs-submit-button\" type=\"submit\" style=\"margin-top:18px;width:100%\">Submit Requirements <span class=\"hs-arrow\">\u2192<\/span><\/button>\r\n          <div class=\"hs-form-status\" id=\"hs-form-status\" role=\"status\"><\/div>\r\n          <p style=\"color:#708295;font-size:10px;line-height:1.5;margin:11px 0 0;text-align:center\">Your requirements will be sent securely to HYSF engineering. You may also contact <a href=\"mailto:info@hysfsubsea.com\" style=\"color:#0767d7\">info@hysfsubsea.com<\/a> or <a href=\"https:\/\/wa.me\/8615960131727\" target=\"_blank\" rel=\"noopener\" style=\"color:#0767d7\">WhatsApp<\/a> directly.<\/p>\r\n        <\/form>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  var root = document.getElementById(\"hysf-selector\");\r\n  if (!root || root.dataset.initialized === \"true\") return;\r\n  root.dataset.initialized = \"true\";\r\n\r\n  \/* Approved category PDF library supplied by HYSF SUBSEA. *\/\r\n  var PDF_LIBRARY = {\r\n    allElectricMetal: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-All-Electric-Metal-Connectors.pdf\",\r\n    branchedCable: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Branched-Watertight-Connection-Cable.pdf\",\r\n    bulkhead: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Bulkhead-Series-Watertight-Connectors.pdf\",\r\n    cableFittings: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Cable-Fixing-Fittings.pdf\",\r\n    coaxial: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Coaxial-Series-Watertight-Connectors.pdf\",\r\n    flat: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Flat-Series-Watertight-Connectors.pdf\",\r\n    ethernet: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Gigabit-Ethernet-Series-Watertight-Cable-Assembly.pdf\",\r\n    highCurrent: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-High-Current-High-Power-Watertight-Connector.pdf\",\r\n    chamber: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-High-pressure-Sealed-Chamber-and-Junction-Box.pdf\",\r\n    optoelectronic: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Metal-Optoelectronic-Connectors.pdf\",\r\n    micro: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Micro-Watertight-Connectors.pdf\",\r\n    custom: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Non-standard-Customization.pdf\",\r\n    roundCompact: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Round-Compact-Watertight-Connectors.pdf\",\r\n    standard: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Standard-Watertight-Connectors.pdf\",\r\n    catalog: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-SUBSEA-Catalog-2026.pdf\",\r\n    ultraSmall: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Ultra-Small-Watertight-Connectors.pdf\",\r\n    monitoring: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Underwater-Monitoring-Equipment.pdf\",\r\n    networkCamera: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Underwater-Network-Camera.pdf\",\r\n    searchlight: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/06\/HYSF-Underwater-Searchlight.pdf\",\r\n    splitType: \"https:\/\/hysfsubsea.com\/wp-content\/uploads\/2026\/07\/HYSF-SUBSEA-Split-Type-Connector-Series.pdf\"\r\n  };\r\n\r\n  \/* DEMO DATA ONLY \u2014 replace every technical value with approved HYSF data. *\/\r\n  var PRODUCTS = [\r\n    {\r\n      id: \"micro-8-gbe\",\r\n      series: \"Micro Ethernet Series\",\r\n      name: \"Micro 8-Pin Gigabit Ethernet Pair\",\r\n      models: [\"MCDIL8F\", \"MCDBH8M\"],\r\n      applications: [\"rov-auv\", \"camera\", \"sensor\"],\r\n      transmissions: [\"ethernet\", \"signal\", \"hybrid\"],\r\n      mating: \"wet\",\r\n      contacts: 8,\r\n      current: 10,\r\n      voltage: 550,\r\n      speed: 1000,\r\n      depth: 6000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"7\/16-20UNF\",\r\n      brands: [\"SubConn\", \"SEACON\"],\r\n      pdfKey: \"ethernet\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/gigabit-ethernet-series-watertight-cable-assembly\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"ethernet\"\r\n    },\r\n    {\r\n      id: \"micro-10-hybrid\",\r\n      series: \"Micro Hybrid Series\",\r\n      name: \"10-Pin Power + Ethernet Series\",\r\n      models: [\"MCDIL10M\/F\", \"MCDBH10M\/F\"],\r\n      applications: [\"rov-auv\", \"camera\", \"sensor\"],\r\n      transmissions: [\"ethernet\", \"power\", \"hybrid\"],\r\n      mating: \"wet\",\r\n      contacts: 10,\r\n      current: 5,\r\n      voltage: 400,\r\n      speed: 1000,\r\n      depth: 3000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"1\/2-20UNF\",\r\n      brands: [\"SubConn\", \"SEACON\"],\r\n      pdfKey: \"ethernet\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/gigabit-ethernet-series-watertight-cable-assembly\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"ethernet\"\r\n    },\r\n    {\r\n      id: \"standard-6\",\r\n      series: \"Standard Circular Series\",\r\n      name: \"Standard 6-Pin Connector Pair\",\r\n      models: [\"IL6M\", \"BH6F\"],\r\n      applications: [\"rov-auv\", \"sensor\", \"camera\"],\r\n      transmissions: [\"power\", \"signal\"],\r\n      mating: \"wet\",\r\n      contacts: 6,\r\n      current: 10,\r\n      voltage: 550,\r\n      speed: 0,\r\n      depth: 6000,\r\n      styles: [\"bulkhead\", \"inline\", \"right-angle\"],\r\n      thread: \"5\/8-18UNF\",\r\n      brands: [\"SubConn\", \"SEACON\", \"Impulse\"],\r\n      pdfKey: \"standard\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/standard-6-12-pin-watertight-connectors\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"standard\"\r\n    },\r\n    {\r\n      id: \"ultra-compact-6\",\r\n      series: \"Ultra-Compact Series\",\r\n      name: \"Ultra-Compact 6-Pin Dry-Mate Series\",\r\n      models: [\"SFCXIL6M\", \"SFCXBH6F\"],\r\n      applications: [\"rov-auv\", \"camera\", \"sensor\"],\r\n      transmissions: [\"signal\", \"power\"],\r\n      mating: \"dry\",\r\n      contacts: 6,\r\n      current: 5,\r\n      voltage: 300,\r\n      speed: 0,\r\n      depth: 3000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"3\/8-24UNF\",\r\n      brands: [],\r\n      pdfKey: \"ultraSmall\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/ultra-compact-6-16-core-watertight-connector\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"compact\"\r\n    },\r\n    {\r\n      id: \"round-compact-5\",\r\n      series: \"Round Compact Series\",\r\n      name: \"Round Compact 5-Pin Dry-Mate Pair\",\r\n      models: [\"SFYXIL5M\", \"SFYXBH5F\"],\r\n      applications: [\"camera\", \"sensor\", \"rov-auv\"],\r\n      transmissions: [\"signal\", \"power\"],\r\n      mating: \"dry\",\r\n      contacts: 5,\r\n      current: 5,\r\n      voltage: 300,\r\n      speed: 0,\r\n      depth: 3000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"3\/8-24UNF\",\r\n      brands: [],\r\n      pdfKey: \"roundCompact\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/round-compact-2-8-core-watertight-connectors\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"compact\"\r\n    },\r\n    {\r\n      id: \"power-4-40a\",\r\n      series: \"High-Current Series\",\r\n      name: \"4-Pin 40A Subsea Power Series\",\r\n      models: [\"SFCO 4-Pin Series\"],\r\n      applications: [\"thruster\", \"rov-auv\"],\r\n      transmissions: [\"power\"],\r\n      mating: \"wet\",\r\n      contacts: 4,\r\n      current: 40,\r\n      voltage: 600,\r\n      speed: 0,\r\n      depth: 6000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"3\/4-16UNF\",\r\n      brands: [],\r\n      pdfKey: \"highCurrent\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/high-current-4-6-core-3-4-inch-watertight-connector\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"power\"\r\n    },\r\n    {\r\n      id: \"power-1-180a\",\r\n      series: \"High-Power Series\",\r\n      name: \"Single-Pin 180A Power Connector\",\r\n      models: [\"1-Pin 180A Series\"],\r\n      applications: [\"thruster\"],\r\n      transmissions: [\"power\"],\r\n      mating: \"wet\",\r\n      contacts: 1,\r\n      current: 180,\r\n      voltage: 1000,\r\n      speed: 0,\r\n      depth: 6000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"7\/8-14UNF\",\r\n      brands: [],\r\n      pdfKey: \"highCurrent\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/single-core-high-current-2\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"power\"\r\n    },\r\n    {\r\n      id: \"coax-hf\",\r\n      series: \"High-Frequency Coaxial Series\",\r\n      name: \"Micro Coaxial 50\u03a9 Watertight Pair\",\r\n      models: [\"50-3 \/ 50-5 Coaxial Series\"],\r\n      applications: [\"camera\", \"sensor\"],\r\n      transmissions: [\"coaxial\"],\r\n      mating: \"wet\",\r\n      contacts: 1,\r\n      current: 1,\r\n      voltage: 200,\r\n      speed: 0,\r\n      depth: 6000,\r\n      styles: [\"bulkhead\", \"inline\"],\r\n      thread: \"7\/16-20UNF\",\r\n      brands: [\"SubConn\", \"SEACON\"],\r\n      pdfKey: \"coaxial\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/high-frequency-coaxial-watertight-connector-2\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"coaxial\"\r\n    },\r\n    {\r\n      id: \"electro-optical\",\r\n      series: \"Metal Electro-Optical Series\",\r\n      name: \"Fiber + Electrical Hybrid Connector\",\r\n      models: [\"2F+4E\", \"4F+4E\", \"6F+Electrical\"],\r\n      applications: [\"rov-auv\", \"camera\", \"sensor\"],\r\n      transmissions: [\"fiber\", \"power\", \"hybrid\"],\r\n      mating: \"wet\",\r\n      contacts: 6,\r\n      current: 10,\r\n      voltage: 500,\r\n      speed: 10000,\r\n      depth: 6000,\r\n      styles: [\"bulkhead\", \"inline\", \"flange\"],\r\n      thread: \"\",\r\n      brands: [],\r\n      pdfKey: \"optoelectronic\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/sf40m-series-optoelectronic-watertight-connector\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"fiber\"\r\n    },\r\n    {\r\n      id: \"pbof-4\",\r\n      series: \"PBOF Series\",\r\n      name: \"4-Pin Pressure-Balanced Oil-Filled Connector\",\r\n      models: [\"SFPBOF4M\", \"SFPBOF4F\"],\r\n      applications: [\"pbof\", \"rov-auv\", \"sensor\"],\r\n      transmissions: [\"power\", \"signal\"],\r\n      mating: \"wet\",\r\n      contacts: 4,\r\n      current: 10,\r\n      voltage: 550,\r\n      speed: 0,\r\n      depth: 6000,\r\n      styles: [\"pbof\", \"bulkhead\"],\r\n      thread: \"7\/16-20UNF\",\r\n      brands: [\"SubConn\", \"SEACON\"],\r\n      pdfKey: \"bulkhead\",\r\n      pageUrl: \"https:\/\/hysfsubsea.com\/hysf-products\/hysf-oil-filled-micro-circular-connector-2-8-pin-pressure-balanced-oil-filled-subsea-connector\/\",\r\n      imageUrl: \"\",\r\n      thumb: \"pbof\"\r\n    }\r\n  ];\r\n\r\n  var labels = {\r\n    application: {\"rov-auv\":\"ROV \/ AUV\", camera:\"Camera & Imaging\", sensor:\"Sensor \/ Sonar\", thruster:\"Thruster & Power\", pbof:\"PBOF System\", other:\"Other \/ Not Sure\"},\r\n    transmission: {power:\"Power\", signal:\"Signal\", ethernet:\"Ethernet\", fiber:\"Fiber Optic\", coaxial:\"Coaxial \/ RF\", hybrid:\"Hybrid\"},\r\n    mating: {wet:\"Wet-Mateable\", dry:\"Dry-Mate\", \"\":\"Not sure\"},\r\n    style: {bulkhead:\"Bulkhead\", inline:\"Inline cable\", pbof:\"PBOF \/ Penetrator\", \"right-angle\":\"Right angle\", flange:\"Flange mount\"}\r\n  };\r\n\r\n  var state = {\r\n    step: 1,\r\n    application: \"\",\r\n    transmission: \"\",\r\n    mating: \"\",\r\n    contacts: \"\",\r\n    current: \"\",\r\n    voltage: \"\",\r\n    speed: \"\",\r\n    depth: \"\",\r\n    style: \"\",\r\n    thread: \"\",\r\n    brand: \"\"\r\n  };\r\n\r\n  var PRESETS = {\r\n    camera: {\r\n      application: \"camera\", transmission: \"ethernet\", mating: \"wet\",\r\n      contacts: \"8\", current: \"5\", voltage: \"48\", speed: \"1000\",\r\n      depth: \"3000\", style: \"bulkhead\", thread: \"\", brand: \"\"\r\n    },\r\n    thruster: {\r\n      application: \"thruster\", transmission: \"power\", mating: \"wet\",\r\n      contacts: \"4\", current: \"40\", voltage: \"600\", speed: \"\",\r\n      depth: \"6000\", style: \"bulkhead\", thread: \"\", brand: \"\"\r\n    },\r\n    pbof: {\r\n      application: \"pbof\", transmission: \"signal\", mating: \"wet\",\r\n      contacts: \"4\", current: \"5\", voltage: \"300\", speed: \"\",\r\n      depth: \"6000\", style: \"pbof\", thread: \"\", brand: \"\"\r\n    }\r\n  };\r\n\r\n  var $ = function (selector, context) { return (context || root).querySelector(selector); };\r\n  var $$ = function (selector, context) { return Array.prototype.slice.call((context || root).querySelectorAll(selector)); };\r\n  var number = function (value) { return value === \"\" || value == null ? 0 : Number(value); };\r\n  var escapeHtml = function (value) {\r\n    return String(value).replace(\/[&<>'\"]\/g, function (char) {\r\n      return {\"&\":\"&amp;\", \"<\":\"&lt;\", \">\":\"&gt;\", \"'\":\"&#39;\", '\"':\"&quot;\"}[char];\r\n    });\r\n  };\r\n\r\n  function collectWizardState() {\r\n    var app = $('input[name=\"hs-application\"]:checked');\r\n    var transmission = $('input[name=\"hs-transmission\"]:checked');\r\n    var mating = $('input[name=\"hs-mating\"]:checked');\r\n    if (app) state.application = app.value;\r\n    if (transmission) state.transmission = transmission.value;\r\n    if (mating) state.mating = mating.value;\r\n    state.contacts = $(\"#hs-w-contacts\").value;\r\n    state.current = $(\"#hs-w-current\").value;\r\n    state.voltage = $(\"#hs-w-voltage\").value;\r\n    state.speed = $(\"#hs-w-speed\").value;\r\n    state.depth = $(\"#hs-w-depth\").value;\r\n    state.style = $(\"#hs-w-style\").value;\r\n    state.thread = $(\"#hs-w-thread\").value;\r\n    state.brand = $(\"#hs-w-brand\").value;\r\n    updateSummary();\r\n  }\r\n\r\n  function updateSummary() {\r\n    var values = {\r\n      application: labels.application[state.application] || \"Not selected\",\r\n      transmission: labels.transmission[state.transmission] || \"Not selected\",\r\n      mating: labels.mating[state.mating] || \"Not selected\",\r\n      contacts: state.contacts ? state.contacts + (number(state.contacts) >= 24 ? \"+ contacts\" : \" contacts\") : \"Not sure\",\r\n      current: state.current ? state.current + \"A \/ contact\" : \"Not sure\",\r\n      depth: state.depth ? state.depth + \"m minimum\" : \"Not sure\"\r\n    };\r\n    Object.keys(values).forEach(function (key) {\r\n      var element = $('[data-summary=\"' + key + '\"]');\r\n      if (element) element.textContent = values[key];\r\n    });\r\n  }\r\n\r\n  function validateStep() {\r\n    if (state.step === 1) return !!$('input[name=\"hs-application\"]:checked');\r\n    if (state.step === 2) return !!$('input[name=\"hs-transmission\"]:checked');\r\n    if (state.step === 3) return !!$('input[name=\"hs-mating\"]:checked');\r\n    return true;\r\n  }\r\n\r\n  function renderStep() {\r\n    $$(\".hs-step\").forEach(function (el) { el.classList.toggle(\"is-active\", Number(el.dataset.step) === state.step); });\r\n    $$(\".hs-progress-item\").forEach(function (el) {\r\n      var item = Number(el.dataset.progress);\r\n      el.classList.toggle(\"is-active\", item === state.step);\r\n      el.classList.toggle(\"is-complete\", item < state.step);\r\n      var marker = $(\".hs-step-number\", el);\r\n      marker.textContent = item < state.step ? \"\u2713\" : String(item);\r\n    });\r\n    $(\"#hs-back\").style.visibility = state.step === 1 ? \"hidden\" : \"visible\";\r\n    $(\"#hs-next\").innerHTML = state.step === 5 ? 'View Recommendations <span class=\"hs-arrow\">\u2192<\/span>' : 'Continue <span class=\"hs-arrow\">\u2192<\/span>';\r\n    $(\"#hs-nav-hint\").textContent = state.step <= 3 ? \"Choose one option to continue\" : \"Unknown values can remain Not sure\";\r\n    if (state.step === 4) {\r\n      var showSpeed = state.transmission === \"ethernet\" || state.transmission === \"hybrid\";\r\n      $(\"#hs-speed-field\").style.opacity = showSpeed ? \"1\" : \".55\";\r\n    }\r\n  }\r\n\r\n  function syncFiltersFromState() {\r\n    [\"transmission\",\"mating\",\"contacts\",\"current\",\"voltage\",\"depth\",\"style\",\"thread\",\"brand\"].forEach(function (key) {\r\n      var field = $(\"#hs-f-\" + key);\r\n      if (field) field.value = state[key] || \"\";\r\n    });\r\n  }\r\n\r\n  function syncStateFromFilters() {\r\n    [\"transmission\",\"mating\",\"contacts\",\"current\",\"voltage\",\"depth\",\"style\",\"thread\",\"brand\"].forEach(function (key) {\r\n      var field = $(\"#hs-f-\" + key);\r\n      if (field) state[key] = field.value;\r\n    });\r\n    updateSummary();\r\n  }\r\n\r\n  function scoreProduct(product) {\r\n    var score = 52;\r\n    var failures = [];\r\n    var reasons = [];\r\n\r\n    if (state.application && state.application !== \"other\") {\r\n      if (product.applications.indexOf(state.application) > -1) { score += 13; reasons.push(\"application fit\"); }\r\n      else score -= 4;\r\n    }\r\n\r\n    if (state.transmission) {\r\n      if (product.transmissions.indexOf(state.transmission) > -1) { score += 24; reasons.push(labels.transmission[state.transmission] + \" support\"); }\r\n      else failures.push(\"transmission type\");\r\n    }\r\n\r\n    if (state.mating) {\r\n      if (product.mating === state.mating) { score += 12; reasons.push(labels.mating[state.mating]); }\r\n      else failures.push(\"mating method\");\r\n    }\r\n\r\n    if (number(state.contacts)) {\r\n      if (number(state.contacts) >= 24 ? product.contacts >= 24 : product.contacts === number(state.contacts)) { score += 11; reasons.push(\"contact count\"); }\r\n      else if (product.contacts > number(state.contacts)) { score += 2; failures.push(\"exact contact count\"); }\r\n      else failures.push(\"contact count\");\r\n    }\r\n\r\n    if (number(state.current)) {\r\n      if (product.current >= number(state.current)) { score += 8; reasons.push(\"current rating\"); }\r\n      else failures.push(\"current rating\");\r\n    }\r\n\r\n    if (number(state.voltage)) {\r\n      if (product.voltage >= number(state.voltage)) { score += 6; reasons.push(\"voltage rating\"); }\r\n      else failures.push(\"voltage rating\");\r\n    }\r\n\r\n    if (number(state.speed) && (state.transmission === \"ethernet\" || state.transmission === \"hybrid\")) {\r\n      if (product.speed >= number(state.speed)) score += 6;\r\n      else failures.push(\"data speed\");\r\n    }\r\n\r\n    if (number(state.depth)) {\r\n      if (product.depth >= number(state.depth)) { score += 8; reasons.push(\"depth requirement\"); }\r\n      else failures.push(\"depth rating\");\r\n    }\r\n\r\n    if (state.style) {\r\n      if (product.styles.indexOf(state.style) > -1) { score += 8; reasons.push(labels.style[state.style]); }\r\n      else failures.push(\"connector style\");\r\n    }\r\n\r\n    if (state.thread) {\r\n      if (product.thread === state.thread) score += 8;\r\n      else failures.push(\"thread size\");\r\n    }\r\n\r\n    if (state.brand) {\r\n      if (product.brands.indexOf(state.brand) > -1) score += 8;\r\n      else failures.push(\"brand compatibility\");\r\n    }\r\n\r\n    score = Math.max(1, Math.min(99, score - failures.length * 10));\r\n    return { product: product, score: score, failures: failures, reasons: reasons };\r\n  }\r\n\r\n  function connectorSvg(type, uid) {\r\n    var accent = type === \"power\" ? \"#ff8a2a\" : type === \"fiber\" ? \"#24cdbc\" : type === \"coaxial\" ? \"#8c6ee7\" : type === \"compact\" ? \"#486a83\" : type === \"pbof\" ? \"#28a182\" : \"#087df1\";\r\n    var svgId = String(uid || type).replace(\/[^a-z0-9_-]\/gi, \"-\");\r\n    return '<svg viewBox=\"0 0 330 170\" role=\"img\" aria-label=\"Connector illustration\">' +\r\n      '<defs><linearGradient id=\"m-' + svgId + '\" x1=\"0\" x2=\"1\"><stop stop-color=\"#587284\"\/><stop offset=\".42\" stop-color=\"#eef5f8\"\/><stop offset=\".7\" stop-color=\"#8198a7\"\/><stop offset=\"1\" stop-color=\"#334d5c\"\/><\/linearGradient><linearGradient id=\"r-' + svgId + '\" x1=\"0\" x2=\"1\"><stop stop-color=\"#07131a\"\/><stop offset=\".5\" stop-color=\"#314650\"\/><stop offset=\"1\" stop-color=\"#02090d\"\/><\/linearGradient><\/defs>' +\r\n      '<path d=\"M18 85h50\" stroke=\"#9bb7c8\" stroke-width=\"8\" stroke-linecap=\"round\"\/>' +\r\n      '<rect x=\"54\" y=\"54\" width=\"82\" height=\"62\" rx=\"28\" fill=\"url(#r-' + svgId + ')\"\/>' +\r\n      '<path d=\"M68 58v54M81 55v60M94 55v60M107 56v58M120 61v48\" stroke=\"#526873\" stroke-width=\"4\" opacity=\".7\"\/>' +\r\n      '<rect x=\"126\" y=\"43\" width=\"67\" height=\"84\" rx=\"14\" fill=\"url(#m-' + svgId + ')\"\/>' +\r\n      '<rect x=\"184\" y=\"53\" width=\"84\" height=\"64\" rx=\"25\" fill=\"' + accent + '\"\/>' +\r\n      '<path d=\"M199 57v56M214 54v62M229 54v62M244 58v54\" stroke=\"#fff\" stroke-width=\"4\" opacity=\".25\"\/>' +\r\n      '<rect x=\"255\" y=\"43\" width=\"45\" height=\"84\" rx=\"12\" fill=\"url(#m-' + svgId + ')\"\/>' +\r\n      '<ellipse cx=\"298\" cy=\"85\" rx=\"25\" ry=\"35\" fill=\"#122733\"\/>' +\r\n      '<ellipse cx=\"298\" cy=\"85\" rx=\"18\" ry=\"26\" fill=\"#071218\" stroke=\"#738b99\" stroke-width=\"2\"\/>' +\r\n      '<g fill=\"#efc35f\"><circle cx=\"292\" cy=\"76\" r=\"2.6\"\/><circle cx=\"304\" cy=\"76\" r=\"2.6\"\/><circle cx=\"289\" cy=\"87\" r=\"2.6\"\/><circle cx=\"298\" cy=\"87\" r=\"2.6\"\/><circle cx=\"307\" cy=\"87\" r=\"2.6\"\/><circle cx=\"293\" cy=\"98\" r=\"2.6\"\/><circle cx=\"304\" cy=\"98\" r=\"2.6\"\/><\/g>' +\r\n      '<path d=\"M138 33V18h50\" stroke=\"' + accent + '\" opacity=\".55\"\/><path d=\"M247 136v15h-58\" stroke=\"' + accent + '\" opacity=\".55\"\/>' +\r\n      '<\/svg>';\r\n  }\r\n\r\n  function statusFor(index, match) {\r\n    if (match.failures.length === 0 && index === 0) return {label:\"Best Match\", cls:\"hs-match-best\"};\r\n    if (match.failures.length === 0) return {label:\"Compatible\", cls:\"hs-match-compatible\"};\r\n    return {label:\"Engineer Review\", cls:\"hs-match-review\"};\r\n  }\r\n\r\n  function whyText(match) {\r\n    if (match.failures.length) return \"Close candidate; confirm \" + match.failures.slice(0, 2).join(\" and \") + \".\";\r\n    var items = match.reasons.slice(0, 3);\r\n    return items.length ? \"Matches \" + items.join(\", \") + \".\" : \"General connector family for engineering review.\";\r\n  }\r\n\r\n  function productCard(match, index) {\r\n    var p = match.product;\r\n    var status = statusFor(index, match);\r\n    var pdfUrl = PDF_LIBRARY[p.pdfKey] || PDF_LIBRARY.catalog;\r\n    var pageUrl = p.pageUrl || \"https:\/\/hysfsubsea.com\/hysf-products\/\";\r\n    var media = p.imageUrl\r\n      ? '<img decoding=\"async\" class=\"hs-product-photo\" src=\"' + escapeHtml(p.imageUrl) + '\" alt=\"' + escapeHtml(p.name) + '\" loading=\"lazy\">'\r\n      : connectorSvg(p.thumb, p.id);\r\n    return '<article class=\"hs-product-card\">' +\r\n      '<div class=\"hs-product-media\">' +\r\n        '<span class=\"hs-match-badge ' + status.cls + '\">' + status.label + '<\/span>' +\r\n        '<span class=\"hs-score\">' + match.score + '% fit<\/span>' +\r\n        media +\r\n      '<\/div>' +\r\n      '<div class=\"hs-product-body\">' +\r\n        '<div class=\"hs-product-series\">' + escapeHtml(p.series) + '<\/div>' +\r\n        '<h3>' + escapeHtml(p.name) + '<\/h3>' +\r\n        '<div class=\"hs-models\">' + escapeHtml(p.models.join(\" \u00b7 \")) + '<\/div>' +\r\n        '<div class=\"hs-spec-grid\">' +\r\n          '<div class=\"hs-spec\"><span>Contacts<\/span><strong>' + p.contacts + '<\/strong><\/div>' +\r\n          '<div class=\"hs-spec\"><span>Current<\/span><strong>' + p.current + 'A\/contact<\/strong><\/div>' +\r\n          '<div class=\"hs-spec\"><span>Depth<\/span><strong>' + p.depth + 'm<\/strong><\/div>' +\r\n        '<\/div>' +\r\n        '<div class=\"hs-why\"><strong>Why this result:<\/strong> ' + escapeHtml(whyText(match)) + '<\/div>' +\r\n        '<div class=\"hs-card-actions\">' +\r\n          '<a class=\"hs-btn hs-btn-light\" href=\"' + escapeHtml(pageUrl) + '\" target=\"_blank\" rel=\"noopener\">View Product<\/a>' +\r\n          '<a class=\"hs-btn hs-btn-light\" href=\"' + escapeHtml(pdfUrl) + '\" target=\"_blank\" rel=\"noopener\">Drawing PDF<\/a>' +\r\n          '<button class=\"hs-btn hs-btn-light\" type=\"button\" data-hs-modal=\"Request STEP File \u2014 ' + escapeHtml(p.models[0]) + '\" data-hs-pdf=\"' + escapeHtml(pdfUrl) + '\">Request STEP<\/button>' +\r\n          '<button class=\"hs-btn hs-btn-primary\" type=\"button\" data-hs-modal=\"Ask Engineer \u2014 ' + escapeHtml(p.models[0]) + '\" data-hs-pdf=\"' + escapeHtml(pdfUrl) + '\">Ask Engineer<\/button>' +\r\n        '<\/div>' +\r\n      '<\/div>' +\r\n    '<\/article>';\r\n  }\r\n\r\n  function updateActiveTags() {\r\n    var tags = [];\r\n    if (state.application) tags.push(labels.application[state.application]);\r\n    if (state.transmission) tags.push(labels.transmission[state.transmission]);\r\n    if (state.mating) tags.push(labels.mating[state.mating]);\r\n    if (state.contacts) tags.push(state.contacts + (number(state.contacts) >= 24 ? \"+ contacts\" : \" contacts\"));\r\n    if (state.current) tags.push(\"\u2265 \" + state.current + \"A\/contact\");\r\n    if (state.depth) tags.push(\"\u2265 \" + state.depth + \"m\");\r\n    if (state.style) tags.push(labels.style[state.style]);\r\n    if (state.thread) tags.push(state.thread);\r\n    $(\"#hs-active-tags\").innerHTML = tags.length ? tags.map(function (tag) { return '<span class=\"hs-active-tag\">' + escapeHtml(tag) + '<\/span>'; }).join(\"\") : '<span class=\"hs-active-tag\">Showing all demo families<\/span>';\r\n  }\r\n\r\n  function renderResults() {\r\n    var matches = PRODUCTS.map(scoreProduct);\r\n    var exact = matches.filter(function (m) { return m.failures.length === 0; });\r\n    var close = matches.filter(function (m) { return m.failures.length > 0 && m.failures.length <= 2 && m.score >= 35; });\r\n    var list = exact.length ? exact.concat(close.slice(0, Math.max(0, 6 - exact.length))) : close.slice(0, 6);\r\n    var sort = $(\"#hs-sort\").value;\r\n\r\n    list.sort(function (a, b) {\r\n      if (sort === \"depth\") return b.product.depth - a.product.depth;\r\n      if (sort === \"current\") return b.product.current - a.product.current;\r\n      if (sort === \"contacts\") return a.product.contacts - b.product.contacts;\r\n      if (a.failures.length !== b.failures.length) return a.failures.length - b.failures.length;\r\n      return b.score - a.score;\r\n    });\r\n\r\n    $(\"#hs-result-count\").textContent = exact.length + (exact.length === 1 ? \" exact match\" : \" exact matches\");\r\n    $(\"#hs-product-grid\").innerHTML = list.map(productCard).join(\"\");\r\n    $(\"#hs-product-grid\").style.display = list.length ? \"grid\" : \"none\";\r\n    $(\"#hs-no-results\").classList.toggle(\"is-visible\", !list.length);\r\n    updateActiveTags();\r\n  }\r\n\r\n  function showResults() {\r\n    collectWizardState();\r\n    syncFiltersFromState();\r\n    $(\"#hs-results\").classList.add(\"is-visible\");\r\n    $(\"#hs-mobile-filter\").classList.add(\"is-visible\");\r\n    renderResults();\r\n    setTimeout(function () { $(\"#hs-results\").scrollIntoView({behavior:\"smooth\", block:\"start\"}); }, 80);\r\n  }\r\n\r\n  function applyPreset(name) {\r\n    var preset = PRESETS[name];\r\n    if (!preset) return;\r\n\r\n    [\"application\", \"transmission\", \"mating\"].forEach(function (key) {\r\n      $$(\"input[name=\\\"hs-\" + key + \"\\\"]\").forEach(function (input) {\r\n        input.checked = input.value === preset[key];\r\n      });\r\n    });\r\n\r\n    var wizardFields = {\r\n      contacts: \"#hs-w-contacts\",\r\n      current: \"#hs-w-current\",\r\n      voltage: \"#hs-w-voltage\",\r\n      speed: \"#hs-w-speed\",\r\n      depth: \"#hs-w-depth\",\r\n      style: \"#hs-w-style\",\r\n      thread: \"#hs-w-thread\",\r\n      brand: \"#hs-w-brand\"\r\n    };\r\n\r\n    Object.keys(wizardFields).forEach(function (key) {\r\n      $(wizardFields[key]).value = preset[key] || \"\";\r\n    });\r\n\r\n    Object.keys(preset).forEach(function (key) { state[key] = preset[key]; });\r\n    state.step = 5;\r\n    updateSummary();\r\n    renderStep();\r\n    showResults();\r\n  }\r\n\r\n  function resetAll() {\r\n    state.application = \"\";\r\n    state.transmission = \"\";\r\n    state.mating = \"\";\r\n    state.contacts = \"\";\r\n    state.current = \"\";\r\n    state.voltage = \"\";\r\n    state.speed = \"\";\r\n    state.depth = \"\";\r\n    state.style = \"\";\r\n    state.thread = \"\";\r\n    state.brand = \"\";\r\n    $$('input[type=\"radio\"]').forEach(function (input) { input.checked = false; });\r\n    $$(\"select\").forEach(function (select) {\r\n      if (select.id !== \"hs-sort\") select.value = \"\";\r\n    });\r\n    updateSummary();\r\n    renderResults();\r\n  }\r\n\r\n  function requirementsText(action, pdfUrl) {\r\n    var values = [\r\n      \"Request: \" + (action || \"Engineering Review\"),\r\n      \"Application: \" + (labels.application[state.application] || \"Not specified\"),\r\n      \"Transmission: \" + (labels.transmission[state.transmission] || \"Not specified\"),\r\n      \"Mating: \" + (labels.mating[state.mating] || \"Not specified\"),\r\n      \"Contacts: \" + (state.contacts || \"Not specified\"),\r\n      \"Current\/contact: \" + (state.current ? state.current + \"A\" : \"Not specified\"),\r\n      \"Voltage: \" + (state.voltage ? state.voltage + \"V\" : \"Not specified\"),\r\n      \"Data speed: \" + (state.speed ? state.speed + \"Mbps\" : \"Not specified\"),\r\n      \"Minimum depth: \" + (state.depth ? state.depth + \"m\" : \"Not specified\"),\r\n      \"Style: \" + (labels.style[state.style] || \"Not specified\"),\r\n      \"Thread: \" + (state.thread || \"Not specified\"),\r\n      \"Compatible brand: \" + (state.brand || \"Not specified\"),\r\n      \"Series PDF: \" + (pdfUrl || \"Not selected\")\r\n    ];\r\n    return values.join(\" | \");\r\n  }\r\n\r\n  function openModal(action, pdfUrl) {\r\n    collectWizardState();\r\n    var request = action || \"Engineering Review\";\r\n    var selectedPdf = pdfUrl || \"\";\r\n    var text = requirementsText(request, selectedPdf);\r\n    $(\"#hs-inquiry-action\").value = request;\r\n    $(\"#hs-inquiry-selection\").value = text;\r\n    $(\"#hs-inquiry-pdf\").value = selectedPdf;\r\n    $(\"#hs-form-started\").value = String(Math.floor(Date.now() \/ 1000));\r\n    $(\"#hs-selected-summary\").textContent = text;\r\n    $(\"#hs-form-status\").classList.remove(\"is-visible\", \"is-error\");\r\n    $(\"#hs-form-status\").textContent = \"\";\r\n    $(\"#hs-modal\").classList.add(\"is-open\");\r\n    document.body.style.overflow = \"hidden\";\r\n    setTimeout(function () { $(\"#hs-modal-close\").focus(); }, 20);\r\n  }\r\n\r\n  function closeModal() {\r\n    $(\"#hs-modal\").classList.remove(\"is-open\");\r\n    document.body.style.overflow = \"\";\r\n  }\r\n\r\n  root.addEventListener(\"change\", function (event) {\r\n    if (event.target.matches('input[name=\"hs-application\"], input[name=\"hs-transmission\"], input[name=\"hs-mating\"], #hs-w-contacts, #hs-w-current, #hs-w-voltage, #hs-w-speed, #hs-w-depth, #hs-w-style, #hs-w-thread, #hs-w-brand')) {\r\n      collectWizardState();\r\n      if (event.target.matches('input[type=\"radio\"]') && state.step <= 3) {\r\n        setTimeout(function () {\r\n          if (state.step < 5) { state.step += 1; renderStep(); }\r\n        }, 170);\r\n      }\r\n    }\r\n    if (event.target.matches('[id^=\"hs-f-\"]')) {\r\n      syncStateFromFilters();\r\n      renderResults();\r\n    }\r\n    if (event.target.id === \"hs-sort\") renderResults();\r\n  });\r\n\r\n  root.addEventListener(\"click\", function (event) {\r\n    var presetButton = event.target.closest(\"[data-hs-preset]\");\r\n    if (presetButton) {\r\n      applyPreset(presetButton.getAttribute(\"data-hs-preset\"));\r\n      return;\r\n    }\r\n\r\n    var scrollButton = event.target.closest(\"[data-hs-scroll]\");\r\n    if (scrollButton) {\r\n      $(\"#hs-wizard-anchor\").scrollIntoView({behavior:\"smooth\", block:\"start\"});\r\n      return;\r\n    }\r\n\r\n    var modalButton = event.target.closest(\"[data-hs-modal]\");\r\n    if (modalButton) {\r\n      openModal(modalButton.getAttribute(\"data-hs-modal\"), modalButton.getAttribute(\"data-hs-pdf\") || \"\");\r\n      return;\r\n    }\r\n\r\n    if (event.target.closest(\"#hs-next\")) {\r\n      collectWizardState();\r\n      if (!validateStep()) {\r\n        $(\"#hs-nav-hint\").textContent = \"Please choose an option before continuing\";\r\n        $(\"#hs-nav-hint\").style.color = \"#b93c42\";\r\n        setTimeout(function () { $(\"#hs-nav-hint\").style.color = \"\"; }, 1800);\r\n        return;\r\n      }\r\n      if (state.step < 5) { state.step += 1; renderStep(); }\r\n      else showResults();\r\n      return;\r\n    }\r\n\r\n    if (event.target.closest(\"#hs-back\")) {\r\n      if (state.step > 1) { state.step -= 1; renderStep(); }\r\n      return;\r\n    }\r\n\r\n    if (event.target.closest(\"#hs-reset\")) { resetAll(); return; }\r\n\r\n    if (event.target.closest(\"#hs-advanced-toggle\")) {\r\n      var advanced = $(\"#hs-advanced\");\r\n      var isOpen = advanced.classList.toggle(\"is-open\");\r\n      $(\"#hs-advanced-toggle\").setAttribute(\"aria-expanded\", String(isOpen));\r\n      $(\"#hs-advanced-toggle span\").textContent = isOpen ? \"\u2212\" : \"\uff0b\";\r\n      return;\r\n    }\r\n\r\n    if (event.target.closest(\"#hs-open-mobile-filter\")) {\r\n      $(\"#hs-filters\").classList.add(\"is-mobile-open\");\r\n      return;\r\n    }\r\n\r\n    if (event.target.closest(\"#hs-close-mobile-filter\")) {\r\n      $(\"#hs-filters\").classList.remove(\"is-mobile-open\");\r\n      return;\r\n    }\r\n\r\n    if (event.target.closest(\"#hs-modal-close\") || event.target === $(\"#hs-modal\")) closeModal();\r\n  });\r\n\r\n  $(\"#hs-inquiry-form\").addEventListener(\"submit\", function (event) {\r\n    event.preventDefault();\r\n    var form = event.currentTarget;\r\n    var status = $(\"#hs-form-status\");\r\n    var button = $(\"#hs-submit-button\");\r\n    var config = window.HYSF_SELECTOR_CONFIG || {};\r\n    var ajaxUrl = config.ajaxUrl || \"\/wp-admin\/admin-ajax.php\";\r\n\r\n    status.classList.remove(\"is-visible\", \"is-error\");\r\n    status.textContent = \"\";\r\n\r\n    if (!config.nonce) {\r\n      status.innerHTML = 'The secure form service is not active yet. Please contact <a href=\"mailto:info@hysfsubsea.com\">info@hysfsubsea.com<\/a> or HYSF through <a href=\"https:\/\/wa.me\/8615960131727\" target=\"_blank\" rel=\"noopener\">WhatsApp<\/a>.';\r\n      status.classList.add(\"is-visible\", \"is-error\");\r\n      return;\r\n    }\r\n\r\n    var formData = new FormData(form);\r\n    formData.append(\"action\", \"hysf_connector_inquiry\");\r\n    formData.append(\"security\", config.nonce);\r\n    formData.append(\"page_url\", window.location.href);\r\n\r\n    button.disabled = true;\r\n    button.innerHTML = \"Sending to Engineering...\";\r\n\r\n    fetch(ajaxUrl, {\r\n      method: \"POST\",\r\n      body: formData,\r\n      credentials: \"same-origin\"\r\n    })\r\n      .then(function (response) {\r\n        if (!response.ok) throw new Error(\"HTTP \" + response.status);\r\n        return response.json();\r\n      })\r\n      .then(function (result) {\r\n        if (!result.success) {\r\n          var message = result.data && result.data.message ? result.data.message : \"The inquiry could not be sent.\";\r\n          throw new Error(message);\r\n        }\r\n        status.textContent = result.data && result.data.message\r\n          ? result.data.message\r\n          : \"Thank you. Your requirements have been sent to HYSF engineering.\";\r\n        status.classList.add(\"is-visible\");\r\n        form.reset();\r\n        $(\"#hs-form-started\").value = String(Math.floor(Date.now() \/ 1000));\r\n      })\r\n      .catch(function (error) {\r\n        status.innerHTML = escapeHtml(error.message) + ' Please try again, email <a href=\"mailto:info@hysfsubsea.com\">info@hysfsubsea.com<\/a>, or contact HYSF through <a href=\"https:\/\/wa.me\/8615960131727\" target=\"_blank\" rel=\"noopener\">WhatsApp<\/a>.';\r\n        status.classList.add(\"is-visible\", \"is-error\");\r\n      })\r\n      .finally(function () {\r\n        button.disabled = false;\r\n        button.innerHTML = 'Submit Requirements <span class=\"hs-arrow\">\u2192<\/span>';\r\n      });\r\n  });\r\n\r\n  document.addEventListener(\"keydown\", function (event) {\r\n    if (event.key === \"Escape\" && $(\"#hs-modal\").classList.contains(\"is-open\")) closeModal();\r\n  });\r\n\r\n  updateSummary();\r\n  $(\"#hs-form-started\").value = String(Math.floor(Date.now() \/ 1000));\r\n  renderStep();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Engineering Selection Tool Find Your Subsea Connector Answer a few engineering questions and compare suitable HYSF connector families for power, signal, Ethernet, fiber and coaxial applications. Start Selecting \u2192 Ask an Engineer 2026 Catalog 2\u201361Contact configurations Up to 6000mDepth options 180AHigh-current capability STEP FilesFor engineering review Connector Selection Preview Prototype 316L BULKHEAD MOLDED INLINE CABLE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-8499","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/pages\/8499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/comments?post=8499"}],"version-history":[{"count":13,"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/pages\/8499\/revisions"}],"predecessor-version":[{"id":8513,"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/pages\/8499\/revisions\/8513"}],"wp:attachment":[{"href":"https:\/\/hysfsubsea.com\/nb\/wp-json\/wp\/v2\/media?parent=8499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}