:root {
        --nav-height: 114px;
        --hero-video-fade-color: #010814;
        --modal-link-color: #ffffff;
        --modal-vid-ctrls: #f1f1f1;
        --hotspot--active-outline: #ff0;
        --hotspot--active-centre: #f00;
        --expand-v-bg: #000000;
        --footnote-bg: #ffffff;
        --footnote-text: #707070;
      }
      @media screen and (max-width: 767px) {
        :root {
          --nav-height: 107px;
        }
      }

/*------- GENERAL -------*/
section { padding-top: 120px; }
.pdp-center{ text-align: center !important; }
.pdp-left{ text-align: left !important; }
.pdp-right{ text-align: right !important; }
.pdp-flex-center{ justify-content: center !important; }
.pdp-flex-left{ justify-content: left !important; }
.pdp-flex-right{ justify-content: right !important; }
.pdp-show{ display: block !important; }
.pdp-visuallyshow{ opacity: 1 !important; }
.pdp-mobile-show { display: none; }
.pdp-mobile-show-inline { display: none; }
.pdp-desktop-show { display: block; }
.pdp-sup { font-size: 75%; vertical-align: super; }
.pdp ol[class] li, .pdp ul[class] li { list-style: auto; font-size: 1.8rem; }


      /*------- HERO VIDEO -------*/
      .hero-video:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
       /* box-shadow: inset -1px 1px 30px 40px var(--hero-video-fade-color);*/
        width: 100%;
        height: 100%;
      }

      .hero-video-link-contain {
        /* margin-top: 25px; */
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
        /* width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        z-index: 10; Ensure this is above the video */
      }

      /*------- VIDEO & CTRLS DISPLAY -------*/
      .pdp-video-cont {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        text-align: right;
      }
      .ctrl-nav {
        padding: 6px 12px 0 0;
      }
      .pdp-vid-ctrls {
        padding: 6px 12px 0 0;
      }
      .ctrl-nav button,
      .pdp-vid-ctrls button,
      button.js-modal-close {
        background: transparent;
        padding: 6px;
      }
      /* NEW - to add all icon buttons (modal close) */
      .pdp-vid-ctrls button,
      .expand-v-toggle {
        background: transparent;
        margin: 6px;
        width: var(--icon--icon-size);
        height: var(--icon--icon-size);
        border: var(--icon--icon-svg-thickness) solid var(--text-light);
        border-radius: 50%;
      }
      .expand-v-toggle a {
        color: var(--expand-v-toggle-icon);
      }
      .expand-v-toggle.ve-active {
        transform: rotateZ(45deg);
      }
      /* NEW - */
      .pdp-vid-ctrls svg {
        width: 80%;
        height: 100%;
        fill: none;
        stroke: var(--text-light);
        stroke-width: var(--icon-svg-thickness);
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .expand-v-toggle svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke-width: var(--icon-svg-thickness);
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .modal-content .pdp-vid-ctrls button {
        border-color: var(--modal-vid-ctrls);
      }
      .modal-content .pdp-vid-ctrls svg {
        stroke: var(--modal-vid-ctrls);
      }
      .ctrl-nav button:focus,
      .pdp-vid-ctrls button:focus,
      .expand-v-toggle button:focus,
      button.js-modal-close:focus {
        outline: 0;
      }
      /* NEW - */
      .pdp-vid-ctrls svg {
        width: 80%;
        height: 100%;
        fill: none;
        stroke: var(--text-color);
        stroke-width: 1;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      /*------- POP UP MODAL -------*/
      .modal-src-link {
        display: flex;
        align-items: center;
        cursor: pointer;
        /* margin-top: 12px; */
      }
      .modal-src-link-icon {
        margin-right: 6px;
        border-radius: 50%;
        width: 36px;
        height: 36px;
      }
      .modal-src-link-icon svg {
        width: 80%;
        height: 100%;
        fill: none;
        stroke: var(--modal-link-color);
        stroke-width: 1;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .modal-src-link-text {
        color: var(--modal-link-color) !important;
        /* align-self: center;
        margin-bottom: 0;
        text-decoration: none; */
      }
      /* .modal-src-link-text:hover {
        text-decoration: underline !important;
        cursor: pointer;
      } */
      .js-modal-close svg {
        width: 48px;
        height: 48px;
        fill: none;
        stroke: #fcfbfa;
        stroke-width: 0.75;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .js-modal-cont {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        height: calc(100% - var(--nav-height));
        overflow: auto;
        background-color: #040f1c;
        background-color: rgba(4, 15, 28, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        transition: 1s all ease;
        z-index: 5;
      }
      /*------- EXPAND HORIZONTAL -------*/
      .measure-expand,
      .monitor-expand,
      .manage-expand,
      .stress-reduction-expand {
        height: calc(100% - var(--nav-height));
        top: var(--nav-height);
        z-index: 20;
      }
      /*------- HOTSPOT -------*/
      .interactive-hotspot-contain {
        --coord-x: 0;
        --coord-y: 0;
        transform: translate(var(--coord-x), var(--coord-y));
        transition: 1s all ease;
      }
      .interactive-hotspot-point.w-active {
        transform: scale(1.25);
      }
      .interactive-hotspot-point.w-active .point-centre {
        outline: 3px solid var(--hotspot--active-outline);
        background-color: var(--hotspot--active-centre);
      }
      /*------- TABS DIVIDER -------*/
      .pdp .a-tab-menu-w25:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        width: 1px;
        height: 28px;
        background-color: var(--tab--menu-text);
      }
      .pdp .a-tab-menu-w25:last-child:after {
        width: 0;
      }
      /*------- SLIDER -------*/
      .w-slider-dot {
        color: #D3D3D3 !important;
        background: none !important;
        border: 3px solid #D3D3D3 !important;
      }
      .w-slider-dot.w-active {
        background: #D3D3D3 !important;
        border: 3px solid #D3D3D3 !important;
      }
      /*------- EXPAND H -------*/
      .expand-h-content>div:first-child {
        margin-left: 6.25%;
      }
      /*------- EXPAND V -------*/
      .expand-v-contain {
        max-height: 0;
        background-color: var(--expand-v-bg);
        overflow: hidden;
        transition: max-height 0.2s ease-out;
      }
      /*------- FOOTNOTES -------*/
      .section-footnotes {
        background-color: #ffffff;
        background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
        padding-top: 40px;
        padding-bottom: 40px;
      }
      .footnote-content {
        max-width: 980px;
        width: 90%;
        margin: 0 auto;
      }
      .list-item {
        color: var(--footnote-colour);
        padding-bottom: 10px;
        font-size: 1.4rem !important;
        font-weight: 300;
      }
      /*--------------------------------*/
      /*------- MOBILE LANDSCAPE -------*/
      /*--------------------------------*/
      @media screen and (max-width: 767px) {
        .pdp-mobile-show {
          display: block;
        }
        .pdp-mobile-show-inline {
          display: inline-block;
        }
        .pdp-desktop-show {
          display: none;
        }
        .pdp ol[class] li,
        .pdp ul[class] li {
          font-size: 1.7rem;
        }
        /*------- VIDEO -------*/
        .hero-video-link-contain {
          top: 5px;
        }
        /*------- USP -------*/
        .usp-tiles-row:first-child {
          margin-top: 0px;
        }
        /*------- TABS MENU FADE OUT -------*/
        .tabs::after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 10%;
          height: 68px;
          background: linear-gradient(270deg, rgb(24 21 0) 0%, rgb(133 119 0 / 70%) 40%, rgb(109 98 0 / 0%) 100%);
        }
        .modal-src-link-icon {
          width: 32px;
          height: 32px;
        }
        .pdp .modal-src-link-text {
          font-size: 16px;
        }
        /*------- EXPAND -------*/
        .expand-h-content>div:first-child {
          margin-left: 7%;
        }
      }
      /*-------------------------------*/
      /*------- MOBILE PORTRAIT -------*/
      /*-------------------------------*/
      @media screen and (max-width: 479px) {
        .hero-video:after {
          box-shadow: none;
        }
      }