/* =====================================================================
   sbr/process-steps — dark full-bleed band; 3 variants: timeline / split / dashed.
   Mobile-first. CWV-safe motion (opacity+transform / GPU scaleY only).
   Distinct from services-grid: dark bg · solid glowing nodes · connected flow.
   ===================================================================== */
.sbr-proc{--panel:#242019;--ease:cubic-bezier(.2,.7,.2,1);
  position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  background:var(--ink);color:var(--on-dark);padding:84px 0;overflow:hidden}
.sbr-proc--split{background:var(--brand-deep)}
.sbr-proc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sbr-proc__wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}
.sbr-proc--timeline .sbr-proc__wrap{max-width:760px}

/* amber depth glow */
.sbr-proc--timeline::after,.sbr-proc--dashed::after{content:"";position:absolute;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(circle,rgba(224,162,60,.14),transparent 62%)}
.sbr-proc--timeline::after{top:-10%;inset-inline-start:-10%}
.sbr-proc--dashed::after{bottom:-12%;inset-inline-end:-8%}

/* header */
.sbr-proc__head{margin-bottom:52px}
.sbr-proc__kicker{color:var(--accent)}
.sbr-proc__title{font-size:clamp(30px,7.4vw,40px);font-weight:800;line-height:1.12;letter-spacing:.005em;margin:16px 0 14px;color:var(--on-dark)}
.sbr-proc__title em{font-style:normal;color:var(--accent)}
.sbr-proc__sub{font-size:16.5px;line-height:1.65;color:var(--on-dark-soft);margin:0;max-width:46ch}
.sbr-proc__h3{font-size:19px;font-weight:700;margin:0 0 7px;color:var(--on-dark)}
.sbr-proc__p{font-size:15px;line-height:1.65;color:var(--on-dark-soft);margin:0}
.sbr-proc__arw{width:18px;height:18px;flex:0 0 auto;transition:transform .25s var(--ease)}
.sbr-proc .sbr-btn:hover .sbr-proc__arw{transform:translateX(-5px)}

/* scroll-reveal (CWV-safe) */
.sbr-proc__reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.sbr-proc__reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.sbr-proc__reveal{opacity:1;transform:none;transition:none}}

/* ---- TIMELINE (B): vertical, GPU scaleY fill, glowing nodes ----
   Stacking model: isolate the list so the ::before track and ::after
   fill bar live in a sealed stacking context. lstep has z-index:1 (above
   the pseudos), node has z-index:2 — so the amber line is ALWAYS
   behind the numbered circles. Without isolation the ::after's
   transform-created stacking context would inadvertently render the
   bar above unpositioned siblings in some browser repaint cycles. */
.sbr-proc__list{list-style:none;margin:0;padding:0;position:relative;isolation:isolate}
.sbr-proc__list::before{content:"";position:absolute;inset-inline-start:27px;top:14px;bottom:14px;width:3px;border-radius:3px;background:rgba(255,255,255,.10);z-index:0}
.sbr-proc__list::after{content:"";position:absolute;inset-inline-start:27px;top:14px;height:calc(100% - 28px);width:3px;border-radius:3px;
  background:linear-gradient(var(--accent),var(--accent-strong));transform:scaleY(var(--fill,0));transform-origin:top;box-shadow:0 0 16px rgba(224,162,60,.5);z-index:0;
  /* Animate the bar smoothly from 0 to JS-set value on init (no snap
     between the default 0 and the calculated fill) */
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sbr-proc__lstep{position:relative;display:grid;grid-template-columns:58px 1fr;gap:22px;padding-bottom:46px;z-index:1}
.sbr-proc__lstep:last-child{padding-bottom:0}
.sbr-proc__node{position:relative;width:58px;height:58px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--on-dark-mute);z-index:2;transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.sbr-proc__lstep.is-active .sbr-proc__node{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 6px rgba(224,162,60,.14),0 0 26px rgba(224,162,60,.45)}
.sbr-proc__lstep .sbr-proc__b{padding-top:8px}

/* INITIAL-STATE SUPPRESSION — view.js adds .no-anim to the list and to
   any lstep already in the viewport on page load, then removes it one
   frame later. While present, ALL animatable properties snap instantly
   instead of transitioning — so a mid-section refresh lands the user
   at the final state with zero visible motion (no fill-bar growing,
   no node-glow fading in, no reveal slide-up). Natural scrolling
   afterwards still animates normally. */
.sbr-proc__list.no-anim::after,
.sbr-proc__list.no-anim .sbr-proc__node,
.sbr-proc__lstep.no-anim .sbr-proc__node,
.sbr-proc__reveal.no-anim{transition:none !important}

/* ---- SPLIT (C): steps panel + photo + CTA ---- */
.sbr-proc__card{position:relative;display:grid;grid-template-columns:1fr;border-radius:24px;overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.06);box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.sbr-proc__media{position:relative;min-height:230px}
.sbr-proc__img{display:block;width:100%;height:100%;object-fit:cover}
.sbr-proc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(16,14,11,.55))}
.sbr-proc__panel{padding:38px 28px}
.sbr-proc__msteps{list-style:none;margin:0 0 28px;padding:0}
.sbr-proc__mstep{display:grid;grid-template-columns:46px 1fr;gap:16px;padding-bottom:26px;position:relative}
.sbr-proc__mstep:not(:last-child)::before{content:"";position:absolute;inset-inline-start:22px;top:46px;bottom:2px;width:2px;background:linear-gradient(rgba(224,162,60,.5),rgba(224,162,60,.12))}
.sbr-proc__mstep:last-child{padding-bottom:0}
.sbr-proc__mn{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:17px;display:grid;place-items:center;z-index:1;box-shadow:0 0 22px rgba(224,162,60,.3)}
.sbr-proc__cta{margin-top:0}

/* ---- DASHED (D): icon badges on a dashed connector ---- */
.sbr-proc__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.sbr-proc__step{position:relative;display:grid;grid-template-columns:78px 1fr;gap:20px;padding-bottom:38px;align-items:start}
.sbr-proc__step:last-child{padding-bottom:0}
.sbr-proc__step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:38px;top:78px;bottom:-4px;border-inline-start:2px dashed rgba(224,162,60,.38)}
.sbr-proc__ico{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(224,162,60,.2),rgba(224,162,60,.06));border:1px solid rgba(224,162,60,.28);display:grid;place-items:center;color:var(--accent);z-index:1;box-shadow:0 0 28px -6px rgba(224,162,60,.35)}
.sbr-proc__ico svg{width:32px;height:32px}
.sbr-proc__step .sbr-proc__b{padding-top:16px}

/* ===================== DESKTOP ===================== */
@media(min-width:820px){
  .sbr-proc{padding:132px 0}
  .sbr-proc__wrap{padding:0 56px}
  .sbr-proc__head{margin-bottom:78px}
  .sbr-proc__title{font-size:clamp(36px,3.2vw,50px)}
  .sbr-proc__sub{font-size:18.5px}

  .sbr-proc__lstep{padding-bottom:56px}

  .sbr-proc__card{grid-template-columns:1.05fr 1fr}
  .sbr-proc__panel{padding:54px 46px}
  .sbr-proc__media{min-height:auto}

  .sbr-proc--dashed .sbr-proc__head{margin-inline:auto;text-align:center;max-width:660px}
  .sbr-proc--dashed .sbr-proc__kicker{justify-content:center}
  .sbr-proc--dashed .sbr-proc__sub{margin-inline:auto}
  .sbr-proc__steps{grid-template-columns:repeat(4,1fr);gap:34px;position:relative}
  .sbr-proc__steps::before{content:"";position:absolute;top:39px;inset-inline:12%;border-top:2px dashed rgba(224,162,60,.38)}
  .sbr-proc__step{display:block;padding-bottom:0;text-align:center}
  .sbr-proc__step:not(:last-child)::before{display:none}
  .sbr-proc__ico{margin:0 auto 26px}
  .sbr-proc__step .sbr-proc__b{padding-top:0}
}