{"id":39,"date":"2026-07-09T07:32:17","date_gmt":"2026-07-09T07:32:17","guid":{"rendered":"https:\/\/panosky.com\/?page_id=39"},"modified":"2026-08-25T09:45:34","modified_gmt":"2026-08-25T09:45:34","slug":"about-us","status":"publish","type":"page","link":"https:\/\/panosky.com\/?page_id=39","title":{"rendered":"About Us"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"39\" class=\"elementor elementor-39\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f83c0c4 e-con e-atomic-element e-flexbox-base e-f83c0c4-d3628cb \" data-id=\"f83c0c4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f83c0c4\" data-e-type=\"e-flexbox\" data-id=\"f83c0c4\">\n    \t\t<div class=\"elementor-element elementor-element-f1ab47a elementor-widget elementor-widget-html\" data-id=\"f1ab47a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     PANOSKY \u2014 IMMERSIVE 360 PORTAL\r\n     \r\n     FEATURES:\r\n     - Native mobile vertical page scrolling\r\n     - Locked horizontal mobile panorama drag\r\n     - Desktop horizontal + vertical drag\r\n     - Page scroll rotates panorama\r\n     - Auto rotation\r\n     - Mobile horizon follows lowered window\r\n     - NEW: Desktop\/tablet optical projection follows\r\n       right-side window to reduce perspective distortion\r\n========================================================= -->\r\n\r\n<div\r\n  id=\"panosky-360-portal\"\r\n  class=\"ps360\"\r\n  data-panorama=\"https:\/\/panosky-website-media.b-cdn.net\/Web%20Images%20and%20videos\/Serendipity-Dining-for-web.jpg\"\r\n>\r\n\r\n  <canvas class=\"ps360__canvas\"><\/canvas>\r\n\r\n  <div class=\"ps360__darkness\"><\/div>\r\n\r\n  <div class=\"ps360__vignette\"><\/div>\r\n\r\n\r\n  <div class=\"ps360__nav\">\r\n\r\n    <svg\r\n      class=\"ps360__nav-svg\"\r\n      viewBox=\"0 0 600 600\"\r\n      aria-hidden=\"true\"\r\n    >\r\n\r\n      <circle\r\n        cx=\"300\"\r\n        cy=\"300\"\r\n        r=\"283\"\r\n        class=\"ps360__outer-arc ps360__outer-arc-a\"\r\n      \/>\r\n\r\n      <circle\r\n        cx=\"300\"\r\n        cy=\"300\"\r\n        r=\"283\"\r\n        class=\"ps360__outer-arc ps360__outer-arc-b\"\r\n      \/>\r\n\r\n\r\n      <g class=\"ps360__ticks\"><\/g>\r\n\r\n\r\n      <circle\r\n        cx=\"300\"\r\n        cy=\"300\"\r\n        r=\"232\"\r\n        class=\"ps360__portal-ring\"\r\n      \/>\r\n\r\n\r\n      <circle\r\n        cx=\"300\"\r\n        cy=\"300\"\r\n        r=\"224\"\r\n        class=\"ps360__portal-ring-inner\"\r\n      \/>\r\n\r\n\r\n      <g class=\"ps360__cardinal-notches\">\r\n\r\n        <line\r\n          x1=\"300\"\r\n          y1=\"62\"\r\n          x2=\"300\"\r\n          y2=\"73\"\r\n        \/>\r\n\r\n        <line\r\n          x1=\"527\"\r\n          y1=\"300\"\r\n          x2=\"538\"\r\n          y2=\"300\"\r\n        \/>\r\n\r\n        <line\r\n          x1=\"300\"\r\n          y1=\"527\"\r\n          x2=\"300\"\r\n          y2=\"538\"\r\n        \/>\r\n\r\n        <line\r\n          x1=\"62\"\r\n          y1=\"300\"\r\n          x2=\"73\"\r\n          y2=\"300\"\r\n        \/>\r\n\r\n      <\/g>\r\n\r\n    <\/svg>\r\n\r\n\r\n    <!-- FIXED TOP VIEW INDICATOR -->\r\n\r\n    <div class=\"ps360__heading\">\r\n\r\n      <span class=\"ps360__heading-stem\"><\/span>\r\n\r\n      <span class=\"ps360__heading-dot\"><\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- CARDINALS -->\r\n\r\n    <span\r\n      class=\"ps360__direction\"\r\n      data-angle=\"0\"\r\n    >\r\n      N\r\n    <\/span>\r\n\r\n\r\n    <span\r\n      class=\"ps360__direction\"\r\n      data-angle=\"90\"\r\n    >\r\n      E\r\n    <\/span>\r\n\r\n\r\n    <span\r\n      class=\"ps360__direction\"\r\n      data-angle=\"180\"\r\n    >\r\n      S\r\n    <\/span>\r\n\r\n\r\n    <span\r\n      class=\"ps360__direction\"\r\n      data-angle=\"270\"\r\n    >\r\n      W\r\n    <\/span>\r\n\r\n\r\n    <!-- CENTER TEXT -->\r\n\r\n    <div class=\"ps360__center-ui\">\r\n\r\n      <div class=\"ps360__drag-text\">\r\n        DRAG TO EXPLORE\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* ============================================================\r\n   PANOSKY 360\r\n   MANUAL DESIGN CONTROLS\r\n============================================================ *\/\r\n\r\n#panosky-360-portal {\r\n\r\n\r\n  \/* ========================================================\r\n     SECTION HEIGHT\r\n  ======================================================== *\/\r\n\r\n  --section-height-desktop: 720px;\r\n\r\n  --section-height-tablet: 650px;\r\n\r\n  --section-height-mobile: 650px;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     WINDOW POSITION\r\n  ======================================================== *\/\r\n\r\n  --portal-x-desktop: 68%;\r\n  --portal-y-desktop: 50%;\r\n\r\n\r\n  --portal-x-tablet: 65%;\r\n  --portal-y-tablet: 50%;\r\n\r\n\r\n  --portal-x-mobile: 50%;\r\n  --portal-y-mobile: 70%;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     CLEAR WINDOW SIZE\r\n  ======================================================== *\/\r\n\r\n  --portal-size-desktop: 448px;\r\n\r\n  --portal-size-tablet: 400px;\r\n\r\n  --portal-size-mobile:\r\n    min(75vw, 315px);\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     COMPLETE NAVIGATION SIZE\r\n  ======================================================== *\/\r\n\r\n  --nav-size-desktop: 580px;\r\n\r\n  --nav-size-tablet: 515px;\r\n\r\n  --nav-size-mobile:\r\n    min(95vw, 405px);\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     N \/ E \/ S \/ W DISTANCE\r\n  ======================================================== *\/\r\n\r\n  --cardinal-radius-desktop: 44.3;\r\n\r\n  --cardinal-radius-tablet: 44;\r\n\r\n  --cardinal-radius-mobile: 43.5;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     BACKGROUND DARKNESS\r\n  ======================================================== *\/\r\n\r\n  --outside-darkness: 0.90;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     BLUE TINT\r\n  ======================================================== *\/\r\n\r\n  --dark-blue-r: 0;\r\n\r\n  --dark-blue-g: 14;\r\n\r\n  --dark-blue-b: 40;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     DARKNESS FEATHER\r\n  ======================================================== *\/\r\n\r\n  --dark-feather-desktop: 150px;\r\n\r\n  --dark-feather-tablet:120px;\r\n\r\n  --dark-feather-mobile: 115px;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     DRAG TEXT\r\n  ======================================================== *\/\r\n\r\n  --drag-font-family:\r\n\r\n    var(\r\n      --e-global-typography-primary-font-family,\r\n      Arial,\r\n      sans-serif\r\n    );\r\n\r\n\r\n  --drag-size-desktop: 12px;\r\n\r\n  --drag-size-tablet: 11px;\r\n\r\n  --drag-size-mobile: 8px;\r\n\r\n\r\n  --drag-weight: 400;\r\n\r\n  --drag-letter-spacing: 0.19em;\r\n\r\n  --drag-color:\r\n    rgba(255,255,255,.95);\r\n\r\n\r\n  --drag-offset-x: 0px;\r\n\r\n  --drag-offset-y: 0px;\r\n\r\n\r\n\r\n  \/* ========================================================\r\n     ROOT\r\n  ======================================================== *\/\r\n\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  height:\r\n    var(--section-height-desktop);\r\n\r\n  overflow: hidden;\r\n\r\n  isolation: isolate;\r\n\r\n\r\n  background:\r\n\r\n    rgb(\r\n      var(--dark-blue-r),\r\n      var(--dark-blue-g),\r\n      var(--dark-blue-b)\r\n    );\r\n\r\n\r\n  user-select: none;\r\n\r\n  -webkit-user-select: none;\r\n\r\n\r\n  touch-action:\r\n    pan-y pinch-zoom;\r\n\r\n\r\n  -webkit-tap-highlight-color:\r\n    transparent;\r\n\r\n\r\n  font-family:\r\n\r\n    var(\r\n      --e-global-typography-primary-font-family,\r\n      Arial,\r\n      sans-serif\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   PANORAMA CANVAS\r\n============================================================ *\/\r\n\r\n.ps360__canvas {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 1;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n  cursor: grab;\r\n\r\n\r\n  \/*\r\n   * VERY IMPORTANT:\r\n   * native vertical scrolling remains available.\r\n   *\/\r\n\r\n  touch-action:\r\n    pan-y pinch-zoom;\r\n\r\n\r\n  -webkit-tap-highlight-color:\r\n    transparent;\r\n\r\n}\r\n\r\n\r\n#panosky-360-portal.is-dragging\r\n.ps360__canvas {\r\n\r\n  cursor: grabbing;\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   DARK BLUE GRADUAL OVERLAY\r\n============================================================ *\/\r\n\r\n.ps360__darkness {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 2;\r\n\r\n  pointer-events: none;\r\n\r\n\r\n  background:\r\n\r\n    radial-gradient(\r\n\r\n      circle\r\n      calc(\r\n        (var(--portal-size-desktop) \/ 2)\r\n        +\r\n        var(--dark-feather-desktop)\r\n      )\r\n\r\n      at\r\n      var(--portal-x-desktop)\r\n      var(--portal-y-desktop),\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        0\r\n      )\r\n      0%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        0\r\n      )\r\n      52%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .04\r\n      )\r\n      57%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .10\r\n      )\r\n      62%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .20\r\n      )\r\n      68%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .32\r\n      )\r\n      74%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .46\r\n      )\r\n      80%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .62\r\n      )\r\n      86%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .76\r\n      )\r\n      92%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        .84\r\n      )\r\n      96%,\r\n\r\n\r\n      rgba(\r\n        var(--dark-blue-r),\r\n        var(--dark-blue-g),\r\n        var(--dark-blue-b),\r\n        var(--outside-darkness)\r\n      )\r\n      100%\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   CINEMATIC VIGNETTE\r\n============================================================ *\/\r\n\r\n.ps360__vignette {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: 3;\r\n\r\n  pointer-events: none;\r\n\r\n\r\n  background:\r\n\r\n    linear-gradient(\r\n\r\n      90deg,\r\n\r\n      rgba(0,5,24,.48) 0%,\r\n\r\n      rgba(0,8,30,.24) 16%,\r\n\r\n      rgba(0,10,32,.08) 32%,\r\n\r\n      rgba(0,10,32,0) 55%,\r\n\r\n      rgba(0,8,28,.05) 75%,\r\n\r\n      rgba(0,5,22,.30) 100%\r\n\r\n    ),\r\n\r\n\r\n    linear-gradient(\r\n\r\n      180deg,\r\n\r\n      rgba(0,5,22,.28) 0%,\r\n\r\n      rgba(0,8,28,.05) 32%,\r\n\r\n      rgba(0,8,28,.03) 62%,\r\n\r\n      rgba(0,4,18,.38) 100%\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   NAVIGATION\r\n============================================================ *\/\r\n\r\n.ps360__nav {\r\n\r\n  position: absolute;\r\n\r\n  z-index: 5;\r\n\r\n\r\n  left:\r\n    var(--portal-x-desktop);\r\n\r\n\r\n  top:\r\n    var(--portal-y-desktop);\r\n\r\n\r\n  width:\r\n    var(--nav-size-desktop);\r\n\r\n\r\n  height:\r\n    var(--nav-size-desktop);\r\n\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n\r\n  pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.ps360__nav-svg {\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n  overflow: visible;\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   OUTER ARCS\r\n============================================================ *\/\r\n\r\n.ps360__outer-arc {\r\n\r\n  fill: none;\r\n\r\n\r\n  stroke:\r\n    rgba(195,209,220,.36);\r\n\r\n\r\n  stroke-width:\r\n    1.05;\r\n\r\n\r\n  stroke-linecap:\r\n    round;\r\n\r\n\r\n  stroke-dasharray:\r\n    245 1534;\r\n\r\n\r\n  transform-origin:\r\n    300px 300px;\r\n\r\n}\r\n\r\n\r\n.ps360__outer-arc-a {\r\n\r\n  transform:\r\n    rotate(41deg);\r\n\r\n}\r\n\r\n\r\n.ps360__outer-arc-b {\r\n\r\n  transform:\r\n    rotate(221deg);\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   DEGREE TICKS\r\n============================================================ *\/\r\n\r\n.ps360__tick {\r\n\r\n  stroke:\r\n    rgba(62,171,231,.68);\r\n\r\n\r\n  stroke-width:\r\n    1.05;\r\n\r\n\r\n  stroke-linecap:\r\n    round;\r\n\r\n}\r\n\r\n\r\n.ps360__tick--medium {\r\n\r\n  stroke:\r\n    rgba(86,187,242,.80);\r\n\r\n\r\n  stroke-width:\r\n    1.2;\r\n\r\n}\r\n\r\n\r\n.ps360__tick--major {\r\n\r\n  stroke:\r\n    rgba(160,221,255,.94);\r\n\r\n\r\n  stroke-width:\r\n    1.45;\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   WINDOW BORDER\r\n============================================================ *\/\r\n\r\n.ps360__portal-ring {\r\n\r\n  fill: none;\r\n\r\n\r\n  stroke:\r\n    rgba(210,236,255,.90);\r\n\r\n\r\n  stroke-width:\r\n    1.3;\r\n\r\n\r\n  filter:\r\n\r\n    drop-shadow(\r\n      0 0 2px\r\n      rgba(57,160,230,.32)\r\n    );\r\n\r\n}\r\n\r\n\r\n.ps360__portal-ring-inner {\r\n\r\n  fill: none;\r\n\r\n\r\n  stroke:\r\n    rgba(128,195,240,.25);\r\n\r\n\r\n  stroke-width:\r\n    .8;\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   CARDINAL NOTCHES\r\n============================================================ *\/\r\n\r\n.ps360__cardinal-notches line {\r\n\r\n  stroke:\r\n    rgba(157,219,255,.82);\r\n\r\n\r\n  stroke-width:\r\n    1.8;\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   TOP INDICATOR\r\n============================================================ *\/\r\n\r\n.ps360__heading {\r\n\r\n  position: absolute;\r\n\r\n\r\n  left: 50%;\r\n\r\n\r\n  top: 11.4%;\r\n\r\n\r\n  width: 34px;\r\n\r\n\r\n  height: 55px;\r\n\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n}\r\n\r\n\r\n.ps360__heading-stem {\r\n\r\n  position: absolute;\r\n\r\n\r\n  left: 50%;\r\n\r\n\r\n  top: -20px;\r\n\r\n\r\n  width: 1px;\r\n\r\n\r\n  height: 29px;\r\n\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n\r\n  background:\r\n\r\n    linear-gradient(\r\n\r\n      to bottom,\r\n\r\n      rgba(170,220,255,0),\r\n\r\n      rgba(170,220,255,.90)\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n.ps360__heading-dot {\r\n\r\n  position: absolute;\r\n\r\n\r\n  left: 50%;\r\n\r\n\r\n  top: 8px;\r\n\r\n\r\n  width: 14px;\r\n\r\n\r\n  height: 14px;\r\n\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n\r\n  box-shadow:\r\n\r\n    0 0 4px\r\n    rgba(255,255,255,1),\r\n\r\n    0 0 9px\r\n    rgba(110,203,255,.9),\r\n\r\n    0 0 18px\r\n    rgba(63,180,255,.55);\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   N E S W\r\n============================================================ *\/\r\n\r\n.ps360__direction {\r\n\r\n  position: absolute;\r\n\r\n\r\n  left: 50%;\r\n\r\n\r\n  top: 50%;\r\n\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n\r\n  color:\r\n    rgba(255,255,255,.94);\r\n\r\n\r\n  font-size:\r\n    14px;\r\n\r\n\r\n  font-weight:\r\n    400;\r\n\r\n\r\n  line-height:\r\n    1;\r\n\r\n\r\n  letter-spacing:\r\n    .03em;\r\n\r\n\r\n  text-shadow:\r\n\r\n    0 2px 8px\r\n    rgba(0,0,0,.7);\r\n\r\n\r\n  will-change:\r\n    left,\r\n    top;\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   CENTER\r\n============================================================ *\/\r\n\r\n.ps360__center-ui {\r\n\r\n  position: absolute;\r\n\r\n\r\n  left: 50%;\r\n\r\n\r\n  top: 50%;\r\n\r\n\r\n  transform:\r\n\r\n    translate(\r\n      -50%,\r\n      -50%\r\n    )\r\n\r\n    translate(\r\n      var(--drag-offset-x),\r\n      var(--drag-offset-y)\r\n    );\r\n\r\n}\r\n\r\n\r\n.ps360__drag-text {\r\n\r\n  color:\r\n    var(--drag-color);\r\n\r\n\r\n  font-family:\r\n    var(--drag-font-family);\r\n\r\n\r\n  font-size:\r\n    var(--drag-size-desktop);\r\n\r\n\r\n  font-weight:\r\n    var(--drag-weight);\r\n\r\n\r\n  letter-spacing:\r\n    var(--drag-letter-spacing);\r\n\r\n\r\n  line-height:\r\n    1;\r\n\r\n\r\n  white-space:\r\n    nowrap;\r\n\r\n\r\n  text-align:\r\n    center;\r\n\r\n\r\n  text-shadow:\r\n\r\n    0 3px 12px\r\n    rgba(0,0,0,.90);\r\n\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   TABLET\r\n============================================================ *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  #panosky-360-portal {\r\n\r\n    height:\r\n      var(--section-height-tablet);\r\n\r\n  }\r\n\r\n\r\n  .ps360__nav {\r\n\r\n    left:\r\n      var(--portal-x-tablet);\r\n\r\n\r\n    top:\r\n      var(--portal-y-tablet);\r\n\r\n\r\n    width:\r\n      var(--nav-size-tablet);\r\n\r\n\r\n    height:\r\n      var(--nav-size-tablet);\r\n\r\n  }\r\n\r\n\r\n  .ps360__darkness {\r\n\r\n    background:\r\n\r\n      radial-gradient(\r\n\r\n        circle\r\n        calc(\r\n          (var(--portal-size-tablet) \/ 2)\r\n          +\r\n          var(--dark-feather-tablet)\r\n        )\r\n\r\n        at\r\n        var(--portal-x-tablet)\r\n        var(--portal-y-tablet),\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),0) 0%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),0) 52%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.04) 57%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.10) 62%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.20) 68%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.32) 74%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.46) 80%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.62) 86%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.76) 92%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.84) 96%,\r\n\r\n        rgba(\r\n          var(--dark-blue-r),\r\n          var(--dark-blue-g),\r\n          var(--dark-blue-b),\r\n          var(--outside-darkness)\r\n        )\r\n        100%\r\n\r\n      );\r\n\r\n  }\r\n\r\n\r\n  .ps360__drag-text {\r\n\r\n    font-size:\r\n      var(--drag-size-tablet);\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  #panosky-360-portal {\r\n\r\n    height:\r\n      var(--section-height-mobile);\r\n\r\n  }\r\n\r\n\r\n  .ps360__nav {\r\n\r\n    left:\r\n      var(--portal-x-mobile);\r\n\r\n\r\n    top:\r\n      var(--portal-y-mobile);\r\n\r\n\r\n    width:\r\n      var(--nav-size-mobile);\r\n\r\n\r\n    height:\r\n      var(--nav-size-mobile);\r\n\r\n  }\r\n\r\n\r\n  .ps360__darkness {\r\n\r\n    background:\r\n\r\n      radial-gradient(\r\n\r\n        circle\r\n        calc(\r\n          (var(--portal-size-mobile) \/ 2)\r\n          +\r\n          var(--dark-feather-mobile)\r\n        )\r\n\r\n        at\r\n        var(--portal-x-mobile)\r\n        var(--portal-y-mobile),\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),0) 0%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),0) 52%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.04) 57%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.10) 62%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.20) 68%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.32) 74%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.48) 80%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.65) 86%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.79) 92%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.87) 96%,\r\n\r\n        rgba(var(--dark-blue-r),var(--dark-blue-g),var(--dark-blue-b),.92) 100%\r\n\r\n      );\r\n\r\n  }\r\n\r\n\r\n  .ps360__drag-text {\r\n\r\n    font-size:\r\n      var(--drag-size-mobile);\r\n\r\n  }\r\n\r\n\r\n  .ps360__direction {\r\n\r\n    font-size:\r\n      10px;\r\n\r\n  }\r\n\r\n\r\n  .ps360__heading-dot {\r\n\r\n    width:\r\n      10px;\r\n\r\n\r\n    height:\r\n      10px;\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\r\n  \"use strict\";\r\n\r\n\r\n  \/* =========================================================\r\n     EASY SETTINGS\r\n  ========================================================= *\/\r\n\r\n  const SETTINGS = {\r\n\r\n\r\n    \/* =====================================================\r\n       PANORAMA\r\n    ====================================================== *\/\r\n\r\n    panoramaUrl:\r\n\r\n      \"https:\/\/panosky-website-media.b-cdn.net\/Web%20Images%20and%20videos\/Serendipity-Dining-for-web.jpg\",\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CAMERA\r\n    ====================================================== *\/\r\n\r\n    fieldOfView:\r\n      73,\r\n\r\n\r\n    initialYawDegrees:\r\n      170,\r\n\r\n\r\n    initialPitchDegrees:\r\n      0,\r\n\r\n\r\n    maximumPitchDegrees:\r\n      68,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE \/ VERTICAL HORIZON ALIGNMENT\r\n    ====================================================== *\/\r\n\r\n    alignHorizonToWindowCenter:\r\n      true,\r\n\r\n\r\n    horizonFineTuneDesktop:\r\n      0,\r\n\r\n\r\n    horizonFineTuneTablet:\r\n      0,\r\n\r\n\r\n    horizonFineTuneMobile:\r\n      0,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       NEW:\r\n       HORIZONTAL OPTICAL ALIGNMENT\r\n\r\n       This moves the actual perspective center of the\r\n       panorama to the circular window.\r\n\r\n       This is what fixes the right-side stretching.\r\n\r\n       Desktop + Tablet = ON\r\n       Mobile = OFF because mobile window X is already 50%.\r\n    ====================================================== *\/\r\n\r\n    alignProjectionToWindowX:\r\n      true,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       HORIZONTAL PROJECTION STRENGTH\r\n\r\n       1.0 = mathematically align projection center\r\n             exactly with window center.\r\n\r\n       0.8 = slightly softer correction\r\n\r\n       0   = old behaviour\r\n\r\n       Start with 1.0.\r\n    ====================================================== *\/\r\n\r\n    projectionAlignmentStrengthDesktop:\r\n      1.0,\r\n\r\n\r\n    projectionAlignmentStrengthTablet:\r\n      1.0,\r\n\r\n\r\n    projectionAlignmentStrengthMobile:\r\n      0,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       OPTIONAL HORIZONTAL FINE TUNE\r\n\r\n       Units are percentage points of section width.\r\n\r\n       Positive = optical center farther RIGHT\r\n       Negative = optical center farther LEFT\r\n\r\n       Normally leave these at 0.\r\n    ====================================================== *\/\r\n\r\n    projectionFineTuneDesktop:\r\n      0,\r\n\r\n\r\n    projectionFineTuneTablet:\r\n      0,\r\n\r\n\r\n    projectionFineTuneMobile:\r\n      0,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       AUTO ROTATION\r\n    ====================================================== *\/\r\n\r\n    autoRotateEnabled:\r\n      true,\r\n\r\n\r\n    autoRotateDegreesPerSecond:\r\n      2.7,\r\n\r\n\r\n    autoResumeDelayMs:\r\n      1000,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       DRAG\r\n    ====================================================== *\/\r\n\r\n    dragDegreesPerPixel:\r\n      0.115,\r\n\r\n\r\n    desktopPitchDegreesPerPixel:\r\n      0.085,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE GESTURES\r\n    ====================================================== *\/\r\n\r\n    gestureAxisThresholdPx:\r\n      7,\r\n\r\n\r\n    horizontalIntentRatio:\r\n      1.08,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       PAGE SCROLL \u2192 PANORAMA\r\n    ====================================================== *\/\r\n\r\n    pageScrollRotationEnabled:\r\n      true,\r\n\r\n\r\n    pageScrollDegreesPerPixel:\r\n      0.10,\r\n\r\n\r\n    pageScrollDirection:\r\n      1,\r\n\r\n\r\n    pageScrollOnlyWhileVisible:\r\n      true,\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       THREE.JS FALLBACKS\r\n    ====================================================== *\/\r\n\r\n    threeJsUrls: [\r\n\r\n      \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.160.0\/build\/three.min.js\",\r\n\r\n      \"https:\/\/unpkg.com\/three@0.160.0\/build\/three.min.js\"\r\n\r\n    ]\r\n\r\n  };\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     UTILITIES\r\n  ========================================================= *\/\r\n\r\n  const clamp = (\r\n\r\n    value,\r\n    min,\r\n    max\r\n\r\n  ) =>\r\n\r\n    Math.min(\r\n\r\n      max,\r\n\r\n      Math.max(\r\n        min,\r\n        value\r\n      )\r\n\r\n    );\r\n\r\n\r\n\r\n  const normalizeDegrees =\r\n\r\n    value =>\r\n\r\n      ((value % 360) + 360) % 360;\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     THREE.JS LOADER\r\n  ========================================================= *\/\r\n\r\n  function loadScriptOnce(url) {\r\n\r\n    return new Promise(\r\n\r\n      (\r\n        resolve,\r\n        reject\r\n      ) => {\r\n\r\n        const matching =\r\n\r\n          Array.from(\r\n            document.scripts\r\n          ).find(\r\n\r\n            script =>\r\n              script.src === url\r\n\r\n          );\r\n\r\n\r\n        if (matching) {\r\n\r\n          if (window.THREE) {\r\n\r\n            resolve();\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          matching.addEventListener(\r\n            \"load\",\r\n            resolve,\r\n            { once: true }\r\n          );\r\n\r\n\r\n          matching.addEventListener(\r\n            \"error\",\r\n            reject,\r\n            { once: true }\r\n          );\r\n\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        const script =\r\n          document.createElement(\r\n            \"script\"\r\n          );\r\n\r\n\r\n        script.src =\r\n          url;\r\n\r\n\r\n        script.async =\r\n          true;\r\n\r\n\r\n        script.dataset.ps360Three =\r\n          \"true\";\r\n\r\n\r\n        script.addEventListener(\r\n          \"load\",\r\n          resolve,\r\n          { once: true }\r\n        );\r\n\r\n\r\n        script.addEventListener(\r\n          \"error\",\r\n          reject,\r\n          { once: true }\r\n        );\r\n\r\n\r\n        document.head.appendChild(\r\n          script\r\n        );\r\n\r\n      }\r\n\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  function ensureThree() {\r\n\r\n    if (window.THREE) {\r\n\r\n      return Promise.resolve(\r\n        window.THREE\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      window.__panosky360ThreePromise\r\n    ) {\r\n\r\n      return (\r\n        window.__panosky360ThreePromise\r\n      );\r\n\r\n    }\r\n\r\n\r\n    window.__panosky360ThreePromise =\r\n\r\n      (async () => {\r\n\r\n        let lastError;\r\n\r\n\r\n        for (\r\n\r\n          const url\r\n          of SETTINGS.threeJsUrls\r\n\r\n        ) {\r\n\r\n          try {\r\n\r\n            await loadScriptOnce(\r\n              url\r\n            );\r\n\r\n\r\n            if (window.THREE) {\r\n\r\n              return window.THREE;\r\n\r\n            }\r\n\r\n          }\r\n\r\n          catch (error) {\r\n\r\n            lastError =\r\n              error;\r\n\r\n          }\r\n\r\n        }\r\n\r\n\r\n        throw (\r\n\r\n          lastError ||\r\n\r\n          new Error(\r\n            \"Three.js could not be loaded.\"\r\n          )\r\n\r\n        );\r\n\r\n      })();\r\n\r\n\r\n    return (\r\n      window.__panosky360ThreePromise\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALIZE\r\n  ========================================================= *\/\r\n\r\n  function initWidget(\r\n    root,\r\n    THREE\r\n  ) {\r\n\r\n    if (\r\n      root.dataset.ps360Ready === \"true\"\r\n    ) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    root.dataset.ps360Ready =\r\n      \"true\";\r\n\r\n\r\n    const canvas =\r\n\r\n      root.querySelector(\r\n        \".ps360__canvas\"\r\n      );\r\n\r\n\r\n    const tickGroup =\r\n\r\n      root.querySelector(\r\n        \".ps360__ticks\"\r\n      );\r\n\r\n\r\n    const directions =\r\n\r\n      Array.from(\r\n\r\n        root.querySelectorAll(\r\n          \".ps360__direction\"\r\n        )\r\n\r\n      );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       BUILD TICKS\r\n    ====================================================== *\/\r\n\r\n    tickGroup.innerHTML =\r\n      \"\";\r\n\r\n\r\n    const SVG_NS =\r\n      \"http:\/\/www.w3.org\/2000\/svg\";\r\n\r\n\r\n    for (\r\n\r\n      let i = 0;\r\n\r\n      i < 72;\r\n\r\n      i++\r\n\r\n    ) {\r\n\r\n      const line =\r\n\r\n        document.createElementNS(\r\n          SVG_NS,\r\n          \"line\"\r\n        );\r\n\r\n\r\n      const angle =\r\n        i * 5;\r\n\r\n\r\n      const major =\r\n        i % 18 === 0;\r\n\r\n\r\n      const medium =\r\n\r\n        !major &&\r\n        i % 6 === 0;\r\n\r\n\r\n      let inner =\r\n        43;\r\n\r\n\r\n      const outer =\r\n        53;\r\n\r\n\r\n      if (medium) {\r\n\r\n        inner =\r\n          41;\r\n\r\n      }\r\n\r\n\r\n      if (major) {\r\n\r\n        inner =\r\n          46;\r\n\r\n      }\r\n\r\n\r\n      line.setAttribute(\r\n        \"x1\",\r\n        \"300\"\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        \"y1\",\r\n        String(outer)\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        \"x2\",\r\n        \"300\"\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n        \"y2\",\r\n        String(inner)\r\n      );\r\n\r\n\r\n      line.setAttribute(\r\n\r\n        \"transform\",\r\n\r\n        `rotate(${angle} 300 300)`\r\n\r\n      );\r\n\r\n\r\n      if (major) {\r\n\r\n        line.setAttribute(\r\n\r\n          \"class\",\r\n\r\n          \"ps360__tick ps360__tick--major\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if (medium) {\r\n\r\n        line.setAttribute(\r\n\r\n          \"class\",\r\n\r\n          \"ps360__tick ps360__tick--medium\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        line.setAttribute(\r\n\r\n          \"class\",\r\n\r\n          \"ps360__tick\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      tickGroup.appendChild(\r\n        line\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       THREE.JS\r\n    ====================================================== *\/\r\n\r\n    let renderer;\r\n\r\n\r\n    try {\r\n\r\n      renderer =\r\n\r\n        new THREE.WebGLRenderer({\r\n\r\n          canvas:\r\n            canvas,\r\n\r\n          antialias:\r\n            true,\r\n\r\n          alpha:\r\n            false,\r\n\r\n          powerPreference:\r\n            \"high-performance\"\r\n\r\n        });\r\n\r\n    }\r\n\r\n    catch (error) {\r\n\r\n      console.error(\r\n\r\n        \"PanoSky 360: WebGL unavailable.\",\r\n\r\n        error\r\n\r\n      );\r\n\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    renderer.outputColorSpace =\r\n      THREE.SRGBColorSpace;\r\n\r\n\r\n\r\n    const isMobile = () =>\r\n\r\n      window.matchMedia(\r\n        \"(max-width: 767px)\"\r\n      ).matches;\r\n\r\n\r\n\r\n    function updatePixelRatio() {\r\n\r\n      renderer.setPixelRatio(\r\n\r\n        Math.min(\r\n\r\n          window.devicePixelRatio || 1,\r\n\r\n          isMobile()\r\n            ? 1.2\r\n            : 1.8\r\n\r\n        )\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    updatePixelRatio();\r\n\r\n\r\n\r\n    const scene =\r\n      new THREE.Scene();\r\n\r\n\r\n\r\n    const camera =\r\n\r\n      new THREE.PerspectiveCamera(\r\n\r\n        SETTINGS.fieldOfView,\r\n\r\n        1,\r\n\r\n        0.1,\r\n\r\n        1200\r\n\r\n      );\r\n\r\n\r\n\r\n    const geometry =\r\n\r\n      new THREE.SphereGeometry(\r\n\r\n        500,\r\n\r\n        isMobile()\r\n          ? 56\r\n          : 72,\r\n\r\n        isMobile()\r\n          ? 36\r\n          : 48\r\n\r\n      );\r\n\r\n\r\n    geometry.scale(\r\n      -1,\r\n      1,\r\n      1\r\n    );\r\n\r\n\r\n\r\n    const material =\r\n\r\n      new THREE.MeshBasicMaterial({\r\n\r\n        color:\r\n          0xffffff\r\n\r\n      });\r\n\r\n\r\n\r\n    const sphere =\r\n\r\n      new THREE.Mesh(\r\n\r\n        geometry,\r\n\r\n        material\r\n\r\n      );\r\n\r\n\r\n    scene.add(\r\n      sphere\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       PANORAMA\r\n    ====================================================== *\/\r\n\r\n    const loader =\r\n      new THREE.TextureLoader();\r\n\r\n\r\n    loader.setCrossOrigin(\r\n      \"anonymous\"\r\n    );\r\n\r\n\r\n    loader.load(\r\n\r\n      SETTINGS.panoramaUrl,\r\n\r\n\r\n      function (texture) {\r\n\r\n        texture.colorSpace =\r\n          THREE.SRGBColorSpace;\r\n\r\n\r\n        texture.minFilter =\r\n          THREE.LinearFilter;\r\n\r\n\r\n        texture.magFilter =\r\n          THREE.LinearFilter;\r\n\r\n\r\n        material.map =\r\n          texture;\r\n\r\n\r\n        material.needsUpdate =\r\n          true;\r\n\r\n      },\r\n\r\n\r\n      undefined,\r\n\r\n\r\n      function (error) {\r\n\r\n        console.error(\r\n\r\n          \"PanoSky panorama could not load.\",\r\n\r\n          error\r\n\r\n        );\r\n\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       STATE\r\n    ====================================================== *\/\r\n\r\n    let yawDegrees =\r\n      SETTINGS.initialYawDegrees;\r\n\r\n\r\n    let pitchDegrees =\r\n      SETTINGS.initialPitchDegrees;\r\n\r\n\r\n    let horizonFramingDegrees =\r\n      0;\r\n\r\n\r\n    let lastFrameTime =\r\n      performance.now();\r\n\r\n\r\n    let resumeAutoAt =\r\n      0;\r\n\r\n\r\n    let isVisible =\r\n      true;\r\n\r\n\r\n    let lastPageScrollY =\r\n      window.scrollY;\r\n\r\n\r\n    let pendingPageScrollDegrees =\r\n      0;\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       DRAG STATE\r\n    ====================================================== *\/\r\n\r\n    const drag = {\r\n\r\n      mouseDown:\r\n        false,\r\n\r\n\r\n      touchActive:\r\n        false,\r\n\r\n\r\n      axis:\r\n        null,\r\n\r\n\r\n      startX:\r\n        0,\r\n\r\n\r\n      startY:\r\n        0,\r\n\r\n\r\n      lastX:\r\n        0,\r\n\r\n\r\n      lastY:\r\n        0,\r\n\r\n\r\n      lastTouchEndAt:\r\n        0\r\n\r\n    };\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       RESPONSIVE PORTAL X\r\n    ====================================================== *\/\r\n\r\n    function getPortalXPercent() {\r\n\r\n      const css =\r\n        getComputedStyle(\r\n          root\r\n        );\r\n\r\n\r\n      let property =\r\n        \"--portal-x-desktop\";\r\n\r\n\r\n      if (\r\n        window.innerWidth <= 767\r\n      ) {\r\n\r\n        property =\r\n          \"--portal-x-mobile\";\r\n\r\n      }\r\n\r\n      else if (\r\n        window.innerWidth <= 1024\r\n      ) {\r\n\r\n        property =\r\n          \"--portal-x-tablet\";\r\n\r\n      }\r\n\r\n\r\n      const value =\r\n\r\n        parseFloat(\r\n\r\n          css.getPropertyValue(\r\n            property\r\n          )\r\n\r\n        );\r\n\r\n\r\n      return (\r\n\r\n        Number.isFinite(value)\r\n          ? value\r\n          : 50\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       RESPONSIVE PORTAL Y\r\n    ====================================================== *\/\r\n\r\n    function getPortalYPercent() {\r\n\r\n      const css =\r\n        getComputedStyle(\r\n          root\r\n        );\r\n\r\n\r\n      let property =\r\n        \"--portal-y-desktop\";\r\n\r\n\r\n      if (\r\n        window.innerWidth <= 767\r\n      ) {\r\n\r\n        property =\r\n          \"--portal-y-mobile\";\r\n\r\n      }\r\n\r\n      else if (\r\n        window.innerWidth <= 1024\r\n      ) {\r\n\r\n        property =\r\n          \"--portal-y-tablet\";\r\n\r\n      }\r\n\r\n\r\n      const value =\r\n\r\n        parseFloat(\r\n\r\n          css.getPropertyValue(\r\n            property\r\n          )\r\n\r\n        );\r\n\r\n\r\n      return (\r\n\r\n        Number.isFinite(value)\r\n          ? value\r\n          : 50\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       HORIZON FINE TUNE\r\n    ====================================================== *\/\r\n\r\n    function getHorizonFineTune() {\r\n\r\n      if (\r\n        window.innerWidth <= 767\r\n      ) {\r\n\r\n        return (\r\n          SETTINGS.horizonFineTuneMobile || 0\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if (\r\n        window.innerWidth <= 1024\r\n      ) {\r\n\r\n        return (\r\n          SETTINGS.horizonFineTuneTablet || 0\r\n        );\r\n\r\n      }\r\n\r\n\r\n      return (\r\n        SETTINGS.horizonFineTuneDesktop || 0\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       HORIZON ALIGNMENT\r\n    ====================================================== *\/\r\n\r\n    function updateHorizonFraming() {\r\n\r\n      if (\r\n        !SETTINGS.alignHorizonToWindowCenter\r\n      ) {\r\n\r\n        horizonFramingDegrees =\r\n          0;\r\n\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      const portalY =\r\n\r\n        clamp(\r\n\r\n          getPortalYPercent() \/ 100,\r\n\r\n          0.05,\r\n\r\n          0.95\r\n\r\n        );\r\n\r\n\r\n      const screenOffset =\r\n\r\n        (portalY - 0.5) * 2;\r\n\r\n\r\n\r\n      const halfFovRadians =\r\n\r\n        THREE.MathUtils.degToRad(\r\n\r\n          SETTINGS.fieldOfView \/ 2\r\n\r\n        );\r\n\r\n\r\n\r\n      const requiredPitchRadians =\r\n\r\n        Math.atan(\r\n\r\n          screenOffset *\r\n\r\n          Math.tan(\r\n            halfFovRadians\r\n          )\r\n\r\n        );\r\n\r\n\r\n\r\n      horizonFramingDegrees =\r\n\r\n        THREE.MathUtils.radToDeg(\r\n\r\n          requiredPitchRadians\r\n\r\n        )\r\n\r\n        +\r\n\r\n        getHorizonFineTune();\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       NEW:\r\n       RESPONSIVE HORIZONTAL ALIGNMENT SETTINGS\r\n    ====================================================== *\/\r\n\r\n    function getProjectionAlignmentStrength() {\r\n\r\n      if (\r\n        window.innerWidth <= 767\r\n      ) {\r\n\r\n        return (\r\n          SETTINGS\r\n            .projectionAlignmentStrengthMobile\r\n          || 0\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if (\r\n        window.innerWidth <= 1024\r\n      ) {\r\n\r\n        return (\r\n          SETTINGS\r\n            .projectionAlignmentStrengthTablet\r\n          || 0\r\n        );\r\n\r\n      }\r\n\r\n\r\n      return (\r\n        SETTINGS\r\n          .projectionAlignmentStrengthDesktop\r\n        || 0\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    function getProjectionFineTune() {\r\n\r\n      if (\r\n        window.innerWidth <= 767\r\n      ) {\r\n\r\n        return (\r\n          SETTINGS\r\n            .projectionFineTuneMobile\r\n          || 0\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if (\r\n        window.innerWidth <= 1024\r\n      ) {\r\n\r\n        return (\r\n          SETTINGS\r\n            .projectionFineTuneTablet\r\n          || 0\r\n        );\r\n\r\n      }\r\n\r\n\r\n      return (\r\n        SETTINGS\r\n          .projectionFineTuneDesktop\r\n        || 0\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       NEW:\r\n       ALIGN PERSPECTIVE CENTER WITH WINDOW\r\n\r\n       This is different from changing yaw.\r\n\r\n       Yaw changes what direction we look.\r\n\r\n       ViewOffset changes WHERE the optical center\r\n       of the perspective projection appears.\r\n\r\n       Therefore the right-side portal no longer sits\r\n       in the strongly stretched side of the projection.\r\n    ====================================================== *\/\r\n\r\n    function updateHorizontalProjectionAlignment(\r\n      width,\r\n      height\r\n    ) {\r\n\r\n      \/*\r\n       * Always start from normal camera projection.\r\n       *\/\r\n\r\n      camera.clearViewOffset();\r\n\r\n\r\n      camera.aspect =\r\n        width \/ height;\r\n\r\n\r\n      camera.updateProjectionMatrix();\r\n\r\n\r\n\r\n      if (\r\n        !SETTINGS.alignProjectionToWindowX\r\n      ) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      const strength =\r\n        getProjectionAlignmentStrength();\r\n\r\n\r\n      if (\r\n        strength === 0\r\n      ) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n\r\n      \/*\r\n       * Example desktop:\r\n       *\r\n       * portal X = 68%\r\n       *\r\n       * difference from screen center = +18%\r\n       *\r\n       * We offset the virtual camera crop in the\r\n       * opposite direction so its optical center\r\n       * appears at +18% on the rendered canvas.\r\n       *\/\r\n\r\n      const portalX =\r\n        getPortalXPercent();\r\n\r\n\r\n      const fineTune =\r\n        getProjectionFineTune();\r\n\r\n\r\n      const desiredOffsetPercent =\r\n\r\n        (\r\n          portalX\r\n          -\r\n          50\r\n          +\r\n          fineTune\r\n        )\r\n\r\n        *\r\n\r\n        strength;\r\n\r\n\r\n\r\n      const viewOffsetX =\r\n\r\n        -(\r\n\r\n          desiredOffsetPercent\r\n          \/\r\n          100\r\n\r\n        )\r\n\r\n        *\r\n\r\n        width;\r\n\r\n\r\n\r\n      camera.setViewOffset(\r\n\r\n        width,\r\n\r\n        height,\r\n\r\n        viewOffsetX,\r\n\r\n        0,\r\n\r\n        width,\r\n\r\n        height\r\n\r\n      );\r\n\r\n\r\n      camera.updateProjectionMatrix();\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CAMERA ORIENTATION\r\n    ====================================================== *\/\r\n\r\n    function updatePanoramaCamera() {\r\n\r\n      pitchDegrees =\r\n\r\n        clamp(\r\n\r\n          pitchDegrees,\r\n\r\n          -SETTINGS.maximumPitchDegrees,\r\n\r\n          SETTINGS.maximumPitchDegrees\r\n\r\n        );\r\n\r\n\r\n\r\n      const effectivePitch =\r\n\r\n        clamp(\r\n\r\n          pitchDegrees\r\n          +\r\n          horizonFramingDegrees,\r\n\r\n          -85,\r\n\r\n          85\r\n\r\n        );\r\n\r\n\r\n\r\n      const phi =\r\n\r\n        THREE.MathUtils.degToRad(\r\n\r\n          90 -\r\n          effectivePitch\r\n\r\n        );\r\n\r\n\r\n\r\n      const theta =\r\n\r\n        THREE.MathUtils.degToRad(\r\n          yawDegrees\r\n        );\r\n\r\n\r\n\r\n      const radius =\r\n        10;\r\n\r\n\r\n\r\n      camera.lookAt(\r\n\r\n        radius *\r\n        Math.sin(phi) *\r\n        Math.cos(theta),\r\n\r\n\r\n        radius *\r\n        Math.cos(phi),\r\n\r\n\r\n        radius *\r\n        Math.sin(phi) *\r\n        Math.sin(theta)\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CARDINAL RADIUS\r\n    ====================================================== *\/\r\n\r\n    function getCardinalRadius() {\r\n\r\n      const css =\r\n        getComputedStyle(\r\n          root\r\n        );\r\n\r\n\r\n      let property =\r\n        \"--cardinal-radius-desktop\";\r\n\r\n\r\n      if (\r\n        window.innerWidth <= 767\r\n      ) {\r\n\r\n        property =\r\n          \"--cardinal-radius-mobile\";\r\n\r\n      }\r\n\r\n      else if (\r\n        window.innerWidth <= 1024\r\n      ) {\r\n\r\n        property =\r\n          \"--cardinal-radius-tablet\";\r\n\r\n      }\r\n\r\n\r\n      return (\r\n\r\n        parseFloat(\r\n\r\n          css.getPropertyValue(\r\n            property\r\n          )\r\n\r\n        )\r\n\r\n        ||\r\n\r\n        44\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       NAVIGATION ORIENTATION\r\n    ====================================================== *\/\r\n\r\n    function updateOrientationUI() {\r\n\r\n      tickGroup.setAttribute(\r\n\r\n        \"transform\",\r\n\r\n        `rotate(${-yawDegrees} 300 300)`\r\n\r\n      );\r\n\r\n\r\n      const radius =\r\n        getCardinalRadius();\r\n\r\n\r\n      directions.forEach(\r\n\r\n        function (direction) {\r\n\r\n          const baseAngle =\r\n\r\n            Number(\r\n\r\n              direction.dataset.angle\r\n              ||\r\n              0\r\n\r\n            );\r\n\r\n\r\n          const orientation =\r\n\r\n            normalizeDegrees(\r\n\r\n              baseAngle\r\n              -\r\n              yawDegrees\r\n\r\n            );\r\n\r\n\r\n          const radians =\r\n\r\n            THREE.MathUtils.degToRad(\r\n              orientation\r\n            );\r\n\r\n\r\n          const x =\r\n\r\n            50\r\n            +\r\n            Math.sin(radians)\r\n            *\r\n            radius;\r\n\r\n\r\n          const y =\r\n\r\n            50\r\n            -\r\n            Math.cos(radians)\r\n            *\r\n            radius;\r\n\r\n\r\n          direction.style.left =\r\n            `${x}%`;\r\n\r\n\r\n          direction.style.top =\r\n            `${y}%`;\r\n\r\n        }\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       RESIZE\r\n    ====================================================== *\/\r\n\r\n    function resizeRenderer() {\r\n\r\n      const rect =\r\n        root.getBoundingClientRect();\r\n\r\n\r\n      const width =\r\n\r\n        Math.max(\r\n\r\n          2,\r\n\r\n          Math.round(\r\n            rect.width\r\n          )\r\n\r\n        );\r\n\r\n\r\n      const height =\r\n\r\n        Math.max(\r\n\r\n          2,\r\n\r\n          Math.round(\r\n            rect.height\r\n          )\r\n\r\n        );\r\n\r\n\r\n      updatePixelRatio();\r\n\r\n\r\n      renderer.setSize(\r\n\r\n        width,\r\n\r\n        height,\r\n\r\n        false\r\n\r\n      );\r\n\r\n\r\n\r\n      \/*\r\n       * First calculate the vertical horizon framing.\r\n       *\/\r\n\r\n      updateHorizonFraming();\r\n\r\n\r\n\r\n      \/*\r\n       * Then align the actual perspective projection\r\n       * horizontally with the round portal.\r\n       *\/\r\n\r\n      updateHorizontalProjectionAlignment(\r\n\r\n        width,\r\n\r\n        height\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       INTERACTION HELPERS\r\n    ====================================================== *\/\r\n\r\n    function markInteractionFinished() {\r\n\r\n      resumeAutoAt =\r\n\r\n        performance.now()\r\n\r\n        +\r\n\r\n        SETTINGS.autoResumeDelayMs;\r\n\r\n    }\r\n\r\n\r\n\r\n    function isHorizontalDragging() {\r\n\r\n      return (\r\n\r\n        drag.axis === \"x\"\r\n\r\n        &&\r\n\r\n        (\r\n          drag.mouseDown\r\n          ||\r\n          drag.touchActive\r\n        )\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    function beginTouchDrag(\r\n      x,\r\n      y\r\n    ) {\r\n\r\n      drag.touchActive =\r\n        true;\r\n\r\n\r\n      drag.axis =\r\n        null;\r\n\r\n\r\n      drag.startX =\r\n        drag.lastX =\r\n        x;\r\n\r\n\r\n      drag.startY =\r\n        drag.lastY =\r\n        y;\r\n\r\n    }\r\n\r\n\r\n\r\n    function resolveTouchAxis(\r\n      x,\r\n      y\r\n    ) {\r\n\r\n      if (\r\n        drag.axis\r\n      ) {\r\n\r\n        return drag.axis;\r\n\r\n      }\r\n\r\n\r\n      const totalX =\r\n\r\n        x -\r\n        drag.startX;\r\n\r\n\r\n      const totalY =\r\n\r\n        y -\r\n        drag.startY;\r\n\r\n\r\n\r\n      if (\r\n\r\n        Math.hypot(\r\n          totalX,\r\n          totalY\r\n        )\r\n\r\n        <\r\n\r\n        SETTINGS.gestureAxisThresholdPx\r\n\r\n      ) {\r\n\r\n        return null;\r\n\r\n      }\r\n\r\n\r\n\r\n      const horizontalIntent =\r\n\r\n        Math.abs(totalX)\r\n\r\n        >\r\n\r\n        Math.abs(totalY)\r\n\r\n        *\r\n\r\n        SETTINGS.horizontalIntentRatio;\r\n\r\n\r\n\r\n      drag.axis =\r\n\r\n        horizontalIntent\r\n          ? \"x\"\r\n          : \"y\";\r\n\r\n\r\n\r\n      if (\r\n        drag.axis === \"x\"\r\n      ) {\r\n\r\n        resumeAutoAt =\r\n          Number.POSITIVE_INFINITY;\r\n\r\n\r\n        root.classList.add(\r\n          \"is-dragging\"\r\n        );\r\n\r\n      }\r\n\r\n\r\n      return drag.axis;\r\n\r\n    }\r\n\r\n\r\n\r\n    function moveHorizontalTouch(\r\n      x,\r\n      y\r\n    ) {\r\n\r\n      const deltaX =\r\n\r\n        x -\r\n        drag.lastX;\r\n\r\n\r\n      drag.lastX =\r\n        x;\r\n\r\n\r\n      drag.lastY =\r\n        y;\r\n\r\n\r\n      yawDegrees -=\r\n\r\n        deltaX\r\n\r\n        *\r\n\r\n        SETTINGS.dragDegreesPerPixel;\r\n\r\n    }\r\n\r\n\r\n\r\n    function finishTouchDrag() {\r\n\r\n      const wasHorizontal =\r\n\r\n        drag.axis === \"x\";\r\n\r\n\r\n      drag.lastTouchEndAt =\r\n        performance.now();\r\n\r\n\r\n      drag.touchActive =\r\n        false;\r\n\r\n\r\n      drag.axis =\r\n        null;\r\n\r\n\r\n      root.classList.remove(\r\n        \"is-dragging\"\r\n      );\r\n\r\n\r\n      if (wasHorizontal) {\r\n\r\n        markInteractionFinished();\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE TOUCH\r\n    ====================================================== *\/\r\n\r\n    root.addEventListener(\r\n\r\n      \"touchstart\",\r\n\r\n      function (event) {\r\n\r\n        if (\r\n          event.touches.length !== 1\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        const touch =\r\n          event.touches[0];\r\n\r\n\r\n        beginTouchDrag(\r\n\r\n          touch.clientX,\r\n\r\n          touch.clientY\r\n\r\n        );\r\n\r\n      },\r\n\r\n      {\r\n        passive: true\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    root.addEventListener(\r\n\r\n      \"touchmove\",\r\n\r\n      function (event) {\r\n\r\n        if (\r\n\r\n          !drag.touchActive\r\n\r\n          ||\r\n\r\n          event.touches.length !== 1\r\n\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        const touch =\r\n          event.touches[0];\r\n\r\n\r\n        const axis =\r\n\r\n          resolveTouchAxis(\r\n\r\n            touch.clientX,\r\n\r\n            touch.clientY\r\n\r\n          );\r\n\r\n\r\n\r\n        \/*\r\n         * Vertical or undecided:\r\n         * browser keeps native page scrolling.\r\n         *\/\r\n\r\n        if (\r\n          axis !== \"x\"\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n\r\n        \/*\r\n         * Horizontal confirmed.\r\n         *\/\r\n\r\n        if (\r\n          event.cancelable\r\n        ) {\r\n\r\n          event.preventDefault();\r\n\r\n        }\r\n\r\n\r\n        moveHorizontalTouch(\r\n\r\n          touch.clientX,\r\n\r\n          touch.clientY\r\n\r\n        );\r\n\r\n      },\r\n\r\n      {\r\n        passive: false\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    root.addEventListener(\r\n\r\n      \"touchend\",\r\n\r\n      function (event) {\r\n\r\n        if (\r\n\r\n          drag.touchActive\r\n\r\n          &&\r\n\r\n          event.touches.length === 0\r\n\r\n        ) {\r\n\r\n          finishTouchDrag();\r\n\r\n        }\r\n\r\n      },\r\n\r\n      {\r\n        passive: true\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    root.addEventListener(\r\n\r\n      \"touchcancel\",\r\n\r\n      function () {\r\n\r\n        if (\r\n          drag.touchActive\r\n        ) {\r\n\r\n          finishTouchDrag();\r\n\r\n        }\r\n\r\n      },\r\n\r\n      {\r\n        passive: true\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       DESKTOP MOUSE\r\n    ====================================================== *\/\r\n\r\n    function onMouseMove(event) {\r\n\r\n      if (\r\n\r\n        !drag.mouseDown\r\n\r\n        ||\r\n\r\n        (event.buttons & 1) !== 1\r\n\r\n      ) {\r\n\r\n        if (\r\n          drag.mouseDown\r\n        ) {\r\n\r\n          finishMouseDrag();\r\n\r\n        }\r\n\r\n\r\n        detachMouseListeners();\r\n\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n\r\n      const deltaX =\r\n\r\n        event.clientX -\r\n        drag.lastX;\r\n\r\n\r\n      const deltaY =\r\n\r\n        event.clientY -\r\n        drag.lastY;\r\n\r\n\r\n\r\n      drag.lastX =\r\n        event.clientX;\r\n\r\n\r\n      drag.lastY =\r\n        event.clientY;\r\n\r\n\r\n\r\n      yawDegrees -=\r\n\r\n        deltaX\r\n\r\n        *\r\n\r\n        SETTINGS.dragDegreesPerPixel;\r\n\r\n\r\n\r\n      pitchDegrees +=\r\n\r\n        deltaY\r\n\r\n        *\r\n\r\n        SETTINGS.desktopPitchDegreesPerPixel;\r\n\r\n\r\n\r\n      if (\r\n        event.cancelable\r\n      ) {\r\n\r\n        event.preventDefault();\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n\r\n    function finishMouseDrag() {\r\n\r\n      if (\r\n        !drag.mouseDown\r\n      ) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      drag.mouseDown =\r\n        false;\r\n\r\n\r\n      root.classList.remove(\r\n        \"is-dragging\"\r\n      );\r\n\r\n\r\n      markInteractionFinished();\r\n\r\n    }\r\n\r\n\r\n\r\n    function onMouseUp() {\r\n\r\n      finishMouseDrag();\r\n\r\n      detachMouseListeners();\r\n\r\n    }\r\n\r\n\r\n\r\n    function onWindowBlur() {\r\n\r\n      finishMouseDrag();\r\n\r\n      detachMouseListeners();\r\n\r\n    }\r\n\r\n\r\n\r\n    function attachMouseListeners() {\r\n\r\n      window.addEventListener(\r\n\r\n        \"mousemove\",\r\n\r\n        onMouseMove,\r\n\r\n        {\r\n          passive: false\r\n        }\r\n\r\n      );\r\n\r\n\r\n      window.addEventListener(\r\n\r\n        \"mouseup\",\r\n\r\n        onMouseUp,\r\n\r\n        {\r\n          passive: true\r\n        }\r\n\r\n      );\r\n\r\n\r\n      window.addEventListener(\r\n\r\n        \"blur\",\r\n\r\n        onWindowBlur,\r\n\r\n        {\r\n          passive: true\r\n        }\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    function detachMouseListeners() {\r\n\r\n      window.removeEventListener(\r\n        \"mousemove\",\r\n        onMouseMove\r\n      );\r\n\r\n\r\n      window.removeEventListener(\r\n        \"mouseup\",\r\n        onMouseUp\r\n      );\r\n\r\n\r\n      window.removeEventListener(\r\n        \"blur\",\r\n        onWindowBlur\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    root.addEventListener(\r\n\r\n      \"mousedown\",\r\n\r\n      function (event) {\r\n\r\n        if (\r\n          event.button !== 0\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        if (\r\n\r\n          performance.now()\r\n\r\n          -\r\n\r\n          drag.lastTouchEndAt\r\n\r\n          <\r\n\r\n          650\r\n\r\n        ) {\r\n\r\n          return;\r\n\r\n        }\r\n\r\n\r\n        drag.mouseDown =\r\n          true;\r\n\r\n\r\n        drag.startX =\r\n          drag.lastX =\r\n          event.clientX;\r\n\r\n\r\n        drag.startY =\r\n          drag.lastY =\r\n          event.clientY;\r\n\r\n\r\n        resumeAutoAt =\r\n          Number.POSITIVE_INFINITY;\r\n\r\n\r\n        root.classList.add(\r\n          \"is-dragging\"\r\n        );\r\n\r\n\r\n        attachMouseListeners();\r\n\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    root.addEventListener(\r\n\r\n      \"dragstart\",\r\n\r\n      function (event) {\r\n\r\n        event.preventDefault();\r\n\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       PAGE SCROLL \u2192 PANORAMA\r\n    ====================================================== *\/\r\n\r\n    function onPageScroll() {\r\n\r\n      const currentY =\r\n        window.scrollY;\r\n\r\n\r\n      const deltaY =\r\n\r\n        currentY -\r\n        lastPageScrollY;\r\n\r\n\r\n      lastPageScrollY =\r\n        currentY;\r\n\r\n\r\n\r\n      if (\r\n        !SETTINGS.pageScrollRotationEnabled\r\n      ) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if (\r\n        isHorizontalDragging()\r\n      ) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if (\r\n\r\n        SETTINGS.pageScrollOnlyWhileVisible\r\n\r\n        &&\r\n\r\n        !isVisible\r\n\r\n      ) {\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n\r\n      pendingPageScrollDegrees +=\r\n\r\n        deltaY\r\n\r\n        *\r\n\r\n        SETTINGS.pageScrollDegreesPerPixel\r\n\r\n        *\r\n\r\n        SETTINGS.pageScrollDirection;\r\n\r\n    }\r\n\r\n\r\n\r\n    window.addEventListener(\r\n\r\n      \"scroll\",\r\n\r\n      onPageScroll,\r\n\r\n      {\r\n        passive: true\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       VISIBILITY\r\n    ====================================================== *\/\r\n\r\n    if (\r\n      \"IntersectionObserver\" in window\r\n    ) {\r\n\r\n      const intersectionObserver =\r\n\r\n        new IntersectionObserver(\r\n\r\n          function (entries) {\r\n\r\n            isVisible =\r\n\r\n              Boolean(\r\n\r\n                entries[0]\r\n\r\n                &&\r\n\r\n                entries[0].isIntersecting\r\n\r\n              );\r\n\r\n          },\r\n\r\n          {\r\n            rootMargin:\r\n              \"120px 0px\",\r\n\r\n            threshold:\r\n              0\r\n          }\r\n\r\n        );\r\n\r\n\r\n      intersectionObserver.observe(\r\n        root\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       RESIZE\r\n    ====================================================== *\/\r\n\r\n    function onWindowResize() {\r\n\r\n      resizeRenderer();\r\n\r\n    }\r\n\r\n\r\n\r\n    window.addEventListener(\r\n\r\n      \"resize\",\r\n\r\n      onWindowResize,\r\n\r\n      {\r\n        passive: true\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    if (\r\n      \"ResizeObserver\" in window\r\n    ) {\r\n\r\n      const resizeObserver =\r\n\r\n        new ResizeObserver(\r\n\r\n          function () {\r\n\r\n            resizeRenderer();\r\n\r\n          }\r\n\r\n        );\r\n\r\n\r\n      resizeObserver.observe(\r\n        root\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       ANIMATION\r\n    ====================================================== *\/\r\n\r\n    function animate(now) {\r\n\r\n      const deltaSeconds =\r\n\r\n        clamp(\r\n\r\n          (\r\n            now -\r\n            lastFrameTime\r\n          )\r\n\r\n          \/\r\n\r\n          1000,\r\n\r\n          0,\r\n\r\n          0.05\r\n\r\n        );\r\n\r\n\r\n      lastFrameTime =\r\n        now;\r\n\r\n\r\n\r\n      \/* PAGE SCROLL ROTATION *\/\r\n\r\n      if (\r\n\r\n        pendingPageScrollDegrees !== 0\r\n\r\n      ) {\r\n\r\n        yawDegrees +=\r\n          pendingPageScrollDegrees;\r\n\r\n\r\n        pendingPageScrollDegrees =\r\n          0;\r\n\r\n      }\r\n\r\n\r\n\r\n      \/* AUTO ROTATION *\/\r\n\r\n      if (\r\n\r\n        isVisible\r\n\r\n        &&\r\n\r\n        SETTINGS.autoRotateEnabled\r\n\r\n        &&\r\n\r\n        !isHorizontalDragging()\r\n\r\n        &&\r\n\r\n        !drag.mouseDown\r\n\r\n        &&\r\n\r\n        now >= resumeAutoAt\r\n\r\n      ) {\r\n\r\n        yawDegrees +=\r\n\r\n          SETTINGS\r\n            .autoRotateDegreesPerSecond\r\n\r\n          *\r\n\r\n          deltaSeconds;\r\n\r\n      }\r\n\r\n\r\n\r\n      updatePanoramaCamera();\r\n\r\n\r\n      updateOrientationUI();\r\n\r\n\r\n\r\n      if (\r\n        isVisible\r\n      ) {\r\n\r\n        renderer.render(\r\n          scene,\r\n          camera\r\n        );\r\n\r\n      }\r\n\r\n\r\n      requestAnimationFrame(\r\n        animate\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       INITIALIZE\r\n    ====================================================== *\/\r\n\r\n    resizeRenderer();\r\n\r\n\r\n    updateHorizonFraming();\r\n\r\n\r\n    updatePanoramaCamera();\r\n\r\n\r\n    updateOrientationUI();\r\n\r\n\r\n    requestAnimationFrame(\r\n      animate\r\n    );\r\n\r\n\r\n\r\n    requestAnimationFrame(\r\n\r\n      function () {\r\n\r\n        resizeRenderer();\r\n\r\n      }\r\n\r\n    );\r\n\r\n\r\n\r\n    window.setTimeout(\r\n\r\n      function () {\r\n\r\n        resizeRenderer();\r\n\r\n      },\r\n\r\n      300\r\n\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     BOOT\r\n  ========================================================= *\/\r\n\r\n  async function boot() {\r\n\r\n    const root =\r\n\r\n      document.getElementById(\r\n        \"panosky-360-portal\"\r\n      );\r\n\r\n\r\n    if (!root) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      root.dataset.ps360Ready === \"true\"\r\n    ) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    try {\r\n\r\n      const THREE =\r\n        await ensureThree();\r\n\r\n\r\n      initWidget(\r\n        root,\r\n        THREE\r\n      );\r\n\r\n    }\r\n\r\n    catch (error) {\r\n\r\n      console.error(\r\n\r\n        \"PanoSky 360 library failed to load.\",\r\n\r\n        error\r\n\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     NORMAL FRONTEND\r\n  ========================================================= *\/\r\n\r\n  if (\r\n    document.readyState === \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n\r\n      \"DOMContentLoaded\",\r\n\r\n      boot,\r\n\r\n      {\r\n        once: true\r\n      }\r\n\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    boot();\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     ELEMENTOR\r\n  ========================================================= *\/\r\n\r\n  window.addEventListener(\r\n\r\n    \"elementor\/frontend\/init\",\r\n\r\n    function () {\r\n\r\n      setTimeout(\r\n        boot,\r\n        100\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<div class=\"elementor-element elementor-element-f15fc22 panosky-hero-content e-flex e-con-boxed e-con e-parent\" data-id=\"f15fc22\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;background_motion_fx_scale_effect&quot;:&quot;yes&quot;,&quot;background_motion_fx_scale_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:3,&quot;sizes&quot;:[]},&quot;background_motion_fx_scale_range&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:53,&quot;end&quot;:100}},&quot;position&quot;:&quot;absolute&quot;,&quot;background_motion_fx_scale_direction&quot;:&quot;out-in&quot;,&quot;background_motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-134b6dc e-con-full e-flex e-con e-child\" data-id=\"134b6dc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fefc70a elementor-widget elementor-widget-heading\" data-id=\"fefc70a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Your Space, Engineered for the <span class=\"animated-global\">Digital World.<\/span>\n\n\n<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a171a23 elementor-widget elementor-widget-text-editor\" data-id=\"a171a23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Panosky combines premium 360\u00b0 capture, immersive virtual tours, and custom spatial web experiences to transform physical environments into powerful digital experiences.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-174976b elementor-hidden-mobile elementor-widget elementor-widget-heading\" data-id=\"174976b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"pano-dot\">&bull;<\/span> From capture to interface to launch <span class=\"pano-dot\">&bull;<\/span> one complete spatial pipeline.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9824d50 e-con-full e-flex e-con e-child\" data-id=\"9824d50\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-34ebdea e-con e-atomic-element e-flexbox-base e-34ebdea-727c185 \" data-id=\"34ebdea\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"34ebdea\" data-e-type=\"e-flexbox\" data-id=\"34ebdea\">\n    <div class=\"elementor-element elementor-element-af05058 ps-map-hero e-flex e-con-boxed e-con e-parent\" data-id=\"af05058\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a81f96a e-con-full e-flex e-con e-child\" data-id=\"a81f96a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-013eff1 elementor-widget elementor-widget-heading\" data-id=\"013eff1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">- OUR STORY<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c96d73d elementor-widget elementor-widget-heading\" data-id=\"c96d73d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">The Foundation<br>Behind <span class=\"animated-global\">PanoSky.<\/span><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53b5701 elementor-widget elementor-widget-text-editor\" data-id=\"53b5701\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Before PanoSky, our founder\u2019s cinematic and animation work was directly featured by Porsche, Will Smith, Sea-Doo, and Artlist.<br data-start=\"170\" data-end=\"173\" \/>Today, that same creative standard shapes every PanoSky experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bebd889 e-con-full e-flex e-con e-child\" data-id=\"bebd889\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e8d80d elementor-widget elementor-widget-html\" data-id=\"1e8d80d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     PANOSKY \u2014 FEATURED WORK CARDS\r\n     VERSION: PSFC-V1\r\n\r\n     Paste this entire file into one Elementor HTML widget.\r\n\r\n     IMAGE CONTROL:\r\n     Replace each --card-image URL inside the four cards.\r\n     Adjust --image-x and --image-y to reposition each image.\r\n\r\n     HEIGHT CONTROL:\r\n     Desktop and mobile heights are at the top of .psfc-v1-wrap.\r\n     The default mobile height is 234px, exactly 60% of 390px.\r\n\r\n     ANIMATION:\r\n     The entrance animation runs only once per page load.\r\n     ========================================================= -->\r\n\r\n<div class=\"psfc-v1-wrap\">\r\n\r\n  <!-- 01 \u2014 PORSCHE -->\r\n  <article\r\n    class=\"psfc-v1-card\"\r\n    style=\"\r\n      --card-image: url('https:\/\/panosky-website-media.b-cdn.net\/Web%20Images%20and%20videos\/About%20contact\/Porche-car.jpg?auto=format&amp;fit=crop&amp;w=1200&amp;q=85');\r\n      --image-x: 60%;\r\n      --image-y: 50%;\r\n    \"\r\n  >\r\n    <div class=\"psfc-v1-image\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"psfc-v1-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"psfc-v1-content\">\r\n      <h3>Porsche<\/h3>\r\n      <span class=\"psfc-v1-line\" aria-hidden=\"true\"><\/span>\r\n      <p>\r\n        Featured for premium cinematic visuals shaped\r\n        by high-end production standards.\r\n      <\/p>\r\n    <\/div>\r\n  <\/article>\r\n\r\n  <!-- 02 \u2014 WILL SMITH -->\r\n  <article\r\n    class=\"psfc-v1-card\"\r\n    style=\"\r\n      --card-image: url('https:\/\/panosky-website-media.b-cdn.net\/Web%20Images%20and%20videos\/About%20contact\/Will-smith.jpg?auto=format&amp;fit=crop&amp;w=1200&amp;q=85');\r\n      --image-x: 67%;\r\n      --image-y: 50%;\r\n    \"\r\n  >\r\n    <div class=\"psfc-v1-image\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"psfc-v1-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"psfc-v1-content\">\r\n      <h3>Will Smith<\/h3>\r\n      <span class=\"psfc-v1-line\" aria-hidden=\"true\"><\/span>\r\n      <p>\r\n        Recognized through cinematic storytelling\r\n        work with strong visual impact.\r\n      <\/p>\r\n    <\/div>\r\n  <\/article>\r\n\r\n  <!-- 03 \u2014 SEA-DOO -->\r\n  <article\r\n    class=\"psfc-v1-card\"\r\n    style=\"\r\n      --card-image: url('https:\/\/panosky-website-media.b-cdn.net\/Web%20Images%20and%20videos\/About%20contact\/seedoo.jpg?auto=format&amp;fit=crop&amp;w=1200&amp;q=85');\r\n      --image-x: 60%;\r\n      --image-y: 50%;\r\n    \"\r\n  >\r\n    <div class=\"psfc-v1-image\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"psfc-v1-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"psfc-v1-content\">\r\n      <h3>Sea-Doo<\/h3>\r\n      <span class=\"psfc-v1-line\" aria-hidden=\"true\"><\/span>\r\n      <p>\r\n        Featured for immersive action-driven visuals\r\n        built around energy and performance.\r\n      <\/p>\r\n    <\/div>\r\n  <\/article>\r\n\r\n  <!-- 04 \u2014 ARTLIST -->\r\n  <article\r\n    class=\"psfc-v1-card\"\r\n    style=\"\r\n      --card-image: url('https:\/\/panosky-website-media.b-cdn.net\/Web%20Images%20and%20videos\/About%20contact\/Artlist.jpg?auto=format&amp;fit=crop&amp;w=1200&amp;q=85');\r\n      --image-x: 50%;\r\n      --image-y: 64%;\r\n    \"\r\n  >\r\n    <div class=\"psfc-v1-image\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"psfc-v1-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"psfc-v1-content\">\r\n      <h3>Artlist<\/h3>\r\n      <span class=\"psfc-v1-line\" aria-hidden=\"true\"><\/span>\r\n      <p>\r\n        Recognized for creative work driven by\r\n        cinematic quality, rhythm, and emotion.\r\n      <\/p>\r\n    <\/div>\r\n  <\/article>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* ==========================================================\r\n   PANOSKY FEATURED CARDS V1 \u2014 MAIN CONTROLS\r\n   ========================================================== *\/\r\n.psfc-v1-wrap {\r\n\r\n  \/* CARD SIZE CONTROLS *\/\r\n  --desktop-card-height: 300px;\r\n  --tablet-card-height: 260px;\r\n\r\n  \/*\r\n     MOBILE HEIGHT CONTROL\r\n     234px = 60% of the 390px desktop height.\r\n     Change only this value whenever you want.\r\n  *\/\r\n  --mobile-card-height: 200px;\r\n\r\n  \/* LAYOUT CONTROLS *\/\r\n  --grid-gap: 10px;\r\n  --card-radius: 12px;\r\n  --padding-x: 28px;\r\n  --padding-y: 30px;\r\n  --copy-width: 66%;\r\n\r\n  \/* TYPE CONTROLS *\/\r\n  --title-size: 32px;\r\n  --body-size: 14px;\r\n  --body-line-height: 1.62;\r\n\r\n  \/* TEXT SHADE CONTROLS *\/\r\n  --text-shade-strength: .96;\r\n  --text-shade-reach: 82%;\r\n\r\n  \/* ENTRANCE CONTROLS \u2014 inherited from your supplied cards *\/\r\n  --first-duration: 500ms;\r\n  --after-first-pause: 12ms;\r\n  --spread-duration: 850ms;\r\n  --spread-stagger: 140ms;\r\n  --first-blur: 24px;\r\n  --spread-blur: 13px;\r\n  --first-start-scale: .94;\r\n  --spread-start-scale: .90;\r\n  --entrance-ease: cubic-bezier(.16, 1, .3, 1);\r\n  --entrance-trigger: .12;\r\n\r\n  \/* HOVER \/ MOBILE-CENTER FOCUS CONTROLS *\/\r\n  --hover-scale: 1.02;\r\n  --mobile-active-scale: 1.02;\r\n  --focus-speed: 360ms;\r\n  --mobile-focus-range: 27;\r\n\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: var(--grid-gap);\r\n  padding: 0;\r\n  margin: 0;\r\n  overflow: visible !important;\r\n  background: transparent !important;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.psfc-v1-wrap *,\r\n.psfc-v1-wrap *::before,\r\n.psfc-v1-wrap *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ==========================================================\r\n   CARD\r\n   ========================================================== *\/\r\n.psfc-v1-card {\r\n  --card-image: none;\r\n  --image-x: 50%;\r\n  --image-y: 50%;\r\n  --spread-x: 0px;\r\n  --spread-y: 0px;\r\n\r\n  position: relative;\r\n  width: 100%;\r\n  height: var(--desktop-card-height);\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--card-radius);\r\n  background: #020914;\r\n  border: 1px solid rgba(166, 184, 210, .31);\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255, 255, 255, .045),\r\n    inset 0 -1px 0 rgba(0, 0, 0, .76),\r\n    0 10px 34px rgba(0, 0, 0, .09);\r\n\r\n  scale: 1;\r\n  transform-origin: center center;\r\n  transition:\r\n    scale var(--focus-speed) cubic-bezier(.16, 1, .3, 1),\r\n    border-color var(--focus-speed) ease,\r\n    box-shadow var(--focus-speed) ease;\r\n  will-change: transform, scale, opacity, filter;\r\n}\r\n\r\n\/* Fine inner border from the supplied design *\/\r\n.psfc-v1-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 8;\r\n  pointer-events: none;\r\n  border-radius: inherit;\r\n  padding: 1px;\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(201, 226, 255, .22),\r\n    rgba(99, 166, 255, .025) 32%,\r\n    rgba(0, 139, 255, .015) 70%,\r\n    rgba(80, 245, 255, .28)\r\n  );\r\n  -webkit-mask:\r\n    linear-gradient(#fff 0 0) content-box,\r\n    linear-gradient(#fff 0 0);\r\n  -webkit-mask-composite: xor;\r\n  mask-composite: exclude;\r\n}\r\n\r\n\/* Subtle blue lower edge from the supplied design *\/\r\n.psfc-v1-card::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: -3%;\r\n  bottom: 0;\r\n  z-index: 10;\r\n  width: 34%;\r\n  height: 1px;\r\n  pointer-events: none;\r\n  opacity: .62;\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(0, 139, 255, .25),\r\n    rgba(0, 139, 255, .74),\r\n    rgba(80, 245, 255, .94),\r\n    #e7fbff\r\n  );\r\n  box-shadow:\r\n    0 0 6px rgba(0, 157, 255, .34),\r\n    0 0 14px rgba(0, 139, 255, .16);\r\n}\r\n\r\n\/* ==========================================================\r\n   IMAGE\r\n   ========================================================== *\/\r\n.psfc-v1-image {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-image: var(--card-image);\r\n  background-size: cover;\r\n  background-position: var(--image-x) var(--image-y);\r\n  background-repeat: no-repeat;\r\n  transform: translate3d(0, 0, 0) scale(1.002);\r\n  transition: transform .8s cubic-bezier(.2, .8, .2, 1);\r\n}\r\n\r\n\/* ==========================================================\r\n   DARK SHADE BEHIND THE LEFT-ALIGNED TEXT\r\n   ========================================================== *\/\r\n.psfc-v1-shade {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(1, 7, 17, var(--text-shade-strength)) 0%,\r\n      rgba(1, 8, 19, .91) 20%,\r\n      rgba(1, 8, 19, .70) 42%,\r\n      rgba(1, 8, 19, .30) 63%,\r\n      transparent var(--text-shade-reach)\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(0, 5, 14, .68) 0%,\r\n      rgba(0, 5, 14, .12) 35%,\r\n      rgba(0, 5, 14, .08) 68%,\r\n      rgba(0, 5, 14, .58) 100%\r\n    ),\r\n    radial-gradient(\r\n      circle at 88% 86%,\r\n      rgba(0, 81, 222, .13),\r\n      transparent 43%\r\n    );\r\n}\r\n\r\n\/* ==========================================================\r\n   COPY\r\n   ========================================================== *\/\r\n.psfc-v1-content {\r\n  position: relative;\r\n  z-index: 4;\r\n  width: var(--copy-width);\r\n  height: 100%;\r\n  padding: var(--padding-y) 0 var(--padding-y) var(--padding-x);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.psfc-v1-content h3 {\r\n  margin: 0;\r\n  padding: 0;\r\n  color: #f6f4f0;\r\n  font-family:\r\n    var(--e-global-typography-primary-font-family, Georgia),\r\n    Georgia,\r\n    serif;\r\n  font-weight: var(--e-global-typography-primary-font-weight, 400);\r\n  font-size: var(--title-size);\r\n  line-height: 1.08;\r\n  letter-spacing: -.035em;\r\n  text-wrap: balance;\r\n  text-shadow: 0 2px 13px rgba(0, 0, 0, .94);\r\n}\r\n\r\n.psfc-v1-line {\r\n  display: block;\r\n  width: 26px;\r\n  height: 1px;\r\n  margin: 15px 0 17px;\r\n  flex: 0 0 auto;\r\n  background: linear-gradient(90deg, #4f80ff, #80b2ff);\r\n  box-shadow: 0 0 8px rgba(46, 119, 255, .32);\r\n}\r\n\r\n.psfc-v1-content p {\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  color: rgba(239, 243, 250, .78);\r\n  font-family:\r\n    var(--e-global-typography-text-font-family, Arial),\r\n    sans-serif;\r\n  font-weight: var(--e-global-typography-text-font-weight, 400);\r\n  font-size: var(--body-size);\r\n  line-height: var(--body-line-height);\r\n  letter-spacing: -.005em;\r\n  text-shadow:\r\n    0 1px 5px rgba(0, 0, 0, 1),\r\n    0 3px 14px rgba(0, 0, 0, .92);\r\n}\r\n\r\n\/* ==========================================================\r\n   DESKTOP + TABLET HOVER\r\n   ========================================================== *\/\r\n@media (min-width: 768px) {\r\n  .psfc-v1-wrap.psfc-v1-complete .psfc-v1-card:hover {\r\n    scale: var(--hover-scale);\r\n    z-index: 50;\r\n    border-color: rgba(127, 216, 255, .60);\r\n    box-shadow:\r\n      inset 0 1px 0 rgba(255, 255, 255, .09),\r\n      0 16px 42px rgba(0, 76, 180, .20),\r\n      0 0 32px rgba(0, 139, 255, .10);\r\n  }\r\n\r\n  .psfc-v1-wrap.psfc-v1-complete\r\n  .psfc-v1-card:hover .psfc-v1-image {\r\n    transform: translate3d(0, 0, 0) scale(1.035);\r\n  }\r\n\r\n  .psfc-v1-wrap.psfc-v1-complete\r\n  .psfc-v1-card:hover .psfc-v1-line {\r\n    box-shadow:\r\n      0 0 9px rgba(79, 143, 255, .75),\r\n      0 0 20px rgba(0, 139, 255, .32);\r\n  }\r\n}\r\n\r\n\/* ==========================================================\r\n   ONE-TIME ENTRANCE \u2014 INITIAL STATE\r\n   ========================================================== *\/\r\n.psfc-v1-wrap.psfc-v1-ready .psfc-v1-card:first-child {\r\n  opacity: 0;\r\n  filter: blur(var(--first-blur));\r\n  transform: scale(var(--first-start-scale));\r\n  z-index: 30;\r\n}\r\n\r\n.psfc-v1-wrap.psfc-v1-ready .psfc-v1-card:not(:first-child) {\r\n  opacity: 0;\r\n  filter: blur(var(--spread-blur));\r\n  transform:\r\n    translate3d(var(--spread-x), var(--spread-y), 0)\r\n    scale(var(--spread-start-scale));\r\n  z-index: 10;\r\n}\r\n\r\n.psfc-v1-wrap.psfc-v1-play .psfc-v1-card:first-child {\r\n  animation:\r\n    psfc-v1-first-resolve\r\n    var(--first-duration)\r\n    var(--entrance-ease)\r\n    forwards;\r\n}\r\n\r\n.psfc-v1-wrap.psfc-v1-play .psfc-v1-card:not(:first-child) {\r\n  animation:\r\n    psfc-v1-spread\r\n    var(--spread-duration)\r\n    var(--entrance-ease)\r\n    forwards;\r\n}\r\n\r\n.psfc-v1-wrap.psfc-v1-play .psfc-v1-card:nth-child(2) {\r\n  animation-delay: calc(var(--first-duration) + var(--after-first-pause));\r\n}\r\n\r\n.psfc-v1-wrap.psfc-v1-play .psfc-v1-card:nth-child(3) {\r\n  animation-delay: calc(\r\n    var(--first-duration) +\r\n    var(--after-first-pause) +\r\n    var(--spread-stagger)\r\n  );\r\n}\r\n\r\n.psfc-v1-wrap.psfc-v1-play .psfc-v1-card:nth-child(4) {\r\n  animation-delay: calc(\r\n    var(--first-duration) +\r\n    var(--after-first-pause) +\r\n    var(--spread-stagger) +\r\n    var(--spread-stagger)\r\n  );\r\n}\r\n\r\n@keyframes psfc-v1-first-resolve {\r\n  0% {\r\n    opacity: 0;\r\n    filter: blur(var(--first-blur));\r\n    transform: scale(var(--first-start-scale));\r\n  }\r\n\r\n  42% { opacity: 1; }\r\n\r\n  100% {\r\n    opacity: 1;\r\n    filter: blur(0);\r\n    transform: scale(1);\r\n  }\r\n}\r\n\r\n@keyframes psfc-v1-spread {\r\n  0% {\r\n    opacity: 0;\r\n    filter: blur(var(--spread-blur));\r\n    transform:\r\n      translate3d(var(--spread-x), var(--spread-y), 0)\r\n      scale(var(--spread-start-scale));\r\n  }\r\n\r\n  12% { opacity: .20; }\r\n  35% { opacity: .85; }\r\n\r\n  100% {\r\n    opacity: 1;\r\n    filter: blur(0);\r\n    transform: translate3d(0, 0, 0) scale(1);\r\n  }\r\n}\r\n\r\n\/* ==========================================================\r\n   TABLET \u2014 TWO COLUMNS\r\n   ========================================================== *\/\r\n@media (max-width: 1024px) and (min-width: 768px) {\r\n  .psfc-v1-wrap {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    --grid-gap: 14px;\r\n    --card-radius: 12px;\r\n    --padding-x: 25px;\r\n    --padding-y: 27px;\r\n    --copy-width: 59%;\r\n    --title-size: 30px;\r\n    --body-size: 14px;\r\n  }\r\n\r\n  .psfc-v1-card {\r\n    height: var(--tablet-card-height);\r\n  }\r\n}\r\n\r\n\/* ==========================================================\r\n   MOBILE \u2014 ONE COLUMN + 60% HEIGHT\r\n   ========================================================== *\/\r\n@media (max-width: 767px) {\r\n  \/* MOBILE: entrance animation disabled, grow\/focus remains active *\/\r\n  .psfc-v1-wrap.psfc-v1-ready .psfc-v1-card,\r\n  .psfc-v1-wrap.psfc-v1-play .psfc-v1-card {\r\n    opacity: 1 !important;\r\n    filter: none !important;\r\n    transform: none !important;\r\n    animation: none !important;\r\n  }\r\n\r\n  .psfc-v1-wrap {\r\n    grid-template-columns: 1fr;\r\n    --grid-gap: 14px;\r\n    --card-radius: 12px;\r\n    --padding-x: 22px;\r\n    --padding-y: 22px;\r\n    --copy-width: 68%;\r\n    --title-size: 27px;\r\n    --body-size: 13px;\r\n    --body-line-height: 1.48;\r\n  }\r\n\r\n  .psfc-v1-card {\r\n    width: 100%;\r\n    height: var(--mobile-card-height);\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  .psfc-v1-line {\r\n    width: 24px;\r\n    margin: 11px 0 12px;\r\n  }\r\n\r\n  .psfc-v1-wrap.psfc-v1-complete\r\n  .psfc-v1-card.psfc-v1-mobile-focus {\r\n    scale: var(--mobile-active-scale);\r\n    z-index: 50;\r\n    border-color: rgba(127, 216, 255, .60);\r\n    box-shadow:\r\n      inset 0 1px 0 rgba(255, 255, 255, .09),\r\n      0 15px 38px rgba(0, 76, 180, .18),\r\n      0 0 27px rgba(0, 139, 255, .11);\r\n  }\r\n\r\n  .psfc-v1-wrap.psfc-v1-complete\r\n  .psfc-v1-card.psfc-v1-mobile-focus .psfc-v1-image {\r\n    transform: translate3d(0, 0, 0) scale(1.035);\r\n  }\r\n\r\n  .psfc-v1-wrap.psfc-v1-complete\r\n  .psfc-v1-card.psfc-v1-mobile-focus .psfc-v1-line {\r\n    box-shadow:\r\n      0 0 9px rgba(79, 143, 255, .75),\r\n      0 0 20px rgba(0, 139, 255, .32);\r\n  }\r\n}\r\n\r\n@media (max-width: 430px) {\r\n  .psfc-v1-wrap {\r\n    --padding-x: 20px;\r\n    --padding-y: 20px;\r\n    --copy-width: 72%;\r\n    --title-size: 25px;\r\n    --body-size: 12.5px;\r\n  }\r\n}\r\n\r\n\/* ==========================================================\r\n   REDUCED MOTION\r\n   ========================================================== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  .psfc-v1-card {\r\n    opacity: 1 !important;\r\n    filter: none !important;\r\n    transform: none !important;\r\n    scale: 1 !important;\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const grids = document.querySelectorAll('.psfc-v1-wrap');\r\n\r\n  grids.forEach((grid) => {\r\n    if (grid.dataset.psfcInitialized === 'true') return;\r\n    grid.dataset.psfcInitialized = 'true';\r\n\r\n    const cards = Array.from(grid.querySelectorAll('.psfc-v1-card'));\r\n    if (!cards.length) return;\r\n\r\n    let entrancePlaying = false;\r\n    let entranceComplete = false;\r\n    let entranceArmed = true;\r\n    let completeTimer = null;\r\n    let resizeTimer = null;\r\n    let mobileRaf = null;\r\n\r\n    \/* Keep the true layout coordinates, then visually stack 02\u201304 on 01. *\/\r\n    function calculateSpread() {\r\n      const firstCard = cards[0];\r\n      const firstX = firstCard.offsetLeft;\r\n      const firstY = firstCard.offsetTop;\r\n\r\n      cards.forEach((card, index) => {\r\n        if (index === 0) return;\r\n\r\n        card.style.setProperty('--spread-x', `${firstX - card.offsetLeft}px`);\r\n        card.style.setProperty('--spread-y', `${firstY - card.offsetTop}px`);\r\n      });\r\n    }\r\n\r\n    function timeToMs(value) {\r\n      const cleanValue = value.trim();\r\n      if (cleanValue.endsWith('ms')) return parseFloat(cleanValue);\r\n      if (cleanValue.endsWith('s')) return parseFloat(cleanValue) * 1000;\r\n      return parseFloat(cleanValue) || 0;\r\n    }\r\n\r\n    function prepareEntrance() {\r\n      clearTimeout(completeTimer);\r\n      entrancePlaying = false;\r\n      entranceComplete = false;\r\n\r\n      cards.forEach((card) => {\r\n        card.classList.remove('psfc-v1-mobile-focus');\r\n      });\r\n\r\n      grid.classList.remove(\r\n        'psfc-v1-play',\r\n        'psfc-v1-complete',\r\n        'psfc-v1-ready'\r\n      );\r\n\r\n      calculateSpread();\r\n      void grid.offsetWidth;\r\n      grid.classList.add('psfc-v1-ready');\r\n      entranceArmed = true;\r\n    }\r\n\r\n    function playEntrance() {\r\n      if (!entranceArmed || entrancePlaying) return;\r\n\r\n      entranceArmed = false;\r\n      entrancePlaying = true;\r\n      entranceComplete = false;\r\n      calculateSpread();\r\n\r\n      requestAnimationFrame(() => {\r\n        requestAnimationFrame(() => {\r\n          grid.classList.add('psfc-v1-play');\r\n        });\r\n      });\r\n\r\n      const styles = getComputedStyle(grid);\r\n      const firstDuration = timeToMs(styles.getPropertyValue('--first-duration'));\r\n      const pause = timeToMs(styles.getPropertyValue('--after-first-pause'));\r\n      const spreadDuration = timeToMs(styles.getPropertyValue('--spread-duration'));\r\n      const stagger = timeToMs(styles.getPropertyValue('--spread-stagger'));\r\n\r\n      const total =\r\n        firstDuration +\r\n        pause +\r\n        spreadDuration +\r\n        (stagger * Math.max(cards.length - 2, 0));\r\n\r\n      completeTimer = window.setTimeout(() => {\r\n        entrancePlaying = false;\r\n        entranceComplete = true;\r\n        grid.classList.add('psfc-v1-complete');\r\n        grid.classList.remove('psfc-v1-ready', 'psfc-v1-play');\r\n\r\n        cards.forEach((card) => {\r\n          card.style.removeProperty('--spread-x');\r\n          card.style.removeProperty('--spread-y');\r\n        });\r\n\r\n        updateMobileFocus();\r\n      }, total + 80);\r\n    }\r\n\r\n    const initialStyles = getComputedStyle(grid);\r\n    let entranceTrigger = parseFloat(\r\n      initialStyles.getPropertyValue('--entrance-trigger')\r\n    );\r\n\r\n    if (!Number.isFinite(entranceTrigger)) entranceTrigger = .12;\r\n    entranceTrigger = Math.min(Math.max(entranceTrigger, .01), .95);\r\n\r\n    const entranceObserver = new IntersectionObserver((entries) => {\r\n      entries.forEach((entry) => {\r\n        if (!entry.isIntersecting) return;\r\n\r\n        if (entry.intersectionRatio >= entranceTrigger) {\r\n          playEntrance();\r\n\r\n          \/*\r\n             Stop observing after the first trigger.\r\n             The entrance therefore runs only once per page load.\r\n          *\/\r\n          entranceObserver.unobserve(grid);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: [0, entranceTrigger]\r\n    });\r\n\r\n    function updateMobileFocus() {\r\n      if (!window.matchMedia('(max-width: 767px)').matches) {\r\n        cards.forEach((card) => {\r\n          card.classList.remove('psfc-v1-mobile-focus');\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (!entranceComplete) {\r\n        cards.forEach((card) => {\r\n          card.classList.remove('psfc-v1-mobile-focus');\r\n        });\r\n        return;\r\n      }\r\n\r\n      const viewportCenter = window.innerHeight \/ 2;\r\n      const styles = getComputedStyle(grid);\r\n      const rangePercentage =\r\n        parseFloat(styles.getPropertyValue('--mobile-focus-range')) || 27;\r\n      const allowedDistance = window.innerHeight * (rangePercentage \/ 100);\r\n\r\n      let closestCard = null;\r\n      let closestDistance = Infinity;\r\n\r\n      cards.forEach((card) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const cardCenter = rect.top + (rect.height \/ 2);\r\n        const distance = Math.abs(viewportCenter - cardCenter);\r\n\r\n        if (distance < closestDistance) {\r\n          closestDistance = distance;\r\n          closestCard = card;\r\n        }\r\n      });\r\n\r\n      cards.forEach((card) => {\r\n        card.classList.toggle(\r\n          'psfc-v1-mobile-focus',\r\n          card === closestCard && closestDistance <= allowedDistance\r\n        );\r\n      });\r\n    }\r\n\r\n    function requestMobileUpdate() {\r\n      if (mobileRaf) return;\r\n\r\n      mobileRaf = requestAnimationFrame(() => {\r\n        mobileRaf = null;\r\n        updateMobileFocus();\r\n      });\r\n    }\r\n\r\n    const entranceEnabledForCurrentViewport = () =>\r\n      window.matchMedia('(min-width: 768px)').matches;\r\n\r\n    if (entranceEnabledForCurrentViewport()) {\r\n      prepareEntrance();\r\n      entranceObserver.observe(grid);\r\n    } else {\r\n      \/* Mobile: no entrance animation.\r\n         Mark as complete immediately so mobile center-focus still works. *\/\r\n      entranceArmed = false;\r\n      entrancePlaying = false;\r\n      entranceComplete = true;\r\n\r\n      grid.classList.remove(\r\n        'psfc-v1-ready',\r\n        'psfc-v1-play'\r\n      );\r\n      grid.classList.add('psfc-v1-complete');\r\n\r\n      updateMobileFocus();\r\n    }\r\n\r\n    if ('ResizeObserver' in window) {\r\n      const layoutObserver = new ResizeObserver(() => {\r\n        if (\r\n          entranceEnabledForCurrentViewport() &&\r\n          entranceArmed &&\r\n          !entrancePlaying\r\n        ) {\r\n          calculateSpread();\r\n        }\r\n\r\n        updateMobileFocus();\r\n      });\r\n\r\n      layoutObserver.observe(grid);\r\n    }\r\n\r\n    window.addEventListener('scroll', requestMobileUpdate, { passive: true });\r\n\r\n    window.addEventListener('resize', () => {\r\n      clearTimeout(resizeTimer);\r\n\r\n      resizeTimer = setTimeout(() => {\r\n        if (!entranceEnabledForCurrentViewport()) {\r\n          entranceArmed = false;\r\n          entrancePlaying = false;\r\n          entranceComplete = true;\r\n\r\n          grid.classList.remove(\r\n            'psfc-v1-ready',\r\n            'psfc-v1-play'\r\n          );\r\n          grid.classList.add('psfc-v1-complete');\r\n        } else if (entranceArmed && !entrancePlaying) {\r\n          calculateSpread();\r\n        }\r\n\r\n        updateMobileFocus();\r\n      }, 100);\r\n    });\r\n\r\n    window.addEventListener('load', () => {\r\n      if (\r\n        entranceEnabledForCurrentViewport() &&\r\n        entranceArmed &&\r\n        !entrancePlaying\r\n      ) {\r\n        calculateSpread();\r\n      }\r\n\r\n      updateMobileFocus();\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4e754c9 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"4e754c9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_mobile&quot;:&quot;none&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7808aaf elementor-widget elementor-widget-html\" data-id=\"7808aaf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================================\r\n     PANOSKY \u2014 COMMERCIAL EXPERIENCE\r\n     Paste everything into one Elementor HTML widget\r\n  ========================================================== *\/\r\n\r\n  #ps-commercial-experience {\r\n    \/* ---------- MANUAL CONTROLS ---------- *\/\r\n\r\n    --ps-section-min-height: 156px;\r\n    --ps-section-radius: 12px;\r\n    --ps-section-padding: 16px 28px 18px;\r\n\r\n    --ps-background: #02111e;\r\n    --ps-border-color: rgba(255, 255, 255, 0.20);\r\n    --ps-title-color: rgba(255, 255, 255, 0.92);\r\n    --ps-text-color: rgba(255, 255, 255, 0.58);\r\n    --ps-logo-color: rgba(255, 255, 255, 0.58);\r\n    --ps-divider-color: rgba(255, 255, 255, 0.18);\r\n\r\n    --ps-title-size: clamp(20px, 1.7vw, 24px);\r\n    --ps-text-size: clamp(12px, 1vw, 14px);\r\n\r\n    --ps-logo-height: 38px;\r\n    --ps-logo-opacity: 0.58;\r\n\r\n    --ps-title-text-gap: 12px;\r\n    --ps-text-logo-gap: 18px;\r\n\r\n    \/* GROW \/ FOCUS CONTROLS \u2014 MATCHES THE FOUR FEATURED CARDS *\/\r\n    --ps-hover-scale: 1.02;\r\n    --ps-mobile-active-scale: 1.02;\r\n    --ps-focus-speed: 360ms;\r\n    --ps-mobile-focus-range: 27;\r\n\r\n    \/* Optional background image:\r\n       Replace \"none\" with url(\"YOUR-IMAGE-URL\")\r\n    *\/\r\n    --ps-background-image: none;\r\n\r\n    position: relative;\r\n    isolation: isolate;\r\n    width: 100%;\r\n    min-height: var(--ps-section-min-height);\r\n    padding: var(--ps-section-padding);\r\n    overflow: hidden;\r\n\r\n    color: var(--ps-title-color);\r\n    background: var(--ps-background);\r\n\r\n    border: 1px solid rgba(166, 184, 210, .31);\r\n    border-radius: var(--ps-section-radius);\r\n\r\n    box-shadow:\r\n      inset 0 1px 0 rgba(255, 255, 255, .045),\r\n      inset 0 -1px 0 rgba(0, 0, 0, .76),\r\n      0 10px 34px rgba(0, 0, 0, .09);\r\n\r\n    scale: 1;\r\n    transform-origin: center center;\r\n    transition:\r\n      scale var(--ps-focus-speed) cubic-bezier(.16, 1, .3, 1),\r\n      border-color var(--ps-focus-speed) ease,\r\n      box-shadow var(--ps-focus-speed) ease;\r\n    will-change: scale;\r\n  }\r\n\r\n  #ps-commercial-experience,\r\n  #ps-commercial-experience * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* =========================================================\r\n     EXACT BORDER TREATMENT FROM THE PREVIOUS FEATURED CARDS\r\n  ========================================================== *\/\r\n\r\n  \/* Fine inner gradient border *\/\r\n  #ps-commercial-experience .ps-ce__card-border {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 8;\r\n    pointer-events: none;\r\n    border-radius: inherit;\r\n    padding: 1px;\r\n\r\n    background: linear-gradient(\r\n      135deg,\r\n      rgba(201, 226, 255, .22),\r\n      rgba(99, 166, 255, .025) 32%,\r\n      rgba(0, 139, 255, .015) 70%,\r\n      rgba(80, 245, 255, .28)\r\n    );\r\n\r\n    -webkit-mask:\r\n      linear-gradient(#fff 0 0) content-box,\r\n      linear-gradient(#fff 0 0);\r\n    -webkit-mask-composite: xor;\r\n    mask-composite: exclude;\r\n  }\r\n\r\n  \/* Subtle blue lower-right edge *\/\r\n  #ps-commercial-experience .ps-ce__card-edge {\r\n    position: absolute;\r\n    right: -3%;\r\n    bottom: 0;\r\n    z-index: 10;\r\n    width: 34%;\r\n    height: 1px;\r\n    pointer-events: none;\r\n    opacity: .62;\r\n\r\n    background: linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(0, 139, 255, .25),\r\n      rgba(0, 139, 255, .74),\r\n      rgba(80, 245, 255, .94),\r\n      #e7fbff\r\n    );\r\n\r\n    box-shadow:\r\n      0 0 6px rgba(0, 157, 255, .34),\r\n      0 0 14px rgba(0, 139, 255, .16);\r\n  }\r\n\r\n  \/* Background image and subtle dark overlay *\/\r\n  #ps-commercial-experience .ps-ce__background {\r\n    position: absolute;\r\n    z-index: -3;\r\n    inset: 0;\r\n\r\n    background-image:\r\n      linear-gradient(\r\n        90deg,\r\n        rgba(1, 15, 26, 0.94) 0%,\r\n        rgba(1, 16, 29, 0.87) 50%,\r\n        rgba(1, 16, 29, 0.76) 100%\r\n      ),\r\n      var(--ps-background-image);\r\n\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    background-size: cover;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* Soft blue light toward the right side *\/\r\n  #ps-commercial-experience::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    z-index: -2;\r\n    top: -110%;\r\n    right: -10%;\r\n    width: 65%;\r\n    height: 260%;\r\n\r\n    background: radial-gradient(\r\n      ellipse at center,\r\n      rgba(18, 94, 180, 0.13) 0%,\r\n      rgba(5, 49, 92, 0.07) 35%,\r\n      transparent 68%\r\n    );\r\n\r\n    transform: rotate(-8deg);\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* Faint sweeping lines from the reference *\/\r\n  #ps-commercial-experience .ps-ce__streaks {\r\n    position: absolute;\r\n    z-index: -1;\r\n    top: -230px;\r\n    right: -90px;\r\n    width: 680px;\r\n    height: 330px;\r\n\r\n    border-radius: 50%;\r\n    border-bottom: 1px solid rgba(31, 122, 255, 0.10);\r\n\r\n    box-shadow:\r\n      0 6px 0 -5px rgba(31, 122, 255, 0.08),\r\n      0 15px 0 -14px rgba(31, 122, 255, 0.07),\r\n      0 27px 0 -26px rgba(31, 122, 255, 0.05);\r\n\r\n    transform: rotate(-7deg);\r\n    filter: blur(0.2px);\r\n    pointer-events: none;\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__content {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* Uses Elementor Global Primary typography *\/\r\n  #ps-commercial-experience .ps-ce__title {\r\n    position: relative;\r\n    display: inline-block;\r\n    margin: 0;\r\n    padding-bottom: 10px;\r\n\r\n    color: var(--ps-title-color);\r\n    font-family:\r\n      var(--e-global-typography-primary-font-family),\r\n      sans-serif;\r\n    font-size: var(--ps-title-size);\r\n    font-weight:\r\n      var(--e-global-typography-primary-font-weight, 500);\r\n    font-style:\r\n      var(--e-global-typography-primary-font-style, normal);\r\n    line-height: 1.15;\r\n    letter-spacing:\r\n      var(--e-global-typography-primary-letter-spacing, -0.02em);\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__title::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 50%;\r\n    width: 54px;\r\n    height: 1px;\r\n\r\n    background: linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      #2799ff 22%,\r\n      #7de7ff 50%,\r\n      #2799ff 78%,\r\n      transparent\r\n    );\r\n\r\n    box-shadow: 0 0 8px rgba(39, 153, 255, 0.5);\r\n    transform: translateX(-50%);\r\n  }\r\n\r\n  \/* Uses Elementor Global Text typography *\/\r\n  #ps-commercial-experience .ps-ce__description {\r\n    margin:\r\n      var(--ps-title-text-gap)\r\n      0\r\n      var(--ps-text-logo-gap);\r\n\r\n    color: var(--ps-text-color);\r\n    font-family:\r\n      var(--e-global-typography-text-font-family),\r\n      sans-serif;\r\n    font-size: var(--ps-text-size);\r\n    font-weight:\r\n      var(--e-global-typography-text-font-weight, 400);\r\n    font-style:\r\n      var(--e-global-typography-text-font-style, normal);\r\n    line-height:\r\n      var(--e-global-typography-text-line-height, 1.55);\r\n    letter-spacing:\r\n      var(--e-global-typography-text-letter-spacing, 0);\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logos {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, minmax(0, 1fr));\r\n    align-items: center;\r\n    width: 100%;\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logo-item {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: 0;\r\n    min-height: 42px;\r\n    padding: 2px 24px;\r\n  }\r\n\r\n  \/* Vertical separators *\/\r\n  #ps-commercial-experience\r\n    .ps-ce__logo-item:not(:first-child)::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    width: 1px;\r\n    height: 34px;\r\n\r\n    background: linear-gradient(\r\n      180deg,\r\n      transparent,\r\n      var(--ps-divider-color) 20%,\r\n      var(--ps-divider-color) 80%,\r\n      transparent\r\n    );\r\n\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logo-image {\r\n    display: block;\r\n    width: min(var(--ps-logo-width, 140px), 100%);\r\n    height: auto;\r\n    max-height: var(--ps-logo-height);\r\n    object-fit: contain;\r\n\r\n    opacity: var(--ps-logo-opacity);\r\n    filter: grayscale(1) brightness(0) invert(1);\r\n  }\r\n\r\n  \/* Visible only while a logo URL is missing or invalid *\/\r\n  #ps-commercial-experience .ps-ce__logo-fallback {\r\n    color: var(--ps-logo-color);\r\n    font-family:\r\n      var(--e-global-typography-primary-font-family),\r\n      sans-serif;\r\n    font-size: clamp(15px, 1.55vw, 22px);\r\n    font-weight: 600;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    opacity: 0.8;\r\n  }\r\n\r\n  \/* Individual logo width controls *\/\r\n  #ps-commercial-experience .ps-ce__logo-item--disney {\r\n    --ps-logo-width: 155px;\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logo-item--intel {\r\n    --ps-logo-width: 78px;\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logo-item--sony {\r\n    --ps-logo-width: 94px;\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logo-item--tudor {\r\n    --ps-logo-width: 92px;\r\n  }\r\n\r\n  #ps-commercial-experience .ps-ce__logo-item--amtrak {\r\n    --ps-logo-width: 126px;\r\n  }\r\n\r\n  \/* =========================================================\r\n     DESKTOP + TABLET HOVER \u2014 SAME AS THE FOUR FEATURED CARDS\r\n  ========================================================== *\/\r\n  @media (min-width: 768px) {\r\n    #ps-commercial-experience:hover {\r\n      scale: var(--ps-hover-scale);\r\n      z-index: 50;\r\n      border-color: rgba(127, 216, 255, .60);\r\n\r\n      box-shadow:\r\n        inset 0 1px 0 rgba(255, 255, 255, .09),\r\n        0 16px 42px rgba(0, 76, 180, .20),\r\n        0 0 32px rgba(0, 139, 255, .10);\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     MOBILE CENTER FOCUS \u2014 SAME AS THE FOUR FEATURED CARDS\r\n  ========================================================== *\/\r\n  @media (max-width: 767px) {\r\n    #ps-commercial-experience.ps-ce-mobile-focus {\r\n      scale: var(--ps-mobile-active-scale);\r\n      z-index: 50;\r\n      border-color: rgba(127, 216, 255, .60);\r\n\r\n      box-shadow:\r\n        inset 0 1px 0 rgba(255, 255, 255, .09),\r\n        0 15px 38px rgba(0, 76, 180, .18),\r\n        0 0 27px rgba(0, 139, 255, .11);\r\n    }\r\n  }\r\n\r\n  \/* ---------- TABLET ---------- *\/\r\n\r\n  @media (max-width: 1024px) {\r\n    #ps-commercial-experience {\r\n      --ps-section-padding: 18px 18px 20px;\r\n      --ps-logo-height: 34px;\r\n    }\r\n\r\n    #ps-commercial-experience .ps-ce__logo-item {\r\n      padding-inline: 14px;\r\n    }\r\n  }\r\n\r\n  \/* ---------- MOBILE ---------- *\/\r\n\r\n  @media (max-width: 600px) {\r\n    #ps-commercial-experience {\r\n      --ps-section-padding: 24px 16px 18px;\r\n      --ps-title-text-gap: 13px;\r\n      --ps-text-logo-gap: 21px;\r\n      --ps-logo-height: 33px;\r\n\r\n    }\r\n\r\n    #ps-commercial-experience .ps-ce__description {\r\n      max-width: 330px;\r\n      margin-right: auto;\r\n      margin-left: auto;\r\n    }\r\n\r\n    #ps-commercial-experience .ps-ce__logos {\r\n      grid-template-columns: repeat(2, minmax(0, 1fr));\r\n      row-gap: 11px;\r\n    }\r\n\r\n    #ps-commercial-experience .ps-ce__logo-item {\r\n      min-height: 54px;\r\n      padding: 8px 15px;\r\n    }\r\n\r\n    \/* Remove desktop separators *\/\r\n    #ps-commercial-experience\r\n      .ps-ce__logo-item:not(:first-child)::before {\r\n      display: none;\r\n    }\r\n\r\n    \/* Separators between each pair *\/\r\n    #ps-commercial-experience\r\n      .ps-ce__logo-item:nth-child(even)::before {\r\n      display: block;\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      width: 1px;\r\n      height: 36px;\r\n\r\n      background: linear-gradient(\r\n        180deg,\r\n        transparent,\r\n        var(--ps-divider-color) 20%,\r\n        var(--ps-divider-color) 80%,\r\n        transparent\r\n      );\r\n\r\n      transform: translateY(-50%);\r\n    }\r\n\r\n    \/* Center the final Amtrak logo *\/\r\n    #ps-commercial-experience .ps-ce__logo-item:last-child {\r\n      grid-column: 1 \/ -1;\r\n      width: 50%;\r\n      justify-self: center;\r\n    }\r\n\r\n    #ps-commercial-experience\r\n      .ps-ce__logo-item:last-child::before {\r\n      display: none;\r\n    }\r\n\r\n    #ps-commercial-experience .ps-ce__streaks {\r\n      top: -200px;\r\n      right: -310px;\r\n    }\r\n  }\r\n\r\n  \/* Very narrow phones *\/\r\n  @media (max-width: 350px) {\r\n    #ps-commercial-experience .ps-ce__logo-item {\r\n      padding-inline: 9px;\r\n    }\r\n\r\n    #ps-commercial-experience .ps-ce__logo-fallback {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    #ps-commercial-experience {\r\n      scale: 1 !important;\r\n      transition: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section\r\n  id=\"ps-commercial-experience\"\r\n  aria-labelledby=\"ps-ce-title\"\r\n>\r\n  <div class=\"ps-ce__card-border\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ps-ce__card-edge\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ps-ce__background\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"ps-ce__streaks\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"ps-ce__content\">\r\n    <h2 id=\"ps-ce-title\" class=\"ps-ce__title\">\r\n      Commercial Experience\r\n    <\/h2>\r\n\r\n    <p class=\"ps-ce__description\">\r\n      Contributed to projects for Walt Disney World, Intel, Sony,\r\n      Tudor Watches, and Amtrak.\r\n    <\/p>\r\n\r\n    <div class=\"ps-ce__logos\" role=\"list\">\r\n      <!-- WALT DISNEY WORLD -->\r\n      <div\r\n        class=\"ps-ce__logo-item ps-ce__logo-item--disney\"\r\n        role=\"listitem\"\r\n      >\r\n        <img\r\n          class=\"ps-ce__logo-image\"\r\n          src=\"PASTE_DISNEY_LOGO_URL\"\r\n          alt=\"Walt Disney World\"\r\n          decoding=\"async\"\r\n          onload=\"this.nextElementSibling.style.display='none'\"\r\n          onerror=\"this.style.display='none'\"\r\n        >\r\n        <span class=\"ps-ce__logo-fallback\">\r\n          Walt Disney World\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- INTEL -->\r\n      <div\r\n        class=\"ps-ce__logo-item ps-ce__logo-item--intel\"\r\n        role=\"listitem\"\r\n      >\r\n        <img\r\n          class=\"ps-ce__logo-image\"\r\n          src=\"PASTE_INTEL_LOGO_URL\"\r\n          alt=\"Intel\"\r\n          decoding=\"async\"\r\n          onload=\"this.nextElementSibling.style.display='none'\"\r\n          onerror=\"this.style.display='none'\"\r\n        >\r\n        <span class=\"ps-ce__logo-fallback\">\r\n          intel.\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- SONY -->\r\n      <div\r\n        class=\"ps-ce__logo-item ps-ce__logo-item--sony\"\r\n        role=\"listitem\"\r\n      >\r\n        <img\r\n          class=\"ps-ce__logo-image\"\r\n          src=\"PASTE_SONY_LOGO_URL\"\r\n          alt=\"Sony\"\r\n          decoding=\"async\"\r\n          onload=\"this.nextElementSibling.style.display='none'\"\r\n          onerror=\"this.style.display='none'\"\r\n        >\r\n        <span class=\"ps-ce__logo-fallback\">\r\n          SONY\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- TUDOR -->\r\n      <div\r\n        class=\"ps-ce__logo-item ps-ce__logo-item--tudor\"\r\n        role=\"listitem\"\r\n      >\r\n        <img\r\n          class=\"ps-ce__logo-image\"\r\n          src=\"PASTE_TUDOR_LOGO_URL\"\r\n          alt=\"Tudor Watches\"\r\n          decoding=\"async\"\r\n          onload=\"this.nextElementSibling.style.display='none'\"\r\n          onerror=\"this.style.display='none'\"\r\n        >\r\n        <span class=\"ps-ce__logo-fallback\">\r\n          TUDOR\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- AMTRAK -->\r\n      <div\r\n        class=\"ps-ce__logo-item ps-ce__logo-item--amtrak\"\r\n        role=\"listitem\"\r\n      >\r\n        <img\r\n          class=\"ps-ce__logo-image\"\r\n          src=\"PASTE_AMTRAK_LOGO_URL\"\r\n          alt=\"Amtrak\"\r\n          decoding=\"async\"\r\n          onload=\"this.nextElementSibling.style.display='none'\"\r\n          onerror=\"this.style.display='none'\"\r\n        >\r\n        <span class=\"ps-ce__logo-fallback\">\r\n          AMTRAK\r\n        <\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  const card = document.getElementById('ps-commercial-experience');\r\n  if (!card || card.dataset.psCeFocusInitialized === 'true') return;\r\n\r\n  card.dataset.psCeFocusInitialized = 'true';\r\n\r\n  let mobileRaf = null;\r\n\r\n  function updateMobileFocus() {\r\n    if (!window.matchMedia('(max-width: 767px)').matches) {\r\n      card.classList.remove('ps-ce-mobile-focus');\r\n      return;\r\n    }\r\n\r\n    const rect = card.getBoundingClientRect();\r\n    const viewportCenter = window.innerHeight \/ 2;\r\n    const cardCenter = rect.top + (rect.height \/ 2);\r\n\r\n    const styles = getComputedStyle(card);\r\n    const rangePercentage =\r\n      parseFloat(styles.getPropertyValue('--ps-mobile-focus-range')) || 27;\r\n\r\n    const allowedDistance =\r\n      window.innerHeight * (rangePercentage \/ 100);\r\n\r\n    const distance = Math.abs(viewportCenter - cardCenter);\r\n\r\n    card.classList.toggle(\r\n      'ps-ce-mobile-focus',\r\n      distance <= allowedDistance\r\n    );\r\n  }\r\n\r\n  function requestMobileUpdate() {\r\n    if (mobileRaf) return;\r\n\r\n    mobileRaf = requestAnimationFrame(() => {\r\n      mobileRaf = null;\r\n      updateMobileFocus();\r\n    });\r\n  }\r\n\r\n  window.addEventListener('scroll', requestMobileUpdate, { passive: true });\r\n  window.addEventListener('resize', requestMobileUpdate, { passive: true });\r\n  window.addEventListener('load', updateMobileFocus);\r\n\r\n  if ('ResizeObserver' in window) {\r\n    const resizeObserver = new ResizeObserver(requestMobileUpdate);\r\n    resizeObserver.observe(card);\r\n  }\r\n\r\n  updateMobileFocus();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-60e0bad e-con e-atomic-element e-flexbox-base e-60e0bad-467d392 \" data-id=\"60e0bad\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"60e0bad\" data-e-type=\"e-flexbox\" data-id=\"60e0bad\">\n    <div class=\"elementor-element elementor-element-a3bdfe5 ps-map-hero e-flex e-con-boxed e-con e-parent\" data-id=\"a3bdfe5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8d4f06b e-con-full e-flex e-con e-child\" data-id=\"8d4f06b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ddf191 elementor-widget elementor-widget-heading\" data-id=\"1ddf191\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">- WHY CHOOSE PANOSKY<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f765eab elementor-widget elementor-widget-heading\" data-id=\"f765eab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Built for brands that need more than a virtual tour.<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df68332 elementor-widget elementor-widget-text-editor\" data-id=\"df68332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Panosky delivers true-to-space digital experiences that are<br data-start=\"143\" data-end=\"146\" \/>visually stunning, technically precise, and ready for anywhere.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d558792 e-con-full e-flex e-con e-child\" data-id=\"d558792\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-908bc52 elementor-widget elementor-widget-html\" data-id=\"908bc52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  PANOSKY \u2014 WHY CHOOSE US CARDS\r\n  Paste this entire block into one Elementor HTML widget.\r\n\r\n  ICONS:\r\n  Replace the three <img decoding=\"async\" src=\"...\"> URLs in the HTML below with your own\r\n  PNG, WebP or SVG links. Square SVG\/PNG files work best.\r\n-->\r\n\r\n<style>\r\n  .pky-why {\r\n    \/* ---------- EASY MANUAL CONTROLS ---------- *\/\r\n    --pky-max-width: 1140px;\r\n    --pky-card-height: 220px;\r\n    --pky-gap: 24px;\r\n\r\n    \/* ---------- NUMBER CONTROLS ---------- *\/\r\n    --pky-number-size-desktop: 22px;\r\n    --pky-number-size-tablet: 22px;\r\n    --pky-number-size-mobile: 22px;\r\n    --pky-number-size-small-mobile: 22px;\r\n\r\n    --pky-number-font:\r\n      var(--e-global-typography-primary-font-family, inherit);\r\n\r\n    --pky-number-weight: 300;\r\n    --pky-number-letter-spacing: -0.055em;\r\n\r\n    \/* Set all 3 to the same color if you prefer a solid number. *\/\r\n    --pky-number-color-top: #78a8ff;\r\n    --pky-number-color-middle: #4287ff;\r\n    --pky-number-color-bottom: #155de6;\r\n\r\n    \/* Space between number, icon and title *\/\r\n    --pky-top-row-gap-desktop: 16px;\r\n    --pky-top-row-gap-tablet: 9px;\r\n    --pky-top-row-gap-mobile: 15px;\r\n    --pky-top-row-gap-small-mobile: 10px;\r\n\r\n    \/* ---------- GLASS BACKGROUND CONTROLS ---------- *\/\r\n\r\n    \/* RGB only: change this to tint the glass, e.g. 1, 24, 65 *\/\r\n    --pky-glass-color: 1, 14, 36;\r\n\r\n    \/* 0 = clear glass, 1 = completely opaque *\/\r\n    --pky-glass-opacity: 0.20;\r\n\r\n    \/* 0 = no extra darkness, 1 = black *\/\r\n    --pky-glass-darkness: 0.08;\r\n\r\n    \/* The background blur visible through each card *\/\r\n    --pky-glass-blur: 8px;\r\n    --pky-glass-saturation: 100%;\r\n\r\n    \/* Subtle light reflection inside the glass *\/\r\n    --pky-glass-highlight: 0.09;\r\n    --pky-glass-highlight-soft: 0.03;\r\n\r\n    --pky-blue: #287cff;\r\n    --pky-cyan: #69e5ff;\r\n    --pky-title: #f5f8ff;\r\n    --pky-copy: #8f9caf;\r\n\r\n    \/* ---------- ENTRANCE CONTROLS \u2014 MATCH PREVIOUS 4 CARDS ---------- *\/\r\n    --pky-first-duration: 500ms;\r\n    --pky-after-first-pause: 12ms;\r\n    --pky-spread-duration: 850ms;\r\n    --pky-spread-stagger: 140ms;\r\n    --pky-first-blur: 24px;\r\n    --pky-spread-blur: 13px;\r\n    --pky-first-start-scale: .94;\r\n    --pky-spread-start-scale: .90;\r\n    --pky-entrance-ease: cubic-bezier(.16, 1, .3, 1);\r\n    --pky-entrance-trigger: .12;\r\n\r\n    \/* ---------- GROW \/ MOBILE FOCUS \u2014 MATCH PREVIOUS 4 CARDS ---------- *\/\r\n    --pky-hover-scale: 1.02;\r\n    --pky-mobile-active-scale: 1.02;\r\n    --pky-focus-speed: 360ms;\r\n    --pky-mobile-focus-range: 27;\r\n\r\n    width: 100%;\r\n    max-width: var(--pky-max-width);\r\n    margin-inline: auto;\r\n    padding: 8px;\r\n    box-sizing: border-box;\r\n    background: transparent !important;\r\n    isolation: isolate;\r\n\r\n    \/* Elementor global font *\/\r\n    font-family:\r\n      var(--e-global-typography-primary-font-family, inherit);\r\n  }\r\n\r\n  .pky-why,\r\n  .pky-why * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  \/* =========================================================\r\n     GRID\r\n  ========================================================= *\/\r\n\r\n  .pky-why__grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    gap: var(--pky-gap);\r\n    width: 100%;\r\n  }\r\n\r\n  \/* =========================================================\r\n     CARD\r\n  ========================================================= *\/\r\n\r\n  .pky-card {\r\n    position: relative;\r\n    min-width: 0;\r\n    min-height: var(--pky-card-height);\r\n\r\n    padding: 25px 32px 22px;\r\n\r\n    overflow: visible;\r\n\r\n    border: 1px solid rgba(42, 101, 194, 0.23);\r\n    border-top-color: rgba(54, 134, 255, 0.58);\r\n\r\n    border-radius: 9px 9px 10px 10px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        rgba(0, 0, 0, var(--pky-glass-darkness)),\r\n        rgba(0, 0, 0, var(--pky-glass-darkness))\r\n      ),\r\n      linear-gradient(\r\n        145deg,\r\n        rgba(104, 174, 255, var(--pky-glass-highlight)) 0%,\r\n        rgba(47, 104, 186, var(--pky-glass-highlight-soft)) 34%,\r\n        rgba(0, 0, 0, 0) 72%\r\n      ),\r\n      rgba(\r\n        var(--pky-glass-color),\r\n        var(--pky-glass-opacity)\r\n      );\r\n\r\n    -webkit-backdrop-filter:\r\n      blur(var(--pky-glass-blur))\r\n      saturate(var(--pky-glass-saturation));\r\n\r\n    backdrop-filter:\r\n      blur(var(--pky-glass-blur))\r\n      saturate(var(--pky-glass-saturation));\r\n\r\n    box-shadow:\r\n      inset 0 1px 0 rgba(112, 220, 255, 0.06),\r\n      inset 0 -28px 55px rgba(0, 4, 15, 0.18),\r\n      0 12px 35px rgba(0, 3, 14, 0.12);\r\n\r\n    --pky-spread-x: 0px;\r\n    --pky-spread-y: 0px;\r\n\r\n    scale: 1;\r\n    transform-origin: center center;\r\n    transition:\r\n      scale var(--pky-focus-speed) cubic-bezier(.16, 1, .3, 1),\r\n      border-color var(--pky-focus-speed) ease,\r\n      box-shadow var(--pky-focus-speed) ease;\r\n    will-change: transform, scale, opacity, filter;\r\n  }\r\n\r\n  \/* =========================================================\r\n     GLOWING TOP EDGE\r\n  ========================================================= *\/\r\n\r\n  .pky-card__rail {\r\n    position: absolute;\r\n    z-index: 3;\r\n\r\n    top: -1px;\r\n    left: 7px;\r\n    right: 7px;\r\n\r\n    height: 1px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        var(--pky-cyan) 0%,\r\n        #4d8cff 5%,\r\n        #307cff 50%,\r\n        #4d8cff 95%,\r\n        var(--pky-cyan) 100%\r\n      );\r\n\r\n    box-shadow:\r\n      0 0 4px rgba(62, 144, 255, 0.95),\r\n      0 0 10px rgba(24, 110, 255, 0.72);\r\n\r\n    pointer-events: none;\r\n  }\r\n\r\n  .pky-card__rail::before,\r\n  .pky-card__rail::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    top: 50%;\r\n\r\n    width: 5px;\r\n    height: 5px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #d7fbff;\r\n\r\n    box-shadow:\r\n      0 0 4px #78eaff,\r\n      0 0 9px #238aff,\r\n      0 0 15px rgba(35, 117, 255, 0.9);\r\n\r\n    transform: translateY(-50%);\r\n  }\r\n\r\n  .pky-card__rail::before {\r\n    left: -1px;\r\n  }\r\n\r\n  .pky-card__rail::after {\r\n    right: -1px;\r\n  }\r\n\r\n  \/* =========================================================\r\n     TOP CONTENT ROW\r\n  ========================================================= *\/\r\n\r\n  .pky-card__top {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: var(--pky-top-row-gap-desktop);\r\n\r\n    min-width: 0;\r\n  }\r\n\r\n  \/* =========================================================\r\n     NUMBER\r\n  ========================================================= *\/\r\n\r\n  .pky-card__number {\r\n    display: block;\r\n\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    margin: 0;\r\n\r\n    font-family: var(--pky-number-font);\r\n    font-size: var(--pky-number-size-desktop);\r\n    font-style: normal;\r\n    font-weight: var(--pky-number-weight);\r\n\r\n    line-height: 0.86;\r\n    letter-spacing: var(--pky-number-letter-spacing);\r\n\r\n    white-space: nowrap;\r\n\r\n    color: var(--pky-number-color-middle);\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        var(--pky-number-color-top) 0%,\r\n        var(--pky-number-color-middle) 43%,\r\n        var(--pky-number-color-bottom) 100%\r\n      );\r\n\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n\r\n    -webkit-text-fill-color: transparent;\r\n\r\n    filter:\r\n      drop-shadow(\r\n        0 0 8px rgba(32, 103, 255, 0.2)\r\n      );\r\n  }\r\n\r\n  \/* =========================================================\r\n     ICON\r\n  ========================================================= *\/\r\n\r\n  .pky-card__icon-shell {\r\n    display: grid;\r\n\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    place-items: center;\r\n\r\n    width: 64px;\r\n    height: 64px;\r\n\r\n    border:\r\n      1px solid rgba(25, 134, 255, 0.88);\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n      radial-gradient(\r\n        circle at 50% 48%,\r\n        rgba(18, 77, 154, 0.24),\r\n        transparent 58%\r\n      ),\r\n      rgba(0, 16, 43, 0.38);\r\n\r\n    box-shadow:\r\n      0 0 5px rgba(30, 130, 255, 0.82),\r\n      0 0 16px rgba(13, 99, 255, 0.48),\r\n      inset 0 0 14px rgba(26, 104, 255, 0.18);\r\n  }\r\n\r\n  .pky-card__icon {\r\n    display: block;\r\n\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    object-fit: contain;\r\n\r\n    filter:\r\n      brightness(0)\r\n      saturate(100%)\r\n      invert(66%)\r\n      sepia(93%)\r\n      saturate(1794%)\r\n      hue-rotate(178deg)\r\n      brightness(103%)\r\n      contrast(102%)\r\n      drop-shadow(\r\n        0 0 4px rgba(27, 130, 255, 0.72)\r\n      );\r\n  }\r\n\r\n  \/* =========================================================\r\n     TITLE\r\n  ========================================================= *\/\r\n\r\n  .pky-card__title {\r\n    flex: 1 1 0;\r\n\r\n    min-width: 0;\r\n\r\n    margin: 0;\r\n\r\n    color: var(--pky-title);\r\n\r\n    font-family:\r\n      var(\r\n        --e-global-typography-primary-font-family,\r\n        inherit\r\n      );\r\n\r\n    font-size: 17px;\r\n\r\n    font-weight:\r\n      var(\r\n        --e-global-typography-primary-font-weight,\r\n        600\r\n      );\r\n\r\n    line-height: 1.35;\r\n\r\n    letter-spacing: -0.022em;\r\n\r\n    text-wrap: balance;\r\n\r\n    text-shadow:\r\n      0 0 12px rgba(181, 213, 255, 0.08);\r\n  }\r\n\r\n  \/* =========================================================\r\n     SMALL CENTER ACCENT\r\n  ========================================================= *\/\r\n\r\n  .pky-card__accent {\r\n    width: 44px;\r\n    height: 1px;\r\n\r\n    margin: 16px auto 15px;\r\n\r\n    border: 0;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        #2f7cff 34%,\r\n        #66dfff 50%,\r\n        #2f7cff 66%,\r\n        transparent\r\n      );\r\n\r\n    box-shadow:\r\n      0 0 7px rgba(39, 111, 255, 0.7);\r\n  }\r\n\r\n  \/* =========================================================\r\n     COPY\r\n  ========================================================= *\/\r\n\r\n  .pky-card__copy {\r\n    max-width: 232px;\r\n\r\n    margin: 0 auto;\r\n\r\n    color: var(--pky-copy);\r\n\r\n    font-family:\r\n      var(\r\n        --e-global-typography-text-font-family,\r\n        var(\r\n          --e-global-typography-primary-font-family,\r\n          inherit\r\n        )\r\n      );\r\n\r\n    font-size: 13.5px;\r\n\r\n    font-weight:\r\n      var(\r\n        --e-global-typography-text-font-weight,\r\n        400\r\n      );\r\n\r\n    line-height: 1.43;\r\n    letter-spacing: -0.005em;\r\n  }\r\n\r\n  \/* =========================================================\r\n     DESKTOP + TABLET GROW \u2014 SAME AS PREVIOUS 4 CARDS\r\n  ========================================================= *\/\r\n\r\n  @media (min-width: 768px) {\r\n    .pky-why.pky-why--complete .pky-card:hover {\r\n      scale: var(--pky-hover-scale);\r\n      z-index: 50;\r\n      border-color: rgba(127, 216, 255, .60);\r\n\r\n      box-shadow:\r\n        inset 0 1px 0 rgba(255, 255, 255, .09),\r\n        0 16px 42px rgba(0, 76, 180, .20),\r\n        0 0 32px rgba(0, 139, 255, .10);\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     ONE-TIME ENTRANCE \u2014 DESKTOP + TABLET\r\n     CARD 02 APPEARS FIRST\r\n     CARDS 01 + 03 THEN SPREAD OUT SIMULTANEOUSLY\r\n  ========================================================= *\/\r\n\r\n  \/* Middle card resolves first *\/\r\n  .pky-why.pky-why--ready .pky-card:nth-child(2) {\r\n    opacity: 0;\r\n    filter: blur(var(--pky-first-blur));\r\n    transform: scale(var(--pky-first-start-scale));\r\n    z-index: 30;\r\n  }\r\n\r\n  \/* Left + right cards begin visually stacked on the middle card *\/\r\n  .pky-why.pky-why--ready .pky-card:nth-child(1),\r\n  .pky-why.pky-why--ready .pky-card:nth-child(3) {\r\n    opacity: 0;\r\n    filter: blur(var(--pky-spread-blur));\r\n    transform:\r\n      translate3d(var(--pky-spread-x), var(--pky-spread-y), 0)\r\n      scale(var(--pky-spread-start-scale));\r\n    z-index: 10;\r\n  }\r\n\r\n  \/* Play middle card first *\/\r\n  .pky-why.pky-why--play .pky-card:nth-child(2) {\r\n    animation:\r\n      pky-first-resolve\r\n      var(--pky-first-duration)\r\n      var(--pky-entrance-ease)\r\n      forwards;\r\n  }\r\n\r\n  \/* Then send both side cards outward together *\/\r\n  .pky-why.pky-why--play .pky-card:nth-child(1),\r\n  .pky-why.pky-why--play .pky-card:nth-child(3) {\r\n    animation:\r\n      pky-spread\r\n      var(--pky-spread-duration)\r\n      var(--pky-entrance-ease)\r\n      forwards;\r\n\r\n    animation-delay:\r\n      calc(\r\n        var(--pky-first-duration) +\r\n        var(--pky-after-first-pause)\r\n      );\r\n  }\r\n\r\n  @keyframes pky-first-resolve {\r\n    0% {\r\n      opacity: 0;\r\n      filter: blur(var(--pky-first-blur));\r\n      transform: scale(var(--pky-first-start-scale));\r\n    }\r\n\r\n    42% {\r\n      opacity: 1;\r\n    }\r\n\r\n    100% {\r\n      opacity: 1;\r\n      filter: blur(0);\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  @keyframes pky-spread {\r\n    0% {\r\n      opacity: 0;\r\n      filter: blur(var(--pky-spread-blur));\r\n      transform:\r\n        translate3d(var(--pky-spread-x), var(--pky-spread-y), 0)\r\n        scale(var(--pky-spread-start-scale));\r\n    }\r\n\r\n    12% {\r\n      opacity: .20;\r\n    }\r\n\r\n    35% {\r\n      opacity: .85;\r\n    }\r\n\r\n    100% {\r\n      opacity: 1;\r\n      filter: blur(0);\r\n      transform: translate3d(0, 0, 0) scale(1);\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     MOBILE CENTER GROW \u2014 SAME AS PREVIOUS 4 CARDS\r\n  ========================================================= *\/\r\n\r\n  @media (max-width: 767px) {\r\n    .pky-why.pky-why--complete\r\n    .pky-card.pky-card--mobile-focus {\r\n      scale: var(--pky-mobile-active-scale);\r\n      z-index: 50;\r\n      border-color: rgba(127, 216, 255, .60);\r\n\r\n      box-shadow:\r\n        inset 0 1px 0 rgba(255, 255, 255, .09),\r\n        0 15px 38px rgba(0, 76, 180, .18),\r\n        0 0 27px rgba(0, 139, 255, .11);\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     TABLET\r\n  ========================================================= *\/\r\n\r\n  @media (min-width: 768px) and (max-width: 1024px) {\r\n\r\n    .pky-why {\r\n      --pky-gap: 16px;\r\n      --pky-card-height: 222px;\r\n\r\n      padding-inline: 4px;\r\n    }\r\n\r\n    .pky-card {\r\n      padding: 25px 16px 20px;\r\n    }\r\n\r\n    .pky-card__top {\r\n      gap: var(--pky-top-row-gap-tablet);\r\n    }\r\n\r\n    .pky-card__number {\r\n      font-size:\r\n        var(--pky-number-size-tablet);\r\n    }\r\n\r\n    .pky-card__icon-shell {\r\n      width: 53px;\r\n      height: 53px;\r\n    }\r\n\r\n    .pky-card__icon {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    .pky-card__title {\r\n      font-size: 14px;\r\n      line-height: 1.34;\r\n    }\r\n\r\n    .pky-card__copy {\r\n      max-width: 205px;\r\n      font-size: 12.5px;\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    \/* MOBILE: entrance animation disabled, center-grow remains active *\/\r\n    .pky-why.pky-why--ready .pky-card,\r\n    .pky-why.pky-why--play .pky-card {\r\n      opacity: 1 !important;\r\n      filter: none !important;\r\n      transform: none !important;\r\n      animation: none !important;\r\n    }\r\n\r\n    .pky-why {\r\n      --pky-card-height: 205px;\r\n      --pky-gap: 18px;\r\n\r\n      max-width: 520px;\r\n\r\n      padding: 5px;\r\n    }\r\n\r\n    .pky-why__grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .pky-card {\r\n      padding: 25px 25px 21px;\r\n    }\r\n\r\n    .pky-card__top {\r\n      gap: var(--pky-top-row-gap-mobile);\r\n    }\r\n\r\n    .pky-card__number {\r\n      font-size:\r\n        var(--pky-number-size-mobile);\r\n    }\r\n\r\n    .pky-card__icon-shell {\r\n      width: 62px;\r\n      height: 62px;\r\n    }\r\n\r\n    .pky-card__title {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .pky-card__accent {\r\n      margin-block: 15px 13px;\r\n    }\r\n\r\n    .pky-card__copy {\r\n      width: min(100%, 315px);\r\n      max-width: none;\r\n\r\n      font-size: 13px;\r\n      text-align: left;\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     SMALL MOBILE\r\n  ========================================================= *\/\r\n\r\n  @media (max-width: 390px) {\r\n\r\n    .pky-card {\r\n      padding-inline: 17px;\r\n    }\r\n\r\n    .pky-card__top {\r\n      gap:\r\n        var(--pky-top-row-gap-small-mobile);\r\n    }\r\n\r\n    .pky-card__number {\r\n      font-size:\r\n        var(--pky-number-size-small-mobile);\r\n    }\r\n\r\n    .pky-card__icon-shell {\r\n      width: 54px;\r\n      height: 54px;\r\n    }\r\n\r\n    .pky-card__icon {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    .pky-card__title {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     ACCESSIBILITY\r\n  ========================================================= *\/\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n\r\n    .pky-why *,\r\n    .pky-why *::before,\r\n    .pky-why *::after {\r\n      scroll-behavior: auto !important;\r\n      animation: none !important;\r\n      transition: none !important;\r\n    }\r\n\r\n    .pky-card {\r\n      opacity: 1 !important;\r\n      filter: none !important;\r\n      transform: none !important;\r\n      scale: 1 !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n\r\n<section\r\n  class=\"pky-why\"\r\n  aria-label=\"Why choose Panosky\"\r\n>\r\n\r\n  <div class=\"pky-why__grid\">\r\n\r\n    <!-- ==========================================\r\n         CARD 01\r\n    =========================================== -->\r\n\r\n    <article class=\"pky-card\">\r\n\r\n      <span\r\n        class=\"pky-card__rail\"\r\n        aria-hidden=\"true\"\r\n      ><\/span>\r\n\r\n      <div class=\"pky-card__top\">\r\n\r\n        <span\r\n          class=\"pky-card__number\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          01\r\n        <\/span>\r\n\r\n        <span class=\"pky-card__icon-shell\">\r\n\r\n          <!-- REPLACE THIS ICON URL -->\r\n          <img decoding=\"async\"\r\n            class=\"pky-card__icon\"\r\n            src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide-static@0.468.0\/icons\/box.svg\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n          >\r\n\r\n        <\/span>\r\n\r\n        <h3 class=\"pky-card__title\">\r\n          Authentic Space<br>\r\n          Representation\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n      <div\r\n        class=\"pky-card__accent\"\r\n        aria-hidden=\"true\"\r\n      ><\/div>\r\n\r\n      <p class=\"pky-card__copy\">\r\n        We capture spaces with precision and\r\n        intent\u2014preserving true proportions,\r\n        lighting, and atmosphere to reflect\r\n        reality, not just recreate it.\r\n      <\/p>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- ==========================================\r\n         CARD 02\r\n    =========================================== -->\r\n\r\n    <article class=\"pky-card\">\r\n\r\n      <span\r\n        class=\"pky-card__rail\"\r\n        aria-hidden=\"true\"\r\n      ><\/span>\r\n\r\n      <div class=\"pky-card__top\">\r\n\r\n        <span\r\n          class=\"pky-card__number\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          02\r\n        <\/span>\r\n\r\n        <span class=\"pky-card__icon-shell\">\r\n\r\n          <!-- REPLACE THIS ICON URL -->\r\n          <img decoding=\"async\"\r\n            class=\"pky-card__icon\"\r\n            src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide-static@0.468.0\/icons\/camera.svg\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n          >\r\n\r\n        <\/span>\r\n\r\n        <h3 class=\"pky-card__title\">\r\n          Cinematic-Grade<br>\r\n          Production Standards\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n      <div\r\n        class=\"pky-card__accent\"\r\n        aria-hidden=\"true\"\r\n      ><\/div>\r\n\r\n      <p class=\"pky-card__copy\">\r\n        From advanced imaging to expert\r\n        post-production, we apply filmmaking\r\n        techniques to deliver stunning,\r\n        immersive visuals that inspire.\r\n      <\/p>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- ==========================================\r\n         CARD 03\r\n    =========================================== -->\r\n\r\n    <article class=\"pky-card\">\r\n\r\n      <span\r\n        class=\"pky-card__rail\"\r\n        aria-hidden=\"true\"\r\n      ><\/span>\r\n\r\n      <div class=\"pky-card__top\">\r\n\r\n        <span\r\n          class=\"pky-card__number\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          03\r\n        <\/span>\r\n\r\n        <span class=\"pky-card__icon-shell\">\r\n\r\n          <!-- REPLACE THIS ICON URL -->\r\n          <img decoding=\"async\"\r\n            class=\"pky-card__icon\"\r\n            src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide-static@0.468.0\/icons\/rocket.svg\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n          >\r\n\r\n        <\/span>\r\n\r\n        <h3 class=\"pky-card__title\">\r\n          Business-Ready<br>\r\n          Deployment\r\n        <\/h3>\r\n\r\n      <\/div>\r\n\r\n      <div\r\n        class=\"pky-card__accent\"\r\n        aria-hidden=\"true\"\r\n      ><\/div>\r\n\r\n      <p class=\"pky-card__copy\">\r\n        We deliver optimized, secure, and\r\n        platform-ready experiences that\r\n        integrate seamlessly across web,\r\n        mobile, VR, and enterprise systems.\r\n      <\/p>\r\n\r\n    <\/article>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  const sections = document.querySelectorAll('.pky-why');\r\n\r\n  sections.forEach((section) => {\r\n    if (section.dataset.pkyAnimated === 'true') return;\r\n    section.dataset.pkyAnimated = 'true';\r\n\r\n    const cards = Array.from(section.querySelectorAll('.pky-card'));\r\n    if (!cards.length) return;\r\n\r\n    let entrancePlaying = false;\r\n    let entranceComplete = false;\r\n    let entranceArmed = true;\r\n    let completeTimer = null;\r\n    let resizeTimer = null;\r\n    let mobileRaf = null;\r\n\r\n    \/* Keep true layout positions, then visually stack Cards 01 + 03 on Card 02. *\/\r\n    function calculateSpread() {\r\n      const middleCard = cards[1];\r\n      const middleX = middleCard.offsetLeft;\r\n      const middleY = middleCard.offsetTop;\r\n\r\n      cards.forEach((card, index) => {\r\n        if (index === 1) return;\r\n\r\n        card.style.setProperty(\r\n          '--pky-spread-x',\r\n          `${middleX - card.offsetLeft}px`\r\n        );\r\n\r\n        card.style.setProperty(\r\n          '--pky-spread-y',\r\n          `${middleY - card.offsetTop}px`\r\n        );\r\n      });\r\n    }\r\n\r\n    function timeToMs(value) {\r\n      const cleanValue = value.trim();\r\n\r\n      if (cleanValue.endsWith('ms')) {\r\n        return parseFloat(cleanValue);\r\n      }\r\n\r\n      if (cleanValue.endsWith('s')) {\r\n        return parseFloat(cleanValue) * 1000;\r\n      }\r\n\r\n      return parseFloat(cleanValue) || 0;\r\n    }\r\n\r\n    function prepareEntrance() {\r\n      clearTimeout(completeTimer);\r\n\r\n      entrancePlaying = false;\r\n      entranceComplete = false;\r\n\r\n      cards.forEach((card) => {\r\n        card.classList.remove('pky-card--mobile-focus');\r\n      });\r\n\r\n      section.classList.remove(\r\n        'pky-why--play',\r\n        'pky-why--complete',\r\n        'pky-why--ready'\r\n      );\r\n\r\n      calculateSpread();\r\n      void section.offsetWidth;\r\n\r\n      section.classList.add('pky-why--ready');\r\n      entranceArmed = true;\r\n    }\r\n\r\n    function playEntrance() {\r\n      if (!entranceArmed || entrancePlaying) return;\r\n\r\n      entranceArmed = false;\r\n      entrancePlaying = true;\r\n      entranceComplete = false;\r\n\r\n      calculateSpread();\r\n\r\n      requestAnimationFrame(() => {\r\n        requestAnimationFrame(() => {\r\n          section.classList.add('pky-why--play');\r\n        });\r\n      });\r\n\r\n      const styles = getComputedStyle(section);\r\n\r\n      const firstDuration =\r\n        timeToMs(styles.getPropertyValue('--pky-first-duration'));\r\n\r\n      const pause =\r\n        timeToMs(styles.getPropertyValue('--pky-after-first-pause'));\r\n\r\n      const spreadDuration =\r\n        timeToMs(styles.getPropertyValue('--pky-spread-duration'));\r\n\r\n      const total =\r\n        firstDuration +\r\n        pause +\r\n        spreadDuration;\r\n\r\n      completeTimer = window.setTimeout(() => {\r\n        entrancePlaying = false;\r\n        entranceComplete = true;\r\n\r\n        section.classList.add('pky-why--complete');\r\n        section.classList.remove(\r\n          'pky-why--ready',\r\n          'pky-why--play'\r\n        );\r\n\r\n        cards.forEach((card) => {\r\n          card.style.removeProperty('--pky-spread-x');\r\n          card.style.removeProperty('--pky-spread-y');\r\n        });\r\n\r\n        updateMobileFocus();\r\n      }, total + 80);\r\n    }\r\n\r\n    const initialStyles = getComputedStyle(section);\r\n\r\n    let entranceTrigger = parseFloat(\r\n      initialStyles.getPropertyValue('--pky-entrance-trigger')\r\n    );\r\n\r\n    if (!Number.isFinite(entranceTrigger)) {\r\n      entranceTrigger = .12;\r\n    }\r\n\r\n    entranceTrigger =\r\n      Math.min(Math.max(entranceTrigger, .01), .95);\r\n\r\n    const entranceObserver =\r\n      new IntersectionObserver((entries) => {\r\n        entries.forEach((entry) => {\r\n          if (!entry.isIntersecting) return;\r\n\r\n          if (entry.intersectionRatio >= entranceTrigger) {\r\n            playEntrance();\r\n\r\n            \/* Same as the previous 4 cards:\r\n               entrance runs only once per page load. *\/\r\n            entranceObserver.unobserve(section);\r\n          }\r\n        });\r\n      }, {\r\n        threshold: [0, entranceTrigger]\r\n      });\r\n\r\n    function updateMobileFocus() {\r\n      if (!window.matchMedia('(max-width: 767px)').matches) {\r\n        cards.forEach((card) => {\r\n          card.classList.remove('pky-card--mobile-focus');\r\n        });\r\n        return;\r\n      }\r\n\r\n      if (!entranceComplete) {\r\n        cards.forEach((card) => {\r\n          card.classList.remove('pky-card--mobile-focus');\r\n        });\r\n        return;\r\n      }\r\n\r\n      const viewportCenter = window.innerHeight \/ 2;\r\n      const styles = getComputedStyle(section);\r\n\r\n      const rangePercentage =\r\n        parseFloat(\r\n          styles.getPropertyValue('--pky-mobile-focus-range')\r\n        ) || 27;\r\n\r\n      const allowedDistance =\r\n        window.innerHeight * (rangePercentage \/ 100);\r\n\r\n      let closestCard = null;\r\n      let closestDistance = Infinity;\r\n\r\n      cards.forEach((card) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const cardCenter = rect.top + (rect.height \/ 2);\r\n        const distance =\r\n          Math.abs(viewportCenter - cardCenter);\r\n\r\n        if (distance < closestDistance) {\r\n          closestDistance = distance;\r\n          closestCard = card;\r\n        }\r\n      });\r\n\r\n      cards.forEach((card) => {\r\n        card.classList.toggle(\r\n          'pky-card--mobile-focus',\r\n          card === closestCard &&\r\n          closestDistance <= allowedDistance\r\n        );\r\n      });\r\n    }\r\n\r\n    function requestMobileUpdate() {\r\n      if (mobileRaf) return;\r\n\r\n      mobileRaf = requestAnimationFrame(() => {\r\n        mobileRaf = null;\r\n        updateMobileFocus();\r\n      });\r\n    }\r\n\r\n    const entranceEnabledForCurrentViewport = () =>\r\n      window.matchMedia('(min-width: 768px)').matches;\r\n\r\n    if (entranceEnabledForCurrentViewport()) {\r\n      prepareEntrance();\r\n      entranceObserver.observe(section);\r\n    } else {\r\n      \/* Mobile: entrance is skipped completely.\r\n         Mark it complete immediately so center-grow still works. *\/\r\n      entranceArmed = false;\r\n      entrancePlaying = false;\r\n      entranceComplete = true;\r\n\r\n      section.classList.remove(\r\n        'pky-why--ready',\r\n        'pky-why--play'\r\n      );\r\n      section.classList.add('pky-why--complete');\r\n\r\n      updateMobileFocus();\r\n    }\r\n\r\n    if ('ResizeObserver' in window) {\r\n      const layoutObserver =\r\n        new ResizeObserver(() => {\r\n          if (\r\n            entranceEnabledForCurrentViewport() &&\r\n            entranceArmed &&\r\n            !entrancePlaying\r\n          ) {\r\n            calculateSpread();\r\n          }\r\n\r\n          updateMobileFocus();\r\n        });\r\n\r\n      layoutObserver.observe(section);\r\n    }\r\n\r\n    window.addEventListener(\r\n      'scroll',\r\n      requestMobileUpdate,\r\n      { passive: true }\r\n    );\r\n\r\n    window.addEventListener('resize', () => {\r\n      clearTimeout(resizeTimer);\r\n\r\n      resizeTimer = setTimeout(() => {\r\n        if (!entranceEnabledForCurrentViewport()) {\r\n          entranceArmed = false;\r\n          entrancePlaying = false;\r\n          entranceComplete = true;\r\n\r\n          section.classList.remove(\r\n            'pky-why--ready',\r\n            'pky-why--play'\r\n          );\r\n          section.classList.add('pky-why--complete');\r\n        } else if (entranceArmed && !entrancePlaying) {\r\n          calculateSpread();\r\n        }\r\n\r\n        updateMobileFocus();\r\n      }, 100);\r\n    });\r\n\r\n    window.addEventListener('load', () => {\r\n      if (\r\n        entranceEnabledForCurrentViewport() &&\r\n        entranceArmed &&\r\n        !entrancePlaying\r\n      ) {\r\n        calculateSpread();\r\n      }\r\n\r\n      updateMobileFocus();\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-346f708 e-con e-atomic-element e-flexbox-base e-346f708-7159bc5 \" data-id=\"346f708\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"346f708\" data-e-type=\"e-flexbox\" data-id=\"346f708\">\n    <div class=\"elementor-element elementor-element-2444dd1 ps-map-hero e-flex e-con-boxed e-con e-parent\" data-id=\"2444dd1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3069ffb e-con-full e-flex e-con e-child\" data-id=\"3069ffb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c77ae5 elementor-widget elementor-widget-heading\" data-id=\"9c77ae5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Start A <span class=\"animated-global\">Project.<\/span><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a28411 elementor-widget elementor-widget-heading\" data-id=\"4a28411\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bring your space online.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da643f2 elementor-widget elementor-widget-text-editor\" data-id=\"da643f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Tell us about your space, goals, and timeline. We&#8217;ll help define the right immersive solution.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b90b88 e-con-full e-flex e-con e-child\" data-id=\"3b90b88\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c617a46 elementor-widget elementor-widget-html\" data-id=\"c617a46\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     PANOSKY \u2014 PRODUCTION AJAX CONTACT FORM\r\n     + GLASS UI\r\n     + GLOBAL ELEMENTOR FONT\r\n     + EXISTING ELEMENTOR BUTTON\r\n     + LONG WHITE EDGE REFLECTION\r\n     + STABLE FORM HEIGHT\r\n     + CUSTOM VALIDATION\r\n     + REPLAYABLE FADE + GLASS-BLUR ENTRANCE\r\n========================================================= -->\r\n\r\n<div class=\"ps-contact-shell\">\r\n\r\n    <form\r\n        class=\"ps-contact-form\"\r\n        id=\"psContactForm\"\r\n        novalidate\r\n    >\r\n\r\n        <!-- =================================================\r\n             LONG WHITE EDGE REFLECTION\r\n        ================================================== -->\r\n\r\n        <div\r\n            class=\"ps-form-edge-light\"\r\n            aria-hidden=\"true\"\r\n        ><\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             GLASS AMBIENT LIGHTS\r\n        ================================================== -->\r\n\r\n        <div class=\"ps-contact-light ps-contact-light-1\"><\/div>\r\n        <div class=\"ps-contact-light ps-contact-light-2\"><\/div>\r\n\r\n\r\n        <div class=\"ps-contact-inner\">\r\n\r\n\r\n            <!-- =================================================\r\n                 HONEYPOT\r\n                 Hidden from real users.\r\n            ================================================== -->\r\n\r\n            <div\r\n                class=\"ps-honeypot\"\r\n                aria-hidden=\"true\"\r\n            >\r\n\r\n                <label>\r\n\r\n                    Website\r\n\r\n                    <input\r\n                        type=\"text\"\r\n                        id=\"ps-website\"\r\n                        name=\"website\"\r\n                        tabindex=\"-1\"\r\n                        autocomplete=\"off\"\r\n                    >\r\n\r\n                <\/label>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 NAME\r\n            ================================================== -->\r\n\r\n            <div class=\"ps-field\">\r\n\r\n                <label for=\"ps-name\">\r\n                    NAME\r\n                <\/label>\r\n\r\n                <div class=\"ps-input-wrap\">\r\n\r\n                    <input\r\n                        id=\"ps-name\"\r\n                        name=\"name\"\r\n                        type=\"text\"\r\n                        placeholder=\"Your name\"\r\n                        autocomplete=\"name\"\r\n                        minlength=\"2\"\r\n                        required\r\n                    >\r\n\r\n                    <span class=\"ps-field-glow\"><\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 WORK EMAIL\r\n            ================================================== -->\r\n\r\n            <div class=\"ps-field\">\r\n\r\n                <label for=\"ps-email\">\r\n                    WORK EMAIL\r\n                <\/label>\r\n\r\n                <div class=\"ps-input-wrap\">\r\n\r\n                    <input\r\n                        id=\"ps-email\"\r\n                        name=\"email\"\r\n                        type=\"email\"\r\n                        placeholder=\"you@company.com\"\r\n                        autocomplete=\"email\"\r\n                        pattern=\"^[^@\\s]+@[^@\\s]+\\.[^@\\s]{2,}$\"\r\n                        required\r\n                    >\r\n\r\n                    <span class=\"ps-field-glow\"><\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 COMPANY\r\n            ================================================== -->\r\n\r\n            <div class=\"ps-field\">\r\n\r\n                <label for=\"ps-company\">\r\n                    COMPANY\r\n                <\/label>\r\n\r\n                <div class=\"ps-input-wrap\">\r\n\r\n                    <input\r\n                        id=\"ps-company\"\r\n                        name=\"company\"\r\n                        type=\"text\"\r\n                        placeholder=\"Your company\"\r\n                        autocomplete=\"organization\"\r\n                        minlength=\"2\"\r\n                        required\r\n                    >\r\n\r\n                    <span class=\"ps-field-glow\"><\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT LOCATION\r\n            ================================================== -->\r\n\r\n            <div class=\"ps-field\">\r\n\r\n                <label for=\"ps-location\">\r\n                    PROJECT LOCATION\r\n                <\/label>\r\n\r\n                <div class=\"ps-input-wrap\">\r\n\r\n                    <input\r\n                        id=\"ps-location\"\r\n                        name=\"location\"\r\n                        type=\"text\"\r\n                        placeholder=\"City, Country\"\r\n                        minlength=\"2\"\r\n                        required\r\n                    >\r\n\r\n                    <span class=\"ps-field-glow\"><\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT TYPE\r\n            ================================================== -->\r\n\r\n            <div class=\"ps-field\">\r\n\r\n                <label for=\"ps-project-type\">\r\n                    PROJECT TYPE\r\n                <\/label>\r\n\r\n                <div class=\"ps-input-wrap ps-select-wrap\">\r\n\r\n                    <select\r\n                        id=\"ps-project-type\"\r\n                        name=\"project_type\"\r\n                        required\r\n                    >\r\n\r\n                        <option\r\n                            value=\"\"\r\n                            selected\r\n                            disabled\r\n                        >\r\n                            Select project type\r\n                        <\/option>\r\n\r\n                        <option value=\"hotel-resort\">\r\n                            Hotel \/ Resort\r\n                        <\/option>\r\n\r\n                        <option value=\"restaurant-cafe\">\r\n                            Restaurant \/ Caf\u00e9\r\n                        <\/option>\r\n\r\n                        <option value=\"real-estate\">\r\n                            Real Estate\r\n                        <\/option>\r\n\r\n                        <option value=\"retail\">\r\n                            Retail \/ Showroom\r\n                        <\/option>\r\n\r\n                        <option value=\"commercial\">\r\n                            Commercial Space\r\n                        <\/option>\r\n\r\n                        <option value=\"automotive\">\r\n                            Automotive\r\n                        <\/option>\r\n\r\n                        <option value=\"tourism\">\r\n                            Tourism \/ Destination\r\n                        <\/option>\r\n\r\n                        <option value=\"event-venue\">\r\n                            Event Venue\r\n                        <\/option>\r\n\r\n                        <option value=\"other\">\r\n                            Other\r\n                        <\/option>\r\n\r\n                    <\/select>\r\n\r\n\r\n                    <!-- Custom arrow -->\r\n\r\n                    <div\r\n                        class=\"ps-select-arrow\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <svg viewBox=\"0 0 24 24\">\r\n\r\n                            <path\r\n                                d=\"\r\n                                    M5 8.5\r\n                                    L12 15.5\r\n                                    L19 8.5\r\n                                \"\r\n                            ><\/path>\r\n\r\n                        <\/svg>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <span class=\"ps-field-glow\"><\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 DESCRIPTION \/ MESSAGE\r\n            ================================================== -->\r\n\r\n            <div class=\"ps-field ps-message-field\">\r\n\r\n                <label for=\"ps-message\">\r\n                    TELL US ABOUT YOUR SPACE\r\n                <\/label>\r\n\r\n                <div class=\"ps-input-wrap ps-textarea-wrap\">\r\n\r\n                    <textarea\r\n                        id=\"ps-message\"\r\n                        name=\"message\"\r\n                        placeholder=\"Tell us about your space, goals, and timeline...\"\r\n                        rows=\"5\"\r\n                        minlength=\"10\"\r\n                        required\r\n                    ><\/textarea>\r\n\r\n                    <span class=\"ps-field-glow\"><\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 EXISTING ELEMENTOR BUTTON MOVES HERE\r\n            ================================================== -->\r\n\r\n            <div\r\n                class=\"ps-contact-button-slot\"\r\n                id=\"psContactButtonSlot\"\r\n            ><\/div>\r\n\r\n\r\n\r\n            <!-- =================================================\r\n                 STATUS MESSAGE\r\n\r\n                 Space remains reserved even when hidden,\r\n                 preventing card height changes.\r\n            ================================================== -->\r\n\r\n            <div\r\n                class=\"ps-form-status\"\r\n                id=\"psFormStatus\"\r\n                role=\"status\"\r\n                aria-live=\"polite\"\r\n            ><\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/form>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ANIMATABLE EDGE PROPERTY\r\n========================================================= *\/\r\n\r\n@property --ps-edge-angle {\r\n\r\n    syntax: \"<angle>\";\r\n\r\n    initial-value: 0deg;\r\n\r\n    inherits: false;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   ISOLATION\r\n========================================================= *\/\r\n\r\n.ps-contact-shell,\r\n.ps-contact-shell * {\r\n\r\n    box-sizing:\r\n        border-box;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   MASTER SETTINGS\r\n========================================================= *\/\r\n\r\n.ps-contact-shell {\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENTOR GLOBAL TEXT FONT\r\n    ====================================================== *\/\r\n\r\n    --ps-font:\r\n\r\n        var(\r\n            --e-global-typography-text-font-family,\r\n            inherit\r\n        );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       COLORS\r\n    ====================================================== *\/\r\n\r\n    --ps-blue:\r\n        #008BFF;\r\n\r\n\r\n    --ps-cyan:\r\n        #50F5FF;\r\n\r\n\r\n    --ps-red:\r\n        #FF424D;\r\n\r\n\r\n    --ps-text:\r\n\r\n        rgba(\r\n            248,\r\n            251,\r\n            255,\r\n            .96\r\n        );\r\n\r\n\r\n    --ps-placeholder:\r\n\r\n        rgba(\r\n            187,\r\n            201,\r\n            220,\r\n            .52\r\n        );\r\n\r\n\r\n    --ps-input-line:\r\n\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .17\r\n        );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CARD\r\n    ====================================================== *\/\r\n\r\n    --ps-card-radius:\r\n        30px;\r\n\r\n\r\n    --ps-side-padding:\r\n        48px;\r\n\r\n\r\n    --ps-top-padding:\r\n        48px;\r\n\r\n\r\n    --ps-bottom-padding:\r\n        40px;\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       TYPOGRAPHY\r\n    ====================================================== *\/\r\n\r\n    --ps-label-size:\r\n        13px;\r\n\r\n\r\n    --ps-input-size:\r\n        17px;\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       WHITE EDGE REFLECTION\r\n\r\n       Higher speed number = slower\r\n    ====================================================== *\/\r\n\r\n    --ps-edge-speed:\r\n        20s;\r\n\r\n\r\n    --ps-edge-thickness:\r\n        1px;\r\n\r\n\r\n\r\n    position:\r\n        relative;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    font-family:\r\n        var(--ps-font);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTOR GLOBAL FONT\r\n========================================================= *\/\r\n\r\n.ps-contact-form,\r\n.ps-contact-form *,\r\n.ps-contact-form input,\r\n.ps-contact-form textarea,\r\n.ps-contact-form select,\r\n.ps-contact-form option {\r\n\r\n    font-family:\r\n        var(--ps-font) !important;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GLASS FORM\r\n========================================================= *\/\r\n\r\n.ps-contact-form {\r\n\r\n    position:\r\n        relative;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    margin:\r\n        0;\r\n\r\n\r\n    padding:\r\n\r\n        var(--ps-top-padding)\r\n\r\n        var(--ps-side-padding)\r\n\r\n        var(--ps-bottom-padding);\r\n\r\n\r\n    border-radius:\r\n        var(--ps-card-radius);\r\n\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n\r\n    isolation:\r\n        isolate;\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       SEMI TRANSPARENT GLASS\r\n    ====================================================== *\/\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n\r\n            145deg,\r\n\r\n            rgba(\r\n                18,\r\n                45,\r\n                78,\r\n                .48\r\n            )\r\n            0%,\r\n\r\n            rgba(\r\n                8,\r\n                28,\r\n                55,\r\n                .43\r\n            )\r\n            48%,\r\n\r\n            rgba(\r\n                4,\r\n                21,\r\n                43,\r\n                .52\r\n            )\r\n            100%\r\n\r\n        );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       STATIC GLASS BORDER\r\n    ====================================================== *\/\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .16\r\n        );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       3D DEPTH\r\n    ====================================================== *\/\r\n\r\n    box-shadow:\r\n\r\n        0 35px 90px\r\n        rgba(\r\n            0,\r\n            6,\r\n            24,\r\n            .30\r\n        ),\r\n\r\n        0 12px 35px\r\n        rgba(\r\n            0,\r\n            10,\r\n            35,\r\n            .22\r\n        ),\r\n\r\n        inset 0 1px 0\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .13\r\n        ),\r\n\r\n        inset 1px 0 0\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .035\r\n        ),\r\n\r\n        inset 0 -1px 0\r\n        rgba(\r\n            0,\r\n            0,\r\n            0,\r\n            .35\r\n        );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       GLASS BLUR\r\n    ====================================================== *\/\r\n\r\n    -webkit-backdrop-filter:\r\n\r\n        blur(24px)\r\n        saturate(135%);\r\n\r\n\r\n    backdrop-filter:\r\n\r\n        blur(24px)\r\n        saturate(135%);\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INNER GLASS BORDER\r\n========================================================= *\/\r\n\r\n.ps-contact-form::before {\r\n\r\n    content:\r\n        \"\";\r\n\r\n\r\n    position:\r\n        absolute;\r\n\r\n\r\n    inset:\r\n        5px;\r\n\r\n\r\n    border-radius:\r\n\r\n        calc(\r\n            var(--ps-card-radius) - 5px\r\n        );\r\n\r\n\r\n    border:\r\n\r\n        1px solid\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .025\r\n        );\r\n\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n    z-index:\r\n        3;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   VERY LONG + SLOW WHITE EDGE REFLECTION\r\n========================================================= *\/\r\n\r\n.ps-form-edge-light {\r\n\r\n    position:\r\n        absolute;\r\n\r\n\r\n    inset:\r\n        0;\r\n\r\n\r\n    border-radius:\r\n        var(--ps-card-radius);\r\n\r\n\r\n    padding:\r\n        var(--ps-edge-thickness);\r\n\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n    z-index:\r\n        30;\r\n\r\n\r\n\r\n    background:\r\n\r\n        conic-gradient(\r\n\r\n            from var(--ps-edge-angle),\r\n\r\n\r\n            transparent\r\n            0deg,\r\n\r\n\r\n            transparent\r\n            175deg,\r\n\r\n\r\n            rgba(255,255,255,0)\r\n            175deg,\r\n\r\n\r\n            rgba(255,255,255,.015)\r\n            190deg,\r\n\r\n\r\n            rgba(255,255,255,.035)\r\n            205deg,\r\n\r\n\r\n            rgba(255,255,255,.065)\r\n            220deg,\r\n\r\n\r\n            rgba(255,255,255,.11)\r\n            235deg,\r\n\r\n\r\n            rgba(255,255,255,.18)\r\n            250deg,\r\n\r\n\r\n            rgba(255,255,255,.30)\r\n            265deg,\r\n\r\n\r\n            rgba(255,255,255,.48)\r\n            278deg,\r\n\r\n\r\n            rgba(255,255,255,.72)\r\n            288deg,\r\n\r\n\r\n            rgba(255,255,255,.92)\r\n            295deg,\r\n\r\n\r\n            rgba(255,255,255,1)\r\n            300deg,\r\n\r\n\r\n            rgba(255,255,255,.92)\r\n            305deg,\r\n\r\n\r\n            rgba(255,255,255,.72)\r\n            312deg,\r\n\r\n\r\n            rgba(255,255,255,.48)\r\n            321deg,\r\n\r\n\r\n            rgba(255,255,255,.30)\r\n            330deg,\r\n\r\n\r\n            rgba(255,255,255,.18)\r\n            339deg,\r\n\r\n\r\n            rgba(255,255,255,.10)\r\n            347deg,\r\n\r\n\r\n            rgba(255,255,255,.045)\r\n            353deg,\r\n\r\n\r\n            rgba(255,255,255,.015)\r\n            357deg,\r\n\r\n\r\n            rgba(255,255,255,0)\r\n            360deg\r\n\r\n        );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       DISPLAY GRADIENT ONLY ON BORDER\r\n    ====================================================== *\/\r\n\r\n    -webkit-mask:\r\n\r\n        linear-gradient(\r\n            #fff 0 0\r\n        )\r\n        content-box,\r\n\r\n        linear-gradient(\r\n            #fff 0 0\r\n        );\r\n\r\n\r\n    -webkit-mask-composite:\r\n        xor;\r\n\r\n\r\n    mask:\r\n\r\n        linear-gradient(\r\n            #fff 0 0\r\n        )\r\n        content-box,\r\n\r\n        linear-gradient(\r\n            #fff 0 0\r\n        );\r\n\r\n\r\n    mask-composite:\r\n        exclude;\r\n\r\n\r\n\r\n    filter:\r\n\r\n        drop-shadow(\r\n            0 0 1px\r\n            rgba(\r\n                255,\r\n                255,\r\n                255,\r\n                .25\r\n            )\r\n        )\r\n\r\n        drop-shadow(\r\n            0 0 3px\r\n            rgba(\r\n                255,\r\n                255,\r\n                255,\r\n                .06\r\n            )\r\n        );\r\n\r\n\r\n\r\n    animation:\r\n\r\n        psEdgeWhiteLight\r\n\r\n        var(--ps-edge-speed)\r\n\r\n        linear\r\n\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes psEdgeWhiteLight {\r\n\r\n    from {\r\n\r\n        --ps-edge-angle:\r\n            0deg;\r\n\r\n    }\r\n\r\n\r\n    to {\r\n\r\n        --ps-edge-angle:\r\n            360deg;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   AMBIENT GLASS LIGHT\r\n========================================================= *\/\r\n\r\n.ps-contact-light {\r\n\r\n    position:\r\n        absolute;\r\n\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n\r\n    filter:\r\n        blur(20px);\r\n\r\n\r\n    z-index:\r\n        -1;\r\n\r\n}\r\n\r\n\r\n\r\n\/* TOP LEFT *\/\r\n\r\n.ps-contact-light-1 {\r\n\r\n    width:\r\n        430px;\r\n\r\n\r\n    height:\r\n        320px;\r\n\r\n\r\n    left:\r\n        -220px;\r\n\r\n\r\n    top:\r\n        -190px;\r\n\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n\r\n            circle,\r\n\r\n            rgba(\r\n                38,\r\n                143,\r\n                255,\r\n                .12\r\n            ),\r\n\r\n            transparent 70%\r\n\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* BOTTOM RIGHT *\/\r\n\r\n.ps-contact-light-2 {\r\n\r\n    width:\r\n        470px;\r\n\r\n\r\n    height:\r\n        410px;\r\n\r\n\r\n    right:\r\n        -250px;\r\n\r\n\r\n    bottom:\r\n        -240px;\r\n\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n\r\n            circle,\r\n\r\n            rgba(\r\n                0,\r\n                128,\r\n                255,\r\n                .07\r\n            ),\r\n\r\n            transparent 70%\r\n\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   FORM CONTENT\r\n========================================================= *\/\r\n\r\n.ps-contact-inner {\r\n\r\n    position:\r\n        relative;\r\n\r\n\r\n    z-index:\r\n        10;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   HONEYPOT\r\n========================================================= *\/\r\n\r\n.ps-honeypot {\r\n\r\n    position:\r\n        absolute !important;\r\n\r\n\r\n    width:\r\n        1px !important;\r\n\r\n\r\n    height:\r\n        1px !important;\r\n\r\n\r\n    overflow:\r\n        hidden !important;\r\n\r\n\r\n    opacity:\r\n        0 !important;\r\n\r\n\r\n    left:\r\n        -9999px !important;\r\n\r\n\r\n    pointer-events:\r\n        none !important;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   FIELD\r\n\r\n   IMPORTANT:\r\n   Force every field to remain physically present.\r\n========================================================= *\/\r\n\r\n.ps-field {\r\n\r\n    position:\r\n        relative;\r\n\r\n\r\n    display:\r\n        block !important;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    visibility:\r\n        visible !important;\r\n\r\n\r\n    opacity:\r\n        1 !important;\r\n\r\n\r\n    margin-bottom:\r\n        31px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n========================================================= *\/\r\n\r\n.ps-field label {\r\n\r\n    display:\r\n        block;\r\n\r\n\r\n    margin:\r\n        0 0 11px;\r\n\r\n\r\n    padding:\r\n        0;\r\n\r\n\r\n    color:\r\n\r\n        rgba(\r\n            246,\r\n            250,\r\n            255,\r\n            .93\r\n        );\r\n\r\n\r\n    font-family:\r\n        var(--ps-font) !important;\r\n\r\n\r\n    font-size:\r\n        var(--ps-label-size);\r\n\r\n\r\n    line-height:\r\n        1.25;\r\n\r\n\r\n    font-weight:\r\n        600;\r\n\r\n\r\n    letter-spacing:\r\n        .075em;\r\n\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INPUT TRACK\r\n========================================================= *\/\r\n\r\n.ps-input-wrap {\r\n\r\n    position:\r\n        relative;\r\n\r\n\r\n    display:\r\n        block;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    visibility:\r\n        visible !important;\r\n\r\n\r\n    border-bottom:\r\n\r\n        1px solid\r\n        var(--ps-input-line);\r\n\r\n\r\n    transition:\r\n\r\n        border-color\r\n        .3s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INPUTS\r\n========================================================= *\/\r\n\r\n.ps-contact-form input,\r\n.ps-contact-form select,\r\n.ps-contact-form textarea {\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n\r\n    padding:\r\n        0 0 14px !important;\r\n\r\n\r\n    border:\r\n        0 !important;\r\n\r\n\r\n    outline:\r\n        0 !important;\r\n\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n\r\n    border-radius:\r\n        0 !important;\r\n\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n\r\n    color:\r\n        var(--ps-text) !important;\r\n\r\n\r\n    font-family:\r\n        var(--ps-font) !important;\r\n\r\n\r\n    font-size:\r\n        var(--ps-input-size) !important;\r\n\r\n\r\n    font-weight:\r\n        400 !important;\r\n\r\n\r\n    line-height:\r\n        1.55 !important;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   PLACEHOLDER\r\n========================================================= *\/\r\n\r\n.ps-contact-form input::placeholder,\r\n.ps-contact-form textarea::placeholder {\r\n\r\n    color:\r\n        var(--ps-placeholder) !important;\r\n\r\n\r\n    opacity:\r\n        1;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   NORMAL BLUE ACTIVE LINE\r\n========================================================= *\/\r\n\r\n.ps-field-glow {\r\n\r\n    position:\r\n        absolute;\r\n\r\n\r\n    left:\r\n        0;\r\n\r\n\r\n    bottom:\r\n        -1px;\r\n\r\n\r\n    width:\r\n        0%;\r\n\r\n\r\n    height:\r\n        1px;\r\n\r\n\r\n    opacity:\r\n        0;\r\n\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n\r\n            90deg,\r\n\r\n            var(--ps-blue),\r\n\r\n            var(--ps-cyan)\r\n\r\n        );\r\n\r\n\r\n\r\n    box-shadow:\r\n\r\n        0 0 5px\r\n        rgba(\r\n            0,\r\n            139,\r\n            255,\r\n            .30\r\n        );\r\n\r\n\r\n\r\n    transition:\r\n\r\n        width\r\n        .42s\r\n        cubic-bezier(.2,.8,.2,1),\r\n\r\n        opacity\r\n        .25s\r\n        ease,\r\n\r\n        background\r\n        .25s\r\n        ease,\r\n\r\n        box-shadow\r\n        .25s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   NORMAL FOCUS\r\n========================================================= *\/\r\n\r\n.ps-input-wrap:focus-within\r\n.ps-field-glow {\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    opacity:\r\n        1;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INVALID FIELD\r\n   RED LINE\r\n========================================================= *\/\r\n\r\n.ps-field.ps-invalid\r\n.ps-input-wrap {\r\n\r\n    border-bottom-color:\r\n\r\n        rgba(\r\n            255,\r\n            66,\r\n            77,\r\n            .38\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n.ps-field.ps-invalid\r\n.ps-field-glow {\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    opacity:\r\n        1;\r\n\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n\r\n            90deg,\r\n\r\n            rgba(\r\n                255,\r\n                49,\r\n                63,\r\n                .75\r\n            ),\r\n\r\n            #FF5965,\r\n\r\n            rgba(\r\n                255,\r\n                49,\r\n                63,\r\n                .75\r\n            )\r\n\r\n        );\r\n\r\n\r\n    box-shadow:\r\n\r\n        0 0 5px\r\n        rgba(\r\n            255,\r\n            55,\r\n            67,\r\n            .28\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INVALID FIELD CLICKED\r\n   RED \u2192 BLUE\r\n========================================================= *\/\r\n\r\n.ps-field.ps-invalid\r\n.ps-input-wrap:focus-within {\r\n\r\n    border-bottom-color:\r\n\r\n        rgba(\r\n            0,\r\n            139,\r\n            255,\r\n            .25\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n.ps-field.ps-invalid\r\n.ps-input-wrap:focus-within\r\n.ps-field-glow {\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    opacity:\r\n        1;\r\n\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n\r\n            90deg,\r\n\r\n            var(--ps-blue),\r\n\r\n            var(--ps-cyan)\r\n\r\n        );\r\n\r\n\r\n    box-shadow:\r\n\r\n        0 0 6px\r\n        rgba(\r\n            0,\r\n            139,\r\n            255,\r\n            .30\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INVALID SHAKE\r\n========================================================= *\/\r\n\r\n.ps-field.ps-validation-shake {\r\n\r\n    animation:\r\n\r\n        psValidationShake\r\n        .32s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n\r\n@keyframes psValidationShake {\r\n\r\n    0% {\r\n\r\n        transform:\r\n            translateX(0);\r\n\r\n    }\r\n\r\n\r\n    25% {\r\n\r\n        transform:\r\n            translateX(-3px);\r\n\r\n    }\r\n\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateX(3px);\r\n\r\n    }\r\n\r\n\r\n    75% {\r\n\r\n        transform:\r\n            translateX(-2px);\r\n\r\n    }\r\n\r\n\r\n    100% {\r\n\r\n        transform:\r\n            translateX(0);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SELECT\r\n========================================================= *\/\r\n\r\n.ps-select-wrap select {\r\n\r\n    cursor:\r\n        pointer;\r\n\r\n\r\n    appearance:\r\n        none;\r\n\r\n\r\n    -webkit-appearance:\r\n        none;\r\n\r\n\r\n    padding-right:\r\n        46px !important;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-select-wrap select option {\r\n\r\n    background:\r\n        #071a31;\r\n\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SELECT ARROW\r\n========================================================= *\/\r\n\r\n.ps-select-arrow {\r\n\r\n    position:\r\n        absolute;\r\n\r\n\r\n    width:\r\n        22px;\r\n\r\n\r\n    height:\r\n        22px;\r\n\r\n\r\n    right:\r\n        3px;\r\n\r\n\r\n    top:\r\n        2px;\r\n\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n    display:\r\n        flex;\r\n\r\n\r\n    align-items:\r\n        center;\r\n\r\n\r\n    justify-content:\r\n        center;\r\n\r\n\r\n    color:\r\n\r\n        rgba(\r\n            226,\r\n            240,\r\n            255,\r\n            .78\r\n        );\r\n\r\n}\r\n\r\n\r\n\r\n.ps-select-arrow svg {\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    height:\r\n        100%;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-select-arrow svg path {\r\n\r\n    fill:\r\n        none !important;\r\n\r\n\r\n    stroke:\r\n        currentColor !important;\r\n\r\n\r\n    stroke-width:\r\n        1.8 !important;\r\n\r\n\r\n    stroke-linecap:\r\n        round !important;\r\n\r\n\r\n    stroke-linejoin:\r\n        round !important;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   MESSAGE \/ DESCRIPTION\r\n\r\n   IMPORTANT:\r\n   Keep this entire area physically stable.\r\n========================================================= *\/\r\n\r\n.ps-message-field {\r\n\r\n    display:\r\n        block !important;\r\n\r\n\r\n    visibility:\r\n        visible !important;\r\n\r\n\r\n    min-height:\r\n        170px;\r\n\r\n\r\n    margin-top:\r\n        4px;\r\n\r\n\r\n    margin-bottom:\r\n        30px;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-textarea-wrap {\r\n\r\n    display:\r\n        block !important;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    min-height:\r\n        136px;\r\n\r\n\r\n    visibility:\r\n        visible !important;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-textarea-wrap textarea {\r\n\r\n    display:\r\n        block !important;\r\n\r\n\r\n    width:\r\n        100% !important;\r\n\r\n\r\n    height:\r\n        135px;\r\n\r\n\r\n    min-height:\r\n        135px !important;\r\n\r\n\r\n    max-height:\r\n        300px;\r\n\r\n\r\n    visibility:\r\n        visible !important;\r\n\r\n\r\n    opacity:\r\n        1 !important;\r\n\r\n\r\n    resize:\r\n        vertical;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTOR BUTTON SLOT\r\n========================================================= *\/\r\n\r\n.ps-contact-button-slot {\r\n\r\n    position:\r\n        relative;\r\n\r\n\r\n    display:\r\n        block;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    min-height:\r\n        1px;\r\n\r\n\r\n    margin-top:\r\n        6px;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-contact-button-slot\r\n> .elementor-element {\r\n\r\n    width:\r\n        100% !important;\r\n\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-contact-button-slot\r\n.elementor-widget-container,\r\n\r\n.ps-contact-button-slot\r\n.elementor-button-wrapper {\r\n\r\n    width:\r\n        100%;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-contact-button-slot\r\n.elementor-button {\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    transition:\r\n\r\n        opacity\r\n        .25s\r\n        ease,\r\n\r\n        transform\r\n        .25s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SENDING STATE\r\n========================================================= *\/\r\n\r\n.ps-contact-button-slot.ps-sending\r\n.elementor-button {\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n    opacity:\r\n        .72;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SUCCESS STATE\r\n========================================================= *\/\r\n\r\n.ps-contact-button-slot.ps-success\r\n.elementor-button {\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   STATUS MESSAGE\r\n\r\n   IMPORTANT:\r\n   Space stays reserved all the time.\r\n\r\n   This prevents the bottom of the card\r\n   from becoming shorter or taller.\r\n========================================================= *\/\r\n\r\n.ps-form-status {\r\n\r\n    display:\r\n        block;\r\n\r\n\r\n    width:\r\n        100%;\r\n\r\n\r\n    min-height:\r\n        18px;\r\n\r\n\r\n    height:\r\n        18px;\r\n\r\n\r\n    margin-top:\r\n        13px;\r\n\r\n\r\n    margin-bottom:\r\n        0;\r\n\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n\r\n    opacity:\r\n        0;\r\n\r\n\r\n    visibility:\r\n        hidden;\r\n\r\n\r\n    transform:\r\n        translateY(-3px);\r\n\r\n\r\n    pointer-events:\r\n        none;\r\n\r\n\r\n    font-size:\r\n        12px;\r\n\r\n\r\n    line-height:\r\n        18px;\r\n\r\n\r\n    transition:\r\n\r\n        opacity\r\n        .3s\r\n        ease,\r\n\r\n        transform\r\n        .3s\r\n        ease,\r\n\r\n        visibility\r\n        .3s\r\n        ease;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-form-status.ps-visible {\r\n\r\n    opacity:\r\n        1;\r\n\r\n\r\n    visibility:\r\n        visible;\r\n\r\n\r\n    transform:\r\n        translateY(0);\r\n\r\n}\r\n\r\n\r\n\r\n.ps-form-status.ps-error {\r\n\r\n    color:\r\n        #FF737D;\r\n\r\n}\r\n\r\n\r\n\r\n.ps-form-status.ps-success {\r\n\r\n    color:\r\n        #8FEAFF;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   CHROME AUTOFILL\r\n========================================================= *\/\r\n\r\n.ps-contact-form\r\ninput:-webkit-autofill,\r\n\r\n.ps-contact-form\r\ninput:-webkit-autofill:hover,\r\n\r\n.ps-contact-form\r\ninput:-webkit-autofill:focus,\r\n\r\n.ps-contact-form\r\ninput:-webkit-autofill:active {\r\n\r\n    -webkit-text-fill-color:\r\n        #ffffff !important;\r\n\r\n\r\n    -webkit-box-shadow:\r\n\r\n        0 0 0\r\n        1000px\r\n        transparent\r\n        inset !important;\r\n\r\n\r\n    caret-color:\r\n        #ffffff;\r\n\r\n\r\n    transition:\r\n\r\n        background-color\r\n        999999s\r\n        ease-in-out\r\n        0s;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n    .ps-contact-shell {\r\n\r\n        --ps-side-padding:\r\n            38px;\r\n\r\n\r\n        --ps-top-padding:\r\n            42px;\r\n\r\n\r\n        --ps-bottom-padding:\r\n            36px;\r\n\r\n\r\n        --ps-card-radius:\r\n            27px;\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    .ps-contact-shell {\r\n\r\n        --ps-side-padding:\r\n            23px;\r\n\r\n\r\n        --ps-top-padding:\r\n            30px;\r\n\r\n\r\n        --ps-bottom-padding:\r\n            25px;\r\n\r\n\r\n        --ps-card-radius:\r\n            23px;\r\n\r\n\r\n        --ps-label-size:\r\n            11px;\r\n\r\n\r\n        --ps-input-size:\r\n            15px;\r\n\r\n    }\r\n\r\n\r\n\r\n    .ps-contact-form {\r\n\r\n        -webkit-backdrop-filter:\r\n\r\n            blur(18px)\r\n            saturate(125%);\r\n\r\n\r\n        backdrop-filter:\r\n\r\n            blur(18px)\r\n            saturate(125%);\r\n\r\n    }\r\n\r\n\r\n\r\n    .ps-field {\r\n\r\n        margin-bottom:\r\n            25px;\r\n\r\n    }\r\n\r\n\r\n\r\n    .ps-field label {\r\n\r\n        margin-bottom:\r\n            9px;\r\n\r\n    }\r\n\r\n\r\n\r\n    .ps-message-field {\r\n\r\n        min-height:\r\n            150px;\r\n\r\n    }\r\n\r\n\r\n\r\n    .ps-textarea-wrap {\r\n\r\n        min-height:\r\n            116px;\r\n\r\n    }\r\n\r\n\r\n\r\n    .ps-textarea-wrap textarea {\r\n\r\n        height:\r\n            115px;\r\n\r\n\r\n        min-height:\r\n            115px !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   REPLAYABLE ENTRANCE ANIMATION\r\n\r\n   Every time the form enters the viewport:\r\n   - the whole glass card fades in slowly\r\n   - the glass blur develops gradually\r\n   - a tiny vertical lift settles into place\r\n\r\n   When it is almost completely out of view, the state is\r\n   reset so the same entrance can play again on the next\r\n   scroll-in.\r\n========================================================= *\/\r\n\r\n.ps-contact-shell .ps-contact-form {\r\n\r\n    opacity:\r\n        0;\r\n\r\n\r\n    transform:\r\n        translate3d(0, 22px, 0)\r\n        scale(.992);\r\n\r\n\r\n    -webkit-backdrop-filter:\r\n\r\n        blur(0px)\r\n        saturate(100%);\r\n\r\n\r\n    backdrop-filter:\r\n\r\n        blur(0px)\r\n        saturate(100%);\r\n\r\n\r\n    transition:\r\n\r\n        opacity\r\n        1.55s\r\n        cubic-bezier(.16, 1, .30, 1),\r\n\r\n        transform\r\n        1.7s\r\n        cubic-bezier(.16, 1, .30, 1),\r\n\r\n        -webkit-backdrop-filter\r\n        1.9s\r\n        cubic-bezier(.16, 1, .30, 1),\r\n\r\n        backdrop-filter\r\n        1.9s\r\n        cubic-bezier(.16, 1, .30, 1);\r\n\r\n\r\n    will-change:\r\n        opacity,\r\n        transform,\r\n        backdrop-filter;\r\n\r\n}\r\n\r\n\r\n\r\n\/* DESKTOP + TABLET FINAL GLASS STATE *\/\r\n\r\n.ps-contact-shell.ps-inview\r\n.ps-contact-form {\r\n\r\n    opacity:\r\n        1;\r\n\r\n\r\n    transform:\r\n        translate3d(0, 0, 0)\r\n        scale(1);\r\n\r\n\r\n    -webkit-backdrop-filter:\r\n\r\n        blur(24px)\r\n        saturate(135%);\r\n\r\n\r\n    backdrop-filter:\r\n\r\n        blur(24px)\r\n        saturate(135%);\r\n\r\n}\r\n\r\n\r\n\r\n\/* MOBILE FINAL GLASS STATE *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .ps-contact-shell.ps-inview\r\n    .ps-contact-form {\r\n\r\n        -webkit-backdrop-filter:\r\n\r\n            blur(18px)\r\n            saturate(125%);\r\n\r\n\r\n        backdrop-filter:\r\n\r\n            blur(18px)\r\n            saturate(125%);\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    .ps-form-edge-light {\r\n\r\n        animation:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .ps-field.ps-validation-shake {\r\n\r\n        animation:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .ps-contact-shell .ps-contact-form,\r\n    .ps-contact-shell.ps-inview .ps-contact-form {\r\n\r\n        opacity:\r\n            1;\r\n\r\n\r\n        transform:\r\n            none;\r\n\r\n\r\n        transition:\r\n            none;\r\n\r\n\r\n        -webkit-backdrop-filter:\r\n\r\n            blur(24px)\r\n            saturate(135%);\r\n\r\n\r\n        backdrop-filter:\r\n\r\n            blur(24px)\r\n            saturate(135%);\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\r\n    \/* =====================================================\r\n       GET ELEMENTS\r\n    ====================================================== *\/\r\n\r\n    const form =\r\n        document.getElementById(\r\n            'psContactForm'\r\n        );\r\n\r\n\r\n    const buttonSlot =\r\n        document.getElementById(\r\n            'psContactButtonSlot'\r\n        );\r\n\r\n\r\n    const statusBox =\r\n        document.getElementById(\r\n            'psFormStatus'\r\n        );\r\n\r\n\r\n    if (\r\n        !form ||\r\n        !buttonSlot\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       REPLAYABLE ENTRANCE ANIMATION\r\n\r\n       Plays on first load if the form is already visible,\r\n       and plays again whenever the form re-enters the\r\n       viewport after being scrolled mostly out of view.\r\n    ====================================================== *\/\r\n\r\n    const contactShell =\r\n        form.closest(\r\n            '.ps-contact-shell'\r\n        );\r\n\r\n\r\n    if (contactShell) {\r\n\r\n\r\n        if (\r\n            'IntersectionObserver' in window\r\n        ) {\r\n\r\n\r\n            let entranceVisible =\r\n                false;\r\n\r\n\r\n            const entranceObserver =\r\n                new IntersectionObserver(\r\n\r\n                    function (entries) {\r\n\r\n\r\n                        entries.forEach(\r\n\r\n                            function (entry) {\r\n\r\n\r\n                                \/*\r\n                                   Start only after enough of\r\n                                   the card has entered view.\r\n                                *\/\r\n\r\n                                if (\r\n                                    entry.isIntersecting &&\r\n                                    entry.intersectionRatio >= .18\r\n                                ) {\r\n\r\n\r\n                                    if (!entranceVisible) {\r\n\r\n                                        entranceVisible =\r\n                                            true;\r\n\r\n\r\n                                        requestAnimationFrame(\r\n\r\n                                            function () {\r\n\r\n                                                contactShell.classList.add(\r\n                                                    'ps-inview'\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                                   Reset only when the form is\r\n                                   nearly gone from the viewport.\r\n                                   This avoids flickering near the\r\n                                   trigger line.\r\n                                *\/\r\n\r\n                                else if (\r\n                                    !entry.isIntersecting ||\r\n                                    entry.intersectionRatio <= .06\r\n                                ) {\r\n\r\n\r\n                                    entranceVisible =\r\n                                        false;\r\n\r\n\r\n                                    contactShell.classList.remove(\r\n                                        'ps-inview'\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: [\r\n                            0,\r\n                            .06,\r\n                            .18,\r\n                            .35\r\n                        ],\r\n\r\n\r\n                        rootMargin:\r\n                            '0px 0px -4% 0px'\r\n\r\n                    }\r\n\r\n                );\r\n\r\n\r\n            entranceObserver.observe(\r\n                contactShell\r\n            );\r\n\r\n        }\r\n\r\n\r\n        else {\r\n\r\n            \/* Older-browser fallback: simply show it. *\/\r\n\r\n            contactShell.classList.add(\r\n                'ps-inview'\r\n            );\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       STATE\r\n    ====================================================== *\/\r\n\r\n    let validationStarted =\r\n        false;\r\n\r\n\r\n    let sending =\r\n        false;\r\n\r\n\r\n    let originalButtonText =\r\n        'START THE CONVERSATION';\r\n\r\n\r\n    let startedAt =\r\n        Date.now();\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       WORDPRESS CONTACT ENDPOINT\r\n\r\n       Currently:\r\n       beepano.com\r\n\r\n       Later after migration:\r\n       panosky.com\r\n\r\n       No manual domain change required.\r\n    ====================================================== *\/\r\n\r\n    const endpoint =\r\n\r\n        window.location.origin +\r\n\r\n        '\/?rest_route=\/panosky\/v1\/contact';\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       GET ELEMENTOR BUTTON WIDGET\r\n    ====================================================== *\/\r\n\r\n    function getButtonWidget() {\r\n\r\n\r\n        return document.getElementById(\r\n            'panosky-contact-submit'\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       GET ACTUAL BUTTON\r\n    ====================================================== *\/\r\n\r\n    function getActualButton() {\r\n\r\n\r\n        const buttonWidget =\r\n            getButtonWidget();\r\n\r\n\r\n        if (!buttonWidget) {\r\n\r\n            return null;\r\n\r\n        }\r\n\r\n\r\n        return (\r\n\r\n            buttonWidget.querySelector(\r\n                '.elementor-button'\r\n            )\r\n\r\n            ||\r\n\r\n            buttonWidget.querySelector(\r\n                'button'\r\n            )\r\n\r\n            ||\r\n\r\n            buttonWidget.querySelector(\r\n                'a'\r\n            )\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       GET BUTTON TEXT ELEMENT\r\n    ====================================================== *\/\r\n\r\n    function getButtonTextElement() {\r\n\r\n\r\n        const button =\r\n            getActualButton();\r\n\r\n\r\n        if (!button) {\r\n\r\n            return null;\r\n\r\n        }\r\n\r\n\r\n        return (\r\n\r\n            button.querySelector(\r\n                '.elementor-button-text'\r\n            )\r\n\r\n            ||\r\n\r\n            button\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CAPTURE ORIGINAL BUTTON TEXT\r\n    ====================================================== *\/\r\n\r\n    function captureOriginalButtonText() {\r\n\r\n\r\n        const textElement =\r\n            getButtonTextElement();\r\n\r\n\r\n        if (\r\n            textElement &&\r\n            textElement.textContent.trim()\r\n        ) {\r\n\r\n            originalButtonText =\r\n                textElement.textContent.trim();\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CHANGE BUTTON TEXT\r\n    ====================================================== *\/\r\n\r\n    function setButtonText(text) {\r\n\r\n\r\n        const textElement =\r\n            getButtonTextElement();\r\n\r\n\r\n        if (textElement) {\r\n\r\n            textElement.textContent =\r\n                text;\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       STATUS\r\n    ====================================================== *\/\r\n\r\n    function clearStatus() {\r\n\r\n\r\n        if (!statusBox) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        statusBox.textContent =\r\n            '';\r\n\r\n\r\n        statusBox.className =\r\n            'ps-form-status';\r\n\r\n    }\r\n\r\n\r\n\r\n    function showStatus(\r\n        message,\r\n        type\r\n    ) {\r\n\r\n\r\n        if (!statusBox) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        statusBox.textContent =\r\n            message;\r\n\r\n\r\n        statusBox.className =\r\n\r\n            'ps-form-status ps-visible ps-' +\r\n\r\n            type;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       TRIM FIELD\r\n    ====================================================== *\/\r\n\r\n    function trimField(field) {\r\n\r\n\r\n        if (\r\n\r\n            field.tagName === 'INPUT'\r\n\r\n            ||\r\n\r\n            field.tagName === 'TEXTAREA'\r\n\r\n        ) {\r\n\r\n\r\n            if (\r\n                typeof field.value ===\r\n                'string'\r\n            ) {\r\n\r\n\r\n                field.value =\r\n                    field.value.trim();\r\n\r\n            }\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       VALIDATE ONE FIELD\r\n    ====================================================== *\/\r\n\r\n    function validateField(field) {\r\n\r\n\r\n        const container =\r\n            field.closest(\r\n                '.ps-field'\r\n            );\r\n\r\n\r\n        if (!container) {\r\n\r\n            return true;\r\n\r\n        }\r\n\r\n\r\n\r\n        trimField(\r\n            field\r\n        );\r\n\r\n\r\n        const valid =\r\n            field.checkValidity();\r\n\r\n\r\n\r\n        if (valid) {\r\n\r\n\r\n            container.classList.remove(\r\n                'ps-invalid'\r\n            );\r\n\r\n\r\n            field.setAttribute(\r\n                'aria-invalid',\r\n                'false'\r\n            );\r\n\r\n        }\r\n\r\n\r\n        else {\r\n\r\n\r\n            container.classList.add(\r\n                'ps-invalid'\r\n            );\r\n\r\n\r\n            field.setAttribute(\r\n                'aria-invalid',\r\n                'true'\r\n            );\r\n\r\n        }\r\n\r\n\r\n\r\n        return valid;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       GET REQUIRED FIELDS\r\n    ====================================================== *\/\r\n\r\n    function getFields() {\r\n\r\n\r\n        return Array.from(\r\n\r\n            form.querySelectorAll(\r\n\r\n                'input[required],' +\r\n\r\n                'select[required],' +\r\n\r\n                'textarea[required]'\r\n\r\n            )\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       SHAKE INVALID FIELD\r\n    ====================================================== *\/\r\n\r\n    function shakeField(field) {\r\n\r\n\r\n        const container =\r\n            field.closest(\r\n                '.ps-field'\r\n            );\r\n\r\n\r\n        if (!container) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n\r\n        container.classList.remove(\r\n            'ps-validation-shake'\r\n        );\r\n\r\n\r\n        void container.offsetWidth;\r\n\r\n\r\n        container.classList.add(\r\n            'ps-validation-shake'\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       VALIDATE COMPLETE FORM\r\n    ====================================================== *\/\r\n\r\n    function validateEntireForm() {\r\n\r\n\r\n        validationStarted =\r\n            true;\r\n\r\n\r\n        const fields =\r\n            getFields();\r\n\r\n\r\n        let valid =\r\n            true;\r\n\r\n\r\n        let firstInvalid =\r\n            null;\r\n\r\n\r\n\r\n        fields.forEach(\r\n\r\n            function (field) {\r\n\r\n\r\n                if (\r\n                    !validateField(\r\n                        field\r\n                    )\r\n                ) {\r\n\r\n\r\n                    valid =\r\n                        false;\r\n\r\n\r\n                    shakeField(\r\n                        field\r\n                    );\r\n\r\n\r\n                    if (\r\n                        !firstInvalid\r\n                    ) {\r\n\r\n\r\n                        firstInvalid =\r\n                            field;\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           IMPORTANT FIX\r\n\r\n           DO NOT scrollIntoView().\r\n\r\n           The old version could visually move the page\/form\r\n           when the textarea was the missing field.\r\n\r\n           We only focus it without scrolling.\r\n        ================================================== *\/\r\n\r\n        if (\r\n            !valid &&\r\n            firstInvalid\r\n        ) {\r\n\r\n\r\n            setTimeout(\r\n\r\n                function () {\r\n\r\n\r\n                    try {\r\n\r\n\r\n                        firstInvalid.focus({\r\n\r\n                            preventScroll:\r\n                                true\r\n\r\n                        });\r\n\r\n\r\n                    }\r\n\r\n                    catch (error) {\r\n\r\n\r\n                        \/*\r\n                           Fallback for older browsers.\r\n                           Record scroll position first.\r\n                        *\/\r\n\r\n                        const scrollX =\r\n                            window.scrollX;\r\n\r\n\r\n                        const scrollY =\r\n                            window.scrollY;\r\n\r\n\r\n                        firstInvalid.focus();\r\n\r\n\r\n                        window.scrollTo(\r\n                            scrollX,\r\n                            scrollY\r\n                        );\r\n\r\n                    }\r\n\r\n                },\r\n\r\n                80\r\n\r\n            );\r\n\r\n        }\r\n\r\n\r\n\r\n        return valid;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       LIVE VALIDATION\r\n    ====================================================== *\/\r\n\r\n    form\r\n        .querySelectorAll(\r\n            'input, select, textarea'\r\n        )\r\n        .forEach(\r\n\r\n            function (field) {\r\n\r\n\r\n                \/* =================================================\r\n                   TYPING\r\n\r\n                   If fixed while typing,\r\n                   red validation disappears.\r\n                ================================================== *\/\r\n\r\n                field.addEventListener(\r\n\r\n                    'input',\r\n\r\n                    function () {\r\n\r\n\r\n                        if (\r\n                            !validationStarted\r\n                        ) {\r\n\r\n                            return;\r\n\r\n                        }\r\n\r\n\r\n\r\n                        if (\r\n                            field.checkValidity()\r\n                        ) {\r\n\r\n\r\n                            const container =\r\n                                field.closest(\r\n                                    '.ps-field'\r\n                                );\r\n\r\n\r\n                            if (container) {\r\n\r\n\r\n                                container.classList.remove(\r\n                                    'ps-invalid'\r\n                                );\r\n\r\n                            }\r\n\r\n\r\n                            field.setAttribute(\r\n                                'aria-invalid',\r\n                                'false'\r\n                            );\r\n\r\n                        }\r\n\r\n                    }\r\n\r\n                );\r\n\r\n\r\n\r\n                \/* =================================================\r\n                   SELECT CHANGE\r\n                ================================================== *\/\r\n\r\n                field.addEventListener(\r\n\r\n                    'change',\r\n\r\n                    function () {\r\n\r\n\r\n                        if (\r\n                            validationStarted\r\n                        ) {\r\n\r\n\r\n                            validateField(\r\n                                field\r\n                            );\r\n\r\n                        }\r\n\r\n                    }\r\n\r\n                );\r\n\r\n\r\n\r\n                \/* =================================================\r\n                   LEAVE FIELD\r\n\r\n                   If still invalid, red returns.\r\n                ================================================== *\/\r\n\r\n                field.addEventListener(\r\n\r\n                    'blur',\r\n\r\n                    function () {\r\n\r\n\r\n                        if (\r\n                            validationStarted\r\n                        ) {\r\n\r\n\r\n                            validateField(\r\n                                field\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       BUILD PAYLOAD\r\n    ====================================================== *\/\r\n\r\n    function getPayload() {\r\n\r\n\r\n        return {\r\n\r\n\r\n            name:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-name'\r\n                    )\r\n                    .value\r\n                    .trim(),\r\n\r\n\r\n\r\n            email:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-email'\r\n                    )\r\n                    .value\r\n                    .trim(),\r\n\r\n\r\n\r\n            company:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-company'\r\n                    )\r\n                    .value\r\n                    .trim(),\r\n\r\n\r\n\r\n            location:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-location'\r\n                    )\r\n                    .value\r\n                    .trim(),\r\n\r\n\r\n\r\n            project_type:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-project-type'\r\n                    )\r\n                    .value,\r\n\r\n\r\n\r\n            message:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-message'\r\n                    )\r\n                    .value\r\n                    .trim(),\r\n\r\n\r\n\r\n            website:\r\n\r\n                document\r\n                    .getElementById(\r\n                        'ps-website'\r\n                    )\r\n                    .value,\r\n\r\n\r\n\r\n            started_at:\r\n\r\n                startedAt\r\n\r\n        };\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CLEAR VALIDATION\r\n    ====================================================== *\/\r\n\r\n    function clearValidationState() {\r\n\r\n\r\n        validationStarted =\r\n            false;\r\n\r\n\r\n        form\r\n            .querySelectorAll(\r\n                '.ps-invalid'\r\n            )\r\n            .forEach(\r\n\r\n                function (container) {\r\n\r\n\r\n                    container.classList.remove(\r\n                        'ps-invalid'\r\n                    );\r\n\r\n                }\r\n\r\n            );\r\n\r\n\r\n        form\r\n            .querySelectorAll(\r\n                '[aria-invalid]'\r\n            )\r\n            .forEach(\r\n\r\n                function (field) {\r\n\r\n\r\n                    field.setAttribute(\r\n                        'aria-invalid',\r\n                        'false'\r\n                    );\r\n\r\n                }\r\n\r\n            );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       SEND FORM\r\n    ====================================================== *\/\r\n\r\n    async function sendForm() {\r\n\r\n\r\n        if (sending) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n\r\n        clearStatus();\r\n\r\n\r\n\r\n        setButtonText(\r\n            'VALIDATING...'\r\n        );\r\n\r\n\r\n\r\n        await new Promise(\r\n\r\n            function (resolve) {\r\n\r\n\r\n                setTimeout(\r\n                    resolve,\r\n                    180\r\n                );\r\n\r\n            }\r\n\r\n        );\r\n\r\n\r\n\r\n        const valid =\r\n            validateEntireForm();\r\n\r\n\r\n\r\n        \/* =================================================\r\n           VALIDATION FAILED\r\n        ================================================== *\/\r\n\r\n        if (!valid) {\r\n\r\n\r\n            setButtonText(\r\n                'CHECK REQUIRED FIELDS'\r\n            );\r\n\r\n\r\n            setTimeout(\r\n\r\n                function () {\r\n\r\n\r\n                    if (!sending) {\r\n\r\n\r\n                        setButtonText(\r\n                            originalButtonText\r\n                        );\r\n\r\n                    }\r\n\r\n                },\r\n\r\n                1600\r\n\r\n            );\r\n\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n\r\n        \/* =================================================\r\n           START SENDING\r\n        ================================================== *\/\r\n\r\n        sending =\r\n            true;\r\n\r\n\r\n        buttonSlot.classList.add(\r\n            'ps-sending'\r\n        );\r\n\r\n\r\n        setButtonText(\r\n            'SENDING...'\r\n        );\r\n\r\n\r\n\r\n        try {\r\n\r\n\r\n            const response =\r\n                await fetch(\r\n\r\n                    endpoint,\r\n\r\n                    {\r\n\r\n                        method:\r\n                            'POST',\r\n\r\n\r\n                        credentials:\r\n                            'same-origin',\r\n\r\n\r\n                        headers: {\r\n\r\n                            'Content-Type':\r\n                                'application\/json',\r\n\r\n                            'Accept':\r\n                                'application\/json'\r\n\r\n                        },\r\n\r\n\r\n                        body:\r\n\r\n                            JSON.stringify(\r\n                                getPayload()\r\n                            )\r\n\r\n                    }\r\n\r\n                );\r\n\r\n\r\n\r\n            let result =\r\n                null;\r\n\r\n\r\n\r\n            try {\r\n\r\n\r\n                result =\r\n                    await response.json();\r\n\r\n\r\n            }\r\n\r\n            catch (jsonError) {\r\n\r\n\r\n                result =\r\n                    null;\r\n\r\n            }\r\n\r\n\r\n\r\n            \/* =================================================\r\n               SERVER ERROR\r\n            ================================================== *\/\r\n\r\n            if (\r\n\r\n                !response.ok\r\n\r\n                ||\r\n\r\n                !result\r\n\r\n                ||\r\n\r\n                result.success !== true\r\n\r\n            ) {\r\n\r\n\r\n                let message =\r\n\r\n                    \"Couldn't send your enquiry. Please try again.\";\r\n\r\n\r\n\r\n                if (\r\n                    result &&\r\n                    result.message\r\n                ) {\r\n\r\n\r\n                    message =\r\n                        result.message;\r\n\r\n                }\r\n\r\n\r\n\r\n                throw new Error(\r\n                    message\r\n                );\r\n\r\n            }\r\n\r\n\r\n\r\n            \/* =================================================\r\n               SUCCESS\r\n            ================================================== *\/\r\n\r\n            buttonSlot.classList.remove(\r\n                'ps-sending'\r\n            );\r\n\r\n\r\n            buttonSlot.classList.add(\r\n                'ps-success'\r\n            );\r\n\r\n\r\n            setButtonText(\r\n                '\u2713 ENQUIRY SENT'\r\n            );\r\n\r\n\r\n            showStatus(\r\n\r\n                'Thank you. Your project enquiry has been sent.',\r\n\r\n                'success'\r\n\r\n            );\r\n\r\n\r\n\r\n            \/* Reset all fields *\/\r\n\r\n            form.reset();\r\n\r\n\r\n\r\n            \/* Reset validation *\/\r\n\r\n            clearValidationState();\r\n\r\n\r\n\r\n            \/*\r\n               Important:\r\n               reset submission start timer for\r\n               possible future submission.\r\n            *\/\r\n\r\n            startedAt =\r\n                Date.now();\r\n\r\n\r\n\r\n            sending =\r\n                false;\r\n\r\n\r\n\r\n        }\r\n\r\n        catch (error) {\r\n\r\n\r\n            \/* =================================================\r\n               SEND FAILED\r\n            ================================================== *\/\r\n\r\n            sending =\r\n                false;\r\n\r\n\r\n            buttonSlot.classList.remove(\r\n                'ps-sending'\r\n            );\r\n\r\n\r\n            buttonSlot.classList.remove(\r\n                'ps-success'\r\n            );\r\n\r\n\r\n            setButtonText(\r\n                \"COULDN'T SEND \u2014 TRY AGAIN\"\r\n            );\r\n\r\n\r\n            showStatus(\r\n\r\n                error.message ||\r\n\r\n                \"Couldn't send your enquiry. Please try again.\",\r\n\r\n                'error'\r\n\r\n            );\r\n\r\n\r\n\r\n            setTimeout(\r\n\r\n                function () {\r\n\r\n\r\n                    if (!sending) {\r\n\r\n\r\n                        setButtonText(\r\n                            originalButtonText\r\n                        );\r\n\r\n                    }\r\n\r\n                },\r\n\r\n                3200\r\n\r\n            );\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       MOVE EXISTING ELEMENTOR BUTTON INTO FORM\r\n    ====================================================== *\/\r\n\r\n    function attachPanoskyButton() {\r\n\r\n\r\n        const buttonWidget =\r\n            getButtonWidget();\r\n\r\n\r\n\r\n        if (\r\n            !buttonWidget ||\r\n            !buttonSlot\r\n        ) {\r\n\r\n\r\n            return false;\r\n\r\n        }\r\n\r\n\r\n\r\n        \/* =================================================\r\n           MOVE BUTTON WIDGET\r\n        ================================================== *\/\r\n\r\n        if (\r\n            !buttonSlot.contains(\r\n                buttonWidget\r\n            )\r\n        ) {\r\n\r\n\r\n            buttonSlot.appendChild(\r\n                buttonWidget\r\n            );\r\n\r\n        }\r\n\r\n\r\n\r\n        const actualButton =\r\n            getActualButton();\r\n\r\n\r\n\r\n        \/* =================================================\r\n           CONNECT BUTTON\r\n        ================================================== *\/\r\n\r\n        if (\r\n\r\n            actualButton\r\n\r\n            &&\r\n\r\n            actualButton.dataset.psContactAttached !== 'true'\r\n\r\n        ) {\r\n\r\n\r\n            captureOriginalButtonText();\r\n\r\n\r\n\r\n            actualButton.dataset.psContactAttached =\r\n                'true';\r\n\r\n\r\n\r\n            actualButton.addEventListener(\r\n\r\n                'click',\r\n\r\n                function (event) {\r\n\r\n\r\n                    event.preventDefault();\r\n\r\n\r\n                    sendForm();\r\n\r\n                }\r\n\r\n            );\r\n\r\n        }\r\n\r\n\r\n\r\n        return true;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       ENTER KEY SUBMISSION\r\n    ====================================================== *\/\r\n\r\n    form.addEventListener(\r\n\r\n        'submit',\r\n\r\n        function (event) {\r\n\r\n\r\n            event.preventDefault();\r\n\r\n\r\n            sendForm();\r\n\r\n        }\r\n\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       INITIALIZE ELEMENTOR BUTTON\r\n    ====================================================== *\/\r\n\r\n    if (\r\n        !attachPanoskyButton()\r\n    ) {\r\n\r\n\r\n        const observer =\r\n            new MutationObserver(\r\n\r\n                function () {\r\n\r\n\r\n                    if (\r\n                        attachPanoskyButton()\r\n                    ) {\r\n\r\n\r\n                        observer.disconnect();\r\n\r\n                    }\r\n\r\n                }\r\n\r\n            );\r\n\r\n\r\n\r\n        observer.observe(\r\n\r\n            document.body,\r\n\r\n            {\r\n\r\n                childList:\r\n                    true,\r\n\r\n                subtree:\r\n                    true\r\n\r\n            }\r\n\r\n        );\r\n\r\n\r\n\r\n        setTimeout(\r\n\r\n            function () {\r\n\r\n\r\n                observer.disconnect();\r\n\r\n            },\r\n\r\n            8000\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 class=\"elementor-element elementor-element-ca01b96 elementor-align-center elementor-invisible elementor-widget elementor-widget-button\" data-id=\"ca01b96\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"panosky-contact-submit\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Schedule a Consultation<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>N E S W DRAG TO EXPLORE Your Space, Engineered for the Digital World. Panosky combines premium 360\u00b0 capture, immersive virtual tours, and custom spatial web experiences to transform physical environments into powerful digital experiences. &bull; From capture to interface to launch &bull; one complete spatial pipeline. &#8211; OUR STORY The FoundationBehind PanoSky. Before PanoSky, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":50,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>About Us - PanoSky Systems<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/panosky.com\/?page_id=39\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"About Us - PanoSky Systems\" \/>\n<meta property=\"og:description\" content=\"N E S W DRAG TO EXPLORE Your Space, Engineered for the Digital World. Panosky combines premium 360\u00b0 capture, immersive virtual tours, and custom spatial web experiences to transform physical environments into powerful digital experiences. &bull; From capture to interface to launch &bull; one complete spatial pipeline. &#8211; OUR STORY The FoundationBehind PanoSky. Before PanoSky, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/panosky.com\/?page_id=39\" \/>\n<meta property=\"og:site_name\" content=\"PanoSky Systems\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-25T09:45:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/About.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"380\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"38 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/panosky.com\\\/?page_id=39\",\"url\":\"https:\\\/\\\/panosky.com\\\/?page_id=39\",\"name\":\"About Us - PanoSky Systems\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/beepano.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/panosky.com\\\/?page_id=39#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/panosky.com\\\/?page_id=39#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/panosky.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/About.jpg\",\"datePublished\":\"2026-07-09T07:32:17+00:00\",\"dateModified\":\"2026-08-25T09:45:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/panosky.com\\\/?page_id=39#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/panosky.com\\\/?page_id=39\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/panosky.com\\\/?page_id=39#primaryimage\",\"url\":\"https:\\\/\\\/panosky.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/About.jpg\",\"contentUrl\":\"https:\\\/\\\/panosky.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/About.jpg\",\"width\":400,\"height\":380},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/panosky.com\\\/?page_id=39#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/panosky.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"About Us\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/beepano.com\\\/#website\",\"url\":\"http:\\\/\\\/beepano.com\\\/\",\"name\":\"PanoSky Systems\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\\\/\\\/beepano.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/beepano.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\\\/\\\/beepano.com\\\/#organization\",\"name\":\"PanoSky Systems\",\"url\":\"http:\\\/\\\/beepano.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/beepano.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/panosky.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/PanoSky-Logo-for-website-temp-01-1.png\",\"contentUrl\":\"https:\\\/\\\/panosky.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/PanoSky-Logo-for-website-temp-01-1.png\",\"width\":1024,\"height\":221,\"caption\":\"PanoSky Systems\"},\"image\":{\"@id\":\"http:\\\/\\\/beepano.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"About Us - PanoSky Systems","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/panosky.com\/?page_id=39","og_locale":"en_US","og_type":"article","og_title":"About Us - PanoSky Systems","og_description":"N E S W DRAG TO EXPLORE Your Space, Engineered for the Digital World. Panosky combines premium 360\u00b0 capture, immersive virtual tours, and custom spatial web experiences to transform physical environments into powerful digital experiences. &bull; From capture to interface to launch &bull; one complete spatial pipeline. &#8211; OUR STORY The FoundationBehind PanoSky. Before PanoSky, [&hellip;]","og_url":"https:\/\/panosky.com\/?page_id=39","og_site_name":"PanoSky Systems","article_modified_time":"2026-08-25T09:45:34+00:00","og_image":[{"width":400,"height":380,"url":"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/About.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"38 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/panosky.com\/?page_id=39","url":"https:\/\/panosky.com\/?page_id=39","name":"About Us - PanoSky Systems","isPartOf":{"@id":"http:\/\/beepano.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/panosky.com\/?page_id=39#primaryimage"},"image":{"@id":"https:\/\/panosky.com\/?page_id=39#primaryimage"},"thumbnailUrl":"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/About.jpg","datePublished":"2026-07-09T07:32:17+00:00","dateModified":"2026-08-25T09:45:34+00:00","breadcrumb":{"@id":"https:\/\/panosky.com\/?page_id=39#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/panosky.com\/?page_id=39"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/panosky.com\/?page_id=39#primaryimage","url":"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/About.jpg","contentUrl":"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/About.jpg","width":400,"height":380},{"@type":"BreadcrumbList","@id":"https:\/\/panosky.com\/?page_id=39#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/panosky.com\/"},{"@type":"ListItem","position":2,"name":"About Us"}]},{"@type":"WebSite","@id":"http:\/\/beepano.com\/#website","url":"http:\/\/beepano.com\/","name":"PanoSky Systems","description":"","publisher":{"@id":"http:\/\/beepano.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/beepano.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/beepano.com\/#organization","name":"PanoSky Systems","url":"http:\/\/beepano.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/beepano.com\/#\/schema\/logo\/image\/","url":"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/PanoSky-Logo-for-website-temp-01-1.png","contentUrl":"https:\/\/panosky.com\/wp-content\/uploads\/2026\/07\/PanoSky-Logo-for-website-temp-01-1.png","width":1024,"height":221,"caption":"PanoSky Systems"},"image":{"@id":"http:\/\/beepano.com\/#\/schema\/logo\/image\/"}}]}},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/panosky.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=39"}],"version-history":[{"count":5,"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":2956,"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/pages\/39\/revisions\/2956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/panosky.com\/index.php?rest_route=\/wp\/v2\/media\/50"}],"wp:attachment":[{"href":"https:\/\/panosky.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}