.index-hero{display:block;min-height:0;padding: 0}

.index-hero__slides{position:relative;z-index:0;overflow:hidden}

.index-hero__bg{position:relative;z-index:0}
.index-hero__bg img{display:block;width:100%;height:auto;object-fit:contain}
.has-js .index-hero__bg img,
.has-js .index-hero.is-ready .index-hero__bg img{transform:none;transition:none}

.index-hero__slide{
  position:absolute;top:0;left:0;width:100%;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),visibility .9s;
}
.index-hero__slide.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto;z-index:2}

.index-hero__scrim{position:absolute;inset:0;z-index:1}
.index-hero__copy{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:flex-end;
  padding-bottom:clamp(56px,6.4vw,96px);
}
.index-hero__copy .index-hero__in{position:relative;z-index:3;width:100%}
.index-hero__slide .index-hero__title{overflow-wrap:anywhere;word-break:break-word}

.index-hero__nav{
  position:absolute;z-index:6;
  right:clamp(20px,4.6vw,72px);bottom:clamp(20px,3.4vw,42px);
  display:flex;align-items:center;gap:10px;
}
.index-hero__nav:empty{display:none}
.index-hero__dot{
  width:10px;height:10px;padding:0;border-radius:50%;
  border:1px solid rgba(11,21,18,.42);background:transparent;
  cursor:pointer;transition:width .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);
}
.index-hero__dot:hover{border-color:var(--accent);background:rgba(38,79,71,.18)}
.index-hero__dot.is-active{width:28px;border-radius:6px;background:var(--accent);border-color:var(--accent)}
.index-hero__dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:768px){
  .index-hero__copy{
    position:relative;inset:auto;display:block;
    padding:26px 0 44px;background:rgba(255,255,255,.94);
  }
  .index-hero__scrim{display:none}
  .index-hero__nav{top:calc(var(--nav-h) + 12px);right:16px;bottom:auto}
}
@media(min-width:769px) and (max-height:820px){
  .index-hero__copy{padding-bottom:52px}
}
@media(min-width:769px) and (max-height:660px){
  .index-hero__copy{padding-bottom:40px}
}
@media(max-width:700px){
  .index-hero__nav{right:16px;gap:8px}
  .index-hero__dot{width:8px;height:8px}
  .index-hero__dot.is-active{width:22px}
}
@media(prefers-reduced-motion:reduce){
  .index-hero__slide{transition:none}
  .index-hero__dot{transition:none}
}