#load {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--gut)
}

#load .bars {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: -1
}

#load .bars i {
  flex: 1;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom
}

#load .cnt {
  font-variation-settings: 'wdth' 120, 'wght' 700;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: .8;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums
}

#load .lb {
  font-size: .8rem;
  font-variation-settings: 'wdth' 80, 'wght' 500;
  opacity: .6;
  padding-bottom: .6em
}

#load .track {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: calc(var(--gut) + clamp(3rem, 11vw, 9rem) + 28px);
  height: 1px;
  background: var(--line)
}

#load .track i {
  display: block;
  height: 100%;
  background: var(--ink);
  width: 0
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(var(--gut)*1.1);
  padding-top: 26vh;
  position: relative;
  overflow: hidden
}

.hero .mesh {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .55
}

.hero-art {
  position: absolute;
  right: calc(var(--gut)*-1);
  top: 8vh;
  width: min(46vw, 620px);
  color: var(--blue);
  opacity: .16;
  z-index: 0
}

.hero-art svg {
  overflow: visible
}

.hero h1 {
  position: relative;
  z-index: 2
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gut);
  align-items: end;
  margin-top: clamp(28px, 4.5vw, 58px);
  position: relative;
  z-index: 2
}

.scrollcue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-variation-settings: 'wdth' 82, 'wght' 500
}

.scrollcue b {
  display: block;
  width: var(--u);
  height: var(--u);
  background: var(--blue);
  animation: bob 2.2s infinite var(--ease)
}

@keyframes bob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(60%)
  }
}

.mq {
  overflow: hidden;
  padding-block: clamp(14px, 1.6vw, 22px);
  border-block: 1px solid var(--line);
  background: var(--paper)
}

.inv .mq {
  border-color: var(--line-inv);
  background: transparent
}

.mq-t {
  display: flex;
  width: max-content;
  will-change: transform
}

.mq-t span {
  font-variation-settings: 'wdth' 116, 'wght' 620;
  font-size: clamp(1.4rem, 3.4vw, 3.2rem);
  letter-spacing: -.03em;
  line-height: 1;
  padding-right: .4em;
  display: flex;
  align-items: center;
  gap: .5em
}

.mq-t span b {
  display: block;
  width: .3em;
  height: .3em;
  background: var(--blue);
  flex: none
}

.inv .mq-t span b {
  background: var(--paper)
}

.mani {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 80px)
}

@media(min-width:900px) {
  .mani {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr)
  }
}

.mani .big {
  font-size: clamp(1.7rem, 3.9vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 104, 'wght' 500;
  max-width: 19ch
}

.mani .big em {
  font-style: normal;
  color: var(--blue)
}

.mani aside {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-self: end
}

.stat {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px
}

.stat .n {
  font-variation-settings: 'wdth' 112, 'wght' 660;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums
}

.stat .t {
  font-size: .86rem;
  opacity: .66;
  text-align: right;
  max-width: 15ch
}

.srv {
  border-top: 1px solid var(--line)
}

.srv .row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: color .5s var(--ease)
}

.srv .row {
  isolation: isolate
}

.srv .row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateY(101%);
  transition: transform .6s var(--ease)
}

.srv .row:hover {
  color: var(--paper)
}

.srv .row:hover::before {
  transform: translateY(0)
}

.srv .row>* {
  position: relative
}

.srv .row:hover .idx {
  color: var(--paper)
}

.srv .row:hover p.body {
  color: rgba(242, 242, 242, .82)
}

.srv .in {
  display: grid;
  gap: 14px
}

@media(min-width:820px) {
  .srv .in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 70px);
    align-items: start
  }
}

.srv h3 {
  transition: transform .6s var(--ease)
}

.srv .row:hover h3 {
  transform: translateX(clamp(6px, 1vw, 16px))
}

.proc {
  overflow: hidden;
  background: var(--blue);
  color: var(--paper);
  z-index: 3
}

.proc-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: calc(var(--gut)*1.2) var(--gut) calc(var(--gut)*.8)
}

.ptrack {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  padding-inline: var(--gut);
  padding-bottom: calc(var(--gut)*1.4);
  width: max-content;
  will-change: transform
}

.step {
  width: min(78vw, 430px);
  border-top: 1px solid var(--line-inv);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none
}

.step .k {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  opacity: .7
}

.step .k b {
  width: 10px;
  height: 10px;
  background: var(--paper);
  display: block
}

.step h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-variation-settings: 'wdth' 110, 'wght' 600;
  letter-spacing: -.03em;
  line-height: 1
}

.step p {
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(242, 242, 242, .8);
  max-width: 40ch
}

.step .fig {
  margin-top: auto;
  aspect-ratio: 16/10;
  background: rgba(242, 242, 242, .08);
  position: relative;
  overflow: hidden
}

.step .fig i {
  position: absolute;
  background: var(--paper)
}

.quote {
  max-width: 24ch;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.032em;
  font-variation-settings: 'wdth' 104, 'wght' 500
}

.qwho {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 36px);
  font-size: .92rem
}

.qwho b {
  width: var(--u);
  height: var(--u);
  background: var(--blue);
  display: block;
  flex: none
}

.qwho span {
  opacity: .65
}

.faq {
  border-top: 1px solid var(--line)
}

.faq .q {
  border-bottom: 1px solid var(--line)
}

.faq button.qh {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  text-align: left;
  padding-block: clamp(17px, 2.1vw, 27px);
  font-size: clamp(1.02rem, 1.9vw, 1.45rem);
  letter-spacing: -.02em;
  font-variation-settings: 'wdth' 102, 'wght' 520;
  transition: color .35s
}

.faq button.qh:hover {
  color: var(--blue)
}

.faq .sign {
  width: 15px;
  height: 15px;
  position: relative;
  flex: none
}

.faq .sign::before,
.faq .sign::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--blue);
  transition: transform .45s var(--ease)
}

.faq .sign::after {
  transform: rotate(90deg)
}

.faq .q.open .sign::after {
  transform: rotate(0)
}

.faq .qb {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease)
}

.faq .q.open .qb {
  grid-template-rows: 1fr
}

.faq .qb>div {
  overflow: hidden
}

.faq .qb p {
  padding-bottom: clamp(18px, 2.2vw, 28px);
  max-width: 62ch
}

.avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  font-variation-settings: 'wdth' 86, 'wght' 500;
  opacity: .8
}

.avail b {
  width: 8px;
  height: 8px;
  background: var(--blue);
  display: block;
  animation: pulse 2.4s infinite
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

.pbar {
  display: none;
  height: 2px;
  background: var(--line-inv);
  margin: 0 var(--gut) calc(var(--gut)*1.2)
}

.pbar i {
  display: block;
  height: 100%;
  width: 22%;
  background: var(--paper)
}

@media(max-width:899px) {
  .srv .row.active {
    color: var(--paper)
  }

  .srv .row.active::before {
    transform: translateY(0)
  }

  .srv .row.active .idx {
    color: var(--paper)
  }

  .srv .row.active p.body {
    color: rgba(242, 242, 242, .82)
  }

  .pbar {
    display: block
  }

  .hero {
    padding-top: 22vh
  }

  .hero-foot {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .mani .big {
    max-width: none
  }

  .quote {
    max-width: none
  }

  #load .track {
    bottom: auto;
    top: calc(var(--gut) + 8px)
  }
}

.say {
  background: var(--paper)
}

.saystage {
  position: relative;
  z-index: 3;
  background: var(--paper);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 34px);
  padding: calc(var(--gut)*3.6) var(--gut) calc(var(--gut)*1.6)
}

.saytext {
  font-size: clamp(1.75rem, 5.4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.036em;
  font-variation-settings: 'wdth' 106, 'wght' 520;
  max-width: 19ch
}

.saytext.two {
  font-size: clamp(1.3rem, 3.4vw, 2.8rem);
  max-width: 24ch
}

.saytext .w {
  color: rgba(10, 16, 36, .15)
}

.no-gsap .saytext .w,
.rm .saytext .w {
  color: var(--ink)
}

.no-gsap .saytext.two .w,
.rm .saytext.two .w {
  color: var(--blue)
}

#load .dots {
  max-width: min(62vw, 520px);
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%)
}

#load .lword {
  display: block;
  font-size: .82rem;
  font-variation-settings: 'wdth' 80, 'wght' 500;
  opacity: .55;
  margin-top: .35em;
  min-height: 1.2em
}

#load .lb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  opacity: 1
}

.mq {
  position: relative
}

@media(max-width:720px) {}