html,body{overflow-x:hidden}

.pms-hero-slideshow{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#dfe6ed;
}

.pms-hero-frame{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  background:#dfe6ed;
  transition:opacity 1.25s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}

.pms-hero-frame.is-active{opacity:1}
.pms-hero-frame--mobile{display:none}

.pms-hero-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(var(--pms-hero-columns),minmax(0,1fr));
  gap:0;
}

.pms-hero-panel{
  position:relative;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  background:#f7f8f9;
}

.pms-hero-panel::before{
  content:"";
  position:absolute;
  inset:-5%;
  z-index:-1;
  background-image:var(--pms-hero-image);
  background-position:center;
  background-size:cover;
  filter:blur(22px) saturate(.72) brightness(.95);
  opacity:.36;
  transform:scale(1.08);
}

.pms-hero-panel.has-error{background:#dfe6ed}
.pms-hero-panel.has-error .pms-hero-slide{display:none}

.pms-hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.98;
  transform:scale(1.01);
  transition:transform 6.5s ease-out;
  will-change:transform;
}

.pms-hero-frame.is-active .pms-hero-slide{transform:scale(1.07)}

[data-pms-hero-anchor]+div{
  background:linear-gradient(90deg,rgba(3,17,34,.82) 0%,rgba(3,17,34,.66) 42%,rgba(3,17,34,.46) 72%,rgba(3,17,34,.34) 100%)!important;
}

.pms-hero-dots{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:70px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(4,20,39,.42);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.pms-hero-dotset{
  display:flex;
  align-items:center;
  gap:8px;
}

.pms-hero-dotset--mobile{display:none}

.pms-hero-dot{
  appearance:none;
  border:0;
  width:20px;
  height:4px;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:width .35s ease,background-color .35s ease,transform .2s ease;
}

.pms-hero-dot:hover{
  background:rgba(255,255,255,.9);
  transform:scaleY(1.4);
}

.pms-hero-dot.is-active{
  width:40px;
  background:#e07800;
}

.pms-hero-dot:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

@media(max-width:767px){
  .pms-hero-frame--desktop{display:none}
  .pms-hero-frame--mobile{display:block}
  .pms-hero-dotset--desktop{display:none}
  .pms-hero-dotset--mobile{display:flex}

  .pms-hero-frame--mobile .pms-hero-grid{display:block}

  /* In desktop mode CSS Grid gives every panel a height. In mobile mode the
     grid becomes a block, while all panel contents are absolutely positioned;
     without an explicit box the panel collapses to 0px and the slide vanishes. */
  .pms-hero-frame--mobile .pms-hero-panel{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .pms-hero-frame--mobile .pms-hero-panel::before{
    inset:-10%;
    filter:blur(20px) saturate(.72) brightness(.84);
    opacity:.72;
  }

  .pms-hero-frame--mobile .pms-hero-slide{
    top:4%;
    right:4%;
    bottom:auto;
    left:4%;
    width:92%;
    height:48%;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 18px 32px rgba(9,30,55,.18));
    transform:scale(1);
  }

  .pms-hero-frame--mobile.is-active .pms-hero-slide{transform:scale(1.045)}

  [data-pms-hero-anchor]+div{
    background:linear-gradient(180deg,rgba(3,17,34,.38) 0%,rgba(3,17,34,.58) 38%,rgba(3,17,34,.9) 72%,rgba(3,17,34,.94) 100%)!important;
  }

  .pms-hero-dots{bottom:46px;padding:8px 9px}
  .pms-hero-dotset{gap:5px}
  .pms-hero-dot{width:10px;height:3px}
  .pms-hero-dot.is-active{width:24px}
}

@media(prefers-reduced-motion:reduce){
  .pms-hero-frame{transition:opacity .2s linear}
  .pms-hero-slide,.pms-hero-frame.is-active .pms-hero-slide{transition:none;transform:none}
  .pms-hero-dot{transition:none}
}