.scroll-feature{
  --sf-ink:#28374f;
  --sf-ink-dim:#9aa7b8;
  --sf-sub:#7c8ba0;
  --sf-line-track:rgba(40,55,79,.22);
  --sf-panel-radius:30px;
  --sf-font-display: ivyjournal, serif;
  --sf-font-body: kyrial-sans-pro, sans-serif;

  color:var(--sf-ink);
  font-family:var(--sf-font-body);
}
.scroll-feature *,
.scroll-feature *::before,
.scroll-feature *::after{ box-sizing:border-box; }

/* ====================== SHARED TEXT STYLES ====================== */
.scroll-feature__title{
  font-family:var(--sf-font-display);
  font-weight:500;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem);
  line-height:1.25;
  margin:0 0 8px;
  color:var(--sf-ink-dim);
  transition:color .8s ease;
}
.scroll-feature__desc{
  font-family:var(--sf-font-body);
  font-weight:300;
  font-size:22px;
  line-height:1.5;
  color:var(--sf-ink-dim);
  margin:0;
  transition:color .8s ease;
}
.scroll-feature__item{
  padding:12px 60px 18px 0;
}

/* ====================== DESKTOP: PINNED / SCROLL-DRIVEN ====================== */
.scroll-feature__desktop{ display:none; }

@media (min-width:740px){
  .scroll-feature__accordion{ display:none !important; }

  .scroll-feature__scroll-region{
    position:relative;
    /* height is set inline via JS based on the "Scroll Length per Tab" setting */
  }

  .scroll-feature__pin{
    position:sticky;
    top:0;
    min-height:100vh;
    display:flex;
    align-items:center;
  }

  .scroll-feature__desktop{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 40px;
  }

  .scroll-feature__text-col{
    position:relative;
    padding-left:56px;
  }

  .scroll-feature__line{
    position:absolute;
    top:6px;
    left:0;
    width:24px;
    height:calc(100% - 12px);
  }
  .scroll-feature__line-track{ stroke:var(--sf-line-track); stroke-width:2; fill:none; }
  .scroll-feature__line-fill{
    stroke:var(--sf-ink);
    stroke-width:2;
    fill:none;
    transition:stroke-dashoffset .9s ease;
  }
  .scroll-feature__line-dot{
    fill:var(--sf-ink);
    transition:cx .9s ease, cy .9s ease;
  }

  .scroll-feature__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:76vh;
    max-height:600px;
  }
  .scroll-feature__item{ cursor:pointer; }
  .scroll-feature__item.is-active .scroll-feature__title{ color:var(--sf-ink); }
  .scroll-feature__item.is-active .scroll-feature__desc{ color:var(--sf-ink); }

  .scroll-feature__image-col{ display:flex; align-items:center; }
  .scroll-feature__viewer{
    position:relative;
    width:100%;
    height:100%;
    max-height:480px;
    border-radius:var(--sf-panel-radius);
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(40,55,79,.25);
  }
  .scroll-feature__viewer img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .9s ease;
  }
  .scroll-feature__viewer img.is-active{ opacity:1; }
}

/* ====================== MOBILE ACCORDION (click) ====================== */
.scroll-feature__accordion{
  list-style:none;
  margin:0;
  padding:24px 0;
  box-shadow:inset 0 -1px rgba(40,55,79,.3);
}
.scroll-feature__acc-item{ box-shadow:inset 0 1px rgba(40,55,79,.3); }
.scroll-feature__acc-btn{
  all:unset;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
  cursor:pointer;
  padding:18px 4px 22px 0;
  box-sizing:border-box;
}
.scroll-feature__acc-btn-text{ flex:1 1 auto; }
.scroll-feature__acc-btn .scroll-feature__title{ color:var(--sf-ink); }
.scroll-feature__acc-btn .scroll-feature__desc{ opacity:1; }

.scroll-feature__acc-icon{
  flex:0 0 auto;
  position:relative;
  width:20px;
  height:20px;
  margin-top:10px;
}
.scroll-feature__acc-icon::before,
.scroll-feature__acc-icon::after{
  content:"";
  position:absolute;
  background:var(--sf-ink);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.scroll-feature__acc-icon::before{ width:16px; height:2px; }
.scroll-feature__acc-icon::after{
  width:2px; height:16px;
  transition:transform .25s ease, opacity .25s ease;
}
.scroll-feature__acc-item.is-open .scroll-feature__acc-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:0;
}

.scroll-feature__acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.scroll-feature__acc-panel-inner{ padding:4px 0 24px; }
.scroll-feature__acc-panel-inner img{
  width:100%;
  height:auto;
  aspect-ratio:389/257;
  object-fit:cover;
  border-radius:24px;
  display:block;
}