/* Brand tokens — tweak to your palette */
:root{
  --hh-navy:#0f2a3d;
  --hh-green:#16a34a;  /* HaulageHub accent */
  --hh-grey-100:#f6f7f9;
  --hh-grey-300:#e6e9ee;
  --hh-card:#ffffff;
  --hh-shadow:0 8px 20px rgba(15,42,61,.08);
}

/* Section */
.hh-timeline{
  position:relative;
  padding: 40px 0 10px;
}
.hh-tl-title{
  text-align:center;
  color:var(--hh-navy);
  font-weight:700;
  margin-bottom:28px;
}

/* Timeline rail */
.hh-tl{
  position:relative;
  list-style:none;
  margin:0;
  padding:0 0 0 0;
  max-width: 1100px;
  margin-left:auto;
  margin-right:auto;
}
.hh-tl::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    var(--hh-grey-300),
    var(--hh-green),
    var(--hh-grey-300)
  );
  opacity:.6;
}

/* Items */
.hh-tl-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin: 26px 0;
}

/* Dot */
.hh-tl-item::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translate(-50%,-2px);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--hh-card);
  border:3px solid var(--hh-green);
  box-shadow:0 0 0 6px rgba(22,163,74,.08);
}

/* Alternate sides on desktop */
.hh-tl-date, .hh-tl-card{ width:50%; }
.hh-tl-item:nth-child(odd) .hh-tl-date{ order:1; text-align:right; padding-right:28px; }
.hh-tl-item:nth-child(odd) .hh-tl-card{ order:2; }
.hh-tl-item:nth-child(even) .hh-tl-date{ order:2; text-align:left; padding-left:28px; }
.hh-tl-item:nth-child(even) .hh-tl-card{ order:1; }

/* Date pill */
.hh-tl-date{
  color:var(--hh-navy);
  font-weight:800;
  letter-spacing:.02em;
  margin-top:2px;
}

/* Card */
.hh-tl-card{
  background:var(--hh-card);
  border:1px solid var(--hh-grey-300);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:var(--hh-shadow);
  position:relative;
}
.hh-tl-card h4{
  margin:0 0 6px;
  color:var(--hh-navy);
  font-weight:700;
  font-size:1.05rem;
}
.hh-tl-card p{
  margin:0;
  color:#445364;
  line-height:1.5;
}

/* Card arrow pointers */
.hh-tl-item:nth-child(odd) .hh-tl-card::after{
  content:"";
  position:absolute;
  left:-8px; top:18px;
  border-width:8px;
  border-style:solid;
  border-color:transparent var(--hh-card) transparent transparent;
  filter: drop-shadow(-1px 0 0 var(--hh-grey-300));
}
.hh-tl-item:nth-child(even) .hh-tl-card::after{
  content:"";
  position:absolute;
  right:-8px; top:18px;
  border-width:8px;
  border-style:solid;
  border-color:transparent transparent transparent var(--hh-card);
  filter: drop-shadow(1px 0 0 var(--hh-grey-300));
}

/* Subtle slide-in (for users without AOS) */
@keyframes hh-fade-slide{
  from{ opacity:0; transform:translateY(10px);}
  to{ opacity:1; transform:translateY(0);}
}
.hh-tl-item{ animation: hh-fade-slide .6s ease both; }
.hh-tl-item:nth-child(2){ animation-delay:.05s;}
.hh-tl-item:nth-child(3){ animation-delay:.1s;}
.hh-tl-item:nth-child(4){ animation-delay:.15s;}
.hh-tl-item:nth-child(5){ animation-delay:.2s;}
.hh-tl-item:nth-child(6){ animation-delay:.25s;}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hh-tl-item{ animation:none; }
}

/* Mobile: stack cards under the rail */
@media (max-width: 768px){
  .hh-tl::before{ left:12px; transform:none; }
  .hh-tl-item{ margin:18px 0 24px; }
  .hh-tl-item::before{ left:12px; transform:none; }
  .hh-tl-date, .hh-tl-card{ width:100%; }
  .hh-tl-date{
    order:1; text-align:left; padding:0 0 6px 36px;
    font-size:.95rem;
  }
  .hh-tl-card{
    order:2; margin-left:36px;
  }
  .hh-tl-item .hh-tl-card::after{
    left:-8px; right:auto;
    border-color:transparent var(--hh-card) transparent transparent;
    filter: drop-shadow(-1px 0 0 var(--hh-grey-300));
  }
}