/* =========================================================
   HOW IT WORKS: FOLLOW-MORPH ACCORDION
   Steps sit in an accordion on the left. The step image sits on
   the right, slides down to line up with the open step and morphs
   in (scale + corner radius) as it changes. Under 760px the image
   moves inside the open step instead. Built by steps-accordion.js
   from the existing .roi-path markup, which stays as the no-JS
   fallback.
   ========================================================= */
.sacc{
  --sacc-ease:cubic-bezier(.22,1,.36,1);
  --sacc-spring:cubic-bezier(.2,.9,.25,1.04);
  --sacc-dur:.7s;
  --sacc-gap:6px;
  --sacc-pad:28px;
  --sacc-badge:36px;
  position:relative;max-width:var(--max,1200px);margin:8px auto 0;
  display:flex;align-items:flex-start;gap:72px;text-align:left
}
.sacc-list{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sacc-gap)}
.sacc-item{position:relative;overflow:hidden;border-radius:6px;background:transparent;transition:background-color .3s ease}
/* Auto-advance progress, along the bottom of the open step */
.sacc-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink,#14110D);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.sacc-item.is-timing .sacc-prog{opacity:.85;animation:saccProg var(--sacc-auto,6s) linear forwards}
@keyframes saccProg{to{transform:scaleX(1)}}
.sacc-item:hover{background:rgba(20,17,13,.03)}
.sacc-item.is-open{background:rgba(20,17,13,.045)}
.sacc-h{margin:0;font:inherit}
.sacc-btn{all:unset;box-sizing:border-box;width:100%;min-height:76px;display:flex;align-items:center;gap:20px;
  padding:22px var(--sacc-pad);cursor:pointer;color:var(--ink,#14110D);border-radius:6px}
.sacc-btn:focus-visible{outline:2px solid var(--accent,#1F3A5F);outline-offset:2px}
.sacc-badge{flex-shrink:0;width:var(--sacc-badge);height:var(--sacc-badge);border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  background:rgba(20,17,13,.06);color:var(--ink,#14110D);transition:background-color .3s ease,color .3s ease}
.sacc-item.is-open .sacc-badge{background:var(--ink,#14110D);color:#fff}
.sacc-title{flex:1 1 auto;min-width:0;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.sacc-icon{flex-shrink:0;width:20px;height:20px;transition:transform var(--sacc-dur) var(--sacc-spring)}
.sacc-item.is-open .sacc-icon{transform:rotate(180deg)}
.sacc-panel{height:0;overflow:hidden;transition:height var(--sacc-dur) var(--sacc-ease)}
.sacc-inner{padding:0 var(--sacc-pad) var(--sacc-pad) calc(var(--sacc-pad) + var(--sacc-badge) + 20px);display:flex;flex-direction:column;gap:16px}
.sacc-inner p{margin:0;max-width:560px;color:var(--soft,rgba(20,17,13,.74));font-size:15px;line-height:1.65}

/* Image column (desktop) */
.sacc-visual{position:relative;width:46%;flex-shrink:0;align-self:stretch}
.sacc-track{position:absolute;left:0;right:0;top:0;transition:transform var(--sacc-dur) var(--sacc-spring);will-change:transform}
.sacc-card{position:absolute;inset:0;overflow:hidden;background:#F5F3F0;
  opacity:0;transform:scale(.86);border-radius:50%;z-index:1;
  transition:opacity var(--sacc-dur) var(--sacc-ease),transform var(--sacc-dur) var(--sacc-spring),border-radius var(--sacc-dur) var(--sacc-ease)}
.sacc-card.is-active{opacity:1;transform:none;border-radius:6px;z-index:2}
.sacc-card img,.sacc-mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Image inside the open step (stacked) */
.sacc-mimg{display:none;position:relative;width:100%;aspect-ratio:1400/788;border-radius:6px;overflow:hidden;background:#F5F3F0;
  opacity:0;transform:scale(.9);transition:opacity var(--sacc-dur) var(--sacc-ease),transform var(--sacc-dur) var(--sacc-spring)}
.sacc-item.is-open .sacc-mimg{opacity:1;transform:none}

.sacc.is-stacked{display:block}
.sacc.is-stacked .sacc-visual{display:none}
.sacc.is-stacked .sacc-mimg{display:block}
.sacc.is-stacked{--sacc-pad:18px;--sacc-badge:30px}
.sacc.is-stacked .sacc-btn{min-height:60px;gap:14px;padding:14px var(--sacc-pad)}
.sacc.is-stacked .sacc-inner{padding-left:var(--sacc-pad)}
.sacc.is-stacked .sacc-title{font-size:20px}
@media (max-width:1100px){.sacc{gap:48px}.sacc-title{font-size:22px}}

@media (prefers-reduced-motion:reduce){
  .sacc *,.sacc{transition:none !important}
}