.medic-scroll-story{
  --story-ink:#fff;
  position:relative;
  isolation:isolate;
  min-height:290svh;
  background:#073d47;
  color:var(--story-ink);
}
.medic-scroll-story-stage{
  position:sticky;
  z-index:0;
  top:0;
  height:100svh;
  overflow:hidden;
  background-image:var(--story-image);
  background-position:center;
  background-size:cover;
}
.medic-scroll-story-stage::before{
  content:"";
  position:absolute;
  inset:-3%;
  background:inherit;
  background-position:center;
  background-size:cover;
  transform:scale(1.035);
}
.medic-scroll-story-shade{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    linear-gradient(90deg,#042f3ac7 0%,#063b4675 46%,#031f2a9e 100%),
    linear-gradient(180deg,#022d3766 0%,transparent 40%,#022a35c2 100%);
}
.medic-scroll-story-content{
  position:relative;
  z-index:2;
  margin-top:-100svh;
}
.medic-scroll-story-intro{
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-block:clamp(110px,15vh,170px) clamp(70px,10vh,110px);
}
.medic-scroll-story-intro-copy{
  max-width:820px;
  text-shadow:0 3px 22px #001d28a3;
}
.medic-scroll-story .eyebrow,
.medic-scroll-story-intro p,
.medic-scroll-story-card p{color:#e5f6f8}
.medic-scroll-story-intro h2{
  max-width:850px;
  margin:8px 0 18px;
  color:#fff;
  font-size:clamp(42px,6vw,82px);
  line-height:1.02;
}
.medic-scroll-story-intro-copy>p:not(.eyebrow){
  max-width:620px;
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.7;
}
.medic-scroll-story-cue{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.medic-scroll-story-cue b{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid #ffffff70;
  border-radius:50%;
  animation:medic-story-cue 1.8s ease-in-out infinite;
}
.medic-scroll-story-steps{padding-bottom:8svh}
.medic-scroll-story-step{
  min-height:62svh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.medic-scroll-story-step:nth-child(even){justify-content:flex-start}
.medic-scroll-story-card{
  width:min(520px,48vw);
  padding:clamp(28px,4vw,52px);
  border:1px solid #ffffff4a;
  border-radius:28px;
  background:#073c48c9;
  box-shadow:0 30px 90px #001b2870;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}
.medic-scroll-story-card>span{
  display:block;
  margin-bottom:16px;
  color:#7ee0e8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.medic-scroll-story-card h3{
  margin:0 0 16px;
  color:#fff;
  font-size:clamp(28px,3.4vw,48px);
  line-height:1.12;
}
.medic-scroll-story-card p{margin:0 0 26px;line-height:1.75}
.medic-scroll-story-card .button-white{border-color:#fff;background:#fff;color:#075b69}
@keyframes medic-story-cue{50%{transform:translateY(7px)}}
@supports (animation-timeline:view()){
  .medic-scroll-story-step{
    animation:medic-story-step linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 46%;
  }
  @keyframes medic-story-step{
    from{opacity:.18;transform:translateY(90px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
}
@media(max-width:700px){
  .medic-scroll-story{min-height:285dvh}
  .medic-scroll-story-stage{height:100dvh;background-position:58% center}
  .medic-scroll-story-stage::before{background-position:58% center}
  .medic-scroll-story-content{margin-top:-100dvh}
  .medic-scroll-story-intro{min-height:100dvh;padding-block:110px 62px}
  .medic-scroll-story-intro h2{font-size:clamp(38px,12vw,58px)}
  .medic-scroll-story-intro-copy>p:not(.eyebrow){font-size:15px}
  .medic-scroll-story-steps{padding-bottom:6dvh}
  .medic-scroll-story-step,
  .medic-scroll-story-step:nth-child(even){min-height:60dvh;justify-content:center}
  .medic-scroll-story-card{width:100%;padding:28px 24px;border-radius:22px}
  .medic-scroll-story-card h3{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .medic-scroll-story-cue b{animation:none}
  .medic-scroll-story-step{animation:none!important}
}
.medic-scroll-story--about{min-height:390svh}
.medic-scroll-story--about .medic-scroll-story-intro h2{max-width:950px}
.medic-scroll-story--about .medic-scroll-story-step{min-height:clamp(480px,52svh,620px)}
.medic-scroll-story--about .medic-scroll-story-card{background:#073c48db}
@media(max-width:700px){
  .medic-scroll-story--about{min-height:430dvh}
  .medic-scroll-story--about .medic-scroll-story-step{min-height:58dvh}
}