.about {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:1024px;
  background:var(--paper)
}
.about__visual {
  position:relative;
  min-width:0;
  overflow:clip
}
.about__photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .65s ease,transform 1s var(--ease)
}
.about__photo.is-switching {
  opacity:0;
  transform:scale(1.025)
}
.about__intro {
  position:relative;
  z-index:1;
  color:var(--paper);
  padding:80px 55px 0 var(--gutter)
}
.about__intro h2 {
  font-size:36px;
  line-height:1.28;
  margin-top:12px;
  max-width:525px
}
.about__summary {
  font-size:16px;
  line-height:1.28;
  color:var(--muted);
  margin-top:12px;
  font-weight:600;
  max-width:574px
}
.about__steps {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:44px;
  padding:100px var(--gutter) 100px 80px;
  min-width:0
}
.process-step h3 {
  font-size:24px;
  line-height:1.35;
  margin-bottom:16px
}
.process-step h3 span {
  color:var(--red)
}
.process-step div {
  font-size:18px;
  line-height:1.35;
  text-align:justify
}
.process-step {
  transition:opacity .6s ease,transform .7s var(--ease)
}
/* A sticky stage consumes the scroll distance while the three steps unfold. */
.about-scroll {
  position:relative;
  height:calc(100svh + 1400px)
}
.about-scroll .about {
  position:sticky;
  top:0;
  height:100svh;
  min-height:650px;
  max-height:1024px
}
.about-scroll .about__steps {
  padding-top:clamp(50px,9.7vh,100px);
  padding-bottom:clamp(50px,9.7vh,100px);
  gap:24px
}
.about-scroll .process-step {
  opacity:0;
  transform:translateY(24px);
  pointer-events:none
}
.about-scroll .process-step.is-revealed {
  opacity:1;
  transform:none;
  pointer-events:auto
}
.about-scroll .process-step.is-current h3 {
  color:var(--red)
}
@media(max-width:1199px) and (min-width:768px) {
  .about__intro {
    padding-right:30px
  }
  .about__intro h2 {
    font-size:30px
  }
  .about__steps {
    padding-left:35px
  }
  .process-step h3 {
    font-size:21px
  }
  .process-step div {
    font-size:16px
  }
  .about-scroll .about {
    min-height:600px
  }
}
@media(max-width:767px) {
  .about {
    display:block;
    min-height:580px;
    padding-top:24px;
    padding-bottom:24px;
    overflow:clip
  }
  .about__visual {
    position:static;
    overflow:visible
  }
  .about__photo {
    z-index:0
  }
  .about__intro {
    padding:20px;
    min-height:242px
  }
  .about__intro h2 {
    font-size:30px;
    line-height:1.15;
    margin-top:16px
  }
  .about__summary {
    font-size:14px;
    line-height:1.5;
    font-weight:400;
    color:var(--paper);
    margin-top:16px
  }
  .about__steps {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:row;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:20px 20px 12px;
    justify-content:flex-start
  }
  .about__steps::-webkit-scrollbar {
    display:none
  }
  .process-step {
    flex:0 0 calc(100vw - 40px);
    width:350px;
    max-width:500px;
    border-radius:24px;
    padding:12px;
    background:#d3cdc4ed;
    scroll-snap-align:center;
    min-height:256px
  }
  .process-step h3 {
    font-size:21px;
    line-height:1.25;
    margin-bottom:14px
  }
  .process-step div {
    font-size:16px;
    line-height:1.5;
    text-align:left
  }
  .about-scroll {
    height:calc(100svh + 900px)
  }
  .about-scroll .about {
    height:100svh;
    min-height:580px;
    max-height:none;
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  .about-scroll .about__steps {
    padding:20px 20px 12px;
    gap:10px;
    scroll-snap-type:x mandatory;
    overflow-x:auto;
    min-height:288px
  }
  .about-scroll .process-step {
    opacity:1;
    transform:none;
    pointer-events:auto
  }
  .about-scroll .process-step.is-current h3 {
    color:var(--ink)
  }
}
@media(prefers-reduced-motion:reduce) {
  .about-scroll {
    height:auto
  }
  .about-scroll .about {
    position:relative;
    min-height:1024px;
    height:auto;
    max-height:none
  }
  .about-scroll .process-step {
    opacity:1;
    transform:none;
    pointer-events:auto
  }
  @media(max-width:767px) {
    .about-scroll .about {
      min-height:580px
    }
  }
}
@media(min-width:768px) and (max-height:850px) {
  .about-scroll .about {
    min-height:0
  }
  .about-scroll .about__steps {
    padding-block:36px;
    gap:20px
  }
  .about-scroll .process-step h3 {
    font-size:21px;
    margin-bottom:12px
  }
  .about-scroll .process-step div {
    font-size:16px;
    line-height:1.35
  }
  .about-scroll .about__intro {
    padding-top:50px
  }
  .about-scroll .about__intro h2 {
    font-size:32px
  }
  .about-scroll .about__summary {
    font-size:14px
  }
}
@media(min-width:768px) and (max-height:680px) {
  .about-scroll .about__steps {
    padding-block:24px;
    gap:16px
  }
  .about-scroll .process-step h3 {
    font-size:19px;
    margin-bottom:10px
  }
  .about-scroll .process-step div {
    font-size:14px
  }
  .about-scroll .about__intro h2 {
    font-size:28px
  }
}