/*
:root {
  --vertical-offset: 0px; 
}*/
/* Subtle crossfade overlay for banner switches */
#bannerFadeCurtain {
  position: absolute;
  inset: 0;
  z-index: 999;               /* above stages/placeholder */
  background:  rgb(228, 235, 230, 0.34);/* subtle darkness */
   
  opacity: 0;
  pointer-events: none;       /* never block clicks */
  transition: opacity 320ms ease;
}
.banner {
    position: absolute;
    top: calc( 20% + 20px);
    justify-content: center;    
    padding: 0 0 0 0;          
    transition: transform 0.3s ease; 
	left: calc(5% - 0px);
    width: 100%;   
    max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
    z-index: 35;
}
.banner__inner {
    position: relative;
    width: 100%; 
    overflow: hidden;
    display: block;
	min-height: 1px;   /* avoids zero-height edge cases before JS sets height */
}


/* Video stage wrapper */
.video-stage {
  width: 100%;
  max-width: 726px;     
  aspect-ratio: 726 / 263; 
  margin: 0 auto;
  overflow: hidden;
  position: relative !important; 
  inset: auto !important;   
}

/* Make the video fill its stage box while keeping aspect */
.video-stage > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* White placeholder matching the banner aspect ratio */
.banner__placeholder {
  width: 100%;
  aspect-ratio: 726 / 263;       /* baseW / baseH */
  background: #fff;
  cursor: pointer;               /* looks clickable */
  user-select: none;
    background-image:url("../images/CN2cnarrow.svg");
        background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 20%;
}
/* Optional: fade when hiding (nice touch) */
.banner__placeholder[hidden] { display: none; }

/* Ensure the Stage can be scaled from top-left */
#Stage.EDGE-2525068 {
    position: relative; 
    transform-origin: 0 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1; 
}

/* Overlay covers the wrapper (which we already size via JS) */
.banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
    background: rgba(255,255,255,1);
  cursor: pointer;
}
.banner__overlay.is-hidden { display: none; }

/* Optional: style the play button */
.banner__play {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.0;
    margin-bottom: -10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font: inherit;
    padding: 0.4rem 1rem 1rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.25);
    cursor: pointer;
}            
.banner__play i { 
    font-size: var(--icon-size, 30px); 
    color: #34b998;
    padding-right: 8px;
    padding-top: 4px;
    position: relative;
    top: 4px; /* moves icon down */
}

.banner-controls {
  position: relative;   /* ensure it forms its own stacking context */
  display:flex;
  gap:2.5rem;
  margin-top: 20px;
	z-index: 35; 
}

.bannerCtl { 
    width: 22px;
    height: 22px;
	 /*   padding:.4rem .8rem; */
    padding: 0;
    border: 4px solid #67c5ae;
    border-radius: 50%;
    background-color: #67c5ae;
    cursor: pointer;
}
.bannerCtl.is-active { 
    background-color:#000000;
    border-color: #000000;
}
.bannerCtl:hover {  
    filter: brightness(0%) contrast(150%);
}

.banner, .banner__inner, #bannerEdgeHost { 
    width:100%; 
}

.bannertext-stack .btext{
  position:absolute;
  inset:0;            
  width:170px;
  margin-left:-170px;
  margin-top:0px;
  transition:opacity .4s ease;
  opacity:1;
pointer-events:none;
	
}
.bannertext-stack .btext.opac{
  opacity:0;
  pointer-events:none;
}
.bannertext-stack{
  position:relative;
  /* reserve height so the stack never collapses */
  min-height: var(--btext-h, 0px); /* fallback; JS below can set real height */
}

.headline_banner {
  font-weight: 900;
  font-size: 0.9rem;
  line-height: 1.0;
  margin-bottom: -10px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.paragraphbanner {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 15px;
}
.pbold {
  font-weight: 600;
}
.bannerplay {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.0;
  margin-bottom: -10px;
letter-spacing: 0.02em;
    color: #02A275;
text-transform: uppercase;
}


/* Force clipping at the host level */
#bannerEdgeHost {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Ensures even absolute layers can't escape */
}


/*#bannerEdgeHost > [data-stage] { 
    position:absolute; 
    inset:0; 
    transform-origin: 0 0; 
}*/

/* Each stage container must also be clipped */
#bannerEdgeHost > [data-stage] {
  position: absolute;
  inset: 0;
  overflow: hidden; /* Stage boundary is strictly enforced */
}

#bannerEdgeHost > [hidden] { 
    display:none !important; 
}




/* Edge bootstrap-hiding (add one rule per compId) */
.edgeLoad-EDGE-2525068  { visibility:hidden; }
.edgeLoad-EDGE-2715080  { visibility:hidden; }
.edgeLoad-EDGE-4888603  { visibility:hidden; }
/*.edgeLoad-EDGE-42839342 { visibility:hidden; }*/
/*.edgeLoad-EDGE-35777303 { visibility:hidden; }*/

 #Stage-EDGE-2715080 {
position: relative; /* ensure we can move it */
    /*   top: 16px;*/
/*   --offset-y: 20px; */
}  

      
.banner__play:focus { outline: 2px solid #000; }
  




#bannerEdgeHost * {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}




.closebanners {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: -70px;
    right: 15px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 26; /* make sure it's above everything */
}



.banner-arrow {
  background-color: transparent;      /* kill UA/bg bleed */
  background-repeat: no-repeat;
  background-position: center;        /* keeps SVG centered */
  -webkit-appearance: none;
  appearance: none;
}
.banner-arrow {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0.0em 0.15em 0.2em 0.15em;
 /*   line-height: 1;  /* keeps the glyph nicely centered */
    display:flex; 
    gap:2.5rem; 
    margin-top: -8px;
    z-index: 5;   
}
.banner-arrow:hover {  
    color:#5BBB01;
    filter: brightness(0%) contrast(150%);
    background-color: rgba(0,0,0,0.0);
}
.banner-arrow[disabled],
.banner-arrow:disabled {
  background-color: rgba(0,0,0,0.0);
  color: rgba(255,255,255,0.0);
  cursor: not-allowed;
    opacity: 0;  
}

.banner-arrow:focus-visible {
  outline: 0px solid #5BBB01;
  outline-offset: 0px;
}
.banner-arrow.prev2 {
    left: -45px;   
    background-image: url("../img/slidearrowL.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
}
.banner-arrow.next2 {
    right: -45px; 
    background-image: url("../img/slidearrowR.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
  /*  background-color:rgba(0,0,0,1.00);*/
    background-color:rgba(13,86,66,1.00);
    transition: background-color 0.3s ease; 
    transition: opacity 0.4s ease; 
}

.pnoff {
    opacity: 0;
    pointer-events: none;
       transition: opacity 0.4s ease; /* smooth fade to opacity */
}




 @media (min-height: 580px) {
/*      :root {
    --vertical-offset: -50px;
  }*/
 
}



@media (min-width: 413px) {

.banner-arrow.prev2 {
    left: -60px;  
}
.banner-arrow.next2 {
    right: -60px;
}  
}



@media (min-width: 430px) {

.banner-arrow.prev2 {
    left: -67px;  
}
.banner-arrow.next2 {
    right: -67px;
}  
}

@media (min-width: 478px) {

.banner-arrow.prev2 {
    left: -76px;  
}
.banner-arrow.next2 {
    right: -76px;
}  
}

@media (min-width: 580px) {
 /*   :root {
    --vertical-offset: -100px;
  }*/
#Stage-EDGE-2715080 {
  /*   --offset-y: 36px;*/
}  
.closebanners {
    top: 52px;
    right: -60px;
    width: 50px;
    height: 50px;
} 
.banner { 
    top: calc(30% - 140px);
    left: calc(5% + 35px);
    height: 375px;
    max-width: 80%; 
}

.bannertext-stack .btext{
  width:240px;
  margin-left:-210px;
  margin-top:0px;
}   
.banner-controls { 
    margin-top: 20px;
}

.banner-arrow.prev2 {
    left: -90px;  
}
.banner-arrow.next2 {
    right: -90px;
}  
}


@media (min-width: 580px) and (min-height: 600px) {
  /*    :root {
    --vertical-offset: -100px;
  }*/
    
    
.closebanners {
    top: 0px;
    right: 20px;
    width: 40px;
    height: 40px;
}

    
 .banner { 
    top: calc(25% - 100px);
    left: calc(5% - 0px);
    height: 400px;
    max-width: 90%; 
    }
.bannertext-stack .btext{
  width:200px;
  margin-left:-240px;
  margin-top: 0px;
}   
.banner-controls { 
    gap:1.5rem; 
    margin-top: 20px; 
}
.bannerCtl { 
    width: 18px;
    height: 18px;
	 /*   padding:.4rem .8rem; */
    padding: 0;
    border: 4px solid #67c5ae;
    border-radius: 50%;
    background-color: #67c5ae;
    cursor: pointer;
}
.banner-arrow.prev2 {
    left: -200px;  
}
.banner-arrow.next2 {
    right: -200px;
} 
}

@media (min-width: 680px) {
.bannertext-stack .btext{
  width:540px;
  margin-left:-260px;
}   
}


@media (min-width: 680px) and (min-height: 600px) {
.banner { 
       top: calc(30% - 140px);
    height: 400px;
    }
  .bannertext-stack .btext{
  width:260px;
  margin-left:-240px;
  margin-top: 0px;
}    
}

@media (min-width: 768px) {
.banner { 
    max-width: 640px; 
    top: calc(30% - 140px);
    left: calc(50% - 320px);
    }
.bannertext-stack .btext{
  width:270px;
  margin-left:-280px;
}    

}


@media (min-width: 768px) and (min-height: 600px) {
banner { 
      top: calc(50% - 50px);
    height: 400px;
    }
      .bannertext-stack .btext{
  width:270px;
  margin-left:-240px;
  margin-top: 0px;
}   

}


@media (min-width: 1024px) {
.banner { 
    max-width: 726px; 
   top: calc(30% - 140px);
    left: calc(50% - 363px);
} 
    .bannertext-stack .btext{
  width:540px;
  margin-left:-300px;
}   

}



@media (min-width: 1024px) and (min-height: 600px) {
banner { 
    top: calc(50% - 50px);
    height: 400px;
       max-width: 800px; 
    }
.bannertext-stack .btext{
  width:320px;
  margin-left:-300px;
  margin-top: 0px;
}   
.closebanners {
    top: -20px;
    right: 20px;
    width: 40px;
    height: 40px;
}

}



@media (min-width: 1366px) {

.video-stage {
    max-width: 800px; /* Allow video to grow with banner */
  } 

} 
 

@media (min-width: 1366px) and (min-height: 600px) {

 .bannertext-stack .btext{
  width:320px;
  margin-left:-300px;
  margin-top: 0px;
}   

}