{"id":18,"date":"2026-09-08T19:21:32","date_gmt":"2026-09-08T19:21:32","guid":{"rendered":"http:\/\/gledhill.rubinaproductions.com\/?page_id=18"},"modified":"2026-09-09T01:42:11","modified_gmt":"2026-09-09T01:42:11","slug":"services","status":"publish","type":"page","link":"https:\/\/gledhill.rubinaproductions.com\/services\/","title":{"rendered":"SERVICES"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18\" class=\"elementor elementor-18\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99c4eeb e-con e-atomic-element e-flexbox-base e-cd78ab0 \" data-id=\"99c4eeb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"99c4eeb\" data-e-type=\"e-flexbox\" data-id=\"99c4eeb\">\n    \t\t<div class=\"elementor-element elementor-element-cb0aeac elementor-widget elementor-widget-html\" data-id=\"cb0aeac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n:root{\r\n  --awr-red:#ef111d;\r\n  --awr-black:#020202;\r\n  --awr-white:#ffffff;\r\n  --awr-muted:#8d8d8d;\r\n}\r\n\r\n\/* ======================================================\r\n   FORCE FULL BLEED\r\n====================================================== *\/\r\n\r\nhtml,\r\nbody{\r\n  margin:0 !important;\r\n  padding:0 !important;\r\n  width:100% !important;\r\n  background:#020202 !important;\r\n  overflow-x:hidden !important;\r\n}\r\n\r\n#page,\r\n.site,\r\n.site-content,\r\n.content-area,\r\n.site-main,\r\n.elementor,\r\n.elementor-page,\r\n.elementor-location-single{\r\n  margin:0 !important;\r\n  padding:0 !important;\r\n  background:#020202 !important;\r\n}\r\n\r\nbody.elementor-page .elementor > .e-con:first-child,\r\nbody.elementor-page .elementor > .elementor-element:first-child,\r\nbody.elementor-page main > .e-con:first-child{\r\n  margin-top:0 !important;\r\n  padding-top:0 !important;\r\n}\r\n\r\n.awr-services-hero,\r\n.awr-services-hero *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   HERO\r\n====================================================== *\/\r\n\r\n.awr-services-hero{\r\n  position:relative;\r\n  left:50%;\r\n\r\n  width:100vw;\r\n  height:100svh;\r\n  min-height:680px;\r\n\r\n  margin:-2px 0 0 -50vw !important;\r\n  padding:0 !important;\r\n\r\n  overflow:hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 68% 51%,\r\n      rgba(239,17,29,.14),\r\n      transparent 31%\r\n    ),\r\n    linear-gradient(\r\n      90deg,\r\n      #020202 0%,\r\n      #030303 50%,\r\n      #080203 100%\r\n    );\r\n\r\n  color:#fff;\r\n\r\n  font-family:Arial,Helvetica,sans-serif;\r\n}\r\n\r\n.awr-services-hero::before{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n  inset:0;\r\n\r\n  z-index:1;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(0,0,0,.99) 0%,\r\n      rgba(0,0,0,.93) 34%,\r\n      rgba(0,0,0,.25) 66%,\r\n      rgba(0,0,0,.47) 100%\r\n    );\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   RED BACKGROUND SHAPE\r\n====================================================== *\/\r\n\r\n.awr-services-shape{\r\n  position:absolute;\r\n\r\n  z-index:1;\r\n\r\n  width:56%;\r\n  height:96%;\r\n\r\n  right:-5%;\r\n  top:0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(239,17,29,.14),\r\n      rgba(239,17,29,.025) 60%,\r\n      transparent 82%\r\n    );\r\n\r\n  clip-path:\r\n    polygon(\r\n      30% 0,\r\n      100% 0,\r\n      100% 100%,\r\n      0 100%\r\n    );\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   MAIN DESKTOP LAYOUT\r\n====================================================== *\/\r\n\r\n.awr-services-inner{\r\n  position:relative;\r\n\r\n  z-index:10;\r\n\r\n  width:100%;\r\n  max-width:1560px;\r\n  height:100%;\r\n\r\n  margin:0 auto;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    39% 61%;\r\n\r\n  align-items:center;\r\n\r\n  padding:\r\n    82px\r\n    clamp(50px,4.2vw,72px)\r\n    22px;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   LEFT CONTENT\r\n====================================================== *\/\r\n\r\n.awr-services-copy{\r\n  position:relative;\r\n\r\n  z-index:30;\r\n\r\n  width:100%;\r\n  max-width:575px;\r\n\r\n  transform:\r\n    translate(20px,-20px);\r\n}\r\n\r\n.awr-services-kicker{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:12px;\r\n\r\n  margin-bottom:17px;\r\n\r\n  font-size:10px;\r\n\r\n  font-weight:700;\r\n\r\n  letter-spacing:3px;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n.awr-services-line{\r\n  width:31px;\r\n\r\n  height:2px;\r\n\r\n  background:\r\n    var(--awr-red);\r\n}\r\n\r\n.awr-services-index{\r\n  color:\r\n    var(--awr-red);\r\n}\r\n\r\n\r\n\/* TITLE *\/\r\n\r\n.awr-services-title{\r\n  margin:0;\r\n\r\n  font-size:\r\n    clamp(\r\n      50px,\r\n      4.15vw,\r\n      74px\r\n    );\r\n\r\n  line-height:.91;\r\n\r\n  letter-spacing:-3px;\r\n\r\n  font-weight:900;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n.awr-services-title span{\r\n  display:block;\r\n}\r\n\r\n.awr-services-title .red{\r\n  color:\r\n    var(--awr-red);\r\n}\r\n\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n.awr-services-description{\r\n  max-width:510px;\r\n\r\n  margin:\r\n    21px 0 23px;\r\n\r\n  color:#c7c7c7;\r\n\r\n  font-size:\r\n    clamp(\r\n      13px,\r\n      .92vw,\r\n      15px\r\n    );\r\n\r\n  line-height:1.6;\r\n\r\n  transition:\r\n    opacity .2s ease,\r\n    transform .2s ease;\r\n}\r\n\r\n\r\n\/* SELECTED SERVICE *\/\r\n\r\n.awr-selected-label{\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:10px;\r\n\r\n  margin-bottom:19px;\r\n\r\n  color:#777;\r\n\r\n  font-size:9px;\r\n\r\n  letter-spacing:2px;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n.awr-selected-label strong{\r\n  color:\r\n    var(--awr-red);\r\n\r\n  font-size:11px;\r\n}\r\n\r\n\r\n\/* CTA *\/\r\n\r\n.awr-service-cta{\r\n  position:relative;\r\n\r\n  min-height:50px;\r\n\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  justify-content:center;\r\n\r\n  gap:12px;\r\n\r\n  padding:\r\n    0 27px;\r\n\r\n  border:\r\n    1px solid var(--awr-red);\r\n\r\n  border-radius:999px;\r\n\r\n  background:\r\n    var(--awr-red);\r\n\r\n  color:#fff;\r\n\r\n  text-decoration:none;\r\n\r\n  text-transform:uppercase;\r\n\r\n  font-size:11px;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:1px;\r\n\r\n  overflow:hidden;\r\n\r\n  transition:\r\n    transform .28s ease,\r\n    box-shadow .28s ease;\r\n}\r\n\r\n.awr-service-cta::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  top:-30%;\r\n  left:-45%;\r\n\r\n  width:32%;\r\n  height:160%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(255,255,255,.26),\r\n      transparent\r\n    );\r\n\r\n  transform:\r\n    skewX(-20deg);\r\n\r\n  transition:\r\n    left .55s ease;\r\n}\r\n\r\n.awr-service-cta:hover{\r\n  transform:\r\n    translateY(-4px)\r\n    scale(1.015);\r\n\r\n  box-shadow:\r\n    0 12px 34px\r\n    rgba(239,17,29,.42),\r\n\r\n    0 0 22px\r\n    rgba(239,17,29,.20);\r\n}\r\n\r\n.awr-service-cta:hover::after{\r\n  left:125%;\r\n}\r\n\r\n\r\n\/* INTERACTION NOTE *\/\r\n\r\n.awr-interaction-note{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:9px;\r\n\r\n  margin-top:25px;\r\n\r\n  color:#666;\r\n\r\n  font-size:9px;\r\n\r\n  letter-spacing:1.5px;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n.awr-interaction-dot{\r\n  width:7px;\r\n\r\n  height:7px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    var(--awr-red);\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    rgba(239,17,29,.75);\r\n\r\n  animation:\r\n    awrNotePulse\r\n    1.8s ease-in-out infinite;\r\n}\r\n\r\n@keyframes awrNotePulse{\r\n\r\n  50%{\r\n    transform:scale(1.55);\r\n    opacity:.55;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   VISUAL AREA\r\n====================================================== *\/\r\n\r\n.awr-interactive-visual{\r\n  position:relative;\r\n\r\n  width:100%;\r\n  height:100%;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  justify-content:center;\r\n}\r\n\r\n\r\n\/* DESKTOP WHEEL BIGGER + LOWER *\/\r\n\r\n.awr-interactive-stage{\r\n  position:relative;\r\n\r\n  width:\r\n    clamp(\r\n      690px,\r\n      51vw,\r\n      860px\r\n    );\r\n\r\n  aspect-ratio:1;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  justify-content:center;\r\n\r\n  transform:\r\n    translateY(-20px);\r\n\r\n  transition:\r\n    transform .25s ease-out;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   SMOKE\r\n====================================================== *\/\r\n\r\n.awr-services-smoke{\r\n  position:absolute;\r\n\r\n  border-radius:50%;\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n.awr-services-smoke.back{\r\n  z-index:2;\r\n\r\n  width:78%;\r\n\r\n  height:29%;\r\n\r\n  left:5%;\r\n\r\n  bottom:16%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 20% 55%,\r\n      rgba(250,250,250,.52),\r\n      rgba(200,200,200,.18) 30%,\r\n      transparent 58%\r\n    ),\r\n\r\n    radial-gradient(\r\n      ellipse at 58% 48%,\r\n      rgba(225,225,225,.40),\r\n      rgba(165,165,165,.12) 35%,\r\n      transparent 62%\r\n    );\r\n\r\n  filter:\r\n    blur(17px);\r\n\r\n  opacity:.9;\r\n\r\n  animation:\r\n    awrServiceSmokeBack\r\n    7s ease-in-out infinite alternate;\r\n}\r\n\r\n.awr-services-smoke.front{\r\n  z-index:10;\r\n\r\n  width:80%;\r\n\r\n  height:23%;\r\n\r\n  left:8%;\r\n\r\n  bottom:5%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 20% 55%,\r\n      rgba(255,255,255,.60),\r\n      rgba(200,200,200,.19) 32%,\r\n      transparent 60%\r\n    ),\r\n\r\n    radial-gradient(\r\n      ellipse at 60% 50%,\r\n      rgba(240,240,240,.47),\r\n      rgba(175,175,175,.13) 36%,\r\n      transparent 64%\r\n    );\r\n\r\n  filter:\r\n    blur(14px);\r\n\r\n  opacity:.94;\r\n\r\n  animation:\r\n    awrServiceSmokeFront\r\n    6s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes awrServiceSmokeBack{\r\n\r\n  from{\r\n    transform:\r\n      translate(-30px,5px)\r\n      scale(.93);\r\n  }\r\n\r\n  to{\r\n    transform:\r\n      translate(35px,-15px)\r\n      scale(1.12);\r\n  }\r\n\r\n}\r\n\r\n@keyframes awrServiceSmokeFront{\r\n\r\n  from{\r\n    transform:\r\n      translate(-24px,0)\r\n      scale(.94);\r\n  }\r\n\r\n  to{\r\n    transform:\r\n      translate(30px,-10px)\r\n      scale(1.10);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   RED GLOW\r\n====================================================== *\/\r\n\r\n.awr-services-glow{\r\n  position:absolute;\r\n\r\n  z-index:2;\r\n\r\n  width:87%;\r\n\r\n  height:87%;\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(239,17,29,.27),\r\n      rgba(239,17,29,.08) 45%,\r\n      transparent 70%\r\n    );\r\n\r\n  filter:\r\n    blur(13px);\r\n\r\n  animation:\r\n    awrServiceGlow\r\n    3.5s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes awrServiceGlow{\r\n\r\n  from{\r\n    transform:scale(.96);\r\n    opacity:.7;\r\n  }\r\n\r\n  to{\r\n    transform:scale(1.07);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   FLOOR NEON\r\n====================================================== *\/\r\n\r\n.awr-services-floor{\r\n  position:absolute;\r\n\r\n  z-index:3;\r\n\r\n  width:84%;\r\n\r\n  height:15%;\r\n\r\n  bottom:1%;\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse,\r\n      rgba(255,20,30,.98),\r\n      rgba(239,17,29,.55) 27%,\r\n      rgba(239,17,29,.17) 53%,\r\n      transparent 75%\r\n    );\r\n\r\n  filter:\r\n    blur(8px);\r\n\r\n  transform:\r\n    scaleX(1.37);\r\n\r\n  box-shadow:\r\n    0 0 35px\r\n    rgba(239,17,29,.50),\r\n\r\n    0 0 85px\r\n    rgba(239,17,29,.21);\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   ORBIT\r\n====================================================== *\/\r\n\r\n.awr-services-orbit{\r\n  position:absolute;\r\n\r\n  inset:4%;\r\n\r\n  z-index:6;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.055);\r\n\r\n  border-radius:50%;\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n.awr-services-ring{\r\n  position:absolute;\r\n\r\n  inset:0;\r\n\r\n  z-index:7;\r\n\r\n  animation:\r\n    awrServiceRing\r\n    22s linear infinite;\r\n}\r\n\r\n.awr-services-ring circle{\r\n  fill:none;\r\n\r\n  stroke:\r\n    var(--awr-red);\r\n\r\n  stroke-width:1.25;\r\n\r\n  stroke-linecap:round;\r\n\r\n  stroke-dasharray:\r\n    55 100;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 0 5px\r\n      rgba(255,20,30,.95)\r\n    )\r\n\r\n    drop-shadow(\r\n      0 0 14px\r\n      rgba(239,17,29,.55)\r\n    );\r\n}\r\n\r\n@keyframes awrServiceRing{\r\n\r\n  to{\r\n    transform:\r\n      rotate(360deg);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   WHEEL\r\n====================================================== *\/\r\n\r\n.awr-interactive-wheel{\r\n  position:relative;\r\n\r\n  z-index:8;\r\n\r\n  width:75%;\r\n\r\n  height:75%;\r\n\r\n  object-fit:contain;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 36px 36px\r\n      rgba(0,0,0,.75)\r\n    )\r\n\r\n    drop-shadow(\r\n      0 17px 28px\r\n      rgba(239,17,29,.15)\r\n    );\r\n\r\n  user-select:none;\r\n\r\n  -webkit-user-drag:none;\r\n\r\n  cursor:grab;\r\n\r\n  transform:\r\n    rotate(\r\n      var(--wheel-user-angle,0deg)\r\n    );\r\n\r\n  transition:\r\n    opacity .35s ease,\r\n    filter .35s ease,\r\n    transform .8s\r\n    cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.awr-interactive-wheel:active{\r\n  cursor:grabbing;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   LIGHT SWEEP\r\n====================================================== *\/\r\n\r\n.awr-services-light{\r\n  position:absolute;\r\n\r\n  z-index:11;\r\n\r\n  top:17%;\r\n\r\n  left:14%;\r\n\r\n  width:13%;\r\n\r\n  height:64%;\r\n\r\n  opacity:0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(255,255,255,.31),\r\n      transparent\r\n    );\r\n\r\n  filter:\r\n    blur(10px);\r\n\r\n  transform:\r\n    rotate(18deg)\r\n    translateX(-500%);\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n.awr-services-light.run{\r\n  animation:\r\n    awrServiceLight\r\n    1.1s ease;\r\n}\r\n\r\n@keyframes awrServiceLight{\r\n\r\n  0%{\r\n    opacity:0;\r\n\r\n    transform:\r\n      rotate(18deg)\r\n      translateX(-500%);\r\n  }\r\n\r\n  25%{\r\n    opacity:1;\r\n  }\r\n\r\n  100%{\r\n    opacity:0;\r\n\r\n    transform:\r\n      rotate(18deg)\r\n      translateX(650%);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   HOTSPOT WRAPPERS\r\n====================================================== *\/\r\n\r\n.awr-hotspot-wrap{\r\n  position:absolute;\r\n\r\n  z-index:30;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:9px;\r\n}\r\n\r\n\r\n\/* NUMBER *\/\r\n\r\n.awr-hotspot{\r\n  position:relative;\r\n\r\n  width:36px;\r\n\r\n  height:36px;\r\n\r\n  flex:0 0 36px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  justify-content:center;\r\n\r\n  padding:0;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.22);\r\n\r\n  border-radius:50%;\r\n\r\n  background:\r\n    rgba(5,5,5,.70);\r\n\r\n  color:#aaa;\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:800;\r\n\r\n  cursor:pointer;\r\n\r\n  backdrop-filter:\r\n    blur(10px);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(10px);\r\n\r\n  box-shadow:\r\n    0 6px 20px\r\n    rgba(0,0,0,.24);\r\n\r\n  transition:\r\n    transform .28s ease,\r\n    color .28s ease,\r\n    background .28s ease,\r\n    border-color .28s ease,\r\n    box-shadow .28s ease;\r\n}\r\n\r\n.awr-hotspot::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  inset:-7px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(239,17,29,.13);\r\n\r\n  border-radius:50%;\r\n\r\n  opacity:0;\r\n\r\n  transform:\r\n    scale(.7);\r\n\r\n  transition:\r\n    opacity .28s ease,\r\n    transform .28s ease;\r\n}\r\n\r\n.awr-hotspot:hover,\r\n.awr-hotspot.active{\r\n  color:#fff;\r\n\r\n  background:\r\n    var(--awr-red);\r\n\r\n  border-color:\r\n    var(--awr-red);\r\n\r\n  transform:\r\n    scale(1.12);\r\n\r\n  box-shadow:\r\n    0 0 15px\r\n    rgba(239,17,29,.43),\r\n\r\n    0 0 30px\r\n    rgba(239,17,29,.16);\r\n}\r\n\r\n.awr-hotspot:hover::after,\r\n.awr-hotspot.active::after{\r\n  opacity:1;\r\n\r\n  transform:\r\n    scale(1.25);\r\n}\r\n\r\n\r\n\/* SERVICE NAMES *\/\r\n\r\n.awr-hotspot-name{\r\n  position:relative;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  min-height:32px;\r\n\r\n  padding:\r\n    0 10px;\r\n\r\n  border:\r\n    1px solid transparent;\r\n\r\n  border-radius:10px;\r\n\r\n  color:#767676;\r\n\r\n  background:\r\n    rgba(3,3,3,.12);\r\n\r\n  font-size:9px;\r\n\r\n  font-weight:600;\r\n\r\n  white-space:nowrap;\r\n\r\n  opacity:.76;\r\n\r\n  transform:\r\n    translateX(0);\r\n\r\n  transition:\r\n    color .28s ease,\r\n    background .28s ease,\r\n    border-color .28s ease,\r\n    opacity .28s ease,\r\n    transform .28s ease,\r\n    box-shadow .28s ease;\r\n}\r\n\r\n.awr-hotspot-wrap:hover\r\n.awr-hotspot-name{\r\n  color:#ddd;\r\n\r\n  opacity:1;\r\n\r\n  transform:\r\n    translateX(3px);\r\n}\r\n\r\n.awr-hotspot-wrap.active\r\n.awr-hotspot-name{\r\n  color:#fff;\r\n\r\n  opacity:1;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(239,17,29,.22),\r\n      rgba(239,17,29,.06)\r\n    );\r\n\r\n  border-color:\r\n    rgba(239,17,29,.27);\r\n\r\n  box-shadow:\r\n    0 6px 24px\r\n    rgba(0,0,0,.22);\r\n}\r\n\r\n\r\n\/* LEFT SIDE LABELS *\/\r\n\r\n.awr-hotspot-wrap.left{\r\n  flex-direction:row-reverse;\r\n}\r\n\r\n.awr-hotspot-wrap.left\r\n.awr-hotspot-name{\r\n  text-align:right;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   DESKTOP HOTSPOT POSITIONS\r\n====================================================== *\/\r\n\r\n\/* 01 top *\/\r\n.awr-hotspot-wrap[data-index=\"0\"]{\r\n  top:7%;\r\n  left:45%;\r\n}\r\n\r\n\/* 02 upper right *\/\r\n.awr-hotspot-wrap[data-index=\"1\"]{\r\n  top:17%;\r\n  right:5%;\r\n}\r\n\r\n\/* 03 right *\/\r\n.awr-hotspot-wrap[data-index=\"2\"]{\r\n  top:43%;\r\n  right:-3%;\r\n}\r\n\r\n\/* 04 lower right *\/\r\n.awr-hotspot-wrap[data-index=\"3\"]{\r\n  bottom:16%;\r\n  right:4%;\r\n}\r\n\r\n\/* 05 bottom *\/\r\n.awr-hotspot-wrap[data-index=\"4\"]{\r\n  bottom:5%;\r\n  left:45%;\r\n}\r\n\r\n\/* 06 lower left *\/\r\n.awr-hotspot-wrap[data-index=\"5\"]{\r\n  bottom:16%;\r\n  left:3%;\r\n}\r\n\r\n\/* 07 left *\/\r\n.awr-hotspot-wrap[data-index=\"6\"]{\r\n  top:43%;\r\n  left:-3%;\r\n}\r\n\r\n\/* 08 upper left *\/\r\n.awr-hotspot-wrap[data-index=\"7\"]{\r\n  top:17%;\r\n  left:4%;\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   LAPTOP HEIGHT RESPONSIVE\r\n====================================================== *\/\r\n\r\n@media\r\n(max-height:820px)\r\nand\r\n(min-width:901px){\r\n\r\n  .awr-services-inner{\r\n    padding-top:64px;\r\n  }\r\n\r\n  .awr-services-copy{\r\n    transform:\r\n      translate(18px,-12px);\r\n  }\r\n\r\n  .awr-services-title{\r\n    font-size:\r\n      clamp(\r\n        44px,\r\n        3.8vw,\r\n        63px\r\n      );\r\n  }\r\n\r\n  .awr-services-description{\r\n    margin:\r\n      16px 0 18px;\r\n  }\r\n\r\n  .awr-interactive-stage{\r\n    width:\r\n      clamp(\r\n        610px,\r\n        46vw,\r\n        700px\r\n      );\r\n\r\n    transform:\r\n      translateY(-8px);\r\n  }\r\n\r\n}\r\n\r\n\r\n@media\r\n(max-height:700px)\r\nand\r\n(min-width:901px){\r\n\r\n  .awr-services-title{\r\n    font-size:\r\n      clamp(\r\n        40px,\r\n        3.5vw,\r\n        56px\r\n      );\r\n  }\r\n\r\n  .awr-interactive-stage{\r\n    width:\r\n      clamp(\r\n        540px,\r\n        41vw,\r\n        610px\r\n      );\r\n  }\r\n\r\n  .awr-hotspot-name{\r\n    font-size:8px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   TABLET\r\n====================================================== *\/\r\n\r\n@media\r\n(max-width:1100px)\r\nand\r\n(min-width:769px){\r\n\r\n  .awr-services-inner{\r\n    grid-template-columns:\r\n      42% 58%;\r\n\r\n    padding-left:32px;\r\n\r\n    padding-right:18px;\r\n  }\r\n\r\n  .awr-services-copy{\r\n    transform:\r\n      translate(5px,-15px);\r\n  }\r\n\r\n  .awr-services-title{\r\n    font-size:\r\n      clamp(\r\n        42px,\r\n        4.8vw,\r\n        60px\r\n      );\r\n  }\r\n\r\n  .awr-interactive-stage{\r\n    width:\r\n      min(\r\n        620px,\r\n        94%\r\n      );\r\n  }\r\n\r\n  .awr-hotspot-name{\r\n    display:none;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ======================================================\r\n   MOBILE\r\n   CURRENT APPROVED VERSION PRESERVED\r\n====================================================== *\/\r\n\r\n@media(max-width:768px){\r\n\r\n  html,\r\n  body,\r\n  #page,\r\n  .site,\r\n  .site-content,\r\n  .content-area,\r\n  .site-main,\r\n  .elementor{\r\n    background:#020202 !important;\r\n  }\r\n\r\n\r\n  .awr-services-hero{\r\n    left:50%;\r\n\r\n    width:100vw;\r\n\r\n    height:auto;\r\n\r\n    min-height:100svh;\r\n\r\n    margin:\r\n      -2px 0 0 -50vw !important;\r\n  }\r\n\r\n\r\n  .awr-services-hero::before{\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        rgba(0,0,0,.99) 0%,\r\n        rgba(0,0,0,.94) 48%,\r\n        rgba(0,0,0,.52) 72%,\r\n        rgba(0,0,0,.78) 100%\r\n      );\r\n  }\r\n\r\n\r\n  .awr-services-shape{\r\n    width:95%;\r\n\r\n    height:54%;\r\n\r\n    right:-27%;\r\n\r\n    top:42%;\r\n  }\r\n\r\n\r\n  .awr-services-inner{\r\n    min-height:100svh;\r\n\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    padding:\r\n      88px\r\n      14px\r\n      20px;\r\n  }\r\n\r\n\r\n  .awr-services-copy{\r\n    width:100%;\r\n\r\n    max-width:none;\r\n\r\n    transform:none;\r\n  }\r\n\r\n\r\n  .awr-services-kicker{\r\n    margin-bottom:11px;\r\n\r\n    font-size:8px;\r\n\r\n    letter-spacing:2px;\r\n  }\r\n\r\n\r\n  .awr-services-title{\r\n    max-width:100%;\r\n\r\n    font-size:\r\n      clamp(\r\n        35px,\r\n        9.5vw,\r\n        46px\r\n      );\r\n\r\n    line-height:.92;\r\n\r\n    letter-spacing:-2px;\r\n  }\r\n\r\n\r\n  .awr-services-description{\r\n    max-width:96%;\r\n\r\n    margin:\r\n      12px 0 12px;\r\n\r\n    font-size:10.5px;\r\n\r\n    line-height:1.45;\r\n  }\r\n\r\n\r\n  .awr-selected-label{\r\n    margin-bottom:12px;\r\n\r\n    font-size:7px;\r\n  }\r\n\r\n\r\n  .awr-service-cta{\r\n    min-height:42px;\r\n\r\n    padding:\r\n      0 20px;\r\n\r\n    font-size:8.5px;\r\n  }\r\n\r\n\r\n  .awr-interaction-note{\r\n    display:none;\r\n  }\r\n\r\n\r\n  .awr-interactive-visual{\r\n    width:100%;\r\n\r\n    height:auto;\r\n\r\n    min-height:390px;\r\n\r\n    margin-top:5px;\r\n  }\r\n\r\n\r\n  .awr-interactive-stage{\r\n    width:\r\n      min(\r\n        375px,\r\n        94vw\r\n      );\r\n\r\n    transform:none !important;\r\n  }\r\n\r\n\r\n  .awr-interactive-wheel{\r\n    width:73%;\r\n\r\n    height:73%;\r\n\r\n    cursor:default;\r\n  }\r\n\r\n\r\n  \/* MOBILE NAMES HIDDEN *\/\r\n\r\n  .awr-hotspot-name{\r\n    display:none !important;\r\n  }\r\n\r\n\r\n  .awr-hotspot-wrap{\r\n    display:block;\r\n\r\n    width:28px;\r\n\r\n    height:28px;\r\n  }\r\n\r\n\r\n  .awr-hotspot{\r\n    width:28px;\r\n\r\n    height:28px;\r\n\r\n    font-size:7px;\r\n  }\r\n\r\n\r\n  \/* MOBILE ORIGINAL POSITIONS *\/\r\n\r\n  .awr-hotspot-wrap[data-index=\"0\"]{\r\n    top:9%;\r\n    left:46%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"1\"]{\r\n    top:20%;\r\n    right:16%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"2\"]{\r\n    top:45%;\r\n    right:4%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"3\"]{\r\n    bottom:19%;\r\n    right:15%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"4\"]{\r\n    bottom:8%;\r\n    left:47%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"5\"]{\r\n    bottom:19%;\r\n    left:14%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"6\"]{\r\n    top:45%;\r\n    left:4%;\r\n  }\r\n\r\n  .awr-hotspot-wrap[data-index=\"7\"]{\r\n    top:20%;\r\n    left:15%;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* SMALL PHONE *\/\r\n\r\n@media(max-width:390px){\r\n\r\n  .awr-services-inner{\r\n    padding-top:84px;\r\n\r\n    padding-left:12px;\r\n\r\n    padding-right:12px;\r\n  }\r\n\r\n\r\n  .awr-services-title{\r\n    font-size:\r\n      clamp(\r\n        32px,\r\n        9vw,\r\n        42px\r\n      );\r\n  }\r\n\r\n\r\n  .awr-interactive-visual{\r\n    min-height:340px;\r\n  }\r\n\r\n\r\n  .awr-interactive-stage{\r\n    width:\r\n      min(\r\n        330px,\r\n        92vw\r\n      );\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  .awr-services-hero *{\r\n    animation:none !important;\r\n\r\n    transition:none !important;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<section\r\n  class=\"awr-services-hero\"\r\n  id=\"awrServicesHero\"\r\n>\r\n\r\n  <div class=\"awr-services-shape\"><\/div>\r\n\r\n\r\n  <div class=\"awr-services-inner\">\r\n\r\n\r\n    <!-- LEFT -->\r\n\r\n    <div class=\"awr-services-copy\">\r\n\r\n\r\n      <div class=\"awr-services-kicker\">\r\n\r\n        <span class=\"awr-services-line\"><\/span>\r\n\r\n        <span>\r\n          Explore Our Services\r\n        <\/span>\r\n\r\n        <span\r\n          class=\"awr-services-index\"\r\n          id=\"awrServicesIndex\"\r\n        >\r\n          01 \/ 08\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <h1\r\n        class=\"awr-services-title\"\r\n        id=\"awrServicesTitle\"\r\n      >\r\n\r\n        <span>\r\n          Wheel\r\n        <\/span>\r\n\r\n        <span class=\"red\">\r\n          Refurbishment.\r\n        <\/span>\r\n\r\n      <\/h1>\r\n\r\n\r\n      <p\r\n        class=\"awr-services-description\"\r\n        id=\"awrServicesDescription\"\r\n      >\r\n\r\n        Restore tired, damaged and worn alloy wheels\r\n        with a professional refurbishment finish.\r\n\r\n      <\/p>\r\n\r\n\r\n      <div class=\"awr-selected-label\">\r\n\r\n        Selected Service\r\n\r\n        <strong\r\n          id=\"awrSelectedNumber\"\r\n        >\r\n          01\r\n        <\/strong>\r\n\r\n      <\/div>\r\n\r\n\r\n      <br>\r\n\r\n\r\n      <a\r\n        class=\"awr-service-cta\"\r\n        id=\"awrServiceCta\"\r\n        href=\"http:\/\/gledhill.rubinaproductions.com\/wheel-refurbishment\/\"\r\n      >\r\n\r\n        Explore Service\r\n\r\n        <span>\u2192<\/span>\r\n\r\n      <\/a>\r\n\r\n\r\n      <div class=\"awr-interaction-note\">\r\n\r\n        <span class=\"awr-interaction-dot\"><\/span>\r\n\r\n        Drag the wheel or select a service\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- RIGHT -->\r\n\r\n    <div class=\"awr-interactive-visual\">\r\n\r\n\r\n      <div\r\n        class=\"awr-interactive-stage\"\r\n        id=\"awrInteractiveStage\"\r\n      >\r\n\r\n\r\n        <div\r\n          class=\"awr-services-smoke back\"\r\n        ><\/div>\r\n\r\n\r\n        <div\r\n          class=\"awr-services-glow\"\r\n        ><\/div>\r\n\r\n\r\n        <div\r\n          class=\"awr-services-floor\"\r\n        ><\/div>\r\n\r\n\r\n        <div\r\n          class=\"awr-services-orbit\"\r\n        ><\/div>\r\n\r\n\r\n        <svg\r\n          class=\"awr-services-ring\"\r\n          viewBox=\"0 0 100 100\"\r\n        >\r\n\r\n          <circle\r\n            cx=\"50\"\r\n            cy=\"50\"\r\n            r=\"47\"\r\n            pathLength=\"100\"\r\n          ><\/circle>\r\n\r\n        <\/svg>\r\n\r\n\r\n        <img decoding=\"async\"\r\n          class=\"awr-interactive-wheel\"\r\n          id=\"awrInteractiveWheel\"\r\n          src=\"http:\/\/gledhill.rubinaproductions.com\/wp-content\/uploads\/2026\/09\/AWR_Wheel_Refurbishment_Hero.webp\"\r\n          alt=\"AWR Services Alloy Wheel\"\r\n          draggable=\"false\"\r\n        >\r\n\r\n\r\n        <div\r\n          class=\"awr-services-light\"\r\n          id=\"awrServicesLight\"\r\n        ><\/div>\r\n\r\n\r\n        <div\r\n          class=\"awr-services-smoke front\"\r\n        ><\/div>\r\n\r\n\r\n\r\n        <!-- 01 -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap active\"\r\n          data-index=\"0\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot active\"\r\n            type=\"button\"\r\n            aria-label=\"Wheel Refurbishment\"\r\n          >\r\n            01\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Wheel Refurbishment\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 02 -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap\"\r\n          data-index=\"1\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Diamond Cut\"\r\n          >\r\n            02\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Diamond Cut\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 03 -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap\"\r\n          data-index=\"2\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Powder Coating\"\r\n          >\r\n            03\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Powder Coating\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 04 -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap\"\r\n          data-index=\"3\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Hydrographics\"\r\n          >\r\n            04\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Hydrographics\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 05 -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap\"\r\n          data-index=\"4\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Caliper Painting\"\r\n          >\r\n            05\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Caliper Painting\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 06 LEFT -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap left\"\r\n          data-index=\"5\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Tyre Replacement\"\r\n          >\r\n            06\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Tyre Replacement\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 07 LEFT -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap left\"\r\n          data-index=\"6\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Wheel Straightening\"\r\n          >\r\n            07\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Wheel Straightening\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- 08 LEFT -->\r\n\r\n        <div\r\n          class=\"awr-hotspot-wrap left\"\r\n          data-index=\"7\"\r\n        >\r\n\r\n          <button\r\n            class=\"awr-hotspot\"\r\n            type=\"button\"\r\n            aria-label=\"Wheel Welding\"\r\n          >\r\n            08\r\n          <\/button>\r\n\r\n          <span class=\"awr-hotspot-name\">\r\n            Wheel Welding\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\",function(){\r\n\r\n\r\n  const services = [\r\n\r\n    {\r\n      number:\"01\",\r\n      title1:\"Wheel\",\r\n      title2:\"Refurbishment.\",\r\n      description:\r\n      \"Restore tired, damaged and worn alloy wheels with a professional refurbishment finish.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/wheel-refurbishment\/\",\r\n      rotation:0\r\n    },\r\n\r\n    {\r\n      number:\"02\",\r\n      title1:\"Diamond\",\r\n      title2:\"Cut.\",\r\n      description:\r\n      \"Precision diamond cutting restores the machined face and delivers a clean premium finish.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/diamond-cut\/\",\r\n      rotation:24\r\n    },\r\n\r\n    {\r\n      number:\"03\",\r\n      title1:\"Powder\",\r\n      title2:\"Coating.\",\r\n      description:\r\n      \"Durable powder coated finishes combine long-lasting protection with a clean custom appearance.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/powder-coating\/\",\r\n      rotation:49\r\n    },\r\n\r\n    {\r\n      number:\"04\",\r\n      title1:\"Custom\",\r\n      title2:\"Hydrographics.\",\r\n      description:\r\n      \"Distinctive hydrographic patterns create a completely individual finish for automotive components.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/hydrographics\/\",\r\n      rotation:74\r\n    },\r\n\r\n    {\r\n      number:\"05\",\r\n      title1:\"Caliper\",\r\n      title2:\"Painting.\",\r\n      description:\r\n      \"Refresh your braking setup with professionally prepared and finished custom painted calipers.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/caliper-paiting\/\",\r\n      rotation:99\r\n    },\r\n\r\n    {\r\n      number:\"06\",\r\n      title1:\"Tyre\",\r\n      title2:\"Replacement.\",\r\n      description:\r\n      \"Professional tyre replacement and fitting to complete your wheel restoration safely and correctly.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/tyre-replacement\/\",\r\n      rotation:124\r\n    },\r\n\r\n    {\r\n      number:\"07\",\r\n      title1:\"Wheel\",\r\n      title2:\"Straightening.\",\r\n      description:\r\n      \"Correct bent and distorted alloy wheels to restore alignment, appearance and road performance.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/wheel-straightening\/\",\r\n      rotation:149\r\n    },\r\n\r\n    {\r\n      number:\"08\",\r\n      title1:\"Wheel\",\r\n      title2:\"Welding.\",\r\n      description:\r\n      \"Professional alloy wheel welding for cracks and repairable structural damage.\",\r\n      url:\r\n      \"http:\/\/gledhill.rubinaproductions.com\/wheel-welding\/\",\r\n      rotation:174\r\n    }\r\n\r\n  ];\r\n\r\n\r\n  const hero =\r\n    document.getElementById(\r\n      \"awrServicesHero\"\r\n    );\r\n\r\n  const stage =\r\n    document.getElementById(\r\n      \"awrInteractiveStage\"\r\n    );\r\n\r\n  const wheel =\r\n    document.getElementById(\r\n      \"awrInteractiveWheel\"\r\n    );\r\n\r\n  const title =\r\n    document.getElementById(\r\n      \"awrServicesTitle\"\r\n    );\r\n\r\n  const description =\r\n    document.getElementById(\r\n      \"awrServicesDescription\"\r\n    );\r\n\r\n  const index =\r\n    document.getElementById(\r\n      \"awrServicesIndex\"\r\n    );\r\n\r\n  const selected =\r\n    document.getElementById(\r\n      \"awrSelectedNumber\"\r\n    );\r\n\r\n  const cta =\r\n    document.getElementById(\r\n      \"awrServiceCta\"\r\n    );\r\n\r\n  const light =\r\n    document.getElementById(\r\n      \"awrServicesLight\"\r\n    );\r\n\r\n  const wrappers =\r\n    document.querySelectorAll(\r\n      \".awr-hotspot-wrap\"\r\n    );\r\n\r\n\r\n  let current = 0;\r\n\r\n  let wheelAngle = 0;\r\n\r\n  let dragging = false;\r\n\r\n  let startX = 0;\r\n\r\n  let startAngle = 0;\r\n\r\n\r\n\r\n  function restartLight(){\r\n\r\n    light.classList.remove(\r\n      \"run\"\r\n    );\r\n\r\n    void light.offsetWidth;\r\n\r\n    light.classList.add(\r\n      \"run\"\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  function selectService(serviceIndex){\r\n\r\n    const service =\r\n      services[serviceIndex];\r\n\r\n\r\n    \/* FADE CONTENT *\/\r\n\r\n    title.style.opacity =\r\n      \"0\";\r\n\r\n    title.style.transform =\r\n      \"translateY(12px)\";\r\n\r\n    description.style.opacity =\r\n      \"0\";\r\n\r\n    description.style.transform =\r\n      \"translateY(8px)\";\r\n\r\n\r\n    setTimeout(function(){\r\n\r\n\r\n      title.innerHTML =\r\n\r\n        \"<span>\" +\r\n        service.title1 +\r\n        \"<\/span>\" +\r\n\r\n        \"<span class='red'>\" +\r\n        service.title2 +\r\n        \"<\/span>\";\r\n\r\n\r\n      description.textContent =\r\n        service.description;\r\n\r\n\r\n      index.textContent =\r\n        service.number +\r\n        \" \/ 08\";\r\n\r\n\r\n      selected.textContent =\r\n        service.number;\r\n\r\n\r\n      cta.href =\r\n        service.url;\r\n\r\n\r\n\r\n      \/* ACTIVE STATES *\/\r\n\r\n      wrappers.forEach(function(wrapper){\r\n\r\n        wrapper.classList.remove(\r\n          \"active\"\r\n        );\r\n\r\n        const button =\r\n          wrapper.querySelector(\r\n            \".awr-hotspot\"\r\n          );\r\n\r\n        button.classList.remove(\r\n          \"active\"\r\n        );\r\n\r\n      });\r\n\r\n\r\n      wrappers[serviceIndex]\r\n        .classList.add(\r\n          \"active\"\r\n        );\r\n\r\n\r\n      wrappers[serviceIndex]\r\n        .querySelector(\r\n          \".awr-hotspot\"\r\n        )\r\n        .classList.add(\r\n          \"active\"\r\n        );\r\n\r\n\r\n\r\n      \/* WHEEL ROTATION *\/\r\n\r\n      wheelAngle =\r\n        service.rotation;\r\n\r\n\r\n      wheel.style.setProperty(\r\n        \"--wheel-user-angle\",\r\n        wheelAngle + \"deg\"\r\n      );\r\n\r\n\r\n      \/* CONTENT BACK *\/\r\n\r\n      title.style.transition =\r\n        \"opacity .35s ease, transform .35s ease\";\r\n\r\n\r\n      description.style.transition =\r\n        \"opacity .35s ease, transform .35s ease\";\r\n\r\n\r\n      title.style.opacity =\r\n        \"1\";\r\n\r\n      title.style.transform =\r\n        \"translateY(0)\";\r\n\r\n\r\n      description.style.opacity =\r\n        \"1\";\r\n\r\n      description.style.transform =\r\n        \"translateY(0)\";\r\n\r\n\r\n      restartLight();\r\n\r\n\r\n      current =\r\n        serviceIndex;\r\n\r\n\r\n    },180);\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* CLICK SERVICE *\/\r\n\r\n  wrappers.forEach(function(wrapper){\r\n\r\n    wrapper.addEventListener(\r\n      \"click\",\r\n      function(){\r\n\r\n        selectService(\r\n          Number(\r\n            this.dataset.index\r\n          )\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  });\r\n\r\n\r\n\r\n  \/* ======================================================\r\n     DESKTOP DRAG\r\n  ====================================================== *\/\r\n\r\n  function desktopAllowed(){\r\n\r\n    return window.innerWidth > 900;\r\n\r\n  }\r\n\r\n\r\n  wheel.addEventListener(\r\n    \"pointerdown\",\r\n    function(event){\r\n\r\n      if(!desktopAllowed()){\r\n        return;\r\n      }\r\n\r\n\r\n      dragging = true;\r\n\r\n\r\n      startX =\r\n        event.clientX;\r\n\r\n\r\n      startAngle =\r\n        wheelAngle;\r\n\r\n\r\n      wheel.setPointerCapture(\r\n        event.pointerId\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  wheel.addEventListener(\r\n    \"pointermove\",\r\n    function(event){\r\n\r\n      if(\r\n        !dragging ||\r\n        !desktopAllowed()\r\n      ){\r\n        return;\r\n      }\r\n\r\n\r\n      const delta =\r\n        event.clientX -\r\n        startX;\r\n\r\n\r\n      wheelAngle =\r\n        startAngle +\r\n        delta * .25;\r\n\r\n\r\n      wheel.style.setProperty(\r\n        \"--wheel-user-angle\",\r\n        wheelAngle + \"deg\"\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  wheel.addEventListener(\r\n    \"pointerup\",\r\n    function(){\r\n\r\n      dragging = false;\r\n\r\n    }\r\n  );\r\n\r\n\r\n  wheel.addEventListener(\r\n    \"pointercancel\",\r\n    function(){\r\n\r\n      dragging = false;\r\n\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* ======================================================\r\n     DESKTOP PARALLAX\r\n  ====================================================== *\/\r\n\r\n  if(\r\n    window.matchMedia(\r\n      \"(min-width:901px)\"\r\n    ).matches\r\n  ){\r\n\r\n    hero.addEventListener(\r\n      \"mousemove\",\r\n      function(event){\r\n\r\n        if(dragging){\r\n          return;\r\n        }\r\n\r\n\r\n        const rect =\r\n          hero.getBoundingClientRect();\r\n\r\n\r\n        const x =\r\n          (\r\n            event.clientX -\r\n            rect.left\r\n          )\r\n          \/\r\n          rect.width\r\n          -\r\n          .5;\r\n\r\n\r\n        const y =\r\n          (\r\n            event.clientY -\r\n            rect.top\r\n          )\r\n          \/\r\n          rect.height\r\n          -\r\n          .5;\r\n\r\n\r\n        stage.style.transform =\r\n\r\n          \"translate3d(\" +\r\n\r\n          (x * 8) +\r\n\r\n          \"px,\" +\r\n\r\n          ((y * 6) - 20) +\r\n\r\n          \"px,0)\";\r\n\r\n      }\r\n    );\r\n\r\n\r\n    hero.addEventListener(\r\n      \"mouseleave\",\r\n      function(){\r\n\r\n        stage.style.transform =\r\n          \"translate3d(0,-20px,0)\";\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  wheel.style.setProperty(\r\n    \"--wheel-user-angle\",\r\n    \"0deg\"\r\n  );\r\n\r\n\r\n  restartLight();\r\n\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Explore Our Services 01 \/ 08 Wheel Refurbishment. Restore tired, damaged and worn alloy wheels with a professional refurbishment finish. Selected Service 01 Explore Service \u2192 Drag the wheel or select a service 01 Wheel Refurbishment 02 Diamond Cut 03 Powder Coating 04 Hydrographics 05 Caliper Painting 06 Tyre Replacement 07 Wheel Straightening 08 Wheel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":4,"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/pages\/18\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/gledhill.rubinaproductions.com\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}