{"id":12,"date":"2026-09-21T05:03:16","date_gmt":"2026-09-21T05:03:16","guid":{"rendered":"https:\/\/tradesx.neonsnow.com.au\/?page_id=12"},"modified":"2026-09-21T14:35:07","modified_gmt":"2026-09-21T14:35:07","slug":"tradesx","status":"publish","type":"page","link":"https:\/\/tradesx.neonsnow.com.au\/","title":{"rendered":"TradesX"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74f8f71 e-con-full e-flex e-con e-parent\" data-id=\"74f8f71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-903fd3b elementor-widget elementor-widget-html\" data-id=\"903fd3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<!-- =========================================================\n     TRADESX \u2014 FULL COMBINED HOMEPAGE V21 SMOOTH DASHBOARD\n     All existing Elementor widgets combined into one widget\n     + custom draggable vertical page scroller\n     ========================================================= -->\n\n<div id=\"tx-master-page\">\n\n<style>\n\/* =========================================================\n   MASTER PAGE \/ ELEMENTOR RESET\n   ========================================================= *\/\n\nhtml{\n    scroll-behavior:smooth;\n    scrollbar-width:thin;\n    scrollbar-color:#ff5a00 #050607;\n}\n\nbody{\n    margin:0;\n    overflow-x:hidden;\n    background:#050607;\n}\n\nbody::-webkit-scrollbar{\n    width:10px;\n}\n\nbody::-webkit-scrollbar-track{\n    background:#050607;\n}\n\nbody::-webkit-scrollbar-thumb{\n    background:#ff5a00;\n    border:2px solid #050607;\n    border-radius:0;\n}\n\nbody::-webkit-scrollbar-thumb:hover{\n    background:#ff6800;\n}\n\n#tx-master-page{\n    --tx-master-orange:#ff5a00;\n    --tx-master-black:#050607;\n    position:relative;\n    left:50%;\n    width:100vw;\n    max-width:none!important;\n    margin-left:-50vw;\n    padding:0;\n    overflow:clip;\n    background:#050607;\n    isolation:isolate;\n}\n\n#tx-master-page,\n#tx-master-page *{\n    box-sizing:border-box;\n}\n\n\/* Remove any Elementor spacing between the imported widgets. *\/\n#tx-master-page > section{\n    margin-top:0!important;\n    margin-bottom:0!important;\n}\n\n\/* Because the parent is already full viewport width, normalise the\n   top-level full-width calculations from each standalone widget. *\/\n#tx-master-page > #tx-scroll-combo,\n#tx-master-page > #tx-three-portals-v2,\n#tx-master-page > #tx-fanout-v4,\n#tx-master-page > #tx-toolbox-scroll-v3,\n#tx-master-page > #tx-automation-engine,\n#tx-master-page > #tx-lifecycle-autoplay-v2,\n#tx-master-page > #tx-rest-v1{\n    left:auto!important;\n    width:100%!important;\n    max-width:none!important;\n    margin-left:0!important;\n    margin-right:0!important;\n}\n\n\/* =========================================================\n   CUSTOM VERTICAL SCROLLER\n   ========================================================= *\/\n\n#tx-master-scroller{\n    position:fixed;\n    z-index:99990;\n    top:50%;\n    right:14px;\n    width:46px;\n    height:min(66vh,620px);\n    transform:translateY(-50%);\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    pointer-events:none;\n    opacity:0;\n    transition:opacity .35s ease;\n    font-family:\"Courier New\",monospace;\n}\n\n#tx-master-scroller.is-visible{\n    opacity:1;\n}\n\n#tx-master-scroller .txms-top,\n#tx-master-scroller .txms-bottom{\n    width:100%;\n    color:rgba(255,255,255,.62);\n    font-size:8px;\n    line-height:1;\n    font-weight:800;\n    letter-spacing:.08em;\n    text-align:center;\n    pointer-events:none;\n}\n\n#tx-master-scroller .txms-top{\n    margin-bottom:12px;\n    color:#ff5a00;\n}\n\n#tx-master-scroller .txms-bottom{\n    margin-top:12px;\n}\n\n#tx-master-scroller .txms-track{\n    position:relative;\n    flex:1;\n    width:34px;\n    min-height:250px;\n    cursor:pointer;\n    pointer-events:auto;\n    touch-action:none;\n}\n\n#tx-master-scroller .txms-track::before{\n    content:\"\";\n    position:absolute;\n    top:0;\n    bottom:0;\n    left:50%;\n    width:1px;\n    transform:translateX(-50%);\n    background:rgba(255,255,255,.19);\n}\n\n#tx-master-scroller .txms-progress{\n    position:absolute;\n    z-index:2;\n    top:0;\n    left:50%;\n    width:2px;\n    height:0%;\n    transform:translateX(-50%);\n    background:#ff5a00;\n    box-shadow:\n        0 0 8px rgba(255,90,0,.55),\n        0 0 20px rgba(255,90,0,.17);\n    pointer-events:none;\n}\n\n#tx-master-scroller .txms-thumb{\n    position:absolute;\n    z-index:8;\n    top:0%;\n    left:50%;\n    width:10px;\n    height:48px;\n    transform:translate(-50%,-50%);\n    border:1px solid #ff5a00;\n    background:#050607;\n    box-shadow:\n        0 0 0 3px rgba(5,6,7,.72),\n        0 0 18px rgba(255,90,0,.18);\n    cursor:grab;\n    pointer-events:auto;\n    touch-action:none;\n}\n\n#tx-master-scroller .txms-thumb::before{\n    content:\"\";\n    position:absolute;\n    left:50%;\n    top:50%;\n    width:2px;\n    height:19px;\n    transform:translate(-50%,-50%);\n    background:#ff5a00;\n}\n\n#tx-master-scroller .txms-thumb:active,\n#tx-master-scroller.is-dragging .txms-thumb{\n    cursor:grabbing;\n    background:#111;\n}\n\n#tx-master-scroller .txms-marker{\n    position:absolute;\n    z-index:7;\n    left:50%;\n    width:11px;\n    height:11px;\n    transform:translate(-50%,-50%);\n    border:1px solid rgba(255,255,255,.42);\n    background:#050607;\n    cursor:pointer;\n    pointer-events:auto;\n    transition:\n        width .22s ease,\n        height .22s ease,\n        border-color .22s ease,\n        background .22s ease,\n        box-shadow .22s ease;\n}\n\n#tx-master-scroller .txms-marker::after{\n    content:attr(data-label);\n    position:absolute;\n    top:50%;\n    right:20px;\n    min-width:max-content;\n    padding:7px 9px;\n    transform:translateY(-50%) translateX(8px);\n    color:#fff;\n    border:1px solid rgba(255,90,0,.34);\n    background:rgba(3,5,6,.91);\n    backdrop-filter:blur(10px);\n    -webkit-backdrop-filter:blur(10px);\n    font-size:8px;\n    font-weight:800;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n    white-space:nowrap;\n    opacity:0;\n    visibility:hidden;\n    transition:\n        opacity .2s ease,\n        transform .2s ease,\n        visibility .2s ease;\n}\n\n#tx-master-scroller .txms-marker:hover::after,\n#tx-master-scroller .txms-marker.is-active::after{\n    opacity:1;\n    visibility:visible;\n    transform:translateY(-50%) translateX(0);\n}\n\n#tx-master-scroller .txms-marker:hover,\n#tx-master-scroller .txms-marker.is-active{\n    width:15px;\n    height:15px;\n    border-color:#ff5a00;\n    background:#ff5a00;\n    box-shadow:0 0 16px rgba(255,90,0,.42);\n}\n\n\/* little industrial end caps *\/\n\n#tx-master-scroller .txms-track::after{\n    content:\"\";\n    position:absolute;\n    left:50%;\n    bottom:0;\n    width:15px;\n    height:1px;\n    transform:translateX(-50%);\n    background:#ff5a00;\n}\n\n\/* Hide the floating scroller while editing in Elementor so the editor\n   remains easy to use. The real frontend still shows it. *\/\nbody.elementor-editor-active #tx-master-scroller,\n.elementor-editor-active #tx-master-scroller{\n    display:none!important;\n}\n\n@media(max-width:1000px){\n    #tx-master-scroller{\n        display:none!important;\n    }\n\n    body::-webkit-scrollbar{\n        width:6px;\n    }\n}\n\n@media(prefers-reduced-motion:reduce){\n    html{\n        scroll-behavior:auto;\n    }\n\n    #tx-master-scroller *,\n    #tx-master-page *{\n        scroll-behavior:auto!important;\n    }\n}\n<\/style>\n\n<!-- CUSTOM PAGE SCROLLER -->\n<nav id=\"tx-master-scroller\" aria-label=\"TradesX page navigation\">\n    <div class=\"txms-top\">01<\/div>\n\n    <div class=\"txms-track\" role=\"scrollbar\" aria-orientation=\"vertical\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\">\n        <div class=\"txms-progress\"><\/div>\n        <div class=\"txms-thumb\" aria-hidden=\"true\"><\/div>\n\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-scroll-combo\" data-label=\"Intro\"><\/button>\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-three-portals-v2\" data-label=\"Three Portals\"><\/button>\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-fanout-v4\" data-label=\"Platform\"><\/button>\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-toolbox-scroll-v3\" data-label=\"Toolbox\"><\/button>\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-automation-engine\" data-label=\"Automation\"><\/button>\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-lifecycle-autoplay-v2\" data-label=\"Lifecycle\"><\/button>\n        <button class=\"txms-marker\" type=\"button\" data-target=\"tx-rest-v1\" data-label=\"Explore\"><\/button>\n    <\/div>\n\n    <div class=\"txms-bottom\">07<\/div>\n<\/nav>\n\n<!-- =========================================================\n     01 \u2014 PORTAL HERO + CODE TRANSITION\n     ========================================================= -->\n<section id=\"tx-scroll-combo\">\n<style>\n\/* =========================================================\n   TRADESX PORTAL -> CODE SCROLL TRANSITION CONTROLLER\n   Keeps both existing widgets intact, but layers them inside\n   one sticky scroll scene on desktop.\n   ========================================================= *\/\n#tx-scroll-combo{\n    --tx-orange:#ff5a00;\n    position:relative;\n    width:100vw;\n    height:280vh;\n    margin-left:calc(50% - 50vw);\n    background:#ff5a00;\n    overflow:visible;\n}\n\n#tx-scroll-combo *{box-sizing:border-box;}\n\n#tx-scroll-combo > .tx-combo-stage{\n    position:sticky;\n    top:0;\n    width:100%;\n    height:100vh;\n    min-height:720px;\n    overflow:hidden;\n    background:#ff5a00;\n    isolation:isolate;\n}\n\n\/* Force both supplied widgets to behave as layers in the same stage. *\/\n#tx-scroll-combo #tx-portal-hero,\n#tx-scroll-combo #tx-code-world{\n    position:absolute !important;\n    inset:0 !important;\n    width:100% !important;\n    height:100% !important;\n    min-height:0 !important;\n    margin:0 !important;\n    overflow:hidden !important;\n}\n\n#tx-scroll-combo #tx-portal-hero{\n    z-index:2;\n    transform-origin:50% 45%;\n    will-change:transform,opacity,filter;\n}\n\n#tx-scroll-combo #tx-portal-hero .txph-shell{\n    width:min(1740px,96vw) !important;\n    height:100% !important;\n    min-height:100% !important;\n}\n\n#tx-scroll-combo #tx-code-world{\n    z-index:5;\n    background:#000 !important;\n    -webkit-clip-path:inset(100% 0 0 0);\n    clip-path:inset(100% 0 0 0);\n    will-change:clip-path;\n    pointer-events:none;\n}\n\n#tx-scroll-combo #tx-code-world .txc-stage{\n    position:absolute !important;\n    inset:0 !important;\n    top:0 !important;\n    width:100% !important;\n    height:100% !important;\n    min-height:0 !important;\n}\n\n\/* Code copy starts lower and is positioned by scroll rather than keyframes. *\/\n#tx-scroll-combo #tx-code-world .txc-kicker{\n    opacity:0;\n    transform:translateX(-50%) translateY(70px);\n    will-change:transform,opacity;\n}\n\n#tx-scroll-combo #tx-code-world .txc-side{\n    opacity:0;\n    transform:translateY(72px);\n    will-change:transform,opacity;\n}\n\n#tx-scroll-combo #tx-code-world .txc-copy{\n    opacity:0;\n    transform:translateX(-50%) translateY(160px) scale(.965);\n    will-change:transform,opacity;\n}\n\n#tx-scroll-combo #tx-code-world .txc-scroll{\n    opacity:0;\n    transform:translateX(-50%) translateY(42px);\n    will-change:transform,opacity;\n}\n\n\/* Thin live edge where the black code world wipes over the portal scene. *\/\n#tx-scroll-combo .tx-combo-wipe{\n    position:absolute;\n    z-index:10;\n    left:0;\n    top:100%;\n    width:100%;\n    height:2px;\n    opacity:0;\n    pointer-events:none;\n    background:#ff5a00;\n    box-shadow:\n        0 0 12px rgba(255,90,0,.48),\n        0 0 34px rgba(255,90,0,.16);\n    will-change:top,opacity;\n}\n\n\/* Desktop portal sizing adjustment inside the fixed 100vh scene. *\/\n@media(min-width:1101px){\n    #tx-scroll-combo #tx-portal-hero .txph-shell{\n        padding-top:26px !important;\n        padding-bottom:18px !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-portals{\n        padding-top:8px !important;\n        padding-bottom:0 !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-portal{\n        min-height:clamp(515px,61vh,650px) !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-island-wrap{\n        width:80% !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-card{\n        width:80% !important;\n    }\n}\n\n\/* Tablet\/mobile: keep the two designs sequential rather than forcing\n   three portal cards into a pinned 100vh scene. *\/\n@media(max-width:1100px){\n    #tx-scroll-combo{\n        height:auto !important;\n        margin-left:calc(50% - 50vw);\n        overflow:hidden;\n    }\n\n    #tx-scroll-combo > .tx-combo-stage{\n        position:relative !important;\n        top:auto !important;\n        height:auto !important;\n        min-height:0 !important;\n        overflow:visible !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero{\n        position:relative !important;\n        inset:auto !important;\n        height:auto !important;\n        min-height:0 !important;\n        opacity:1 !important;\n        transform:none !important;\n        filter:none !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-shell{\n        height:auto !important;\n        min-height:auto !important;\n    }\n\n    #tx-scroll-combo #tx-code-world{\n        position:relative !important;\n        inset:auto !important;\n        height:125vh !important;\n        min-height:0 !important;\n        opacity:1 !important;\n        transform:none !important;\n        -webkit-clip-path:none !important;\n        clip-path:none !important;\n        pointer-events:auto !important;\n    }\n\n    #tx-scroll-combo #tx-code-world .txc-stage{\n        position:sticky !important;\n        top:0 !important;\n        height:100vh !important;\n        min-height:740px !important;\n    }\n\n    #tx-scroll-combo #tx-code-world .txc-kicker{\n        opacity:1 !important;\n        transform:translateX(-50%) !important;\n    }\n\n    #tx-scroll-combo #tx-code-world .txc-side{\n        opacity:1 !important;\n        transform:none !important;\n    }\n\n    #tx-scroll-combo #tx-code-world .txc-copy{\n        opacity:1 !important;\n        transform:translateX(-50%) !important;\n    }\n\n    #tx-scroll-combo #tx-code-world .txc-scroll{\n        opacity:1 !important;\n        transform:translateX(-50%) !important;\n    }\n\n    #tx-scroll-combo .tx-combo-wipe{display:none;}\n}\n<\/style>\n\n<div class=\"tx-combo-stage\">\n<section id=\"tx-portal-hero\">\n\n<style>\n\n\/* =========================================================\n   TRADESX PORTAL HERO\n   GLASS CARD VERSION\n   ========================================================= *\/\n\n#tx-portal-hero{\n    --tx-orange:#ff5a00;\n    --tx-orange-hot:#ff6700;\n    --tx-black:#070809;\n    --tx-white:#f5f5f3;\n\n    position:relative;\n\n    width:100vw;\n    min-height:100svh;\n\n    margin-left:calc(50% - 50vw);\n\n    overflow:hidden;\n\n    background:\n        radial-gradient(\n            circle at 50% 20%,\n            rgba(255,255,255,.08),\n            transparent 35%\n        ),\n        linear-gradient(\n            180deg,\n            #ff6300 0%,\n            #ff5a00 65%,\n            #ea4d00 100%\n        );\n\n    color:#080808;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n}\n\n\n#tx-portal-hero *{\n    box-sizing:border-box;\n}\n\n\n#tx-portal-hero a{\n    text-decoration:none;\n}\n\n\n\/* =========================================================\n   BACKGROUND DETAIL\n   ========================================================= *\/\n\n#tx-portal-hero:before{\n\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    pointer-events:none;\n\n    opacity:.08;\n\n    background-image:\n\n        linear-gradient(\n            rgba(0,0,0,.06) 1px,\n            transparent 1px\n        ),\n\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.06) 1px,\n            transparent 1px\n        );\n\n    background-size:\n        90px 90px;\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            #000 20%,\n            #000 82%,\n            transparent\n        );\n}\n\n\n.txph-shell{\n\n    position:relative;\n    z-index:2;\n\n    width:min(\n        1740px,\n        96vw\n    );\n\n    min-height:100svh;\n\n    margin:0 auto;\n\n    padding:\n        35px\n        0\n        28px;\n\n    display:flex;\n    flex-direction:column;\n}\n\n\n\/* =========================================================\n   TOP BRAND AREA\n   ========================================================= *\/\n\n.txph-header{\n\n    display:grid;\n\n    grid-template-columns:\n        1fr\n        auto\n        1fr;\n\n    align-items:start;\n\n    gap:30px;\n\n    flex-shrink:0;\n}\n\n\n.txph-micro{\n\n    padding-top:1px;\n\n    font-size:10px;\n\n    line-height:1.55;\n\n    font-weight:900;\n\n    letter-spacing:.28em;\n\n    text-transform:uppercase;\n}\n\n\n.txph-micro--right{\n    text-align:right;\n}\n\n\n\/* =========================================================\n   LOGO\n   ========================================================= *\/\n\n.txph-brand{\n    text-align:center;\n}\n\n\n.txph-logo{\n\n    width:clamp(\n        270px,\n        24vw,\n        430px\n    );\n\n    margin:0 auto;\n}\n\n\n.txph-logo img{\n\n    display:block;\n\n    width:100%;\n    height:auto;\n\n    \/*\n       Original TradesX logo\n       forced to pure black\n    *\/\n\n    filter:\n        brightness(0)\n        saturate(100%);\n}\n\n\n.txph-tagline{\n\n    margin-top:7px;\n\n    font-size:11px;\n\n    font-weight:900;\n\n    letter-spacing:.34em;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   PORTAL AREA\n   ========================================================= *\/\n\n.txph-portals{\n\n    position:relative;\n\n    flex:1;\n\n    display:flex;\n\n    align-items:center;\n\n    padding:\n        16px\n        0\n        5px;\n}\n\n\n.txph-grid{\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            3,\n            minmax(0,1fr)\n        );\n\n    gap:24px;\n\n    align-items:end;\n}\n\n\n\/* =========================================================\n   INDIVIDUAL PORTAL\n   ========================================================= *\/\n\n.txph-portal{\n\n    position:relative;\n\n    min-height:\n        clamp(\n            570px,\n            63vh,\n            690px\n        );\n\n    display:flex;\n\n    align-items:flex-end;\n    justify-content:center;\n\n    perspective:1300px;\n\n    isolation:isolate;\n}\n\n\n\/* =========================================================\n   ISLAND\n   ========================================================= *\/\n\n.txph-island-wrap{\n\n    position:absolute;\n\n    z-index:1;\n\n    top:0;\n\n    left:50%;\n\n    width:83%;\n\n    transform:\n        translateX(-50%);\n\n    transform-origin:\n        50%\n        55%;\n\n    transition:\n        transform .5s\n        cubic-bezier(.2,.8,.2,1),\n        filter .5s ease;\n}\n\n\n.txph-island{\n\n    display:block;\n\n    width:100%;\n    height:auto;\n\n    object-fit:contain;\n\n    user-select:none;\n    pointer-events:none;\n\n    filter:\n        drop-shadow(\n            0\n            26px\n            26px\n            rgba(0,0,0,.24)\n        );\n\n    animation:\n        txph-float\n        6.5s\n        ease-in-out\n        infinite;\n}\n\n\n.txph-portal:nth-child(2)\n.txph-island{\n    animation-delay:-2.1s;\n}\n\n\n.txph-portal:nth-child(3)\n.txph-island{\n    animation-delay:-4.2s;\n}\n\n\n@keyframes txph-float{\n\n    0%,\n    100%{\n        transform:\n            translateY(0);\n    }\n\n    50%{\n        transform:\n            translateY(-9px);\n    }\n\n}\n\n\n.txph-portal:hover\n.txph-island-wrap{\n\n    transform:\n        translateX(-50%)\n        translateY(-10px)\n        scale(1.025);\n}\n\n\n\/* =========================================================\n   GLASS PORTAL CARD\n   ========================================================= *\/\n\n.txph-card{\n\n    position:relative;\n\n    z-index:5;\n\n    width:82%;\n\n    margin:\n        0\n        auto\n        8px;\n\n    padding:\n        20px\n        22px\n        20px;\n\n    overflow:hidden;\n\n    color:#fff;\n\n\n    \/*\n       THIS IS THE MAIN CHANGE\n       Transparent smoked glass\n    *\/\n\n    background:\n\n        linear-gradient(\n            135deg,\n            rgba(8,10,11,.68),\n            rgba(8,9,10,.48)\n        );\n\n\n    border:\n        1px solid\n        rgba(\n            255,\n            90,\n            0,\n            .46\n        );\n\n\n    box-shadow:\n\n        0\n        24px\n        55px\n        rgba(\n            0,\n            0,\n            0,\n            .23\n        ),\n\n        inset\n        0\n        1px\n        0\n        rgba(\n            255,\n            255,\n            255,\n            .07\n        );\n\n\n    backdrop-filter:\n        blur(18px)\n        saturate(125%);\n\n    -webkit-backdrop-filter:\n        blur(18px)\n        saturate(125%);\n\n\n    transition:\n\n        transform .35s ease,\n\n        background .35s ease,\n\n        border-color .35s ease,\n\n        box-shadow .35s ease;\n}\n\n\n\/* subtle glass shine *\/\n\n.txph-card:before{\n\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n    left:0;\n    right:0;\n\n    height:1px;\n\n    background:\n\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,255,255,.28),\n            transparent\n        );\n\n    opacity:.55;\n}\n\n\n\/* subtle orange glass wash *\/\n\n.txph-card:after{\n\n    content:\"\";\n\n    position:absolute;\n\n    width:180px;\n    height:180px;\n\n    right:-80px;\n    bottom:-130px;\n\n    border-radius:50%;\n\n    pointer-events:none;\n\n    background:\n\n        radial-gradient(\n            circle,\n            rgba(255,90,0,.14),\n            transparent 68%\n        );\n}\n\n\n\/* hover *\/\n\n.txph-portal:hover\n.txph-card{\n\n    transform:\n        translateY(-8px);\n\n    background:\n\n        linear-gradient(\n            135deg,\n            rgba(8,10,11,.75),\n            rgba(8,9,10,.53)\n        );\n\n\n    border-color:\n        rgba(\n            255,\n            90,\n            0,\n            .72\n        );\n\n\n    box-shadow:\n\n        0\n        30px\n        70px\n        rgba(\n            0,\n            0,\n            0,\n            .29\n        ),\n\n        inset\n        0\n        1px\n        0\n        rgba(\n            255,\n            255,\n            255,\n            .10\n        );\n}\n\n\n\/* =========================================================\n   CARD TYPOGRAPHY\n   ========================================================= *\/\n\n.txph-number{\n\n    position:relative;\n    z-index:2;\n\n    margin-bottom:10px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:11px;\n\n    font-weight:900;\n\n    letter-spacing:.15em;\n}\n\n\n.txph-card h2{\n\n    position:relative;\n    z-index:2;\n\n    margin:0;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            18px,\n            1.45vw,\n            24px\n        );\n\n    line-height:1.08;\n\n    font-weight:950;\n\n    letter-spacing:.09em;\n\n    text-transform:uppercase;\n}\n\n\n.txph-card p{\n\n    position:relative;\n    z-index:2;\n\n    margin:\n        11px\n        0\n        17px;\n\n    color:\n        rgba(\n            255,\n            255,\n            255,\n            .72\n        );\n\n    font-size:14px;\n\n    line-height:1.45;\n}\n\n\n\/* =========================================================\n   LOGIN BUTTON\n   ========================================================= *\/\n\n.txph-login{\n\n    position:relative;\n    z-index:2;\n\n    min-height:46px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:13px;\n\n    color:\n        var(--tx-orange)!important;\n\n\n    background:\n        rgba(\n            0,\n            0,\n            0,\n            .18\n        );\n\n\n    border:\n        1px solid\n        rgba(\n            255,\n            90,\n            0,\n            .48\n        );\n\n\n    font-size:11px;\n\n    font-weight:950;\n\n    letter-spacing:.22em;\n\n    text-transform:uppercase;\n\n\n    transition:\n        background .25s ease,\n        border-color .25s ease,\n        color .25s ease,\n        transform .25s ease;\n}\n\n\n.txph-login span{\n\n    font-size:16px;\n\n    transition:\n        transform .25s ease;\n}\n\n\n.txph-login:hover{\n\n    color:#090909!important;\n\n    background:\n        var(--tx-orange);\n\n    border-color:\n        var(--tx-orange);\n\n    transform:\n        translateY(-2px);\n}\n\n\n.txph-login:hover span{\n\n    transform:\n        translateX(5px);\n}\n\n\n\/* =========================================================\n   BOTTOM LABEL\n   ========================================================= *\/\n\n.txph-footer{\n\n    flex-shrink:0;\n\n    padding-top:5px;\n\n    text-align:center;\n}\n\n\n.txph-line{\n\n    position:relative;\n\n    width:\n        min(\n            340px,\n            38vw\n        );\n\n    height:2px;\n\n    margin:\n        0\n        auto\n        12px;\n\n    background:\n        rgba(\n            0,\n            0,\n            0,\n            .14\n        );\n}\n\n\n.txph-line:after{\n\n    content:\"\";\n\n    position:absolute;\n\n    left:50%;\n\n    top:0;\n\n    width:42%;\n\n    height:100%;\n\n    transform:\n        translateX(-50%);\n\n    background:#0b0b0b;\n}\n\n\n.txph-footer-text{\n\n    font-size:11px;\n\n    font-weight:900;\n\n    letter-spacing:.32em;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   CORNERS\n   ========================================================= *\/\n\n.txph-corner{\n\n    position:absolute;\n\n    z-index:3;\n\n    width:62px;\n    height:62px;\n\n    opacity:.34;\n\n    pointer-events:none;\n}\n\n\n.txph-corner:before,\n.txph-corner:after{\n\n    content:\"\";\n\n    position:absolute;\n\n    background:#101010;\n}\n\n\n.txph-corner:before{\n\n    width:62px;\n    height:1px;\n\n    top:0;\n    left:0;\n}\n\n\n.txph-corner:after{\n\n    width:1px;\n    height:62px;\n\n    top:0;\n    left:0;\n}\n\n\n.txph-corner--left{\n\n    left:36px;\n    bottom:30px;\n\n    transform:\n        rotate(-90deg);\n}\n\n\n.txph-corner--right{\n\n    right:36px;\n    bottom:30px;\n\n    transform:\n        rotate(180deg);\n}\n\n\n\/* =========================================================\n   ENTRANCE\n   ========================================================= *\/\n\n.txph-portal{\n\n    opacity:0;\n\n    transform:\n        translateY(32px);\n\n    animation:\n        txph-enter\n        1s\n        cubic-bezier(.18,.76,.24,1)\n        forwards;\n}\n\n\n.txph-portal:nth-child(1){\n    animation-delay:.12s;\n}\n\n\n.txph-portal:nth-child(2){\n    animation-delay:.27s;\n}\n\n\n.txph-portal:nth-child(3){\n    animation-delay:.42s;\n}\n\n\n@keyframes txph-enter{\n\n    to{\n\n        opacity:1;\n\n        transform:\n            translateY(0);\n\n    }\n\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:1100px){\n\n    #tx-portal-hero{\n        min-height:auto;\n    }\n\n\n    .txph-shell{\n\n        min-height:auto;\n\n        padding:\n            25px\n            0\n            50px;\n    }\n\n\n    .txph-header{\n\n        grid-template-columns:\n            1fr;\n    }\n\n\n    .txph-micro{\n        display:none;\n    }\n\n\n    .txph-portals{\n\n        padding-top:40px;\n    }\n\n\n    .txph-grid{\n\n        width:\n            min(\n                760px,\n                96vw\n            );\n\n        margin:auto;\n\n        grid-template-columns:1fr;\n\n        gap:45px;\n    }\n\n\n    .txph-portal{\n\n        min-height:640px;\n    }\n\n\n    .txph-island-wrap{\n        width:74%;\n    }\n\n\n    .txph-card{\n        width:76%;\n    }\n\n\n    .txph-footer{\n\n        margin-top:45px;\n    }\n\n\n    .txph-corner{\n        display:none;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:650px){\n\n    .txph-shell{\n\n        padding:\n            18px\n            0\n            38px;\n    }\n\n\n    .txph-logo{\n\n        width:\n            min(\n                270px,\n                72vw\n            );\n    }\n\n\n    .txph-tagline{\n\n        font-size:9px;\n\n        letter-spacing:.26em;\n    }\n\n\n    .txph-portals{\n\n        padding-top:25px;\n    }\n\n\n    .txph-grid{\n\n        gap:35px;\n    }\n\n\n    .txph-portal{\n\n        min-height:520px;\n    }\n\n\n    .txph-island-wrap{\n        width:91%;\n    }\n\n\n    .txph-card{\n\n        width:90%;\n\n        padding:\n            17px\n            17px\n            18px;\n\n        backdrop-filter:\n            blur(14px);\n\n        -webkit-backdrop-filter:\n            blur(14px);\n    }\n\n\n    .txph-card h2{\n\n        font-size:18px;\n\n        letter-spacing:.07em;\n    }\n\n\n    .txph-card p{\n\n        font-size:13px;\n    }\n\n\n    .txph-footer-text{\n\n        font-size:9px;\n\n        letter-spacing:.22em;\n    }\n\n\n    .txph-line{\n\n        width:\n            min(\n                240px,\n                65vw\n            );\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media(\n    prefers-reduced-motion:\n    reduce\n){\n\n    #tx-portal-hero *,\n    #tx-portal-hero *:before,\n    #tx-portal-hero *:after{\n\n        animation:none!important;\n\n        transition:none!important;\n    }\n\n\n    .txph-portal{\n\n        opacity:1;\n\n        transform:none;\n    }\n\n}\n\n<\/style>\n\n\n<div class=\"txph-shell\">\n\n\n    <!-- =====================================================\n         HEADER\n         ===================================================== -->\n\n    <div class=\"txph-header\">\n\n\n        <div class=\"txph-micro\">\n\n            PEOPLE.<br>\n            COMPLIANCE.<br>\n            PROGRESS.\n\n        <\/div>\n\n\n        <div class=\"txph-brand\">\n\n            <div class=\"txph-logo\">\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                    alt=\"TradesX\"\n                >\n\n            <\/div>\n\n            <div class=\"txph-tagline\">\n\n                Built for what's next.\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"\n            txph-micro\n            txph-micro--right\n        \">\n\n            SAME<br>\n            INDUSTRY.<br>\n            HIGHER<br>\n            STANDARDS.\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <!-- =====================================================\n         THREE PORTALS\n         ===================================================== -->\n\n    <div class=\"txph-portals\">\n\n        <div class=\"txph-grid\">\n\n\n            <!-- =============================================\n                 01 HEAD CONTRACTORS\n                 ============================================= -->\n\n            <article class=\"txph-portal\">\n\n\n                <div class=\"txph-island-wrap\">\n\n                    <img decoding=\"async\"\n                        class=\"txph-island\"\n                        src=\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/for-head-contractor.png\"\n                        alt=\"TradesX for Head Contractors\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"txph-card\">\n\n\n                    <div class=\"txph-number\">\n                        01\n                    <\/div>\n\n\n                    <h2>\n                        For Head Contractors\n                    <\/h2>\n\n\n                    <p>\n                        Control. Compliance. Confidence.\n                    <\/p>\n\n\n                    <a\n                        class=\"txph-login\"\n                        href=\"https:\/\/tradesx.com.au\/login?role=admin\"\n                    >\n\n                        Login\n\n                        <span>\u2192<\/span>\n\n                    <\/a>\n\n\n                <\/div>\n\n\n            <\/article>\n\n\n            <!-- =============================================\n                 02 SUBCONTRACTORS\n                 ============================================= -->\n\n            <article class=\"txph-portal\">\n\n\n                <div class=\"txph-island-wrap\">\n\n                    <img decoding=\"async\"\n                        class=\"txph-island\"\n                        src=\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/for-subcontactors.png\"\n                        alt=\"TradesX for Subcontractors\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"txph-card\">\n\n\n                    <div class=\"txph-number\">\n                        02\n                    <\/div>\n\n\n                    <h2>\n                        For Subcontractors\n                    <\/h2>\n\n\n                    <p>\n                        Find work. Stay compliant. Get paid.\n                    <\/p>\n\n\n                    <a\n                        class=\"txph-login\"\n                        href=\"https:\/\/tradesx.com.au\/login?role=contractor\"\n                    >\n\n                        Login\n\n                        <span>\u2192<\/span>\n\n                    <\/a>\n\n\n                <\/div>\n\n\n            <\/article>\n\n\n            <!-- =============================================\n                 03 CLIENTS\n                 ============================================= -->\n\n            <article class=\"txph-portal\">\n\n\n                <div class=\"txph-island-wrap\">\n\n                    <img decoding=\"async\"\n                        class=\"txph-island\"\n                        src=\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/for-clients.png\"\n                        alt=\"TradesX for Clients\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"txph-card\">\n\n\n                    <div class=\"txph-number\">\n                        03\n                    <\/div>\n\n\n                    <h2>\n                        For Clients\n                    <\/h2>\n\n\n                    <p>\n                        Request. Track. Results.\n                    <\/p>\n\n\n                    <a\n                        class=\"txph-login\"\n                        href=\"https:\/\/tradesx.com.au\/login?role=client\"\n                    >\n\n                        Login\n\n                        <span>\u2192<\/span>\n\n                    <\/a>\n\n\n                <\/div>\n\n\n            <\/article>\n\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         BOTTOM\n         ===================================================== -->\n\n    <div class=\"txph-footer\">\n\n        <div class=\"txph-line\"><\/div>\n\n        <div class=\"txph-footer-text\">\n\n            Three Portals. One Platform.\n\n        <\/div>\n\n    <\/div>\n\n\n<\/div>\n\n\n<div class=\"\n    txph-corner\n    txph-corner--left\n\"><\/div>\n\n\n<div class=\"\n    txph-corner\n    txph-corner--right\n\"><\/div>\n\n\n<script>\n\n(() => {\n\n\n    const hero =\n        document.querySelector(\n            '#tx-portal-hero'\n        );\n\n\n    if(!hero){\n        return;\n    }\n\n\n    const portals = [\n        ...hero.querySelectorAll(\n            '.txph-portal'\n        )\n    ];\n\n\n    \/* =====================================================\n       SUBTLE MOUSE DEPTH\n       ===================================================== *\/\n\n    portals.forEach(\n        portal => {\n\n\n            const island =\n                portal.querySelector(\n                    '.txph-island-wrap'\n                );\n\n\n            if(!island){\n                return;\n            }\n\n\n            portal.addEventListener(\n                'mousemove',\n                event => {\n\n\n                    if(\n                        window.innerWidth\n                        <=\n                        1100\n                    ){\n                        return;\n                    }\n\n\n                    const rect =\n                        portal.getBoundingClientRect();\n\n\n                    const x =\n                        (\n                            event.clientX\n                            -\n                            rect.left\n                        )\n                        \/\n                        rect.width;\n\n\n                    const y =\n                        (\n                            event.clientY\n                            -\n                            rect.top\n                        )\n                        \/\n                        rect.height;\n\n\n                    const rotateY =\n                        (\n                            x\n                            -\n                            .5\n                        )\n                        *\n                        4;\n\n\n                    const rotateX =\n                        (\n                            .5\n                            -\n                            y\n                        )\n                        *\n                        2.5;\n\n\n                    island.style.transform =\n                        `\n                        translateX(-50%)\n                        translateY(-10px)\n                        scale(1.025)\n                        rotateX(${rotateX}deg)\n                        rotateY(${rotateY}deg)\n                        `;\n\n\n                }\n            );\n\n\n            portal.addEventListener(\n                'mouseleave',\n                () => {\n\n                    island.style.transform = '';\n\n                }\n            );\n\n\n        }\n    );\n\n\n})();\n\n<\/script>\n\n<\/section>\n<section id=\"tx-code-world\">\n\n<style>\n\n\/* ============================================================\n   TRADESX DIGITAL CODE WORLD\n   NEGATIVE SPACE X\n   ============================================================ *\/\n\n#tx-code-world{\n    --orange:#ff5a00;\n    --orange-hot:#ff6a00;\n    --black:#000;\n    --white:#f3f3f1;\n    --grey:#989b9e;\n\n    position:relative;\n    width:100vw;\n    height:145vh;\n\n    margin-left:calc(50% - 50vw);\n\n    background:#000;\n    color:#fff;\n\n    font-family:Arial,Helvetica,sans-serif;\n\n    overflow:visible;\n}\n\n#tx-code-world *{\n    box-sizing:border-box;\n}\n\n#tx-code-world a{\n    color:inherit;\n    text-decoration:none;\n}\n\n\n\/* ============================================================\n   STICKY STAGE\n   ============================================================ *\/\n\n.txc-stage{\n    position:sticky;\n    top:0;\n\n    width:100%;\n    height:100vh;\n    min-height:720px;\n\n    overflow:hidden;\n\n    background:#000;\n}\n\n.txc-stage:before{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    z-index:0;\n\n    background:#000;\n}\n\n\n\/* ============================================================\n   CANVAS\n   ============================================================ *\/\n\n#tx-code-canvas{\n    position:absolute;\n\n    z-index:2;\n\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    display:block;\n\n    cursor:crosshair;\n}\n\n\n\/* ============================================================\n   VIGNETTE\n   ============================================================ *\/\n\n.txc-vignette{\n    position:absolute;\n\n    z-index:3;\n\n    inset:0;\n\n    pointer-events:none;\n\n    background:\n        radial-gradient(\n            ellipse at 50% 50%,\n            transparent 0%,\n            transparent 33%,\n            rgba(0,0,0,.13) 59%,\n            rgba(0,0,0,.72) 100%\n        ),\n        linear-gradient(\n            180deg,\n            rgba(0,0,0,.18),\n            transparent 25%,\n            transparent 70%,\n            rgba(0,0,0,.55)\n        );\n}\n\n\n\/* ============================================================\n   KICKER\n   ============================================================ *\/\n\n.txc-kicker{\n    position:absolute;\n\n    z-index:20;\n\n    top:96px;\n    left:50%;\n\n    transform:translateX(-50%);\n\n    color:#c0c2c3;\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:9px;\n\n    line-height:1;\n\n    font-weight:800;\n\n    letter-spacing:.34em;\n\n    text-transform:uppercase;\n\n    white-space:nowrap;\n}\n\n\n\/* ============================================================\n   SIDE LABELS\n   ============================================================ *\/\n\n.txc-side{\n    position:absolute;\n\n    z-index:20;\n\n    color:#b6b9bb;\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:10px;\n\n    line-height:1.55;\n\n    font-weight:700;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n}\n\n.txc-side:before,\n.txc-side:after{\n    content:\"\";\n\n    position:absolute;\n\n    background:var(--orange);\n}\n\n\n\/* TOP LEFT *\/\n\n.txc-side-tl{\n    top:110px;\n    left:4.5vw;\n\n    padding-left:24px;\n}\n\n.txc-side-tl:before{\n    left:0;\n    top:-7px;\n\n    width:2px;\n    height:68px;\n}\n\n.txc-side-tl:after{\n    left:0;\n    top:-7px;\n\n    width:27px;\n    height:2px;\n}\n\n\n\/* TOP RIGHT *\/\n\n.txc-side-tr{\n    top:110px;\n    right:4.5vw;\n\n    padding-right:24px;\n\n    text-align:right;\n}\n\n.txc-side-tr:before{\n    right:0;\n    top:-7px;\n\n    width:2px;\n    height:68px;\n}\n\n.txc-side-tr:after{\n    right:0;\n    top:-7px;\n\n    width:27px;\n    height:2px;\n}\n\n\n\/* BOTTOM LEFT *\/\n\n.txc-side-bl{\n    bottom:72px;\n    left:4.5vw;\n\n    padding-left:24px;\n}\n\n.txc-side-bl:before{\n    left:0;\n    bottom:-7px;\n\n    width:2px;\n    height:58px;\n}\n\n.txc-side-bl:after{\n    left:0;\n    bottom:-7px;\n\n    width:27px;\n    height:2px;\n}\n\n\n\/* BOTTOM RIGHT *\/\n\n.txc-side-br{\n    bottom:72px;\n    right:4.5vw;\n\n    padding-right:24px;\n\n    text-align:right;\n}\n\n.txc-side-br:before{\n    right:0;\n    bottom:-7px;\n\n    width:2px;\n    height:58px;\n}\n\n.txc-side-br:after{\n    right:0;\n    bottom:-7px;\n\n    width:27px;\n    height:2px;\n}\n\n\n\/* ============================================================\n   CENTRAL COPY\n   ============================================================ *\/\n\n.txc-copy{\n    position:absolute;\n\n    z-index:25;\n\n    left:50%;\n    bottom:16vh;\n\n    width:min(970px,88vw);\n\n    transform:translateX(-50%);\n\n    text-align:center;\n\n    pointer-events:none;\n}\n\n.txc-copy:before{\n    content:\"\";\n\n    position:absolute;\n\n    z-index:-1;\n\n    inset:-65px -100px;\n\n    background:\n        radial-gradient(\n            ellipse at center,\n            rgba(0,0,0,.98),\n            rgba(0,0,0,.88) 40%,\n            rgba(0,0,0,.36) 68%,\n            transparent 78%\n        );\n\n    pointer-events:none;\n}\n\n.txc-heading-one{\n    display:block;\n\n    color:#f0f0ee;\n\n    font-size:\n        clamp(\n            38px,\n            4.6vw,\n            70px\n        );\n\n    line-height:.9;\n\n    font-weight:400;\n\n    letter-spacing:.16em;\n\n    text-transform:uppercase;\n}\n\n.txc-heading-two{\n    display:block;\n\n    margin-top:10px;\n\n    color:var(--orange);\n\n    font-size:\n        clamp(\n            36px,\n            4.2vw,\n            65px\n        );\n\n    line-height:.95;\n\n    font-weight:800;\n\n    letter-spacing:.08em;\n\n    text-transform:uppercase;\n\n    text-shadow:\n        0 0 28px\n        rgba(255,90,0,.13);\n}\n\n.txc-tagline{\n    margin-top:21px;\n\n    color:#aaaeb0;\n\n    font-size:10px;\n\n    line-height:1;\n\n    font-weight:800;\n\n    letter-spacing:.35em;\n\n    text-transform:uppercase;\n}\n\n\n\/* ============================================================\n   SCROLL INDICATOR\n   ============================================================ *\/\n\n.txc-scroll{\n    position:absolute;\n\n    z-index:28;\n\n    left:50%;\n    bottom:24px;\n\n    transform:translateX(-50%);\n\n    text-align:center;\n\n    color:#c6c8c9;\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:9px;\n\n    line-height:1.35;\n\n    font-weight:700;\n\n    letter-spacing:.14em;\n\n    text-transform:uppercase;\n}\n\n.txc-mouse{\n    position:relative;\n\n    display:block;\n\n    width:22px;\n    height:36px;\n\n    margin:\n        0\n        auto\n        10px;\n\n    border:\n        2px solid\n        var(--orange);\n\n    border-radius:15px;\n}\n\n.txc-mouse:before{\n    content:\"\";\n\n    position:absolute;\n\n    top:7px;\n    left:50%;\n\n    width:2px;\n    height:7px;\n\n    transform:translateX(-50%);\n\n    background:var(--orange);\n\n    animation:\n        txc-wheel\n        1.7s\n        ease\n        infinite;\n}\n\n@keyframes txc-wheel{\n\n    0%{\n        opacity:0;\n\n        transform:\n            translate(\n                -50%,\n                0\n            );\n    }\n\n    30%{\n        opacity:1;\n    }\n\n    100%{\n        opacity:0;\n\n        transform:\n            translate(\n                -50%,\n                10px\n            );\n    }\n\n}\n\n\n\/* ============================================================\n   CURSOR GLOW\n   MOVED BEHIND CANVAS SO X STAYS BLACK\n   ============================================================ *\/\n\n.txc-cursor{\n    position:absolute;\n\n    z-index:1;\n\n    top:0;\n    left:0;\n\n    width:250px;\n    height:250px;\n\n    transform:\n        translate(\n            -50%,\n            -50%\n        );\n\n    border-radius:50%;\n\n    pointer-events:none;\n\n    opacity:0;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(255,90,0,.075) 0%,\n            rgba(255,90,0,.025) 35%,\n            transparent 70%\n        );\n\n    transition:\n        opacity .25s ease;\n}\n\n\n\/* ============================================================\n   MOBILE\n   ============================================================ *\/\n\n@media(max-width:1050px){\n\n\n    .txc-side{\n        display:none;\n    }\n\n    .txc-copy{\n        bottom:17vh;\n    }\n\n}\n\n\n@media(max-width:650px){\n\n    #tx-code-world{\n        height:125vh;\n    }\n\n    .txc-stage{\n        min-height:740px;\n    }\n\n\n    .txc-kicker{\n        top:85px;\n\n        font-size:7px;\n\n        letter-spacing:.22em;\n    }\n\n    .txc-copy{\n        width:92vw;\n\n        bottom:18vh;\n    }\n\n    .txc-heading-one{\n        font-size:34px;\n\n        letter-spacing:.11em;\n    }\n\n    .txc-heading-two{\n        font-size:32px;\n\n        letter-spacing:.035em;\n    }\n\n    .txc-tagline{\n        font-size:8px;\n\n        line-height:1.6;\n\n        letter-spacing:.20em;\n    }\n\n}\n\n\n@media(prefers-reduced-motion:reduce){\n\n    #tx-code-world *,\n    #tx-code-world *:before,\n    #tx-code-world *:after{\n        animation:none!important;\n        transition:none!important;\n    }\n\n}\n\n<\/style>\n\n\n<div class=\"txc-stage\">\n\n\n    <!-- INTERACTIVE CODE ART -->\n\n    <canvas\n        id=\"tx-code-canvas\"\n        aria-hidden=\"true\"\n    ><\/canvas>\n\n\n    <div class=\"txc-cursor\"><\/div>\n\n    <div class=\"txc-vignette\"><\/div>\n\n\n    <!-- KICKER -->\n\n    <div class=\"txc-kicker\">\n\n        Turning data into opportunity\n\n    <\/div>\n\n\n    <!-- SIDE COPY -->\n\n    <div class=\"txc-side txc-side-tl\">\n\n        PEOPLE<br>\n        SITES<br>\n        COMPLIANCE<br>\n        PROGRESS\n\n    <\/div>\n\n\n    <div class=\"txc-side txc-side-tr\">\n\n        SAME<br>\n        INDUSTRY<br>\n        HIGHER<br>\n        STANDARDS\n\n    <\/div>\n\n\n    <div class=\"txc-side txc-side-bl\">\n\n        TRADESX<br>\n        AUSTRALIA\n\n    <\/div>\n\n\n    <div class=\"txc-side txc-side-br\">\n\n        REAL<br>\n        WORK<br>\n        REAL<br>\n        IMPACT\n\n    <\/div>\n\n\n    <!-- MAIN COPY -->\n\n    <div class=\"txc-copy\">\n\n\n        <span class=\"txc-heading-one\">\n\n            TRADIES.\n\n        <\/span>\n\n\n        <span class=\"txc-heading-two\">\n\n            YOU CAN'T GET RID OF!\n\n        <\/span>\n\n\n        <div class=\"txc-tagline\">\n\n            Same industry. Higher standards.\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <!-- SCROLL -->\n\n    <div class=\"txc-scroll\">\n\n        <span class=\"txc-mouse\"><\/span>\n\n        Scroll<br>\n        to explore\n\n    <\/div>\n\n\n<\/div>\n\n\n<script>\n\n(() => {\n\n    const section =\n        document.querySelector(\n            '#tx-code-world'\n        );\n\n\n    if(\n        !section\n        ||\n        section.dataset.txNegativeX\n        ===\n        '1'\n    ){\n        return;\n    }\n\n\n    section.dataset.txNegativeX =\n        '1';\n\n\n    const stage =\n        section.querySelector(\n            '.txc-stage'\n        );\n\n\n    const canvas =\n        section.querySelector(\n            '#tx-code-canvas'\n        );\n\n\n    const cursor =\n        section.querySelector(\n            '.txc-cursor'\n        );\n\n\n    if(\n        !stage\n        ||\n        !canvas\n    ){\n        return;\n    }\n\n\n    const ctx =\n        canvas.getContext(\n            '2d'\n        );\n\n\n    \/* ============================================================\n       SETTINGS\n       ============================================================ *\/\n\n    const ORANGE = {\n        r:255,\n        g:90,\n        b:0\n    };\n\n\n    const mouse = {\n        x:-1000,\n        y:-1000,\n        active:false\n    };\n\n\n    let width = 0;\n\n    let height = 0;\n\n    let points = [];\n\n    let scrollExit = 0;\n\n\n    let xPolygons = [];\n\n    let xBox = null;\n\n\n    \/*\n       Real TradesX X artwork supplied for this section.\n       The particle field uses the exact silhouette geometry below,\n       and the real PNG is also used as the final anti-aliased mask.\n    *\/\n\n    const X_ART_URL =\n        'https:\/\/tradesx.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/tx-x-symbol-scaled.png';\n\n\n    const xArtImage =\n        new Image();\n\n\n    xArtImage.decoding =\n        'async';\n\n\n    xArtImage.src =\n        X_ART_URL;\n\n\n    const chars = [\n        '0',\n        '1',\n        '+',\n        '@',\n        '#',\n        '=',\n        ':',\n        '\u00b7'\n    ];\n\n\n    \/* ============================================================\n       GENERIC LINE DISTANCE\n       ============================================================ *\/\n\n    function distanceToLine(\n        px,\n        py,\n        x1,\n        y1,\n        x2,\n        y2\n    ){\n\n        const A =\n            px - x1;\n\n\n        const B =\n            py - y1;\n\n\n        const C =\n            x2 - x1;\n\n\n        const D =\n            y2 - y1;\n\n\n        const dot =\n            A * C\n            +\n            B * D;\n\n\n        const lenSq =\n            C * C\n            +\n            D * D;\n\n\n        let param =\n            -1;\n\n\n        if(\n            lenSq\n            !==\n            0\n        ){\n\n            param =\n                dot\n                \/\n                lenSq;\n\n        }\n\n\n        let xx;\n        let yy;\n\n\n        if(\n            param\n            <\n            0\n        ){\n\n            xx = x1;\n\n            yy = y1;\n\n        }\n        else if(\n            param\n            >\n            1\n        ){\n\n            xx = x2;\n\n            yy = y2;\n\n        }\n        else{\n\n            xx =\n                x1\n                +\n                param\n                *\n                C;\n\n\n            yy =\n                y1\n                +\n                param\n                *\n                D;\n\n        }\n\n\n        const dx =\n            px - xx;\n\n\n        const dy =\n            py - yy;\n\n\n        return Math.sqrt(\n            dx * dx\n            +\n            dy * dy\n        );\n\n    }\n\n\n    function nearLine(\n        x,\n        y,\n        line,\n        thickness\n    ){\n\n        return (\n            distanceToLine(\n                x,\n                y,\n                line[0],\n                line[1],\n                line[2],\n                line[3]\n            )\n            <\n            thickness\n        );\n\n    }\n\n    \/* ============================================================\n       TRADESX NEGATIVE SPACE X \u2014 EXACT BRAND SILHOUETTE\n       ============================================================ *\/\n\n    \/*\n       These two polygon components match the supplied transparent\n       TradesX X symbol rather than using a generic symmetrical X.\n       Coordinates are normalized to the source PNG bounds.\n    *\/\n\n    const X_SHAPES_NORMALISED = [\n\n        [\n            [0.01758,0.98202],\n            [0.25635,0.98202],\n            [0.99365,0.00866],\n            [0.73975,0.00732],\n            [0.54346,0.27696],\n            [0.45068,0.00799],\n            [0.19629,0.00799],\n            [0.36768,0.50466]\n        ],\n\n        [\n            [0.64551,0.50666],\n            [0.48389,0.72703],\n            [0.56348,0.97870],\n            [0.81445,0.98202]\n        ]\n\n    ];\n\n\n    function rebuildX(){\n\n        const sourceAspect =\n            2048 \/ 1502;\n\n\n        const xWidth =\n            Math.min(\n                width * .34,\n                width >= 3200\n                    ? 980\n                    : width >= 2200\n                        ? 800\n                        : 620\n            );\n\n\n        const xHeight =\n            xWidth\n            \/\n            sourceAspect;\n\n\n        const cx =\n            width * .50;\n\n\n        const cy =\n            height * .355;\n\n\n        const left =\n            cx\n            -\n            xWidth\n            \/\n            2;\n\n\n        const top =\n            cy\n            -\n            xHeight\n            \/\n            2;\n\n\n        xPolygons =\n            X_SHAPES_NORMALISED.map(\n                polygon =>\n                    polygon.map(\n                        point => [\n                            left + point[0] * xWidth,\n                            top + point[1] * xHeight\n                        ]\n                    )\n            );\n\n\n        xBox = {\n            left:left,\n            right:left + xWidth,\n            top:top,\n            bottom:top + xHeight,\n            width:xWidth,\n            height:xHeight\n        };\n\n    }\n\n\n    function pointInPolygon(\n        x,\n        y,\n        polygon\n    ){\n\n        let inside =\n            false;\n\n\n        for(\n            let i = 0,\n            j = polygon.length - 1;\n            i < polygon.length;\n            j = i++\n        ){\n\n            const xi =\n                polygon[i][0];\n\n\n            const yi =\n                polygon[i][1];\n\n\n            const xj =\n                polygon[j][0];\n\n\n            const yj =\n                polygon[j][1];\n\n\n            const intersect =\n\n                (\n                    yi > y\n                )\n                !==\n                (\n                    yj > y\n                )\n\n                &&\n\n                x\n                <\n                (\n                    xj\n                    -\n                    xi\n                )\n                *\n                (\n                    y\n                    -\n                    yi\n                )\n                \/\n                (\n                    yj\n                    -\n                    yi\n                    +\n                    .000001\n                )\n                +\n                xi;\n\n\n            if(\n                intersect\n            ){\n\n                inside =\n                    !inside;\n\n            }\n\n        }\n\n\n        return inside;\n\n    }\n\n\n    function xMaskInfo(\n        x,\n        y\n    ){\n\n        const edgeWidth =\n            Math.max(\n                10,\n                Math.min(\n                    18,\n                    width * .008\n                )\n            );\n\n\n        if(\n            !xBox\n            ||\n            x\n            <\n            xBox.left\n            -\n            edgeWidth\n            ||\n            x\n            >\n            xBox.right\n            +\n            edgeWidth\n            ||\n            y\n            <\n            xBox.top\n            -\n            edgeWidth\n            ||\n            y\n            >\n            xBox.bottom\n            +\n            edgeWidth\n        ){\n\n            return {\n                inside:false,\n                edge:false\n            };\n\n        }\n\n\n        let inside =\n            false;\n\n\n        let nearest =\n            Infinity;\n\n\n        xPolygons.forEach(\n            polygon => {\n\n                if(\n                    pointInPolygon(\n                        x,\n                        y,\n                        polygon\n                    )\n                ){\n\n                    inside =\n                        true;\n\n                }\n\n\n                for(\n                    let i = 0;\n                    i < polygon.length;\n                    i++\n                ){\n\n                    const current =\n                        polygon[i];\n\n\n                    const next =\n                        polygon[\n                            (\n                                i\n                                +\n                                1\n                            )\n                            %\n                            polygon.length\n                        ];\n\n\n                    const distance =\n                        distanceToLine(\n                            x,\n                            y,\n                            current[0],\n                            current[1],\n                            next[0],\n                            next[1]\n                        );\n\n\n                    if(\n                        distance\n                        <\n                        nearest\n                    ){\n\n                        nearest =\n                            distance;\n\n                    }\n\n                }\n\n            }\n        );\n\n\n        return {\n\n            inside:inside,\n\n            edge:\n                !inside\n                &&\n                nearest\n                <\n                edgeWidth\n\n        };\n\n    }\n\n\n    \/* ============================================================\n       ABSOLUTE BLACK X MASK\n       ============================================================ *\/\n\n    function drawNegativeX(){\n\n        if(\n            !xBox\n        ){\n            return;\n        }\n\n\n        ctx.save();\n\n\n        \/*\n           Punch the exact supplied X silhouette out of the orange\n           code canvas. Because the section beneath the canvas is\n           pure black, the transparent cut-out becomes true negative\n           space rather than an orange graphic laid on top.\n        *\/\n\n        ctx.shadowBlur =\n            0;\n\n\n        ctx.globalAlpha =\n            1;\n\n\n        ctx.globalCompositeOperation =\n            'destination-out';\n\n\n        if(\n            xArtImage.complete\n            &&\n            xArtImage.naturalWidth\n        ){\n\n            ctx.drawImage(\n                xArtImage,\n                xBox.left,\n                xBox.top,\n                xBox.width,\n                xBox.height\n            );\n\n        }\n        else{\n\n            \/* exact geometry fallback while the PNG is loading *\/\n\n            xPolygons.forEach(\n                polygon => {\n\n                    if(\n                        !polygon.length\n                    ){\n                        return;\n                    }\n\n\n                    ctx.beginPath();\n\n\n                    polygon.forEach(\n                        (\n                            point,\n                            index\n                        ) => {\n\n                            if(\n                                index\n                                ===\n                                0\n                            ){\n\n                                ctx.moveTo(\n                                    point[0],\n                                    point[1]\n                                );\n\n                            }\n                            else{\n\n                                ctx.lineTo(\n                                    point[0],\n                                    point[1]\n                                );\n\n                            }\n\n                        }\n                    );\n\n\n                    ctx.closePath();\n\n                    ctx.fill();\n\n                }\n            );\n\n        }\n\n\n        ctx.restore();\n\n    }\n\n\n    \/* ============================================================\n       BUILD DIGITAL ARCHITECTURE\n       ============================================================ *\/\n\n    function createGeometry(){\n\n        const lines = [];\n\n\n        \/* LEFT BUILDING *\/\n\n        const lx1 = .035;\n        const lx2 = .34;\n\n        const lyTop = .25;\n        const lyBottom = .68;\n\n\n        [\n            .055,\n            .095,\n            .135,\n            .175,\n            .215,\n            .255,\n            .295,\n            .335\n        ]\n        .forEach(\n            x => {\n\n                lines.push(\n                    [\n                        x,\n                        lyTop,\n                        x,\n                        lyBottom\n                    ]\n                );\n\n            }\n        );\n\n\n        [\n            .31,\n            .37,\n            .43,\n            .49,\n            .55,\n            .61,\n            .67\n        ]\n        .forEach(\n            y => {\n\n                lines.push(\n                    [\n                        lx1,\n                        y,\n                        lx2,\n                        y\n                    ]\n                );\n\n            }\n        );\n\n\n        lines.push(\n\n            [\n                .055,\n                .25,\n                .055,\n                .20\n            ],\n\n            [\n                .055,\n                .20,\n                .17,\n                .20\n            ],\n\n            [\n                .17,\n                .20,\n                .17,\n                .17\n            ],\n\n            [\n                .17,\n                .17,\n                .24,\n                .17\n            ]\n\n        );\n\n\n        for(\n            let i = 0;\n            i < 6;\n            i++\n        ){\n\n            const y1 =\n                .31\n                +\n                i\n                *\n                .06;\n\n\n            lines.push(\n\n                [\n                    .055,\n                    y1,\n                    .095,\n                    y1 + .06\n                ],\n\n                [\n                    .135,\n                    y1 + .06,\n                    .175,\n                    y1\n                ],\n\n                [\n                    .215,\n                    y1,\n                    .255,\n                    y1 + .06\n                ]\n\n            );\n\n        }\n\n\n        \/* LEFT CRANE *\/\n\n        lines.push(\n\n            [\n                .205,\n                .12,\n                .205,\n                .49\n            ],\n\n            [\n                .217,\n                .12,\n                .217,\n                .49\n            ],\n\n            [\n                .095,\n                .14,\n                .315,\n                .14\n            ],\n\n            [\n                .11,\n                .155,\n                .31,\n                .155\n            ],\n\n            [\n                .211,\n                .105,\n                .11,\n                .14\n            ],\n\n            [\n                .211,\n                .105,\n                .31,\n                .14\n            ],\n\n            [\n                .285,\n                .155,\n                .285,\n                .25\n            ]\n\n        );\n\n\n        \/* RIGHT BUILDING *\/\n\n        const rx1 = .68;\n        const rx2 = .965;\n\n        const ryTop = .28;\n        const ryBottom = .68;\n\n\n        [\n            .69,\n            .73,\n            .77,\n            .81,\n            .85,\n            .89,\n            .93,\n            .965\n        ]\n        .forEach(\n            x => {\n\n                lines.push(\n                    [\n                        x,\n                        ryTop,\n                        x,\n                        ryBottom\n                    ]\n                );\n\n            }\n        );\n\n\n        [\n            .34,\n            .40,\n            .46,\n            .52,\n            .58,\n            .64,\n            .68\n        ]\n        .forEach(\n            y => {\n\n                lines.push(\n                    [\n                        rx1,\n                        y,\n                        rx2,\n                        y\n                    ]\n                );\n\n            }\n        );\n\n\n        lines.push(\n\n            [\n                .68,\n                .28,\n                .76,\n                .28\n            ],\n\n            [\n                .76,\n                .28,\n                .76,\n                .24\n            ],\n\n            [\n                .76,\n                .24,\n                .88,\n                .24\n            ],\n\n            [\n                .88,\n                .24,\n                .88,\n                .30\n            ],\n\n            [\n                .88,\n                .30,\n                .965,\n                .30\n            ]\n\n        );\n\n\n        for(\n            let i = 0;\n            i < 5;\n            i++\n        ){\n\n            const y =\n                .34\n                +\n                i\n                *\n                .06;\n\n\n            lines.push(\n\n                [\n                    .69,\n                    y,\n                    .73,\n                    y + .06\n                ],\n\n                [\n                    .81,\n                    y + .06,\n                    .85,\n                    y\n                ],\n\n                [\n                    .89,\n                    y,\n                    .93,\n                    y + .06\n                ]\n\n            );\n\n        }\n\n\n        \/* RIGHT CRANE *\/\n\n        lines.push(\n\n            [\n                .82,\n                .13,\n                .82,\n                .45\n            ],\n\n            [\n                .832,\n                .13,\n                .832,\n                .45\n            ],\n\n            [\n                .735,\n                .15,\n                .935,\n                .15\n            ],\n\n            [\n                .745,\n                .165,\n                .93,\n                .165\n            ],\n\n            [\n                .826,\n                .112,\n                .745,\n                .15\n            ],\n\n            [\n                .826,\n                .112,\n                .93,\n                .15\n            ],\n\n            [\n                .91,\n                .165,\n                .91,\n                .26\n            ]\n\n        );\n\n\n        return lines;\n\n    }\n\n\n    const geometry =\n        createGeometry();\n\n\n    \/* ============================================================\n       BUILD POINTS\n       ============================================================ *\/\n\n    function rebuild(){\n\n        const rect =\n            stage.getBoundingClientRect();\n\n\n        width =\n            rect.width;\n\n\n        height =\n            rect.height;\n\n\n        const dpr =\n            Math.min(\n                window.devicePixelRatio\n                ||\n                1,\n                2\n            );\n\n\n        canvas.width =\n            width\n            *\n            dpr;\n\n\n        canvas.height =\n            height\n            *\n            dpr;\n\n\n        canvas.style.width =\n            width\n            +\n            'px';\n\n\n        canvas.style.height =\n            height\n            +\n            'px';\n\n\n        ctx.setTransform(\n            dpr,\n            0,\n            0,\n            dpr,\n            0,\n            0\n        );\n\n\n        points = [];\n\n\n        rebuildX();\n\n\n        let spacing =\n            width >= 3200\n            ?\n            13\n            :\n            width >= 2200\n            ?\n            11\n            :\n            width > 1500\n            ?\n            10\n            :\n            width > 900\n            ?\n            9\n            :\n            8;\n\n\n        if(\n            width\n            <\n            650\n        ){\n\n            spacing =\n                7;\n\n        }\n\n\n        for(\n            let y = spacing;\n            y < height;\n            y += spacing\n        ){\n\n            for(\n                let x = spacing;\n                x < width;\n                x += spacing\n            ){\n\n                const nx =\n                    x\n                    \/\n                    width;\n\n\n                const ny =\n                    y\n                    \/\n                    height;\n\n\n                \/* --------------------------------------------\n                   NEGATIVE SPACE X\n                   -------------------------------------------- *\/\n\n                const xInfo =\n                    xMaskInfo(\n                        x,\n                        y\n                    );\n\n\n                \/*\n                   Never create any code in the X itself.\n                *\/\n\n                if(\n                    xInfo.inside\n                ){\n\n                    continue;\n\n                }\n\n\n                \/* --------------------------------------------\n                   CONSTRUCTION STRUCTURES\n                   -------------------------------------------- *\/\n\n                let architectural =\n                    false;\n\n\n                for(\n                    let i = 0;\n                    i < geometry.length;\n                    i++\n                ){\n\n                    if(\n                        nearLine(\n                            nx,\n                            ny,\n                            geometry[i],\n                            .006\n                        )\n                    ){\n\n                        architectural =\n                            true;\n\n                        break;\n\n                    }\n\n                }\n\n\n                \/* --------------------------------------------\n                   CENTRAL DIGITAL FIELD\n                   -------------------------------------------- *\/\n\n                const fieldX =\n                    (\n                        nx\n                        -\n                        .5\n                    )\n                    \/\n                    .225;\n\n\n                const fieldY =\n                    (\n                        ny\n                        -\n                        .355\n                    )\n                    \/\n                    .29;\n\n\n                const fieldRadius =\n                    Math.sqrt(\n                        fieldX * fieldX\n                        +\n                        fieldY * fieldY\n                    );\n\n\n                const insideField =\n                    fieldRadius\n                    <\n                    1;\n\n\n                \/*\n                   density highest around centre,\n                   lower as it dissolves outward\n                *\/\n\n                let fieldProbability =\n                    0;\n\n\n                if(\n                    insideField\n                ){\n\n                    fieldProbability =\n                        Math.max(\n                            .12,\n                            .54\n                            -\n                            fieldRadius\n                            *\n                            .35\n                        );\n\n                }\n\n\n                \/*\n                   Force dense orange data around\n                   boundary of X.\n                *\/\n\n                if(\n                    xInfo.edge\n                ){\n\n                    fieldProbability =\n                        .96;\n\n                }\n\n\n                const centralField =\n                    insideField\n                    &&\n                    Math.random()\n                    <\n                    fieldProbability;\n\n\n                \/* --------------------------------------------\n                   DATA HAZE AROUND BUILDINGS\n                   -------------------------------------------- *\/\n\n                const hazeLeft =\n                    nx\n                    <\n                    .37\n                    &&\n                    ny\n                    >\n                    .16\n                    &&\n                    ny\n                    <\n                    .74;\n\n\n                const hazeRight =\n                    nx\n                    >\n                    .63\n                    &&\n                    ny\n                    >\n                    .16\n                    &&\n                    ny\n                    <\n                    .74;\n\n\n                const haze =\n                    (\n                        hazeLeft\n                        ||\n                        hazeRight\n                    )\n                    &&\n                    Math.random()\n                    <\n                    .075;\n\n\n                \/* scattered data *\/\n\n                const loose =\n                    Math.random()\n                    <\n                    .0045;\n\n\n                if(\n                    architectural\n                    ||\n                    centralField\n                    ||\n                    xInfo.edge\n                    ||\n                    haze\n                    ||\n                    loose\n                ){\n\n                    points.push(\n                        {\n\n                            x:x,\n\n                            y:y,\n\n                            ox:x,\n\n                            oy:y,\n\n                            char:\n                                chars[\n                                    Math.floor(\n                                        Math.random()\n                                        *\n                                        chars.length\n                                    )\n                                ],\n\n                            structural:\n                                architectural,\n\n                            central:\n                                centralField,\n\n                            xEdge:\n                                xInfo.edge,\n\n                            haze:\n                                haze,\n\n                            seed:\n                                Math.random()\n                                *\n                                Math.PI\n                                *\n                                2,\n\n                            drift:\n                                .2\n                                +\n                                Math.random()\n                                *\n                                1.2\n\n                        }\n                    );\n\n                }\n\n            }\n\n        }\n\n    }\n\n\n    \/* ============================================================\n       DRAW\n       ============================================================ *\/\n\n    function draw(\n        time\n    ){\n\n        ctx.clearRect(\n            0,\n            0,\n            width,\n            height\n        );\n\n\n        points.forEach(\n            point => {\n\n\n                let x =\n                    point.ox;\n\n\n                let y =\n                    point.oy;\n\n\n                \/* --------------------------------------------\n                   IDLE MOTION\n                   -------------------------------------------- *\/\n\n                const idleX =\n                    Math.sin(\n                        time\n                        *\n                        .00045\n                        +\n                        point.seed\n                    )\n                    *\n                    point.drift;\n\n\n                const idleY =\n                    Math.cos(\n                        time\n                        *\n                        .00035\n                        +\n                        point.seed\n                    )\n                    *\n                    point.drift;\n\n\n                x += idleX;\n\n                y += idleY;\n\n\n                \/* --------------------------------------------\n                   ORIGINAL HOVER INTERACTION\n                   -------------------------------------------- *\/\n\n                const dx =\n                    x\n                    -\n                    mouse.x;\n\n\n                const dy =\n                    y\n                    -\n                    mouse.y;\n\n\n                const distance =\n                    Math.sqrt(\n                        dx * dx\n                        +\n                        dy * dy\n                    );\n\n\n                \/*\n                   Keeping the same hover circumference\n                   as the version you liked.\n                *\/\n\n                const hoverRadius =\n                    145;\n\n\n                let influence =\n                    0;\n\n\n                if(\n                    mouse.active\n                    &&\n                    distance\n                    <\n                    hoverRadius\n                ){\n\n                    influence =\n                        1\n                        -\n                        distance\n                        \/\n                        hoverRadius;\n\n\n                    if(\n                        distance\n                        >\n                        0\n                    ){\n\n                        const push =\n                            influence\n                            *\n                            influence\n                            *\n                            18;\n\n\n                        x +=\n                            (\n                                dx\n                                \/\n                                distance\n                            )\n                            *\n                            push;\n\n\n                        y +=\n                            (\n                                dy\n                                \/\n                                distance\n                            )\n                            *\n                            push;\n\n                    }\n\n                }\n\n\n                \/* --------------------------------------------\n                   SCROLL EXIT DISPERSION\n                   -------------------------------------------- *\/\n\n                if(\n                    scrollExit\n                    >\n                    0\n                ){\n\n                    const cx =\n                        width\n                        *\n                        .5;\n\n\n                    const cy =\n                        height\n                        *\n                        .48;\n\n\n                    const ex =\n                        point.ox\n                        -\n                        cx;\n\n\n                    const ey =\n                        point.oy\n                        -\n                        cy;\n\n\n                    const length =\n                        Math.max(\n                            1,\n                            Math.sqrt(\n                                ex * ex\n                                +\n                                ey * ey\n                            )\n                        );\n\n\n                    const spread =\n                        scrollExit\n                        *\n                        180\n                        *\n                        (\n                            .2\n                            +\n                            point.drift\n                        );\n\n\n                    x +=\n                        (\n                            ex\n                            \/\n                            length\n                        )\n                        *\n                        spread;\n\n\n                    y +=\n                        (\n                            ey\n                            \/\n                            length\n                        )\n                        *\n                        spread;\n\n                }\n\n\n                \/* --------------------------------------------\n                   OPACITY\n                   -------------------------------------------- *\/\n\n                let alpha;\n\n\n                if(\n                    point.xEdge\n                ){\n\n                    alpha =\n                        .90;\n\n                }\n                else if(\n                    point.central\n                ){\n\n                    alpha =\n                        .52;\n\n                }\n                else if(\n                    point.structural\n                ){\n\n                    alpha =\n                        .54;\n\n                }\n                else if(\n                    point.haze\n                ){\n\n                    alpha =\n                        .19;\n\n                }\n                else{\n\n                    alpha =\n                        .25;\n\n                }\n\n\n                alpha +=\n                    influence\n                    *\n                    .45;\n\n\n                alpha *=\n                    1\n                    -\n                    scrollExit\n                    *\n                    .86;\n\n\n                \/* --------------------------------------------\n                   FONT SIZE\n                   -------------------------------------------- *\/\n\n                let fontSize;\n\n\n                if(\n                    point.xEdge\n                ){\n\n                    fontSize =\n                        11;\n\n                }\n                else if(\n                    point.central\n                    ||\n                    point.structural\n                ){\n\n                    fontSize =\n                        10;\n\n                }\n                else{\n\n                    fontSize =\n                        9;\n\n                }\n\n\n                fontSize +=\n                    influence\n                    *\n                    4;\n\n\n                let character =\n                    point.char;\n\n\n                if(\n                    influence\n                    >\n                    .55\n                ){\n\n                    const interactiveChars = [\n                        '@',\n                        '#',\n                        '+',\n                        '1',\n                        '0'\n                    ];\n\n\n                    character =\n                        interactiveChars[\n                            Math.floor(\n                                (\n                                    point.seed\n                                    +\n                                    time\n                                    *\n                                    .002\n                                )\n                                %\n                                interactiveChars.length\n                            )\n                        ];\n\n                }\n\n\n                ctx.font =\n                    `${fontSize}px \"Courier New\", monospace`;\n\n\n                ctx.textAlign =\n                    'center';\n\n\n                ctx.textBaseline =\n                    'middle';\n\n\n                \/* --------------------------------------------\n                   GLOW\n                   -------------------------------------------- *\/\n\n                if(\n                    influence\n                    >\n                    .05\n                ){\n\n                    ctx.shadowColor =\n                        `rgba(\n                            255,\n                            90,\n                            0,\n                            ${\n                                .2\n                                +\n                                influence\n                                *\n                                .6\n                            }\n                        )`;\n\n\n                    ctx.shadowBlur =\n                        4\n                        +\n                        influence\n                        *\n                        15;\n\n                }\n                else if(\n                    point.xEdge\n                ){\n\n                    ctx.shadowColor =\n                        'rgba(255,90,0,.32)';\n\n\n                    ctx.shadowBlur =\n                        7;\n\n                }\n                else{\n\n                    ctx.shadowBlur =\n                        0;\n\n                }\n\n\n                ctx.fillStyle =\n                    `rgba(\n                        ${ORANGE.r},\n                        ${ORANGE.g},\n                        ${ORANGE.b},\n                        ${alpha}\n                    )`;\n\n\n                ctx.fillText(\n                    character,\n                    x,\n                    y\n                );\n\n            }\n        );\n\n\n        \/*\n           CRITICAL:\n\n           draw pure black TradesX X over all\n           moving particles after every frame.\n\n           Nothing can ever visually enter it.\n        *\/\n\n        drawNegativeX();\n\n\n        ctx.shadowBlur =\n            0;\n\n\n        requestAnimationFrame(\n            draw\n        );\n\n    }\n\n\n    \/* ============================================================\n       MOUSE\n       ============================================================ *\/\n\n    stage.addEventListener(\n        'mousemove',\n        event => {\n\n\n            const rect =\n                stage.getBoundingClientRect();\n\n\n            mouse.x =\n                event.clientX\n                -\n                rect.left;\n\n\n            mouse.y =\n                event.clientY\n                -\n                rect.top;\n\n\n            mouse.active =\n                true;\n\n\n            if(\n                cursor\n            ){\n\n                cursor.style.left =\n                    mouse.x\n                    +\n                    'px';\n\n\n                cursor.style.top =\n                    mouse.y\n                    +\n                    'px';\n\n\n                cursor.style.opacity =\n                    '1';\n\n            }\n\n        }\n    );\n\n\n    stage.addEventListener(\n        'mouseleave',\n        () => {\n\n\n            mouse.active =\n                false;\n\n\n            if(\n                cursor\n            ){\n\n                cursor.style.opacity =\n                    '0';\n\n            }\n\n        }\n    );\n\n\n    \/* ============================================================\n       SCROLL DISPERSION\n       ============================================================ *\/\n\n    function updateScroll(){\n\n        const rect =\n            section.getBoundingClientRect();\n\n\n        const travel =\n            section.offsetHeight\n            -\n            window.innerHeight;\n\n\n        if(\n            travel\n            <=\n            0\n        ){\n\n            scrollExit =\n                0;\n\n            return;\n\n        }\n\n\n        const progress =\n            Math.min(\n                1,\n                Math.max(\n                    0,\n                    -rect.top\n                    \/\n                    travel\n                )\n            );\n\n\n        scrollExit =\n            Math.max(\n                0,\n                (\n                    progress\n                    -\n                    .48\n                )\n                \/\n                .52\n            );\n\n    }\n\n\n    window.addEventListener(\n        'scroll',\n        updateScroll,\n        {\n            passive:true\n        }\n    );\n\n\n    \/* ============================================================\n       RESIZE\n       ============================================================ *\/\n\n    let resizeTimer;\n\n\n    window.addEventListener(\n        'resize',\n        () => {\n\n\n            clearTimeout(\n                resizeTimer\n            );\n\n\n            resizeTimer =\n                setTimeout(\n                    rebuild,\n                    120\n                );\n\n        }\n    );\n\n\n    \/* ============================================================\n       START\n       ============================================================ *\/\n\n    rebuild();\n\n    updateScroll();\n\n    requestAnimationFrame(\n        draw\n    );\n\n\n})();\n\n<\/script>\n\n\n<\/section>\n<div class=\"tx-combo-wipe\" aria-hidden=\"true\"><\/div>\n\n<\/div>\n\n<script>\n(() => {\n    const root = document.querySelector('#tx-scroll-combo');\n    if(!root || root.dataset.txComboInit === '1') return;\n    root.dataset.txComboInit = '1';\n\n    const portal = root.querySelector('#tx-portal-hero');\n    const code = root.querySelector('#tx-code-world');\n    const wipe = root.querySelector('.tx-combo-wipe');\n    const kicker = code ? code.querySelector('.txc-kicker') : null;\n    const sides = code ? [...code.querySelectorAll('.txc-side')] : [];\n    const copy = code ? code.querySelector('.txc-copy') : null;\n    const scrollCue = code ? code.querySelector('.txc-scroll') : null;\n\n    if(!portal || !code) return;\n\n    let ticking = false;\n    let progress = 0;\n\n    const clamp = (v,min=0,max=1) => Math.min(max,Math.max(min,v));\n    const smooth = (a,b,v) => {\n        const t = clamp((v-a)\/(b-a));\n        return t*t*(3-2*t);\n    };\n\n    function resetMobile(){\n        portal.style.opacity = '';\n        portal.style.transform = '';\n        portal.style.filter = '';\n        code.style.webkitClipPath = '';\n        code.style.clipPath = '';\n        code.style.pointerEvents = '';\n        if(wipe){ wipe.style.top=''; wipe.style.opacity=''; }\n        if(kicker){ kicker.style.opacity=''; kicker.style.transform=''; }\n        sides.forEach(el => { el.style.opacity=''; el.style.transform=''; });\n        if(copy){ copy.style.opacity=''; copy.style.transform=''; }\n        if(scrollCue){ scrollCue.style.opacity=''; scrollCue.style.transform=''; }\n    }\n\n    function update(){\n        ticking = false;\n\n        if(window.innerWidth <= 1100){\n            resetMobile();\n            return;\n        }\n\n        const rect = root.getBoundingClientRect();\n        const viewportHeight =\n            window.visualViewport?.height ||\n            window.innerHeight;\n        const travel = Math.max(1, root.offsetHeight - viewportHeight);\n        progress = clamp(-rect.top \/ travel);\n\n        \/* 1. Portal remains hero first, then subtly recedes. *\/\n        const portalOut = smooth(.22,.60,progress);\n        portal.style.opacity = String(1 - portalOut * .93);\n        portal.style.transform = `translateY(${-54 * portalOut}px) scale(${1 - .035 * portalOut})`;\n        portal.style.filter = `brightness(${1 - .18 * portalOut})`;\n\n        \/* 2. Code world wipes upward from the bottom. *\/\n        const reveal = smooth(.18,.58,progress);\n        const clipTop = (1 - reveal) * 100;\n        const clip = `inset(${clipTop}% 0 0 0)`;\n        code.style.webkitClipPath = clip;\n        code.style.clipPath = clip;\n        code.style.pointerEvents = reveal > .72 ? 'auto' : 'none';\n\n        \/* Orange leading edge follows the reveal. *\/\n        if(wipe){\n            wipe.style.top = `${clipTop}%`;\n            const active = reveal > .015 && reveal < .985;\n            wipe.style.opacity = active ? String(.30 + Math.sin(reveal * Math.PI) * .65) : '0';\n        }\n\n        \/* 3. Code section overlays rise into their final positions. *\/\n        const kickerIn = smooth(.42,.61,progress);\n        if(kicker){\n            kicker.style.opacity = String(kickerIn);\n            kicker.style.transform = `translateX(-50%) translateY(${(1-kickerIn)*70}px)`;\n        }\n\n        const sidesIn = smooth(.46,.68,progress);\n        sides.forEach((el,index) => {\n            const delay = index * .018;\n            const local = smooth(.46 + delay,.68 + delay,progress);\n            el.style.opacity = String(local);\n            el.style.transform = `translateY(${(1-local)*72}px)`;\n        });\n\n        const copyIn = smooth(.54,.79,progress);\n        if(copy){\n            copy.style.opacity = String(copyIn);\n            copy.style.transform = `translateX(-50%) translateY(${(1-copyIn)*160}px) scale(${.965 + .035*copyIn})`;\n        }\n\n        const cueIn = smooth(.72,.90,progress);\n        if(scrollCue){\n            scrollCue.style.opacity = String(cueIn);\n            scrollCue.style.transform = `translateX(-50%) translateY(${(1-cueIn)*42}px)`;\n        }\n    }\n\n    function requestUpdate(){\n        if(ticking) return;\n        ticking = true;\n        requestAnimationFrame(update);\n    }\n\n    window.addEventListener('scroll', requestUpdate, {passive:true});\n    window.addEventListener('resize', requestUpdate);\n    requestUpdate();\n})();\n<\/script>\n<\/section>\n\n<!-- =========================================================\n     02 \u2014 THREE PORTALS \/ ONE PLATFORM\n     ========================================================= -->\n<section id=\"tx-three-portals-v2\">\n\n<style>\n\n\/* =========================================================\n   TRADESX \u2014 THREE PORTALS \/ ONE PLATFORM V2\n   PERFECTLY ALIGNED\n   ========================================================= *\/\n\n#tx-three-portals-v2{\n    --tx-orange:#ff5a00;\n    --tx-orange-hot:#ff6800;\n    --tx-black:#050708;\n    --tx-panel:#0b1013;\n    --tx-line:rgba(255,255,255,.11);\n    --tx-text:#f5f5f2;\n    --tx-muted:#90979b;\n    --tx-green:#2fcf7d;\n\n    position:relative;\n    left:50%;\n\n    width:100vw;\n    max-width:none!important;\n\n    margin-left:-50vw;\n\n    min-height:100svh;\n\n    overflow:hidden;\n\n    color:var(--tx-text);\n\n    background:#050708;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n}\n\n\n#tx-three-portals-v2 *,\n#tx-three-portals-v2 *::before,\n#tx-three-portals-v2 *::after{\n    box-sizing:border-box;\n}\n\n\n#tx-three-portals-v2 a{\n    color:inherit;\n    text-decoration:none;\n}\n\n\n\/* =========================================================\n   NEW BACKGROUND\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-bg{\n    position:absolute;\n\n    inset:-4%;\n\n    z-index:0;\n\n    background-image:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Golden-Construction-Site-at-Sunset.png\");\n\n    background-size:cover;\n\n    background-position:\n        center\n        48%;\n\n    transform:scale(1.07);\n\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.08)\n        brightness(.42);\n}\n\n\n\/* =========================================================\n   CINEMATIC GRADE\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-grade{\n    position:absolute;\n\n    inset:0;\n\n    z-index:1;\n\n    pointer-events:none;\n\n    background:\n\n        linear-gradient(\n            180deg,\n            rgba(4,7,9,.38) 0%,\n            rgba(4,7,9,.22) 24%,\n            rgba(4,7,9,.33) 58%,\n            rgba(3,5,7,.89) 100%\n        ),\n\n        linear-gradient(\n            90deg,\n            rgba(3,6,8,.50) 0%,\n            rgba(3,6,8,.08) 30%,\n            rgba(3,6,8,.08) 70%,\n            rgba(3,6,8,.50) 100%\n        ),\n\n        radial-gradient(\n            ellipse at 50% 42%,\n            rgba(255,255,255,.03) 0%,\n            rgba(0,0,0,.10) 54%,\n            rgba(0,0,0,.48) 100%\n        );\n}\n\n\n\/* lower dark floor *\/\n\n#tx-three-portals-v2 .tx3-floor{\n    position:absolute;\n\n    z-index:2;\n\n    left:0;\n    right:0;\n    bottom:0;\n\n    height:42%;\n\n    pointer-events:none;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent,\n            rgba(2,4,5,.50) 34%,\n            rgba(2,4,5,.95) 100%\n        );\n}\n\n\n\/* =========================================================\n   SHELL\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-shell{\n    position:relative;\n\n    z-index:5;\n\n    width:min(1740px,94vw);\n\n    min-height:100svh;\n\n    margin:0 auto;\n\n    padding:\n        clamp(38px,5vh,58px)\n        0\n        34px;\n\n    display:flex;\n\n    flex-direction:column;\n}\n\n\n\/* =========================================================\n   MICRO COPY\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-micro{\n    position:absolute;\n\n    top:49px;\n\n    z-index:10;\n\n    color:\n        rgba(255,255,255,.78);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:9px;\n\n    line-height:1.55;\n\n    font-weight:700;\n\n    letter-spacing:.18em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-three-portals-v2 .tx3-micro-left{\n    left:10px;\n\n    padding-left:25px;\n}\n\n\n#tx-three-portals-v2 .tx3-micro-right{\n    right:10px;\n\n    padding-right:25px;\n\n    text-align:right;\n}\n\n\n#tx-three-portals-v2 .tx3-micro-left::before,\n#tx-three-portals-v2 .tx3-micro-right::before{\n    content:\"\";\n\n    position:absolute;\n\n    top:-9px;\n\n    width:2px;\n    height:65px;\n\n    background:\n        var(--tx-orange);\n}\n\n\n#tx-three-portals-v2 .tx3-micro-left::after,\n#tx-three-portals-v2 .tx3-micro-right::after{\n    content:\"\";\n\n    position:absolute;\n\n    top:-9px;\n\n    width:28px;\n    height:2px;\n\n    background:\n        var(--tx-orange);\n}\n\n\n#tx-three-portals-v2 .tx3-micro-left::before,\n#tx-three-portals-v2 .tx3-micro-left::after{\n    left:0;\n}\n\n\n#tx-three-portals-v2 .tx3-micro-right::before,\n#tx-three-portals-v2 .tx3-micro-right::after{\n    right:0;\n}\n\n\n\/* =========================================================\n   HEADING\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-heading{\n    position:relative;\n\n    z-index:6;\n\n    width:min(1050px,77vw);\n\n    margin:\n        0\n        auto\n        clamp(35px,4vh,48px);\n\n    text-align:center;\n\n    opacity:0;\n\n    transform:\n        translateY(28px);\n\n    transition:\n        opacity .8s ease,\n        transform .8s\n        cubic-bezier(.2,.75,.2,1);\n}\n\n\n#tx-three-portals-v2.tx3-visible .tx3-heading{\n    opacity:1;\n\n    transform:\n        translateY(0);\n}\n\n\n#tx-three-portals-v2 .tx3-kicker{\n    margin-bottom:12px;\n\n    color:\n        rgba(255,255,255,.65);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:\n        clamp(\n            8px,\n            .65vw,\n            10px\n        );\n\n    font-weight:800;\n\n    letter-spacing:.36em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-three-portals-v2 .tx3-heading h2{\n    margin:0;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            56px,\n            5.3vw,\n            92px\n        );\n\n    line-height:.86;\n\n    font-weight:950;\n\n    letter-spacing:-.025em;\n\n    text-transform:uppercase;\n\n    text-shadow:\n        0\n        7px\n        30px\n        rgba(0,0,0,.42);\n}\n\n\n#tx-three-portals-v2 .tx3-heading h2 span{\n    display:block;\n\n    color:\n        var(--tx-orange);\n}\n\n\n#tx-three-portals-v2 .tx3-heading p{\n    margin:\n        19px\n        0\n        0;\n\n    color:\n        rgba(255,255,255,.70);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:\n        clamp(\n            8px,\n            .72vw,\n            11px\n        );\n\n    font-weight:700;\n\n    letter-spacing:.30em;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   PORTALS WRAPPER\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-portals{\n    position:relative;\n\n    z-index:6;\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            3,\n            minmax(\n                0,\n                1fr\n            )\n        );\n\n    gap:\n        clamp(\n            16px,\n            1.5vw,\n            27px\n        );\n\n    align-items:start;\n\n    margin-top:0;\n}\n\n\n\/* =========================================================\n   PORTAL COLUMN\n\n   CRITICAL:\n   all portal columns are identical\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-portal{\n    position:relative;\n\n    min-width:0;\n\n    display:grid;\n\n    grid-template-rows:\n        64px\n        clamp(\n            440px,\n            52vh,\n            565px\n        );\n\n    gap:10px;\n\n    align-items:start;\n\n    opacity:0;\n\n    transform:\n        translateY(40px);\n\n    transition:\n        opacity .8s ease,\n        transform .8s\n        cubic-bezier(.2,.75,.2,1);\n}\n\n\n#tx-three-portals-v2.tx3-visible\n.tx3-portal:nth-child(1){\n    opacity:1;\n\n    transform:\n        translateY(0);\n\n    transition-delay:.12s;\n}\n\n\n#tx-three-portals-v2.tx3-visible\n.tx3-portal:nth-child(2){\n    opacity:1;\n\n    transform:\n        translateY(0);\n\n    transition-delay:.22s;\n}\n\n\n#tx-three-portals-v2.tx3-visible\n.tx3-portal:nth-child(3){\n    opacity:1;\n\n    transform:\n        translateY(0);\n\n    transition-delay:.32s;\n}\n\n\n\/* =========================================================\n   ROLE BAR\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-role{\n    width:100%;\n    height:64px;\n\n    margin:0;\n\n    padding:\n        9px\n        15px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:13px;\n\n    border:\n        1px solid\n        rgba(255,90,0,.35);\n\n    background:\n        rgba(3,6,8,.78);\n\n    backdrop-filter:\n        blur(13px);\n\n    -webkit-backdrop-filter:\n        blur(13px);\n\n    box-shadow:\n        0\n        15px\n        32px\n        rgba(0,0,0,.24);\n\n    transition:\n        background .28s ease,\n        border-color .28s ease;\n}\n\n\n#tx-three-portals-v2 .tx3-portal:hover\n.tx3-role{\n    background:\n        rgba(10,13,15,.91);\n\n    border-color:\n        rgba(255,90,0,.65);\n}\n\n\n#tx-three-portals-v2 .tx3-role-number{\n    flex:\n        0\n        0\n        auto;\n\n    color:\n        var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:18px;\n\n    font-weight:900;\n}\n\n\n#tx-three-portals-v2 .tx3-role strong{\n    display:block;\n\n    color:#fff;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:\n        clamp(\n            11px,\n            .85vw,\n            14px\n        );\n\n    line-height:1.15;\n\n    font-weight:700;\n\n    letter-spacing:.10em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-three-portals-v2 .tx3-role small{\n    display:block;\n\n    margin-top:4px;\n\n    color:#aeb4b7;\n\n    font-size:\n        clamp(\n            8px,\n            .64vw,\n            10px\n        );\n}\n\n\n\/* =========================================================\n   SCREEN\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-screen{\n    position:relative;\n\n    width:100%;\n    height:100%;\n\n    overflow:hidden;\n\n    border:\n        1px solid\n        rgba(255,255,255,.13);\n\n    border-radius:12px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(14,21,25,.985),\n            rgba(4,8,11,.99)\n        );\n\n    box-shadow:\n        0\n        35px\n        75px\n        rgba(0,0,0,.48),\n\n        inset\n        0\n        1px\n        0\n        rgba(255,255,255,.07);\n\n    transition:\n        transform .35s\n        cubic-bezier(.2,.8,.2,1),\n        box-shadow .35s ease,\n        border-color .35s ease;\n}\n\n\n\/* all rest exactly aligned *\/\n\n#tx-three-portals-v2 .tx3-portal:hover\n.tx3-screen{\n    transform:\n        translateY(-6px);\n\n    border-color:\n        rgba(255,90,0,.48);\n\n    box-shadow:\n        0\n        45px\n        90px\n        rgba(0,0,0,.58),\n\n        0\n        0\n        0\n        1px\n        rgba(255,90,0,.07);\n}\n\n\n\/* =========================================================\n   APP TOP BAR\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-app-top{\n    height:52px;\n\n    padding:\n        0\n        15px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    border-bottom:\n        1px solid\n        var(--tx-line);\n\n    background:\n        rgba(6,11,14,.96);\n}\n\n\n#tx-three-portals-v2 .tx3-mini-logo{\n    font-size:\n        clamp(\n            13px,\n            1vw,\n            17px\n        );\n\n    font-weight:950;\n}\n\n\n#tx-three-portals-v2 .tx3-mini-logo span{\n    color:\n        var(--tx-orange);\n}\n\n\n#tx-three-portals-v2 .tx3-user{\n    display:flex;\n\n    align-items:center;\n\n    gap:8px;\n\n    color:#aeb4b7;\n\n    font-size:8px;\n}\n\n\n#tx-three-portals-v2 .tx3-avatar{\n    width:23px;\n    height:23px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    border:\n        1px solid\n        rgba(255,255,255,.18);\n\n    background:#182126;\n\n    color:#fff;\n\n    font-size:7px;\n\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   APP BODY\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-app{\n    height:\n        calc(\n            100%\n            -\n            52px\n        );\n\n    display:grid;\n\n    grid-template-columns:\n        clamp(\n            62px,\n            5vw,\n            82px\n        )\n        1fr;\n}\n\n\n\/* =========================================================\n   NAV\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-nav{\n    padding:\n        14px\n        8px;\n\n    overflow:hidden;\n\n    border-right:\n        1px solid\n        var(--tx-line);\n\n    background:\n        rgba(5,10,13,.83);\n}\n\n\n#tx-three-portals-v2 .tx3-nav-item{\n    margin-bottom:6px;\n\n    padding:\n        8px\n        6px;\n\n    overflow:hidden;\n\n    border-radius:4px;\n\n    color:#7f898e;\n\n    font-size:\n        clamp(\n            6px,\n            .52vw,\n            8px\n        );\n\n    white-space:nowrap;\n}\n\n\n#tx-three-portals-v2 .tx3-nav-item.active{\n    color:#090909;\n\n    background:\n        var(--tx-orange);\n\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   CONTENT\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-content{\n    min-width:0;\n\n    height:100%;\n\n    overflow:hidden;\n\n    padding:\n        16px\n        15px\n        18px;\n}\n\n\n#tx-three-portals-v2 .tx3-content h3{\n    margin:\n        0\n        0\n        4px;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            15px,\n            1.18vw,\n            20px\n        );\n\n    line-height:1.1;\n}\n\n\n#tx-three-portals-v2 .tx3-content > p,\n#tx-three-portals-v2 .tx3-client-grid p{\n    margin:\n        0\n        0\n        13px;\n\n    color:#8e979b;\n\n    font-size:\n        clamp(\n            7px,\n            .58vw,\n            9px\n        );\n\n    line-height:1.4;\n}\n\n\n\/* =========================================================\n   STATS\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-stats{\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            4,\n            minmax(\n                0,\n                1fr\n            )\n        );\n\n    gap:6px;\n\n    margin-bottom:11px;\n}\n\n\n#tx-three-portals-v2 .tx3-stat{\n    min-height:58px;\n\n    padding:8px;\n\n    border:\n        1px solid\n        var(--tx-line);\n\n    border-radius:5px;\n\n    background:\n        rgba(255,255,255,.027);\n}\n\n\n#tx-three-portals-v2 .tx3-stat strong{\n    display:block;\n\n    margin-bottom:4px;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            15px,\n            1.15vw,\n            19px\n        );\n}\n\n\n#tx-three-portals-v2 .tx3-stat span{\n    color:#858e92;\n\n    font-size:\n        clamp(\n            6px,\n            .48vw,\n            8px\n        );\n}\n\n\n\/* =========================================================\n   PANELS\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-panel{\n    margin-bottom:9px;\n\n    padding:10px;\n\n    border:\n        1px solid\n        var(--tx-line);\n\n    border-radius:5px;\n\n    background:\n        rgba(255,255,255,.022);\n}\n\n\n#tx-three-portals-v2 .tx3-panel-title{\n    margin-bottom:8px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            8px,\n            .68vw,\n            10px\n        );\n\n    font-weight:800;\n}\n\n\n#tx-three-portals-v2 .tx3-panel-title span{\n    color:\n        var(--tx-orange);\n\n    font-size:7px;\n}\n\n\n\/* =========================================================\n   PROJECT ROW\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-project{\n    min-height:45px;\n\n    margin-bottom:5px;\n\n    padding:\n        6px\n        7px;\n\n    display:grid;\n\n    grid-template-columns:\n        42px\n        minmax(\n            0,\n            1fr\n        )\n        auto;\n\n    gap:7px;\n\n    align-items:center;\n\n    border-radius:4px;\n\n    background:\n        rgba(255,255,255,.032);\n}\n\n\n#tx-three-portals-v2 .tx3-project-img{\n    height:31px;\n\n    border-radius:3px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #505b61,\n            #232b30\n        );\n}\n\n\n#tx-three-portals-v2 .tx3-project strong{\n    display:block;\n\n    overflow:hidden;\n\n    color:#dce0e2;\n\n    font-size:\n        clamp(\n            6px,\n            .49vw,\n            8px\n        );\n\n    white-space:nowrap;\n\n    text-overflow:ellipsis;\n}\n\n\n#tx-three-portals-v2 .tx3-project small{\n    color:#707a7f;\n\n    font-size:6px;\n}\n\n\n#tx-three-portals-v2 .tx3-status{\n    color:\n        var(--tx-green);\n\n    font-size:7px;\n\n    white-space:nowrap;\n}\n\n\n\/* =========================================================\n   TABS\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-tabs{\n    display:flex;\n\n    gap:4px;\n\n    margin-bottom:9px;\n}\n\n\n#tx-three-portals-v2 .tx3-tab{\n    padding:\n        6px\n        7px;\n\n    border-radius:3px;\n\n    color:#878f93;\n\n    background:\n        rgba(255,255,255,.035);\n\n    font-size:\n        clamp(\n            5px,\n            .43vw,\n            7px\n        );\n}\n\n\n#tx-three-portals-v2 .tx3-tab.active{\n    color:#111;\n\n    background:\n        var(--tx-orange);\n\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   JOBS\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-job{\n    margin-bottom:6px;\n\n    padding:8px;\n\n    display:grid;\n\n    grid-template-columns:\n        44px\n        minmax(\n            0,\n            1fr\n        )\n        auto;\n\n    gap:7px;\n\n    align-items:center;\n\n    border:\n        1px solid\n        var(--tx-line);\n\n    border-radius:4px;\n}\n\n\n#tx-three-portals-v2 .tx3-job-thumb{\n    height:34px;\n\n    border-radius:3px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #635543,\n            #252c30\n        );\n}\n\n\n#tx-three-portals-v2 .tx3-job strong{\n    display:block;\n\n    overflow:hidden;\n\n    color:#e8eaeb;\n\n    font-size:\n        clamp(\n            6px,\n            .5vw,\n            8px\n        );\n\n    white-space:nowrap;\n\n    text-overflow:ellipsis;\n}\n\n\n#tx-three-portals-v2 .tx3-job small{\n    display:block;\n\n    margin-top:2px;\n\n    color:#788185;\n\n    font-size:6px;\n}\n\n\n#tx-three-portals-v2 .tx3-view{\n    padding:\n        5px\n        6px;\n\n    color:\n        var(--tx-orange);\n\n    border:\n        1px solid\n        rgba(255,90,0,.52);\n\n    font-size:6px;\n\n    white-space:nowrap;\n}\n\n\n\/* =========================================================\n   CLIENT\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-client-grid{\n    display:grid;\n\n    grid-template-columns:\n        minmax(\n            0,\n            1.25fr\n        )\n        minmax(\n            0,\n            .75fr\n        );\n\n    gap:9px;\n}\n\n\n#tx-three-portals-v2 .tx3-field{\n    margin-bottom:7px;\n}\n\n\n#tx-three-portals-v2 .tx3-field label{\n    display:block;\n\n    margin-bottom:4px;\n\n    color:#b8bdc0;\n\n    font-size:7px;\n}\n\n\n#tx-three-portals-v2 .tx3-input{\n    min-height:33px;\n\n    padding:8px;\n\n    border:\n        1px solid\n        var(--tx-line);\n\n    border-radius:4px;\n\n    background:\n        rgba(255,255,255,.026);\n\n    color:#697276;\n\n    font-size:7px;\n}\n\n\n#tx-three-portals-v2 .tx3-trades{\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            4,\n            minmax(\n                0,\n                1fr\n            )\n        );\n\n    gap:4px;\n}\n\n\n#tx-three-portals-v2 .tx3-trade{\n    min-height:43px;\n\n    padding:\n        5px\n        2px;\n\n    display:grid;\n\n    place-items:center;\n\n    text-align:center;\n\n    border:\n        1px solid\n        var(--tx-line);\n\n    border-radius:4px;\n\n    color:#969da1;\n\n    font-size:6px;\n}\n\n\n#tx-three-portals-v2 .tx3-trade.active{\n    color:\n        var(--tx-orange);\n\n    border-color:\n        rgba(255,90,0,.52);\n\n    background:\n        rgba(255,90,0,.06);\n}\n\n\n#tx-three-portals-v2 .tx3-request{\n    margin-bottom:5px;\n\n    padding:\n        7px\n        4px;\n\n    border-bottom:\n        1px solid\n        var(--tx-line);\n}\n\n\n#tx-three-portals-v2 .tx3-request strong{\n    display:block;\n\n    color:#d9dcde;\n\n    font-size:7px;\n}\n\n\n#tx-three-portals-v2 .tx3-request span{\n    display:block;\n\n    margin-top:3px;\n\n    color:\n        var(--tx-orange);\n\n    font-size:6px;\n}\n\n\n\/* =========================================================\n   BOTTOM DETAILS\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-bottom{\n    position:relative;\n\n    z-index:7;\n\n    margin-top:auto;\n\n    padding-top:\n        clamp(\n            24px,\n            3vh,\n            38px\n        );\n\n    display:flex;\n\n    align-items:flex-end;\n    justify-content:space-between;\n}\n\n\n#tx-three-portals-v2 .tx3-bottom-copy{\n    position:relative;\n\n    color:\n        rgba(255,255,255,.69);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:8px;\n\n    line-height:1.5;\n\n    letter-spacing:.14em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-three-portals-v2 .tx3-bottom-left{\n    padding-left:20px;\n}\n\n\n#tx-three-portals-v2 .tx3-bottom-right{\n    padding-right:20px;\n\n    text-align:right;\n}\n\n\n#tx-three-portals-v2 .tx3-bottom-left::before,\n#tx-three-portals-v2 .tx3-bottom-right::before{\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n\n    width:2px;\n    height:45px;\n\n    background:\n        var(--tx-orange);\n}\n\n\n#tx-three-portals-v2 .tx3-bottom-left::before{\n    left:0;\n}\n\n\n#tx-three-portals-v2 .tx3-bottom-right::before{\n    right:0;\n}\n\n\n\/* =========================================================\n   SCROLL\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-scroll{\n    position:absolute;\n\n    left:50%;\n    bottom:25px;\n\n    z-index:8;\n\n    transform:\n        translateX(-50%);\n\n    color:\n        rgba(255,255,255,.63);\n\n    text-align:center;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:7px;\n\n    letter-spacing:.16em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-three-portals-v2 .tx3-mouse{\n    position:relative;\n\n    display:block;\n\n    width:18px;\n    height:29px;\n\n    margin:\n        0\n        auto\n        7px;\n\n    border:\n        1px solid\n        var(--tx-orange);\n\n    border-radius:11px;\n}\n\n\n#tx-three-portals-v2 .tx3-mouse::before{\n    content:\"\";\n\n    position:absolute;\n\n    top:5px;\n    left:50%;\n\n    width:2px;\n    height:5px;\n\n    background:\n        var(--tx-orange);\n\n    transform:\n        translateX(-50%);\n\n    animation:\n        tx3-wheel\n        1.6s\n        infinite;\n}\n\n\n@keyframes tx3-wheel{\n\n    0%{\n        opacity:0;\n\n        transform:\n            translate(\n                -50%,\n                0\n            );\n    }\n\n    30%{\n        opacity:1;\n    }\n\n    100%{\n        opacity:0;\n\n        transform:\n            translate(\n                -50%,\n                8px\n            );\n    }\n\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:1100px){\n\n    #tx-three-portals-v2{\n        min-height:auto;\n    }\n\n\n    #tx-three-portals-v2 .tx3-shell{\n        min-height:auto;\n\n        padding:\n            55px\n            0\n            70px;\n    }\n\n\n    #tx-three-portals-v2 .tx3-micro{\n        display:none;\n    }\n\n\n    #tx-three-portals-v2 .tx3-heading{\n        width:92vw;\n\n        margin-bottom:45px;\n    }\n\n\n    #tx-three-portals-v2 .tx3-portals{\n        width:min(\n            760px,\n            94vw\n        );\n\n        margin:auto;\n\n        grid-template-columns:1fr;\n\n        gap:55px;\n    }\n\n\n    #tx-three-portals-v2 .tx3-portal{\n        grid-template-rows:\n            64px\n            520px;\n    }\n\n\n    #tx-three-portals-v2 .tx3-screen{\n        transform:none!important;\n    }\n\n\n    #tx-three-portals-v2 .tx3-bottom{\n        display:none;\n    }\n\n\n    #tx-three-portals-v2 .tx3-scroll{\n        display:none;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:570px){\n\n    #tx-three-portals-v2{\n        left:0;\n\n        width:100%;\n\n        margin-left:0;\n    }\n\n\n    #tx-three-portals-v2 .tx3-heading h2{\n        font-size:\n            clamp(\n                42px,\n                12vw,\n                58px\n            );\n    }\n\n\n    #tx-three-portals-v2 .tx3-heading p{\n        font-size:7px;\n\n        letter-spacing:.18em;\n    }\n\n\n    #tx-three-portals-v2 .tx3-portals{\n        width:92vw;\n    }\n\n\n    #tx-three-portals-v2 .tx3-portal{\n        grid-template-rows:\n            66px\n            470px;\n    }\n\n\n    #tx-three-portals-v2 .tx3-app{\n        grid-template-columns:\n            56px\n            1fr;\n    }\n\n\n    #tx-three-portals-v2 .tx3-content{\n        padding:\n            13px\n            9px;\n    }\n\n\n    #tx-three-portals-v2 .tx3-stats{\n        grid-template-columns:\n            repeat(\n                2,\n                1fr\n            );\n    }\n\n\n    #tx-three-portals-v2 .tx3-client-grid{\n        grid-template-columns:1fr;\n    }\n\n}\n\n<\/style>\n\n\n<!-- BACKGROUND -->\n\n<div class=\"tx3-bg tx-video-bg\" aria-hidden=\"true\">\n    <video\n        class=\"tx3-bg-video\"\n        autoplay\n        muted\n        loop\n        playsinline\n        preload=\"auto\"\n    >\n        <source\n            src=\"https:\/\/tradesx.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/TX-Video-3.mp4\"\n            type=\"video\/mp4\"\n        >\n    <\/video>\n<\/div>\n<div class=\"tx3-grade\"><\/div>\n<div class=\"tx3-floor\"><\/div>\n\n\n<div class=\"tx3-shell\">\n\n\n    <!-- MICRO COPY -->\n\n    <div class=\"tx3-micro tx3-micro-left\">\n\n        PEOPLE.<br>\n        SITES.<br>\n        COMPLIANCE.<br>\n        PROGRESS.\n\n    <\/div>\n\n\n    <div class=\"tx3-micro tx3-micro-right\">\n\n        SAFER.<br>\n        INDUSTRY.<br>\n        HIGHER<br>\n        STANDARDS.\n\n    <\/div>\n\n\n    <!-- =====================================================\n         HEADING\n         ===================================================== -->\n\n    <header class=\"tx3-heading\">\n\n\n        <div class=\"tx3-kicker\">\n\n            Turning data into opportunity\n\n        <\/div>\n\n\n        <h2>\n\n            Three Portals.\n\n            <span>\n                One Platform.\n            <\/span>\n\n        <\/h2>\n\n\n        <p>\n\n            One source of truth across every role.\n\n        <\/p>\n\n\n    <\/header>\n\n\n    <!-- =====================================================\n         THREE PORTALS\n         ===================================================== -->\n\n    <div class=\"tx3-portals\">\n\n\n        <!-- =================================================\n             01 HEAD CONTRACTOR\n             ================================================= -->\n\n        <a\n            class=\"tx3-portal\"\n            href=\"https:\/\/tradesx.com.au\/login?role=admin\"\n        >\n\n\n            <div class=\"tx3-role\">\n\n                <div class=\"tx3-role-number\">\n                    01\n                <\/div>\n\n\n                <div>\n\n                    <strong>\n                        For Head Contractors\n                    <\/strong>\n\n                    <small>\n                        Control. Compliance. Confidence.\n                    <\/small>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tx3-screen\">\n\n\n                <div class=\"tx3-app-top\">\n\n                    <div class=\"tx3-mini-logo\">\n\n                        TRADES<span>X<\/span>\n\n                    <\/div>\n\n\n                    <div class=\"tx3-user\">\n\n                        <div class=\"tx3-avatar\">\n                            PM\n                        <\/div>\n\n                        Project Manager\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"tx3-app\">\n\n\n                    <nav class=\"tx3-nav\">\n\n                        <div class=\"tx3-nav-item active\">\n                            Dashboard\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Projects\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            People\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Compliance\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Finance\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Approvals\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Reports\n                        <\/div>\n\n                    <\/nav>\n\n\n                    <div class=\"tx3-content\">\n\n\n                        <h3>\n                            Project Command\n                        <\/h3>\n\n\n                        <p>\n\n                            Total control across people,\n                            projects and compliance.\n\n                        <\/p>\n\n\n                        <div class=\"tx3-stats\">\n\n\n                            <div class=\"tx3-stat\">\n\n                                <strong>\n                                    24\n                                <\/strong>\n\n                                <span>\n                                    Active Projects\n                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-stat\">\n\n                                <strong>\n                                    312\n                                <\/strong>\n\n                                <span>\n                                    Active People\n                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-stat\">\n\n                                <strong>\n                                    98%\n                                <\/strong>\n\n                                <span>\n                                    Compliance\n                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-stat\">\n\n                                <strong>\n                                    14\n                                <\/strong>\n\n                                <span>\n                                    At Risk\n                                <\/span>\n\n                            <\/div>\n\n\n                        <\/div>\n\n\n                        <div class=\"tx3-panel\">\n\n\n                            <div class=\"tx3-panel-title\">\n\n                                Live Projects\n\n                                <span>\n                                    View All \u2192\n                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-project\">\n\n                                <div class=\"tx3-project-img\"><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Riverside Commercial Tower\n                                    <\/strong>\n\n                                    <small>\n                                        Melbourne\n                                    <\/small>\n\n                                <\/div>\n\n                                <div class=\"tx3-status\">\n                                    74%\n                                <\/div>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-project\">\n\n                                <div class=\"tx3-project-img\"><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Metro Rail Upgrade\n                                    <\/strong>\n\n                                    <small>\n                                        Sydney\n                                    <\/small>\n\n                                <\/div>\n\n                                <div class=\"tx3-status\">\n                                    81%\n                                <\/div>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-project\">\n\n                                <div class=\"tx3-project-img\"><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Westfield Expansion\n                                    <\/strong>\n\n                                    <small>\n                                        Brisbane\n                                    <\/small>\n\n                                <\/div>\n\n                                <div class=\"tx3-status\">\n                                    95%\n                                <\/div>\n\n                            <\/div>\n\n\n                        <\/div>\n\n\n                        <div class=\"tx3-panel\">\n\n\n                            <div class=\"tx3-panel-title\">\n\n                                Procurement &amp; Contracts\n\n                                <span>\n                                    Live\n                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-stats\">\n\n\n                                <div class=\"tx3-stat\">\n\n                                    <strong>\n                                        $12.4M\n                                    <\/strong>\n\n                                    <span>\n                                        Committed\n                                    <\/span>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-stat\">\n\n                                    <strong>\n                                        142\n                                    <\/strong>\n\n                                    <span>\n                                        Contracts\n                                    <\/span>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-stat\">\n\n                                    <strong>\n                                        28\n                                    <\/strong>\n\n                                    <span>\n                                        Approvals\n                                    <\/span>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-stat\">\n\n                                    <strong>\n                                        6\n                                    <\/strong>\n\n                                    <span>\n                                        Expiring\n                                    <\/span>\n\n                                <\/div>\n\n\n                            <\/div>\n\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/a>\n\n\n        <!-- =================================================\n             02 SUBCONTRACTOR\n             ================================================= -->\n\n        <a\n            class=\"tx3-portal\"\n            href=\"https:\/\/tradesx.com.au\/login?role=contractor\"\n        >\n\n\n            <div class=\"tx3-role\">\n\n                <div class=\"tx3-role-number\">\n                    02\n                <\/div>\n\n\n                <div>\n\n                    <strong>\n                        For Subcontractors\n                    <\/strong>\n\n                    <small>\n                        Find work. Stay compliant. Get paid.\n                    <\/small>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tx3-screen\">\n\n\n                <div class=\"tx3-app-top\">\n\n                    <div class=\"tx3-mini-logo\">\n\n                        TRADES<span>X<\/span>\n\n                    <\/div>\n\n\n                    <div class=\"tx3-user\">\n\n                        <div class=\"tx3-avatar\">\n                            JW\n                        <\/div>\n\n                        Subcontractor\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"tx3-app\">\n\n\n                    <nav class=\"tx3-nav\">\n\n                        <div class=\"tx3-nav-item active\">\n                            Jobs\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            My Work\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Compliance\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Licences\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Insurance\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Messages\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Payments\n                        <\/div>\n\n                    <\/nav>\n\n\n                    <div class=\"tx3-content\">\n\n\n                        <h3>\n                            Jobs Available\n                        <\/h3>\n\n\n                        <p>\n\n                            Quality opportunities from trusted\n                            head contractors.\n\n                        <\/p>\n\n\n                        <div class=\"tx3-tabs\">\n\n                            <div class=\"tx3-tab active\">\n                                All Jobs\n                            <\/div>\n\n                            <div class=\"tx3-tab\">\n                                My Skills\n                            <\/div>\n\n                            <div class=\"tx3-tab\">\n                                Near Me\n                            <\/div>\n\n                            <div class=\"tx3-tab\">\n                                In Progress\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"tx3-job\">\n\n                            <div class=\"tx3-job-thumb\"><\/div>\n\n                            <div>\n\n                                <strong>\n                                    Riverside Commercial Tower\n                                <\/strong>\n\n                                <small>\n                                    Stage 2 \u2022 Electrical Package\n                                <\/small>\n\n                            <\/div>\n\n                            <div class=\"tx3-view\">\n                                View Job \u2192\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"tx3-job\">\n\n                            <div class=\"tx3-job-thumb\"><\/div>\n\n                            <div>\n\n                                <strong>\n                                    Metro Rail Upgrade\n                                <\/strong>\n\n                                <small>\n                                    Stations 3\u20135\n                                <\/small>\n\n                            <\/div>\n\n                            <div class=\"tx3-view\">\n                                View Job \u2192\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"tx3-job\">\n\n                            <div class=\"tx3-job-thumb\"><\/div>\n\n                            <div>\n\n                                <strong>\n                                    Health Precinct Stage 2\n                                <\/strong>\n\n                                <small>\n                                    Services &amp; Fitout\n                                <\/small>\n\n                            <\/div>\n\n                            <div class=\"tx3-view\">\n                                View Job \u2192\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"tx3-panel\">\n\n\n                            <div class=\"tx3-panel-title\">\n\n                                My Compliance\n\n                                <span>\n                                    100%\n                                <\/span>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-project\">\n\n                                <div><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        White Card\n                                    <\/strong>\n\n                                <\/div>\n\n                                <div class=\"tx3-status\">\n                                    \u2713\n                                <\/div>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-project\">\n\n                                <div><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Trade Licence\n                                    <\/strong>\n\n                                <\/div>\n\n                                <div class=\"tx3-status\">\n                                    \u2713\n                                <\/div>\n\n                            <\/div>\n\n\n                            <div class=\"tx3-project\">\n\n                                <div><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Insurance\n                                    <\/strong>\n\n                                <\/div>\n\n                                <div class=\"tx3-status\">\n                                    \u2713\n                                <\/div>\n\n                            <\/div>\n\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/a>\n\n\n        <!-- =================================================\n             03 CLIENT\n             ================================================= -->\n\n        <a\n            class=\"tx3-portal\"\n            href=\"https:\/\/tradesx.com.au\/login?role=client\"\n        >\n\n\n            <div class=\"tx3-role\">\n\n                <div class=\"tx3-role-number\">\n                    03\n                <\/div>\n\n\n                <div>\n\n                    <strong>\n                        For Clients\n                    <\/strong>\n\n                    <small>\n                        Request. Track. Results.\n                    <\/small>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"tx3-screen\">\n\n\n                <div class=\"tx3-app-top\">\n\n                    <div class=\"tx3-mini-logo\">\n\n                        TRADES<span>X<\/span>\n\n                    <\/div>\n\n\n                    <div class=\"tx3-user\">\n\n                        <div class=\"tx3-avatar\">\n                            DW\n                        <\/div>\n\n                        Client\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"tx3-app\">\n\n\n                    <nav class=\"tx3-nav\">\n\n                        <div class=\"tx3-nav-item active\">\n                            Requests\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Projects\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Contractors\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Workforce\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Documents\n                        <\/div>\n\n                        <div class=\"tx3-nav-item\">\n                            Reports\n                        <\/div>\n\n                    <\/nav>\n\n\n                    <div class=\"tx3-content\">\n\n\n                        <div class=\"tx3-client-grid\">\n\n\n                            <div>\n\n\n                                <h3>\n                                    Request a Job\n                                <\/h3>\n\n\n                                <p>\n\n                                    Submit work directly to your\n                                    contractor.\n\n                                <\/p>\n\n\n                                <div class=\"tx3-field\">\n\n                                    <label>\n                                        I need work in:\n                                    <\/label>\n\n\n                                    <div class=\"tx3-trades\">\n\n                                        <div class=\"tx3-trade active\">\n                                            Construction\n                                        <\/div>\n\n                                        <div class=\"tx3-trade\">\n                                            Civil\n                                        <\/div>\n\n                                        <div class=\"tx3-trade\">\n                                            Electrical\n                                        <\/div>\n\n                                        <div class=\"tx3-trade\">\n                                            Mechanical\n                                        <\/div>\n\n                                    <\/div>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-field\">\n\n                                    <label>\n                                        Location\n                                    <\/label>\n\n                                    <div class=\"tx3-input\">\n                                        Riverside Commercial Tower\n                                    <\/div>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-field\">\n\n                                    <label>\n                                        Additional details\n                                    <\/label>\n\n                                    <div class=\"tx3-input\">\n                                        Enter specific requirements...\n                                    <\/div>\n\n                                <\/div>\n\n\n                            <\/div>\n\n\n                            <div>\n\n\n                                <div class=\"tx3-panel-title\">\n                                    Track Your Requests\n                                <\/div>\n\n\n                                <div class=\"tx3-request\">\n\n                                    <strong>\n                                        HVAC Package\n                                    <\/strong>\n\n                                    <span>\n                                        Active\n                                    <\/span>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-request\">\n\n                                    <strong>\n                                        Fitout Trades\n                                    <\/strong>\n\n                                    <span>\n                                        Under Review\n                                    <\/span>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-request\">\n\n                                    <strong>\n                                        Electrical\n                                    <\/strong>\n\n                                    <span>\n                                        Closed\n                                    <\/span>\n\n                                <\/div>\n\n\n                                <div class=\"tx3-request\">\n\n                                    <strong>\n                                        Early Works\n                                    <\/strong>\n\n                                    <span>\n                                        Contractor Awarded\n                                    <\/span>\n\n                                <\/div>\n\n\n                            <\/div>\n\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/a>\n\n\n    <\/div>\n<\/div>\n\n\n<script>\n\n(() => {\n\n    const section =\n        document.querySelector(\n            '#tx-three-portals-v2'\n        );\n\n\n    if(\n        !section ||\n        section.dataset.txThreeV2 === '1'\n    ){\n        return;\n    }\n\n\n    section.dataset.txThreeV2 =\n        '1';\n\n\n    const background =\n        section.querySelector(\n            '.tx3-bg'\n        );\n\n\n    \/* =====================================================\n       ENTRANCE\n       ===================================================== *\/\n\n    const observer =\n        new IntersectionObserver(\n\n            entries => {\n\n                entries.forEach(\n                    entry => {\n\n                        if(\n                            entry.isIntersecting\n                        ){\n\n                            section.classList.add(\n                                'tx3-visible'\n                            );\n\n\n                            observer.unobserve(\n                                section\n                            );\n\n                        }\n\n                    }\n                );\n\n            },\n\n            {\n                threshold:.12\n            }\n\n        );\n\n\n    observer.observe(\n        section\n    );\n\n\n    \/* =====================================================\n       VERY LIGHT BACKGROUND PARALLAX ONLY\n       SCREENS REMAIN PERFECTLY ALIGNED\n       ===================================================== *\/\n\n    let ticking =\n        false;\n\n\n    function updateParallax(){\n\n        if(\n            ticking\n        ){\n            return;\n        }\n\n\n        ticking =\n            true;\n\n\n        requestAnimationFrame(\n            () => {\n\n                ticking =\n                    false;\n\n\n                if(\n                    window.innerWidth\n                    <\n                    900\n                ){\n                    return;\n                }\n\n\n                const rect =\n                    section.getBoundingClientRect();\n\n\n                const viewport =\n                    window.innerHeight;\n\n\n                const progress =\n                    Math.max(\n                        -1,\n                        Math.min(\n                            1,\n                            (\n                                viewport \/ 2\n                                -\n                                (\n                                    rect.top\n                                    +\n                                    rect.height \/ 2\n                                )\n                            )\n                            \/\n                            viewport\n                        )\n                    );\n\n\n                if(\n                    background\n                    &&\n                    !background.classList.contains(\n                        'tx-video-bg'\n                    )\n                ){\n\n                    background.style.transform =\n                        `\n                        translateY(\n                            ${progress * 12}px\n                        )\n                        scale(1.07)\n                        `;\n\n                }\n\n\n            }\n        );\n\n    }\n\n\n    window.addEventListener(\n        'scroll',\n        updateParallax,\n        {\n            passive:true\n        }\n    );\n\n\n    updateParallax();\n\n\n})();\n\n<\/script>\n\n<\/section>\n\n<!-- =========================================================\n     03 \u2014 COLLAPSE INTO IPAD \/ FAN OUT\n     ========================================================= -->\n<section id=\"tx-fanout-v4\">\n\n<style>\n\n\/* =========================================================\n   TRADESX\n   COLLAPSE INTO IPAD \/ FAN OUT V4\n   ========================================================= *\/\n\n#tx-fanout-v4{\n    --tx-orange:#ff5a00;\n    --tx-orange-deep:#ef4d00;\n    --tx-black:#050607;\n    --tx-dark:#101518;\n    --tx-white:#f4f4f2;\n    --tx-grey:#747a7e;\n    --tx-green:#38b86b;\n\n    position:relative;\n\n    width:100vw;\n    height:190vh;\n\n    margin-left:calc(50% - 50vw);\n\n    background:#ff5a00;\n\n    color:#090909;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    overflow:clip;\n    overflow-clip-margin:0;\n}\n\n#tx-fanout-v4 *,\n#tx-fanout-v4 *:before,\n#tx-fanout-v4 *:after{\n    box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   STICKY STAGE\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-stage{\n    position:sticky;\n\n    top:0;\n\n    width:100%;\n    height:100vh;\n\n    min-height:760px;\n\n    overflow:hidden;\n\n    isolation:isolate;\n\n    background:\n        radial-gradient(\n            circle at 47% 38%,\n            rgba(255,255,255,.10),\n            transparent 30%\n        ),\n        linear-gradient(\n            135deg,\n            #ff6600 0%,\n            #ff5a00 58%,\n            #f44d00 100%\n        );\n}\n\n\n\/* subtle surface texture *\/\n\n#tx-fanout-v4 .txf4-stage:before{\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    z-index:0;\n\n    pointer-events:none;\n\n    opacity:.08;\n\n    background-image:\n        repeating-linear-gradient(\n            0deg,\n            transparent 0,\n            transparent 3px,\n            rgba(0,0,0,.035) 4px\n        );\n}\n\n\n\/* =========================================================\n   TOP BRAND\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-top{\n    position:absolute;\n\n    z-index:40;\n\n    top:34px;\n    left:3.3vw;\n    right:3.3vw;\n\n    display:flex;\n\n    align-items:flex-start;\n    justify-content:space-between;\n\n    pointer-events:none;\n}\n\n\n#tx-fanout-v4 .txf4-brand{\n    width:\n        clamp(\n            190px,\n            15vw,\n            280px\n        );\n}\n\n\n#tx-fanout-v4 .txf4-brand img{\n    display:block;\n\n    width:100%;\n    height:auto;\n}\n\n\n#tx-fanout-v4 .txf4-brand small{\n    display:block;\n\n    margin-top:8px;\n\n    color:rgba(0,0,0,.68);\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:9px;\n\n    font-weight:700;\n\n    letter-spacing:.31em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-fanout-v4 .txf4-top-right{\n    padding-left:22px;\n\n    border-left:\n        1px solid\n        rgba(0,0,0,.58);\n\n    color:rgba(0,0,0,.73);\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:10px;\n\n    line-height:1.55;\n\n    font-weight:700;\n\n    letter-spacing:.18em;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   MAIN SCENE\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-scene{\n    position:absolute;\n\n    z-index:5;\n\n    top:12vh;\n    left:50%;\n\n    width:min(1720px,94vw);\n    height:65vh;\n\n    min-height:500px;\n    max-height:660px;\n\n    transform:\n        translateX(-50%);\n\n    perspective:1900px;\n}\n\n\n\/* =========================================================\n   STEP ONE\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-step-one{\n    position:absolute;\n\n    z-index:25;\n\n    top:22%;\n    left:0;\n\n    width:13%;\n\n    min-width:155px;\n\n    color:#111;\n\n    font-family:\"Courier New\",monospace;\n\n    text-transform:uppercase;\n\n    will-change:\n        opacity,\n        transform;\n}\n\n\n#tx-fanout-v4 .txf4-step-number{\n    margin-bottom:7px;\n\n    font-size:\n        clamp(\n            18px,\n            1.6vw,\n            27px\n        );\n\n    line-height:1;\n\n    font-weight:900;\n}\n\n\n#tx-fanout-v4 .txf4-step-one strong{\n    display:block;\n\n    font-size:\n        clamp(\n            12px,\n            1vw,\n            17px\n        );\n\n    line-height:1.4;\n\n    letter-spacing:.14em;\n}\n\n\n#tx-fanout-v4 .txf4-step-one p{\n    margin:\n        108px\n        0\n        0;\n\n    font-size:\n        clamp(\n            8px,\n            .65vw,\n            10px\n        );\n\n    line-height:1.7;\n\n    font-weight:700;\n\n    letter-spacing:.15em;\n}\n\n\n\/* =========================================================\n   STEP ONE ARROW\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-arrow-one{\n    position:absolute;\n\n    z-index:12;\n\n    top:42%;\n    left:1.3%;\n\n    width:11%;\n    height:21%;\n\n    border-left:\n        2px solid\n        rgba(0,0,0,.60);\n\n    border-bottom:\n        2px solid\n        rgba(0,0,0,.60);\n\n    border-radius:\n        0\n        0\n        0\n        100%;\n\n    transform:\n        rotate(-8deg);\n\n    opacity:.78;\n}\n\n\n#tx-fanout-v4 .txf4-arrow-one:after{\n    content:\"\";\n\n    position:absolute;\n\n    right:-3px;\n    bottom:-2px;\n\n    width:14px;\n    height:14px;\n\n    border-right:\n        2px solid\n        rgba(0,0,0,.60);\n\n    border-bottom:\n        2px solid\n        rgba(0,0,0,.60);\n\n    transform:\n        rotate(-45deg);\n}\n\n\n\/* =========================================================\n   REAL RUGGED IPAD\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-ipad{\n    position:absolute;\n\n    z-index:30;\n\n    top:24%;\n    left:6.2%;\n\n    width:\n        clamp(\n            360px,\n            30vw,\n            540px\n        );\n\n    aspect-ratio:\n        2048 \/ 1291;\n\n    transform-origin:\n        50%\n        75%;\n\n    will-change:\n        opacity,\n        transform;\n}\n\n\n\/* =========================================================\n   IMPORTANT FIX\n\n   Screen now BLEEDS underneath the rugged frame.\n\n   It intentionally extends further than the transparent\n   visible display aperture.\n\n   The iPad case PNG sits above this and hides the overspill.\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-ipad-screen{\n    position:absolute;\n\n    z-index:1;\n\n    top:6.6%;\n    left:3.7%;\n    right:3.7%;\n    bottom:5.5%;\n\n    overflow:hidden;\n\n    border-radius:\n        22px;\n\n    background:#030405;\n\n    transform:translateZ(0);\n}\n\n\n\/* construction background fills entire screen *\/\n\n#tx-fanout-v4 .txf4-ipad-screen-bg{\n    position:absolute;\n\n    inset:-2%;\n\n    z-index:1;\n\n    background-image:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\");\n\n    background-size:cover;\n\n    background-position:\n        center\n        55%;\n\n    filter:\n        grayscale(1)\n        brightness(.42)\n        contrast(1.15);\n\n    transform:\n        scale(1.04);\n}\n\n\n\/* cinematic screen overlay *\/\n\n#tx-fanout-v4 .txf4-ipad-screen-shade{\n    position:absolute;\n\n    inset:0;\n\n    z-index:2;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(2,3,4,.99) 0%,\n            rgba(2,3,4,.95) 24%,\n            rgba(2,3,4,.63) 45%,\n            rgba(2,3,4,.28) 70%,\n            rgba(2,3,4,.70) 100%\n        );\n}\n\n\n\/* real logo *\/\n\n#tx-fanout-v4 .txf4-ipad-logo{\n    position:absolute;\n\n    z-index:4;\n\n    top:28%;\n    left:50%;\n\n    width:58%;\n\n    transform:\n        translate(\n            -50%,\n            -50%\n        );\n}\n\n\n#tx-fanout-v4 .txf4-ipad-logo img{\n    display:block;\n\n    width:100%;\n    height:auto;\n\n    object-fit:contain;\n\n    filter:\n        drop-shadow(\n            0\n            5px\n            12px\n            rgba(0,0,0,.38)\n        );\n}\n\n\n\/* ipad copy *\/\n\n#tx-fanout-v4 .txf4-ipad-copy{\n    position:absolute;\n\n    z-index:4;\n\n    top:47%;\n    left:50%;\n\n    transform:\n        translateX(-50%);\n\n    color:#fff;\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:\n        clamp(\n            9px,\n            .78vw,\n            13px\n        );\n\n    line-height:1.65;\n\n    font-weight:700;\n\n    letter-spacing:.22em;\n\n    text-align:center;\n\n    text-transform:uppercase;\n\n    text-shadow:\n        0\n        3px\n        10px\n        rgba(0,0,0,.8);\n}\n\n\n\/* =========================================================\n   IPAD FRAME ABOVE EVERYTHING\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-ipad-frame{\n    position:absolute;\n\n    z-index:10;\n\n    inset:0;\n\n    pointer-events:none;\n\n    background:\n        url(\"https:\/\/neonsnow.com.au\/wp-content\/uploads\/2026\/08\/TradesX-Ipad-V2-Front-scaled.png\")\n        center\n        \/\n        100%\n        100%\n        no-repeat;\n\n    filter:\n        drop-shadow(\n            0\n            30px\n            45px\n            rgba(0,0,0,.37)\n        );\n}\n\n\n\/* =========================================================\n   FAN AREA\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-fan{\n    position:absolute;\n\n    z-index:15;\n\n    top:6%;\n\n    left:31%;\n\n    width:67%;\n    height:85%;\n\n    perspective:1700px;\n}\n\n\n\/* =========================================================\n   UI SHEETS\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-sheet{\n    position:absolute;\n\n    top:4%;\n\n    width:29%;\n    height:88%;\n\n    overflow:hidden;\n\n    background:#f1f2f0;\n\n    border:\n        1px solid\n        rgba(12,16,18,.45);\n\n    border-radius:\n        8px\n        8px\n        18px\n        18px;\n\n    box-shadow:\n        0\n        28px\n        48px\n        rgba(0,0,0,.25);\n\n    transform-style:\n        preserve-3d;\n\n    transform-origin:\n        50%\n        100%;\n\n    will-change:\n        opacity,\n        transform;\n}\n\n\n#tx-fanout-v4 .txf4-sheet:nth-child(1){\n    left:0%;\n    z-index:40;\n}\n\n\n#tx-fanout-v4 .txf4-sheet:nth-child(2){\n    left:22.8%;\n    z-index:30;\n}\n\n\n#tx-fanout-v4 .txf4-sheet:nth-child(3){\n    left:45.6%;\n    z-index:20;\n}\n\n\n#tx-fanout-v4 .txf4-sheet:nth-child(4){\n    left:68.4%;\n    z-index:10;\n}\n\n\n\/* =========================================================\n   APP TOP\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-app-head{\n    height:45px;\n\n    padding:\n        0\n        12px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:9px;\n\n    background:\n        linear-gradient(\n            180deg,\n            #171c1f,\n            #0d1113\n        );\n\n    color:#fff;\n}\n\n\n#tx-fanout-v4 .txf4-app-logo{\n    flex:0 0 auto;\n\n    width:55px;\n}\n\n\n#tx-fanout-v4 .txf4-app-logo img{\n    display:block;\n\n    width:100%;\n    height:auto;\n}\n\n\n#tx-fanout-v4 .txf4-search{\n    flex:1;\n\n    height:22px;\n\n    display:flex;\n\n    align-items:center;\n\n    padding:\n        0\n        8px;\n\n    color:#72797c;\n\n    background:\n        rgba(255,255,255,.045);\n\n    border-radius:4px;\n\n    font-size:6px;\n}\n\n\n#tx-fanout-v4 .txf4-user{\n    color:#b8bdc0;\n\n    font-size:6px;\n\n    white-space:nowrap;\n}\n\n\n\/* =========================================================\n   APP BODY\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-app-body{\n    height:\n        calc(\n            100%\n            -\n            45px\n        );\n\n    display:grid;\n\n    grid-template-columns:\n        66px\n        1fr;\n\n    background:#eff0ef;\n}\n\n\n\/* sidebar *\/\n\n#tx-fanout-v4 .txf4-side{\n    padding:\n        14px\n        6px;\n\n    color:#858b8f;\n\n    background:#11171a;\n}\n\n\n#tx-fanout-v4 .txf4-side div{\n    margin-bottom:4px;\n\n    padding:\n        7px\n        5px;\n\n    border-radius:3px;\n\n    font-size:6px;\n\n    white-space:nowrap;\n}\n\n\n#tx-fanout-v4 .txf4-side .active{\n    color:#090909;\n\n    background:var(--tx-orange);\n\n    font-weight:800;\n}\n\n\n\/* main *\/\n\n#tx-fanout-v4 .txf4-ui{\n    min-width:0;\n\n    padding:\n        16px\n        12px;\n\n    overflow:hidden;\n\n    color:#171a1b;\n}\n\n\n#tx-fanout-v4 .txf4-ui h3{\n    margin:\n        0\n        0\n        4px;\n\n    font-size:\n        clamp(\n            14px,\n            1.15vw,\n            20px\n        );\n\n    line-height:1;\n}\n\n\n#tx-fanout-v4 .txf4-ui > p{\n    margin:\n        0\n        0\n        13px;\n\n    color:#7d8386;\n\n    font-size:6px;\n}\n\n\n\/* =========================================================\n   STATS\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-stats{\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            3,\n            1fr\n        );\n\n    gap:6px;\n\n    margin-bottom:10px;\n}\n\n\n#tx-fanout-v4 .txf4-stat{\n    min-width:0;\n\n    padding:\n        9px\n        7px;\n\n    background:#fff;\n\n    border:\n        1px solid\n        #dedfdf;\n\n    border-radius:5px;\n}\n\n\n#tx-fanout-v4 .txf4-stat strong{\n    display:block;\n\n    margin-bottom:4px;\n\n    font-size:16px;\n}\n\n\n#tx-fanout-v4 .txf4-stat span{\n    color:#858a8d;\n\n    font-size:5px;\n}\n\n\n\/* =========================================================\n   GENERIC PANEL\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-panel{\n    padding:9px;\n\n    background:#fff;\n\n    border:\n        1px solid\n        #dcdedd;\n\n    border-radius:5px;\n}\n\n\n#tx-fanout-v4 .txf4-panel-title{\n    margin-bottom:8px;\n\n    font-size:8px;\n\n    font-weight:800;\n}\n\n\n\/* projects *\/\n\n#tx-fanout-v4 .txf4-project{\n    display:grid;\n\n    grid-template-columns:\n        38px\n        minmax(0,1fr)\n        38px;\n\n    gap:7px;\n\n    align-items:center;\n\n    margin-bottom:6px;\n}\n\n\n#tx-fanout-v4 .txf4-thumb{\n    height:30px;\n\n    border-radius:3px;\n\n    background:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\")\n        center\n        \/\n        cover;\n}\n\n\n#tx-fanout-v4 .txf4-project strong{\n    display:block;\n\n    overflow:hidden;\n\n    font-size:6px;\n\n    white-space:nowrap;\n\n    text-overflow:ellipsis;\n}\n\n\n#tx-fanout-v4 .txf4-project small{\n    color:#888d8f;\n\n    font-size:5px;\n}\n\n\n#tx-fanout-v4 .txf4-progress{\n    height:4px;\n\n    overflow:hidden;\n\n    border-radius:10px;\n\n    background:#d7d9d8;\n}\n\n\n#tx-fanout-v4 .txf4-progress i{\n    display:block;\n\n    height:100%;\n\n    background:#171a1b;\n}\n\n\n\/* =========================================================\n   TABS\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-tabs{\n    display:flex;\n\n    gap:5px;\n\n    margin-bottom:10px;\n}\n\n\n#tx-fanout-v4 .txf4-tab{\n    padding:\n        5px\n        7px;\n\n    border-radius:3px;\n\n    color:#686f72;\n\n    background:#e0e2e1;\n\n    font-size:6px;\n}\n\n\n#tx-fanout-v4 .txf4-tab.active{\n    color:#fff;\n\n    background:#121617;\n}\n\n\n\/* =========================================================\n   COMPLIANCE\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-check{\n    margin-bottom:6px;\n\n    padding:8px;\n\n    display:grid;\n\n    grid-template-columns:\n        24px\n        1fr;\n\n    gap:7px;\n\n    align-items:center;\n\n    background:#fafafa;\n\n    border:\n        1px solid\n        #dbdddc;\n\n    border-radius:5px;\n}\n\n\n#tx-fanout-v4 .txf4-check-icon{\n    width:23px;\n    height:23px;\n\n    display:grid;\n\n    place-items:center;\n\n    color:#247d49;\n\n    background:#d9f0e1;\n\n    border-radius:5px;\n\n    font-size:9px;\n\n    font-weight:900;\n}\n\n\n#tx-fanout-v4 .txf4-check strong{\n    display:block;\n\n    font-size:7px;\n}\n\n\n#tx-fanout-v4 .txf4-check small{\n    display:block;\n\n    color:#2c9f61;\n\n    font-size:5px;\n}\n\n\n\/* =========================================================\n   SUBCONTRACTORS\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-sub{\n    padding:\n        8px\n        2px;\n\n    display:grid;\n\n    grid-template-columns:\n        25px\n        minmax(0,1fr)\n        auto;\n\n    gap:7px;\n\n    align-items:center;\n\n    border-bottom:\n        1px solid\n        #dcdedd;\n}\n\n\n#tx-fanout-v4 .txf4-avatar{\n    width:24px;\n    height:24px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    color:#fff;\n\n    background:#285f99;\n\n    font-size:6px;\n}\n\n\n#tx-fanout-v4 .txf4-sub strong{\n    display:block;\n\n    overflow:hidden;\n\n    font-size:7px;\n\n    white-space:nowrap;\n\n    text-overflow:ellipsis;\n}\n\n\n#tx-fanout-v4 .txf4-sub small{\n    color:#888e91;\n\n    font-size:5px;\n}\n\n\n#tx-fanout-v4 .txf4-pill{\n    padding:\n        3px\n        5px;\n\n    border-radius:4px;\n\n    color:#267c49;\n\n    background:#d9efdf;\n\n    font-size:5px;\n}\n\n\n\/* =========================================================\n   UPDATES\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-update{\n    margin-bottom:9px;\n\n    overflow:hidden;\n\n    background:#fff;\n\n    border:\n        1px solid\n        #d9dbda;\n\n    border-radius:5px;\n}\n\n\n#tx-fanout-v4 .txf4-update-image{\n    height:\n        clamp(\n            76px,\n            10vh,\n            112px\n        );\n\n    background:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\")\n        center\n        \/\n        cover;\n}\n\n\n#tx-fanout-v4 .txf4-update-copy{\n    padding:8px;\n}\n\n\n#tx-fanout-v4 .txf4-update-copy strong{\n    display:block;\n\n    font-size:7px;\n}\n\n\n#tx-fanout-v4 .txf4-update-copy small{\n    color:#8b9093;\n\n    font-size:5px;\n}\n\n\n\/* =========================================================\n   FAN ARROW\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-fan-arrow{\n    position:absolute;\n\n    z-index:12;\n\n    left:44%;\n    bottom:1%;\n\n    width:18%;\n    height:13%;\n\n    border-bottom:\n        2px solid\n        rgba(255,255,255,.80);\n\n    border-radius:\n        0\n        0\n        70%\n        70%;\n\n    transform:\n        rotate(2deg);\n\n    transform-origin:right bottom;\n\n    opacity:.75;\n}\n\n\n#tx-fanout-v4 .txf4-fan-arrow:after{\n    content:\"\";\n\n    position:absolute;\n\n    right:-2px;\n    bottom:-5px;\n\n    width:13px;\n    height:13px;\n\n    border-right:\n        2px solid\n        rgba(255,255,255,.82);\n\n    border-bottom:\n        2px solid\n        rgba(255,255,255,.82);\n\n    transform:\n        rotate(-45deg);\n}\n\n\n\/* =========================================================\n   STEP TWO\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-step-two{\n    position:absolute;\n\n    z-index:45;\n\n    left:63%;\n    bottom:-2%;\n\n    color:#111;\n\n    font-family:\"Courier New\",monospace;\n\n    text-transform:uppercase;\n\n    will-change:\n        opacity,\n        transform;\n}\n\n\n#tx-fanout-v4 .txf4-step-two-row{\n    display:flex;\n\n    align-items:center;\n\n    gap:10px;\n}\n\n\n#tx-fanout-v4 .txf4-step-two strong{\n    font-size:\n        clamp(\n            12px,\n            .95vw,\n            16px\n        );\n\n    letter-spacing:.14em;\n}\n\n\n#tx-fanout-v4 .txf4-step-two p{\n    margin:\n        6px\n        0\n        0\n        41px;\n\n    font-size:\n        clamp(\n            7px,\n            .58vw,\n            10px\n        );\n\n    line-height:1.6;\n\n    font-weight:700;\n\n    letter-spacing:.14em;\n}\n\n\n\/* =========================================================\n   BOTTOM CONTENT\n   ========================================================= *\/\n\n#tx-fanout-v4 .txf4-bottom{\n    position:absolute;\n\n    z-index:35;\n\n    left:3.3vw;\n    right:3.3vw;\n    bottom:3.3vh;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(360px,1.1fr)\n        minmax(420px,1.35fr)\n        minmax(120px,.32fr);\n\n    gap:\n        clamp(\n            32px,\n            4vw,\n            72px\n        );\n\n    align-items:end;\n\n    color:#090909;\n\n    will-change:\n        opacity,\n        transform;\n}\n\n\n#tx-fanout-v4 .txf4-bottom-title{\n    padding-right:\n        clamp(\n            28px,\n            3vw,\n            54px\n        );\n\n    border-right:\n        1px solid\n        rgba(0,0,0,.52);\n}\n\n\n#tx-fanout-v4 .txf4-bottom-title small{\n    display:block;\n\n    margin-bottom:7px;\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:10px;\n\n    font-weight:900;\n\n    letter-spacing:.24em;\n}\n\n\n#tx-fanout-v4 .txf4-bottom-title h2{\n    margin:0;\n\n    font-size:\n        clamp(\n            32px,\n            3vw,\n            56px\n        );\n\n    line-height:.92;\n\n    font-weight:950;\n\n    letter-spacing:.025em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-fanout-v4 .txf4-bottom-title h2 span{\n    color:#fff;\n}\n\n\n#tx-fanout-v4 .txf4-bottom-copy{\n    padding-bottom:4px;\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:\n        clamp(\n            10px,\n            .82vw,\n            14px\n        );\n\n    line-height:1.62;\n\n    letter-spacing:.08em;\n}\n\n\n#tx-fanout-v4 .txf4-bottom-micro{\n    justify-self:end;\n\n    padding-left:20px;\n\n    border-left:\n        1px solid\n        rgba(0,0,0,.52);\n\n    font-family:\"Courier New\",monospace;\n\n    font-size:9px;\n\n    line-height:1.55;\n\n    letter-spacing:.15em;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:1150px){\n\n    #tx-fanout-v4{\n        height:auto;\n    }\n\n\n    #tx-fanout-v4 .txf4-stage{\n        position:relative;\n\n        height:auto;\n\n        min-height:0;\n\n        padding:\n            50px\n            0\n            70px;\n    }\n\n\n    #tx-fanout-v4 .txf4-top{\n        position:relative;\n\n        top:auto;\n        left:auto;\n        right:auto;\n\n        width:92vw;\n\n        margin:0 auto;\n    }\n\n\n    #tx-fanout-v4 .txf4-scene{\n        position:relative;\n\n        top:auto;\n        left:auto;\n\n        width:92vw;\n        height:auto;\n\n        min-height:0;\n\n        margin:\n            70px\n            auto\n            0;\n\n        transform:none;\n    }\n\n\n    #tx-fanout-v4 .txf4-step-one,\n    #tx-fanout-v4 .txf4-arrow-one,\n    #tx-fanout-v4 .txf4-step-two,\n    #tx-fanout-v4 .txf4-fan-arrow{\n        display:none;\n    }\n\n\n    #tx-fanout-v4 .txf4-ipad{\n        position:relative;\n\n        top:auto;\n        left:auto;\n\n        width:min(720px,90vw);\n\n        margin:\n            0\n            auto\n            60px;\n\n        opacity:1 !important;\n\n        transform:none !important;\n    }\n\n\n    #tx-fanout-v4 .txf4-fan{\n        position:relative;\n\n        top:auto;\n        left:auto;\n\n        width:100%;\n        height:auto;\n\n        display:grid;\n\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0,1fr)\n            );\n\n        gap:22px;\n    }\n\n\n    #tx-fanout-v4 .txf4-sheet{\n        position:relative !important;\n\n        top:auto !important;\n        left:auto !important;\n\n        width:100% !important;\n        height:520px !important;\n\n        opacity:1 !important;\n\n        transform:none !important;\n    }\n\n\n    #tx-fanout-v4 .txf4-bottom{\n        position:relative;\n\n        left:auto;\n        right:auto;\n        bottom:auto;\n\n        width:92vw;\n\n        margin:\n            55px\n            auto\n            0;\n\n        grid-template-columns:\n            1fr\n            1fr;\n\n        opacity:1 !important;\n\n        transform:none !important;\n    }\n\n\n    #tx-fanout-v4 .txf4-bottom-micro{\n        display:none;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:650px){\n\n    #tx-fanout-v4 .txf4-brand{\n        width:180px;\n    }\n\n\n    #tx-fanout-v4 .txf4-top-right{\n        display:none;\n    }\n\n\n    #tx-fanout-v4 .txf4-scene{\n        margin-top:50px;\n    }\n\n\n    #tx-fanout-v4 .txf4-ipad{\n        width:96vw;\n    }\n\n\n    #tx-fanout-v4 .txf4-fan{\n        grid-template-columns:1fr;\n    }\n\n\n    #tx-fanout-v4 .txf4-sheet{\n        height:500px !important;\n    }\n\n\n    #tx-fanout-v4 .txf4-bottom{\n        grid-template-columns:1fr;\n\n        gap:28px;\n    }\n\n\n    #tx-fanout-v4 .txf4-bottom-title{\n        padding-right:0;\n        padding-bottom:24px;\n\n        border-right:none;\n\n        border-bottom:\n            1px solid\n            rgba(0,0,0,.42);\n    }\n\n}\n\n\n\n\/* =========================================================\n   PRE-START VISIBILITY GATE\n\n   Keep the iPad, fan-out sheets and annotations completely\n   hidden until this sticky section has actually reached the\n   top of the viewport. This prevents the next scene from\n   bleeding into the previous section.\n   ========================================================= *\/\n\n@media(min-width:1151px){\n\n    #tx-fanout-v4:not(.txf4-started) .txf4-ipad,\n    #tx-fanout-v4:not(.txf4-started) .txf4-sheet,\n    #tx-fanout-v4:not(.txf4-started) .txf4-step-one,\n    #tx-fanout-v4:not(.txf4-started) .txf4-step-two,\n    #tx-fanout-v4:not(.txf4-started) .txf4-fan-arrow,\n    #tx-fanout-v4:not(.txf4-started) .txf4-arrow-one,\n    #tx-fanout-v4:not(.txf4-started) .txf4-bottom{\n        opacity:0 !important;\n        visibility:hidden !important;\n        pointer-events:none !important;\n    }\n\n    #tx-fanout-v4.txf4-started .txf4-ipad,\n    #tx-fanout-v4.txf4-started .txf4-sheet,\n    #tx-fanout-v4.txf4-started .txf4-step-one,\n    #tx-fanout-v4.txf4-started .txf4-step-two,\n    #tx-fanout-v4.txf4-started .txf4-fan-arrow,\n    #tx-fanout-v4.txf4-started .txf4-arrow-one,\n    #tx-fanout-v4.txf4-started .txf4-bottom{\n        visibility:visible;\n    }\n}\n\n\n\n\/* =========================================================\n   V11 FAN-OUT MOTION RESTORE\n\n   Keep the current orange visual treatment exactly as-is.\n   This only ensures the moving UI sheets behave like physical\n   layers during the restored scroll fan-out sequence.\n   ========================================================= *\/\n\n@media(min-width:1151px){\n\n    #tx-fanout-v4 .txf4-sheet{\n        backface-visibility:hidden;\n        -webkit-backface-visibility:hidden;\n        transform-style:preserve-3d;\n        will-change:transform,opacity;\n    }\n\n    #tx-fanout-v4 .txf4-ipad{\n        backface-visibility:hidden;\n        -webkit-backface-visibility:hidden;\n        will-change:transform,opacity;\n    }\n\n}\n\n\n\n\/* =========================================================\n   V12 \u2014 CENTRED IPAD \/ LOCKED ORANGE \/ EXIT FAN-OUT\n\n   Intent:\n   - Orange visual language remains fixed for the whole scene.\n   - Copy remains fixed. Scrolling does NOT swap copy or colours.\n   - Rugged iPad begins in the centre with the real TradesX logo.\n   - Dashboard sheets begin stacked behind the iPad.\n   - Only the LAST part of the section fans the sheets outward.\n   - Reverses cleanly when the user scrolls back up.\n   ========================================================= *\/\n\n@media(min-width:1151px){\n\n    #tx-fanout-v4{\n        height:190vh;\n        background:#ff5a00 !important;\n        color:#090909 !important;\n    }\n\n    #tx-fanout-v4 .txf4-stage{\n        background:\n            radial-gradient(\n                circle at 50% 39%,\n                rgba(255,255,255,.10),\n                transparent 31%\n            ),\n            linear-gradient(\n                135deg,\n                #ff6600 0%,\n                #ff5a00 58%,\n                #f44d00 100%\n            ) !important;\n    }\n\n    #tx-fanout-v4 .txf4-scene{\n        top:11vh;\n        width:min(1760px,96vw);\n        height:67vh;\n        min-height:520px;\n        max-height:700px;\n        perspective:2200px;\n    }\n\n    \/* Main iPad stays central for the entire scene. *\/\n    #tx-fanout-v4 .txf4-ipad{\n        z-index:60;\n        top:46%;\n        left:50%;\n        width:clamp(390px,31vw,570px);\n        transform-origin:50% 50%;\n        opacity:1;\n        transform:translate3d(-50%,-50%,0);\n        filter:none;\n    }\n\n    \/* Dashboard pages now share the same central origin. *\/\n    #tx-fanout-v4 .txf4-fan{\n        z-index:20;\n        top:0;\n        left:0;\n        width:100%;\n        height:100%;\n        perspective:2200px;\n        pointer-events:none;\n    }\n\n    #tx-fanout-v4 .txf4-sheet{\n        top:46% !important;\n        left:50% !important;\n        width:clamp(300px,21.5vw,420px);\n        height:clamp(420px,55vh,575px);\n        transform-origin:50% 55%;\n        border-radius:10px 10px 18px 18px;\n        box-shadow:\n            0 24px 55px rgba(0,0,0,.24),\n            0 2px 0 rgba(255,255,255,.38) inset;\n        backface-visibility:hidden;\n        -webkit-backface-visibility:hidden;\n        will-change:transform,opacity;\n    }\n\n    \/* All sheets live BEHIND the rugged iPad. *\/\n    #tx-fanout-v4 .txf4-sheet:nth-child(1){z-index:21;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(2){z-index:23;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(3){z-index:23;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(4){z-index:21;}\n\n    \/* Copy is fixed rather than scroll staged. *\/\n    #tx-fanout-v4.txf4-started .txf4-step-one,\n    #tx-fanout-v4.txf4-started .txf4-step-two,\n    #tx-fanout-v4.txf4-started .txf4-fan-arrow,\n    #tx-fanout-v4.txf4-started .txf4-arrow-one,\n    #tx-fanout-v4.txf4-started .txf4-bottom{\n        opacity:1 !important;\n        visibility:visible !important;\n    }\n\n    #tx-fanout-v4.txf4-started .txf4-step-one,\n    #tx-fanout-v4.txf4-started .txf4-step-two,\n    #tx-fanout-v4.txf4-started .txf4-bottom{\n        transform:none !important;\n    }\n\n    \/* Re-aim the annotations around the new centred composition. *\/\n    #tx-fanout-v4 .txf4-step-one{\n        top:24%;\n        left:1.5%;\n    }\n\n    #tx-fanout-v4 .txf4-arrow-one{\n        top:42%;\n        left:3.2%;\n        width:15%;\n        height:16%;\n        transform:rotate(-5deg);\n    }\n\n    #tx-fanout-v4 .txf4-fan-arrow{\n        left:46%;\n        bottom:-1%;\n        width:17%;\n        height:12%;\n        transform:rotate(1deg);\n    }\n\n    #tx-fanout-v4 .txf4-step-two{\n        left:63%;\n        bottom:-2%;\n    }\n\n    #tx-fanout-v4 .txf4-bottom{\n        opacity:1;\n        transform:none;\n    }\n\n}\n\n<\/style>\n\n\n<div class=\"txf4-stage\">\n\n\n    <!-- =====================================================\n         TOP\n         ===================================================== -->\n\n    <div class=\"txf4-top\">\n\n\n        <div class=\"txf4-brand\">\n\n            <img decoding=\"async\"\n                src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                alt=\"TradesX\"\n            >\n\n            <small>\n                Built for what's next.\n            <\/small>\n\n        <\/div>\n\n\n        <div class=\"txf4-top-right\">\n\n            Same<br>\n            Industry<br>\n            Higher<br>\n            Standards\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <!-- =====================================================\n         SCENE\n         ===================================================== -->\n\n    <div class=\"txf4-scene\">\n\n\n        <!-- STEP ONE -->\n\n        <div class=\"txf4-step-one\">\n\n            <div class=\"txf4-step-number\">\n                1.\n            <\/div>\n\n            <strong>\n                Collapse<br>\n                into iPad\n            <\/strong>\n\n            <p>\n                All your sites,<br>\n                teams and tools<br>\n                in one place.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"txf4-arrow-one\"><\/div>\n\n\n        <!-- =================================================\n             REAL IPAD\n             ================================================= -->\n\n        <div class=\"txf4-ipad\">\n\n\n            <!-- BLEEDING SCREEN -->\n\n            <div class=\"txf4-ipad-screen\">\n\n                <div class=\"txf4-ipad-screen-bg\"><\/div>\n\n                <div class=\"txf4-ipad-screen-shade\"><\/div>\n\n\n                <!-- REAL LOGO -->\n\n                <div class=\"txf4-ipad-logo\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                        alt=\"TradesX\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"txf4-ipad-copy\">\n\n                    Build<br>\n                    Connect<br>\n                    Deliver\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- RUGGED FRAME -->\n\n            <div class=\"txf4-ipad-frame\"><\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             FAN OUT SCREENS\n             ================================================= -->\n\n        <div class=\"txf4-fan\">\n\n\n            <!-- =============================================\n                 01 DASHBOARD\n                 ============================================= -->\n\n            <article class=\"txf4-sheet\">\n\n\n                <div class=\"txf4-app-head\">\n\n                    <div class=\"txf4-app-logo\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                            alt=\"\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"txf4-search\">\n                        Search...\n                    <\/div>\n\n                    <div class=\"txf4-user\">\n                        Alex Carter\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"txf4-app-body\">\n\n\n                    <div class=\"txf4-side\">\n\n                        <div class=\"active\">\n                            Dashboard\n                        <\/div>\n\n                        <div>\n                            Projects\n                        <\/div>\n\n                        <div>\n                            Clients\n                        <\/div>\n\n                        <div>\n                            Subcontractors\n                        <\/div>\n\n                        <div>\n                            Compliance\n                        <\/div>\n\n                        <div>\n                            Documents\n                        <\/div>\n\n                        <div>\n                            Reports\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"txf4-ui\">\n\n\n                        <h3>\n                            Good morning, Alex\n                        <\/h3>\n\n                        <p>\n                            Here's what's happening today.\n                        <\/p>\n\n\n                        <div class=\"txf4-stats\">\n\n                            <div class=\"txf4-stat\">\n                                <strong>12<\/strong>\n                                <span>Active Projects<\/span>\n                            <\/div>\n\n                            <div class=\"txf4-stat\">\n                                <strong>8<\/strong>\n                                <span>Pending Approvals<\/span>\n                            <\/div>\n\n                            <div class=\"txf4-stat\">\n                                <strong>24<\/strong>\n                                <span>On Site Today<\/span>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-panel\">\n\n\n                            <div class=\"txf4-panel-title\">\n                                Recent Projects\n                            <\/div>\n\n\n                            <div class=\"txf4-project\">\n\n                                <div class=\"txf4-thumb\"><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Riverside Apartments\n                                    <\/strong>\n\n                                    <small>\n                                        Brisbane, QLD\n                                    <\/small>\n\n                                <\/div>\n\n                                <div class=\"txf4-progress\">\n                                    <i style=\"width:78%\"><\/i>\n                                <\/div>\n\n                            <\/div>\n\n\n                            <div class=\"txf4-project\">\n\n                                <div class=\"txf4-thumb\"><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Oakview Townhouses\n                                    <\/strong>\n\n                                    <small>\n                                        Gold Coast, QLD\n                                    <\/small>\n\n                                <\/div>\n\n                                <div class=\"txf4-progress\">\n                                    <i style=\"width:42%\"><\/i>\n                                <\/div>\n\n                            <\/div>\n\n\n                            <div class=\"txf4-project\">\n\n                                <div class=\"txf4-thumb\"><\/div>\n\n                                <div>\n\n                                    <strong>\n                                        Horizon Commercial\n                                    <\/strong>\n\n                                    <small>\n                                        Sunshine Coast\n                                    <\/small>\n\n                                <\/div>\n\n                                <div class=\"txf4-progress\">\n                                    <i style=\"width:15%\"><\/i>\n                                <\/div>\n\n                            <\/div>\n\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n            <!-- =============================================\n                 02 COMPLIANCE\n                 ============================================= -->\n\n            <article class=\"txf4-sheet\">\n\n\n                <div class=\"txf4-app-head\">\n\n                    <div class=\"txf4-app-logo\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                            alt=\"\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"txf4-search\">\n                        Search...\n                    <\/div>\n\n                    <div class=\"txf4-user\">\n                        \u2022\u2022\u2022\n                    <\/div>\n\n                <\/div>\n\n\n                <div\n                    class=\"txf4-app-body\"\n                    style=\"grid-template-columns:1fr\"\n                >\n\n\n                    <div class=\"txf4-ui\">\n\n                        <h3>\n                            Compliance\n                        <\/h3>\n\n                        <p>\n                            Keep every requirement current.\n                        <\/p>\n\n\n                        <div class=\"txf4-tabs\">\n\n                            <div class=\"txf4-tab active\">\n                                All\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Due Soon\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Completed\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-check\">\n\n                            <div class=\"txf4-check-icon\">\n                                \u2713\n                            <\/div>\n\n                            <div>\n                                <strong>SWMS<\/strong>\n                                <small>Compliant<\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-check\">\n\n                            <div class=\"txf4-check-icon\">\n                                \u2713\n                            <\/div>\n\n                            <div>\n                                <strong>Insurance<\/strong>\n                                <small>Compliant<\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-check\">\n\n                            <div\n                                class=\"txf4-check-icon\"\n                                style=\"\n                                    color:#c65a19;\n                                    background:#f8e1d2;\n                                \"\n                            >\n                                !\n                            <\/div>\n\n                            <div>\n\n                                <strong>\n                                    Licences\n                                <\/strong>\n\n                                <small\n                                    style=\"\n                                        color:#c65a19\n                                    \"\n                                >\n                                    Expiring Soon\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-check\">\n\n                            <div class=\"txf4-check-icon\">\n                                \u2713\n                            <\/div>\n\n                            <div>\n                                <strong>Inductions<\/strong>\n                                <small>Compliant<\/small>\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-check\">\n\n                            <div class=\"txf4-check-icon\">\n                                \u2713\n                            <\/div>\n\n                            <div>\n                                <strong>Safety Checks<\/strong>\n                                <small>Compliant<\/small>\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n            <!-- =============================================\n                 03 SUBCONTRACTORS\n                 ============================================= -->\n\n            <article class=\"txf4-sheet\">\n\n\n                <div class=\"txf4-app-head\">\n\n                    <div class=\"txf4-app-logo\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                            alt=\"\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"txf4-search\">\n                        Search...\n                    <\/div>\n\n                    <div class=\"txf4-user\">\n                        \u2022\u2022\u2022\n                    <\/div>\n\n                <\/div>\n\n\n                <div\n                    class=\"txf4-app-body\"\n                    style=\"grid-template-columns:1fr\"\n                >\n\n\n                    <div class=\"txf4-ui\">\n\n                        <h3>\n                            Subcontractors\n                        <\/h3>\n\n                        <p>\n                            Your connected trade network.\n                        <\/p>\n\n\n                        <div class=\"txf4-tabs\">\n\n                            <div class=\"txf4-tab active\">\n                                Active\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Invites\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Archived\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-sub\">\n\n                            <div class=\"txf4-avatar\">\n                                BC\n                            <\/div>\n\n                            <div>\n\n                                <strong>\n                                    Brisbane Concreting\n                                <\/strong>\n\n                                <small>\n                                    Concreting\n                                <\/small>\n\n                            <\/div>\n\n                            <span class=\"txf4-pill\">\n                                Active\n                            <\/span>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-sub\">\n\n                            <div class=\"txf4-avatar\">\n                                SP\n                            <\/div>\n\n                            <div>\n\n                                <strong>\n                                    Summit Plumbing\n                                <\/strong>\n\n                                <small>\n                                    Plumbing\n                                <\/small>\n\n                            <\/div>\n\n                            <span class=\"txf4-pill\">\n                                Active\n                            <\/span>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-sub\">\n\n                            <div class=\"txf4-avatar\">\n                                RE\n                            <\/div>\n\n                            <div>\n\n                                <strong>\n                                    Riverside Electrical\n                                <\/strong>\n\n                                <small>\n                                    Electrical\n                                <\/small>\n\n                            <\/div>\n\n                            <span\n                                class=\"txf4-pill\"\n                                style=\"\n                                    color:#c85d1d;\n                                    background:#f7e0d1;\n                                \"\n                            >\n                                Pending\n                            <\/span>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-sub\">\n\n                            <div class=\"txf4-avatar\">\n                                TH\n                            <\/div>\n\n                            <div>\n\n                                <strong>\n                                    Total HVAC\n                                <\/strong>\n\n                                <small>\n                                    HVAC\n                                <\/small>\n\n                            <\/div>\n\n                            <span class=\"txf4-pill\">\n                                Active\n                            <\/span>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-sub\">\n\n                            <div class=\"txf4-avatar\">\n                                FC\n                            <\/div>\n\n                            <div>\n\n                                <strong>\n                                    Formtech Carpentry\n                                <\/strong>\n\n                                <small>\n                                    Carpentry\n                                <\/small>\n\n                            <\/div>\n\n                            <span class=\"txf4-pill\">\n                                Active\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n            <!-- =============================================\n                 04 UPDATES\n                 ============================================= -->\n\n            <article class=\"txf4-sheet\">\n\n\n                <div class=\"txf4-app-head\">\n\n                    <div class=\"txf4-app-logo\">\n\n                        <img decoding=\"async\"\n                            src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                            alt=\"\"\n                        >\n\n                    <\/div>\n\n                    <div class=\"txf4-search\">\n                        Search...\n                    <\/div>\n\n                    <div class=\"txf4-user\">\n                        \u2022\u2022\u2022\n                    <\/div>\n\n                <\/div>\n\n\n                <div\n                    class=\"txf4-app-body\"\n                    style=\"grid-template-columns:1fr\"\n                >\n\n\n                    <div class=\"txf4-ui\">\n\n                        <h3>\n                            Project Updates\n                        <\/h3>\n\n                        <p>\n                            Live evidence from the field.\n                        <\/p>\n\n\n                        <div class=\"txf4-tabs\">\n\n                            <div class=\"txf4-tab active\">\n                                All\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Photos\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Progress\n                            <\/div>\n\n                            <div class=\"txf4-tab\">\n                                Notes\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-update\">\n\n                            <div class=\"txf4-update-image\"><\/div>\n\n                            <div class=\"txf4-update-copy\">\n\n                                <strong>\n                                    Level 4 structure complete\n                                <\/strong>\n\n                                <small>\n                                    2 hours ago\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"txf4-update\">\n\n                            <div\n                                class=\"txf4-update-image\"\n                                style=\"\n                                    background-position:center 64%;\n                                \"\n                            ><\/div>\n\n                            <div class=\"txf4-update-copy\">\n\n                                <strong>\n                                    Services rough in progress\n                                <\/strong>\n\n                                <small>\n                                    Today\n                                <\/small>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/article>\n\n\n        <\/div>\n\n\n        <!-- FAN ARROW -->\n\n        <div class=\"txf4-fan-arrow\"><\/div>\n\n\n        <!-- STEP TWO -->\n\n        <div class=\"txf4-step-two\">\n\n            <div class=\"txf4-step-two-row\">\n\n                <span class=\"txf4-step-number\">\n                    2.\n                <\/span>\n\n                <strong>\n                    Fan Out\n                <\/strong>\n\n            <\/div>\n\n            <p>\n                Instant access to everything<br>\n                you need to keep moving.\n            <\/p>\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <!-- =====================================================\n         BOTTOM\n         ===================================================== -->\n\n    <div class=\"txf4-bottom\">\n\n\n        <div class=\"txf4-bottom-title\">\n\n            <small>\n                4.\n            <\/small>\n\n            <h2>\n\n                Collapse into iPad<br>\n\n                <span>\n                    and fan out.\n                <\/span>\n\n            <\/h2>\n\n        <\/div>\n\n\n        <div class=\"txf4-bottom-copy\">\n\n            From one powerful platform, get instant access to\n            your projects, subcontractors, compliance,\n            documents and more.\n\n        <\/div>\n\n\n        <div class=\"txf4-bottom-micro\">\n\n            Real<br>\n            Work<br>\n            Real<br>\n            Impact\n\n        <\/div>\n\n\n    <\/div>\n\n\n<\/div>\n\n\n\n<style id=\"tx-fanout-v13-rugged-ipad-layout\">\n\/* =========================================================\n   V13 \u2014 RUGGED IPAD FAN LAYOUT\n\n   Fixes the key visual mismatch in V12:\n   the fan cards are no longer raw portrait browser sheets.\n   Every dashboard lives INSIDE the same rugged orange iPad frame.\n   ========================================================= *\/\n\n@media(min-width:1151px){\n\n    #tx-fanout-v4 .txf4-scene{\n        top:9vh !important;\n        width:min(1780px,97vw) !important;\n        height:70vh !important;\n        min-height:560px !important;\n        max-height:735px !important;\n        perspective:2400px !important;\n    }\n\n    \/* Central logo iPad remains dominant and centred. *\/\n    #tx-fanout-v4 .txf4-ipad{\n        top:46% !important;\n        left:50% !important;\n        width:clamp(430px,32vw,610px) !important;\n        z-index:80 !important;\n        transform:translate3d(-50%,-50%,0);\n        filter:none !important;\n    }\n\n    \/* Fan becomes a full-scene positioning layer. *\/\n    #tx-fanout-v4 .txf4-fan{\n        position:absolute !important;\n        inset:0 !important;\n        width:100% !important;\n        height:100% !important;\n        z-index:30 !important;\n        perspective:2400px !important;\n        pointer-events:none !important;\n    }\n\n    \/* -----------------------------------------------------\n       EACH DASHBOARD IS NOW A LANDSCAPE RUGGED IPAD\n       ----------------------------------------------------- *\/\n    #tx-fanout-v4 .txf4-sheet{\n        position:absolute !important;\n        top:46% !important;\n        left:50% !important;\n\n        width:clamp(330px,25.5vw,470px) !important;\n        height:auto !important;\n        aspect-ratio:2048 \/ 1291 !important;\n\n        margin:0 !important;\n        padding:0 !important;\n\n        overflow:visible !important;\n        background:transparent !important;\n        border:0 !important;\n        border-radius:0 !important;\n        box-shadow:none !important;\n\n        transform-origin:50% 50% !important;\n        backface-visibility:hidden;\n        -webkit-backface-visibility:hidden;\n\n        will-change:transform,opacity;\n    }\n\n    \/* Screen aperture INSIDE the case. *\/\n    #tx-fanout-v4 .txf4-rugged-screen{\n        position:absolute;\n        z-index:1;\n\n        top:8.0%;\n        left:5.2%;\n        right:5.3%;\n        bottom:7.0%;\n\n        overflow:hidden;\n        border-radius:9px;\n        background:#eef0ee;\n        box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);\n    }\n\n    \/* Rugged orange frame above the dashboard. *\/\n    #tx-fanout-v4 .txf4-rugged-frame{\n        position:absolute;\n        z-index:10;\n        inset:0;\n        pointer-events:none;\n\n        background:\n            url(\"https:\/\/neonsnow.com.au\/wp-content\/uploads\/2026\/08\/TradesX-Ipad-V2-Front-scaled.png\")\n            center \/ 100% 100% no-repeat;\n\n        filter:\n            drop-shadow(0 24px 34px rgba(0,0,0,.24))\n            drop-shadow(0 7px 14px rgba(115,35,0,.12));\n    }\n\n    \/* Scale the existing dashboard UI to the landscape aperture. *\/\n    #tx-fanout-v4 .txf4-rugged-screen > .txf4-app-head{\n        height:13% !important;\n        min-height:0 !important;\n        padding:0 3.8% !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen > .txf4-app-body{\n        height:87% !important;\n        min-height:0 !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-app-logo{\n        width:18% !important;\n        max-width:62px !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-search{\n        height:48% !important;\n        font-size:clamp(4px,.34vw,6px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-user{\n        font-size:clamp(4px,.32vw,6px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-side{\n        width:auto !important;\n        min-width:0 !important;\n        padding:5% 7% !important;\n        font-size:clamp(4px,.31vw,6px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-ui{\n        padding:5% !important;\n        overflow:hidden !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-ui h3{\n        font-size:clamp(11px,.85vw,16px) !important;\n        line-height:1.05 !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-ui > p{\n        margin-top:1.5% !important;\n        font-size:clamp(4px,.33vw,6px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-stat{\n        min-height:0 !important;\n        padding:5% !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-stat strong{\n        font-size:clamp(8px,.62vw,12px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-stat span,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-panel-title,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-project strong,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-project small,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-tab,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-check strong,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-check small,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-sub strong,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-sub small,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-update-copy strong,\n    #tx-fanout-v4 .txf4-rugged-screen .txf4-update-copy small{\n        font-size:clamp(4px,.30vw,6px) !important;\n    }\n\n    \/* All six background iPads remain behind the centre iPad. *\/\n    #tx-fanout-v4 .txf4-sheet:nth-child(1){z-index:31 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(2){z-index:31 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(3){z-index:34 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(4){z-index:34 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(5){z-index:37 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(6){z-index:37 !important;}\n\n    \/* Prevent the left\/right annotations from colliding with the fan. *\/\n    #tx-fanout-v4 .txf4-step-one{\n        top:29% !important;\n        left:2.2% !important;\n        width:11.5% !important;\n        min-width:135px !important;\n        z-index:90 !important;\n    }\n\n    #tx-fanout-v4 .txf4-step-one p{\n        margin-top:86px !important;\n    }\n\n    #tx-fanout-v4 .txf4-arrow-one{\n        top:43% !important;\n        left:2.8% !important;\n        width:11% !important;\n        height:15% !important;\n        z-index:89 !important;\n    }\n\n    #tx-fanout-v4 .txf4-step-two{\n        left:62% !important;\n        bottom:-2% !important;\n        z-index:90 !important;\n    }\n\n    #tx-fanout-v4 .txf4-fan-arrow{\n        left:45% !important;\n        bottom:-1% !important;\n        width:16% !important;\n        z-index:89 !important;\n    }\n\n    \/* Static copy and colour throughout the entire sticky sequence. *\/\n    #tx-fanout-v4 .txf4-step-one,\n    #tx-fanout-v4 .txf4-step-two,\n    #tx-fanout-v4 .txf4-fan-arrow,\n    #tx-fanout-v4 .txf4-arrow-one,\n    #tx-fanout-v4 .txf4-bottom{\n        opacity:1 !important;\n        visibility:visible !important;\n        filter:none !important;\n    }\n\n    #tx-fanout-v4 .txf4-bottom{\n        transform:none !important;\n    }\n}\n\n\/* Tablet\/mobile keep the existing responsive layout rather than\n   attempting six overlapping devices in a narrow viewport. *\/\n@media(max-width:1150px){\n    #tx-fanout-v4 .txf4-sheet--clone{\n        display:none !important;\n    }\n}\n<\/style>\n<style id=\"tx-fanout-v14-sequenced-layout\">\n\/* =========================================================\n   V14 - CENTRE IPAD ARRIVES FIRST, THEN DASHBOARDS FAN OUT\n\n   Layout goals:\n   - Keep the existing TradesX orange treatment.\n   - Keep all copy and UI content unchanged.\n   - Reserve a clean left copy lane for Step 1.\n   - Bring the main rugged iPad up into position first.\n   - Reveal the stacked dashboard iPads only after it settles.\n   - Fan the rugged dashboard iPads out near the section exit.\n   ========================================================= *\/\n\n@media(min-width:1151px){\n\n    #tx-fanout-v4{\n        height:215vh !important;\n    }\n\n    #tx-fanout-v4 .txf4-stage{\n        overflow:hidden !important;\n    }\n\n    #tx-fanout-v4 .txf4-scene{\n        top:9vh !important;\n        width:min(1780px,96vw) !important;\n        height:69vh !important;\n        min-height:555px !important;\n        max-height:720px !important;\n        perspective:2400px !important;\n    }\n\n    \/* Main iPad settles in the middle and stays dominant. *\/\n    #tx-fanout-v4 .txf4-ipad{\n        top:44% !important;\n        left:50% !important;\n        width:clamp(430px,32vw,610px) !important;\n        z-index:80 !important;\n        transform-origin:50% 50% !important;\n        filter:none !important;\n        will-change:transform,opacity !important;\n    }\n\n    \/* Dedicated left copy lane. Nothing from the fan enters it. *\/\n    #tx-fanout-v4 .txf4-step-one{\n        top:28% !important;\n        left:2.8% !important;\n        width:10.5% !important;\n        min-width:150px !important;\n        max-width:180px !important;\n        z-index:120 !important;\n        padding-right:8px !important;\n        opacity:var(--txf14-copy-opacity,0) !important;\n        transform:translate3d(0,var(--txf14-copy-y,18px),0) !important;\n    }\n\n    #tx-fanout-v4 .txf4-step-one p{\n        margin-top:74px !important;\n    }\n\n    #tx-fanout-v4 .txf4-arrow-one{\n        top:44% !important;\n        left:3.0% !important;\n        width:9.5% !important;\n        height:13% !important;\n        z-index:118 !important;\n        opacity:var(--txf14-copy-opacity,0) !important;\n    }\n\n    \/* Fan callout only resolves once the actual fan begins. *\/\n    #tx-fanout-v4 .txf4-step-two,\n    #tx-fanout-v4 .txf4-fan-arrow{\n        opacity:var(--txf14-fan-label-opacity,0) !important;\n    }\n\n    #tx-fanout-v4 .txf4-step-two{\n        left:61.5% !important;\n        bottom:-1.5% !important;\n        z-index:115 !important;\n        transform:translate3d(0,var(--txf14-fan-label-y,12px),0) !important;\n    }\n\n    #tx-fanout-v4 .txf4-fan-arrow{\n        left:45% !important;\n        bottom:-.5% !important;\n        width:15.5% !important;\n        z-index:112 !important;\n    }\n\n    #tx-fanout-v4 .txf4-bottom{\n        opacity:var(--txf14-copy-opacity,0) !important;\n        transform:translate3d(0,var(--txf14-copy-y,18px),0) !important;\n    }\n\n    \/* Rugged dashboard devices remain behind the hero iPad. *\/\n    #tx-fanout-v4 .txf4-fan{\n        z-index:30 !important;\n        pointer-events:none !important;\n    }\n\n    #tx-fanout-v4 .txf4-sheet{\n        top:44% !important;\n        left:50% !important;\n        width:clamp(330px,25.5vw,470px) !important;\n        height:auto !important;\n        aspect-ratio:2048 \/ 1291 !important;\n        transform-origin:50% 50% !important;\n        will-change:transform,opacity !important;\n    }\n\n    #tx-fanout-v4 .txf4-sheet:nth-child(1){z-index:31 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(2){z-index:31 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(3){z-index:34 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(4){z-index:34 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(5){z-index:37 !important;}\n    #tx-fanout-v4 .txf4-sheet:nth-child(6){z-index:37 !important;}\n}\n\n@media(max-width:1150px){\n    #tx-fanout-v4 .txf4-sheet--clone{\n        display:none !important;\n    }\n}\n<\/style>\n<style id=\"tx-fanout-v18-v15-smooth-exit-css\">\n@media(min-width:1151px){\n    \/*\n       V18 keeps the V15 motion cadence, but gives the exit enough\n       scroll distance to continue beyond the visible fan and leave\n       the viewport cleanly.\n    *\/\n    #tx-fanout-v4{\n        height:245vh !important;\n    }\n\n    #tx-fanout-v4 .txf4-stage{\n        overflow:hidden !important;\n    }\n\n    #tx-fanout-v4 .txf4-scene,\n    #tx-fanout-v4 .txf4-fan{\n        overflow:visible !important;\n    }\n\n    \/* JS owns every frame. Avoid CSS transition lag fighting the\n       scroll interpolation. *\/\n    #tx-fanout-v4 .txf4-sheet,\n    #tx-fanout-v4 .txf4-ipad{\n        transition:none !important;\n    }\n}\n<\/style>\n<script id=\"tx-fanout-v18-v15-smooth-offscreen-controller\">\n(() => {\n    const section = document.querySelector('#tx-fanout-v4');\n    if (!section || section.dataset.fanoutV18 === '1') return;\n    section.dataset.fanoutV18 = '1';\n\n    const ipad = section.querySelector('.txf4-ipad');\n    const fan = section.querySelector('.txf4-fan');\n    let screens = [...section.querySelectorAll('.txf4-sheet')];\n\n    if (!ipad || !fan || screens.length < 4) return;\n\n    \/* ---------------------------------------------------------\n       BUILD THE SAME SIX RUGGED DASHBOARD IPADS USED IN V15\n       --------------------------------------------------------- *\/\n    if (!fan.dataset.ruggedBuilt) {\n        fan.dataset.ruggedBuilt = '1';\n\n        const cloneA = screens[0].cloneNode(true);\n        const cloneB = screens[1].cloneNode(true);\n\n        cloneA.classList.add('txf4-sheet--clone');\n        cloneB.classList.add('txf4-sheet--clone');\n\n        fan.appendChild(cloneA);\n        fan.appendChild(cloneB);\n\n        screens = [...fan.querySelectorAll('.txf4-sheet')];\n\n        screens.forEach((screen, index) => {\n            if (screen.querySelector(':scope > .txf4-rugged-screen')) return;\n\n            const ruggedScreen = document.createElement('div');\n            ruggedScreen.className = 'txf4-rugged-screen';\n\n            while (screen.firstChild) {\n                ruggedScreen.appendChild(screen.firstChild);\n            }\n\n            const frame = document.createElement('div');\n            frame.className = 'txf4-rugged-frame';\n            frame.setAttribute('aria-hidden', 'true');\n\n            screen.appendChild(ruggedScreen);\n            screen.appendChild(frame);\n            screen.dataset.fanIndex = String(index);\n        });\n    }\n\n    screens = [...fan.querySelectorAll('.txf4-sheet')];\n\n    const clamp = (value, min = 0, max = 1) =>\n        Math.min(max, Math.max(min, value));\n\n    const lerp = (a, b, t) =>\n        a + (b - a) * t;\n\n    \/* V15 easing language. *\/\n    const smoothstep = t => {\n        t = clamp(t);\n        return t * t * (3 - 2 * t);\n    };\n\n    const range = (start, end, value) =>\n        smoothstep(\n            (value - start) \/\n            Math.max(0.0001, end - start)\n        );\n\n    \/* ---------------------------------------------------------\n       MOTION STATES\n\n       STACKED  -> the compact deck behind the hero iPad\n       FANNED   -> the six-device composition from V15\n       OFFSCREEN-> same trajectory continues through the edges\n       --------------------------------------------------------- *\/\n    const stacked = [\n        { x:-5.8, y:-1.4, z:-190, ry:-4.8, rz:-1.3, s:.69 },\n        { x: 5.8, y:-1.4, z:-190, ry: 4.8, rz: 1.3, s:.69 },\n        { x:-3.4, y:-.4,  z:-130, ry:-2.8, rz:-.65,s:.75 },\n        { x: 3.4, y:-.4,  z:-130, ry: 2.8, rz: .65,s:.75 },\n        { x:-1.4, y:.3,   z: -76, ry:-1.0, rz:-.20,s:.81 },\n        { x: 1.4, y:.3,   z: -76, ry: 1.0, rz: .20,s:.81 }\n    ];\n\n    const fanned = [\n        { x:-24.0, y:-16.0, z:-98, ry:-10.0, rz:-6.0, s:.58 },\n        { x: 24.0, y:-16.0, z:-98, ry: 10.0, rz: 6.0, s:.58 },\n        { x:-32.0, y:  4.0, z:-72, ry: -6.0, rz:-3.0, s:.50 },\n        { x: 32.0, y:  4.0, z:-72, ry:  6.0, rz: 3.0, s:.50 },\n        { x:-20.0, y: 20.0, z:-48, ry: -4.0, rz:-2.0, s:.44 },\n        { x: 20.0, y: 20.0, z:-48, ry:  4.0, rz: 2.0, s:.44 }\n    ];\n\n    const offscreen = [\n        { x:-70, y:-50, z:-20, ry:-30, rz:-15, s:.30 },\n        { x: 70, y:-50, z:-20, ry: 30, rz: 15, s:.30 },\n        { x:-80, y: 10, z:-10, ry:-20, rz:-10, s:.25 },\n        { x: 80, y: 10, z:-10, ry: 20, rz: 10, s:.25 },\n        { x:-60, y: 55, z:  0, ry:-15, rz: -8, s:.20 },\n        { x: 60, y: 55, z:  0, ry: 15, rz:  8, s:.20 }\n    ];\n\n    \/* Exactly the subtle paired staggering used by V15. *\/\n    const pairDelay = [0, 0, .012, .012, .024, .024];\n\n    let targetProgress = 0;\n    let renderedProgress = 0;\n    let lastTime = performance.now();\n    let raf = 0;\n    let firstFrame = true;\n\n    function rawProgress() {\n        const rect = section.getBoundingClientRect();\n        const viewportHeight =\n            window.visualViewport?.height ||\n            window.innerHeight;\n        const travel = Math.max(1, section.offsetHeight - viewportHeight);\n        return clamp(-rect.top \/ travel);\n    }\n\n    function sectionNearViewport() {\n        const rect = section.getBoundingClientRect();\n        const viewportHeight =\n            window.visualViewport?.height ||\n            window.innerHeight;\n        return rect.bottom > -viewportHeight * .35 &&\n               rect.top < viewportHeight * 1.35;\n    }\n\n    function clearResponsive() {\n        if (window.innerWidth > 1150) return false;\n\n        section.classList.add('txf4-started');\n        section.style.removeProperty('--txf14-copy-opacity');\n        section.style.removeProperty('--txf14-copy-y');\n        section.style.removeProperty('--txf14-fan-label-opacity');\n        section.style.removeProperty('--txf14-fan-label-y');\n\n        ipad.style.opacity = '';\n        ipad.style.transform = '';\n\n        screens.forEach(screen => {\n            screen.style.opacity = '';\n            screen.style.transform = '';\n        });\n\n        return true;\n    }\n\n    function render(progress) {\n        if (clearResponsive()) return;\n\n        const rect = section.getBoundingClientRect();\n        const started = rect.top <= 0;\n\n        section.classList.toggle('txf4-started', started);\n\n        if (!started) {\n            section.style.setProperty('--txf14-copy-opacity', '0');\n            section.style.setProperty('--txf14-copy-y', '18px');\n            section.style.setProperty('--txf14-fan-label-opacity', '0');\n            section.style.setProperty('--txf14-fan-label-y', '12px');\n\n            ipad.style.opacity = '0';\n            ipad.style.transform =\n                'translate3d(-50%, calc(-50% + 30vh), 0) scale(.88)';\n\n            screens.forEach(screen => {\n                screen.style.opacity = '0';\n            });\n\n            return;\n        }\n\n        \/* -----------------------------------------------------\n           PHASE 1 \u2014 V15 CENTRAL IPAD ARRIVAL\n           ----------------------------------------------------- *\/\n        const ipadIn = range(.012, .205, progress);\n        const ipadY = lerp(30, 0, ipadIn);\n        const ipadScale = lerp(.88, 1, ipadIn);\n\n        \/* -----------------------------------------------------\n           PHASE 2 \u2014 V15 COPY ARRIVAL\n           ----------------------------------------------------- *\/\n        const copyIn = range(.165, .295, progress);\n\n        section.style.setProperty(\n            '--txf14-copy-opacity',\n            copyIn.toFixed(4)\n        );\n\n        section.style.setProperty(\n            '--txf14-copy-y',\n            `${lerp(18, 0, copyIn).toFixed(2)}px`\n        );\n\n        \/* -----------------------------------------------------\n           PHASE 3 \u2014 V15 COMPACT DASHBOARD DECK\n           ----------------------------------------------------- *\/\n        const deckIn = range(.235, .355, progress);\n\n        \/* -----------------------------------------------------\n           PHASE 4 \u2014 V15 FAN MOTION, SAME LONG SMOOTH FEEL\n\n           The section is slightly taller in V18. That lets this\n           fan consume almost the same physical scroll distance as\n           V15 before the cards continue beyond the viewport.\n           ----------------------------------------------------- *\/\n        const fanLabelIn = range(.625, .755, progress);\n        const fanLabelOut = range(.900, .985, progress);\n        const fanLabelOpacity = fanLabelIn * (1 - fanLabelOut);\n\n        section.style.setProperty(\n            '--txf14-fan-label-opacity',\n            fanLabelOpacity.toFixed(4)\n        );\n\n        section.style.setProperty(\n            '--txf14-fan-label-y',\n            `${lerp(12, 0, fanLabelIn).toFixed(2)}px`\n        );\n\n        \/* -----------------------------------------------------\n           CENTRAL IPAD\n\n           Keep the V15 almost-static centre iPad during the fan.\n           Only once the outer screens are nearly fully fanned does\n           it begin its exit shrink\/drop.\n           ----------------------------------------------------- *\/\n        const settle = range(.575, .855, progress);\n        const centreSettleScale = lerp(1, .985, settle);\n\n        const centreExit = range(.865, .995, progress);\n        const centreFade = range(.930, .995, progress);\n        const centreDrop = lerp(0, 60, centreExit);\n        const centreExitScale = lerp(1, .42, centreExit);\n\n        ipad.style.opacity =\n            (ipadIn * (1 - centreFade)).toFixed(4);\n\n        ipad.style.transform = `\n            translate3d(\n                -50%,\n                calc(-50% + ${(ipadY + centreDrop).toFixed(3)}vh),\n                0\n            )\n            scale(${(\n                ipadScale *\n                centreSettleScale *\n                centreExitScale\n            ).toFixed(4)})\n        `;\n\n        \/* -----------------------------------------------------\n           SIX RUGGED DASHBOARD IPADS\n\n           Key V18 change:\n           - same paired V15 fan\n           - no pause or snap at the visible fan\n           - the same motion carries on through the viewport edge\n           ----------------------------------------------------- *\/\n        screens.forEach((screen, index) => {\n            const delay = pairDelay[index];\n\n            \/* The V15 fan still gets a long, gentle travel window. *\/\n            const fanLocal = range(\n                .575 + delay,\n                .855 + delay * .35,\n                progress\n            );\n\n            \/* Exit overlaps only once the fan is already ~96% formed. *\/\n            const exitLocal = range(\n                .825 + delay * .22,\n                .995,\n                progress\n            );\n\n            const a = stacked[index];\n            const b = fanned[index];\n            const c = offscreen[index];\n\n            \/* First: stacked -> fanned. *\/\n            let x  = lerp(a.x,  b.x,  fanLocal);\n            let y  = lerp(a.y,  b.y,  fanLocal);\n            let z  = lerp(a.z,  b.z,  fanLocal);\n            let ry = lerp(a.ry, b.ry, fanLocal);\n            let rz = lerp(a.rz, b.rz, fanLocal);\n            let sc = lerp(a.s,  b.s,  fanLocal);\n\n            \/* Then: continue that exact trajectory out of frame. *\/\n            x  = lerp(x,  c.x,  exitLocal);\n            y  = lerp(y,  c.y,  exitLocal);\n            z  = lerp(z,  c.z,  exitLocal);\n            ry = lerp(ry, c.ry, exitLocal);\n            rz = lerp(rz, c.rz, exitLocal);\n            sc = lerp(sc, c.s,  exitLocal);\n\n            \/* Keep the screens visible while they physically cross\n               the edge; only fade at the very end. *\/\n            const exitFade = range(\n                .945 + delay * .12,\n                .998,\n                progress\n            );\n\n            const opacity =\n                deckIn *\n                lerp(.34, 1, fanLocal) *\n                (1 - exitFade);\n\n            screen.style.opacity = opacity.toFixed(4);\n\n            screen.style.transform = `\n                translate3d(\n                    calc(-50% + ${x.toFixed(3)}vw),\n                    calc(-50% + ${y.toFixed(3)}vh),\n                    ${z.toFixed(1)}px\n                )\n                rotateY(${ry.toFixed(2)}deg)\n                rotateZ(${rz.toFixed(2)}deg)\n                scale(${sc.toFixed(4)})\n            `;\n        });\n    }\n\n    function frame(now) {\n        raf = 0;\n\n        if (clearResponsive()) return;\n\n        targetProgress = rawProgress();\n\n        if (firstFrame) {\n            renderedProgress = targetProgress;\n            firstFrame = false;\n        }\n\n        const dt = Math.min(64, Math.max(1, now - lastTime));\n        lastTime = now;\n\n        \/*\n           THIS IS THE V15 SMOOTHNESS.\n\n           Keep the exact exponential interpolation that made V15\n           feel less tied to discrete wheel\/trackpad scroll events.\n        *\/\n        const follow = 1 - Math.exp(-dt \/ 72);\n\n        renderedProgress +=\n            (targetProgress - renderedProgress) * follow;\n\n        if (Math.abs(targetProgress - renderedProgress) < .00004) {\n            renderedProgress = targetProgress;\n        }\n\n        render(renderedProgress);\n\n        if (\n            sectionNearViewport() ||\n            Math.abs(targetProgress - renderedProgress) > .00004\n        ) {\n            raf = requestAnimationFrame(frame);\n        }\n    }\n\n    function wake() {\n        targetProgress = rawProgress();\n\n        if (!raf) {\n            lastTime = performance.now();\n            raf = requestAnimationFrame(frame);\n        }\n    }\n\n    window.addEventListener('scroll', wake, { passive:true });\n\n    window.addEventListener('resize', () => {\n        firstFrame = true;\n        wake();\n    });\n\n    document.addEventListener('visibilitychange', () => {\n        if (!document.hidden) wake();\n    });\n\n    wake();\n})();\n<\/script>\n\n<\/section>\n\n<!-- =========================================================\n     04 \u2014 TRADESX TOOLBOX\n     ========================================================= -->\n<section id=\"tx-toolbox-scroll-v3\">\n<style>\n\/* ==========================================================\n   TRADESX CAPABILITY SHOWCASE V4\n   STICKY DASHBOARD DISPLAY LEFT\n   SIX SCROLLING CAPABILITIES RIGHT\n   ========================================================== *\/\n#tx-toolbox-scroll-v3{\n    --tx-orange:#ff5a00;\n    --tx-orange-hot:#ff6800;\n    --tx-black:#030405;\n    --tx-black-2:#080a0b;\n    --tx-panel:#0b1013;\n    --tx-panel-2:#11171a;\n    --tx-white:#f4f4f1;\n    --tx-grey:#a6aaac;\n    --tx-line:rgba(255,255,255,.12);\n    --tx-green:#31cf7d;\n    position:relative;\n    left:50%;\n    width:100vw;\n    max-width:none!important;\n    margin-left:-50vw;\n    background:var(--tx-black);\n    color:#fff;\n    font-family:Arial,Helvetica,sans-serif;\n    overflow:visible;\n}\n#tx-toolbox-scroll-v3 *,\n#tx-toolbox-scroll-v3 *::before,\n#tx-toolbox-scroll-v3 *::after{box-sizing:border-box;}\n#tx-toolbox-scroll-v3 img{display:block;max-width:100%;}\n\n\/* TWO COLUMN SYSTEM *\/\n#tx-toolbox-scroll-v3 .txv3-layout{\n    display:grid;\n    grid-template-columns:52% 48%;\n    align-items:start;\n    background:var(--tx-black);\n}\n\n\/* ==========================================================\n   LEFT STICKY DASHBOARD GALLERY\n   ========================================================== *\/\n#tx-toolbox-scroll-v3 .txv3-stage{\n    position:sticky;\n    top:0;\n    align-self:start;\n    height:100vh;\n    min-height:720px;\n    overflow:hidden;\n    isolation:isolate;\n    background:#ff5a00;\n}\n#tx-toolbox-scroll-v3 .txv3-stage::before{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    z-index:0;\n    pointer-events:none;\n    opacity:.095;\n    background-image:\n      linear-gradient(rgba(0,0,0,.10) 1px,transparent 1px),\n      linear-gradient(90deg,rgba(0,0,0,.10) 1px,transparent 1px);\n    background-size:78px 78px;\n    mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 83%,transparent 100%);\n}\n#tx-toolbox-scroll-v3 .txv3-stage::after{\n    content:\"\";\n    position:absolute;\n    z-index:1;\n    inset:0;\n    pointer-events:none;\n    background:\n      radial-gradient(circle at 50% 46%,rgba(255,255,255,.13),transparent 32%),\n      linear-gradient(180deg,rgba(255,255,255,.035),transparent 26%,rgba(0,0,0,.08) 100%);\n}\n\n#tx-toolbox-scroll-v3 .txv3-logo{\n    position:absolute;\n    z-index:30;\n    top:4.2vh;\n    left:5.5%;\n    width:clamp(190px,15vw,285px);\n}\n#tx-toolbox-scroll-v3 .txv3-logo img{\n    width:100%;height:auto;\n    filter:grayscale(1) brightness(0);\n}\n#tx-toolbox-scroll-v3 .txv3-logo-copy{\n    margin-top:8px;\n    color:rgba(0,0,0,.67);\n    font-family:\"Courier New\",monospace;\n    font-size:9px;font-weight:700;\n    letter-spacing:.29em;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-left-copy{\n    position:absolute;\n    z-index:30;\n    top:15.5%;right:5.5%;\n    padding-right:22px;\n    color:rgba(0,0,0,.75);\n    font-family:\"Courier New\",monospace;\n    font-size:clamp(8px,.65vw,11px);\n    line-height:1.6;font-weight:700;\n    letter-spacing:.18em;text-transform:uppercase;text-align:right;\n}\n#tx-toolbox-scroll-v3 .txv3-left-copy::before{\n    content:\"\";position:absolute;top:0;bottom:0;right:0;width:1px;background:rgba(0,0,0,.58);\n}\n#tx-toolbox-scroll-v3 .txv3-left-bottom{\n    position:absolute;z-index:30;left:5.5%;bottom:4.5%;\n    color:rgba(0,0,0,.76);\n    font-family:\"Courier New\",monospace;\n    font-size:9px;line-height:1.65;font-weight:700;\n    letter-spacing:.17em;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-left-bottom::before{\n    content:\"\";display:block;width:28px;height:2px;margin-bottom:11px;background:rgba(0,0,0,.65);\n}\n\n\/* DISPLAY AREA *\/\n#tx-toolbox-scroll-v3 .txv3-display-wrap{\n    position:absolute;\n    z-index:12;\n    left:50%;top:53%;\n    width:min(88%,880px);\n    height:min(66vh,640px);\n    min-height:500px;\n    transform:translate(-50%,-50%);\n    perspective:1700px;\n}\n#tx-toolbox-scroll-v3 .txv3-display-shadow{\n    position:absolute;\n    left:50%;bottom:3%;\n    width:74%;height:9%;\n    transform:translateX(-50%);\n    border-radius:50%;\n    background:rgba(0,0,0,.24);\n    filter:blur(24px);\n    opacity:.75;\n}\n#tx-toolbox-scroll-v3 .txv3-screen{\n    position:absolute;\n    inset:50% auto auto 50%;\n    width:90%;\n    aspect-ratio:1.55\/1;\n    transform:\n      translate(-50%,-50%)\n      translate3d(0,0,0)\n      scale(1)\n      rotateX(0deg)\n      rotateY(0deg);\n    transform-origin:50% 62%;\n    opacity:0;\n    visibility:hidden;\n    pointer-events:none;\n    border:1px solid rgba(255,255,255,.17);\n    border-radius:18px;\n    overflow:hidden;\n    background:#071014;\n    box-shadow:\n      0 42px 90px rgba(0,0,0,.35),\n      0 0 0 8px rgba(0,0,0,.055),\n      inset 0 1px 0 rgba(255,255,255,.08);\n\n    \/*\n       IMPORTANT: the dashboard is now driven continuously by a\n       requestAnimationFrame scroll controller rather than discrete\n       IntersectionObserver class changes. Removing CSS transitions\n       prevents the browser from repeatedly restarting an animation\n       whenever trackpad\/wheel input changes direction or speed.\n    *\/\n    transition:none;\n    will-change:transform,opacity;\n    backface-visibility:hidden;\n    -webkit-backface-visibility:hidden;\n    transform-style:preserve-3d;\n    contain:paint;\n}\n\n\/* Initial state before the scroll controller takes over. *\/\n#tx-toolbox-scroll-v3 .txv3-screen.is-active{\n    opacity:1;\n    visibility:visible;\n}\n\n\/* fake browser\/device chrome *\/\n#tx-toolbox-scroll-v3 .txv3-appbar{\n    height:54px;\n    padding:0 17px;\n    display:flex;align-items:center;justify-content:space-between;\n    border-bottom:1px solid rgba(255,255,255,.09);\n    background:#091014;\n}\n#tx-toolbox-scroll-v3 .txv3-app-logo{font-size:17px;font-weight:950;letter-spacing:-.02em;}\n#tx-toolbox-scroll-v3 .txv3-app-logo span{color:var(--tx-orange);}\n#tx-toolbox-scroll-v3 .txv3-app-meta{\n    color:#889196;font-family:\"Courier New\",monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-appbody{\n    height:calc(100% - 54px);\n    display:grid;grid-template-columns:92px 1fr;\n}\n#tx-toolbox-scroll-v3 .txv3-appnav{\n    padding:16px 9px;\n    border-right:1px solid rgba(255,255,255,.08);\n    background:#061014;\n}\n#tx-toolbox-scroll-v3 .txv3-navline{\n    height:31px;margin-bottom:7px;padding:0 9px;\n    display:flex;align-items:center;\n    border-radius:5px;\n    color:#798288;font-size:7px;\n}\n#tx-toolbox-scroll-v3 .txv3-navline.active{color:#101010;background:var(--tx-orange);font-weight:900;}\n#tx-toolbox-scroll-v3 .txv3-appmain{padding:20px;overflow:hidden;background:linear-gradient(145deg,#10171a,#080d10);}\n#tx-toolbox-scroll-v3 .txv3-apphead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px;}\n#tx-toolbox-scroll-v3 .txv3-apphead h3{margin:0;color:#fff;font-size:clamp(20px,1.8vw,31px);line-height:1;}\n#tx-toolbox-scroll-v3 .txv3-apphead p{margin:7px 0 0;color:#7e898e;font-size:9px;line-height:1.4;}\n#tx-toolbox-scroll-v3 .txv3-chip{\n    flex:0 0 auto;padding:7px 10px;border:1px solid rgba(255,90,0,.45);color:var(--tx-orange);\n    font-family:\"Courier New\",monospace;font-size:7px;font-weight:900;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-ui-grid{display:grid;gap:10px;}\n#tx-toolbox-scroll-v3 .txv3-ui-grid.cols-3{grid-template-columns:repeat(3,1fr);}\n#tx-toolbox-scroll-v3 .txv3-ui-grid.cols-2{grid-template-columns:repeat(2,1fr);}\n#tx-toolbox-scroll-v3 .txv3-ui-card{\n    position:relative;min-height:78px;padding:13px;\n    border:1px solid rgba(255,255,255,.10);border-radius:7px;background:rgba(255,255,255,.027);\n    overflow:hidden;\n}\n#tx-toolbox-scroll-v3 .txv3-ui-card strong{display:block;color:#fff;font-size:10px;margin-bottom:7px;}\n#tx-toolbox-scroll-v3 .txv3-ui-card small{display:block;color:#768087;font-size:7px;line-height:1.45;}\n#tx-toolbox-scroll-v3 .txv3-ui-card .good{color:var(--tx-green);}\n#tx-toolbox-scroll-v3 .txv3-ui-card .warn{color:var(--tx-orange);}\n#tx-toolbox-scroll-v3 .txv3-row{\n    min-height:45px;margin-top:8px;padding:9px 11px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;\n    border:1px solid rgba(255,255,255,.08);border-radius:5px;background:rgba(255,255,255,.022);\n}\n#tx-toolbox-scroll-v3 .txv3-row strong{color:#dfe2e3;font-size:8px;}\n#tx-toolbox-scroll-v3 .txv3-row span{font-size:7px;color:#838d92;}\n#tx-toolbox-scroll-v3 .txv3-row .status{color:var(--tx-green);font-weight:800;}\n#tx-toolbox-scroll-v3 .txv3-bar{height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:7px;}\n#tx-toolbox-scroll-v3 .txv3-bar i{display:block;height:100%;background:var(--tx-orange);}\n#tx-toolbox-scroll-v3 .txv3-score{\n    width:64px;height:64px;border:2px solid var(--tx-orange);border-radius:50%;display:grid;place-items:center;\n    color:#fff;font-size:20px;font-weight:950;box-shadow:0 0 24px rgba(255,90,0,.15);\n}\n#tx-toolbox-scroll-v3 .txv3-photo{\n    height:95px;border-radius:6px;\n    background:\n      linear-gradient(180deg,transparent,rgba(0,0,0,.35)),\n      url('https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Golden-Construction-Site-at-Sunset.png') center\/cover;\n    filter:grayscale(.2) contrast(1.08);\n}\n#tx-toolbox-scroll-v3 .txv3-stamp{\n    position:absolute;right:10px;bottom:10px;padding:6px 8px;border:1px solid var(--tx-green);color:var(--tx-green);\n    font-family:\"Courier New\",monospace;font-size:7px;font-weight:900;text-transform:uppercase;transform:rotate(-3deg);\n}\n#tx-toolbox-scroll-v3 .txv3-display-label{\n    position:absolute;z-index:22;left:50%;bottom:5.5%;transform:translateX(-50%);\n    width:min(76%,650px);display:flex;align-items:center;justify-content:center;gap:16px;\n    color:rgba(0,0,0,.72);font-family:\"Courier New\",monospace;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-display-label::before,\n#tx-toolbox-scroll-v3 .txv3-display-label::after{content:\"\";height:1px;flex:1;background:rgba(0,0,0,.28);}\n\n\/* ==========================================================\n   RIGHT SCROLLING COLUMN\n   ========================================================== *\/\n#tx-toolbox-scroll-v3 .txv3-steps{position:relative;background:linear-gradient(145deg,#090a0b,#020303);}\n#tx-toolbox-scroll-v3 .txv3-step{\n    position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;\n    padding:9vh clamp(48px,5vw,95px);\n    border-bottom:1px solid rgba(255,255,255,.10);overflow:hidden;isolation:isolate;\n}\n#tx-toolbox-scroll-v3 .txv3-step::before{\n    content:attr(data-number);position:absolute;z-index:0;right:-1vw;bottom:-5vh;\n    color:rgba(255,255,255,.025);font-size:clamp(180px,23vw,420px);line-height:.75;font-weight:950;letter-spacing:-.08em;\n}\n#tx-toolbox-scroll-v3 .txv3-content{position:relative;z-index:2;width:min(650px,100%);}\n#tx-toolbox-scroll-v3 .txv3-system-label{\n    margin-bottom:24px;color:var(--tx-orange);font-family:\"Courier New\",monospace;font-size:9px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-index{\n    margin-bottom:27px;color:#8f969a;font-family:\"Courier New\",monospace;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;\n}\n#tx-toolbox-scroll-v3 .txv3-index span{color:var(--tx-orange);}\n#tx-toolbox-scroll-v3 .txv3-icon{\n    width:74px;height:74px;margin-bottom:30px;display:grid;place-items:center;\n    border:1px solid rgba(255,90,0,.55);color:var(--tx-orange);background:rgba(255,90,0,.025);\n}\n#tx-toolbox-scroll-v3 .txv3-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}\n#tx-toolbox-scroll-v3 .txv3-title{margin:0;color:#fff;font-size:clamp(66px,6vw,110px);line-height:.83;font-weight:950;letter-spacing:-.045em;}\n#tx-toolbox-scroll-v3 .txv3-title span{display:block;color:var(--tx-orange);}\n#tx-toolbox-scroll-v3 .txv3-strap{margin-top:28px;color:#fff;font-size:clamp(20px,1.6vw,29px);line-height:1.2;font-weight:800;}\n#tx-toolbox-scroll-v3 .txv3-copy{max-width:600px;margin:26px 0 30px;color:#a7adaf;font-size:clamp(14px,1vw,17px);line-height:1.65;}\n#tx-toolbox-scroll-v3 .txv3-details{border-top:1px solid rgba(255,255,255,.13);}\n#tx-toolbox-scroll-v3 .txv3-detail{\n    position:relative;padding:17px 0 17px 28px;border-bottom:1px solid rgba(255,255,255,.10);\n    color:#d3d6d7;font-size:clamp(13px,.95vw,16px);line-height:1.3;\n}\n#tx-toolbox-scroll-v3 .txv3-detail::before{\n    content:\"\";position:absolute;left:2px;top:50%;width:8px;height:8px;border:1px solid var(--tx-orange);transform:translateY(-50%) rotate(45deg);\n}\n\n\/* TABLET *\/\n@media(max-width:1000px){\n    #tx-toolbox-scroll-v3 .txv3-layout{display:block;}\n    #tx-toolbox-scroll-v3 .txv3-stage{position:relative;top:auto;height:auto;min-height:760px;}\n    #tx-toolbox-scroll-v3 .txv3-display-wrap{height:520px;min-height:0;top:55%;width:92%;}\n    #tx-toolbox-scroll-v3 .txv3-step{min-height:auto;padding:90px 7vw;}\n    #tx-toolbox-scroll-v3 .txv3-step::before{font-size:clamp(160px,28vw,290px);bottom:0;right:0;}\n}\n@media(max-width:650px){\n    #tx-toolbox-scroll-v3{left:0;width:100%;margin-left:0;}\n    #tx-toolbox-scroll-v3 .txv3-stage{min-height:680px;}\n    #tx-toolbox-scroll-v3 .txv3-logo{top:28px;width:185px;}\n    #tx-toolbox-scroll-v3 .txv3-left-copy{top:105px;font-size:8px;}\n    #tx-toolbox-scroll-v3 .txv3-display-wrap{top:56%;width:96%;height:430px;}\n    #tx-toolbox-scroll-v3 .txv3-screen{width:96%;border-radius:12px;}\n    #tx-toolbox-scroll-v3 .txv3-appbody{grid-template-columns:62px 1fr;}\n    #tx-toolbox-scroll-v3 .txv3-appnav{padding:10px 5px;}\n    #tx-toolbox-scroll-v3 .txv3-navline{padding:0 5px;font-size:5px;height:26px;}\n    #tx-toolbox-scroll-v3 .txv3-appmain{padding:12px;}\n    #tx-toolbox-scroll-v3 .txv3-ui-grid.cols-3{grid-template-columns:1fr 1fr;}\n    #tx-toolbox-scroll-v3 .txv3-display-label{bottom:22px;font-size:7px;}\n    #tx-toolbox-scroll-v3 .txv3-left-bottom{display:none;}\n    #tx-toolbox-scroll-v3 .txv3-step{padding:72px 22px;}\n    #tx-toolbox-scroll-v3 .txv3-icon{width:66px;height:66px;margin-bottom:27px;}\n    #tx-toolbox-scroll-v3 .txv3-icon svg{width:33px;height:33px;}\n    #tx-toolbox-scroll-v3 .txv3-title{font-size:clamp(54px,15vw,76px);}\n    #tx-toolbox-scroll-v3 .txv3-strap{font-size:19px;}\n}\n@media(prefers-reduced-motion:reduce){\n    #tx-toolbox-scroll-v3 .txv3-screen{transition:none!important;}\n}\n<\/style>\n\n<div class=\"txv3-layout\">\n    <aside class=\"txv3-stage\">\n        <div class=\"txv3-logo\">\n            <img decoding=\"async\" src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\" alt=\"TradesX\">\n            <div class=\"txv3-logo-copy\">Built for what's next.<\/div>\n        <\/div>\n        <div class=\"txv3-left-copy\">Same<br>Industry<br>Higher<br>Standards<\/div>\n\n        <div class=\"txv3-display-wrap\" aria-label=\"TradesX platform capability screens\">\n            <div class=\"txv3-display-shadow\"><\/div>\n\n            <!-- 01 CLIENT PORTAL -->\n            <div class=\"txv3-screen is-active\" data-screen=\"0\">\n                <div class=\"txv3-appbar\"><div class=\"txv3-app-logo\">TRADES<span>X<\/span><\/div><div class=\"txv3-app-meta\">Client Portal \/ Live<\/div><\/div>\n                <div class=\"txv3-appbody\">\n                    <div class=\"txv3-appnav\">\n                        <div class=\"txv3-navline active\">Requests<\/div><div class=\"txv3-navline\">Projects<\/div><div class=\"txv3-navline\">Contractors<\/div><div class=\"txv3-navline\">Documents<\/div><div class=\"txv3-navline\">Reports<\/div>\n                    <\/div>\n                    <div class=\"txv3-appmain\">\n                        <div class=\"txv3-apphead\"><div><h3>Request a Job<\/h3><p>Submit work directly to your contractor.<\/p><\/div><div class=\"txv3-chip\">Request captured<\/div><\/div>\n                        <div class=\"txv3-ui-grid cols-3\">\n                            <div class=\"txv3-ui-card\"><strong>1. Issue<\/strong><small>Construction defect<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>2. Location<\/strong><small>Riverside Commercial Tower<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>3. Evidence<\/strong><small class=\"good\">4 photos attached<\/small><\/div>\n                        <\/div>\n                        <div class=\"txv3-row\"><strong>HVAC Package<\/strong><span class=\"status\">Active<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>Fitout Trades<\/strong><span class=\"warn\">Under Review<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>Electrical<\/strong><span>Closed<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 02 AI SCOPE -->\n            <div class=\"txv3-screen is-after\" data-screen=\"1\">\n                <div class=\"txv3-appbar\"><div class=\"txv3-app-logo\">TRADES<span>X<\/span><\/div><div class=\"txv3-app-meta\">AI Scope \/ Draft<\/div><\/div>\n                <div class=\"txv3-appbody\">\n                    <div class=\"txv3-appnav\"><div class=\"txv3-navline\">Request<\/div><div class=\"txv3-navline active\">AI Scope<\/div><div class=\"txv3-navline\">Hazards<\/div><div class=\"txv3-navline\">Review<\/div><div class=\"txv3-navline\">Publish<\/div><\/div>\n                    <div class=\"txv3-appmain\">\n                        <div class=\"txv3-apphead\"><div><h3>Scope Intelligence<\/h3><p>Site evidence converted into a structured job draft.<\/p><\/div><div class=\"txv3-chip\">AI generated<\/div><\/div>\n                        <div class=\"txv3-ui-grid cols-2\">\n                            <div class=\"txv3-ui-card\"><strong>Scope of Work<\/strong><small>Remove damaged wall lining, inspect substrate and reinstate affected area.<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>Severity<\/strong><small class=\"warn\">Medium \/ action required<\/small><div class=\"txv3-bar\"><i style=\"width:66%\"><\/i><\/div><\/div>\n                            <div class=\"txv3-ui-card\"><strong>Potential Hazards<\/strong><small>Dust, overhead work, occupied site<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>Estimated Duration<\/strong><small class=\"good\">1.5 days \/ 2 workers<\/small><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 03 SMART BIDDING -->\n            <div class=\"txv3-screen is-after\" data-screen=\"2\">\n                <div class=\"txv3-appbar\"><div class=\"txv3-app-logo\">TRADES<span>X<\/span><\/div><div class=\"txv3-app-meta\">Smart Bidding \/ Ranked<\/div><\/div>\n                <div class=\"txv3-appbody\">\n                    <div class=\"txv3-appnav\"><div class=\"txv3-navline\">Job<\/div><div class=\"txv3-navline active\">Bids<\/div><div class=\"txv3-navline\">Compare<\/div><div class=\"txv3-navline\">Award<\/div><div class=\"txv3-navline\">History<\/div><\/div>\n                    <div class=\"txv3-appmain\">\n                        <div class=\"txv3-apphead\"><div><h3>Bid Comparison<\/h3><p>Best value rises automatically as bids arrive.<\/p><\/div><div class=\"txv3-score\">92<\/div><\/div>\n                        <div class=\"txv3-row\"><strong>Metro Concreting<\/strong><span class=\"status\">Best Match \u00b7 $18,450<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>BuildRight Services<\/strong><span>Score 87 \u00b7 $17,980<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>Summit Trade Co.<\/strong><span>Score 81 \u00b7 $18,100<\/span><\/div>\n                        <div class=\"txv3-ui-grid cols-3\" style=\"margin-top:12px\">\n                            <div class=\"txv3-ui-card\"><strong>Price<\/strong><small>Weighted 35%<\/small><\/div><div class=\"txv3-ui-card\"><strong>Compliance<\/strong><small class=\"good\">Verified<\/small><\/div><div class=\"txv3-ui-card\"><strong>Performance<\/strong><small>4.9 \/ 5<\/small><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 04 COMPLIANCE GATE -->\n            <div class=\"txv3-screen is-after\" data-screen=\"3\">\n                <div class=\"txv3-appbar\"><div class=\"txv3-app-logo\">TRADES<span>X<\/span><\/div><div class=\"txv3-app-meta\">Compliance \/ Gate<\/div><\/div>\n                <div class=\"txv3-appbody\">\n                    <div class=\"txv3-appnav\"><div class=\"txv3-navline\">Profile<\/div><div class=\"txv3-navline active\">Compliance<\/div><div class=\"txv3-navline\">Licences<\/div><div class=\"txv3-navline\">Insurance<\/div><div class=\"txv3-navline\">ABN<\/div><\/div>\n                    <div class=\"txv3-appmain\">\n                        <div class=\"txv3-apphead\"><div><h3>Compliance Gate<\/h3><p>Only current, verified businesses can move forward.<\/p><\/div><div class=\"txv3-chip\">4 \/ 4 checks<\/div><\/div>\n                        <div class=\"txv3-row\"><strong>White Card<\/strong><span class=\"status\">\u2713 Current<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>Trade Licence<\/strong><span class=\"status\">\u2713 Valid<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>Public Liability<\/strong><span class=\"status\">\u2713 Current<\/span><\/div>\n                        <div class=\"txv3-row\"><strong>ABN Verification<\/strong><span class=\"status\">\u2713 Verified<\/span><\/div>\n                        <div class=\"txv3-ui-card\" style=\"margin-top:12px\"><strong>Automatic Gate<\/strong><small class=\"good\">Eligible to bid. No compliance exceptions detected.<\/small><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 05 SAFETY GATE -->\n            <div class=\"txv3-screen is-after\" data-screen=\"4\">\n                <div class=\"txv3-appbar\"><div class=\"txv3-app-logo\">TRADES<span>X<\/span><\/div><div class=\"txv3-app-meta\">Safety \/ SWMS<\/div><\/div>\n                <div class=\"txv3-appbody\">\n                    <div class=\"txv3-appnav\"><div class=\"txv3-navline\">Job<\/div><div class=\"txv3-navline active\">SWMS<\/div><div class=\"txv3-navline\">Hazards<\/div><div class=\"txv3-navline\">Sign<\/div><div class=\"txv3-navline\">Audit<\/div><\/div>\n                    <div class=\"txv3-appmain\">\n                        <div class=\"txv3-apphead\"><div><h3>Safety Gate<\/h3><p>SWMS reviewed, enhanced and signed before work begins.<\/p><\/div><div class=\"txv3-chip\">Audit ready<\/div><\/div>\n                        <div class=\"txv3-ui-grid cols-2\">\n                            <div class=\"txv3-ui-card\"><strong>Site SWMS<\/strong><small class=\"good\">\u2713 Approved<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>Worker Signatures<\/strong><small class=\"good\">6 \/ 6 complete<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>AI Safety Review<\/strong><small>2 additional controls suggested and accepted<\/small><\/div>\n                            <div class=\"txv3-ui-card\"><strong>Start Gate<\/strong><small class=\"good\">Work authorised<\/small><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 06 CLOSE OUT -->\n            <div class=\"txv3-screen is-after\" data-screen=\"5\">\n                <div class=\"txv3-appbar\"><div class=\"txv3-app-logo\">TRADES<span>X<\/span><\/div><div class=\"txv3-app-meta\">Close Out \/ Complete<\/div><\/div>\n                <div class=\"txv3-appbody\">\n                    <div class=\"txv3-appnav\"><div class=\"txv3-navline\">Job<\/div><div class=\"txv3-navline\">Progress<\/div><div class=\"txv3-navline active\">Close Out<\/div><div class=\"txv3-navline\">Rating<\/div><div class=\"txv3-navline\">History<\/div><\/div>\n                    <div class=\"txv3-appmain\">\n                        <div class=\"txv3-apphead\"><div><h3>Verified Close Out<\/h3><p>Evidence, sign off and performance captured in one record.<\/p><\/div><div class=\"txv3-chip\">Completed<\/div><\/div>\n                        <div class=\"txv3-ui-grid cols-2\">\n                            <div><div class=\"txv3-photo\"><\/div><div class=\"txv3-ui-card\" style=\"margin-top:8px\"><strong>Before + After<\/strong><small>8 completion photos uploaded<\/small><\/div><\/div>\n                            <div class=\"txv3-ui-card\" style=\"min-height:181px\"><strong>Completion Record<\/strong><small class=\"good\">\u2713 Primary Contractor signed off<\/small><br><small>Subcontractor rating: 4.9 \/ 5<\/small><br><small>Closed 14 Sep 2026<\/small><div class=\"txv3-stamp\">Verified<\/div><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"txv3-display-label\"><span class=\"txv3-display-current\">01 \/ Client Portal<\/span><\/div>\n        <div class=\"txv3-left-bottom\">Real Work<br>Real People<br>Real Impact<\/div>\n    <\/aside>\n\n    <div class=\"txv3-steps\">\n        <article class=\"txv3-step\" data-number=\"01\" data-step=\"0\">\n            <div class=\"txv3-content\">\n                <div class=\"txv3-system-label\">The TradesX Platform<\/div>\n                <div class=\"txv3-index\"><span>01<\/span> \/ Client Portal<\/div>\n                <div class=\"txv3-icon\"><svg viewBox=\"0 0 48 48\"><rect x=\"7\" y=\"6\" width=\"34\" height=\"36\" rx=\"2\"><\/rect><path d=\"M13 14h22\"><\/path><path d=\"M13 21h14\"><\/path><path d=\"M13 29h9\"><\/path><path d=\"M29 31l4 4 8-9\"><\/path><\/svg><\/div>\n                <h2 class=\"txv3-title\">Client<span>Portal.<\/span><\/h2>\n                <div class=\"txv3-strap\">Submit and track jobs from request to completion.<\/div>\n                <p class=\"txv3-copy\">Give clients a direct way to request work, provide site information and follow progress without relying on calls, emails or disconnected updates.<\/p>\n                <div class=\"txv3-details\"><div class=\"txv3-detail\">Structured job requests<\/div><div class=\"txv3-detail\">Photos and location captured upfront<\/div><div class=\"txv3-detail\">Live request and job status<\/div><div class=\"txv3-detail\">One trail from request through close out<\/div><\/div>\n            <\/div>\n        <\/article>\n        <article class=\"txv3-step\" data-number=\"02\" data-step=\"1\">\n            <div class=\"txv3-content\">\n                <div class=\"txv3-index\"><span>02<\/span> \/ AI Scope<\/div>\n                <div class=\"txv3-icon\"><svg viewBox=\"0 0 48 48\"><path d=\"M24 4l3.5 10.5L38 18l-10.5 3.5L24 32l-3.5-10.5L10 18l10.5-3.5z\"><\/path><path d=\"M39 29l1.8 5.2L46 36l-5.2 1.8L39 43l-1.8-5.2L32 36l5.2-1.8z\"><\/path><path d=\"M8 29l1.2 3.8L13 34l-3.8 1.2L8 39l-1.2-3.8L3 34l3.8-1.2z\"><\/path><\/svg><\/div>\n                <h2 class=\"txv3-title\">AI<span>Scope.<\/span><\/h2>\n                <div class=\"txv3-strap\">Scope, severity, hazards, duration auto drafted.<\/div>\n                <p class=\"txv3-copy\">Site photos and request details become a structured starting point for the job. TradesX uses AI to draft the information needed to move from issue to action faster.<\/p>\n                <div class=\"txv3-details\"><div class=\"txv3-detail\">Analyse submitted site photos<\/div><div class=\"txv3-detail\">Draft scope of work<\/div><div class=\"txv3-detail\">Identify severity and potential hazards<\/div><div class=\"txv3-detail\">Estimate expected work duration<\/div><\/div>\n            <\/div>\n        <\/article>\n        <article class=\"txv3-step\" data-number=\"03\" data-step=\"2\">\n            <div class=\"txv3-content\">\n                <div class=\"txv3-index\"><span>03<\/span> \/ Smart Bidding<\/div>\n                <div class=\"txv3-icon\"><svg viewBox=\"0 0 48 48\"><path d=\"M8 39h32\"><\/path><path d=\"M12 33l8-8 6 5 11-14\"><\/path><path d=\"M30 16h7v7\"><\/path><circle cx=\"12\" cy=\"33\" r=\"2\"><\/circle><circle cx=\"20\" cy=\"25\" r=\"2\"><\/circle><circle cx=\"26\" cy=\"30\" r=\"2\"><\/circle><\/svg><\/div>\n                <h2 class=\"txv3-title\">Smart<span>Bidding.<\/span><\/h2>\n                <div class=\"txv3-strap\">Auto ranked. Best value rises to the top.<\/div>\n                <p class=\"txv3-copy\">Every eligible bid enters the same structured comparison. TradesX scores and ranks responses as they arrive so decision makers can see value, not simply the lowest number.<\/p>\n                <div class=\"txv3-details\"><div class=\"txv3-detail\">RFQs sent to eligible subcontractors<\/div><div class=\"txv3-detail\">Bids ranked as they arrive<\/div><div class=\"txv3-detail\">Structured value comparison<\/div><div class=\"txv3-detail\">Faster award decisions<\/div><\/div>\n            <\/div>\n        <\/article>\n        <article class=\"txv3-step\" data-number=\"04\" data-step=\"3\">\n            <div class=\"txv3-content\">\n                <div class=\"txv3-index\"><span>04<\/span> \/ Compliance Gate<\/div>\n                <div class=\"txv3-icon\"><svg viewBox=\"0 0 48 48\"><path d=\"M24 4l15 6v11c0 10-6 18-15 23C15 39 9 31 9 21V10z\"><\/path><path d=\"M17 24h14\"><\/path><path d=\"M24 17v14\"><\/path><\/svg><\/div>\n                <h2 class=\"txv3-title\">Compliance<span>Gate.<\/span><\/h2>\n                <div class=\"txv3-strap\">Expired? Blocked. Automatically.<\/div>\n                <p class=\"txv3-copy\">Compliance is checked before procurement moves forward. If required licences, insurance or business information is not current, that subcontractor does not pass the gate.<\/p>\n                <div class=\"txv3-details\"><div class=\"txv3-detail\">Licence validation<\/div><div class=\"txv3-detail\">Insurance status<\/div><div class=\"txv3-detail\">Verified ABN requirements<\/div><div class=\"txv3-detail\">Non compliant bidders automatically blocked<\/div><\/div>\n            <\/div>\n        <\/article>\n        <article class=\"txv3-step\" data-number=\"05\" data-step=\"4\">\n            <div class=\"txv3-content\">\n                <div class=\"txv3-index\"><span>05<\/span> \/ Safety Gate<\/div>\n                <div class=\"txv3-icon\"><svg viewBox=\"0 0 48 48\"><path d=\"M13 5h22v38H13z\"><\/path><path d=\"M18 14h12\"><\/path><path d=\"M18 21h12\"><\/path><path d=\"M18 28h7\"><\/path><path d=\"M28 34l3 3 7-8\"><\/path><\/svg><\/div>\n                <h2 class=\"txv3-title\">Safety<span>Gate.<\/span><\/h2>\n                <div class=\"txv3-strap\">SWMS signed. AI enhanced. Audit ready.<\/div>\n                <p class=\"txv3-copy\">Safety documentation becomes part of the job workflow rather than a separate paper exercise. SWMS can be strengthened, reviewed and digitally signed before work begins.<\/p>\n                <div class=\"txv3-details\"><div class=\"txv3-detail\">Trade specific SWMS workflow<\/div><div class=\"txv3-detail\">AI assisted SWMS enhancement<\/div><div class=\"txv3-detail\">Digital acknowledgement and signing<\/div><div class=\"txv3-detail\">Complete safety audit trail<\/div><\/div>\n            <\/div>\n        <\/article>\n        <article class=\"txv3-step\" data-number=\"06\" data-step=\"5\">\n            <div class=\"txv3-content\">\n                <div class=\"txv3-index\"><span>06<\/span> \/ Close Out<\/div>\n                <div class=\"txv3-icon\"><svg viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"18\"><\/circle><path d=\"M15 24l6 6 12-14\"><\/path><path d=\"M33 34l7 7\"><\/path><\/svg><\/div>\n                <h2 class=\"txv3-title\">Close<span>Out.<\/span><\/h2>\n                <div class=\"txv3-strap\">Photos. Ratings. Sign off. Complete.<\/div>\n                <p class=\"txv3-copy\">Completion is verified with evidence instead of assumed from an email or phone call. TradesX captures the final proof, feedback and approval needed to properly close the job.<\/p>\n                <div class=\"txv3-details\"><div class=\"txv3-detail\">Before and after photo evidence<\/div><div class=\"txv3-detail\">Subcontractor ratings<\/div><div class=\"txv3-detail\">Primary Contractor sign off<\/div><div class=\"txv3-detail\">Verified job completion history<\/div><\/div>\n            <\/div>\n        <\/article>\n    <\/div>\n<\/div>\n\n<script>\n(() => {\n    const root = document.querySelector('#tx-toolbox-scroll-v3');\n    if(!root || root.dataset.txDashboardShowcase === '2') return;\n    root.dataset.txDashboardShowcase = '2';\n\n    const steps = [...root.querySelectorAll('.txv3-step')];\n    const screens = [...root.querySelectorAll('.txv3-screen')];\n    const currentLabel = root.querySelector('.txv3-display-current');\n    const shadow = root.querySelector('.txv3-display-shadow');\n\n    if(!steps.length || !screens.length) return;\n\n    const labels = [\n        '01 \/ Client Portal',\n        '02 \/ AI Scope',\n        '03 \/ Smart Bidding',\n        '04 \/ Compliance Gate',\n        '05 \/ Safety Gate',\n        '06 \/ Close Out'\n    ];\n\n    const clamp = (value,min,max) => Math.min(max,Math.max(min,value));\n    const mix = (a,b,t) => a + (b-a) * t;\n    const smoothstep = t => t * t * (3 - 2 * t);\n\n    let targetIndex = 0;\n    let renderedIndex = 0;\n    let raf = 0;\n    let lastTime = performance.now();\n    let firstFrame = true;\n    let lastLabelIndex = -1;\n\n    \/*\n       Convert the actual viewport position of the six copy panels into\n       one continuous 0 -> 5 dashboard index. The dashboard therefore\n       follows the scroll position rather than waiting for an observer\n       threshold to fire.\n    *\/\n    function readScrollIndex(){\n        if(window.innerWidth <= 1000) return 0;\n\n        const viewportHeight =\n            window.visualViewport?.height ||\n            window.innerHeight;\n\n        const focusY = viewportHeight * 0.50;\n        const centres = steps.map(step => {\n            const rect = step.getBoundingClientRect();\n            return rect.top + rect.height * 0.50;\n        });\n\n        if(focusY <= centres[0]) return 0;\n\n        const last = centres.length - 1;\n        if(focusY >= centres[last]) return last;\n\n        for(let i = 0; i < last; i++){\n            const a = centres[i];\n            const b = centres[i + 1];\n\n            if(focusY >= a && focusY <= b){\n                const span = Math.max(1,b-a);\n                const local = clamp((focusY-a)\/span,0,1);\n\n                \/* Ease the handover slightly so each screen gets a\n                   confident hold around the centre of its copy panel. *\/\n                const eased = smoothstep(local);\n                return i + eased;\n            }\n        }\n\n        return 0;\n    }\n\n    function updateLabel(index){\n        const rounded = clamp(Math.round(index),0,labels.length-1);\n        if(rounded === lastLabelIndex) return;\n        lastLabelIndex = rounded;\n        if(currentLabel) currentLabel.textContent = labels[rounded] || '';\n    }\n\n    function render(index){\n        const base = Math.floor(index);\n        const fraction = clamp(index-base,0,1);\n\n        screens.forEach((screen,i) => {\n            let opacity = 0;\n\n            if(i === base){\n                opacity = 1 - fraction;\n            }else if(i === base + 1){\n                opacity = fraction;\n            }else if(index >= screens.length - 1 && i === screens.length - 1){\n                opacity = 1;\n            }\n\n            \/* Keep the incoming and outgoing faces physically close to\n               the same plane. This removes the old jump but still gives\n               the screen change a subtle premium depth movement. *\/\n            const distance = i - index;\n            const absDistance = Math.abs(distance);\n            const visibleDistance = Math.min(absDistance,1);\n\n            const x = distance * 34;\n            const y = visibleDistance * 16;\n            const z = -visibleDistance * 22;\n            const scale = 1 - visibleDistance * 0.018;\n            const rotateY = distance * -3.2;\n            const rotateX = visibleDistance * 1.15;\n\n            screen.style.opacity = opacity.toFixed(4);\n            screen.style.visibility = opacity > 0.002 ? 'visible' : 'hidden';\n            screen.style.zIndex = String(30 - Math.round(absDistance * 4));\n            screen.style.transform = `\n                translate(-50%,-50%)\n                translate3d(${x.toFixed(2)}px,${y.toFixed(2)}px,${z.toFixed(2)}px)\n                scale(${scale.toFixed(5)})\n                rotateX(${rotateX.toFixed(2)}deg)\n                rotateY(${rotateY.toFixed(2)}deg)\n            `;\n\n            screen.classList.remove('is-active','is-before','is-after');\n        });\n\n        if(shadow){\n            const pulse = Math.sin(fraction * Math.PI);\n            const shadowScale = 1 - pulse * 0.045;\n            const shadowOpacity = 0.75 - pulse * 0.11;\n            shadow.style.transform = `translateX(-50%) scale(${shadowScale.toFixed(4)})`;\n            shadow.style.opacity = shadowOpacity.toFixed(3);\n        }\n\n        updateLabel(index);\n    }\n\n    function frame(now){\n        raf = 0;\n\n        if(window.innerWidth <= 1000){\n            renderedIndex = 0;\n            targetIndex = 0;\n            render(0);\n            return;\n        }\n\n        targetIndex = readScrollIndex();\n\n        if(firstFrame){\n            renderedIndex = targetIndex;\n            firstFrame = false;\n        }\n\n        const dt = Math.min(64,Math.max(1,now-lastTime));\n        lastTime = now;\n\n        \/*\n           Exponential damping is frame-rate independent and removes the\n           wheel\/trackpad stepping that caused the old dashboard jerk.\n           105ms gives a smooth cinematic follow without feeling delayed.\n        *\/\n        const follow = 1 - Math.exp(-dt \/ 105);\n        renderedIndex += (targetIndex-renderedIndex) * follow;\n\n        if(Math.abs(targetIndex-renderedIndex) < 0.00035){\n            renderedIndex = targetIndex;\n        }\n\n        render(renderedIndex);\n\n        if(Math.abs(targetIndex-renderedIndex) > 0.00035){\n            raf = requestAnimationFrame(frame);\n        }\n    }\n\n    function wake(){\n        targetIndex = readScrollIndex();\n        if(!raf){\n            lastTime = performance.now();\n            raf = requestAnimationFrame(frame);\n        }\n    }\n\n    \/* Initial paint. *\/\n    render(0);\n\n    window.addEventListener('scroll',wake,{passive:true});\n    window.addEventListener('resize',() => {\n        firstFrame = true;\n        wake();\n    });\n\n    document.addEventListener('visibilitychange',() => {\n        if(!document.hidden) wake();\n    });\n\n    wake();\n})();\n<\/script>\n<\/section>\n\n\n<!-- =========================================================\n     05 \u2014 AUTOMATION ENGINE\n     ========================================================= -->\n<section id=\"tx-automation-engine\">\n\n<style>\n\n\/* =========================================================\n   TRADESX \u2014 AUTOMATION ENGINE\n   ALIGNED CARD VERSION\n   ========================================================= *\/\n\n#tx-automation-engine{\n    --tx-orange:#ff5a00;\n    --tx-orange-hot:#ff6700;\n    --tx-black:#040506;\n    --tx-panel:#0c1114;\n    --tx-white:#f4f4f1;\n    --tx-muted:#a4a9ac;\n    --tx-green:#32d17c;\n\n    position:relative;\n    left:50%;\n\n    width:100vw;\n    max-width:none!important;\n    min-height:100vh;\n\n    margin-left:-50vw;\n\n    overflow:hidden;\n\n    color:#fff;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    background:#050607;\n}\n\n#tx-automation-engine *,\n#tx-automation-engine *::before,\n#tx-automation-engine *::after{\n    box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n   ========================================================= *\/\n\n#tx-automation-engine .txae-bg{\n    position:absolute;\n    inset:-3%;\n    z-index:0;\n\n    background-image:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\");\n\n    background-size:cover;\n    background-position:center;\n\n    filter:\n        grayscale(1)\n        brightness(.52)\n        contrast(1.17);\n\n    transform:scale(1.05);\n}\n\n\n#tx-automation-engine .txae-shade{\n    position:absolute;\n    inset:0;\n    z-index:1;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(3,5,6,.38) 0%,\n            rgba(3,5,6,.15) 28%,\n            rgba(3,5,6,.25) 55%,\n            rgba(3,5,6,.78) 100%\n        ),\n        radial-gradient(\n            ellipse at 50% 38%,\n            rgba(0,0,0,.02) 0%,\n            rgba(0,0,0,.12) 48%,\n            rgba(0,0,0,.55) 100%\n        );\n}\n\n\n#tx-automation-engine .txae-vignette{\n    position:absolute;\n    inset:0;\n    z-index:2;\n\n    pointer-events:none;\n\n    box-shadow:\n        inset 0 0 180px rgba(0,0,0,.58);\n}\n\n\n\/* =========================================================\n   SHELL\n   ========================================================= *\/\n\n#tx-automation-engine .txae-shell{\n    position:relative;\n    z-index:5;\n\n    width:min(1760px,95vw);\n    min-height:100vh;\n\n    margin:0 auto;\n\n    padding:\n        34px\n        0\n        36px;\n\n    display:flex;\n    flex-direction:column;\n}\n\n\n\/* =========================================================\n   LOGO\n   ========================================================= *\/\n\n#tx-automation-engine .txae-logo{\n    position:absolute;\n\n    top:35px;\n    left:0;\n\n    width:\n        clamp(\n            130px,\n            11vw,\n            190px\n        );\n}\n\n\n#tx-automation-engine .txae-logo img{\n    display:block;\n\n    width:100%;\n    height:auto;\n}\n\n\n\/* =========================================================\n   MICRO COPY\n   ========================================================= *\/\n\n#tx-automation-engine .txae-micro{\n    position:absolute;\n\n    z-index:8;\n\n    color:\n        rgba(255,255,255,.75);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:9px;\n    line-height:1.55;\n\n    font-weight:700;\n\n    letter-spacing:.17em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-automation-engine .txae-micro-left{\n    top:78px;\n    left:0;\n\n    padding-left:26px;\n}\n\n\n#tx-automation-engine .txae-micro-left::before{\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:-10px;\n\n    width:2px;\n    height:96px;\n\n    background:var(--tx-orange);\n}\n\n\n#tx-automation-engine .txae-micro-left::after{\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:-10px;\n\n    width:25px;\n    height:2px;\n\n    background:var(--tx-orange);\n}\n\n\n#tx-automation-engine .txae-micro-right{\n    top:34px;\n    right:0;\n\n    padding-right:25px;\n\n    text-align:right;\n}\n\n\n#tx-automation-engine .txae-micro-right::before{\n    content:\"\";\n\n    position:absolute;\n\n    right:0;\n    top:-2px;\n\n    width:2px;\n    height:59px;\n\n    background:var(--tx-orange);\n}\n\n\n#tx-automation-engine .txae-micro-right::after{\n    content:\"\";\n\n    position:absolute;\n\n    right:0;\n    top:-2px;\n\n    width:24px;\n    height:2px;\n\n    background:var(--tx-orange);\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n#tx-automation-engine .txae-heading{\n    position:relative;\n\n    width:min(920px,76vw);\n\n    margin:\n        clamp(80px,10vh,112px)\n        auto\n        0;\n\n    text-align:center;\n\n    opacity:0;\n\n    transform:\n        translateY(35px);\n\n    transition:\n        opacity .8s ease,\n        transform .8s cubic-bezier(.2,.75,.2,1);\n}\n\n\n#tx-automation-engine.is-visible .txae-heading{\n    opacity:1;\n\n    transform:\n        translateY(0);\n}\n\n\n#tx-automation-engine .txae-kicker{\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:16px;\n\n    margin-bottom:17px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:\n        clamp(\n            10px,\n            .8vw,\n            13px\n        );\n\n    font-weight:900;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-automation-engine .txae-kicker::before,\n#tx-automation-engine .txae-kicker::after{\n    content:\"\";\n\n    width:34px;\n    height:5px;\n\n    background:\n        repeating-linear-gradient(\n            90deg,\n            var(--tx-orange) 0,\n            var(--tx-orange) 9px,\n            transparent 9px,\n            transparent 13px\n        );\n\n    transform:skewX(-24deg);\n}\n\n\n#tx-automation-engine .txae-heading h2{\n    margin:0;\n\n    color:var(--tx-white);\n\n    font-size:\n        clamp(\n            54px,\n            6.2vw,\n            108px\n        );\n\n    line-height:.82;\n\n    font-weight:950;\n\n    letter-spacing:-.045em;\n\n    text-shadow:\n        0\n        10px\n        35px\n        rgba(0,0,0,.32);\n}\n\n\n#tx-automation-engine .txae-heading h2 span{\n    display:block;\n\n    color:var(--tx-orange);\n}\n\n\n#tx-automation-engine .txae-heading p{\n    max-width:720px;\n\n    margin:\n        19px\n        auto\n        0;\n\n    color:\n        rgba(255,255,255,.76);\n\n    font-size:\n        clamp(\n            15px,\n            1.16vw,\n            21px\n        );\n\n    line-height:1.45;\n}\n\n\n\/* =========================================================\n   WATCH VIDEO\n   ========================================================= *\/\n\n#tx-automation-engine .txae-watch{\n    margin-top:26px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:20px;\n}\n\n\n#tx-automation-engine .txae-play{\n    width:72px;\n    height:72px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        2px solid\n        var(--tx-orange);\n\n    border-radius:50%;\n\n    background:\n        rgba(2,4,5,.46);\n\n    backdrop-filter:\n        blur(8px);\n\n    box-shadow:\n        0\n        14px\n        30px\n        rgba(0,0,0,.28);\n\n    transition:\n        transform .25s ease,\n        background .25s ease;\n}\n\n\n#tx-automation-engine .txae-play:hover{\n    transform:scale(1.07);\n\n    background:\n        rgba(255,90,0,.12);\n}\n\n\n#tx-automation-engine .txae-play span{\n    width:0;\n    height:0;\n\n    margin-left:5px;\n\n    border-top:\n        10px solid transparent;\n\n    border-bottom:\n        10px solid transparent;\n\n    border-left:\n        16px solid #fff;\n}\n\n\n#tx-automation-engine .txae-watch-copy{\n    color:#fff;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:10px;\n\n    font-weight:900;\n\n    letter-spacing:.18em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-automation-engine .txae-watch-copy span{\n    color:var(--tx-orange);\n\n    font-size:18px;\n\n    vertical-align:middle;\n}\n\n\n\/* =========================================================\n   SIX CARD FLOW\n   ========================================================= *\/\n\n#tx-automation-engine .txae-flow{\n    position:relative;\n\n    width:100%;\n\n    margin-top:\n        clamp(\n            30px,\n            4.5vh,\n            50px\n        );\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            6,\n            minmax(0,1fr)\n        );\n\n    gap:18px;\n\n    align-items:stretch;\n}\n\n\n\/* =========================================================\n   CARD\n   IMPORTANT:\n   FIXED INTERNAL ROWS KEEP ALL SIX CARDS ALIGNED\n   ========================================================= *\/\n\n#tx-automation-engine .txae-card{\n    position:relative;\n\n    height:292px;\n    min-height:292px;\n\n    padding:\n        16px\n        16px\n        15px;\n\n    display:grid;\n\n    grid-template-rows:\n        18px\n        38px\n        44px\n        58px\n        70px;\n\n    row-gap:8px;\n\n    align-content:start;\n\n    border:\n        1px solid\n        rgba(255,255,255,.17);\n\n    border-radius:10px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(12,18,21,.94),\n            rgba(6,10,12,.95)\n        );\n\n    box-shadow:\n        0\n        18px\n        38px\n        rgba(0,0,0,.30);\n\n    backdrop-filter:\n        blur(12px);\n\n    opacity:0;\n\n    transform:\n        translateY(34px);\n\n    transition:\n        opacity .65s ease,\n        transform .65s cubic-bezier(.2,.75,.2,1),\n        border-color .25s ease;\n}\n\n\n#tx-automation-engine.is-visible .txae-card{\n    opacity:1;\n\n    transform:\n        translateY(0);\n}\n\n\n#tx-automation-engine.is-visible .txae-card:nth-child(1){\n    transition-delay:.08s;\n}\n\n#tx-automation-engine.is-visible .txae-card:nth-child(2){\n    transition-delay:.16s;\n}\n\n#tx-automation-engine.is-visible .txae-card:nth-child(3){\n    transition-delay:.24s;\n}\n\n#tx-automation-engine.is-visible .txae-card:nth-child(4){\n    transition-delay:.32s;\n}\n\n#tx-automation-engine.is-visible .txae-card:nth-child(5){\n    transition-delay:.40s;\n}\n\n#tx-automation-engine.is-visible .txae-card:nth-child(6){\n    transition-delay:.48s;\n}\n\n\n#tx-automation-engine .txae-card:hover{\n    border-color:\n        rgba(255,90,0,.58);\n}\n\n\n\/* =========================================================\n   NUMBER\n   ========================================================= *\/\n\n#tx-automation-engine .txae-number{\n    grid-row:1;\n\n    margin:0;\n\n    display:flex;\n\n    align-items:flex-start;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:12px;\n\n    line-height:1;\n\n    font-weight:900;\n}\n\n\n\/* =========================================================\n   ICON\n   ========================================================= *\/\n\n#tx-automation-engine .txae-icon{\n    grid-row:2;\n\n    width:36px;\n    height:36px;\n\n    margin:0;\n\n    display:grid;\n\n    place-items:center;\n}\n\n\n#tx-automation-engine .txae-icon svg{\n    width:31px;\n    height:31px;\n\n    fill:none;\n\n    stroke:var(--tx-orange);\n\n    stroke-width:1.8;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n\/* =========================================================\n   TITLE\n   EVERY TITLE GETS SAME 44PX ROW\n   ========================================================= *\/\n\n#tx-automation-engine .txae-card h3{\n    grid-row:3;\n\n    margin:0;\n\n    height:44px;\n\n    display:flex;\n\n    align-items:flex-start;\n\n    overflow:hidden;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            14px,\n            1.03vw,\n            18px\n        );\n\n    line-height:1.18;\n\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   BODY\n   EVERY BODY GETS SAME 58PX ROW\n   ========================================================= *\/\n\n#tx-automation-engine .txae-card > p{\n    grid-row:4;\n\n    margin:0;\n\n    height:58px;\n\n    overflow:hidden;\n\n    color:\n        rgba(255,255,255,.66);\n\n    font-size:\n        clamp(\n            11px,\n            .75vw,\n            13px\n        );\n\n    line-height:1.42;\n}\n\n\n\/* =========================================================\n   BOTTOM VISUAL\n   NO LONGER ABSOLUTE\n   ALL VISUALS NOW LINE UP\n   ========================================================= *\/\n\n#tx-automation-engine .txae-card-visual{\n    grid-row:5;\n\n    position:relative;\n\n    left:auto;\n    right:auto;\n    bottom:auto;\n\n    width:100%;\n    height:70px;\n    min-height:70px;\n\n    margin:0;\n\n    align-self:end;\n\n    overflow:hidden;\n\n    border:\n        1px solid\n        rgba(255,255,255,.14);\n\n    border-radius:6px;\n\n    background:\n        rgba(255,255,255,.03);\n}\n\n\n\/* =========================================================\n   REQUEST PHOTO\n   ========================================================= *\/\n\n#tx-automation-engine .txae-photo{\n    position:absolute;\n\n    inset:0;\n\n    background-image:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\");\n\n    background-size:cover;\n\n    background-position:center;\n\n    filter:\n        grayscale(1)\n        brightness(.60);\n}\n\n\n#tx-automation-engine .txae-photo-label{\n    position:absolute;\n\n    left:7px;\n    bottom:6px;\n\n    padding:\n        4px\n        7px;\n\n    color:#fff;\n\n    background:\n        rgba(0,0,0,.78);\n\n    border-radius:4px;\n\n    font-size:9px;\n}\n\n\n\/* =========================================================\n   AI SCOPE\n   ========================================================= *\/\n\n#tx-automation-engine .txae-scope-lines{\n    position:absolute;\n\n    inset:9px;\n\n    opacity:.62;\n\n    background:\n\n        linear-gradient(\n            90deg,\n            transparent 0 15%,\n            rgba(255,90,0,.45) 15% 16%,\n            transparent 16% 48%,\n            rgba(255,90,0,.30) 48% 49%,\n            transparent 49%\n        ),\n\n        repeating-linear-gradient(\n            0deg,\n            rgba(255,255,255,.18) 0 1px,\n            transparent 1px 12px\n        );\n}\n\n\n#tx-automation-engine .txae-ready{\n    position:absolute;\n\n    left:9px;\n    bottom:7px;\n\n    color:var(--tx-green);\n\n    font-size:9px;\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   COMPLIANCE\n   ========================================================= *\/\n\n#tx-automation-engine .txae-checks{\n    height:100%;\n\n    padding:\n        8px\n        10px;\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n}\n\n\n#tx-automation-engine .txae-check{\n    margin-bottom:4px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    color:\n        rgba(255,255,255,.75);\n\n    font-size:8.5px;\n}\n\n\n#tx-automation-engine .txae-check:last-child{\n    margin-bottom:0;\n}\n\n\n#tx-automation-engine .txae-check i{\n    flex:\n        0\n        0\n        14px;\n\n    width:14px;\n    height:14px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        1px solid\n        var(--tx-green);\n\n    border-radius:50%;\n\n    color:var(--tx-green);\n\n    font-style:normal;\n\n    font-size:8px;\n}\n\n\n\/* =========================================================\n   SUBCONTRACTOR MATCH\n   ========================================================= *\/\n\n#tx-automation-engine .txae-subcontractor{\n    height:100%;\n\n    padding:\n        8px\n        10px;\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:center;\n}\n\n\n#tx-automation-engine .txae-person{\n    display:flex;\n\n    align-items:center;\n\n    gap:9px;\n}\n\n\n#tx-automation-engine .txae-avatar{\n    width:27px;\n    height:27px;\n\n    flex:\n        0\n        0\n        27px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    background:\n        linear-gradient(\n            145deg,\n            #50575b,\n            #1e2224\n        );\n\n    color:#fff;\n\n    font-size:8px;\n\n    font-weight:800;\n}\n\n\n#tx-automation-engine .txae-person strong{\n    display:block;\n\n    color:#fff;\n\n    font-size:9px;\n}\n\n\n#tx-automation-engine .txae-stars{\n    margin-top:3px;\n\n    color:var(--tx-orange);\n\n    font-size:9px;\n\n    letter-spacing:1px;\n}\n\n\n#tx-automation-engine .txae-best{\n    display:inline-block;\n\n    margin-top:5px;\n\n    color:var(--tx-orange);\n\n    font-size:9px;\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   SWMS\n   ========================================================= *\/\n\n#tx-automation-engine .txae-approved{\n    width:100%;\n    height:100%;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:10px;\n\n    color:#fff;\n\n    font-size:10px;\n\n    font-weight:700;\n}\n\n\n#tx-automation-engine .txae-doc{\n    width:25px;\n    height:31px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        1px solid\n        rgba(255,255,255,.38);\n\n    border-radius:3px;\n\n    font-size:8px;\n}\n\n\n#tx-automation-engine .txae-approved span{\n    color:var(--tx-green);\n}\n\n\n\/* =========================================================\n   UPDATE\n   ========================================================= *\/\n\n#tx-automation-engine .txae-update-image{\n    position:absolute;\n\n    inset:\n        0\n        48%\n        0\n        0;\n\n    background-image:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\");\n\n    background-size:cover;\n\n    background-position:center;\n\n    filter:\n        grayscale(1)\n        brightness(.64);\n}\n\n\n#tx-automation-engine .txae-update-copy{\n    position:absolute;\n\n    top:50%;\n    right:8px;\n\n    width:43%;\n\n    transform:\n        translateY(-50%);\n\n    color:#fff;\n\n    font-size:8px;\n\n    line-height:1.35;\n}\n\n\n#tx-automation-engine .txae-update-copy span{\n    display:block;\n\n    margin-top:4px;\n\n    color:var(--tx-green);\n}\n\n\n\/* =========================================================\n   ARROWS\n   ALIGN WITH EACH CARD CENTRE\n   ========================================================= *\/\n\n#tx-automation-engine .txae-arrow{\n    position:absolute;\n\n    z-index:15;\n\n    top:50%;\n    right:-18px;\n\n    width:18px;\n    height:2px;\n\n    background:var(--tx-orange);\n\n    transform:\n        translateY(-50%);\n}\n\n\n#tx-automation-engine .txae-arrow::after{\n    content:\"\";\n\n    position:absolute;\n\n    top:-4px;\n    right:-1px;\n\n    width:8px;\n    height:8px;\n\n    border-top:\n        2px solid\n        var(--tx-orange);\n\n    border-right:\n        2px solid\n        var(--tx-orange);\n\n    transform:rotate(45deg);\n}\n\n\n#tx-automation-engine .txae-card:last-child .txae-arrow{\n    display:none;\n}\n\n\n\/* =========================================================\n   BOTTOM\n   ========================================================= *\/\n\n#tx-automation-engine .txae-bottom{\n    position:relative;\n\n    margin-top:auto;\n\n    padding-top:28px;\n\n    display:flex;\n\n    align-items:flex-end;\n    justify-content:space-between;\n\n    color:\n        rgba(255,255,255,.74);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:9px;\n\n    line-height:1.55;\n\n    letter-spacing:.16em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-automation-engine .txae-bottom-left,\n#tx-automation-engine .txae-bottom-right{\n    position:relative;\n\n    padding-left:20px;\n}\n\n\n#tx-automation-engine .txae-bottom-left::before,\n#tx-automation-engine .txae-bottom-right::before{\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:0;\n\n    width:2px;\n    height:52px;\n\n    background:var(--tx-orange);\n}\n\n\n#tx-automation-engine .txae-bottom-right{\n    padding-left:0;\n    padding-right:20px;\n\n    text-align:right;\n}\n\n\n#tx-automation-engine .txae-bottom-right::before{\n    left:auto;\n    right:0;\n}\n\n\n\/* =========================================================\n   SCROLL\n   ========================================================= *\/\n\n#tx-automation-engine .txae-scroll{\n    position:absolute;\n\n    left:50%;\n    bottom:24px;\n\n    transform:\n        translateX(-50%);\n\n    text-align:center;\n\n    color:\n        rgba(255,255,255,.70);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:8px;\n\n    letter-spacing:.17em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-automation-engine .txae-mouse{\n    position:relative;\n\n    display:block;\n\n    width:18px;\n    height:29px;\n\n    margin:\n        0\n        auto\n        7px;\n\n    border:\n        1px solid\n        var(--tx-orange);\n\n    border-radius:12px;\n}\n\n\n#tx-automation-engine .txae-mouse::before{\n    content:\"\";\n\n    position:absolute;\n\n    top:5px;\n    left:50%;\n\n    width:2px;\n    height:5px;\n\n    background:var(--tx-orange);\n\n    transform:\n        translateX(-50%);\n\n    animation:\n        txae-scroll-wheel\n        1.7s\n        infinite;\n}\n\n\n@keyframes txae-scroll-wheel{\n\n    0%{\n        opacity:0;\n\n        transform:\n            translate(-50%,0);\n    }\n\n    30%{\n        opacity:1;\n    }\n\n    100%{\n        opacity:0;\n\n        transform:\n            translate(-50%,8px);\n    }\n\n}\n\n\n\/* =========================================================\n   RESPONSIVE\n   ========================================================= *\/\n\n@media(max-width:1350px){\n\n    #tx-automation-engine .txae-flow{\n        gap:10px;\n    }\n\n\n    #tx-automation-engine .txae-card{\n        height:286px;\n        min-height:286px;\n\n        padding:\n            14px\n            12px;\n\n        grid-template-rows:\n            18px\n            36px\n            43px\n            56px\n            68px;\n\n        row-gap:7px;\n    }\n\n\n    #tx-automation-engine .txae-card h3{\n        height:43px;\n\n        font-size:14px;\n    }\n\n\n    #tx-automation-engine .txae-card > p{\n        height:56px;\n\n        font-size:11px;\n    }\n\n\n    #tx-automation-engine .txae-card-visual{\n        height:68px;\n        min-height:68px;\n    }\n\n}\n\n\n@media(max-width:900px){\n\n    #tx-automation-engine{\n        min-height:auto;\n    }\n\n\n    #tx-automation-engine .txae-shell{\n        min-height:auto;\n\n        padding:\n            45px\n            0\n            65px;\n    }\n\n\n    #tx-automation-engine .txae-logo{\n        position:relative;\n\n        top:auto;\n        left:auto;\n\n        width:160px;\n\n        margin-left:4vw;\n    }\n\n\n    #tx-automation-engine .txae-micro{\n        display:none;\n    }\n\n\n    #tx-automation-engine .txae-heading{\n        width:90vw;\n\n        margin-top:55px;\n    }\n\n\n    #tx-automation-engine .txae-heading h2{\n        font-size:\n            clamp(\n                52px,\n                11vw,\n                82px\n            );\n    }\n\n\n    #tx-automation-engine .txae-flow{\n        width:92vw;\n\n        margin:\n            50px\n            auto\n            0;\n\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0,1fr)\n            );\n\n        gap:16px;\n    }\n\n\n    #tx-automation-engine .txae-card{\n        height:300px;\n        min-height:300px;\n\n        padding:\n            17px\n            16px;\n\n        grid-template-rows:\n            18px\n            38px\n            44px\n            60px\n            74px;\n\n        row-gap:8px;\n    }\n\n\n    #tx-automation-engine .txae-card-visual{\n        height:74px;\n        min-height:74px;\n    }\n\n\n    #tx-automation-engine .txae-arrow{\n        display:none;\n    }\n\n\n    #tx-automation-engine .txae-bottom{\n        display:none;\n    }\n\n\n    #tx-automation-engine .txae-scroll{\n        display:none;\n    }\n\n}\n\n\n@media(max-width:560px){\n\n    #tx-automation-engine .txae-heading h2{\n        font-size:52px;\n    }\n\n\n    #tx-automation-engine .txae-watch{\n        flex-direction:column;\n\n        gap:12px;\n    }\n\n\n    #tx-automation-engine .txae-flow{\n        grid-template-columns:1fr;\n    }\n\n\n    #tx-automation-engine .txae-card{\n        height:292px;\n        min-height:292px;\n    }\n\n}\n\n<\/style>\n\n\n<!-- ======================================================\n     BACKGROUND\n     ====================================================== -->\n\n<div class=\"txae-bg tx-video-bg\" aria-hidden=\"true\">\n    <video\n        class=\"txae-bg-video\"\n        autoplay\n        muted\n        loop\n        playsinline\n        preload=\"auto\"\n    >\n        <source\n            src=\"https:\/\/tradesx.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/TX-Video-2.mp4\"\n            type=\"video\/mp4\"\n        >\n    <\/video>\n<\/div>\n<div class=\"txae-shade\"><\/div>\n<div class=\"txae-vignette\"><\/div>\n\n\n<div class=\"txae-shell\">\n\n\n    <!-- LOGO -->\n\n    <div class=\"txae-logo\">\n\n        <img decoding=\"async\"\n            src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n            alt=\"TradesX\"\n        >\n\n    <\/div>\n\n\n    <!-- MICRO COPY -->\n\n    <div class=\"txae-micro txae-micro-left\">\n\n        PEOPLE.<br>\n        COMPLIANCE.<br>\n        PROGRESS.\n\n    <\/div>\n\n\n    <div class=\"txae-micro txae-micro-right\">\n\n        BUILT FOR TRADIES<br>\n        BACKED BY BETTER\n\n    <\/div>\n\n\n    <!-- ==================================================\n         HERO\n         ================================================== -->\n\n    <header class=\"txae-heading\">\n\n\n        <div class=\"txae-kicker\">\n\n            The Automation Engine\n\n        <\/div>\n\n\n        <h2>\n\n            Automation\n\n            <span>\n                in motion.\n            <\/span>\n\n        <\/h2>\n\n\n        <p>\n\n            Watch TradesX turn site activity into action,\n            compliance and progress in real time.\n\n        <\/p>\n\n\n        <div class=\"txae-watch\">\n\n\n            <div\n                class=\"txae-play\"\n                aria-label=\"Watch TradesX automation video\"\n                role=\"button\"\n            >\n\n                <span><\/span>\n\n            <\/div>\n\n\n            <div class=\"txae-watch-copy\">\n\n                Watch Video\n                <span>\u2192<\/span>\n\n            <\/div>\n\n\n        <\/div>\n\n\n    <\/header>\n\n\n    <!-- ==================================================\n         AUTOMATION FLOW\n         ================================================== -->\n\n    <div class=\"txae-flow\">\n\n\n        <!-- 01 -->\n\n        <article class=\"txae-card\">\n\n            <span class=\"txae-arrow\"><\/span>\n\n\n            <div class=\"txae-number\">\n                01\n            <\/div>\n\n\n            <div class=\"txae-icon\">\n\n                <svg viewBox=\"0 0 48 48\">\n\n                    <path d=\"M12 5h21l5 5v33H12z\"><\/path>\n\n                    <path d=\"M33 5v7h7\"><\/path>\n\n                    <path d=\"M18 21h14\"><\/path>\n\n                    <path d=\"M18 27h14\"><\/path>\n\n                    <path d=\"M18 33h9\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <h3>\n                Request received\n            <\/h3>\n\n\n            <p>\n\n                Site photos and details captured\n                from the field.\n\n            <\/p>\n\n\n            <div class=\"txae-card-visual\">\n\n                <div class=\"txae-photo\"><\/div>\n\n                <div class=\"txae-photo-label\">\n                    \u25c9 3 photos\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n        <!-- 02 -->\n\n        <article class=\"txae-card\">\n\n            <span class=\"txae-arrow\"><\/span>\n\n\n            <div class=\"txae-number\">\n                02\n            <\/div>\n\n\n            <div class=\"txae-icon\">\n\n                <svg viewBox=\"0 0 48 48\">\n\n                    <path d=\"M24 4l3.5 10.5L38 18l-10.5 3.5L24 32l-3.5-10.5L10 18l10.5-3.5z\"><\/path>\n\n                    <path d=\"M39 30l2 5 5 2-5 2-2 5-2-5-5-2 5-2z\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <h3>\n                AI scope generated\n            <\/h3>\n\n\n            <p>\n\n                Trades, materials and scope\n                drafted from site photos.\n\n            <\/p>\n\n\n            <div class=\"txae-card-visual\">\n\n                <div class=\"txae-scope-lines\"><\/div>\n\n                <div class=\"txae-ready\">\n                    \u25c9 Scope ready\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n        <!-- 03 -->\n\n        <article class=\"txae-card\">\n\n            <span class=\"txae-arrow\"><\/span>\n\n\n            <div class=\"txae-number\">\n                03\n            <\/div>\n\n\n            <div class=\"txae-icon\">\n\n                <svg viewBox=\"0 0 48 48\">\n\n                    <path d=\"M24 4l15 6v11c0 10-6 18-15 23C15 39 9 31 9 21V10z\"><\/path>\n\n                    <path d=\"M17 24l5 5 10-12\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <h3>\n                Compliance verified\n            <\/h3>\n\n\n            <p>\n\n                Licences, insurances and site\n                requirements checked automatically.\n\n            <\/p>\n\n\n            <div class=\"txae-card-visual\">\n\n                <div class=\"txae-checks\">\n\n                    <div class=\"txae-check\">\n\n                        <i>\u2713<\/i>\n\n                        Licences valid\n\n                    <\/div>\n\n                    <div class=\"txae-check\">\n\n                        <i>\u2713<\/i>\n\n                        Insurance current\n\n                    <\/div>\n\n                    <div class=\"txae-check\">\n\n                        <i>\u2713<\/i>\n\n                        Site requirements met\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n        <!-- 04 -->\n\n        <article class=\"txae-card\">\n\n            <span class=\"txae-arrow\"><\/span>\n\n\n            <div class=\"txae-number\">\n                04\n            <\/div>\n\n\n            <div class=\"txae-icon\">\n\n                <svg viewBox=\"0 0 48 48\">\n\n                    <circle cx=\"19\" cy=\"17\" r=\"7\"><\/circle>\n\n                    <circle cx=\"34\" cy=\"19\" r=\"5\"><\/circle>\n\n                    <path d=\"M6 40c0-8 5-13 13-13s13 5 13 13\"><\/path>\n\n                    <path d=\"M29 29c7 0 12 4 12 11\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <h3>\n                Subcontractor matched\n            <\/h3>\n\n\n            <p>\n\n                Best fit trades found and invited\n                based on skills, location and history.\n\n            <\/p>\n\n\n            <div class=\"txae-card-visual\">\n\n                <div class=\"txae-subcontractor\">\n\n                    <div class=\"txae-person\">\n\n                        <div class=\"txae-avatar\">\n                            MC\n                        <\/div>\n\n                        <div>\n\n                            <strong>\n                                Metro Concreting\n                            <\/strong>\n\n                            <div class=\"txae-stars\">\n                                \u2605\u2605\u2605\u2605\u2605 4.9\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n\n                    <span class=\"txae-best\">\n                        Best match\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n        <!-- 05 -->\n\n        <article class=\"txae-card\">\n\n            <span class=\"txae-arrow\"><\/span>\n\n\n            <div class=\"txae-number\">\n                05\n            <\/div>\n\n\n            <div class=\"txae-icon\">\n\n                <svg viewBox=\"0 0 48 48\">\n\n                    <path d=\"M12 5h21l5 5v33H12z\"><\/path>\n\n                    <path d=\"M33 5v7h7\"><\/path>\n\n                    <path d=\"M18 20h10\"><\/path>\n\n                    <path d=\"M18 26h8\"><\/path>\n\n                    <path d=\"M28 34l3 3 7-8\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <h3>\n                SWMS approved\n            <\/h3>\n\n\n            <p>\n\n                Site specific SWMS generated and\n                approved before work begins.\n\n            <\/p>\n\n\n            <div class=\"txae-card-visual\">\n\n                <div class=\"txae-approved\">\n\n                    <div class=\"txae-doc\">\n                        SWMS\n                    <\/div>\n\n                    <span>\n                        \u2713 Approved\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n        <!-- 06 -->\n\n        <article class=\"txae-card\">\n\n\n            <div class=\"txae-number\">\n                06\n            <\/div>\n\n\n            <div class=\"txae-icon\">\n\n                <svg viewBox=\"0 0 48 48\">\n\n                    <path d=\"M8 40V28h7v12\"><\/path>\n\n                    <path d=\"M20 40V20h7v20\"><\/path>\n\n                    <path d=\"M32 40V10h7v30\"><\/path>\n\n                    <path d=\"M5 40h38\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <h3>\n                Progress update sent\n            <\/h3>\n\n\n            <p>\n\n                Work is tracked and stakeholders\n                kept informed in real time.\n\n            <\/p>\n\n\n            <div class=\"txae-card-visual\">\n\n                <div class=\"txae-update-image\"><\/div>\n\n\n                <div class=\"txae-update-copy\">\n\n                    Progress update\n\n                    <span>\n                        \u2713 sent\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n    <\/div>\n\n\n    <!-- ==================================================\n         BOTTOM\n         ================================================== -->\n\n    <div class=\"txae-bottom\">\n\n\n        <div class=\"txae-bottom-left\">\n\n            TRADES<span style=\"color:#ff5a00\">X<\/span><br>\n            AUSTRALIA\n\n        <\/div>\n\n\n        <div class=\"txae-bottom-right\">\n\n            REAL ISSUES.<br>\n            REAL SOLUTIONS.\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"txae-scroll\">\n\n        <span class=\"txae-mouse\"><\/span>\n\n        Scroll to explore\n\n    <\/div>\n\n\n<\/div>\n\n\n<script>\n\n(() => {\n\n    const section =\n        document.querySelector(\n            '#tx-automation-engine'\n        );\n\n\n    if(\n        !section ||\n        section.dataset.txAutomationInit === '1'\n    ){\n        return;\n    }\n\n\n    section.dataset.txAutomationInit =\n        '1';\n\n\n    const observer =\n        new IntersectionObserver(\n\n            entries => {\n\n                entries.forEach(\n                    entry => {\n\n                        if(\n                            entry.isIntersecting\n                        ){\n\n                            section.classList.add(\n                                'is-visible'\n                            );\n\n\n                            observer.unobserve(\n                                section\n                            );\n\n                        }\n\n                    }\n                );\n\n            },\n\n            {\n                threshold:.16\n            }\n\n        );\n\n\n    observer.observe(\n        section\n    );\n\n\n})();\n\n<\/script>\n\n<\/section>\n\n<!-- =========================================================\n     06 \u2014 FULL JOB LIFECYCLE\n     ========================================================= -->\n<section id=\"tx-lifecycle-autoplay-v2\">\n\n<style>\n\n\/* =========================================================\n   TRADESX\n   A UTE FULL OF OPPORTUNITY\n   AUTOPLAY LIFECYCLE V2\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2{\n    --tx-orange:#ff5a00;\n    --tx-orange-hot:#ff6700;\n    --tx-black:#04080b;\n    --tx-panel:#091015;\n    --tx-panel-deep:#05090c;\n    --tx-white:#f5f5f2;\n    --tx-muted:#879197;\n    --tx-line:#2c363c;\n\n    position:relative;\n\n    left:50%;\n\n    width:100vw;\n    max-width:none !important;\n\n    margin-left:-50vw;\n\n    min-height:100vh;\n\n    color:#fff;\n\n    background:#04080b;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    overflow:hidden;\n}\n\n\n#tx-lifecycle-autoplay-v2 *,\n#tx-lifecycle-autoplay-v2 *::before,\n#tx-lifecycle-autoplay-v2 *::after{\n    box-sizing:border-box;\n}\n\n\n\/* =========================================================\n   STAGE\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-stage{\n    position:relative;\n\n    width:100%;\n    height:100vh;\n\n    min-height:800px;\n\n    overflow:hidden;\n\n    background:\n        radial-gradient(\n            ellipse at 50% 38%,\n            rgba(15,41,54,.20),\n            transparent 42%\n        ),\n        linear-gradient(\n            145deg,\n            #071015 0%,\n            #030608 100%\n        );\n}\n\n\n\/* =========================================================\n   GRID\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-stage::before{\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    z-index:0;\n\n    pointer-events:none;\n\n    background-image:\n        linear-gradient(\n            rgba(57,99,118,.12) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(57,99,118,.12) 1px,\n            transparent 1px\n        );\n\n    background-size:\n        62px 62px;\n\n    opacity:.55;\n}\n\n\n\/* vignette *\/\n\n#tx-lifecycle-autoplay-v2 .txla-stage::after{\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    z-index:1;\n\n    pointer-events:none;\n\n    box-shadow:\n        inset\n        0\n        0\n        180px\n        rgba(0,0,0,.48);\n}\n\n\n\/* =========================================================\n   SHELL\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-shell{\n    position:relative;\n\n    z-index:5;\n\n    width:min(1760px,94vw);\n    height:100%;\n\n    margin:0 auto;\n\n    padding:\n        25px\n        0;\n}\n\n\n\/* =========================================================\n   REAL LOGO\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-logo{\n    position:absolute;\n\n    top:26px;\n    left:0;\n\n    z-index:10;\n\n    width:\n        clamp(\n            150px,\n            12vw,\n            230px\n        );\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-logo img{\n    display:block;\n\n    width:100%;\n    height:auto;\n}\n\n\n\/* =========================================================\n   MICRO COPY\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-micro{\n    position:absolute;\n\n    z-index:10;\n\n    color:\n        rgba(255,255,255,.58);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:8px;\n\n    line-height:1.55;\n\n    font-weight:700;\n\n    letter-spacing:.18em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-micro-left{\n    top:23%;\n    left:0;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-micro-right{\n    top:23%;\n    right:0;\n\n    text-align:right;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-micro::after{\n    content:\"\";\n\n    display:block;\n\n    width:18px;\n    height:2px;\n\n    margin-top:8px;\n\n    background:var(--tx-orange);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-micro-right::after{\n    margin-left:auto;\n}\n\n\n\/* =========================================================\n   HEADING\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-heading{\n    position:relative;\n\n    width:min(1100px,78vw);\n\n    margin:\n        34px\n        auto\n        0;\n\n    text-align:center;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-kicker{\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:14px;\n\n    margin-bottom:12px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:\n        clamp(\n            9px,\n            .75vw,\n            12px\n        );\n\n    font-weight:900;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-kicker::before,\n#tx-lifecycle-autoplay-v2 .txla-kicker::after{\n    content:\"\";\n\n    width:33px;\n    height:5px;\n\n    background:\n        repeating-linear-gradient(\n            90deg,\n            var(--tx-orange) 0,\n            var(--tx-orange) 9px,\n            transparent 9px,\n            transparent 13px\n        );\n\n    transform:\n        skewX(-24deg);\n}\n\n\n\/* =========================================================\n   MAIN TITLE\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-heading h2{\n    margin:0;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            52px,\n            5.25vw,\n            92px\n        );\n\n    line-height:.88;\n\n    font-weight:950;\n\n    letter-spacing:-.045em;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-heading h2 span{\n    color:var(--tx-orange);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-heading p{\n    max-width:700px;\n\n    margin:\n        14px\n        auto\n        0;\n\n    color:\n        rgba(255,255,255,.72);\n\n    font-size:\n        clamp(\n            14px,\n            1vw,\n            18px\n        );\n\n    line-height:1.42;\n}\n\n\n\/* =========================================================\n   TRACK AREA\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-track-wrap{\n    position:absolute;\n\n    left:50%;\n    top:43%;\n\n    width:86%;\n\n    transform:\n        translateX(-50%);\n}\n\n\n\/* =========================================================\n   RAIL\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-rail{\n    position:absolute;\n\n    z-index:1;\n\n    top:29px;\n\n    left:7.15%;\n\n    width:85.7%;\n    height:3px;\n\n    overflow:hidden;\n\n    background:#343d42;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-rail-fill{\n    position:absolute;\n\n    inset:\n        0\n        auto\n        0\n        0;\n\n    width:0%;\n\n    background:\n        var(--tx-orange);\n\n    box-shadow:\n        0\n        0\n        13px\n        rgba(255,90,0,.58);\n\n    will-change:width;\n}\n\n\n\/* =========================================================\n   UTE\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-ute{\n    position:absolute;\n\n    z-index:30;\n\n    top:-116px;\n\n    left:7.15%;\n\n    width:\n        clamp(\n            270px,\n            23vw,\n            410px\n        );\n\n    transform:\n        translateX(-50%);\n\n    transform-origin:center bottom;\n\n    pointer-events:none;\n\n    will-change:\n        left,\n        opacity,\n        transform;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-ute::before{\n    content:\"\";\n\n    position:absolute;\n\n    z-index:-1;\n\n    top:39%;\n    left:-70px;\n\n    width:145px;\n    height:58px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,90,0,.08),\n            rgba(255,90,0,.72)\n        );\n\n    filter:\n        blur(8px);\n\n    opacity:.8;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-ute img{\n    display:block;\n\n    width:100%;\n    height:auto;\n\n    filter:\n        drop-shadow(\n            0\n            18px\n            20px\n            rgba(0,0,0,.52)\n        );\n}\n\n\n\/* =========================================================\n   NODES\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-track{\n    position:relative;\n\n    z-index:5;\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            7,\n            1fr\n        );\n\n    width:100%;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-node{\n    position:relative;\n\n    text-align:center;\n\n    color:#606a70;\n\n    transition:\n        color .35s ease;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-circle{\n    position:relative;\n\n    width:60px;\n    height:60px;\n\n    margin:\n        0\n        auto\n        10px;\n\n    display:grid;\n\n    place-items:center;\n\n    color:inherit;\n\n    border:\n        2px solid\n        #414c53;\n\n    border-radius:50%;\n\n    background:#071015;\n\n    transition:\n        border-color .35s ease,\n        box-shadow .35s ease,\n        background .35s ease;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-circle svg{\n    width:26px;\n    height:26px;\n\n    fill:none;\n\n    stroke:currentColor;\n\n    stroke-width:1.8;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n\/* small marker *\/\n\n#tx-lifecycle-autoplay-v2 .txla-circle::after{\n    content:\"\";\n\n    position:absolute;\n\n    left:50%;\n    bottom:-17px;\n\n    width:9px;\n    height:9px;\n\n    transform:\n        translateX(-50%);\n\n    border-radius:50%;\n\n    border:\n        2px solid\n        #071015;\n\n    background:#354047;\n\n    transition:\n        background .35s ease,\n        box-shadow .35s ease;\n}\n\n\n\/* active \/ completed *\/\n\n#tx-lifecycle-autoplay-v2 .txla-node.is-active,\n#tx-lifecycle-autoplay-v2 .txla-node.is-complete{\n    color:var(--tx-orange);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-node.is-active .txla-circle,\n#tx-lifecycle-autoplay-v2 .txla-node.is-complete .txla-circle{\n    border-color:var(--tx-orange);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-node.is-active .txla-circle{\n    background:#0b1216;\n\n    box-shadow:\n        0\n        0\n        25px\n        rgba(255,90,0,.22);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-node.is-active .txla-circle::after,\n#tx-lifecycle-autoplay-v2 .txla-node.is-complete .txla-circle::after{\n    background:var(--tx-orange);\n\n    box-shadow:\n        0\n        0\n        9px\n        rgba(255,90,0,.75);\n}\n\n\n\/* =========================================================\n   NODE COPY\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-number{\n    margin-top:16px;\n\n    color:inherit;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:12px;\n\n    font-weight:900;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-label{\n    margin-top:6px;\n\n    color:#788289;\n\n    font-size:\n        clamp(\n            10px,\n            .82vw,\n            14px\n        );\n\n    line-height:1.12;\n\n    font-weight:800;\n\n    transition:\n        color .35s ease;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-node.is-active .txla-label,\n#tx-lifecycle-autoplay-v2 .txla-node.is-complete .txla-label{\n    color:#fff;\n}\n\n\n\/* =========================================================\n   DETAIL PANEL\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-panel{\n    position:absolute;\n\n    z-index:20;\n\n    left:50%;\n    bottom:4.5%;\n\n    width:88%;\n\n    min-height:230px;\n\n    transform:\n        translateX(-50%);\n\n    display:grid;\n\n    grid-template-columns:\n        150px\n        minmax(360px,1fr)\n        minmax(360px,.95fr);\n\n    gap:\n        clamp(\n            28px,\n            3.7vw,\n            65px\n        );\n\n    align-items:center;\n\n    padding:\n        28px\n        40px;\n\n    border:\n        1px solid\n        rgba(255,90,0,.72);\n\n    border-radius:22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(10,16,20,.97),\n            rgba(5,9,12,.97)\n        );\n\n    box-shadow:\n        0\n        28px\n        60px\n        rgba(0,0,0,.24);\n}\n\n\n\/* =========================================================\n   PANEL ICON\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-panel-icon{\n    position:relative;\n\n    width:120px;\n    height:120px;\n\n    display:grid;\n\n    place-items:center;\n\n    margin-left:18px;\n\n    border:\n        1px solid\n        rgba(255,90,0,.65);\n\n    border-radius:50%;\n\n    color:var(--tx-orange);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-panel-icon::before{\n    content:\"\";\n\n    position:absolute;\n\n    inset:14px;\n\n    border:\n        1px dashed\n        rgba(255,90,0,.28);\n\n    border-radius:50%;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-panel-icon svg{\n    position:relative;\n\n    z-index:2;\n\n    width:50px;\n    height:50px;\n\n    fill:none;\n\n    stroke:currentColor;\n\n    stroke-width:1.7;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n\/* =========================================================\n   COPY\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-panel-copy,\n#tx-lifecycle-autoplay-v2 .txla-checklist{\n    transition:\n        opacity .18s ease,\n        transform .18s ease;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-panel.is-changing .txla-panel-copy,\n#tx-lifecycle-autoplay-v2 .txla-panel.is-changing .txla-checklist{\n    opacity:0;\n\n    transform:\n        translateY(6px);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-stage-label{\n    margin-bottom:9px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:10px;\n\n    font-weight:900;\n\n    letter-spacing:.16em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-panel-title{\n    margin:\n        0\n        0\n        11px;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            34px,\n            3vw,\n            56px\n        );\n\n    line-height:.94;\n\n    font-weight:950;\n\n    letter-spacing:-.035em;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-panel-description{\n    max-width:650px;\n\n    margin:0;\n\n    color:\n        rgba(255,255,255,.68);\n\n    font-size:\n        clamp(\n            12px,\n            .92vw,\n            16px\n        );\n\n    line-height:1.5;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-panel-link{\n    display:flex;\n\n    align-items:center;\n\n    gap:11px;\n\n    margin-top:16px;\n\n    color:var(--tx-orange);\n\n    font-size:12px;\n\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   CHECKS\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-checklist{\n    width:100%;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-check{\n    min-height:38px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:11px;\n\n    border-bottom:\n        1px solid\n        rgba(255,255,255,.10);\n\n    color:\n        rgba(255,255,255,.72);\n\n    font-size:\n        clamp(\n            11px,\n            .8vw,\n            14px\n        );\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-check:first-child{\n    border-top:\n        1px solid\n        rgba(255,255,255,.10);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-check i{\n    flex:\n        0\n        0\n        19px;\n\n    width:19px;\n    height:19px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        1px solid\n        var(--tx-orange);\n\n    border-radius:50%;\n\n    color:var(--tx-orange);\n\n    font-style:normal;\n\n    font-size:9px;\n}\n\n\n\/* =========================================================\n   CHEVRONS\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-chevrons{\n    position:absolute;\n\n    left:19px;\n    top:50%;\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:18px;\n\n    transform:\n        translateY(-50%);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-chevron{\n    width:13px;\n    height:13px;\n\n    border-right:\n        4px solid\n        #293239;\n\n    border-bottom:\n        4px solid\n        #293239;\n\n    transform:\n        rotate(45deg);\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-chevron.is-hot{\n    border-color:var(--tx-orange);\n}\n\n\n\/* =========================================================\n   SMALL FOOTER COPY\n   ========================================================= *\/\n\n#tx-lifecycle-autoplay-v2 .txla-footer-left,\n#tx-lifecycle-autoplay-v2 .txla-footer-right{\n    position:absolute;\n\n    bottom:16px;\n\n    color:\n        rgba(255,255,255,.43);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:7px;\n\n    line-height:1.45;\n\n    letter-spacing:.18em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-footer-left{\n    left:0;\n}\n\n\n#tx-lifecycle-autoplay-v2 .txla-footer-right{\n    right:0;\n\n    text-align:right;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:1100px){\n\n    #tx-lifecycle-autoplay-v2 .txla-stage{\n        height:auto;\n\n        min-height:1100px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-logo{\n        width:180px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-micro{\n        display:none;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-heading{\n        width:88vw;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-track-wrap{\n        top:35%;\n\n        width:94%;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-ute{\n        width:290px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-panel{\n        bottom:5%;\n\n        width:92%;\n\n        grid-template-columns:\n            120px\n            1fr;\n\n        gap:25px;\n\n        padding:\n            26px\n            30px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-checklist{\n        grid-column:\n            1 \/ -1;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:700px){\n\n    #tx-lifecycle-autoplay-v2{\n        left:0;\n\n        width:100%;\n\n        margin-left:0;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-stage{\n        height:auto;\n\n        min-height:1450px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-shell{\n        width:92vw;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-heading{\n        margin-top:100px;\n\n        width:100%;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-heading h2{\n        font-size:\n            clamp(\n                47px,\n                13vw,\n                67px\n            );\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-track-wrap{\n        position:relative;\n\n        top:auto;\n        left:auto;\n\n        width:100%;\n\n        margin-top:100px;\n\n        transform:none;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-ute,\n    #tx-lifecycle-autoplay-v2 .txla-rail{\n        display:none;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-track{\n        grid-template-columns:\n            repeat(\n                2,\n                1fr\n            );\n\n        gap:\n            35px\n            8px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-panel{\n        position:relative;\n\n        left:auto;\n        bottom:auto;\n\n        width:100%;\n\n        margin-top:65px;\n\n        transform:none;\n\n        display:block;\n\n        padding:\n            30px\n            24px;\n\n        border-radius:17px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-panel-icon{\n        margin:\n            0\n            0\n            25px\n            0;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-checklist{\n        margin-top:26px;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-chevrons{\n        display:none;\n    }\n\n\n    #tx-lifecycle-autoplay-v2 .txla-footer-left,\n    #tx-lifecycle-autoplay-v2 .txla-footer-right{\n        display:none;\n    }\n\n}\n\n<\/style>\n\n\n<div class=\"txla-stage\">\n\n    <div class=\"txla-shell\">\n\n\n        <!-- LOGO -->\n\n        <div class=\"txla-logo\">\n\n            <img decoding=\"async\"\n                src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                alt=\"TradesX\"\n            >\n\n        <\/div>\n\n\n        <!-- MICRO -->\n\n        <div class=\"txla-micro txla-micro-left\">\n\n            JOBS<br>\n            PEOPLE<br>\n            PROGRESS\n\n        <\/div>\n\n\n        <div class=\"txla-micro txla-micro-right\">\n\n            SAME<br>\n            TRADIES<br>\n            A BRIGHTER<br>\n            TOMORROW\n\n        <\/div>\n\n\n        <!-- =================================================\n             TITLE\n             ================================================= -->\n\n        <header class=\"txla-heading\">\n\n\n            <div class=\"txla-kicker\">\n\n                The Full Job Lifecycle\n\n            <\/div>\n\n\n            <h2>\n\n                A ute full of\n                <span>opportunity.<\/span>\n\n            <\/h2>\n\n\n            <p>\n\n                Everything you need to run, manage and grow your\n                trade business, from first request to verified\n                close out.\n\n            <\/p>\n\n\n        <\/header>\n\n\n        <!-- =================================================\n             TRACK\n             ================================================= -->\n\n        <div class=\"txla-track-wrap\">\n\n\n            <div class=\"txla-rail\">\n\n                <div class=\"txla-rail-fill\"><\/div>\n\n            <\/div>\n\n\n            <!-- AUTOPLAY UTE -->\n\n            <div class=\"txla-ute\">\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/tradesx.com.au\/landing\/tx-ute.png\"\n                    alt=\"TradesX ute\"\n                >\n\n            <\/div>\n\n\n            <div class=\"txla-track\">\n\n\n                <!-- 01 -->\n\n                <div class=\"txla-node\" data-index=\"0\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <path d=\"M12 5h21l5 5v33H12z\"><\/path>\n                            <path d=\"M33 5v7h7\"><\/path>\n                            <path d=\"M18 20h14\"><\/path>\n                            <path d=\"M18 27h11\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        01\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Request\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- 02 -->\n\n                <div class=\"txla-node\" data-index=\"1\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <circle cx=\"21\" cy=\"21\" r=\"11\"><\/circle>\n                            <path d=\"M29 29l10 10\"><\/path>\n                            <path d=\"M21 15v12\"><\/path>\n                            <path d=\"M15 21h12\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        02\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Triage\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- 03 -->\n\n                <div class=\"txla-node\" data-index=\"2\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <circle cx=\"24\" cy=\"24\" r=\"15\"><\/circle>\n                            <path d=\"M24 16v16\"><\/path>\n                            <path d=\"M16 24h16\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        03\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Create Job\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- 04 -->\n\n                <div class=\"txla-node\" data-index=\"3\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <circle cx=\"18\" cy=\"17\" r=\"7\"><\/circle>\n                            <circle cx=\"33\" cy=\"19\" r=\"5\"><\/circle>\n\n                            <path d=\"M6 40c0-8 5-13 12-13s12 5 12 13\"><\/path>\n\n                            <path d=\"M28 29c7 0 12 4 12 11\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        04\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Publish &amp; Bid\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- 05 -->\n\n                <div class=\"txla-node\" data-index=\"4\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <path d=\"M10 9h28v31H10z\"><\/path>\n                            <path d=\"M17 24l5 5 10-12\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        05\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Award\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- 06 -->\n\n                <div class=\"txla-node\" data-index=\"5\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <path d=\"M24 5l14 6v10c0 9-5 17-14 22C15 38 10 30 10 21V11z\"><\/path>\n\n                            <path d=\"M24 15v12\"><\/path>\n\n                            <circle\n                                cx=\"24\"\n                                cy=\"33\"\n                                r=\"1\"\n                            ><\/circle>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        06\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Safety \/ SWMS\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- 07 -->\n\n                <div class=\"txla-node\" data-index=\"6\">\n\n                    <div class=\"txla-circle\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <path d=\"M24 5l14 6v10c0 9-5 17-14 22C15 38 10 30 10 21V11z\"><\/path>\n\n                            <path d=\"M17 24l5 5 10-12\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div class=\"txla-number\">\n                        07\n                    <\/div>\n\n                    <div class=\"txla-label\">\n                        Quality &amp; Close\n                    <\/div>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             DETAIL PANEL\n             ================================================= -->\n\n        <div class=\"txla-panel\">\n\n\n            <div class=\"txla-chevrons\">\n\n                <span class=\"txla-chevron is-hot\"><\/span>\n                <span class=\"txla-chevron\"><\/span>\n                <span class=\"txla-chevron\"><\/span>\n                <span class=\"txla-chevron\"><\/span>\n\n            <\/div>\n\n\n            <div class=\"txla-panel-icon\">\n\n                <svg\n                    class=\"txla-dynamic-icon\"\n                    viewBox=\"0 0 48 48\"\n                >\n\n                    <path d=\"M12 5h21l5 5v33H12z\"><\/path>\n                    <path d=\"M33 5v7h7\"><\/path>\n                    <path d=\"M18 20h14\"><\/path>\n                    <path d=\"M18 27h11\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <div class=\"txla-panel-copy\">\n\n\n                <div class=\"txla-stage-label\">\n                    Stage 01\n                <\/div>\n\n\n                <h3 class=\"txla-panel-title\">\n                    Request received\n                <\/h3>\n\n\n                <p class=\"txla-panel-description\">\n\n                    A client submits the issue, location,\n                    details and supporting photos directly\n                    into TradesX.\n\n                <\/p>\n\n\n                <div class=\"txla-panel-link\">\n\n                    Request captured\n                    <span>\u2192<\/span>\n\n                <\/div>\n\n\n            <\/div>\n\n\n            <div class=\"txla-checklist\">\n\n                <div class=\"txla-check\">\n                    <i>\u2713<\/i>\n                    Client request captured\n                <\/div>\n\n                <div class=\"txla-check\">\n                    <i>\u2713<\/i>\n                    Site details recorded\n                <\/div>\n\n                <div class=\"txla-check\">\n                    <i>\u2713<\/i>\n                    Photos attached to request\n                <\/div>\n\n                <div class=\"txla-check\">\n                    <i>\u2713<\/i>\n                    Audit trail begins immediately\n                <\/div>\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- FOOTER -->\n\n        <div class=\"txla-footer-left\">\n\n            MORE JOBS<br>\n            STRONGER TRADIES<br>\n            BRIGHTER TOMORROWS\n\n        <\/div>\n\n\n        <div class=\"txla-footer-right\">\n\n            TRADESX.COM.AU\n\n        <\/div>\n\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n\n(() => {\n\n    const root =\n        document.querySelector(\n            '#tx-lifecycle-autoplay-v2'\n        );\n\n\n    if(\n        !root ||\n        root.dataset.txAutoplayLifecycle === '1'\n    ){\n        return;\n    }\n\n\n    root.dataset.txAutoplayLifecycle =\n        '1';\n\n\n    const trackWrap =\n        root.querySelector(\n            '.txla-track-wrap'\n        );\n\n\n    const ute =\n        root.querySelector(\n            '.txla-ute'\n        );\n\n\n    const rail =\n        root.querySelector(\n            '.txla-rail'\n        );\n\n\n    const railFill =\n        root.querySelector(\n            '.txla-rail-fill'\n        );\n\n\n    const nodes = [\n        ...root.querySelectorAll(\n            '.txla-node'\n        )\n    ];\n\n\n    const panel =\n        root.querySelector(\n            '.txla-panel'\n        );\n\n\n    const stageLabel =\n        root.querySelector(\n            '.txla-stage-label'\n        );\n\n\n    const panelTitle =\n        root.querySelector(\n            '.txla-panel-title'\n        );\n\n\n    const panelDescription =\n        root.querySelector(\n            '.txla-panel-description'\n        );\n\n\n    const panelLink =\n        root.querySelector(\n            '.txla-panel-link'\n        );\n\n\n    const checklist =\n        root.querySelector(\n            '.txla-checklist'\n        );\n\n\n    const dynamicIcon =\n        root.querySelector(\n            '.txla-dynamic-icon'\n        );\n\n\n    const chevrons = [\n        ...root.querySelectorAll(\n            '.txla-chevron'\n        )\n    ];\n\n\n    \/* =====================================================\n       CONTENT\n       ===================================================== *\/\n\n    const stages = [\n\n        {\n            stage:\"Stage 01\",\n\n            title:\"Request received\",\n\n            description:\n                \"A client submits the issue, location, details and supporting photos directly into TradesX.\",\n\n            link:\"Request captured\",\n\n            checks:[\n                \"Client request captured\",\n                \"Site details recorded\",\n                \"Photos attached to request\",\n                \"Audit trail begins immediately\"\n            ],\n\n            icon:`\n                <path d=\"M12 5h21l5 5v33H12z\"><\/path>\n                <path d=\"M33 5v7h7\"><\/path>\n                <path d=\"M18 20h14\"><\/path>\n                <path d=\"M18 27h11\"><\/path>\n            `\n        },\n\n        {\n            stage:\"Stage 02\",\n\n            title:\"Reviewed & approved\",\n\n            description:\n                \"A Primary Contractor triages the request, approving or rejecting it before any work or cost is committed.\",\n\n            link:\"Ready for job creation\",\n\n            checks:[\n                \"Request reviewed by Primary Contractor\",\n                \"Approved or rejected before cost\",\n                \"Invalid requests stopped early\",\n                \"Approved work moves forward\"\n            ],\n\n            icon:`\n                <circle cx=\"21\" cy=\"21\" r=\"11\"><\/circle>\n                <path d=\"M29 29l10 10\"><\/path>\n                <path d=\"M15 21h12\"><\/path>\n            `\n        },\n\n        {\n            stage:\"Stage 03\",\n\n            title:\"Job created\",\n\n            description:\n                \"The approved request becomes a structured job with scope, requirements and procurement information ready to publish.\",\n\n            link:\"Job ready to publish\",\n\n            checks:[\n                \"Approved request converted to job\",\n                \"Scope and requirements added\",\n                \"Site information controlled\",\n                \"Procurement workflow prepared\"\n            ],\n\n            icon:`\n                <circle cx=\"24\" cy=\"24\" r=\"15\"><\/circle>\n                <path d=\"M24 16v16\"><\/path>\n                <path d=\"M16 24h16\"><\/path>\n            `\n        },\n\n        {\n            stage:\"Stage 04\",\n\n            title:\"Published for bidding\",\n\n            description:\n                \"The job is released to eligible subcontractors. Only trades satisfying the required compliance conditions can participate.\",\n\n            link:\"Competitive bidding live\",\n\n            checks:[\n                \"Eligible subcontractors invited\",\n                \"Compliance gate applied\",\n                \"Structured bids submitted\",\n                \"Bids scored for comparison\"\n            ],\n\n            icon:`\n                <circle cx=\"18\" cy=\"17\" r=\"7\"><\/circle>\n                <circle cx=\"33\" cy=\"19\" r=\"5\"><\/circle>\n                <path d=\"M6 40c0-8 5-13 12-13s12 5 12 13\"><\/path>\n                <path d=\"M28 29c7 0 12 4 12 11\"><\/path>\n            `\n        },\n\n        {\n            stage:\"Stage 05\",\n\n            title:\"Winner awarded\",\n\n            description:\n                \"The Primary Contractor closes bidding and awards the winner. Only now is the full site address revealed, and only to the winning subcontractor.\",\n\n            link:\"Address privacy enforced\",\n\n            checks:[\n                \"Bidding closed by Primary Contractor\",\n                \"Winner selected and awarded\",\n                \"Full site address revealed to winner only\",\n                \"Privacy enforced until award\",\n                \"Ready for SWMS\"\n            ],\n\n            icon:`\n                <path d=\"M10 9h28v31H10z\"><\/path>\n                <path d=\"M17 24l5 5 10-12\"><\/path>\n            `\n        },\n\n        {\n            stage:\"Stage 06\",\n\n            title:\"Safety cleared\",\n\n            description:\n                \"SWMS and required safety documentation are completed, strengthened and approved before work begins.\",\n\n            link:\"Cleared to commence\",\n\n            checks:[\n                \"Trade specific SWMS completed\",\n                \"AI assisted enhancement available\",\n                \"Digital acknowledgement recorded\",\n                \"Safety approval captured\"\n            ],\n\n            icon:`\n                <path d=\"M24 5l14 6v10c0 9-5 17-14 22C15 38 10 30 10 21V11z\"><\/path>\n                <path d=\"M24 15v12\"><\/path>\n                <circle cx=\"24\" cy=\"33\" r=\"1\"><\/circle>\n            `\n        },\n\n        {\n            stage:\"Stage 07\",\n\n            title:\"Verified close out\",\n\n            description:\n                \"The completed job closes with evidence, ratings and Primary Contractor sign off, leaving a complete record from request to completion.\",\n\n            link:\"Job verified complete\",\n\n            checks:[\n                \"Before and after photos recorded\",\n                \"Quality evidence reviewed\",\n                \"Subcontractor rating captured\",\n                \"Primary Contractor sign off\",\n                \"Complete audit trail retained\"\n            ],\n\n            icon:`\n                <path d=\"M24 5l14 6v10c0 9-5 17-14 22C15 38 10 30 10 21V11z\"><\/path>\n                <path d=\"M17 24l5 5 10-12\"><\/path>\n            `\n        }\n\n    ];\n\n\n    \/* =====================================================\n       TIMINGS\n\n       Ute waits at each stage then drives to the next.\n       ===================================================== *\/\n\n    const DWELL =\n        1500;\n\n\n    const MOVE =\n        850;\n\n\n    const LAST_HOLD =\n        2000;\n\n\n    const RESET_TIME =\n        700;\n\n\n    const SEGMENT =\n        DWELL\n        +\n        MOVE;\n\n\n    const DRIVE_TIME =\n        SEGMENT\n        *\n        6;\n\n\n    const TOTAL =\n        DRIVE_TIME\n        +\n        LAST_HOLD\n        +\n        RESET_TIME;\n\n\n    let positions = [];\n\n    let startTime = null;\n\n    let visible = true;\n\n    let frame = null;\n\n    let lastRendered =\n        -1;\n\n\n    \/* =====================================================\n       HELPERS\n       ===================================================== *\/\n\n    const clamp = (\n        value,\n        min = 0,\n        max = 1\n    ) =>\n        Math.max(\n            min,\n            Math.min(\n                max,\n                value\n            )\n        );\n\n\n    function smoothstep(\n        value\n    ){\n\n        const t =\n            clamp(\n                value\n            );\n\n\n        return (\n            t\n            *\n            t\n            *\n            (\n                3\n                -\n                2\n                *\n                t\n            )\n        );\n\n    }\n\n\n    \/* =====================================================\n       MEASURE EXACT NODE POSITIONS\n       ===================================================== *\/\n\n    function measure(){\n\n        if(\n            window.innerWidth\n            <=\n            700\n        ){\n            return;\n        }\n\n\n        const wrapRect =\n            trackWrap.getBoundingClientRect();\n\n\n        positions =\n            nodes.map(\n                node => {\n\n                    const rect =\n                        node\n                        .querySelector(\n                            '.txla-circle'\n                        )\n                        .getBoundingClientRect();\n\n\n                    return (\n                        rect.left\n                        -\n                        wrapRect.left\n                        +\n                        rect.width\n                        \/\n                        2\n                    );\n\n                }\n            );\n\n\n        if(\n            positions.length\n            ===\n            7\n        ){\n\n            rail.style.left =\n                `${positions[0]}px`;\n\n\n            rail.style.width =\n                `${\n                    positions[6]\n                    -\n                    positions[0]\n                }px`;\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       PANEL\n       ===================================================== *\/\n\n    function renderStage(\n        index\n    ){\n\n        if(\n            index\n            ===\n            lastRendered\n        ){\n            return;\n        }\n\n\n        lastRendered =\n            index;\n\n\n        const data =\n            stages[index];\n\n\n        panel.classList.add(\n            'is-changing'\n        );\n\n\n        setTimeout(\n            () => {\n\n                stageLabel.textContent =\n                    data.stage;\n\n\n                panelTitle.textContent =\n                    data.title;\n\n\n                panelDescription.textContent =\n                    data.description;\n\n\n                panelLink.innerHTML =\n                    `${data.link} <span>\u2192<\/span>`;\n\n\n                checklist.innerHTML =\n                    data.checks\n                    .map(\n                        item => `\n                            <div class=\"txla-check\">\n                                <i>\u2713<\/i>\n                                ${item}\n                            <\/div>\n                        `\n                    )\n                    .join(\"\");\n\n\n                dynamicIcon.innerHTML =\n                    data.icon;\n\n\n                nodes.forEach(\n                    (\n                        node,\n                        i\n                    ) => {\n\n                        node.classList.toggle(\n                            'is-active',\n                            i === index\n                        );\n\n\n                        node.classList.toggle(\n                            'is-complete',\n                            i < index\n                        );\n\n                    }\n                );\n\n\n                chevrons.forEach(\n                    (\n                        item,\n                        i\n                    ) => {\n\n                        item.classList.toggle(\n                            'is-hot',\n                            i <= Math.min(\n                                3,\n                                Math.floor(\n                                    index \/ 2\n                                )\n                            )\n                        );\n\n                    }\n                );\n\n\n                panel.classList.remove(\n                    'is-changing'\n                );\n\n            },\n            120\n        );\n\n    }\n\n\n    \/* =====================================================\n       AUTOPLAY\n       ===================================================== *\/\n\n    function animate(\n        timestamp\n    ){\n\n        frame = null;\n\n\n        if(\n            !visible\n        ){\n            return;\n        }\n\n\n        if(\n            !startTime\n        ){\n            startTime =\n                timestamp;\n        }\n\n\n        if(\n            window.innerWidth\n            <=\n            700\n        ){\n\n            renderStage(\n                0\n            );\n\n            return;\n\n        }\n\n\n        if(\n            positions.length\n            !==\n            7\n        ){\n\n            measure();\n\n        }\n\n\n        const elapsed =\n            (\n                timestamp\n                -\n                startTime\n            )\n            %\n            TOTAL;\n\n\n        let currentIndex =\n            0;\n\n\n        let x =\n            positions[0]\n            ||\n            0;\n\n\n        let overallProgress =\n            0;\n\n\n        let opacity =\n            1;\n\n\n        \/* ===============================================\n           DRIVING THROUGH STAGES\n           =============================================== *\/\n\n        if(\n            elapsed\n            <\n            DRIVE_TIME\n        ){\n\n            const segmentIndex =\n                Math.floor(\n                    elapsed\n                    \/\n                    SEGMENT\n                );\n\n\n            const local =\n                elapsed\n                -\n                segmentIndex\n                *\n                SEGMENT;\n\n\n            currentIndex =\n                segmentIndex;\n\n\n            if(\n                local\n                <=\n                DWELL\n            ){\n\n                x =\n                    positions[\n                        segmentIndex\n                    ];\n\n\n                currentIndex =\n                    segmentIndex;\n\n            }\n            else{\n\n                const moveProgress =\n                    smoothstep(\n                        (\n                            local\n                            -\n                            DWELL\n                        )\n                        \/\n                        MOVE\n                    );\n\n\n                const startX =\n                    positions[\n                        segmentIndex\n                    ];\n\n\n                const endX =\n                    positions[\n                        segmentIndex\n                        +\n                        1\n                    ];\n\n\n                x =\n                    startX\n                    +\n                    (\n                        endX\n                        -\n                        startX\n                    )\n                    *\n                    moveProgress;\n\n\n                if(\n                    moveProgress\n                    >\n                    .72\n                ){\n\n                    currentIndex =\n                        segmentIndex\n                        +\n                        1;\n\n                }\n\n            }\n\n\n            overallProgress =\n                (\n                    x\n                    -\n                    positions[0]\n                )\n                \/\n                (\n                    positions[6]\n                    -\n                    positions[0]\n                );\n\n        }\n\n\n        \/* ===============================================\n           FINAL STAGE HOLD\n           =============================================== *\/\n\n        else if(\n            elapsed\n            <\n            DRIVE_TIME\n            +\n            LAST_HOLD\n        ){\n\n            x =\n                positions[6];\n\n\n            overallProgress =\n                1;\n\n\n            currentIndex =\n                6;\n\n        }\n\n\n        \/* ===============================================\n           RESET\n\n           Fade ute out,\n           move invisibly to Request,\n           fade back in.\n           =============================================== *\/\n\n        else{\n\n            const resetProgress =\n                (\n                    elapsed\n                    -\n                    DRIVE_TIME\n                    -\n                    LAST_HOLD\n                )\n                \/\n                RESET_TIME;\n\n\n            if(\n                resetProgress\n                <\n                .42\n            ){\n\n                opacity =\n                    1\n                    -\n                    (\n                        resetProgress\n                        \/\n                        .42\n                    );\n\n\n                x =\n                    positions[6];\n\n\n                overallProgress =\n                    1;\n\n\n                currentIndex =\n                    6;\n\n            }\n            else{\n\n                opacity =\n                    (\n                        resetProgress\n                        -\n                        .42\n                    )\n                    \/\n                    .58;\n\n\n                x =\n                    positions[0];\n\n\n                overallProgress =\n                    0;\n\n\n                currentIndex =\n                    0;\n\n            }\n\n        }\n\n\n        \/* ===============================================\n           POSITION UTE\n           =============================================== *\/\n\n        ute.style.left =\n            `${x}px`;\n\n\n        ute.style.opacity =\n            String(\n                clamp(\n                    opacity\n                )\n            );\n\n\n        ute.style.transform =\n            `\n            translateX(-50%)\n            translateY(\n                ${\n                    Math.sin(\n                        timestamp\n                        \/\n                        240\n                    )\n                    *\n                    .7\n                }px\n            )\n            `;\n\n\n        \/* ===============================================\n           TRACK\n           =============================================== *\/\n\n        railFill.style.width =\n            `${\n                clamp(\n                    overallProgress\n                )\n                *\n                100\n            }%`;\n\n\n        \/* ===============================================\n           PANEL\n           =============================================== *\/\n\n        renderStage(\n            currentIndex\n        );\n\n\n        frame =\n            requestAnimationFrame(\n                animate\n            );\n\n    }\n\n\n    \/* =====================================================\n       RUN ONLY WHILE SECTION IS VISIBLE\n       ===================================================== *\/\n\n    const observer =\n        new IntersectionObserver(\n\n            entries => {\n\n                entries.forEach(\n                    entry => {\n\n                        visible =\n                            entry.isIntersecting;\n\n\n                        if(\n                            visible\n                        ){\n\n                            startTime =\n                                null;\n\n\n                            measure();\n\n\n                            if(\n                                !frame\n                            ){\n\n                                frame =\n                                    requestAnimationFrame(\n                                        animate\n                                    );\n\n                            }\n\n                        }\n                        else{\n\n                            if(\n                                frame\n                            ){\n\n                                cancelAnimationFrame(\n                                    frame\n                                );\n\n\n                                frame =\n                                    null;\n\n                            }\n\n                        }\n\n                    }\n                );\n\n            },\n\n            {\n                threshold:.08\n            }\n\n        );\n\n\n    observer.observe(\n        root\n    );\n\n\n    \/* =====================================================\n       RESIZE\n       ===================================================== *\/\n\n    let resizeTimer;\n\n\n    window.addEventListener(\n        'resize',\n        () => {\n\n            clearTimeout(\n                resizeTimer\n            );\n\n\n            resizeTimer =\n                setTimeout(\n                    () => {\n\n                        positions = [];\n\n                        measure();\n\n                    },\n                    150\n                );\n\n        }\n    );\n\n\n    \/* initial *\/\n\n    renderStage(\n        0\n    );\n\n\n    setTimeout(\n        measure,\n        150\n    );\n\n\n})();\n\n<\/script>\n\n<\/section>\n\n<!-- =========================================================\n     07 \u2014 REMAINDER OF HOMEPAGE\n     ========================================================= -->\n<section id=\"tx-rest-v1\">\n\n<style>\n\n\/* =========================================================\n   TRADESX\n   REMAINDER OF HOMEPAGE\n   ========================================================= *\/\n\n#tx-rest-v1{\n    --tx-orange:#ff5a00;\n    --tx-orange-hot:#ff6700;\n    --tx-black:#030608;\n    --tx-black-soft:#080d10;\n    --tx-panel:#0c1215;\n    --tx-white:#f5f5f2;\n    --tx-grey:#9ca4a9;\n    --tx-line:rgba(255,255,255,.12);\n    --tx-green:#37d37a;\n\n    position:relative;\n\n    left:50%;\n\n    width:100vw;\n    max-width:none!important;\n\n    margin-left:-50vw;\n\n    overflow:hidden;\n\n    color:#fff;\n\n    background:var(--tx-black);\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n}\n\n\n#tx-rest-v1 *,\n#tx-rest-v1 *::before,\n#tx-rest-v1 *::after{\n    box-sizing:border-box;\n}\n\n\n#tx-rest-v1 img{\n    display:block;\n    max-width:100%;\n}\n\n\n\/* =========================================================\n   SHARED\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-shell{\n    width:min(1640px,92vw);\n\n    margin:0 auto;\n}\n\n\n#tx-rest-v1 .txr-kicker{\n    display:flex;\n\n    align-items:center;\n\n    gap:15px;\n\n    margin-bottom:18px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:\n        clamp(\n            9px,\n            .75vw,\n            12px\n        );\n\n    font-weight:900;\n\n    letter-spacing:.17em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-kicker::before{\n    content:\"\";\n\n    width:38px;\n    height:5px;\n\n    background:\n        repeating-linear-gradient(\n            90deg,\n            var(--tx-orange) 0,\n            var(--tx-orange) 9px,\n            transparent 9px,\n            transparent 13px\n        );\n\n    transform:skewX(-24deg);\n}\n\n\n#tx-rest-v1 .txr-section-title{\n    margin:0;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            54px,\n            5.6vw,\n            104px\n        );\n\n    line-height:.91;\n\n    font-weight:950;\n\n    letter-spacing:-.05em;\n}\n\n\n#tx-rest-v1 .txr-section-title span{\n    color:var(--tx-orange);\n}\n\n\n#tx-rest-v1 .txr-reveal{\n    opacity:0;\n\n    transform:\n        translateY(35px);\n\n    transition:\n        opacity .75s ease,\n        transform .75s\n        cubic-bezier(.2,.75,.2,1);\n}\n\n\n#tx-rest-v1 .txr-reveal.is-visible{\n    opacity:1;\n\n    transform:\n        translateY(0);\n}\n\n\n\/* =========================================================\n   01\n   BUILT FOR LIVE SITES\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-live{\n    position:relative;\n\n    min-height:70vh;\n\n    padding:\n        clamp(90px,10vh,130px)\n        0;\n\n    overflow:hidden;\n\n    background:\n        radial-gradient(\n            circle at 75% 45%,\n            rgba(255,90,0,.055),\n            transparent 35%\n        ),\n        linear-gradient(\n            145deg,\n            #081014,\n            #020405\n        );\n}\n\n\n\/* grid *\/\n\n#tx-rest-v1 .txr-live::before{\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    opacity:.3;\n\n    background-image:\n        linear-gradient(\n            rgba(70,111,130,.11) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(70,111,130,.11) 1px,\n            transparent 1px\n        );\n\n    background-size:\n        65px 65px;\n}\n\n\n#tx-rest-v1 .txr-live-inner{\n    position:relative;\n\n    z-index:3;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(350px,.85fr)\n        minmax(600px,1.35fr);\n\n    gap:\n        clamp(\n            60px,\n            7vw,\n            130px\n        );\n\n    align-items:center;\n}\n\n\n#tx-rest-v1 .txr-live-copy p{\n    max-width:650px;\n\n    margin:\n        26px\n        0\n        0;\n\n    color:\n        rgba(255,255,255,.65);\n\n    font-size:\n        clamp(\n            16px,\n            1.18vw,\n            21px\n        );\n\n    line-height:1.55;\n}\n\n\n\/* =========================================================\n   LIVE SITE STATS\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-stats{\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            2,\n            minmax(0,1fr)\n        );\n\n    border:\n        1px solid\n        rgba(255,255,255,.12);\n\n    background:\n        rgba(7,12,15,.68);\n\n    backdrop-filter:\n        blur(10px);\n}\n\n\n#tx-rest-v1 .txr-stat{\n    min-height:220px;\n\n    padding:\n        clamp(\n            28px,\n            3vw,\n            48px\n        );\n\n    display:flex;\n\n    flex-direction:column;\n\n    justify-content:flex-end;\n\n    border-right:\n        1px solid\n        rgba(255,255,255,.11);\n\n    border-bottom:\n        1px solid\n        rgba(255,255,255,.11);\n\n    transition:\n        background .3s ease;\n}\n\n\n#tx-rest-v1 .txr-stat:nth-child(2n){\n    border-right:0;\n}\n\n\n#tx-rest-v1 .txr-stat:nth-child(3),\n#tx-rest-v1 .txr-stat:nth-child(4){\n    border-bottom:0;\n}\n\n\n#tx-rest-v1 .txr-stat:hover{\n    background:\n        rgba(255,90,0,.055);\n}\n\n\n#tx-rest-v1 .txr-stat-number{\n    color:var(--tx-orange);\n\n    font-size:\n        clamp(\n            55px,\n            5vw,\n            90px\n        );\n\n    line-height:.8;\n\n    font-weight:950;\n\n    letter-spacing:-.05em;\n}\n\n\n#tx-rest-v1 .txr-stat h3{\n    margin:\n        23px\n        0\n        7px;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            17px,\n            1.3vw,\n            24px\n        );\n}\n\n\n#tx-rest-v1 .txr-stat p{\n    margin:0;\n\n    color:\n        rgba(255,255,255,.51);\n\n    font-size:\n        clamp(\n            12px,\n            .9vw,\n            15px\n        );\n\n    line-height:1.45;\n}\n\n\n\/* =========================================================\n   02\n   SMART PROCUREMENT\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-procurement{\n    position:relative;\n\n    padding:\n        clamp(105px,12vh,155px)\n        0;\n\n    overflow:hidden;\n\n    color:#090909;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ff6800 0%,\n            #ff5a00 55%,\n            #ed4b00 100%\n        );\n}\n\n\n\/* subtle texture *\/\n\n#tx-rest-v1 .txr-procurement::before{\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    opacity:.07;\n\n    background-image:\n        repeating-linear-gradient(\n            0deg,\n            transparent 0,\n            transparent 3px,\n            rgba(0,0,0,.04) 4px\n        );\n}\n\n\n#tx-rest-v1 .txr-procurement-inner{\n    position:relative;\n\n    z-index:3;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(420px,.9fr)\n        minmax(600px,1.15fr);\n\n    gap:\n        clamp(\n            70px,\n            8vw,\n            145px\n        );\n\n    align-items:center;\n}\n\n\n#tx-rest-v1 .txr-procurement .txr-kicker{\n    color:#111;\n}\n\n\n#tx-rest-v1 .txr-procurement .txr-kicker::before{\n    background:\n        repeating-linear-gradient(\n            90deg,\n            #111 0,\n            #111 9px,\n            transparent 9px,\n            transparent 13px\n        );\n}\n\n\n#tx-rest-v1 .txr-proc-title{\n    margin:0;\n\n    color:#090909;\n\n    font-size:\n        clamp(\n            58px,\n            5.8vw,\n            108px\n        );\n\n    line-height:.89;\n\n    font-weight:950;\n\n    letter-spacing:-.055em;\n}\n\n\n#tx-rest-v1 .txr-proc-title span{\n    display:block;\n\n    color:#fff;\n}\n\n\n#tx-rest-v1 .txr-proc-intro{\n    max-width:640px;\n\n    margin:\n        25px\n        0\n        34px;\n\n    color:\n        rgba(0,0,0,.68);\n\n    font-size:\n        clamp(\n            16px,\n            1.17vw,\n            21px\n        );\n\n    line-height:1.5;\n}\n\n\n\/* =========================================================\n   PROCUREMENT FEATURES\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-proc-points{\n    max-width:640px;\n\n    border-top:\n        1px solid\n        rgba(0,0,0,.24);\n}\n\n\n#tx-rest-v1 .txr-proc-point{\n    min-height:76px;\n\n    display:grid;\n\n    grid-template-columns:\n        46px\n        1fr;\n\n    gap:17px;\n\n    align-items:center;\n\n    border-bottom:\n        1px solid\n        rgba(0,0,0,.21);\n}\n\n\n#tx-rest-v1 .txr-proc-point-icon{\n    width:37px;\n    height:37px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        1px solid\n        rgba(0,0,0,.55);\n\n    border-radius:50%;\n}\n\n\n#tx-rest-v1 .txr-proc-point-icon svg{\n    width:18px;\n    height:18px;\n\n    fill:none;\n\n    stroke:#080808;\n\n    stroke-width:2;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n#tx-rest-v1 .txr-proc-point strong{\n    display:block;\n\n    margin-bottom:3px;\n\n    font-size:\n        clamp(\n            15px,\n            1vw,\n            18px\n        );\n}\n\n\n#tx-rest-v1 .txr-proc-point p{\n    margin:0;\n\n    color:\n        rgba(0,0,0,.59);\n\n    font-size:\n        clamp(\n            12px,\n            .85vw,\n            15px\n        );\n}\n\n\n\/* =========================================================\n   BID PANEL\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-bid-panel{\n    overflow:hidden;\n\n    border:\n        1px solid\n        rgba(255,255,255,.23);\n\n    border-radius:18px;\n\n    color:#fff;\n\n    background:\n        linear-gradient(\n            145deg,\n            #0c1317,\n            #05090c\n        );\n\n    box-shadow:\n        0\n        35px\n        65px\n        rgba(0,0,0,.25);\n}\n\n\n#tx-rest-v1 .txr-bid-head{\n    padding:\n        28px\n        31px\n        24px;\n\n    display:flex;\n\n    justify-content:space-between;\n\n    gap:20px;\n\n    border-bottom:\n        1px solid\n        rgba(255,255,255,.11);\n}\n\n\n#tx-rest-v1 .txr-rfq-label{\n    margin-bottom:6px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:10px;\n\n    font-weight:900;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-bid-head h3{\n    margin:0;\n\n    font-size:\n        clamp(\n            20px,\n            1.65vw,\n            29px\n        );\n}\n\n\n#tx-rest-v1 .txr-live-tag{\n    align-self:flex-start;\n\n    padding:\n        7px\n        10px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    border:\n        1px solid\n        rgba(255,90,0,.35);\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:9px;\n\n    letter-spacing:.09em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-live-dot{\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:var(--tx-orange);\n\n    box-shadow:\n        0\n        0\n        9px\n        rgba(255,90,0,.7);\n\n    animation:\n        txr-pulse\n        1.6s\n        infinite;\n}\n\n\n@keyframes txr-pulse{\n\n    50%{\n        opacity:.35;\n    }\n\n}\n\n\n\/* =========================================================\n   BID ROW\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-bid-list{\n    padding:\n        11px\n        22px;\n}\n\n\n#tx-rest-v1 .txr-bid{\n    min-height:85px;\n\n    display:grid;\n\n    grid-template-columns:\n        50px\n        48px\n        minmax(170px,1fr)\n        115px\n        90px;\n\n    gap:13px;\n\n    align-items:center;\n\n    padding:\n        10px\n        8px;\n\n    border-bottom:\n        1px solid\n        rgba(255,255,255,.09);\n\n    opacity:0;\n\n    transform:\n        translateX(25px);\n\n    transition:\n        opacity .55s ease,\n        transform .55s ease,\n        background .25s ease;\n}\n\n\n#tx-rest-v1 .txr-bid:last-child{\n    border-bottom:0;\n}\n\n\n#tx-rest-v1 .txr-bid-panel.is-visible .txr-bid{\n    opacity:1;\n\n    transform:\n        translateX(0);\n}\n\n\n#tx-rest-v1 .txr-bid-panel.is-visible .txr-bid:nth-child(1){\n    transition-delay:.12s;\n}\n\n\n#tx-rest-v1 .txr-bid-panel.is-visible .txr-bid:nth-child(2){\n    transition-delay:.22s;\n}\n\n\n#tx-rest-v1 .txr-bid-panel.is-visible .txr-bid:nth-child(3){\n    transition-delay:.32s;\n}\n\n\n#tx-rest-v1 .txr-bid-panel.is-visible .txr-bid:nth-child(4){\n    transition-delay:.42s;\n}\n\n\n#tx-rest-v1 .txr-bid.best{\n    background:\n        rgba(255,90,0,.055);\n}\n\n\n#tx-rest-v1 .txr-rank{\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:16px;\n\n    font-weight:900;\n}\n\n\n#tx-rest-v1 .txr-bid-avatar{\n    width:42px;\n    height:42px;\n\n    display:grid;\n\n    place-items:center;\n\n    border-radius:50%;\n\n    color:#fff;\n\n    background:#212b30;\n\n    font-size:11px;\n\n    font-weight:900;\n}\n\n\n#tx-rest-v1 .txr-bid-name strong{\n    display:block;\n\n    margin-bottom:4px;\n\n    font-size:\n        clamp(\n            13px,\n            .9vw,\n            16px\n        );\n}\n\n\n#tx-rest-v1 .txr-compliant{\n    color:var(--tx-green);\n\n    font-size:10px;\n\n    font-weight:700;\n}\n\n\n#tx-rest-v1 .txr-price{\n    font-size:\n        clamp(\n            16px,\n            1.15vw,\n            20px\n        );\n\n    font-weight:800;\n}\n\n\n#tx-rest-v1 .txr-score{\n    text-align:right;\n}\n\n\n#tx-rest-v1 .txr-score strong{\n    display:block;\n\n    color:var(--tx-orange);\n\n    font-size:20px;\n}\n\n\n#tx-rest-v1 .txr-score small{\n    color:\n        rgba(255,255,255,.47);\n\n    font-size:9px;\n}\n\n\n#tx-rest-v1 .txr-best-value{\n    display:inline-block;\n\n    margin-top:4px;\n\n    padding:\n        3px\n        6px;\n\n    color:#090909;\n\n    background:var(--tx-orange);\n\n    font-size:8px;\n\n    font-weight:900;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   BID FOOTER\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-bid-foot{\n    padding:\n        21px\n        30px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:20px;\n\n    border-top:\n        1px solid\n        rgba(255,255,255,.10);\n\n    color:\n        rgba(255,255,255,.59);\n\n    font-size:11px;\n}\n\n\n#tx-rest-v1 .txr-bid-foot strong{\n    color:#fff;\n}\n\n\n\/* =========================================================\n   03\n   AI SECTION\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-ai{\n    position:relative;\n\n    padding:\n        clamp(110px,13vh,170px)\n        0\n        clamp(125px,14vh,180px);\n\n    overflow:hidden;\n\n    background:\n        linear-gradient(\n            145deg,\n            #070c0f,\n            #010304\n        );\n}\n\n\n\/* grid *\/\n\n#tx-rest-v1 .txr-ai::before{\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    opacity:.27;\n\n    background-image:\n        linear-gradient(\n            rgba(65,109,128,.10) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(65,109,128,.10) 1px,\n            transparent 1px\n        );\n\n    background-size:\n        62px 62px;\n}\n\n\n#tx-rest-v1 .txr-ai-header{\n    position:relative;\n\n    z-index:3;\n\n    max-width:1050px;\n\n    margin-bottom:\n        clamp(\n            55px,\n            7vh,\n            90px\n        );\n}\n\n\n#tx-rest-v1 .txr-ai-header p{\n    max-width:680px;\n\n    margin:\n        25px\n        0\n        0;\n\n    color:\n        rgba(255,255,255,.62);\n\n    font-size:\n        clamp(\n            16px,\n            1.15vw,\n            20px\n        );\n\n    line-height:1.55;\n}\n\n\n\/* =========================================================\n   AI GRID\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-ai-grid{\n    position:relative;\n\n    z-index:3;\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(\n            3,\n            minmax(0,1fr)\n        );\n\n    gap:18px;\n}\n\n\n#tx-rest-v1 .txr-ai-card{\n    position:relative;\n\n    min-height:550px;\n\n    padding:\n        clamp(\n            30px,\n            3vw,\n            48px\n        );\n\n    overflow:hidden;\n\n    border:\n        1px solid\n        rgba(255,255,255,.13);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(13,20,24,.97),\n            rgba(5,9,11,.98)\n        );\n\n    transition:\n        transform .35s ease,\n        border-color .35s ease;\n}\n\n\n#tx-rest-v1 .txr-ai-card:hover{\n    transform:\n        translateY(-8px);\n\n    border-color:\n        rgba(255,90,0,.55);\n}\n\n\n#tx-rest-v1 .txr-ai-number{\n    position:absolute;\n\n    right:22px;\n    top:15px;\n\n    color:\n        rgba(255,255,255,.025);\n\n    font-size:\n        clamp(\n            100px,\n            9vw,\n            155px\n        );\n\n    line-height:1;\n\n    font-weight:950;\n}\n\n\n#tx-rest-v1 .txr-ai-type{\n    margin-bottom:28px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:10px;\n\n    font-weight:900;\n\n    letter-spacing:.17em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-ai-icon{\n    width:70px;\n    height:70px;\n\n    margin-bottom:34px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        1px solid\n        rgba(255,90,0,.45);\n\n    color:var(--tx-orange);\n}\n\n\n#tx-rest-v1 .txr-ai-icon svg{\n    width:34px;\n    height:34px;\n\n    fill:none;\n\n    stroke:currentColor;\n\n    stroke-width:1.8;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n#tx-rest-v1 .txr-ai-card h3{\n    max-width:460px;\n\n    margin:0;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            35px,\n            3vw,\n            55px\n        );\n\n    line-height:.96;\n\n    letter-spacing:-.04em;\n}\n\n\n#tx-rest-v1 .txr-ai-card p{\n    max-width:470px;\n\n    margin:\n        20px\n        0\n        0;\n\n    color:\n        rgba(255,255,255,.61);\n\n    font-size:\n        clamp(\n            14px,\n            1vw,\n            17px\n        );\n\n    line-height:1.55;\n}\n\n\n\/* =========================================================\n   MINI AI VISUAL\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-ai-demo{\n    position:absolute;\n\n    left:\n        clamp(\n            30px,\n            3vw,\n            48px\n        );\n\n    right:\n        clamp(\n            30px,\n            3vw,\n            48px\n        );\n\n    bottom:\n        clamp(\n            28px,\n            3vw,\n            45px\n        );\n\n    min-height:125px;\n\n    padding:17px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.11);\n\n    background:\n        rgba(255,255,255,.025);\n}\n\n\n#tx-rest-v1 .txr-ai-demo-label{\n    margin-bottom:12px;\n\n    color:\n        rgba(255,255,255,.38);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:8px;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-ai-line{\n    height:7px;\n\n    margin-bottom:8px;\n\n    border-radius:20px;\n\n    background:\n        rgba(255,255,255,.09);\n}\n\n\n#tx-rest-v1 .txr-ai-line.orange{\n    background:\n        rgba(255,90,0,.55);\n}\n\n\n#tx-rest-v1 .txr-ai-line.short{\n    width:67%;\n}\n\n\n#tx-rest-v1 .txr-ai-line.tiny{\n    width:42%;\n}\n\n\n\/* AI status *\/\n\n#tx-rest-v1 .txr-ai-status{\n    margin-top:13px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:8px;\n\n    color:var(--tx-green);\n\n    font-size:10px;\n\n    font-weight:800;\n}\n\n\n#tx-rest-v1 .txr-ai-status i{\n    width:16px;\n    height:16px;\n\n    display:grid;\n\n    place-items:center;\n\n    border:\n        1px solid\n        var(--tx-green);\n\n    border-radius:50%;\n\n    font-style:normal;\n\n    font-size:8px;\n}\n\n\n\/* =========================================================\n   CTA\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-cta{\n    position:relative;\n\n    min-height:80vh;\n\n    display:flex;\n\n    align-items:center;\n\n    overflow:hidden;\n\n    background:#060707;\n}\n\n\n#tx-rest-v1 .txr-cta-bg{\n    position:absolute;\n\n    inset:-3%;\n\n    background-image:\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Golden-Construction-Site-at-Sunset.png\");\n\n    background-size:cover;\n\n    background-position:center;\n\n    filter:\n        grayscale(.92)\n        brightness(.46)\n        contrast(1.13);\n\n    transform:scale(1.05);\n}\n\n\n#tx-rest-v1 .txr-cta-overlay{\n    position:absolute;\n\n    inset:0;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(1,3,4,.94) 0%,\n            rgba(1,3,4,.79) 44%,\n            rgba(1,3,4,.28) 100%\n        ),\n\n        linear-gradient(\n            180deg,\n            rgba(2,3,4,.18),\n            rgba(2,3,4,.54)\n        );\n}\n\n\n#tx-rest-v1 .txr-cta-content{\n    position:relative;\n\n    z-index:5;\n\n    max-width:1030px;\n\n    padding:\n        clamp(\n            100px,\n            12vh,\n            150px\n        )\n        0;\n}\n\n\n#tx-rest-v1 .txr-cta-title{\n    margin:0;\n\n    max-width:950px;\n\n    color:#fff;\n\n    font-size:\n        clamp(\n            58px,\n            6.4vw,\n            116px\n        );\n\n    line-height:.88;\n\n    font-weight:950;\n\n    letter-spacing:-.055em;\n}\n\n\n#tx-rest-v1 .txr-cta-title span{\n    display:block;\n\n    color:var(--tx-orange);\n}\n\n\n#tx-rest-v1 .txr-cta-content p{\n    max-width:650px;\n\n    margin:\n        28px\n        0\n        36px;\n\n    color:\n        rgba(255,255,255,.67);\n\n    font-size:\n        clamp(\n            16px,\n            1.2vw,\n            21px\n        );\n\n    line-height:1.55;\n}\n\n\n\/* =========================================================\n   CTA BUTTONS\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-actions{\n    display:flex;\n\n    flex-wrap:wrap;\n\n    gap:12px;\n}\n\n\n#tx-rest-v1 .txr-btn{\n    min-width:195px;\n    min-height:56px;\n\n    padding:\n        16px\n        25px;\n\n    display:inline-flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:24px;\n\n    text-decoration:none;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:10px;\n\n    font-weight:900;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n\n    transition:\n        transform .25s ease,\n        background .25s ease,\n        color .25s ease;\n}\n\n\n#tx-rest-v1 .txr-btn-primary{\n    color:#090909;\n\n    background:var(--tx-orange);\n\n    border:\n        1px solid\n        var(--tx-orange);\n}\n\n\n#tx-rest-v1 .txr-btn-primary:hover{\n    transform:\n        translateY(-3px);\n\n    background:#fff;\n\n    border-color:#fff;\n}\n\n\n#tx-rest-v1 .txr-btn-secondary{\n    color:#fff;\n\n    background:\n        rgba(0,0,0,.22);\n\n    border:\n        1px solid\n        rgba(255,255,255,.45);\n\n    backdrop-filter:\n        blur(7px);\n}\n\n\n#tx-rest-v1 .txr-btn-secondary:hover{\n    transform:\n        translateY(-3px);\n\n    color:#090909;\n\n    background:#fff;\n}\n\n\n\/* =========================================================\n   CTA SIDE MICRO\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-cta-side{\n    position:absolute;\n\n    z-index:5;\n\n    right:4vw;\n    bottom:8%;\n\n    color:\n        rgba(255,255,255,.62);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:9px;\n\n    line-height:1.55;\n\n    letter-spacing:.17em;\n\n    text-align:right;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-cta-side::after{\n    content:\"\";\n\n    display:block;\n\n    width:24px;\n    height:2px;\n\n    margin:\n        10px\n        0\n        0\n        auto;\n\n    background:var(--tx-orange);\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-footer{\n    background:#020304;\n\n    border-top:\n        1px solid\n        rgba(255,255,255,.09);\n}\n\n\n#tx-rest-v1 .txr-footer-main{\n    padding:\n        58px\n        0\n        45px;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(250px,1fr)\n        repeat(\n            3,\n            minmax(150px,.45fr)\n        );\n\n    gap:45px;\n}\n\n\n#tx-rest-v1 .txr-footer-brand img{\n    width:\n        clamp(\n            170px,\n            13vw,\n            235px\n        );\n}\n\n\n#tx-rest-v1 .txr-footer-brand p{\n    max-width:380px;\n\n    margin:\n        19px\n        0\n        0;\n\n    color:\n        rgba(255,255,255,.47);\n\n    font-size:13px;\n\n    line-height:1.6;\n}\n\n\n#tx-rest-v1 .txr-footer-col h4{\n    margin:\n        0\n        0\n        17px;\n\n    color:var(--tx-orange);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:9px;\n\n    letter-spacing:.16em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-footer-col a{\n    display:block;\n\n    margin-bottom:10px;\n\n    color:\n        rgba(255,255,255,.61);\n\n    text-decoration:none;\n\n    font-size:13px;\n\n    transition:\n        color .2s ease;\n}\n\n\n#tx-rest-v1 .txr-footer-col a:hover{\n    color:#fff;\n}\n\n\n\/* =========================================================\n   FOOTER BOTTOM\n   ========================================================= *\/\n\n#tx-rest-v1 .txr-footer-bottom{\n    min-height:68px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:25px;\n\n    border-top:\n        1px solid\n        rgba(255,255,255,.08);\n\n    color:\n        rgba(255,255,255,.35);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size:8px;\n\n    letter-spacing:.13em;\n\n    text-transform:uppercase;\n}\n\n\n#tx-rest-v1 .txr-footer-tagline{\n    color:\n        rgba(255,255,255,.52);\n}\n\n\n#tx-rest-v1 .txr-footer-tagline span{\n    color:var(--tx-orange);\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:1050px){\n\n    #tx-rest-v1 .txr-live-inner,\n    #tx-rest-v1 .txr-procurement-inner{\n        grid-template-columns:1fr;\n    }\n\n\n    #tx-rest-v1 .txr-stats{\n        max-width:900px;\n    }\n\n\n    #tx-rest-v1 .txr-ai-grid{\n        grid-template-columns:1fr;\n    }\n\n\n    #tx-rest-v1 .txr-ai-card{\n        min-height:470px;\n    }\n\n\n    #tx-rest-v1 .txr-footer-main{\n        grid-template-columns:\n            1fr\n            1fr;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:650px){\n\n    #tx-rest-v1{\n        left:0;\n\n        width:100%;\n\n        margin-left:0;\n    }\n\n\n    #tx-rest-v1 .txr-shell{\n        width:90vw;\n    }\n\n\n    #tx-rest-v1 .txr-section-title,\n    #tx-rest-v1 .txr-proc-title,\n    #tx-rest-v1 .txr-cta-title{\n        font-size:\n            clamp(\n                48px,\n                13vw,\n                68px\n            );\n    }\n\n\n    #tx-rest-v1 .txr-stats{\n        grid-template-columns:1fr;\n    }\n\n\n    #tx-rest-v1 .txr-stat{\n        min-height:175px;\n\n        border-right:0;\n\n        border-bottom:\n            1px solid\n            rgba(255,255,255,.11)!important;\n    }\n\n\n    #tx-rest-v1 .txr-stat:last-child{\n        border-bottom:0!important;\n    }\n\n\n    #tx-rest-v1 .txr-bid-head{\n        padding:\n            22px\n            18px;\n    }\n\n\n    #tx-rest-v1 .txr-live-tag{\n        display:none;\n    }\n\n\n    #tx-rest-v1 .txr-bid-list{\n        padding:\n            8px\n            13px;\n    }\n\n\n    #tx-rest-v1 .txr-bid{\n        grid-template-columns:\n            30px\n            36px\n            1fr\n            auto;\n\n        gap:8px;\n\n        min-height:76px;\n    }\n\n\n    #tx-rest-v1 .txr-price{\n        grid-column:\n            3;\n\n        font-size:13px;\n    }\n\n\n    #tx-rest-v1 .txr-score{\n        grid-column:\n            4;\n\n        grid-row:\n            1 \/ span 2;\n    }\n\n\n    #tx-rest-v1 .txr-bid-avatar{\n        width:34px;\n        height:34px;\n\n        font-size:9px;\n    }\n\n\n    #tx-rest-v1 .txr-bid-foot{\n        flex-direction:column;\n\n        align-items:flex-start;\n\n        padding:\n            18px;\n    }\n\n\n    #tx-rest-v1 .txr-ai-card{\n        min-height:510px;\n\n        padding:\n            30px\n            24px;\n    }\n\n\n    #tx-rest-v1 .txr-ai-demo{\n        left:24px;\n        right:24px;\n        bottom:25px;\n    }\n\n\n    #tx-rest-v1 .txr-cta{\n        min-height:720px;\n    }\n\n\n    #tx-rest-v1 .txr-cta-overlay{\n        background:\n            linear-gradient(\n                180deg,\n                rgba(1,3,4,.90),\n                rgba(1,3,4,.65)\n            );\n    }\n\n\n    #tx-rest-v1 .txr-actions{\n        display:grid;\n\n        grid-template-columns:1fr;\n    }\n\n\n    #tx-rest-v1 .txr-btn{\n        width:100%;\n    }\n\n\n    #tx-rest-v1 .txr-cta-side{\n        display:none;\n    }\n\n\n    #tx-rest-v1 .txr-footer-main{\n        grid-template-columns:1fr;\n\n        gap:32px;\n    }\n\n\n    #tx-rest-v1 .txr-footer-bottom{\n        padding:\n            20px\n            0;\n\n        flex-direction:column;\n\n        align-items:flex-start;\n\n        justify-content:center;\n    }\n\n}\n\n<\/style>\n\n\n<!-- ======================================================\n     01\n     BUILT FOR LIVE SITES\n     ====================================================== -->\n\n<section class=\"txr-live\">\n\n    <div class=\"txr-shell txr-live-inner\">\n\n\n        <div class=\"txr-live-copy txr-reveal\">\n\n\n            <div class=\"txr-kicker\">\n\n                Built for live sites\n\n            <\/div>\n\n\n            <h2 class=\"txr-section-title\">\n\n                One source of truth.\n\n                <span>\n                    Every moving part.\n                <\/span>\n\n            <\/h2>\n\n\n            <p>\n\n                Jobs, people, safety, procurement and evidence\n                stay connected from the first request through\n                verified close out. No scattered calls. No\n                compliance documents hiding in an inbox.\n\n            <\/p>\n\n\n        <\/div>\n\n\n        <div class=\"txr-stats txr-reveal\">\n\n\n            <article class=\"txr-stat\">\n\n                <div class=\"txr-stat-number\">\n                    3\n                <\/div>\n\n                <h3>\n                    Role based portals\n                <\/h3>\n\n                <p>\n                    Primary Contractor \u2022 Subcontractor \u2022 Client\n                <\/p>\n\n            <\/article>\n\n\n            <article class=\"txr-stat\">\n\n                <div class=\"txr-stat-number\">\n                    7\n                <\/div>\n\n                <h3>\n                    Lifecycle stages\n                <\/h3>\n\n                <p>\n                    From first request to verified close out.\n                <\/p>\n\n            <\/article>\n\n\n            <article class=\"txr-stat\">\n\n                <div class=\"txr-stat-number\">\n                    12\n                <\/div>\n\n                <h3>\n                    WHS SWMS templates\n                <\/h3>\n\n                <p>\n                    Trade specific and ready to enhance.\n                <\/p>\n\n            <\/article>\n\n\n            <article class=\"txr-stat\">\n\n                <div class=\"txr-stat-number\">\n                    3\u00d7\n                <\/div>\n\n                <h3>\n                    AI engines built in\n                <\/h3>\n\n                <p>\n                    Vision \u2022 Language \u2022 Assistant\n                <\/p>\n\n            <\/article>\n\n\n        <\/div>\n\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ======================================================\n     02\n     SMART PROCUREMENT\n     ====================================================== -->\n\n<section class=\"txr-procurement\">\n\n    <div class=\"txr-shell txr-procurement-inner\">\n\n\n        <!-- COPY -->\n\n        <div class=\"txr-proc-copy txr-reveal\">\n\n\n            <div class=\"txr-kicker\">\n\n                Smart Procurement\n\n            <\/div>\n\n\n            <h2 class=\"txr-proc-title\">\n\n                Bids that\n\n                <span>\n                    score themselves.\n                <\/span>\n\n            <\/h2>\n\n\n            <p class=\"txr-proc-intro\">\n\n                RFQs go to eligible subcontractors.\n                Every response is structured, compared and\n                ranked as it lands, so the best value rises\n                to the top.\n\n            <\/p>\n\n\n            <div class=\"txr-proc-points\">\n\n\n                <div class=\"txr-proc-point\">\n\n                    <div class=\"txr-proc-point-icon\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <path d=\"M24 5l14 6v10c0 9-5 17-14 22C15 38 10 30 10 21V11z\"><\/path>\n\n                            <path d=\"M17 24l5 5 10-12\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div>\n\n                        <strong>\n                            Compliance gating\n                        <\/strong>\n\n                        <p>\n                            Only eligible, compliant subcontractors can bid.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"txr-proc-point\">\n\n                    <div class=\"txr-proc-point-icon\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <path d=\"M7 38l11-12 8 6 15-20\"><\/path>\n\n                            <path d=\"M32 12h9v9\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div>\n\n                        <strong>\n                            Live scoring\n                        <\/strong>\n\n                        <p>\n                            Bids are ranked as they arrive.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"txr-proc-point\">\n\n                    <div class=\"txr-proc-point-icon\">\n\n                        <svg viewBox=\"0 0 48 48\">\n\n                            <circle cx=\"24\" cy=\"24\" r=\"16\"><\/circle>\n\n                            <path d=\"M16 24l5 5 11-13\"><\/path>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div>\n\n                        <strong>\n                            Faster award decisions\n                        <\/strong>\n\n                        <p>\n                            Compare true value and award with confidence.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- LIVE BID EXAMPLE -->\n\n        <div class=\"txr-bid-panel txr-reveal\">\n\n\n            <div class=\"txr-bid-head\">\n\n\n                <div>\n\n                    <div class=\"txr-rfq-label\">\n                        RFQ #4821\n                    <\/div>\n\n                    <h3>\n                        Plumbing Works \u2014 Commercial Fitout\n                    <\/h3>\n\n                <\/div>\n\n\n                <div class=\"txr-live-tag\">\n\n                    <span class=\"txr-live-dot\"><\/span>\n\n                    Live ranking\n\n                <\/div>\n\n\n            <\/div>\n\n\n            <div class=\"txr-bid-list\">\n\n\n                <!-- 01 -->\n\n                <div class=\"txr-bid best\">\n\n\n                    <div class=\"txr-rank\">\n                        01\n                    <\/div>\n\n\n                    <div class=\"txr-bid-avatar\">\n                        BL\n                    <\/div>\n\n\n                    <div class=\"txr-bid-name\">\n\n                        <strong>\n                            BlueLine Services\n                        <\/strong>\n\n                        <span class=\"txr-compliant\">\n                            \u2713 Compliant\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"txr-price\">\n                        $4,850\n                    <\/div>\n\n\n                    <div class=\"txr-score\">\n\n                        <strong>\n                            88\n                        <\/strong>\n\n                        <small>\n                            points\n                        <\/small>\n\n                        <span class=\"txr-best-value\">\n                            Best value\n                        <\/span>\n\n                    <\/div>\n\n\n                <\/div>\n\n\n                <!-- 02 -->\n\n                <div class=\"txr-bid\">\n\n\n                    <div class=\"txr-rank\">\n                        02\n                    <\/div>\n\n\n                    <div class=\"txr-bid-avatar\">\n                        AP\n                    <\/div>\n\n\n                    <div class=\"txr-bid-name\">\n\n                        <strong>\n                            Apex Plumbing Co\n                        <\/strong>\n\n                        <span class=\"txr-compliant\">\n                            \u2713 Compliant\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"txr-price\">\n                        $4,970\n                    <\/div>\n\n\n                    <div class=\"txr-score\">\n\n                        <strong>\n                            79\n                        <\/strong>\n\n                        <small>\n                            points\n                        <\/small>\n\n                    <\/div>\n\n\n                <\/div>\n\n\n                <!-- 03 -->\n\n                <div class=\"txr-bid\">\n\n\n                    <div class=\"txr-rank\">\n                        03\n                    <\/div>\n\n\n                    <div class=\"txr-bid-avatar\">\n                        MT\n                    <\/div>\n\n\n                    <div class=\"txr-bid-name\">\n\n                        <strong>\n                            Meridian Trades\n                        <\/strong>\n\n                        <span class=\"txr-compliant\">\n                            \u2713 Compliant\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"txr-price\">\n                        $5,240\n                    <\/div>\n\n\n                    <div class=\"txr-score\">\n\n                        <strong>\n                            66\n                        <\/strong>\n\n                        <small>\n                            points\n                        <\/small>\n\n                    <\/div>\n\n\n                <\/div>\n\n\n                <!-- 04 -->\n\n                <div class=\"txr-bid\">\n\n\n                    <div class=\"txr-rank\">\n                        04\n                    <\/div>\n\n\n                    <div class=\"txr-bid-avatar\">\n                        NG\n                    <\/div>\n\n\n                    <div class=\"txr-bid-name\">\n\n                        <strong>\n                            Northgate Group\n                        <\/strong>\n\n                        <span class=\"txr-compliant\">\n                            \u2713 Compliant\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"txr-price\">\n                        $5,690\n                    <\/div>\n\n\n                    <div class=\"txr-score\">\n\n                        <strong>\n                            54\n                        <\/strong>\n\n                        <small>\n                            points\n                        <\/small>\n\n                    <\/div>\n\n\n                <\/div>\n\n\n            <\/div>\n\n\n            <div class=\"txr-bid-foot\">\n\n                <span>\n                    <strong>12<\/strong> invited\n                <\/span>\n\n                <span>\n                    All bidders pass compliance checks\n                <\/span>\n\n                <span>\n                    <strong>2h 14m<\/strong> remaining\n                <\/span>\n\n            <\/div>\n\n\n        <\/div>\n\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ======================================================\n     03\n     AI BUILT INTO THE JOB\n     ====================================================== -->\n\n<section class=\"txr-ai\">\n\n    <div class=\"txr-shell\">\n\n\n        <header class=\"txr-ai-header txr-reveal\">\n\n\n            <div class=\"txr-kicker\">\n\n                Built into the job\n\n            <\/div>\n\n\n            <h2 class=\"txr-section-title\">\n\n                AI woven through\n\n                <span>\n                    the workflow.\n                <\/span>\n\n            <\/h2>\n\n\n            <p>\n\n                Not a bolt on chatbot. Intelligence works inside\n                the job exactly where it removes delay, improves\n                information and keeps work moving.\n\n            <\/p>\n\n\n        <\/header>\n\n\n        <div class=\"txr-ai-grid\">\n\n\n            <!-- =============================================\n                 VISION\n                 ============================================= -->\n\n            <article class=\"txr-ai-card txr-reveal\">\n\n\n                <div class=\"txr-ai-number\">\n                    01\n                <\/div>\n\n\n                <div class=\"txr-ai-type\">\n                    Vision Engine\n                <\/div>\n\n\n                <div class=\"txr-ai-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <path d=\"M5 24s7-12 19-12 19 12 19 12-7 12-19 12S5 24 5 24z\"><\/path>\n\n                        <circle cx=\"24\" cy=\"24\" r=\"6\"><\/circle>\n\n                    <\/svg>\n\n                <\/div>\n\n\n                <h3>\n                    AI Scope of Work\n                <\/h3>\n\n\n                <p>\n\n                    Site photos are analysed to help draft\n                    scope, severity, potential hazards and\n                    expected duration.\n\n                <\/p>\n\n\n                <div class=\"txr-ai-demo\">\n\n                    <div class=\"txr-ai-demo-label\">\n                        Site photo \u2192 structured scope\n                    <\/div>\n\n                    <div class=\"txr-ai-line orange\"><\/div>\n\n                    <div class=\"txr-ai-line\"><\/div>\n\n                    <div class=\"txr-ai-line short\"><\/div>\n\n                    <div class=\"txr-ai-line tiny\"><\/div>\n\n                    <div class=\"txr-ai-status\">\n\n                        <i>\u2713<\/i>\n\n                        Scope generated\n\n                    <\/div>\n\n                <\/div>\n\n\n            <\/article>\n\n\n            <!-- =============================================\n                 LANGUAGE\n                 ============================================= -->\n\n            <article class=\"txr-ai-card txr-reveal\">\n\n\n                <div class=\"txr-ai-number\">\n                    02\n                <\/div>\n\n\n                <div class=\"txr-ai-type\">\n                    Language Engine\n                <\/div>\n\n\n                <div class=\"txr-ai-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <path d=\"M11 5h21l5 5v33H11z\"><\/path>\n\n                        <path d=\"M32 5v7h7\"><\/path>\n\n                        <path d=\"M17 20h14\"><\/path>\n\n                        <path d=\"M17 26h14\"><\/path>\n\n                        <path d=\"M17 32h9\"><\/path>\n\n                    <\/svg>\n\n                <\/div>\n\n\n                <h3>\n                    AI SWMS Enhancement\n                <\/h3>\n\n\n                <p>\n\n                    Safe Work Method Statements can be strengthened\n                    with trade specific guidance before review\n                    and submission.\n\n                <\/p>\n\n\n                <div class=\"txr-ai-demo\">\n\n                    <div class=\"txr-ai-demo-label\">\n                        Safety document\n                    <\/div>\n\n                    <div class=\"txr-ai-line\"><\/div>\n\n                    <div class=\"txr-ai-line orange short\"><\/div>\n\n                    <div class=\"txr-ai-line\"><\/div>\n\n                    <div class=\"txr-ai-line tiny\"><\/div>\n\n                    <div class=\"txr-ai-status\">\n\n                        <i>\u2713<\/i>\n\n                        SWMS strengthened\n\n                    <\/div>\n\n                <\/div>\n\n\n            <\/article>\n\n\n            <!-- =============================================\n                 ASSISTANT\n                 ============================================= -->\n\n            <article class=\"txr-ai-card txr-reveal\">\n\n\n                <div class=\"txr-ai-number\">\n                    03\n                <\/div>\n\n\n                <div class=\"txr-ai-type\">\n                    Admin Assistant\n                <\/div>\n\n\n                <div class=\"txr-ai-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <path d=\"M8 9h32v24H21l-9 7v-7H8z\"><\/path>\n\n                        <circle cx=\"17\" cy=\"21\" r=\"1\"><\/circle>\n\n                        <circle cx=\"24\" cy=\"21\" r=\"1\"><\/circle>\n\n                        <circle cx=\"31\" cy=\"21\" r=\"1\"><\/circle>\n\n                    <\/svg>\n\n                <\/div>\n\n\n                <h3>\n                    AI Chat Assistant\n                <\/h3>\n\n\n                <p>\n\n                    Primary Contractors can ask read only questions\n                    about operational and compliance information\n                    already held inside TradesX.\n\n                <\/p>\n\n\n                <div class=\"txr-ai-demo\">\n\n                    <div class=\"txr-ai-demo-label\">\n                        Live TradesX data\n                    <\/div>\n\n                    <div class=\"txr-ai-line orange short\"><\/div>\n\n                    <div class=\"txr-ai-line\"><\/div>\n\n                    <div class=\"txr-ai-line tiny\"><\/div>\n\n                    <div class=\"txr-ai-line short\"><\/div>\n\n                    <div class=\"txr-ai-status\">\n\n                        <i>\u2713<\/i>\n\n                        Answer ready\n\n                    <\/div>\n\n                <\/div>\n\n\n            <\/article>\n\n\n        <\/div>\n\n\n    <\/div>\n\n<\/section>\n\n\n<!-- ======================================================\n     04\n     FINAL CTA\n     ====================================================== -->\n\n<section\n    class=\"txr-cta\"\n    id=\"tx-cta-section\"\n>\n\n\n    <div class=\"txr-cta-bg\"><\/div>\n\n    <div class=\"txr-cta-overlay\"><\/div>\n\n\n    <div class=\"txr-shell\">\n\n\n        <div class=\"txr-cta-content txr-reveal\">\n\n\n            <div class=\"txr-kicker\">\n\n                Get Started\n\n            <\/div>\n\n\n            <h2 class=\"txr-cta-title\">\n\n                Defend your sites from\n\n                <span>\n                    regulatory risk.\n                <\/span>\n\n            <\/h2>\n\n\n            <p>\n\n                Built for Australian trade services.\n                Compliance, procurement, safety and quality\n                connected in one platform.\n\n            <\/p>\n\n\n            <div class=\"txr-actions\">\n\n\n                <a\n                    class=\"txr-btn txr-btn-primary\"\n                    href=\"https:\/\/tradesx.com.au\/client\/register\"\n                >\n\n                    <span>\n                        Request a Job\n                    <\/span>\n\n                    <span>\n                        \u2192\n                    <\/span>\n\n                <\/a>\n\n\n                <a\n                    class=\"txr-btn txr-btn-secondary\"\n                    href=\"https:\/\/tradesx.com.au\/login\"\n                >\n\n                    <span>\n                        Sign In\n                    <\/span>\n\n                    <span>\n                        \u2192\n                    <\/span>\n\n                <\/a>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"txr-cta-side\">\n\n        SAME INDUSTRY.<br>\n        HIGHER STANDARDS.<br>\n        REAL WORK.<br>\n        REAL IMPACT.\n\n    <\/div>\n\n\n<\/section>\n\n\n<!-- ======================================================\n     05\n     FOOTER\n     ====================================================== -->\n\n<footer class=\"txr-footer\">\n\n    <div class=\"txr-shell\">\n\n\n        <div class=\"txr-footer-main\">\n\n\n            <!-- BRAND -->\n\n            <div class=\"txr-footer-brand\">\n\n\n                <img decoding=\"async\"\n                    src=\"https:\/\/tradesx.com.au\/landing\/tradesx-logo.png\"\n                    alt=\"TradesX\"\n                >\n\n\n                <p>\n\n                    The connective layer between principal\n                    contractors, subcontractors, compliance\n                    documents and the trades that keep sites moving.\n\n                <\/p>\n\n\n            <\/div>\n\n\n            <!-- PLATFORM -->\n\n            <div class=\"txr-footer-col\">\n\n\n                <h4>\n                    Platform\n                <\/h4>\n\n\n                <a href=\"https:\/\/tradesx.com.au\/login?role=admin\">\n                    Head Contractors\n                <\/a>\n\n                <a href=\"https:\/\/tradesx.com.au\/login?role=contractor\">\n                    Subcontractors\n                <\/a>\n\n                <a href=\"https:\/\/tradesx.com.au\/login?role=client\">\n                    Clients\n                <\/a>\n\n\n            <\/div>\n\n\n            <!-- ACCESS -->\n\n            <div class=\"txr-footer-col\">\n\n\n                <h4>\n                    Access\n                <\/h4>\n\n\n                <a href=\"https:\/\/tradesx.com.au\/login\">\n                    Sign In\n                <\/a>\n\n                <a href=\"https:\/\/tradesx.com.au\/client\/register\">\n                    Request a Job\n                <\/a>\n\n                <a href=\"#tx-cta-section\">\n                    Get Started\n                <\/a>\n\n\n            <\/div>\n\n\n            <!-- PRODUCT -->\n\n            <div class=\"txr-footer-col\">\n\n\n                <h4>\n                    TradesX\n                <\/h4>\n\n\n                <a href=\"#tx-cta-section\">\n                    Compliance\n                <\/a>\n\n                <a href=\"#tx-cta-section\">\n                    Procurement\n                <\/a>\n\n                <a href=\"#tx-cta-section\">\n                    Safety\n                <\/a>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <div class=\"txr-footer-bottom\">\n\n\n            <div>\n\n                \u00a9 2026 TradesX by DD Consulting.\n                All rights reserved.\n\n            <\/div>\n\n\n            <div class=\"txr-footer-tagline\">\n\n                Same industry.\n                <span>Higher standards.<\/span>\n\n            <\/div>\n\n\n        <\/div>\n\n\n    <\/div>\n\n<\/footer>\n\n\n<script>\n\n(() => {\n\n    const root =\n        document.querySelector(\n            '#tx-rest-v1'\n        );\n\n\n    if(\n        !root ||\n        root.dataset.txRestInit === '1'\n    ){\n        return;\n    }\n\n\n    root.dataset.txRestInit =\n        '1';\n\n\n    const reveals = [\n        ...root.querySelectorAll(\n            '.txr-reveal'\n        )\n    ];\n\n\n    const bidPanel =\n        root.querySelector(\n            '.txr-bid-panel'\n        );\n\n\n    \/* =====================================================\n       GENERAL REVEALS\n       ===================================================== *\/\n\n    const revealObserver =\n        new IntersectionObserver(\n\n            entries => {\n\n                entries.forEach(\n                    entry => {\n\n                        if(\n                            entry.isIntersecting\n                        ){\n\n                            entry.target\n                                .classList\n                                .add(\n                                    'is-visible'\n                                );\n\n\n                            revealObserver\n                                .unobserve(\n                                    entry.target\n                                );\n\n                        }\n\n                    }\n                );\n\n            },\n\n            {\n                threshold:.14\n            }\n\n        );\n\n\n    reveals.forEach(\n        element =>\n            revealObserver.observe(\n                element\n            )\n    );\n\n\n    \/* =====================================================\n       BID ROW REVEAL\n       ===================================================== *\/\n\n    if(\n        bidPanel\n    ){\n\n        const bidObserver =\n            new IntersectionObserver(\n\n                entries => {\n\n                    entries.forEach(\n                        entry => {\n\n                            if(\n                                entry.isIntersecting\n                            ){\n\n                                bidPanel\n                                    .classList\n                                    .add(\n                                        'is-visible'\n                                    );\n\n\n                                bidObserver\n                                    .unobserve(\n                                        bidPanel\n                                    );\n\n                            }\n\n                        }\n                    );\n\n                },\n\n                {\n                    threshold:.22\n                }\n\n            );\n\n\n        bidObserver.observe(\n            bidPanel\n        );\n\n    }\n\n\n})();\n\n<\/script>\n\n<\/section>\n\n<script>\n(() => {\n    const page = document.getElementById('tx-master-page');\n    const scroller = document.getElementById('tx-master-scroller');\n\n    if (!page || !scroller || scroller.dataset.txInit === '1') return;\n    scroller.dataset.txInit = '1';\n\n    const track = scroller.querySelector('.txms-track');\n    const progressEl = scroller.querySelector('.txms-progress');\n    const thumb = scroller.querySelector('.txms-thumb');\n    const topCounter = scroller.querySelector('.txms-top');\n    const bottomCounter = scroller.querySelector('.txms-bottom');\n    const markers = [...scroller.querySelectorAll('.txms-marker')];\n\n    const sections = markers\n        .map(marker => ({\n            marker,\n            target: document.getElementById(marker.dataset.target),\n            label: marker.dataset.label || ''\n        }))\n        .filter(item => item.target);\n\n    let pageTop = 0;\n    let pageBottom = 1;\n    let scrollRange = 1;\n    let dragging = false;\n    let rafPending = false;\n\n    const clamp = (value, min, max) =>\n        Math.min(max, Math.max(min, value));\n\n    function measure(){\n        const rect = page.getBoundingClientRect();\n        pageTop = window.scrollY + rect.top;\n        pageBottom = pageTop + page.offsetHeight;\n        scrollRange = Math.max(1, page.offsetHeight - window.innerHeight);\n\n        sections.forEach((item) => {\n            const targetRect = item.target.getBoundingClientRect();\n            const targetTop = window.scrollY + targetRect.top;\n            const targetProgress = clamp(\n                (targetTop - pageTop) \/ scrollRange,\n                0,\n                1\n            );\n\n            item.marker.style.top = `${targetProgress * 100}%`;\n        });\n\n        update();\n    }\n\n    function activeSection(){\n        const probe = window.scrollY + (window.innerHeight * .34);\n        let activeIndex = 0;\n\n        sections.forEach((item, index) => {\n            const rect = item.target.getBoundingClientRect();\n            const absoluteTop = window.scrollY + rect.top;\n\n            if (absoluteTop <= probe) {\n                activeIndex = index;\n            }\n        });\n\n        return activeIndex;\n    }\n\n    function update(){\n        rafPending = false;\n\n        const raw =\n            (window.scrollY - pageTop) \/\n            scrollRange;\n\n        const progress = clamp(raw, 0, 1);\n\n        progressEl.style.height = `${progress * 100}%`;\n        thumb.style.top = `${progress * 100}%`;\n\n        track.setAttribute(\n            'aria-valuenow',\n            String(Math.round(progress * 100))\n        );\n\n        const activeIndex = activeSection();\n\n        markers.forEach((marker, index) => {\n            marker.classList.toggle(\n                'is-active',\n                index === activeIndex\n            );\n        });\n\n        topCounter.textContent =\n            String(activeIndex + 1).padStart(2,'0');\n\n        bottomCounter.textContent =\n            String(sections.length).padStart(2,'0');\n\n        const insidePage =\n            window.scrollY + window.innerHeight > pageTop &&\n            window.scrollY < pageBottom;\n\n        scroller.classList.toggle(\n            'is-visible',\n            insidePage\n        );\n    }\n\n    function requestUpdate(){\n        if (rafPending) return;\n\n        rafPending = true;\n        requestAnimationFrame(update);\n    }\n\n    function scrollToProgress(progress, smooth){\n        const y =\n            pageTop +\n            (clamp(progress,0,1) * scrollRange);\n\n        window.scrollTo({\n            top:y,\n            behavior:smooth ? 'smooth' : 'auto'\n        });\n    }\n\n    function progressFromPointer(event){\n        const rect = track.getBoundingClientRect();\n\n        return clamp(\n            (event.clientY - rect.top) \/ rect.height,\n            0,\n            1\n        );\n    }\n\n    markers.forEach(item => {\n        item.addEventListener('click', event => {\n            event.stopPropagation();\n\n            const target =\n                document.getElementById(\n                    item.dataset.target\n                );\n\n            if (!target) return;\n\n            const top =\n                window.scrollY +\n                target.getBoundingClientRect().top;\n\n            window.scrollTo({\n                top,\n                behavior:'smooth'\n            });\n        });\n    });\n\n    track.addEventListener('click', event => {\n        if (\n            event.target.closest('.txms-marker') ||\n            event.target === thumb\n        ){\n            return;\n        }\n\n        scrollToProgress(\n            progressFromPointer(event),\n            true\n        );\n    });\n\n    thumb.addEventListener('pointerdown', event => {\n        dragging = true;\n        scroller.classList.add('is-dragging');\n\n        thumb.setPointerCapture?.(\n            event.pointerId\n        );\n\n        event.preventDefault();\n    });\n\n    window.addEventListener('pointermove', event => {\n        if (!dragging) return;\n\n        scrollToProgress(\n            progressFromPointer(event),\n            false\n        );\n    });\n\n    function stopDrag(){\n        if (!dragging) return;\n\n        dragging = false;\n        scroller.classList.remove('is-dragging');\n    }\n\n    window.addEventListener(\n        'pointerup',\n        stopDrag\n    );\n\n    window.addEventListener(\n        'pointercancel',\n        stopDrag\n    );\n\n    window.addEventListener(\n        'scroll',\n        requestUpdate,\n        {passive:true}\n    );\n\n    window.addEventListener(\n        'resize',\n        () => {\n            requestAnimationFrame(measure);\n        },\n        {passive:true}\n    );\n\n    if ('ResizeObserver' in window){\n        const ro = new ResizeObserver(() => {\n            requestAnimationFrame(measure);\n        });\n\n        ro.observe(page);\n    }\n\n    requestAnimationFrame(measure);\n\n    setTimeout(\n        measure,\n        250\n    );\n\n    setTimeout(\n        measure,\n        1200\n    );\n})();\n<\/script>\n\n\n<style id=\"tx-v2-cleanup-patch\">\n\/* =========================================================\n   TRADESX MASTER CLEANUP PATCH\n   removes the side progress rail\n   removes marked micro copy \/ footer extras\n   adds background parallax helpers\n   ========================================================= *\/\n\n#tx-master-scroller{\n    display:none !important;\n}\n\n\/* remove the marked extra corner \/ footer \/ scroll cue items *\/\n#tx-three-portals-v2 .tx3-micro-left,\n#tx-three-portals-v2 .tx3-micro-right,\n#tx-three-portals-v2 .tx3-bottom,\n#tx-three-portals-v2 .tx3-bottom-left,\n#tx-three-portals-v2 .tx3-bottom-right,\n#tx-three-portals-v2 .tx3-scroll,\n#tx-automation-engine .txae-logo,\n#tx-automation-engine .txae-micro-left,\n#tx-automation-engine .txae-micro-right,\n#tx-automation-engine .txae-bottom-left,\n#tx-automation-engine .txae-bottom-right,\n#tx-automation-engine .txae-scroll{\n    display:none !important;\n}\n\n\/* tighten layout after removing those extras *\/\n#tx-three-portals-v2 .tx3-shell{\n    min-height:100vh;\n    padding:56px 0 34px !important;\n}\n\n#tx-three-portals-v2 .tx3-heading{\n    margin-bottom:30px !important;\n}\n\n#tx-three-portals-v2 .tx3-portals{\n    margin-top:26px !important;\n}\n\n#tx-three-portals-v2 .tx3-bottom{\n    min-height:auto !important;\n    justify-content:flex-end !important;\n    margin-top:22px !important;\n}\n\n#tx-three-portals-v2 .tx3-bottom-right{\n    margin-left:auto !important;\n}\n\n#tx-automation-engine .txae-shell{\n    min-height:100vh;\n    padding:54px 0 34px !important;\n}\n\n#tx-automation-engine .txae-heading{\n    margin-bottom:34px !important;\n}\n\n#tx-automation-engine .txae-flow{\n    margin-top:18px !important;\n}\n\n#tx-automation-engine .txae-bottom{\n    min-height:auto !important;\n    margin-top:20px !important;\n}\n\n\/* parallax targets *\/\n#tx-three-portals-v2,\n#tx-automation-engine{\n    overflow:hidden;\n}\n\n#tx-three-portals-v2 .tx3-bg,\n#tx-automation-engine .txae-bg{\n    will-change:transform, filter;\n    transform:translate3d(0,0,0) scale(1.09);\n    transition:transform .08s linear;\n}\n\n\/* slightly cleaner stacking over parallax image *\/\n#tx-three-portals-v2 .tx3-grade,\n#tx-automation-engine .txae-shade{\n    pointer-events:none;\n}\n\n@media (max-width: 1100px){\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg{\n        transform:none !important;\n    }\n}\n<\/style>\n\n\n\n<style id=\"tx-v3-fixed-background-patch\">\n\/* =========================================================\n   RUNNN-STYLE PINNED \/ FIXED BACKGROUND EFFECT\n   The image stays visually locked to the viewport while the\n   section content scrolls across it. This is intentionally\n   NOT a moving parallax transform.\n   ========================================================= *\/\n\n\/* Hide the old moving image layers. Their grade\/overlay layers remain. *\/\n#tx-three-portals-v2 .tx3-bg,\n#tx-automation-engine .txae-bg{\n    display:none !important;\n}\n\n\/* THREE PORTALS \u2014 pinned cinematic construction background *\/\n#tx-three-portals-v2{\n    background-color:#050708 !important;\n    background-image:\n        linear-gradient(\n            180deg,\n            rgba(4,7,9,.14) 0%,\n            rgba(4,7,9,.04) 34%,\n            rgba(4,7,9,.20) 72%,\n            rgba(3,5,7,.48) 100%\n        ),\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Golden-Construction-Site-at-Sunset.png\") !important;\n    background-size:cover !important;\n    background-position:center center !important;\n    background-repeat:no-repeat !important;\n    background-attachment:fixed !important;\n}\n\n\/* Keep the existing cinematic grade but make it slightly more transparent\n   so the fixed-image movement reads clearly as you scroll. *\/\n#tx-three-portals-v2 .tx3-grade{\n    background:\n        linear-gradient(\n            180deg,\n            rgba(4,7,9,.20) 0%,\n            rgba(4,7,9,.06) 28%,\n            rgba(4,7,9,.14) 58%,\n            rgba(3,5,7,.72) 100%\n        ),\n        linear-gradient(\n            90deg,\n            rgba(3,6,8,.42) 0%,\n            rgba(3,6,8,.05) 30%,\n            rgba(3,6,8,.05) 70%,\n            rgba(3,6,8,.42) 100%\n        ),\n        radial-gradient(\n            ellipse at 50% 42%,\n            rgba(255,91,0,.035) 0%,\n            rgba(0,0,0,.05) 54%,\n            rgba(0,0,0,.34) 100%\n        ) !important;\n}\n\n\/* AUTOMATION \u2014 same pinned effect, darker \/ monochrome-feeling treatment *\/\n#tx-automation-engine{\n    background-color:#050607 !important;\n    background-image:\n        linear-gradient(\n            180deg,\n            rgba(2,4,5,.62) 0%,\n            rgba(2,4,5,.42) 28%,\n            rgba(2,4,5,.48) 58%,\n            rgba(2,4,5,.80) 100%\n        ),\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Cinematic-TradesX-Construction-Site-at-Dusk.png\") !important;\n    background-size:cover !important;\n    background-position:center center !important;\n    background-repeat:no-repeat !important;\n    background-attachment:fixed !important;\n    background-blend-mode:normal,luminosity;\n}\n\n#tx-automation-engine .txae-shade{\n    background:\n        linear-gradient(\n            180deg,\n            rgba(3,5,6,.36) 0%,\n            rgba(3,5,6,.12) 28%,\n            rgba(3,5,6,.18) 55%,\n            rgba(3,5,6,.70) 100%\n        ),\n        radial-gradient(\n            ellipse at 50% 38%,\n            rgba(0,0,0,0) 0%,\n            rgba(0,0,0,.08) 48%,\n            rgba(0,0,0,.46) 100%\n        ) !important;\n}\n\n\/* Make both sections feel like full-screen pinned scenes. *\/\n#tx-three-portals-v2,\n#tx-automation-engine{\n    position:relative;\n    min-height:100vh;\n    background-origin:border-box;\n    background-clip:border-box;\n}\n\n\/* Mobile Safari and many touch browsers do not render fixed attachment\n   smoothly. Fall back to a normal background there. *\/\n@media (max-width:1100px), (hover:none){\n    #tx-three-portals-v2,\n    #tx-automation-engine{\n        background-attachment:scroll !important;\n        background-position:center center !important;\n    }\n}\n<\/style>\n\n\n<style id=\"tx-v5-three-portals-monochrome-fix\">\n\/* =========================================================\n   THREE PORTALS \u2014 TRUE MONOCHROME PINNED BACKGROUND\n   IMPORTANT:\n   The RUNNN-style pinned effect uses the SECTION background,\n   not .tx3-bg. Therefore grayscale must be applied here.\n   ========================================================= *\/\n\n#tx-three-portals-v2{\n    background-color:#777 !important;\n\n    background-image:\n        linear-gradient(\n            180deg,\n            rgba(0,0,0,.20) 0%,\n            rgba(0,0,0,.08) 30%,\n            rgba(0,0,0,.18) 62%,\n            rgba(0,0,0,.72) 100%\n        ),\n        url(\"https:\/\/clientbuilds.neonsnow.com.au\/wp-content\/uploads\/2026\/09\/Golden-Construction-Site-at-Sunset.png\") !important;\n\n    \/*\n       LUMINOSITY takes the luminance from the photo but the\n       saturation from the grey backdrop, producing a genuinely\n       black-and-white image while leaving all section content\n       (including orange UI accents) untouched.\n    *\/\n    background-blend-mode:\n        normal,\n        luminosity !important;\n\n    background-size:\n        cover !important;\n\n    background-position:\n        center center !important;\n\n    background-repeat:\n        no-repeat !important;\n\n    background-attachment:\n        fixed !important;\n}\n\n\/* Remove the previous warm\/orange cast from the cinematic overlay. *\/\n#tx-three-portals-v2 .tx3-grade{\n    background:\n        linear-gradient(\n            180deg,\n            rgba(2,4,5,.24) 0%,\n            rgba(2,4,5,.06) 28%,\n            rgba(2,4,5,.16) 58%,\n            rgba(2,4,5,.70) 100%\n        ),\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.44) 0%,\n            rgba(0,0,0,.04) 30%,\n            rgba(0,0,0,.04) 70%,\n            rgba(0,0,0,.44) 100%\n        ),\n        radial-gradient(\n            ellipse at 50% 42%,\n            rgba(255,255,255,.025) 0%,\n            rgba(0,0,0,.06) 52%,\n            rgba(0,0,0,.38) 100%\n        ) !important;\n}\n\n#tx-three-portals-v2 .tx3-floor{\n    background:\n        linear-gradient(\n            180deg,\n            transparent 0%,\n            rgba(0,0,0,.30) 28%,\n            rgba(0,0,0,.92) 100%\n        ) !important;\n}\n\n\/* The marked lower-right micro text is removed from the markup.\n   Keep these defensive rules in case Elementor caches an older copy. *\/\n#tx-three-portals-v2 .tx3-bottom,\n#tx-three-portals-v2 .tx3-bottom-right,\n#tx-three-portals-v2 .tx3-bottom-left,\n#tx-three-portals-v2 .tx3-scroll{\n    display:none !important;\n}\n\n@media (max-width:1100px), (hover:none){\n    #tx-three-portals-v2{\n        background-attachment:\n            scroll !important;\n    }\n}\n<\/style>\n\n\n<style id=\"tx-v7-video-backgrounds-and-brand-x\">\n\/* =========================================================\n   TRADESX V7\n   1) exact supplied TradesX X code-art silhouette\n   2) Three Portals background = TX Video 1\n   3) Automation background = TX Video 2\n   4) both videos monochrome\n   5) pinned \/ RUNNN-style background behaviour\n   ========================================================= *\/\n\n\/* Remove every legacy section-level still image. *\/\n#tx-three-portals-v2,\n#tx-automation-engine{\n    background-image:none !important;\n    background-attachment:scroll !important;\n    background-blend-mode:normal !important;\n    background-color:#050607 !important;\n    isolation:isolate;\n    overflow:hidden !important;\n}\n\n\/* Bring the actual background layer back. Older patches hid it. *\/\n#tx-three-portals-v2 .tx3-bg,\n#tx-automation-engine .txae-bg{\n    display:block !important;\n    position:absolute !important;\n    top:0 !important;\n    right:0 !important;\n    bottom:auto !important;\n    left:0 !important;\n    width:100% !important;\n    height:100vh !important;\n    min-height:100vh !important;\n    overflow:hidden !important;\n    background:none !important;\n    filter:none !important;\n    transform:translate3d(0,0,0) !important;\n    transition:none !important;\n    pointer-events:none !important;\n    will-change:transform;\n    z-index:0 !important;\n}\n\n#tx-three-portals-v2 .tx3-bg-video,\n#tx-automation-engine .txae-bg-video{\n    position:absolute;\n    top:50%;\n    left:50%;\n    width:100%;\n    height:100%;\n    min-width:100%;\n    min-height:100%;\n    object-fit:cover;\n    object-position:center center;\n    transform:translate(-50%,-50%) scale(1.035);\n    transform-origin:center center;\n    pointer-events:none;\n}\n\n\/* Three Portals: brighter monochrome construction film. *\/\n#tx-three-portals-v2 .tx3-bg-video{\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.14)\n        brightness(.55);\n}\n\n\/* Automation: darker monochrome film. *\/\n#tx-automation-engine .txae-bg-video{\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.22)\n        brightness(.40);\n}\n\n\/* Neutral overlays: no orange colour cast on either film. *\/\n#tx-three-portals-v2 .tx3-grade{\n    background:\n        linear-gradient(\n            180deg,\n            rgba(1,3,4,.14) 0%,\n            rgba(1,3,4,.02) 28%,\n            rgba(1,3,4,.12) 58%,\n            rgba(1,3,4,.72) 100%\n        ),\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.40) 0%,\n            rgba(0,0,0,.02) 28%,\n            rgba(0,0,0,.02) 72%,\n            rgba(0,0,0,.40) 100%\n        ),\n        radial-gradient(\n            ellipse at 50% 42%,\n            rgba(255,255,255,.025) 0%,\n            rgba(0,0,0,.04) 50%,\n            rgba(0,0,0,.34) 100%\n        ) !important;\n}\n\n#tx-three-portals-v2 .tx3-floor{\n    background:\n        linear-gradient(\n            180deg,\n            transparent 0%,\n            rgba(0,0,0,.26) 30%,\n            rgba(0,0,0,.92) 100%\n        ) !important;\n}\n\n#tx-automation-engine .txae-shade{\n    background:\n        linear-gradient(\n            180deg,\n            rgba(2,4,5,.35) 0%,\n            rgba(2,4,5,.09) 27%,\n            rgba(2,4,5,.18) 56%,\n            rgba(2,4,5,.76) 100%\n        ),\n        radial-gradient(\n            ellipse at 50% 38%,\n            rgba(0,0,0,0) 0%,\n            rgba(0,0,0,.08) 48%,\n            rgba(0,0,0,.50) 100%\n        ) !important;\n}\n\n\/* Maintain the supplied X as pure black negative space. *\/\n#tx-scroll-combo #tx-code-canvas{\n    isolation:isolate;\n}\n\n\/* Touch devices: videos still play, but do not use the pinned transform. *\/\n@media(max-width:1100px), (hover:none){\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg{\n        height:100% !important;\n        min-height:100% !important;\n        transform:none !important;\n    }\n\n    #tx-three-portals-v2 .tx3-bg-video,\n    #tx-automation-engine .txae-bg-video{\n        transform:translate(-50%,-50%) scale(1.02);\n    }\n}\n<\/style>\n\n\n<style id=\"tx-v8-fixed-video-scroll-css\">\n\/* =========================================================\n   V8 \u2014 RUNNN-STYLE VIDEO BACKGROUND SCROLL EFFECT\n\n   The video remains visually fixed to the viewport while the\n   Three Portals \/ Automation section content scrolls across it.\n   This is the moving-video equivalent of background-attachment:\n   fixed, but implemented on the actual MP4 element.\n   ========================================================= *\/\n\n\n\/* Never allow an older image-background patch to appear. *\/\n#tx-three-portals-v2,\n#tx-automation-engine{\n    position:relative !important;\n    overflow:hidden !important;\n\n    background-image:none !important;\n    background-attachment:scroll !important;\n    background-blend-mode:normal !important;\n    background-color:#050607 !important;\n\n    isolation:isolate;\n}\n\n\n\/* Full viewport film layer.\n   JS counter-translates this layer while its section scrolls. *\/\n#tx-three-portals-v2 .tx3-bg,\n#tx-automation-engine .txae-bg{\n    display:block !important;\n\n    position:absolute !important;\n\n    top:0 !important;\n    right:0 !important;\n    bottom:auto !important;\n    left:0 !important;\n\n    width:100% !important;\n    height:100vh !important;\n    min-height:100vh !important;\n\n    margin:0 !important;\n\n    overflow:hidden !important;\n\n    background:none !important;\n\n    filter:none !important;\n\n    transition:none !important;\n\n    pointer-events:none !important;\n\n    will-change:transform;\n\n    z-index:0 !important;\n\n    backface-visibility:hidden;\n    -webkit-backface-visibility:hidden;\n\n    transform:\n        translate3d(0,0,0);\n}\n\n\n\/* Video is deliberately oversized slightly so no edge can appear\n   while the fixed layer is being counter-translated. *\/\n#tx-three-portals-v2 .tx3-bg-video,\n#tx-automation-engine .txae-bg-video{\n    position:absolute !important;\n\n    top:50% !important;\n    left:50% !important;\n\n    width:106% !important;\n    height:106% !important;\n\n    min-width:106% !important;\n    min-height:106% !important;\n\n    max-width:none !important;\n\n    object-fit:cover !important;\n    object-position:center center !important;\n\n    transform:\n        translate3d(-50%,-50%,0)\n        scale(1.03) !important;\n\n    transform-origin:center center;\n\n    pointer-events:none !important;\n\n    will-change:transform;\n\n    backface-visibility:hidden;\n    -webkit-backface-visibility:hidden;\n}\n\n\n\/* THREE PORTALS VIDEO \u2014 black and white *\/\n#tx-three-portals-v2 .tx3-bg-video{\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.15)\n        brightness(.50) !important;\n}\n\n\n\/* AUTOMATION VIDEO \u2014 black and white and intentionally darker *\/\n#tx-automation-engine .txae-bg-video{\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.22)\n        brightness(.38) !important;\n}\n\n\n\/* Keep the foreground content above the pinned films. *\/\n#tx-three-portals-v2 .tx3-grade,\n#tx-three-portals-v2 .tx3-floor,\n#tx-three-portals-v2 .tx3-shell,\n#tx-automation-engine .txae-shade,\n#tx-automation-engine .txae-vignette,\n#tx-automation-engine .txae-shell{\n    position:relative;\n    z-index:2;\n}\n\n\n\/* Overlay layers themselves must still cover the full section. *\/\n#tx-three-portals-v2 .tx3-grade,\n#tx-three-portals-v2 .tx3-floor,\n#tx-automation-engine .txae-shade,\n#tx-automation-engine .txae-vignette{\n    position:absolute !important;\n}\n\n\n\/* Touch browsers use the safe non-pinned fallback because fixed\n   transformed video layers are unreliable on mobile Safari. *\/\n@media(max-width:1100px), (hover:none){\n\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg{\n        top:0 !important;\n\n        width:100% !important;\n        height:100% !important;\n        min-height:100% !important;\n\n        transform:\n            translate3d(0,0,0) !important;\n    }\n\n\n    #tx-three-portals-v2 .tx3-bg-video,\n    #tx-automation-engine .txae-bg-video{\n        width:100% !important;\n        height:100% !important;\n\n        min-width:100% !important;\n        min-height:100% !important;\n\n        transform:\n            translate3d(-50%,-50%,0)\n            scale(1.02) !important;\n    }\n\n}\n<\/style>\n\n\n<style id=\"tx-v9-true-fixed-background-video\">\n\/* =========================================================\n   V9 \u2014 TRUE FIXED BACKGROUND VIDEO\n\n   This is the effect requested:\n\n   1. The SECTION scrolls normally.\n   2. The VIDEO does not move with the document.\n   3. The section acts as a clipping window.\n   4. Therefore the content moves across a visually fixed film.\n   5. When the section leaves the viewport, the film disappears\n      because it is clipped by that section.\n\n   This is effectively:\n       background-attachment: fixed\n   but using a real MP4 instead of a CSS background image.\n   ========================================================= *\/\n\n\n\/* ---------------------------------------------------------\n   THE TWO FIXED-FILM SECTIONS\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2,\n#tx-automation-engine{\n    position:relative !important;\n\n    \/*\n       clip-path is important here.\n       It clips the FIXED descendant to the moving section.\n       Without this, a fixed video can remain visible outside\n       its intended section.\n    *\/\n    clip-path:\n        inset(0);\n\n    -webkit-clip-path:\n        inset(0);\n\n    overflow:visible !important;\n\n    background:\n        #050607 !important;\n\n    background-image:\n        none !important;\n\n    background-attachment:\n        scroll !important;\n\n    isolation:isolate;\n}\n\n\n\/* ---------------------------------------------------------\n   FIXED VIEWPORT FILM LAYERS\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2 .tx3-bg,\n#tx-automation-engine .txae-bg{\n    display:block !important;\n\n    position:fixed !important;\n\n    top:0 !important;\n    right:auto !important;\n    bottom:auto !important;\n    left:0 !important;\n\n    width:100vw !important;\n    height:100vh !important;\n\n    min-width:100vw !important;\n    min-height:100vh !important;\n\n    max-width:none !important;\n\n    margin:0 !important;\n    padding:0 !important;\n\n    overflow:hidden !important;\n\n    background:\n        #050607 !important;\n\n    background-image:\n        none !important;\n\n    filter:none !important;\n\n    transform:none !important;\n\n    transition:none !important;\n\n    pointer-events:none !important;\n\n    z-index:0 !important;\n\n    will-change:auto !important;\n\n    backface-visibility:hidden;\n    -webkit-backface-visibility:hidden;\n}\n\n\n\/* ---------------------------------------------------------\n   THE ACTUAL MP4S\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2 .tx3-bg-video,\n#tx-automation-engine .txae-bg-video{\n    position:absolute !important;\n\n    top:50% !important;\n    left:50% !important;\n\n    width:100vw !important;\n    height:100vh !important;\n\n    min-width:100vw !important;\n    min-height:100vh !important;\n\n    max-width:none !important;\n    max-height:none !important;\n\n    object-fit:\n        cover !important;\n\n    object-position:\n        center center !important;\n\n    transform:\n        translate3d(\n            -50%,\n            -50%,\n            0\n        )\n        scale(1.035) !important;\n\n    transform-origin:\n        center center !important;\n\n    pointer-events:\n        none !important;\n\n    backface-visibility:\n        hidden;\n\n    -webkit-backface-visibility:\n        hidden;\n}\n\n\n\/* ---------------------------------------------------------\n   VIDEO 3 \u2014 THREE PORTALS\n   TRUE BLACK AND WHITE\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2 .tx3-bg-video{\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.17)\n        brightness(.48)\n        !important;\n}\n\n\n\/* ---------------------------------------------------------\n   VIDEO 2 \u2014 AUTOMATION\n   TRUE BLACK AND WHITE \/ DARKER\n   --------------------------------------------------------- *\/\n\n#tx-automation-engine .txae-bg-video{\n    filter:\n        grayscale(1)\n        saturate(0)\n        contrast(1.23)\n        brightness(.36)\n        !important;\n}\n\n\n\/* ---------------------------------------------------------\n   THREE PORTALS FILM GRADE\n   no warm colour cast\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2 .tx3-grade{\n    position:absolute !important;\n\n    inset:0 !important;\n\n    z-index:1 !important;\n\n    pointer-events:none !important;\n\n    background:\n\n        linear-gradient(\n            180deg,\n            rgba(1,3,4,.18) 0%,\n            rgba(1,3,4,.02) 27%,\n            rgba(1,3,4,.10) 58%,\n            rgba(1,3,4,.78) 100%\n        ),\n\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.38) 0%,\n            rgba(0,0,0,.02) 27%,\n            rgba(0,0,0,.02) 73%,\n            rgba(0,0,0,.38) 100%\n        ),\n\n        radial-gradient(\n            ellipse at 50% 43%,\n            rgba(255,255,255,.025) 0%,\n            rgba(0,0,0,.03) 50%,\n            rgba(0,0,0,.32) 100%\n        )\n        !important;\n}\n\n\n#tx-three-portals-v2 .tx3-floor{\n    position:absolute !important;\n\n    z-index:1 !important;\n\n    pointer-events:none !important;\n\n    background:\n\n        linear-gradient(\n            180deg,\n            transparent 0%,\n            rgba(0,0,0,.22) 28%,\n            rgba(0,0,0,.94) 100%\n        )\n        !important;\n}\n\n\n\/* ---------------------------------------------------------\n   AUTOMATION FILM GRADE\n   --------------------------------------------------------- *\/\n\n#tx-automation-engine .txae-shade{\n    position:absolute !important;\n\n    inset:0 !important;\n\n    z-index:1 !important;\n\n    pointer-events:none !important;\n\n    background:\n\n        linear-gradient(\n            180deg,\n            rgba(1,3,4,.33) 0%,\n            rgba(1,3,4,.10) 27%,\n            rgba(1,3,4,.18) 56%,\n            rgba(1,3,4,.76) 100%\n        ),\n\n        radial-gradient(\n            ellipse at 50% 40%,\n            transparent 0%,\n            rgba(0,0,0,.08) 48%,\n            rgba(0,0,0,.50) 100%\n        )\n        !important;\n}\n\n\n#tx-automation-engine .txae-vignette{\n    position:absolute !important;\n\n    inset:0 !important;\n\n    z-index:1 !important;\n\n    pointer-events:none !important;\n}\n\n\n\/* ---------------------------------------------------------\n   CONTENT MUST REMAIN ABOVE THE FIXED FILMS\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2 .tx3-shell,\n#tx-automation-engine .txae-shell{\n    position:relative !important;\n\n    z-index:5 !important;\n}\n\n\n\/* ---------------------------------------------------------\n   DO NOT LET OLD SCROLL JS MOVE THE BACKGROUND\n   --------------------------------------------------------- *\/\n\n#tx-three-portals-v2 .tx3-bg,\n#tx-automation-engine .txae-bg{\n    translate:\n        none !important;\n\n    rotate:\n        none !important;\n\n    scale:\n        none !important;\n}\n\n\n\/* ---------------------------------------------------------\n   MOBILE \/ TOUCH FALLBACK\n\n   iOS Safari is inconsistent with fixed MP4 descendants.\n   On touch devices the video remains a normal section\n   background rather than risking jumps \/ black frames.\n   --------------------------------------------------------- *\/\n\n@media(max-width:1100px), (hover:none){\n\n    #tx-three-portals-v2,\n    #tx-automation-engine{\n        clip-path:\n            none;\n\n        -webkit-clip-path:\n            none;\n\n        overflow:\n            hidden !important;\n    }\n\n\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg{\n        position:\n            absolute !important;\n\n        top:0 !important;\n        left:0 !important;\n\n        width:100% !important;\n        height:100% !important;\n\n        min-width:100% !important;\n        min-height:100% !important;\n\n        transform:\n            none !important;\n    }\n\n\n    #tx-three-portals-v2 .tx3-bg-video,\n    #tx-automation-engine .txae-bg-video{\n        width:100% !important;\n        height:100% !important;\n\n        min-width:100% !important;\n        min-height:100% !important;\n\n        transform:\n            translate3d(\n                -50%,\n                -50%,\n                0\n            )\n            scale(1.025)\n            !important;\n    }\n\n}\n<\/style>\n\n<script id=\"tx-v9-fixed-background-video-controller\">\n(() => {\n\n    const videos = [\n        document.querySelector(\n            '#tx-three-portals-v2 .tx3-bg-video'\n        ),\n        document.querySelector(\n            '#tx-automation-engine .txae-bg-video'\n        )\n    ].filter(Boolean);\n\n\n    if (!videos.length) {\n        return;\n    }\n\n\n    videos.forEach(video => {\n\n        video.muted = true;\n        video.defaultMuted = true;\n        video.loop = true;\n        video.playsInline = true;\n\n        video.setAttribute(\n            'muted',\n            ''\n        );\n\n        video.setAttribute(\n            'playsinline',\n            ''\n        );\n\n        video.setAttribute(\n            'webkit-playsinline',\n            ''\n        );\n\n    });\n\n\n    function safePlay(video) {\n\n        const result =\n            video.play();\n\n        if (\n            result &&\n            typeof result.catch === 'function'\n        ) {\n            result.catch(() => {});\n        }\n\n    }\n\n\n    \/*\n       Keep only the currently relevant background film playing.\n       This reduces unnecessary decoding while preserving the\n       fixed-background effect.\n    *\/\n\n    const observer =\n        new IntersectionObserver(\n\n            entries => {\n\n                entries.forEach(entry => {\n\n                    const video =\n                        entry.target.querySelector(\n                            'video'\n                        );\n\n                    if (!video) {\n                        return;\n                    }\n\n\n                    if (\n                        entry.isIntersecting\n                    ) {\n\n                        safePlay(\n                            video\n                        );\n\n                    } else {\n\n                        video.pause();\n\n                    }\n\n                });\n\n            },\n\n            {\n                threshold:0.02,\n                rootMargin:'20% 0px 20% 0px'\n            }\n\n        );\n\n\n    const portalSection =\n        document.querySelector(\n            '#tx-three-portals-v2'\n        );\n\n\n    const automationSection =\n        document.querySelector(\n            '#tx-automation-engine'\n        );\n\n\n    if (portalSection) {\n        observer.observe(\n            portalSection\n        );\n    }\n\n\n    if (automationSection) {\n        observer.observe(\n            automationSection\n        );\n    }\n\n\n    document.addEventListener(\n        'visibilitychange',\n        () => {\n\n            if (document.hidden) {\n                return;\n            }\n\n            videos.forEach(\n                video => {\n\n                    const rect =\n                        video.closest('section')\n                            ?.getBoundingClientRect();\n\n                    if (\n                        rect &&\n                        rect.bottom > 0 &&\n                        rect.top < window.innerHeight\n                    ) {\n                        safePlay(\n                            video\n                        );\n                    }\n\n                }\n            );\n\n        }\n    );\n\n})();\n<\/script>\n\n\n<style id=\"tx-v10-three-portals-bottom-space\">\n\/* =========================================================\n   THREE PORTALS \u2014 EXTRA SPACE BELOW PORTAL CARDS\n   Gives the cards more breathing room before the next section.\n   ========================================================= *\/\n\n#tx-three-portals-v2 .tx3-shell{\n    padding-bottom:\n        clamp(\n            110px,\n            10vh,\n            160px\n        )\n        !important;\n}\n\n\/* Keep the portal grid itself clear of the section boundary. *\/\n#tx-three-portals-v2 .tx3-portals{\n    margin-bottom:\n        0\n        !important;\n}\n\n@media(max-width:1100px){\n\n    #tx-three-portals-v2 .tx3-shell{\n        padding-bottom:\n            90px\n            !important;\n    }\n\n}\n\n@media(max-width:570px){\n\n    #tx-three-portals-v2 .tx3-shell{\n        padding-bottom:\n            65px\n            !important;\n    }\n\n}\n<\/style>\n\n\n<style id=\"tx-v22-responsive-display-system\">\n\/* =========================================================\n   TRADESX V22 \u2014 RESPONSIVE DISPLAY SYSTEM\n\n   Baseline desktop (roughly 1151\u20132199 CSS px) is intentionally\n   left visually unchanged. This layer adds guardrails for:\n   - 2K \/ 4K and large desktop displays\n   - ultrawide monitors\n   - short laptop browser viewports\n   - tablet \/ mobile browser chrome and orientation changes\n   - safe-area devices\n   ========================================================= *\/\n\n#tx-master-page{\n    --tx-vp-w:100vw;\n    --tx-vp-h:100vh;\n    --tx-safe-top:env(safe-area-inset-top,0px);\n    --tx-safe-right:env(safe-area-inset-right,0px);\n    --tx-safe-bottom:env(safe-area-inset-bottom,0px);\n    --tx-safe-left:env(safe-area-inset-left,0px);\n}\n\n@supports(height:100dvh){\n    #tx-master-page{\n        --tx-vp-h:100dvh;\n    }\n}\n\n\/* Prevent accidental horizontal overflow from transformed scenes. *\/\nhtml,\nbody{\n    max-width:100%;\n}\n\n#tx-master-page{\n    max-width:100vw !important;\n    overflow-x:clip !important;\n}\n\n\/* Sticky\/fixed scenes use the real visible viewport height on desktop. *\/\n@media(min-width:1101px){\n    #tx-scroll-combo > .tx-combo-stage,\n    #tx-scroll-combo #tx-code-world .txc-stage,\n    #tx-toolbox-scroll-v3 .txv3-stage,\n    #tx-lifecycle-autoplay-v2 .txla-stage{\n        height:var(--tx-vp-height, var(--tx-vp-h)) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg{\n        height:var(--tx-vp-height, var(--tx-vp-h)) !important;\n        min-height:var(--tx-vp-height, var(--tx-vp-h)) !important;\n    }\n}\n\n\/* =========================================================\n   LARGE DESKTOP \/ 2K\n   Starts above the normal desktop range so the current look\n   remains exactly the same on the screen it was designed on.\n   ========================================================= *\/\n@media(min-width:2200px){\n\n    \/* HERO *\/\n    #tx-scroll-combo #tx-portal-hero .txph-shell{\n        width:min(2260px,92vw) !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-logo{\n        width:clamp(360px,18vw,520px) !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-portal{\n        min-height:clamp(620px,58vh,800px) !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-card,\n    #tx-scroll-combo #tx-portal-hero .txph-island-wrap{\n        width:78% !important;\n    }\n\n    \/* CODE WORLD *\/\n    #tx-code-world .txc-kicker{\n        font-size:11px !important;\n    }\n\n    #tx-code-world .txc-side{\n        font-size:12px !important;\n    }\n\n    #tx-code-world .txc-copy{\n        width:min(1250px,82vw) !important;\n    }\n\n    #tx-code-world .txc-heading-one{\n        font-size:clamp(66px,3.6vw,92px) !important;\n    }\n\n    #tx-code-world .txc-heading-two{\n        font-size:clamp(62px,3.4vw,88px) !important;\n    }\n\n    \/* THREE PORTALS *\/\n    #tx-three-portals-v2 .tx3-shell{\n        width:min(2260px,92vw) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading{\n        width:min(1380px,70vw) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading h2{\n        font-size:clamp(86px,4.6vw,122px) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-portal{\n        grid-template-rows:\n            72px\n            clamp(560px,50vh,720px) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-role{\n        height:72px !important;\n    }\n\n    \/* FAN OUT *\/\n    #tx-fanout-v4 .txf4-scene{\n        width:min(2280px,94vw) !important;\n        height:min(72vh,900px) !important;\n        min-height:650px !important;\n        max-height:900px !important;\n    }\n\n    #tx-fanout-v4 .txf4-ipad{\n        width:clamp(520px,25vw,720px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-sheet{\n        width:clamp(390px,20.5vw,590px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-bottom-title h2{\n        font-size:clamp(48px,2.6vw,70px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-bottom-copy{\n        font-size:clamp(13px,.68vw,17px) !important;\n    }\n\n    \/* CAPABILITY \/ DASHBOARD SHOWCASE *\/\n    #tx-toolbox-scroll-v3 .txv3-display-wrap{\n        width:min(88%,1120px) !important;\n        height:min(65vh,800px) !important;\n        min-height:610px !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-content{\n        width:min(780px,100%) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-title{\n        font-size:clamp(92px,4.8vw,138px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-strap{\n        font-size:clamp(27px,1.35vw,36px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-copy{\n        max-width:720px !important;\n        font-size:clamp(17px,.82vw,20px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-detail{\n        font-size:clamp(15px,.72vw,18px) !important;\n    }\n\n    \/* AUTOMATION *\/\n    #tx-automation-engine .txae-shell{\n        width:min(2280px,92vw) !important;\n    }\n\n    #tx-automation-engine .txae-heading{\n        width:min(1220px,68vw) !important;\n    }\n\n    #tx-automation-engine .txae-heading h2{\n        font-size:clamp(92px,4.8vw,132px) !important;\n    }\n\n    #tx-automation-engine .txae-heading p{\n        max-width:900px !important;\n        font-size:clamp(19px,.9vw,24px) !important;\n    }\n\n    \/* LIFECYCLE *\/\n    #tx-lifecycle-autoplay-v2 .txla-shell{\n        width:min(2280px,92vw) !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading{\n        width:min(1420px,72vw) !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading h2{\n        font-size:clamp(84px,4.4vw,118px) !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-ute{\n        width:clamp(360px,20vw,520px) !important;\n    }\n\n    \/* REMAINDER *\/\n    #tx-rest-v1 .txr-shell{\n        width:min(2140px,90vw) !important;\n    }\n\n    #tx-rest-v1 .txr-section-title{\n        font-size:clamp(86px,4.5vw,126px) !important;\n    }\n}\n\n\/* =========================================================\n   TRUE 4K \/ VERY LARGE DESKTOP\n   ========================================================= *\/\n@media(min-width:3200px){\n\n    #tx-scroll-combo #tx-portal-hero .txph-shell,\n    #tx-three-portals-v2 .tx3-shell,\n    #tx-automation-engine .txae-shell,\n    #tx-lifecycle-autoplay-v2 .txla-shell{\n        width:min(2680px,88vw) !important;\n    }\n\n    #tx-rest-v1 .txr-shell{\n        width:min(2480px,86vw) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading h2{\n        font-size:136px !important;\n    }\n\n    #tx-fanout-v4 .txf4-scene{\n        width:min(2680px,90vw) !important;\n        height:min(70vh,1040px) !important;\n        max-height:1040px !important;\n    }\n\n    #tx-fanout-v4 .txf4-ipad{\n        width:760px !important;\n    }\n\n    #tx-fanout-v4 .txf4-sheet{\n        width:620px !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-display-wrap{\n        width:min(86%,1280px) !important;\n        height:min(64vh,920px) !important;\n    }\n\n    #tx-automation-engine .txae-heading h2{\n        font-size:146px !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading h2{\n        font-size:132px !important;\n    }\n}\n\n\/* =========================================================\n   ULTRAWIDE\n   Keep the experience cinematic without letting content run\n   all the way to the physical edges of a 21:9 \/ 32:9 display.\n   ========================================================= *\/\n@media(min-width:2200px) and (min-aspect-ratio:21\/9){\n\n    #tx-scroll-combo #tx-portal-hero .txph-shell,\n    #tx-three-portals-v2 .tx3-shell,\n    #tx-automation-engine .txae-shell,\n    #tx-lifecycle-autoplay-v2 .txla-shell{\n        max-width:2360px !important;\n    }\n\n    #tx-rest-v1 .txr-shell{\n        max-width:2200px !important;\n    }\n\n    #tx-fanout-v4 .txf4-scene{\n        max-width:2440px !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-layout{\n        grid-template-columns:minmax(0,1fr) minmax(0,.88fr) !important;\n    }\n}\n\n\/* =========================================================\n   SHORT DESKTOP \/ SMALL LAPTOP VIEWPORT HEIGHTS\n   Prevent fixed\/sticky compositions from clipping vertically.\n   ========================================================= *\/\n@media(min-width:1101px) and (max-height:720px){\n\n    #tx-scroll-combo > .tx-combo-stage,\n    #tx-scroll-combo #tx-code-world .txc-stage,\n    #tx-toolbox-scroll-v3 .txv3-stage,\n    #tx-lifecycle-autoplay-v2 .txla-stage{\n        min-height:0 !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-shell{\n        padding-top:14px !important;\n        padding-bottom:10px !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-logo{\n        width:clamp(210px,18vw,300px) !important;\n    }\n\n    #tx-scroll-combo #tx-portal-hero .txph-portal{\n        min-height:clamp(390px,57vh,470px) !important;\n    }\n\n    #tx-code-world .txc-kicker{\n        top:58px !important;\n    }\n\n    #tx-code-world .txc-copy{\n        bottom:12vh !important;\n    }\n\n    #tx-code-world .txc-heading-one{\n        font-size:clamp(34px,4vw,56px) !important;\n    }\n\n    #tx-code-world .txc-heading-two{\n        font-size:clamp(32px,3.8vw,52px) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-shell{\n        padding-top:24px !important;\n        padding-bottom:62px !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading{\n        margin-bottom:18px !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading h2{\n        font-size:clamp(52px,4.6vw,72px) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading p{\n        margin-top:10px !important;\n    }\n\n    #tx-three-portals-v2 .tx3-portal{\n        grid-template-rows:54px clamp(345px,48vh,410px) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-role{\n        height:54px !important;\n    }\n\n    #tx-fanout-v4 .txf4-scene{\n        top:4vh !important;\n        height:64vh !important;\n        min-height:390px !important;\n    }\n\n    #tx-fanout-v4 .txf4-ipad{\n        width:clamp(350px,28vw,470px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-sheet{\n        width:clamp(280px,23vw,380px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-bottom{\n        bottom:1.5vh !important;\n    }\n\n    #tx-fanout-v4 .txf4-bottom-title h2{\n        font-size:clamp(30px,2.6vw,42px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-display-wrap{\n        top:54% !important;\n        height:min(58vh,470px) !important;\n        min-height:380px !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-step{\n        min-height:var(--tx-vp-height, var(--tx-vp-h)) !important;\n        padding:5vh clamp(36px,4vw,72px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-icon{\n        width:58px !important;\n        height:58px !important;\n        margin-bottom:18px !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-title{\n        font-size:clamp(56px,5vw,78px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-strap{\n        margin-top:18px !important;\n        font-size:clamp(18px,1.4vw,24px) !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-copy{\n        margin:18px 0 20px !important;\n        line-height:1.45 !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-detail{\n        padding-top:12px !important;\n        padding-bottom:12px !important;\n    }\n\n    #tx-automation-engine .txae-shell{\n        padding-top:18px !important;\n        padding-bottom:22px !important;\n    }\n\n    #tx-automation-engine .txae-heading{\n        margin-top:42px !important;\n    }\n\n    #tx-automation-engine .txae-heading h2{\n        font-size:clamp(54px,5.5vw,76px) !important;\n    }\n\n    #tx-automation-engine .txae-heading p{\n        margin-top:11px !important;\n        font-size:15px !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-shell{\n        padding-top:14px !important;\n        padding-bottom:14px !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading{\n        margin-top:18px !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading h2{\n        font-size:clamp(52px,4.8vw,70px) !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading p{\n        margin-top:8px !important;\n        font-size:14px !important;\n    }\n}\n\n\/* =========================================================\n   TABLET \/ TOUCH\n   Existing layouts already stack at these widths. These rules\n   only make the viewport and edge spacing more robust.\n   ========================================================= *\/\n@media(max-width:1100px){\n\n    #tx-master-page > section{\n        max-width:100% !important;\n    }\n\n    #tx-three-portals-v2 .tx3-shell,\n    #tx-automation-engine .txae-shell,\n    #tx-rest-v1 .txr-shell{\n        width:min(94vw,900px) !important;\n    }\n\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg{\n        min-height:100% !important;\n    }\n}\n\n\/* Landscape phones \/ small tablets with very little height. *\/\n@media(max-width:1100px) and (max-height:600px){\n\n    #tx-toolbox-scroll-v3 .txv3-stage{\n        min-height:560px !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-display-wrap{\n        height:390px !important;\n    }\n\n    #tx-three-portals-v2 .tx3-shell,\n    #tx-automation-engine .txae-shell{\n        padding-top:36px !important;\n    }\n}\n\n\/* =========================================================\n   SMALL MOBILE\n   ========================================================= *\/\n@media(max-width:430px){\n\n    #tx-scroll-combo #tx-portal-hero .txph-shell{\n        width:94vw !important;\n    }\n\n    #tx-code-world .txc-copy{\n        width:94vw !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading{\n        width:94vw !important;\n    }\n\n    #tx-three-portals-v2 .tx3-heading h2{\n        font-size:clamp(38px,11.5vw,50px) !important;\n    }\n\n    #tx-fanout-v4 .txf4-ipad{\n        width:94vw !important;\n    }\n\n    #tx-toolbox-scroll-v3 .txv3-title{\n        font-size:clamp(48px,14vw,66px) !important;\n    }\n\n    #tx-automation-engine .txae-heading h2{\n        font-size:clamp(42px,12.5vw,54px) !important;\n    }\n\n    #tx-lifecycle-autoplay-v2 .txla-heading h2{\n        font-size:clamp(40px,11.5vw,52px) !important;\n    }\n\n    #tx-rest-v1 .txr-section-title,\n    #tx-rest-v1 .txr-proc-title,\n    #tx-rest-v1 .txr-cta-title{\n        overflow-wrap:anywhere;\n    }\n}\n\n\/* Respect user motion preferences across newly hardened scenes. *\/\n@media(prefers-reduced-motion:reduce){\n    #tx-three-portals-v2 .tx3-bg,\n    #tx-automation-engine .txae-bg,\n    #tx-fanout-v4 .txf4-ipad,\n    #tx-fanout-v4 .txf4-sheet,\n    #tx-toolbox-scroll-v3 .txv3-screen{\n        transition:none !important;\n    }\n}\n<\/style>\n\n<script id=\"tx-v22-responsive-viewport-controller\">\n(() => {\n    const page = document.getElementById('tx-master-page');\n    if (!page || page.dataset.txResponsiveV22 === '1') return;\n    page.dataset.txResponsiveV22 = '1';\n\n    let raf = 0;\n    let lastW = 0;\n    let lastH = 0;\n\n    const getViewport = () => {\n        const vv = window.visualViewport;\n        return {\n            width: Math.max(1, Math.round(vv?.width || window.innerWidth || document.documentElement.clientWidth || 1)),\n            height: Math.max(1, Math.round(vv?.height || window.innerHeight || document.documentElement.clientHeight || 1))\n        };\n    };\n\n    const apply = () => {\n        raf = 0;\n\n        const { width, height } = getViewport();\n        if (width === lastW && height === lastH) return;\n        lastW = width;\n        lastH = height;\n\n        page.style.setProperty('--tx-vp-width', `${width}px`);\n        page.style.setProperty('--tx-vp-height', `${height}px`);\n        page.style.setProperty('--tx-vp-ratio', String(width \/ height));\n\n        page.classList.toggle('tx-vp-large', width >= 2200);\n        page.classList.toggle('tx-vp-4k', width >= 3200);\n        page.classList.toggle('tx-vp-ultrawide', width \/ height >= 2.25);\n        page.classList.toggle('tx-vp-short', height <= 720 && width > 1100);\n        page.classList.toggle('tx-vp-portrait', height > width);\n        page.classList.toggle('tx-vp-landscape', width >= height);\n    };\n\n    const requestApply = () => {\n        if (raf) return;\n        raf = requestAnimationFrame(apply);\n    };\n\n    window.addEventListener('resize', requestApply, { passive:true });\n    window.addEventListener('orientationchange', requestApply, { passive:true });\n\n    if (window.visualViewport) {\n        window.visualViewport.addEventListener('resize', requestApply, { passive:true });\n        window.visualViewport.addEventListener('scroll', requestApply, { passive:true });\n    }\n\n    if ('ResizeObserver' in window) {\n        const ro = new ResizeObserver(requestApply);\n        ro.observe(document.documentElement);\n    }\n\n    requestApply();\n})();\n<\/script>\n\n<\/div>\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>01 07 PEOPLE. COMPLIANCE. PROGRESS. Built for what&#8217;s next. SAME INDUSTRY. HIGHER STANDARDS. 01 For Head Contractors Control. Compliance. Confidence. Login \u2192 02 For Subcontractors Find work. Stay compliant. Get paid. Login \u2192 03 For Clients Request. Track. Results. Login \u2192 Three Portals. One Platform. Turning data into opportunity PEOPLE SITES COMPLIANCE PROGRESS SAME INDUSTRY [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":5,"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/tradesx.neonsnow.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}