:root {
    --nav-height: 114px;
    --hero-video-fade-color: #010814;
    /* --modal-link-color: #ffe400; CHANGE TO WF */
    --hero-modal-link-color: #ffffff; /* when hero & normal modal links have diff colors */
    --modal-vid-ctrls: #f1f1f1;
    --hotspot--active-outline: #ff0;
    --hotspot--active-centre: #f00;
    --hotspot--active-scale: 1.5;
    --slider-dot-color: #D3D3D3;
    /* --expand-v-bg: #000000; CHANGE TO WF */
    --footnote-bg: #ffffff;
    --footnote-text: #707070;
    }
    @media screen and (max-width: 767px) {
        :root {
             --nav-height: 107px;
        }
    }
    /*------- GENERAL -------*/
    .pdp > section { padding-top: 120px; }
    .pdp > section:first-of-type { padding-top: 0; }
    .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-desktop-show-inline { display: inline-block; }
    .pdp-sup { font-size: 75%; vertical-align: super; }
    /* Lists */
    .pdp ol[class], .pdp ul[class] { padding-left: 20px; }
    .pdp ol[class] li, .pdp ul[class] li { list-style: auto; font-size: 1.8rem; }
    .pdp-list-dot li { list-style: disc !important; }
    /* .pdp .pdp-list-dot ::marker {
        content: "• ";
        color: var(--list-marker-color);
        font-variant-numeric: normal;
    } */
    /* .pdp button {
        background: transparent;
        padding: 6px;
    }
    .pdp button:focus { outline: 0; } */
    /*------- 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 {
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
      }
    /*------- VIDEO & CTRLS DISPLAY -------*/
    .pdp-video-cont{
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        text-align: right;
    }
    .pdp-vid-ctrls { padding: 6px 12px 0 0; }
    .pdp-vid-ctrls button,
    button.js-modal-close{
        background: transparent;
        padding: 6px;
    }
    .pdp-vid-ctrls button:focus,
    .js-expand-v-toggle button:focus,
    button.js-modal-close:focus{
        outline: 0;	
    }
    /* NEW - to add all icon buttons (modal close) */
    .pdp-vid-ctrls button,
    .js-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%;
    }
    .js-expand-v-toggle a{
        color: var(--expand-v-toggle-icon);
    }
    .js-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--icon-svg-thickness);
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .js-expand-v-toggle svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke-width: var(--icon--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);
      }
    /* NEW - */
    /* .pdp-vid-ctrls svg {
        width: 80%;
        height: 100%;
        fill: none;
        stroke: var(--text-light);
        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: 14px;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        fill: none;
        stroke: var(--modal-link-color);
        stroke-width: var(--icon--icon-svg-thickness);
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    /* .hero-video-link-contain { margin-top: 25px; } */
    .hero-video-link-contain .modal-src-link-icon{ stroke: var(--hero-modal-link-color); }
    .hero-video-link-contain .modal-src-link-text{ color: var(--hero-modal-link-color) !important; }
    /* .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(var(--hotspot--active-scale));
    }
    .interactive-hotspot-point.w-active .interactive-point-centre{
        outline: 3px solid var(--hotspot--active-outline);
        background-color: var(--hotspot--active-centre);
    }
    /*------- TABS -------*/
    .pdp .tab-menu > a {
        text-decoration: none;
    }
    .pdp .tab-menu > a:hover {
        cursor: pointer;
    }
    .pdp .tab-content ul li {
        font-size: 1.6rem;
    }
    /*------- TABS DIVIDER -------*/
    .pdp .tabs .tab-menu > a::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: rgb(255 255 255 / 70%);
    }
        .pdp .tabs .tab-menu > a:last-child::after {
            width: 0;
        }
     /*------- TABS CC -------*/
    .tabs-click-change .w--current .tabs-cc-icon {
    background: var(--tab-cc--menu-active);
    }
    .tabs-click-change .w--current .tabs-cc-icon,
    .tabs-click-change a:hover .tabs-cc-icon {
    outline: 3px solid var(--tab-cc--menu-active);
    outline-offset: 6px;
    }
    /*------- SLIDER -------*/
    .w-slider-dot {
    color: var(--slider-dot-color) !important;
    background: none !important;
    border: 3px solid var(--slider-dot-color) !important;
    }
    .w-slider-dot.w-active {
    background: var(--slider-dot-color) !important;
    border: 3px solid var(--slider-dot-color) !important;
    }
    /*------- SLIDER FADE IN -------*/
    .slider-fade-in .w-slider-arrow-right, 
    .slider-fade-in .w-slider-arrow-left { 
    display: none !important;
    }
    .slider-fade-in .w-slider-nav {
    bottom: -60px;
    }
    .slider-fade-in .w-slider-nav.w-num > div {
        padding: 0;
        width: 70px;
        height: 70px;
    }
    /*------- 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: 1560px;
            padding: 20px;
            margin: 0 auto;
        }
        .list-item {
            color: var(--footnote-colour);
            padding-bottom: 10px;
            font-size: 1.4rem !important;
            font-weight: 300;
        }
        /* .footnote-content {
            max-width: 980px;
            width: 90%;
            margin: 0 auto;
        } 
        .footnotes-list {
            padding-left: 16px !important;
        }
        .footnotes-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-desktop-show-inline { 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, var(--tab--menu-bg) 0%, var(--tab--menu-bg-fade) 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%;
    }
    /*------- FOOTNOTES -------*/
    .section-footnotes {
        padding-left: 10%;
    }
    }
    /* -------------------------------------------------------------------------------------------------------------- */
    /*------- MOBILE PORTRAIT -------*/
    /* -------------------------------------------------------------------------------------------------------------- */
    @media screen and (max-width: 479px) {
        /* .hero-video:after{
            box-shadow: none;
        } */
    }