.s-slogan {
  --sl-bg: var(--dark-bg);
  --sl-text: #f2f2f2;
  --sl-dim: #2a2a2a; 
  --sl-muted: #8c8c8c;
  --sl-red: var(--brand-red);
  --sl-green: var(--brand-green);
  --sl-teal: var(--brand-teal);
  --sl-sky: var(--brand-sky);
  --sl-blue: var(--brand-blue);
  --sl-pink: var(--brand-pink);
  --sl-length: 240vh; 

  position: relative;
  background: var(--sl-bg);
  color: var(--sl-text);
}

.s-slogan__sticky {
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 10vw, 180px);
}
.s-slogan__inner {
  width: 100%;
  max-width: calc(var(--wide-max) + var(--wide-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--wide-pad);
  text-align: center; 
}


@media (prefers-reduced-motion: no-preference) {
  .js .s-slogan:not(.is-static) {
    height: var(--sl-length);
  }
  .js .s-slogan:not(.is-static) .s-slogan__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding-block: 0;
  }
}


.s-slogan__text {
  max-width: 15.5em;
  margin-inline: auto;
  font-size: clamp(2.125rem, 0.8rem + 4.4vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  word-spacing: -0.02em;
  line-height: 1.12;
}
.s-slogan__word {
  display: inline-block;
  white-space: nowrap;
}
.s-slogan__char {
  --c: var(--sl-text);
  color: var(--c);
}
.s-slogan__char.is-red {
  --c: var(--sl-red);
}
.s-slogan__char.is-green {
  --c: var(--sl-green);
}
.s-slogan__char.is-teal {
  --c: var(--sl-teal);
}
.s-slogan__char.is-sky {
  --c: var(--sl-sky);
}
.s-slogan__char.is-blue {
  --c: var(--sl-blue);
}
.s-slogan__char.is-pink {
  --c: var(--sl-pink);
}
@media (prefers-reduced-motion: no-preference) {
  .js .s-slogan:not(.is-static) .s-slogan__char {
    color: color-mix(in srgb, var(--c) calc(var(--f, 0) * 100%), var(--sl-dim));
  }
}


.s-slogan__sign {
  margin-top: clamp(28px, 3vw, 48px);
  color: var(--sl-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: no-preference) {
  .js .s-slogan:not(.is-static) .s-slogan__sign {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .s-slogan.is-complete .s-slogan__sign {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 899px) {
  .s-slogan {
    --sl-length: 200vh;
  }
}