.trainers-page {
  overflow-x: clip;
  background: #000;
}

.trainers-page #main {
  min-height: 100dvh;
  margin-top: calc(0px - var(--header-height));
}

.trainer-scene {
  --trainer-card-x: 16;
  --trainer-card-y: 240;
  --trainer-card-width: 841;
  --trainer-card-height: 465;
  --trainer-contact-x: 875;
  --trainer-contact-y: 635;
  --trainer-contact-width: 362;
  --trainer-contact-height: 52;
  --trainer-contact-mobile-x: 14;
  --trainer-contact-mobile-y: 780;
  --trainer-contact-mobile-width: 362;
  --trainer-contact-mobile-height: 52;

  position: relative;
  display: none;
  width: 100%;
  min-height: 100vh;
  overflow: clip;
  color: #e8e8e8;
  background: #000;
  container-type: inline-size;
  touch-action: pan-y;
}

.trainer-background,
.trainer-background__image,
.trainer-background__darkening,
.trainer-decoration,
.trainer-decoration__transform,
.trainer-decoration__clip,
.trainer-decoration__asset,
.trainer-photo,
.trainer-photo__render,
.trainer-photo img,
.trainer-photo-shades,
.trainer-photo-shade,
.trainer-counter,
.trainer-counter__surface,
.trainer-counter__arrow,
.trainer-counter__copy,
.trainer-card,
.trainer-card__surface,
.trainer-card__content,
.trainer-card__header,
.trainer-card__name,
.trainer-card__underline,
.trainer-text-layer,
.trainer-bullet-layer,
.trainer-text-block,
.trainer-text-bullet,
.trainer-extra-decorations,
.trainer-extra-decoration,
.trainer-contact {
  position: absolute;
  display: block;
}

.trainer-background,
.trainer-card,
.trainer-card__content,
.trainer-card__header,
.trainer-text-layer,
.trainer-bullet-layer,
.trainer-photo-shades,
.trainer-extra-decorations {
  inset: 0;
}

.trainer-decoration,
.trainer-photo,
.trainer-photo-shades,
.trainer-card,
.trainer-card__surface,
.trainer-bullet-layer,
.trainer-extra-decorations {
  pointer-events: none;
}

.trainer-decoration {
  z-index: 1;
  overflow: hidden;
}

.trainer-decoration__transform,
.trainer-decoration__clip,
.trainer-decoration__asset {
  inset: 0;
}

.trainer-decoration__asset {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.trainer-photo {
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
  overflow: visible;
}

.trainer-photo__render,
.trainer-photo img {
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
  transform:
    rotate(calc(var(--trainer-rotation, 0) * 1deg))
    scaleX(var(--trainer-scale-x, 1))
    scaleY(var(--trainer-scale-y, 1));
  transform-origin: 50% 50%;
}

.trainer-photo img {
  max-width: none;
  object-fit: cover;
}

.trainer-photo-shades {
  z-index: auto;
}

.trainer-photo-shade {
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
}

.trainer-counter {
  margin: 0;
}

.trainer-counter__surface {
  inset: 0;
  border: 1.539px solid rgb(255 255 255 / 22%);
  border-radius: 36.931px;
  background: linear-gradient(100deg, rgb(5 5 5 / 51%) 0%, rgb(10 10 10 / 47%) 54%, rgb(18 13 4 / 44%) 100%);
  box-shadow:
    0 15.388px 384.698px rgb(0 0 0 / 45%),
    inset 0 1.539px 1.539px rgb(255 255 255 / 10%);
  backdrop-filter: blur(6.155px);
  -webkit-backdrop-filter: blur(6.155px);
}

.trainer-counter__arrow {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition:
    filter 180ms ease,
    transform 180ms var(--ease-ui);
}

.trainer-counter__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.trainer-counter__arrow--next img {
  transform: rotate(180deg);
}

.trainer-counter__arrow:disabled {
  cursor: default;
}

.trainer-counter__arrow:focus-visible {
  border-radius: 50%;
  outline: 2px solid #fff;
  outline-offset: 3px;
  filter:
    brightness(1.08)
    drop-shadow(0 0 6px rgb(247 167 45 / 62%))
    drop-shadow(0 0 14px rgb(253 172 9 / 32%));
  transform: translateY(-1px) scale(1.05);
}

@media (hover: hover) and (pointer: fine) {
  .trainer-counter__arrow:not(:disabled):hover {
    filter:
      brightness(1.08)
      drop-shadow(0 0 6px rgb(247 167 45 / 62%))
      drop-shadow(0 0 14px rgb(253 172 9 / 32%));
    transform: translateY(-1px) scale(1.05);
  }
}

.trainer-counter__arrow:not(:disabled):active {
  filter:
    brightness(1.12)
    drop-shadow(0 0 7px rgb(247 167 45 / 68%))
    drop-shadow(0 0 16px rgb(253 172 9 / 36%));
  transform: translateY(1px) scale(0.96);
  transition-duration: 80ms;
}

.trainer-counter__copy {
  text-align: center;
}

.trainer-counter__numbers {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #e8e8e8;
  font-family: "PT Root UI", sans-serif;
  line-height: 1;
}

.trainer-counter__numbers strong {
  color: #f7a72d;
  font-weight: 700;
}

.trainer-counter__numbers span,
.trainer-counter__numbers b {
  font-weight: 700;
}

.trainer-counter__label {
  position: absolute;
  display: block;
  color: #b7b7b7;
  font-family: "PT Root UI", sans-serif;
  font-weight: 400;
  line-height: 1.18;
}

.trainer-card {
  z-index: 4;
}

.trainer-card__surface {
  z-index: 0;
  border: 1.539px solid rgb(255 255 255 / 22%);
  border-radius: 36.931px;
  background: linear-gradient(100deg, rgb(5 5 5 / 51%) 0%, rgb(10 10 10 / 47%) 54%, rgb(18 13 4 / 44%) 100%);
  box-shadow:
    0 15.388px 384.698px rgb(0 0 0 / 45%),
    inset 0 1.539px 1.539px rgb(255 255 255 / 10%);
  backdrop-filter: blur(6.155px);
  -webkit-backdrop-filter: blur(6.155px);
}

.trainer-card__content {
  z-index: 2;
}

.trainer-card__name {
  z-index: 3;
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  min-height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
  margin: 0;
  color: #ebebeb;
  font-family: "PT Root UI", sans-serif;
  font-size: calc(var(--trainer-font-size, 50) * var(--trainer-scene-unit));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.trainer-card__underline {
  z-index: 3;
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
}

.trainer-card__underline::before {
  position: absolute;
  display: block;
  content: "";
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.trainer-text-layer,
.trainer-bullet-layer {
  z-index: 2;
}

.trainer-text-layer > ul {
  margin: 0;
}

.trainer-text-block {
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  min-height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
  margin: 0;
  color: #ebebeb;
  font-family: "PT Root UI", sans-serif;
  font-size: calc(var(--trainer-font-size, 14) * var(--trainer-scene-unit));
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: pre-wrap;
}

.trainer-text-bullet {
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 10) * var(--trainer-scene-unit));
  height: calc(var(--trainer-height, 10) * var(--trainer-scene-unit));
  border-radius: 50%;
  background: #f7a72d;
}

.trainer-extra-decoration {
  top: calc(var(--trainer-y, 0) * var(--trainer-scene-unit));
  left: calc(var(--trainer-x, 0) * var(--trainer-scene-unit));
  width: calc(var(--trainer-width, 0) * var(--trainer-scene-unit));
  height: calc(var(--trainer-height, 0) * var(--trainer-scene-unit));
  max-width: none;
  opacity: 1;
  object-fit: fill;
  transform:
    rotate(calc(var(--trainer-rotation, 0) * 1deg))
    scaleX(var(--trainer-scale-x, 1))
    scaleY(var(--trainer-scale-y, 1));
  transform-origin: 50% 50%;
}

.trainer-contact {
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.93px solid #fdac09;
  color: #f7a72d;
  font-family: "PT Root UI", sans-serif;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(96deg, rgb(5 5 5 / 72%) 0%, rgb(14 12 8 / 69%) 68%, rgb(30 20 2 / 62%) 100%);
  box-shadow:
    0 0 32px rgb(247 167 45 / 38%),
    0 0 10px rgb(253 172 9 / 26%),
    inset 0 1px 1px rgb(255 255 255 / 10%);
  backdrop-filter: blur(29.71px);
  -webkit-backdrop-filter: blur(29.71px);
  transform: scale(1);
  transform-origin: 50% 50%;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.trainer-contact img {
  display: block;
}

.trainer-contact:hover,
.trainer-contact:focus-visible {
  border-color: #ffc44f;
  box-shadow:
    0 0 48px rgb(247 167 45 / 52%),
    0 0 18px rgb(253 172 9 / 36%),
    inset 0 1px 1px rgb(255 255 255 / 14%);
  filter: brightness(1.1);
  transform: scale(1.035);
}

.trainer-contact:active {
  border-color: #ffd06a;
  box-shadow:
    0 0 56px rgb(247 167 45 / 60%),
    0 0 24px rgb(253 172 9 / 42%),
    inset 0 1px 1px rgb(255 255 255 / 16%);
  filter: brightness(1.14);
  transform: scale(1.05);
}

.trainer-contact:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .trainer-counter__arrow {
    transition: filter 120ms linear;
  }

  .trainer-counter__arrow:focus-visible,
  .trainer-counter__arrow:not(:disabled):hover,
  .trainer-counter__arrow:not(:disabled):active {
    transform: none;
  }

  .trainer-contact {
    transition:
      border-color 120ms linear,
      box-shadow 120ms linear,
      filter 120ms linear;
  }

  .trainer-contact:hover,
  .trainer-contact:focus-visible,
  .trainer-contact:active {
    transform: none;
  }
}

@media (max-width: 63.9375rem) {
  .trainer-scene {
    --trainer-scene-unit: 0.2564102564cqw;

    display: block;
    height: max(100dvh, 216.410256cqw);
    min-height: 216.410256cqw;
  }

  .trainer-background__image {
    top: 217.948718cqw;
    left: 114.354217cqw;
    width: 121.533767cqw;
    height: 216.153846cqw;
    background: url("../assets/images/shared/background-mobile.png") center / cover no-repeat;
    transform: rotate(-180deg);
    transform-origin: 0 0;
  }

  .trainer-background__darkening {
    z-index: 1;
    top: -4.102564cqw;
    left: 4.102564cqw;
    width: 100.769231cqw;
    height: 15.897436cqw;
    background: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0%) 96%);
  }

  .trainer-decoration--left {
    display: none;
  }

  .trainer-decoration--right {
    top: calc(-17 * var(--trainer-scene-unit));
    left: calc(-30 * var(--trainer-scene-unit));
    width: calc(463 * var(--trainer-scene-unit));
    height: calc(82 * var(--trainer-scene-unit));
  }

  .trainer-decoration--right .trainer-decoration__transform {
    top: calc(0.012876 * var(--trainer-scene-unit));
    right: auto;
    bottom: auto;
    left: calc(461.015209 * var(--trainer-scene-unit));
    width: calc(83.9689 * var(--trainer-scene-unit));
    height: calc(462.9873 * var(--trainer-scene-unit));
    transform: rotate(90deg);
    transform-origin: 0 0;
  }

  .trainer-decoration--right .trainer-decoration__clip {
    overflow: hidden;
  }

  .trainer-decoration--right .trainer-decoration__asset {
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/home/decoration-left.svg");
  }

  .trainer-counter {
    top: calc(var(--trainer-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-height) * var(--trainer-scene-unit));
  }

  .trainer-counter__surface,
  .trainer-card__surface {
    display: none;
  }

  .trainer-counter__arrow {
    top: calc(3 * var(--trainer-scene-unit));
    width: calc(50 * var(--trainer-scene-unit));
    height: calc(50 * var(--trainer-scene-unit));
  }

  .trainer-counter__arrow--previous {
    left: 0;
  }

  .trainer-counter__arrow--next {
    right: auto;
    left: calc(208 * var(--trainer-scene-unit));
  }

  .trainer-counter__copy {
    top: calc(var(--trainer-counter-center-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-counter-center-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-counter-center-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-counter-center-height) * var(--trainer-scene-unit));
  }

  .trainer-counter__numbers {
    height: 12.564103cqw;
    gap: 2.051282cqw;
  }

  .trainer-counter__numbers strong {
    font-size: 11.282051cqw;
  }

  .trainer-counter__numbers span,
  .trainer-counter__numbers b {
    font-size: 8.205128cqw;
  }

  .trainer-counter__label {
    top: calc(var(--trainer-counter-label-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-counter-label-x) * var(--trainer-scene-unit));
    margin: 0;
    font-size: 4.327385cqw;
  }

  .trainer-card__name {
    white-space: normal;
  }

  .trainer-card__underline::before {
    top: calc(-10.2433 * var(--trainer-scene-unit));
    left: calc(-9.2433 * var(--trainer-scene-unit));
    width: calc(71 * var(--trainer-scene-unit));
    height: calc(25 * var(--trainer-scene-unit));
    background-image: url("../assets/images/trainers/decorations/underline-mobile.svg");
  }

  .trainer-extra-decorations {
    z-index: 3;
  }

  .trainer-contact {
    top: calc(var(--trainer-contact-mobile-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-contact-mobile-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-contact-mobile-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-contact-mobile-height) * var(--trainer-scene-unit));
    gap: 1.282051cqw;
    border-radius: 5.714286cqw;
    font-size: 5.51641cqw;
  }

  .trainer-contact img {
    width: 10.512821cqw;
    height: 6.343846cqw;
  }
}

@media (min-width: 64rem) {
  .trainer-scene {
    --trainer-scene-unit: 0.078125cqw;

    display: block;
    height: max(100vh, 56.25vw);
  }

  .trainer-background__image {
    top: -1.328125cqw;
    left: -1.25cqw;
    width: 129.453125cqw;
    height: 72.890625cqw;
    background: url("../assets/images/shared/background-desktop-1.png") center / cover no-repeat;
  }

  .trainer-background__darkening {
    z-index: 1;
    inset: 0 0 auto;
    height: max(calc(8.4375cqw + 6mm), calc(var(--header-height) + 0.75rem + 6mm));
    background: linear-gradient(180deg, #000 0%, #000 54.872832%, rgb(0 0 0 / 0%) 96.378491%);
  }

  .trainer-decoration--left {
    top: 0;
    left: 0;
    width: calc(114 * var(--trainer-scene-unit));
    height: calc(718 * var(--trainer-scene-unit));
  }

  .trainer-decoration--left .trainer-decoration__clip,
  .trainer-decoration--right .trainer-decoration__clip {
    overflow: hidden;
  }

  .trainer-decoration--left .trainer-decoration__asset {
    top: calc(-17.975281 * var(--trainer-scene-unit));
    right: auto;
    bottom: auto;
    left: calc(-45.751709 * var(--trainer-scene-unit));
    width: calc(159.746 * var(--trainer-scene-unit));
    height: calc(886.975 * var(--trainer-scene-unit));
    background-image: url("../assets/images/team/decoration-left.svg");
  }

  .trainer-decoration--right {
    top: 0.15625cqw;
    left: 93.28125cqw;
    width: 6.71875cqw;
    height: 55.625cqw;
  }

  .trainer-decoration--right .trainer-decoration__asset {
    top: calc(-8.998535 * var(--trainer-scene-unit));
    right: auto;
    bottom: auto;
    left: 0;
    width: calc(146.645467 * var(--trainer-scene-unit));
    height: calc(783.953552 * var(--trainer-scene-unit));
    background-image: url("../assets/images/home/decoration-right.svg");
  }

  .trainer-counter {
    top: calc(var(--trainer-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-height) * var(--trainer-scene-unit));
  }

  .trainer-counter__surface {
    right: auto;
    left: 50%;
    width: 92%;
    border-radius: calc(36.931 * var(--trainer-scene-unit));
    backdrop-filter: blur(calc(6.155 * var(--trainer-scene-unit)));
    -webkit-backdrop-filter: blur(calc(6.155 * var(--trainer-scene-unit)));
    transform: translateX(-50%);
  }

  .trainer-counter__arrow {
    top: calc(31 * var(--trainer-scene-unit));
    width: calc(50 * var(--trainer-scene-unit));
    height: calc(50 * var(--trainer-scene-unit));
  }

  .trainer-counter__arrow--previous {
    left: calc(40 * var(--trainer-scene-unit));
  }

  .trainer-counter__arrow--next {
    right: auto;
    left: calc(251 * var(--trainer-scene-unit));
  }

  .trainer-counter__copy {
    top: calc((var(--trainer-counter-center-y) + 11) * var(--trainer-scene-unit));
    left: calc(var(--trainer-counter-center-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-counter-center-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-counter-center-height) * var(--trainer-scene-unit));
  }

  .trainer-counter__numbers {
    height: 5.15625cqw;
    gap: 0.78125cqw;
  }

  .trainer-counter__numbers strong {
    font-size: 4.296875cqw;
  }

  .trainer-counter__numbers span,
  .trainer-counter__numbers b {
    font-size: 2.8125cqw;
  }

  .trainer-counter__label {
    top: calc(var(--trainer-counter-label-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-counter-label-x) * var(--trainer-scene-unit));
    margin: 0;
    font-size: 1.328125cqw;
  }

  .trainer-card__underline::before {
    top: calc(-10.2432 * var(--trainer-scene-unit));
    left: calc(-9.2432 * var(--trainer-scene-unit));
    width: calc(149 * var(--trainer-scene-unit));
    height: calc(29 * var(--trainer-scene-unit));
    background-image: url("../assets/images/trainers/decorations/underline-desktop.svg");
  }

  .trainer-card__surface {
    top: calc(var(--trainer-card-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-card-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-card-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-card-height) * var(--trainer-scene-unit));
  }

  .trainer-extra-decorations {
    z-index: 5;
  }

  .trainer-contact {
    top: calc(var(--trainer-contact-y) * var(--trainer-scene-unit));
    left: calc(var(--trainer-contact-x) * var(--trainer-scene-unit));
    width: calc(var(--trainer-contact-width) * var(--trainer-scene-unit));
    height: calc(var(--trainer-contact-height) * var(--trainer-scene-unit));
    gap: 0.390625cqw;
    border-radius: 0.78125cqw;
    font-size: 1.680781cqw;
  }

  .trainer-contact img {
    width: 3.203125cqw;
    height: 1.932891cqw;
  }
}
