/* ===========================================================
   Borromeo Timeline — front-end
   =========================================================== */
.btl{
  --btl-line-start:#2550e0; --btl-line-end:#c9962f;
  --btl-navy:#0a132b; --btl-ink:#3a4453; --btl-ink-soft:#5b6473;
  --btl-blue:#2550e0; --btl-gold:#c9962f; --btl-line-bg:#e7eaf1; --btl-card:#fff;
  --btl-serif:'Cormorant',Georgia,serif; --btl-sans:'Inter',-apple-system,Helvetica,Arial,sans-serif;
  --btl-dot:64px;
  font-family:var(--btl-sans);color:var(--btl-ink);max-width:880px;margin:0 auto;padding:24px 0;box-sizing:border-box;
}
.btl *,.btl *::before,.btl *::after{box-sizing:border-box}

.btl-head{margin:0 0 30px;max-width:640px}
.btl-eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--btl-gold);margin:0 0 14px}
.btl-heading{font-family:var(--btl-serif);font-weight:700;color:var(--btl-navy);font-size:clamp(32px,4.2vw,50px);line-height:1.08;margin:0 0 12px}
.btl-sub{font-size:19px;color:var(--btl-ink-soft);margin:0;line-height:1.6}

/* Track + animated line --------------------------------------------- */
.btl-track{position:relative;padding-left:6px}
.btl-line,.btl-progress{position:absolute;left:calc(var(--btl-dot)/2 + 6px - 1px);top:calc(var(--btl-dot)/2);bottom:calc(var(--btl-dot)/2);width:3px;border-radius:3px}
.btl-line{background:var(--btl-line-bg)}
.btl-progress{height:0;bottom:auto;background:linear-gradient(var(--btl-line-start),var(--btl-line-end));transition:height .15s linear;will-change:height}

/* Steps ------------------------------------------------------------- */
.btl-step{position:relative;display:flex;gap:26px;padding:18px 0}
.btl-dot{position:relative;z-index:2;flex:none;width:var(--btl-dot);height:var(--btl-dot);border-radius:50%;
  background:#fff;border:2px solid var(--btl-line-bg);display:flex;align-items:center;justify-content:center;
  font-family:var(--btl-serif);font-weight:700;font-size:26px;color:var(--btl-blue);
  box-shadow:0 6px 18px rgba(10,19,43,.06);transition:border-color .3s ease,background .3s ease,color .3s ease,transform .3s ease}
.btl-marker{line-height:1}
.btl-marker-dot .btl-dot{font-size:0}
.btl-marker-dot .btl-marker{width:14px;height:14px;border-radius:50%;background:currentColor;display:block}

.btl-card{flex:1;background:var(--btl-card);border:1px solid var(--btl-line-bg);border-radius:14px;padding:22px 26px}
.btl-title{font-family:var(--btl-serif);font-weight:700;font-size:25px;color:var(--btl-navy);margin:0 0 6px;line-height:1.2}
.btl-desc{margin:0;color:var(--btl-ink);font-size:16.5px;line-height:1.6}
.btl-detail{margin-top:12px;border-top:1px dashed var(--btl-line-bg);padding-top:12px;font-size:14.5px;color:var(--btl-ink-soft);line-height:1.55}
.btl-detail-label{display:block;color:var(--btl-gold);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px}

/* Active (line has reached this dot) */
.btl-step.is-active .btl-dot{border-color:var(--btl-blue);background:var(--btl-blue);color:#fff;transform:scale(1.06)}
.btl-marker-dot .btl-step.is-active .btl-marker{background:#fff}

/* Reveal animations (only hide initially when JS is active, so content is
   never invisible without JavaScript). */
.btl-js.btl-anim-fade-up .btl-step,
.btl-js.btl-anim-fade .btl-step,
.btl-js.btl-anim-slide .btl-step{opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.btl-js.btl-anim-fade-up .btl-step{transform:translateY(30px)}
.btl-js.btl-anim-slide .btl-step{transform:translateX(40px)}
.btl-step.is-visible{opacity:1!important;transform:none!important}

/* Centered / alternating layout ------------------------------------- */
@media(min-width:781px){
  .btl-layout-center .btl-track{padding-left:0}
  .btl-layout-center .btl-line,
  .btl-layout-center .btl-progress{left:50%;transform:translateX(-50%)}
  .btl-layout-center .btl-step{justify-content:flex-start;width:50%;padding-right:46px}
  .btl-layout-center .btl-step .btl-dot{position:absolute;right:calc(-1 * var(--btl-dot)/2);left:auto}
  .btl-layout-center .btl-step:nth-child(even){margin-left:50%;flex-direction:row-reverse;padding-right:0;padding-left:46px}
  .btl-layout-center .btl-step:nth-child(even) .btl-dot{right:auto;left:calc(-1 * var(--btl-dot)/2)}
  .btl-js.btl-layout-center.btl-anim-slide .btl-step{transform:translateX(-40px)}
  .btl-js.btl-layout-center.btl-anim-slide .btl-step:nth-child(even){transform:translateX(40px)}
}

.btl-empty{padding:14px 18px;background:#fff7e6;border:1px solid #e8d18a;border-radius:8px;color:#7a5b00}

@media(max-width:780px){
  .btl{--btl-dot:54px}
  .btl-step{gap:18px}
  .btl-dot{font-size:22px}
  .btl-title{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
  .btl-anim-fade-up .btl-step,.btl-anim-fade .btl-step,.btl-anim-slide .btl-step{opacity:1;transform:none;transition:none}
  .btl-progress{transition:none}
}