/* Секции: вертикальные отступы, строка-подпись секции (.sh: номер, название, линия) и подзаголовок */

/* строка-подпись секции: если правая подпись не помещается, она уходит на вторую строку вправо, а линия тянется на всю первую */
.sh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
}

.sh>span {
  white-space: nowrap;
}

.sh>span:last-child {
  margin-left: auto;
}

.sh-n {
  font-variant-numeric: tabular-nums;
}

.sh-line {
  flex: 1 1 40px;
  min-width: 40px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform-origin: 0 50%;
}

[data-reveal][data-in] .sh-line {
  animation: grow 1.3s var(--e1) .1s both;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.sec {
  position: relative;
  overflow-x: clip;
  background: var(--bg);
}

/* вертикальные отступы секций — классами, а не инлайн-стилями: на телефоне их ужимает адаптив ниже */
.sec-caps {
  padding: 120px 0;
}

.sec-works {
  padding: 100px 0 140px;
}

.sec-appr {
  padding: 110px 0 150px;
}

.appr-blk {
  margin-top: 130px;
}

.sec-h2 {
  margin-top: 40px;
  max-width: 1010px;
  font-size: clamp(30px,3.2vw,46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}

@media (max-width:640px), (max-height:500px) and (orientation:landscape) {
  /* телефон (и в альбомной ориентации): десктопные 220–250px между блоками давали почти пустой экран.
     Сверху у секции остаётся 88px — по якорю подпись «01/02/03» не уходит под капсулу навигации (её низ — 68px) */
  .sec-caps,
  .sec-works {
    padding: 88px 0 56px;
  }
  .sec-appr {
    padding: 88px 0 80px;
  }
  .appr-blk {
    margin-top: 80px;
  }
}

.sec-h2-mute {
  color: rgba(27,23,20,.55);
}
