/* KARMA_MOBILE_HERO_V3_0_0 */

@media (max-width:840px){

  /*
   * Hard horizontal containment.
   */
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }

  body.is-home,
  body.is-home main{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }

  body.is-home .hero{
    position:relative!important;

    width:100%!important;
    max-width:100vw!important;

    overflow:hidden!important;
    overflow-x:hidden!important;

    touch-action:pan-y!important;
    overscroll-behavior-x:none!important;
  }

  body.is-home .hero-track{
    position:relative!important;

    width:100%!important;
    max-width:100%!important;

    /*
     * Slightly shorter than previous mobile hero.
     * Removes unnecessary dark lower area.
     */
    height:306px!important;

    overflow:hidden!important;
    touch-action:pan-y!important;
  }

  body.is-home .hero-slide,
  body.is-home .hero-slide__link{
    left:0!important;
    right:0!important;

    width:100%!important;
    max-width:100%!important;

    overflow:hidden!important;
    touch-action:pan-y!important;
  }

  body.is-home .hero-media,
  body.is-home .hero-media img,
  body.is-home .hero-slide__link .hero-media,
  body.is-home .hero-slide__link .hero-media img{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;

    object-fit:cover!important;

    overflow:hidden!important;
  }


  /*
   * Title + CTA:
   * still higher than original,
   * but not floating too high.
   */
  body.is-home .hero .hero-content{
    position:absolute!important;

    left:0!important;
    right:0!important;
    bottom:48px!important;

    z-index:5!important;

    display:block!important;

    width:100%!important;
    max-width:100%!important;
    height:auto!important;

    margin:0!important;
    padding:0 20px!important;
  }

  body.is-home .hero .hero-content .eyebrow,
  body.is-home .hero .hero-content p{
    display:none!important;
  }

  body.is-home .hero .hero-content h1,
  body.is-home .hero .hero-content h2{
    width:auto!important;
    max-width:84%!important;

    margin:0 0 10px!important;

    font-size:23px!important;
    line-height:1.04!important;
    letter-spacing:-.025em!important;

    color:#fff!important;

    text-shadow:
      0 2px 5px rgba(0,0,0,.40),
      0 7px 18px rgba(0,0,0,.30)!important;
  }

  body.is-home .hero .hero-content .button{
    display:inline-flex!important;

    align-items:center!important;
    justify-content:center!important;

    width:auto!important;
    min-width:0!important;

    min-height:38px!important;

    margin:0!important;
    padding:0 15px!important;

    border:0!important;
    border-radius:7px!important;

    background:rgba(255,255,255,.97)!important;
    color:#070707!important;

    font-size:11.5px!important;
    font-weight:600!important;
    line-height:1!important;

    box-shadow:
      0 5px 16px rgba(0,0,0,.14)!important;
  }


  /*
   * Pagination sits close to the CTA instead of
   * occupying a separate black strip.
   */
  body.is-home .hero-controls{
    position:absolute!important;

    left:auto!important;
    right:14px!important;
    bottom:20px!important;

    transform:none!important;

    width:auto!important;
    max-width:150px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;

    gap:0!important;

    margin:0!important;
    padding:0!important;

    pointer-events:none!important;
  }

  body.is-home .hero-controls > button{
    display:none!important;
  }

  body.is-home .hero-dots{
    display:flex!important;

    align-items:center!important;
    justify-content:flex-end!important;

    width:auto!important;

    gap:0!important;

    margin:0!important;
    padding:0!important;

    pointer-events:auto!important;
  }

  body.is-home .hero-dots button,
  body.is-home .hero-dots button.is-active{
    position:relative!important;

    width:22px!important;
    min-width:22px!important;

    height:22px!important;
    min-height:22px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:0!important;

    background:transparent!important;
    box-shadow:none!important;

    transform:none!important;

    -webkit-tap-highlight-color:transparent;
  }

  body.is-home .hero-dots button::after,
  body.is-home .hero-dots button.is-active::after{
    content:""!important;

    position:absolute!important;

    left:50%!important;
    top:50%!important;

    width:5px!important;
    height:5px!important;

    border:1px solid rgba(255,255,255,.95)!important;
    border-radius:50%!important;

    background:transparent!important;

    transform:translate(-50%,-50%)!important;
  }

  body.is-home .hero-dots button.is-active::after{
    width:7px!important;
    height:7px!important;

    background:#fff!important;
    border-color:#fff!important;
  }
}


@media (max-width:390px){

  body.is-home .hero-track{
    height:298px!important;
  }

  body.is-home .hero .hero-content{
    bottom:45px!important;

    padding-left:16px!important;
    padding-right:16px!important;
  }

  body.is-home .hero .hero-content h1,
  body.is-home .hero .hero-content h2{
    max-width:86%!important;

    font-size:21px!important;

    margin-bottom:9px!important;
  }

  body.is-home .hero .hero-content .button{
    min-height:37px!important;

    padding:0 13px!important;

    font-size:11px!important;
  }

  body.is-home .hero-controls{
    right:10px!important;
    bottom:18px!important;
  }
}


@supports (overflow:clip){

  @media (max-width:840px){

    html,
    body,
    body.is-home,
    body.is-home main{
      overflow-x:clip!important;
    }

    body.is-home .hero{
      overflow:clip!important;
    }
  }
}

/* KARMA_MOBILE_HERO_V3_0_1 */
@media (max-width:840px){

  body.is-home .hero-track{
    height:298px!important;
  }

  body.is-home .hero .hero-content{
    bottom:38px!important;
  }

  body.is-home .hero-controls{
    bottom:8px!important;
  }
}

@media (max-width:390px){

  body.is-home .hero-track{
    height:292px!important;
  }

  body.is-home .hero .hero-content{
    bottom:36px!important;
  }

  body.is-home .hero-controls{
    bottom:7px!important;
  }
}

/* KARMA_MOBILE_HERO_V3_0_2 */
@media (max-width:840px){

  body.is-home .hero-media img,
  body.is-home .hero-slide__link .hero-media img{
    /*
     * Previous mobile baseline visually cropped
     * too much from the top.
     *
     * Lower percentage = artwork itself moves
     * downward inside the fixed hero viewport.
     */
    object-position:center 24%!important;
  }
}

@media (max-width:390px){

  body.is-home .hero-media img,
  body.is-home .hero-slide__link .hero-media img{
    object-position:center 20%!important;
  }
}

/* KARMA_MOBILE_HERO_V3_0_3 */
@media (max-width:840px){

  /*
   * OLD:
   * height 298 / content bottom 38
   *
   * NEW:
   * height 268 / content bottom 8
   *
   * Result:
   * title + CTA stay at practically the same
   * physical Y position, but the unnecessary
   * 30px bottom strip disappears.
   */
  body.is-home .hero-track{
    height:268px!important;
  }

  body.is-home .hero .hero-content{
    bottom:8px!important;
  }


  /*
   * Dots aligned vertically with CTA.
   *
   * CTA:
   * bottom 8px + height 38px
   * center ≈ 27px from bottom.
   *
   * Dots:
   * 22px hit area + bottom 16px
   * center ≈ 27px from bottom.
   */
  body.is-home .hero-controls{
    right:12px!important;
    bottom:16px!important;

    width:auto!important;
    max-width:126px!important;

    transform:none!important;
  }

  body.is-home .hero-dots{
    gap:0!important;
  }

  body.is-home .hero-dots button,
  body.is-home .hero-dots button.is-active{
    width:22px!important;
    min-width:22px!important;

    height:22px!important;
    min-height:22px!important;
  }

  /*
   * Keep artwork framing from V3.0.2.
   */
  body.is-home .hero-media img,
  body.is-home .hero-slide__link .hero-media img{
    object-position:center 24%!important;
  }
}


@media (max-width:390px){

  body.is-home .hero-track{
    height:264px!important;
  }

  body.is-home .hero .hero-content{
    bottom:8px!important;
  }

  body.is-home .hero-controls{
    right:8px!important;
    bottom:15px!important;
  }

  body.is-home .hero-media img,
  body.is-home .hero-slide__link .hero-media img{
    object-position:center 20%!important;
  }
}


/*
 * Extra-safe spacing for very narrow phones.
 */
@media (max-width:350px){

  body.is-home .hero-dots button,
  body.is-home .hero-dots button.is-active{
    width:18px!important;
    min-width:18px!important;
  }

  body.is-home .hero-controls{
    right:6px!important;
  }
}