/* "Be there when buyers": every line leads to you, between Services and Case studies
   (Liam, November 10, 2026, on the round two options: "i acutlaly lvoe this ... for ht ehoemapge
   i liek the screenhsot"). The heading's last line names one place at a time; under it the six
   places sit in a row and a hairline runs from each into one answer card that names the company.
   A light travels the line of the place being named (assets/lines.js). From Titan's
   sources-to-intake diagram, in our type and tokens. The rolling words it replaced
   (assets/roll.css) stay for landing pages. Options and review: _scratch/be-there-options/ */
.ltu{position:relative;z-index:2;background:var(--bg-a);color:var(--ink);padding:var(--bay) var(--gutter);border-top:1px solid var(--line)}
.ltu-in{max-width:var(--shell);margin:0 auto}
.ltu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5)}
.ltu-head h2{margin:0;font:200 var(--t-2)/1.06 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
.ltu-lead{display:block}
.ltu-lead>span{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.ltu-lead [data-mw]{display:inline-block;transform:translateY(118%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.ltu-head .book{flex:none}

/* the sentence's ending: the leaving phrase fades on a short lift, the next rises in just after */
.ltu-slot{display:block;position:relative;height:1.2em;overflow:hidden}
.ltu-it{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(70%);opacity:0;transition:transform .75s cubic-bezier(.19,1,.22,1) .14s,opacity .45s .14s}
.ltu-it.is-on{transform:none;opacity:1}
.ltu-it.is-off{transform:translateY(-22%);opacity:0;transition:transform .28s ease-in,opacity .16s linear}

/* the places in a row, the card under them; CSS places everything, the script only draws the lines */
.ltu-stage{position:relative;margin-top:var(--s-5);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:clamp(150px,15vw,214px);align-items:start}
.ltu-stage>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ltu-path{fill:none;stroke:rgba(237,233,225,.13);stroke-width:1;transition:stroke .4s}
.ltu-path.is-on{stroke:rgba(237,233,225,.32)}
.ltu-trail{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.7}
.ltu-dot{fill:var(--ink);filter:drop-shadow(0 0 6px rgba(237,233,225,.8))}
.ltu-mk{display:inline-grid;place-items:center;flex:none;width:1em;height:1em;border-radius:.24em;background:var(--bg-d);border:1px solid var(--line)}
.ltu-mk img,.ltu-mk svg{width:58%;height:58%;object-fit:contain;display:block}
.ltu-mk svg{color:var(--ink)}
.ltu-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.ltu-node .ltu-mk{font-size:44px;opacity:.5;filter:grayscale(1);transition:opacity .5s,filter .5s,border-color .5s}
.ltu-node.is-on .ltu-mk{opacity:1;filter:none;border-color:rgba(237,233,225,.45)}
.ltu-lbl{font:400 12px/1.3 var(--font-mono);color:var(--quiet);text-align:center;transition:color .5s}
.ltu-node.is-on .ltu-lbl{color:var(--ink)}
.ltu-card{grid-column:1/-1;justify-self:center;position:relative;z-index:1;display:flex;align-items:center;gap:16px;width:min(420px,100%);box-sizing:border-box;padding:16px 22px 16px 16px;border-radius:var(--r-inner);background:var(--bg-d);border:1px solid rgba(237,233,225,.2);transition:box-shadow .6s,border-color .6s}
.ltu-card .ltu-mk{font-size:44px}
.ltu-card b{display:block;font:200 28px/1.05 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.ltu-card small{display:block;white-space:nowrap;margin-top:4px;font:400 14px/1.3 'Schibsted Grotesk',sans-serif;color:var(--quiet)}
.ltu-card.is-hit{border-color:rgba(237,233,225,.55);box-shadow:0 0 0 6px rgba(237,233,225,.05),0 0 48px rgba(237,233,225,.16)}

/* phone: three places, the card, then the other three, lines running in from above and below */
@media (max-width:760px){
  .ltu-head{flex-direction:column;align-items:flex-start}
  .ltu-stage{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:104px}
  .ltu-node:nth-of-type(n+4){order:3}
  .ltu-card{order:2;width:272px;padding:12px 16px 12px 12px;gap:12px}
  .ltu-node{gap:8px}
  .ltu-node .ltu-mk,.ltu-card .ltu-mk{font-size:36px}
  .ltu-lbl{font-size:11px}
  .ltu-card b{font-size:22px}
  .ltu-card small{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .ltu-it,.ltu-it.is-off{transition:none}
  .ltu-lead [data-mw]{transform:none;transition:none}
}