/* ================= ABOUT PAGE ================= */
.abhero{position:relative; padding:clamp(146px,17vh,206px) 0 clamp(30px,4vw,50px); text-align:center}
.abhero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(78% 108% at 50% -12%, rgba(0,112,192,.28), transparent 64%),
             radial-gradient(50% 70% at 50% 40%, rgba(230,168,0,.07), transparent 70%)}
.abhero .rail{justify-content:center; border:0; padding-block:0; margin-bottom:16px}
.abhero .rail::after{display:none}
.abhero h1{font-size:clamp(2.2rem,4.6vw,3.9rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.14; max-width:17ch; margin-inline:auto}
.abhero h1 b{color:var(--gold-hi); font-weight:800}
.abhero p{font-family:var(--fb); font-size:1.0625rem; line-height:2.1; color:var(--txt-2);
  max-width:58ch; margin:20px auto 0}
.abhero .cue{position:static; display:flex; justify-content:center; gap:10px; margin-top:34px;
  font-size:.75rem; letter-spacing:.16em; color:var(--txt-3); font-weight:700}
.abhero .cue i{display:block; width:1px; height:38px; margin-inline:auto;
  background:linear-gradient(var(--gold),transparent); animation:cuedrop 2.4s ease-in-out infinite}
@keyframes cuedrop{0%,100%{opacity:.25; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)}}

/* ---- the spine ---- */
.tl{position:relative; padding-block:clamp(30px,4vw,56px) clamp(60px,8vw,110px)}
.tl-line{position:absolute; top:0; bottom:0; inset-inline-start:50%; width:2px;
  transform:translateX(50%); background:var(--line-2); border-radius:2px}
.tl-fill{position:absolute; top:0; inset-inline-start:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, rgba(230,168,0,.35));
  border-radius:2px; box-shadow:0 0 18px -2px rgba(240,192,64,.55)}

.tl-row{position:relative; display:grid; grid-template-columns:1fr 96px 1fr;
  align-items:center; margin-block:clamp(26px,4.2vw,58px)}
.tl-card{grid-column:1; padding-inline-end:clamp(18px,2.6vw,42px); text-align:end}
.tl-row.b .tl-card{grid-column:3; padding-inline:clamp(18px,2.6vw,42px) 0; text-align:start}
.tl-card .tag{display:inline-block; font-family:var(--fd); font-size:.6875rem; font-weight:800;
  letter-spacing:.16em; color:var(--gold); margin-bottom:12px}
.tl-card h3{font-size:clamp(1.15rem,1.9vw,1.6rem); font-weight:700; letter-spacing:-.02em;
  line-height:1.4; margin-bottom:12px}
.tl-card p{font-family:var(--fb); font-size:.9375rem; line-height:2; color:var(--txt-2)}

/* the node that lights when the line reaches it */
.tl-dot{grid-column:2; justify-self:center; position:relative; width:15px; height:15px;
  border-radius:50%; background:var(--void); border:2px solid var(--line);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease)}
.tl-dot::after{content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--gold-hi); opacity:0; transition:opacity .5s var(--ease)}
.tl-row.lit .tl-dot{border-color:var(--gold); transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(230,168,0,.10), 0 0 22px -2px rgba(240,192,64,.6)}
.tl-row.lit .tl-dot::after{opacity:1}
/* the short branch that reaches out to the card */
.tl-dot::before{content:""; position:absolute; top:50%; width:clamp(16px,2.4vw,38px); height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  inset-inline-end:100%; transform:translateY(-50%) scaleX(0); transform-origin:right center;
  transition:transform .7s var(--ease)}
.tl-row.b .tl-dot::before{inset-inline-end:auto; inset-inline-start:100%;
  background:linear-gradient(-90deg, var(--gold), transparent); transform-origin:left center}
.tl-row.lit .tl-dot::before{transform:translateY(-50%) scaleX(1)}

/* the cards arrive from their own side */
/* cards are visible by default; only once JS is running do they wait their turn */
.tl.js .tl-card{opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
.tl.js .tl-row.lit .tl-card{opacity:1; transform:none}

/* ---- the numbers, at the foot of the spine ---- */
.abnums{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px);
  padding-block:clamp(46px,6vw,80px); text-align:center; border-top:1px solid var(--line-2)}
.abnums b{display:block; font-family:var(--fd); font-size:clamp(2rem,4vw,3.3rem); font-weight:800;
  letter-spacing:-.04em; color:var(--gold-hi); line-height:1; font-variant-numeric:tabular-nums}
.abnums span{display:block; margin-top:10px; font-size:.8125rem; color:var(--txt-3)}

.abend{padding:clamp(54px,7vw,96px) 0; text-align:center;
  background:radial-gradient(70% 120% at 50% 0%, rgba(0,112,192,.18), transparent 68%)}
.abend h2{font-size:clamp(1.6rem,3.2vw,2.7rem); font-weight:700; letter-spacing:-.025em;
  line-height:1.3; margin-bottom:16px}
.abend p{font-family:var(--fb); color:var(--txt-2); line-height:2; max-width:52ch; margin:0 auto 30px}
.abend .e-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

@media (max-width:820px){
  .tl-line{inset-inline-start:22px; transform:none}
  .tl-row{grid-template-columns:44px 1fr; margin-block:30px}
  .tl-dot{grid-column:1; justify-self:start; margin-inline-start:15px}
  .tl-card,.tl-row.b .tl-card{grid-column:2; text-align:start;
    padding-inline:clamp(14px,4vw,24px) 0}
  .tl-dot::before,.tl-row.b .tl-dot::before{inset-inline-end:auto; inset-inline-start:100%;
    background:linear-gradient(-90deg, var(--gold), transparent); transform-origin:left center;
    width:clamp(12px,4vw,22px)}
  .abnums{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){ .abend .e-cta{flex-direction:column; align-items:stretch} }

/* ---- living background : drifting constellation behind the whole page ---- */
#abfield{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85}
.mk > *{position:relative; z-index:1}
.mk > #abfield{z-index:0}
@media (prefers-reduced-motion:reduce){ #abfield{display:none} }