{"id":1201,"date":"2026-07-09T17:58:21","date_gmt":"2026-07-09T17:58:21","guid":{"rendered":"https:\/\/displero.com\/home-4\/"},"modified":"2026-09-27T16:54:44","modified_gmt":"2026-09-27T16:54:44","slug":"home-4","status":"publish","type":"page","link":"https:\/\/displero.com\/pl\/","title":{"rendered":"Strona g\u0142\u00f3wna"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1201\" class=\"elementor elementor-1201\">\n\t\t\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-ffd748a e-con-full e-flex e-con e-parent\" data-id=\"ffd748a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e7995a elementor-widget elementor-widget-html\" data-id=\"9e7995a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- =========================================\r\n     DISPLERO \u2014 CINEMATIC SCROLL INTRO\r\n     VERSION 1.0\r\n     ========================================= -->\r\n\r\n<link rel=\"preconnect\"\r\n      href=\"https:\/\/fonts.googleapis.com\">\r\n\r\n<link rel=\"preconnect\"\r\n      href=\"https:\/\/fonts.gstatic.com\"\r\n      crossorigin>\r\n\r\n<link\r\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\"\r\n  rel=\"stylesheet\"\r\n>\r\n\r\n\r\n<section class=\"dp-intro\" data-dp-intro>\r\n\r\n  <!-- STICKY VIEWPORT -->\r\n\r\n  <div class=\"dp-intro-frame\">\r\n\r\n    <!-- BACKGROUND LIGHT -->\r\n\r\n    <div class=\"dp-intro-glow\"\r\n         aria-hidden=\"true\">\r\n    <\/div>\r\n\r\n    <div class=\"dp-intro-grid\"\r\n         aria-hidden=\"true\">\r\n    <\/div>\r\n\r\n\r\n    <!-- TOP INFORMATION -->\r\n\r\n    <div class=\"dp-intro-top\">\r\n\r\n      <div class=\"dp-intro-brand\">\r\n        <span><\/span>\r\n      <\/div>\r\n\r\n      <div class=\"dp-intro-top-right\">\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =========================\r\n         SCENE 01 \u2014 INTRO\r\n         ========================= -->\r\n\r\n    <div class=\"dp-intro-scene dp-scene-one\">\r\n\r\n      <div class=\"dp-intro-kicker\">\r\n        ENGINEERING VISUAL EXPERIENCES\r\n      <\/div>\r\n\r\n      <h1 class=\"dp-intro-headline\">\r\n\r\n        <span class=\"dp-line dp-line-first\">\r\n          BRINGING\r\n        <\/span>\r\n\r\n        <span class=\"dp-line dp-line-main\">\r\n          DISPLAYS\r\n        <\/span>\r\n\r\n        <span class=\"dp-line dp-line-last\">\r\n          TO LIFE<span class=\"dp-dot\">.<\/span>\r\n        <\/span>\r\n\r\n      <\/h1>\r\n\r\n      <p class=\"dp-intro-description\">\r\n\r\n        LED Videowalls\r\n\r\n        <span class=\"dp-separator\"><\/span>\r\n\r\n        Touch Solutions\r\n\r\n        <span class=\"dp-separator\"><\/span>\r\n\r\n        AV Engineering\r\n\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =========================\r\n         SCENE 02 \u2014 MESSAGE\r\n         ========================= -->\r\n\r\n    <div class=\"dp-intro-scene dp-scene-two\">\r\n\r\n      <div class=\"dp-intro-kicker\">\r\n        BEYOND THE ORDINARY\r\n      <\/div>\r\n\r\n      <h2 class=\"dp-intro-headline\">\r\n\r\n        <span class=\"dp-line\">\r\n          MORE THAN\r\n        <\/span>\r\n\r\n        <span class=\"dp-line\">\r\n          JUST A\r\n        <\/span>\r\n\r\n        <span class=\"dp-line dp-blue\">\r\n          SCREEN.\r\n        <\/span>\r\n\r\n      <\/h2>\r\n\r\n      <p class=\"dp-intro-description\">\r\n\r\n        Technology engineered\r\n        to make an impact.\r\n\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =========================\r\n         SCENE 03 \u2014 TRANSITION\r\n         ========================= -->\r\n\r\n    <div class=\"dp-intro-scene dp-scene-three\">\r\n\r\n      <div class=\"dp-intro-kicker\">\r\n        EXPLORE OUR EXPERTISE\r\n      <\/div>\r\n\r\n      <h2 class=\"dp-intro-headline\">\r\n\r\n        <span class=\"dp-line\">\r\n          THIS IS\r\n        <\/span>\r\n\r\n        <span class=\"dp-line dp-blue\">\r\n          WHAT\r\n        <\/span>\r\n\r\n        <span class=\"dp-line\">\r\n          WE DO.\r\n        <\/span>\r\n\r\n      <\/h2>\r\n\r\n      <a class=\"dp-intro-cta\"\r\n         href=\"https:\/\/displero.com\/services\/\"\r\n         tabindex=\"-1\">\r\n\r\n        EXPLORE OUR SERVICES\r\n\r\n        <span>\u2198<\/span>\r\n\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =========================\r\n         BOTTOM INTERFACE\r\n         ========================= -->\r\n\r\n    <div class=\"dp-intro-bottom\">\r\n\r\n      <div class=\"dp-intro-scroll\">\r\n\r\n        <span class=\"dp-intro-scroll-icon\">\r\n          \u2193\r\n        <\/span>\r\n\r\n        <span>\r\n          SCROLL TO EXPLORE\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"dp-intro-counter\">\r\n\r\n        <span class=\"dp-intro-current\">\r\n          01\r\n        <\/span>\r\n\r\n        <span class=\"dp-intro-counter-line\">\r\n        <\/span>\r\n\r\n        <span>03<\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- PROGRESS BAR -->\r\n\r\n    <div class=\"dp-intro-progress\">\r\n\r\n      <div class=\"dp-intro-progress-fill\">\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================\r\n   01 \u2014 VARIABLES \/ SECTION\r\n   ========================================= *\/\r\n\r\n.dp-intro {\r\n\r\n  --blue: #5471a4;\r\n  --grey: #54595F;\r\n  --dark: #090d1f;\r\n  --text: #c3cad7;\r\n\r\n  --progress: 0%;\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  height: 300vh;\r\n  height: 300svh;\r\n\r\n  margin: 0;\r\n\r\n  padding: 0;\r\n\r\n  background: var(--dark);\r\n\r\n  color: #ffffff;\r\n\r\n  font-family:\r\n    \"Manrope\",\r\n    sans-serif;\r\n\r\n  isolation: isolate;\r\n\r\n}\r\n\r\n\r\n.dp-intro * {\r\n\r\n  box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   02 \u2014 STICKY SCREEN\r\n   ========================================= *\/\r\n\r\n.dp-intro-frame {\r\n\r\n  position: sticky;\r\n\r\n  top: 0;\r\n\r\n  width: 100%;\r\n\r\n  height: 100vh;\r\n  height: 100svh;\r\n\r\n  overflow: hidden;\r\n\r\n  isolation: isolate;\r\n\r\n  background: #090d1f;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   03 \u2014 BACKGROUND GLOW\r\n   ========================================= *\/\r\n\r\n.dp-intro-glow {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 0;\r\n\r\n  width: 100vmax;\r\n  height: 100vmax;\r\n\r\n  max-width: 1300px;\r\n  max-height: 1300px;\r\n\r\n  left: 50%;\r\n  top: 50%;\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n  border-radius: 50%;\r\n\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(84,113,164,.24) 0%,\r\n    rgba(84,113,164,.09) 27%,\r\n    transparent 65%\r\n  );\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* SUBTLE TECH GRID *\/\r\n\r\n.dp-intro-grid {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  opacity: .22;\r\n\r\n  background-image:\r\n\r\n    linear-gradient(\r\n      rgba(84,113,164,.10) 1px,\r\n      transparent 1px\r\n    ),\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(84,113,164,.10) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size: 75px 75px;\r\n\r\n  mask-image: radial-gradient(\r\n    ellipse at center,\r\n    black,\r\n    transparent 75%\r\n  );\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   04 \u2014 TOP BAR\r\n   ========================================= *\/\r\n\r\n.dp-intro-top {\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n\r\n  z-index: 10;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  padding:\r\n    clamp(92px, 11vh, 135px)\r\n    clamp(24px, 5vw, 90px)\r\n    0;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.dp-intro-brand {\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 15px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dp-intro-brand span {\r\n\r\n  color: var(--blue);\r\n\r\n  font-size: 10px;\r\n\r\n  vertical-align: top;\r\n\r\n  margin-left: 3px;\r\n\r\n}\r\n\r\n\r\n.dp-intro-top-right {\r\n\r\n  color: #aab9d2;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   05 \u2014 SCENES\r\n   ========================================= *\/\r\n\r\n.dp-intro-scene {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 3;\r\n\r\n  inset: 0;\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  text-align: center;\r\n\r\n  padding:\r\n\r\n    140px\r\n    20px\r\n    110px;\r\n\r\n  transform-origin: center;\r\n\r\n  will-change: transform, opacity;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\/* INITIAL VISIBILITY *\/\r\n\r\n.dp-scene-one {\r\n\r\n  opacity: 1;\r\n\r\n  transform: scale(1);\r\n\r\n}\r\n\r\n\r\n.dp-scene-two {\r\n\r\n  opacity: 0;\r\n\r\n  transform: scale(.88);\r\n\r\n}\r\n\r\n\r\n.dp-scene-three {\r\n\r\n  opacity: 0;\r\n\r\n  transform: translateY(30px);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   06 \u2014 KICKER\r\n   ========================================= *\/\r\n\r\n.dp-intro-kicker {\r\n\r\n  margin-bottom: 28px;\r\n\r\n  color: #a4b6d5;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 5px;\r\n\r\n  line-height: 1.6;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   07 \u2014 MAIN TYPOGRAPHY\r\n   ========================================= *\/\r\n\r\n.dp-intro-headline {\r\n\r\n  margin: 0;\r\n\r\n  width: 100%;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    52px,\r\n    9vw,\r\n    150px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: .96;\r\n\r\n  letter-spacing: -.075em;\r\n\r\n  text-transform: uppercase;\r\n\r\n}\r\n\r\n\r\n.dp-intro-headline .dp-line {\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n\r\n  white-space: nowrap;\r\n\r\n  transform-origin: center;\r\n\r\n}\r\n\r\n\r\n\/* MAIN BLUE WORD *\/\r\n\r\n.dp-intro-headline .dp-line-main {\r\n\r\n  color: var(--blue);\r\n\r\n  text-shadow:\r\n    0 0 85px\r\n    rgba(84,113,164,.22);\r\n\r\n  will-change: transform;\r\n\r\n}\r\n\r\n\r\n.dp-intro-headline .dp-blue {\r\n\r\n  color: var(--blue);\r\n\r\n}\r\n\r\n\r\n.dp-dot {\r\n\r\n  color: var(--blue);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   08 \u2014 DESCRIPTION\r\n   ========================================= *\/\r\n\r\n.dp-intro-description {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 14px;\r\n\r\n  margin: 38px 0 0;\r\n\r\n  max-width: 700px;\r\n\r\n  color: var(--text);\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 500;\r\n\r\n  line-height: 1.8;\r\n\r\n  letter-spacing: 1px;\r\n\r\n}\r\n\r\n\r\n.dp-separator {\r\n\r\n  display: inline-block;\r\n\r\n  width: 4px;\r\n  height: 4px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--blue);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   09 \u2014 FINAL CTA\r\n   ========================================= *\/\r\n\r\n.dp-intro-cta {\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  gap: 40px;\r\n\r\n  margin-top: 44px;\r\n\r\n  padding: 17px 25px;\r\n\r\n  border:\r\n    1px solid var(--blue);\r\n\r\n  border-radius: 3px;\r\n\r\n  background:\r\n    rgba(84,113,164,.08);\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n  text-decoration: none;\r\n\r\n  pointer-events: auto;\r\n\r\n  transition:\r\n\r\n    background .3s ease,\r\n\r\n    color .3s ease,\r\n\r\n    border-color .3s ease;\r\n\r\n}\r\n\r\n\r\n.dp-intro-cta span {\r\n\r\n  color: var(--blue);\r\n\r\n  font-size: 22px;\r\n\r\n  transition:\r\n    transform .3s ease;\r\n\r\n}\r\n\r\n\r\n.dp-intro-cta:hover {\r\n\r\n  background: var(--blue);\r\n\r\n  color: #ffffff;\r\n\r\n}\r\n\r\n\r\n.dp-intro-cta:hover span {\r\n\r\n  color: #ffffff;\r\n\r\n  transform: translate(3px, 3px);\r\n\r\n}\r\n\r\n\r\n.dp-intro-cta:focus-visible {\r\n\r\n  outline: 2px solid #ffffff;\r\n\r\n  outline-offset: 5px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   10 \u2014 BOTTOM BAR\r\n   ========================================= *\/\r\n\r\n.dp-intro-bottom {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 10;\r\n\r\n  bottom: 50px;\r\n\r\n  left: clamp(24px, 5vw, 90px);\r\n  right: clamp(24px, 5vw, 90px);\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* SCROLL HINT *\/\r\n\r\n.dp-intro-scroll {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 17px;\r\n\r\n  color: #aab9d2;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dp-intro-scroll-icon {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  width: 39px;\r\n  height: 39px;\r\n\r\n  border:\r\n    1px solid rgba(84,113,164,.6);\r\n\r\n  border-radius: 50%;\r\n\r\n  color: var(--blue);\r\n\r\n  font-size: 19px;\r\n\r\n  animation:\r\n    dpIntroBounce 2s\r\n    ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpIntroBounce {\r\n\r\n  0%, 100% {\r\n\r\n    transform: translateY(0);\r\n\r\n  }\r\n\r\n  50% {\r\n\r\n    transform: translateY(6px);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* COUNTER *\/\r\n\r\n.dp-intro-counter {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 16px;\r\n\r\n  color: #aab9d2;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dp-intro-current {\r\n\r\n  color: var(--blue);\r\n\r\n  min-width: 20px;\r\n\r\n}\r\n\r\n\r\n.dp-intro-counter-line {\r\n\r\n  width: 50px;\r\n  height: 1px;\r\n\r\n  background:\r\n    rgba(84,113,164,.55);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   11 \u2014 PROGRESS BAR\r\n   ========================================= *\/\r\n\r\n.dp-intro-progress {\r\n\r\n  position: absolute;\r\n\r\n  bottom: 0;\r\n\r\n  left: 0;\r\n  right: 0;\r\n\r\n  z-index: 15;\r\n\r\n  height: 2px;\r\n\r\n  background:\r\n    rgba(84,113,164,.18);\r\n\r\n}\r\n\r\n\r\n.dp-intro-progress-fill {\r\n\r\n  width: var(--progress);\r\n\r\n  height: 100%;\r\n\r\n  background: var(--blue);\r\n\r\n  box-shadow:\r\n    0 0 18px\r\n    rgba(84,113,164,.75);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   12 \u2014 INITIAL LOAD\r\n   ========================================= *\/\r\n\r\n@keyframes dpIntroEnter {\r\n\r\n  from {\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(35px);\r\n\r\n  }\r\n\r\n  to {\r\n\r\n    opacity: 1;\r\n\r\n    transform: translateY(0);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n.dp-intro:not(.dp-intro-scrolled)\r\n.dp-scene-one\r\n.dp-intro-headline {\r\n\r\n  animation:\r\n    dpIntroEnter 1.1s\r\n    cubic-bezier(.2,.8,.2,1)\r\n    both;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   13 \u2014 TABLET\r\n   ========================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  .dp-intro-headline {\r\n\r\n    font-size: clamp(\r\n      50px,\r\n      10vw,\r\n      105px\r\n    );\r\n\r\n  }\r\n\r\n  .dp-intro-top {\r\n\r\n    padding-top: 110px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   14 \u2014 MOBILE\r\n   ========================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .dp-intro {\r\n\r\n    height: 270vh;\r\n    height: 270svh;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-top {\r\n\r\n    padding:\r\n      100px 22px 0;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-brand {\r\n\r\n    font-size: 12px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-top-right {\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n    text-align: right;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-scene {\r\n\r\n    padding:\r\n      140px\r\n      15px\r\n      100px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-headline {\r\n\r\n    font-size: clamp(\r\n      38px,\r\n      12vw,\r\n      70px\r\n    );\r\n\r\n    letter-spacing: -.065em;\r\n\r\n    line-height: 1.02;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-kicker {\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-description {\r\n\r\n    max-width: 310px;\r\n\r\n    margin-top: 30px;\r\n\r\n    gap: 8px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: .3px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-bottom {\r\n\r\n    bottom: 35px;\r\n\r\n    left: 22px;\r\n    right: 22px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-scroll {\r\n\r\n    gap: 10px;\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-scroll-icon {\r\n\r\n    width: 32px;\r\n    height: 32px;\r\n\r\n    font-size: 16px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-counter {\r\n\r\n    gap: 8px;\r\n\r\n    font-size: 9px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-counter-line {\r\n\r\n    width: 22px;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-cta {\r\n\r\n    gap: 20px;\r\n\r\n    font-size: 9px;\r\n\r\n    padding: 15px 18px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   15 \u2014 SMALL PHONES\r\n   ========================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n  .dp-intro-headline {\r\n\r\n    font-size: 11.5vw;\r\n\r\n  }\r\n\r\n  .dp-intro-description {\r\n\r\n    max-width: 270px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   16 \u2014 REDUCED MOTION\r\n   ========================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  .dp-intro {\r\n\r\n    height: 100vh;\r\n    height: 100svh;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-frame {\r\n\r\n    position: relative;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro-scene {\r\n\r\n    will-change: auto;\r\n\r\n  }\r\n\r\n\r\n  .dp-scene-one {\r\n\r\n    opacity: 1 !important;\r\n\r\n    transform: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dp-scene-two,\r\n  .dp-scene-three {\r\n\r\n    display: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dp-intro *,\r\n  .dp-intro *::before,\r\n  .dp-intro *::after {\r\n\r\n    animation: none !important;\r\n\r\n    transition: none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================\r\n   DISPLERO \u2014 SCROLL ENGINE\r\n   ========================================= *\/\r\n\r\n(function () {\r\n\r\n  \"use strict\";\r\n\r\n\r\n  \/* FIND ALL INTRO SECTIONS *\/\r\n\r\n  const sections = document.querySelectorAll(\r\n    \".dp-intro:not([data-initialized])\"\r\n  );\r\n\r\n\r\n  sections.forEach(initIntro);\r\n\r\n\r\n\r\n  function initIntro(section) {\r\n\r\n\r\n    section.setAttribute(\r\n      \"data-initialized\",\r\n      \"true\"\r\n    );\r\n\r\n\r\n    const sceneOne =\r\n      section.querySelector(\".dp-scene-one\");\r\n\r\n    const sceneTwo =\r\n      section.querySelector(\".dp-scene-two\");\r\n\r\n    const sceneThree =\r\n      section.querySelector(\".dp-scene-three\");\r\n\r\n    const mainWord =\r\n      section.querySelector(\".dp-line-main\");\r\n\r\n    const counter =\r\n      section.querySelector(\".dp-intro-current\");\r\n\r\n    const cta =\r\n      section.querySelector(\".dp-intro-cta\");\r\n\r\n\r\n    const reducedMotion =\r\n      window.matchMedia(\r\n        \"(prefers-reduced-motion: reduce)\"\r\n      );\r\n\r\n\r\n    if (reducedMotion.matches) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    let ticking = false;\r\n\r\n\r\n\r\n    \/* ===================================\r\n       MATH HELPERS\r\n       =================================== *\/\r\n\r\n    function clamp(value) {\r\n\r\n      return Math.max(\r\n        0,\r\n        Math.min(1, value)\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    function smooth(start, end, value) {\r\n\r\n      const t = clamp(\r\n        (value - start) \/ (end - start)\r\n      );\r\n\r\n      return t * t * (3 - 2 * t);\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* ===================================\r\n       UPDATE ANIMATION\r\n       =================================== *\/\r\n\r\n    function update() {\r\n\r\n      ticking = false;\r\n\r\n\r\n      const rect =\r\n        section.getBoundingClientRect();\r\n\r\n\r\n      const scrollDistance = Math.max(\r\n\r\n        section.offsetHeight -\r\n        window.innerHeight,\r\n\r\n        1\r\n\r\n      );\r\n\r\n\r\n      const progress = clamp(\r\n\r\n        -rect.top \/ scrollDistance\r\n\r\n      );\r\n\r\n\r\n\r\n      \/* =================================\r\n         SCENE 01\r\n         0% \u2014 43%\r\n         ================================= *\/\r\n\r\n      const exitOne =\r\n        smooth(.19, .43, progress);\r\n\r\n\r\n      const zoomOne =\r\n        smooth(.10, .45, progress);\r\n\r\n\r\n      sceneOne.style.opacity =\r\n        1 - exitOne;\r\n\r\n\r\n      sceneOne.style.transform =\r\n\r\n        \"scale(\" +\r\n\r\n        (1 + zoomOne * .65)\r\n\r\n        + \")\";\r\n\r\n\r\n\r\n      \/* EXTRA ZOOM \u2014 DISPLAYS *\/\r\n\r\n      mainWord.style.transform =\r\n\r\n        \"scale(\" +\r\n\r\n        (1 + zoomOne * .55)\r\n\r\n        + \")\";\r\n\r\n\r\n\r\n      \/* =================================\r\n         SCENE 02\r\n         34% \u2014 78%\r\n         ================================= *\/\r\n\r\n      const enterTwo =\r\n        smooth(.34, .51, progress);\r\n\r\n\r\n      const exitTwo =\r\n        smooth(.63, .78, progress);\r\n\r\n\r\n      const opacityTwo =\r\n\r\n        enterTwo *\r\n        (1 - exitTwo);\r\n\r\n\r\n      sceneTwo.style.opacity =\r\n        opacityTwo;\r\n\r\n\r\n      const zoomTwo =\r\n\r\n        .88 +\r\n\r\n        smooth(\r\n          .32,\r\n          .55,\r\n          progress\r\n        ) * .12 +\r\n\r\n        smooth(\r\n          .64,\r\n          .80,\r\n          progress\r\n        ) * .28;\r\n\r\n\r\n      sceneTwo.style.transform =\r\n\r\n        \"scale(\" +\r\n        zoomTwo +\r\n        \")\";\r\n\r\n\r\n\r\n      \/* =================================\r\n         SCENE 03\r\n         72% \u2014 100%\r\n         ================================= *\/\r\n\r\n      const enterThree =\r\n        smooth(.72, .88, progress);\r\n\r\n\r\n      sceneThree.style.opacity =\r\n        enterThree;\r\n\r\n\r\n      sceneThree.style.transform =\r\n\r\n        \"translateY(\" +\r\n\r\n        (\r\n          30 *\r\n          (1 - enterThree)\r\n        )\r\n\r\n        + \"px)\";\r\n\r\n\r\n\r\n      \/* CTA AVAILABLE ONLY WHEN VISIBLE *\/\r\n\r\n      sceneThree.style.pointerEvents =\r\n\r\n        progress >= .79\r\n        ? \"auto\"\r\n        : \"none\";\r\n\r\n\r\n      cta.tabIndex =\r\n\r\n        progress >= .79\r\n        ? 0\r\n        : -1;\r\n\r\n\r\n\r\n      \/* =================================\r\n         PROGRESS BAR\r\n         ================================= *\/\r\n\r\n      section.style.setProperty(\r\n\r\n        \"--progress\",\r\n\r\n        (progress * 100) + \"%\"\r\n\r\n      );\r\n\r\n\r\n\r\n      \/* =================================\r\n         COUNTER\r\n         ================================= *\/\r\n\r\n      if (progress < .43) {\r\n\r\n        counter.textContent = \"01\";\r\n\r\n      }\r\n\r\n      else if (progress < .78) {\r\n\r\n        counter.textContent = \"02\";\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        counter.textContent = \"03\";\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* INITIAL ANIMATION STATE *\/\r\n\r\n      section.classList.toggle(\r\n\r\n        \"dp-intro-scrolled\",\r\n\r\n        progress > .015\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* ===================================\r\n       OPTIMIZED SCROLL\r\n       =================================== *\/\r\n\r\n    function requestUpdate() {\r\n\r\n      if (ticking) return;\r\n\r\n      ticking = true;\r\n\r\n      requestAnimationFrame(update);\r\n\r\n    }\r\n\r\n\r\n\r\n    window.addEventListener(\r\n\r\n      \"scroll\",\r\n\r\n      requestUpdate,\r\n\r\n      { passive: true }\r\n\r\n    );\r\n\r\n\r\n    window.addEventListener(\r\n\r\n      \"resize\",\r\n\r\n      requestUpdate,\r\n\r\n      { passive: true }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* ===================================\r\n       INITIAL POSITION\r\n       =================================== *\/\r\n\r\n    update();\r\n\r\n\r\n    window.addEventListener(\r\n\r\n      \"load\",\r\n\r\n      requestUpdate,\r\n\r\n      { once: true }\r\n\r\n    );\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-220215b e-con-full e-flex e-con e-parent\" data-id=\"220215b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab99484 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"ab99484\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- DISPLERO \/ WHAT WE DO \u2014 bright contrast section -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<section class=\"dp-services\" id=\"services\">\n\n  <div class=\"dp-container\">\n\n    <div class=\"dp-heading\">\n      <span class=\"dp-eyebrow\">\n        WHAT WE DO\n      <\/span>\n\n      <h2>\n        SERVICES WE ARE\n        <span>OFFERING.<\/span>\n      <\/h2>\n\n      <p>\n        Engineering visual experiences.\n      <\/p>\n    <\/div>\n\n    <div class=\"dp-grid\">\n\n      <!-- SERVICE 01 -->\n      <article class=\"dp-card\">\n\n        <div class=\"dp-card-top\">\n          <span class=\"dp-number\">VISUAL TECHNOLOGY<\/span>\n          <span class=\"dp-symbol\">\u25c8<\/span>\n        <\/div>\n\n        <div class=\"dp-content\">\n\n          <h3>\n            LED Videowall\n            <br>Installation\n          <\/h3>\n\n          <p>\n            Turnkey design, assembly, and precise\n            calibration of high-impact LED video\n            walls and large-scale digital signage.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"\">\n          <span class=\"\"><\/span>\n        <\/div>\n\n      <\/article>\n\n\n      <!-- SERVICE 02 -->\n      <article class=\"dp-card\">\n\n        <div class=\"dp-card-top\">\n          <span class=\"dp-number\">INTERACTIVE SOLUTIONS<\/span>\n          <span class=\"dp-symbol\">\u25ce<\/span>\n        <\/div>\n\n        <div class=\"dp-content\">\n\n          <h3>\n            Touch Overlay\n            <br>Installation\n          <\/h3>\n\n          <p>\n            Custom infrared and capacitive touch\n            overlays engineered to transform\n            standard displays into interactive\n            interfaces.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"\">\n          <span class=\"\"><\/span>\n        <\/div>\n\n      <\/article>\n\n\n      <!-- SERVICE 03 -->\n      <article class=\"dp-card\">\n\n        <div class=\"dp-card-top\">\n          <span class=\"dp-number\">SYSTEM INTEGRATION<\/span>\n          <span class=\"dp-symbol\">\u2318<\/span>\n        <\/div>\n\n        <div class=\"dp-content\">\n\n          <h3>\n            AV Equipment\n            <br>Installation\n          <\/h3>\n\n          <p>\n            Professional routing, integration,\n            and setup of complete commercial\n            sound and visual systems\n            for any space.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"\">\n          <span class=\"\"><\/span>\n        <\/div>\n\n      <\/article>\n\n\n      <!-- SERVICE 04 -->\n      <article class=\"dp-card\">\n\n        <div class=\"dp-card-top\">\n          <span class=\"dp-number\">TECHNICAL SERVICES<\/span>\n          <span class=\"dp-symbol\">\u2733<\/span>\n        <\/div>\n\n        <div class=\"dp-content\">\n\n          <h3>\n            Maintenance\n            <br>& Support\n          <\/h3>\n\n          <p>\n            Comprehensive technical care,\n            on-site diagnostics, and preventive\n            maintenance to keep your hardware\n            running flawlessly.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"\">\n          <span class=\"\"><\/span>\n        <\/div>\n\n      <\/article>\n\n    <\/div>\n\n    <div class=\"dp-footer\">\n      <span>MOVE BEYOND THE ORDINARY<\/span>\n      <a href=\"https:\/\/displero.com\/contact-2\">\n        LET'S TALK ABOUT YOUR PROJECT\n        <span>\u2197<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<style>\n\/* DISPLERO \/ WHAT WE DO \u2014 light section after dark intro.\n   Brand blue #5471a4, brand grey #54595F. *\/\n.dp-services {\n  --dp-blue: #5471a4;\n  --dp-grey: #54595F;\n  --dp-bg: #F5F6F8;\n  --dp-paper: #FFFFFF;\n  position: relative;\n  isolation: isolate;\n  width: 100%;\n  overflow: hidden;\n  margin: 0;\n  padding: 115px 24px 95px;\n  background: var(--dp-bg) !important;\n  color: var(--dp-grey);\n  font-family: \"Manrope\", sans-serif;\n}\n.dp-services *,\n.dp-services *::before,\n.dp-services *::after { box-sizing: border-box; }\n.dp-services .dp-container { max-width: 1400px; margin: 0 auto; position: relative; }\n\n\/* Slim editorial accent instead of a dark glow or another hero. *\/\n.dp-services::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: min(1400px, calc(100% - 48px));\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(84,113,164,.38), transparent);\n  transform: translateX(-50%);\n}\n\n\/* Heading: DARK grey on a LIGHT background, blue only on OFFERING. *\/\n.dp-services .dp-heading { text-align: center; margin: 0 0 65px; }\n.dp-services .dp-eyebrow {\n  display: inline-block;\n  margin: 0 0 20px;\n  color: var(--dp-blue);\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 4px;\n}\n.dp-services .dp-heading h2 {\n  margin: 0;\n  color: var(--dp-grey) !important;\n  font-size: clamp(32px, 4.5vw, 64px);\n  font-weight: 800;\n  line-height: 1.12;\n  letter-spacing: -2px;\n}\n.dp-services .dp-heading h2 span {\n  display: block;\n  background: none !important;\n  color: var(--dp-blue) !important;\n  -webkit-text-fill-color: var(--dp-blue) !important;\n}\n.dp-services .dp-heading p {\n  margin: 22px 0 0;\n  color: var(--dp-grey);\n  font-size: 15px;\n  letter-spacing: .5px;\n}\n\n\/* Four bright screens. Existing spotlight and 3D interaction stay intact. *\/\n.dp-services .dp-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 16px;\n  perspective: 1200px;\n}\n.dp-services .dp-card {\n  --x: 50%; --y: 50%; --rx: 0deg; --ry: 0deg; --lift: 0px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  min-width: 0;\n  min-height: 390px;\n  padding: 26px;\n  overflow: hidden;\n  isolation: isolate;\n  background: var(--dp-paper);\n  border: 1px solid rgba(84,89,95,.15);\n  border-radius: 14px;\n  box-shadow: 0 8px 30px rgba(38,54,77,.045);\n  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));\n  transition: transform .25s ease, border-color .35s ease,\n              background .35s ease, opacity .65s ease, box-shadow .35s ease;\n  transition-delay: 0ms;\n}\n.dp-services .dp-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  opacity: 0;\n  background: radial-gradient(320px circle at var(--x) var(--y),\n               rgba(84,113,164,.13), transparent 70%);\n  transition: opacity .35s ease;\n}\n.dp-services .dp-card::after {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 2px;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0;\n  transform: scaleX(.4);\n  background: linear-gradient(90deg, transparent, var(--dp-blue), transparent);\n  transition: opacity .4s ease, transform .4s ease;\n}\n.dp-services .dp-card:hover {\n  --lift: -8px;\n  background: var(--dp-paper);\n  border-color: var(--dp-blue);\n  box-shadow: 0 22px 55px rgba(84,113,164,.15);\n}\n.dp-services .dp-card:hover::before,\n.dp-services .dp-card:hover::after { opacity: 1; }\n.dp-services .dp-card:hover::after { transform: scaleX(1); }\n.dp-services .dp-card-top,\n.dp-services .dp-content,\n.dp-services .dp-card-bottom { position: relative; z-index: 2; }\n.dp-services .dp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.dp-services .dp-number {\n  color: var(--dp-blue);\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: 1.5px;\n  overflow-wrap: anywhere;\n}\n.dp-services .dp-symbol {\n  flex-shrink: 0;\n  color: var(--dp-blue);\n  font-size: 30px;\n  line-height: 1;\n  transition: transform .45s ease, color .45s ease;\n}\n.dp-services .dp-card:hover .dp-symbol { transform: rotate(45deg) scale(1.15); color: var(--dp-blue); }\n.dp-services .dp-content h3 {\n  margin: 18px 0;\n  color: var(--dp-grey);\n  font-size: clamp(19px, 1.6vw, 24px);\n  font-weight: 800;\n  line-height: 1.2;\n  letter-spacing: -.5px;\n  transition: color .3s ease;\n}\n.dp-services .dp-card:hover .dp-content h3 { color: var(--dp-blue); }\n.dp-services .dp-content p {\n  margin: 0;\n  color: var(--dp-grey);\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.7;\n}\n.dp-services .dp-card-bottom {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding-top: 20px;\n  border-top: 1px solid rgba(84,89,95,.15);\n  color: var(--dp-grey);\n}\n.dp-services .dp-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px; height: 32px;\n  border: 1px solid var(--dp-blue);\n  border-radius: 50%;\n  background: transparent;\n  color: var(--dp-blue);\n  font-size: 18px;\n  transition: transform .35s ease, background .35s ease, color .35s ease;\n}\n.dp-services .dp-card:hover .dp-arrow {\n  transform: rotate(45deg);\n  background: var(--dp-blue);\n  color: #FFFFFF;\n}\n\n\/* Closing line and the original contact URL. *\/\n.dp-services .dp-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 25px;\n  margin-top: 40px;\n}\n.dp-services .dp-footer > span {\n  color: var(--dp-grey);\n  font-size: 10px;\n  letter-spacing: 3px;\n}\n.dp-services .dp-footer a {\n  display: inline-flex;\n  align-items: center;\n  gap: 18px;\n  color: var(--dp-grey);\n  text-decoration: none;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 1px;\n  transition: color .3s ease;\n}\n.dp-services .dp-footer a:hover { color: var(--dp-blue); }\n.dp-services .dp-footer a span { font-size: 20px; }\n.dp-services .dp-footer a:focus-visible { outline: 2px solid var(--dp-blue); outline-offset: 5px; }\n\n\/* Reveal \/ responsive. *\/\n.dp-services.dp-animate .dp-card:not(.is-visible) { opacity: 0; transform: translateY(35px); }\n.dp-services .dp-card.is-visible { opacity: 1; }\n@media (max-width: 1100px) {\n  .dp-services .dp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .dp-services .dp-card { min-height: 340px; }\n}\n@media (max-width: 600px) {\n  .dp-services { padding: 75px 18px; }\n  .dp-services .dp-heading { margin-bottom: 40px; }\n  .dp-services .dp-heading h2 { letter-spacing: -1px; }\n  .dp-services .dp-grid { grid-template-columns: 1fr; gap: 14px; }\n  .dp-services .dp-card { min-height: 310px; padding: 25px; }\n  .dp-services .dp-content h3 { font-size: 24px; }\n  .dp-services .dp-footer { align-items: flex-start; flex-direction: column; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .dp-services *, .dp-services *::before, .dp-services *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n  .dp-services.dp-animate .dp-card:not(.is-visible) { opacity: 1; transform: none; }\n}\n<\/style>\n\n<script>\n\n(function () {\n\n  const section =\n    document.querySelector(\".dp-services\");\n\n  if (!section) return;\n\n  const cards =\n    section.querySelectorAll(\".dp-card\");\n\n  const reducedMotion =\n    window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n\n  \/* SCROLL ANIMATION *\/\n\n  if (\n    !reducedMotion &&\n    \"IntersectionObserver\" in window\n  ) {\n\n    section.classList.add(\"dp-animate\");\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n\n        entries.forEach((entry) => {\n\n          if (entry.isIntersecting) {\n\n            entry.target.classList.add(\n              \"is-visible\"\n            );\n\n            observer.unobserve(entry.target);\n\n          }\n\n        });\n\n      },\n      {\n        threshold: 0.12\n      }\n    );\n\n    cards.forEach((card, index) => {\n\n      card.style.transitionDelay =\n        (index * 100) + \"ms\";\n\n      observer.observe(card);\n\n    });\n\n  }\n\n\n  \/* INTERACTIVE 3D + SPOTLIGHT *\/\n\n  if (reducedMotion) return;\n\n  cards.forEach((card) => {\n\n    card.addEventListener(\n      \"pointermove\",\n      (event) => {\n\n        if (event.pointerType === \"touch\") {\n          return;\n        }\n\n        const rect =\n          card.getBoundingClientRect();\n\n        const x =\n          event.clientX - rect.left;\n\n        const y =\n          event.clientY - rect.top;\n\n        card.style.setProperty(\n          \"--x\",\n          x + \"px\"\n        );\n\n        card.style.setProperty(\n          \"--y\",\n          y + \"px\"\n        );\n\n        const rotateX =\n          (0.5 - y \/ rect.height) * 5;\n\n        const rotateY =\n          (x \/ rect.width - 0.5) * 5;\n\n        card.style.setProperty(\n          \"--rx\",\n          rotateX + \"deg\"\n        );\n\n        card.style.setProperty(\n          \"--ry\",\n          rotateY + \"deg\"\n        );\n\n      }\n    );\n\n\n    card.addEventListener(\n      \"pointerleave\",\n      () => {\n\n        card.style.setProperty(\n          \"--rx\",\n          \"0deg\"\n        );\n\n        card.style.setProperty(\n          \"--ry\",\n          \"0deg\"\n        );\n\n      }\n    );\n\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<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-bdf211c e-con-full e-flex e-con e-parent\" data-id=\"bdf211c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0663bce elementor-widget elementor-widget-html\" data-id=\"0663bce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- ======================================\r\n DISPLERO \u2014 PROJECT ORBIT 3D V2\r\n COMPLETE HTML + CSS + JAVASCRIPT\r\n ====================================== -->\r\n\r\n<section class=\"dpo-work\" id=\"selected-work\">\r\n\r\n<div class=\"dpo-container\">\r\n\r\n  <!-- HEADER -->\r\n\r\n  <div class=\"dpo-header\">\r\n\r\n    <span class=\"dpo-label\">\r\n        \r\n      SELECTED WORK\r\n    <\/span>\r\n\r\n    <h2>\r\n      BUILT TO\r\n      <span>BE SEEN.<\/span>\r\n    <\/h2>\r\n\r\n    <p>\r\n      Explore our work in a different dimension.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- ORBIT -->\r\n\r\n  <div class=\"dpo-orbit-shell\">\r\n\r\n    <div class=\"dpo-stage\">\r\n\r\n      <div class=\"dpo-orbit-ring\"><\/div>\r\n\r\n      <div class=\"dpo-orbit-center\">\r\n        DISPLERO\r\n      <\/div>\r\n\r\n\r\n      <!-- PROJECT 01 -->\r\n\r\n      <button class=\"dpo-card\"\r\n        type=\"button\"\r\n        data-title=\"Large-Scale LED Installation\"\r\n        data-category=\"LED VIDEOWALL\">\r\n\r\n        <img\r\n          data-src=\"WKLEJ_ZDJECIE_1\"\r\n          alt=\"LED Wall\"\r\n          draggable=\"false\">\r\n\r\n        <span class=\"dpo-placeholder\">\r\n          LED WALL\r\n        <\/span>\r\n\r\n        <span class=\"dpo-card-number\">001<\/span>\r\n\r\n      <\/button>\r\n\r\n\r\n      <!-- PROJECT 02 -->\r\n\r\n      <button class=\"dpo-card\"\r\n        type=\"button\"\r\n        data-title=\"Interactive Touch Solution\"\r\n        data-category=\"TOUCH TECHNOLOGY\">\r\n\r\n        <img\r\n          data-src=\"https:\/\/displero.com\/wp-content\/uploads\/2026\/09\/Obraz-ChatGPT-27-wrz-2026-18_53_04.png\"\r\n          alt=\"Touch Overlay\"\r\n          draggable=\"false\">\r\n\r\n        <span class=\"dpo-placeholder\">\r\n          TOUCH\r\n        <\/span>\r\n\r\n        <span class=\"dpo-card-number\">002<\/span>\r\n\r\n      <\/button>\r\n\r\n\r\n      <!-- PROJECT 03 -->\r\n\r\n      <button class=\"dpo-card\"\r\n        type=\"button\"\r\n        data-title=\"Commercial Display System\"\r\n        data-category=\"DIGITAL SIGNAGE\">\r\n\r\n        <img\r\n          data-src=\"WKLEJ_ZDJECIE_3\"\r\n          alt=\"Digital Signage\"\r\n          draggable=\"false\">\r\n\r\n        <span class=\"dpo-placeholder\">\r\n          DIGITAL SIGNAGE\r\n        <\/span>\r\n\r\n        <span class=\"dpo-card-number\">003<\/span>\r\n\r\n      <\/button>\r\n\r\n\r\n      <!-- PROJECT 04 -->\r\n\r\n      <button class=\"dpo-card\"\r\n        type=\"button\"\r\n        data-title=\"Complete AV Environment\"\r\n        data-category=\"AV INTEGRATION\">\r\n\r\n        <img\r\n          data-src=\"WKLEJ_ZDJECIE_4\"\r\n          alt=\"AV Integration\"\r\n          draggable=\"false\">\r\n\r\n        <span class=\"dpo-placeholder\">\r\n          AV INTEGRATION\r\n        <\/span>\r\n\r\n        <span class=\"dpo-card-number\">004<\/span>\r\n\r\n      <\/button>\r\n\r\n\r\n      <!-- PROJECT 05 -->\r\n\r\n      <button class=\"dpo-card\"\r\n        type=\"button\"\r\n        data-title=\"High-Traffic Display Installation\"\r\n        data-category=\"PUBLIC ENVIRONMENT\">\r\n\r\n        <img\r\n          data-src=\"WKLEJ_ZDJECIE_5\"\r\n          alt=\"Display Installation\"\r\n          draggable=\"false\">\r\n\r\n        <span class=\"dpo-placeholder\">\r\n          DISPLAY SYSTEM\r\n        <\/span>\r\n\r\n        <span class=\"dpo-card-number\">005<\/span>\r\n\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- FULL WIDTH ARROWS -->\r\n\r\n    <div class=\"dpo-edge-nav\">\r\n\r\n      <button\r\n        class=\"dpo-edge dpo-prev\"\r\n        type=\"button\"\r\n        aria-label=\"Previous project\">\r\n        &#8592;\r\n      <\/button>\r\n\r\n      <button\r\n        class=\"dpo-edge dpo-next\"\r\n        type=\"button\"\r\n        aria-label=\"Next project\">\r\n        &#8594;\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- PROJECT INFORMATION -->\r\n\r\n  <div class=\"dpo-info\">\r\n\r\n    <div class=\"dpo-info-index\">\r\n\r\n      <span class=\"dpo-current\">01<\/span>\r\n\r\n      <span class=\"dpo-index-line\"><\/span>\r\n\r\n      <span>05<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"dpo-info-main\">\r\n\r\n      <span class=\"dpo-active-category\">\r\n        LED VIDEOWALL\r\n      <\/span>\r\n\r\n      <h3 class=\"dpo-active-title\">\r\n        Large-Scale LED Installation\r\n      <\/h3>\r\n\r\n    <\/div>\r\n\r\n\r\n    <button\r\n      class=\"dpo-pause\"\r\n      type=\"button\"\r\n      aria-label=\"Pause automatic rotation\"\r\n      aria-pressed=\"false\">\r\n      \u2161\r\n    <\/button>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- FOOTER -->\r\n\r\n  <div class=\"dpo-footer\">\r\n\r\n    <span>\r\n      DRAG TO ROTATE\r\n    <\/span>\r\n\r\n    <a href=\"https:\/\/displero.com\/projects\/\">\r\n      VIEW ALL PROJECTS\r\n      <span>\u2197<\/span>\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* ======================================\r\n   DISPLERO \u2014 BRAND\r\n   ====================================== *\/\r\n\r\n.dpo-work {\r\n\r\n  --blue: #5471a4;\r\n  --dark: #090d1f;\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  padding: 100px 24px 65px;\r\n\r\n  background: #5471a4;\r\n\r\n  color: #ffffff;\r\n\r\n  font-family: \"Manrope\", sans-serif;\r\n\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n.dpo-work * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dpo-container {\r\n\r\n  max-width: 1450px;\r\n\r\n  margin: 0 auto;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   HEADER\r\n   ====================================== *\/\r\n\r\n.dpo-header {\r\n\r\n  text-align: center;\r\n\r\n  margin-bottom: 25px;\r\n\r\n}\r\n\r\n.dpo-label {\r\n\r\n  display: block;\r\n\r\n  margin-bottom: 25px;\r\n\r\n  color: #e3ebf7;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 4px;\r\n\r\n}\r\n\r\n.dpo-header h2 {\r\n\r\n  margin: 0;\r\n\r\n  color: #fff;\r\n\r\n  font-size: clamp(44px, 7vw, 100px);\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: .95;\r\n\r\n  letter-spacing: -.065em;\r\n\r\n}\r\n\r\n.dpo-header h2 span {\r\n\r\n  display: block;\r\n\r\n  color: #fff;\r\n\r\n}\r\n\r\n.dpo-header p {\r\n\r\n  margin: 30px 0 0;\r\n\r\n  color: #edf2f9;\r\n\r\n  font-size: 14px;\r\n\r\n  letter-spacing: 1px;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   ORBIT CONTAINER\r\n   ====================================== *\/\r\n\r\n.dpo-orbit-shell {\r\n  position: relative;\r\n}\r\n\r\n.dpo-stage {\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  height: 550px;\r\n\r\n  margin: 0 auto;\r\n\r\n  perspective: 1100px;\r\n\r\n  isolation: isolate;\r\n\r\n  cursor: grab;\r\n\r\n  user-select: none;\r\n\r\n  -webkit-user-select: none;\r\n\r\n  touch-action: pan-y;\r\n\r\n}\r\n\r\n.dpo-stage.is-dragging,\r\n.dpo-stage.is-dragging * {\r\n\r\n  cursor: grabbing !important;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   ORBIT RING\r\n   ====================================== *\/\r\n\r\n.dpo-orbit-ring {\r\n\r\n  position: absolute;\r\n\r\n  width: min(85%, 1050px);\r\n\r\n  height: 340px;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  border: 1px solid rgba(255,255,255,.40);\r\n\r\n  border-radius: 50%;\r\n\r\n  transform:\r\n    translate(-50%,-50%)\r\n    rotateX(68deg);\r\n\r\n  box-shadow:\r\n    0 0 65px rgba(255,255,255,.06);\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n.dpo-orbit-ring::after {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 16px;\r\n\r\n  border: 1px dashed rgba(255,255,255,.20);\r\n\r\n  border-radius: 50%;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   CENTER BRAND\r\n   ====================================== *\/\r\n\r\n.dpo-orbit-center {\r\n\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n  color: rgba(255,255,255,.10);\r\n\r\n  font-size: clamp(35px,8vw,110px);\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.07em;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   PROJECT CARDS\r\n   ====================================== *\/\r\n\r\n.dpo-card {\r\n\r\n  position: absolute;\r\n\r\n  left: 50%;\r\n  top: 50%;\r\n\r\n  display: block;\r\n\r\n  width: clamp(210px,31vw,420px);\r\n\r\n  aspect-ratio: 4 \/ 3;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  border: 1px solid rgba(255,255,255,.30);\r\n\r\n  border-radius: 7px;\r\n\r\n  background: linear-gradient(\r\n    135deg,\r\n    #263d66,\r\n    #090d1f\r\n  );\r\n\r\n  overflow: hidden;\r\n\r\n  appearance: none;\r\n\r\n  cursor: pointer;\r\n\r\n  backface-visibility: hidden;\r\n\r\n  box-shadow:\r\n    0 22px 65px rgba(0,0,0,.30);\r\n\r\n  \/* Movement controlled by JavaScript *\/\r\n\r\n  transition:\r\n    border-color .25s ease,\r\n    box-shadow .25s ease;\r\n\r\n  will-change: transform;\r\n\r\n  touch-action: pan-y;\r\n\r\n}\r\n\r\n.dpo-card.is-active {\r\n\r\n  border-color: #ffffff;\r\n\r\n  box-shadow:\r\n    0 35px 100px rgba(0,0,0,.40),\r\n    0 0 0 1px rgba(255,255,255,.30);\r\n\r\n}\r\n\r\n.dpo-card:focus-visible,\r\n.dpo-edge:focus-visible,\r\n.dpo-pause:focus-visible {\r\n\r\n  outline: 3px solid white;\r\n\r\n  outline-offset: 5px;\r\n\r\n}\r\n\r\n\r\n\/* IMAGES *\/\r\n\r\n.dpo-card img {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n\r\n  display: none;\r\n\r\n  pointer-events: none;\r\n\r\n  -webkit-user-drag: none;\r\n\r\n}\r\n\r\n.dpo-card.has-image img {\r\n  display: block;\r\n}\r\n\r\n\r\n\/* DARK IMAGE OVERLAY *\/\r\n\r\n.dpo-card::after {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  background: linear-gradient(\r\n    180deg,\r\n    transparent 55%,\r\n    rgba(9,13,31,.55)\r\n  );\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\/* PLACEHOLDER *\/\r\n\r\n.dpo-placeholder {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  padding: 20px;\r\n\r\n  color: #fff;\r\n\r\n  font-size: 23px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.04em;\r\n\r\n  text-align: center;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n.dpo-card.has-image .dpo-placeholder {\r\n  display: none;\r\n}\r\n\r\n.dpo-card-number {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 2;\r\n\r\n  top: 20px;\r\n  left: 20px;\r\n\r\n  color: #fff;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   FULL WIDTH NAVIGATION\r\n   ====================================== *\/\r\n\r\n.dpo-edge-nav {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 150;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n\r\n  height: 0;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n.dpo-edge {\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n\r\n  transform: translateY(-50%);\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  width: clamp(48px,5vw,66px);\r\n\r\n  height: clamp(48px,5vw,66px);\r\n\r\n  padding: 0;\r\n\r\n  border: 1px solid rgba(255,255,255,.72);\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(9,13,31,.52);\r\n\r\n  color: #fff;\r\n\r\n  font: inherit;\r\n\r\n  font-size: 27px;\r\n\r\n  cursor: pointer;\r\n\r\n  pointer-events: auto;\r\n\r\n  backdrop-filter: blur(7px);\r\n\r\n  transition:\r\n    background .2s ease,\r\n    transform .2s ease;\r\n\r\n}\r\n\r\n.dpo-edge:hover {\r\n\r\n  background: var(--dark);\r\n\r\n  transform:\r\n    translateY(-50%)\r\n    scale(1.06);\r\n\r\n}\r\n\r\n.dpo-prev {\r\n\r\n  left: clamp(8px,2.4vw,52px);\r\n\r\n}\r\n\r\n.dpo-next {\r\n\r\n  right: clamp(8px,2.4vw,52px);\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   PROJECT INFORMATION\r\n   ====================================== *\/\r\n\r\n.dpo-info {\r\n\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 35px;\r\n\r\n  padding: 35px 0;\r\n\r\n  border-top:\r\n    1px solid rgba(255,255,255,.35);\r\n\r\n  border-bottom:\r\n    1px solid rgba(255,255,255,.35);\r\n\r\n}\r\n\r\n.dpo-info-index {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 15px;\r\n\r\n  color: rgba(255,255,255,.75);\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n.dpo-current {\r\n  color: white;\r\n}\r\n\r\n.dpo-index-line {\r\n\r\n  width: 35px;\r\n\r\n  height: 1px;\r\n\r\n  background: rgba(255,255,255,.50);\r\n\r\n}\r\n\r\n.dpo-info-main {\r\n\r\n  flex: 1;\r\n\r\n  text-align: center;\r\n\r\n  min-width: 0;\r\n\r\n}\r\n\r\n.dpo-active-category {\r\n\r\n  color: #e0e9f6;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n.dpo-active-title {\r\n\r\n  margin: 12px 0 0;\r\n\r\n  color: #fff;\r\n\r\n  font-size: clamp(23px,3vw,38px);\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.04em;\r\n\r\n  line-height: 1.2;\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   PAUSE BUTTON\r\n   ====================================== *\/\r\n\r\n.dpo-pause {\r\n\r\n  flex: 0 0 45px;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  width: 45px;\r\n  height: 45px;\r\n\r\n  padding: 0;\r\n\r\n  border: 1px solid rgba(255,255,255,.65);\r\n\r\n  border-radius: 50%;\r\n\r\n  background: transparent;\r\n\r\n  color: white;\r\n\r\n  font-size: 16px;\r\n\r\n  cursor: pointer;\r\n\r\n}\r\n\r\n.dpo-pause:hover {\r\n\r\n  background: white;\r\n\r\n  color: var(--blue);\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   FOOTER\r\n   ====================================== *\/\r\n\r\n.dpo-footer {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 25px;\r\n\r\n  margin-top: 35px;\r\n\r\n}\r\n\r\n.dpo-footer > span {\r\n\r\n  color: #e0e9f6;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n.dpo-footer a {\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 25px;\r\n\r\n  color: #fff !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n.dpo-footer a:hover {\r\n  opacity: .7;\r\n}\r\n\r\n.dpo-footer a span {\r\n  font-size: 23px;\r\n}\r\n\r\n\r\n\/* ======================================\r\n   MOBILE\r\n   ====================================== *\/\r\n\r\n@media (max-width:767px) {\r\n\r\n  .dpo-work {\r\n\r\n    padding: 75px 15px 55px;\r\n\r\n  }\r\n\r\n  .dpo-header h2 {\r\n\r\n    font-size: clamp(40px,11vw,65px);\r\n\r\n  }\r\n\r\n  .dpo-header p {\r\n    font-size: 12px;\r\n  }\r\n\r\n  .dpo-stage {\r\n    height: 365px;\r\n  }\r\n\r\n  .dpo-card {\r\n    width: clamp(155px,49vw,255px);\r\n  }\r\n\r\n  .dpo-orbit-ring {\r\n\r\n    width: 95%;\r\n\r\n    height: 200px;\r\n\r\n  }\r\n\r\n  .dpo-placeholder {\r\n    font-size: 15px;\r\n  }\r\n\r\n  .dpo-edge {\r\n\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    font-size: 22px;\r\n\r\n  }\r\n\r\n  .dpo-prev {\r\n    left: 8px;\r\n  }\r\n\r\n  .dpo-next {\r\n    right: 8px;\r\n  }\r\n\r\n  .dpo-info {\r\n\r\n    flex-wrap: wrap;\r\n\r\n    gap: 20px;\r\n\r\n    justify-content: center;\r\n\r\n  }\r\n\r\n  .dpo-info-index {\r\n    flex: 1;\r\n  }\r\n\r\n  .dpo-info-main {\r\n\r\n    order: 3;\r\n\r\n    flex: 0 0 100%;\r\n\r\n  }\r\n\r\n  .dpo-active-title {\r\n    font-size: 25px;\r\n  }\r\n\r\n  .dpo-footer {\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: center;\r\n\r\n    text-align: center;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   REDUCED MOTION\r\n   ====================================== *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n\r\n  .dpo-work *,\r\n  .dpo-work *::before,\r\n  .dpo-work *::after {\r\n\r\n    animation: none !important;\r\n\r\n    transition: none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n\/* ======================================\r\n   DISPLERO \u2014 SMOOTH ORBIT ENGINE\r\n   ====================================== *\/\r\n\r\n(() => {\r\n\r\n\"use strict\";\r\n\r\ndocument.querySelectorAll(\r\n  \".dpo-work:not([data-dpo-ready])\"\r\n).forEach(section => {\r\n\r\nsection.dataset.dpoReady = \"true\";\r\n\r\n\r\n\/* ELEMENTS *\/\r\n\r\nconst stage =\r\n  section.querySelector(\".dpo-stage\");\r\n\r\nconst cards =\r\n  [...section.querySelectorAll(\".dpo-card\")];\r\n\r\nconst prev =\r\n  section.querySelector(\".dpo-prev\");\r\n\r\nconst next =\r\n  section.querySelector(\".dpo-next\");\r\n\r\nconst pause =\r\n  section.querySelector(\".dpo-pause\");\r\n\r\nconst currentText =\r\n  section.querySelector(\".dpo-current\");\r\n\r\nconst titleText =\r\n  section.querySelector(\".dpo-active-title\");\r\n\r\nconst categoryText =\r\n  section.querySelector(\".dpo-active-category\");\r\n\r\n\r\nif (\r\n  !stage ||\r\n  !cards.length ||\r\n  !prev ||\r\n  !next ||\r\n  !pause\r\n) return;\r\n\r\n\r\n\/* ======================================\r\n   LOAD IMAGES\r\n   ====================================== *\/\r\n\r\ncards.forEach(card => {\r\n\r\n  const img = card.querySelector(\"img\");\r\n\r\n  if (!img) return;\r\n\r\n  const url = img.dataset.src || \"\";\r\n\r\n  if (!\/^https?:\\\/\\\/\/i.test(url)) return;\r\n\r\n  img.addEventListener(\"load\", () => {\r\n\r\n    card.classList.add(\"has-image\");\r\n\r\n  });\r\n\r\n  img.addEventListener(\"error\", () => {\r\n\r\n    card.classList.remove(\"has-image\");\r\n\r\n  });\r\n\r\n  img.src = url;\r\n\r\n  if (img.complete && img.naturalWidth) {\r\n\r\n    card.classList.add(\"has-image\");\r\n\r\n  }\r\n\r\n});\r\n\r\n\r\n\/* ======================================\r\n   SETTINGS\r\n   ====================================== *\/\r\n\r\nconst reduced = window.matchMedia(\r\n  \"(prefers-reduced-motion: reduce)\"\r\n);\r\n\r\nconst count = cards.length;\r\n\r\nconst step = Math.PI * 2 \/ count;\r\n\r\n\/* SPEED: radians per second *\/\r\n\r\nconst AUTO_SPEED = 0.14;\r\n\r\n\r\n\/* ======================================\r\n   STATE\r\n   ====================================== *\/\r\n\r\nlet angle = 0;\r\n\r\nlet active = -1;\r\n\r\nlet isDragging = false;\r\n\r\nlet pointerId = null;\r\n\r\nlet lastX = 0;\r\n\r\nlet pointerStartX = 0;\r\n\r\nlet lastMoveTime = 0;\r\n\r\nlet lastPointerVelocity = 0;\r\n\r\nlet dragged = false;\r\n\r\nlet blockClick = false;\r\n\r\nlet inertia = 0;\r\n\r\nlet tween = null;\r\n\r\nlet manualPause = reduced.matches;\r\n\r\nlet inView = true;\r\n\r\nlet lastFrame = 0;\r\n\r\nlet lastAction = 0;\r\n\r\nlet rafId = 0;\r\n\r\n\r\n\/* ======================================\r\n   HELPERS\r\n   ====================================== *\/\r\n\r\nconst modulo = (n,m) =>\r\n  ((n % m) + m) % m;\r\n\r\nconst nearestIndex = () =>\r\n  modulo(Math.round(angle \/ step),count);\r\n\r\nconst ease = t =>\r\n  1 - Math.pow(1-t,3);\r\n\r\nconst shortestAngle = delta =>\r\n  Math.atan2(\r\n    Math.sin(delta),\r\n    Math.cos(delta)\r\n  );\r\n\r\n\r\n\/* ======================================\r\n   UPDATE PROJECT TEXT\r\n   ====================================== *\/\r\n\r\nfunction updateInfo() {\r\n\r\n  const index = nearestIndex();\r\n\r\n  if (index === active) return;\r\n\r\n  active = index;\r\n\r\n  cards.forEach((card,i) => {\r\n\r\n    card.classList.toggle(\r\n      \"is-active\",\r\n      i === index\r\n    );\r\n\r\n    card.setAttribute(\r\n      \"aria-pressed\",\r\n      String(i === index)\r\n    );\r\n\r\n  });\r\n\r\n  currentText.textContent =\r\n    String(index+1).padStart(2,\"0\");\r\n\r\n  titleText.textContent =\r\n    cards[index].dataset.title || \"\";\r\n\r\n  categoryText.textContent =\r\n    cards[index].dataset.category || \"\";\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   MEASURE ORBIT\r\n   ====================================== *\/\r\n\r\nlet radiusX = 0;\r\n\r\nlet radiusY = 0;\r\n\r\nlet depth = 0;\r\n\r\nfunction measure() {\r\n\r\n  const width = stage.clientWidth;\r\n\r\n  const height = stage.clientHeight;\r\n\r\n  radiusX = Math.min(\r\n    width * .38,\r\n    460\r\n  );\r\n\r\n  radiusY = Math.min(\r\n    height * .09,\r\n    42\r\n  );\r\n\r\n  depth = Math.min(\r\n    width * .22,\r\n    220\r\n  );\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   RENDER 3D ORBIT\r\n   ====================================== *\/\r\n\r\nfunction render() {\r\n\r\n  cards.forEach((card,index) => {\r\n\r\n    const a = index * step - angle;\r\n\r\n    const cosine = Math.cos(a);\r\n\r\n    const depthFactor =\r\n      (cosine+1)\/2;\r\n\r\n    const x =\r\n      Math.sin(a)*radiusX;\r\n\r\n    const y =\r\n      Math.sin(a)*radiusY;\r\n\r\n    const z =\r\n      (cosine-1)*depth;\r\n\r\n    const scale =\r\n      .78 + depthFactor*.22;\r\n\r\n    const opacity =\r\n      .35 + depthFactor*.65;\r\n\r\n    const rotateY =\r\n      -Math.sin(a)*11;\r\n\r\n\r\n    card.style.transform =\r\n\r\n      `translate(-50%,-50%)\r\n       translate3d(${x}px,${y}px,${z}px)\r\n       rotateY(${rotateY}deg)\r\n       scale(${scale})`;\r\n\r\n\r\n    card.style.opacity =\r\n      String(opacity);\r\n\r\n\r\n    card.style.zIndex =\r\n      String(Math.round(depthFactor*100));\r\n\r\n  });\r\n\r\n  updateInfo();\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   SELECT PROJECT\r\n   ====================================== *\/\r\n\r\nfunction goTo(index) {\r\n\r\n  const targetIndex =\r\n    modulo(index,count);\r\n\r\n  const targetModulo =\r\n    targetIndex*step;\r\n\r\n  tween = {\r\n\r\n    from: angle,\r\n\r\n    to: angle + shortestAngle(\r\n      targetModulo-angle\r\n    ),\r\n\r\n    start: performance.now(),\r\n\r\n    duration: 750\r\n\r\n  };\r\n\r\n  inertia = 0;\r\n\r\n  lastAction = performance.now();\r\n\r\n  if (!rafId) {\r\n\r\n    rafId = requestAnimationFrame(tick);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   NAVIGATION BUTTONS\r\n   ====================================== *\/\r\n\r\nprev.addEventListener(\"click\", () => {\r\n\r\n  goTo(nearestIndex()-1);\r\n\r\n});\r\n\r\nnext.addEventListener(\"click\", () => {\r\n\r\n  goTo(nearestIndex()+1);\r\n\r\n});\r\n\r\n\r\n\/* ======================================\r\n   CLICK PROJECT\r\n   ====================================== *\/\r\n\r\ncards.forEach((card,index) => {\r\n\r\n  card.addEventListener(\"click\", () => {\r\n\r\n    goTo(index);\r\n\r\n  });\r\n\r\n});\r\n\r\n\r\n\/* PREVENT CLICK AFTER DRAG *\/\r\n\r\nstage.addEventListener(\"click\", event => {\r\n\r\n  if (!blockClick) return;\r\n\r\n  event.preventDefault();\r\n\r\n  event.stopImmediatePropagation();\r\n\r\n  blockClick = false;\r\n\r\n}, true);\r\n\r\n\r\n\/* ======================================\r\n   POINTER DOWN\r\n   ====================================== *\/\r\n\r\nstage.addEventListener(\"pointerdown\", event => {\r\n\r\n  if (\r\n    isDragging ||\r\n    (\r\n      event.pointerType === \"mouse\" &&\r\n      event.button !== 0\r\n    )\r\n  ) return;\r\n\r\n  isDragging = true;\r\n\r\n  pointerId = event.pointerId;\r\n\r\n  lastX = event.clientX;\r\n\r\n  pointerStartX = event.clientX;\r\n\r\n  lastMoveTime = performance.now();\r\n\r\n  lastPointerVelocity = 0;\r\n\r\n  dragged = false;\r\n\r\n  blockClick = false;\r\n\r\n  tween = null;\r\n\r\n  inertia = 0;\r\n\r\n  lastAction = performance.now();\r\n\r\n});\r\n\r\n\r\n\/* ======================================\r\n   LIVE DRAG\r\n   ====================================== *\/\r\n\r\nwindow.addEventListener(\r\n  \"pointermove\",\r\n  event => {\r\n\r\n  if (!isDragging) return;\r\n\r\n  if (event.pointerId !== pointerId) return;\r\n\r\n  const dx = event.clientX-lastX;\r\n\r\n  const now = performance.now();\r\n\r\n  const dt = Math.max(\r\n    1,\r\n    now-lastMoveTime\r\n  );\r\n\r\n\r\n  if (\r\n    !dragged &&\r\n    Math.abs(\r\n      event.clientX-pointerStartX\r\n    ) > 6\r\n  ) {\r\n\r\n    dragged = true;\r\n\r\n  }\r\n\r\n\r\n  if (dragged) {\r\n\r\n    stage.classList.add(\"is-dragging\");\r\n\r\n    blockClick = true;\r\n\r\n    if (\r\n      !stage.hasPointerCapture(\r\n        event.pointerId\r\n      )\r\n    ) {\r\n\r\n      try {\r\n\r\n        stage.setPointerCapture(\r\n          event.pointerId\r\n        );\r\n\r\n      } catch (_) {}\r\n\r\n    }\r\n\r\n\r\n    const delta =\r\n      dx \/\r\n      Math.max(stage.clientWidth,1)\r\n      * 3.8;\r\n\r\n\r\n    angle -= delta;\r\n\r\n    lastPointerVelocity =\r\n      -delta\/dt*1000;\r\n\r\n    render();\r\n\r\n  }\r\n\r\n\r\n  lastX = event.clientX;\r\n\r\n  lastMoveTime = now;\r\n\r\n}, {passive:true});\r\n\r\n\r\n\/* ======================================\r\n   FINISH DRAG\r\n   ====================================== *\/\r\n\r\nfunction finishDrag(event,cancelled=false) {\r\n\r\n  if (!isDragging) return;\r\n\r\n  if (event.pointerId !== pointerId) return;\r\n\r\n  isDragging = false;\r\n\r\n  pointerId = null;\r\n\r\n  stage.classList.remove(\r\n    \"is-dragging\"\r\n  );\r\n\r\n\r\n  if (\r\n    stage.hasPointerCapture(\r\n      event.pointerId\r\n    )\r\n  ) {\r\n\r\n    try {\r\n\r\n      stage.releasePointerCapture(\r\n        event.pointerId\r\n      );\r\n\r\n    } catch (_) {}\r\n\r\n  }\r\n\r\n\r\n  \/* MOMENTUM *\/\r\n\r\n  inertia = (\r\n\r\n    !cancelled &&\r\n    dragged &&\r\n    !reduced.matches &&\r\n    performance.now()-lastMoveTime < 90\r\n\r\n  )\r\n\r\n  ? Math.max(\r\n      -.8,\r\n      Math.min(.8,lastPointerVelocity)\r\n    )\r\n\r\n  : 0;\r\n\r\n\r\n  lastAction = performance.now();\r\n\r\n\r\n  if (!rafId) {\r\n\r\n    rafId = requestAnimationFrame(tick);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\nwindow.addEventListener(\r\n  \"pointerup\",\r\n  event => finishDrag(event)\r\n);\r\n\r\n\r\nwindow.addEventListener(\r\n  \"pointercancel\",\r\n  event => finishDrag(event,true)\r\n);\r\n\r\n\r\n\/* LOST FOCUS *\/\r\n\r\nwindow.addEventListener(\"blur\", () => {\r\n\r\n  isDragging = false;\r\n\r\n  pointerId = null;\r\n\r\n  inertia = 0;\r\n\r\n  stage.classList.remove(\r\n    \"is-dragging\"\r\n  );\r\n\r\n});\r\n\r\n\r\n\/* ======================================\r\n   PAUSE \/ PLAY\r\n   ====================================== *\/\r\n\r\nif (reduced.matches) {\r\n\r\n  pause.disabled = true;\r\n\r\n  pause.setAttribute(\r\n    \"aria-label\",\r\n    \"Automatic rotation disabled\"\r\n  );\r\n\r\n}\r\n\r\n\r\npause.addEventListener(\"click\", () => {\r\n\r\n  manualPause = !manualPause;\r\n\r\n  pause.textContent =\r\n    manualPause ? \"\u25b6\" : \"\u2161\";\r\n\r\n  pause.setAttribute(\r\n\r\n    \"aria-label\",\r\n\r\n    manualPause\r\n    ? \"Resume automatic rotation\"\r\n    : \"Pause automatic rotation\"\r\n\r\n  );\r\n\r\n  pause.setAttribute(\r\n    \"aria-pressed\",\r\n    String(manualPause)\r\n  );\r\n\r\n\r\n  if (!rafId) {\r\n\r\n    rafId = requestAnimationFrame(tick);\r\n\r\n  }\r\n\r\n});\r\n\r\n\r\n\/* ======================================\r\n   VISIBILITY OBSERVER\r\n   ====================================== *\/\r\n\r\nif (\"IntersectionObserver\" in window) {\r\n\r\n  const observer = new IntersectionObserver(\r\n\r\n    entries => {\r\n\r\n      inView = entries[0].isIntersecting;\r\n\r\n      lastFrame = performance.now();\r\n\r\n      if (inView && !rafId) {\r\n\r\n        rafId = requestAnimationFrame(tick);\r\n\r\n      }\r\n\r\n    },\r\n\r\n    {\r\n      threshold: .05\r\n    }\r\n\r\n  );\r\n\r\n  observer.observe(section);\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   MAIN ANIMATION LOOP\r\n   ====================================== *\/\r\n\r\nfunction tick(now) {\r\n\r\n  rafId = 0;\r\n\r\n  const dt = Math.min(\r\n\r\n    (now-(lastFrame || now))\/1000,\r\n\r\n    .05\r\n\r\n  );\r\n\r\n  lastFrame = now;\r\n\r\n\r\n  if (!document.hidden && inView) {\r\n\r\n    if (!isDragging) {\r\n\r\n      \/* BUTTON ANIMATION *\/\r\n\r\n      if (tween) {\r\n\r\n        const t = Math.min(\r\n\r\n          1,\r\n\r\n          (now-tween.start) \/\r\n          tween.duration\r\n\r\n        );\r\n\r\n        angle =\r\n\r\n          tween.from +\r\n\r\n          (tween.to-tween.from)\r\n          *ease(t);\r\n\r\n\r\n        if (t >= 1) {\r\n\r\n          tween = null;\r\n\r\n        }\r\n\r\n      }\r\n\r\n      \/* DRAG MOMENTUM *\/\r\n\r\n      else if (Math.abs(inertia) > .008) {\r\n\r\n        angle += inertia*dt;\r\n\r\n        inertia *= Math.exp(-dt*5);\r\n\r\n      }\r\n\r\n      \/* AUTOMATIC ROTATION *\/\r\n\r\n      else if (\r\n\r\n        !manualPause &&\r\n        !reduced.matches &&\r\n        now-lastAction > 1000\r\n\r\n      ) {\r\n\r\n        angle += AUTO_SPEED*dt;\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    render();\r\n\r\n  }\r\n\r\n\r\n  \/* STOP RAF WHEN NOT VISIBLE *\/\r\n\r\n  if (\r\n\r\n    inView &&\r\n    !document.hidden &&\r\n\r\n    (\r\n\r\n      !manualPause ||\r\n\r\n      tween ||\r\n\r\n      isDragging ||\r\n\r\n      Math.abs(inertia) > .008\r\n\r\n    )\r\n\r\n  ) {\r\n\r\n    rafId = requestAnimationFrame(tick);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================\r\n   TAB VISIBILITY\r\n   ====================================== *\/\r\n\r\ndocument.addEventListener(\r\n  \"visibilitychange\",\r\n  () => {\r\n\r\n    lastFrame = performance.now();\r\n\r\n    if (\r\n\r\n      !document.hidden &&\r\n      inView &&\r\n      !rafId\r\n\r\n    ) {\r\n\r\n      rafId = requestAnimationFrame(tick);\r\n\r\n    }\r\n\r\n  }\r\n);\r\n\r\n\r\n\/* ======================================\r\n   RESIZE\r\n   ====================================== *\/\r\n\r\nwindow.addEventListener(\r\n  \"resize\",\r\n  () => {\r\n\r\n    measure();\r\n\r\n    render();\r\n\r\n  },\r\n\r\n  {passive:true}\r\n);\r\n\r\n\r\n\/* ======================================\r\n   INITIALIZATION\r\n   ====================================== *\/\r\n\r\nmeasure();\r\n\r\nrender();\r\n\r\nrafId = requestAnimationFrame(tick);\r\n\r\n\r\n});\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-ec6cac7 e-con-full e-flex e-con e-parent\" data-id=\"ec6cac7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1b67ff elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"b1b67ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- =========================================\r\n     DISPLERO \u2014 INTERACTIVE PROCESS\r\n     HTML + CSS + JS\r\n     ========================================= -->\r\n\r\n<section class=\"dp-process\" id=\"our-process\">\r\n\r\n  <div class=\"dp-process-container\">\r\n\r\n    <div class=\"dp-process-layout\">\r\n\r\n\r\n      <!-- LEFT: STICKY HEADING -->\r\n\r\n      <div class=\"dp-process-left\">\r\n\r\n        <div class=\"dp-process-sticky\">\r\n\r\n          <div class=\"dp-process-eyebrow\">\r\n\r\n          \r\n            OUR PROCESS\r\n\r\n          <\/div>\r\n\r\n          <h2 class=\"dp-process-title\">\r\n\r\n            FROM\r\n            <br>\r\n            IDEA TO\r\n            <br>\r\n\r\n            <span>\r\n              INSTALLATION.\r\n            <\/span>\r\n\r\n          <\/h2>\r\n\r\n          <p class=\"dp-process-lead\">\r\n\r\n            Every great installation starts\r\n            with a clear plan.\r\n\r\n            <br><br>\r\n\r\n            From the first conversation\r\n            to the final connection,\r\n            we approach every project\r\n            with precision and purpose.\r\n\r\n          <\/p>\r\n\r\n          <div class=\"dp-process-scroll-hint\">\r\n\r\n            <span class=\"dp-process-scroll-line\"><\/span>\r\n\r\n            SCROLL TO EXPLORE\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- RIGHT: TIMELINE -->\r\n\r\n      <div class=\"dp-process-right\">\r\n\r\n        <div class=\"dp-process-timeline\">\r\n\r\n\r\n          <!-- PROGRESS RAIL -->\r\n\r\n          <div\r\n            class=\"dp-process-rail\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <div class=\"dp-process-progress\"><\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <ol class=\"dp-process-steps\">\r\n\r\n\r\n            <!-- STEP 01 -->\r\n\r\n            <li class=\"dp-process-step is-active\">\r\n\r\n              <div class=\"dp-process-marker\">\r\n\r\n                <span>01<\/span>\r\n\r\n              <\/div>\r\n\r\n              <div class=\"dp-process-content\">\r\n\r\n                <div class=\"dp-process-step-label\">\r\n\r\n                  STEP 01 \/ DISCOVERY\r\n\r\n                <\/div>\r\n\r\n                <h3>\r\n                  Consultation<span>.<\/span>\r\n                <\/h3>\r\n\r\n                <p>\r\n\r\n                  We begin by understanding\r\n                  your vision, requirements\r\n                  and project objectives.\r\n\r\n                  Every solution starts\r\n                  with the right questions.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"dp-process-tag\">\r\n\r\n                  UNDERSTAND THE VISION\r\n\r\n                  <span><\/span>\r\n\r\n                <\/div>\r\n\r\n              <\/div>\r\n\r\n            <\/li>\r\n\r\n\r\n\r\n            <!-- STEP 02 -->\r\n\r\n            <li class=\"dp-process-step\">\r\n\r\n              <div class=\"dp-process-marker\">\r\n\r\n                <span>02<\/span>\r\n\r\n              <\/div>\r\n\r\n              <div class=\"dp-process-content\">\r\n\r\n                <div class=\"dp-process-step-label\">\r\n\r\n                  STEP 02 \/ PREPARATION\r\n\r\n                <\/div>\r\n\r\n                <h3>\r\n                  Planning<span>.<\/span>\r\n                <\/h3>\r\n\r\n                <p>\r\n\r\n                  We prepare the technical\r\n                  approach, installation\r\n                  strategy and project\r\n                  requirements.\r\n\r\n                  Every detail is considered\r\n                  before work begins.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"dp-process-tag\">\r\n\r\n                  ENGINEER THE SOLUTION\r\n\r\n                  <span><\/span>\r\n\r\n                <\/div>\r\n\r\n              <\/div>\r\n\r\n            <\/li>\r\n\r\n\r\n\r\n            <!-- STEP 03 -->\r\n\r\n            <li class=\"dp-process-step\">\r\n\r\n              <div class=\"dp-process-marker\">\r\n\r\n                <span>03<\/span>\r\n\r\n              <\/div>\r\n\r\n              <div class=\"dp-process-content\">\r\n\r\n                <div class=\"dp-process-step-label\">\r\n\r\n                  STEP 03 \/ EXECUTION\r\n\r\n                <\/div>\r\n\r\n                <h3>\r\n                  Installation<span>.<\/span>\r\n                <\/h3>\r\n\r\n                <p>\r\n\r\n                  Our technical team brings\r\n                  the system together with\r\n                  precision and attention\r\n                  to detail.\r\n\r\n                  From mounting and integration\r\n                  to final testing.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"dp-process-tag\">\r\n\r\n                  BRING IT TO LIFE\r\n\r\n                  <span><\/span>\r\n\r\n                <\/div>\r\n\r\n              <\/div>\r\n\r\n            <\/li>\r\n\r\n\r\n\r\n            <!-- STEP 04 -->\r\n\r\n            <li class=\"dp-process-step\">\r\n\r\n              <div class=\"dp-process-marker\">\r\n\r\n                <span>04<\/span>\r\n\r\n              <\/div>\r\n\r\n              <div class=\"dp-process-content\">\r\n\r\n                <div class=\"dp-process-step-label\">\r\n\r\n                  STEP 04 \/ AFTERCARE\r\n\r\n                <\/div>\r\n\r\n                <h3>\r\n                  Support<span>.<\/span>\r\n                <\/h3>\r\n\r\n                <p>\r\n\r\n                  Our work doesn't end\r\n                  when the installation\r\n                  is complete.\r\n\r\n                  We provide technical\r\n                  assistance and maintenance\r\n                  services to keep your\r\n                  system performing.\r\n\r\n                <\/p>\r\n\r\n                <div class=\"dp-process-tag\">\r\n\r\n                  KEEP IT PERFORMING\r\n\r\n                  <span><\/span>\r\n\r\n                <\/div>\r\n\r\n              <\/div>\r\n\r\n            <\/li>\r\n\r\n\r\n          <\/ol>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- FOOTER -->\r\n\r\n    <div class=\"dp-process-footer\">\r\n\r\n      <span>\r\n\r\n        DISPLERO \/ ENGINEERED WITH PRECISION\r\n\r\n      <\/span>\r\n\r\n      <span class=\"dp-process-footer-icon\">\r\n\r\n        \r\n\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================\r\n   DISPLERO PROCESS \u2014 VARIABLES\r\n   ========================================= *\/\r\n\r\n.dp-process {\r\n\r\n  --dp-blue: #5471a4;\r\n\r\n  --dp-grey: #54595F;\r\n\r\n  --dp-dark: #090d1f;\r\n\r\n  --dp-text: #c3cad7;\r\n\r\n  --dp-step-height: clamp(\r\n    310px,\r\n    52vh,\r\n    480px\r\n  );\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  overflow: clip;\r\n\r\n  background:\r\n\r\n    radial-gradient(\r\n      ellipse at 15% 35%,\r\n      rgba(84,113,164,.08),\r\n      transparent 45%\r\n    ),\r\n\r\n    #090d1f;\r\n\r\n  color: #fff;\r\n\r\n  font-family:\r\n    \"Manrope\",\r\n    sans-serif;\r\n\r\n  padding: 130px 30px 65px;\r\n\r\n}\r\n\r\n\r\n.dp-process * {\r\n\r\n  box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n.dp-process-container {\r\n\r\n  max-width: 1450px;\r\n\r\n  margin: 0 auto;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   MAIN LAYOUT\r\n   ========================================= *\/\r\n\r\n.dp-process-layout {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    minmax(0, 1fr);\r\n\r\n  gap: clamp(\r\n    50px,\r\n    7vw,\r\n    140px\r\n  );\r\n\r\n  align-items: start;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   STICKY HEADING\r\n   ========================================= *\/\r\n\r\n.dp-process-sticky {\r\n\r\n  position: sticky;\r\n\r\n  top: 115px;\r\n\r\n  padding-bottom: 40px;\r\n\r\n}\r\n\r\n\/* Important: sticky needs a grid item\r\n   tall enough to accommodate scrolling. *\/\r\n\r\n.dp-process-left {\r\n\r\n  position: sticky;\r\n\r\n  top: 115px;\r\n\r\n  align-self: start;\r\n\r\n}\r\n\r\n\r\n.dp-process-eyebrow {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 12px;\r\n\r\n  color: var(--dp-blue);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 4px;\r\n\r\n  margin-bottom: 35px;\r\n\r\n}\r\n\r\n\r\n.dp-process-dot {\r\n\r\n  width: 8px;\r\n\r\n  height: 8px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--dp-blue);\r\n\r\n  box-shadow:\r\n    0 0 18px\r\n    rgba(84,113,164,.65);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   LARGE TYPOGRAPHY\r\n   ========================================= *\/\r\n\r\n.dp-process-title {\r\n\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    43px,\r\n    5vw,\r\n    82px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: 1.04;\r\n\r\n  letter-spacing: -.055em;\r\n\r\n  overflow-wrap: anywhere;\r\n\r\n}\r\n\r\n\r\n.dp-process-title span {\r\n\r\n  color: var(--dp-blue);\r\n\r\n}\r\n\r\n\r\n.dp-process-lead {\r\n\r\n  max-width: 440px;\r\n\r\n  margin: 42px 0 0;\r\n\r\n  color: var(--dp-text);\r\n\r\n  font-size: 15px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1.9;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   SCROLL INDICATOR\r\n   ========================================= *\/\r\n\r\n.dp-process-scroll-hint {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 15px;\r\n\r\n  margin-top: 55px;\r\n\r\n  color: #a4b1c6;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dp-process-scroll-line {\r\n\r\n  position: relative;\r\n\r\n  width: 45px;\r\n\r\n  height: 1px;\r\n\r\n  background: var(--dp-blue);\r\n\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n\r\n.dp-process-scroll-line::after {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 15px;\r\n\r\n  height: 1px;\r\n\r\n  background: #ffffff;\r\n\r\n  left: -15px;\r\n\r\n  animation:\r\n    dpProcessScan 2.5s\r\n    linear infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpProcessScan {\r\n\r\n  to {\r\n\r\n    left: 45px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   TIMELINE\r\n   ========================================= *\/\r\n\r\n.dp-process-right {\r\n\r\n  position: relative;\r\n\r\n  min-width: 0;\r\n\r\n}\r\n\r\n\r\n.dp-process-timeline {\r\n\r\n  position: relative;\r\n\r\n}\r\n\r\n\r\n.dp-process-steps {\r\n\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  list-style: none;\r\n\r\n  margin: 0;\r\n\r\n  padding: 0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   PROGRESS RAIL\r\n   ========================================= *\/\r\n\r\n.dp-process-rail {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 1;\r\n\r\n  top: 26px;\r\n\r\n  bottom: calc(\r\n    var(--dp-step-height) - 26px\r\n  );\r\n\r\n  left: 25px;\r\n\r\n  width: 2px;\r\n\r\n  background:\r\n    rgba(84,113,164,.25);\r\n\r\n}\r\n\r\n\r\n.dp-process-progress {\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n  background: var(--dp-blue);\r\n\r\n  transform: scaleY(0);\r\n\r\n  transform-origin: top center;\r\n\r\n  box-shadow:\r\n\r\n    0 0 15px\r\n    rgba(84,113,164,.6),\r\n\r\n    0 0 30px\r\n    rgba(84,113,164,.25);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   TIMELINE STEP\r\n   ========================================= *\/\r\n\r\n.dp-process-step {\r\n\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    52px\r\n    minmax(0, 1fr);\r\n\r\n  gap: 35px;\r\n\r\n  min-height: var(--dp-step-height);\r\n\r\n  align-content: start;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   NUMBER CIRCLE\r\n   ========================================= *\/\r\n\r\n.dp-process-marker {\r\n\r\n  position: relative;\r\n\r\n  z-index: 5;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  width: 52px;\r\n\r\n  height: 52px;\r\n\r\n  border-radius: 50%;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(84,113,164,.40);\r\n\r\n  background: #10182c;\r\n\r\n  color: #8796b1;\r\n\r\n  font-size: 13px;\r\n\r\n  font-weight: 700;\r\n\r\n  transition:\r\n\r\n    background .5s ease,\r\n\r\n    border-color .5s ease,\r\n\r\n    box-shadow .5s ease,\r\n\r\n    color .5s ease,\r\n\r\n    transform .5s ease;\r\n\r\n}\r\n\r\n\r\n.dp-process-step.is-active\r\n.dp-process-marker {\r\n\r\n  background: var(--dp-blue);\r\n\r\n  border-color: var(--dp-blue);\r\n\r\n  color: #ffffff;\r\n\r\n  transform: scale(1.12);\r\n\r\n  box-shadow:\r\n\r\n    0 0 0 8px\r\n    rgba(84,113,164,.10),\r\n\r\n    0 0 35px\r\n    rgba(84,113,164,.35);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   STEP CONTENT\r\n   ========================================= *\/\r\n\r\n.dp-process-content {\r\n\r\n  min-width: 0;\r\n\r\n  padding-top: 5px;\r\n\r\n  opacity: .58;\r\n\r\n  transform: translateY(0);\r\n\r\n  transition:\r\n\r\n    opacity .6s ease,\r\n\r\n    transform .6s ease;\r\n\r\n}\r\n\r\n\r\n.dp-process-step.is-active\r\n.dp-process-content {\r\n\r\n  opacity: 1;\r\n\r\n  transform: translateY(-4px);\r\n\r\n}\r\n\r\n\r\n\r\n\/* STEP LABEL *\/\r\n\r\n.dp-process-step-label {\r\n\r\n  margin-bottom: 16px;\r\n\r\n  color: var(--dp-blue);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* STEP HEADING *\/\r\n\r\n.dp-process-content h3 {\r\n\r\n  margin: 0 0 22px;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    32px,\r\n    3vw,\r\n    49px\r\n  );\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: -.04em;\r\n\r\n  line-height: 1.15;\r\n\r\n  overflow-wrap: anywhere;\r\n\r\n}\r\n\r\n\r\n.dp-process-content h3 span {\r\n\r\n  color: var(--dp-blue);\r\n\r\n}\r\n\r\n\r\n\r\n\/* STEP DESCRIPTION *\/\r\n\r\n.dp-process-content p {\r\n\r\n  max-width: 395px;\r\n\r\n  margin: 0;\r\n\r\n  color: #c3cad7;\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1.9;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   BOTTOM STEP LABEL\r\n   ========================================= *\/\r\n\r\n.dp-process-tag {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  max-width: 395px;\r\n\r\n  padding-top: 22px;\r\n\r\n  margin-top: 32px;\r\n\r\n  border-top:\r\n    1px solid\r\n    rgba(84,113,164,.25);\r\n\r\n  color: #b7c2d5;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dp-process-tag span {\r\n\r\n  color: var(--dp-blue);\r\n\r\n  font-size: 22px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1;\r\n\r\n  transition:\r\n    transform .4s ease;\r\n\r\n}\r\n\r\n\r\n.dp-process-step.is-active\r\n.dp-process-tag span {\r\n\r\n  transform:\r\n    translate(3px, -3px);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   SCROLL REVEAL\r\n   ========================================= *\/\r\n\r\n.dp-process.has-reveal\r\n.dp-process-step:not(.is-seen)\r\n.dp-process-content {\r\n\r\n  opacity: 0;\r\n\r\n  transform: translateY(35px);\r\n\r\n}\r\n\r\n\r\n.dp-process.has-reveal\r\n.dp-process-step.is-seen\r\n.dp-process-content {\r\n\r\n  transition:\r\n\r\n    opacity .75s ease,\r\n\r\n    transform .75s ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   SECTION FOOTER\r\n   ========================================= *\/\r\n\r\n.dp-process-footer {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  margin-top: 20px;\r\n\r\n  padding-top: 35px;\r\n\r\n  border-top:\r\n    1px solid\r\n    rgba(84,113,164,.25);\r\n\r\n  color: #a4b1c6;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dp-process-footer-icon {\r\n\r\n  color: var(--dp-blue);\r\n\r\n  font-size: 28px;\r\n\r\n  font-weight: 400;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   TABLET\r\n   ========================================= *\/\r\n\r\n@media (max-width: 1050px) {\r\n\r\n  .dp-process {\r\n\r\n    padding:\r\n      100px 25px 65px;\r\n\r\n  }\r\n\r\n  .dp-process-layout {\r\n\r\n    gap: 45px;\r\n\r\n  }\r\n\r\n  .dp-process-title {\r\n\r\n    font-size:\r\n      clamp(40px, 4.8vw, 60px);\r\n\r\n  }\r\n\r\n  .dp-process-step {\r\n\r\n    gap: 23px;\r\n\r\n  }\r\n\r\n  .dp-process-content h3 {\r\n\r\n    font-size: 36px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   MOBILE\r\n   ========================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .dp-process {\r\n\r\n    --dp-step-height: 290px;\r\n\r\n    padding:\r\n      85px 20px 55px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-layout {\r\n\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 70px;\r\n\r\n  }\r\n\r\n\r\n  \/* Disable sticky on mobile *\/\r\n\r\n  .dp-process-left,\r\n  .dp-process-sticky {\r\n\r\n    position: relative;\r\n\r\n    top: auto;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-title {\r\n\r\n    font-size:\r\n      clamp(42px, 10vw, 64px);\r\n\r\n  }\r\n\r\n\r\n  .dp-process-lead {\r\n\r\n    margin-top: 30px;\r\n\r\n    font-size: 14px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-scroll-hint {\r\n\r\n    margin-top: 30px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-step {\r\n\r\n    grid-template-columns:\r\n      44px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 22px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-marker {\r\n\r\n    width: 44px;\r\n\r\n    height: 44px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-rail {\r\n\r\n    left: 21px;\r\n\r\n    top: 22px;\r\n\r\n    bottom: calc(\r\n      var(--dp-step-height) - 22px\r\n    );\r\n\r\n  }\r\n\r\n\r\n  .dp-process-content {\r\n\r\n    padding-top: 3px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-content h3 {\r\n\r\n    font-size: 33px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-content p {\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.75;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-tag {\r\n\r\n    margin-top: 22px;\r\n\r\n    padding-top: 17px;\r\n\r\n    font-size: 9px;\r\n\r\n  }\r\n\r\n\r\n  .dp-process-footer {\r\n\r\n    margin-top: 0;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   SMALL PHONES\r\n   ========================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n  .dp-process {\r\n\r\n    --dp-step-height: 330px;\r\n\r\n    padding-left: 15px;\r\n\r\n    padding-right: 15px;\r\n\r\n  }\r\n\r\n  .dp-process-step {\r\n\r\n    gap: 15px;\r\n\r\n  }\r\n\r\n  .dp-process-content h3 {\r\n\r\n    font-size: 28px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================\r\n   ACCESSIBILITY\r\n   ========================================= *\/\r\n\r\n@media (\r\n  prefers-reduced-motion: reduce\r\n) {\r\n\r\n  .dp-process *,\r\n  .dp-process *::before,\r\n  .dp-process *::after {\r\n\r\n    animation: none !important;\r\n\r\n    transition: none !important;\r\n\r\n  }\r\n\r\n  .dp-process.has-reveal\r\n  .dp-process-step:not(.is-seen)\r\n  .dp-process-content {\r\n\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n  \"use strict\";\r\n\r\n\r\n  \/* =====================================\r\n     INITIALIZE SECTION\r\n     ===================================== *\/\r\n\r\n  const sections = document.querySelectorAll(\r\n    \".dp-process:not([data-dp-initialized])\"\r\n  );\r\n\r\n  sections.forEach(initProcess);\r\n\r\n\r\n  function initProcess(section) {\r\n\r\n    section.setAttribute(\r\n      \"data-dp-initialized\",\r\n      \"true\"\r\n    );\r\n\r\n\r\n    const steps = Array.from(\r\n      section.querySelectorAll(\r\n        \".dp-process-step\"\r\n      )\r\n    );\r\n\r\n\r\n    const timeline = section.querySelector(\r\n      \".dp-process-timeline\"\r\n    );\r\n\r\n\r\n    const rail = section.querySelector(\r\n      \".dp-process-rail\"\r\n    );\r\n\r\n\r\n    const progress = section.querySelector(\r\n      \".dp-process-progress\"\r\n    );\r\n\r\n\r\n    if (\r\n      !steps.length ||\r\n      !timeline ||\r\n      !rail ||\r\n      !progress\r\n    ) return;\r\n\r\n\r\n\r\n    const reduceMotion = window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    );\r\n\r\n\r\n    let ticking = false;\r\n\r\n\r\n\r\n    \/* =====================================\r\n       SCROLL PROGRESS\r\n       ===================================== *\/\r\n\r\n    function updateProgress() {\r\n\r\n      ticking = false;\r\n\r\n\r\n      const railRect =\r\n        rail.getBoundingClientRect();\r\n\r\n\r\n      const viewportHeight =\r\n        window.innerHeight;\r\n\r\n\r\n      \/*\r\n       Progress is measured at 58% of\r\n       the viewport height.\r\n      *\/\r\n\r\n      const triggerLine =\r\n        viewportHeight * 0.58;\r\n\r\n\r\n      const rawProgress =\r\n\r\n        (\r\n          triggerLine -\r\n          railRect.top\r\n        )\r\n\r\n        \/\r\n\r\n        Math.max(\r\n          railRect.height,\r\n          1\r\n        );\r\n\r\n\r\n      const clampedProgress =\r\n        Math.max(\r\n          0,\r\n          Math.min(\r\n            1,\r\n            rawProgress\r\n          )\r\n        );\r\n\r\n\r\n      progress.style.transform =\r\n\r\n        \"scaleY(\" +\r\n        clampedProgress +\r\n        \")\";\r\n\r\n\r\n\r\n      \/* =================================\r\n         ACTIVE STEP\r\n         ================================= *\/\r\n\r\n      let activeIndex = 0;\r\n\r\n\r\n      steps.forEach(\r\n        (step, index) => {\r\n\r\n          const marker =\r\n            step.querySelector(\r\n              \".dp-process-marker\"\r\n            );\r\n\r\n\r\n          if (!marker) return;\r\n\r\n\r\n          const rect =\r\n            marker.getBoundingClientRect();\r\n\r\n\r\n          const markerCenter =\r\n            rect.top +\r\n            rect.height \/ 2;\r\n\r\n\r\n          if (\r\n            markerCenter <= triggerLine\r\n          ) {\r\n\r\n            activeIndex = index;\r\n\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n\r\n      steps.forEach(\r\n        (step, index) => {\r\n\r\n          const isActive =\r\n            index === activeIndex;\r\n\r\n\r\n          step.classList.toggle(\r\n            \"is-active\",\r\n            isActive\r\n          );\r\n\r\n\r\n          if (isActive) {\r\n\r\n            step.setAttribute(\r\n              \"aria-current\",\r\n              \"step\"\r\n            );\r\n\r\n          } else {\r\n\r\n            step.removeAttribute(\r\n              \"aria-current\"\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       OPTIMIZED SCROLL HANDLER\r\n       ===================================== *\/\r\n\r\n    function requestUpdate() {\r\n\r\n      if (ticking) return;\r\n\r\n\r\n      ticking = true;\r\n\r\n\r\n      window.requestAnimationFrame(\r\n        updateProgress\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    window.addEventListener(\r\n      \"scroll\",\r\n      requestUpdate,\r\n      { passive: true }\r\n    );\r\n\r\n\r\n    window.addEventListener(\r\n      \"resize\",\r\n      requestUpdate,\r\n      { passive: true }\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================\r\n       REVEAL ANIMATION\r\n       ===================================== *\/\r\n\r\n    if (\r\n      \"IntersectionObserver\" in window &&\r\n      !reduceMotion.matches\r\n    ) {\r\n\r\n      const observer =\r\n        new IntersectionObserver(\r\n\r\n          (entries) => {\r\n\r\n            entries.forEach(\r\n              entry => {\r\n\r\n                if (\r\n                  entry.isIntersecting\r\n                ) {\r\n\r\n                  entry.target.classList.add(\r\n                    \"is-seen\"\r\n                  );\r\n\r\n\r\n                  observer.unobserve(\r\n                    entry.target\r\n                  );\r\n\r\n                }\r\n\r\n              }\r\n            );\r\n\r\n          },\r\n\r\n          {\r\n\r\n            threshold: 0.08,\r\n\r\n            rootMargin:\r\n              \"0px 0px 0px 0px\"\r\n\r\n          }\r\n\r\n        );\r\n\r\n\r\n\r\n      section.classList.add(\r\n        \"has-reveal\"\r\n      );\r\n\r\n\r\n      steps.forEach(\r\n        step => {\r\n\r\n          observer.observe(step);\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       INITIAL UPDATE\r\n       ===================================== *\/\r\n\r\n    requestUpdate();\r\n\r\n\r\n    window.addEventListener(\r\n      \"load\",\r\n      requestUpdate,\r\n      { once: true }\r\n    );\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-df75084 e-con-full e-flex e-con e-parent\" data-id=\"df75084\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17bfc36 elementor-widget elementor-widget-html\" data-id=\"17bfc36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- ==========================================\r\n     DISPLERO \u2014 ABOUT SECTION V2\r\n     PINNED SCROLL REVEAL\r\n\r\n     COMPLETE HTML + CSS + JS\r\n     ========================================== -->\r\n\r\n<link rel=\"preconnect\"\r\n      href=\"https:\/\/fonts.googleapis.com\">\r\n\r\n<link rel=\"preconnect\"\r\n      href=\"https:\/\/fonts.gstatic.com\"\r\n      crossorigin>\r\n\r\n<link\r\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\"\r\n  rel=\"stylesheet\"\r\n>\r\n\r\n\r\n<section class=\"dpa-about\" id=\"about-displero\">\r\n\r\n  <div class=\"dpa-container\">\r\n\r\n\r\n    <!-- TOP BAR -->\r\n\r\n    <div class=\"dpa-top\">\r\n\r\n      <span class=\"dpa-eyebrow\">\r\n        \r\n        ABOUT DISPLERO\r\n      <\/span>\r\n\r\n      <span class=\"dpa-top-right\">\r\n        THE PEOPLE BEHIND THE TECHNOLOGY\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- MAIN HEADING -->\r\n\r\n    <div class=\"dpa-intro\">\r\n\r\n      <h2 class=\"dpa-title\">\r\n\r\n        <span>BUILT BY<\/span>\r\n\r\n        <span class=\"dpa-blue\">\r\n          PEOPLE.\r\n        <\/span>\r\n\r\n        <span>DRIVEN BY<\/span>\r\n\r\n        <span class=\"dpa-blue\">\r\n          TECHNOLOGY.\r\n        <\/span>\r\n\r\n      <\/h2>\r\n\r\n\r\n      <div class=\"dpa-intro-bottom\">\r\n\r\n        \r\n\r\n        <span class=\"dpa-intro-rule\"><\/span>\r\n\r\n        <span class=\"dpa-blue\">\r\n          REAL PEOPLE. REAL TECHNOLOGY.\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ==================================\r\n         PINNED REVEAL WRAPPER\r\n         ================================== -->\r\n\r\n    <div class=\"dpa-reveal-scroll\">\r\n\r\n\r\n      <!-- STICKY PHOTO PANEL -->\r\n\r\n      <div class=\"dpa-photo-stage\">\r\n\r\n\r\n        <!-- BACKGROUND BLUEPRINT -->\r\n\r\n        <div class=\"dpa-blueprint\"\r\n             aria-hidden=\"true\">\r\n\r\n          <div class=\"dpa-blueprint-grid\"><\/div>\r\n\r\n          <div class=\"dpa-blueprint-circle\"><\/div>\r\n\r\n          <div class=\"dpa-blueprint-cross\"><\/div>\r\n\r\n          <div class=\"dpa-blueprint-brand\">\r\n            DISPLERO\r\n          <\/div>\r\n\r\n          <div class=\"dpa-blueprint-small\">\r\n            ENGINEERING VISUAL EXPERIENCES\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- REVEALED CONTENT -->\r\n\r\n        <div class=\"dpa-reveal-layer\">\r\n\r\n\r\n          <!-- PHOTO -->\r\n\r\n          <img\r\n            class=\"dpa-photo\"\r\n            data-src=\"WKLEJ_TUTAJ_LINK_DO_ZDJECIA\"\r\n            alt=\"DISPLERO team during installation\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n\r\n\r\n\r\n          <!-- PLACEHOLDER -->\r\n\r\n          <div class=\"dpa-placeholder\">\r\n\r\n            <div class=\"dpa-placeholder-light\"><\/div>\r\n\r\n            <div class=\"dpa-placeholder-frame\">\r\n\r\n              <div class=\"dpa-placeholder-inner\">\r\n\r\n\r\n                <span class=\"dpa-placeholder-label\">\r\n\r\n                  DISPLERO \/ BEHIND THE SCENES\r\n\r\n                <\/span>\r\n\r\n\r\n                <div class=\"dpa-placeholder-center\">\r\n\r\n                  <span class=\"dpa-placeholder-small\">\r\n\r\n                    THE PEOPLE BEHIND\r\n                    THE TECHNOLOGY\r\n\r\n                  <\/span>\r\n\r\n\r\n                  <strong>\r\n\r\n                    REAL PEOPLE.\r\n\r\n                    <span>\r\n                      REAL TECHNOLOGY.\r\n                    <\/span>\r\n\r\n                  <\/strong>\r\n\r\n\r\n                  <span class=\"dpa-placeholder-soon\">\r\n\r\n                    PHOTOGRAPHY COMING SOON\r\n\r\n                  <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <span class=\"dpa-placeholder-bottom\">\r\n\r\n                  ENGINEERED WITH PRECISION.\r\n\r\n                <\/span>\r\n\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- SCANNING LINE -->\r\n\r\n        <div class=\"dpa-reveal-edge\"\r\n             aria-hidden=\"true\">\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- TOP OVERLAY -->\r\n\r\n        <div class=\"dpa-photo-top\">\r\n\r\n          <span>\r\n            DISPLERO \/ BEHIND THE SCENES\r\n          <\/span>\r\n\r\n          <span>\u25c8<\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- BOTTOM OVERLAY -->\r\n\r\n        <div class=\"dpa-photo-bottom\">\r\n\r\n          <div>\r\n\r\n            <span class=\"dpa-photo-small\">\r\n\r\n              THE PEOPLE BEHIND THE TECHNOLOGY\r\n\r\n            <\/span>\r\n\r\n            <strong>\r\n\r\n              ENGINEERED\r\n              <br>\r\n              WITH PRECISION.\r\n\r\n            <\/strong>\r\n\r\n          <\/div>\r\n\r\n\r\n          <span class=\"dpa-photo-index\">\r\n            \r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- PROGRESS BAR -->\r\n\r\n        <div class=\"dpa-photo-progress\">\r\n\r\n          <div class=\"dpa-photo-progress-fill\">\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n      <!-- END STICKY PANEL -->\r\n\r\n\r\n    <\/div>\r\n\r\n    <!-- END PINNED WRAPPER -->\r\n\r\n\r\n\r\n    <!-- ==================================\r\n         ABOUT CONTENT\r\n         ================================== -->\r\n\r\n    <div class=\"dpa-story\">\r\n\r\n\r\n      <!-- LEFT -->\r\n\r\n      <div class=\"dpa-story-left\">\r\n\r\n        <span class=\"dpa-story-eyebrow\">\r\n\r\n          <span class=\"dpa-story-line\"><\/span>\r\n\r\n          WHO WE ARE\r\n\r\n        <\/span>\r\n\r\n\r\n        <h3>\r\n\r\n          TECHNOLOGY\r\n          <br>\r\n\r\n          IS ONLY\r\n          <br>\r\n\r\n          <span>\r\n            THE BEGINNING.\r\n          <\/span>\r\n\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- RIGHT -->\r\n\r\n      <div class=\"dpa-story-right\">\r\n\r\n\r\n        <p class=\"dpa-story-lead\">\r\n\r\n          Behind every display is a team\r\n          that makes it work.\r\n\r\n        <\/p>\r\n\r\n\r\n        <p>\r\n\r\n          At DISPLERO, we combine hands-on\r\n          technical expertise with a passion\r\n          for visual technology.\r\n\r\n          From LED videowalls and touch\r\n          overlays to professional AV\r\n          installations, we focus on\r\n          bringing every element together\r\n          with precision.\r\n\r\n        <\/p>\r\n\r\n\r\n        <p>\r\n\r\n          We believe that successful projects\r\n          are built through collaboration,\r\n          attention to detail and a practical\r\n          approach to every challenge.\r\n\r\n        <\/p>\r\n\r\n\r\n\r\n        <!-- SIGNATURE -->\r\n\r\n        <div class=\"dpa-story-signature\">\r\n\r\n          <span class=\"dpa-signature-line\"><\/span>\r\n\r\n          DISPLERO\r\n          <br>\r\n\r\n         \r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- BOTTOM STRIP -->\r\n\r\n    <div class=\"dpa-bottom\">\r\n\r\n      <span>\r\n        HANDS-ON ENGINEERING\r\n      <\/span>\r\n\r\n      <span class=\"dpa-bottom-dot\"><\/span>\r\n\r\n      <span>\r\n        VISUAL TECHNOLOGY\r\n      <\/span>\r\n\r\n      <span class=\"dpa-bottom-dot\"><\/span>\r\n\r\n      <span>\r\n        PRECISION INSTALLATION\r\n      <\/span>\r\n\r\n      <span class=\"dpa-bottom-brand\">\r\n        \r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* ==========================================\r\n   01 \u2014 VARIABLES\r\n   ========================================== *\/\r\n\r\n.dpa-about {\r\n\r\n  --dpa-blue: #5471a4;\r\n\r\n  --dpa-grey: #54595F;\r\n\r\n  --dpa-dark: #090d1f;\r\n\r\n  --dpa-light: #F5F6F8;\r\n\r\n\r\n  \/* INITIAL REVEAL STATE *\/\r\n\r\n  --dpa-hide: 100%;\r\n\r\n  --dpa-fill: 0%;\r\n\r\n  --dpa-edge: 0%;\r\n\r\n\r\n  \/* STICKY SETTINGS *\/\r\n\r\n  --dpa-panel-height: min(\r\n    620px,\r\n    calc(100svh - 130px)\r\n  );\r\n\r\n  --dpa-pin-top: max(\r\n    80px,\r\n    calc(\r\n      (100svh - var(--dpa-panel-height)) \/ 2\r\n    )\r\n  );\r\n\r\n\r\n  \/* ANIMATION SCROLL DISTANCE *\/\r\n\r\n  --dpa-scroll-distance: 115svh;\r\n\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  padding: 100px 28px 65px;\r\n\r\n  margin: 0;\r\n\r\n  background: var(--dpa-light);\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-family: \"Manrope\", sans-serif;\r\n\r\n\r\n  \/*\r\n   IMPORTANT:\r\n   Do not use overflow hidden here.\r\n  *\/\r\n\r\n  overflow: visible;\r\n\r\n}\r\n\r\n\r\n.dpa-about * {\r\n\r\n  box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n.dpa-container {\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  max-width: 1450px;\r\n\r\n  margin: 0 auto;\r\n\r\n  overflow: visible;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   02 \u2014 TOP BAR\r\n   ========================================== *\/\r\n\r\n.dpa-top {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  margin-bottom: 65px;\r\n\r\n}\r\n\r\n\r\n.dpa-eyebrow {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 12px;\r\n\r\n  color: var(--dpa-blue);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpa-dot {\r\n\r\n  width: 7px;\r\n\r\n  height: 7px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--dpa-blue);\r\n\r\n}\r\n\r\n\r\n.dpa-top-right {\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   03 \u2014 MAIN HEADING\r\n   ========================================== *\/\r\n\r\n.dpa-intro {\r\n\r\n  position: relative;\r\n\r\n  margin-bottom: 75px;\r\n\r\n}\r\n\r\n\r\n.dpa-title {\r\n\r\n  margin: 0;\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-size: clamp(\r\n    43px,\r\n    7.7vw,\r\n    112px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: .99;\r\n\r\n  letter-spacing: -.065em;\r\n\r\n}\r\n\r\n\r\n.dpa-title > span {\r\n\r\n  display: block;\r\n\r\n}\r\n\r\n\r\n.dpa-title .dpa-blue {\r\n\r\n  color: var(--dpa-blue);\r\n\r\n}\r\n\r\n\r\n\r\n\/* BOTTOM OF HEADING *\/\r\n\r\n.dpa-intro-bottom {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 25px;\r\n\r\n  margin-top: 45px;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dpa-intro-bottom > span:first-child {\r\n\r\n  flex-shrink: 0;\r\n\r\n}\r\n\r\n\r\n.dpa-intro-rule {\r\n\r\n  flex: 1;\r\n\r\n  height: 1px;\r\n\r\n  background: rgba(84,89,95,.20);\r\n\r\n}\r\n\r\n\r\n.dpa-intro-bottom .dpa-blue {\r\n\r\n  color: var(--dpa-blue);\r\n\r\n  flex-shrink: 0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   04 \u2014 PINNED SCROLL WRAPPER\r\n   ========================================== *\/\r\n\r\n\/*\r\n This wrapper creates additional scroll\r\n distance while keeping the panel sticky.\r\n\r\n The panel releases only after the reveal\r\n reaches 100%.\r\n*\/\r\n\r\n.dpa-reveal-scroll {\r\n\r\n  position: relative;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n\r\n  height: calc(\r\n    var(--dpa-panel-height)\r\n    + var(--dpa-scroll-distance)\r\n  );\r\n\r\n  margin: 0;\r\n\r\n  padding: 0;\r\n\r\n  overflow: visible;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   05 \u2014 STICKY PHOTO STAGE\r\n   ========================================== *\/\r\n\r\n.dpa-reveal-scroll .dpa-photo-stage {\r\n\r\n  position: sticky;\r\n\r\n  top: var(--dpa-pin-top);\r\n\r\n  width: 100%;\r\n\r\n  height: var(--dpa-panel-height);\r\n\r\n  margin: 0;\r\n\r\n  padding: 0;\r\n\r\n  z-index: 5;\r\n\r\n  overflow: hidden;\r\n\r\n  isolation: isolate;\r\n\r\n  background: var(--dpa-dark);\r\n\r\n  color: #ffffff;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   06 \u2014 BLUEPRINT BACKGROUND\r\n   ========================================== *\/\r\n\r\n.dpa-blueprint {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n\r\n    radial-gradient(\r\n      ellipse at center,\r\n      #172943,\r\n      #090d1f 75%\r\n    );\r\n\r\n}\r\n\r\n\r\n.dpa-blueprint-grid {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  opacity: .32;\r\n\r\n  background-image:\r\n\r\n    linear-gradient(\r\n      rgba(84,113,164,.19) 1px,\r\n      transparent 1px\r\n    ),\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(84,113,164,.19) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size: 45px 45px;\r\n\r\n}\r\n\r\n\r\n.dpa-blueprint-circle {\r\n\r\n  position: absolute;\r\n\r\n  width: 55%;\r\n\r\n  aspect-ratio: 1;\r\n\r\n  border: 1px solid\r\n    rgba(84,113,164,.35);\r\n\r\n  border-radius: 50%;\r\n\r\n  top: 50%;\r\n\r\n  left: 50%;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n}\r\n\r\n\r\n.dpa-blueprint-circle::after {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 20%;\r\n\r\n  border: 1px dashed\r\n    rgba(84,113,164,.45);\r\n\r\n  border-radius: 50%;\r\n\r\n}\r\n\r\n\r\n.dpa-blueprint-cross {\r\n\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n\r\n  left: 50%;\r\n\r\n  width: 25px;\r\n\r\n  height: 25px;\r\n\r\n  border: 1px solid\r\n    rgba(84,113,164,.55);\r\n\r\n  border-radius: 50%;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n}\r\n\r\n\r\n.dpa-blueprint-brand {\r\n\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n\r\n  left: 50%;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n  color: rgba(84,113,164,.13);\r\n\r\n  font-size: clamp(\r\n    55px,\r\n    14vw,\r\n    220px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.08em;\r\n\r\n  white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n.dpa-blueprint-small {\r\n\r\n  position: absolute;\r\n\r\n  top: 60%;\r\n\r\n  left: 50%;\r\n\r\n  width: 90%;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  color: #9bacc8;\r\n\r\n  font-size: 10px;\r\n\r\n  letter-spacing: 4px;\r\n\r\n  text-align: center;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   07 \u2014 REVEAL LAYER\r\n   ========================================== *\/\r\n\r\n.dpa-reveal-layer {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 2;\r\n\r\n  overflow: hidden;\r\n\r\n  background: #12223b;\r\n\r\n\r\n  \/*\r\n   100% hidden at the start.\r\n   0% hidden when completed.\r\n  *\/\r\n\r\n  clip-path: inset(\r\n    0 var(--dpa-hide) 0 0\r\n  );\r\n\r\n  will-change: clip-path;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   08 \u2014 PHOTO\r\n   ========================================== *\/\r\n\r\n.dpa-photo {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 2;\r\n\r\n  display: none;\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n\r\n}\r\n\r\n\r\n.dpa-photo-stage.has-photo .dpa-photo {\r\n\r\n  display: block;\r\n\r\n}\r\n\r\n\r\n.dpa-photo-stage.has-photo\r\n.dpa-placeholder {\r\n\r\n  display: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   09 \u2014 PLACEHOLDER\r\n   ========================================== *\/\r\n\r\n.dpa-placeholder {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n\r\n    radial-gradient(\r\n      ellipse at 65% 40%,\r\n      #334e78,\r\n      #16243e 55%,\r\n      #090d1f\r\n    );\r\n\r\n}\r\n\r\n\r\n\r\n\/* AMBIENT LIGHT *\/\r\n\r\n.dpa-placeholder-light {\r\n\r\n  position: absolute;\r\n\r\n  width: 80%;\r\n\r\n  aspect-ratio: 1;\r\n\r\n  left: 10%;\r\n\r\n  top: -45%;\r\n\r\n  background:\r\n\r\n    radial-gradient(\r\n      circle,\r\n      rgba(84,113,164,.35),\r\n      transparent 65%\r\n    );\r\n\r\n  animation:\r\n    dpaLightMove 9s\r\n    ease-in-out infinite alternate;\r\n\r\n}\r\n\r\n\r\n@keyframes dpaLightMove {\r\n\r\n  from {\r\n\r\n    transform: translateX(-8%);\r\n\r\n  }\r\n\r\n  to {\r\n\r\n    transform: translateX(8%);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   10 \u2014 PLACEHOLDER FRAME\r\n   ========================================== *\/\r\n\r\n.dpa-placeholder-frame {\r\n\r\n  position: absolute;\r\n\r\n  inset: 9% 7%;\r\n\r\n  padding: 13px;\r\n\r\n  border: 1px solid\r\n    rgba(148,177,219,.35);\r\n\r\n  box-shadow:\r\n\r\n    0 0 80px rgba(84,113,164,.12),\r\n\r\n    inset 0 0 80px rgba(84,113,164,.06);\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-inner {\r\n\r\n  position: relative;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-direction: column;\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n  padding: 20px;\r\n\r\n  border: 1px solid\r\n    rgba(148,177,219,.15);\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-label {\r\n\r\n  color: #9eb5d8;\r\n\r\n  font-size: 9px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* CENTER *\/\r\n\r\n.dpa-placeholder-center {\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n\r\n  text-align: center;\r\n\r\n  gap: 20px;\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-small {\r\n\r\n  color: #9eb5d8;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 4px;\r\n\r\n  line-height: 1.8;\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-center strong {\r\n\r\n  display: block;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    30px,\r\n    5vw,\r\n    70px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: 1.05;\r\n\r\n  letter-spacing: -.065em;\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-center strong span {\r\n\r\n  display: block;\r\n\r\n  color: #93afd8;\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-soon {\r\n\r\n  color: #becbe0;\r\n\r\n  font-size: 9px;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpa-placeholder-bottom {\r\n\r\n  color: #91a8ca;\r\n\r\n  font-size: 9px;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   11 \u2014 SCANNING LINE\r\n   ========================================== *\/\r\n\r\n.dpa-reveal-edge {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 6;\r\n\r\n  top: 0;\r\n\r\n  bottom: 0;\r\n\r\n  left: var(--dpa-edge);\r\n\r\n  width: 2px;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  background: #a2bce1;\r\n\r\n  box-shadow:\r\n\r\n    0 0 20px rgba(163,194,238,.9),\r\n\r\n    0 0 50px rgba(84,113,164,.75);\r\n\r\n  opacity: 0;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.dpa-photo-stage.is-revealing\r\n.dpa-reveal-edge {\r\n\r\n  opacity: 1;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   12 \u2014 PHOTO TOP\r\n   ========================================== *\/\r\n\r\n.dpa-photo-top {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 10;\r\n\r\n  top: 28px;\r\n\r\n  left: 32px;\r\n\r\n  right: 32px;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n  pointer-events: none;\r\n\r\n  text-shadow:\r\n    0 2px 12px rgba(0,0,0,.7);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   13 \u2014 PHOTO BOTTOM\r\n   ========================================== *\/\r\n\r\n.dpa-photo-bottom {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 10;\r\n\r\n  bottom: 35px;\r\n\r\n  left: 32px;\r\n\r\n  right: 32px;\r\n\r\n  display: flex;\r\n\r\n  align-items: flex-end;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 25px;\r\n\r\n  pointer-events: none;\r\n\r\n  text-shadow:\r\n    0 2px 12px rgba(0,0,0,.8);\r\n\r\n}\r\n\r\n\r\n.dpa-photo-bottom > div {\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  gap: 12px;\r\n\r\n}\r\n\r\n\r\n.dpa-photo-small {\r\n\r\n  color: #c3d2e9;\r\n\r\n  font-size: 9px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpa-photo-bottom strong {\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    22px,\r\n    3vw,\r\n    44px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: 1.05;\r\n\r\n  letter-spacing: -.045em;\r\n\r\n}\r\n\r\n\r\n.dpa-photo-index {\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 13px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   14 \u2014 PROGRESS BAR\r\n   ========================================== *\/\r\n\r\n.dpa-photo-progress {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 15;\r\n\r\n  bottom: 0;\r\n\r\n  left: 0;\r\n\r\n  right: 0;\r\n\r\n  height: 3px;\r\n\r\n  background: rgba(84,113,164,.30);\r\n\r\n}\r\n\r\n\r\n.dpa-photo-progress-fill {\r\n\r\n  width: var(--dpa-fill);\r\n\r\n  height: 100%;\r\n\r\n  background: #9bb9e4;\r\n\r\n  box-shadow:\r\n    0 0 20px rgba(155,185,228,.65);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   15 \u2014 ABOUT STORY\r\n   ========================================== *\/\r\n\r\n.dpa-story {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0,1fr)\r\n    minmax(0,1fr);\r\n\r\n  gap: clamp(\r\n    45px,\r\n    7vw,\r\n    130px\r\n  );\r\n\r\n  padding: 115px 0 100px;\r\n\r\n  align-items: start;\r\n\r\n}\r\n\r\n\r\n\r\n\/* STORY LEFT *\/\r\n\r\n.dpa-story-eyebrow {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 15px;\r\n\r\n  margin-bottom: 35px;\r\n\r\n  color: var(--dpa-blue);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 4px;\r\n\r\n}\r\n\r\n\r\n.dpa-story-line {\r\n\r\n  width: 45px;\r\n\r\n  height: 1px;\r\n\r\n  background: var(--dpa-blue);\r\n\r\n}\r\n\r\n\r\n.dpa-story-left h3 {\r\n\r\n  margin: 0;\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-size: clamp(\r\n    38px,\r\n    4.5vw,\r\n    69px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: 1.06;\r\n\r\n  letter-spacing: -.06em;\r\n\r\n}\r\n\r\n\r\n.dpa-story-left h3 span {\r\n\r\n  color: var(--dpa-blue);\r\n\r\n}\r\n\r\n\r\n\r\n\/* STORY RIGHT *\/\r\n\r\n.dpa-story-right {\r\n\r\n  padding-top: 45px;\r\n\r\n}\r\n\r\n\r\n.dpa-story-right p {\r\n\r\n  max-width: 570px;\r\n\r\n  margin: 0 0 24px;\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-size: 15px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1.9;\r\n\r\n}\r\n\r\n\r\n.dpa-story-right .dpa-story-lead {\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-size: clamp(\r\n    21px,\r\n    2vw,\r\n    28px\r\n  );\r\n\r\n  font-weight: 700;\r\n\r\n  line-height: 1.45;\r\n\r\n  letter-spacing: -.035em;\r\n\r\n  margin-bottom: 35px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   16 \u2014 SIGNATURE\r\n   ========================================== *\/\r\n\r\n.dpa-story-signature {\r\n\r\n  position: relative;\r\n\r\n  margin-top: 50px;\r\n\r\n  padding-top: 28px;\r\n\r\n  color: var(--dpa-blue);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  line-height: 2;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dpa-signature-line {\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n\r\n  left: 0;\r\n\r\n  width: 55px;\r\n\r\n  height: 2px;\r\n\r\n  background: var(--dpa-blue);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   17 \u2014 BOTTOM STRIP\r\n   ========================================== *\/\r\n\r\n.dpa-bottom {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 23px;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  padding-top: 30px;\r\n\r\n  border-top: 1px solid\r\n    rgba(84,89,95,.20);\r\n\r\n  color: var(--dpa-grey);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dpa-bottom-dot {\r\n\r\n  width: 4px;\r\n\r\n  height: 4px;\r\n\r\n  background: var(--dpa-blue);\r\n\r\n  border-radius: 50%;\r\n\r\n}\r\n\r\n\r\n.dpa-bottom-brand {\r\n\r\n  margin-left: auto;\r\n\r\n  color: var(--dpa-blue);\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   18 \u2014 TABLET\r\n   ========================================== *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  .dpa-about {\r\n\r\n    padding: 90px 24px 60px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-title {\r\n\r\n    font-size: clamp(\r\n      44px,\r\n      8vw,\r\n      82px\r\n    );\r\n\r\n  }\r\n\r\n\r\n  .dpa-story {\r\n\r\n    gap: 50px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-story-left h3 {\r\n\r\n    font-size: 46px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   19 \u2014 MOBILE\r\n   ========================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .dpa-about {\r\n\r\n\r\n    --dpa-panel-height: min(\r\n      440px,\r\n      calc(100svh - 110px)\r\n    );\r\n\r\n\r\n    --dpa-pin-top: max(\r\n      72px,\r\n      calc(\r\n        (100svh - var(--dpa-panel-height)) \/ 2\r\n      )\r\n    );\r\n\r\n\r\n    --dpa-scroll-distance: 85svh;\r\n\r\n\r\n    padding: 75px 18px 50px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* HEADING *\/\r\n\r\n  .dpa-top {\r\n\r\n    margin-bottom: 45px;\r\n\r\n    align-items: flex-start;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 12px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-eyebrow {\r\n\r\n    font-size: 10px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-top-right {\r\n\r\n    font-size: 8px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-title {\r\n\r\n    font-size: clamp(\r\n      35px,\r\n      9.4vw,\r\n      65px\r\n    );\r\n\r\n    letter-spacing: -.07em;\r\n\r\n  }\r\n\r\n\r\n  .dpa-intro {\r\n\r\n    margin-bottom: 40px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-intro-bottom {\r\n\r\n    margin-top: 30px;\r\n\r\n    gap: 15px;\r\n\r\n    flex-wrap: wrap;\r\n\r\n  }\r\n\r\n\r\n  .dpa-intro-rule {\r\n\r\n    min-width: 30px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-intro-bottom .dpa-blue {\r\n\r\n    font-size: 8px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* PHOTO *\/\r\n\r\n  .dpa-photo-top {\r\n\r\n    top: 18px;\r\n\r\n    left: 18px;\r\n\r\n    right: 18px;\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-photo-bottom {\r\n\r\n    bottom: 25px;\r\n\r\n    left: 18px;\r\n\r\n    right: 18px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-photo-small {\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-photo-bottom strong {\r\n\r\n    font-size: 25px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* PLACEHOLDER *\/\r\n\r\n  .dpa-placeholder-frame {\r\n\r\n    inset: 10% 5%;\r\n\r\n    padding: 7px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-placeholder-inner {\r\n\r\n    padding: 13px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-placeholder-label,\r\n  .dpa-placeholder-bottom {\r\n\r\n    font-size: 7px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-placeholder-center {\r\n\r\n    gap: 12px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-placeholder-small {\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-placeholder-center strong {\r\n\r\n    font-size: clamp(\r\n      25px,\r\n      7vw,\r\n      42px\r\n    );\r\n\r\n  }\r\n\r\n\r\n  .dpa-placeholder-soon {\r\n\r\n    font-size: 7px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* STORY *\/\r\n\r\n  .dpa-story {\r\n\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 30px;\r\n\r\n    padding: 75px 0 60px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-story-left h3 {\r\n\r\n    font-size: clamp(\r\n      38px,\r\n      9vw,\r\n      55px\r\n    );\r\n\r\n  }\r\n\r\n\r\n  .dpa-story-right {\r\n\r\n    padding-top: 0;\r\n\r\n  }\r\n\r\n\r\n  .dpa-story-right p {\r\n\r\n    font-size: 14px;\r\n\r\n    line-height: 1.85;\r\n\r\n  }\r\n\r\n\r\n  .dpa-story-right .dpa-story-lead {\r\n\r\n    font-size: 22px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* BOTTOM *\/\r\n\r\n  .dpa-bottom {\r\n\r\n    gap: 15px;\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dpa-bottom-brand {\r\n\r\n    width: 100%;\r\n\r\n    margin-left: 0;\r\n\r\n    margin-top: 15px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   20 \u2014 REDUCED MOTION\r\n   ========================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  .dpa-about {\r\n\r\n    --dpa-hide: 0%;\r\n    --dpa-fill: 100%;\r\n\r\n  }\r\n\r\n\r\n  .dpa-reveal-scroll {\r\n\r\n    height: auto;\r\n\r\n  }\r\n\r\n\r\n  .dpa-reveal-scroll .dpa-photo-stage {\r\n\r\n    position: relative;\r\n\r\n    top: auto;\r\n\r\n  }\r\n\r\n\r\n  .dpa-reveal-layer {\r\n\r\n    clip-path: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpa-reveal-edge {\r\n\r\n    display: none;\r\n\r\n  }\r\n\r\n\r\n  .dpa-about *,\r\n  .dpa-about *::before,\r\n  .dpa-about *::after {\r\n\r\n    animation: none !important;\r\n\r\n    transition: none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* ==========================================\r\n   DISPLERO ABOUT V2\r\n   PINNED SCROLL ENGINE\r\n   ========================================== *\/\r\n\r\n(function () {\r\n\r\n  \"use strict\";\r\n\r\n\r\n  const sections = document.querySelectorAll(\r\n    \".dpa-about:not([data-dpa-ready])\"\r\n  );\r\n\r\n\r\n  sections.forEach(initAbout);\r\n\r\n\r\n\r\n  function initAbout(section) {\r\n\r\n\r\n    section.dataset.dpaReady = \"true\";\r\n\r\n\r\n    \/* ELEMENTS *\/\r\n\r\n    const wrapper = section.querySelector(\r\n      \".dpa-reveal-scroll\"\r\n    );\r\n\r\n\r\n    const stage = section.querySelector(\r\n      \".dpa-photo-stage\"\r\n    );\r\n\r\n\r\n    const image = section.querySelector(\r\n      \".dpa-photo\"\r\n    );\r\n\r\n\r\n    if (!wrapper || !stage) return;\r\n\r\n\r\n\r\n    \/* ======================================\r\n       LOAD OPTIONAL PHOTO\r\n       ====================================== *\/\r\n\r\n    if (image) {\r\n\r\n\r\n      const url = image.dataset.src || \"\";\r\n\r\n\r\n      if (\/^https?:\\\/\\\/\/i.test(url)) {\r\n\r\n\r\n        image.addEventListener(\r\n          \"load\",\r\n          function () {\r\n\r\n            if (image.naturalWidth > 0) {\r\n\r\n              stage.classList.add(\r\n                \"has-photo\"\r\n              );\r\n\r\n            }\r\n\r\n          }\r\n        );\r\n\r\n\r\n        image.addEventListener(\r\n          \"error\",\r\n          function () {\r\n\r\n            stage.classList.remove(\r\n              \"has-photo\"\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n        image.src = url;\r\n\r\n\r\n        if (\r\n          image.complete &&\r\n          image.naturalWidth > 0\r\n        ) {\r\n\r\n          stage.classList.add(\r\n            \"has-photo\"\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* ======================================\r\n       REDUCED MOTION\r\n       ====================================== *\/\r\n\r\n    const reduceMotion = window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    );\r\n\r\n\r\n    if (reduceMotion.matches) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* ======================================\r\n       HELPERS\r\n       ====================================== *\/\r\n\r\n    function clamp(value) {\r\n\r\n      return Math.max(\r\n        0,\r\n        Math.min(1, value)\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    let ticking = false;\r\n\r\n\r\n\r\n    \/* ======================================\r\n       UPDATE SCROLL REVEAL\r\n       ====================================== *\/\r\n\r\n    function update() {\r\n\r\n\r\n      ticking = false;\r\n\r\n\r\n\r\n      \/* POSITION OF THE SCROLL WRAPPER *\/\r\n\r\n      const wrapperRect =\r\n        wrapper.getBoundingClientRect();\r\n\r\n\r\n\r\n      \/* ACTUAL STICKY TOP OFFSET *\/\r\n\r\n      const stickyTop =\r\n\r\n        parseFloat(\r\n          window.getComputedStyle(stage).top\r\n        ) || 0;\r\n\r\n\r\n\r\n      \/* DISTANCE RESERVED FOR ANIMATION *\/\r\n\r\n      const scrollDistance = Math.max(\r\n\r\n        wrapper.offsetHeight -\r\n        stage.offsetHeight,\r\n\r\n        1\r\n\r\n      );\r\n\r\n\r\n\r\n      \/*\r\n       Progress = 0:\r\n       wrapper reaches sticky position.\r\n\r\n       Progress = 1:\r\n       wrapper releases the sticky panel.\r\n\r\n       This also works in reverse.\r\n      *\/\r\n\r\n      const progress = clamp(\r\n\r\n        (\r\n          stickyTop -\r\n          wrapperRect.top\r\n        )\r\n\r\n        \/\r\n\r\n        scrollDistance\r\n\r\n      );\r\n\r\n\r\n\r\n      \/* =================================\r\n         HORIZONTAL IMAGE REVEAL\r\n         ================================= *\/\r\n\r\n      const hiddenPercentage =\r\n\r\n        (1 - progress) * 100;\r\n\r\n\r\n\r\n      stage.style.setProperty(\r\n\r\n        \"--dpa-hide\",\r\n\r\n        hiddenPercentage + \"%\"\r\n\r\n      );\r\n\r\n\r\n\r\n      \/* =================================\r\n         SCANNING LINE\r\n         ================================= *\/\r\n\r\n      stage.style.setProperty(\r\n\r\n        \"--dpa-edge\",\r\n\r\n        (progress * 100) + \"%\"\r\n\r\n      );\r\n\r\n\r\n\r\n      \/* =================================\r\n         BOTTOM PROGRESS BAR\r\n         ================================= *\/\r\n\r\n      stage.style.setProperty(\r\n\r\n        \"--dpa-fill\",\r\n\r\n        (progress * 100) + \"%\"\r\n\r\n      );\r\n\r\n\r\n\r\n      \/* =================================\r\n         ACTIVE REVEAL STATE\r\n         ================================= *\/\r\n\r\n      stage.classList.toggle(\r\n\r\n        \"is-revealing\",\r\n\r\n        progress > 0.001 &&\r\n        progress < 0.999\r\n\r\n      );\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* ======================================\r\n       OPTIMIZED SCROLL HANDLER\r\n       ====================================== *\/\r\n\r\n    function requestUpdate() {\r\n\r\n\r\n      if (ticking) return;\r\n\r\n\r\n      ticking = true;\r\n\r\n\r\n      window.requestAnimationFrame(\r\n        update\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* ======================================\r\n       LISTEN FOR SCROLL\r\n       ====================================== *\/\r\n\r\n    window.addEventListener(\r\n\r\n      \"scroll\",\r\n\r\n      requestUpdate,\r\n\r\n      { passive: true }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* ======================================\r\n       RESIZE\r\n       ====================================== *\/\r\n\r\n    window.addEventListener(\r\n\r\n      \"resize\",\r\n\r\n      requestUpdate,\r\n\r\n      { passive: true }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* ======================================\r\n       INITIALIZE\r\n       ====================================== *\/\r\n\r\n    update();\r\n\r\n\r\n\r\n    \/* RECHECK WHEN PAGE IS LOADED *\/\r\n\r\n    window.addEventListener(\r\n\r\n      \"load\",\r\n\r\n      requestUpdate,\r\n\r\n      { once: true }\r\n\r\n    );\r\n\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-a04505b e-con-full e-flex e-con e-parent\" data-id=\"a04505b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd9a629 elementor-widget elementor-widget-html\" data-id=\"cd9a629\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- ==========================================\r\n DISPLERO \u2014 THE FINAL EXPERIENCE V2\r\n DIGITAL GRID \/ KINETIC TYPE \/ LETTERS\r\n COMPLETE HTML + CSS + JAVASCRIPT\r\n ========================================== -->\r\n\r\n<link rel=\"preconnect\"\r\nhref=\"https:\/\/fonts.googleapis.com\">\r\n\r\n<link rel=\"preconnect\"\r\nhref=\"https:\/\/fonts.gstatic.com\"\r\ncrossorigin>\r\n\r\n<link\r\nhref=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\"\r\nrel=\"stylesheet\">\r\n\r\n\r\n<section class=\"dpf-v2\" id=\"start-project\">\r\n\r\n  <!-- ===============================\r\n       BACKGROUND SYSTEM\r\n       =============================== -->\r\n\r\n  <div class=\"dpf-v2-world\"\r\n       aria-hidden=\"true\">\r\n\r\n    <div class=\"dpf-v2-grid\"><\/div>\r\n\r\n    <div class=\"dpf-v2-sweep\"><\/div>\r\n\r\n    <div class=\"dpf-v2-ghost\">\r\n      NEXT\r\n    <\/div>\r\n\r\n    <div class=\"dpf-v2-noise\"><\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- ===============================\r\n       MAIN CONTAINER\r\n       =============================== -->\r\n\r\n  <div class=\"dpf-v2-container\">\r\n\r\n\r\n    <!-- TOP BAR -->\r\n\r\n    <div class=\"dpf-v2-top\">\r\n\r\n      <span class=\"dpf-v2-section-label\">\r\n\r\n        <span class=\"dpf-v2-live\"><\/span>\r\n\r\n        START A PROJECT\r\n\r\n      <\/span>\r\n\r\n\r\n      <span class=\"dpf-v2-top-symbol\">\r\n\r\n        \u2733\r\n\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===============================\r\n         MAIN CONTENT\r\n         =============================== -->\r\n\r\n    <div class=\"dpf-v2-main\">\r\n\r\n\r\n      <!-- EYEBROW -->\r\n\r\n      <div class=\"dpf-v2-eyebrow dpf-v2-reveal\">\r\n\r\n        YOUR NEXT PROJECT STARTS HERE.\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- BIG HEADING -->\r\n\r\n      <h2 class=\"dpf-v2-title\">\r\n\r\n\r\n        <span class=\"dpf-v-line\">\r\n\r\n          <span class=\"dpf-v-line-inner\">\r\n\r\n            LET'S BUILD\r\n\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n\r\n\r\n        <span class=\"dpf-v-line\">\r\n\r\n          <span class=\"dpf-v2-line-inner\">\r\n\r\n            WHAT'S\r\n\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n\r\n\r\n        <span class=\"dpf-v-line dpf-v2-last\">\r\n\r\n          <span class=\"dpf-v2-line-inner\">\r\n\r\n            NEXT.<span class=\"\"><\/span>\r\n\r\n          <\/span>\r\n\r\n        <\/span>\r\n\r\n\r\n      <\/h2>\r\n\r\n\r\n\r\n      <!-- SIGNAL UNDERLINE -->\r\n\r\n      <div class=\"dpf-v2-signal\"\r\n           aria-hidden=\"true\">\r\n\r\n        <span><\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- DESCRIPTION AND BUTTON -->\r\n\r\n      <div class=\"dpf-v2-bottom-content\">\r\n\r\n\r\n        <div class=\"dpf-v2-description dpf-v2-reveal\">\r\n\r\n          <span class=\"dpf-v2-description-index\">\r\n\r\n            \r\n\r\n          <\/span>\r\n\r\n\r\n          <p>\r\n\r\n            Have a project in mind?\r\n\r\n            <br>\r\n\r\n            Let's bring your vision to life.\r\n\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- ==========================\r\n             INTERACTIVE LETTERS BUTTON\r\n             ========================== -->\r\n\r\n        <a\r\n          class=\"dpf-v2-cta dpf-v2-reveal\"\r\n          href=\"https:\/\/displero.com\/contact-2\"\r\n          aria-label=\"Start a project \u2014 contact DISPLERO\"\r\n        >\r\n\r\n\r\n          <!-- BUTTON GRID -->\r\n\r\n          <span class=\"dpf-v2-button-grid\"\r\n                aria-hidden=\"true\">\r\n          <\/span>\r\n\r\n\r\n\r\n          <!-- FIRST LABEL -->\r\n\r\n          <span class=\"dpf-v2-button-first\"\r\n                aria-hidden=\"true\">\r\n\r\n            START A PROJECT\r\n\r\n          <\/span>\r\n\r\n\r\n\r\n          <!-- SECOND LABEL -->\r\n\r\n          <span class=\"dpf-v2-button-second\"\r\n                aria-hidden=\"true\">\r\n\r\n            LET'S TALK\r\n\r\n          <\/span>\r\n\r\n\r\n\r\n          <!-- ARROW -->\r\n\r\n          <span class=\"dpf-v2-button-arrow\"\r\n                aria-hidden=\"true\">\r\n\r\n            \u2197\r\n\r\n          <\/span>\r\n\r\n\r\n        <\/a>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===============================\r\n         MOVING MARQUEE\r\n         =============================== -->\r\n\r\n    <div class=\"dpf-v2-marquee\"\r\n         aria-label=\"LED videowalls, touch overlays, AV installation, maintenance and support\">\r\n\r\n      <div class=\"dpf-v2-marquee-track\"\r\n           aria-hidden=\"true\">\r\n\r\n\r\n        <!-- FIRST COPY -->\r\n\r\n        <div class=\"dpf-v2-marquee-group\">\r\n\r\n          <span>LED VIDEOWALLS<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n          <span>TOUCH OVERLAYS<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n          <span>AV INSTALLATION<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n          <span>MAINTENANCE<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- SECOND COPY -->\r\n\r\n        <div class=\"dpf-v2-marquee-group\">\r\n\r\n          <span>LED VIDEOWALLS<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n          <span>TOUCH OVERLAYS<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n          <span>AV INSTALLATION<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n          <span>MAINTENANCE<\/span>\r\n\r\n          <span class=\"dpf-v2-marquee-star\">\u2733<\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===============================\r\n         FOOTER\r\n         =============================== -->\r\n\r\n    <div class=\"dpf-v2-footer\">\r\n\r\n      <span class=\"dpf-v2-brand\">\r\n\r\n        \r\n\r\n      <\/span>\r\n\r\n\r\n      <span>\r\n\r\n        \r\n\r\n      <\/span>\r\n\r\n\r\n      <span>\r\n\r\n       \r\n\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* ==========================================\r\n   01 \/ VARIABLES\r\n   ========================================== *\/\r\n\r\n.dpf-v2 {\r\n\r\n  --blue: #5471a4;\r\n\r\n  --dark: #090d1f;\r\n\r\n  --grey: #54595F;\r\n\r\n  --ghost-shift: 0px;\r\n\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  min-height: 100svh;\r\n\r\n  padding: 85px 30px 35px;\r\n\r\n  margin: 0;\r\n\r\n  background: var(--blue);\r\n\r\n  color: #ffffff;\r\n\r\n  font-family: \"Manrope\", sans-serif;\r\n\r\n  overflow: hidden;\r\n\r\n  isolation: isolate;\r\n\r\n}\r\n\r\n\r\n.dpf-v2 * {\r\n\r\n  box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   02 \/ BACKGROUND WORLD\r\n   ========================================== *\/\r\n\r\n.dpf-v2-world {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   03 \/ ANIMATED GRID\r\n   ========================================== *\/\r\n\r\n.dpf-v2-grid {\r\n\r\n  position: absolute;\r\n\r\n  width: 160%;\r\n\r\n  height: 160%;\r\n\r\n  left: -30%;\r\n\r\n  top: -30%;\r\n\r\n  opacity: .35;\r\n\r\n\r\n  background-image:\r\n\r\n    linear-gradient(\r\n      rgba(255,255,255,.22) 1px,\r\n      transparent 1px\r\n    ),\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255,255,255,.22) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n\r\n  background-size: 90px 90px;\r\n\r\n\r\n  transform:\r\n\r\n    perspective(900px)\r\n\r\n    rotateX(34deg)\r\n\r\n    rotateZ(-13deg);\r\n\r\n\r\n  animation:\r\n\r\n    dpfGridMove 28s\r\n    linear infinite;\r\n\r\n}\r\n\r\n\r\n\r\n\/* GRID MOVEMENT *\/\r\n\r\n@keyframes dpfGridMove {\r\n\r\n  0% {\r\n\r\n    transform:\r\n\r\n      perspective(900px)\r\n\r\n      rotateX(34deg)\r\n\r\n      rotateZ(-13deg)\r\n\r\n      translate3d(0,0,0);\r\n\r\n  }\r\n\r\n\r\n  50% {\r\n\r\n    transform:\r\n\r\n      perspective(900px)\r\n\r\n      rotateX(34deg)\r\n\r\n      rotateZ(-13deg)\r\n\r\n      translate3d(-55px,35px,0);\r\n\r\n  }\r\n\r\n\r\n  100% {\r\n\r\n    transform:\r\n\r\n      perspective(900px)\r\n\r\n      rotateX(34deg)\r\n\r\n      rotateZ(-13deg)\r\n\r\n      translate3d(-110px,70px,0);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   04 \/ DIGITAL SWEEP\r\n   ========================================== *\/\r\n\r\n\/*\r\n A narrow highlight travels across the\r\n background automatically.\r\n\r\n No cursor tracking.\r\n*\/\r\n\r\n.dpf-v2-sweep {\r\n\r\n  position: absolute;\r\n\r\n  top: -30%;\r\n\r\n  bottom: -30%;\r\n\r\n  left: -45%;\r\n\r\n  width: 38%;\r\n\r\n  transform: skewX(-19deg);\r\n\r\n  background:\r\n\r\n    linear-gradient(\r\n      90deg,\r\n\r\n      transparent 0%,\r\n\r\n      rgba(255,255,255,.015) 30%,\r\n\r\n      rgba(255,255,255,.12) 49%,\r\n\r\n      rgba(255,255,255,.18) 50%,\r\n\r\n      rgba(255,255,255,.12) 51%,\r\n\r\n      rgba(255,255,255,.015) 70%,\r\n\r\n      transparent 100%\r\n    );\r\n\r\n\r\n  animation:\r\n\r\n    dpfSweep 11s\r\n    ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpfSweep {\r\n\r\n  0%, 14% {\r\n\r\n    transform:\r\n      translateX(0)\r\n      skewX(-19deg);\r\n\r\n    opacity: 0;\r\n\r\n  }\r\n\r\n\r\n  22% {\r\n\r\n    opacity: 1;\r\n\r\n  }\r\n\r\n\r\n  65% {\r\n\r\n    opacity: 1;\r\n\r\n  }\r\n\r\n\r\n  80%, 100% {\r\n\r\n    transform:\r\n      translateX(460%)\r\n      skewX(-19deg);\r\n\r\n    opacity: 0;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   05 \/ GHOST TYPOGRAPHY\r\n   ========================================== *\/\r\n\r\n.dpf-v2-ghost {\r\n\r\n  position: absolute;\r\n\r\n  right: -8%;\r\n\r\n  top: 30%;\r\n\r\n  color: transparent;\r\n\r\n  -webkit-text-stroke:\r\n\r\n    1px rgba(255,255,255,.12);\r\n\r\n\r\n  font-size: clamp(\r\n    220px,\r\n    35vw,\r\n    650px\r\n  );\r\n\r\n  line-height: 1;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.1em;\r\n\r\n  white-space: nowrap;\r\n\r\n\r\n  transform:\r\n\r\n    translate3d(\r\n      var(--ghost-shift),\r\n      0,\r\n      0\r\n    );\r\n\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   06 \/ SUBTLE TEXTURE\r\n   ========================================== *\/\r\n\r\n.dpf-v2-noise {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  opacity: .45;\r\n\r\n\r\n  background:\r\n\r\n    radial-gradient(\r\n      ellipse at 20% 80%,\r\n      rgba(9,13,31,.15),\r\n      transparent 55%\r\n    ),\r\n\r\n    linear-gradient(\r\n      180deg,\r\n      transparent,\r\n      rgba(9,13,31,.08)\r\n    );\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   07 \/ CONTENT\r\n   ========================================== *\/\r\n\r\n.dpf-v2-container {\r\n\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  max-width: 1500px;\r\n\r\n  min-height: calc(\r\n    100svh - 120px\r\n  );\r\n\r\n  margin: 0 auto;\r\n\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  justify-content: space-between;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   08 \/ TOP BAR\r\n   ========================================== *\/\r\n\r\n.dpf-v2-top {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* TOP LABEL *\/\r\n\r\n.dpf-v2-section-label {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 14px;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* LIVE DOT *\/\r\n\r\n.dpf-v2-live {\r\n\r\n  width: 8px;\r\n\r\n  height: 8px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #ffffff;\r\n\r\n  box-shadow:\r\n\r\n    0 0 0 0\r\n    rgba(255,255,255,.45);\r\n\r\n\r\n  animation:\r\n\r\n    dpfPulse 2.8s\r\n    ease-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpfPulse {\r\n\r\n  0% {\r\n\r\n    box-shadow:\r\n\r\n      0 0 0 0\r\n      rgba(255,255,255,.45);\r\n\r\n  }\r\n\r\n\r\n  65% {\r\n\r\n    box-shadow:\r\n\r\n      0 0 0 11px\r\n      rgba(255,255,255,0);\r\n\r\n  }\r\n\r\n\r\n  100% {\r\n\r\n    box-shadow:\r\n\r\n      0 0 0 0\r\n      rgba(255,255,255,0);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ROTATING SYMBOL *\/\r\n\r\n.dpf-v2-top-symbol {\r\n\r\n  display: block;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 37px;\r\n\r\n  line-height: 1;\r\n\r\n\r\n  animation:\r\n\r\n    dpfRotate 18s\r\n    linear infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpfRotate {\r\n\r\n  to {\r\n\r\n    transform: rotate(360deg);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   09 \/ MAIN CONTENT\r\n   ========================================== *\/\r\n\r\n.dpf-v2-main {\r\n\r\n  width: 100%;\r\n\r\n  padding: 105px 0 100px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* EYEBROW *\/\r\n\r\n.dpf-v2-eyebrow {\r\n\r\n  margin-bottom: 45px;\r\n\r\n  color: #ecf2fa;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 4px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   10 \/ KINETIC TYPOGRAPHY\r\n   ========================================== *\/\r\n\r\n.dpf-v2-title {\r\n\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    52px,\r\n    10vw,\r\n    155px\r\n  );\r\n\r\n  line-height: .92;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.08em;\r\n\r\n}\r\n\r\n\r\n\r\n\/* EACH LINE *\/\r\n\r\n.dpf-v2-line {\r\n\r\n  display: block;\r\n\r\n  width: fit-content;\r\n\r\n  max-width: 100%;\r\n\r\n  overflow: hidden;\r\n\r\n  padding: .09em 0;\r\n\r\n  margin: -.09em 0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* INNER LINE *\/\r\n\r\n.dpf-v2-line-inner {\r\n\r\n  display: block;\r\n\r\n  transform: translateY(0);\r\n\r\n  opacity: 1;\r\n\r\n  transition:\r\n\r\n    transform 1s\r\n    cubic-bezier(.2,.8,.2,1),\r\n\r\n    opacity .8s ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* INIT REVEAL *\/\r\n\r\n.dpf-v2.is-enhanced\r\n.dpf-v2-line-inner {\r\n\r\n  transform: translateY(115%);\r\n\r\n  opacity: 0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* SHOW LINES *\/\r\n\r\n.dpf-v2.is-visible\r\n.dpf-v2-line-inner {\r\n\r\n  transform: translateY(0);\r\n\r\n  opacity: 1;\r\n\r\n}\r\n\r\n\r\n\r\n\/* STAGGER *\/\r\n\r\n.dpf-v2-line:nth-child(1)\r\n.dpf-v2-line-inner {\r\n\r\n  transition-delay: .08s;\r\n\r\n}\r\n\r\n\r\n.dpf-v2-line:nth-child(2)\r\n.dpf-v2-line-inner {\r\n\r\n  transition-delay: .23s;\r\n\r\n}\r\n\r\n\r\n.dpf-v2-line:nth-child(3)\r\n.dpf-v2-line-inner {\r\n\r\n  transition-delay: .38s;\r\n\r\n}\r\n\r\n\r\n\r\n\/* LAST LINE *\/\r\n\r\n.dpf-v2-last {\r\n\r\n  position: relative;\r\n\r\n}\r\n\r\n\r\n\r\n\/* DARK PERIOD *\/\r\n\r\n.dpf-v2-period {\r\n\r\n  color: var(--dark);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   11 \/ SIGNAL LINE\r\n   ========================================== *\/\r\n\r\n.dpf-v2-signal {\r\n\r\n  position: relative;\r\n\r\n  width: min(100%, 850px);\r\n\r\n  height: 2px;\r\n\r\n  margin-top: 50px;\r\n\r\n  background:\r\n\r\n    rgba(255,255,255,.24);\r\n\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n\r\n\r\n\/* MOVING SIGNAL *\/\r\n\r\n.dpf-v2-signal span {\r\n\r\n  position: absolute;\r\n\r\n  left: -25%;\r\n\r\n  top: 0;\r\n\r\n  width: 25%;\r\n\r\n  height: 100%;\r\n\r\n\r\n  background:\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      #ffffff,\r\n      transparent\r\n    );\r\n\r\n\r\n  box-shadow:\r\n\r\n    0 0 18px\r\n    rgba(255,255,255,.45);\r\n\r\n\r\n  animation:\r\n\r\n    dpfSignal 4s\r\n    ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpfSignal {\r\n\r\n  0% {\r\n\r\n    left: -25%;\r\n\r\n  }\r\n\r\n  65%, 100% {\r\n\r\n    left: 110%;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   12 \/ BOTTOM CONTENT\r\n   ========================================== *\/\r\n\r\n.dpf-v2-bottom-content {\r\n\r\n  display: flex;\r\n\r\n  align-items: flex-end;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 50px;\r\n\r\n  margin-top: 70px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n.dpf-v2-description-index {\r\n\r\n  display: block;\r\n\r\n  margin-bottom: 25px;\r\n\r\n  color: #e0e9f6;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpf-v2-description p {\r\n\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    16px,\r\n    1.6vw,\r\n    22px\r\n  );\r\n\r\n  font-weight: 500;\r\n\r\n  line-height: 1.7;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   13 \/ CTA BUTTON\r\n   ========================================== *\/\r\n\r\n.dpf-v2-cta {\r\n\r\n  position: relative;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  width: min(100%, 440px);\r\n\r\n  min-height: 105px;\r\n\r\n  padding: 20px 70px 20px 25px;\r\n\r\n\r\n  border: 1px solid #ffffff;\r\n\r\n  border-radius: 2px;\r\n\r\n  background: #ffffff;\r\n\r\n  color: var(--blue) !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n\r\n  font-family: inherit;\r\n\r\n  font-size: clamp(\r\n    17px,\r\n    2vw,\r\n    26px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.035em;\r\n\r\n\r\n  cursor: pointer;\r\n\r\n  overflow: hidden;\r\n\r\n  isolation: isolate;\r\n\r\n  perspective: 800px;\r\n\r\n\r\n  transition:\r\n\r\n    transform .4s ease,\r\n\r\n    box-shadow .4s ease,\r\n\r\n    border-color .4s ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* BUTTON HOVER *\/\r\n\r\n.dpf-v2-cta:hover {\r\n\r\n  transform: translateY(-6px);\r\n\r\n  border-color: var(--dark);\r\n\r\n  box-shadow:\r\n\r\n    0 25px 70px\r\n    rgba(9,13,31,.25);\r\n\r\n}\r\n\r\n\r\n\r\n\/* FOCUS *\/\r\n\r\n.dpf-v2-cta:focus-visible {\r\n\r\n  outline: 3px solid #ffffff;\r\n\r\n  outline-offset: 6px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   14 \/ DARK BUTTON SWEEP\r\n   ========================================== *\/\r\n\r\n.dpf-v2-cta::before {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n\r\n  background: var(--dark);\r\n\r\n\r\n  transform: translateY(101%);\r\n\r\n\r\n  transition:\r\n\r\n    transform .65s\r\n    cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.dpf-v2-cta:hover::before,\r\n.dpf-v2-cta:focus-visible::before {\r\n\r\n  transform: translateY(0);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   15 \/ BUTTON GRID\r\n   ========================================== *\/\r\n\r\n.dpf-v2-button-grid {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 1;\r\n\r\n  opacity: 0;\r\n\r\n\r\n  background-image:\r\n\r\n    linear-gradient(\r\n      rgba(84,113,164,.26) 1px,\r\n      transparent 1px\r\n    ),\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(84,113,164,.26) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n\r\n  background-size: 25px 25px;\r\n\r\n\r\n  transition: opacity .5s ease;\r\n\r\n}\r\n\r\n\r\n.dpf-v2-cta:hover\r\n.dpf-v2-button-grid,\r\n\r\n.dpf-v2-cta:focus-visible\r\n.dpf-v2-button-grid {\r\n\r\n  opacity: .6;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   16 \/ BUTTON LABELS\r\n   ========================================== *\/\r\n\r\n.dpf-v2-button-first,\r\n.dpf-v2-button-second {\r\n\r\n  position: relative;\r\n\r\n  z-index: 3;\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n\r\n\/* FIRST LABEL *\/\r\n\r\n.dpf-v2-button-first {\r\n\r\n  color: var(--blue);\r\n\r\n  transform-style: preserve-3d;\r\n\r\n}\r\n\r\n\r\n\r\n\/* SECOND LABEL *\/\r\n\r\n.dpf-v2-button-second {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  padding-right: 55px;\r\n\r\n  color: #ffffff;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n\r\n    translateY(70%)\r\n    rotateX(-65deg);\r\n\r\n\r\n  transform-origin: center bottom;\r\n\r\n\r\n  transition:\r\n\r\n    opacity .4s ease,\r\n\r\n    transform .6s\r\n    cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n\r\n\/* SHOW SECOND LABEL *\/\r\n\r\n.dpf-v2-cta:hover\r\n.dpf-v2-button-second,\r\n\r\n.dpf-v2-cta:focus-visible\r\n.dpf-v2-button-second {\r\n\r\n  opacity: 1;\r\n\r\n  transform:\r\n\r\n    translateY(0)\r\n    rotateX(0);\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   17 \/ INDIVIDUAL LETTERS\r\n   ========================================== *\/\r\n\r\n.dpf-v2-letter {\r\n\r\n  display: inline-block;\r\n\r\n  transform-origin: center bottom;\r\n\r\n\r\n  transition:\r\n\r\n    transform .5s\r\n    cubic-bezier(.2,.8,.2,1),\r\n\r\n    opacity .4s ease;\r\n\r\n\r\n  transition-delay:\r\n\r\n    calc(var(--letter-index) * 22ms);\r\n\r\n}\r\n\r\n\r\n\r\n\/* LETTER EXIT *\/\r\n\r\n.dpf-v2-cta:hover\r\n.dpf-v2-button-first\r\n.dpf-v2-letter,\r\n\r\n.dpf-v2-cta:focus-visible\r\n.dpf-v2-button-first\r\n.dpf-v2-letter {\r\n\r\n  transform:\r\n\r\n    translateY(-115%)\r\n    rotateX(75deg);\r\n\r\n  opacity: 0;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   18 \/ BUTTON ARROW\r\n   ========================================== *\/\r\n\r\n.dpf-v2-button-arrow {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 5;\r\n\r\n  right: 25px;\r\n\r\n  top: 50%;\r\n\r\n  transform: translateY(-50%);\r\n\r\n\r\n  color: var(--blue);\r\n\r\n  font-size: 32px;\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1;\r\n\r\n\r\n  transition:\r\n\r\n    color .4s ease,\r\n\r\n    transform .4s ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ARROW MOVEMENT *\/\r\n\r\n.dpf-v2-cta:hover\r\n.dpf-v2-button-arrow,\r\n\r\n.dpf-v2-cta:focus-visible\r\n.dpf-v2-button-arrow {\r\n\r\n  color: #ffffff;\r\n\r\n  transform:\r\n\r\n    translate(4px, calc(-50% - 4px));\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   19 \/ MARQUEE\r\n   ========================================== *\/\r\n\r\n.dpf-v2-marquee {\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  overflow: hidden;\r\n\r\n  border-top:\r\n\r\n    1px solid\r\n    rgba(255,255,255,.40);\r\n\r\n  border-bottom:\r\n\r\n    1px solid\r\n    rgba(255,255,255,.40);\r\n\r\n\r\n  padding: 23px 0;\r\n\r\n  margin-bottom: 45px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* TRACK *\/\r\n\r\n.dpf-v2-marquee-track {\r\n\r\n  display: flex;\r\n\r\n  width: max-content;\r\n\r\n  align-items: center;\r\n\r\n\r\n  animation:\r\n\r\n    dpfMarquee 35s\r\n    linear infinite;\r\n\r\n}\r\n\r\n\r\n\r\n\/* GROUP *\/\r\n\r\n.dpf-v2-marquee-group {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  gap: 40px;\r\n\r\n  padding-right: 40px;\r\n\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(\r\n    15px,\r\n    1.8vw,\r\n    25px\r\n  );\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.03em;\r\n\r\n  white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n\r\n\/* MARQUEE STAR *\/\r\n\r\n.dpf-v2-marquee-star {\r\n\r\n  color: #d5e3f6;\r\n\r\n  font-size: 21px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* MOVEMENT *\/\r\n\r\n@keyframes dpfMarquee {\r\n\r\n  from {\r\n\r\n    transform: translateX(0);\r\n\r\n  }\r\n\r\n\r\n  to {\r\n\r\n    transform: translateX(-50%);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* PAUSE MARQUEE ON HOVER *\/\r\n\r\n.dpf-v2-marquee:hover\r\n.dpf-v2-marquee-track {\r\n\r\n  animation-play-state: paused;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   20 \/ FOOTER\r\n   ========================================== *\/\r\n\r\n.dpf-v2-footer {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 25px;\r\n\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* BRAND *\/\r\n\r\n.dpf-v2-brand {\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 17px;\r\n\r\n  letter-spacing: 1px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   21 \/ SCROLL REVEAL\r\n   ========================================== *\/\r\n\r\n.dpf-v2-reveal {\r\n\r\n  opacity: 1;\r\n\r\n  transform: translateY(0);\r\n\r\n\r\n  transition:\r\n\r\n    opacity .8s ease,\r\n\r\n    transform .8s\r\n    cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n\r\n\/* INIT STATE *\/\r\n\r\n.dpf-v2.is-enhanced\r\n.dpf-v2-reveal {\r\n\r\n  opacity: 0;\r\n\r\n  transform: translateY(28px);\r\n\r\n}\r\n\r\n\r\n\r\n\/* VISIBLE STATE *\/\r\n\r\n.dpf-v2.is-visible\r\n.dpf-v2-reveal {\r\n\r\n  opacity: 1;\r\n\r\n  transform: translateY(0);\r\n\r\n}\r\n\r\n\r\n\r\n\/* STAGGER *\/\r\n\r\n.dpf-v2-description {\r\n\r\n  transition-delay: .5s;\r\n\r\n}\r\n\r\n\r\n.dpf-v2-cta {\r\n\r\n  transition-delay: .6s;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   22 \/ TABLET\r\n   ========================================== *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  .dpf-v2 {\r\n\r\n    padding: 75px 25px 35px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-title {\r\n\r\n    font-size: clamp(\r\n      60px,\r\n      10vw,\r\n      120px\r\n    );\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-bottom-content {\r\n\r\n    gap: 30px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-cta {\r\n\r\n    width: 350px;\r\n\r\n    font-size: 20px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   23 \/ MOBILE\r\n   ========================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .dpf-v2 {\r\n\r\n    padding: 65px 18px 28px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-container {\r\n\r\n    min-height: calc(\r\n      100svh - 90px\r\n    );\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-section-label {\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-top-symbol {\r\n\r\n    font-size: 28px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-main {\r\n\r\n    padding: 85px 0 80px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-eyebrow {\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    margin-bottom: 30px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-title {\r\n\r\n    font-size: clamp(\r\n      43px,\r\n      10.8vw,\r\n      75px\r\n    );\r\n\r\n    line-height: .99;\r\n\r\n    letter-spacing: -.07em;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-signal {\r\n\r\n    margin-top: 35px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-bottom-content {\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: stretch;\r\n\r\n    gap: 40px;\r\n\r\n    margin-top: 45px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-description p {\r\n\r\n    font-size: 16px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-cta {\r\n\r\n    width: 100%;\r\n\r\n    min-height: 85px;\r\n\r\n    font-size: 19px;\r\n\r\n    padding: 20px 50px 20px 15px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-button-arrow {\r\n\r\n    right: 16px;\r\n\r\n    font-size: 26px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-marquee {\r\n\r\n    padding: 18px 0;\r\n\r\n    margin-bottom: 30px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-marquee-group {\r\n\r\n    gap: 25px;\r\n\r\n    padding-right: 25px;\r\n\r\n    font-size: 17px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-footer {\r\n\r\n    gap: 15px;\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-footer > span:last-child {\r\n\r\n    width: 100%;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-ghost {\r\n\r\n    top: 38%;\r\n\r\n    font-size: 60vw;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-grid {\r\n\r\n    background-size: 60px 60px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   24 \/ TOUCH DEVICES\r\n   ========================================== *\/\r\n\r\n@media (hover: none) {\r\n\r\n  .dpf-v2-marquee:hover\r\n  .dpf-v2-marquee-track {\r\n\r\n    animation-play-state: running;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-button-first {\r\n\r\n    opacity: 1;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* ==========================================\r\n   25 \/ REDUCED MOTION\r\n   ========================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  .dpf-v2 *,\r\n  .dpf-v2 *::before,\r\n  .dpf-v2 *::after {\r\n\r\n    animation: none !important;\r\n\r\n    transition: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-line-inner,\r\n  .dpf-v2-reveal {\r\n\r\n    opacity: 1 !important;\r\n\r\n    transform: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-ghost {\r\n\r\n    transform: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-cta:hover\r\n  .dpf-v2-button-first\r\n  .dpf-v2-letter,\r\n\r\n  .dpf-v2-cta:focus-visible\r\n  .dpf-v2-button-first\r\n  .dpf-v2-letter {\r\n\r\n    opacity: 1 !important;\r\n\r\n    transform: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-button-second {\r\n\r\n    display: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-cta::before {\r\n\r\n    display: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpf-v2-cta:hover\r\n  .dpf-v2-button-arrow,\r\n\r\n  .dpf-v2-cta:focus-visible\r\n  .dpf-v2-button-arrow {\r\n\r\n    color: var(--blue);\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* ==========================================\r\n   DISPLERO \u2014 FINAL EXPERIENCE ENGINE V2\r\n   ========================================== *\/\r\n\r\n(function () {\r\n\r\n  \"use strict\";\r\n\r\n\r\n  const sections = document.querySelectorAll(\r\n    \".dpf-v2:not([data-dpf-initialized])\"\r\n  );\r\n\r\n\r\n  sections.forEach(initFinal);\r\n\r\n\r\n\r\n  function initFinal(section) {\r\n\r\n\r\n    section.dataset.dpfInitialized = \"true\";\r\n\r\n\r\n    \/* =====================================\r\n       ELEMENTS\r\n       ===================================== *\/\r\n\r\n    const firstLabel = section.querySelector(\r\n      \".dpf-v2-button-first\"\r\n    );\r\n\r\n\r\n    const reduced = window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================\r\n       SPLIT BUTTON INTO LETTERS\r\n       ===================================== *\/\r\n\r\n    if (firstLabel && !reduced.matches) {\r\n\r\n\r\n      const text =\r\n        firstLabel.textContent.trim();\r\n\r\n\r\n      firstLabel.textContent = \"\";\r\n\r\n\r\n      [...text].forEach(\r\n        (character, index) => {\r\n\r\n\r\n          const letter = document.createElement(\r\n            \"span\"\r\n          );\r\n\r\n\r\n          letter.className =\r\n            \"dpf-v2-letter\";\r\n\r\n\r\n          letter.style.setProperty(\r\n\r\n            \"--letter-index\",\r\n\r\n            index\r\n\r\n          );\r\n\r\n\r\n          letter.textContent =\r\n\r\n            character === \" \"\r\n            ? \"\\u00A0\"\r\n            : character;\r\n\r\n\r\n          firstLabel.appendChild(letter);\r\n\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       REDUCED MOTION\r\n       ===================================== *\/\r\n\r\n    if (reduced.matches) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       REVEAL ON SCROLL\r\n       ===================================== *\/\r\n\r\n    if (\"IntersectionObserver\" in window) {\r\n\r\n\r\n      const observer = new IntersectionObserver(\r\n\r\n        entries => {\r\n\r\n\r\n          entries.forEach(entry => {\r\n\r\n\r\n            if (entry.isIntersecting) {\r\n\r\n\r\n              entry.target.classList.add(\r\n                \"is-visible\"\r\n              );\r\n\r\n\r\n              observer.unobserve(\r\n                entry.target\r\n              );\r\n\r\n\r\n            }\r\n\r\n\r\n          });\r\n\r\n\r\n        },\r\n\r\n        {\r\n\r\n          threshold: .12\r\n\r\n        }\r\n\r\n      );\r\n\r\n\r\n      section.classList.add(\r\n        \"is-enhanced\"\r\n      );\r\n\r\n\r\n      observer.observe(section);\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       SUBTLE GHOST PARALLAX\r\n       ===================================== *\/\r\n\r\n    let ticking = false;\r\n\r\n    let inView = false;\r\n\r\n\r\n\r\n    function clamp(value) {\r\n\r\n      return Math.max(\r\n        0,\r\n        Math.min(1, value)\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    function updateGhost() {\r\n\r\n\r\n      ticking = false;\r\n\r\n\r\n      if (!inView) return;\r\n\r\n\r\n      const rect =\r\n        section.getBoundingClientRect();\r\n\r\n\r\n      const viewport =\r\n        window.innerHeight;\r\n\r\n\r\n      const progress = clamp(\r\n\r\n        (viewport - rect.top) \/\r\n\r\n        Math.max(\r\n          viewport + rect.height,\r\n          1\r\n        )\r\n\r\n      );\r\n\r\n\r\n\r\n      const shift =\r\n        -80 + progress * 160;\r\n\r\n\r\n\r\n      section.style.setProperty(\r\n\r\n        \"--ghost-shift\",\r\n\r\n        shift + \"px\"\r\n\r\n      );\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    function requestGhost() {\r\n\r\n\r\n      if (ticking || !inView) return;\r\n\r\n\r\n      ticking = true;\r\n\r\n\r\n      requestAnimationFrame(\r\n        updateGhost\r\n      );\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       OBSERVE VISIBILITY\r\n       ===================================== *\/\r\n\r\n    if (\"IntersectionObserver\" in window) {\r\n\r\n\r\n      const visibilityObserver =\r\n        new IntersectionObserver(\r\n\r\n          entries => {\r\n\r\n\r\n            inView =\r\n              entries[0].isIntersecting;\r\n\r\n\r\n            if (inView) {\r\n\r\n              requestGhost();\r\n\r\n            }\r\n\r\n\r\n          },\r\n\r\n          {\r\n\r\n            threshold: 0\r\n\r\n          }\r\n\r\n        );\r\n\r\n\r\n      visibilityObserver.observe(section);\r\n\r\n\r\n    } else {\r\n\r\n      inView = true;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       SCROLL\r\n       ===================================== *\/\r\n\r\n    window.addEventListener(\r\n\r\n      \"scroll\",\r\n\r\n      requestGhost,\r\n\r\n      { passive: true }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================\r\n       RESIZE\r\n       ===================================== *\/\r\n\r\n    window.addEventListener(\r\n\r\n      \"resize\",\r\n\r\n      requestGhost,\r\n\r\n      { passive: true }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================\r\n       INITIALIZE\r\n       ===================================== *\/\r\n\r\n    requestGhost();\r\n\r\n\r\n    window.addEventListener(\r\n\r\n      \"load\",\r\n\r\n      requestGhost,\r\n\r\n      { once: true }\r\n\r\n    );\r\n\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-530cd0e e-con-full e-flex e-con e-parent\" data-id=\"530cd0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fd7940 elementor-widget elementor-widget-html\" data-id=\"5fd7940\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- =====================================================\r\n     DISPLERO \/ CONTACT EXPERIENCE\r\n     VERSION 1.0\r\n\r\n     ONE ELEMENTOR HTML WIDGET\r\n     HTML + CSS + JAVASCRIPT\r\n\r\n     CONTACT EMAIL:\r\n     office@displero.com\r\n     ===================================================== -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<section class=\"dpc-contact\" id=\"displero-contact\">\r\n\r\n  <!-- DECORATIVE BACKGROUND -->\r\n\r\n  <div class=\"dpc-background\" aria-hidden=\"true\">\r\n    <div class=\"dpc-background-grid\"><\/div>\r\n    <div class=\"dpc-background-orbit dpc-orbit-one\"><\/div>\r\n    <div class=\"dpc-background-orbit dpc-orbit-two\"><\/div>\r\n    <div class=\"dpc-background-word\">CONNECT<\/div>\r\n  <\/div>\r\n\r\n\r\n  <div class=\"dpc-container\">\r\n\r\n    <!-- ====================================\r\n         TOP BAR\r\n         ==================================== -->\r\n\r\n    <div class=\"dpc-topbar\">\r\n\r\n      <span class=\"dpc-section-number\">\r\n        <span class=\"dpc-status-dot\"><\/span>\r\n        CONTACT\r\n      <\/span>\r\n\r\n      <span class=\"dpc-topbar-right\">\r\n        \r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ====================================\r\n         HERO\r\n         ==================================== -->\r\n\r\n    <header class=\"dpc-hero\">\r\n\r\n      <div class=\"dpc-hero-kicker\">\r\n        <span class=\"dpc-kicker-line\"><\/span>\r\n        THE NEXT STEP STARTS HERE\r\n      <\/div>\r\n\r\n      <h1 class=\"dpc-hero-title\">\r\n\r\n        <span class=\"dpc-title-row\">\r\n          <span class=\"dpc-title-inner\">\r\n            LET'S MAKE\r\n          <\/span>\r\n        <\/span>\r\n\r\n        <span class=\"dpc-title-row dpc-title-blue\">\r\n          <span class=\"dpc-title-inner\">\r\n            IT HAPPEN<span class=\"dpc-title-period\">.<\/span>\r\n          <\/span>\r\n        <\/span>\r\n\r\n      <\/h1>\r\n\r\n      <div class=\"dpc-hero-bottom\">\r\n\r\n        <p>\r\n          Have a project in mind?\r\n          <br>\r\n          Great things start with a conversation.\r\n        <\/p>\r\n\r\n        <div class=\"dpc-scroll-hint\" aria-hidden=\"true\">\r\n          <span>EXPLORE BELOW<\/span>\r\n          <span class=\"dpc-scroll-arrow\">\u2193<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/header>\r\n\r\n\r\n    <!-- ====================================\r\n         INTERACTIVE PROJECT BUILDER\r\n         ==================================== -->\r\n\r\n    <div class=\"dpc-builder\">\r\n\r\n      <!-- LEFT: SERVICE SELECTION -->\r\n\r\n      <div class=\"dpc-selection\">\r\n\r\n        <div class=\"dpc-column-heading\">\r\n\r\n          <span class=\"dpc-step\">\r\n            SELECT A SERVICE\r\n          <\/span>\r\n\r\n          <span class=\"dpc-heading-line\"><\/span>\r\n\r\n        <\/div>\r\n\r\n        <h2 class=\"dpc-selection-title\">\r\n          WHAT ARE YOU\r\n          <br>\r\n          <span>LOOKING FOR?<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"dpc-selection-description\">\r\n          Select an area below and we'll prepare\r\n          your enquiry for the right type of project.\r\n        <\/p>\r\n\r\n\r\n        <!-- SERVICES -->\r\n\r\n        <div\r\n          class=\"dpc-services\"\r\n          role=\"group\"\r\n          aria-label=\"Select the service you are interested in\"\r\n        >\r\n\r\n\r\n          <!-- SERVICE 01 -->\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"dpc-service is-active\"\r\n            data-service=\"led\"\r\n            aria-pressed=\"true\"\r\n          >\r\n\r\n            <span class=\"dpc-service-number\">\r\n              01\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-copy\">\r\n\r\n              <strong>\r\n                LED Videowalls\r\n              <\/strong>\r\n\r\n              <small>\r\n                Installation & integration\r\n              <\/small>\r\n\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-arrow\" aria-hidden=\"true\">\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/button>\r\n\r\n\r\n          <!-- SERVICE 02 -->\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"dpc-service\"\r\n            data-service=\"touch\"\r\n            aria-pressed=\"false\"\r\n          >\r\n\r\n            <span class=\"dpc-service-number\">\r\n              02\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-copy\">\r\n\r\n              <strong>\r\n                Touch Solutions\r\n              <\/strong>\r\n\r\n              <small>\r\n                Interactive display technology\r\n              <\/small>\r\n\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-arrow\" aria-hidden=\"true\">\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/button>\r\n\r\n\r\n          <!-- SERVICE 03 -->\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"dpc-service\"\r\n            data-service=\"av\"\r\n            aria-pressed=\"false\"\r\n          >\r\n\r\n            <span class=\"dpc-service-number\">\r\n              03\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-copy\">\r\n\r\n              <strong>\r\n                AV Installation\r\n              <\/strong>\r\n\r\n              <small>\r\n                Professional display systems\r\n              <\/small>\r\n\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-arrow\" aria-hidden=\"true\">\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/button>\r\n\r\n\r\n          <!-- SERVICE 04 -->\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"dpc-service\"\r\n            data-service=\"support\"\r\n            aria-pressed=\"false\"\r\n          >\r\n\r\n            <span class=\"dpc-service-number\">\r\n              04\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-copy\">\r\n\r\n              <strong>\r\n                Maintenance & Support\r\n              <\/strong>\r\n\r\n              <small>\r\n                Technical assistance & service\r\n              <\/small>\r\n\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-arrow\" aria-hidden=\"true\">\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/button>\r\n\r\n\r\n          <!-- SERVICE 05 -->\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"dpc-service\"\r\n            data-service=\"other\"\r\n            aria-pressed=\"false\"\r\n          >\r\n\r\n            <span class=\"dpc-service-number\">\r\n              05\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-copy\">\r\n\r\n              <strong>\r\n                Something Else?\r\n              <\/strong>\r\n\r\n              <small>\r\n                Tell us about your idea\r\n              <\/small>\r\n\r\n            <\/span>\r\n\r\n            <span class=\"dpc-service-arrow\" aria-hidden=\"true\">\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/button>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"dpc-selection-footnote\">\r\n\r\n          <span class=\"dpc-footnote-dot\"><\/span>\r\n\r\n          Not sure which option to choose?\r\n          Select \"Something Else\" and tell us\r\n          what you have in mind.\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- ==================================\r\n           RIGHT: DYNAMIC PROJECT PANEL\r\n           ================================== -->\r\n\r\n      <div class=\"dpc-panel\">\r\n\r\n        <!-- PANEL BACKGROUND -->\r\n\r\n        <div class=\"dpc-panel-background\" aria-hidden=\"true\">\r\n\r\n          <div class=\"dpc-panel-grid\"><\/div>\r\n\r\n          <div class=\"dpc-panel-ring dpc-ring-one\"><\/div>\r\n\r\n          <div class=\"dpc-panel-ring dpc-ring-two\"><\/div>\r\n\r\n          <div class=\"dpc-panel-crosshair\"><\/div>\r\n\r\n          <div class=\"dpc-panel-sweep\"><\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- PANEL TOP -->\r\n\r\n        <div class=\"dpc-panel-top\">\r\n\r\n          <span class=\"dpc-panel-label\">\r\n            <span class=\"dpc-panel-live\"><\/span>\r\n            PROJECT ENQUIRY \/ ACTIVE\r\n          <\/span>\r\n\r\n          <span class=\"dpc-panel-code\" id=\"dpc-panel-code\">\r\n            01 \/ LED\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- DYNAMIC CONTENT -->\r\n\r\n        <div\r\n          class=\"dpc-panel-content\"\r\n          aria-live=\"polite\"\r\n          aria-atomic=\"true\"\r\n        >\r\n\r\n          <span class=\"dpc-panel-eyebrow\">\r\n            YOUR SELECTED PROJECT\r\n          <\/span>\r\n\r\n\r\n          <div class=\"dpc-panel-title-wrap\">\r\n\r\n            <h2 class=\"dpc-panel-title\" id=\"dpc-project-title\">\r\n              LED\r\n              <br>\r\n              VIDEOWALLS\r\n            <\/h2>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"dpc-panel-detail\">\r\n\r\n            <span class=\"dpc-detail-line\"><\/span>\r\n\r\n            <p id=\"dpc-project-description\">\r\n              From individual displays to large-scale\r\n              LED installations. Tell us what you're\r\n              planning and let's discuss the details.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- PANEL BOTTOM -->\r\n\r\n        <div class=\"dpc-panel-bottom\">\r\n\r\n          <div class=\"dpc-panel-instruction\">\r\n\r\n            <span class=\"dpc-instruction-index\">\r\n              NEXT STEP\r\n            <\/span>\r\n\r\n            <span>\r\n              READY TO TALK?\r\n            <\/span>\r\n\r\n          <\/div>\r\n\r\n\r\n\r\n          <!-- CONTACT BUTTON -->\r\n\r\n          <a\r\n            class=\"dpc-email-button\"\r\n            id=\"dpc-email-button\"\r\n            href=\"www.displero.com\/contact-2\"\r\n            aria-label=\"Start an email enquiry about LED Videowalls\"\r\n          >\r\n\r\n            <span class=\"dpc-button-fill\" aria-hidden=\"true\"><\/span>\r\n\r\n            <span class=\"dpc-button-text\">\r\n              START YOUR ENQUIRY\r\n            <\/span>\r\n\r\n            <span class=\"dpc-button-arrow\" aria-hidden=\"true\">\r\n              \u2197\r\n            <\/span>\r\n\r\n          <\/a>\r\n\r\n\r\n          <span class=\"dpc-panel-note\">\r\n            Opens your email app with a prepared message.\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ====================================\r\n         CONTACT STRIP\r\n         ==================================== -->\r\n\r\n    <div class=\"dpc-contact-strip\">\r\n\r\n      <div class=\"dpc-strip-left\">\r\n\r\n        <span class=\"dpc-strip-index\">\r\n          DIRECT CONTACT\r\n        <\/span>\r\n\r\n        <h2>\r\n          PREFER TO\r\n          <br>\r\n          <span>WRITE DIRECTLY?<\/span>\r\n        <\/h2>\r\n\r\n      <\/div>\r\n\r\n\r\n      <a\r\n        class=\"dpc-direct-email\"\r\n        href=\"mailto:office@displero.com\"\r\n        aria-label=\"Send an email to DISPLERO\"\r\n      >\r\n\r\n        <span>\r\n          office@displero.com\r\n        <\/span>\r\n\r\n        <span class=\"dpc-direct-arrow\" aria-hidden=\"true\">\r\n          \r\n        <\/span>\r\n\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ====================================\r\n         BOTTOM\r\n         ==================================== -->\r\n\r\n    <div class=\"dpc-bottom\">\r\n\r\n      <span>\r\n        LET'S BRING YOUR VISION TO LIFE.\r\n      <\/span>\r\n\r\n      <span>\r\n        \r\n      <\/span>\r\n\r\n      <span>\r\n        END OF TRANSMISSION \/ START OF SOMETHING NEW\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   DISPLERO CONTACT \/ VARIABLES\r\n   ===================================================== *\/\r\n\r\n.dpc-contact {\r\n\r\n  --dpc-blue: #5471a4;\r\n  --dpc-grey: #54595F;\r\n  --dpc-dark: #090d1f;\r\n  --dpc-light: #F5F6F8;\r\n  --dpc-border: #d7dfe9;\r\n\r\n  position: relative;\r\n\r\n  isolation: isolate;\r\n\r\n  width: 100%;\r\n\r\n  margin: 0;\r\n\r\n  padding: 85px 28px 35px;\r\n\r\n  background: var(--dpc-light);\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-family: \"Manrope\", sans-serif;\r\n\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n\r\n.dpc-contact *,\r\n.dpc-contact *::before,\r\n.dpc-contact *::after {\r\n\r\n  box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n.dpc-contact button,\r\n.dpc-contact a {\r\n\r\n  font-family: inherit;\r\n\r\n}\r\n\r\n\r\n.dpc-container {\r\n\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  width: 100%;\r\n\r\n  max-width: 1450px;\r\n\r\n  margin: 0 auto;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   BACKGROUND DECORATION\r\n   ===================================================== *\/\r\n\r\n.dpc-background {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 0;\r\n\r\n  inset: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.dpc-background-grid {\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n\r\n  right: -15%;\r\n\r\n  width: 75%;\r\n\r\n  height: 850px;\r\n\r\n  opacity: .35;\r\n\r\n  background-image:\r\n\r\n    linear-gradient(\r\n      rgba(84,113,164,.12) 1px,\r\n      transparent 1px\r\n    ),\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(84,113,164,.12) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size: 65px 65px;\r\n\r\n  transform: rotate(-13deg);\r\n\r\n  mask-image:\r\n    linear-gradient(to bottom, black, transparent);\r\n\r\n}\r\n\r\n\r\n.dpc-background-orbit {\r\n\r\n  position: absolute;\r\n\r\n  border-radius: 50%;\r\n\r\n  border: 1px solid rgba(84,113,164,.12);\r\n\r\n}\r\n\r\n\r\n.dpc-orbit-one {\r\n\r\n  width: 540px;\r\n\r\n  height: 540px;\r\n\r\n  top: 85px;\r\n\r\n  right: -220px;\r\n\r\n}\r\n\r\n\r\n.dpc-orbit-two {\r\n\r\n  width: 370px;\r\n\r\n  height: 370px;\r\n\r\n  top: 170px;\r\n\r\n  right: -135px;\r\n\r\n}\r\n\r\n\r\n.dpc-background-word {\r\n\r\n  position: absolute;\r\n\r\n  top: 470px;\r\n\r\n  right: -80px;\r\n\r\n  color: transparent;\r\n\r\n  -webkit-text-stroke:\r\n    1px rgba(84,113,164,.075);\r\n\r\n  font-size: clamp(130px, 21vw, 340px);\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.09em;\r\n\r\n  white-space: nowrap;\r\n\r\n  transform: rotate(-90deg);\r\n\r\n  transform-origin: center;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   TOP BAR\r\n   ===================================================== *\/\r\n\r\n.dpc-topbar {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 20px;\r\n\r\n  margin-bottom: 105px;\r\n\r\n}\r\n\r\n\r\n.dpc-section-number {\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 13px;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpc-status-dot {\r\n\r\n  width: 8px;\r\n\r\n  height: 8px;\r\n\r\n  flex: 0 0 8px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--dpc-blue);\r\n\r\n  box-shadow: 0 0 0 0 rgba(84,113,164,.3);\r\n\r\n  animation: dpc-dot-pulse 3s ease-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpc-dot-pulse {\r\n\r\n  0% {\r\n    box-shadow: 0 0 0 0 rgba(84,113,164,.3);\r\n  }\r\n\r\n  70% {\r\n    box-shadow: 0 0 0 12px rgba(84,113,164,0);\r\n  }\r\n\r\n  100% {\r\n    box-shadow: 0 0 0 0 rgba(84,113,164,0);\r\n  }\r\n\r\n}\r\n\r\n\r\n.dpc-topbar-right {\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   HERO\r\n   ===================================================== *\/\r\n\r\n.dpc-hero {\r\n\r\n  position: relative;\r\n\r\n  margin-bottom: 145px;\r\n\r\n}\r\n\r\n\r\n.dpc-hero-kicker {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 16px;\r\n\r\n  margin-bottom: 36px;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 4px;\r\n\r\n}\r\n\r\n\r\n.dpc-kicker-line {\r\n\r\n  width: 48px;\r\n\r\n  height: 1px;\r\n\r\n  background: var(--dpc-blue);\r\n\r\n}\r\n\r\n\r\n.dpc-hero-title {\r\n\r\n  margin: 0;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: clamp(55px, 9.6vw, 145px);\r\n\r\n  line-height: .98;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.079em;\r\n\r\n}\r\n\r\n\r\n.dpc-title-row {\r\n\r\n  display: block;\r\n\r\n  width: fit-content;\r\n\r\n  max-width: 100%;\r\n\r\n  overflow: hidden;\r\n\r\n  padding: .09em .07em .09em 0;\r\n\r\n  margin: -.09em 0;\r\n\r\n}\r\n\r\n\r\n.dpc-title-inner {\r\n\r\n  display: block;\r\n\r\n}\r\n\r\n\r\n.dpc-title-blue {\r\n\r\n  color: var(--dpc-blue);\r\n\r\n}\r\n\r\n\r\n.dpc-title-period {\r\n\r\n  color: var(--dpc-dark);\r\n\r\n}\r\n\r\n\r\n\r\n\/* HERO BOTTOM *\/\r\n\r\n.dpc-hero-bottom {\r\n\r\n  display: flex;\r\n\r\n  align-items: flex-end;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 35px;\r\n\r\n  margin-top: 65px;\r\n\r\n  padding-top: 28px;\r\n\r\n  border-top: 1px solid var(--dpc-border);\r\n\r\n}\r\n\r\n\r\n.dpc-hero-bottom p {\r\n\r\n  margin: 0;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: clamp(16px, 1.45vw, 21px);\r\n\r\n  font-weight: 500;\r\n\r\n  line-height: 1.65;\r\n\r\n}\r\n\r\n\r\n.dpc-scroll-hint {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 18px;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n  white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n.dpc-scroll-arrow {\r\n\r\n  font-size: 30px;\r\n\r\n  line-height: 1;\r\n\r\n  animation: dpc-scroll-bounce 2s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpc-scroll-bounce {\r\n\r\n  0%, 100% {\r\n    transform: translateY(-4px);\r\n  }\r\n\r\n  50% {\r\n    transform: translateY(5px);\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   PROJECT BUILDER\r\n   ===================================================== *\/\r\n\r\n.dpc-builder {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    minmax(0, 1fr);\r\n\r\n  align-items: stretch;\r\n\r\n  gap: clamp(45px, 6vw, 100px);\r\n\r\n  margin-bottom: 135px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   LEFT COLUMN\r\n   ===================================================== *\/\r\n\r\n.dpc-selection {\r\n\r\n  min-width: 0;\r\n\r\n  padding: 45px 0 35px;\r\n\r\n}\r\n\r\n\r\n.dpc-column-heading {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 22px;\r\n\r\n  margin-bottom: 55px;\r\n\r\n}\r\n\r\n\r\n.dpc-step {\r\n\r\n  flex-shrink: 0;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpc-heading-line {\r\n\r\n  flex: 1;\r\n\r\n  height: 1px;\r\n\r\n  background: var(--dpc-border);\r\n\r\n}\r\n\r\n\r\n.dpc-selection-title {\r\n\r\n  margin: 0 0 28px;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: clamp(35px, 3.8vw, 60px);\r\n\r\n  line-height: 1.04;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.065em;\r\n\r\n}\r\n\r\n\r\n.dpc-selection-title span {\r\n\r\n  color: var(--dpc-blue);\r\n\r\n}\r\n\r\n\r\n.dpc-selection-description {\r\n\r\n  max-width: 480px;\r\n\r\n  margin: 0 0 48px;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: 15px;\r\n\r\n  line-height: 1.85;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   SERVICE OPTIONS\r\n   ===================================================== *\/\r\n\r\n.dpc-services {\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  border-top: 1px solid var(--dpc-border);\r\n\r\n}\r\n\r\n\r\n.dpc-service {\r\n\r\n  position: relative;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  width: 100%;\r\n\r\n  min-height: 112px;\r\n\r\n  gap: 22px;\r\n\r\n  padding: 22px 22px 22px 8px;\r\n\r\n  border: 0;\r\n\r\n  border-bottom: 1px solid var(--dpc-border);\r\n\r\n  border-radius: 0;\r\n\r\n  background: transparent;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  text-align: left;\r\n\r\n  cursor: pointer;\r\n\r\n  overflow: hidden;\r\n\r\n  transition:\r\n    padding .35s ease,\r\n    color .35s ease,\r\n    border-color .35s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-service::before {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  background: var(--dpc-blue);\r\n\r\n  transform: scaleY(0);\r\n\r\n  transform-origin: bottom;\r\n\r\n  transition:\r\n    transform .45s cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.dpc-service > * {\r\n\r\n  position: relative;\r\n\r\n  z-index: 1;\r\n\r\n}\r\n\r\n\r\n.dpc-service:hover::before,\r\n.dpc-service.is-active::before {\r\n\r\n  transform: scaleY(1);\r\n\r\n}\r\n\r\n\r\n.dpc-service:hover,\r\n.dpc-service.is-active {\r\n\r\n  padding-left: 22px;\r\n\r\n  border-color: var(--dpc-blue);\r\n\r\n  color: #ffffff;\r\n\r\n}\r\n\r\n\r\n.dpc-service:focus-visible {\r\n\r\n  outline: 3px solid var(--dpc-dark);\r\n\r\n  outline-offset: -3px;\r\n\r\n}\r\n\r\n\r\n.dpc-service-number {\r\n\r\n  align-self: center;\r\n\r\n  flex: 0 0 34px;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n  transition: color .3s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-service-copy {\r\n\r\n  display: flex;\r\n\r\n  flex: 1;\r\n\r\n  flex-direction: column;\r\n\r\n  gap: 8px;\r\n\r\n  min-width: 0;\r\n\r\n}\r\n\r\n\r\n.dpc-service-copy strong {\r\n\r\n  color: inherit;\r\n\r\n  font-size: clamp(17px, 1.6vw, 23px);\r\n\r\n  line-height: 1.25;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.04em;\r\n\r\n}\r\n\r\n\r\n.dpc-service-copy small {\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 500;\r\n\r\n  line-height: 1.5;\r\n\r\n  transition: color .3s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-service-arrow {\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 27px;\r\n\r\n  line-height: 1;\r\n\r\n  transition:\r\n    color .3s ease,\r\n    transform .3s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-service:hover .dpc-service-number,\r\n.dpc-service.is-active .dpc-service-number,\r\n.dpc-service:hover .dpc-service-arrow,\r\n.dpc-service.is-active .dpc-service-arrow {\r\n\r\n  color: #ffffff;\r\n\r\n}\r\n\r\n\r\n.dpc-service:hover .dpc-service-copy small,\r\n.dpc-service.is-active .dpc-service-copy small {\r\n\r\n  color: #e1eaf7;\r\n\r\n}\r\n\r\n\r\n.dpc-service:hover .dpc-service-arrow,\r\n.dpc-service.is-active .dpc-service-arrow {\r\n\r\n  transform: translate(4px,-4px);\r\n\r\n}\r\n\r\n\r\n\r\n\/* LEFT FOOTNOTE *\/\r\n\r\n.dpc-selection-footnote {\r\n\r\n  display: flex;\r\n\r\n  align-items: flex-start;\r\n\r\n  gap: 12px;\r\n\r\n  max-width: 440px;\r\n\r\n  margin-top: 35px;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: 11px;\r\n\r\n  line-height: 1.85;\r\n\r\n}\r\n\r\n\r\n.dpc-footnote-dot {\r\n\r\n  width: 6px;\r\n\r\n  height: 6px;\r\n\r\n  margin-top: 8px;\r\n\r\n  flex: 0 0 6px;\r\n\r\n  background: var(--dpc-blue);\r\n\r\n  border-radius: 50%;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   RIGHT PANEL\r\n   ===================================================== *\/\r\n\r\n.dpc-panel {\r\n\r\n  position: relative;\r\n\r\n  isolation: isolate;\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  justify-content: space-between;\r\n\r\n  min-width: 0;\r\n\r\n  min-height: 795px;\r\n\r\n  padding: clamp(25px, 3vw, 48px);\r\n\r\n  background: var(--dpc-dark);\r\n\r\n  color: #ffffff;\r\n\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   PANEL BACKGROUND\r\n   ===================================================== *\/\r\n\r\n.dpc-panel-background {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  pointer-events: none;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 75% 35%,\r\n      #152743 0%,\r\n      #090d1f 70%\r\n    );\r\n\r\n}\r\n\r\n\r\n.dpc-panel-grid {\r\n\r\n  position: absolute;\r\n\r\n  inset: -25%;\r\n\r\n  opacity: .4;\r\n\r\n  background-image:\r\n\r\n    linear-gradient(\r\n      rgba(112,149,203,.17) 1px,\r\n      transparent 1px\r\n    ),\r\n\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(112,149,203,.17) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size: 56px 56px;\r\n\r\n  transform: rotate(-17deg);\r\n\r\n  animation:\r\n    dpc-grid-drift 20s linear infinite alternate;\r\n\r\n}\r\n\r\n\r\n@keyframes dpc-grid-drift {\r\n\r\n  from {\r\n    transform: rotate(-17deg) translate(0,0);\r\n  }\r\n\r\n  to {\r\n    transform: rotate(-17deg) translate(-42px,42px);\r\n  }\r\n\r\n}\r\n\r\n\r\n.dpc-panel-ring {\r\n\r\n  position: absolute;\r\n\r\n  top: 40%;\r\n\r\n  left: 55%;\r\n\r\n  aspect-ratio: 1;\r\n\r\n  border: 1px solid rgba(136,172,224,.2);\r\n\r\n  border-radius: 50%;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n}\r\n\r\n\r\n.dpc-ring-one {\r\n\r\n  width: 420px;\r\n\r\n}\r\n\r\n\r\n.dpc-ring-two {\r\n\r\n  width: 275px;\r\n\r\n  border-style: dashed;\r\n\r\n  animation:\r\n    dpc-ring-spin 34s linear infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpc-ring-spin {\r\n\r\n  from {\r\n    transform: translate(-50%,-50%) rotate(0deg);\r\n  }\r\n\r\n  to {\r\n    transform: translate(-50%,-50%) rotate(360deg);\r\n  }\r\n\r\n}\r\n\r\n\r\n.dpc-panel-crosshair {\r\n\r\n  position: absolute;\r\n\r\n  top: 40%;\r\n\r\n  left: 55%;\r\n\r\n  width: 25px;\r\n\r\n  height: 25px;\r\n\r\n  transform: translate(-50%,-50%);\r\n\r\n  border: 1px solid rgba(136,172,224,.6);\r\n\r\n  border-radius: 50%;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-crosshair::before,\r\n.dpc-panel-crosshair::after {\r\n\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  background: rgba(136,172,224,.6);\r\n\r\n}\r\n\r\n\r\n.dpc-panel-crosshair::before {\r\n\r\n  width: 55px;\r\n\r\n  height: 1px;\r\n\r\n  top: 11px;\r\n\r\n  left: -16px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-crosshair::after {\r\n\r\n  width: 1px;\r\n\r\n  height: 55px;\r\n\r\n  top: -16px;\r\n\r\n  left: 11px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* AUTOMATIC SIGNAL SWEEP *\/\r\n\r\n.dpc-panel-sweep {\r\n\r\n  position: absolute;\r\n\r\n  top: -20%;\r\n\r\n  bottom: -20%;\r\n\r\n  left: -55%;\r\n\r\n  width: 45%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(135,171,223,.045),\r\n      rgba(135,171,223,.09),\r\n      rgba(135,171,223,.045),\r\n      transparent\r\n    );\r\n\r\n  transform: skewX(-18deg);\r\n\r\n  animation:\r\n    dpc-panel-scan 9s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes dpc-panel-scan {\r\n\r\n  0%, 15% {\r\n    transform: translateX(0) skewX(-18deg);\r\n    opacity: 0;\r\n  }\r\n\r\n  25% {\r\n    opacity: 1;\r\n  }\r\n\r\n  70% {\r\n    opacity: 1;\r\n  }\r\n\r\n  85%, 100% {\r\n    transform: translateX(420%) skewX(-18deg);\r\n    opacity: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* KEEP CONTENT ABOVE BACKGROUND *\/\r\n\r\n.dpc-panel-top,\r\n.dpc-panel-content,\r\n.dpc-panel-bottom {\r\n\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   PANEL TOP\r\n   ===================================================== *\/\r\n\r\n.dpc-panel-top {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 15px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-label {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 11px;\r\n\r\n  color: #c3d2e8;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-live {\r\n\r\n  width: 7px;\r\n\r\n  height: 7px;\r\n\r\n  flex: 0 0 7px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #9fc0ee;\r\n\r\n  box-shadow: 0 0 13px rgba(159,192,238,.6);\r\n\r\n}\r\n\r\n\r\n.dpc-panel-code {\r\n\r\n  color: #9cb7dd;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   PANEL DYNAMIC CONTENT\r\n   ===================================================== *\/\r\n\r\n.dpc-panel-content {\r\n\r\n  padding: 95px 0 75px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-eyebrow {\r\n\r\n  display: block;\r\n\r\n  margin-bottom: 25px;\r\n\r\n  color: #aabfdd;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-title-wrap {\r\n\r\n  min-height: 190px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-title {\r\n\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(42px, 4.3vw, 68px);\r\n\r\n  line-height: 1.04;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.075em;\r\n\r\n  overflow-wrap: anywhere;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-detail {\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  gap: 28px;\r\n\r\n  margin-top: 38px;\r\n\r\n}\r\n\r\n\r\n.dpc-detail-line {\r\n\r\n  width: 62px;\r\n\r\n  height: 2px;\r\n\r\n  background: #89aadb;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-detail p {\r\n\r\n  max-width: 430px;\r\n\r\n  min-height: 108px;\r\n\r\n  margin: 0;\r\n\r\n  color: #c3cad7;\r\n\r\n  font-size: 14px;\r\n\r\n  line-height: 1.9;\r\n\r\n}\r\n\r\n\r\n\r\n\/* PANEL CONTENT CHANGE *\/\r\n\r\n.dpc-panel-content.is-changing .dpc-panel-title,\r\n.dpc-panel-content.is-changing .dpc-panel-detail {\r\n\r\n  animation:\r\n    dpc-content-change .45s\r\n    cubic-bezier(.2,.8,.2,1) both;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-content.is-changing .dpc-panel-detail {\r\n\r\n  animation-delay: .07s;\r\n\r\n}\r\n\r\n\r\n@keyframes dpc-content-change {\r\n\r\n  from {\r\n    opacity: .2;\r\n    transform: translateY(18px);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   PANEL BOTTOM\r\n   ===================================================== *\/\r\n\r\n.dpc-panel-bottom {\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  gap: 23px;\r\n\r\n}\r\n\r\n\r\n.dpc-panel-instruction {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 15px;\r\n\r\n  padding-top: 25px;\r\n\r\n  border-top: 1px solid rgba(181,203,233,.22);\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n\r\n}\r\n\r\n\r\n.dpc-instruction-index {\r\n\r\n  color: #aabfdd;\r\n\r\n  font-size: 9px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   EMAIL BUTTON\r\n   ===================================================== *\/\r\n\r\n.dpc-email-button {\r\n\r\n  position: relative;\r\n\r\n  isolation: isolate;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 18px;\r\n\r\n  min-height: 94px;\r\n\r\n  width: 100%;\r\n\r\n  padding: 20px 30px;\r\n\r\n  border: 1px solid #ffffff;\r\n\r\n  border-radius: 0;\r\n\r\n  background: #ffffff;\r\n\r\n  color: var(--dpc-dark) !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  cursor: pointer;\r\n\r\n  overflow: hidden;\r\n\r\n  transition:\r\n    border-color .35s ease,\r\n    transform .35s ease,\r\n    box-shadow .35s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-email-button:hover {\r\n\r\n  transform: translateY(-5px);\r\n\r\n  border-color: #8aaddf;\r\n\r\n  box-shadow: 0 20px 50px rgba(0,0,0,.25);\r\n\r\n}\r\n\r\n\r\n.dpc-email-button:focus-visible {\r\n\r\n  outline: 3px solid #a9c6ef;\r\n\r\n  outline-offset: 5px;\r\n\r\n}\r\n\r\n\r\n.dpc-button-fill {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  background: var(--dpc-blue);\r\n\r\n  transform: translateX(-101%);\r\n\r\n  transition:\r\n    transform .55s cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.dpc-email-button:hover .dpc-button-fill,\r\n.dpc-email-button:focus-visible .dpc-button-fill {\r\n\r\n  transform: translateX(0);\r\n\r\n}\r\n\r\n\r\n.dpc-button-text {\r\n\r\n  position: relative;\r\n\r\n  z-index: 1;\r\n\r\n  color: var(--dpc-dark);\r\n\r\n  font-size: clamp(14px, 1.45vw, 19px);\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.025em;\r\n\r\n  transition: color .35s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-button-arrow {\r\n\r\n  position: relative;\r\n\r\n  z-index: 1;\r\n\r\n  flex-shrink: 0;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 32px;\r\n\r\n  line-height: 1;\r\n\r\n  transition:\r\n    color .35s ease,\r\n    transform .35s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-email-button:hover .dpc-button-text,\r\n.dpc-email-button:hover .dpc-button-arrow,\r\n.dpc-email-button:focus-visible .dpc-button-text,\r\n.dpc-email-button:focus-visible .dpc-button-arrow {\r\n\r\n  color: #ffffff;\r\n\r\n}\r\n\r\n\r\n.dpc-email-button:hover .dpc-button-arrow,\r\n.dpc-email-button:focus-visible .dpc-button-arrow {\r\n\r\n  transform: translate(4px,-4px);\r\n\r\n}\r\n\r\n\r\n.dpc-panel-note {\r\n\r\n  color: #8fabcF;\r\n\r\n  font-size: 10px;\r\n\r\n  line-height: 1.65;\r\n\r\n  text-align: center;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   DIRECT CONTACT STRIP\r\n   ===================================================== *\/\r\n\r\n.dpc-contact-strip {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0,1fr)\r\n    minmax(0,1.05fr);\r\n\r\n  align-items: end;\r\n\r\n  gap: 55px;\r\n\r\n  padding: 60px 0 100px;\r\n\r\n  border-top: 1px solid var(--dpc-border);\r\n\r\n}\r\n\r\n\r\n.dpc-strip-index {\r\n\r\n  display: block;\r\n\r\n  margin-bottom: 32px;\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 3px;\r\n\r\n}\r\n\r\n\r\n.dpc-strip-left h2 {\r\n\r\n  margin: 0;\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: clamp(34px, 4vw, 62px);\r\n\r\n  line-height: 1.05;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.065em;\r\n\r\n}\r\n\r\n\r\n.dpc-strip-left h2 span {\r\n\r\n  color: var(--dpc-blue);\r\n\r\n}\r\n\r\n\r\n.dpc-direct-email {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 20px;\r\n\r\n  min-width: 0;\r\n\r\n  padding: 25px 0;\r\n\r\n  border-bottom: 2px solid var(--dpc-blue);\r\n\r\n  color: var(--dpc-blue) !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  font-size: clamp(18px, 2.2vw, 33px);\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.045em;\r\n\r\n  transition:\r\n    color .3s ease,\r\n    padding .3s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-direct-email:hover {\r\n\r\n  color: var(--dpc-dark) !important;\r\n\r\n  padding-left: 9px;\r\n\r\n}\r\n\r\n\r\n.dpc-direct-email > span:first-child {\r\n\r\n  min-width: 0;\r\n\r\n  overflow-wrap: anywhere;\r\n\r\n}\r\n\r\n\r\n.dpc-direct-arrow {\r\n\r\n  flex-shrink: 0;\r\n\r\n  font-size: 35px;\r\n\r\n  line-height: 1;\r\n\r\n  transition: transform .3s ease;\r\n\r\n}\r\n\r\n\r\n.dpc-direct-email:hover .dpc-direct-arrow {\r\n\r\n  transform: translate(4px,-4px);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   BOTTOM BAR\r\n   ===================================================== *\/\r\n\r\n.dpc-bottom {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 20px;\r\n\r\n  padding-top: 28px;\r\n\r\n  border-top: 1px solid var(--dpc-border);\r\n\r\n  color: var(--dpc-grey);\r\n\r\n  font-size: 9px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 1.5px;\r\n\r\n}\r\n\r\n\r\n.dpc-bottom > span:first-child {\r\n\r\n  color: var(--dpc-blue);\r\n\r\n  font-size: 15px;\r\n\r\n  letter-spacing: .5px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   HERO ANIMATION\r\n   ===================================================== *\/\r\n\r\n\/*\r\n   Content remains visible by default.\r\n\r\n   JavaScript enables animations only when\r\n   IntersectionObserver is supported.\r\n*\/\r\n\r\n.dpc-contact.dpc-enhanced .dpc-title-inner {\r\n\r\n  opacity: 0;\r\n\r\n  transform: translateY(110%);\r\n\r\n  transition:\r\n    opacity .65s ease,\r\n    transform 1.05s cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.dpc-contact.dpc-enhanced .dpc-title-row:nth-child(2) .dpc-title-inner {\r\n\r\n  transition-delay: .13s;\r\n\r\n}\r\n\r\n\r\n.dpc-contact.dpc-enhanced.dpc-visible .dpc-title-inner {\r\n\r\n  opacity: 1;\r\n\r\n  transform: translateY(0);\r\n\r\n}\r\n\r\n\r\n.dpc-contact.dpc-enhanced .dpc-hero-kicker,\r\n.dpc-contact.dpc-enhanced .dpc-hero-bottom {\r\n\r\n  opacity: 0;\r\n\r\n  transform: translateY(20px);\r\n\r\n  transition:\r\n    opacity .8s ease,\r\n    transform .8s cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.dpc-contact.dpc-enhanced.dpc-visible .dpc-hero-kicker,\r\n.dpc-contact.dpc-enhanced.dpc-visible .dpc-hero-bottom {\r\n\r\n  opacity: 1;\r\n\r\n  transform: translateY(0);\r\n\r\n}\r\n\r\n\r\n.dpc-contact.dpc-enhanced.dpc-visible .dpc-hero-bottom {\r\n\r\n  transition-delay: .35s;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n   ===================================================== *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n  .dpc-contact {\r\n\r\n    padding: 75px 24px 35px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-builder {\r\n\r\n    gap: 38px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel {\r\n\r\n    padding: 30px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-title {\r\n\r\n    font-size: clamp(38px, 4.5vw, 60px);\r\n\r\n  }\r\n\r\n\r\n  .dpc-service {\r\n\r\n    gap: 13px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n   ===================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .dpc-contact {\r\n\r\n    padding: 58px 18px 30px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-topbar {\r\n\r\n    align-items: flex-start;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 12px;\r\n\r\n    margin-bottom: 85px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-section-number {\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-topbar-right {\r\n\r\n    font-size: 8px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-hero {\r\n\r\n    margin-bottom: 95px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-hero-kicker {\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 2px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-kicker-line {\r\n\r\n    width: 25px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-hero-title {\r\n\r\n    font-size: clamp(37px, 10.8vw, 75px);\r\n\r\n    letter-spacing: -.078em;\r\n\r\n  }\r\n\r\n\r\n  .dpc-hero-bottom {\r\n\r\n    align-items: flex-start;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 28px;\r\n\r\n    margin-top: 45px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-hero-bottom p {\r\n\r\n    font-size: 16px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-scroll-hint {\r\n\r\n    font-size: 9px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* BUILDER *\/\r\n\r\n  .dpc-builder {\r\n\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 55px;\r\n\r\n    margin-bottom: 90px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-selection {\r\n\r\n    padding: 0;\r\n\r\n  }\r\n\r\n\r\n  .dpc-column-heading {\r\n\r\n    margin-bottom: 36px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-selection-title {\r\n\r\n    font-size: clamp(35px, 9vw, 55px);\r\n\r\n  }\r\n\r\n\r\n  .dpc-selection-description {\r\n\r\n    font-size: 14px;\r\n\r\n    margin-bottom: 32px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-service {\r\n\r\n    min-height: 96px;\r\n\r\n    padding: 18px 12px 18px 5px;\r\n\r\n    gap: 10px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-service:hover,\r\n  .dpc-service.is-active {\r\n\r\n    padding-left: 12px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-service-number {\r\n\r\n    flex-basis: 25px;\r\n\r\n    font-size: 9px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-service-copy strong {\r\n\r\n    font-size: 17px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-service-copy small {\r\n\r\n    font-size: 10px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-service-arrow {\r\n\r\n    font-size: 22px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* PANEL *\/\r\n\r\n  .dpc-panel {\r\n\r\n    min-height: 690px;\r\n\r\n    padding: 25px 22px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-label,\r\n  .dpc-panel-code {\r\n\r\n    font-size: 8px;\r\n\r\n    letter-spacing: 1px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-content {\r\n\r\n    padding: 85px 0 65px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-title-wrap {\r\n\r\n    min-height: 155px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-title {\r\n\r\n    font-size: clamp(37px, 9vw, 58px);\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-detail p {\r\n\r\n    min-height: 120px;\r\n\r\n    font-size: 13px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-email-button {\r\n\r\n    min-height: 82px;\r\n\r\n    padding: 18px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-button-text {\r\n\r\n    font-size: 14px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-button-arrow {\r\n\r\n    font-size: 27px;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* DIRECT EMAIL *\/\r\n\r\n  .dpc-contact-strip {\r\n\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 30px;\r\n\r\n    padding: 55px 0 75px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-strip-left h2 {\r\n\r\n    font-size: clamp(33px, 8.5vw, 55px);\r\n\r\n  }\r\n\r\n\r\n  .dpc-direct-email {\r\n\r\n    font-size: clamp(19px, 5vw, 27px);\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* FOOTER *\/\r\n\r\n  .dpc-bottom {\r\n\r\n    align-items: flex-start;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 15px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-background-grid {\r\n\r\n    width: 140%;\r\n\r\n    right: -65%;\r\n\r\n  }\r\n\r\n\r\n  .dpc-background-word {\r\n\r\n    display: none;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   SMALL PHONES\r\n   ===================================================== *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n  .dpc-contact {\r\n\r\n    padding-left: 14px;\r\n\r\n    padding-right: 14px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-hero-title {\r\n\r\n    font-size: 10.5vw;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel {\r\n\r\n    padding: 22px 17px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-title {\r\n\r\n    font-size: 36px;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-instruction {\r\n\r\n    font-size: 9px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =====================================================\r\n   REDUCED MOTION\r\n   ===================================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  .dpc-contact *,\r\n  .dpc-contact *::before,\r\n  .dpc-contact *::after {\r\n\r\n    animation: none !important;\r\n\r\n    transition: none !important;\r\n\r\n    scroll-behavior: auto !important;\r\n\r\n  }\r\n\r\n\r\n  .dpc-contact.dpc-enhanced .dpc-title-inner,\r\n  .dpc-contact.dpc-enhanced .dpc-hero-kicker,\r\n  .dpc-contact.dpc-enhanced .dpc-hero-bottom {\r\n\r\n    opacity: 1 !important;\r\n\r\n    transform: none !important;\r\n\r\n  }\r\n\r\n\r\n  .dpc-panel-content.is-changing .dpc-panel-title,\r\n  .dpc-panel-content.is-changing .dpc-panel-detail {\r\n\r\n    animation: none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =====================================================\r\n   DISPLERO \/ CONTACT INTERACTION ENGINE\r\n   ===================================================== *\/\r\n\r\n(function () {\r\n\r\n  \"use strict\";\r\n\r\n\r\n  function initializeContact(section) {\r\n\r\n\r\n    if (section.dataset.dpcInitialized === \"true\") {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    section.dataset.dpcInitialized = \"true\";\r\n\r\n\r\n\r\n    \/* =====================================\r\n       CONFIGURATION\r\n\r\n       CHANGE THIS ADDRESS IF NECESSARY.\r\n       ===================================== *\/\r\n\r\n    const CONTACT_EMAIL = \"office@displero.com\";\r\n\r\n\r\n\r\n    \/* =====================================\r\n       SERVICE CONTENT\r\n       ===================================== *\/\r\n\r\n    const services = {\r\n\r\n      led: {\r\n\r\n        number: \"001\",\r\n\r\n        code: \"LED\",\r\n\r\n        title: \"LED<br>VIDEOWALLS\",\r\n\r\n        name: \"LED Videowalls\",\r\n\r\n        description:\r\n          \"From individual displays to large-scale LED installations. Tell us what you're planning and let's discuss the details.\"\r\n\r\n      },\r\n\r\n\r\n      touch: {\r\n\r\n        number: \"002\",\r\n\r\n        code: \"TOUCH\",\r\n\r\n        title: \"TOUCH<br>SOLUTIONS\",\r\n\r\n        name: \"Touch Solutions\",\r\n\r\n        description:\r\n          \"Interactive displays and touch overlays designed around your application. Share your requirements and let's explore the possibilities.\"\r\n\r\n      },\r\n\r\n\r\n      av: {\r\n\r\n        number: \"003\",\r\n\r\n        code: \"AV\",\r\n\r\n        title: \"AV<br>INSTALLATION\",\r\n\r\n        name: \"AV Installation\",\r\n\r\n        description:\r\n          \"Professional display and AV installation for commercial environments. Tell us about your equipment, location and installation requirements.\"\r\n\r\n      },\r\n\r\n\r\n      support: {\r\n\r\n        number: \"004\",\r\n\r\n        code: \"SERVICE\",\r\n\r\n        title: \"MAINTENANCE<br>& SUPPORT\",\r\n\r\n        name: \"Maintenance & Support\",\r\n\r\n        description:\r\n          \"Need assistance with an existing installation? Describe the equipment and the issue, and let's discuss the next steps.\"\r\n\r\n      },\r\n\r\n\r\n      other: {\r\n\r\n        number: \"005\",\r\n\r\n        code: \"CUSTOM\",\r\n\r\n        title: \"YOUR<br>IDEA.\",\r\n\r\n        name: \"General Project Enquiry\",\r\n\r\n        description:\r\n          \"Something different in mind? We're interested in hearing about your idea. Tell us what you're looking to create.\"\r\n\r\n      }\r\n\r\n    };\r\n\r\n\r\n\r\n    \/* =====================================\r\n       ELEMENTS\r\n       ===================================== *\/\r\n\r\n    const buttons = Array.from(\r\n\r\n      section.querySelectorAll(\".dpc-service\")\r\n\r\n    );\r\n\r\n\r\n    const panelCode = section.querySelector(\r\n      \"#dpc-panel-code\"\r\n    );\r\n\r\n\r\n    const projectTitle = section.querySelector(\r\n      \"#dpc-project-title\"\r\n    );\r\n\r\n\r\n    const projectDescription = section.querySelector(\r\n      \"#dpc-project-description\"\r\n    );\r\n\r\n\r\n    const panelContent = section.querySelector(\r\n      \".dpc-panel-content\"\r\n    );\r\n\r\n\r\n    const emailButton = section.querySelector(\r\n      \"#dpc-email-button\"\r\n    );\r\n\r\n\r\n    const directEmail = section.querySelector(\r\n      \".dpc-direct-email\"\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================\r\n       PREPARE EMAIL\r\n       ===================================== *\/\r\n\r\n    function buildEmail(service) {\r\n\r\n\r\n      const subject =\r\n\r\n        \"DISPLERO Project Enquiry - \" +\r\n        service.name;\r\n\r\n\r\n\r\n      const body = [\r\n\r\n        \"Hello DISPLERO,\",\r\n\r\n        \"\",\r\n\r\n        \"I would like to enquire about:\",\r\n\r\n        service.name,\r\n\r\n        \"\",\r\n\r\n        \"Project description:\",\r\n\r\n        \"\",\r\n\r\n        \"\",\r\n\r\n        \"Project location:\",\r\n\r\n        \"\",\r\n\r\n        \"Preferred timeframe:\",\r\n\r\n        \"\",\r\n\r\n        \"Additional information:\",\r\n\r\n        \"\",\r\n\r\n        \"\",\r\n\r\n        \"Best regards,\"\r\n\r\n      ].join(\"\\n\");\r\n\r\n\r\n\r\n      return (\r\n\r\n        \"mailto:\" + CONTACT_EMAIL +\r\n\r\n        \"?subject=\" +\r\n\r\n        encodeURIComponent(subject) +\r\n\r\n        \"&body=\" +\r\n\r\n        encodeURIComponent(body)\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       CHANGE SELECTED SERVICE\r\n       ===================================== *\/\r\n\r\n    function selectService(key, animate) {\r\n\r\n\r\n      const service = services[key];\r\n\r\n\r\n      if (!service) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* ACTIVE BUTTON *\/\r\n\r\n      buttons.forEach(button => {\r\n\r\n\r\n        const active =\r\n\r\n          button.dataset.service === key;\r\n\r\n\r\n\r\n        button.classList.toggle(\r\n\r\n          \"is-active\",\r\n\r\n          active\r\n\r\n        );\r\n\r\n\r\n\r\n        button.setAttribute(\r\n\r\n          \"aria-pressed\",\r\n\r\n          active ? \"true\" : \"false\"\r\n\r\n        );\r\n\r\n\r\n      });\r\n\r\n\r\n\r\n      \/* PROJECT INFORMATION *\/\r\n\r\n      if (panelCode) {\r\n\r\n        panelCode.textContent =\r\n\r\n          service.number +\r\n          \" \/ \" +\r\n          service.code;\r\n\r\n      }\r\n\r\n\r\n\r\n      if (projectTitle) {\r\n\r\n        projectTitle.innerHTML =\r\n          service.title;\r\n\r\n      }\r\n\r\n\r\n\r\n      if (projectDescription) {\r\n\r\n        projectDescription.textContent =\r\n          service.description;\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* EMAIL LINK *\/\r\n\r\n      if (emailButton) {\r\n\r\n\r\n        emailButton.href =\r\n          buildEmail(service);\r\n\r\n\r\n\r\n        emailButton.setAttribute(\r\n\r\n          \"aria-label\",\r\n\r\n          \"Start an email enquiry about \" +\r\n          service.name\r\n\r\n        );\r\n\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* CONTENT ANIMATION *\/\r\n\r\n      if (panelContent) {\r\n\r\n\r\n        panelContent.classList.remove(\r\n          \"is-changing\"\r\n        );\r\n\r\n\r\n        if (\r\n          animate &&\r\n          !window.matchMedia(\r\n            \"(prefers-reduced-motion: reduce)\"\r\n          ).matches\r\n        ) {\r\n\r\n\r\n          \/* Restart CSS animation *\/\r\n\r\n          void panelContent.offsetWidth;\r\n\r\n\r\n\r\n          panelContent.classList.add(\r\n            \"is-changing\"\r\n          );\r\n\r\n\r\n        }\r\n\r\n\r\n      }\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       SERVICE BUTTON EVENTS\r\n       ===================================== *\/\r\n\r\n    buttons.forEach(button => {\r\n\r\n\r\n      button.addEventListener(\r\n\r\n        \"click\",\r\n\r\n        function () {\r\n\r\n\r\n          selectService(\r\n\r\n            button.dataset.service,\r\n\r\n            true\r\n\r\n          );\r\n\r\n\r\n        }\r\n\r\n      );\r\n\r\n\r\n    });\r\n\r\n\r\n\r\n    \/* =====================================\r\n       DIRECT EMAIL LINK\r\n       ===================================== *\/\r\n\r\n    if (directEmail) {\r\n\r\n\r\n      directEmail.href =\r\n        \"mailto:\" + CONTACT_EMAIL;\r\n\r\n\r\n\r\n      const emailText =\r\n        directEmail.querySelector(\"span\");\r\n\r\n\r\n      if (emailText) {\r\n\r\n        emailText.textContent =\r\n          CONTACT_EMAIL;\r\n\r\n      }\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================\r\n       INITIAL STATE\r\n       ===================================== *\/\r\n\r\n    selectService(\"led\", false);\r\n\r\n\r\n\r\n    \/* =====================================\r\n       HERO SCROLL ANIMATION\r\n       ===================================== *\/\r\n\r\n    const reducedMotion = window.matchMedia(\r\n\r\n      \"(prefers-reduced-motion: reduce)\"\r\n\r\n    );\r\n\r\n\r\n    if (\r\n      !reducedMotion.matches &&\r\n      \"IntersectionObserver\" in window\r\n    ) {\r\n\r\n\r\n      const observer = new IntersectionObserver(\r\n\r\n        function (entries) {\r\n\r\n\r\n          entries.forEach(function (entry) {\r\n\r\n\r\n            if (entry.isIntersecting) {\r\n\r\n\r\n              section.classList.add(\r\n                \"dpc-visible\"\r\n              );\r\n\r\n\r\n              observer.unobserve(\r\n                section\r\n              );\r\n\r\n\r\n            }\r\n\r\n\r\n          });\r\n\r\n\r\n        },\r\n\r\n        {\r\n\r\n          threshold: 0,\r\n\r\n          rootMargin: \"0px 0px -5% 0px\"\r\n\r\n        }\r\n\r\n      );\r\n\r\n\r\n\r\n      section.classList.add(\r\n        \"dpc-enhanced\"\r\n      );\r\n\r\n\r\n\r\n      observer.observe(section);\r\n\r\n\r\n\r\n      \/* Fallback for returning to the page\r\n         through browser history. *\/\r\n\r\n      if (\r\n        section.getBoundingClientRect().top <\r\n        window.innerHeight\r\n      ) {\r\n\r\n\r\n        requestAnimationFrame(function () {\r\n\r\n\r\n          section.classList.add(\r\n            \"dpc-visible\"\r\n          );\r\n\r\n\r\n        });\r\n\r\n\r\n      }\r\n\r\n\r\n    }\r\n\r\n\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =====================================\r\n     START WHEN DOM IS AVAILABLE\r\n     ===================================== *\/\r\n\r\n  function start() {\r\n\r\n\r\n    const sections = document.querySelectorAll(\r\n\r\n      \".dpc-contact:not([data-dpc-initialized='true'])\"\r\n\r\n    );\r\n\r\n\r\n\r\n    sections.forEach(\r\n      initializeContact\r\n    );\r\n\r\n\r\n  }\r\n\r\n\r\n\r\n  if (document.readyState === \"loading\") {\r\n\r\n\r\n    document.addEventListener(\r\n\r\n      \"DOMContentLoaded\",\r\n\r\n      start,\r\n\r\n      { once: true }\r\n\r\n    );\r\n\r\n\r\n  } else {\r\n\r\n\r\n    start();\r\n\r\n\r\n  }\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\n\r\n<style>\r\n\/* Wy\u015brodkowanie adresu e-mail *\/\r\n\r\n.dpc-contact .dpc-direct-email {\r\n  justify-content: center;\r\n  position: relative;\r\n  text-align: center;\r\n}\r\n\r\n\/* Strza\u0142ka pozostaje przy prawej kraw\u0119dzi *\/\r\n\r\n.dpc-contact .dpc-direct-arrow {\r\n  position: absolute;\r\n  right: 0;\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-285afce e-con-full e-flex e-con e-parent\" data-id=\"285afce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7911285 elementor-widget elementor-widget-html\" data-id=\"7911285\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- =====================================================\n     DISPLERO \/ LOCATION V4\n     STEEL BLUE EDITION\n     COMPLETE HTML + CSS + JS\n\n     REPLACE THE ENTIRE PREVIOUS MAP WIDGET\n     ===================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n\n<section class=\"dlm-location\" id=\"displero-location\">\n\n  <div class=\"dlm-container\">\n\n\n    <!-- =====================================\n         TOP BAR\n         ===================================== -->\n\n    <div class=\"dlm-topbar\">\n\n      <span class=\"dlm-top-label\">\n\n        <span class=\"dlm-top-dot\"><\/span>\n\n        LOCATION\n\n      <\/span>\n\n\n      <span class=\"dlm-top-right\">\n\n        FIND US ON THE MAP\n\n      <\/span>\n\n    <\/div>\n\n\n\n    <!-- =====================================\n         HEADING\n         ===================================== -->\n\n    <div class=\"dlm-heading\">\n\n      <span class=\"dlm-eyebrow\">WHERE WE ARE<\/span>\n\n      <h2>OUR CITY<span>.<\/span><\/h2>\n\n      <h1><p>Krak\u00f3w, Poland.<\/p><\/h1>\n          \n      \n\n    <\/div>\n\n\n\n    <!-- =====================================\n         MAIN MODULE\n         ===================================== -->\n\n    <div class=\"dlm-module\">\n\n\n      <!-- =================================\n           LEFT \/ RADAR PANEL\n           ================================= -->\n\n      <div class=\"dlm-info\">\n\n\n        <!-- BACKGROUND GRID -->\n\n        <div\n          class=\"dlm-info-grid\"\n          aria-hidden=\"true\"\n        ><\/div>\n\n\n\n        <!-- ANIMATED RADAR -->\n\n        <div\n          class=\"dlm-radar\"\n          aria-hidden=\"true\"\n        >\n\n          <div class=\"dlm-radar-ring dlm-ring-1\"><\/div>\n\n          <div class=\"dlm-radar-ring dlm-ring-2\"><\/div>\n\n          <div class=\"dlm-radar-ring dlm-ring-3\"><\/div>\n\n          <div class=\"dlm-radar-line\"><\/div>\n\n          <div class=\"dlm-radar-center\"><\/div>\n\n        <\/div>\n\n\n\n        <!-- PANEL TOP -->\n\n        <div class=\"dlm-info-top\">\n\n          <span>\n\n            LOCATION IDENTIFIED\n\n          <\/span>\n\n\n          <span class=\"dlm-info-status\">\n\n            <span><\/span>\n\n            POLAND\n\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- PANEL MAIN CONTENT -->\n\n        <div class=\"dlm-info-main\">\n\n          <span class=\"dlm-info-kicker\">\n\n            BASED IN\n\n          <\/span>\n\n\n          <h3>\n\n            KRAK\u00d3W<span>.<\/span>\n\n          <\/h3>\n\n\n          <span class=\"dlm-info-country\">\n\n            POLAND \/ EUROPE\n\n          <\/span>\n\n\n\n          <!-- MOVING SIGNAL -->\n\n          <div class=\"dlm-info-line\">\n\n            <span><\/span>\n\n          <\/div>\n\n\n\n          <p>\n\n            \n\n          <\/p>\n\n        <\/div>\n\n\n\n        <!-- PANEL BOTTOM -->\n\n        <div class=\"dlm-info-bottom\">\n\n          <span>\n\n            DISPLERO\u00ae\n\n          <\/span>\n\n\n          <span>\n\n            SHAPING THE FUTURE OF DISPLAYS\n\n          <\/span>\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <!-- =================================\n           RIGHT \/ GOOGLE MAP\n           ================================= -->\n\n      <div class=\"dlm-map-panel\">\n\n\n        <!-- MAP HEADER -->\n\n        <div class=\"dlm-map-header\">\n\n          <div class=\"dlm-map-header-left\">\n\n            <span class=\"dlm-map-small\">\n\n              MAP VIEW\n\n            <\/span>\n\n\n            <strong>\n\n              KRAK\u00d3W, POLAND\n\n            <\/strong>\n\n          <\/div>\n\n\n          <span\n            class=\"dlm-map-symbol\"\n            aria-hidden=\"true\"\n          >\n\n            \n\n          <\/span>\n\n        <\/div>\n\n\n\n        <!-- =================================\n             MAP FRAME\n             ================================= -->\n\n        <div class=\"dlm-map-frame\">\n\n\n          <!--\n            CITY-LEVEL MAP.\n\n            NO EXACT OFFICE ADDRESS.\n\n            To change the map later,\n            replace the iframe src only.\n          -->\n\n          <iframe\n            title=\"Google Maps \u2014 Krak\u00f3w, Poland\"\n            src=\"https:\/\/maps.google.com\/maps?q=Krak%C3%B3w%2C%20Polska&amp;z=11&amp;output=embed\"\n            loading=\"lazy\"\n            referrerpolicy=\"strict-origin-when-cross-origin\"\n            allowfullscreen\n          ><\/iframe>\n\n\n\n          <!-- INITIAL MAP COVER -->\n\n          <div class=\"dlm-map-cover\">\n\n            <div class=\"dlm-map-cover-inner\">\n\n\n              <span class=\"dlm-cover-index\">\n\n                INTERACTIVE MAP\n\n              <\/span>\n\n\n\n              <!-- MAIN BUTTON -->\n\n              <button\n                type=\"button\"\n                class=\"dlm-activate-map\"\n                aria-label=\"Activate interactive Google Maps\"\n                aria-pressed=\"false\"\n                onclick=\"var m=this.closest('.dlm-map-frame'); if(m){m.classList.add('is-active');this.setAttribute('aria-pressed','true');}\"\n              >\n\n                <span\n                  class=\"dlm-activate-icon\"\n                  aria-hidden=\"true\"\n                >\n\n                  +\n\n                <\/span>\n\n\n                <span>\n\n                  EXPLORE MAP\n\n                <\/span>\n\n              <\/button>\n\n\n\n              <span class=\"dlm-cover-hint\">\n\n                CLICK TO INTERACT\n\n              <\/span>\n\n\n            <\/div>\n\n          <\/div>\n\n\n\n          <!-- LOCK BUTTON -->\n\n          <button\n            type=\"button\"\n            class=\"dlm-lock-map\"\n            aria-label=\"Lock Google Maps and restore page scrolling\"\n            aria-pressed=\"false\"\n            onclick=\"var m=this.closest('.dlm-map-frame'); if(m){m.classList.remove('is-active');this.setAttribute('aria-pressed','false');var b=m.querySelector('.dlm-activate-map');if(b){b.setAttribute('aria-pressed','false');b.focus();}}\"\n          >\n\n            <span aria-hidden=\"true\">\u2212<\/span>\n\n            LOCK MAP\n\n          <\/button>\n\n\n\n          <!-- CORNER MARKERS -->\n\n          <span\n            class=\"dlm-corner dlm-corner-tl\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <span\n            class=\"dlm-corner dlm-corner-tr\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <span\n            class=\"dlm-corner dlm-corner-bl\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n          <span\n            class=\"dlm-corner dlm-corner-br\"\n            aria-hidden=\"true\"\n          ><\/span>\n\n\n        <\/div>\n\n\n\n        <!-- =================================\n             MAP FOOTER\n             ================================= -->\n\n        <div class=\"dlm-map-footer\">\n\n\n          <div class=\"dlm-map-caption\">\n\n            <span class=\"dlm-caption-dot\"><\/span>\n\n            KRAK\u00d3W \/ CITY OVERVIEW\n\n          <\/div>\n\n\n\n          <!-- EXTERNAL MAP LINK -->\n\n          <a\n            class=\"dlm-open-map\"\n            href=\"https:\/\/www.google.com\/maps\/search\/?api=1&amp;query=Krak%C3%B3w%2C%20Polska\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label=\"Open Krak\u00f3w in Google Maps\"\n          >\n\n            OPEN GOOGLE MAPS\n\n            <span aria-hidden=\"true\">\n\n              \u2197\n\n            <\/span>\n\n          <\/a>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================\n         BOTTOM INFORMATION\n         ===================================== -->\n\n    <div class=\"dlm-bottom\">\n\n      <span>\n\n        KRAK\u00d3W\n\n      <\/span>\n\n\n      <span>\n\n        LOCATION SHOWN AT CITY LEVEL\n\n      <\/span>\n\n\n      <span>\n\n        POLAND \/ EUROPE\n\n      <\/span>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =====================================================\n   01 \/ COLOR SYSTEM\n   ===================================================== *\/\n\n.dlm-location {\n\n  --dlm-background: #DDE6F0;\n\n  --dlm-blue: #5471A4;\n\n  --dlm-blue-dark: #405C8C;\n\n  --dlm-blue-light: #AFC7E7;\n\n  --dlm-navy: #090D1F;\n\n  --dlm-grey: #54595F;\n\n  --dlm-white: #FFFFFF;\n\n  --dlm-soft-white: #F8FAFD;\n\n  --dlm-border: #CFDBE9;\n\n\n  position: relative;\n\n  isolation: isolate;\n\n  width: 100%;\n\n  margin: 0;\n\n  padding: 105px 28px 55px;\n\n  background: var(--dlm-background);\n\n  color: var(--dlm-navy);\n\n  font-family: \"Manrope\", sans-serif;\n\n  overflow: hidden;\n\n}\n\n\n.dlm-location *,\n.dlm-location *::before,\n.dlm-location *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.dlm-location button,\n.dlm-location a {\n\n  font-family: inherit;\n\n}\n\n\n.dlm-container {\n\n  width: 100%;\n\n  max-width: 1450px;\n\n  margin: 0 auto;\n\n}\n\n\n\n\/* =====================================================\n   02 \/ TOP BAR\n   ===================================================== *\/\n\n.dlm-topbar {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  flex-wrap: wrap;\n\n  gap: 20px;\n\n  margin-bottom: 80px;\n\n}\n\n\n.dlm-top-label {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 12px;\n\n  color: var(--dlm-navy);\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: 3px;\n\n}\n\n\n.dlm-top-dot {\n\n  width: 8px;\n\n  height: 8px;\n\n  flex: 0 0 8px;\n\n  border-radius: 50%;\n\n  background: var(--dlm-blue);\n\n  animation: dlm-dot-pulse 3s ease-out infinite;\n\n}\n\n\n@keyframes dlm-dot-pulse {\n\n  0% {\n\n    box-shadow:\n      0 0 0 0 rgba(84,113,164,.38);\n\n  }\n\n  70% {\n\n    box-shadow:\n      0 0 0 12px rgba(84,113,164,0);\n\n  }\n\n  100% {\n\n    box-shadow:\n      0 0 0 0 rgba(84,113,164,0);\n\n  }\n\n}\n\n\n.dlm-top-right {\n\n  color: var(--dlm-grey);\n\n  font-size: 10px;\n\n  font-weight: 700;\n\n  letter-spacing: 2px;\n\n}\n\n\n\n\/* =====================================================\n   03 \/ SECTION HEADING\n   ===================================================== *\/\n\n.dlm-heading {\n\n  margin-bottom: 75px;\n\n}\n\n\n.dlm-eyebrow {\n\n  display: block;\n\n  margin-bottom: 22px;\n\n  color: var(--dlm-blue-dark);\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: 4px;\n\n}\n\n\n.dlm-heading h2 {\n\n  margin: 0 0 25px;\n\n  color: var(--dlm-navy);\n\n  font-size: clamp(55px, 9vw, 125px);\n\n  font-weight: 800;\n\n  line-height: 1;\n\n  letter-spacing: -.075em;\n\n}\n\n\n.dlm-heading h2 span {\n\n  color: var(--dlm-blue);\n\n}\n\n\n.dlm-heading p {\n\n  margin: 0;\n\n  color: var(--dlm-grey);\n\n  font-size: clamp(15px, 1.45vw, 19px);\n\n  line-height: 1.7;\n\n}\n\n\n\n\/* =====================================================\n   04 \/ TWO-COLUMN MODULE\n   ===================================================== *\/\n\n.dlm-module {\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, .85fr)\n    minmax(0, 1.3fr);\n\n  min-height: 640px;\n\n  background: var(--dlm-navy);\n\n  box-shadow:\n    0 28px 70px rgba(9,13,31,.11);\n\n}\n\n\n\n\/* =====================================================\n   05 \/ LEFT RADAR PANEL\n   ===================================================== *\/\n\n.dlm-info {\n\n  position: relative;\n\n  isolation: isolate;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: space-between;\n\n  gap: 60px;\n\n  min-width: 0;\n\n  min-height: 640px;\n\n  padding: 38px;\n\n  color: #FFFFFF;\n\n  background:\n\n    radial-gradient(\n      ellipse at 72% 45%,\n      #6583B2 0%,\n      #4C6B9D 48%,\n      #294568 100%\n    );\n\n  overflow: hidden;\n\n}\n\n\n\n\/* TECHNICAL GRID *\/\n\n.dlm-info-grid {\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: -1;\n\n  opacity: .35;\n\n  background-image:\n\n    linear-gradient(\n      rgba(221,235,255,.28) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(221,235,255,.28) 1px,\n      transparent 1px\n    );\n\n  background-size: 50px 50px;\n\n}\n\n\n\n\/* =====================================================\n   06 \/ RADAR\n   ===================================================== *\/\n\n.dlm-radar {\n\n  position: absolute;\n\n  z-index: -1;\n\n  width: min(100%, 510px);\n\n  aspect-ratio: 1;\n\n  top: 48%;\n\n  left: 63%;\n\n  transform: translate(-50%,-50%);\n\n  pointer-events: none;\n\n}\n\n\n.dlm-radar-ring {\n\n  position: absolute;\n\n  top: 50%;\n\n  left: 50%;\n\n  border: 1px solid rgba(219,234,255,.46);\n\n  border-radius: 50%;\n\n  transform: translate(-50%,-50%);\n\n}\n\n\n.dlm-ring-1 {\n\n  width: 100%;\n\n  height: 100%;\n\n}\n\n\n.dlm-ring-2 {\n\n  width: 68%;\n\n  height: 68%;\n\n}\n\n\n.dlm-ring-3 {\n\n  width: 36%;\n\n  height: 36%;\n\n  border-style: dashed;\n\n  animation: dlm-ring-rotate 28s linear infinite;\n\n}\n\n\n@keyframes dlm-ring-rotate {\n\n  from {\n\n    transform:\n      translate(-50%,-50%) rotate(0deg);\n\n  }\n\n  to {\n\n    transform:\n      translate(-50%,-50%) rotate(360deg);\n\n  }\n\n}\n\n\n\n\/* RADAR SWEEP *\/\n\n.dlm-radar-line {\n\n  position: absolute;\n\n  top: 50%;\n\n  left: 50%;\n\n  width: 50%;\n\n  height: 2px;\n\n  transform-origin: left center;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      rgba(242,248,255,.9),\n      transparent\n    );\n\n  animation: dlm-radar-sweep 13s linear infinite;\n\n}\n\n\n@keyframes dlm-radar-sweep {\n\n  to {\n\n    transform: rotate(360deg);\n\n  }\n\n}\n\n\n\n\/* CENTER POINT *\/\n\n.dlm-radar-center {\n\n  position: absolute;\n\n  width: 9px;\n\n  height: 9px;\n\n  top: 50%;\n\n  left: 50%;\n\n  transform: translate(-50%,-50%);\n\n  border-radius: 50%;\n\n  background: #FFFFFF;\n\n  box-shadow:\n    0 0 22px rgba(255,255,255,.75);\n\n}\n\n\n\n\/* =====================================================\n   07 \/ RADAR PANEL CONTENT\n   ===================================================== *\/\n\n.dlm-info-top {\n\n  position: relative;\n\n  z-index: 1;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  flex-wrap: wrap;\n\n  gap: 15px;\n\n  color: #FFFFFF;\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n\n}\n\n\n.dlm-info-status {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 9px;\n\n}\n\n\n.dlm-info-status span {\n\n  width: 6px;\n\n  height: 6px;\n\n  border-radius: 50%;\n\n  background: #FFFFFF;\n\n  box-shadow:\n    0 0 12px rgba(255,255,255,.55);\n\n}\n\n\n\n\/* MAIN CITY TEXT *\/\n\n.dlm-info-main {\n\n  position: relative;\n\n  z-index: 1;\n\n}\n\n\n.dlm-info-kicker {\n\n  display: block;\n\n  margin-bottom: 18px;\n\n  color: #E6F0FF;\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: 4px;\n\n}\n\n\n.dlm-info-main h3 {\n\n  margin: 0;\n\n  color: #FFFFFF;\n\n  font-size: clamp(47px, 5vw, 78px);\n\n  font-weight: 800;\n\n  line-height: 1;\n\n  letter-spacing: -.08em;\n\n  overflow-wrap: anywhere;\n\n}\n\n\n.dlm-info-main h3 span {\n\n  color: #C5D9F5;\n\n}\n\n\n.dlm-info-country {\n\n  display: block;\n\n  margin-top: 20px;\n\n  color: #ECF4FF;\n\n  font-size: 11px;\n\n  font-weight: 700;\n\n  letter-spacing: 3px;\n\n}\n\n\n\n\/* MOVING SIGNAL LINE *\/\n\n.dlm-info-line {\n\n  width: 100%;\n\n  height: 1px;\n\n  margin-top: 45px;\n\n  background: rgba(235,245,255,.30);\n\n  overflow: hidden;\n\n}\n\n\n.dlm-info-line span {\n\n  display: block;\n\n  width: 30%;\n\n  height: 100%;\n\n  background: #FFFFFF;\n\n  box-shadow:\n    0 0 15px rgba(255,255,255,.65);\n\n  animation:\n    dlm-line-travel 4s ease-in-out infinite;\n\n}\n\n\n@keyframes dlm-line-travel {\n\n  from {\n\n    transform: translateX(-120%);\n\n  }\n\n  to {\n\n    transform: translateX(450%);\n\n  }\n\n}\n\n\n.dlm-info-main p {\n\n  max-width: 310px;\n\n  margin: 35px 0 0;\n\n  color: #ECF3FC;\n\n  font-size: 14px;\n\n  line-height: 1.85;\n\n}\n\n\n\n\/* PANEL BOTTOM *\/\n\n.dlm-info-bottom {\n\n  position: relative;\n\n  z-index: 1;\n\n  display: flex;\n\n  align-items: flex-end;\n\n  justify-content: space-between;\n\n  flex-wrap: wrap;\n\n  gap: 20px;\n\n  color: #DBE8FA;\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 1px;\n\n}\n\n\n.dlm-info-bottom span:first-child {\n\n  color: #FFFFFF;\n\n  font-size: 15px;\n\n}\n\n\n\n\/* =====================================================\n   08 \/ RIGHT MAP PANEL\n   ===================================================== *\/\n\n.dlm-map-panel {\n\n  display: flex;\n\n  flex-direction: column;\n\n  min-width: 0;\n\n  background: #FFFFFF;\n\n}\n\n\n\n\/* MAP HEADER *\/\n\n.dlm-map-header {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 20px;\n\n  padding: 28px 32px;\n\n  background: var(--dlm-soft-white);\n\n  border-bottom: 1px solid var(--dlm-border);\n\n}\n\n\n.dlm-map-header-left {\n\n  display: flex;\n\n  flex-direction: column;\n\n  gap: 8px;\n\n}\n\n\n.dlm-map-small {\n\n  color: var(--dlm-blue-dark);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n\n}\n\n\n.dlm-map-header-left strong {\n\n  color: var(--dlm-navy);\n\n  font-size: 17px;\n\n  font-weight: 800;\n\n  letter-spacing: -.03em;\n\n}\n\n\n.dlm-map-symbol {\n\n  color: var(--dlm-blue);\n\n  font-size: 30px;\n\n}\n\n\n\n\/* =====================================================\n   09 \/ GOOGLE MAPS\n   ===================================================== *\/\n\n.dlm-map-frame {\n\n  position: relative;\n\n  flex: 1;\n\n  min-height: 440px;\n\n  background: #E1E9F1;\n\n  overflow: hidden;\n\n}\n\n\n.dlm-map-frame iframe {\n\n  position: absolute;\n\n  inset: 0;\n\n  display: block;\n\n  width: 100%;\n\n  height: 100%;\n\n  border: 0;\n\n  filter:\n    grayscale(.45)\n    saturate(.7);\n\n  pointer-events: none;\n\n  transition: filter .65s ease;\n\n}\n\n\n\n\/* ACTIVE MAP *\/\n\n.dlm-map-frame.is-active iframe {\n\n  pointer-events: auto;\n\n  filter: none;\n\n}\n\n\n\n\/* =====================================================\n   10 \/ MAP ACTIVATION COVER\n   ===================================================== *\/\n\n.dlm-map-cover {\n\n  position: absolute;\n\n  z-index: 5;\n\n  inset: 0;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  background: rgba(9,13,31,.07);\n\n  transition:\n    opacity .45s ease,\n    visibility .45s ease;\n\n}\n\n\n.dlm-map-frame.is-active .dlm-map-cover {\n\n  opacity: 0;\n\n  visibility: hidden;\n\n  pointer-events: none;\n\n}\n\n\n\n\/* ACTIVATION PANEL *\/\n\n.dlm-map-cover-inner {\n\n  display: flex;\n\n  align-items: center;\n\n  flex-direction: column;\n\n  gap: 17px;\n\n  padding: 29px;\n\n  background: rgba(9,13,31,.96);\n\n  border: 1px solid rgba(255,255,255,.16);\n\n  box-shadow:\n    0 20px 70px rgba(9,13,31,.25);\n\n}\n\n\n.dlm-cover-index {\n\n  color: #C5D9F5;\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 3px;\n\n}\n\n\n\n\/* =====================================================\n   11 \/ PRIMARY BUTTON \u2014 EXPLORE MAP\n   ===================================================== *\/\n\n.dlm-location .dlm-activate-map {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 12px;\n\n  min-width: 220px;\n\n  min-height: 58px;\n\n  padding: 17px 24px;\n\n  border: 1px solid #FFFFFF;\n\n  border-radius: 0;\n\n  background: #FFFFFF;\n\n  color: var(--dlm-navy);\n\n  font-family: inherit;\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: 1px;\n\n  cursor: pointer;\n\n  box-shadow:\n    0 6px 20px rgba(0,0,0,.12);\n\n  transition:\n    background .3s ease,\n    border-color .3s ease,\n    color .3s ease,\n    transform .3s ease,\n    box-shadow .3s ease;\n\n}\n\n\n.dlm-location .dlm-activate-map:hover {\n\n  transform: translateY(-4px);\n\n  background: var(--dlm-blue);\n\n  border-color: var(--dlm-blue);\n\n  color: #FFFFFF;\n\n  box-shadow:\n    0 14px 35px rgba(0,0,0,.22);\n\n}\n\n\n.dlm-location .dlm-activate-map:focus-visible {\n\n  outline: 3px solid #C5D9F5;\n\n  outline-offset: 4px;\n\n}\n\n\n.dlm-activate-icon {\n\n  font-size: 24px;\n\n  font-weight: 400;\n\n  line-height: 1;\n\n}\n\n\n.dlm-cover-hint {\n\n  color: #C5D9F5;\n\n  font-size: 9px;\n\n  font-weight: 700;\n\n  letter-spacing: 2px;\n\n}\n\n\n\n\/* =====================================================\n   12 \/ LOCK MAP BUTTON\n   ===================================================== *\/\n\n.dlm-location .dlm-lock-map {\n\n  position: absolute;\n\n  z-index: 10;\n\n  top: 18px;\n\n  right: 18px;\n\n  display: none;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 10px;\n\n  min-height: 45px;\n\n  padding: 12px 18px;\n\n  border: 1px solid var(--dlm-navy);\n\n  border-radius: 0;\n\n  background: var(--dlm-navy);\n\n  color: #FFFFFF;\n\n  font-family: inherit;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: 1px;\n\n  cursor: pointer;\n\n  box-shadow:\n    0 8px 25px rgba(9,13,31,.25);\n\n  transition:\n    background .3s ease,\n    border-color .3s ease;\n\n}\n\n\n.dlm-map-frame.is-active .dlm-lock-map {\n\n  display: inline-flex;\n\n}\n\n\n.dlm-location .dlm-lock-map:hover {\n\n  background: var(--dlm-blue);\n\n  border-color: var(--dlm-blue);\n\n  color: #FFFFFF;\n\n}\n\n\n.dlm-location .dlm-lock-map:focus-visible {\n\n  outline: 3px solid var(--dlm-blue);\n\n  outline-offset: 4px;\n\n}\n\n\n.dlm-lock-map span {\n\n  font-size: 20px;\n\n  line-height: 1;\n\n}\n\n\n\n\/* =====================================================\n   13 \/ MAP CORNERS\n   ===================================================== *\/\n\n.dlm-corner {\n\n  position: absolute;\n\n  z-index: 3;\n\n  width: 23px;\n\n  height: 23px;\n\n  border-color: var(--dlm-blue);\n\n  border-style: solid;\n\n  pointer-events: none;\n\n}\n\n\n.dlm-corner-tl {\n\n  top: 14px;\n\n  left: 14px;\n\n  border-width: 2px 0 0 2px;\n\n}\n\n\n.dlm-corner-tr {\n\n  top: 14px;\n\n  right: 14px;\n\n  border-width: 2px 2px 0 0;\n\n}\n\n\n.dlm-corner-bl {\n\n  bottom: 14px;\n\n  left: 14px;\n\n  border-width: 0 0 2px 2px;\n\n}\n\n\n.dlm-corner-br {\n\n  bottom: 14px;\n\n  right: 14px;\n\n  border-width: 0 2px 2px 0;\n\n}\n\n\n\n\/* =====================================================\n   14 \/ MAP FOOTER\n   ===================================================== *\/\n\n.dlm-map-footer {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  flex-wrap: wrap;\n\n  gap: 20px;\n\n  padding: 25px 32px;\n\n  background: var(--dlm-soft-white);\n\n  border-top: 1px solid var(--dlm-border);\n\n}\n\n\n.dlm-map-caption {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  color: var(--dlm-grey);\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: 1px;\n\n}\n\n\n.dlm-caption-dot {\n\n  width: 7px;\n\n  height: 7px;\n\n  flex: 0 0 7px;\n\n  background: var(--dlm-blue);\n\n  border-radius: 50%;\n\n}\n\n\n\n\/* =====================================================\n   15 \/ SECONDARY BUTTON \u2014 OPEN GOOGLE MAPS\n   ===================================================== *\/\n\n.dlm-location .dlm-open-map {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 15px;\n\n  min-height: 48px;\n\n  padding: 12px 19px;\n\n  background: var(--dlm-navy);\n\n  border: 1px solid var(--dlm-navy);\n\n  border-radius: 0;\n\n  color: #FFFFFF !important;\n\n  text-decoration: none !important;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: 1px;\n\n  white-space: nowrap;\n\n  transition:\n    background .3s ease,\n    border-color .3s ease,\n    color .3s ease,\n    transform .3s ease,\n    box-shadow .3s ease;\n\n}\n\n\n.dlm-location .dlm-open-map:hover {\n\n  transform: translateY(-3px);\n\n  background: var(--dlm-blue);\n\n  border-color: var(--dlm-blue);\n\n  color: #FFFFFF !important;\n\n  box-shadow:\n    0 10px 24px rgba(9,13,31,.14);\n\n}\n\n\n.dlm-location .dlm-open-map:focus-visible {\n\n  outline: 3px solid var(--dlm-blue);\n\n  outline-offset: 4px;\n\n}\n\n\n.dlm-open-map span {\n\n  font-size: 23px;\n\n  line-height: 1;\n\n  transition: transform .3s ease;\n\n}\n\n\n.dlm-open-map:hover span {\n\n  transform: translate(3px,-3px);\n\n}\n\n\n\n\/* =====================================================\n   16 \/ BOTTOM INFORMATION\n   ===================================================== *\/\n\n.dlm-bottom {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  flex-wrap: wrap;\n\n  gap: 20px;\n\n  margin-top: 34px;\n\n  padding-top: 23px;\n\n  border-top: 1px solid rgba(9,13,31,.16);\n\n  color: var(--dlm-grey);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: 2px;\n\n}\n\n\n\n\/* =====================================================\n   17 \/ ENTRANCE ANIMATION\n   ===================================================== *\/\n\n.dlm-location.dlm-ready .dlm-heading {\n\n  opacity: 0;\n\n  transform: translateY(40px);\n\n  transition:\n    opacity .9s ease,\n    transform .9s cubic-bezier(.2,.8,.2,1);\n\n}\n\n\n.dlm-location.dlm-ready .dlm-module {\n\n  opacity: 0;\n\n  transform: translateY(55px);\n\n  transition:\n    opacity 1s ease .12s,\n    transform 1s cubic-bezier(.2,.8,.2,1) .12s;\n\n}\n\n\n.dlm-location.dlm-visible .dlm-heading,\n.dlm-location.dlm-visible .dlm-module {\n\n  opacity: 1;\n\n  transform: translateY(0);\n\n}\n\n\n\n\/* =====================================================\n   18 \/ TABLET\n   ===================================================== *\/\n\n@media (max-width: 1024px) {\n\n  .dlm-location {\n\n    padding: 85px 24px 45px;\n\n  }\n\n\n  .dlm-module {\n\n    grid-template-columns:\n      minmax(0, .9fr)\n      minmax(0, 1.1fr);\n\n  }\n\n\n  .dlm-info {\n\n    padding: 28px;\n\n  }\n\n\n  .dlm-info-main h3 {\n\n    font-size: 51px;\n\n  }\n\n\n  .dlm-map-header,\n  .dlm-map-footer {\n\n    padding-left: 24px;\n\n    padding-right: 24px;\n\n  }\n\n}\n\n\n\n\/* =====================================================\n   19 \/ MOBILE\n   ===================================================== *\/\n\n@media (max-width: 767px) {\n\n  .dlm-location {\n\n    padding: 75px 18px 35px;\n\n  }\n\n\n\n  \/* TOP *\/\n\n  .dlm-topbar {\n\n    align-items: flex-start;\n\n    flex-direction: column;\n\n    gap: 12px;\n\n    margin-bottom: 60px;\n\n  }\n\n\n  .dlm-top-label {\n\n    font-size: 9px;\n\n    letter-spacing: 2px;\n\n  }\n\n\n  .dlm-top-right {\n\n    font-size: 8px;\n\n  }\n\n\n\n  \/* HEADING *\/\n\n  .dlm-heading {\n\n    margin-bottom: 45px;\n\n  }\n\n\n  .dlm-eyebrow {\n\n    font-size: 9px;\n\n    letter-spacing: 2px;\n\n  }\n\n\n  .dlm-heading h2 {\n\n    font-size: clamp(\n      49px,\n      12vw,\n      75px\n    );\n\n  }\n\n\n  .dlm-heading p {\n\n    font-size: 15px;\n\n  }\n\n\n\n  \/* PANELS *\/\n\n  .dlm-module {\n\n    grid-template-columns: 1fr;\n\n  }\n\n\n  .dlm-info {\n\n    min-height: 490px;\n\n    padding: 26px;\n\n  }\n\n\n  .dlm-info-main h3 {\n\n    font-size: clamp(\n      48px,\n      13vw,\n      72px\n    );\n\n  }\n\n\n  .dlm-info-main p {\n\n    font-size: 13px;\n\n  }\n\n\n  .dlm-info-top {\n\n    font-size: 8px;\n\n  }\n\n\n  .dlm-radar {\n\n    width: 380px;\n\n  }\n\n\n\n  \/* MAP *\/\n\n  .dlm-map-frame {\n\n    min-height: 390px;\n\n  }\n\n\n  .dlm-map-header,\n  .dlm-map-footer {\n\n    padding: 23px 20px;\n\n  }\n\n\n  .dlm-map-caption {\n\n    font-size: 9px;\n\n  }\n\n\n  .dlm-location .dlm-open-map {\n\n    font-size: 9px;\n\n  }\n\n\n  .dlm-map-cover-inner {\n\n    padding: 22px;\n\n    max-width: calc(100% - 30px);\n\n  }\n\n\n  .dlm-location .dlm-activate-map {\n\n    min-width: 0;\n\n    width: 100%;\n\n    font-size: 11px;\n\n  }\n\n\n  .dlm-location .dlm-lock-map {\n\n    top: 12px;\n\n    right: 12px;\n\n  }\n\n\n\n  \/* BOTTOM *\/\n\n  .dlm-bottom {\n\n    align-items: flex-start;\n\n    flex-direction: column;\n\n    gap: 12px;\n\n    font-size: 8px;\n\n  }\n\n}\n\n\n\n\/* =====================================================\n   20 \/ SMALL PHONES\n   ===================================================== *\/\n\n@media (max-width: 380px) {\n\n  .dlm-location {\n\n    padding-left: 14px;\n\n    padding-right: 14px;\n\n  }\n\n\n  .dlm-info {\n\n    padding: 21px;\n\n  }\n\n\n  .dlm-info-main h3 {\n\n    font-size: 46px;\n\n  }\n\n\n  .dlm-map-header,\n  .dlm-map-footer {\n\n    padding-left: 16px;\n\n    padding-right: 16px;\n\n  }\n\n}\n\n\n\n\/* =====================================================\n   21 \/ ACCESSIBILITY\n   ===================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .dlm-location *,\n  .dlm-location *::before,\n  .dlm-location *::after {\n\n    animation: none !important;\n\n    transition: none !important;\n\n  }\n\n\n  .dlm-location.dlm-ready .dlm-heading,\n  .dlm-location.dlm-ready .dlm-module {\n\n    opacity: 1 !important;\n\n    transform: none !important;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n\/* =====================================================\n   DISPLERO \/ LOCATION V4\n   MAP INTERACTION + ENTRANCE\n   ===================================================== *\/\n\n(function () {\n\n  \"use strict\";\n\n\n  function initLocation(section) {\n\n\n    \/* PREVENT DOUBLE INITIALIZATION *\/\n\n    if (section.dataset.dlmInitialized === \"true\") {\n\n      return;\n\n    }\n\n\n    section.dataset.dlmInitialized = \"true\";\n\n\n\n    \/* ELEMENTS *\/\n\n    const mapFrame = section.querySelector(\n      \".dlm-map-frame\"\n    );\n\n\n    const activateButton = section.querySelector(\n      \".dlm-activate-map\"\n    );\n\n\n    const lockButton = section.querySelector(\n      \".dlm-lock-map\"\n    );\n\n\n\n    \/* ==========================================\n       MAP CONTROLS\n       ========================================== *\/\n\n    if (\n      mapFrame &&\n      activateButton &&\n      lockButton\n    ) {\n\n\n      function setMapActive(active) {\n\n\n        mapFrame.classList.toggle(\n          \"is-active\",\n          active\n        );\n\n\n        activateButton.setAttribute(\n          \"aria-pressed\",\n          active ? \"true\" : \"false\"\n        );\n\n\n        lockButton.setAttribute(\n          \"aria-pressed\",\n          active ? \"true\" : \"false\"\n        );\n\n\n      }\n\n\n\n      \/* ENABLE THE MAP *\/\n\n      activateButton.addEventListener(\n\n        \"click\",\n\n        function () {\n\n\n          setMapActive(true);\n\n\n        }\n\n      );\n\n\n\n      \/* LOCK THE MAP *\/\n\n      lockButton.addEventListener(\n\n        \"click\",\n\n        function () {\n\n\n          setMapActive(false);\n\n\n          activateButton.focus();\n\n\n        }\n\n      );\n\n\n\n      \/* RESTORE PAGE SCROLL ON MOUSE LEAVE *\/\n\n      mapFrame.addEventListener(\n\n        \"mouseleave\",\n\n        function () {\n\n\n          setMapActive(false);\n\n\n        }\n\n      );\n\n\n\n      \/* ESCAPE KEY *\/\n\n      section.addEventListener(\n\n        \"keydown\",\n\n        function (event) {\n\n\n          if (\n            event.key === \"Escape\" &&\n            mapFrame.classList.contains(\"is-active\")\n          ) {\n\n\n            setMapActive(false);\n\n\n            activateButton.focus();\n\n\n          }\n\n\n        }\n\n      );\n\n\n    }\n\n\n\n    \/* ==========================================\n       ENTRANCE ANIMATION\n       ========================================== *\/\n\n    const reduced = window.matchMedia(\n\n      \"(prefers-reduced-motion: reduce)\"\n\n    );\n\n\n    if (\n      reduced.matches ||\n      !(\"IntersectionObserver\" in window)\n    ) {\n\n\n      return;\n\n\n    }\n\n\n\n    const observer = new IntersectionObserver(\n\n      function (entries) {\n\n\n        entries.forEach(function (entry) {\n\n\n          if (entry.isIntersecting) {\n\n\n            section.classList.add(\n              \"dlm-visible\"\n            );\n\n\n            observer.unobserve(\n              section\n            );\n\n\n          }\n\n\n        });\n\n\n      },\n\n      {\n\n        threshold: .06\n\n      }\n\n    );\n\n\n\n    section.classList.add(\n      \"dlm-ready\"\n    );\n\n\n    observer.observe(section);\n\n\n\n    \/* HANDLE PAGE RESTORATION *\/\n\n    const rect = section.getBoundingClientRect();\n\n\n    if (\n      rect.top < window.innerHeight &&\n      rect.bottom > 0\n    ) {\n\n\n      requestAnimationFrame(function () {\n\n\n        section.classList.add(\n          \"dlm-visible\"\n        );\n\n\n      });\n\n\n    }\n\n\n  }\n\n\n\n  \/* ==========================================\n     INITIALIZE\n     ========================================== *\/\n\n  function start() {\n\n\n    document.querySelectorAll(\n\n      \".dlm-location\"\n\n    ).forEach(initLocation);\n\n\n  }\n\n\n\n  if (document.readyState === \"loading\") {\n\n\n    document.addEventListener(\n\n      \"DOMContentLoaded\",\n\n      start,\n\n      { once: true }\n\n    );\n\n\n  } else {\n\n\n    start();\n\n\n  }\n\n\n})();\n\n<\/script>\n\n<style>\n\/* DISPLERO \u2014 DARKER LOCATION BACKGROUND *\/\n\n.dlm-location {\n  --dlm-background: #B5C8DE;\n  background: #B5C8DE;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ENGINEERING VISUAL EXPERIENCES BRINGING DISPLAYS TO LIFE. LED Videowalls Touch Solutions AV Engineering BEYOND THE ORDINARY MORE THAN JUST A SCREEN. Technology engineered to make an impact. EXPLORE OUR EXPERTISE THIS IS WHAT WE DO. EXPLORE OUR SERVICES \u2198 \u2193 SCROLL TO EXPLORE 01 03 WHAT WE DO SERVICES WE ARE OFFERING. Engineering visual experiences. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-1201","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"brizy_media":[],"_links":{"self":[{"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/pages\/1201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/comments?post=1201"}],"version-history":[{"count":462,"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/pages\/1201\/revisions"}],"predecessor-version":[{"id":2414,"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/pages\/1201\/revisions\/2414"}],"wp:attachment":[{"href":"https:\/\/displero.com\/pl\/wp-json\/wp\/v2\/media?parent=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}