#coachpicker {
    height: 100dvh;
    background: linear-gradient(90deg, #11221f, #182925, #13231f);
    position: relative;
    overflow: hidden;}

    .coachcarousel {
    height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;}

    .coachcarousel-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 17px;
    scroll-padding: 0 17px;}

    .coachcarousel-track > .coachcard {
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-sizing: border-box;}

    .coachcard {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: space-between;
    border-width: 1px;
    border-top-style: solid;
    border-image: linear-gradient(to right, #00000000, #368268, #00000000) 1;
    margin: 26px 17px;
    padding: 25px;
    height: 92.5dvh;
    border-radius: 15px;
    max-width: 420px;
    box-shadow: 0px 20px 18px -15px #000000b3;}

    .coachcard.liam {
      background-image: url(../images/coach-carousel-mobile-liam.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.kass {
      background-image: url(../images/coach-carousel-mobile-kass.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.dirk {
      background-image: url(../images/coach-carousel-mobile-dirk.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.quinn {
      background-image: url(../images/coach-carousel-mobile-quinn2.jpg);
      background-position: 50% 67%;
      background-repeat: no-repeat;
      background-size: clamp(522px, 151%, 64vh) auto;
      background-color: transparent;
    }

    .coachcard.apex {
      background-image: url(../images/coach-carousel-mobile-apex.jpg);
      background-position: 50% 63%;
      background-repeat: no-repeat;
      background-size: clamp(524px, 128%, 64vh) auto;
      background-color: transparent;
    }

    /* Horizontal carousel layout (coach) */
    .coachcarousel{
      height: 100dvh;
      display: grid;
      grid-template-rows: 1fr auto; /* track + dots */
    }
    .coachcarousel-track{
      display: flex;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 0;
      scroll-behavior: smooth;
      scrollbar-width: none; /* Firefox */
      /* keep a 17px gutter on both sides at rest and during snap */
      padding: 0 17px;
      scroll-padding: 0 17px;
    }
    .coachcarousel-track::-webkit-scrollbar{ display: none; } /* WebKit */

    /* Each slide snaps with a 17px gutter on either side */
    .coachcarousel-track > .coachcard{
      /* full width of the inner content box; gutters are created by track padding */
      flex: 0 0 100%;
      scroll-snap-align: start;
      box-sizing: border-box;
    }

    /* Dots indicator (coach) */
    .carousel-dots{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      pointer-events: none;
    }
    .carousel-dots .dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #168a65;
      opacity: .5;
    }
    .carousel-dots .dot.active{
      background: #36ffb6;
      opacity: 1;
      box-shadow: 0 0 0 2px rgba(54,255,182,0.18);
    }