.scroll-statement {
  --statement-ink: 17 17 19;
  --statement-muted: 158 158 165;
  min-height: 180svh;
  background: #f7f7f8;
}

.scroll-statement__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: clamp(4.35rem, 6.314vw, 5.74rem) max(5vw, calc((100vw - 1440px) / 2));
  overflow: hidden;
}

.scroll-statement__text {
  width: min(100%, 18ch);
  margin: 0;
  color: rgb(var(--statement-ink));
  font-size: clamp(3rem, 6.6vw, 7.4rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.scroll-statement--ready .scroll-statement__word {
  color: rgb(var(--statement-word-tone, var(--statement-muted)));
  transition: color 80ms linear;
}

@media (max-width: 720px) {
  .scroll-statement {
    min-height: 165svh;
  }

  .scroll-statement__sticky {
    padding: 4.35rem 6vw;
  }

  .scroll-statement__text {
    width: 100%;
    font-size: clamp(2.75rem, 13vw, 4.75rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-statement {
    min-height: auto;
  }

  .scroll-statement__sticky {
    position: relative;
    min-height: min(92svh, 52rem);
  }

  .scroll-statement--ready .scroll-statement__word {
    color: rgb(var(--statement-ink));
    transition: none;
  }
}

/* Inline variant: the illuminating headline used as a section intro (homepage
   "Four ways..."), which flows in the page instead of pinning a 180svh stage. */
.scroll-statement--inline{
  --statement-ink:17 17 19;
  --statement-muted:158 158 165;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-bottom:clamp(76.56px,5.166vw,75.77px);
  padding-block:clamp(40px,5.22vw,76.56px);
}

.scroll-statement--inline .scroll-statement__text{
  width:min(100%,17ch);
  max-width:none;
  font-size:clamp(3.5rem,6.6vw,6.5rem);
  line-height:.96;
  letter-spacing:-.04em;
}

@media(max-width:1050px), (max-height:740px){
  .scroll-statement--inline{margin-bottom:clamp(55.68px,6.24vw,74.88px)}
}

@media(max-width:720px){
  .scroll-statement--inline{
    margin-bottom:56px;
    padding-block:28px 34px;
  }
  .scroll-statement--inline .scroll-statement__text{
    width:100%;
    font-size:clamp(2.85rem,12vw,4.25rem);
  }
}

@media(max-width:380px){
  .scroll-statement--inline .scroll-statement__text{font-size:clamp(2.5rem,11.5vw,3.4rem)}
}

@media (prefers-reduced-motion: reduce){
  .scroll-statement--inline .scroll-statement__word{color:rgb(var(--statement-ink))}
}