/* Surin Sport · compact panoramic banner / illustrated violet ambience
   Layer is deliberately LAST so historical banner dimensions cannot reassert.
   Keeps the sharp elephant/sports artwork; only background scenery is blurred. */
html body.public-site.hybrid-navigation.page-index {
  background:#faf8ff!important;
  background-image:linear-gradient(180deg,#f7f1ff 0,#fbf9ff 740px,#fff 1150px)!important;
}
html body.public-site.hybrid-navigation.page-index .page-content{
  position:relative!important;
  isolation:isolate!important;
  background:linear-gradient(180deg,rgba(246,239,255,.30) 0%,rgba(252,249,255,.42) 460px,#fff 1010px)!important;
}
/* Render the stadium, sports action and Surin elephants as a recognisable
   blurred purple photographic backdrop, not a blank tinted rectangle. */
html body.public-site.hybrid-navigation.page-index .page-content::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-2!important;
  top:0!important;
  left:-2%!important;
  right:-2%!important;
  width:104%!important;
  height:725px!important;
  border-radius:0!important;
  background-color:#bda0e9!important;
  background-image:
    linear-gradient(102deg,rgba(130,74,200,.70),rgba(161,111,223,.47) 48%,rgba(110,61,180,.72)),
    none!important;
  background-position:center top,center 53%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  filter:blur(21px) saturate(146%)!important;
  transform:scale(1.025)!important;
  transform-origin:top center!important;
  opacity:.93!important;
  -webkit-mask-image:linear-gradient(#000 0%,#000 49%,rgba(0,0,0,.64) 70%,transparent 100%)!important;
  mask-image:linear-gradient(#000 0%,#000 49%,rgba(0,0,0,.64) 70%,transparent 100%)!important;
  pointer-events:none!important;
}
/* Floodlights, curved running-track lines and iridescent violet glow lend
   visual detail to the blurred scenery, while keeping cards readable. */
html body.public-site.hybrid-navigation.page-index .page-content::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-1!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:680px!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(ellipse 200px 115px at 11% 32%,rgba(255,255,255,.65),transparent 75%),
    radial-gradient(ellipse 230px 120px at 88% 27%,rgba(255,245,255,.56),transparent 70%),
    radial-gradient(ellipse 340px 220px at 52% 55%,rgba(169,119,235,.27),transparent 78%),
    repeating-radial-gradient(ellipse 720px 265px at 52% 72%,transparent 0 45px,rgba(255,255,255,.08) 47px 49px,transparent 52px 105px)!important;
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.7) 64%,transparent 100%)!important;
  mask-image:linear-gradient(#000,rgba(0,0,0,.7) 64%,transparent 100%)!important;
}
/* Old grey/green fixed blobs should never render over the new scenic layer. */
html body.public-site.hybrid-navigation.page-index::before,
html body.public-site.hybrid-navigation.page-index::after{
  content:none!important;display:none!important;
}
html body.public-site.hybrid-navigation.page-index .topbar.public-premium-topbar{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(228,211,248,.98)!important;
  box-shadow:0 10px 32px rgba(72,44,122,.13),0 2px 7px rgba(65,35,105,.045)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
}
/* Desktop reference: about 1,200 x 355 on a ~1,366px display.
   The frame is reduced—not the asset resolution. */
html body.public-site.hybrid-navigation.page-index section.premium-home-hero.home-image-hero{
  display:block!important;
  width:min(1200px,calc(100% - 64px))!important;
  max-width:1200px!important;
  height:clamp(280px,26.4vw,365px)!important;
  min-height:0!important;
  max-height:365px!important;
  aspect-ratio:auto!important;
  margin:18px auto 0!important;
  padding:0!important;
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.90)!important;
  background:#e5dcf6!important;
  box-shadow:0 16px 39px rgba(59,38,109,.21),0 4px 12px rgba(79,48,122,.095)!important;
  filter:none!important;
  isolation:isolate!important;
}
html body.public-site.hybrid-navigation.page-index section.premium-home-hero.home-image-hero::before,
html body.public-site.hybrid-navigation.page-index section.premium-home-hero.home-image-hero::after{
  content:none!important;display:none!important;
}
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-slides{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  border-radius:inherit!important;
  overflow:hidden!important;
  background:#e5dcf6!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-slide,
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-slide.is-active,
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-slide picture,
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-slide>a{
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  overflow:hidden!important;
}
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-slide img,
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero picture img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 58%!important;
  background:transparent!important;
  filter:none!important;
  transform:none!important;
}
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-carousel-arrow{z-index:5!important}
html body.public-site.hybrid-navigation.page-index .premium-home-hero.home-image-hero .hero-carousel-dots{z-index:6!important}
@media(max-width:1100px){
  html body.public-site.hybrid-navigation.page-index section.premium-home-hero.home-image-hero{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:1916 / 821!important;
    margin:14px auto 0!important;
    border-radius:18px!important;
  }
  html body.public-site.hybrid-navigation.page-index .page-content::before{
    height:540px!important;
    filter:blur(17px) saturate(135%)!important;
    background-position:center top,center 50%!important;
  }
  html body.public-site.hybrid-navigation.page-index .page-content::after{height:510px!important}
}
@media(max-width:600px){
  html body.public-site.hybrid-navigation.page-index section.premium-home-hero.home-image-hero{
    width:calc(100% - 20px)!important;
    aspect-ratio:1130 / 484!important;
    height:auto!important;
    border-radius:15px!important;
    margin:10px auto 0!important;
  }
  html body.public-site.hybrid-navigation.page-index .page-content::before{
    height:360px!important;
    filter:blur(13px) saturate(130%)!important;
    opacity:.87!important;
  }
  html body.public-site.hybrid-navigation.page-index .page-content::after{height:330px!important}
}