/* ===== shared ===== */
.rab-tl{ --rab-stagger:0.08; max-width: 1120px; margin:0 auto; }
.rab-tl [data-rab-item="1"]{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.rab-tl [data-rab-item="1"].is-in{ opacity:1; transform: translateY(0); }

/* =========================================================
 1) Minimal Vertical (square)
========================================================= */
.rab-tl--min{ padding: 10px 12px; position:relative; }
.rab-min__item{ display:grid; grid-template-columns: 26px 54px 1fr; gap:18px; padding:24px 0; }
.rab-min__rail{ position:relative; }
.rab-min__rail::before{ content:""; position:absolute; left:11px; top:0; bottom:0; width:1px; background:#CFC7BB; }
.rab-min__rail::after{ content:""; position:absolute; left:11px; top:0; width:1px; height:0%; background:#0B0B0C; opacity:.55; transition: height 1.2s ease; }
.rab-min__item.is-in .rab-min__rail::after{ height:100%; }
.rab-min__node{ width:8px; height:8px; background:#0B0B0C; display:inline-block; margin-left:7px; margin-top:2px; }
.rab-min__num{ font: italic 16px/1 Georgia, serif; letter-spacing:.08em; color:#C9C1B6; }
.rab-min__title{ font: 700 34px/1.05 Georgia, serif; margin:0; color:#0B0B0C; }
.rab-min__desc{ margin-top:10px; font: 400 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; opacity:.85; }

/* =========================================================
 2) Circle Vertical (hover fill)
========================================================= */
.rab-tl--circle{ padding: 10px 12px; }
.rab-cv__item{ display:grid; grid-template-columns: 54px 1fr; gap:26px; padding:26px 0; position:relative; }
.rab-cv__rail{ position:relative; }
.rab-cv__rail::before{ content:""; position:absolute; left:26px; top:0; bottom:0; width:1px; background:#DCD8D2; }
.rab-cv__circle{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid #111; background:transparent;
  display:flex; align-items:center; justify-content:center;
  position:relative; left:4px; top:2px;
  transition: transform .35s ease, background-size .35s ease, box-shadow .35s ease, color .35s ease;
  background: linear-gradient(#111,#111) no-repeat center/0% 0%;
}
.rab-cv__circle::before{ content: attr(data-step); font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#111; letter-spacing:.06em; }
.rab-cv__item:hover .rab-cv__circle{
  background-size:100% 100%;
  transform: scale(1.07);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.rab-cv__item:hover .rab-cv__circle::before{ color:#fff; }

.rab-cv__label{ font: 600 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.28em; color:#C9C1B6; text-transform:uppercase; margin-bottom:10px; }
.rab-cv__title{ font: 700 34px/1.05 Georgia, serif; margin:0; color:#0B0B0C; }
.rab-cv__desc{ margin-top:10px; font: 400 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial; opacity:.85; }
.rab-cv__item{ transition: transform .35s ease; }
.rab-cv__item:hover{ transform: translateX(12px); }

/* =========================================================
 3) Horizontal Steps
========================================================= */
.rab-tl--steps{ padding: 30px 12px 10px; position:relative; }
.rab-hs__track{
  position:absolute; left:12px; right:12px; top:50px;
  height:1px; background:#DCD8D2;
}
.rab-hs__wrap{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 26px;
  align-items:start;
}
.rab-hs__item{ text-align:center; }
.rab-hs__dot{
  width:58px; height:58px; border-radius:50%;
  margin:0 auto 18px auto;
  border:1px solid #DCD8D2;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  transition: transform .3s ease, background-size .35s ease;
  background: linear-gradient(#111,#111) no-repeat center/0% 0%;
}
.rab-hs__num{ font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#111; letter-spacing:.08em; }
.rab-hs__title{
  font: 700 14px/1.25 Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:#111;
}
.rab-hs__item:hover .rab-hs__dot{ background-size:100% 100%; transform: translateY(-2px); }
.rab-hs__item:hover .rab-hs__num{ color:#fff; }

@media (max-width: 1024px){
  .rab-hs__wrap{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
  .rab-hs__track{ display:none; }
}
@media (max-width: 767px){
  .rab-hs__wrap{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
  .rab-hs__dot{ width:52px; height:52px; margin-bottom:14px; }
}

/* =========================================================
 4) Belief Alternating (center line)
========================================================= */
.rab-tl--belief{ padding: 30px 12px; position:relative; }
.rab-bf__line{
  position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:#DCD8D2;
  transform: translateX(-50%);
}
.rab-bf__item{
  position:relative;
  padding: 56px 0;
  min-height: 160px;
}
.rab-bf__node{
  position:absolute;
  left:50%;
  top: 34px;
  transform: translateX(-50%);
  width:38px; height:38px; border-radius:50%;
  background:#111;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.rab-bf__node span{
  color:#fff;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.rab-bf__tag{
  position:absolute;
  top: 34px;
  font: 600 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.28em;
  color:#C9C1B6;
  text-transform:uppercase;
}
.rab-bf__quote{
  font: italic 700 54px/1.05 Georgia, serif;
  color:#111;
  max-width: 520px;
}
.rab-bf__item--left .rab-bf__tag{ left: calc(50% - 270px); transform: translateX(-100%); }
.rab-bf__item--left .rab-bf__quote{ margin-left: 0; padding-right: calc(50% + 70px); }
.rab-bf__item--right .rab-bf__tag{ left: calc(50% + 270px); }
.rab-bf__item--right .rab-bf__quote{ margin-left: auto; padding-left: calc(50% + 70px); }

@media (max-width: 1024px){
  .rab-bf__quote{ font-size: 42px; }
  .rab-bf__item--left .rab-bf__quote,
  .rab-bf__item--right .rab-bf__quote{
    padding-left: 0;
    padding-right: 0;
    max-width: 700px;
  }
  .rab-bf__tag{ left:50% !important; transform: translateX(-50%) !important; }
}
@media (max-width: 767px){
  .rab-bf__line{ left: 18px; transform:none; }
  .rab-bf__node{ left:18px; transform:none; }
  .rab-bf__tag{ left:56px !important; transform:none !important; }
  .rab-bf__quote{ font-size: 30px; padding-left: 56px !important; }
}