/* ===========================================================
   Bizniaga Technologies — About Us page (29 Oct)
   Banner, headings, call-to-action and scroll reveal reuse css/services.css
   (same as ODC / EDB). Behaviour (smooth scroll, section snapping, reveal,
   count-up) comes from script/career.js.
   =========================================================== */

/* ---------------- shared ---------------- */
.ab-title { font-size: clamp(22px, min(1.4vw + 12px, 3.4vh + 10px), 40px); }
.ab-text { margin: 0 0 12px; font-size: clamp(13.5px, min(0.3vw + 10.5px, 1.2vh + 7px), 15.5px); line-height: 1.7; color: var(--muted); }
.ab-narrow { max-width: 780px; }
.ab-mini { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); }
.ab-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(40px, 5.6vh, 50px);
  height: clamp(40px, 5.6vh, 50px);
  border-radius: 13px;
  background: var(--mist);
  color: var(--purple-start);
}
.ab-ico svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 861px) {
  .ab-scene, .ab-commit-scene {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-space) + 2vh) 0 4vh;
  }
  .ab-scene > .container, .ab-commit-scene > .container { width: 100%; }
}
@media (max-width: 860px) {
  .ab-scene.sv-scene, .ab-commit-scene.sv-scene { min-height: 0; padding: 64px 0; }
}

/* pop-in (same as ODC / EDB) */
[data-reveal] .rv.pop { transform: translate3d(0, var(--rv-y, 40px), 0) scale(0.86); transform-origin: 50% 80%; }
[data-reveal].is-in .rv.pop {
  transform: none;
  transition: opacity 0.5s ease calc(var(--i, 0) * 110ms + 120ms), transform 0.75s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 110ms + 120ms);
}

/* ---------------- banner ---------------- */
.ab-hero .page-hero-grid > div p { margin-bottom: 0; }
.ab-hero-btn { margin-top: clamp(18px, 3vh, 28px); }

/* ---------------- who we are ---------------- */
.ab-who { background: #fff; }
.ab-who-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-who-side { display: flex; flex-direction: column; gap: 18px; }
.ab-years {
  padding: clamp(22px, 4vh, 36px) clamp(22px, 2vw, 32px);
  border-radius: 22px;
  background: linear-gradient(165deg, #2b23c9 0%, #1a1196 48%, #0e0a63 100%);
  color: #fff;
  box-shadow: 0 22px 44px rgba(26, 17, 150, 0.25);
}
.ab-years strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, min(6vw, 12vh), 104px); line-height: 1; }
.ab-years > span { font-size: 15px; color: rgba(255, 255, 255, 0.82); }
.ab-inds { padding: 18px 20px; border-radius: 18px; background: var(--mist); }
.ab-inds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-inds a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--navy); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.ab-inds a:hover { background: var(--purple-start); border-color: var(--purple-start); color: #fff; }

/* ---------------- what we offer: two columns around the Bizniaga hub ---------------- */
.ab-offer { background: var(--mist); }
.ab-hub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; margin-top: clamp(18px, 3.6vh, 36px); }
.ab-hub-col {
  padding: clamp(18px, 3vh, 28px) clamp(18px, 1.8vw, 28px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(18, 22, 58, 0.07);
}
.ab-hub-col h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 0.6vw + 10px, 21px); color: var(--navy); }
.ab-hub-col p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ab-hub-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ab-hub-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(6px, 1vh, 9px) 12px;
  border-radius: 10px;
  background: var(--mist);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ab-hub-col a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: 0.5; }
.ab-hub-col a:hover { background: var(--purple-start); color: #fff; transform: translateX(3px); }
.ab-hub-core { position: relative; display: grid; place-items: center; width: clamp(110px, 11vw, 170px); aspect-ratio: 1; }
.ab-hub-core img { position: relative; z-index: 1; width: 64%; aspect-ratio: 1; object-fit: contain; padding: 14%; border-radius: 50%; background: #fff; box-shadow: 0 18px 40px rgba(26, 17, 150, 0.22); }
.ab-hub-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(91, 79, 224, 0.35); animation: abSpin 24s linear infinite; }
.ab-hub-ring.is-2 { inset: 14%; border-style: solid; border-color: rgba(91, 79, 224, 0.18); animation: abPulse 3s ease-in-out infinite; }
/* connector lines from the hub out to both columns */
.ab-hub-core::before, .ab-hub-core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(16px, 3vw, 48px);
  height: 2px;
  background: linear-gradient(90deg, rgba(91, 79, 224, 0), var(--purple-start));
}
.ab-hub-core::before { right: 100%; }
.ab-hub-core::after { left: 100%; transform: scaleX(-1); }
@keyframes abSpin { to { transform: rotate(360deg); } }
@keyframes abPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.5; } }

/* ---------------- our journey: timeline ---------------- */
.ab-journey {
  background: radial-gradient(70% 80% at 85% 10%, rgba(91, 79, 224, 0.35), transparent 70%), linear-gradient(160deg, #1a12a8 0%, #0e0a63 45%, #0b0a24 100%);
  color: #fff;
}
.ab-journey .section-eyebrow { color: #b8adff; }
.ab-journey .section-title { color: #fff; }
.ab-journey .gleam { --gleam-base: #ffffff; --gleam-shine: #b8adff; }
.ab-time {
  position: relative;
  list-style: none;
  margin: clamp(10px, 2vh, 24px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(10px, 1.2vw, 18px);
  height: clamp(380px, 62vh, 620px);
}
/* the line through the middle draws from left to right */
.ab-time::before, .ab-time::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.ab-time::after {
  background: linear-gradient(90deg, #8f86ff, #5b4fe0 55%, var(--red));
  box-shadow: 0 0 14px rgba(143, 134, 255, 0.6);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ab-journey.is-in .ab-time::after { transform: scaleX(1); transition: transform 1.8s cubic-bezier(.65,.05,.25,1) 0.3s; }
.ab-ms {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}
.ab-ms-dot {
  grid-row: 2;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(40px, 6vh, 52px);
  height: clamp(40px, 6vh, 52px);
  border-radius: 50%;
  background: #fff;
  color: #1a1196;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.ab-ms-dot svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-ms.is-now .ab-ms-dot { background: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(228, 32, 48, 0.25), 0 10px 24px rgba(0, 0, 0, 0.35); }
/* a thin stem joins each card to its dot */
.ab-ms::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
}
.ab-ms.is-up::before { top: 30%; bottom: 50%; }
.ab-ms.is-down::before { top: 50%; bottom: 30%; background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)); }
.ab-ms-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: clamp(12px, 2vh, 18px) clamp(12px, 1.1vw, 18px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  isolation: isolate;
}
.ab-ms.is-up .ab-ms-card { grid-row: 1; align-self: end; margin-bottom: clamp(16px, 3vh, 28px); }
.ab-ms.is-down .ab-ms-card { grid-row: 3; align-self: start; margin-top: clamp(16px, 3vh, 28px); }
/* the milestone photo sits faded behind the words, and comes forward on hover */
.ab-ms-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: grayscale(0.4);
  transform: scale(1.06);
  transition: opacity 0.45s ease, transform 0.8s ease, filter 0.45s ease;
  z-index: -1;
}
.ab-ms-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 10, 99, 0.2), rgba(11, 10, 36, 0.75)); }
.ab-ms-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.4); }
.ab-ms-card:hover .ab-ms-img { opacity: 0.42; filter: none; transform: scale(1); }
.ab-ms-year {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.4px;
}
.ab-ms.is-now .ab-ms-year { background: var(--red); }
.ab-ms-card h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 0.4vw + 9px, 17px); line-height: 1.25; }
.ab-ms-card p { margin: 0; font-size: clamp(12.5px, 0.2vw + 9.5px, 14px); line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
/* reveal: dots pop on the line as it reaches them, cards slide out from the line */
.ab-journey .ab-ms.rv { opacity: 1; transform: none; transition: none; }
.ab-ms-dot { transform: scale(0); }
.ab-ms-card { opacity: 0; }
.ab-ms.is-up .ab-ms-card { transform: translateY(26px); }
.ab-ms.is-down .ab-ms-card { transform: translateY(-26px); }
.ab-ms::before { transform: scaleY(0); }
.ab-journey.is-in .ab-ms-dot { transform: scale(1); transition: transform 0.6s cubic-bezier(.34,1.56,.64,1) calc(var(--k) * 330ms + 400ms); }
.ab-journey.is-in .ab-ms::before { transform: scaleY(1); transition: transform 0.4s ease calc(var(--k) * 330ms + 650ms); }
.ab-journey.is-in .ab-ms-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(var(--k) * 330ms + 750ms), transform 0.7s cubic-bezier(.22,.9,.32,1) calc(var(--k) * 330ms + 750ms), border-color 0.35s ease, background 0.35s ease;
}
.ab-journey.is-in .ab-ms-card:hover { transform: translateY(-4px); transition: transform 0.35s ease, border-color 0.35s ease; }
.ab-ms.is-up::before { transform-origin: 50% 100%; }
.ab-ms.is-down::before { transform-origin: 50% 0; }

/* ---------------- our approach: delivery cycle ---------------- */
.ab-approach { background: #fff; }
.ab-approach-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-principles { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-principles li { padding: 7px 14px; border-radius: 999px; background: var(--mist); font-size: 13.5px; font-weight: 700; color: var(--purple-start); }
.ab-cycle { --r: clamp(120px, min(15vw, 24vh), 200px); position: relative; width: calc(var(--r) * 2 + 120px); height: calc(var(--r) * 2 + 60px); margin: 0 auto; }
.ab-cycle-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2 * 200 / 156); height: calc(var(--r) * 2 * 200 / 156); transform: translate(-50%, -50%); }
.ab-cycle-ring circle { fill: none; stroke: #e4e3f7; stroke-width: 2; }
.ab-cycle-ring .ab-cycle-run { stroke: var(--purple-start); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 88; transform: rotate(-90deg); transform-origin: 100px 100px; animation: abRun 9s linear infinite; }
@keyframes abRun { to { stroke-dashoffset: -100; } }
.ab-cycle-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--r) * 1.1); text-align: center; }
.ab-cycle-core strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1vw + 10px, 28px); color: var(--navy); }
.ab-cycle-core span { font-size: 13px; color: var(--muted); }
.ab-cycle-steps { list-style: none; margin: 0; padding: 0; }
.ab-cycle-steps li {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 8px 20px rgba(18, 22, 58, 0.08);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--navy);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
  animation: abStep 9s ease-in-out infinite;
  animation-delay: calc(var(--k) * 1.5s);
}
/* each step lights up in turn as the marker runs round the ring */
@keyframes abStep {
  0%, 18%, 100% { background: #fff; color: var(--navy); border-color: var(--line); }
  4%, 13% { background: var(--purple-start); color: #fff; border-color: var(--purple-start); }
}

/* ---------------- driven by innovation ---------------- */
.ab-innov { background: var(--mist); }
.ab-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(16px, 3.2vh, 30px); }
.ab-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 2vh, 18px) clamp(12px, 1.2vw, 18px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 0.3vw + 9.5px, 15px);
  color: var(--navy);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ab-cap:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(18, 22, 58, 0.1); }
.ab-outcomes { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin: clamp(18px, 3.6vh, 34px) 0 0; padding: clamp(14px, 2.2vh, 20px) 0 0; border-top: 1px solid #dcdcf2; }
.ab-outcomes li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: var(--navy); }
.ab-outcomes li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--purple-start)); }

/* ---------------- built around our clients ---------------- */
.ab-clients { background: #fff; }
.ab-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(20px, 4vh, 40px); }
.ab-value {
  padding: clamp(20px, 3.2vh, 32px) clamp(20px, 1.8vw, 28px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(18, 22, 58, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ab-value:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(18, 22, 58, 0.12); }
.ab-value.is-main { background: linear-gradient(165deg, #2b23c9 0%, #1a1196 48%, #0e0a63 100%); border-color: transparent; color: #fff; }
.ab-value.is-main .ab-ico { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ab-value h3 { margin: 14px 0 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 0.6vw + 10px, 21px); color: var(--navy); }
.ab-value.is-main h3 { color: #fff; }
.ab-value p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ab-value.is-main p { color: rgba(255, 255, 255, 0.85); }

/* ---------------- regional delivery ---------------- */
.ab-region { background: var(--mist); }
.ab-region-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-checks { list-style: none; margin: 6px 0 22px; padding: 0; display: grid; gap: 10px; }
.ab-checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; color: var(--navy); }
.ab-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple-start) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.btn-primary-ab { background: var(--purple-start); color: #fff; transition: background 0.3s ease, transform 0.3s ease; }
.btn-primary-ab:hover { background: var(--navy); transform: translateY(-2px); }
.ab-map {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: min(560px, calc(62vh * 15 / 13));
  aspect-ratio: 15 / 13;
  margin-left: auto;
  border-radius: 24px;
  background: radial-gradient(70% 70% at 50% 50%, #fff, #eceaff);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(18, 22, 58, 0.1);
}
.ab-map svg { width: 100%; height: 100%; display: block; }
.ab-map text { font-family: var(--font-display); font-weight: 800; font-size: 5px; fill: var(--navy); }
.ab-map text.ab-map-sub { font-weight: 500; font-size: 3.6px; fill: var(--muted); }
.ab-map-pin { fill: var(--purple-start); }
.ab-map-pin.is-2 { fill: var(--red); }
.ab-map-pulse { fill: none; stroke: var(--purple-start); stroke-width: 0.6; transform-box: fill-box; transform-origin: center; animation: abPin 2.4s ease-out infinite; }
.ab-map-pulse.is-2 { stroke: var(--red); animation-delay: 1.2s; }
@keyframes abPin { from { transform: scale(0.6); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.ab-map-arc { fill: none; stroke: url(#abTint); stroke: var(--purple-start); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.ab-region.is-in .ab-map-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65,.05,.25,1) 0.6s; }

/* ---------------- our commitment (closing) ---------------- */
.ab-commit-scene { background: #fff; }
.ab-commit { text-align: center; padding-top: clamp(32px, 6vh, 60px); padding-bottom: clamp(32px, 6vh, 60px); }
.ab-commit-eyebrow { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75) !important; }
.ab-commit h2 { font-size: clamp(24px, 1.6vw + 12px, 42px); }
.ab-commit-values { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto clamp(14px, 2.6vh, 22px); padding: 0; }
.ab-commit-values li { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 700; font-size: 14px; color: #fff; }
.ab-commit > p:not(.ab-commit-eyebrow) { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------------- tablets / phones ---------------- */
@media (max-width: 1100px) {
  .ab-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ab-who-grid, .ab-approach-grid, .ab-region-grid { grid-template-columns: 1fr; }
  .ab-hub { grid-template-columns: 1fr; }
  .ab-hub-core { margin: 0 auto; width: 110px; }
  .ab-hub-core::before, .ab-hub-core::after { display: none; }
  .ab-values { grid-template-columns: 1fr; }
  .ab-cycle { --r: 120px; width: 100%; max-width: 380px; }
  .ab-cycle-steps li { font-size: 12px; padding: 6px 10px; }
  .ab-map { margin: 0 auto; width: 100%; }
  /* timeline turns vertical: line down the left, cards to the right */
  .ab-time { grid-template-columns: 1fr; height: auto; row-gap: 18px; padding-left: 54px; }
  .ab-time::before, .ab-time::after { left: 22px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0; }
  .ab-time::after { transform: scaleY(0); transform-origin: 50% 0; }
  .ab-journey.is-in .ab-time::after { transform: scaleY(1); }
  .ab-ms { display: block; }
  .ab-ms::before { display: none; }
  .ab-ms-dot { position: absolute; left: -54px; top: 10px; width: 44px; height: 44px; }
  .ab-ms.is-up .ab-ms-card, .ab-ms.is-down .ab-ms-card { margin: 0; }
  .ab-journey:not(.is-in) .ab-ms .ab-ms-card { transform: translateX(20px); }
}
@media (max-width: 640px) {
  .ab-caps { grid-template-columns: 1fr; }
  .ab-outcomes { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .rv.pop { opacity: 1; transform: none; transition: none; }
  .ab-time::after, .ab-ms-dot, .ab-ms-card, .ab-ms::before { transform: none !important; opacity: 1 !important; transition: none !important; }
  .ab-hub-ring, .ab-cycle-run, .ab-cycle-steps li, .ab-map-pulse { animation: none !important; }
  .ab-map-arc { stroke-dashoffset: 0; }
}

/* ---------------- wide screens (units from css/wide.css) ---------------- */
@media (min-width: 1537px) {
  .ab-text { font-size: calc(15.5 * var(--ut)); }
  .ab-narrow { max-width: calc(820 * var(--u)); }
  .ab-hub-col a, .ab-inds a, .ab-cap { font-size: calc(14 * var(--ut)); }
  .ab-ms-card p, .ab-value p { font-size: calc(14 * var(--ut)); }
}

/* ================================================================
   29 Oct v2: "Who we are" merged into the journey (light section), the
   timeline photos now sit faded ALONG the line (like the Figma), one per
   milestone, alternating above / below; "Our approach" is the dark section.
   ================================================================ */
.ab-journey { background: linear-gradient(180deg, #ffffff 0%, var(--mist) 100%); color: var(--navy); }
.ab-journey .section-eyebrow { color: var(--purple-start); }
.ab-journey .section-title { color: var(--navy); }
.ab-journey .gleam { --gleam-base: var(--navy); --gleam-shine: #cfd2ff; }
.ab-j-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: center; }
.ab-j-head .ab-text { max-width: 760px; margin-bottom: 0; }
.ab-journey .ab-years { padding: clamp(14px, 2.4vh, 22px) clamp(18px, 1.8vw, 26px); border-radius: 18px; }
.ab-journey .ab-years strong { font-size: clamp(40px, min(4vw, 8vh), 72px); }
.ab-journey .ab-years > span { font-size: 13.5px; }

.ab-time { height: clamp(300px, 50vh, 520px); margin-top: clamp(14px, 3vh, 30px); column-gap: 0; }
.ab-time::before { background: #dcdcf2; }
.ab-time::after { box-shadow: none; }
.ab-ms::before { display: none; }                 /* no stems: the photo band does the joining */
/* the milestone block fills its half of the timeline: photo band + words, no box */
.ab-ms-card {
  align-self: stretch !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 !important;
  padding: clamp(10px, 2vh, 18px) clamp(12px, 1.2vw, 20px);
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.ab-ms-card::after { display: none; }
.ab-ms.is-up .ab-ms-card { justify-content: flex-end; padding-bottom: clamp(30px, 5.4vh, 46px); }
.ab-ms.is-down .ab-ms-card { justify-content: flex-start; padding-top: clamp(30px, 5.4vh, 46px); }
/* faded photo: strongest at the line, fading out towards the outer edge */
.ab-ms-img {
  opacity: 0.22;
  filter: grayscale(0.85);
  transform: none;
}
.ab-ms.is-up .ab-ms-img { -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.85) 45%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.85) 45%, transparent 100%); }
.ab-ms.is-down .ab-ms-img { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.85) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.85) 45%, transparent 100%); }
.ab-ms-card:hover { transform: none !important; }
.ab-ms-card:hover .ab-ms-img, .ab-ms:hover .ab-ms-img { opacity: 0.4; filter: grayscale(0.2); }
.ab-ms-year { order: 3; margin: 10px 0 0; background: #fff; color: var(--navy); box-shadow: 0 6px 16px rgba(18, 22, 58, 0.1); }
.ab-ms.is-down .ab-ms-year { order: -1; margin: 0 0 10px; }
.ab-ms.is-now .ab-ms-year { background: #ffe3e6; color: var(--red); }
.ab-ms-card h3 { color: var(--navy); font-size: clamp(14px, 0.4vw + 9px, 17px); }
.ab-ms.is-now .ab-ms-card h3 { color: var(--red); }
.ab-ms-card p { color: var(--muted); max-width: 230px; }
.ab-ms-dot { background: #1a1196; color: #fff; box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(26, 17, 150, 0.3); }
.ab-ms.is-now .ab-ms-dot { background: var(--red); box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(228, 32, 48, 0.35); }
/* reveal: photo band grows out of the line, then the words fade in */
.ab-ms-img { transition: opacity 0.45s ease, filter 0.45s ease, clip-path 0.9s cubic-bezier(.22,.9,.32,1); }
.ab-ms.is-up .ab-ms-img { clip-path: inset(100% 0 0 0); }
.ab-ms.is-down .ab-ms-img { clip-path: inset(0 0 100% 0); }
.ab-journey.is-in .ab-ms .ab-ms-img { clip-path: inset(0 0 0 0); transition-delay: 0s, 0s, calc(var(--k) * 330ms + 600ms); }
.ab-ms-card { opacity: 1 !important; transform: none !important; }
.ab-ms-card > :not(.ab-ms-img) { opacity: 0; transform: translateY(10px); }
.ab-journey.is-in .ab-ms-card > :not(.ab-ms-img) { opacity: 1; transform: none; transition: opacity 0.5s ease calc(var(--k) * 330ms + 900ms), transform 0.6s cubic-bezier(.22,.9,.32,1) calc(var(--k) * 330ms + 900ms); }

@media (max-width: 860px) {
  .ab-j-head { grid-template-columns: 1fr; }
  .ab-time { height: auto; }
  .ab-ms-card { align-items: flex-start; text-align: left; padding: 14px 16px !important; justify-content: flex-start !important; }
  .ab-ms-year, .ab-ms.is-down .ab-ms-year { order: -1; margin: 0 0 8px; }
  .ab-ms.is-up .ab-ms-img, .ab-ms.is-down .ab-ms-img { -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
  .ab-ms-card p { max-width: none; }
}
/* v2 fit: equal halves so the dots sit exactly on the line; shorter timeline */
.ab-ms { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.ab-ms-dot { margin: calc(clamp(40px, 6vh, 52px) / -2) 0; }
.ab-time { height: clamp(280px, 46vh, 500px); margin-top: clamp(10px, 2.4vh, 26px); }
.ab-ms-card { overflow: hidden; }
@media (min-width: 861px) { .ab-journey.ab-scene { padding-top: calc(var(--nav-space) + 1vh); padding-bottom: 2vh; } }
@media (min-width: 861px) and (max-height: 640px) {
  .ab-j-head .ab-text { font-size: 13px; line-height: 1.55; }
  .ab-journey .ab-years { padding: 10px 16px; }
  .ab-journey .ab-years strong { font-size: 34px; }
  .ab-time { height: 41vh; margin-top: 6px; }
  .ab-ms-card p { font-size: 12px; }
}
@media (min-width: 861px) { .ab-time { grid-template-rows: minmax(0, 1fr); } .ab-ms { min-height: 0; } }
/* v2 fit (2): the timeline takes all the height left under the intro */
@media (min-width: 861px) {
  .ab-journey.ab-scene { justify-content: flex-start; padding-bottom: 3vh; }
  .ab-journey > .container { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .ab-journey .ab-time { flex: 1 1 auto; height: auto; min-height: 0; max-height: 560px; margin-top: clamp(8px, 2vh, 22px); }
}
@media (min-width: 861px) and (max-height: 640px) {
  .ab-journey .ab-title { font-size: 24px; margin-bottom: 6px; }
  .ab-journey .section-eyebrow { margin-bottom: 2px; }
  .ab-journey.ab-scene { padding-bottom: 1vh; }
}

/* ---------------- 29 Oct v3: journey is the dark section (approach back to light) ---------------- */
.ab-journey {
  background: radial-gradient(70% 80% at 85% 10%, rgba(91, 79, 224, 0.35), transparent 70%), linear-gradient(160deg, #1a12a8 0%, #0e0a63 45%, #0b0a24 100%);
  color: #fff;
}
.ab-journey .section-eyebrow { color: #b8adff; }
.ab-journey .section-title { color: #fff; }
.ab-journey .gleam { --gleam-base: #ffffff; --gleam-shine: #b8adff; }
.ab-journey .ab-text { color: rgba(255, 255, 255, 0.78); }
.ab-j-head { grid-template-columns: minmax(0, 1fr); }
.ab-journey .ab-time::before { background: rgba(255, 255, 255, 0.16); }
.ab-journey .ab-time::after { box-shadow: 0 0 14px rgba(143, 134, 255, 0.55); }
.ab-journey .ab-ms-img { opacity: 0.3; filter: grayscale(0.5) brightness(0.9); }
.ab-journey .ab-ms:hover .ab-ms-img { opacity: 0.55; filter: none; }
.ab-journey .ab-ms-card h3 { color: #fff; }
.ab-journey .ab-ms.is-now .ab-ms-card h3 { color: #ff8a94; }
.ab-journey .ab-ms-card p { color: rgba(255, 255, 255, 0.75); }
.ab-journey .ab-ms-year { background: rgba(255, 255, 255, 0.95); color: #1a1196; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.ab-journey .ab-ms.is-now .ab-ms-year { background: var(--red); color: #fff; }
.ab-journey .ab-ms-dot { background: #fff; color: #1a1196; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.35); }
.ab-journey .ab-ms.is-now .ab-ms-dot { background: var(--red); color: #fff; box-shadow: 0 0 0 5px rgba(228, 32, 48, 0.28), 0 10px 24px rgba(0, 0, 0, 0.35); }

/* ================================================================
   3 Nov: JOURNEY REDESIGN — big photo + year rail (old zig-zag: Backup/Version 27).
   Background = deep navy with the current photo blurred into it, a soft
   glow and a faint world map.
   ================================================================ */
.ab-journey { position: relative; overflow: hidden; isolation: isolate; background: #0b0a2e; color: #fff; }
.ab-tl-bg { position: absolute; inset: 0; z-index: -2; }
.ab-tl-bg-layer {
  position: absolute;
  inset: -60px;
  background-size: cover;
  background-position: center;
  filter: blur(36px) saturate(1.2);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1s ease, transform 1.6s cubic-bezier(.22,.9,.32,1);
}
.ab-tl-bg-layer.is-on { opacity: 0.55; transform: scale(1); }
.ab-journey::before {          /* darken + brand glow over the blurred photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 60% at 80% 35%, rgba(91, 79, 224, 0.35), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(228, 32, 48, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 8, 46, 0.78) 0%, rgba(10, 8, 46, 0.66) 50%, rgba(8, 6, 30, 0.9) 100%);
}
.ab-tl-map { position: absolute; z-index: -1; right: -8%; top: 8%; width: min(70%, 1000px); opacity: 0.07; filter: brightness(0) invert(1); pointer-events: none; }

.ab-tl { position: relative; display: flex; flex-direction: column; }
.ab-tl-head .ab-text { max-width: 760px; margin: 0; }

.ab-tl-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(16px, 3.4vh, 34px);
}
/* the words: one milestone shown at a time, sliding in from the side you're moving to */
.ab-tl-copy { position: relative; list-style: none; margin: 0; padding: 0; min-height: clamp(160px, 24vh, 240px); }
.ab-tl-item {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateX(calc(var(--tl-dir, 1) * 30px));
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.22,.9,.32,1);
}
.ab-tl-item.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.12s; }
.ab-tl-item::before {
  content: attr(data-year);
  display: block;
  margin-bottom: clamp(8px, 1.6vh, 14px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, min(4.2vw, 8.4vh), 78px);
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #ffffff 0%, #c9c3ff 60%, #8f86ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ab-tl-item:last-child::before { background: linear-gradient(90deg, #ffffff 0%, #ffb3ba 55%, #ff5a67 100%); -webkit-background-clip: text; background-clip: text; }
.ab-tl-item h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, min(1.2vw + 8px, 2.8vh + 6px), 30px); line-height: 1.2; color: #fff; }
.ab-tl-item p { margin: 0; max-width: 460px; font-size: clamp(15px, min(0.4vw + 10px, 1.2vh + 7px), 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }

/* the big photo: cross-fades with a gentle zoom */
.ab-tl-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  max-height: 46vh;
  width: 100%;
  margin-left: auto;
  border-radius: 22px;
  background: #15106a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  touch-action: pan-y;
}
@media (min-width: 861px) { .ab-tl-frame { width: min(100%, calc(46vh * 1.6)); } }
.ab-tl-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s ease, transform 1.4s cubic-bezier(.22,.9,.32,1);
  user-select: none;
  -webkit-user-drag: none;
}
.ab-tl-photo.is-on { opacity: 1; transform: none; }
.ab-tl-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 6, 30, 0.55)); pointer-events: none; }
.ab-tl-count { position: absolute; z-index: 1; right: 18px; bottom: 14px; font-family: var(--font-display); font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.ab-tl-count strong { font-size: 20px; color: #fff; }

/* the year rail */
.ab-tl-rail {
  position: relative;
  list-style: none;
  margin: clamp(22px, 4.4vh, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ab-tl-track { position: absolute; left: 10%; right: 10%; top: 11px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.ab-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #8f86ff, #5b4fe0 60%, var(--red)); box-shadow: 0 0 12px rgba(143, 134, 255, 0.6); transition: width 0.7s cubic-bezier(.65,.05,.25,1); }
.ab-tl-stop {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px 6px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 0.3vw + 10px, 15.5px);
  cursor: pointer;
  transition: color 0.3s ease;
}
.ab-tl-dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1d1773;
  border: 3px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ab-tl-stop:hover { color: #fff; }
.ab-tl-stop:hover .ab-tl-dot { transform: scale(1.15); border-color: #fff; }
.ab-tl-stop.is-past .ab-tl-dot { background: #8f86ff; border-color: #8f86ff; }
.ab-tl-stop.is-on { color: #fff; }
.ab-tl-stop.is-on .ab-tl-dot { transform: scale(1.25); background: #fff; border-color: #fff; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.16), 0 0 22px rgba(143, 134, 255, 0.8); }
.ab-tl-stop.is-now.is-on .ab-tl-dot { background: var(--red); border-color: #fff; box-shadow: 0 0 0 7px rgba(228, 32, 48, 0.25), 0 0 22px rgba(228, 32, 48, 0.7); }
.ab-tl-stop:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 10px; }

/* reveal: the rail draws in, then the dots pop on one by one */
.ab-tl-track { transform: scaleX(0); transform-origin: 0 50%; }
.ab-journey.is-in .ab-tl-track { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.65,.05,.25,1) 0.4s; }
.ab-tl-rail li:not(.ab-tl-track) { opacity: 0; transform: translateY(10px); }
.ab-journey.is-in .ab-tl-rail li:not(.ab-tl-track) { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1); }
.ab-journey.is-in .ab-tl-rail li:nth-child(2) { transition-delay: 0.55s; }
.ab-journey.is-in .ab-tl-rail li:nth-child(3) { transition-delay: 0.7s; }
.ab-journey.is-in .ab-tl-rail li:nth-child(4) { transition-delay: 0.85s; }
.ab-journey.is-in .ab-tl-rail li:nth-child(5) { transition-delay: 1s; }
.ab-journey.is-in .ab-tl-rail li:nth-child(6) { transition-delay: 1.15s; }
.ab-journey .ab-tl-rail.rv { opacity: 1; transform: none; }

@media (min-width: 861px) and (max-height: 640px) {
  .ab-tl-item::before { font-size: 40px; }
  .ab-tl-item h3 { font-size: 20px; }
  .ab-tl-item p { font-size: 14.5px; }
  .ab-tl-frame { max-height: 40vh; }
  .ab-tl-rail { margin-top: 16px; }
}
@media (max-width: 860px) {
  .ab-tl-stage { grid-template-columns: 1fr; }
  .ab-tl-frame { order: -1; max-height: none; width: 100%; }
  .ab-tl-copy { min-height: 0; }
  .ab-tl-rail { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .ab-tl-stop { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tl-item, .ab-tl-photo, .ab-tl-bg-layer, .ab-tl-fill, .ab-tl-track, .ab-tl-rail li { transition: none !important; }
}
@media (min-width: 1537px) {
  .ab-tl-item p { font-size: calc(18 * var(--u)); max-width: calc(480 * var(--u)); }
  .ab-tl-stop { font-size: calc(15.5 * var(--u)); }
}
/* larger photo (3 Nov) */
@media (min-width: 861px) {
  .ab-tl-stage { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.35fr); margin-top: clamp(12px, 2.4vh, 26px); }
  .ab-tl-frame { max-height: 50vh; width: min(100%, calc(50vh * 1.6)); }
}
.ab-tl-rail { margin-top: clamp(16px, 3.2vh, 34px); }
@media (min-width: 861px) and (max-height: 640px) { .ab-tl-frame { max-height: 47vh; width: min(100%, calc(47vh * 1.6)); } }

/* ================================================================
   3 Nov v2: full-screen photo background per milestone + auto play.
   Content centred: section heading on top, the milestone (year, title,
   text) centred above the year rail.
   ================================================================ */
.ab-tl-frame { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; max-height: none; box-shadow: none; }
.ab-tl-bg-layer.is-photo { inset: 0; filter: none; transform: scale(1.06); transition: opacity 1.1s ease, transform 6s ease-out; }
.ab-tl-bg-layer.is-photo.is-on { opacity: 1; transform: scale(1); }
.ab-journey::before {
  background:
    radial-gradient(60% 55% at 50% 62%, rgba(10, 8, 46, 0.35), transparent 75%),
    linear-gradient(180deg, rgba(8, 6, 34, 0.88) 0%, rgba(10, 8, 46, 0.55) 38%, rgba(10, 8, 46, 0.6) 62%, rgba(8, 6, 30, 0.92) 100%),
    linear-gradient(90deg, rgba(26, 17, 150, 0.35), rgba(228, 32, 48, 0.12));
}
.ab-tl-map { opacity: 0.05; }

@media (min-width: 861px) {
  .ab-journey > .ab-tl { justify-content: center; }
  .ab-tl-head { text-align: center; }
  .ab-tl-head .ab-text { margin: 0 auto; }
  .ab-tl-stage { display: block; margin-top: clamp(26px, 6vh, 64px); }
}
.ab-tl-copy { text-align: center; min-height: clamp(150px, 21vh, 210px); }
.ab-tl-item { transform: translateY(16px); }
.ab-tl-item.is-on { transform: none; }
.ab-tl-item p { margin: 0 auto; max-width: 560px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.ab-tl-item h3 { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.ab-tl-item::before { font-size: clamp(44px, min(4.6vw, 9vh), 86px); text-shadow: none; }
.ab-tl-rail { max-width: 980px; width: 100%; margin-left: auto; margin-right: auto; margin-top: clamp(14px, 3vh, 30px); }

/* the current dot's ring fills while it waits to move on */
.ab-tl-dot { position: relative; }
.ab-tl-stop.is-on .ab-tl-dot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(#fff calc(var(--tl-p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0;
}
@property --tl-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.ab-journey.is-timing .ab-tl-stop.is-on .ab-tl-dot::after { opacity: 0.9; animation: abTlRing var(--tl-time, 5000ms) linear forwards; }
@keyframes abTlRing { from { --tl-p: 0; } to { --tl-p: 100; } }

@media (min-width: 861px) and (max-height: 640px) {
  .ab-tl-stage { margin-top: 18px; }
  .ab-tl-item::before { font-size: 42px; }
}
@media (max-width: 860px) {
  .ab-tl-head { text-align: left; }
  .ab-tl-copy { text-align: left; }
  .ab-tl-item p { margin: 0; }
}
/* 3 Nov: progress now runs along the line (about.js), not round the dot */
.ab-tl-stop.is-on .ab-tl-dot::after { display: none; }
.ab-tl-fill { box-shadow: 0 0 14px rgba(143, 134, 255, 0.75); }
/* longer milestone text (3 Nov) */
.ab-tl-item p { max-width: 720px; }
.ab-tl-copy { min-height: clamp(190px, 27vh, 260px); }
@media (min-width: 861px) and (max-height: 640px) { .ab-tl-item p { font-size: 14px; line-height: 1.55; } .ab-tl-item h3 { margin-bottom: 6px; } }

/* 3 Nov: rail colours blue → purple → red; every dot uses its own colour (--dot, set in about.js) */
.ab-tl-fill { background: linear-gradient(90deg, #2f8de4 0%, #7b4fe0 50%, #e42030 100%); box-shadow: 0 0 14px rgba(123, 79, 224, 0.6); }
.ab-tl-dot { border-color: var(--dot, #8f86ff); background: rgba(10, 8, 46, 0.85); }
.ab-tl-stop.is-past .ab-tl-dot { background: var(--dot); border-color: var(--dot); }
.ab-tl-stop.is-on .ab-tl-dot,
.ab-tl-stop.is-now.is-on .ab-tl-dot { background: var(--dot); border-color: #fff; box-shadow: 0 0 0 7px color-mix(in srgb, var(--dot) 30%, transparent), 0 0 22px var(--dot); }
.ab-tl-stop:hover .ab-tl-dot { border-color: var(--dot); }

/* 3 Nov: the line runs blue → purple → red, and every dot takes the colour at its own point */
.ab-tl-fill { background: linear-gradient(90deg, #2f8de4 0%, #6b4fe0 50%, #e42030 100%); box-shadow: 0 0 14px rgba(107, 79, 224, 0.6); }
.ab-tl-dot { background: #15106a; border-color: var(--c, #6b4fe0); }
.ab-tl-stop.is-past .ab-tl-dot { background: var(--c); border-color: var(--c); }
.ab-tl-stop.is-on .ab-tl-dot,
.ab-tl-stop.is-now.is-on .ab-tl-dot { background: var(--c); border-color: #fff; box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 30%, transparent), 0 0 24px var(--c); }
.ab-tl-stop:hover .ab-tl-dot { border-color: #fff; }
/* dark blue start (3 Nov) */
.ab-tl-fill { background: linear-gradient(90deg, #1a3fc4 0%, #6b4fe0 50%, #e42030 100%); }

/* 11 Nov: cleaner current dot. The line's glow spilled out past its end and
   made a soft box behind the enlarged dot; the line no longer glows, and the
   dot's halo is a tight, round ring drawn above the line. */
.ab-tl-fill { box-shadow: none; }
.ab-tl-stop { z-index: 1; -webkit-tap-highlight-color: transparent; }
.ab-tl-stop.is-on .ab-tl-dot,
.ab-tl-stop.is-now.is-on .ab-tl-dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #6b4fe0) 35%, transparent), 0 0 12px color-mix(in srgb, var(--c, #6b4fe0) 70%, transparent);
}
.ab-tl-stop:focus { outline: none; }
.ab-tl-stop:focus-visible .ab-tl-dot { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 860px) { .ab-tl-stage, .ab-tl-copy { touch-action: pan-y; } }
/* phones: the rail no longer scrolls sideways (all five years fit), so the
   enlarged dot's halo isn't cut off flat at the top */
@media (max-width: 860px) { .ab-tl-rail { overflow: visible; grid-template-columns: repeat(5, minmax(0, 1fr)); } }