/* =========================================================
   LAU-TAM DEALS HERO
   File: css/deals-hero.css
   One component. Five matters. One CSS. One JS.
   ========================================================= */

#experience.deals-hero{
  position:relative!important;
  width:100%!important;
  height:clamp(620px,82vh,820px)!important;
  min-height:620px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  display:block!important;
  background:#00050E!important;
  color:#fff!important;
}

#experience.deals-hero .deals-hero-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background-image:var(--deal-hero-image, url("../assets/deals-hero/deal-1.jpg"))!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:scale(1.015)!important;
  filter:saturate(.82) contrast(1.04) brightness(.74)!important;
  transition:opacity .42s ease, background-image .01s linear!important;
}

#experience.deals-hero.is-switching .deals-hero-bg{
  opacity:.28!important;
}

#experience.deals-hero .deals-hero-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(0,5,14,.42) 0%,rgba(0,5,14,.08) 34%,rgba(0,5,14,.56) 100%),
    linear-gradient(90deg,rgba(0,5,14,.62) 0%,rgba(0,5,14,.16) 50%,rgba(0,5,14,.58) 100%)!important;
}

#experience.deals-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  background-image:radial-gradient(rgba(255,255,255,.052) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
  mix-blend-mode:screen!important;
  opacity:.18!important;
  pointer-events:none!important;
}

#experience.deals-hero .deals-hero-top{
  position:absolute!important;
  left:clamp(4rem,7.2vw,7.2rem)!important;
  right:clamp(4rem,7.2vw,7.2rem)!important;
  top:clamp(1.45rem,3.2vh,2.35rem)!important;
  z-index:5!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:2rem!important;
  pointer-events:none!important;
}

#experience.deals-hero .deals-hero-kicker{
  color:var(--gold)!important;
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:.25em!important;
  text-transform:uppercase!important;
  text-shadow:0 12px 34px rgba(0,5,14,.72)!important;
}

#experience.deals-hero .deals-hero-more{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.65rem!important;
  color:rgba(255,255,255,.9)!important;
  font-size:.68rem!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  text-shadow:0 12px 34px rgba(0,5,14,.72)!important;
  pointer-events:auto!important;
  transition:color .22s ease, transform .24s var(--ease)!important;
}

#experience.deals-hero .deals-hero-more:hover,
#experience.deals-hero .deals-hero-more:focus-visible{
  color:var(--gold)!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}

#experience.deals-hero .deals-hero-more svg{
  transition:transform .24s var(--ease)!important;
}

#experience.deals-hero .deals-hero-more:hover svg,
#experience.deals-hero .deals-hero-more:focus-visible svg{
  transform:translate(2px,-2px)!important;
}

#experience.deals-hero .deals-hero-stage{
  position:relative!important;
  z-index:4!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:clamp(5.5rem,10vh,7rem) clamp(5.5rem,12vw,11.5rem) clamp(5.25rem,8vh,6rem)!important;
}

#experience.deals-hero .deals-hero-statement{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:min(860px,78vw)!important;
  color:inherit!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transform:translateY(1.2rem)!important;
  transition:opacity .28s ease, transform .28s var(--ease), color .22s ease!important;
}

#experience.deals-hero.is-switching .deals-hero-statement{
  opacity:0!important;
  transform:translateY(1.8rem)!important;
}

#experience.deals-hero .deals-hero-statement:hover,
#experience.deals-hero .deals-hero-statement:focus-visible{
  transform:translateY(calc(1.2rem - 2px))!important;
  outline:none!important;
}

#experience.deals-hero .deals-hero-title{
  max-width:100%!important;
  margin:0!important;
  font-family:var(--fb)!important;
  font-size:clamp(2.05rem,3.25vw,3.25rem)!important;
  font-weight:400!important;
  line-height:1.04!important;
  letter-spacing:-.048em!important;
  color:rgba(255,255,255,.96)!important;
  text-shadow:0 18px 54px rgba(0,5,14,.74)!important;
  transition:color .22s ease!important;
}

#experience.deals-hero .deals-hero-statement:hover .deals-hero-title,
#experience.deals-hero .deals-hero-statement:focus-visible .deals-hero-title{
  color:#fff!important;
}

#experience.deals-hero .deals-hero-subtitle{
  max-width:min(700px,72vw)!important;
  margin:.55rem auto 0!important;
  font-family:var(--fb)!important;
  font-size:clamp(.78rem,.92vw,.96rem)!important;
  font-weight:400!important;
  line-height:1.35!important;
  color:rgba(255,255,255,.74)!important;
  text-shadow:0 14px 38px rgba(0,5,14,.82)!important;
  transition:color .22s ease!important;
}

#experience.deals-hero .deals-hero-statement:hover .deals-hero-subtitle,
#experience.deals-hero .deals-hero-statement:focus-visible .deals-hero-subtitle{
  color:rgba(255,255,255,.88)!important;
}

#experience.deals-hero .deals-hero-arrow{
  position:absolute!important;
  top:50%!important;
  z-index:6!important;
  width:44px!important;
  height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:rgba(255,255,255,.84)!important;
  opacity:.86!important;
  transform:translateY(-50%)!important;
  transition:color .18s ease, opacity .18s ease, transform .24s var(--ease)!important;
}

#experience.deals-hero .deals-hero-prev{left:clamp(2rem,4vw,4rem)!important;}
#experience.deals-hero .deals-hero-next{right:clamp(2rem,4vw,4rem)!important;}

#experience.deals-hero .deals-hero-arrow svg{
  width:32px!important;
  height:32px!important;
  pointer-events:none!important;
}

#experience.deals-hero .deals-hero-arrow:hover,
#experience.deals-hero .deals-hero-arrow:focus-visible{
  color:#fff!important;
  opacity:1!important;
  outline:none!important;
}

#experience.deals-hero .deals-hero-prev:hover,
#experience.deals-hero .deals-hero-prev:focus-visible{
  transform:translate(-4px,-50%)!important;
}

#experience.deals-hero .deals-hero-next:hover,
#experience.deals-hero .deals-hero-next:focus-visible{
  transform:translate(4px,-50%)!important;
}

#experience.deals-hero .deals-hero-dots{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(2.15rem,4.2vh,3.2rem)!important;
  z-index:6!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.58rem!important;
  transform:translateX(-50%)!important;
}

#experience.deals-hero .deals-hero-dot{
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  min-height:6px!important;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.42)!important;
  opacity:1!important;
  transition:width .24s var(--ease), background .22s ease, transform .22s ease!important;
}

#experience.deals-hero .deals-hero-dot::before{
  content:""!important;
  position:absolute!important;
  inset:-9px!important;
}

#experience.deals-hero .deals-hero-dot.is-active{
  width:24px!important;
  background:var(--gold)!important;
}

#experience.deals-hero .deals-hero-dot:hover,
#experience.deals-hero .deals-hero-dot:focus-visible{
  background:#fff!important;
  outline:none!important;
}

@media (max-width:1100px){
  #experience.deals-hero{
    height:76vh!important;
    min-height:640px!important;
  }

  #experience.deals-hero .deals-hero-top{
    left:var(--page-pad,5vw)!important;
    right:var(--page-pad,5vw)!important;
    top:1.65rem!important;
  }

  #experience.deals-hero .deals-hero-title{
    font-size:clamp(1.95rem,5vw,3.05rem)!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero{
    height:76svh!important;
    min-height:560px!important;
  }

  #experience.deals-hero .deals-hero-bg{
    background-image:var(--deal-hero-mobile-image, var(--deal-hero-image, url("../assets/deals-hero/deal-1-mobile.jpg")))!important;
    filter:saturate(.8) contrast(1.04) brightness(.72)!important;
  }

  #experience.deals-hero .deals-hero-overlay{
    background:
      linear-gradient(180deg,rgba(0,5,14,.54) 0%,rgba(0,5,14,.18) 40%,rgba(0,5,14,.74) 100%),
      linear-gradient(90deg,rgba(0,5,14,.42) 0%,rgba(0,5,14,.14) 50%,rgba(0,5,14,.42) 100%)!important;
  }

  #experience.deals-hero .deals-hero-top{
    left:1.25rem!important;
    right:1.25rem!important;
    top:1.25rem!important;
    align-items:flex-start!important;
    gap:1rem!important;
  }

  #experience.deals-hero .deals-hero-kicker{
    max-width:56vw!important;
    font-size:.58rem!important;
    letter-spacing:.18em!important;
    line-height:1.35!important;
  }

  #experience.deals-hero .deals-hero-more{
    font-size:.58rem!important;
    letter-spacing:.14em!important;
    white-space:nowrap!important;
  }

  #experience.deals-hero .deals-hero-stage{
    padding:5rem 3.25rem 4.9rem!important;
  }

  #experience.deals-hero .deals-hero-statement{
    max-width:100%!important;
    transform:translateY(.8rem)!important;
  }

  #experience.deals-hero .deals-hero-title{
    font-size:clamp(1.72rem,7.5vw,2.42rem)!important;
    line-height:1.06!important;
    letter-spacing:-.038em!important;
  }

  #experience.deals-hero .deals-hero-subtitle{
    max-width:100%!important;
    font-size:.76rem!important;
    line-height:1.34!important;
  }

  #experience.deals-hero .deals-hero-prev{left:.3rem!important;}
  #experience.deals-hero .deals-hero-next{right:.3rem!important;}

  #experience.deals-hero .deals-hero-dots{
    bottom:1.75rem!important;
  }
}


/* =========================================================
   DEALS HERO - FINAL PATH + VISIBILITY OVERRIDE
   CSS lives in /css. Images live in /assets/deals/2026.
   Keep this block last.
   ========================================================= */
#experience.deals-hero .deals-hero-bg{
  background-image:var(--deal-hero-image, url("../assets/deals-hero/deal-1.jpg"))!important;
  filter:saturate(.96) contrast(1.05) brightness(.78)!important;
  opacity:1!important;
}

#experience.deals-hero .deals-hero-overlay{
  background:
    linear-gradient(180deg,rgba(0,5,14,.34) 0%,rgba(0,5,14,.06) 38%,rgba(0,5,14,.58) 100%),
    linear-gradient(90deg,rgba(0,5,14,.46) 0%,rgba(0,5,14,.10) 50%,rgba(0,5,14,.46) 100%)!important;
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-bg{
    background-image:var(--deal-hero-mobile-image, var(--deal-hero-image, url("../assets/deals-hero/deal-1-mobile.jpg")))!important;
    filter:saturate(.96) contrast(1.05) brightness(.78)!important;
  }
}


/* =========================================================
   DEALS HERO SPACING FINAL
   Gives the central statement more breathing room above the
   controls and keeps the carousel from feeling glued to the bottom.
   Keep this block last.
   ========================================================= */
#experience.deals-hero{
  height:clamp(700px,88vh,900px)!important;
  min-height:700px!important;
}

#experience.deals-hero .deals-hero-stage{
  padding:
    clamp(6rem,10vh,7.5rem)
    clamp(5.5rem,12vw,11.5rem)
    clamp(8.25rem,12vh,10rem)!important;
}

#experience.deals-hero .deals-hero-statement{
  transform:translateY(-.35rem)!important;
}

#experience.deals-hero.is-switching .deals-hero-statement{
  transform:translateY(.15rem)!important;
}

#experience.deals-hero .deals-hero-statement:hover,
#experience.deals-hero .deals-hero-statement:focus-visible{
  transform:translateY(calc(-.35rem - 2px))!important;
}

#experience.deals-hero .deals-hero-dots{
  bottom:clamp(3.35rem,5.6vh,4.75rem)!important;
}

#experience.deals-hero .deals-hero-arrow{
  top:auto!important;
  bottom:clamp(2.36rem,4.85vh,3.78rem)!important;
  transform:none!important;
}

#experience.deals-hero .deals-hero-prev{
  left:calc(50% - 6.2rem)!important;
}

#experience.deals-hero .deals-hero-next{
  right:calc(50% - 6.2rem)!important;
}

#experience.deals-hero .deals-hero-prev:hover,
#experience.deals-hero .deals-hero-prev:focus-visible{
  transform:translateX(-4px)!important;
}

#experience.deals-hero .deals-hero-next:hover,
#experience.deals-hero .deals-hero-next:focus-visible{
  transform:translateX(4px)!important;
}

@media (max-width:1100px){
  #experience.deals-hero{
    height:82vh!important;
    min-height:660px!important;
  }

  #experience.deals-hero .deals-hero-stage{
    padding:
      5.75rem
      clamp(3.5rem,8vw,6rem)
      8.4rem!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero{
    height:82svh!important;
    min-height:610px!important;
  }

  #experience.deals-hero .deals-hero-stage{
    padding:5rem 2rem 8rem!important;
  }

  #experience.deals-hero .deals-hero-statement{
    transform:translateY(-.15rem)!important;
  }

  #experience.deals-hero.is-switching .deals-hero-statement{
    transform:translateY(.25rem)!important;
  }

  #experience.deals-hero .deals-hero-statement:hover,
  #experience.deals-hero .deals-hero-statement:focus-visible{
    transform:translateY(-.15rem)!important;
  }

  #experience.deals-hero .deals-hero-dots{
    bottom:3.25rem!important;
  }

  #experience.deals-hero .deals-hero-arrow{
    bottom:2.3rem!important;
    width:38px!important;
    height:38px!important;
  }

  #experience.deals-hero .deals-hero-prev{
    left:calc(50% - 5.35rem)!important;
  }

  #experience.deals-hero .deals-hero-next{
    right:calc(50% - 5.35rem)!important;
  }
}


/* =========================================================
   DEALS HERO PROGRESS LOADER - FINAL
   Replaces dot-only carousel indicators with ranking-style
   progress bars so users understand the slide is advancing.
   Keep this block last.
   ========================================================= */
#experience.deals-hero .deals-hero-dots{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(3.1rem,5.3vh,4.55rem)!important;
  z-index:6!important;
  width:min(520px,42vw)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  transform:translateX(-50%)!important;
}

#experience.deals-hero .deals-hero-dot{
  position:relative!important;
  flex:0 0 54px!important;
  width:auto!important;
  height:24px!important;
  min-width:0!important;
  min-height:0!important;
  padding:10px 0!important;
  border-radius:0!important;
  background:transparent!important;
  opacity:.56!important;
  overflow:visible!important;
  transition:flex-basis .38s var(--ease), opacity .22s ease!important;
}

#experience.deals-hero .deals-hero-dot::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  height:3px!important;
  transform:translateY(-50%)!important;
  background:rgba(255,255,255,.32)!important;
  border-radius:0!important;
}

#experience.deals-hero .deals-hero-dot::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:100%!important;
  height:3px!important;
  transform:translateY(-50%) scaleX(var(--deal-step-progress,0))!important;
  transform-origin:left center!important;
  background:rgba(201,157,85,.96)!important;
  border-radius:0!important;
  transition:transform .08s linear!important;
}

#experience.deals-hero .deals-hero-dot.is-active{
  flex-basis:min(210px,17vw)!important;
  background:transparent!important;
  opacity:.92!important;
}

#experience.deals-hero .deals-hero-dot:hover,
#experience.deals-hero .deals-hero-dot:focus-visible{
  background:transparent!important;
  opacity:1!important;
  outline:none!important;
}

#experience.deals-hero .deals-hero-dot:hover::before,
#experience.deals-hero .deals-hero-dot:focus-visible::before{
  background:rgba(255,255,255,.48)!important;
}

#experience.deals-hero .deals-hero-arrow{
  bottom:clamp(2.8rem,4.95vh,4.22rem)!important;
}

#experience.deals-hero .deals-hero-prev{
  left:calc(50% - min(330px,25vw))!important;
}

#experience.deals-hero .deals-hero-next{
  right:calc(50% - min(330px,25vw))!important;
}

@media (max-width:900px){
  #experience.deals-hero .deals-hero-dots{
    width:min(420px,54vw)!important;
  }

  #experience.deals-hero .deals-hero-dot{
    flex-basis:38px!important;
  }

  #experience.deals-hero .deals-hero-dot.is-active{
    flex-basis:min(160px,24vw)!important;
  }

  #experience.deals-hero .deals-hero-prev{
    left:calc(50% - min(260px,40vw))!important;
  }

  #experience.deals-hero .deals-hero-next{
    right:calc(50% - min(260px,40vw))!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-dots{
    width:min(300px,58vw)!important;
    gap:7px!important;
    bottom:3.05rem!important;
  }

  #experience.deals-hero .deals-hero-dot{
    flex:1 1 0!important;
    height:22px!important;
  }

  #experience.deals-hero .deals-hero-dot.is-active{
    flex:2.8 1 0!important;
  }

  #experience.deals-hero .deals-hero-dot::before,
  #experience.deals-hero .deals-hero-dot::after{
    height:2px!important;
  }

  #experience.deals-hero .deals-hero-arrow{
    bottom:2.18rem!important;
  }

  #experience.deals-hero .deals-hero-prev{
    left:.75rem!important;
  }

  #experience.deals-hero .deals-hero-next{
    right:.75rem!important;
  }
}


/* =========================================================
   DEALS HERO PAUSE CONTROL - FINAL
   Removes side arrows and adds a pause/resume control next to
   the progress loader, matching the initial hero language.
   Keep this block last.
   ========================================================= */
#experience.deals-hero .deals-hero-arrow{
  display:none!important;
}

#experience.deals-hero .deals-hero-controls{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(3.1rem,5.3vh,4.55rem)!important;
  z-index:8!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1.05rem!important;
  transform:translateX(-50%)!important;
}

#experience.deals-hero .deals-hero-controls .deals-hero-dots{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(520px,42vw)!important;
}

#experience.deals-hero .deals-hero-pause{
  position:relative!important;
  flex:0 0 auto!important;
  width:34px!important;
  height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:rgba(255,255,255,.82)!important;
  opacity:.9!important;
  cursor:pointer!important;
  transition:color .2s ease, opacity .2s ease, transform .24s var(--ease)!important;
}

#experience.deals-hero .deals-hero-pause:hover,
#experience.deals-hero .deals-hero-pause:focus-visible{
  color:#fff!important;
  opacity:1!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}

#experience.deals-hero .deals-hero-pause svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  pointer-events:none!important;
}

#experience.deals-hero .deals-hero-pause .pause-icon,
#experience.deals-hero .deals-hero-pause.is-paused .play-icon{
  display:block!important;
}

#experience.deals-hero .deals-hero-pause .play-icon,
#experience.deals-hero .deals-hero-pause.is-paused .pause-icon{
  display:none!important;
}

@media (max-width:900px){
  #experience.deals-hero .deals-hero-controls .deals-hero-dots{
    width:min(420px,54vw)!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-controls{
    width:calc(100% - 2.5rem)!important;
    bottom:3rem!important;
    gap:.85rem!important;
  }

  #experience.deals-hero .deals-hero-controls .deals-hero-dots{
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
  }

  #experience.deals-hero .deals-hero-pause{
    width:32px!important;
    height:32px!important;
  }

  #experience.deals-hero .deals-hero-pause svg{
    width:17px!important;
    height:17px!important;
  }
}


/* =========================================================
   DEALS HERO ASSET PATH + SUBTITLE SCALE - FINAL
   Assets now live in assets/deals-hero/2026.
   Subtitle is larger and more legible.
   Keep this block last.
   ========================================================= */
#experience.deals-hero .deals-hero-bg{
  background-image:var(--deal-hero-image, url("../assets/deals-hero/deal-1.jpg"))!important;
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-bg{
    background-image:var(--deal-hero-mobile-image, var(--deal-hero-image, url("../assets/deals-hero/deal-1-mobile.jpg")))!important;
  }
}

#experience.deals-hero .deals-hero-subtitle{
  max-width:min(860px,76vw)!important;
  margin:.78rem auto 0!important;
  font-size:clamp(1rem,1.22vw,1.28rem)!important;
  line-height:1.42!important;
  color:rgba(255,255,255,.86)!important;
  text-shadow:0 16px 44px rgba(0,5,14,.88)!important;
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-subtitle{
    max-width:100%!important;
    margin-top:.68rem!important;
    font-size:clamp(.9rem,4vw,1.05rem)!important;
    line-height:1.38!important;
  }
}


/* =========================================================
   DEALS HERO IMAGE RENDER FIX - FINAL
   Uses a real <picture>/<img> as the background layer.
   This removes path/rendering failures caused by CSS variables alone.
   Keep this block last.
   ========================================================= */
#experience.deals-hero .deals-hero-bg{
  background:#00050E url("../assets/deals-hero/deal-1.jpg") center center / cover no-repeat!important;
  filter:none!important;
  opacity:1!important;
}

#experience.deals-hero .deals-hero-picture,
#experience.deals-hero .deals-hero-picture img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
}

#experience.deals-hero .deals-hero-picture img{
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.015)!important;
  filter:saturate(.96) contrast(1.05) brightness(.78)!important;
  opacity:1!important;
  transition:opacity .42s ease!important;
}

#experience.deals-hero.is-switching .deals-hero-picture img{
  opacity:.38!important;
}

#experience.deals-hero .deals-hero-bg::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(0,5,14,.34) 0%,rgba(0,5,14,.06) 38%,rgba(0,5,14,.58) 100%),
    linear-gradient(90deg,rgba(0,5,14,.46) 0%,rgba(0,5,14,.10) 50%,rgba(0,5,14,.46) 100%)!important;
}

#experience.deals-hero .deals-hero-overlay{
  background:transparent!important;
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-bg{
    background-image:url("../assets/deals-hero/deal-1-mobile.jpg")!important;
  }

  #experience.deals-hero .deals-hero-picture img{
    object-position:center center!important;
    filter:saturate(.96) contrast(1.05) brightness(.78)!important;
  }
}


/* =========================================================
   DEALS HERO VISUAL REFINEMENT - FINAL
   Stronger typography, cleaner lower transition and better
   separation from the next section.
   Keep this block last.
   ========================================================= */

#experience.deals-hero{
  margin-bottom:0!important;
  border-bottom:0!important;
}

/* Lower band: prevents the hero image from crashing into the next section */
#experience.deals-hero::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:clamp(96px,14vh,150px)!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(0,5,14,0) 0%,rgba(0,5,14,.58) 54%,rgba(0,5,14,.92) 100%)!important;
}

/* A thin gold rule gives the section a deliberate ending */
#experience.deals-hero .deals-hero-stage::after{
  content:""!important;
  position:absolute!important;
  left:clamp(3.25rem,7vw,7rem)!important;
  right:clamp(3.25rem,7vw,7rem)!important;
  bottom:0!important;
  height:1px!important;
  z-index:9!important;
  background:linear-gradient(90deg,transparent 0%,rgba(201,157,85,.18) 18%,rgba(201,157,85,.68) 50%,rgba(201,157,85,.18) 82%,transparent 100%)!important;
}

/* Better text presence */
#experience.deals-hero .deals-hero-statement{
  max-width:min(1120px,82vw)!important;
  transform:translateY(-.75rem)!important;
}

#experience.deals-hero.is-switching .deals-hero-statement{
  transform:translateY(-.3rem)!important;
}

#experience.deals-hero .deals-hero-statement:hover,
#experience.deals-hero .deals-hero-statement:focus-visible{
  transform:translateY(calc(-.75rem - 2px))!important;
}

#experience.deals-hero .deals-hero-title{
  font-size:clamp(2.75rem,4.35vw,5rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  color:rgba(255,255,255,.98)!important;
  text-shadow:
    0 3px 18px rgba(0,5,14,.95),
    0 18px 60px rgba(0,5,14,.86),
    0 0 1px rgba(255,255,255,.32)!important;
}

#experience.deals-hero .deals-hero-subtitle{
  max-width:min(920px,74vw)!important;
  margin:1rem auto 0!important;
  font-size:clamp(1.12rem,1.32vw,1.45rem)!important;
  line-height:1.42!important;
  color:rgba(255,255,255,.9)!important;
  text-shadow:
    0 2px 12px rgba(0,5,14,.98),
    0 14px 46px rgba(0,5,14,.86)!important;
}

/* Place controls within the lower band, cleanly separated */
#experience.deals-hero .deals-hero-controls{
  bottom:clamp(2.7rem,4.9vh,4.25rem)!important;
  z-index:10!important;
}

#experience.deals-hero .deals-hero-controls .deals-hero-dots{
  width:min(560px,44vw)!important;
}

#experience.deals-hero .deals-hero-pause{
  color:rgba(255,255,255,.9)!important;
  text-shadow:0 10px 30px rgba(0,5,14,.86)!important;
}

/* Reduce the hard visual clash with the next section */
#experience.deals-hero + #team{
  position:relative!important;
  border-top:0!important;
}

#experience.deals-hero + #team::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:clamp(38px,5vw,72px)!important;
  z-index:5!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(0,5,14,.92),rgba(0,5,14,0))!important;
}

@media (max-width:1100px){
  #experience.deals-hero .deals-hero-title{
    font-size:clamp(2.35rem,5.6vw,4rem)!important;
  }

  #experience.deals-hero .deals-hero-subtitle{
    font-size:clamp(1rem,2vw,1.28rem)!important;
  }

  #experience.deals-hero .deals-hero-controls .deals-hero-dots{
    width:min(460px,56vw)!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero::after{
    height:135px!important;
  }

  #experience.deals-hero .deals-hero-stage::after{
    left:1.25rem!important;
    right:1.25rem!important;
  }

  #experience.deals-hero .deals-hero-statement{
    max-width:100%!important;
    transform:translateY(-.45rem)!important;
  }

  #experience.deals-hero.is-switching .deals-hero-statement{
    transform:translateY(0)!important;
  }

  #experience.deals-hero .deals-hero-statement:hover,
  #experience.deals-hero .deals-hero-statement:focus-visible{
    transform:translateY(-.45rem)!important;
  }

  #experience.deals-hero .deals-hero-title{
    font-size:clamp(2.05rem,9vw,3.05rem)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
  }

  #experience.deals-hero .deals-hero-subtitle{
    max-width:100%!important;
    margin-top:.85rem!important;
    font-size:clamp(.98rem,4.3vw,1.18rem)!important;
    line-height:1.38!important;
  }

  #experience.deals-hero .deals-hero-controls{
    bottom:2.75rem!important;
  }
}


/* =========================================================
   DEALS HERO SMOOTH TRANSITIONS - FINAL
   Crossfades images and gives the statement a real entrance.
   Keep this block last.
   ========================================================= */

#experience.deals-hero .deals-hero-picture{
  overflow:hidden!important;
  background:#00050E!important;
}

#experience.deals-hero .deals-hero-picture img,
#experience.deals-hero .deals-hero-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.035)!important;
  filter:saturate(.96) contrast(1.05) brightness(.78)!important;
  opacity:0!important;
  will-change:opacity, transform, filter!important;
  transition:
    opacity 980ms cubic-bezier(.22,.61,.36,1),
    transform 1400ms cubic-bezier(.22,.61,.36,1),
    filter 980ms cubic-bezier(.22,.61,.36,1)!important;
}

#experience.deals-hero .deals-hero-img.is-active{
  opacity:1!important;
  transform:scale(1.015)!important;
  z-index:2!important;
}

#experience.deals-hero .deals-hero-img.is-inactive{
  opacity:0!important;
  transform:scale(1.045)!important;
  z-index:1!important;
}

#experience.deals-hero.is-bg-fading .deals-hero-img.is-active{
  opacity:1!important;
}

/* Text exit / enter */
#experience.deals-hero .deals-hero-statement{
  opacity:1!important;
  will-change:opacity, transform, filter!important;
  transition:
    opacity 520ms cubic-bezier(.22,.61,.36,1),
    transform 720ms cubic-bezier(.22,.61,.36,1),
    filter 720ms cubic-bezier(.22,.61,.36,1),
    color .22s ease!important;
}

#experience.deals-hero.is-text-out .deals-hero-statement{
  opacity:0!important;
  transform:translateY(.55rem)!important;
  filter:blur(4px)!important;
}

#experience.deals-hero.is-text-in .deals-hero-statement{
  animation:dealsTextIn 760ms cubic-bezier(.22,.61,.36,1) both!important;
}

@keyframes dealsTextIn{
  0%{
    opacity:0;
    transform:translateY(.85rem);
    filter:blur(6px);
  }
  100%{
    opacity:1;
    transform:translateY(-.75rem);
    filter:blur(0);
  }
}

#experience.deals-hero.is-switching .deals-hero-statement{
  opacity:1!important;
}

/* Avoid the previous hard opacity drop on the background */
#experience.deals-hero.is-switching .deals-hero-bg,
#experience.deals-hero.is-switching .deals-hero-picture img{
  opacity:1!important;
}

@media (prefers-reduced-motion: reduce){
  #experience.deals-hero .deals-hero-img,
  #experience.deals-hero .deals-hero-statement{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   DEALS HERO SLOWER TRANSITIONS - FINAL
   Softer, slower movement. Less abrupt image and text change.
   Keep this block last.
   ========================================================= */

#experience.deals-hero .deals-hero-picture img,
#experience.deals-hero .deals-hero-img{
  transition:
    opacity 1850ms cubic-bezier(.16,1,.3,1),
    transform 2600ms cubic-bezier(.16,1,.3,1),
    filter 1850ms cubic-bezier(.16,1,.3,1)!important;
}

#experience.deals-hero .deals-hero-img.is-active{
  transform:scale(1.012)!important;
}

#experience.deals-hero .deals-hero-img.is-inactive{
  transform:scale(1.028)!important;
}

#experience.deals-hero .deals-hero-statement{
  transition:
    opacity 900ms cubic-bezier(.16,1,.3,1),
    transform 1150ms cubic-bezier(.16,1,.3,1),
    filter 1050ms cubic-bezier(.16,1,.3,1),
    color .22s ease!important;
}

#experience.deals-hero.is-text-out .deals-hero-statement{
  opacity:0!important;
  transform:translateY(.35rem)!important;
  filter:blur(2px)!important;
}

#experience.deals-hero.is-text-in .deals-hero-statement{
  animation:dealsTextInSlow 1250ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsTextInSlow{
  0%{
    opacity:0;
    transform:translateY(.55rem);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(-.75rem);
    filter:blur(0);
  }
}


/* =========================================================
   DEALS HERO CINEMATIC TRANSITION - FINAL
   Slower image dissolve + text rises from below to attract the eye.
   Keep this block last.
   ========================================================= */

/* Make the image change feel like a dissolve, not a cut */
#experience.deals-hero .deals-hero-picture{
  background:#00050E!important;
}

#experience.deals-hero .deals-hero-picture img,
#experience.deals-hero .deals-hero-img{
  transform:scale(1.045)!important;
  filter:saturate(.92) contrast(1.04) brightness(.76)!important;
  transition:
    opacity 3200ms cubic-bezier(.19,1,.22,1),
    transform 5200ms cubic-bezier(.19,1,.22,1),
    filter 3200ms cubic-bezier(.19,1,.22,1)!important;
}

#experience.deals-hero .deals-hero-img.is-active{
  opacity:1!important;
  transform:scale(1.018)!important;
  filter:saturate(.96) contrast(1.05) brightness(.78)!important;
}

#experience.deals-hero .deals-hero-img.is-inactive{
  opacity:0!important;
  transform:scale(1.055)!important;
}

/* The image should never visibly blink during slide changes */
#experience.deals-hero.is-switching .deals-hero-bg,
#experience.deals-hero.is-switching .deals-hero-picture img,
#experience.deals-hero.is-bg-fading .deals-hero-picture img{
  opacity:inherit!important;
}

/* Text choreography: down -> up, slow, deliberate, less blur */
#experience.deals-hero .deals-hero-statement{
  transform:translateY(-.45rem)!important;
  opacity:1!important;
  filter:blur(0)!important;
  transition:none!important;
  will-change:opacity, transform, filter!important;
}

#experience.deals-hero.is-text-out .deals-hero-statement{
  animation:dealsTextOutCinematic 900ms cubic-bezier(.55,.055,.675,.19) both!important;
}

#experience.deals-hero.is-text-in .deals-hero-statement{
  animation:dealsTextInCinematic 1900ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsTextOutCinematic{
  0%{
    opacity:1;
    transform:translateY(-.45rem);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translateY(-1.55rem);
    filter:blur(2px);
  }
}

@keyframes dealsTextInCinematic{
  0%{
    opacity:0;
    transform:translateY(3.15rem);
    filter:blur(5px);
  }
  38%{
    opacity:.45;
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(-.45rem);
    filter:blur(0);
  }
}

/* Stagger title/subtitle so the eye lands first on the headline */
#experience.deals-hero.is-text-in .deals-hero-title{
  animation:dealsTitleInCinematic 1900ms cubic-bezier(.16,1,.3,1) both!important;
}

#experience.deals-hero.is-text-in .deals-hero-subtitle{
  animation:dealsSubtitleInCinematic 2200ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsTitleInCinematic{
  0%{
    opacity:0;
    transform:translateY(1.65rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes dealsSubtitleInCinematic{
  0%,18%{
    opacity:0;
    transform:translateY(1.15rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* Stronger readability without making the type look dirty */
#experience.deals-hero .deals-hero-title{
  text-shadow:
    0 4px 18px rgba(0,5,14,.98),
    0 24px 72px rgba(0,5,14,.92),
    0 0 1px rgba(255,255,255,.36)!important;
}

#experience.deals-hero .deals-hero-subtitle{
  text-shadow:
    0 3px 14px rgba(0,5,14,.98),
    0 18px 54px rgba(0,5,14,.92)!important;
}

/* During transition, pause hover lift so it does not fight the entrance */
#experience.deals-hero.is-text-in .deals-hero-statement:hover,
#experience.deals-hero.is-text-in .deals-hero-statement:focus-visible,
#experience.deals-hero.is-text-out .deals-hero-statement:hover,
#experience.deals-hero.is-text-out .deals-hero-statement:focus-visible{
  transform:none!important;
}

@media (prefers-reduced-motion: reduce){
  #experience.deals-hero .deals-hero-img,
  #experience.deals-hero.is-text-out .deals-hero-statement,
  #experience.deals-hero.is-text-in .deals-hero-statement,
  #experience.deals-hero.is-text-in .deals-hero-title,
  #experience.deals-hero.is-text-in .deals-hero-subtitle{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   DEALS HERO FINAL NAMING + FLAT ASSET PATH
   Assets now live directly in assets/deals-hero/.
   Top copy: Selected Experience / More Experiences.
   Keep this block last.
   ========================================================= */
#experience.deals-hero .deals-hero-bg{
  background-image:var(--deal-hero-image, url("../assets/deals-hero/deal-1.jpg"))!important;
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-bg{
    background-image:var(--deal-hero-mobile-image, var(--deal-hero-image, url("../assets/deals-hero/deal-1-mobile.jpg")))!important;
  }
}

#experience.deals-hero .deals-hero-kicker,
#experience.deals-hero .deals-hero-more{
  letter-spacing:.22em!important;
}

#experience.deals-hero .deals-hero-more{
  white-space:nowrap!important;
}


/* =========================================================
   DEALS HERO BOTTOM + SUBTITLE CLEANUP - FINAL
   Removes the heavy black lower shadow and improves subtitle
   readability without dirtying the image.
   Keep this block last.
   ========================================================= */

/* The previous bottom band was too heavy and created a black stain. */
#experience.deals-hero::after{
  height:clamp(52px,7vh,78px)!important;
  background:
    linear-gradient(180deg,
      rgba(0,5,14,0) 0%,
      rgba(0,5,14,.18) 58%,
      rgba(0,5,14,.34) 100%
    )!important;
}

/* Remove the extra dark bleed over the next section. It was causing the ugly shadow. */
#experience.deals-hero + #team::before{
  display:none!important;
}

/* Keep the closing elegant, not muddy. */
#experience.deals-hero .deals-hero-stage::after{
  bottom:0!important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(201,157,85,.14) 22%,
      rgba(201,157,85,.52) 50%,
      rgba(201,157,85,.14) 78%,
      transparent 100%
    )!important;
  opacity:.72!important;
}

/* Lift controls slightly so they are not swallowed by the transition edge. */
#experience.deals-hero .deals-hero-controls{
  bottom:clamp(3.1rem,5.2vh,4.55rem)!important;
}

/* Subtitle readability: bigger, cleaner, stronger contrast. */
#experience.deals-hero .deals-hero-subtitle{
  max-width:min(980px,76vw)!important;
  margin:1.05rem auto 0!important;
  font-size:clamp(1.22rem,1.46vw,1.62rem)!important;
  line-height:1.38!important;
  font-weight:400!important;
  color:rgba(255,255,255,.94)!important;
  text-shadow:
    0 2px 8px rgba(0,5,14,1),
    0 8px 28px rgba(0,5,14,.92),
    0 18px 58px rgba(0,5,14,.78)!important;
}

/* Give text a local readability veil only behind the words, not a full box. */
#experience.deals-hero .deals-hero-statement{
  isolation:isolate!important;
}

#experience.deals-hero .deals-hero-statement::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:-1!important;
  width:min(980px,78vw)!important;
  height:clamp(140px,18vh,210px)!important;
  transform:translate(-50%,-46%)!important;
  border-radius:999px!important;
  background:
    radial-gradient(ellipse at center,
      rgba(0,5,14,.46) 0%,
      rgba(0,5,14,.28) 42%,
      rgba(0,5,14,0) 72%
    )!important;
  filter:blur(10px)!important;
  pointer-events:none!important;
}

/* Title gets a slightly cleaner shadow too. */
#experience.deals-hero .deals-hero-title{
  text-shadow:
    0 3px 12px rgba(0,5,14,1),
    0 14px 44px rgba(0,5,14,.88),
    0 0 1px rgba(255,255,255,.34)!important;
}

@media (max-width:640px){
  #experience.deals-hero::after{
    height:72px!important;
    background:
      linear-gradient(180deg,
        rgba(0,5,14,0) 0%,
        rgba(0,5,14,.22) 58%,
        rgba(0,5,14,.38) 100%
      )!important;
  }

  #experience.deals-hero .deals-hero-subtitle{
    max-width:100%!important;
    margin-top:.9rem!important;
    font-size:clamp(1rem,4.6vw,1.22rem)!important;
    line-height:1.36!important;
  }

  #experience.deals-hero .deals-hero-statement::before{
    width:112vw!important;
    height:180px!important;
  }
}


/* =========================================================
   DEALS HERO ULTRA SLOW DISSOLVE - FINAL
   Removes the aggressive hit between images. This is a slow
   editorial dissolve: image first, text later.
   Keep this block last.
   ========================================================= */

/* Slow down the visual layer. No punch, no snap. */
#experience.deals-hero .deals-hero-picture img,
#experience.deals-hero .deals-hero-img{
  transition:
    opacity 5200ms cubic-bezier(.25,.1,.25,1),
    transform 7600ms cubic-bezier(.25,.1,.25,1),
    filter 5200ms cubic-bezier(.25,.1,.25,1)!important;
  transform:scale(1.035)!important;
  filter:saturate(.94) contrast(1.04) brightness(.77)!important;
}

#experience.deals-hero .deals-hero-img.is-active{
  opacity:1!important;
  transform:scale(1.012)!important;
}

#experience.deals-hero .deals-hero-img.is-inactive{
  opacity:0!important;
  transform:scale(1.025)!important;
}

/* Never dim the whole hero during the swap; that caused the harsh flash. */
#experience.deals-hero.is-switching .deals-hero-bg,
#experience.deals-hero.is-switching .deals-hero-picture,
#experience.deals-hero.is-switching .deals-hero-picture img,
#experience.deals-hero.is-bg-fading .deals-hero-picture img{
  opacity:1!important;
}

/* Text should drift in. Slower, lower, clearer. */
#experience.deals-hero.is-text-out .deals-hero-statement{
  animation:dealsTextOutUltraSoft 1450ms cubic-bezier(.4,0,.2,1) both!important;
}

#experience.deals-hero.is-text-in .deals-hero-statement{
  animation:dealsTextInUltraSoft 2800ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsTextOutUltraSoft{
  0%{
    opacity:1;
    transform:translateY(-.45rem);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translateY(-.95rem);
    filter:blur(1.5px);
  }
}

@keyframes dealsTextInUltraSoft{
  0%{
    opacity:0;
    transform:translateY(4rem);
    filter:blur(4px);
  }
  30%{
    opacity:0;
    transform:translateY(3.2rem);
    filter:blur(3px);
  }
  68%{
    opacity:.72;
    filter:blur(1.5px);
  }
  100%{
    opacity:1;
    transform:translateY(-.45rem);
    filter:blur(0);
  }
}

/* More refined title/subtitle stagger. */
#experience.deals-hero.is-text-in .deals-hero-title{
  animation:dealsTitleInUltraSoft 2850ms cubic-bezier(.16,1,.3,1) both!important;
}

#experience.deals-hero.is-text-in .deals-hero-subtitle{
  animation:dealsSubtitleInUltraSoft 3350ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsTitleInUltraSoft{
  0%,18%{
    opacity:0;
    transform:translateY(2.15rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes dealsSubtitleInUltraSoft{
  0%,34%{
    opacity:0;
    transform:translateY(1.55rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   DEALS HERO MANUAL MODE - FINAL
   No autoplay loader. No pause control. No contact click.
   Manual arrows/dots + mobile swipe.
   Keep this block at the absolute end of deals-hero.css.
   ========================================================= */

#experience.deals-hero .deals-hero-statement{
  cursor:default!important;
  pointer-events:none!important;
}

#experience.deals-hero .deals-hero-statement:hover,
#experience.deals-hero .deals-hero-statement:focus-visible{
  transform:translateY(-.75rem)!important;
  outline:none!important;
}

#experience.deals-hero .deals-hero-pause,
#experience.deals-hero .deals-hero-controls{
  display:none!important;
}

#experience.deals-hero .deals-hero-arrow{
  display:inline-flex!important;
  opacity:.92!important;
  pointer-events:auto!important;
}

#experience.deals-hero .deals-hero-dots{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(3.1rem,5.3vh,4.55rem)!important;
  z-index:11!important;
  width:auto!important;
  max-width:calc(100% - 8rem)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.62rem!important;
  transform:translateX(-50%)!important;
}

#experience.deals-hero .deals-hero-dot{
  position:relative!important;
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  min-height:7px!important;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.48)!important;
  opacity:1!important;
  transition:
    width .24s var(--ease),
    background .22s ease,
    transform .22s ease!important;
}

#experience.deals-hero .deals-hero-dot::before{
  content:""!important;
  position:absolute!important;
  inset:-10px!important;
  width:auto!important;
  height:auto!important;
  background:transparent!important;
  transform:none!important;
}

#experience.deals-hero .deals-hero-dot::after{
  display:none!important;
  content:none!important;
}

#experience.deals-hero .deals-hero-dot.is-active{
  width:26px!important;
  background:var(--gold)!important;
}

#experience.deals-hero .deals-hero-dot:hover,
#experience.deals-hero .deals-hero-dot:focus-visible{
  background:#fff!important;
  outline:none!important;
}

#experience.deals-hero.is-switching .deals-hero-picture img{
  opacity:.48!important;
}

#experience.deals-hero .deals-hero-picture img{
  transition:opacity .36s ease!important;
}

#experience.deals-hero{
  touch-action:pan-y!important;
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-stage{
    padding-left:2rem!important;
    padding-right:2rem!important;
  }

  #experience.deals-hero .deals-hero-arrow{
    width:40px!important;
    height:40px!important;
    bottom:2.25rem!important;
  }

  #experience.deals-hero .deals-hero-prev{
    left:.75rem!important;
  }

  #experience.deals-hero .deals-hero-next{
    right:.75rem!important;
  }

  #experience.deals-hero .deals-hero-dots{
    bottom:3.2rem!important;
    max-width:calc(100% - 7rem)!important;
    gap:.5rem!important;
  }

  #experience.deals-hero .deals-hero-dot{
    width:6px!important;
    height:6px!important;
    min-width:6px!important;
    min-height:6px!important;
  }

  #experience.deals-hero .deals-hero-dot.is-active{
    width:22px!important;
  }
}


/* =========================================================
   DEALS HERO SIDE ARROWS - FINAL
   Desktop: arrows sit at both lateral edges and appear only
   when hovering/focusing the deals section.
   Mobile: arrows remain visible because there is no reliable hover.
   Keep this block at the absolute end of deals-hero.css.
   ========================================================= */

@media (min-width:641px){
  #experience.deals-hero .deals-hero-arrow{
    top:50%!important;
    bottom:auto!important;
    width:54px!important;
    height:54px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:rgba(255,255,255,.9)!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-50%)!important;
    transition:
      opacity .22s ease,
      color .18s ease,
      transform .24s var(--ease)!important;
  }

  #experience.deals-hero .deals-hero-prev{
    left:clamp(1.5rem,3.5vw,4.5rem)!important;
    right:auto!important;
  }

  #experience.deals-hero .deals-hero-next{
    right:clamp(1.5rem,3.5vw,4.5rem)!important;
    left:auto!important;
  }

  #experience.deals-hero:hover .deals-hero-arrow,
  #experience.deals-hero:focus-within .deals-hero-arrow{
    opacity:.86!important;
    pointer-events:auto!important;
  }

  #experience.deals-hero .deals-hero-arrow:hover,
  #experience.deals-hero .deals-hero-arrow:focus-visible{
    opacity:1!important;
    color:#fff!important;
    outline:none!important;
  }

  #experience.deals-hero .deals-hero-prev:hover,
  #experience.deals-hero .deals-hero-prev:focus-visible{
    transform:translate(-5px,-50%)!important;
  }

  #experience.deals-hero .deals-hero-next:hover,
  #experience.deals-hero .deals-hero-next:focus-visible{
    transform:translate(5px,-50%)!important;
  }

  #experience.deals-hero .deals-hero-arrow svg{
    width:38px!important;
    height:38px!important;
  }

  #experience.deals-hero .deals-hero-dots{
    bottom:clamp(2.75rem,4.6vh,4rem)!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-arrow{
    opacity:.9!important;
    pointer-events:auto!important;
  }

  #experience.deals-hero .deals-hero-prev{
    left:.75rem!important;
  }

  #experience.deals-hero .deals-hero-next{
    right:.75rem!important;
  }
}


/* =========================================================
   DEALS HERO HIDE DOTS / PROGRESS - FINAL
   Manual slider uses lateral arrows and mobile swipe only.
   The old progress bar / dots are fully removed.
   Keep this block at the absolute end of deals-hero.css.
   ========================================================= */

#experience.deals-hero .deals-hero-dots,
#experience.deals-hero .deals-hero-dot,
#experience.deals-hero .deals-hero-dot::before,
#experience.deals-hero .deals-hero-dot::after{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

#experience.deals-hero .deals-hero-controls{
  display:none!important;
}


/* =========================================================
   DEALS HERO TOP LINK ALIGNMENT - FINAL
   Aligns "More Experiences" with the same right content axis
   used by "More News" / other top links.
   Keep this block at the absolute end of deals-hero.css.
   ========================================================= */

#experience.deals-hero .deals-hero-top{
  left:50%!important;
  right:auto!important;
  width:calc(100% - (var(--page-pad,5vw) * 2))!important;
  max-width:var(--content-max,1440px)!important;
  transform:translateX(-50%)!important;
  padding:0!important;
}

@media (max-width:1100px){
  #experience.deals-hero .deals-hero-top{
    width:calc(100% - (var(--page-pad,5vw) * 2))!important;
    max-width:var(--content-max,1440px)!important;
  }
}

@media (max-width:640px){
  #experience.deals-hero .deals-hero-top{
    left:1.25rem!important;
    right:1.25rem!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}

/* =========================================================
   DEALS HERO TRANSITION FIX - MAY 2026
   Final override. Removes the hard manual-mode dim/flicker and
   keeps image/text movement editorial instead of abrupt.
   ========================================================= */

#experience.deals-hero .deals-hero-picture{
  overflow:hidden!important;
  background:#00050E!important;
}

#experience.deals-hero .deals-hero-picture img,
#experience.deals-hero .deals-hero-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:0!important;
  transform:scale(1.032)!important;
  filter:saturate(.94) contrast(1.04) brightness(.77)!important;
  will-change:opacity,transform!important;
  transition:
    opacity 1650ms cubic-bezier(.16,1,.3,1),
    transform 2600ms cubic-bezier(.16,1,.3,1),
    filter 1650ms cubic-bezier(.16,1,.3,1)!important;
}

#experience.deals-hero .deals-hero-img.is-active{
  opacity:1!important;
  transform:scale(1.012)!important;
  z-index:2!important;
}

#experience.deals-hero .deals-hero-img.is-inactive{
  opacity:0!important;
  transform:scale(1.026)!important;
  z-index:1!important;
}

#experience.deals-hero.is-switching .deals-hero-bg,
#experience.deals-hero.is-switching .deals-hero-picture,
#experience.deals-hero.is-switching .deals-hero-picture img,
#experience.deals-hero.is-bg-fading .deals-hero-picture img{
  opacity:1!important;
}

#experience.deals-hero .deals-hero-statement{
  opacity:1!important;
  transform:translateY(-.75rem)!important;
  filter:blur(0)!important;
  will-change:opacity,transform,filter!important;
  transition:none!important;
}

#experience.deals-hero.is-text-out .deals-hero-statement{
  animation:dealsHeroTextOutFinal 420ms cubic-bezier(.4,0,.2,1) both!important;
}

#experience.deals-hero.is-text-in .deals-hero-statement{
  animation:dealsHeroTextInFinal 960ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsHeroTextOutFinal{
  0%{
    opacity:1;
    transform:translateY(-.75rem);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translateY(-1.25rem);
    filter:blur(1.5px);
  }
}

@keyframes dealsHeroTextInFinal{
  0%{
    opacity:0;
    transform:translateY(1.6rem);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(-.75rem);
    filter:blur(0);
  }
}

#experience.deals-hero.is-text-in .deals-hero-title{
  animation:dealsHeroTitleInFinal 960ms cubic-bezier(.16,1,.3,1) both!important;
}

#experience.deals-hero.is-text-in .deals-hero-subtitle{
  animation:dealsHeroSubtitleInFinal 1120ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsHeroTitleInFinal{
  0%,12%{
    opacity:0;
    transform:translateY(.9rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes dealsHeroSubtitleInFinal{
  0%,24%{
    opacity:0;
    transform:translateY(.75rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@media (min-width:641px){
  #experience.deals-hero .deals-hero-arrow{
    top:50%!important;
    bottom:auto!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-50%)!important;
  }

  #experience.deals-hero:hover .deals-hero-arrow,
  #experience.deals-hero:focus-within .deals-hero-arrow{
    opacity:.86!important;
    pointer-events:auto!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #experience.deals-hero .deals-hero-img,
  #experience.deals-hero .deals-hero-statement,
  #experience.deals-hero.is-text-out .deals-hero-statement,
  #experience.deals-hero.is-text-in .deals-hero-statement,
  #experience.deals-hero.is-text-in .deals-hero-title,
  #experience.deals-hero.is-text-in .deals-hero-subtitle{
    transition:none!important;
    animation:none!important;
  }
}

/* =========================================================
   DEALS HERO ELEGANT LAYERED TRANSITION - FINAL ABSOLUTE
   Preloaded image layers. No src swap on click. No dim flash.
   Keep this as the absolute last block.
   ========================================================= */
#experience.deals-hero .deals-hero-picture{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  overflow:hidden!important;
  background:#00050E!important;
}

#experience.deals-hero .deals-hero-picture > source,
#experience.deals-hero .deals-hero-picture > img:not(.deals-hero-layer){
  display:none!important;
}

#experience.deals-hero .deals-hero-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(1.035)!important;
  filter:saturate(.95) contrast(1.045) brightness(.77)!important;
  z-index:1!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:opacity,transform!important;
  transition:
    opacity 1350ms cubic-bezier(.45,0,.2,1),
    visibility 1350ms step-end,
    transform 5200ms cubic-bezier(.16,1,.3,1),
    filter 1350ms cubic-bezier(.45,0,.2,1)!important;
}

#experience.deals-hero .deals-hero-layer.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:scale(1.012)!important;
  filter:saturate(.98) contrast(1.05) brightness(.79)!important;
  z-index:3!important;
  transition:
    opacity 1350ms cubic-bezier(.45,0,.2,1),
    visibility 0ms linear,
    transform 6200ms cubic-bezier(.16,1,.3,1),
    filter 1350ms cubic-bezier(.45,0,.2,1)!important;
}

#experience.deals-hero .deals-hero-layer.is-previous{
  opacity:0!important;
  visibility:visible!important;
  transform:scale(1.025)!important;
  z-index:2!important;
}

#experience.deals-hero.is-switching .deals-hero-bg,
#experience.deals-hero.is-transitioning .deals-hero-bg,
#experience.deals-hero.is-switching .deals-hero-picture,
#experience.deals-hero.is-transitioning .deals-hero-picture,
#experience.deals-hero.is-switching .deals-hero-picture img,
#experience.deals-hero.is-transitioning .deals-hero-picture img{
  opacity:1!important;
}

#experience.deals-hero .deals-hero-statement{
  opacity:1!important;
  transform:translateY(-.75rem)!important;
  filter:blur(0)!important;
  will-change:opacity,transform,filter!important;
  transition:
    opacity 360ms cubic-bezier(.4,0,.2,1),
    transform 720ms cubic-bezier(.16,1,.3,1),
    filter 520ms cubic-bezier(.16,1,.3,1)!important;
}

#experience.deals-hero.is-copy-out .deals-hero-statement,
#experience.deals-hero.is-text-out .deals-hero-statement{
  opacity:0!important;
  transform:translateY(-1.12rem)!important;
  filter:blur(1px)!important;
  animation:none!important;
}

#experience.deals-hero.is-copy-in .deals-hero-statement{
  animation:dealsCopyInElegant 880ms cubic-bezier(.16,1,.3,1) both!important;
}

#experience.deals-hero.is-copy-in .deals-hero-title{
  animation:dealsTitleInElegant 880ms cubic-bezier(.16,1,.3,1) both!important;
}

#experience.deals-hero.is-copy-in .deals-hero-subtitle{
  animation:dealsSubtitleInElegant 1040ms cubic-bezier(.16,1,.3,1) both!important;
}

@keyframes dealsCopyInElegant{
  0%{
    opacity:0;
    transform:translateY(1.35rem);
    filter:blur(2px);
  }
  100%{
    opacity:1;
    transform:translateY(-.75rem);
    filter:blur(0);
  }
}

@keyframes dealsTitleInElegant{
  0%,10%{
    opacity:0;
    transform:translateY(.85rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes dealsSubtitleInElegant{
  0%,24%{
    opacity:0;
    transform:translateY(.7rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

#experience.deals-hero.is-copy-out .deals-hero-title,
#experience.deals-hero.is-copy-out .deals-hero-subtitle,
#experience.deals-hero.is-text-out .deals-hero-title,
#experience.deals-hero.is-text-out .deals-hero-subtitle{
  animation:none!important;
}

@media (min-width:641px){
  #experience.deals-hero .deals-hero-arrow{
    top:50%!important;
    bottom:auto!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-50%)!important;
  }

  #experience.deals-hero:hover .deals-hero-arrow,
  #experience.deals-hero:focus-within .deals-hero-arrow{
    opacity:.86!important;
    pointer-events:auto!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #experience.deals-hero .deals-hero-layer,
  #experience.deals-hero .deals-hero-statement,
  #experience.deals-hero.is-copy-in .deals-hero-statement,
  #experience.deals-hero.is-copy-in .deals-hero-title,
  #experience.deals-hero.is-copy-in .deals-hero-subtitle{
    transition:none!important;
    animation:none!important;
  }
}