/* Xivo — How it works, dark timeline (v3.18.0). Prefix: xvf-
   Gold line with four numbered nodes. Colors = site palette. */

.xvf{
  --xvf-blue:#3C7ABC;
  --xvf-sky:#8FBEEE;
  --xvf-gold:#D4A24C;
  --xvf-deep:#0E1929;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(80px,9vw,124px) clamp(20px,5.5vw,84px);
  background:
    radial-gradient(60% 70% at 0% 0%,rgba(60,122,188,.35),transparent 65%),
    radial-gradient(50% 60% at 100% 100%,rgba(212,162,76,.14),transparent 65%),
    var(--xvf-deep);
  color:#fff;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.xvf *,.xvf *:before,.xvf *:after{box-sizing:border-box}
.xvf-wrap{max-width:1240px;margin:0 auto}

/* header */
.xvf-head{max-width:720px;margin:0 auto clamp(56px,7vw,92px);text-align:center}
.xvf-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--xvf-sky)}
.xvf-eyebrow i{width:28px;height:1px;background:var(--xvf-gold)}
.xvf h2#xvf-title{
  margin:20px 0 0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  font-size:clamp(34px,4.2vw,54px);line-height:1.06;letter-spacing:-.02em;color:#fff;
}
.xvf h2#xvf-title em{display:block;font-style:italic;color:var(--xvf-sky)}
.xvf-head p{margin:20px auto 0;max-width:520px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.72)}

/* timeline */
.xvf-rail{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.xvf-rail:before{                       /* the line */
  content:"";position:absolute;left:28px;right:0;top:28px;height:1px;
  background:linear-gradient(90deg,var(--xvf-gold),rgba(255,255,255,.28) 60%,rgba(255,255,255,.10));
  transform-origin:left;
}
.xvf-step{position:relative;margin:0;padding:0}
.xvf-node{
  position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--xvf-deep);border:1px solid var(--xvf-gold);
  font-size:14px;font-weight:700;letter-spacing:.05em;color:#fff;
}
.xvf-step:first-child .xvf-node{background:var(--xvf-gold);color:var(--xvf-deep)}
.xvf-step h3{margin:32px 0 0;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(25px,2.2vw,30px);line-height:1.1;letter-spacing:-.01em;color:#fff}
.xvf-step p{margin:12px 0 0;max-width:260px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.72)}

/* one entrance: the line draws across, then each step lights up (only when JS runs) */
.xvf.is-on .xvf-rail:before{transform:scaleX(0)}
.xvf.is-on .xvf-node{background:var(--xvf-deep);color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.25)}
.xvf.is-on .xvf-step h3,.xvf.is-on .xvf-step p{opacity:.25}
.xvf.is-on .xvf-rail.is-in:before{transform:none;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.xvf.is-on .xvf-rail.is-in .xvf-node,
.xvf.is-on .xvf-rail.is-in .xvf-step h3,
.xvf.is-on .xvf-rail.is-in .xvf-step p{transition:all .6s ease calc(var(--i) * .35s + .15s)}
.xvf.is-on .xvf-rail.is-in .xvf-node{border-color:var(--xvf-gold);color:#fff}
.xvf.is-on .xvf-rail.is-in .xvf-step:first-child .xvf-node{background:var(--xvf-gold);color:var(--xvf-deep)}
.xvf.is-on .xvf-rail.is-in .xvf-step h3,
.xvf.is-on .xvf-rail.is-in .xvf-step p{opacity:1}

/* tablet: 2 columns */
@media(max-width:900px){
  .xvf-rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .xvf-rail:before{display:none}
  .xvf-step:before{content:"";position:absolute;left:56px;right:0;top:28px;height:1px;background:rgba(255,255,255,.2)}
}
/* mobile: vertical timeline */
@media(max-width:600px){
  .xvf{padding:68px 20px 72px}
  .xvf-rail{grid-template-columns:1fr;row-gap:0;padding-left:0}
  .xvf-rail:before{display:block;left:27px;right:auto;top:28px;bottom:28px;width:1px;height:auto;background:linear-gradient(180deg,var(--xvf-gold),rgba(255,255,255,.2));transform-origin:top}
  .xvf.is-on .xvf-rail:before{transform:scaleY(0)}
  .xvf.is-on .xvf-rail.is-in:before{transform:none}
  .xvf-step{padding:0 0 40px 84px}
  .xvf-step:last-child{padding-bottom:0}
  .xvf-step:before{display:none}
  .xvf-node{position:absolute;left:0;top:0}
  .xvf-step h3{margin-top:12px}
  .xvf-step p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .xvf *,.xvf *:before{transition:none!important;animation:none!important}
}