.fr {
  position: relative;
  z-index: 2;
  color: var(--ink);
}
.fr-walk {
  position: relative;
  height: 535vh;
}
.fr-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(
      90% 70% at 50% 74%,
      rgba(22, 48, 86, .34),
      rgba(10, 22, 40, .12) 46%,
      rgba(5, 6, 8, 0) 72%),
    #050608;
}
.fr-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fr-shots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.fr-shot {
  position: absolute;
  left: 50%;
  top: 38%;
  margin: 0;
  width: min(38vw, calc(44vh * var(--w) / var(--h)));
  aspect-ratio: var(--w) / var(--h);
  transform: translate(-50%, -50%) scale(.985);
  opacity: 0;
  will-change: opacity, transform;
}
.fr-art {
  display: block;
  width: 100%;
  height: 100%;
}
.fr-cases {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: calc(38% + 22vh + 4.5vh);
  width: min(980px, 84vw);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}
.fr-c {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
  transition: visibility 0s linear .7s;
}
.fr-c.on {
  visibility: visible;
  transition: none;
}
.fr-m {
  display: block;
  overflow: hidden;
  padding: .12em .3em .24em;
  margin: -.12em -.3em -.24em;
}
.fr-mi {
  display: block;
  transform: translateY(115%);
  transition: transform .55s cubic-bezier(.4, 0, .6, 1);
}
.fr-c.on .fr-mi {
  transform: none;
  transition: transform 1.2s var(--arr) calc(.18s + var(--d,0s));
}
.fr-k {
  justify-content: center;
  margin: 0 0 18px;
}
.fr-k .fr-m {
  display: inline-block;
  vertical-align: bottom;
}
.fr-k b.fr-m {
  --d:.06s;
}
.fr-k span.fr-m + i + b + i + span {
  --d:.12s;
}
.fr-t {
  --d:.12s;
  margin: 0;
  font:
    400 clamp(30px, 2.3vw, 46px)/.88 "Playfair Display",
    "Playfair Fallback",
    Georgia,
    serif;
  letter-spacing: -.05em;
  word-spacing: .12em;
  color: var(--ink);
  text-transform: none;
}
.fr-t .fr-m {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-top: .5em;
  margin-top: -.5em;
  padding-bottom: .5em;
  margin-bottom: -.5em;
}
.fr-c .fr-t .fr-mi {
  transform: translateY(160%);
}
.fr-c.on .fr-t .fr-mi {
  transform: none;
}
.fr-t .key {
  font-style: normal;
  font-size: 2em;
  letter-spacing: -.065em;
  line-height: .88;
  color: var(--ink);
}
.fr-t .fr-mi {
  --d:.1s;
}
.fr-r {
  margin: 20px 0 0;
  font:
    450 clamp(18px, 1.1vw, 21px)/1.55 "Golos Text",
    "Golos Fallback",
    sans-serif;
  color: var(--soft);
}
.fr-r .fr-mi {
  --d:.2s;
}
.fr-go {
  margin: 26px 0 0;
}
.fr-go .fr-m {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: .4em .6em .6em;
  margin-top: -.4em;
  margin-bottom: -.6em;
}
.fr-go .fr-mi {
  --d:.3s;
}
.fr-c .lbl b {
  color: #a3f6e8;
}
.fr-count {
  position: absolute;
  left: 50%;
  bottom: 4.6vh;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  z-index: 2;
  font:
    500 15px/1 "Golos Text",
    "Golos Fallback",
    sans-serif;
  letter-spacing: .3em;
  color: #d3d8df;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.fr-count b {
  font-weight: 600;
  color: var(--ink);
}
.fr-count i {
  font-style: normal;
  color: #9aa1ad;
}
.fr-on .fr-count {
  opacity: 1;
}
.fr-hero {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 19vh var(--wp) 0;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
.fr-hero .lbl {
  justify-content: center;
}
.fr .ttl .ln {
  margin-left: auto;
  margin-right: auto;
}
.fr-hero .ttl {
  font-size: clamp(34px, 3.5vw, 68px);
}
.fr-hero .txt {
  margin: 30px auto 0;
  max-width: 31em;
  text-wrap: balance;
}
.fr-at {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.fr-brands {
  position: relative;
  z-index: 2;
  padding: 18vh var(--wp) 14vh;
}
.fr-bh {
  max-width: 1000px;
  margin: 0 auto clamp(48px, 6vh, 80px);
  text-align: center;
}
.fr-bh .lbl {
  justify-content: center;
}
.fr-bh .txt {
  margin: 30px auto 0;
  max-width: 34em;
  text-wrap: balance;
}
.fr-bh .fr-note {
  margin-top: 14px;
  color: #c9cdd4;
}
.fr-brands .wall {
  max-width: 1606px;
  margin: 0 auto;
  padding: 0;
}
.fr-page .ttl {
  text-wrap: nowrap;
}
.fr-nogl .fr-cv {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .fr-mi,
  .fr-c.on .fr-mi {
    transition: none;
  }
  .fr-shot {
    transition: none;
  }
}
@media (max-width: 899px) {
  .fr-walk {
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  .fr-hero {
    order: -1;
    position: relative;
    height: auto;
    padding: 120px 20px 30px;
  }
  .fr-hero .ttl {
    font-size: min(8.6vw, 40px);
  }
  .fr-stage {
    position: relative;
    height: auto;
    overflow: visible;
    background: none;
    display: flex;
    flex-direction: column;
    padding: 10px 20px 20px;
    gap: 0;
    transform: none !important;
  }
  .fr-cv,
  .fr-count,
  .fr-at {
    display: none;
  }
  .fr-shots,
  .fr-cases {
    display: contents;
  }
  .fr-shot {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    opacity: 1 !important;
    width: min(100%, calc(46vh * var(--w) / var(--h)));
    margin: 48px auto 22px;
  }
  .fr-c {
    position: relative;
    visibility: visible;
    text-align: center;
  }
  .fr-mi {
    transform: none !important;
  }
  .fr-shot[data-i="0"] {
    order: 1;
  }
  .fr-c[data-i="0"] {
    order: 2;
  }
  .fr-shot[data-i="1"] {
    order: 3;
  }
  .fr-c[data-i="1"] {
    order: 4;
  }
  .fr-shot[data-i="2"] {
    order: 5;
  }
  .fr-c[data-i="2"] {
    order: 6;
  }
  .fr-shot[data-i="3"] {
    order: 7;
  }
  .fr-c[data-i="3"] {
    order: 8;
  }
  .fr-k {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .fr-k > i:nth-of-type(2) {
    display: none;
  }
  .fr-k > span:last-child {
    flex-basis: 100%;
  }
  .fr-t {
    font-size: min(7.4vw, 34px);
  }
  .fr-brands {
    padding: 90px 20px 60px;
  }
  .fr-bh .ttl {
    font-size: min(8.6vw, 40px);
  }
  .fr-page .ttl {
    text-wrap: wrap;
  }
  .fr-bh .ttl .ln,
  .fr-bh .ttl .ln-in {
    white-space: normal;
  }
}
#bw-h .ln-key {
  clip-path: inset(-.5em -3em -.56em -.14em);
  margin-bottom: .32em;
}