{"id":14292,"date":"2025-10-17T10:36:13","date_gmt":"2025-10-17T10:36:13","guid":{"rendered":"https:\/\/thedunesagency.com\/?page_id=14292"},"modified":"2025-10-17T21:08:23","modified_gmt":"2025-10-17T21:08:23","slug":"home-new","status":"publish","type":"page","link":"https:\/\/thedunesagency.com\/fr\/home-new\/","title":{"rendered":"Home – New"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n The Dunes \u2014 Digital Marketing Agency<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.3.11\/dist\/lenis.min.js\"><\/script>\r\n <link\r\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.3.11\/dist\/lenis.min.css\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;800&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n\r\n <style>\r\n @font-face {\r\n font-family: \"PPSupplyMono\";\r\n src: url(\"https:\/\/assets.codepen.io\/7558\/PPSupplyMono-Regular.ttf\")\r\n format(\"truetype\");\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n\r\n :root {\r\n --font-primary: \"PPSupplyMono\", \"Courier New\", monospace;\r\n\r\n --brand-black: #0a0a0a;\r\n --brand-cream: #fff6ee;\r\n\r\n --brand-orange-600: #e65c00;\r\n --brand-orange-500: #ff6a00;\r\n --brand-orange-400: #ff7a1a;\r\n --brand-orange-300: #ffa04a;\r\n\r\n --text-color: rgba(250, 248, 246, 0.94);\r\n --warm-off-black: #1a1917;\r\n --warm-off-white: #f8f5f2;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n height: 100%;\r\n }\r\n\r\n body {\r\n background: var(--brand-black);\r\n font-family: var(--font-primary);\r\n width: 100vw;\r\n height: 700vh;\r\n overflow-x: hidden;\r\n text-transform: uppercase;\r\n font-size: 11px;\r\n color: var(--text-color);\r\n line-height: 1.2;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body::before {\r\n content: \"\";\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: url(\"https:\/\/assets.codepen.io\/7558\/noise-002.png\");\r\n background-repeat: repeat;\r\n opacity: 0.1;\r\n z-index: 1000;\r\n pointer-events: none;\r\n\r\n filter: sepia(0.45) hue-rotate(-30deg) saturate(150%);\r\n }\r\n\r\n .loading-active {\r\n overflow: hidden !important;\r\n }\r\n\r\n .audio-enable {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: var(--brand-black);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 2000;\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n color: var(--text-color);\r\n text-transform: uppercase;\r\n gap: 2rem;\r\n text-align: center;\r\n padding: 1rem;\r\n }\r\n\r\n .enable-button {\r\n border: 1px solid var(--brand-orange-500);\r\n background: transparent;\r\n color: var(--brand-orange-300);\r\n padding: 1rem 2rem;\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n letter-spacing: 0.1em;\r\n transition: all 0.3s ease;\r\n }\r\n .enable-button:hover {\r\n background: var(--brand-orange-500);\r\n color: var(--brand-black);\r\n box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18);\r\n }\r\n\r\n .preloader {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: var(--brand-black);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 2000;\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n color: var(--text-color);\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .site-header {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 80px;\r\n background: transparent;\r\n z-index: 1101;\r\n padding: 0;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .header-container {\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n gap: 1rem;\r\n align-items: center;\r\n padding: 0 2rem;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .logo-container {\r\n grid-column: 1 \/ 3;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n height: 2rem;\r\n }\r\n\r\n .logo-circles {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .circle {\r\n position: absolute;\r\n border-radius: 50%;\r\n transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);\r\n width: 1.8rem;\r\n height: 1.8rem;\r\n top: 50%;\r\n\r\n background: radial-gradient(\r\n circle at 30% 30%,\r\n var(--brand-orange-400),\r\n var(--brand-orange-600) 70%\r\n );\r\n box-shadow: 0 0 10px 0 rgba(255, 106, 0, 0.35);\r\n }\r\n\r\n .circle-1 {\r\n left: 0;\r\n transform: translate(0, -50%);\r\n }\r\n\r\n .circle-2 {\r\n left: 1rem;\r\n transform: translate(0, -50%);\r\n mix-blend-mode: exclusion;\r\n }\r\n\r\n .logo-container:hover .circle-1 {\r\n transform: translate(-0.5rem, -50%);\r\n box-shadow: 0 0 16px 2px rgba(255, 106, 0, 0.45);\r\n }\r\n\r\n .logo-container:hover .circle-2 {\r\n transform: translate(0.5rem, -50%);\r\n box-shadow: 0 0 16px 2px rgba(255, 106, 0, 0.45);\r\n }\r\n\r\n .main-nav {\r\n grid-column: 4 \/ 8;\r\n }\r\n\r\n .main-nav ul {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* Utility: hidden by default, shown on mobile *\/\r\n .mobile-only {\r\n display: none;\r\n }\r\n\r\n .main-nav li {\r\n position: relative;\r\n }\r\n\r\n .main-nav a {\r\n color: var(--text-color);\r\n text-decoration: none;\r\n font-size: 12px;\r\n font-family: var(--font-primary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n display: block;\r\n position: relative;\r\n padding-left: 8px;\r\n transition: color 0.2s ease, text-shadow 0.2s ease;\r\n }\r\n .main-nav a:hover,\r\n .main-nav a.active {\r\n color: var(--brand-orange-300);\r\n text-shadow: 0 0 0.4rem rgba(255, 106, 0, 0.35);\r\n }\r\n\r\n .nav-hover-square {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n width: 4px;\r\n height: 4px;\r\n background: var(--brand-orange-400);\r\n transform: translateY(-50%) scaleX(0);\r\n transform-origin: left center;\r\n }\r\n\r\n .contact-link {\r\n grid-column: 9 \/ 13;\r\n text-align: right;\r\n }\r\n\r\n .contact-link a {\r\n color: var(--brand-orange-300);\r\n text-decoration: none;\r\n font-size: 12px;\r\n font-family: var(--font-primary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n transition: opacity 0.3s ease, text-shadow 0.3s ease;\r\n }\r\n .contact-link a:hover {\r\n opacity: 1;\r\n text-shadow: 0 0 0.5rem rgba(255, 106, 0, 0.35);\r\n }\r\n\r\n .section {\r\n height: 200vh;\r\n position: relative;\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n background-repeat: no-repeat;\r\n margin: 0;\r\n padding: 0;\r\n display: block;\r\n border: none;\r\n outline: none;\r\n vertical-align: top;\r\n line-height: 0;\r\n font-size: 11px;\r\n float: left;\r\n width: 100%;\r\n clear: both;\r\n\r\n isolation: isolate;\r\n }\r\n .section::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 1;\r\n\r\n background: radial-gradient(\r\n 1200px 600px at 70% 30%,\r\n rgba(255, 106, 0, 0.1),\r\n transparent 60%\r\n ),\r\n linear-gradient(\r\n to bottom,\r\n rgba(10, 10, 10, 0),\r\n rgba(10, 10, 10, 0.45) 80%,\r\n rgba(10, 10, 10, 0.65) 100%\r\n );\r\n mix-blend-mode: screen;\r\n }\r\n .section .section-content {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .section-1 {\r\n background-image: url(\"https:\/\/images.unsplash.com\/photo-1448346325971-67fa7313079a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1159\");\r\n }\r\n\r\n .section-2 {\r\n background-image: url(\"https:\/\/images.unsplash.com\/photo-1548272475-4a32d90e4f91?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170\");\r\n }\r\n\r\n .section-3 {\r\n background-image: url(\"https:\/\/images.unsplash.com\/photo-1708748513828-2227f6d39c04?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\");\r\n }\r\n\r\n .section-4 {\r\n background-image: url(\"https:\/\/images.unsplash.com\/photo-1505598872760-6090aa9ed603?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170\");\r\n isolation: auto;\r\n }\r\n\r\n .section-4 .section-content {\r\n z-index: 120;\r\n }\r\n\r\n .contact-wrap {\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2rem;\r\n }\r\n .contact-card {\r\n width: min(860px, 92vw);\r\n background: rgba(10, 10, 10, 0.65);\r\n border: 1px solid rgba(255, 106, 0, 0.35);\r\n box-shadow: 0 0 40px rgba(255, 106, 0, 0.12),\r\n inset 0 0 0 1px rgba(255, 106, 0, 0.15);\r\n padding: 2rem;\r\n border-radius: 8px;\r\n backdrop-filter: blur(6px);\r\n position: relative;\r\n z-index: 200;\r\n }\r\n .contact-title {\r\n color: var(--brand-orange-300);\r\n letter-spacing: 0.2em;\r\n margin-bottom: 1.25rem;\r\n font-size: 12px;\r\n }\r\n .contact-sub {\r\n color: rgba(255, 246, 238, 0.8);\r\n margin-bottom: 2rem;\r\n font-size: 11px;\r\n line-height: 1.4;\r\n text-transform: uppercase;\r\n }\r\n .contact-form {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1rem 1.25rem;\r\n }\r\n .contact-form .full {\r\n grid-column: 1 \/ -1;\r\n }\r\n .form-label {\r\n display: block;\r\n margin-bottom: 0.35rem;\r\n color: rgba(255, 246, 238, 0.85);\r\n letter-spacing: 0.12em;\r\n font-size: 10px;\r\n }\r\n .form-input,\r\n .form-textarea {\r\n width: 100%;\r\n padding: 0.9rem 1rem;\r\n background: rgba(0, 0, 0, 0.35);\r\n border: 1px solid rgba(255, 106, 0, 0.35);\r\n color: var(--text-color);\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n line-height: 1.4;\r\n letter-spacing: 0.05em;\r\n transition: border-color 0.2s ease, box-shadow 0.2s ease,\r\n background 0.2s ease;\r\n }\r\n .form-input::placeholder,\r\n .form-textarea::placeholder {\r\n color: rgba(255, 246, 238, 0.55);\r\n }\r\n .form-input:focus,\r\n .form-textarea:focus {\r\n outline: none;\r\n border-color: var(--brand-orange-500);\r\n box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.2);\r\n background: rgba(0, 0, 0, 0.45);\r\n }\r\n .form-textarea {\r\n min-height: 140px;\r\n resize: vertical;\r\n }\r\n .contact-actions {\r\n grid-column: 1 \/ -1;\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: flex-end;\r\n margin-top: 0.5rem;\r\n }\r\n .submit-button {\r\n border: 1px solid var(--brand-orange-500);\r\n background: transparent;\r\n color: var(--brand-orange-300);\r\n padding: 0.9rem 1.6rem;\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n letter-spacing: 0.12em;\r\n transition: all 0.25s ease;\r\n }\r\n .submit-button:hover {\r\n background: var(--brand-orange-500);\r\n color: var(--brand-black);\r\n box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18);\r\n }\r\n .contact-form input,\r\n .contact-form textarea {\r\n text-transform: none;\r\n }\r\n\r\n .form-note {\r\n margin-right: auto;\r\n align-self: center;\r\n font-size: 10px;\r\n letter-spacing: 0.12em;\r\n color: rgba(255, 246, 238, 0.75);\r\n }\r\n .form-note.success {\r\n color: var(--brand-orange-300);\r\n }\r\n .form-note.error {\r\n color: #ff9a9a;\r\n }\r\n .form-note.info {\r\n color: rgba(255, 246, 238, 0.7);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .logo-container {\r\n padding-left: 60px;\r\n }\r\n .contact-form {\r\n grid-template-columns: 1fr;\r\n }\r\n .contact-card {\r\n padding: 1.25rem;\r\n }\r\n }\r\n\r\n .geometric-background {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: calc(100dvw - var(--scrollbar-width, 0px));\r\n height: 100vh;\r\n z-index: 50;\r\n pointer-events: none;\r\n }\r\n\r\n .geometric-svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .grid-line {\r\n stroke: rgba(255, 106, 0, 0.22);\r\n stroke-width: 1;\r\n stroke-opacity: 0.3;\r\n shape-rendering: crispEdges;\r\n }\r\n\r\n .circle-outline {\r\n stroke: rgba(255, 122, 26, 0.55);\r\n stroke-width: 1;\r\n fill: none;\r\n vector-effect: non-scaling-stroke;\r\n }\r\n\r\n .circle-filled {\r\n stroke: rgba(255, 122, 26, 0.35);\r\n stroke-width: 1;\r\n fill: rgba(255, 122, 26, 0.07);\r\n vector-effect: non-scaling-stroke;\r\n }\r\n\r\n .geometric-text {\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n fill: rgba(255, 246, 238, 0.75);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .center-circle {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center;\r\n z-index: 60;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .circle-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .glowing-circle {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n box-shadow: none;\r\n position: relative;\r\n\r\n \/* make core orange while JS keeps animating yellow glow;\r\n filter shifts the yellow shadow toward orange without touching JS *\/\r\n background: radial-gradient(\r\n circle at 50% 50%,\r\n var(--brand-orange-300) 0%,\r\n var(--brand-orange-500) 55%,\r\n var(--brand-orange-600) 100%\r\n );\r\n filter: hue-rotate(-30deg) saturate(120%);\r\n }\r\n\r\n .section-content {\r\n position: relative;\r\n z-index: 2;\r\n height: 100%;\r\n padding: 2rem;\r\n }\r\n\r\n .gradient-reveal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 500vh;\r\n background: linear-gradient(\r\n to bottom,\r\n #000000 0%,\r\n #000000 20%,\r\n rgba(0, 0, 0, 0.8) 40%,\r\n rgba(0, 0, 0, 0.4) 70%,\r\n transparent 100%\r\n );\r\n z-index: 1500;\r\n pointer-events: none;\r\n transform: translateY(0);\r\n }\r\n\r\n .site-footer {\r\n position: relative;\r\n width: 100%;\r\n\r\n background: var(--brand-black);\r\n z-index: 10;\r\n margin-top: 0;\r\n clear: both;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 2rem;\r\n }\r\n\r\n .footer-content-section,\r\n .footer-svg-section {\r\n width: 100%;\r\n }\r\n\r\n .footer-content-section {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n }\r\n\r\n .footer-content {\r\n display: flex;\r\n justify-content: space-between;\r\n width: 100%;\r\n align-items: flex-start;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .footer-left,\r\n .footer-right {\r\n font-family: var(--font-primary);\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n color: var(--text-color);\r\n line-height: 1.2;\r\n }\r\n\r\n .footer-left {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.15rem;\r\n }\r\n\r\n .footer-right {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.15rem;\r\n text-align: right;\r\n max-width: 40%;\r\n }\r\n\r\n .footer-svg {\r\n width: 100%;\r\n height: auto;\r\n max-width: none;\r\n }\r\n\r\n .footer-credits {\r\n font-family: var(--font-primary);\r\n font-size: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.7em;\r\n color: rgba(255, 246, 238, 0.6);\r\n text-align: left;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .footer-credits a {\r\n color: var(--brand-orange-300);\r\n text-decoration: none;\r\n transition: opacity 0.3s ease, text-shadow 0.3s ease;\r\n }\r\n .footer-credits a:hover {\r\n opacity: 1;\r\n text-shadow: 0 0 0.45rem rgba(255, 106, 0, 0.35);\r\n }\r\n\r\n .footer-bottom {\r\n width: 100%;\r\n text-align: center;\r\n font-family: var(--font-primary);\r\n font-size: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5em;\r\n color: rgba(255, 246, 238, 0.6);\r\n margin-top: 0.5rem;\r\n }\r\n\r\n a:focus-visible,\r\n button:focus-visible {\r\n outline: 2px solid var(--brand-orange-500);\r\n outline-offset: 2px;\r\n box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.22);\r\n }\r\n ::selection {\r\n background: rgba(255, 106, 0, 0.35);\r\n color: #0b0b0b;\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .geometric-text.text-top-right,\r\n .geometric-text.text-bottom-right {\r\n display: none;\r\n }\r\n\r\n .glowing-circle {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n\r\n .footer-right {\r\n max-width: 50%;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .header-container {\r\n grid-template-columns: auto 1fr auto;\r\n gap: 1rem;\r\n padding: 0 1rem;\r\n }\r\n\r\n .logo-container {\r\n grid-column: 1;\r\n justify-self: start;\r\n }\r\n\r\n .main-nav {\r\n grid-column: 2;\r\n justify-self: center;\r\n }\r\n\r\n .main-nav ul {\r\n gap: 1rem;\r\n justify-content: center;\r\n }\r\n\r\n .main-nav a {\r\n font-size: 10px;\r\n }\r\n .main-nav a:hover,\r\n .main-nav a.active {\r\n color: var(--brand-orange-400);\r\n }\r\n\r\n .contact-link {\r\n grid-column: 3;\r\n text-align: right;\r\n }\r\n\r\n .contact-link a {\r\n font-size: 10px;\r\n }\r\n\r\n .geometric-text.text-top-right,\r\n .geometric-text.text-bottom-right {\r\n display: none;\r\n }\r\n\r\n .geometric-text.text-bottom-left {\r\n font-size: 10px;\r\n }\r\n\r\n .glowing-circle {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n\r\n .section {\r\n background-attachment: scroll;\r\n }\r\n\r\n .footer-content {\r\n flex-direction: column;\r\n gap: 2rem;\r\n text-align: left;\r\n }\r\n\r\n .footer-right {\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n\r\n .footer-credits {\r\n text-align: center;\r\n letter-spacing: 0.3em;\r\n }\r\n\r\n .site-footer {\r\n padding: 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .header-container {\r\n grid-template-columns: 1fr;\r\n grid-template-rows: auto auto;\r\n gap: 0.5rem;\r\n text-align: center;\r\n }\r\n\r\n .logo-container {\r\n grid-column: 1;\r\n grid-row: 1;\r\n justify-self: center;\r\n }\r\n\r\n .main-nav {\r\n grid-column: 1;\r\n grid-row: 2;\r\n justify-self: center;\r\n }\r\n\r\n .main-nav ul {\r\n gap: 0.8rem;\r\n }\r\n\r\n .main-nav a {\r\n font-size: 9px;\r\n }\r\n\r\n .contact-link {\r\n display: none;\r\n }\r\n\r\n \/* Show the in-menu +CONNECT on mobile *\/\r\n .mobile-only {\r\n display: block;\r\n }\r\n\r\n .site-header {\r\n height: 100px;\r\n }\r\n\r\n .geometric-text.text-top-left {\r\n font-size: 9px;\r\n }\r\n\r\n .geometric-text.text-bottom-left {\r\n font-size: 8px;\r\n }\r\n\r\n .glowing-circle {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n\r\n .footer-left,\r\n .footer-right {\r\n font-size: 10px;\r\n }\r\n\r\n .footer-credits {\r\n font-size: 8px;\r\n letter-spacing: 0.2em;\r\n }\r\n\r\n .section-content {\r\n padding: 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 320px) {\r\n .main-nav ul {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .glowing-circle {\r\n width: 35px;\r\n height: 35px;\r\n }\r\n\r\n .footer-left,\r\n .footer-right {\r\n font-size: 9px;\r\n }\r\n }\r\n\r\n \/* Responsive SVG text sizing *\/\r\n @media (max-width: 460px) {\r\n .geometric-text {\r\n font-size: 12dvw;\r\n }\r\n }\r\n @media (min-width: 460px) and (max-width: 768px) {\r\n .geometric-text {\r\n font-size: 8dvw;\r\n }\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <header class=\"site-header\">\r\n <div class=\"header-container\">\r\n <div class=\"logo-container\">\r\n <div class=\"logo-circles\">\r\n <svg\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n width=\"164\"\r\n height=\"40\"\r\n viewbox=\"0 0 10 50\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M33.9268 6.65161C30.3024 3.02721 25.4493 1 20.2892 1C15.129 1 10.276 3.02721 6.65161 6.65161C3.64152 9.6617 1.79859 13.409 1.18428 17.5248C1.06142 18.262 1 19.0606 1 19.7977C1 19.982 1 20.1049 1 20.2892C1 20.412 1 20.5349 1 20.6578C1 21.0263 1 21.3949 1.06143 21.8249C1.43002 26.3708 3.3958 30.6709 6.65161 33.9268C8.4331 35.7082 10.5832 37.1211 12.8561 38.104C13.2861 38.2883 13.7161 38.4112 14.1461 38.5955C16.1119 39.2712 18.1391 39.5784 20.2892 39.5784C24.5279 39.5784 28.5209 38.2269 31.8381 35.7082C32.0224 35.5854 32.2067 35.4625 32.391 35.2782C32.9439 34.8482 33.4353 34.4182 33.9268 33.9268C37.244 30.6095 39.2098 26.3094 39.5169 21.6407C39.5169 21.4564 39.5169 21.2721 39.5784 21.0878C39.5784 20.8421 39.5784 20.5963 39.5784 20.2892C39.5784 15.129 37.5512 10.276 33.9268 6.65161ZM7.08162 33.5582C4.07152 30.5481 2.22862 26.7394 1.73717 22.6235C1.67574 22.3164 1.67574 22.0092 1.67574 21.6407V21.7021C1.98289 22.4393 2.4129 23.0536 2.78148 23.545C3.33436 24.1593 3.88724 24.6508 4.50155 25.0193C6.46732 26.3094 9.23169 26.9851 12.4261 26.9851C12.7332 26.9851 13.0404 26.9851 13.409 26.9851C15.6819 26.8622 18.0777 26.4322 20.4735 25.6951C20.7192 25.6336 20.9649 25.5722 21.1492 25.4493C22.3164 25.0808 23.4836 24.5893 24.6507 24.0979C24.5279 24.2822 24.405 24.405 24.3436 24.5893C24.1593 24.9579 23.6064 25.9408 24.0364 26.6165C24.1593 26.7394 24.2822 26.8622 24.4665 26.9851C24.6508 27.108 24.835 27.1694 25.0193 27.2308C25.3265 27.3537 25.5108 27.4151 25.6951 27.4151C25.7565 27.4151 25.8179 27.4151 25.8794 27.4766C26.3708 27.5994 26.8008 27.7837 27.108 28.0294C27.1694 28.0909 27.2923 28.1523 27.3537 28.2137C27.8451 28.7666 27.7223 29.6881 27.6608 30.1181V30.1795C27.538 31.0395 27.108 31.5924 26.6779 32.1453C25.4493 33.6196 24.405 34.8482 22.3778 36.0154C20.412 37.1211 18.692 37.4897 17.3405 37.7355C16.4191 37.9197 15.4362 38.0426 14.5147 38.104C11.566 37.1211 9.10882 35.5854 7.08162 33.5582ZM17.6477 20.9649C17.5248 21.1492 17.402 21.3949 17.3405 21.7635C17.1562 22.7464 17.9548 23.6064 18.4463 24.1593C18.8148 24.5893 19.3063 24.9579 19.7977 25.3265C17.5862 25.9408 15.4362 26.3708 13.3475 26.4322C9.90743 26.5551 6.83591 25.9408 4.8087 24.5893C4.62441 24.4665 4.4401 24.3436 4.25581 24.2207C4.74725 24.3436 5.36157 24.405 6.03731 24.405H6.09873C8.55595 24.405 10.5217 23.545 11.3818 23.1764C11.566 23.115 11.6889 23.0536 11.7503 23.0536C12.6718 22.8078 13.5318 22.4393 14.4533 22.0092C15.559 21.5792 16.6648 21.0878 17.832 20.7806C17.7705 20.7806 17.7091 20.9035 17.6477 20.9649ZM18.0777 21.2721C18.262 21.0263 18.5077 20.7806 18.7534 20.5349C19.1834 20.4735 19.6134 20.412 20.0435 20.412C22.0707 20.3506 24.1593 20.9649 26.3708 22.3164C26.4322 22.3778 26.4937 22.3778 26.5551 22.4393C26.2479 22.6235 25.8794 22.7464 25.5722 22.9307C25.5722 22.9307 25.5108 22.9307 25.5108 22.9921C23.8521 23.8522 22.1321 24.5279 20.412 25.0808C19.7977 24.7122 19.2449 24.2822 18.8148 23.7907C18.3848 23.2993 17.7091 22.6235 17.832 21.8249C17.832 21.5792 17.9548 21.3949 18.0777 21.2721ZM20.2892 39.0255C18.692 39.0255 17.0948 38.8412 15.559 38.4112C16.1119 38.3498 16.6648 38.2883 17.1562 38.1655C18.5691 37.8583 20.3506 37.5512 22.3778 36.384C24.4664 35.1554 25.6336 33.8039 26.8008 32.391C27.2923 31.7767 27.7837 31.1624 27.9066 30.1795V30.1181C27.968 29.7495 28.0909 29.0737 27.8451 28.398H27.9066C29.6266 29.3809 30.9167 31.0395 31.531 33.1282C31.7153 33.8039 31.8381 34.4182 31.8381 35.0325C28.5823 37.6126 24.5893 39.0255 20.2892 39.0255ZM33.5582 33.5582C33.1896 33.9268 32.7596 34.2953 32.3296 34.6639C32.2681 34.111 32.1453 33.5582 32.0224 33.0053C31.3467 30.7938 29.9952 29.0737 28.1523 28.0294C27.7837 27.8451 27.4766 27.6608 27.108 27.538C26.678 27.2308 26.0636 27.0465 25.7565 26.9237C25.6951 26.9237 25.6336 26.9237 25.5722 26.8622C25.3879 26.8008 25.2036 26.8008 24.9579 26.678C24.6507 26.5551 24.3436 26.4322 24.2207 26.2479C24.0364 26.0022 24.1593 25.5108 24.5893 24.7736C24.835 24.2822 25.265 23.8522 25.8179 23.4221C26.2479 23.2378 26.6165 22.9921 27.0465 22.8078C27.2308 22.7464 27.4151 22.6235 27.5994 22.5621C29.5038 21.6407 31.2238 20.9649 33.0053 20.5963C35.2168 20.1663 37.1211 20.412 38.9641 21.3949C38.7798 25.9408 36.8754 30.2409 33.5582 33.5582ZM32.9439 20.0435C31.7153 20.2892 30.4866 20.7192 29.1966 21.2106C28.6437 21.5178 27.968 21.8864 27.3537 22.255C27.2923 22.1935 27.2308 22.1935 27.1694 22.1321C27.0465 22.0707 26.9851 22.0092 26.8622 21.9478C24.4665 20.4735 22.255 19.7977 20.0435 19.8592C19.8592 19.8592 19.7363 19.8592 19.552 19.8592C19.1834 19.8592 18.8763 19.9206 18.5691 19.982C17.0334 20.2278 15.6205 20.8421 14.269 21.3949C13.3475 21.7635 12.4875 22.1321 11.6275 22.3778C11.5046 22.3778 11.3818 22.4393 11.1975 22.5621C10.276 22.9307 8.43308 23.7293 6.09873 23.7293C4.99298 23.7293 4.31725 23.545 4.07153 23.4836C3.76437 23.3607 3.45722 23.2378 3.2115 23.0536C2.78149 22.5621 2.47433 21.9478 2.16718 21.2721C1.98288 20.7806 1.7986 20.2278 1.67574 19.6749C1.7986 14.8833 3.76437 10.3374 7.14305 6.89733C10.706 3.33436 15.3747 1.43001 20.412 1.43001C25.4493 1.43001 30.1181 3.39579 33.681 6.89733C37.244 10.4603 39.1484 15.129 39.1484 20.1663C39.1484 20.3506 39.1484 20.5349 39.1484 20.6578C37.1826 19.8592 35.1554 19.6134 32.9439 20.0435Z\"\r\n fill=\"black\"\r\n stroke=\"black\"\r\n stroke-width=\"0.3762\"\r\n stroke-miterlimit=\"10\"\r\n ><\/path>\r\n <path\r\n d=\"M29.1966 21.272C28.6438 21.5791 27.968 21.9477 27.3537 22.3163C27.2923 22.2549 27.2309 22.2549 27.1694 22.1934C27.8452 21.8863 28.5209 21.5177 29.1966 21.272Z\"\r\n fill=\"black\"\r\n ><\/path>\r\n <path\r\n d=\"M13.7773 13.3476C11.8115 13.3476 10.2144 11.7504 10.2144 9.78465C10.2144 7.81887 11.8115 6.22168 13.7773 6.22168C14.4531 6.22168 15.0674 6.40597 15.6202 6.71312L16.4188 7.20457H15.4974C13.9002 7.20457 12.6101 8.37175 12.6101 9.84608C12.6101 11.1975 13.7773 12.3033 15.3131 12.4262L16.1731 12.4876L15.3745 12.9176C14.8831 13.2248 14.3302 13.3476 13.7773 13.3476ZM13.7773 6.77455C12.1187 6.77455 10.7672 8.12603 10.7672 9.78465C10.7672 11.4433 12.1187 12.7947 13.7773 12.7947C13.9616 12.7947 14.1459 12.7947 14.3302 12.7333C12.9787 12.3033 12.0573 11.1361 12.0573 9.78465C12.0573 8.37175 13.0402 7.14314 14.4531 6.77455C14.2688 6.83598 14.023 6.77455 13.7773 6.77455Z\"\r\n fill=\"black\"\r\n ><\/path>\r\n <path\r\n d=\"M26.1251 5.60666C25.9408 5.66809 25.7565 5.66809 25.5723 5.72952C25.1422 5.79095 24.8351 6.0981 24.8351 6.46668C24.8351 6.65097 24.7737 6.83527 24.7122 6.95813C24.6508 6.77384 24.6508 6.58955 24.5894 6.40525C24.5279 6.03667 24.2208 5.66809 23.8522 5.66809C23.6679 5.66809 23.4836 5.60666 23.2993 5.54523C23.4836 5.4838 23.6679 5.4838 23.8522 5.42237C24.2208 5.36094 24.5894 5.05378 24.5894 4.6852C24.5894 4.50091 24.6508 4.31662 24.7122 4.13232C24.7737 4.31662 24.7736 4.50091 24.8351 4.6852C24.8965 5.05378 25.2037 5.42237 25.5723 5.42237C25.7565 5.54523 25.9408 5.60666 26.1251 5.60666Z\"\r\n fill=\"black\"\r\n ><\/path>\r\n <\/svg>\r\n <div class=\"circle circle-1\"><\/div>\r\n <div class=\"circle circle-2\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <nav class=\"main-nav\">\r\n <ul>\r\n <li>\r\n <a href=\"#\" class=\"active\">CASE STUDIES<\/a>\r\n <div class=\"nav-hover-square\"><\/div>\r\n <\/li>\r\n <li>\r\n <a href=\"#\">ABOUT<\/a>\r\n <div class=\"nav-hover-square\"><\/div>\r\n <\/li>\r\n <li>\r\n <a href=\"#\">PERFORMANCE<\/a>\r\n <div class=\"nav-hover-square\"><\/div>\r\n <\/li>\r\n <li class=\"mobile-only\">\r\n <a href=\"#contact\">+CONNECT<\/a>\r\n <div class=\"nav-hover-square\"><\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <div class=\"contact-link\">\r\n <a href=\"#contact\">+CONNECT<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"gradient-reveal\"><\/div>\r\n\r\n <div class=\"audio-enable\">\r\n <p>ENTER DUNES<br \/>WITH AUDIO<\/p>\r\n <button class=\"enable-button\" id=\"enableBtn\">START<\/button>\r\n <\/div>\r\n\r\n <div class=\"preloader\" id=\"preloader\">\r\n <span id=\"counter\">[000]<\/span>\r\n <\/div>\r\n\r\n <div class=\"geometric-background\">\r\n <svg class=\"geometric-svg\" viewbox=\"0 0 1920 1080\">\r\n <g id=\"grid-lines\"><\/g>\r\n <g id=\"circles-outline\"><\/g>\r\n <g id=\"circles-filled\">\r\n <clippath id=\"right-half\">\r\n <rect x=\"960\" y=\"0\" width=\"960\" height=\"1080\" \/>\r\n <\/clippath>\r\n <g clip-path=\"url(#right-half)\"><\/g>\r\n <\/g>\r\n\r\n <text class=\"geometric-text\" id=\"labelDunes\" x=\"100\" y=\"100\">\r\n DUNES\r\n <\/text>\r\n <text class=\"geometric-text\" id=\"labelAgency\" x=\"100\" y=\"115\">\r\n AGENCY\r\n <\/text>\r\n\r\n <text class=\"geometric-text\" id=\"labelBrandSystems\" x=\"1720\" y=\"100\">\r\n BRAND SYSTEMS\r\n <\/text>\r\n <text class=\"geometric-text\" id=\"labelInMotion\" x=\"1720\" y=\"115\">\r\n IN MOTION\r\n <\/text>\r\n\r\n <text class=\"geometric-text\" x=\"100\" y=\"980\" id=\"debugLine1\">\r\n AWARENESS: LISTENING\r\n <\/text>\r\n <text class=\"geometric-text\" x=\"100\" y=\"995\" id=\"debugLine2\">\r\n STATE: ADAPTIVE\r\n <\/text>\r\n <text class=\"geometric-text\" x=\"100\" y=\"1010\" id=\"debugLine3\">\r\n ENERGY: COMPOUNDING\r\n <\/text>\r\n <text class=\"geometric-text\" x=\"100\" y=\"1025\" id=\"debugLine4\">\r\n PRESENCE: VISIBLE\r\n <\/text>\r\n\r\n <text class=\"geometric-text\" id=\"labelSignals\" x=\"1620\" y=\"980\">\r\n SIGNALS IN THE\r\n <\/text>\r\n <text class=\"geometric-text\" id=\"labelShiftingSands\" x=\"1620\" y=\"995\">\r\n SHIFTING SANDS\r\n <\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <audio id=\"startClickSound\" preload=\"auto\">\r\n <source\r\n src=\"https:\/\/assets.codepen.io\/7558\/preloader-2s-001.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <audio id=\"preloaderSound\" preload=\"auto\">\r\n <source\r\n src=\"https:\/\/assets.codepen.io\/7558\/preloader-5s-001.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <audio id=\"scrollSound1\" loop preload=\"auto\">\r\n <source\r\n src=\"https:\/\/assets.codepen.io\/7558\/glitch-fx-001.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <audio id=\"scrollSound2\" loop preload=\"auto\">\r\n <source\r\n src=\"https:\/\/assets.codepen.io\/7558\/glitch-fx-001.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <audio id=\"scrollSound3\" loop preload=\"auto\">\r\n <source\r\n src=\"https:\/\/assets.codepen.io\/7558\/glitch-fx-001.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <audio id=\"hoverSound\" preload=\"auto\">\r\n <source\r\n src=\"https:\/\/assets.codepen.io\/7558\/preloader-2s-001.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <audio id=\"backgroundMusic\" loop preload=\"auto\">\r\n <source\r\n src=\"https:\/\/thedunesagency.com\/wp-content\/uploads\/2025\/10\/Antarctic-Wastelands-Domy-Castellano-faintly-the-moon-rises-ambient-atmospheric-relaxing-NPwMp7fxBdk.mp3\"\r\n type=\"audio\/mpeg\"\r\n \/>\r\n <\/audio>\r\n\r\n <div class=\"center-circle\">\r\n <div class=\"circle-container\">\r\n <div class=\"glowing-circle\" id=\"glowCircle\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"section section-1\">\r\n <div class=\"section-content\"><\/div>\r\n <\/section>\r\n\r\n <section class=\"section section-2\">\r\n <div class=\"section-content\"><\/div>\r\n <\/section>\r\n\r\n <section class=\"section section-3\">\r\n <div class=\"section-content\"><\/div>\r\n <\/section>\r\n\r\n <section class=\"section section-4\" id=\"contact\">\r\n <div class=\"section-content\">\r\n <div class=\"contact-wrap\">\r\n <div\r\n class=\"contact-card\"\r\n role=\"region\"\r\n aria-labelledby=\"contact-title\"\r\n >\r\n <h2 id=\"contact-title\" class=\"contact-title\">\r\n START A CONVERSATION\r\n <\/h2>\r\n <p class=\"contact-sub\">\r\n Tell us about your brand, your market, and the momentum you want\r\n to create.\r\n <\/p>\r\n <form\r\n id=\"contactForm\"\r\n class=\"contact-form\"\r\n action=\"https:\/\/thedunesagency.com\/wp-json\/dunes\/v1\/contact\"\r\n method=\"POST\"\r\n novalidate\r\n data-trp-original-action=\"https:\/\/thedunesagency.com\/wp-json\/dunes\/v1\/contact\">\r\n <input type=\"hidden\" name=\"_subject\" value=\"DUNES CONTACT\" \/>\r\n <input type=\"hidden\" name=\"_captcha\" value=\"false\" \/>\r\n\r\n <input\r\n type=\"text\"\r\n name=\"website\"\r\n id=\"cf-website\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n style=\" position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; \"\r\n \/>\r\n\r\n <div>\r\n <label class=\"form-label\" for=\"cf-first\">FIRST NAME<\/label>\r\n <input\r\n class=\"form-input\"\r\n id=\"cf-first\"\r\n name=\"firstName\"\r\n type=\"text\"\r\n placeholder=\"First name\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"form-label\" for=\"cf-last\">LAST NAME<\/label>\r\n <input\r\n class=\"form-input\"\r\n id=\"cf-last\"\r\n name=\"lastName\"\r\n type=\"text\"\r\n placeholder=\"Last name\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"form-label\" for=\"cf-email\">EMAIL<\/label>\r\n <input\r\n class=\"form-input\"\r\n id=\"cf-email\"\r\n name=\"email\"\r\n type=\"email\"\r\n placeholder=\"you@example.com\"\r\n required\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"form-label\" for=\"cf-phone\">PHONE<\/label>\r\n <input\r\n class=\"form-input\"\r\n id=\"cf-phone\"\r\n name=\"phone\"\r\n type=\"tel\"\r\n placeholder=\"+1 555 123 4567\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"full\">\r\n <label class=\"form-label\" for=\"cf-company\">COMPANY NAME<\/label>\r\n <input\r\n class=\"form-input\"\r\n id=\"cf-company\"\r\n name=\"company\"\r\n type=\"text\"\r\n placeholder=\"Company or project\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"full\">\r\n <label class=\"form-label\" for=\"cf-message\">MESSAGE<\/label>\r\n <textarea\r\n class=\"form-textarea\"\r\n id=\"cf-message\"\r\n name=\"message\"\r\n placeholder=\"What are we building together?\"\r\n required\r\n><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"contact-actions\">\r\n <p\r\n id=\"formStatus\"\r\n class=\"form-note\"\r\n role=\"status\"\r\n aria-live=\"polite\"\r\n ><\/p>\r\n <button type=\"submit\" class=\"submit-button\" id=\"sendBtn\">\r\n SEND\r\n <\/button>\r\n <\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"site-footer\">\r\n <div class=\"footer-content-section\">\r\n <div class=\"footer-content\">\r\n <div class=\"footer-left\">\r\n <p>DUNES SHIFT<\/p>\r\n <p>WITH THE MARKET<\/p>\r\n <p>WE READ SIGNALS<\/p>\r\n <p>IN EVERY GRAIN<\/p>\r\n <p>TURN FRAGMENTS<\/p>\r\n <p>INTO TRACTION<\/p>\r\n <\/div>\r\n <div class=\"footer-right\">\r\n <p>STRATEGY MEETS CRAFT<\/p>\r\n <p>DATA SHAPES DIRECTION<\/p>\r\n <p>DESIGN BUILDS TRUST<\/p>\r\n <p>MEDIA DRIVES MOMENTUM<\/p>\r\n <p>LEARNING LOOPS FASTER<\/p>\r\n <p>GROWTH BECOMES HABIT<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-credits\">\r\n <p>\r\n <a\r\n href=\"https:\/\/www.facebook.com\/DunesAgency\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n >Facebook<\/a\r\n>\r\n  \u2022 \r\n <a\r\n href=\"https:\/\/www.instagram.com\/thedunesagency\/\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n >Instagram<\/a\r\n>\r\n  \u2022 \r\n <a\r\n href=\"https:\/\/ca.linkedin.com\/company\/dunes-agency\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n >LinkedIn<\/a\r\n>\r\n  \u2022 \r\n <a\r\n href=\"https:\/\/twitter.com\/dunesagency\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n >X<\/a\r\n>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-svg-section\">\r\n <img decoding=\"async\"\r\n class=\"footer-svg\"\r\n src=\"https:\/\/assets.codepen.io\/7558\/arrival-text.svg\"\r\n alt=\"\"\r\n \/>\r\n <\/div>\r\n <div class=\"footer-bottom\">The Dunes Agency Inc.<\/div>\r\n <\/footer>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"><\/script>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/Draggable.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/DrawSVGPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/EaselPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/Flip.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/GSDevTools.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/InertiaPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/MotionPathHelper.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/MotionPathPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/MorphSVGPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/Observer.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/Physics2DPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/PhysicsPropsPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/PixiPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrambleTextPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollSmoother.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollToPlugin.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/SplitText.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/TextPlugin.min.js\"><\/script>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/EasePack.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/CustomEase.min.js\"><\/script>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/CustomBounce.min.js\"><\/script>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/CustomWiggle.min.js\"><\/script>\r\n\r\n <script>\r\n \/* Keep CSS var in sync with scrollbar width for precise dvw calc *\/\r\n (function () {\r\n function updateScrollbarWidthVar() {\r\n const sbw = Math.max(\r\n 0,\r\n window.innerWidth - document.documentElement.clientWidth\r\n );\r\n document.documentElement.style.setProperty(\r\n \"--scrollbar-width\",\r\n sbw + \"px\"\r\n );\r\n }\r\n window.addEventListener(\"resize\", updateScrollbarWidthVar);\r\n updateScrollbarWidthVar();\r\n })();\r\n\r\n \/* Mobile (0-768) SVG text positions *\/\r\n (function () {\r\n const els = {\r\n dunes: document.getElementById(\"labelDunes\"),\r\n agency: document.getElementById(\"labelAgency\"),\r\n brand: document.getElementById(\"labelBrandSystems\"),\r\n motion: document.getElementById(\"labelInMotion\"),\r\n dbg1: document.getElementById(\"debugLine1\"),\r\n dbg2: document.getElementById(\"debugLine2\"),\r\n dbg3: document.getElementById(\"debugLine3\"),\r\n dbg4: document.getElementById(\"debugLine4\"),\r\n signals: document.getElementById(\"labelSignals\"),\r\n sands: document.getElementById(\"labelShiftingSands\"),\r\n };\r\n\r\n const desktop = {\r\n dunes: { x: 100, y: 100 },\r\n agency: { x: 100, y: 115 },\r\n brand: { x: 1720, y: 100 },\r\n motion: { x: 1720, y: 115 },\r\n dbg1: { x: 100, y: 980 },\r\n dbg2: { x: 100, y: 995 },\r\n dbg3: { x: 100, y: 1010 },\r\n dbg4: { x: 100, y: 1025 },\r\n signals: { x: 1620, y: 980 },\r\n sands: { x: 1620, y: 995 },\r\n };\r\n\r\n const mobile = {\r\n dunes: { x: 100, y: 100 },\r\n agency: { x: 100, y: 160 },\r\n brand: { x: 1400, y: 100 },\r\n motion: { x: 1400, y: 160 },\r\n dbg1: { x: 100, y: 1150 },\r\n dbg2: { x: 100, y: 1210 },\r\n dbg3: { x: 100, y: 1270 },\r\n dbg4: { x: 100, y: 1330 },\r\n signals: { x: 1400, y: 1150 },\r\n sands: { x: 1400, y: 1210 },\r\n };\r\n\r\n function applyLayout() {\r\n const cfg = window.innerWidth <= 768 ? mobile : desktop;\r\n Object.entries(cfg).forEach(([k, pos]) => {\r\n const el = els[k];\r\n if (el) {\r\n el.setAttribute(\"x\", pos.x);\r\n el.setAttribute(\"y\", pos.y);\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener(\"resize\", applyLayout);\r\n applyLayout();\r\n })();\r\n\r\n let startClickSound,\r\n preloaderSound,\r\n scrollSound1,\r\n scrollSound2,\r\n scrollSound3,\r\n backgroundMusic;\r\n let isBackgroundPlaying = true;\r\n let currentSection = 1;\r\n let isScrolling = false;\r\n let circleTransitions = [];\r\n\r\n function setupGeometricBackground() {\r\n const gridLinesGroup = document.getElementById(\"grid-lines\");\r\n const circlesOutlineGroup = document.getElementById(\"circles-outline\");\r\n const circlesFilledGroup = document.querySelector(\r\n \"#circles-filled > g\"\r\n );\r\n if (!gridLinesGroup || !circlesOutlineGroup || !circlesFilledGroup)\r\n return;\r\n\r\n const gridSpacing = 48;\r\n for (let i = 0; i <= 40; i++) {\r\n const vLine = document.createElementNS(\r\n \"http:\/\/www.w3.org\/2000\/svg\",\r\n \"line\"\r\n );\r\n vLine.setAttribute(\"class\", \"grid-line\");\r\n vLine.setAttribute(\"x1\", i * gridSpacing);\r\n vLine.setAttribute(\"y1\", 0);\r\n vLine.setAttribute(\"x2\", i * gridSpacing);\r\n vLine.setAttribute(\"y2\", 1080);\r\n gridLinesGroup.appendChild(vLine);\r\n if (i <= 22) {\r\n const hLine = document.createElementNS(\r\n \"http:\/\/www.w3.org\/2000\/svg\",\r\n \"line\"\r\n );\r\n hLine.setAttribute(\"class\", \"grid-line\");\r\n hLine.setAttribute(\"x1\", 0);\r\n hLine.setAttribute(\"y1\", i * gridSpacing);\r\n hLine.setAttribute(\"x2\", 1920);\r\n hLine.setAttribute(\"y2\", i * gridSpacing);\r\n gridLinesGroup.appendChild(hLine);\r\n }\r\n }\r\n\r\n const d = 80;\r\n const centerX = 960;\r\n const centerY = 540;\r\n circleTransitions = [\r\n {\r\n initial: { cx: centerX - 3 * d, cy: centerY, r: d * 0.8 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX + 3 * d, cy: centerY, r: d * 0.8 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX, cy: centerY - 3 * d, r: d * 0.8 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX, cy: centerY + 3 * d, r: d * 0.8 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX - 2 * d, cy: centerY - 2 * d, r: d * 0.6 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX + 2 * d, cy: centerY - 2 * d, r: d * 0.6 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX - 2 * d, cy: centerY + 2 * d, r: d * 0.6 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX + 2 * d, cy: centerY + 2 * d, r: d * 0.6 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX - 4 * d, cy: centerY, r: d * 0.4 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX + 4 * d, cy: centerY, r: d * 0.4 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX, cy: centerY - 4 * d, r: d * 0.4 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX, cy: centerY + 4 * d, r: d * 0.4 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n {\r\n initial: { cx: centerX, cy: centerY, r: d * 0.3 },\r\n final: { cx: centerX, cy: centerY, r: 4 * d },\r\n },\r\n ];\r\n\r\n circleTransitions.forEach((transition, index) => {\r\n const circleOutline = document.createElementNS(\r\n \"http:\/\/www.w3.org\/2000\/svg\",\r\n \"circle\"\r\n );\r\n circleOutline.setAttribute(\"class\", \"circle-outline\");\r\n circleOutline.setAttribute(\"cx\", transition.initial.cx);\r\n circleOutline.setAttribute(\"cy\", transition.initial.cy);\r\n circleOutline.setAttribute(\"r\", transition.initial.r);\r\n circlesOutlineGroup.appendChild(circleOutline);\r\n\r\n const circleFilled = document.createElementNS(\r\n \"http:\/\/www.w3.org\/2000\/svg\",\r\n \"circle\"\r\n );\r\n circleFilled.setAttribute(\"class\", \"circle-filled\");\r\n circleFilled.setAttribute(\"cx\", transition.initial.cx);\r\n circleFilled.setAttribute(\"cy\", transition.initial.cy);\r\n circleFilled.setAttribute(\"r\", transition.initial.r);\r\n circlesFilledGroup.appendChild(circleFilled);\r\n\r\n transition.outlineCircle = circleOutline;\r\n transition.filledCircle = circleFilled;\r\n });\r\n }\r\n\r\n document.getElementById(\"enableBtn\").onclick = function () {\r\n document.body.classList.add(\"loading-active\");\r\n startClickSound = document.getElementById(\"startClickSound\");\r\n preloaderSound = document.getElementById(\"preloaderSound\");\r\n scrollSound1 = document.getElementById(\"scrollSound1\");\r\n scrollSound2 = document.getElementById(\"scrollSound2\");\r\n scrollSound3 = document.getElementById(\"scrollSound3\");\r\n backgroundMusic = document.getElementById(\"backgroundMusic\");\r\n\r\n if (startClickSound) startClickSound.play().catch((e) => {});\r\n document.querySelector(\".audio-enable\").style.display = \"none\";\r\n document.getElementById(\"preloader\").style.display = \"flex\";\r\n if (preloaderSound) preloaderSound.play().catch((e) => {});\r\n\r\n setTimeout(() => {\r\n if (backgroundMusic) {\r\n backgroundMusic.volume = 0.5;\r\n backgroundMusic.play().catch((e) => {});\r\n }\r\n }, 500);\r\n\r\n let count = 0;\r\n const timer = setInterval(() => {\r\n count++;\r\n document.getElementById(\"counter\").textContent = `[${count\r\n .toString()\r\n .padStart(3, \"0\")}]`;\r\n if (count >= 100) {\r\n clearInterval(timer);\r\n setTimeout(() => {\r\n if (preloaderSound) {\r\n preloaderSound.pause();\r\n preloaderSound.currentTime = 0;\r\n }\r\n document.body.classList.remove(\"loading-active\");\r\n setupGeometricBackground();\r\n startAnimations();\r\n setupSectionScrollSounds();\r\n }, 500);\r\n }\r\n }, 50);\r\n };\r\n\r\n function setupSectionScrollSounds() {\r\n let scrollTimeout;\r\n\r\n function getCurrentSection() {\r\n const scrollY = window.scrollY;\r\n const sectionHeight = window.innerHeight * 2;\r\n if (scrollY < sectionHeight) return 1;\r\n else if (scrollY < sectionHeight * 2) return 2;\r\n else return 3;\r\n }\r\n\r\n function stopAllScrollSounds() {\r\n [scrollSound1, scrollSound2, scrollSound3].forEach((sound) => {\r\n if (sound && !sound.paused) {\r\n sound.pause();\r\n sound.currentTime = 0;\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener(\"scroll\", () => {\r\n const newSection = getCurrentSection();\r\n isScrolling = true;\r\n if (newSection !== currentSection) {\r\n stopAllScrollSounds();\r\n currentSection = newSection;\r\n }\r\n const currentScrollSound = eval(`scrollSound${currentSection}`);\r\n if (currentScrollSound && currentScrollSound.paused) {\r\n currentScrollSound.currentTime = 0;\r\n currentScrollSound.play().catch((e) => {});\r\n }\r\n clearTimeout(scrollTimeout);\r\n scrollTimeout = setTimeout(() => {\r\n stopAllScrollSounds();\r\n isScrolling = false;\r\n }, 150);\r\n });\r\n }\r\n\r\n function startAnimations() {\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n document.querySelectorAll(\".main-nav li\").forEach((navItem) => {\r\n const square = navItem.querySelector(\".nav-hover-square\");\r\n const hoverSound = document.getElementById(\"hoverSound\");\r\n navItem.addEventListener(\"mouseenter\", () => {\r\n gsap.to(square, { scaleX: 1, duration: 0.3, ease: \"power2.out\" });\r\n if (hoverSound) {\r\n hoverSound.currentTime = 0;\r\n hoverSound.volume = 0.3;\r\n hoverSound.play().catch((e) => {});\r\n }\r\n });\r\n navItem.addEventListener(\"mouseleave\", () => {\r\n gsap.to(square, { scaleX: 0, duration: 0.2, ease: \"power2.in\" });\r\n });\r\n });\r\n\r\n const lenis = new Lenis({\r\n duration: 1.2,\r\n easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\r\n direction: \"vertical\",\r\n gestureDirection: \"vertical\",\r\n smooth: true,\r\n mouseMultiplier: 1,\r\n smoothTouch: false,\r\n touchMultiplier: 2,\r\n infinite: false,\r\n });\r\n window.lenis = lenis;\r\n\r\n \/\/ Helpers for scrolling\r\n function scrollToWithOffset(el, offset) {\r\n if (!el) return;\r\n const y =\r\n window.scrollY + el.getBoundingClientRect().top + (offset || 0);\r\n if (window.lenis && typeof window.lenis.scrollTo === \"function\") {\r\n window.lenis.scrollTo(y);\r\n } else {\r\n window.scrollTo({ top: y, behavior: \"smooth\" });\r\n }\r\n }\r\n function scrollToCentered(el) {\r\n if (!el) return;\r\n const rect = el.getBoundingClientRect();\r\n const y =\r\n window.scrollY +\r\n rect.top +\r\n rect.height \/ 2 -\r\n window.innerHeight \/ 2;\r\n if (window.lenis && typeof window.lenis.scrollTo === \"function\") {\r\n window.lenis.scrollTo(y);\r\n } else {\r\n el.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\r\n }\r\n }\r\n\r\n \/\/ +CONNECT: center the contact form in the viewport\r\n document.querySelectorAll('a[href=\"#contact\"]').forEach((link) => {\r\n link.addEventListener(\"click\", (e) => {\r\n e.preventDefault();\r\n const formEl = document.getElementById(\"contactForm\");\r\n scrollToCentered(formEl);\r\n });\r\n });\r\n\r\n \/\/ Main nav mapping\r\n const navTargets = {\r\n \"CASE STUDIES\": document.querySelector(\".section-1\"),\r\n ABOUT: document.querySelector(\".section-2\"),\r\n PERFORMANCE: document.querySelector(\".section-3\"),\r\n };\r\n document.querySelectorAll(\".main-nav a\").forEach((a) => {\r\n const key = (a.textContent || \"\").trim().toUpperCase();\r\n const targetEl = navTargets[key];\r\n if (!targetEl) return;\r\n a.addEventListener(\"click\", (e) => {\r\n e.preventDefault();\r\n \/\/ Offset for fixed header height\r\n scrollToWithOffset(targetEl, -80);\r\n });\r\n });\r\n\r\n lenis.on(\"scroll\", ScrollTrigger.update);\r\n gsap.ticker.add((time) => {\r\n lenis.raf(time * 1000);\r\n });\r\n gsap.ticker.lagSmoothing(0);\r\n\r\n gsap.to(\".gradient-reveal\", {\r\n y: \"-500vh\",\r\n duration: 2,\r\n ease: \"power2.inOut\",\r\n delay: 0.25,\r\n });\r\n gsap.to(\".preloader\", {\r\n y: -50,\r\n opacity: 0,\r\n duration: 0.8,\r\n ease: \"power2.inOut\",\r\n delay: 1.0,\r\n onComplete: () => {\r\n document.getElementById(\"preloader\").style.display = \"none\";\r\n },\r\n });\r\n\r\n gsap.utils.toArray(\".section\").forEach((section) => {\r\n gsap.to(section, {\r\n backgroundPositionY: \"50%\",\r\n ease: \"none\",\r\n scrollTrigger: {\r\n trigger: section,\r\n start: \"top bottom\",\r\n end: \"bottom top\",\r\n scrub: 1,\r\n },\r\n });\r\n });\r\n\r\n const circle = document.getElementById(\"glowCircle\");\r\n const debugLine1 = document.getElementById(\"debugLine1\");\r\n const debugLine2 = document.getElementById(\"debugLine2\");\r\n const debugLine3 = document.getElementById(\"debugLine3\");\r\n const debugLine4 = document.getElementById(\"debugLine4\");\r\n if (!circle) return;\r\n\r\n let animationFrame;\r\n function updateAnimations() {\r\n const scrollY = window.scrollY;\r\n const maxScroll = document.body.scrollHeight - window.innerHeight;\r\n const progress = Math.min(scrollY \/ maxScroll, 1);\r\n\r\n const footerStart =\r\n document.querySelector(\".site-footer\").offsetTop -\r\n window.innerHeight;\r\n const footerProgress = Math.max(\r\n 0,\r\n (scrollY - footerStart) \/ (window.innerHeight * 0.5)\r\n );\r\n const textOpacity = Math.max(0, 1 - footerProgress * 2);\r\n document.querySelectorAll(\".geometric-text\").forEach((text) => {\r\n text.style.opacity = textOpacity;\r\n });\r\n\r\n const freq1 = (432 + progress * 108).toFixed(1);\r\n const freq2 = (528 - progress * 156).toFixed(1);\r\n const energy = (progress * 99.9).toFixed(1);\r\n const presence = ((1 - progress) * 100).toFixed(1);\r\n\r\n let awarenessState, becomingState, energyState, presenceState;\r\n if (progress <= 0.1) {\r\n awarenessState = `[${freq1}] AWARENESS: LISTENING`;\r\n becomingState = `.${freq2} STATE: ADAPTIVE`;\r\n energyState = `{${energy}} ENERGY: COMPOUNDING`;\r\n } else if (progress <= 0.25) {\r\n awarenessState = `[${freq1}] AWARENESS: STIRRING`;\r\n becomingState = `.${freq2} STATE: EMERGING`;\r\n energyState = `{${energy}} ENERGY: ACCELERATING`;\r\n } else if (progress <= 0.5) {\r\n awarenessState = `[${freq1}] AWARENESS: MAPPING`;\r\n becomingState = `.${freq2} STATE: EXPANDING`;\r\n energyState = `{${energy}} ENERGY: BUILDING`;\r\n } else if (progress <= 0.75) {\r\n awarenessState = `[${freq1}] AWARENESS: SIGNALING`;\r\n becomingState = `.${freq2} STATE: DISSOLVING`;\r\n energyState = `{${energy}} ENERGY: RADIATING`;\r\n } else if (progress <= 0.9) {\r\n awarenessState = `[${freq1}] AWARENESS: ORCHESTRATING`;\r\n becomingState = `.${freq2} STATE: INFINITE`;\r\n energyState = `{${energy}} ENERGY: OVERFLOWING`;\r\n } else {\r\n awarenessState = `[${freq1}] AWARENESS: UNITY`;\r\n becomingState = `.${freq2} STATE: ETERNAL`;\r\n energyState = `{${energy}} ENERGY: PURE`;\r\n }\r\n\r\n const presenceIntensity = Math.max(0, 1 - progress);\r\n if (presenceIntensity > 0.8) {\r\n presenceState = `.${presence} PRESENCE: VISIBLE`;\r\n } else if (presenceIntensity > 0.6) {\r\n presenceState = `.${presence} PRESENCE: AMPLIFYING`;\r\n } else if (presenceIntensity > 0.4) {\r\n presenceState = `.${presence} PRESENCE: TRANSLUCENT`;\r\n } else if (presenceIntensity > 0.2) {\r\n presenceState = `.${presence} PRESENCE: ETHEREAL`;\r\n } else {\r\n presenceState = `.${presence} PRESENCE: VOID`;\r\n }\r\n\r\n const scale = 1 + progress * 1.8;\r\n const shadowSize = progress * 150;\r\n const shadowSpread = progress * 35;\r\n const shadowOpacity = progress;\r\n circle.style.transform = `scale(${scale})`;\r\n circle.style.transformOrigin = \"center center\";\r\n circle.style.boxShadow = `0 0 ${shadowSize}px ${shadowSpread}px rgba(255, 255, 0, ${shadowOpacity})`;\r\n\r\n const gridOpacity = Math.max(0, 0.3 * (1 - progress * 1.5));\r\n document.querySelectorAll(\".grid-line\").forEach((line) => {\r\n line.setAttribute(\"stroke-opacity\", gridOpacity);\r\n });\r\n\r\n circleTransitions.forEach((transition, index) => {\r\n const currentCx =\r\n transition.initial.cx +\r\n (transition.final.cx - transition.initial.cx) * progress;\r\n const currentCy =\r\n transition.initial.cy +\r\n (transition.final.cy - transition.initial.cy) * progress;\r\n const currentR =\r\n transition.initial.r +\r\n (transition.final.r - transition.initial.r) * progress;\r\n const rotation = progress * 360 * (index % 2 === 0 ? 1 : -1);\r\n const opacity = Math.max(0.1, 1 - progress * 0.7);\r\n\r\n if (transition.outlineCircle) {\r\n transition.outlineCircle.setAttribute(\"cx\", currentCx);\r\n transition.outlineCircle.setAttribute(\"cy\", currentCy);\r\n transition.outlineCircle.setAttribute(\"r\", currentR);\r\n transition.outlineCircle.setAttribute(\r\n \"transform\",\r\n `rotate(${rotation} ${currentCx} ${currentCy})`\r\n );\r\n transition.outlineCircle.setAttribute(\"stroke-opacity\", opacity);\r\n }\r\n if (transition.filledCircle) {\r\n transition.filledCircle.setAttribute(\"cx\", currentCx);\r\n transition.filledCircle.setAttribute(\"cy\", currentCy);\r\n transition.filledCircle.setAttribute(\"r\", currentR);\r\n transition.filledCircle.setAttribute(\r\n \"transform\",\r\n `rotate(${rotation} ${currentCx} ${currentCy})`\r\n );\r\n transition.filledCircle.setAttribute(\r\n \"fill-opacity\",\r\n opacity * 0.05\r\n );\r\n }\r\n });\r\n\r\n if (debugLine1) debugLine1.textContent = awarenessState;\r\n if (debugLine2) debugLine2.textContent = becomingState;\r\n if (debugLine3) debugLine3.textContent = energyState;\r\n if (debugLine4) debugLine4.textContent = presenceState;\r\n }\r\n\r\n window.addEventListener(\"scroll\", () => {\r\n if (animationFrame) cancelAnimationFrame(animationFrame);\r\n animationFrame = requestAnimationFrame(updateAnimations);\r\n });\r\n updateAnimations();\r\n }\r\n\r\n (function () {\r\n const form = document.getElementById(\"contactForm\");\r\n if (!form) return;\r\n const statusEl = document.getElementById(\"formStatus\");\r\n const sendBtn = document.getElementById(\"sendBtn\");\r\n\r\n function setStatus(text, type) {\r\n if (!statusEl) return;\r\n statusEl.textContent = text;\r\n statusEl.className = `form-note ${type || \"\"}`.trim();\r\n }\r\n\r\n form.addEventListener(\"submit\", async (e) => {\r\n e.preventDefault();\r\n const formData = new FormData(form);\r\n const payload = {\r\n firstName: (formData.get(\"firstName\") || \"\").toString().trim(),\r\n lastName: (formData.get(\"lastName\") || \"\").toString().trim(),\r\n email: (formData.get(\"email\") || \"\").toString().trim(),\r\n phone: (formData.get(\"phone\") || \"\").toString().trim(),\r\n company: (formData.get(\"company\") || \"\").toString().trim(),\r\n message: (formData.get(\"message\") || \"\").toString().trim(),\r\n website: (formData.get(\"website\") || \"\").toString().trim(),\r\n };\r\n\r\n if (\r\n !payload.firstName ||\r\n !payload.lastName ||\r\n !payload.email ||\r\n !payload.message\r\n ) {\r\n setStatus(\"Please fill first, last, email, message.\", \"error\");\r\n return;\r\n }\r\n\r\n try {\r\n sendBtn.disabled = true;\r\n setStatus(\"Sending\u2026\", \"info\");\r\n const res = await fetch(\r\n \"https:\/\/thedunesagency.com\/wp-json\/dunes\/v1\/contact\",\r\n {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify(payload),\r\n }\r\n );\r\n const out = await res.json().catch(() => ({}));\r\n if (res.ok) {\r\n setStatus(\"Message sent. We\u2019ll be in touch.\", \"success\");\r\n form.reset();\r\n } else {\r\n const msg = out.error || \"Could not send. Try again.\";\r\n setStatus(msg, \"error\");\r\n }\r\n } catch (err) {\r\n setStatus(\"Network error. Try again.\", \"error\");\r\n } finally {\r\n sendBtn.disabled = false;\r\n }\r\n });\r\n })();\r\n <\/script>\r\n <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>The Dunes \u2014 Digital Marketing Agency CASE STUDIES ABOUT PERFORMANCE +CONNECT +CONNECT ENTER DUNESWITH AUDIO START [000] DUNES AGENCY BRAND SYSTEMS IN MOTION AWARENESS: LISTENING STATE: ADAPTIVE ENERGY: COMPOUNDING PRESENCE: VISIBLE SIGNALS IN THE SHIFTING SANDS START A CONVERSATION Tell us about your brand, your market, and the momentum you want to create. FIRST NAME […]<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-14292","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Home - New - The Dunes Agency<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thedunesagency.com\/fr\/home-new\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - New - The Dunes Agency\" \/>\n<meta property=\"og:description\" content=\"The Dunes \u2014 Digital Marketing Agency CASE STUDIES ABOUT PERFORMANCE +CONNECT +CONNECT ENTER DUNESWITH AUDIO START [000] DUNES AGENCY BRAND SYSTEMS IN MOTION AWARENESS: LISTENING STATE: ADAPTIVE ENERGY: COMPOUNDING PRESENCE: VISIBLE SIGNALS IN THE SHIFTING SANDS START A CONVERSATION Tell us about your brand, your market, and the momentum you want to create. FIRST NAME […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thedunesagency.com\/fr\/home-new\/\" \/>\n<meta property=\"og:site_name\" content=\"The Dunes Agency\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-17T21:08:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thedunesagency.com\/home-new\/\",\"url\":\"https:\/\/thedunesagency.com\/home-new\/\",\"name\":\"Home - New - The Dunes Agency\",\"isPartOf\":{\"@id\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#website\"},\"datePublished\":\"2025-10-17T10:36:13+00:00\",\"dateModified\":\"2025-10-17T21:08:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/thedunesagency.com\/home-new\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thedunesagency.com\/home-new\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/thedunesagency.com\/home-new\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/thedunesagency.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home – New\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#website\",\"url\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/\",\"name\":\"The Dunes Agency\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#organization\",\"name\":\"The Dunes Agency\",\"url\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/thedunesagency.com\/wp-content\/uploads\/2020\/11\/DUNES-Dunes-Logo-Black.png\",\"contentUrl\":\"https:\/\/thedunesagency.com\/wp-content\/uploads\/2020\/11\/DUNES-Dunes-Logo-Black.png\",\"width\":1794,\"height\":427,\"caption\":\"The Dunes Agency\"},\"image\":{\"@id\":\"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - New - The Dunes Agency","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thedunesagency.com\/fr\/home-new\/","og_locale":"fr_CA","og_type":"article","og_title":"Home - New - The Dunes Agency","og_description":"The Dunes \u2014 Digital Marketing Agency CASE STUDIES ABOUT PERFORMANCE +CONNECT +CONNECT ENTER DUNESWITH AUDIO START [000] DUNES AGENCY BRAND SYSTEMS IN MOTION AWARENESS: LISTENING STATE: ADAPTIVE ENERGY: COMPOUNDING PRESENCE: VISIBLE SIGNALS IN THE SHIFTING SANDS START A CONVERSATION Tell us about your brand, your market, and the momentum you want to create. FIRST NAME […]","og_url":"https:\/\/thedunesagency.com\/fr\/home-new\/","og_site_name":"The Dunes Agency","article_modified_time":"2025-10-17T21:08:23+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thedunesagency.com\/home-new\/","url":"https:\/\/thedunesagency.com\/home-new\/","name":"Home - New - The Dunes Agency","isPartOf":{"@id":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#website"},"datePublished":"2025-10-17T10:36:13+00:00","dateModified":"2025-10-17T21:08:23+00:00","breadcrumb":{"@id":"https:\/\/thedunesagency.com\/home-new\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thedunesagency.com\/home-new\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/thedunesagency.com\/home-new\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thedunesagency.com\/"},{"@type":"ListItem","position":2,"name":"Home – New"}]},{"@type":"WebSite","@id":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#website","url":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/","name":"The Dunes Agency","description":"","publisher":{"@id":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":"Organization","@id":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#organization","name":"The Dunes Agency","url":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#\/schema\/logo\/image\/","url":"https:\/\/thedunesagency.com\/wp-content\/uploads\/2020\/11\/DUNES-Dunes-Logo-Black.png","contentUrl":"https:\/\/thedunesagency.com\/wp-content\/uploads\/2020\/11\/DUNES-Dunes-Logo-Black.png","width":1794,"height":427,"caption":"The Dunes Agency"},"image":{"@id":"https:\/\/moccasin-goshawk-175258.hostingersite.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/pages\/14292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/comments?post=14292"}],"version-history":[{"count":47,"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/pages\/14292\/revisions"}],"predecessor-version":[{"id":14353,"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/pages\/14292\/revisions\/14353"}],"wp:attachment":[{"href":"https:\/\/thedunesagency.com\/fr\/wp-json\/wp\/v2\/media?parent=14292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}