/* TEMPLATE custom (as of 2025-06-27) */

.bifma-tests img {
    border: 2px solid #ffffff;
}
: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: #00dfff;
--hotspot--active-centre: #ffffff;
--hotspot--active-scale: 1.5;
--slider-dot-color: #FFFFFF; /* 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; } */


/* #region Coverflow Cards */
.coverflow-contain {
    overflow: visible;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    --cfl-perspective: 1000px;
    --cfl-card-width: 375px;
    --cfl-card-text: #000;
    --cfl-card-offset: 3.5rem;
    --cfl-card-rotate: 40deg;
    --cfl-card-scale: 0.75;
    --cfl-card-glow-1: rgb(126 224 252);
    --cfl-card-glow-2: rgb(126 224 252 / 50%);
    --cfl-side-brightness: 30%;
    --cfl-side-brightness-hover: 65%;
  }
  
  .coverflow-cards {
    perspective: var(--cfl-perspective);
  -webkit-perspective: var(--cfl-perspective);
    display: flex;
    justify-content: center;
    /* transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; */
    transition: transform 0.5s ease;
    margin: 32px auto;
  }
  
  .coverflow-card {
      flex: 0 0 var(--cfl-card-width);
      aspect-ratio: 375 / 420; 
      position: relative;
      margin: 0 0px;
      border-radius: var(--pdp-radius-lg);
      overflow: hidden;
      transform-origin: center center;
      transition: transform 0.5s ease, opacity 0.5s ease;
      will-change: transform;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      backface-visibility: hidden;
  }
  
  /* Image fills card */
  .coverflow-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Text overlay */
  .coverflow-card__text {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: var(--cfl-card-text);
      /*  text-shadow: 0px 2px 6px rgba(0,0,0,0.7);*/
      padding: 32px 0 16px;
      background: linear-gradient(0deg, #5fedee 50%, transparent);
  }
  
  .coverflow-card__text h3 { margin: 0; padding: 0; }
  .coverflow-card__text p { margin: 0; }
  
  .coverflow-card--active { 
      transform: scale(1); 
      z-index: 10; 
      /* box-shadow: 0 0 1em 0.6em var(--cfl-card-glow); */
      filter: 
      drop-shadow(0 0 15px var(--cfl-card-glow-2)) 
      drop-shadow(0 0 5px var(--cfl-card-glow-1));
  }
  
  .coverflow-card.left,
  .coverflow-card.right {
      filter: 
      drop-shadow(0 0 0 var(--cfl-card-glow-2)) 
      drop-shadow(0 0 0 var(--cfl-card-glow-1))
      brightness(var(--cfl-side-brightness));
      opacity: 1;              /* full opacity to preserve glow strength */
      transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
      z-index:5; 
  }
  
  .coverflow-card.left { 
      transform: rotateY(var(--cfl-card-rotate)) translateX(var(--cfl-card-offset)) scale(var(--cfl-card-scale)); 
  }
  
  .coverflow-card.right { 
      transform: rotateY(calc(-1 * var(--cfl-card-rotate))) translateX(calc(-1 * var(--cfl-card-offset))) scale(var(--cfl-card-scale)); 
  }
  
  .coverflow-card.left:hover,
  .coverflow-card.right:hover {
      cursor: pointer;
      filter: 
      drop-shadow(0 0 15px var(--cfl-card-glow-2)) 
      drop-shadow(0 0 5px var(--cfl-card-glow-1))
      brightness(var(--cfl-side-brightness-hover));
    }
  
  /* Card Synced Info */
  .coverflow-synced-info {
      position: relative;
      width: 80%;
      max-width: calc(375px + 10%);
      margin: 0 auto;
      text-align: center;
      font-style: 1.8rem;
  }
  
  .coverflow-synced-button {
      padding: 14px 28px;
      border-radius: 999px;
      margin-top: 16px;
      background-color: #6de5e7;
      color: #000 !important;
  }
  
  
  /* Modal */
  .coverflow-modal {
    display: none;
    position: fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    background: rgba(0,0,0,0.6);
    justify-content: center; 
    align-items: flex-end;
    z-index:50;
  }
  
  .coverflow-modal-contain {
      background: #000;
      /* padding: 0 6.25vw; */
      border-radius: 25px 25px 0 0;
      width: 100%;
      position: relative;
      height: 0vh;
      overflow-y: auto;
      transition: all 1s ease;
  }
  
    .section-content-1.cf-modal { 
        max-width: 810px;
    }

    .cf-modal .pdp-modal-content-row { margin: 0; }

    .cf-modal h3 {
        color: #fff;
    }

    .cf-modal .pdp-flex {
        justify-content: space-between;
    }

    .cf-modal .pdp-cols-img {
        border-radius: 50px;
    }

    .pdp-modal-slideup {
        height: 85vh;
    }

    /* .pdp-modal-close-cont {
        position: fixed;
        right: 1vh;
        top: 16vh;
    } */

    .pdp-modal-close-cont {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        justify-content: flex-end;
        padding: 8px;
    }
  
  
    /* Tablet */
    @media (max-width: 991px) {
        .coverflow-contain { --cfl-card-width: 38vw; }
    }

    /* Mobile Landscape */
    @media (max-width: 767px) {

        .coverflow-synced-info {
            font-size: 1.7rem;
        }
        
        .section-content-1.cf-modal { 
            max-width: 375px;
            width: 78%;
        }

        .cf-modal h3 {
            text-align: center;
        }

        .coverflow-modal-contain {
            text-align: center;
        }

        .coverflow-cards {
            transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
        }
        
    }
  
    /* Mobile */
    @media (max-width: 479px) {
  
      .coverflow-contain {
          --cfl-card-width: 55vw;
          --cfl-card-offset: -5rem;
          --cfl-card-scale: 0.8;
          --cfl-card-translateZ: 5rem;
      }
  
      .coverflow-card {
          margin: 0 -16%;      /* negative margin to allow peek */
          aspect-ratio: 374 / 510;
      }
  
      .coverflow-card--active { transform: translateZ(var(--cfl-card-translateZ)) scale(1); }
  
      .coverflow-card.left .coverflow-card__text, 
      .coverflow-card.right .coverflow-card__text { opacity: 0; }
      .coverflow-card--active .coverflow-card__text { opacity: 1; }
    }
/* #endregion */
  


/*------- 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{
	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 .tab-menu > a::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: rgb(255 255 255 / 70%);
}
    .pdp .tab-menu > a:last-child::after {
		width: 0;
	}
/*------- 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;
}
/*------- 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-fade) 0%, rgb(255 255 255 / 0%) 100%);
}
/* .section-synergy-tech .tabs::after {
		background: linear-gradient(270deg, #ffffff 0%, rgb(255 255 255 / 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%;
}
/*------- FOOTNOTES -------*/
.section-footnotes {
    padding-left: 10%;
}
}
/* -------------------------------------------------------------------------------------------------------------- */
/*------- MOBILE PORTRAIT -------*/
/* -------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
	/* .hero-video:after{
		box-shadow: none;
	} */
}