{"id":18618,"date":"2020-06-03T14:05:35","date_gmt":"2020-06-03T14:05:35","guid":{"rendered":"http:\/\/demo-install.wpestate.org\/?page_id=18618"},"modified":"2026-08-26T08:25:38","modified_gmt":"2026-08-26T08:25:38","slug":"homepage","status":"publish","type":"page","link":"https:\/\/hoep.sa\/ar\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18618\" class=\"elementor elementor-18618\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61504da e-con-full e-transform e-flex e-con e-parent\" data-id=\"61504da\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_video_start&quot;:0,&quot;shape_divider_top&quot;:&quot;opacity-tilt&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/hoep.sa\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/down-size.mp4&quot;,&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.2,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div>\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 2600 131.1\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M0 0L2600 0 2600 69.1 0 0z\"\/>\n\t<path class=\"elementor-shape-fill\" style=\"opacity:0.5\" d=\"M0 0L2600 0 2600 69.1 0 69.1z\"\/>\n\t<path class=\"elementor-shape-fill\" style=\"opacity:0.25\" d=\"M2600 0L0 0 0 130.1 2600 69.1z\"\/>\n<\/svg>\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fa65abf e-con-full e-flex e-con e-child\" data-id=\"fa65abf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb6a954 elementor-align-center elementor-mobile-align-center elementor-invisible elementor-widget elementor-widget-button\" data-id=\"bb6a954\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">hoep.sa<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0996b53 elementor-widget__width-auto elementor-widget elementor-widget-html\" data-id=\"0996b53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"hoep-text-pressure notranslate\" translate=\"no\" data-text=\"HOUSE OF ELITE PROPERTIES\">\n  <h1 class=\"hoep-text-pressure-title\" aria-label=\"HOUSE OF ELITE PROPERTIES\">\n    <span class=\"hoep-text-pressure-source notranslate\" translate=\"no\">HOUSE OF ELITE PROPERTIES<\/span>\n  <\/h1>\n<\/div>\n\n<style>\n  @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&display=swap\");\n\n  .hoep-text-pressure {\n    position: relative;\n    width: 100%;\n    height: clamp(150px, 20vw, 280px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: transparent;\n  }\n\n  html[lang^=\"ar\"] .hoep-text-pressure,\n  body.rtl .hoep-text-pressure,\n  body.translatepress-ar .hoep-text-pressure,\n  body.translated-rtl .hoep-text-pressure {\n    display: none !important;\n  }\n\n  .hoep-text-pressure-title {\n    width: 100%;\n    margin: 0;\n    color: #333366;\n    font-family: \"Roboto Flex\", \"Montserrat\", Arial, sans-serif;\n    font-size: clamp(44px, 7vw, 118px);\n    line-height: .9;\n    font-weight: 100;\n    text-align: center;\n    text-transform: uppercase;\n    white-space: nowrap;\n    user-select: none;\n    letter-spacing: clamp(5px, .85vw, 14px);\n  }\n\n  .hoep-text-pressure-title.is-flex {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .hoep-text-pressure-char {\n    display: inline-block;\n    color: #333366;\n    font-variation-settings: \"wght\" 100, \"wdth\" 25, \"ital\" 0;\n    will-change: font-variation-settings, opacity;\n  }\n\n  .hoep-text-pressure-source {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    overflow: hidden !important;\n    clip: rect(0 0 0 0) !important;\n    clip-path: inset(50%) !important;\n    white-space: nowrap !important;\n  }\n\n  @media (max-width: 1024px) {\n    .hoep-text-pressure {\n      height: clamp(130px, 23vw, 220px);\n    }\n\n    .hoep-text-pressure-title {\n      font-size: clamp(34px, 7vw, 76px);\n      letter-spacing: clamp(4px, .7vw, 9px);\n    }\n  }\n\n  @media (max-width: 767px) {\n    .hoep-text-pressure {\n      height: clamp(105px, 32vw, 145px);\n      padding: 0 26px;\n      box-sizing: border-box;\n    }\n\n    .hoep-text-pressure-title {\n      width: 86%;\n      max-width: 340px;\n      margin-left: auto;\n      margin-right: auto;\n      font-size: clamp(17px, 5.1vw, 24px);\n      line-height: 1.18;\n      white-space: normal;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      gap: .08em .2em;\n      letter-spacing: 2.3px;\n    }\n\n    .hoep-text-pressure-title.is-flex {\n      justify-content: center;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .hoep-text-pressure-char {\n      font-variation-settings: \"wght\" 350, \"wdth\" 100, \"ital\" 0 !important;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    function dist(a, b) {\n      var dx = b.x - a.x;\n      var dy = b.y - a.y;\n      return Math.sqrt(dx * dx + dy * dy);\n    }\n\n    function getAttr(distance, maxDist, minVal, maxVal) {\n      var val = maxVal - Math.abs((maxVal * distance) \/ maxDist);\n      return Math.max(minVal, val + minVal);\n    }\n\n    function debounce(func, delay) {\n      var timeoutId;\n      return function () {\n        var args = arguments;\n        clearTimeout(timeoutId);\n        timeoutId = setTimeout(function () {\n          func.apply(null, args);\n        }, delay);\n      };\n    }\n\n    function isArabicPage() {\n      return (\n        document.documentElement.lang.indexOf(\"ar\") === 0 ||\n        document.body.classList.contains(\"rtl\") ||\n        document.body.classList.contains(\"translatepress-ar\") ||\n        document.body.classList.contains(\"translated-rtl\")\n      );\n    }\n\n    function initTextPressure(container) {\n      if (!container || container.dataset.ready === \"true\" || isArabicPage()) return;\n\n      var title = container.querySelector(\".hoep-text-pressure-title\");\n      if (!title) return;\n\n      var source = title.querySelector(\".hoep-text-pressure-source\");\n      if (!source) {\n        source = document.createElement(\"span\");\n        source.className = \"hoep-text-pressure-source notranslate\";\n        source.setAttribute(\"translate\", \"no\");\n        source.textContent = container.getAttribute(\"data-text\") || \"HOUSE OF ELITE PROPERTIES\";\n        title.appendChild(source);\n      }\n\n      var text = (container.getAttribute(\"data-text\") || source.textContent || \"HOUSE OF ELITE PROPERTIES\").trim();\n      var flex = true;\n      var width = true;\n      var weight = true;\n      var italic = true;\n      var alpha = false;\n      var scale = false;\n      var minFontSize = 17;\n\n      var tokens = text.split(\"\");\n      var spans = [];\n      var mouse = { x: 0, y: 0 };\n      var cursor = { x: 0, y: 0 };\n      var scaleY = 1;\n      var lineHeight = 1;\n      var rafId;\n      var resizeObserver;\n\n      title.innerHTML = \"\";\n      title.appendChild(source);\n      title.classList.toggle(\"is-flex\", flex);\n      title.setAttribute(\"aria-label\", text);\n      container.setAttribute(\"translate\", \"no\");\n      container.classList.add(\"notranslate\");\n\n      tokens.forEach(function (token) {\n        var span = document.createElement(\"span\");\n        span.className = \"hoep-text-pressure-char notranslate\";\n        span.setAttribute(\"translate\", \"no\");\n        span.setAttribute(\"aria-hidden\", \"true\");\n        span.dataset.char = token;\n        span.textContent = token === \" \" ? \"\\u00a0\" : token;\n        title.appendChild(span);\n        spans.push(span);\n      });\n\n      function setSize() {\n        var rect = container.getBoundingClientRect();\n        if (!rect.width) return;\n\n        var isMobile = window.matchMedia(\"(max-width: 767px)\").matches;\n        var isTablet = window.matchMedia(\"(max-width: 1024px)\").matches;\n        var divisor = isMobile ? (text.length \/ .72) : (text.length \/ 2.15);\n        var maxFontSize = isMobile ? 24 : (isTablet ? 76 : 118);\n        var newFontSize = rect.width \/ Math.max(1, divisor);\n        newFontSize = Math.max(newFontSize, minFontSize);\n        newFontSize = Math.min(newFontSize, maxFontSize);\n\n        title.style.fontSize = newFontSize + \"px\";\n        title.style.lineHeight = \"1\";\n        title.style.transform = \"scale(1, 1)\";\n\n        requestAnimationFrame(function () {\n          var textRect = title.getBoundingClientRect();\n          if (scale && textRect.height > 0) {\n            scaleY = rect.height \/ textRect.height;\n            lineHeight = scaleY;\n          } else {\n            scaleY = 1;\n            lineHeight = 1;\n          }\n\n          title.style.transform = \"scale(1, \" + scaleY + \")\";\n          title.style.lineHeight = String(lineHeight);\n        });\n      }\n\n      function setInitialCursor() {\n        var rect = container.getBoundingClientRect();\n        mouse.x = rect.left + rect.width \/ 2;\n        mouse.y = rect.top + rect.height \/ 2;\n        cursor.x = mouse.x;\n        cursor.y = mouse.y;\n      }\n\n      function animate() {\n        mouse.x += (cursor.x - mouse.x) \/ 15;\n        mouse.y += (cursor.y - mouse.y) \/ 15;\n\n        var titleRect = title.getBoundingClientRect();\n        var maxDist = Math.max(1, titleRect.width \/ 2);\n\n        spans.forEach(function (span) {\n          var rect = span.getBoundingClientRect();\n          var charCenter = {\n            x: rect.x + rect.width \/ 2,\n            y: rect.y + rect.height \/ 2\n          };\n\n          var d = dist(mouse, charCenter);\n          var wdth = width ? Math.floor(getAttr(d, maxDist, 5, 200)) : 100;\n          var wght = weight ? Math.floor(getAttr(d, maxDist, 100, 900)) : 400;\n          var italVal = italic ? getAttr(d, maxDist, 0, 1).toFixed(2) : 0;\n          var alphaVal = alpha ? getAttr(d, maxDist, 0, 1).toFixed(2) : 1;\n\n          span.style.fontVariationSettings =\n            \"'wght' \" + wght + \", 'wdth' \" + wdth + \", 'ital' \" + italVal;\n\n          if (alpha) span.style.opacity = alphaVal;\n        });\n\n        rafId = requestAnimationFrame(animate);\n      }\n\n      function handlePointerMove(event) {\n        cursor.x = event.clientX;\n        cursor.y = event.clientY;\n      }\n\n      function handleTouchMove(event) {\n        var touch = event.touches && event.touches[0];\n        if (!touch) return;\n        cursor.x = touch.clientX;\n        cursor.y = touch.clientY;\n      }\n\n      var debouncedSetSize = debounce(setSize, 100);\n\n      setSize();\n      setInitialCursor();\n      animate();\n\n      window.addEventListener(\"mousemove\", handlePointerMove);\n      window.addEventListener(\"touchmove\", handleTouchMove, { passive: true });\n      window.addEventListener(\"resize\", debouncedSetSize);\n\n      if (\"ResizeObserver\" in window) {\n        resizeObserver = new ResizeObserver(debouncedSetSize);\n        resizeObserver.observe(container);\n      }\n\n      if (document.fonts && document.fonts.ready) {\n        document.fonts.ready.then(setSize);\n      }\n\n      window.addEventListener(\"load\", setSize, { once: true });\n      setTimeout(setSize, 300);\n\n      container.dataset.ready = \"true\";\n      container._hoepTextPressureCleanup = function () {\n        cancelAnimationFrame(rafId);\n        window.removeEventListener(\"mousemove\", handlePointerMove);\n        window.removeEventListener(\"touchmove\", handleTouchMove);\n        window.removeEventListener(\"resize\", debouncedSetSize);\n        window.removeEventListener(\"load\", setSize);\n        if (resizeObserver) resizeObserver.disconnect();\n      };\n    }\n\n    function boot() {\n      document.querySelectorAll(\".hoep-text-pressure\").forEach(initTextPressure);\n    }\n\n    if (document.readyState === \"loading\") {\n      document.addEventListener(\"DOMContentLoaded\", boot);\n    } else {\n      boot();\n    }\n  })();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29528e1 elementor-mobile-align-center elementor-tablet-align-left elementor-align-center elementor-invisible elementor-widget elementor-widget-button\" data-id=\"29528e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/hoep.sa\/view-services\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">View Services<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cdabad0 e-con-full e-flex e-con e-parent\" data-id=\"cdabad0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7323a5c elementor-widget elementor-widget-html\" data-id=\"7323a5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"hoep-combined-section\" class=\"hoep-combined-section\">\n\n  <div class=\"hoep-shared-bg\">\n    <div class=\"hoep-shared-layer layer-one\"><\/div>\n    <div class=\"hoep-shared-layer layer-two\"><\/div>\n    <div class=\"hoep-shared-dots dots-left\"><\/div>\n    <div class=\"hoep-shared-dots dots-right\"><\/div>\n  <\/div>\n\n  <!-- INTERACTIVE FLOW LINES -->\n  <div class=\"hoep-flow-lines-wrap\" aria-hidden=\"true\">\n    <canvas class=\"hoep-flow-lines-canvas\"><\/canvas>\n  <\/div>\n\n  <!-- INTRODUCTION -->\n  <div class=\"hoep-intro-panel hoep-motion-panel\">\n    <div class=\"hoep-intro-content\">\n      <div class=\"hoep-kicker\">ABOUT US<\/div>\n      <h2>INTRODUCTION<\/h2>\n      <div class=\"hoep-title-line\"><\/div>\n\n      <div class=\"hoep-intro-text\">\n        <p>\n          House of Elite Properties is a creative real estate marketing company built to elevate how properties are seen,\n          presented, and connected with clients through memorable visual experiences.\n        <\/p>\n        <p>\n          HOEP combines creative direction, media production, and real estate expertise to craft high-end property\n          presentations that elevate brand identity and attract the right audience. Every project is designed with precision,\n          storytelling, and modern aesthetics in mind.\n        <\/p>\n      <\/div>\n\n      <a class=\"hoep-learn-btn\" href=\"https:\/\/hoep.sa\/learn-more\/\">\n        <span class=\"btn-text\">LEARN MORE<\/span>\n        <span class=\"btn-dot\"><\/span>\n        <span class=\"btn-shine\"><\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n\n  <!-- CORPORATE CLIENTS -->\n  <div class=\"hoep-corporate-panel hoep-motion-panel\">\n    <div class=\"hoep-corporate-heading\">\n      <h2>CORPORATE CLIENTS<\/h2>\n      <div class=\"hoep-title-line\"><\/div>\n    <\/div>\n\n    <div class=\"hoep-logo-carousel\">\n      <div class=\"hoep-spark-field\">\n        <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n      <\/div>\n\n      <div class=\"hoep-logo-track\">\n        <div class=\"hoep-logo-card logo-1\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/3-scaled.png\" alt=\"Corporate client logo\">\n        <\/div>\n\n        <div class=\"hoep-logo-card logo-2\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/6-scaled.png\" alt=\"Corporate client logo\">\n        <\/div>\n\n        <div class=\"hoep-logo-card logo-3\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/4-scaled.png\" alt=\"Corporate client logo\">\n        <\/div>\n\n        <div class=\"hoep-logo-card logo-4\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/5-scaled.png\" alt=\"Corporate client logo\">\n        <\/div>\n\n        <div class=\"hoep-logo-card logo-5\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/wathrah.1png-scaled.png\" alt=\"Corporate client logo\">\n        <\/div>\n\n        <div class=\"hoep-logo-card logo-6\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/wathrah-scaled.png\" alt=\"Corporate client logo\">\n        <\/div>\n      <\/div>\n\n      <div class=\"hoep-logo-ui\">\n        <button type=\"button\" class=\"hoep-logo-btn logo-prev\" aria-label=\"Previous corporate clients\"><span aria-hidden=\"true\">&#8249;<\/span><\/button>\n        <div class=\"hoep-logo-dots\">\n          <span class=\"active\"><\/span>\n          <span><\/span>\n        <\/div>\n        <button type=\"button\" class=\"hoep-logo-btn logo-next\" aria-label=\"Next corporate clients\"><span aria-hidden=\"true\">&#8250;<\/span><\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"hoep-scroll-velocity\" aria-label=\"HOEP property marketing actions\">\n      <div class=\"hoep-velocity-row hoep-velocity-row-one\" data-hoep-velocity=\"1\">\n        <div class=\"hoep-velocity-track\">\n          <span>MARKET YOUR PROPERTY<\/span><i><\/i><span>VIEW OUR SERVICES<\/span><i><\/i>\n          <span>MARKET YOUR PROPERTY<\/span><i><\/i><span>VIEW OUR SERVICES<\/span><i><\/i>\n          <span>MARKET YOUR PROPERTY<\/span><i><\/i><span>VIEW OUR SERVICES<\/span><i><\/i>\n          <span>MARKET YOUR PROPERTY<\/span><i><\/i><span>VIEW OUR SERVICES<\/span><i><\/i>\n          <span>MARKET YOUR PROPERTY<\/span><i><\/i><span>VIEW OUR SERVICES<\/span><i><\/i>\n          <span>MARKET YOUR PROPERTY<\/span><i><\/i><span>VIEW OUR SERVICES<\/span><i><\/i>\n        <\/div>\n      <\/div>\n\n      <div class=\"hoep-velocity-row hoep-velocity-row-two\" data-hoep-velocity=\"-1\">\n        <div class=\"hoep-velocity-track\">\n          <span>VIEW OUR SERVICES<\/span><i><\/i><span>MARKET YOUR PROPERTY<\/span><i><\/i>\n          <span>VIEW OUR SERVICES<\/span><i><\/i><span>MARKET YOUR PROPERTY<\/span><i><\/i>\n          <span>VIEW OUR SERVICES<\/span><i><\/i><span>MARKET YOUR PROPERTY<\/span><i><\/i>\n          <span>VIEW OUR SERVICES<\/span><i><\/i><span>MARKET YOUR PROPERTY<\/span><i><\/i>\n          <span>VIEW OUR SERVICES<\/span><i><\/i><span>MARKET YOUR PROPERTY<\/span><i><\/i>\n          <span>VIEW OUR SERVICES<\/span><i><\/i><span>MARKET YOUR PROPERTY<\/span><i><\/i>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- REAL ESTATE MEDIA SERVICES -->\n  <div class=\"hoep-services-panel hoep-motion-panel\">\n    <div class=\"hoep-services-heading\">\n      <div class=\"hoep-insight-icon-loop\" aria-hidden=\"true\">\n        <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/360.png\" alt=\"\">\n        <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/drone.png\" alt=\"\">\n        <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/camera.png\" alt=\"\">\n        <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/ai.png\" alt=\"\">\n      <\/div>\n      <div class=\"hoep-kicker\">LATEST INSIGHTS<\/div>\n      <h2>REAL ESTATE MEDIA SERVICES<\/h2>\n      <div class=\"hoep-title-line\"><\/div>\n    <\/div>\n\n    <div class=\"hoep-services-carousel\">\n      <div class=\"hoep-services-track\">\n\n        <article class=\"hoep-service-card hoep-service-click-card\" data-hoep-card-url=\"https:\/\/hoep.sa\/drone-shooting\/\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/05\/9d5ae469-69ba-48b5-9c56-66238709dcfb-scaled.jpg\" alt=\"Cinematic Drone Shooting Video\">\n          <div class=\"hoep-service-overlay\"><\/div>\n          <div class=\"hoep-service-content\">\n            <span>AERIAL MEDIA<\/span>\n            <h3>CINEMATIC DRONE SHOOTING VIDEO<\/h3>\n            <a href=\"https:\/\/hoep.sa\/drone-shooting\/\" class=\"hoep-service-real-link\" data-hoep-url=\"https:\/\/hoep.sa\/drone-shooting\/\">VIEW PROJECTS<\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"hoep-service-card hoep-service-click-card\" data-hoep-card-url=\"https:\/\/hoep.sa\/?p=22741\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/05\/bfc74499-d16f-4343-913c-92ecc22e7650.png\" alt=\"Cinematic Photos\">\n          <div class=\"hoep-service-overlay\"><\/div>\n          <div class=\"hoep-service-content\">\n            <span>MEDIA<\/span>\n            <h3>CINEMATIC PHOTOS<\/h3>\n            <a href=\"https:\/\/hoep.sa\/?p=22741\" class=\"hoep-service-real-link\" data-hoep-url=\"https:\/\/hoep.sa\/?p=22741\">VIEW PROJECTS<\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"hoep-service-card\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/05\/323-scaled.jpg\" alt=\"Panorama\">\n          <div class=\"hoep-service-overlay\"><\/div>\n          <div class=\"hoep-service-content\">\n            <span>PHOTO<\/span>\n            <h3>PANORAMA<\/h3>\n            <a href=\"javascript:void(0)\" class=\"hoep-disabled-link\">VIEW PROJECTS<\/a>\n          <\/div>\n        <\/article>\n\n        <article class=\"hoep-service-card\">\n          <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/05\/dd-scaled.jpg\" alt=\"View 360 Experience\">\n          <div class=\"hoep-service-overlay\"><\/div>\n          <div class=\"hoep-service-content\">\n            <span>VIRTUAL TOUR<\/span>\n            <h3>VIEW 360 EXPERIENCE<\/h3>\n            <a href=\"javascript:void(0)\" class=\"hoep-disabled-link\">START VIRTUAL TOUR<\/a>\n          <\/div>\n        <\/article>\n\n      <\/div>\n\n      <div class=\"hoep-services-ui\">\n        <button type=\"button\" class=\"hoep-service-btn service-prev\" aria-label=\"Previous services\"><span aria-hidden=\"true\">&#8249;<\/span><\/button>\n        <div class=\"hoep-service-dots\">\n          <span class=\"active\"><\/span>\n          <span><\/span>\n        <\/div>\n        <button type=\"button\" class=\"hoep-service-btn service-next\" aria-label=\"Next services\"><span aria-hidden=\"true\">&#8250;<\/span><\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- FINAL CTA -->\n  <div class=\"hoep-final-cta-panel hoep-motion-panel\">\n    <div class=\"hoep-final-bg\">\n      <img decoding=\"async\" src=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/05\/20BDA1EA-BEE9-4507-AC85-BBC0B5E4C0FD.png\" alt=\"Be Our Partner\">\n      <div class=\"hoep-final-overlay\"><\/div>\n      <div class=\"hoep-final-dots left\"><\/div>\n      <div class=\"hoep-final-dots right\"><\/div>\n    <\/div>\n\n    <div class=\"hoep-final-content\">\n      <div class=\"hoep-final-kicker\">HOEP<\/div>\n      <h2>BE OUR PARTNER<\/h2>\n      <a class=\"hoep-final-btn\" href=\"https:\/\/hoep.sa\/property-search\/\">\n        <span>GET IN TOUCH<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<style>\nhtml,\nbody {\n  max-width: 100% !important;\n  overflow-x: hidden !important;\n  overscroll-behavior-x: none;\n}\n\nbody {\n  background: #f7f7f4 !important;\n}\n\n#hoep-combined-section,\n#hoep-combined-section * {\n  box-sizing: border-box;\n}\n\n#hoep-combined-section {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  overflow-x: clip;\n  color: #071A33;\n  font-family: \"Lama Sans\", \"Poppins\", \"Montserrat\", Arial, sans-serif;\n  isolation: isolate;\n  --mx: 50%;\n  --my: 50%;\n  --moveX: 0px;\n  --moveY: 0px;\n}\n\n\/* BACKGROUND *\/\n.hoep-shared-bg {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 100vw;\n  transform: translateX(-50%);\n  z-index: -10;\n  overflow: hidden;\n  background: #f7f7f4;\n}\n\n\/* FLOW LINES \u2014 inspired by aerodynamic streamlines *\/\n.hoep-flow-lines-wrap {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 100vw;\n  transform: translateX(-50%);\n  z-index: -4;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.hoep-flow-lines-canvas {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 100vh;\n  opacity: .54;\n  mix-blend-mode: multiply;\n  pointer-events: none;\n}\n\n@media (max-width: 767px) {\n  .hoep-flow-lines-canvas {\n    opacity: .44;\n  }\n}\n@media (max-width: 767px) {\n  html,\n  body {\n    max-width: 100%;\n    overflow-x: clip !important;\n  }\n\n  .hoep-combined-section{\n    width: 100%;\n    max-width: 100%;\n    overflow-x: clip !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .hoep-flow-lines-canvas {\n    opacity: .28;\n  }\n}\n\n.hoep-shared-layer {\n  position: absolute;\n  inset: -14%;\n  will-change: transform, opacity;\n}\n\n.hoep-shared-layer.layer-one {\n  background:\n    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.96), transparent 30%),\n    radial-gradient(circle at 12% 18%, rgba(7,26,51,0.34), transparent 31%),\n    radial-gradient(circle at 84% 72%, rgba(196,184,132,0.46), transparent 34%),\n    linear-gradient(120deg, #edf1f3 0%, #ffffff 48%, #f1edde 100%);\n  transform: translate(var(--moveX), var(--moveY)) scale(1.03);\n  animation: hoepBgOne 18s ease-in-out infinite alternate;\n}\n\n.hoep-shared-layer.layer-two {\n  opacity: .55;\n  mix-blend-mode: soft-light;\n  background:\n    radial-gradient(circle at 30% 58%, rgba(219,226,230,0.85), transparent 28%),\n    radial-gradient(circle at 72% 38%, rgba(196,184,132,0.32), transparent 30%),\n    linear-gradient(110deg, rgba(7,26,51,0.10), transparent 38%, rgba(196,184,132,0.18));\n  transform: translate(calc(var(--moveX) * -0.55), calc(var(--moveY) * -0.55)) scale(1.08);\n  animation: hoepBgTwo 22s ease-in-out infinite alternate;\n}\n\n.hoep-shared-dots,\n.hoep-final-dots {\n  position: absolute;\n  width: 460px;\n  height: 460px;\n  opacity: .25;\n  background-image: radial-gradient(rgba(7,26,51,0.42) 1.3px, transparent 1.3px);\n  background-size: 14px 14px;\n  mask-image: radial-gradient(circle, #000 0%, transparent 73%);\n  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 73%);\n  pointer-events: none;\n  animation: hoepDots 16s ease-in-out infinite alternate;\n}\n\n.hoep-shared-dots.dots-left {\n  left: -90px;\n  top: -80px;\n  transform: translate(calc(var(--moveX) * .35), calc(var(--moveY) * .35));\n}\n\n.hoep-shared-dots.dots-right {\n  right: -90px;\n  bottom: -85px;\n  opacity: .22;\n  background-image: radial-gradient(rgba(196,184,132,0.88) 1.35px, transparent 1.35px);\n  transform: translate(calc(var(--moveX) * -.35), calc(var(--moveY) * -.35));\n}\n\n\/* PANELS *\/\n.hoep-intro-panel,\n.hoep-indigo-panel,\n.hoep-corporate-panel,\n.hoep-services-panel {\n  position: relative;\n  width: 100%;\n  min-height: 680px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: clamp(70px, 8vw, 105px) 24px;\n}\n\n.hoep-intro-content,\n.hoep-indigo-heading,\n.hoep-corporate-heading,\n.hoep-services-heading {\n  position: relative;\n  width: min(1180px, 92%);\n  max-width: 100%;\n  margin: 0 auto;\n  text-align: center;\n  z-index: 5;\n}\n\n\/* TITLES *\/\n.hoep-kicker,\n.hoep-final-kicker {\n  font-size: clamp(12px, 1vw, 15px);\n  line-height: 1;\n  letter-spacing: 10px;\n  color: rgba(196,184,132,0.92);\n  font-weight: 500;\n  margin-bottom: 28px;\n  transform: translateY(12px);\n  opacity: 0;\n  animation: hoepTextReveal .8s ease forwards .15s;\n}\n\n.hoep-intro-content h2,\n.hoep-indigo-heading h2,\n.hoep-corporate-heading h2,\n.hoep-services-heading h2 {\n  position: relative;\n  display: inline-block;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 6px 8px;\n  overflow: hidden;\n  font-size: clamp(42px, 5.4vw, 78px);\n  line-height: 1;\n  font-weight: 500;\n  letter-spacing: clamp(8px, 1vw, 13px);\n  color: rgba(7,26,51,0.88);\n  text-align: center;\n  white-space: nowrap;\n  transform: translateY(16px);\n  opacity: 0;\n  animation: hoepTextReveal .9s ease forwards .28s;\n}\n\n.hoep-intro-content h2::after,\n.hoep-indigo-heading h2::after,\n.hoep-corporate-heading h2::after,\n.hoep-services-heading h2::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  background: linear-gradient(90deg, #071A33 0%, #0A2344 42%, #c8bd83 100%);\n  transform: translateX(0);\n  transform-origin: left center;\n  box-shadow: 0 0 28px rgba(200,189,131,0.30);\n  pointer-events: none;\n}\n\n.hoep-motion-panel.is-title-revealed h2::after {\n  animation: hoepTitleCoverReveal 1.05s cubic-bezier(.72,0,.16,1) forwards .12s;\n}\n\n.hoep-intro-content h2 .hoep-intro-title-cover {\n  position: absolute;\n  inset: 0;\n  z-index: 8;\n  display: block;\n  background: linear-gradient(90deg, #071A33 0%, #0A2344 42%, #c8bd83 100%);\n  transform: translateX(0);\n  transform-origin: left center;\n  box-shadow: 0 0 28px rgba(200,189,131,0.30);\n  pointer-events: none;\n}\n\n.hoep-motion-panel.is-title-revealed .hoep-intro-content h2 .hoep-intro-title-cover {\n  animation: hoepTitleCoverReveal 1.05s cubic-bezier(.72,0,.16,1) forwards .12s;\n}\n\n#hoep-combined-section .hoep-intro-panel:not(.is-title-revealed) .hoep-intro-content h2::after,\n#hoep-combined-section .hoep-intro-panel:not(.is-title-revealed) .hoep-intro-content h2 .hoep-intro-title-cover {\n  transform: translateX(0) !important;\n  animation: none !important;\n}\n\n#hoep-combined-section .hoep-intro-panel.is-title-revealed .hoep-intro-content h2 .hoep-intro-title-cover {\n  transform: translateX(0);\n  animation: hoepTitleCoverReveal 1.05s cubic-bezier(.72,0,.16,1) forwards .12s !important;\n}\n\n\/* \u0627\u0644\u062e\u0637 \u0627\u0644\u0644\u064a \u062a\u062d\u062a \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u064a\u0638\u0647\u0631 \u0645\u0639 \u0627\u0644\u062d\u0631\u0643\u0629 \u062b\u0645 \u064a\u062e\u062a\u0641\u064a *\/\n.hoep-title-line {\n  position: relative;\n  width: min(620px, 75%);\n  height: 2px;\n  margin: 26px auto 42px;\n  overflow: visible;\n  background: linear-gradient(90deg, transparent, rgba(196,184,132,0.95), transparent);\n  transform: scaleX(0);\n  transform-origin: center;\n  opacity: 0;\n}\n\n.hoep-motion-panel.is-title-revealed .hoep-title-line {\n  animation: hoepLineRevealHide 1.35s ease forwards .42s;\n}\n\n.hoep-title-line::before {\n  content: \"\";\n  position: absolute;\n  top: -8px;\n  left: 0%;\n  width: clamp(34px, 5vw, 64px);\n  height: 7px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, #071A33, #c8bd83);\n  box-shadow: 0 0 18px rgba(200,189,131,0.42);\n  transform: translateX(-50%) scaleX(.65);\n  opacity: 0;\n}\n\n.hoep-motion-panel.is-title-revealed .hoep-title-line::before {\n  animation: hoepTitleRunnerHide 1.25s cubic-bezier(.72,0,.16,1) forwards .40s;\n}\n\n.hoep-title-line::after {\n  content: \"\";\n  position: absolute;\n  top: -10px;\n  left: 0%;\n  width: 110px;\n  height: 11px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, transparent, rgba(200,189,131,.28), transparent);\n  filter: blur(6px);\n  transform: translateX(-50%) scaleX(.65);\n  opacity: 0;\n}\n\n.hoep-motion-panel.is-title-revealed .hoep-title-line::after {\n  animation: hoepTitleRunnerGlowHide 1.25s cubic-bezier(.72,0,.16,1) forwards .40s;\n}\n\n\/* INTRO *\/\n.hoep-intro-text {\n  width: min(1060px, 100%);\n  margin: 0 auto;\n}\n\n.hoep-intro-text p {\n  margin: 0 auto 26px;\n  color: rgba(7,26,51,0.84);\n  font-size: clamp(18px, 1.65vw, 26px);\n  line-height: 1.55;\n  font-weight: 400;\n  max-width: 1100px;\n  transform: translateY(14px);\n  opacity: 0;\n}\n\n.hoep-intro-text p:nth-child(1) { animation: hoepTextReveal .85s ease forwards .75s; }\n.hoep-intro-text p:nth-child(2) { animation: hoepTextReveal .85s ease forwards .95s; }\n\n\/* BUTTON *\/\n.hoep-learn-btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  min-width: 205px;\n  min-height: 64px;\n  margin-top: 28px;\n  padding: 0 34px;\n  overflow: hidden;\n  text-decoration: none !important;\n  border-radius: 6px;\n  background:\n    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.14), transparent 36%),\n    linear-gradient(135deg, #071A33 0%, #0A2344 48%, #102E55 100%);\n  box-shadow:\n    0 18px 40px rgba(7,26,51,0.28),\n    0 0 0 1px rgba(196,184,132,0.16),\n    inset 0 0 0 1px rgba(255,255,255,0.12);\n  transform: translateY(16px);\n  opacity: 0;\n  animation: hoepButtonReveal .9s ease forwards 1.15s, hoepButtonFloat 4.8s ease-in-out infinite 2s;\n}\n\n.hoep-learn-btn .btn-text {\n  position: relative;\n  z-index: 3;\n  color: #fff;\n  font-size: 14px;\n  line-height: 1;\n  letter-spacing: 7px;\n  font-weight: 500;\n}\n\n.hoep-learn-btn .btn-dot {\n  position: relative;\n  z-index: 3;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #c8bd83;\n  box-shadow: 0 0 14px rgba(200,189,131,0.9);\n  animation: hoepDotPulse 1.6s ease-in-out infinite;\n}\n\n.hoep-learn-btn .btn-shine {\n  position: absolute;\n  inset: -40%;\n  z-index: 2;\n  background: linear-gradient(120deg, transparent 0%, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%, transparent 100%);\n  transform: translateX(-75%) rotate(8deg);\n  animation: hoepButtonShine 3.4s ease-in-out infinite 1.6s;\n}\n\n\/* UI *\/\n.hoep-logo-ui,\n.hoep-services-ui {\n  position: relative;\n  z-index: 8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n}\n.hoep-logo-btn,\n.hoep-service-btn {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 1px solid rgba(7,26,51,0.18);\n  background: rgba(255,255,255,0.38);\n  color: #071A33;\n  font-size: 34px;\n  line-height: 1;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition: transform .25s ease, background .25s ease;\n}\n\n\/* Prevent Elementor\/theme button pseudo-elements from duplicating arrows *\/\n#hoep-combined-section .hoep-logo-btn::before,\n#hoep-combined-section .hoep-logo-btn::after,\n#hoep-combined-section .hoep-service-btn::before,\n#hoep-combined-section .hoep-service-btn::after {\n  content: none !important;\n  display: none !important;\n}\n#hoep-combined-section .hoep-logo-btn > span,\n#hoep-combined-section .hoep-service-btn > span {\n  display: block;\n  width: 1em;\n  line-height: 1;\n  text-align: center;\n  font: inherit;\n  color: inherit;\n  pointer-events: none;\n}\n.hoep-logo-btn:hover,\n.hoep-service-btn:hover {\n  transform: translateY(-2px);\n  background: rgba(255,255,255,0.68);\n}\n.hoep-logo-dots,\n.hoep-service-dots {\n  display: flex;\n  gap: 10px;\n}\n.hoep-logo-dots span,\n.hoep-service-dots span {\n  width: 28px;\n  height: 4px;\n  border-radius: 20px;\n  background: rgba(7,26,51,0.18);\n  transition: background .35s ease, width .35s ease;\n}\n.hoep-logo-dots span.active,\n.hoep-service-dots span.active {\n  width: 44px;\n  background: #c8bd83;\n}\n\n\/* INDIGO BEACH *\/\n.hoep-indigo-panel {\n  min-height: auto;\n  flex-direction: column;\n  padding-top: clamp(70px, 7vw, 100px);\n  padding-bottom: clamp(90px, 9vw, 130px);\n}\n\n.hoep-indigo-heading {\n  margin-bottom: clamp(28px, 4vw, 48px);\n}\n\n.hoep-indigo-heading .hoep-kicker {\n  margin-bottom: 18px;\n}\n\n.hoep-indigo-heading h2 {\n  font-size: clamp(34px, 4.4vw, 64px);\n  letter-spacing: clamp(4px, .8vw, 11px);\n}\n\n.hoep-indigo-heading .hoep-title-line {\n  margin: 22px auto 8px;\n}\n\n.hoep-indigo-video-shell {\n  position: relative;\n  width: min(1180px, 92%);\n  aspect-ratio: 16 \/ 9;\n  margin: 0 auto;\n  overflow: hidden;\n  border-radius: 20px;\n  background: #071A33;\n  box-shadow:\n    0 34px 80px rgba(7,26,51,.20),\n    0 0 0 1px rgba(196,184,132,.18),\n    inset 0 0 0 1px rgba(255,255,255,.10);\n}\n\n.hoep-indigo-video {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n  background: #071A33;\n}\n\n.hoep-indigo-video-shade {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: linear-gradient(180deg, rgba(7,26,51,.10), rgba(7,26,51,.02) 52%, rgba(7,26,51,.24));\n  transition: opacity .35s ease;\n}\n\n.hoep-indigo-play {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  z-index: 4;\n  width: clamp(66px, 7vw, 96px);\n  height: clamp(66px, 7vw, 96px);\n  padding: 0;\n  border: 1px solid rgba(255,255,255,.78);\n  border-radius: 50%;\n  background: rgba(7,26,51,.46);\n  box-shadow: 0 18px 46px rgba(0,0,0,.25), inset 0 0 0 1px rgba(196,184,132,.20);\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: opacity .3s ease, transform .3s ease, background .3s ease;\n}\n\n.hoep-indigo-play:hover {\n  transform: translate(-50%, -50%) scale(1.08);\n  background: rgba(7,26,51,.68);\n}\n\n.hoep-indigo-play span {\n  position: absolute;\n  left: 52%;\n  top: 50%;\n  width: 0;\n  height: 0;\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-left: 16px solid #fff;\n  transform: translate(-42%, -50%);\n}\n\n.hoep-indigo-video-shell.is-playing .hoep-indigo-play {\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, -50%) scale(.86);\n}\n\n.hoep-indigo-video-shell.is-playing .hoep-indigo-video-shade {\n  opacity: 0;\n}\n\n.hoep-indigo-video:fullscreen,\n.hoep-indigo-video:-webkit-full-screen {\n  width: 100vw;\n  height: 100vh;\n  border: 0;\n  border-radius: 0;\n  background: #000;\n  object-fit: contain;\n}\n\n.hoep-indigo-video::backdrop {\n  background: #000;\n}\n\n\/* CORPORATE *\/\n.hoep-corporate-panel {\n  min-height: 720px;\n  flex-direction: column;\n  padding-top: clamp(60px, 6vw, 90px);\n  padding-bottom: clamp(80px, 8vw, 120px);\n}\n\n.hoep-corporate-heading { margin-bottom: 0; }\n\n.hoep-corporate-heading h2 {\n  font-size: clamp(34px, 4.4vw, 64px);\n  letter-spacing: clamp(4px, .8vw, 11px);\n  margin-bottom: 18px;\n}\n\n.hoep-corporate-heading .hoep-title-line { margin: 18px auto 18px; }\n\n.hoep-logo-carousel {\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  min-height: 430px;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: 8px;\n  padding: clamp(34px, 4vw, 58px) clamp(28px, 8vw, 120px) clamp(28px, 3vw, 44px);\n  perspective: 1400px;\n  border-top: 1px solid rgba(7, 26, 51, 0.055);\n  border-bottom: 1px solid rgba(7, 26, 51, 0.055);\n  border-left: none;\n  border-right: none;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16)),\n    radial-gradient(circle at 20% 18%, rgba(7,26,51,0.035), transparent 36%),\n    radial-gradient(circle at 82% 78%, rgba(196,184,132,0.13), transparent 38%);\n  box-shadow:\n    0 28px 80px rgba(7, 26, 51, 0.045),\n    inset 0 1px 0 rgba(255,255,255,0.34),\n    inset 0 -1px 0 rgba(255,255,255,0.34);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  overflow: hidden;\n}\n\n.hoep-logo-carousel::before {\n  display: none !important;\n  content: none !important;\n}\n\n.hoep-logo-carousel::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(90deg, transparent, rgba(196,184,132,0.08), transparent);\n  opacity: .26;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.hoep-logo-track,\n.hoep-logo-ui,\n.hoep-spark-field {\n  position: relative;\n  z-index: 4;\n}\n\n.hoep-logo-track {\n  width: min(1180px, 92vw);\n  min-height: 325px;\n  margin-left: auto;\n  margin-right: auto;\n  transform-style: preserve-3d;\n}\n\n.hoep-logo-ui {\n  width: min(1180px, 92vw);\n  margin: -4px auto 0;\n}\n\n.hoep-logo-card {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: min(610px, 39vw);\n  height: 320px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transform-style: preserve-3d;\n  transition: transform .85s cubic-bezier(.2,.8,.2,1), opacity .5s ease, filter .5s ease;\n  pointer-events: none;\n}\n\n.hoep-logo-card img {\n  max-width: 100%;\n  max-height: 285px;\n  object-fit: contain;\n  display: block;\n  filter:\n    brightness(0)\n    saturate(100%)\n    invert(8%)\n    sepia(41%)\n    saturate(1531%)\n    hue-rotate(184deg)\n    brightness(92%)\n    contrast(101%);\n  opacity: .98;\n  transition: filter .6s ease, transform .6s ease, opacity .6s ease;\n}\n\n.hoep-logo-card.logo-1 img { transform: scale(1.60); }\n.hoep-logo-card.logo-2 img { transform: scale(1.75); }\n.hoep-logo-card.logo-3 img { transform: scale(1.70); }\n.hoep-logo-card.logo-4 img { transform: scale(1.70); }\n.hoep-logo-card.logo-5 img { transform: scale(1.90); }\n.hoep-logo-card.logo-6 img { transform: scale(1.90); }\n\n.hoep-logo-card.is-logo-active img { animation: hoepLogoNavyGold .65s ease both; }\n\n.hoep-logo-card.is-l1 {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(-123%, -50%) rotateY(7deg) translateZ(40px) scale(1.08);\n}\n\n.hoep-logo-card.is-l2 {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(-50%, -50%) rotateY(0deg) translateZ(90px) scale(1.20);\n}\n\n.hoep-logo-card.is-l3 {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translate(23%, -50%) rotateY(-7deg) translateZ(40px) scale(1.08);\n}\n\n.hoep-logo-card.is-logo-prev {\n  opacity: .07;\n  filter: blur(1.5px);\n  transform: translate(-210%, -50%) rotateY(38deg) translateZ(-90px) scale(.9);\n}\n\n.hoep-logo-card.is-logo-next {\n  opacity: .07;\n  filter: blur(1.5px);\n  transform: translate(110%, -50%) rotateY(-38deg) translateZ(-90px) scale(.9);\n}\n\n.hoep-logo-card.is-logo-hidden {\n  opacity: 0;\n  transform: translate(-50%, -50%) rotateY(90deg) translateZ(-180px) scale(.8);\n}\n\n.hoep-spark-field {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: 0;\n}\n\n.hoep-logo-carousel.is-sparking .hoep-spark-field { opacity: .35; }\n\n.hoep-spark-field span {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: rgba(200,189,131,0.62);\n  box-shadow: 0 0 6px rgba(200,189,131,0.45);\n  opacity: 0;\n}\n\n.hoep-logo-carousel.is-sparking .hoep-spark-field span { animation: hoepSpark .42s ease-out forwards; }\n\n.hoep-spark-field span:nth-child(1) { --x: -125px; --y: -30px; animation-delay: .02s; }\n.hoep-spark-field span:nth-child(2) { --x: -65px; --y: 34px; animation-delay: .05s; }\n.hoep-spark-field span:nth-child(3) { --x: 0px; --y: -42px; animation-delay: .07s; }\n.hoep-spark-field span:nth-child(4) { --x: 62px; --y: 33px; animation-delay: .03s; }\n.hoep-spark-field span:nth-child(5) { --x: 118px; --y: -26px; animation-delay: .06s; }\n.hoep-spark-field span:nth-child(6) { --x: 14px; --y: 50px; animation-delay: .025s; }\n\n\/* CORPORATE SCROLL VELOCITY *\/\n.hoep-scroll-velocity {\n  position: relative;\n  z-index: 7;\n  width: 100%;\n  max-width: 100%;\n  margin: clamp(54px, 5.5vw, 86px) 0 0;\n  padding: clamp(8px, 1.1vw, 14px) 0 clamp(12px, 1.4vw, 18px);\n  overflow: hidden;\n  isolation: isolate;\n  pointer-events: none;\n}\n\n.hoep-scroll-velocity::before,\n.hoep-scroll-velocity::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 5;\n  width: min(18vw, 190px);\n  pointer-events: none;\n}\n\n.hoep-scroll-velocity::before {\n  left: 0;\n  background: linear-gradient(90deg, #f7f7f4 0%, rgba(247,247,244,0) 100%);\n}\n\n.hoep-scroll-velocity::after {\n  right: 0;\n  background: linear-gradient(270deg, #f7f7f4 0%, rgba(247,247,244,0) 100%);\n}\n\n.hoep-velocity-row {\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  transform: translateZ(0);\n  will-change: transform;\n}\n\n.hoep-velocity-row-two {\n  margin-top: clamp(4px, .55vw, 8px);\n  opacity: 1;\n}\n\n.hoep-velocity-track {\n  display: inline-flex;\n  align-items: center;\n  gap: clamp(12px, 1.35vw, 24px);\n  white-space: nowrap;\n  transform: translate3d(0,0,0);\n  will-change: transform;\n}\n\n.hoep-velocity-track span {\n  display: inline-block;\n  color: rgba(7,26,51,.86);\n  font-size: clamp(16px, 2.35vw, 36px);\n  line-height: 1;\n  font-weight: 500;\n  letter-spacing: clamp(3px, .45vw, 7px);\n  text-transform: uppercase;\n  font-family: \"Lama Sans\", \"Poppins\", \"Montserrat\", Arial, sans-serif;\n}\n\n.hoep-velocity-row-two .hoep-velocity-track span {\n  color: rgba(7,26,51,.86);\n  -webkit-text-stroke: 0;\n}\n\n.hoep-velocity-track i {\n  width: clamp(5px, .55vw, 9px);\n  height: clamp(5px, .55vw, 9px);\n  flex: 0 0 auto;\n  border-radius: 999px;\n  background: #c8bd83;\n  box-shadow: 0 0 18px rgba(200,189,131,.42);\n}\n\n.hoep-scroll-velocity .hoep-velocity-row {\n  opacity: 0;\n  transform: translate3d(0, 10px, 0);\n  transition: opacity .55s ease, transform .55s ease;\n}\n\n.hoep-scroll-velocity.is-visible .hoep-velocity-row {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n\n\/* LATEST INSIGHTS ICON LOOP *\/\n.hoep-insight-icon-loop {\n  position: relative;\n  width: 58px;\n  height: 58px;\n  margin: 0 auto 20px;\n  opacity: 0;\n  transform: translateY(10px) scale(.96);\n  animation: hoepTextReveal .75s ease forwards .12s;\n}\n\n.hoep-insight-icon-loop img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n  filter:\n    brightness(0)\n    saturate(100%)\n    invert(8%)\n    sepia(41%)\n    saturate(1531%)\n    hue-rotate(184deg)\n    brightness(92%)\n    contrast(101%);\n  opacity: 0;\n  transform: scale(.72) rotate(-5deg);\n  animation: hoepInsightIconSwap 3.2s infinite;\n}\n\n.hoep-insight-icon-loop img:nth-child(1) { animation-delay: 0s; }\n.hoep-insight-icon-loop img:nth-child(2) { animation-delay: .8s; }\n.hoep-insight-icon-loop img:nth-child(3) { animation-delay: 1.6s; }\n.hoep-insight-icon-loop img:nth-child(4) { animation-delay: 2.4s; }\n\n@keyframes hoepInsightIconSwap {\n  0% {\n    opacity: 0;\n    transform: scale(.72) rotate(-5deg);\n    filter:\n      brightness(0)\n      saturate(100%)\n      invert(8%)\n      sepia(41%)\n      saturate(1531%)\n      hue-rotate(184deg)\n      brightness(92%)\n      contrast(101%);\n  }\n\n  8% {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n\n  18% {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n\n  24% {\n    opacity: 0;\n    transform: scale(.84) rotate(5deg);\n    filter:\n      brightness(0)\n      saturate(100%)\n      invert(70%)\n      sepia(24%)\n      saturate(420%)\n      hue-rotate(8deg)\n      brightness(92%)\n      contrast(88%);\n  }\n\n  100% {\n    opacity: 0;\n    transform: scale(.72) rotate(-5deg);\n  }\n}\n\n\/* SERVICES *\/\n.hoep-services-panel {\n  flex-direction: column;\n  min-height: 760px;\n  padding: clamp(55px, 7vw, 90px) 24px clamp(75px, 8vw, 110px);\n}\n\n.hoep-services-heading {\n  width: min(1040px, 92%);\n  margin-bottom: clamp(36px, 4vw, 55px);\n}\n\n.hoep-services-heading .hoep-kicker { margin-bottom: 18px; }\n\n.hoep-services-heading h2 {\n  font-size: clamp(30px, 3.6vw, 52px);\n  line-height: 1.08;\n  letter-spacing: clamp(5px, .75vw, 10px);\n}\n\n.hoep-services-heading .hoep-title-line {\n  margin: 22px auto 0;\n  width: min(520px, 70%);\n}\n\n.hoep-services-carousel {\n  position: relative;\n  width: min(1220px, 94%);\n  min-height: 620px;\n  perspective: 1500px;\n  margin: 0 auto;\n  overflow: hidden;\n}\n\n.hoep-services-track {\n  position: relative;\n  width: 100%;\n  min-height: 545px;\n  transform-style: preserve-3d;\n}\n\n.hoep-service-card {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: min(560px, 45vw);\n  min-height: 470px;\n  overflow: hidden !important;\n  border-radius: 16px !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transform-style: preserve-3d;\n  transition: transform .85s cubic-bezier(.2,.8,.2,1), opacity .55s ease, filter .55s ease;\n  pointer-events: none;\n  box-shadow: 0 32px 70px rgba(7,26,51,0.18);\n}\n\n.hoep-service-card img {\n  position: absolute;\n  inset: 0;\n  z-index: -3;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit !important;\n  transform: scale(1.04);\n  transition: transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease;\n}\n\n.hoep-service-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: -2;\n  border-radius: inherit !important;\n  background:\n    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.07), transparent 28%),\n    linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.67));\n}\n\n.hoep-service-card::after {\n  display: none !important;\n  content: none !important;\n}\n\n.hoep-service-content {\n  position: relative;\n  z-index: 3;\n  width: min(520px, 88%);\n  text-align: center;\n  color: #fff;\n  transform: translateY(10px);\n  opacity: 0;\n  animation: hoepTextReveal .85s ease forwards .22s;\n}\n\n.hoep-service-content span {\n  display: block;\n  margin-bottom: 16px;\n  font-size: clamp(10px, .78vw, 12px);\n  letter-spacing: 8px;\n  font-weight: 500;\n  color: rgba(255,255,255,0.88);\n}\n\n.hoep-service-content h3 {\n  margin: 0 0 28px;\n  color: #fff;\n  font-size: clamp(25px, 2.35vw, 36px);\n  line-height: 1.14;\n  letter-spacing: clamp(4px, .48vw, 7px);\n  font-weight: 400;\n  text-transform: uppercase;\n}\n\n.hoep-service-content a {\n  position: relative;\n  display: inline-flex;\n  min-width: 210px;\n  min-height: 56px;\n  align-items: center;\n  justify-content: center;\n  padding: 0 26px;\n  border: 1px solid rgba(255,255,255,0.82);\n  border-radius: 4px;\n  color: #fff !important;\n  text-decoration: none !important;\n  font-size: 12px;\n  letter-spacing: 6px;\n  font-weight: 500;\n  overflow: hidden;\n  background: rgba(255,255,255,0.03);\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  transition: transform .3s ease, border-color .3s ease, background .3s ease;\n}\n\n.hoep-service-content a::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(120deg, transparent, rgba(196,184,132,0.25), transparent);\n  transform: translateX(-110%);\n  transition: transform .65s ease;\n}\n\n.hoep-service-content a:hover {\n  transform: translateY(-3px);\n  border-color: #c8bd83;\n  background: rgba(7,26,51,0.18);\n}\n\n.hoep-service-content a:hover::before { transform: translateX(110%); }\n\n.hoep-disabled-link {\n  pointer-events: none;\n  cursor: default;\n  opacity: .78;\n}\n\n.hoep-service-card.is-service-left,\n.hoep-service-card.is-service-right {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.hoep-service-card.is-service-left { transform: translateX(-105%) rotateY(10deg) translateZ(50px); }\n.hoep-service-card.is-service-right { transform: translateX(5%) rotateY(-10deg) translateZ(50px); }\n.hoep-service-card.is-service-prev { opacity: .16; filter: blur(2px); transform: translateX(-168%) rotateY(38deg) translateZ(-110px) scale(.86); }\n.hoep-service-card.is-service-next { opacity: .16; filter: blur(2px); transform: translateX(68%) rotateY(-38deg) translateZ(-110px) scale(.86); }\n.hoep-service-card.is-service-hidden { opacity: 0; transform: translateX(-50%) rotateY(90deg) translateZ(-220px) scale(.78); }\n\n\/* FINAL *\/\n.hoep-final-cta-panel {\n  position: relative;\n  width: 100%;\n  min-height: 640px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.hoep-final-bg {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.hoep-final-bg img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n  transform: scale(1.04);\n  animation: hoepFinalImageMove 16s ease-in-out infinite alternate;\n}\n\n.hoep-final-overlay {\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.12), transparent 26%),\n    linear-gradient(90deg, rgba(7,26,51,0.70), rgba(7,26,51,0.42), rgba(7,26,51,0.62)),\n    linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.32));\n  z-index: 2;\n}\n\n.hoep-final-dots {\n  z-index: 3;\n  background-image: radial-gradient(rgba(255,255,255,0.75) 1.4px, transparent 1.4px);\n}\n\n.hoep-final-dots.left { left: -95px; top: -80px; }\n.hoep-final-dots.right {\n  right: -95px;\n  bottom: -85px;\n  background-image: radial-gradient(rgba(196,184,132,0.85) 1.4px, transparent 1.4px);\n}\n\n.hoep-final-content {\n  position: relative;\n  z-index: 5;\n  text-align: center;\n  width: min(920px, 92%);\n  margin: 0 auto;\n  color: #fff;\n}\n\n.hoep-final-kicker { color: rgba(255,255,255,0.86); }\n\n.hoep-final-content h2 {\n  margin: 0 auto 48px;\n  color: #fff;\n  font-size: clamp(42px, 5vw, 76px);\n  line-height: 1;\n  font-weight: 400;\n  letter-spacing: clamp(7px, 1vw, 14px);\n  text-transform: uppercase;\n  opacity: 0;\n  animation: hoepTextReveal 1s ease forwards .18s;\n}\n\n.hoep-final-btn {\n  position: relative;\n  display: inline-flex;\n  min-width: 210px;\n  min-height: 62px;\n  align-items: center;\n  justify-content: center;\n  padding: 0 36px;\n  color: #fff !important;\n  text-decoration: none !important;\n  border: 1px solid rgba(255,255,255,0.78);\n  border-radius: 5px;\n  overflow: hidden;\n  background: rgba(255,255,255,0.035);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  transition: transform .3s ease, border-color .3s ease, background .3s ease;\n  opacity: 0;\n  animation: hoepButtonReveal .9s ease forwards .35s;\n}\n\n.hoep-final-btn span {\n  position: relative;\n  z-index: 2;\n  font-size: 13px;\n  letter-spacing: 7px;\n  font-weight: 500;\n}\n\n.hoep-final-btn::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(120deg, transparent, rgba(196,184,132,0.28), transparent);\n  transform: translateX(-110%);\n  transition: transform .7s ease;\n}\n\n.hoep-final-btn:hover {\n  transform: translateY(-4px);\n  border-color: #c8bd83;\n  background: rgba(7,26,51,0.22);\n}\n\n.hoep-final-btn:hover::before { transform: translateX(110%); }\n\n\/* ANIMATIONS *\/\n@keyframes hoepTextReveal {\n  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }\n  to { opacity: 1; transform: translateY(0); filter: blur(0); }\n}\n\n@keyframes hoepVelocityFadeIn {\n  from { opacity: 0; transform: translate3d(0, 14px, 0); }\n  to { opacity: 1; transform: translate3d(0, 0, 0); }\n}\n\n@keyframes hoepTitleCoverReveal {\n  0% {\n    transform: translateX(0);\n  }\n\n  100% {\n    transform: translateX(108%);\n  }\n}\n\n@keyframes hoepLineRevealHide {\n  0% {\n    transform: scaleX(0);\n    opacity: 0;\n  }\n\n  28% {\n    transform: scaleX(1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scaleX(1);\n    opacity: 1;\n  }\n\n  100% {\n    transform: scaleX(1);\n    opacity: 0;\n  }\n}\n\n@keyframes hoepTitleRunnerHide {\n  0% {\n    opacity: 0;\n    left: 0%;\n    transform: translateX(-50%) scaleX(.65);\n  }\n\n  18% {\n    opacity: 1;\n  }\n\n  72% {\n    opacity: .95;\n    left: 100%;\n    transform: translateX(-50%) scaleX(1);\n  }\n\n  100% {\n    opacity: 0;\n    left: 100%;\n    transform: translateX(-50%) scaleX(1);\n  }\n}\n\n@keyframes hoepTitleRunnerGlowHide {\n  0% {\n    opacity: 0;\n    left: 0%;\n    transform: translateX(-50%) scaleX(.65);\n  }\n\n  18% {\n    opacity: .75;\n  }\n\n  72% {\n    opacity: .55;\n    left: 100%;\n    transform: translateX(-50%) scaleX(1.25);\n  }\n\n  100% {\n    opacity: 0;\n    left: 100%;\n    transform: translateX(-50%) scaleX(1.25);\n  }\n}\n\n@keyframes hoepRunnerIdle {\n  0%, 100% { opacity: .75; }\n  50% { opacity: 1; box-shadow: 0 0 26px rgba(200,189,131,0.55); }\n}\n\n@keyframes hoepButtonReveal {\n  from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(5px); }\n  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }\n}\n\n@keyframes hoepButtonFloat {\n  0%, 100% { translate: 0 0; }\n  50% { translate: 0 -4px; }\n}\n\n@keyframes hoepButtonShine {\n  0% { transform: translateX(-80%) rotate(8deg); }\n  45%, 100% { transform: translateX(80%) rotate(8deg); }\n}\n\n@keyframes hoepDotPulse {\n  0%, 100% { transform: scale(1); opacity: .75; }\n  50% { transform: scale(1.45); opacity: 1; }\n}\n\n@keyframes hoepBgOne {\n  from { transform: translate(var(--moveX), var(--moveY)) scale(1.03); }\n  to { transform: translate(calc(var(--moveX) + 26px), calc(var(--moveY) - 20px)) scale(1.08); }\n}\n\n@keyframes hoepBgTwo {\n  from { transform: translate(calc(var(--moveX) * -0.55), calc(var(--moveY) * -0.55)) scale(1.08); }\n  to { transform: translate(calc((var(--moveX) * -0.55) - 30px), calc((var(--moveY) * -0.55) + 24px)) scale(1.13); }\n}\n\n@keyframes hoepDots {\n  from { opacity: .19; }\n  to { opacity: .32; }\n}\n\n@keyframes hoepLogoNavyGold {\n  0% {\n    filter: brightness(0) saturate(100%) invert(8%) sepia(41%) saturate(1531%) hue-rotate(184deg) brightness(92%) contrast(101%);\n  }\n  45% {\n    filter: brightness(0) saturate(100%) invert(70%) sepia(24%) saturate(420%) hue-rotate(8deg) brightness(92%) contrast(88%);\n  }\n  100% {\n    filter: brightness(0) saturate(100%) invert(8%) sepia(41%) saturate(1531%) hue-rotate(184deg) brightness(92%) contrast(101%);\n  }\n}\n\n@keyframes hoepSpark {\n  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }\n  25% { opacity: .65; }\n  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }\n}\n\n@keyframes hoepFinalImageMove {\n  from { transform: scale(1.04) translate(0, 0); }\n  to { transform: scale(1.10) translate(-18px, -12px); }\n}\n\n\/* TABLET *\/\n@media (max-width: 1024px) {\n  .hoep-intro-panel,\n  .hoep-indigo-panel {\n    min-height: 620px;\n    padding: 74px 20px;\n  }\n\n  .hoep-intro-content h2,\n  .hoep-indigo-heading h2,\n  .hoep-corporate-heading h2 {\n    font-size: clamp(36px, 6.2vw, 58px);\n    letter-spacing: clamp(6px, .9vw, 10px);\n  }\n\n  .hoep-services-heading h2 {\n    font-size: clamp(30px, 4.6vw, 46px);\n    letter-spacing: clamp(4px, .75vw, 8px);\n  }\n\n  .hoep-intro-text p {\n    font-size: clamp(17px, 2.1vw, 22px);\n  }\n\n  .hoep-corporate-panel {\n    min-height: 650px;\n    padding-top: 55px;\n    padding-bottom: 75px;\n  }\n\n  .hoep-indigo-panel {\n    min-height: auto;\n    padding-top: 65px;\n    padding-bottom: 95px;\n  }\n\n  .hoep-indigo-video-shell {\n    width: min(920px, 94%);\n    border-radius: 17px;\n  }\n\n  .hoep-logo-carousel {\n    min-height: 390px;\n    padding: 34px clamp(22px, 6vw, 70px) 32px;\n  }\n\n  .hoep-logo-track,\n  .hoep-logo-ui {\n    width: min(920px, 92vw);\n  }\n\n  .hoep-logo-track { min-height: 300px; }\n\n  .hoep-logo-card {\n    width: min(500px, 42vw);\n    height: 270px;\n  }\n\n  .hoep-logo-card img { max-height: 245px; }\n\n  .hoep-services-panel {\n    min-height: 700px;\n    padding: 65px 18px 90px;\n  }\n\n  .hoep-services-carousel {\n    width: 96%;\n    min-height: 560px;\n  }\n\n  .hoep-services-track { min-height: 490px; }\n\n  .hoep-service-card {\n    width: 45vw;\n    min-height: 425px;\n    border-radius: 16px !important;\n  }\n\n  .hoep-final-cta-panel { min-height: 560px; }\n}\n\n\/* MOBILE *\/\n@media (max-width: 767px) {\n  .hoep-intro-panel {\n    min-height: 720px;\n    padding: 70px 10px;\n  }\n\n  .hoep-indigo-panel {\n    min-height: auto;\n    padding: 62px 10px 82px;\n  }\n\n  .hoep-services-panel {\n    min-height: 665px;\n    padding: 58px 8px 78px;\n  }\n\n  .hoep-intro-content,\n  .hoep-indigo-heading,\n  .hoep-corporate-heading,\n  .hoep-services-heading {\n    width: 100%;\n    max-width: 100%;\n    padding: 0 8px;\n  }\n\n  .hoep-kicker,\n  .hoep-final-kicker {\n    font-size: 11px;\n    letter-spacing: 6px;\n    margin-bottom: 20px;\n  }\n\n  .hoep-intro-content h2,\n  .hoep-indigo-heading h2 {\n    font-size: clamp(27px, 7.5vw, 34px);\n    letter-spacing: clamp(3px, 1vw, 5px);\n    line-height: 1.1;\n    white-space: nowrap;\n  }\n\n  .hoep-title-line {\n    width: 70%;\n    margin: 22px auto 30px;\n  }\n\n  .hoep-title-line::before {\n    top: -7px;\n    height: 6px;\n    width: 42px;\n  }\n\n  .hoep-title-line::after {\n    top: -9px;\n    width: 84px;\n  }\n\n  .hoep-intro-text {\n    max-width: 340px;\n  }\n\n  .hoep-intro-text p {\n    font-size: clamp(15px, 4.05vw, 17px);\n    line-height: 1.55;\n    margin-bottom: 22px;\n  }\n\n  .hoep-learn-btn {\n    min-width: 188px;\n    min-height: 58px;\n    margin-top: 18px;\n    padding: 0 26px;\n  }\n\n  .hoep-learn-btn .btn-text {\n    font-size: 12px;\n    letter-spacing: 6px;\n  }\n\n  .hoep-shared-dots {\n    width: 310px;\n    height: 310px;\n  }\n\n  .hoep-shared-dots.dots-left {\n    left: -115px;\n    top: -65px;\n  }\n\n  .hoep-shared-dots.dots-right {\n    right: -120px;\n    bottom: -70px;\n  }\n\n  .hoep-indigo-heading {\n    margin-bottom: 28px;\n  }\n\n  .hoep-indigo-heading h2 {\n    font-size: clamp(19px, 5.6vw, 27px);\n    letter-spacing: clamp(1.5px, .65vw, 3px);\n    white-space: nowrap;\n  }\n\n  .hoep-indigo-heading .hoep-title-line {\n    width: 62%;\n    margin: 20px auto 4px;\n  }\n\n  .hoep-indigo-video-shell {\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    border-radius: 13px;\n  }\n\n  .hoep-indigo-play {\n    width: 60px;\n    height: 60px;\n  }\n\n  .hoep-indigo-play span {\n    border-top-width: 8px;\n    border-bottom-width: 8px;\n    border-left-width: 13px;\n  }\n\n  .hoep-corporate-panel {\n    min-height: 640px;\n    padding-top: 58px;\n    padding-bottom: 82px;\n  }\n\n  .hoep-corporate-heading h2 {\n    font-size: clamp(24px, 6.1vw, 30px);\n    letter-spacing: 3px;\n    line-height: 1.15;\n    white-space: nowrap;\n    margin-bottom: 10px;\n  }\n\n  .hoep-corporate-heading .hoep-title-line {\n    width: 58%;\n    margin: 18px auto 22px;\n  }\n\n  .hoep-logo-carousel {\n    min-height: 390px;\n    padding: 22px 18px 30px;\n  }\n\n  .hoep-logo-track {\n    min-height: 292px;\n    width: 90vw;\n    overflow: visible;\n  }\n\n  .hoep-logo-ui {\n    width: 90vw;\n    margin-top: -12px;\n    gap: 14px;\n  }\n\n  .hoep-logo-card {\n    width: 29vw;\n    max-width: 150px;\n    height: 235px;\n  }\n\n  .hoep-logo-card img {\n    max-width: 100%;\n    max-height: 175px;\n    object-fit: contain;\n  }\n\n  .hoep-logo-card.logo-1 img,\n  .hoep-logo-card.logo-2 img,\n  .hoep-logo-card.logo-3 img,\n  .hoep-logo-card.logo-4 img,\n  .hoep-logo-card.logo-5 img,\n  .hoep-logo-card.logo-6 img {\n    transform: scale(1.72);\n  }\n\n  .hoep-logo-card.is-l1 {\n    transform: translate(-150%, -50%) rotateY(0deg) translateZ(0) scale(1);\n  }\n\n  .hoep-logo-card.is-l2 {\n    transform: translate(-50%, -50%) rotateY(0deg) translateZ(0) scale(1.08);\n  }\n\n  .hoep-logo-card.is-l3 {\n    transform: translate(50%, -50%) rotateY(0deg) translateZ(0) scale(1);\n  }\n\n  .hoep-logo-card.is-logo-prev,\n  .hoep-logo-card.is-logo-next,\n  .hoep-logo-card.is-logo-hidden {\n    opacity: 0;\n    pointer-events: none;\n    transform: translate(-50%, -50%) scale(.7);\n  }\n\n  .hoep-logo-btn,\n  .hoep-service-btn {\n    width: 42px;\n    height: 42px;\n    font-size: 30px;\n  }\n\n  .hoep-logo-dots span,\n  .hoep-service-dots span {\n    width: 24px;\n    height: 4px;\n  }\n\n  .hoep-logo-dots span.active,\n  .hoep-service-dots span.active {\n    width: 38px;\n  }\n\n  .hoep-scroll-velocity {\n    margin-top: 42px;\n    padding: 8px 0 14px;\n  }\n\n  .hoep-scroll-velocity::before,\n  .hoep-scroll-velocity::after {\n    width: 16vw;\n  }\n\n  .hoep-velocity-row-two {\n    margin-top: 5px;\n    opacity: 1;\n  }\n\n  .hoep-velocity-track {\n    gap: 11px;\n  }\n\n  .hoep-velocity-track span {\n    font-size: clamp(14px, 4.7vw, 22px);\n    line-height: 1;\n    letter-spacing: clamp(2px, .82vw, 3.8px);\n  }\n\n  .hoep-velocity-track i {\n    width: 5px;\n    height: 5px;\n  }\n\n  .hoep-insight-icon-loop {\n    width: 44px;\n    height: 44px;\n    margin-bottom: 16px;\n  }\n\n  .hoep-services-heading h2 {\n    font-size: clamp(22px, 6vw, 30px);\n    letter-spacing: 2.4px;\n    line-height: 1.25;\n    white-space: normal;\n    max-width: 360px;\n  }\n\n  .hoep-services-carousel {\n    width: 100%;\n    min-height: 470px;\n  }\n\n  .hoep-services-track { min-height: 405px; }\n\n  .hoep-service-card {\n    width: 42vw;\n    min-height: 330px;\n    border-radius: 12px !important;\n  }\n\n  .hoep-service-card.is-service-left { transform: translateX(-104%) rotateY(9deg) translateZ(26px); }\n  .hoep-service-card.is-service-right { transform: translateX(4%) rotateY(-9deg) translateZ(26px); }\n  .hoep-service-card.is-service-prev { transform: translateX(-160%) rotateY(34deg) translateZ(-80px) scale(.84); }\n  .hoep-service-card.is-service-next { transform: translateX(62%) rotateY(-34deg) translateZ(-80px) scale(.84); }\n\n  .hoep-service-content { width: 92%; }\n\n  .hoep-service-content span {\n    font-size: 9px;\n    letter-spacing: 4px;\n    margin-bottom: 12px;\n  }\n\n  .hoep-service-content h3 {\n    font-size: clamp(14px, 4vw, 18px);\n    letter-spacing: 2.2px;\n    line-height: 1.18;\n    margin-bottom: 18px;\n  }\n\n  .hoep-service-content a {\n    min-width: 125px;\n    min-height: 42px;\n    padding: 0 12px;\n    font-size: 9px;\n    letter-spacing: 2.6px;\n  }\n\n  .hoep-final-cta-panel { min-height: 520px; }\n\n  .hoep-final-bg img { object-position: center bottom; }\n\n  .hoep-final-content h2 {\n    font-size: clamp(29px, 8vw, 38px);\n    line-height: 1.18;\n    letter-spacing: 5px;\n    margin-bottom: 34px;\n  }\n\n  .hoep-final-btn {\n    min-width: 180px;\n    min-height: 56px;\n    padding: 0 26px;\n  }\n\n  .hoep-final-btn span {\n    font-size: 11px;\n    letter-spacing: 5px;\n  }\n\n  .hoep-final-dots {\n    width: 300px;\n    height: 300px;\n  }\n\n  .hoep-final-dots.left {\n    left: -120px;\n    top: -70px;\n  }\n\n  .hoep-final-dots.right {\n    right: -120px;\n    bottom: -70px;\n  }\n}\n\n\/* SMALL MOBILE *\/\n@media (max-width: 390px) {\n  .hoep-intro-panel { min-height: 760px; }\n\n  .hoep-intro-content h2{\n    font-size: clamp(27px, 7.7vw, 32px);\n    letter-spacing: 4px;\n  }\n\n  .hoep-corporate-panel { min-height: 620px; }\n\n  .hoep-corporate-heading h2 {\n    font-size: 21px;\n    letter-spacing: 2.1px;\n  }\n\n  .hoep-intro-text p { font-size: 14.5px; }\n\n  .hoep-logo-carousel {\n    min-height: 370px;\n    padding: 20px 14px 28px;\n  }\n\n  .hoep-logo-track {\n    min-height: 275px;\n    width: 90vw;\n  }\n\n  .hoep-logo-ui { width: 90vw; }\n\n  .hoep-logo-card {\n    width: 28vw;\n    max-width: 128px;\n    height: 220px;\n  }\n\n  .hoep-logo-card img { max-height: 155px; }\n\n  .hoep-logo-card.logo-1 img,\n  .hoep-logo-card.logo-2 img,\n  .hoep-logo-card.logo-3 img,\n  .hoep-logo-card.logo-4 img,\n  .hoep-logo-card.logo-5 img,\n  .hoep-logo-card.logo-6 img {\n    transform: scale(1.58);\n  }\n\n  .hoep-logo-card.is-l1 {\n    transform: translate(-148%, -50%) rotateY(0deg) translateZ(0) scale(1);\n  }\n\n  .hoep-logo-card.is-l2 {\n    transform: translate(-50%, -50%) rotateY(0deg) translateZ(0) scale(1.08);\n  }\n\n  .hoep-logo-card.is-l3 {\n    transform: translate(48%, -50%) rotateY(0deg) translateZ(0) scale(1);\n  }\n\n  .hoep-services-heading h2 {\n    font-size: 21px;\n    letter-spacing: 2px;\n  }\n\n  .hoep-service-card {\n    width: 43vw;\n    min-height: 315px;\n    border-radius: 12px !important;\n  }\n\n  .hoep-service-content h3 {\n    font-size: 13.5px;\n    letter-spacing: 1.8px;\n  }\n\n  .hoep-service-content a {\n    min-width: 118px;\n    font-size: 8.5px;\n    letter-spacing: 2.2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #hoep-combined-section,\n  #hoep-combined-section * {\n    animation-duration: .01ms !important;\n    animation-iteration-count: 1 !important;\n    transition: none !important;\n  }\n\n  .hoep-velocity-track {\n    transform: none !important;\n  }\n}\n\n\/* FORCE SERVICE BUTTONS TO BE CLICKABLE *\/\n.hoep-service-content {\n  pointer-events: auto !important;\n}\n\n.hoep-service-content a {\n  position: relative !important;\n  z-index: 999 !important;\n  pointer-events: auto !important;\n  cursor: pointer !important;\n}\n\n.hoep-service-card.is-service-left,\n.hoep-service-card.is-service-right {\n  pointer-events: auto !important;\n}\n\n.hoep-service-card.is-service-left .hoep-service-content,\n.hoep-service-card.is-service-right .hoep-service-content {\n  pointer-events: auto !important;\n}\n\n.hoep-service-card.is-service-left .hoep-service-real-link,\n.hoep-service-card.is-service-right .hoep-service-real-link {\n  pointer-events: auto !important;\n}\n\n\/* ULTRA FIX: SERVICE CARD LINKS NEVER STOP *\/\n.hoep-service-click-card {\n  cursor: pointer !important;\n}\n\n.hoep-service-click-card,\n.hoep-service-click-card * {\n  -webkit-tap-highlight-color: transparent;\n}\n\n.hoep-service-click-card .hoep-service-content,\n.hoep-service-click-card .hoep-service-content * {\n  pointer-events: auto !important;\n}\n\n.hoep-service-click-card .hoep-service-real-link {\n  position: relative !important;\n  z-index: 9999 !important;\n  pointer-events: auto !important;\n  cursor: pointer !important;\n}\n\n\/* MOBILE TOUCH FIX FOR SERVICE LINKS *\/\n.hoep-service-card[data-hoep-card-url] {\n  cursor: pointer !important;\n  pointer-events: auto !important;\n  touch-action: manipulation !important;\n}\n\n.hoep-service-card[data-hoep-card-url] * {\n  pointer-events: auto !important;\n}\n\n.hoep-service-real-link {\n  position: relative !important;\n  z-index: 99999 !important;\n  pointer-events: auto !important;\n  cursor: pointer !important;\n  touch-action: manipulation !important;\n}\n\n\/* FINAL MOBILE PROPORTIONS\n   Larger player cards with desktop-like spacing between sections. *\/\n@media (max-width: 767px) {\n\n  .hoep-corporate-panel {\n    min-height: auto !important;\n    padding-top: 54px !important;\n    padding-bottom: 64px !important;\n  }\n}\n\n#hoep-combined-section .hoep-indigo-panel {\n  padding-top: clamp(24px, 3vw, 42px) !important;\n}\n\n@media (max-width: 767px) {\n\n  #hoep-combined-section .hoep-indigo-panel {\n    padding-top: 18px !important;\n  }\n\n  #hoep-combined-section .hoep-indigo-heading {\n    margin-bottom: 22px !important;\n  }\n}\n\n#hoep-combined-section .hoep-corporate-panel {\n  padding-top: clamp(22px, 2.5vw, 36px) !important;\n}\n\n@media (max-width: 767px) {\n\n  #hoep-combined-section .hoep-corporate-panel {\n    padding-top: 16px !important;\n  }\n}\n\n<\/style>\n\n<script>\n(function () {\n  const section = document.getElementById('hoep-combined-section');\n  if (!section) return;\n\n  \/* Aerodynamic flowing lines *\/\n  (function initHoepFlowLines() {\n    const canvas = section.querySelector('.hoep-flow-lines-canvas');\n    if (!canvas || canvas.dataset.hoepReady === 'yes') return;\n\n    const ctx = canvas.getContext('2d', { alpha: true });\n    if (!ctx) return;\n\n    canvas.dataset.hoepReady = 'yes';\n\n    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    const pointer = { x: 0, y: 0, targetX: 0, targetY: 0 };\n    let width = 0;\n    let height = 0;\n    let dpr = 1;\n    let phase = 0;\n    let scrollForce = 0;\n    let lastScrollY = window.scrollY;\n    let lastFrame = performance.now();\n    let frameId = 0;\n    let isVisible = true;\n\n    function resizeFlowCanvas() {\n      width = Math.max(1, canvas.clientWidth || section.clientWidth);\n      height = Math.max(1, window.innerHeight);\n      dpr = Math.min(window.devicePixelRatio || 1, 1.6);\n      canvas.width = Math.round(width * dpr);\n      canvas.height = Math.round(height * dpr);\n      canvas.style.height = height + 'px';\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n      positionFlowCanvas();\n\n      if (!pointer.x && !pointer.y) {\n        pointer.x = pointer.targetX = width * .5;\n        pointer.y = pointer.targetY = height * .5;\n      }\n    }\n\n    function positionFlowCanvas() {\n      const sectionRect = section.getBoundingClientRect();\n      const maxOffset = Math.max(0, section.scrollHeight - height);\n      const offset = Math.max(0, Math.min(maxOffset, -sectionRect.top));\n      canvas.style.transform = 'translate3d(0,' + offset.toFixed(1) + 'px,0)';\n    }\n\n    function topographicValue(x, y, time, scale, hills) {\n      let value = 0;\n\n      \/* Broad landscape waves create the large sweeping contours *\/\n      value += Math.sin(x \/ scale * 5.4 + time * .2) * .7;\n      value += Math.cos(y \/ scale * 4.8 - time * .17) * .66;\n      value += Math.sin((x + y) \/ scale * 3.5 + time * .12) * .42;\n      value += Math.cos((x - y) \/ scale * 2.9 - time * .1) * .34;\n\n      \/* Moving hills create nested islands and bubble-like shapes *\/\n      for (let i = 0; i < hills.length; i++) {\n        const hill = hills[i];\n        const dx = x - hill[0];\n        const dy = y - hill[1];\n        value += Math.exp(-(dx * dx + dy * dy) \/ (2 * hill[2] * hill[2])) * hill[3];\n      }\n\n      \/* Pointer becomes another soft elevation in the map *\/\n      const pointerDx = x - pointer.x;\n      const pointerDy = y - pointer.y;\n      const pointerRadius = Math.max(130, scale * .2);\n      value += Math.exp(\n        -(pointerDx * pointerDx + pointerDy * pointerDy) \/\n        (2 * pointerRadius * pointerRadius)\n      ) * .72;\n\n      value += scrollForce * Math.sin((x + y) \/ scale * 8 + time) * .16;\n      return value;\n    }\n\n    function interpolate(level, valueA, valueB, pointA, pointB) {\n      const difference = valueB - valueA;\n      const amount = Math.abs(difference) < .0001\n        ? .5\n        : (level - valueA) \/ difference;\n\n      return {\n        x: pointA.x + (pointB.x - pointA.x) * amount,\n        y: pointA.y + (pointB.y - pointA.y) * amount\n      };\n    }\n\n    function smoothContour(points, closed) {\n      let result = points.slice();\n\n      if (closed && result.length > 2) {\n        const first = result[0];\n        const last = result[result.length - 1];\n        if (Math.hypot(first.x - last.x, first.y - last.y) < 1) {\n          result.pop();\n        }\n      }\n\n      for (let pass = 0; pass < 2; pass++) {\n        if (result.length < 3) break;\n        const next = [];\n\n        if (!closed) next.push(result[0]);\n\n        const limit = closed ? result.length : result.length - 1;\n        for (let i = 0; i < limit; i++) {\n          const current = result[i];\n          const following = result[(i + 1) % result.length];\n          next.push({\n            x: current.x * .75 + following.x * .25,\n            y: current.y * .75 + following.y * .25\n          });\n          next.push({\n            x: current.x * .25 + following.x * .75,\n            y: current.y * .25 + following.y * .75\n          });\n        }\n\n        if (!closed) next.push(result[result.length - 1]);\n        result = next;\n      }\n\n      return result;\n    }\n\n    function drawJoinedContours(segments) {\n      const adjacency = new Map();\n      const visited = new Uint8Array(segments.length);\n\n      function pointKey(point) {\n        return Math.round(point.x * 10) + ',' + Math.round(point.y * 10);\n      }\n\n      segments.forEach(function (segment, index) {\n        segment.forEach(function (point) {\n          const key = pointKey(point);\n          if (!adjacency.has(key)) adjacency.set(key, []);\n          adjacency.get(key).push(index);\n        });\n      });\n\n      for (let startIndex = 0; startIndex < segments.length; startIndex++) {\n        if (visited[startIndex]) continue;\n\n        const firstSegment = segments[startIndex];\n        const firstKey = pointKey(firstSegment[0]);\n        const secondKey = pointKey(firstSegment[1]);\n        let startPoint = (adjacency.get(firstKey) || []).length === 1\n          ? firstSegment[0]\n          : firstSegment[1];\n\n        if ((adjacency.get(secondKey) || []).length === 1) {\n          startPoint = firstSegment[1];\n        }\n\n        const points = [startPoint];\n        let currentKey = pointKey(startPoint);\n        let currentIndex = startIndex;\n        let safety = 0;\n\n        while (currentIndex !== undefined && safety < segments.length + 1) {\n          safety++;\n          visited[currentIndex] = 1;\n          const segment = segments[currentIndex];\n          const pointAKey = pointKey(segment[0]);\n          const nextPoint = pointAKey === currentKey ? segment[1] : segment[0];\n          points.push(nextPoint);\n          currentKey = pointKey(nextPoint);\n\n          const candidates = adjacency.get(currentKey) || [];\n          currentIndex = candidates.find(function (candidate) {\n            return !visited[candidate];\n          });\n        }\n\n        if (points.length < 3) continue;\n\n        const naturallyClosed = Math.hypot(\n          points[0].x - points[points.length - 1].x,\n          points[0].y - points[points.length - 1].y\n        ) < 1.5;\n\n        \/*\n         * A real contour may stay open only when it exits the canvas.\n         * Any open path ending inside the screen is a marching-squares\n         * connection artifact, so close it to prevent visible gaps.\n         *\/\n        const edgeTolerance = 3;\n        const firstPoint = points[0];\n        const lastPoint = points[points.length - 1];\n        const firstTouchesEdge =\n          firstPoint.x <= edgeTolerance ||\n          firstPoint.y <= edgeTolerance ||\n          firstPoint.x >= width - edgeTolerance ||\n          firstPoint.y >= height - edgeTolerance;\n        const lastTouchesEdge =\n          lastPoint.x <= edgeTolerance ||\n          lastPoint.y <= edgeTolerance ||\n          lastPoint.x >= width - edgeTolerance ||\n          lastPoint.y >= height - edgeTolerance;\n        const closed = naturallyClosed || (!firstTouchesEdge && !lastTouchesEdge);\n        const smoothPoints = smoothContour(points, closed);\n\n        ctx.moveTo(smoothPoints[0].x, smoothPoints[0].y);\n        for (let i = 1; i < smoothPoints.length; i++) {\n          ctx.lineTo(smoothPoints[i].x, smoothPoints[i].y);\n        }\n        if (closed) ctx.closePath();\n      }\n    }\n\n    function drawTopographicField(time) {\n      \/* Higher-resolution grid keeps curves smooth without fragment joining. *\/\n      const cell = width < 768 ? 11 : 8;\n      const columns = Math.ceil(width \/ cell) + 1;\n      const rows = Math.ceil(height \/ cell) + 1;\n      const values = new Float32Array(columns * rows);\n      const levels = [-1.35, -1, -.65, -.3, .05, .4, .75, 1.1, 1.45, 1.8, 2.15, 2.5];\n      const scale = Math.min(width, height);\n      const hills = [\n        [width * (.16 + Math.sin(time * .17) * .035), height * .26, scale * .2, 2.25],\n        [width * .47, height * (.14 + Math.cos(time * .14) * .035), scale * .13, 1.75],\n        [width * (.78 + Math.cos(time * .13) * .03), height * .38, scale * .21, 2.35],\n        [width * .25, height * (.72 + Math.sin(time * .12) * .04), scale * .15, 1.8],\n        [width * (.66 + Math.sin(time * .1) * .04), height * .82, scale * .22, 2.15]\n      ];\n\n      for (let row = 0; row < rows; row++) {\n        for (let column = 0; column < columns; column++) {\n          values[row * columns + column] = topographicValue(\n            column * cell,\n            row * cell,\n            time,\n            scale,\n            hills\n          );\n        }\n      }\n\n      const segmentMap = {\n        1: [['left', 'top']],\n        2: [['top', 'right']],\n        3: [['left', 'right']],\n        4: [['right', 'bottom']],\n        5: [['left', 'top'], ['right', 'bottom']],\n        6: [['top', 'bottom']],\n        7: [['left', 'bottom']],\n        8: [['bottom', 'left']],\n        9: [['top', 'bottom']],\n        10: [['top', 'right'], ['bottom', 'left']],\n        11: [['right', 'bottom']],\n        12: [['left', 'right']],\n        13: [['top', 'right']],\n        14: [['left', 'top']]\n      };\n\n      levels.forEach(function (level, levelIndex) {\n        const gradient = ctx.createLinearGradient(0, 0, width, height);\n        gradient.addColorStop(0, 'rgba(7,26,51,.72)');\n        gradient.addColorStop(.48, 'rgba(7,26,51,.64)');\n        gradient.addColorStop(.58, 'rgba(200,189,131,.88)');\n        gradient.addColorStop(1, 'rgba(7,26,51,.68)');\n\n        ctx.beginPath();\n\n        for (let row = 0; row < rows - 1; row++) {\n          for (let column = 0; column < columns - 1; column++) {\n            const x = column * cell;\n            const y = row * cell;\n            const topLeft = values[row * columns + column];\n            const topRight = values[row * columns + column + 1];\n            const bottomRight = values[(row + 1) * columns + column + 1];\n            const bottomLeft = values[(row + 1) * columns + column];\n\n            let state = 0;\n            if (topLeft > level) state |= 1;\n            if (topRight > level) state |= 2;\n            if (bottomRight > level) state |= 4;\n            if (bottomLeft > level) state |= 8;\n\n            let segments = segmentMap[state];\n\n            \/* Resolve saddle cells consistently so paths do not split mid-motion. *\/\n            const centerValue = (topLeft + topRight + bottomRight + bottomLeft) * .25;\n\n            if (state === 5) {\n              segments = centerValue > level\n                ? [['top', 'right'], ['bottom', 'left']]\n                : [['left', 'top'], ['right', 'bottom']];\n            } else if (state === 10) {\n              segments = centerValue > level\n                ? [['left', 'top'], ['right', 'bottom']]\n                : [['top', 'right'], ['bottom', 'left']];\n            }\n\n            if (!segments) continue;\n\n            const points = {\n              top: interpolate(level, topLeft, topRight, { x: x, y: y }, { x: x + cell, y: y }),\n              right: interpolate(level, topRight, bottomRight, { x: x + cell, y: y }, { x: x + cell, y: y + cell }),\n              bottom: interpolate(level, bottomLeft, bottomRight, { x: x, y: y + cell }, { x: x + cell, y: y + cell }),\n              left: interpolate(level, topLeft, bottomLeft, { x: x, y: y }, { x: x, y: y + cell })\n            };\n\n            segments.forEach(function (segment) {\n              const start = points[segment[0]];\n              const end = points[segment[1]];\n              \/* Draw every marching segment; rounded caps overlap at joins. *\/\n              ctx.moveTo(start.x, start.y);\n              ctx.lineTo(end.x, end.y);\n            });\n          }\n        }\n\n        ctx.strokeStyle = gradient;\n        ctx.lineWidth = levelIndex % 4 === 0 ? 1.55 : 1.05;\n        ctx.globalAlpha = levelIndex % 4 === 0 ? .76 : .52;\n        ctx.lineCap = 'round';\n        ctx.lineJoin = 'round';\n        ctx.filter = levelIndex % 4 === 0\n          ? 'drop-shadow(0 0 2px rgba(200,189,131,.2))'\n          : 'none';\n        ctx.stroke();\n      });\n    }\n\n    function drawFlowLines(now) {\n      const delta = Math.min((now - lastFrame) \/ 1000, .05);\n      lastFrame = now;\n\n      if (isVisible) {\n        pointer.x += (pointer.targetX - pointer.x) * .075;\n        pointer.y += (pointer.targetY - pointer.y) * .075;\n        scrollForce *= .91;\n        phase += delta * (.68 + scrollForce * 1.45);\n\n        ctx.clearRect(0, 0, width, height);\n\n        drawTopographicField(phase);\n\n        ctx.globalAlpha = 1;\n        ctx.filter = 'none';\n      }\n\n      if (!reducedMotion) frameId = requestAnimationFrame(drawFlowLines);\n    }\n\n    function updateFlowPointer(clientX, clientY) {\n      const rect = canvas.getBoundingClientRect();\n      pointer.targetX = clientX - rect.left;\n      pointer.targetY = clientY - rect.top;\n    }\n\n    function onFlowScroll() {\n      const currentY = window.scrollY;\n      scrollForce = Math.min(\n        1,\n        scrollForce + Math.abs(currentY - lastScrollY) \/ 190\n      );\n      lastScrollY = currentY;\n      positionFlowCanvas();\n    }\n\n    section.addEventListener('pointermove', function (event) {\n      updateFlowPointer(event.clientX, event.clientY);\n    }, { passive: true });\n\n    section.addEventListener('pointerleave', function () {\n      pointer.targetX = width * .5;\n      pointer.targetY = height * .5;\n    }, { passive: true });\n\n    window.addEventListener('scroll', onFlowScroll, { passive: true });\n    window.addEventListener('resize', resizeFlowCanvas, { passive: true });\n\n    if ('IntersectionObserver' in window) {\n      const flowObserver = new IntersectionObserver(function (entries) {\n        isVisible = entries[0] ? entries[0].isIntersecting : true;\n        if (!isVisible) ctx.clearRect(0, 0, width, height);\n      }, { rootMargin: '100px 0px' });\n      flowObserver.observe(section);\n    }\n\n    resizeFlowCanvas();\n\n    if (reducedMotion) {\n      drawFlowLines(performance.now());\n    } else {\n      frameId = requestAnimationFrame(drawFlowLines);\n    }\n\n    document.addEventListener('visibilitychange', function () {\n      if (document.hidden) {\n        cancelAnimationFrame(frameId);\n      } else if (!reducedMotion) {\n        lastFrame = performance.now();\n        frameId = requestAnimationFrame(drawFlowLines);\n      }\n    });\n  })();\n\n  function setPointerVars(x, y) {\n    const rect = section.getBoundingClientRect();\n    const px = ((x - rect.left) \/ rect.width) * 100;\n    const py = ((y - rect.top) \/ rect.height) * 100;\n    const moveX = (px - 50) * 0.45;\n    const moveY = (py - 50) * 0.45;\n\n    section.style.setProperty('--mx', px.toFixed(2) + '%');\n    section.style.setProperty('--my', py.toFixed(2) + '%');\n    section.style.setProperty('--moveX', moveX.toFixed(2) + 'px');\n    section.style.setProperty('--moveY', moveY.toFixed(2) + 'px');\n  }\n\n  \/* Reveal title animation once when section appears - mobile + desktop *\/\n  const panels = Array.from(section.querySelectorAll('.hoep-motion-panel'));\n  const introPanel = section.querySelector('.hoep-intro-panel');\n  let introRevealReady = false;\n\n  function revealVisiblePanels() {\n    const viewport = window.innerHeight || document.documentElement.clientHeight;\n\n    panels.forEach(function(panel) {\n      if (panel === introPanel && !introRevealReady) return;\n\n      const rect = panel.getBoundingClientRect();\n      const triggerPoint = viewport * 0.82;\n\n      if (rect.top < triggerPoint && rect.bottom > viewport * 0.08) {\n        panel.classList.add('is-title-revealed');\n      }\n    });\n  }\n\n  if ('IntersectionObserver' in window) {\n    const observer = new IntersectionObserver(function(entries) {\n      entries.forEach(function(entry) {\n        if (entry.isIntersecting) {\n          if (entry.target === introPanel && !introRevealReady) return;\n          entry.target.classList.add('is-title-revealed');\n        }\n      });\n    }, {\n      threshold: 0.22,\n      rootMargin: '0px 0px -12% 0px'\n    });\n\n    panels.forEach(function(panel) {\n      observer.observe(panel);\n    });\n  }\n\n  window.addEventListener('scroll', revealVisiblePanels, { passive: true });\n  window.addEventListener('resize', revealVisiblePanels);\n  window.addEventListener('orientationchange', revealVisiblePanels);\n  window.addEventListener('load', revealVisiblePanels);\n\n  revealVisiblePanels();\n  setTimeout(function() {\n    if (introPanel) {\n      introPanel.classList.remove('is-title-revealed');\n      introPanel.offsetHeight;\n    }\n\n    introRevealReady = true;\n    revealVisiblePanels();\n  }, 520);\n  setTimeout(revealVisiblePanels, 300);\n  setTimeout(revealVisiblePanels, 900);\n\n  section.addEventListener('mousemove', function (e) {\n    setPointerVars(e.clientX, e.clientY);\n  }, { passive: true });\n\n  section.addEventListener('touchmove', function (e) {\n    if (!e.touches || !e.touches.length) return;\n    setPointerVars(e.touches[0].clientX, e.touches[0].clientY);\n  }, { passive: true });\n\n  function initTwoItemsCarousel(options) {\n    const track = section.querySelector(options.track);\n    const cards = Array.from(section.querySelectorAll(options.card));\n    const dots = Array.from(section.querySelectorAll(options.dots + ' span'));\n    const prevBtn = section.querySelector(options.prev);\n    const nextBtn = section.querySelector(options.next);\n\n    if (!track || !cards.length) return;\n\n    let group = 0;\n    const totalGroups = Math.ceil(cards.length \/ 2);\n    let wheelLock = false;\n    let startX = 0;\n\n    function render() {\n      const leftIndex = group * 2;\n      const rightIndex = leftIndex + 1;\n\n      cards.forEach(function (card, index) {\n        card.className = options.baseClass;\n\n        if (index === leftIndex) card.classList.add(options.leftClass);\n        else if (index === rightIndex) card.classList.add(options.rightClass);\n        else if (index < leftIndex) card.classList.add(options.prevClass);\n        else if (index > rightIndex) card.classList.add(options.nextClass);\n        else card.classList.add(options.hiddenClass);\n      });\n\n      dots.forEach(function (dot, index) {\n        dot.classList.toggle('active', index === group);\n      });\n    }\n\n    function next() {\n      group = (group + 1) % totalGroups;\n      render();\n    }\n\n    function prev() {\n      group = (group - 1 + totalGroups) % totalGroups;\n      render();\n    }\n\n    if (nextBtn) nextBtn.addEventListener('click', next);\n    if (prevBtn) prevBtn.addEventListener('click', prev);\n\n    dots.forEach(function (dot, index) {\n      dot.addEventListener('click', function () {\n        group = index;\n        render();\n      });\n    });\n\n    track.addEventListener('wheel', function (e) {\n      if (Math.abs(e.deltaX) < 10 && Math.abs(e.deltaY) < 10) return;\n      e.preventDefault();\n\n      if (wheelLock) return;\n      wheelLock = true;\n\n      const direction = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n      if (direction > 0) next();\n      else prev();\n\n      setTimeout(function () {\n        wheelLock = false;\n      }, 780);\n    }, { passive: false });\n\n    track.addEventListener('touchstart', function (e) {\n      startX = e.touches[0].clientX;\n    }, { passive: true });\n\n    track.addEventListener('touchend', function (e) {\n      const endX = e.changedTouches[0].clientX;\n      const diff = startX - endX;\n\n      if (Math.abs(diff) > 42) {\n        if (diff > 0) next();\n        else prev();\n      }\n    }, { passive: true });\n\n    render();\n  }\n\n  initTwoItemsCarousel({\n    track: '.hoep-services-track',\n    card: '.hoep-service-card',\n    dots: '.hoep-service-dots',\n    prev: '.hoep-service-btn.service-prev',\n    next: '.hoep-service-btn.service-next',\n    baseClass: 'hoep-service-card',\n    leftClass: 'is-service-left',\n    rightClass: 'is-service-right',\n    prevClass: 'is-service-prev',\n    nextClass: 'is-service-next',\n    hiddenClass: 'is-service-hidden'\n  });\n\n  const logoTrack = section.querySelector('.hoep-logo-track');\n  const logoCards = Array.from(section.querySelectorAll('.hoep-logo-card'));\n  const logoDots = Array.from(section.querySelectorAll('.hoep-logo-dots span'));\n  const logoPrev = section.querySelector('.hoep-logo-btn.logo-prev');\n  const logoNext = section.querySelector('.hoep-logo-btn.logo-next');\n  const logoCarousel = section.querySelector('.hoep-logo-carousel');\n\n  if (logoTrack && logoCards.length) {\n    let logoGroup = 0;\n    const totalLogoGroups = 2;\n    let logoWheelLock = false;\n    let logoStartX = 0;\n\n    function sparkLogos() {\n      if (!logoCarousel) return;\n      logoCarousel.classList.remove('is-sparking');\n      void logoCarousel.offsetWidth;\n      logoCarousel.classList.add('is-sparking');\n\n      setTimeout(function () {\n        logoCarousel.classList.remove('is-sparking');\n      }, 480);\n    }\n\n    function renderLogos() {\n      const start = logoGroup * 3;\n\n      logoCards.forEach(function (card, index) {\n        card.className = card.className\n          .replace(\/\\bis-l1\\b|\\bis-l2\\b|\\bis-l3\\b|\\bis-logo-prev\\b|\\bis-logo-next\\b|\\bis-logo-hidden\\b|\\bis-logo-active\\b\/g, '')\n          .trim();\n\n        if (!card.classList.contains('hoep-logo-card')) {\n          card.classList.add('hoep-logo-card');\n        }\n\n        if (index === start) {\n          card.classList.add('is-l1', 'is-logo-active');\n        } else if (index === start + 1) {\n          card.classList.add('is-l2', 'is-logo-active');\n        } else if (index === start + 2) {\n          card.classList.add('is-l3', 'is-logo-active');\n        } else if (index < start) {\n          card.classList.add('is-logo-prev');\n        } else if (index > start + 2) {\n          card.classList.add('is-logo-next');\n        } else {\n          card.classList.add('is-logo-hidden');\n        }\n      });\n\n      logoDots.forEach(function (dot, index) {\n        dot.classList.toggle('active', index === logoGroup);\n      });\n    }\n\n    function nextLogos() {\n      logoGroup = (logoGroup + 1) % totalLogoGroups;\n      sparkLogos();\n      renderLogos();\n    }\n\n    function prevLogos() {\n      logoGroup = (logoGroup - 1 + totalLogoGroups) % totalLogoGroups;\n      sparkLogos();\n      renderLogos();\n    }\n\n    if (logoNext) logoNext.addEventListener('click', nextLogos);\n    if (logoPrev) logoPrev.addEventListener('click', prevLogos);\n\n    logoDots.forEach(function (dot, index) {\n      dot.addEventListener('click', function () {\n        logoGroup = index;\n        sparkLogos();\n        renderLogos();\n      });\n    });\n\n    logoTrack.addEventListener('wheel', function (e) {\n      if (Math.abs(e.deltaX) < 10 && Math.abs(e.deltaY) < 10) return;\n      e.preventDefault();\n\n      if (logoWheelLock) return;\n      logoWheelLock = true;\n\n      const direction = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n      if (direction > 0) nextLogos();\n      else prevLogos();\n\n      setTimeout(function () {\n        logoWheelLock = false;\n      }, 780);\n    }, { passive: false });\n\n    logoTrack.addEventListener('touchstart', function (e) {\n      logoStartX = e.touches[0].clientX;\n    }, { passive: true });\n\n    logoTrack.addEventListener('touchend', function (e) {\n      const endX = e.changedTouches[0].clientX;\n      const diff = logoStartX - endX;\n\n      if (Math.abs(diff) > 42) {\n        if (diff > 0) nextLogos();\n        else prevLogos();\n      }\n    }, { passive: true });\n\n    renderLogos();\n  }\n\n  (function initHoepScrollVelocity() {\n    const velocityWrap = section.querySelector('.hoep-scroll-velocity');\n    if (!velocityWrap || velocityWrap.dataset.hoepReady === 'yes') return;\n\n    const rows = Array.from(velocityWrap.querySelectorAll('.hoep-velocity-row'));\n    if (!rows.length) return;\n\n    velocityWrap.dataset.hoepReady = 'yes';\n\n    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (reducedMotion) {\n      velocityWrap.classList.add('is-visible');\n      return;\n    }\n\n    const state = rows.map(function (row) {\n      const track = row.querySelector('.hoep-velocity-track');\n      return {\n        row: row,\n        track: track,\n        direction: Number(row.getAttribute('data-hoep-velocity') || 1),\n        x: 0,\n        width: 1\n      };\n    }).filter(function (item) {\n      return !!item.track;\n    });\n\n    let lastScrollY = window.scrollY || 0;\n    let scrollVelocity = 0;\n    let smoothVelocity = 0;\n    let lastTime = performance.now();\n    let rafId = 0;\n    let isVisible = false;\n\n    function measureVelocityRows() {\n      state.forEach(function (item) {\n        item.width = Math.max(1, item.track.scrollWidth \/ 3);\n      });\n    }\n\n    function wrapPosition(value, width) {\n      return ((value % width) + width) % width;\n    }\n\n    function onVelocityScroll() {\n      const currentY = window.scrollY || 0;\n      scrollVelocity = currentY - lastScrollY;\n      lastScrollY = currentY;\n    }\n\n    function animateVelocity(now) {\n      const delta = Math.min(40, now - lastTime);\n      lastTime = now;\n\n      smoothVelocity += (scrollVelocity - smoothVelocity) * 0.12;\n      scrollVelocity *= 0.86;\n\n      const scrollBoost = Math.max(-2.2, Math.min(2.2, smoothVelocity * 0.026));\n      const baseSpeed = 0.055 * delta;\n\n      state.forEach(function (item, index) {\n        const laneBoost = index % 2 === 0 ? scrollBoost : -scrollBoost;\n        const move = (item.direction * baseSpeed) + laneBoost;\n        item.x = wrapPosition(item.x + move, item.width);\n        item.track.style.transform = 'translate3d(' + (-item.x).toFixed(2) + 'px,0,0)';\n      });\n\n      if (isVisible) {\n        rafId = requestAnimationFrame(animateVelocity);\n      }\n    }\n\n    function startVelocity() {\n      if (isVisible) return;\n      isVisible = true;\n      velocityWrap.classList.add('is-visible');\n      lastTime = performance.now();\n      rafId = requestAnimationFrame(animateVelocity);\n    }\n\n    function stopVelocity() {\n      isVisible = false;\n      if (rafId) cancelAnimationFrame(rafId);\n      rafId = 0;\n    }\n\n    measureVelocityRows();\n    window.addEventListener('resize', measureVelocityRows, { passive: true });\n    window.addEventListener('scroll', onVelocityScroll, { passive: true });\n\n    startVelocity();\n\n    if ('IntersectionObserver' in window) {\n      const observer = new IntersectionObserver(function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting) startVelocity();\n          else stopVelocity();\n        });\n      }, { threshold: 0.08 });\n\n      observer.observe(velocityWrap);\n    } else {\n      startVelocity();\n    }\n  })();\n\n  function hoepOpenServiceUrl(url) {\n    if (!url || url === 'javascript:void(0)') return;\n    window.location.href = url;\n  }\n\n  function hoepFindServiceTarget(target) {\n    if (!target || !target.closest) return null;\n\n    const link = target.closest('#hoep-combined-section .hoep-service-real-link');\n    if (link) {\n      return link.getAttribute('data-hoep-url') || link.getAttribute('href');\n    }\n\n    const card = target.closest('#hoep-combined-section .hoep-service-card[data-hoep-card-url]');\n    if (card) {\n      return card.getAttribute('data-hoep-card-url');\n    }\n\n    return null;\n  }\n\n  \/* Desktop click *\/\n  document.addEventListener('click', function(e) {\n    const url = hoepFindServiceTarget(e.target);\n\n    if (url) {\n      e.preventDefault();\n      e.stopPropagation();\n      hoepOpenServiceUrl(url);\n    }\n  }, true);\n\n  \/* Mobile touch fix *\/\n  let hoepTouchStartX = 0;\n  let hoepTouchStartY = 0;\n  let hoepTouchMoved = false;\n\n  document.addEventListener('touchstart', function(e) {\n    if (!e.touches || !e.touches.length) return;\n\n    hoepTouchMoved = false;\n    hoepTouchStartX = e.touches[0].clientX;\n    hoepTouchStartY = e.touches[0].clientY;\n  }, { passive: true, capture: true });\n\n  document.addEventListener('touchmove', function(e) {\n    if (!e.touches || !e.touches.length) return;\n\n    const diffX = Math.abs(e.touches[0].clientX - hoepTouchStartX);\n    const diffY = Math.abs(e.touches[0].clientY - hoepTouchStartY);\n\n    if (diffX > 12 || diffY > 12) {\n      hoepTouchMoved = true;\n    }\n  }, { passive: true, capture: true });\n\n  document.addEventListener('touchend', function(e) {\n    if (hoepTouchMoved) return;\n\n    const url = hoepFindServiceTarget(e.target);\n\n    if (url) {\n      e.preventDefault();\n      e.stopPropagation();\n      setTimeout(function() {\n        hoepOpenServiceUrl(url);\n      }, 40);\n    }\n  }, { passive: false, capture: true });\n\n})();\n\n(function () {\n  function replayHoepIntroTitle() {\n    const section = document.getElementById('hoep-combined-section');\n    if (!section) return;\n\n    const introPanel = section.querySelector('.hoep-intro-panel');\n    if (!introPanel) return;\n\n    const introTitle = introPanel.querySelector('.hoep-intro-content h2');\n    if (introTitle && !introTitle.querySelector('.hoep-intro-title-cover')) {\n      const cover = document.createElement('span');\n      cover.className = 'hoep-intro-title-cover';\n      cover.setAttribute('aria-hidden', 'true');\n      introTitle.appendChild(cover);\n    }\n\n    introPanel.classList.remove('is-title-revealed');\n    const cover = introTitle ? introTitle.querySelector('.hoep-intro-title-cover') : null;\n    if (cover) {\n      cover.style.animation = 'none';\n      cover.style.transform = 'translateX(0)';\n    }\n\n    introPanel.offsetHeight;\n\n    setTimeout(function () {\n      if (cover) {\n        cover.style.animation = '';\n        cover.style.transform = '';\n      }\n      introPanel.classList.add('is-title-revealed');\n    }, 650);\n  }\n\n  window.addEventListener('DOMContentLoaded', replayHoepIntroTitle);\n  window.addEventListener('load', replayHoepIntroTitle);\n  setTimeout(replayHoepIntroTitle, 250);\n  setTimeout(replayHoepIntroTitle, 900);\u0634\n  \n\n  if (window.jQuery) {\n    window.jQuery(window).on('elementor\/frontend\/init', function () {\n      if (!window.elementorFrontend || !window.elementorFrontend.hooks) return;\n\n      window.elementorFrontend.hooks.addAction('frontend\/element_ready\/global', function () {\n        setTimeout(replayHoepIntroTitle, 120);\n      });\n    });\n  }\n})();\n<\/script> \n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>hoep.sa HOUSE OF ELITE PROPERTIES View Services ABOUT US INTRODUCTION House of Elite Properties is a creative real estate marketing company built to elevate how properties are seen, presented, and connected with clients through memorable visual experiences. HOEP combines creative direction, media production, and real estate expertise to craft high-end property presentations that elevate brand identity and attract the right audience. Every project is &#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-18618","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/hoep.sa\/ar\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"ar_AR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"hoep.sa -\" \/>\n\t\t<meta property=\"og:type\" content=\"website\" \/>\n\t\t<meta property=\"og:title\" content=\"Real Estate Marketing, Drone &amp; 360\u00b0 Tours in Jeddah | HOEP\" \/>\n\t\t<meta property=\"og:description\" content=\"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/hoep.sa\/ar\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Real Estate Marketing, Drone &amp; 360\u00b0 Tours in Jeddah | HOEP\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hoep.sa\\\/ar\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#listItem\",\"name\":\"Homepage\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#listItem\",\"position\":2,\"name\":\"Homepage\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#organization\",\"name\":\"HOEP - House of Elite Properties\",\"description\":\"Real estate marketing, drone photography, cinematic property videos, 360\\u00b0 virtual tours and panorama photography in Jeddah.\",\"url\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/\",\"telephone\":\"+966550155799\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/hoep.sa\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/hoep-icon.jpg\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#organizationLogo\",\"width\":512,\"height\":512},\"image\":{\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/hoep.sa?igsh=MTNqZmhlbnhmMTZ6MA\",\"https:\\\/\\\/www.tiktok.com\\\/@hoep.sa?is_from_webapp=1&sender_device=pc\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#webpage\",\"url\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/\",\"name\":\"Real Estate Marketing, Drone & 360\\u00b0 Tours in Jeddah | HOEP\",\"description\":\"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\\u00b0 tours and panorama photography for luxury properties.\",\"inLanguage\":\"ar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#breadcrumblist\"},\"datePublished\":\"2020-06-03T14:05:35+00:00\",\"dateModified\":\"2026-08-26T08:25:38+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#website\",\"url\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/\",\"name\":\"hoep.sa\",\"inLanguage\":\"ar\",\"publisher\":{\"@id\":\"https:\\\/\\\/hoep.sa\\\/ar\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Real Estate Marketing, Drone & 360\u00b0 Tours in Jeddah | HOEP","description":"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.","canonical_url":"https:\/\/hoep.sa\/ar\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/hoep.sa\/ar\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/hoep.sa\/ar#listItem","position":1,"name":"Home","item":"https:\/\/hoep.sa\/ar","nextItem":{"@type":"ListItem","@id":"https:\/\/hoep.sa\/ar\/#listItem","name":"Homepage"}},{"@type":"ListItem","@id":"https:\/\/hoep.sa\/ar\/#listItem","position":2,"name":"Homepage","previousItem":{"@type":"ListItem","@id":"https:\/\/hoep.sa\/ar#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/hoep.sa\/ar\/#organization","name":"HOEP - House of Elite Properties","description":"Real estate marketing, drone photography, cinematic property videos, 360\u00b0 virtual tours and panorama photography in Jeddah.","url":"https:\/\/hoep.sa\/ar\/","telephone":"+966550155799","logo":{"@type":"ImageObject","url":"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg","@id":"https:\/\/hoep.sa\/ar\/#organizationLogo","width":512,"height":512},"image":{"@id":"https:\/\/hoep.sa\/ar\/#organizationLogo"},"sameAs":["https:\/\/www.instagram.com\/hoep.sa?igsh=MTNqZmhlbnhmMTZ6MA","https:\/\/www.tiktok.com\/@hoep.sa?is_from_webapp=1&sender_device=pc"]},{"@type":"WebPage","@id":"https:\/\/hoep.sa\/ar\/#webpage","url":"https:\/\/hoep.sa\/ar\/","name":"Real Estate Marketing, Drone & 360\u00b0 Tours in Jeddah | HOEP","description":"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.","inLanguage":"ar","isPartOf":{"@id":"https:\/\/hoep.sa\/ar\/#website"},"breadcrumb":{"@id":"https:\/\/hoep.sa\/ar\/#breadcrumblist"},"datePublished":"2020-06-03T14:05:35+00:00","dateModified":"2026-08-26T08:25:38+00:00"},{"@type":"WebSite","@id":"https:\/\/hoep.sa\/ar\/#website","url":"https:\/\/hoep.sa\/ar\/","name":"hoep.sa","inLanguage":"ar","publisher":{"@id":"https:\/\/hoep.sa\/ar\/#organization"}}]},"og:locale":"ar_AR","og:site_name":"hoep.sa -","og:type":"website","og:title":"Real Estate Marketing, Drone &amp; 360\u00b0 Tours in Jeddah | HOEP","og:description":"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.","og:url":"https:\/\/hoep.sa\/ar\/","og:image":"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg","og:image:secure_url":"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg","og:image:width":512,"og:image:height":512,"twitter:card":"summary_large_image","twitter:title":"Real Estate Marketing, Drone &amp; 360\u00b0 Tours in Jeddah | HOEP","twitter:description":"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.","twitter:image":"https:\/\/hoep.sa\/wp-content\/uploads\/2026\/06\/hoep-icon.jpg"},"aioseo_meta_data":{"post_id":"18618","title":"Real Estate Marketing, Drone & 360\u00b0 Tours in Jeddah | HOEP","description":"Real estate marketing in Jeddah with drone photography, cinematic property videos, 360\u00b0 tours and panorama photography for luxury properties.","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"website","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":[],"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-05-03 10:37:38","updated":"2026-08-26 09:09:16","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/hoep.sa\/ar\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHomepage\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/hoep.sa\/ar"},{"label":"Homepage","link":"https:\/\/hoep.sa\/ar\/"}],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/pages\/18618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/comments?post=18618"}],"version-history":[{"count":738,"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/pages\/18618\/revisions"}],"predecessor-version":[{"id":33480,"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/pages\/18618\/revisions\/33480"}],"wp:attachment":[{"href":"https:\/\/hoep.sa\/ar\/wp-json\/wp\/v2\/media?parent=18618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}