/* ==========================================================================
   timeline.css — the Smile Consultation Process as a compact timeline.
   Pairs with /js/timeline.js. Fails open: without JS the line is drawn and
   every node is lit; JS only adds .tl-armed (the hidden start state) once it
   knows it can also add .is-on.
   Type sizes stay on the six-step scale: 12 / 14 / 16 / 20 / 32.
   ========================================================================== */

.tl-sec{padding:72px 0}
.tl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px 40px;margin:0 0 44px}
.tl-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:#C9A861;margin:0 0 10px}
.tl-title{font-size:32px;line-height:1.05;margin:0;color:#F5F0E8}
.tl-who{display:flex;align-items:center;gap:14px;max-width:380px}
.tl-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:2px solid #C9A861;flex:0 0 auto}
.tl-who p{margin:0;font-size:14px;line-height:1.5;color:rgba(245,240,232,.72)}

/* the track */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:28px;position:relative}
/* runs from the centre of node 01 to the centre of node 04: with four columns
   and a 28px gap, the last centre sits at 75% + 43px from the right edge */
.tl::before,.tl::after{content:"";position:absolute;left:22px;right:calc(25% - 43px);top:22px;height:2px}
.tl::before{background:rgba(245,240,232,.16)}
.tl::after{background:#C9A861;transform-origin:left center;transform:scaleX(1)}

.tl li{position:relative;z-index:1}
.tl-node{width:44px;height:44px;border-radius:50%;background:#F5F0E8;color:#16291E;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  letter-spacing:.04em;box-shadow:0 0 0 6px #264a36;margin:0 0 18px}
.tl-step{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#F5F0E8;margin:0 0 8px}
.tl-text{font-size:14px;line-height:1.55;color:rgba(245,240,232,.7);margin:0;max-width:30ch}

.tl-cta{margin:44px 0 0}

/* --- armed: hidden start state, only ever set by JS ---------------------- */
.tl.tl-armed::after{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.65,0,.35,1)}
.tl.tl-armed .tl-node{transform:scale(.6);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.tl.tl-armed .tl-step,.tl.tl-armed .tl-text{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease}
.tl.tl-armed li:nth-child(1) *{transition-delay:.05s}
.tl.tl-armed li:nth-child(2) *{transition-delay:.4s}
.tl.tl-armed li:nth-child(3) *{transition-delay:.75s}
.tl.tl-armed li:nth-child(4) *{transition-delay:1.1s}

.tl.tl-armed.is-on::after{transform:scaleX(1)}
.tl.tl-armed.is-on .tl-node{transform:scale(1);opacity:1}
.tl.tl-armed.is-on .tl-step,.tl.tl-armed.is-on .tl-text{opacity:1;transform:none}

/* hover: the node you are reading lifts */
@media (hover:hover){
  .tl li .tl-node{transition:transform .25s ease,background .25s ease}
  .tl li:hover .tl-node{background:#C9A861;transform:scale(1.08)}
}

/* --- vertical on narrow screens ------------------------------------------ */
@media (max-width:820px){
  .tl{grid-template-columns:1fr;gap:26px;padding-left:64px}
  /* vertical: one segment per gap, node to node, so it can never overshoot */
  .tl::before,.tl::after{display:none}
  .tl li:not(:last-child)::after{content:"";position:absolute;left:-43px;top:40px;
    bottom:-22px;width:2px;background:#C9A861;transform-origin:center top}
  .tl.tl-armed li:not(:last-child)::after{transform:scaleY(0);
    transition:transform .45s cubic-bezier(.65,0,.35,1)}
  .tl.tl-armed li:nth-child(1)::after{transition-delay:.25s}
  .tl.tl-armed li:nth-child(2)::after{transition-delay:.6s}
  .tl.tl-armed li:nth-child(3)::after{transition-delay:.95s}
  .tl.tl-armed.is-on li::after{transform:scaleY(1)}
  .tl-node{position:absolute;left:-64px;top:-4px;margin:0}
  .tl-text{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .tl.tl-armed::after,.tl.tl-armed li::after,.tl.tl-armed .tl-node,.tl.tl-armed .tl-step,.tl.tl-armed .tl-text{
    transition:none!important}
}