/* ==============================================================================================================
   Always Ahead AI, v5: the clean-line workflow maps (the ideas on the homepage; the case studies pages reuse them).
   Loaded after /site.css:  <link rel="stylesheet" href="/ideas.css?v=1">
   From the approved mockup's ideas-line.css.

   The panel is light like the back of the business card, with no boxes: one line of round icon nodes with a short
   label under each; one small diamond (the rule) whose other outcome rises on a short branch (it steps out to the
   right on phones, where the line runs down); one node filled navy where a person stays in the loop.

   Markup (one map; the homepage wraps it in .slot.slot-line inside an .idea card, with a .slot-tag "Built for ..."):
     <div class="slot slot-line">
       <div class="lscene">
         <ol class="ln" style="--n:5" aria-label="How it runs">          --n = the number of stations
           <li class="st" style="--p:0">                                  --p = its place along the line, 0 to 1
             <span class="nd" aria-hidden="true"><svg class="ic"><use href="#i-phone-call"/></svg></span>
             <span class="lb">Customer calls</span></li>
           <li class="st st-rule" style="--p:0.25">                       the rule (a diamond) and its branch
             <span class="nd nd-rule" aria-hidden="true"></span>
             <span class="lb"><span class="sr">A rule: </span>Anyone free?</span>
             <span class="br-wrap"><span class="br">                      .br-person: the branch is a person;
               <span class="tg tg-br" aria-hidden="true">No</span>        .br-join: it comes back down into the line
               <span class="lb"><span class="sr">If no: </span>AI answers</span>
               <span class="nd" aria-hidden="true"><svg class="ic"><use href="#i-headset"/></svg></span></span></span>
             <span class="tg tg-main" aria-hidden="true">Yes</span><span class="sr">If yes, the next step.</span></li>
           <li class="st st-person" style="--p:0.5">...</li>                a person in the loop (navy node)
         </ol>
         <p class="ln-con"><span class="ln-con-h">Connects</span> <span>Phone line</span><i aria-hidden="true">·</i>...</p>
       </div>
       <p class="slot-tag">Built for a plumbing company</p>
     </div>

   Geometry: every length below comes from four numbers, so the lines always meet the nodes:
     --nd  main node size (the line runs through its centre)       --bn   branch node size
     --gb  gap between the branch node and the main nodes below    --ln-up  room above the line for the branch
   The diamond is 30px (half diagonal 21px), so its top point sits at --nd/2 - 21px.
   Motion (a small light running along the line, each node answering as it passes, the stations arriving in order
   when a card is picked) only with html.js.aa-m and prefers-reduced-motion: no-preference.
   ============================================================================================================== */

:root {
  --ln-c: #7C8CB0;          /* connectors: 3.1:1 on the panel, so the lines pass AA for graphics */
  --ln-bg: #F4F6FB;         /* the panel */
  --ln-ring: #D3DAE9;       /* hairline ring round a white node */
  --nd: 56px;
  --bn: 48px;
  --gb: 34px;
  --ln-up: 150px;
}

/* ---------- the panel ---------- */
.slot-line { display: flex; min-height: 0; background: var(--ln-bg); }
@media (max-width: 1199px) { .slot-line { margin: 0 12px 12px; border-radius: 20px; } }
@media (max-width: 599px) { .slot-line { margin: 0 8px 8px; border-radius: 16px; } }

.lscene {
  position: relative; flex: 1; display: flex; flex-direction: column; padding: 72px 40px 28px;
  background: radial-gradient(ellipse 64% 56% at 52% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 74%), var(--ln-bg);
}

/* the "Built for..." proof tag: the line that says this was really built */
.slot-tag {
  position: absolute; z-index: 2; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 14px; border-radius: 999px; font-size: var(--t-b); line-height: 1.5; font-weight: 600;
  color: var(--navy); background: #fff; border: 1px solid var(--ln-ring); box-shadow: 0 4px 12px rgba(16, 27, 51, .05);
}
.slot-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
@media (max-width: 700px) { .slot-tag { top: 14px; left: 14px; padding: 6px 14px 6px 12px; font-size: var(--t-s); } }

/* ---------- the line (desktop and tablet: left to right) ---------- */
.ln { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: auto 0; padding-top: var(--ln-up); }
.ln::before { content: ""; position: absolute; top: calc(var(--ln-up) + var(--nd) / 2 - 1px); height: 2px; border-radius: 2px;
  left: calc(50% / var(--n)); right: calc(50% / var(--n)); background: linear-gradient(90deg, var(--ln-c) 0%, #5E77C0 55%, var(--blue-d) 100%); }

.st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 4px; text-align: center; }
.nd { position: relative; z-index: 1; display: grid; place-items: center; width: var(--nd); height: var(--nd); flex: none; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%); color: var(--navy);
  box-shadow: 0 0 0 1px var(--ln-ring), 0 2px 4px rgba(16, 27, 51, .04), 0 16px 30px -14px rgba(16, 27, 51, .34); }
.nd .ic { width: 24px; height: 24px; stroke-width: 1.75; }
.lb { max-width: 8.5em; font-size: var(--t-s); line-height: 1.3; font-weight: 600; color: var(--navy); text-wrap: balance; }

/* the person in the loop: filled navy, lifted, with a thin blue halo that cuts the line */
.st-person .nd, .br-person .nd { background: var(--navy); color: #fff;
  box-shadow: 0 0 0 6px var(--ln-bg), 0 0 0 7.5px rgba(27, 91, 255, .6), 0 18px 34px -12px rgba(16, 27, 51, .55); }
.st-person .lb, .br-person .lb { font-weight: 800; }
.st-person .nd::before, .br-person .nd::before { content: ""; position: absolute; z-index: -1; inset: -34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 91, 255, .13) 0%, rgba(27, 91, 255, 0) 70%); }

/* the rule: a small white diamond with a blue edge and a blue centre */
.nd-rule { background: none; box-shadow: none; }
.nd-rule::before { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  transform: rotate(45deg); border-radius: 6px; background: #fff; border: 2px solid var(--blue-d);
  box-shadow: 0 10px 20px -10px rgba(21, 67, 201, .55); }
.nd-rule::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  transform: rotate(45deg); border-radius: 2px; background: var(--blue-d); }
.st-rule > .lb { color: var(--blue-d); }

/* the two outcomes' small words, sitting on their lines like station names on a transit map */
.tg { position: absolute; z-index: 2; padding: 0 7px; border-radius: 999px; font-size: var(--t-xs); line-height: 20px; font-weight: 700;
  color: var(--blue-d); background: #fff; box-shadow: 0 0 0 1px #C9D4EE; white-space: nowrap; }
.tg-main { top: calc(var(--nd) / 2 - 10px); left: calc(100% - 6px); transform: translateX(-50%); }

/* the branch: rises from the diamond, turns, and ends at a node above the next station */
.br-wrap { position: absolute; left: 100%; width: 100%; top: calc(-1 * var(--ln-up)); height: calc(var(--ln-up) - var(--gb)); }
.br { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  height: 100%; padding: 0 4px; text-align: center; }
.br .nd { width: var(--bn); height: var(--bn); }
.br .nd .ic { width: 21px; height: 21px; }
.br::before { content: ""; position: absolute; left: calc(-50% - 1px); top: calc(var(--ln-up) - var(--gb) - var(--bn) / 2 - 1px);
  width: calc(100% - var(--bn) / 2 + 1px); height: calc(var(--gb) + var(--bn) / 2 + var(--nd) / 2 - 20px);
  border-left: 2px solid var(--ln-c); border-top: 2px solid var(--ln-c); border-top-left-radius: 24px; }
.tg-br { left: -50%; top: calc(var(--ln-up) - 14px); transform: translate(-50%, -50%); }
/* reception hands back to the bot: the branch comes down into the next step */
.br-join::after { content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 2px; height: var(--gb); background: var(--ln-c); }

/* ---------- the systems it touches: one quiet line of plain text ---------- */
.ln-con { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin-top: 32px;
  font-size: var(--t-s); line-height: 1.5; color: var(--slate); text-align: center; }
.ln-con-h { font-weight: 700; color: var(--navy); }
.ln-con i { font-style: normal; color: var(--peri); }

/* ---------- widths where the panel is at its narrowest ---------- */
@media (min-width: 720px) and (max-width: 1199px) { .lscene { padding: 76px 40px 32px; } }
@media (min-width: 1200px) and (max-width: 1279px) { .lscene { padding-left: 24px; padding-right: 24px; } }

/* ---------- phones: the line runs down, labels sit to the right, the branch steps out to the right.
   Station padding 10px, so a node's centre is 10 + --nd/2 = 38px down; the line is at x = 4 + 28 = 32px of .ln. ---------- */
@media (max-width: 719px) {
  :root { --ln-up: 0px; }
  .lscene { padding: 68px 20px 24px; }
  .ln { display: flex; flex-direction: column; margin: 0; padding: 0 0 0 4px; }
  .ln::before { top: 38px; bottom: 38px; left: 31px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--ln-c) 0%, #5E77C0 55%, var(--blue-d) 100%); }
  .st { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 10px 0; text-align: left; }
  .lb { max-width: none; font-size: var(--t-b); }
  .st > .lb { flex: 1 1 0%; min-width: 0; } /* a long name wraps beside its node instead of dropping under it */
  /* the branch row: node centre 96 + 24 = 120px in; its line leaves the main line (x 28) and turns right */
  .br-wrap { position: static; flex-basis: 100%; width: auto; height: auto; }
  .br { flex-direction: row; justify-content: flex-start; gap: 14px; margin-left: 104px; padding: 14px 0; text-align: left; }
  .br .nd { order: -1; }
  .br::before { left: -77px; top: -7px; width: 77px; height: 46px; border-top: 0; border-bottom: 2px solid var(--ln-c);
    border-top-left-radius: 0; border-bottom-left-radius: 18px; }
  .tg-br { left: -34px; top: 38px; }
  .tg-main { top: 118px; left: 28px; }
  .st-rule:has(.br-join) .tg-main { top: 110px; }
  .br-join { padding-bottom: 34px; }
  .br-join::after { left: -77px; top: 62px; width: 102px; height: 22px; background: none;
    border-right: 2px solid var(--ln-c); border-bottom: 2px solid var(--ln-c); border-bottom-right-radius: 16px; }
  .ln-con { justify-content: flex-start; gap: 2px 6px; margin-top: 20px; text-align: left; }
  .ln-con i { display: none; }
  .ln-con span:not(.ln-con-h):not(:last-child)::after { content: ","; }
}
/* the smallest phones: the branch steps in less and its words get a little smaller */
@media (max-width: 379px) {
  .lscene { padding-left: 14px; padding-right: 14px; }
  .st { gap: 0 14px; }
  .br { margin-left: 88px; gap: 10px; }
  .br::before { left: -61px; width: 61px; }
  .tg-br { left: -26px; }
  .br-join::after { left: -61px; width: 86px; }
  .br .lb { font-size: var(--t-s); }
}

/* ---------- motion: a small light runs along the line and each node answers as it passes; the stations arrive in
   order when a card is picked (site.js adds .enter). Phones get their own version of the light, further down.
   Maps with a rule take turns (14s): the light runs the main line, then goes back and takes the branch (up from
   the diamond, round the corner, to the branch node; with .br-join it comes back down into the next station).
   The homepage and case studies have three shapes, matched below by structure; each sets:
     --ri  the rule's station index      --run  its 14s keyframes      --t-br  when the light reaches the branch node
   A map of any other shape keeps the plain 7s run along the main line (every var below falls back to it). ---------- */
.ln:has(> .st:nth-child(5):last-child):has(> .st-rule:nth-child(2)) { --ri: 1; --run: ln-run-a 14s; --t-br: 9.97s; --ping-past: ln-ping-14 14s; }
.ln:has(> .st:nth-child(5):last-child):has(> .st-rule:nth-child(3)) { --ri: 2; --run: ln-run-b 14s; --t-br: 11.19s; --ping-past: ln-ping-14 14s; }
.ln:has(> .st:nth-child(4):last-child):has(> .st-rule:nth-child(3) .br-join) { --ri: 2; --run: ln-run-c 14s; --t-br: 12.36s;
  --ping-past: ln-ping-14 14s; --ping-join: ln-ping-join 14s; }
.ln { /* where the light stops: the first and last stations, the diamond, the branch node, the main line, the branch line */
  --x0: calc(50% / var(--n) - 5px); --x1: calc(100% - 50% / var(--n) - 5px);
  --xd: calc((var(--ri) + .5) * 100% / var(--n) - 5px); --xb: calc((var(--ri) + 1.5) * 100% / var(--n) - 5px);
  --yl: calc(var(--ln-up) + var(--nd) / 2 - 5px); --yb: calc(var(--ln-up) - var(--gb) - var(--bn) / 2 - 5px); }
@media (prefers-reduced-motion: no-preference) {
  html.js.aa-m .ln::after { content: ""; position: absolute; z-index: 0; top: var(--yl); left: var(--x0);
    width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(27, 91, 255, .16);
    animation: var(--run, ln-run 7s) linear infinite; }
  html.js.aa-m .st > .nd:not(.nd-rule)::after, html.js.aa-m .br .nd::after { content: ""; position: absolute; inset: -6px;
    border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }
  html.js.aa-m .st > .nd:not(.nd-rule)::after { animation: ln-ping 7s ease-out infinite; animation-delay: calc(var(--p) * 4.9s); }
  /* the branch run: stations before the rule are passed on both runs (every 7s, as before); stations past it only on
     the main run; the branch node on the branch run; with a join, the station it joins on both runs */
  html.js.aa-m .st-rule ~ .st > .nd::after { animation: var(--ping-past, ln-ping 7s) ease-out calc(var(--p) * 4.9s) infinite; }
  html.js.aa-m .br .nd::after { animation: ln-ping-14 14s ease-out var(--t-br) infinite; } /* no --t-br: no ping */
  html.js.aa-m .st-rule:has(.br-join) + .st > .nd::after { animation: var(--ping-join, ln-ping 7s calc(var(--p) * 4.9s)) ease-out infinite; }
  html.js.aa-m .enter .st { animation: ln-in .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--p) * 240ms); }
}
/* ---------- phones: the same two passes, down the line. The rule's station is twice as tall (its branch row sits
   under it), so the light spends two steps' time crossing it, and the stations answer at (index + 1 if past the
   rule) / n of the run. The branch has its own light (.br > .lb::after, placed against .br, so it follows the branch
   even when a long label makes the row taller); it takes over just under the diamond, where the branch leaves the
   line. Main light: centre x 32 (the line). Branch light: --br-in is how far left of .br the line is. ---------- */
@media (max-width: 719px) {
  .ln { --br-in: 76px; }
  .ln:has(> .st:nth-child(5):last-child):has(> .st-rule:nth-child(2)) { --run: ln-run-a-m 14s; --br-run: ln-br-a-m 14s; --t-br: 10.02s; }
  .ln:has(> .st:nth-child(5):last-child):has(> .st-rule:nth-child(3)) { --run: ln-run-b-m 14s; --br-run: ln-br-b-m 14s; --t-br: 11s; }
  .ln:has(> .st:nth-child(4):last-child):has(> .st-rule:nth-child(3) .br-join) { --run: ln-run-c-m 14s; --br-run: ln-br-c-m 14s;
    --t-br: 11.16s; --ping-join: ln-ping-join-m 14s; }
}
@media (max-width: 379px) { .ln { --br-in: 60px; } }
@media (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  html.js.aa-m .ln::after { left: 27px; top: 33px; animation: var(--run, ln-run-m 7s) linear infinite; }
  html.js.aa-m .br > .lb::after { content: ""; position: absolute; z-index: 0; left: calc(-5px - var(--br-in)); top: -12px;
    width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(27, 91, 255, .16);
    opacity: 0; animation: var(--br-run) linear infinite; } /* no --br-run (another shape): stays hidden */
  html.js.aa-m .st > .nd:not(.nd-rule)::after { animation-delay: calc(var(--p) * (var(--n) - 1) * 4.9s / var(--n)); }
  html.js.aa-m .st-rule ~ .st > .nd::after { animation-delay: calc((var(--p) * (var(--n) - 1) + 1) * 4.9s / var(--n)); }
}
/* phones, a map of another shape: one plain run down the line */
@keyframes ln-run-m {
  0% { top: 33px; opacity: 0; } 4% { opacity: 1; }
  70% { top: calc(100% - 43px); opacity: 1; } 74%, 100% { top: calc(100% - 43px); opacity: 0; }
}
/* the main light on phones. Stations: 76px apart; before the rule counted from the top, past it from the bottom.
   A: rule 2nd of 5 (diamond at 109, hand-off at 130). B: rule 3rd of 5 (185, 206). C: rule 3rd of 4 (185, 206). */
@keyframes ln-run-a-m {
  0% { top: 33px; opacity: 0; } 2% { opacity: 1; } 7% { top: 109px; } 21% { top: calc(100% - 195px); }
  28% { top: calc(100% - 119px); } 35% { top: calc(100% - 43px); opacity: 1; } 37%, 49.9% { top: calc(100% - 43px); opacity: 0; }
  50% { top: 33px; opacity: 0; } 52% { opacity: 1; } 57% { top: 109px; } 58.93% { top: 130px; opacity: 1; }
  58.94%, 100% { top: 130px; opacity: 0; }
}
@keyframes ln-run-b-m {
  0% { top: 33px; opacity: 0; } 2% { opacity: 1; } 7% { top: 109px; } 14% { top: 185px; }
  28% { top: calc(100% - 119px); } 35% { top: calc(100% - 43px); opacity: 1; } 37%, 49.9% { top: calc(100% - 43px); opacity: 0; }
  50% { top: 33px; opacity: 0; } 52% { opacity: 1; } 57% { top: 109px; } 64% { top: 185px; } 65.93% { top: 206px; opacity: 1; }
  65.94%, 100% { top: 206px; opacity: 0; }
}
@keyframes ln-run-c-m {
  0% { top: 33px; opacity: 0; } 2% { opacity: 1; } 8.75% { top: 109px; } 17.5% { top: 185px; }
  35% { top: calc(100% - 43px); opacity: 1; } 37%, 49.9% { top: calc(100% - 43px); opacity: 0; }
  50% { top: 33px; opacity: 0; } 52% { opacity: 1; } 58.75% { top: 109px; } 67.5% { top: 185px; } 69.92% { top: 206px; opacity: 1; }
  69.93%, 100% { top: 206px; opacity: 0; }
}
/* the branch light on phones, against .br: down the line from under the diamond, round the 18px corner, along to the
   branch node (its centre is half the row: 50%, or 50% - 10px with a join's taller bottom padding). C then goes down
   the join, round its 16px corner, back left to the line and down into the next station (100% + 48px). */
@keyframes ln-br-a-m {
  0%, 58.93% { left: calc(-5px - var(--br-in)); top: -12px; opacity: 0; } 58.94% { opacity: 1; }
  61.42% { left: calc(-5px - var(--br-in)); top: 15px; } 62.72% { left: calc(.27px - var(--br-in)); top: 27.73px; }
  64.02% { left: calc(13px - var(--br-in)); top: 33px; } 71.57% { left: 19px; top: calc(50% - 5px); opacity: 1; }
  73.7%, 100% { left: 19px; top: calc(50% - 5px); opacity: 0; }
}
@keyframes ln-br-b-m {
  0%, 65.93% { left: calc(-5px - var(--br-in)); top: -12px; opacity: 0; } 65.94% { opacity: 1; }
  68.42% { left: calc(-5px - var(--br-in)); top: 15px; } 69.72% { left: calc(.27px - var(--br-in)); top: 27.73px; }
  71.02% { left: calc(13px - var(--br-in)); top: 33px; } 78.57% { left: 19px; top: calc(50% - 5px); opacity: 1; }
  80.7%, 100% { left: 19px; top: calc(50% - 5px); opacity: 0; }
}
@keyframes ln-br-c-m {
  0%, 69.92% { left: calc(-5px - var(--br-in)); top: -12px; opacity: 0; } 69.93% { opacity: 1; }
  71.85% { left: calc(-5px - var(--br-in)); top: 15px; } 72.86% { left: calc(.27px - var(--br-in)); top: 27.73px; }
  73.87% { left: calc(13px - var(--br-in)); top: 33px; } 79.73% { left: 19px; top: calc(50% - 15px); }
  81.8% { left: 19px; top: 62px; } 82.7% { left: 14.3px; top: 73.3px; } 83.6% { left: 3px; top: 78px; }
  89.6% { left: calc(-5px - var(--br-in)); top: 78px; } 93.96% { left: calc(-5px - var(--br-in)); top: calc(100% + 43px); opacity: 1; }
  96.1%, 100% { left: calc(-5px - var(--br-in)); top: calc(100% + 43px); opacity: 0; }
}
/* C's last station on phones: the end of the main run (35%) and the branch coming down into it (93.96%) */
@keyframes ln-ping-join-m {
  0%, 35% { opacity: 0; transform: scale(.92); } 36.5% { opacity: .9; transform: scale(1); }
  43%, 93.95% { opacity: 0; transform: scale(1.18); } 93.96% { opacity: 0; transform: scale(.92); }
  95.46% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes ln-run {
  0% { left: var(--x0); opacity: 0; }
  4% { opacity: 1; }
  70% { left: var(--x1); opacity: 1; }
  74%, 100% { left: var(--x1); opacity: 0; }
}
/* the three branch runs: 0-37% the main line (same speed as ln-run), 50% back to the start, then to the diamond at
   the same speed, up, round the 24px corner, along to the branch node (and down into the next station for C) */
@keyframes ln-run-a {
  0% { left: var(--x0); top: var(--yl); opacity: 0; } 2% { opacity: 1; }
  35% { left: var(--x1); top: var(--yl); opacity: 1; } 37%, 49.9% { left: var(--x1); top: var(--yl); opacity: 0; }
  50% { left: var(--x0); top: var(--yl); opacity: 0; } 52% { opacity: 1; }
  58.75% { left: var(--xd); top: var(--yl); } 61.96% { left: var(--xd); top: calc(var(--yb) + 24px); }
  62.86% { left: calc(var(--xd) + 7px); top: calc(var(--yb) + 7px); } 63.75% { left: calc(var(--xd) + 24px); top: var(--yb); }
  71.19% { left: var(--xb); top: var(--yb); opacity: 1; } 73.33%, 100% { left: var(--xb); top: var(--yb); opacity: 0; }
}
@keyframes ln-run-b {
  0% { left: var(--x0); top: var(--yl); opacity: 0; } 2% { opacity: 1; }
  35% { left: var(--x1); top: var(--yl); opacity: 1; } 37%, 49.9% { left: var(--x1); top: var(--yl); opacity: 0; }
  50% { left: var(--x0); top: var(--yl); opacity: 0; } 52% { opacity: 1; }
  67.5% { left: var(--xd); top: var(--yl); } 70.71% { left: var(--xd); top: calc(var(--yb) + 24px); }
  71.61% { left: calc(var(--xd) + 7px); top: calc(var(--yb) + 7px); } 72.5% { left: calc(var(--xd) + 24px); top: var(--yb); }
  79.94% { left: var(--xb); top: var(--yb); opacity: 1; } 82.08%, 100% { left: var(--xb); top: var(--yb); opacity: 0; }
}
@keyframes ln-run-c {
  0% { left: var(--x0); top: var(--yl); opacity: 0; } 2% { opacity: 1; }
  35% { left: var(--x1); top: var(--yl); opacity: 1; } 37%, 49.9% { left: var(--x1); top: var(--yl); opacity: 0; }
  50% { left: var(--x0); top: var(--yl); opacity: 0; } 52% { opacity: 1; }
  73.33% { left: var(--xd); top: var(--yl); } 76.55% { left: var(--xd); top: calc(var(--yb) + 24px); }
  77.44% { left: calc(var(--xd) + 7px); top: calc(var(--yb) + 7px); } 78.34% { left: calc(var(--xd) + 24px); top: var(--yb); }
  88.25% { left: var(--xb); top: var(--yb); } 92.54% { left: var(--xb); top: var(--yl); opacity: 1; }
  94.68%, 100% { left: var(--xb); top: var(--yl); opacity: 0; }
}
@keyframes ln-ping { 0% { opacity: 0; transform: scale(.92); } 3% { opacity: .9; transform: scale(1); } 16%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes ln-ping-14 { 0% { opacity: 0; transform: scale(.92); } 1.5% { opacity: .9; transform: scale(1); } 8%, 100% { opacity: 0; transform: scale(1.18); } }
/* C's last station: passed at the end of the main run (35%) and again when the branch comes down into it (92.54%) */
@keyframes ln-ping-join {
  0%, 35% { opacity: 0; transform: scale(.92); } 36.5% { opacity: .9; transform: scale(1); }
  43%, 92.53% { opacity: 0; transform: scale(1.18); } 92.54% { opacity: 0; transform: scale(.92); }
  94.04% { opacity: .9; transform: scale(1); } 99.9%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes ln-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the services line under the call link (index.html .ideas-end): even lines, and on a phone its link takes its own
   line, like the call link above it, instead of sitting inline on a taller second line */
.ideas-end .ideas-svc { text-wrap: balance; }
@media (max-width: 599px) { .ideas-end .ideas-svc .link { display: flex; justify-content: center; } }