/* ---------- Why me: pixel portrait that re-arranges per scroll step (inspired by dgrees.studio) ---------- */
.why {
  position: relative;
  z-index: 3;
  height: 420vh;                       /* ~one screen of scroll per reason */
  background: #f7f6f3;
  color: #111312;
}
.why__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr minmax(0, min(62vh, 44vw)) 1fr;
  align-items: center;
  column-gap: 4vw;
  padding: 100px 4vw 70px;
}

.why__steps { display: contents; }
.why__step { display: contents; }
.why__step > * { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.why__step:not(.is-on) > * { opacity: 0; transform: translateY(18px); pointer-events: none; }

/* left column: number + headline (all steps share the same grid cell) */
.why__num, .why__title { grid-column: 1; }
.why__num { grid-row: 1; align-self: start; margin-top: 2vh; font: 600 13px/1 var(--mono); }
.why__title {
  grid-row: 1;
  align-self: start;
  margin-top: calc(2vh + 34px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 70px);
  line-height: .98;
  letter-spacing: -0.045em;
  max-width: 7.5em;
}
.why__copy {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  max-width: 400px;
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-indent: 4em;
}

.why__board { grid-column: 2; grid-row: 1; aspect-ratio: 1; width: 100%; }
.why__grid { display: block; width: 100%; height: 100%; }

.why__dots {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  display: grid;
  gap: 10px;
}
.why__dots li { width: 8px; height: 8px; border: 1.5px solid #111312; transition: background .3s; }
.why__dots li.is-on { background: #3ed39a; border-color: #3ed39a; }

.why__bar {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 26px;
  display: flex;
  justify-content: space-between;
  font: 600 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .why__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 90px 16px 60px; row-gap: 14px; }
  .why__num, .why__title, .why__copy, .why__board { grid-column: 1; }
  .why__num, .why__title { grid-row: 1; }
  .why__title { font-size: 34px; }
  .why__board { grid-row: 2; width: min(100%, 52vh); justify-self: center; }
  .why__copy { grid-row: 3; justify-self: start; text-indent: 0; font-size: 16px; }
  .why__dots, .why__bar span:nth-child(2), .why__bar span:nth-child(3) { display: none; }
}