:root{
  --sd-container: 1284px;
  --sd-gutter: 20px;

  --sd-hs-fade-h: 180px;
  --sd-hs-fade-a: 0.55;
}

/* =========================================================
   FULL BLEED WRAPPER
   ========================================================= */
.fl-module-sd-gsap-half-scroll .sd-hs{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-height: 100vh;
  min-height:100vh;
  box-sizing:border-box;

  display:grid;
  grid-template-columns: .7fr 1fr;
  align-items:stretch;
  position: relative;
}

/* =========================================================
   LEFT COLUMN — align to container
   ========================================================= */
.fl-module-sd-gsap-half-scroll .sd-hs__left{
  min-height:100vh;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  padding:60px 0;
}

.fl-module-sd-gsap-half-scroll .sd-hs__left-inner{
  width:100%;
  max-width:392px;
  display:flex;
  flex-direction:column;
  gap:30px;

  margin-left:max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));
  margin-right:auto;

}

.fl-module-sd-gsap-half-scroll .sd-hs__left-inner .fl-button{
  margin: 0;
  background-color: #fff !important;
}
.sd-hs__content p span{
	font-weight:300 !important;
}

.fl-module-sd-gsap-half-scroll .sd-hs__left-inner .fl-button:hover{
   background-color: var(--fl-global---pp-teal) !important;
   
}

.fl-module-sd-gsap-half-scroll .sd-hs__left-inner .fl-button:hover .fl-button-text,
.fl-module-sd-gsap-half-scroll .sd-hs__left-inner .fl-button:hover i{
	color:var(--fl-global---pp-navy);	
}

.sd-hs__title{ color:#fff; }
.sd-hs__content{
  color:#fff;
  font-family:Roboto;
  font-size:16px;
  font-weight:300;
  line-height:130%;
}

/* =========================================================
   RIGHT COLUMN
   ========================================================= */
.fl-module-sd-gsap-half-scroll .sd-hs__right{
  min-height:100vh;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0;
}

/* =========================================================
   DESKTOP DECK VIEWPORT
   Key change: slider is flex + centers track in the viewport
   ========================================================= */
.fl-module-sd-gsap-half-scroll .sd-hs__slider{
  position:relative;
  width:100%;
  height:100%;

  overflow:hidden;

  /* space for fades (fades sit in this padding area) */
  padding-top: var(--sd-hs-fade-h);
  padding-bottom: var(--sd-hs-fade-h);
  box-sizing:border-box;

  /* ✅ THIS is what fixes “starts off screen” */
  display:flex;
  align-items:center;          /* vertical centre */
  justify-content:center;      /* horizontal centre inside right col */
}

/* Track becomes the centered viewport box */
.fl-module-sd-gsap-half-scroll .sd-hs__track{
  position:relative;
  width:100%;

  /* Visible window = 3 cards + 2 spaces */
  height: calc(
    (var(--sd-hs-card-h, 160px) * 3) +
    (var(--sd-hs-space, 120px) * 2)
  );

  /* ✅ remove margin:auto hacks; flex does centering now */
  margin:0;
  z-index:1;
}

/* Panels — 0 offset = centered in right column */
.fl-module-sd-gsap-half-scroll .sd-hs__panel{
  position:absolute;
  left:50%;
  top:50%;

  width:var(--sd-hs-card-w,520px);
  height:var(--sd-hs-card-h,160px);

  border-radius:18px;
  overflow:hidden;
  box-sizing:border-box;

  transform:translate3d(-50%,-50%,0);
  will-change:transform;
}

.fl-module-sd-gsap-half-scroll .sd-hs__panel-inner{
  height:100%;
  padding:22px 26px;
  display:grid;
  gap:10px;
  align-content:center;
  box-sizing:border-box;
}

.fl-module-sd-gsap-half-scroll .sd-hs__panel-kicker{
  font-size:13px;
  letter-spacing:0.12em;
  text-align:center;
  text-transform:uppercase;

  max-width: max-content;
  margin: auto;
}

.fl-module-sd-gsap-half-scroll .sd-hs__panel-text{
  font-size:23px!important;
  font-family: 'Poppins', sans-serif;
  text-align:center;
  line-height:1.3;
  font-weight: 500;
}

/* =========================================================
   FADES — on slider, in padding zone (won’t cover peek)
   ========================================================= */
.fl-module-sd-gsap-half-scroll .sd-hs__slider::before,
.fl-module-sd-gsap-half-scroll .sd-hs__slider::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:var(--sd-hs-fade-h);
  pointer-events:none;
  z-index:9999;
}

.fl-module-sd-gsap-half-scroll .sd-hs__slider::before{
  top:0;
  background: linear-gradient(
    180deg,
    rgba(27,41,48,var(--sd-hs-fade-a)) 0%,
    rgba(27,41,48,calc(var(--sd-hs-fade-a) * 0.7)) 25%,
    rgba(27,41,48,calc(var(--sd-hs-fade-a) * 0.35)) 60%,
    rgba(27,41,48,0) 100%
  );
}

.fl-module-sd-gsap-half-scroll .sd-hs__slider::after{
  bottom:0;
  background: linear-gradient(
    0deg,
    rgba(27,41,48,var(--sd-hs-fade-a)) 0%,
    rgba(27,41,48,calc(var(--sd-hs-fade-a) * 0.7)) 25%,
    rgba(27,41,48,calc(var(--sd-hs-fade-a) * 0.35)) 60%,
    rgba(27,41,48,0) 100%
  );
}
/*
.fl-module-sd-gsap-half-scroll .sd-hs__slider::before{ top:0; background:linear-gradient( 180deg, rgba(27,41,48,var(--sd-hs-fade-a)) 0%, rgba(27,41,48,0) 100% ); filter: blur(2px); } 
.fl-module-sd-gsap-half-scroll .sd-hs__slider::after{ bottom:0; background:linear-gradient( 0deg, rgba(27,41,48,var(--sd-hs-fade-a)) 0%, rgba(27,41,48,0) 100% ); filter: blur(2px); }
*/
/* =========================================================
   <= 1284px: offsets off, vertical centred deck
   ========================================================= */
@media (max-width: 1284px){

  .fl-module-sd-gsap-half-scroll .sd-hs__panel{
    --sd-hs-offset-x: 0;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__right{
    justify-content:center;
  }

  /* constrain the track to card width so it’s truly centered */
  .fl-module-sd-gsap-half-scroll .sd-hs__track{
    width: var(--sd-hs-card-w,520px);
  }
}

/* =========================================================
   <= 1024px: stacked mode (left on top, panels below)
   No offsets, 20px gaps
   ========================================================= */
@media (max-width: 1026px){
  .fl-module-sd-gsap-half-scroll .sd-hs__track{
    padding: 60px 0 80px 0;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs{
    display:block;
    min-height:0;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__left{
    min-height:0;
    padding:40px 0 10px 0;
    align-items:flex-start;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__left-inner{
    text-align: center;
    max-width: var(--sd-container);
    margin-left:max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));
    margin-right:max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));
  }


  .fl-module-sd-gsap-half-scroll .sd-hs__left-inner a.fl-button{
    margin-inline: auto !important;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__right{
    min-height:0;
    padding:40px 0 40px 0;
    justify-content:center;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__slider{
    overflow:scroll;
    padding:0;
    display:block;
    max-height: 500px;
  }

  

  .fl-module-sd-gsap-half-scroll .sd-hs__slider::before,
  .fl-module-sd-gsap-half-scroll .sd-hs__slider::after{
    display:none !important;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__track{
    width: min(100%, var(--sd-container));
    height:auto;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:20px;
	overscroll-behavior:contain;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__panel{
    position:relative;
    left:auto;
    top:auto;
    transform:none !important;

    width: min(100%, var(--sd-hs-card-w,520px));
    height:auto;
    margin:0 auto;

    --sd-hs-offset-x: 0;
  }

  .fl-module-sd-gsap-half-scroll .sd-hs__panel-inner{
    min-height: var(--sd-hs-card-h,160px);
  }
}

@media (min-width: 769px){

  .fl-module-sd-gsap-half-scroll .sd-hs__mobile-slider{ display:none !important; }
}

 .fl-module-sd-gsap-half-scroll .sd-hs .sd-did-you-know_bg{
	position:absolute;
	right:0;
	left:0;
	bottom:0;
	top:0;
  z-index: 1;
}
 .fl-module-sd-gsap-half-scroll .sd-hs .sd-did-you-know__image-right{
	position:absolute;
	right:0;
	top:50%;
	transform: translatey(-50%);
  width:auto;
}

.fl-module-sd-gsap-half-scroll .sd-hs  .sd-did-you-know__image-left{
    position: absolute;
	left: 50%;
	top: 10%;
    transform: translatex(-50%);
    width:auto;
}
@media (max-width: 900px){
  .fl-module-sd-gsap-half-scroll .sd-hs .sd-did-you-know_bg{
    display:none;
  }
}

@media (max-width: 1284px){
  .fl-module-sd-gsap-half-scroll .sd-hs{
    grid-template-columns: minmax(0, 400px) 1fr;
  }


}


@media (max-width: 1180px){
.fl-module-sd-gsap-half-scroll .sd-hs__left{
  z-index: 20;

    position: relative;
}
  .fl-module-sd-gsap-half-scroll .sd-hs .sd-did-you-know__image-left{
       position: absolute;
      left: 0;
      top: 0;
      transform: translatex(-50%);
      width: 500px;
      height: auto;
  }

.fl-module-sd-gsap-half-scroll .sd-hs .sd-did-you-know__image-right {
    position: absolute;
    right: 0;
    top: 65%;
    transform: translatey(-50%);
    width: 300px;
    height: auto;
}
}





/* Always safe: align left column content to the 1284 container gutter */
.fl-module-sd-gsap-half-scroll .sd-hs__left{
  padding-left: max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));
  padding-right: 40px; /* breathing room */
}

/* Left inner no longer uses margin-left */
.fl-module-sd-gsap-half-scroll .sd-hs__left-inner{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.fl-module-sd-gsap-half-scroll .sd-hs__right{
  padding-right: max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));
}

@media (max-width: 1024px){

.fl-module-sd-gsap-half-scroll .sd-hs__right{
  padding-right: max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));
  padding-left: max(var(--sd-gutter), calc((100vw - var(--sd-container)) / 2));

}

.fl-module-sd-gsap-half-scroll .sd-hs__right::after,
.fl-module-sd-gsap-half-scroll .sd-hs__right::before{
      content:"";
    position:absolute;
    left:0;
    right:0;
    height:calc(var(--sd-hs-fade-h));
    pointer-events:none;
    z-index:30;
}

.fl-module-sd-gsap-half-scroll .sd-hs__right::before{

    top: 0;


    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    background: linear-gradient(
        180deg,
        rgba(27, 41, 48, var(--sd-hs-fade-a)) 0%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.7)) 25%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.35)) 60%,
        rgba(27, 41, 48, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

}

.fl-module-sd-gsap-half-scroll .sd-hs__right::after{
  bottom: 0;
 

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    background: linear-gradient(
        0deg,
        rgba(27, 41, 48, var(--sd-hs-fade-a)) 0%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.7)) 25%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.35)) 60%,
        rgba(27, 41, 48, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}





.fl-module-sd-gsap-half-scroll .sd-hs__right{
  position: relative;
}

 
}

.fl-module-sd-gsap-half-scroll .sd-hs__slider {
    position: relative;
}

/* shared */
.fl-module-sd-gsap-half-scroll .sd-hs__slider::before,
.fl-module-sd-gsap-half-scroll .sd-hs__slider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--sd-hs-fade-h);
    pointer-events: none;
}

/* TOP: blur layer + top tint */
.fl-module-sd-gsap-half-scroll .sd-hs__slider::before {
    top: 0;
    z-index: 80;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    background: linear-gradient(
        180deg,
        rgba(27, 41, 48, var(--sd-hs-fade-a)) 0%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.7)) 25%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.35)) 60%,
        rgba(27, 41, 48, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* BOTTOM: blur layer + bottom tint */
.fl-module-sd-gsap-half-scroll .sd-hs__slider::after {
    bottom: 0;
    z-index: 80;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    background: linear-gradient(
        0deg,
        rgba(27, 41, 48, var(--sd-hs-fade-a)) 0%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.7)) 25%,
        rgba(27, 41, 48, calc(var(--sd-hs-fade-a) * 0.35)) 60%,
        rgba(27, 41, 48, 0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}



@media (max-width: 768px){
  .fl-module-sd-gsap-half-scroll .sd-hs__left{
    padding:0 20px 10px 20px;
  }

}