{"id":6,"date":"2026-10-01T14:29:12","date_gmt":"2026-10-01T14:29:12","guid":{"rendered":"https:\/\/wallabydigital.com\/?page_id=6"},"modified":"2026-10-01T21:33:56","modified_gmt":"2026-10-01T21:33:56","slug":"home","status":"publish","type":"page","link":"https:\/\/wallabydigital.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8e1b84c e-con-full e-flex e-con e-parent\" data-id=\"8e1b84c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1a835f elementor-widget elementor-widget-html\" data-id=\"f1a835f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"wallaby-elementor-widget w-full relative\">\r\n    <!-- Google Fonts -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <!-- FontAwesome 6 Icons -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- Tailwind CSS -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n    <style>\r\n        :root {\r\n            --brand-pink: #FF006E;\r\n            --brand-purple: #8338EC;\r\n            --brand-blue: #3A86FF;\r\n            --brand-gradient: linear-gradient(135deg, #FF006E 0%, #8338EC 52%, #3A86FF 100%);\r\n            \r\n            \/* Official Google Search Console Colors *\/\r\n            --gsc-clicks: #1A73E8;\r\n            --gsc-clicks-bg: #E8F0FE;\r\n            --gsc-impressions: #8430CE;\r\n            --gsc-impressions-bg: #F3E8FD;\r\n            --gsc-ctr: #007B83;\r\n            --gsc-ctr-bg: #E4F7F8;\r\n            --gsc-position: #E37400;\r\n            --gsc-position-bg: #FEF3E6;\r\n        }\r\n\r\n        .wallaby-wrapper {\r\n            font-family: 'Manrope', sans-serif;\r\n            background-color: #F8FAFC;\r\n            color: #334155;\r\n            overflow-x: hidden;\r\n            -webkit-font-smoothing: antialiased;\r\n            -moz-osx-font-smoothing: grayscale;\r\n        }\r\n\r\n        .wallaby-wrapper ::selection {\r\n            background-color: #FF006E;\r\n            color: white;\r\n        }\r\n\r\n        .font-heading {\r\n            font-family: 'Plus Jakarta Sans', sans-serif;\r\n            letter-spacing: -0.025em;\r\n        }\r\n\r\n        .font-gsc {\r\n            font-family: 'Roboto', 'Google Sans', sans-serif;\r\n        }\r\n\r\n        .brand-gradient-text {\r\n            background: var(--brand-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            display: inline-block;\r\n            padding-bottom: 0.15em; \/* Fixes cropping of descenders *\/\r\n        }\r\n\r\n        .brand-gradient-btn {\r\n            background: var(--brand-gradient);\r\n        }\r\n\r\n        \/* Ambient Glow Orbs *\/\r\n        .glow-orb {\r\n            position: absolute;\r\n            border-radius: 9999px;\r\n            filter: blur(100px);\r\n            opacity: 0.17;\r\n            pointer-events: none;\r\n            mix-blend-mode: multiply;\r\n        }\r\n\r\n        \/* Architectural Grid Pattern *\/\r\n        .bg-grid-pattern {\r\n            background-image: \r\n                linear-gradient(to right, rgba(148, 163, 184, 0.1) 1px, transparent 1px),\r\n                linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 1px, transparent 1px);\r\n            background-size: 40px 40px;\r\n        }\r\n\r\n        \/* GSC Reference Metric Cards *\/\r\n        .gsc-card-selected-clicks {\r\n            background-color: #1A73E8;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .gsc-card-selected-impressions {\r\n            background-color: #5E27CD;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .gsc-card-unselected {\r\n            background-color: #FFFFFF;\r\n            color: #202124;\r\n        }\r\n\r\n        \/* Interactive Graph Grid *\/\r\n        .gsc-grid-line {\r\n            stroke: #E8EAED;\r\n            stroke-width: 1;\r\n        }\r\n\r\n        .gsc-tooltip-line {\r\n            stroke: #5F6368;\r\n            stroke-width: 1.2;\r\n            stroke-dasharray: 3, 3;\r\n        }\r\n\r\n        @keyframes pulseGlow {\r\n            0%, 100% { opacity: 0.6; transform: scale(1); }\r\n            50% { opacity: 1; transform: scale(1.15); }\r\n        }\r\n\r\n        .pulse-head {\r\n            animation: pulseGlow 1.4s ease-in-out infinite;\r\n        }\r\n\r\n        \/* In-View Animation Utility *\/\r\n        .reveal-node {\r\n            opacity: 0;\r\n            transform: translateY(32px);\r\n            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n        }\r\n\r\n        .reveal-node.in-view {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* Testimonial Carousel Overrides *\/\r\n        #carousel-viewport {\r\n            touch-action: pan-y pinch-zoom;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"wallaby-wrapper\">\r\n        <!-- HEADER -->\r\n        <header class=\"w-full bg-white\/95 backdrop-blur-md border-b border-slate-200 sticky top-0 z-50\">\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8 h-20 py-4 flex items-center justify-between\">\r\n                <a href=\"#hero\" class=\"flex items-center gap-3\">\r\n                    <div class=\"w-9 h-9 flex items-center justify-center hover:scale-105 transition-transform\">\r\n                        <svg class=\"w-9 h-9\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n                            <defs>\r\n                                <linearGradient id=\"brandGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n                                    <stop offset=\"0%\" stop-color=\"#FF006E\" \/>\r\n                                    <stop offset=\"55%\" stop-color=\"#8338EC\" \/>\r\n                                    <stop offset=\"100%\" stop-color=\"#3A86FF\" \/>\r\n                                <\/linearGradient>\r\n                            <\/defs>\r\n                            <path d=\"M6 10L14 38L21 21L27 38L35 10H27.5L24 25L19.5 10H14.5L11.5 25L8 10H6Z\" fill=\"url(#brandGrad)\" \/>\r\n                            <circle cx=\"41\" cy=\"11\" r=\"3\" fill=\"#FF006E\" \/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col\">\r\n                        <span class=\"text-xl font-heading font-extrabold text-slate-900 tracking-tight leading-none\">\r\n                            Wallaby <span class=\"brand-gradient-text pb-0\">Digital<\/span>\r\n                        <\/span>\r\n                        <span class=\"text-[9px] uppercase tracking-[0.24em] text-[#64748B] font-semibold mt-0.5\">Design &bull; SEO &bull; Growth<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Desktop Nav Navigation -->\r\n                <nav class=\"hidden md:flex items-center gap-8 text-sm font-semibold text-[#0B0F19]\">\r\n                    <a href=\"#work\" class=\"hover:text-[#8338EC] transition-colors py-1\">Portfolio<\/a>\r\n                    <a href=\"#services\" class=\"hover:text-[#8338EC] transition-colors py-1\">Services<\/a>\r\n                    <a href=\"#team\" class=\"hover:text-[#8338EC] transition-colors py-1\">Team<\/a>\r\n                    <a href=\"#testimonials\" class=\"hover:text-[#8338EC] transition-colors py-1\">Reviews<\/a>\r\n                <\/nav>\r\n\r\n                <div class=\"flex items-center gap-4\">\r\n                    <a href=\"mailto:info@wallabydigital.com\" class=\"hidden lg:flex text-xs font-bold text-slate-700 hover:text-[#8338EC] items-center gap-2\">\r\n                        <i class=\"fa-solid fa-envelope text-[#8338EC]\"><\/i>\r\n                        <span>info@wallabydigital.com<\/span>\r\n                    <\/a>\r\n                    <a href=\"#contact\" class=\"px-5 py-2.5 rounded-full text-xs font-extrabold tracking-wider uppercase text-white brand-gradient-btn hover:opacity-90 hover:scale-105 transition-all shadow-md shadow-purple-500\/20\">\r\n                        Get Proposal\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <!-- SECTION 1: HERO -->\r\n        <section class=\"relative pt-10 pb-16 lg:pt-16 lg:pb-20 flex items-center bg-white overflow-hidden\" id=\"hero\">\r\n            \r\n            <!-- High-Impact Tech Grid Background -->\r\n            <div class=\"absolute inset-0 pointer-events-none z-0\">\r\n                <div class=\"absolute inset-0 bg-grid-pattern opacity-60\"><\/div>\r\n                <!-- Vibrant Glow Orbs -->\r\n                <div class=\"glow-orb w-[600px] h-[600px] -top-32 -left-20 bg-[#FF006E] opacity-20\"><\/div>\r\n                <div class=\"glow-orb w-[700px] h-[700px] top-1\/4 -right-40 bg-[#3A86FF] opacity-25\"><\/div>\r\n                <div class=\"glow-orb w-[500px] h-[500px] -bottom-32 left-1\/4 bg-[#8338EC] opacity-20\"><\/div>\r\n                <!-- Fade to white at bottom -->\r\n                <div class=\"absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white to-transparent\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8 w-full relative z-10\">\r\n                <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-8 items-center\">\r\n                    \r\n                    <!-- Left: Headline & Trade Agency Value Proposition -->\r\n                    <div class=\"lg:col-span-5 text-center lg:text-left reveal-node\">\r\n                        <div class=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white border border-purple-200\/90 mb-5 shadow-sm\">\r\n                            <span class=\"w-2 h-2 rounded-full bg-[#FF006E] animate-ping\"><\/span>\r\n                            <span class=\"text-[11px] font-bold text-[#8338EC] tracking-wider uppercase\">Engineered for Aussie Trades<\/span>\r\n                        <\/div>\r\n\r\n                        <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold text-[#0B0F19] tracking-tight leading-tight mb-5 font-heading\">\r\n                            Websites that turn trade traffic into \r\n                            <span class=\"brand-gradient-text block mt-1\">booked jobs.<\/span>\r\n                        <\/h1>\r\n\r\n                        <p class=\"text-base sm:text-lg text-slate-600 max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed font-medium\">\r\n                            We don\u2019t build generic brochures. We engineer conversion-optimized websites and local SEO systems that turn Google searches into commercial contracts.\r\n                        <\/p>\r\n\r\n                        <!-- CTAs -->\r\n                        <div class=\"flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3\">\r\n                            <a href=\"#work\" class=\"w-full sm:w-auto px-8 py-3.5 rounded-full text-white font-bold text-sm tracking-wide brand-gradient-btn hover:shadow-lg hover:shadow-purple-500\/25 transition-all duration-300 text-center flex items-center justify-center gap-2 group\">\r\n                                <span>View Trade Portfolio<\/span>\r\n                                <i class=\"fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform\"><\/i>\r\n                            <\/a>\r\n                        <\/div>\r\n\r\n                        <!-- Client Trust Counters -->\r\n                        <div class=\"mt-8 pt-6 border-t border-slate-200\/80 grid grid-cols-3 gap-4 text-center lg:text-left\">\r\n                            <div>\r\n                                <div class=\"text-2xl font-extrabold font-heading text-slate-900\">+340%<\/div>\r\n                                <div class=\"text-[11px] text-slate-500 font-bold uppercase tracking-wide mt-1\">GSC Clicks<\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <div class=\"text-2xl font-extrabold font-heading text-[#8338EC]\">#1 Rank<\/div>\r\n                                <div class=\"text-[11px] text-slate-500 font-bold uppercase tracking-wide mt-1\">Map Pack<\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <div class=\"text-2xl font-extrabold font-heading text-[#FF006E]\">24h<\/div>\r\n                                <div class=\"text-[11px] text-slate-500 font-bold uppercase tracking-wide mt-1\">Turnaround<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Right: GSC Interactive Dashboard -->\r\n                    <div class=\"lg:col-span-7 relative reveal-node\" id=\"gsc-console\">\r\n                        \r\n                        <!-- Ambient Glow Around GSC Container -->\r\n                        <div class=\"absolute -inset-2 bg-gradient-to-r from-[#FF006E]\/25 via-[#8338EC]\/25 to-[#3A86FF]\/25 rounded-3xl blur-xl pointer-events-none\"><\/div>\r\n\r\n                        <!-- Main GSC Outer Card Frame -->\r\n                        <div class=\"relative bg-white rounded-2xl border border-slate-200\/90 shadow-2xl overflow-hidden font-gsc flex flex-col h-[600px]\">\r\n                            \r\n                            <!-- Top Google Search Console Breadcrumb -->\r\n                            <div class=\"bg-white border-b border-slate-200\/80 px-4 py-3 flex flex-wrap items-center justify-between gap-4 shrink-0\">\r\n                                <div class=\"flex flex-wrap items-center gap-3\">\r\n                                    <span class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#E8F0FE] text-[#1A73E8] text-xs font-semibold hover:bg-blue-100 transition-colors cursor-default\">\r\n                                        <span>Search type: <strong>Web<\/strong><\/span>\r\n                                    <\/span>\r\n                                    <span class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#E8F0FE] text-[#1A73E8] text-xs font-semibold hover:bg-blue-100 transition-colors cursor-default\">\r\n                                        <span>Date: <strong>Last 3 months<\/strong><\/span>\r\n                                    <\/span>\r\n                                <\/div>\r\n\r\n                                <div class=\"flex items-center gap-4 text-sm text-slate-500\">\r\n                                    <button id=\"btn-replay\" class=\"inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs uppercase font-bold bg-slate-900 text-white hover:bg-slate-800 transition-all shadow-sm\">\r\n                                        <i class=\"fa-solid fa-rotate-right\" id=\"replay-icon\"><\/i>\r\n                                        <span>Replay Growth<\/span>\r\n                                    <\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- 4 Metric Cards -->\r\n                            <div class=\"grid grid-cols-2 sm:grid-cols-4 border-b border-slate-200 shrink-0\">\r\n                                <div class=\"gsc-card-selected-clicks p-4 sm:p-5 border-r border-blue-400\/30 relative\">\r\n                                    <div class=\"flex items-center gap-2 text-sm text-blue-100 mb-2\">\r\n                                        <i class=\"fa-solid fa-square-check text-white\"><\/i>\r\n                                        <span class=\"font-medium\">Total clicks<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"text-3xl sm:text-4xl font-bold text-white tracking-tight\" id=\"val-clicks\">0<\/div>\r\n                                <\/div>\r\n                                <div class=\"gsc-card-selected-impressions p-4 sm:p-5 border-r border-purple-400\/30 relative\">\r\n                                    <div class=\"flex items-center gap-2 text-sm text-purple-200 mb-2\">\r\n                                        <i class=\"fa-solid fa-square-check text-white\"><\/i>\r\n                                        <span class=\"font-medium\">Total impr.<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"text-3xl sm:text-4xl font-bold text-white tracking-tight\" id=\"val-impressions\">0<\/div>\r\n                                <\/div>\r\n                                <div class=\"gsc-card-unselected p-4 sm:p-5 border-r border-slate-200 bg-white\">\r\n                                    <div class=\"flex items-center gap-2 text-sm text-slate-500 mb-2\">\r\n                                        <i class=\"fa-regular fa-square text-slate-400\"><\/i>\r\n                                        <span class=\"font-medium\">Avg. CTR<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"text-3xl sm:text-4xl font-normal text-slate-800 tracking-tight\" id=\"val-ctr\">4.8%<\/div>\r\n                                <\/div>\r\n                                <div class=\"gsc-card-unselected p-4 sm:p-5 bg-white\">\r\n                                    <div class=\"flex items-center gap-2 text-sm text-slate-500 mb-2\">\r\n                                        <i class=\"fa-regular fa-square text-slate-400\"><\/i>\r\n                                        <span class=\"font-medium\">Avg. position<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"text-3xl sm:text-4xl font-normal text-slate-800 tracking-tight\" id=\"val-position\">3.4<\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Graph Body -->\r\n                            <div class=\"p-4 sm:p-6 bg-white relative flex-grow flex flex-col justify-end\">\r\n                                <div class=\"relative h-64 sm:h-72 w-full flex\" id=\"gsc-chart-wrapper\">\r\n                                    <div class=\"flex flex-col justify-between text-xs font-mono text-slate-400 pr-3 pb-8 text-right w-10 shrink-0\">\r\n                                        <span>30<\/span><span>20<\/span><span>10<\/span><span>0<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"relative flex-grow h-full pb-8 cursor-crosshair overflow-hidden\" id=\"gsc-chart-container\">\r\n                                        <svg class=\"w-full h-full overflow-visible\" id=\"gsc-svg\" viewBox=\"0 0 800 240\" preserveAspectRatio=\"none\">\r\n                                            <defs>\r\n                                                <clipPath id=\"timelineClip\"><rect id=\"clip-rect\" x=\"0\" y=\"0\" width=\"0\" height=\"240\" \/><\/clipPath>\r\n                                                <linearGradient id=\"imprGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                                                    <stop offset=\"0%\" stop-color=\"#5E27CD\" stop-opacity=\"0.12\"\/><stop offset=\"100%\" stop-color=\"#5E27CD\" stop-opacity=\"0.0\"\/>\r\n                                                <\/linearGradient>\r\n                                                <linearGradient id=\"clicksGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                                                    <stop offset=\"0%\" stop-color=\"#1A73E8\" stop-opacity=\"0.20\"\/><stop offset=\"100%\" stop-color=\"#1A73E8\" stop-opacity=\"0.0\"\/>\r\n                                                <\/linearGradient>\r\n                                            <\/defs>\r\n                                            <line x1=\"0\" y1=\"24\" x2=\"800\" y2=\"24\" class=\"gsc-grid-line\"\/>\r\n                                            <line x1=\"0\" y1=\"96\" x2=\"800\" y2=\"96\" class=\"gsc-grid-line\"\/>\r\n                                            <line x1=\"0\" y1=\"168\" x2=\"800\" y2=\"168\" class=\"gsc-grid-line\"\/>\r\n                                            <line x1=\"0\" y1=\"240\" x2=\"800\" y2=\"240\" stroke=\"#CBD5E1\" stroke-width=\"2\"\/>\r\n                                            <g clip-path=\"url(#timelineClip)\">\r\n                                                <path id=\"path-impressions-fill\" d=\"\" fill=\"url(#imprGrad)\"><\/path>\r\n                                                <path id=\"path-impressions-line\" d=\"\" fill=\"none\" stroke=\"#5E27CD\" stroke-width=\"2.5\" stroke-linejoin=\"round\"><\/path>\r\n                                                <path id=\"path-clicks-fill\" d=\"\" fill=\"url(#clicksGrad)\"><\/path>\r\n                                                <path id=\"path-clicks-line\" d=\"\" fill=\"none\" stroke=\"#1A73E8\" stroke-width=\"3\" stroke-linejoin=\"round\"><\/path>\r\n                                            <\/g>\r\n                                            <g id=\"milestone-marker\" opacity=\"0\" class=\"transition-opacity duration-500\">\r\n                                                <line x1=\"267\" y1=\"10\" x2=\"267\" y2=\"240\" stroke=\"#FF006E\" stroke-width=\"1.5\" stroke-dasharray=\"4, 4\"\/>\r\n                                                <circle cx=\"267\" cy=\"240\" r=\"5\" fill=\"#FF006E\"\/>\r\n                                                <g transform=\"translate(267, 24)\">\r\n                                                    <rect x=\"-80\" y=\"-14\" width=\"160\" height=\"24\" rx=\"4\" fill=\"#0B0F19\"\/>\r\n                                                    <text x=\"0\" y=\"4\" font-size=\"11\" fill=\"#FFFFFF\" font-weight=\"bold\" text-anchor=\"middle\">Wallaby Map Pack Push<\/text>\r\n                                                <\/g>\r\n                                            <\/g>\r\n                                            <g id=\"leading-head\" transform=\"translate(0, 0)\">\r\n                                                <line x1=\"0\" y1=\"10\" x2=\"0\" y2=\"240\" stroke=\"#1A73E8\" stroke-width=\"1.5\" stroke-dasharray=\"3, 3\" opacity=\"0.8\"\/>\r\n                                                <circle id=\"leading-circle-impr\" cx=\"0\" cy=\"240\" r=\"4.5\" fill=\"#5E27CD\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\r\n                                                <circle id=\"leading-circle-clicks\" cx=\"0\" cy=\"240\" r=\"5\" fill=\"#1A73E8\" stroke=\"#FFFFFF\" stroke-width=\"2\" class=\"pulse-head\"\/>\r\n                                            <\/g>\r\n                                        <\/svg>\r\n                                    <\/div>\r\n                                    <div class=\"flex flex-col justify-between text-xs font-mono text-slate-400 pl-3 pb-8 text-left w-14 shrink-0\">\r\n                                        <span>600<\/span><span>400<\/span><span>200<\/span><span>0<\/span>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"flex items-center justify-between gap-4 mt-2 pt-4 border-t border-slate-100\">\r\n                                    <div class=\"flex-grow bg-slate-100 h-2 rounded-full overflow-hidden relative cursor-pointer\" id=\"scrubber-bar\">\r\n                                        <div id=\"scrubber-fill\" class=\"h-full bg-gradient-to-r from-[#1A73E8] to-[#FF006E] w-0 transition-all duration-75\"><\/div>\r\n                                    <\/div>\r\n                                    <span class=\"text-xs font-mono font-bold text-slate-600 w-10\" id=\"scrubber-pct\">0%<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Bottom Search Queries Table -->\r\n                            <div class=\"border-t border-slate-200 bg-[#FAFCFF] p-4 shrink-0\" id=\"queries\">\r\n                                <div class=\"overflow-x-auto\">\r\n                                    <table class=\"w-full text-left text-xs\">\r\n                                        <thead>\r\n                                            <tr class=\"text-[10px] font-bold uppercase text-slate-400 border-b border-slate-200 pb-2\">\r\n                                                <th class=\"pb-2\">Top Query<\/th>\r\n                                                <th class=\"pb-2 text-right text-[#1A73E8]\">Clicks<\/th>\r\n                                                <th class=\"pb-2 text-right text-[#5E27CD]\">Impr.<\/th>\r\n                                                <th class=\"pb-2 text-right text-[#E37400]\">Pos.<\/th>\r\n                                            <\/tr>\r\n                                        <\/thead>\r\n                                        <tbody class=\"divide-y divide-slate-100\" id=\"gsc-queries-body\">\r\n                                            <!-- Dynamically populated -->\r\n                                        <\/tbody>\r\n                                    <\/table>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- SECTION 2: WORK \/ TRADES PORTFOLIO -->\r\n        <section id=\"work\" class=\"py-24 relative border-y border-blue-100\" style=\"background-color: var(--bg-frost, #F0F7FF);\">\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\r\n                \r\n                <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-16 reveal-node\">\r\n                    <div>\r\n                        <div class=\"flex items-center gap-2 text-[#3A86FF] font-bold text-xs uppercase tracking-widest mb-3\">\r\n                            <i class=\"fa-solid fa-screwdriver-wrench\"><\/i>\r\n                            <span>Trades & Small Business Showcase<\/span>\r\n                        <\/div>\r\n                        <h2 class=\"text-3xl sm:text-5xl font-extrabold text-[#0B0F19] font-heading\">\r\n                            Proven websites for high-margin jobs.\r\n                        <\/h2>\r\n                    <\/div>\r\n                    <p class=\"text-[#64748B] text-base max-w-md mt-4 md:mt-0 leading-relaxed\">\r\n                        We replace outdated directories with sleek digital portfolios designed to win tenders, private builds, and emergency trade calls.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <!-- Portfolio Grid -->\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-10\">\r\n                    \r\n                    <!-- Project 1: Electrical & Solar -->\r\n                    <div class=\"work-card bg-white rounded-3xl border border-slate-200 overflow-hidden reveal-node group flex flex-col h-full hover:-translate-y-2 hover:shadow-2xl hover:border-purple-300 transition-all duration-400\">\r\n                        <div class=\"bg-slate-50 border-b border-slate-100 px-4 py-2.5 flex items-center justify-between\">\r\n                            <div class=\"flex items-center gap-1.5\">\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-amber-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400\"><\/span>\r\n                            <\/div>\r\n                            <div class=\"text-[10px] font-mono text-slate-400 bg-white px-3 py-1 rounded-md border border-slate-200 flex items-center gap-1\">\r\n                                <i class=\"fa-solid fa-lock text-slate-300\"><\/i> voltedge-electrical.com.au\r\n                            <\/div>\r\n                            <div class=\"w-4\"><\/div>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"relative h-64 sm:h-80 overflow-hidden bg-slate-100 border-b border-slate-200\">\r\n                            <!-- EXACT WORDPRESS URL FOR VOLTEDGE MOCKUP -->\r\n                            <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/Voltedge-mockup.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/800x600\/F8FAFC\/8338EC?text=Image+Not+Found'\" alt=\"VoltEdge Electrical Website\" class=\"absolute inset-0 w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-700\">\r\n                        <\/div>\r\n                        \r\n                        <div class=\"p-6 sm:p-8 flex-grow flex flex-col justify-between\">\r\n                            <div>\r\n                                <div class=\"flex justify-between items-start mb-2\">\r\n                                    <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] group-hover:text-[#8338EC] transition-colors\">\r\n                                        VoltEdge Electrical\r\n                                    <\/h3>\r\n                                    <a href=\"#contact\" class=\"w-10 h-10 rounded-full bg-[#FAF5FF] flex items-center justify-center text-[#8338EC] group-hover:bg-[#8338EC] group-hover:text-white transition-all shadow-sm flex-shrink-0\">\r\n                                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i>\r\n                                    <\/a>\r\n                                <\/div>\r\n                                <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                                    Complete digital rebrand featuring fast mobile quote requests, emergency dispatch forms, and #1 Google rankings for commercial electrical queries.\r\n                                <\/p>\r\n                            <\/div>\r\n                            <div class=\"flex flex-wrap gap-2 text-xs font-semibold text-slate-600 mt-auto\">\r\n                                <span class=\"px-2.5 py-1 rounded bg-slate-100\">Click-to-Call System<\/span>\r\n                                <span class=\"px-2.5 py-1 rounded bg-purple-50 text-[#8338EC] font-bold\">+210% Leads<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Project 2: High-End Master Builders -->\r\n                    <div class=\"work-card bg-white rounded-3xl border border-slate-200 overflow-hidden reveal-node group flex flex-col h-full hover:-translate-y-2 hover:shadow-2xl hover:border-pink-300 transition-all duration-400\">\r\n                        <div class=\"bg-slate-50 border-b border-slate-100 px-4 py-2.5 flex items-center justify-between\">\r\n                            <div class=\"flex items-center gap-1.5\">\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-amber-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400\"><\/span>\r\n                            <\/div>\r\n                            <div class=\"text-[10px] font-mono text-slate-400 bg-white px-3 py-1 rounded-md border border-slate-200 flex items-center gap-1\">\r\n                                <i class=\"fa-solid fa-lock text-slate-300\"><\/i> horizonbuilders.com.au\r\n                            <\/div>\r\n                            <div class=\"w-4\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative h-64 sm:h-80 overflow-hidden bg-slate-100 border-b border-slate-200\">\r\n                             <!-- EXACT WORDPRESS URL FOR HORIZON MOCKUP -->\r\n                             <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/Horizon-mockup.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/800x600\/F8FAFC\/FF006E?text=Image+Not+Found'\" alt=\"Horizon Master Builders\" class=\"absolute inset-0 w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-700\">\r\n                        <\/div>\r\n                        \r\n                        <div class=\"p-6 sm:p-8 flex-grow flex flex-col justify-between\">\r\n                            <div>\r\n                                <div class=\"flex justify-between items-start mb-2\">\r\n                                    <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] group-hover:text-[#FF006E] transition-colors\">\r\n                                        Horizon Master Builders\r\n                                    <\/h3>\r\n                                    <a href=\"#contact\" class=\"w-10 h-10 rounded-full bg-[#FFF0F5] flex items-center justify-center text-[#FF006E] group-hover:bg-[#FF006E] group-hover:text-white transition-all shadow-sm flex-shrink-0\">\r\n                                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i>\r\n                                    <\/a>\r\n                                <\/div>\r\n                                <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                                    High-end residential renovation portfolio with full-screen project walkthroughs, builder license verifications, and tender inquiry funnels.\r\n                                <\/p>\r\n                            <\/div>\r\n                            <div class=\"flex flex-wrap gap-2 text-xs font-semibold text-slate-600 mt-auto\">\r\n                                <span class=\"px-2.5 py-1 rounded bg-slate-100\">Interactive Portfolios<\/span>\r\n                                <span class=\"px-2.5 py-1 rounded bg-pink-50 text-[#FF006E] font-bold\">100% Bespoke<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Project 3: Commercial Plumbing -->\r\n                    <div class=\"work-card bg-white rounded-3xl border border-slate-200 overflow-hidden reveal-node group flex flex-col h-full hover:-translate-y-2 hover:shadow-2xl hover:border-blue-300 transition-all duration-400\">\r\n                        <div class=\"bg-slate-50 border-b border-slate-100 px-4 py-2.5 flex items-center justify-between\">\r\n                            <div class=\"flex items-center gap-1.5\">\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-amber-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400\"><\/span>\r\n                            <\/div>\r\n                            <div class=\"text-[10px] font-mono text-slate-400 bg-white px-3 py-1 rounded-md border border-slate-200 flex items-center gap-1\">\r\n                                <i class=\"fa-solid fa-lock text-slate-300\"><\/i> aquaflowplumbing.com.au\r\n                            <\/div>\r\n                            <div class=\"w-4\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative h-64 sm:h-80 overflow-hidden bg-slate-100 border-b border-slate-200\">\r\n                            <!-- EXACT WORDPRESS URL FOR AQUAFLOW MOCKUP -->\r\n                            <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/aquaflow-mockup.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/800x600\/F8FAFC\/3A86FF?text=Image+Not+Found'\" alt=\"AquaFlow Commercial Plumbing\" class=\"absolute inset-0 w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-700\">\r\n                        <\/div>\r\n                        \r\n                        <div class=\"p-6 sm:p-8 flex-grow flex flex-col justify-between\">\r\n                            <div>\r\n                                <div class=\"flex justify-between items-start mb-2\">\r\n                                    <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] group-hover:text-[#3A86FF] transition-colors\">\r\n                                        AquaFlow Commercial Plumbing\r\n                                    <\/h3>\r\n                                    <a href=\"#contact\" class=\"w-10 h-10 rounded-full bg-[#F0F7FF] flex items-center justify-center text-[#3A86FF] group-hover:bg-[#3A86FF] group-hover:text-white transition-all shadow-sm flex-shrink-0\">\r\n                                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i>\r\n                                    <\/a>\r\n                                <\/div>\r\n                                <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                                    Tailored landing page architecture delivering urgent tap-to-call emergency services during business hours and automated dispatch routing after hours.\r\n                                <\/p>\r\n                            <\/div>\r\n                            <div class=\"flex flex-wrap gap-2 text-xs font-semibold text-slate-600 mt-auto\">\r\n                                <span class=\"px-2.5 py-1 rounded bg-slate-100\">Direct Dispatch<\/span>\r\n                                <span class=\"px-2.5 py-1 rounded bg-blue-50 text-[#3A86FF] font-bold\">+185% Calls<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Project 4: Landscape Architecture -->\r\n                    <div class=\"work-card bg-white rounded-3xl border border-slate-200 overflow-hidden reveal-node group flex flex-col h-full hover:-translate-y-2 hover:shadow-2xl hover:border-purple-300 transition-all duration-400\">\r\n                        <div class=\"bg-slate-50 border-b border-slate-100 px-4 py-2.5 flex items-center justify-between\">\r\n                            <div class=\"flex items-center gap-1.5\">\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-amber-400\"><\/span>\r\n                                <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400\"><\/span>\r\n                            <\/div>\r\n                            <div class=\"text-[10px] font-mono text-slate-400 bg-white px-3 py-1 rounded-md border border-slate-200 flex items-center gap-1\">\r\n                                <i class=\"fa-solid fa-lock text-slate-300\"><\/i> terraformlandscapes.com.au\r\n                            <\/div>\r\n                            <div class=\"w-4\"><\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"relative h-64 sm:h-80 overflow-hidden bg-slate-100 border-b border-slate-200\">\r\n                            <!-- EXACT WORDPRESS URL FOR TERRAFORM MOCKUP -->\r\n                            <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/Terraform-mockup.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/800x600\/F8FAFC\/8338EC?text=Image+Not+Found'\" alt=\"TerraForm Landscapes\" class=\"absolute inset-0 w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-700\">\r\n                        <\/div>\r\n                        \r\n                        <div class=\"p-6 sm:p-8 flex-grow flex flex-col justify-between\">\r\n                            <div>\r\n                                <div class=\"flex justify-between items-start mb-2\">\r\n                                    <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] group-hover:text-[#8338EC] transition-colors\">\r\n                                        TerraForm Landscapes\r\n                                    <\/h3>\r\n                                    <a href=\"#contact\" class=\"w-10 h-10 rounded-full bg-[#FAF5FF] flex items-center justify-center text-[#8338EC] group-hover:bg-[#8338EC] group-hover:text-white transition-all shadow-sm flex-shrink-0\">\r\n                                        <i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"><\/i>\r\n                                    <\/a>\r\n                                <\/div>\r\n                                <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                                    Visual-first website with interactive design galleries that moved this outdoor living contractor from small maintenance jobs to $80k+ luxury pool surrounds.\r\n                                <\/p>\r\n                            <\/div>\r\n                            <div class=\"flex flex-wrap gap-2 text-xs font-semibold text-slate-600 mt-auto\">\r\n                                <span class=\"px-2.5 py-1 rounded bg-slate-100\">Gallery Sliders<\/span>\r\n                                <span class=\"px-2.5 py-1 rounded bg-purple-50 text-[#8338EC] font-bold\">High-Ticket Leads<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- SECTION 3: SERVICES -->\r\n        <section id=\"services\" class=\"py-24 relative border-b border-purple-100 bg-[#FAF5FF]\">\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\r\n                <div class=\"text-center max-w-2xl mx-auto mb-16 reveal-node\">\r\n                    <div class=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white border border-purple-200 text-[#8338EC] text-xs font-bold uppercase tracking-wider mb-4 shadow-sm\">\r\n                        <i class=\"fa-solid fa-layer-group\"><\/i>\r\n                        <span>Agency Specializations<\/span>\r\n                    <\/div>\r\n                    <h2 class=\"text-3xl sm:text-5xl font-extrabold text-[#0B0F19] tracking-tight font-heading\">\r\n                        Engineered to grow trade pipelines.\r\n                    <\/h2>\r\n                    <p class=\"text-[#64748B] text-base mt-4 leading-relaxed\">\r\n                        We focus on the three pillars that convert local searchers into booked trade contracts.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n                    <!-- Pillar 1 -->\r\n                    <div class=\"p-8 sm:p-10 rounded-3xl bg-white border border-slate-200\/90 shadow-sm reveal-node hover:border-[#FF006E]\/40 hover:-translate-y-1 transition-all\">\r\n                        <div class=\"w-14 h-14 rounded-2xl bg-[#FFF0F5] border border-pink-200 flex items-center justify-center text-[#FF006E] text-2xl mb-6 shadow-sm\">\r\n                            <i class=\"fa-solid fa-laptop-code\"><\/i>\r\n                        <\/div>\r\n                        <span class=\"text-xs font-bold uppercase text-[#FF006E] tracking-wider\">Pillar 01<\/span>\r\n                        <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] mt-1 mb-4\">Web Design & UI<\/h3>\r\n                        <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                            Bespoke interfaces designed in Figma and coded to perfection. Lightning-quick loading speeds, seamless mobile usability, and zero template clunk.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Pillar 2 -->\r\n                    <div class=\"p-8 sm:p-10 rounded-3xl bg-white border border-slate-200\/90 shadow-sm reveal-node hover:border-[#8338EC]\/40 hover:-translate-y-1 transition-all\">\r\n                        <div class=\"w-14 h-14 rounded-2xl bg-[#FAF5FF] border border-purple-200 flex items-center justify-center text-[#8338EC] text-2xl mb-6 shadow-sm\">\r\n                            <i class=\"fa-solid fa-magnifying-glass-chart\"><\/i>\r\n                        <\/div>\r\n                        <span class=\"text-xs font-bold uppercase text-[#8338EC] tracking-wider\">Pillar 02<\/span>\r\n                        <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] mt-1 mb-4\">Local SEO Engine<\/h3>\r\n                        <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                            Websites that rank without dirty tricks. We establish clean technical hierarchies and semantic schemas search engines reward.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Pillar 3 -->\r\n                    <div class=\"p-8 sm:p-10 rounded-3xl bg-white border border-slate-200\/90 shadow-sm reveal-node hover:border-[#3A86FF]\/40 hover:-translate-y-1 transition-all\">\r\n                        <div class=\"w-14 h-14 rounded-2xl bg-[#F0F7FF] border border-blue-200 flex items-center justify-center text-[#3A86FF] text-2xl mb-6 shadow-sm\">\r\n                            <i class=\"fa-solid fa-bullseye\"><\/i>\r\n                        <\/div>\r\n                        <span class=\"text-xs font-bold uppercase text-[#3A86FF] tracking-wider\">Pillar 03<\/span>\r\n                        <h3 class=\"text-2xl font-bold font-heading text-[#0B0F19] mt-1 mb-4\">Digital Marketing<\/h3>\r\n                        <p class=\"text-[#64748B] text-sm leading-relaxed mb-6\">\r\n                            Precision paid campaigns that channel verified buyers straight into your landing funnels with clear tracking and zero wasted ad spend.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- SECTION 4: TEAM -->\r\n        <section id=\"team\" class=\"py-24 bg-white relative overflow-hidden border-b border-slate-100\">\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\r\n                \r\n                <!-- Agency Story and Office Photo -->\r\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-24 reveal-node\">\r\n                    <div>\r\n                        <div class=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#FAF5FF] border border-purple-200\/80 text-[#8338EC] text-xs font-bold uppercase tracking-wider mb-6 shadow-sm\">\r\n                            <i class=\"fa-solid fa-location-dot\"><\/i>\r\n                            <span>North Sydney HQ<\/span>\r\n                        <\/div>\r\n                        <h2 class=\"text-3xl sm:text-4xl lg:text-5xl font-extrabold text-[#0B0F19] tracking-tight font-heading mb-6 leading-[1.1] pb-2\">\r\n                            15 years in the making. <br\/><span class=\"brand-gradient-text\">100% local talent.<\/span>\r\n                        <\/h2>\r\n                        <div class=\"space-y-4 text-slate-600 text-base leading-relaxed font-medium\">\r\n                            <p>\r\n                                We are a proudly independent digital agency based in the heart of North Sydney. For over 15 years, we've been helping Aussie trades, builders, and commercial businesses dominate their local markets.\r\n                            <\/p>\r\n                            <p>\r\n                                <strong>No outsourcing. No offshore account managers.<\/strong> Every line of code, every design iteration, and every SEO strategy is crafted right here in our office by seasoned digital craftspeople who understand the nuances of the Australian market.\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"relative rounded-3xl overflow-hidden shadow-2xl border border-slate-200 group\">\r\n                        <!-- EXACT WORDPRESS URL FOR OFFICE PHOTO -->\r\n                        <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/agency-office.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/800x600\/F8FAFC\/8338EC?text=Office+Space'\" alt=\"Wallaby Digital North Sydney Office\" class=\"w-full h-[350px] sm:h-[450px] object-cover group-hover:scale-105 transition-transform duration-700\">\r\n                        <div class=\"absolute inset-0 border-[4px] border-white\/20 rounded-3xl pointer-events-none\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"text-center max-w-2xl mx-auto mb-16 reveal-node\">\r\n                    <h3 class=\"text-3xl sm:text-4xl font-extrabold text-[#0B0F19] tracking-tight font-heading pb-2\">Meet Our Leadership<\/h3>\r\n                    <p class=\"text-[#64748B] text-base mt-3 leading-relaxed\">Direct access to the experts executing your digital strategy. No junior accounts, no outsourced guessing.<\/p>\r\n                <\/div>\r\n                \r\n                <!-- Staff Portraits -->\r\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n                    <!-- Karl -->\r\n                    <div class=\"bg-white rounded-3xl border border-slate-100 p-5 shadow-sm hover:shadow-lg transition-all reveal-node group\">\r\n                        <!-- EXACT WORDPRESS URL FOR KARL -->\r\n                        <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/Karl-Portrait.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x800\/F8FAFC\/8338EC?text=Karl+Menzies'\" alt=\"Karl Menzies\" class=\"w-full h-64 object-cover rounded-2xl mb-5 grayscale-[20%] group-hover:grayscale-0 transition-all\">\r\n                        <h3 class=\"text-xl font-bold font-heading text-[#0B0F19]\">Karl Menzies<\/h3>\r\n                        <p class=\"text-xs font-bold text-[#8338EC] uppercase tracking-wider mb-3\">Managing Director<\/p>\r\n                        <p class=\"text-sm text-slate-500\">Guides our strategic vision, ensuring every client leverages our creative edge for maximum growth.<\/p>\r\n                    <\/div>\r\n                    <!-- Maya -->\r\n                    <div class=\"bg-white rounded-3xl border border-slate-100 p-5 shadow-sm hover:shadow-lg transition-all reveal-node group\">\r\n                        <!-- EXACT WORDPRESS URL FOR MAYA -->\r\n                        <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/Maya-portrait.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x800\/F8FAFC\/FF006E?text=Maya+Singh'\" alt=\"Maya Singh\" class=\"w-full h-64 object-cover object-top rounded-2xl mb-5 grayscale-[20%] group-hover:grayscale-0 transition-all\">\r\n                        <h3 class=\"text-xl font-bold font-heading text-[#0B0F19]\">Maya Singh<\/h3>\r\n                        <p class=\"text-xs font-bold text-[#FF006E] uppercase tracking-wider mb-3\">Digital Strategy Lead<\/p>\r\n                        <p class=\"text-sm text-slate-500\">Drives growth through tailored, high-performance campaigns, maximizing brand presence and engagement.<\/p>\r\n                    <\/div>\r\n                    <!-- Alex -->\r\n                    <div class=\"bg-white rounded-3xl border border-slate-100 p-5 shadow-sm hover:shadow-lg transition-all reveal-node group\">\r\n                        <!-- EXACT WORDPRESS URL FOR ALEX -->\r\n                        <img decoding=\"async\" src=\"https:\/\/wallabydigital.com\/wp-content\/uploads\/2026\/10\/alex-portrait.jpg\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x800\/F8FAFC\/3A86FF?text=Alex+Duong'\" alt=\"Alex Duong\" class=\"w-full h-64 object-cover rounded-2xl mb-5 grayscale-[20%] group-hover:grayscale-0 transition-all\">\r\n                        <h3 class=\"text-xl font-bold font-heading text-[#0B0F19]\">Alex Duong<\/h3>\r\n                        <p class=\"text-xs font-bold text-[#3A86FF] uppercase tracking-wider mb-3\">UX\/UI Design Lead<\/p>\r\n                        <p class=\"text-sm text-slate-500\">The creative mind behind our visual experiences. Alex crafts slick, responsive interfaces that convert.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- SECTION 5: TESTIMONIALS -->\r\n        <section id=\"testimonials\" class=\"py-24 relative overflow-hidden border-t border-slate-200\/80 bg-[#F0F7FF]\">\r\n            <div class=\"absolute -top-24 -left-24 w-96 h-96 rounded-full bg-[#3A86FF] opacity-15 filter blur-3xl pointer-events-none\"><\/div>\r\n            <div class=\"absolute -bottom-24 -right-24 w-96 h-96 rounded-full bg-[#FF006E] opacity-15 filter blur-3xl pointer-events-none\"><\/div>\r\n\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\r\n                <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-14\">\r\n                    <div>\r\n                        <div class=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white border border-blue-200\/80 shadow-sm mb-4\">\r\n                            <div class=\"flex items-center text-amber-400 text-xs gap-0.5\">\r\n                                <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n                            <\/div>\r\n                            <span class=\"text-xs font-bold text-[#0B0F19] tracking-wider uppercase\">5.0 Star Client Rating<\/span>\r\n                        <\/div>\r\n                        <h2 class=\"text-3xl sm:text-5xl font-extrabold text-[#0B0F19] tracking-tight font-heading\">\r\n                            Trusted by Aussie builders.\r\n                        <\/h2>\r\n                    <\/div>\r\n                    <div class=\"flex items-center gap-3 mt-6 md:mt-0\">\r\n                        <button id=\"carousel-prev\" aria-label=\"Previous Testimonial\" class=\"w-12 h-12 rounded-full bg-white border border-slate-200 shadow-sm hover:border-[#8338EC] hover:text-[#8338EC] text-slate-700 flex items-center justify-center transition-all hover:scale-105 active:scale-95 z-20 relative\">\r\n                            <i class=\"fa-solid fa-arrow-left text-sm\"><\/i>\r\n                        <\/button>\r\n                        <button id=\"carousel-next\" aria-label=\"Next Testimonial\" class=\"w-12 h-12 rounded-full bg-white border border-slate-200 shadow-sm hover:border-[#8338EC] hover:text-[#8338EC] text-slate-700 flex items-center justify-center transition-all hover:scale-105 active:scale-95 z-20 relative\">\r\n                            <i class=\"fa-solid fa-arrow-right text-sm\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Full-width Viewport for Center Focus -->\r\n            <div class=\"relative overflow-visible cursor-grab active:cursor-grabbing select-none pb-12 pt-4 w-full\" id=\"carousel-viewport\">\r\n                <div id=\"carousel-track\" class=\"flex transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] will-change-transform items-stretch\">\r\n                    \r\n                    <!-- Testimonial 1 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Wallaby Digital completely transformed how luxury architects and homeowners view us. Within 3 months of our site relaunch, we signed two multi-million residential tenders.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">DC<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Dave Callaghan<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Apex Structural Builds<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 2 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"We used to waste thousands on Google Ads with an old clunky site. Maya and Alex rebuilt our click-to-call flow and locked us at #1 on the local map pack. Qualified inbound calls surged.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">MR<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Marcus Rossi<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">VoltEdge Electrical<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 3 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Most agencies talk jargon and dump a generic builder template. Wallaby Digital crafted a clean visual gallery that instantly justifies our luxury pool surrounds.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">LT<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Liam Thorne<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">TerraForm Outdoor<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <!-- Testimonial 4 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"The team at Wallaby completely overhauled our online presence. Our bespoke cabinetry inquiries have tripled, and we're booked out for the next 8 months.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">SJ<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Sarah Jenkins<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Jenkins Custom Cabinets<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 5 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"We wanted to attract larger commercial roofing contracts instead of just residential repairs. Wallaby's SEO strategy got us ranking for exactly what we needed.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">TO<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Tom O'Keefe<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">O'Keefe Roofing<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 6 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Our old website didn't reflect the premium quality of our restoration work. The new portfolio Wallaby built is stunning and attracts the right kind of client.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">ER<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Elena Rossi<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Heritage Restorations<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 7 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Since launching our new site, our emergency call-out rate has spiked. The mobile click-to-call setup is seamless. Best ROI we've ever had from an agency.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">JN<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Jimmy Nguyen<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Precision HVAC<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 8 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Wallaby understood our industry immediately. They designed a corporate fitout landing page that converts traffic into highly qualified leads.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">CS<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Chloe Sanders<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Sanders Commercial<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 9 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"No jargon, no fluff, just real results. We went from page 4 on Google to the top 3 in the map pack for our local area in under six months.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">PC<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Pete Carmichael<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Carmichael Bricklaying<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 10 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"We needed a website that was as architecturally sound as our builds. Alex and the design team delivered beyond our expectations.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">RV<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Rachel Vance<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Vance Architecture<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 11 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Honestly, I didn't think SEO mattered for excavators. Wallaby proved me wrong. We're getting direct inquiries from tier-1 builders now instead of chasing work.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">GS<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Greg Sullivan<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Sullivan Earthmoving<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 12 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Maya's ad strategy was a game-changer. We paused our campaigns because we simply couldn't keep up with the volume of high-end decking quotes.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">BM<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Ben Mitchell<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Coastal Decking<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Testimonial 13 -->\r\n                    <div class=\"carousel-item flex-shrink-0 px-2 sm:px-4 w-[85%] md:w-[60%] lg:w-[40%]\">\r\n                        <div class=\"testi-card bg-white rounded-3xl p-8 lg:p-10 border border-slate-200\/90 h-full flex flex-col justify-between transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] relative overflow-hidden transform-gpu scale-90 opacity-40 z-0 cursor-pointer hover:opacity-70 group\">\r\n                            <i class=\"fa-solid fa-quote-right absolute -bottom-6 -right-2 text-9xl text-slate-100 opacity-60 pointer-events-none group-hover:-rotate-6 transition-transform duration-700\"><\/i>\r\n                            <div class=\"relative z-10 flex flex-col h-full\">\r\n                                <p class=\"text-slate-700 text-sm sm:text-base leading-relaxed mb-8 font-medium\">\r\n                                    \"Professional, transparent, and incredibly effective. Wallaby Digital feels like an extension of our own team right here in North Sydney.\"\r\n                                <\/p>\r\n                                <div class=\"pt-6 border-t border-slate-100 flex items-center gap-4 mt-auto\">\r\n                                    <div class=\"testi-avatar w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold border-2 border-white shadow-sm transition-all duration-500\">FD<\/div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-extrabold text-[#0B0F19]\">Fiona Dempsey<\/h4>\r\n                                        <p class=\"text-[10px] text-[#8338EC] uppercase font-bold tracking-wider mt-0.5\">Dempsey Engineering<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- SECTION 6: CONTACT -->\r\n        <section id=\"contact\" class=\"py-24 relative bg-[#090D16] text-white\">\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\r\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\r\n                    <div>\r\n                        <h2 class=\"text-3xl sm:text-5xl font-extrabold text-white font-heading mb-6\">Let's build a website your competitors will <span class=\"brand-gradient-text pb-2\">envy.<\/span><\/h2>\r\n                        <p class=\"text-slate-400 mb-8\">Tell us about your trade or small business, target timeline, and goals. Karl or Maya will personally review your brief and respond within 24 hours.<\/p>\r\n                        <div class=\"space-y-6\">\r\n                            <div class=\"flex gap-4\">\r\n                                <i class=\"fa-solid fa-envelope text-[#FF006E] text-xl mt-1\"><\/i>\r\n                                <div><p class=\"text-xs text-slate-500 uppercase font-bold tracking-wider\">Email<\/p><p>info@wallabydigital.com<\/p><\/div>\r\n                            <\/div>\r\n                           \r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"bg-white p-8 rounded-3xl text-slate-900 shadow-2xl\">\r\n                        <h3 class=\"text-2xl font-extrabold font-heading mb-6\">Request Proposal<\/h3>\r\n                        <form class=\"space-y-4\">\r\n                            <input type=\"text\" placeholder=\"Your Name\" class=\"w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-sm focus:outline-none focus:border-[#8338EC]\">\r\n                            <input type=\"email\" placeholder=\"Email Address\" class=\"w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-sm focus:outline-none focus:border-[#8338EC]\">\r\n                            <select class=\"w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-sm focus:outline-none\">\r\n                                <option>Bespoke Trade Website Design<\/option>\r\n                                <option>Local SEO & Growth<\/option>\r\n                            <\/select>\r\n                            <textarea placeholder=\"Project Brief\" rows=\"3\" class=\"w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 text-sm focus:outline-none focus:border-[#8338EC]\"><\/textarea>\r\n                            <button type=\"button\" class=\"w-full py-4 rounded-xl text-white font-extrabold text-sm uppercase tracking-wider brand-gradient-btn hover:opacity-90\">Submit Request<\/button>\r\n                        <\/form>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- FOOTER -->\r\n        <footer class=\"py-12 bg-black text-slate-500 text-sm border-t border-slate-800\">\r\n            <div class=\"max-w-7xl mx-auto px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4\">\r\n                <div>&copy; 2026 Wallaby Digital. Registered in NSW, Australia.<\/div>\r\n                <div class=\"flex gap-4\">\r\n                    <i class=\"fa-brands fa-linkedin hover:text-white cursor-pointer transition-colors\"><\/i>\r\n                    <i class=\"fa-brands fa-instagram hover:text-white cursor-pointer transition-colors\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n        <\/footer>\r\n\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Hero Chart Logic\r\n        (function() {\r\n            const queries = [\r\n                {q: \"commercial electrician north sydney\", c: 418, i: \"7.8K\", p: \"#1\"},\r\n                {q: \"industrial switchboard upgrade\", c: 342, i: \"6.9K\", p: \"#1\"},\r\n                {q: \"level 2 electrician mosman\", c: 295, i: \"5.4K\", p: \"#2\"}\r\n            ];\r\n            const tbody = document.getElementById('gsc-queries-body');\r\n            if(tbody) {\r\n                tbody.innerHTML = queries.map(q => `\r\n                    <tr><td class=\"py-2 font-medium text-slate-800\">${q.q}<\/td><td class=\"text-right text-[#1A73E8] font-bold\">${q.c}<\/td><td class=\"text-right text-[#5E27CD] font-bold\">${q.i}<\/td><td class=\"text-right font-bold\"><span class=\"bg-amber-100 text-amber-800 px-1.5 py-0.5 rounded text-[9px]\">${q.p}<\/span><\/td><\/tr>\r\n                `).join(\"\");\r\n            }\r\n            \r\n            \/\/ Dummy SVG animation setup for visual effect\r\n            const clipRect = document.getElementById(\"clip-rect\");\r\n            const scrubberFill = document.getElementById(\"scrubber-fill\");\r\n            const scrubberPct = document.getElementById(\"scrubber-pct\");\r\n            const valClicks = document.getElementById(\"val-clicks\");\r\n            const valImpr = document.getElementById(\"val-impressions\");\r\n            const clicksPath = document.getElementById(\"path-clicks-line\");\r\n            const imprPath = document.getElementById(\"path-impressions-line\");\r\n            const clicksFill = document.getElementById(\"path-clicks-fill\");\r\n            const imprFill = document.getElementById(\"path-impressions-fill\");\r\n\r\n            if(clicksPath) clicksPath.setAttribute(\"d\", \"M0,230 L100,210 L200,180 L300,195 L400,120 L500,45 L600,105 L700,20 L800,10\");\r\n            if(imprPath) imprPath.setAttribute(\"d\", \"M0,215 L100,205 L200,190 L300,150 L400,90 L500,55 L600,35 L700,25 L800,20\");\r\n            if(clicksFill) clicksFill.setAttribute(\"d\", \"M0,240 L0,230 L100,210 L200,180 L300,195 L400,120 L500,45 L600,105 L700,20 L800,10 L800,240 Z\");\r\n            if(imprFill) imprFill.setAttribute(\"d\", \"M0,240 L0,215 L100,205 L200,190 L300,150 L400,90 L500,55 L600,35 L700,25 L800,20 L800,240 Z\");\r\n\r\n            let progress = 0;\r\n            function animate() {\r\n                progress += 0.005;\r\n                if(progress > 1) progress = 1;\r\n                if(clipRect) clipRect.setAttribute(\"width\", progress * 800);\r\n                if(scrubberFill) scrubberFill.style.width = (progress * 100) + \"%\";\r\n                if(scrubberPct) scrubberPct.innerText = Math.round(progress * 100) + \"%\";\r\n                if(valClicks) valClicks.innerText = Math.floor(progress * 1540).toLocaleString();\r\n                if(valImpr) valImpr.innerText = (progress * 31.8).toFixed(1) + \"K\";\r\n                \r\n                \/\/ Show milestone when crossed\r\n                const milestone = document.getElementById(\"milestone-marker\");\r\n                if(milestone && progress > (267\/800)) milestone.style.opacity = 1;\r\n\r\n                \/\/ Move leading heads\r\n                const leadingHead = document.getElementById(\"leading-head\");\r\n                if (leadingHead) {\r\n                    leadingHead.setAttribute(\"transform\", `translate(${progress * 800}, 0)`);\r\n                    \r\n                    \/\/ Crude path interpolation for the circle Y positions\r\n                    const w = progress * 800;\r\n                    const cPts = [230, 210, 180, 195, 120, 45, 105, 20, 10];\r\n                    const iPts = [215, 205, 190, 150, 90, 55, 35, 25, 20];\r\n                    const seg = Math.min(Math.floor(w \/ 100), 7);\r\n                    const rem = (w % 100) \/ 100;\r\n                    \r\n                    const cY = cPts[seg] + (cPts[seg+1] - cPts[seg]) * rem;\r\n                    const iY = iPts[seg] + (iPts[seg+1] - iPts[seg]) * rem;\r\n                    \r\n                    document.getElementById(\"leading-circle-clicks\")?.setAttribute(\"cy\", cY);\r\n                    document.getElementById(\"leading-circle-impr\")?.setAttribute(\"cy\", iY);\r\n                }\r\n\r\n                if(progress < 1) requestAnimationFrame(animate);\r\n            }\r\n            requestAnimationFrame(animate);\r\n\r\n            const btnReplay = document.getElementById(\"btn-replay\");\r\n            if(btnReplay) btnReplay.addEventListener('click', () => { \r\n                progress = 0; \r\n                document.getElementById(\"milestone-marker\").style.opacity = 0;\r\n                animate(); \r\n            });\r\n        })();\r\n\r\n        \/\/ Testimonial Carousel - Senior Designer Center-Focus Upgrade\r\n        (function() {\r\n            const track = document.getElementById('carousel-track');\r\n            const nextBtn = document.getElementById('carousel-next');\r\n            const prevBtn = document.getElementById('carousel-prev');\r\n            if(!track || !nextBtn || !prevBtn) return;\r\n\r\n            const items = track.querySelectorAll('.carousel-item');\r\n            let activeIdx = 1; \/\/ Start with the second item centered\r\n            \r\n            \/\/ Drag states\r\n            let isDragging = false;\r\n            let startPos = 0;\r\n            let currentTranslate = 0;\r\n            let prevTranslate = 0;\r\n            let animationID = 0;\r\n\r\n            function updateCarousel() {\r\n                if (items.length === 0) return;\r\n\r\n                \/\/ Center the active item mathematically\r\n                const trackRect = track.parentElement.getBoundingClientRect();\r\n                const itemWidth = items[0].offsetWidth;\r\n                \r\n                \/\/ Track center offset\r\n                const centerOffset = (trackRect.width \/ 2) - (itemWidth \/ 2);\r\n                \r\n                \/\/ Execute translation\r\n                const translateX = (activeIdx * itemWidth) - centerOffset;\r\n                track.style.transform = `translateX(-${translateX}px)`;\r\n                prevTranslate = -translateX;\r\n\r\n                \/\/ Update visual states\r\n                items.forEach((item, i) => {\r\n                    const card = item.querySelector('.testi-card');\r\n                    const avatar = item.querySelector('.testi-avatar');\r\n                    \r\n                    if(i === activeIdx) {\r\n                        \/\/ Active State\r\n                        card.classList.add('scale-100', 'opacity-100', 'shadow-[0_20px_60px_-15px_rgba(131,56,236,0.2)]', 'border-purple-200', 'z-10');\r\n                        card.classList.remove('scale-90', 'opacity-40', 'z-0', 'cursor-pointer', 'hover:opacity-70');\r\n                        avatar.classList.add('ring-4', 'ring-purple-100', 'bg-white', 'text-[#8338EC]');\r\n                        avatar.classList.remove('bg-slate-100', 'text-slate-500');\r\n                    } else {\r\n                        \/\/ Inactive State\r\n                        card.classList.remove('scale-100', 'opacity-100', 'shadow-[0_20px_60px_-15px_rgba(131,56,236,0.2)]', 'border-purple-200', 'z-10');\r\n                        card.classList.add('scale-90', 'opacity-40', 'z-0', 'cursor-pointer', 'hover:opacity-70');\r\n                        avatar.classList.remove('ring-4', 'ring-purple-100', 'bg-white', 'text-[#8338EC]');\r\n                        avatar.classList.add('bg-slate-100', 'text-slate-500');\r\n                    }\r\n                });\r\n            }\r\n\r\n            nextBtn.addEventListener('click', () => { \r\n                if(activeIdx < items.length - 1) { activeIdx++; updateCarousel(); }\r\n            });\r\n            \r\n            prevBtn.addEventListener('click', () => { \r\n                if(activeIdx > 0) { activeIdx--; updateCarousel(); }\r\n            });\r\n\r\n            \/\/ Click an inactive item to snap it to center\r\n            items.forEach((item, i) => {\r\n                item.addEventListener('click', () => {\r\n                    if(i !== activeIdx) {\r\n                        activeIdx = i;\r\n                        updateCarousel();\r\n                    }\r\n                });\r\n            });\r\n\r\n            window.addEventListener('resize', updateCarousel);\r\n            setTimeout(updateCarousel, 100); \/\/ Trigger calculation on load\r\n            \r\n            \/\/ Basic drag support for UX polish\r\n            track.addEventListener('mousedown', dragStart);\r\n            track.addEventListener('touchstart', dragStart, {passive: true});\r\n            track.addEventListener('mouseup', dragEnd);\r\n            track.addEventListener('mouseleave', dragEnd);\r\n            track.addEventListener('touchend', dragEnd);\r\n            track.addEventListener('mousemove', drag);\r\n            track.addEventListener('touchmove', drag, {passive: true});\r\n\r\n            function dragStart(e) {\r\n                isDragging = true;\r\n                startPos = getPositionX(e);\r\n                track.style.transition = 'none';\r\n                cancelAnimationFrame(animationID);\r\n            }\r\n\r\n            function drag(e) {\r\n                if(isDragging) {\r\n                    const currentPosition = getPositionX(e);\r\n                    currentTranslate = prevTranslate + currentPosition - startPos;\r\n                    track.style.transform = `translateX(${currentTranslate}px)`;\r\n                }\r\n            }\r\n\r\n            function dragEnd() {\r\n                isDragging = false;\r\n                track.style.transition = 'transform 0.7s cubic-bezier(0.25, 1, 0.5, 1)';\r\n                \r\n                const movedBy = currentTranslate - prevTranslate;\r\n                const itemWidth = items[0].offsetWidth;\r\n                \r\n                \/\/ If dragged enough, snap to next\/prev\r\n                if (movedBy < -100 && activeIdx < items.length - 1) activeIdx++;\r\n                else if (movedBy > 100 && activeIdx > 0) activeIdx--;\r\n                \r\n                updateCarousel();\r\n            }\r\n\r\n            function getPositionX(event) {\r\n                return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;\r\n            }\r\n        })();\r\n\r\n        \/\/ Scroll Animations\r\n        const revealObserver = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(e => {\r\n                if (e.isIntersecting) {\r\n                    e.target.classList.add('in-view');\r\n                    obs.unobserve(e.target);\r\n                }\r\n            });\r\n        }, { threshold: 0.1 });\r\n        document.querySelectorAll('.reveal-node').forEach(el => revealObserver.observe(el));\r\n    <\/script>\r\n<\/div>\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>Wallaby Digital Design &bull; SEO &bull; Growth Portfolio Services Team Reviews info@wallabydigital.com Get Proposal Engineered for Aussie Trades Websites that turn trade traffic into booked jobs. We don\u2019t build generic brochures. We engineer conversion-optimized websites and local SEO systems that turn Google searches into commercial contracts. View Trade Portfolio +340% GSC Clicks #1 Rank Map [&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-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":28,"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/wallabydigital.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}