/* lines.css : styling and motion for the service lines. Delete with lines.php when not needed. */
.lines{display:flex;flex-direction:column;background:#fff;border:1px solid #DDE2E8;border-radius:18px;padding:8px 16px;box-shadow:0 20px 50px -30px rgba(11,18,32,.35)}
.line{display:grid;grid-template-columns:44px minmax(110px,.8fr) minmax(0,1.5fr) auto 128px;align-items:center;gap:20px;padding:22px 12px;border-top:1px solid #E6EAEF;text-decoration:none;color:#0B1220;position:relative;border-radius:10px;transition:background .2s}
.line:first-child{border-top:0}
.num{font-family:var(--font,'Lato',sans-serif);font-variant-numeric:tabular-nums;font-size:14px;color:#6B7686}
.track{display:flex;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
/* The bar draws itself in on load, one line after another (delay = --i). */
.bar{height:3px;flex:1;background:var(--c);margin:0 -1px;position:relative;overflow:hidden;border-radius:2px;transform-origin:left;animation:draw .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*.12s + .3s)}
/* A bright pulse then travels along the bar, like a vehicle on a route. */
.bar::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);transform:translateX(-120%);animation:travel 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s + 1.4s)}
.end{width:18px;height:18px;border-radius:50%;border:3px solid var(--c);background:#fff;flex:none;position:relative}
.end::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--c);opacity:0;animation:ping 3.4s ease-out infinite;animation-delay:calc(var(--i)*.45s + 2.4s)}
.txt{display:flex;flex-direction:column;gap:2px}
.nm{font-family:var(--head,'Lato',sans-serif);font-weight:900;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.bl{font-size:17px;color:#3D4857}
.go{font-size:26px;color:var(--c);text-align:right;transition:transform .2s}
a.line:hover{background:color-mix(in srgb,var(--c) 7%,#fff)}
a.line:hover .go{transform:translateX(6px)}
a.line:hover .bar{height:5px}
a.line:hover .nm{text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:6px;text-decoration-thickness:3px}
/* Coming-soon lines: dotted, quiet, no link. */
.soon .bar{background:none;border-top:3px dotted var(--c);height:0;animation:none}
.soon .bar::after,.soon .end::after{display:none}
.soon .dot{background:none;border:3px solid var(--c);box-sizing:border-box}
.soon .nm{color:#6B7686}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes travel{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
@keyframes ping{0%{opacity:.7;transform:scale(.8)}70%,100%{opacity:0;transform:scale(1.9)}}
@media (max-width:860px){.line{grid-template-columns:30px 1fr 24px;grid-template-areas:"n t g" "k k k" "v v v"}.num{grid-area:n}.txt{grid-area:t}.go{grid-area:g}.track{grid-area:k}.vehs{grid-area:v;justify-content:flex-start}}
/* People who switch motion off in their device settings get a still page. */
@media (prefers-reduced-motion:reduce){.bar,.bar::after,.end::after{animation:none!important}}

/* ---- Product box (products.txt): dark panel, product colour, lines that merge into one trunk ---- */
.prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.prod{background:#0B1220;color:#F4F6F8;border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:12px;border:1px solid #1B2433}
.prod h3{margin:0;font-family:var(--head,'Lato',sans-serif);font-size:34px;letter-spacing:-.02em;line-height:1.1}
.prod h3::before{content:"";display:block;width:44px;height:5px;background:var(--c);border-radius:3px;margin-bottom:14px}
.prod p{margin:0;color:#B9C4D0;font-size:17px;max-width:480px}
.pmap{width:100%;height:auto;margin:12px 0 6px;overflow:visible}
.pmap .pl{fill:none;stroke:var(--c);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.pmap .pp{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:9;opacity:.85;animation:pflow 3.6s linear infinite;animation-delay:calc(var(--i)*.5s)}
.pmap .ps{fill:#0B1220;stroke:var(--c);stroke-width:4}
.pmap text{fill:#E8EDF2;font-family:var(--font,'Lato',sans-serif);font-size:16px}
.pmap .pn{fill:#0B1220;stroke:var(--c);stroke-width:5}.pmap .pd{fill:var(--c)}
.pcta{align-self:flex-start;display:inline-block;margin-top:8px;padding:14px 26px;background:var(--c);color:#0B1220;font-weight:600;border-radius:999px;text-decoration:none}
.pcta.soon{background:none;border:1px solid #3A4656;color:#A9B4C0}
a.pcta:hover{filter:brightness(1.1)}
@keyframes pflow{from{stroke-dashoffset:9}to{stroke-dashoffset:-100}}
@media (max-width:860px){.prods{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pmap .pp{animation:none!important;opacity:0}}

/* ---- Vehicle pills (vehicles.txt): shape + letters + colour. Soft enough to sit quietly, dark text so it stays readable ---- */
.vehs{display:flex;gap:8px;justify-content:flex-end}
.veh{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;background:var(--v);color:#0B1220;font-weight:900;font-size:13px;letter-spacing:.05em;line-height:1}
.veh .sh{width:11px;height:11px;background:#0B1220;display:block}
.v-pcv{--v:#5B9CF0}.v-pcv .sh{border-radius:50%}           /* circle   = PCV (buses, coaches) */
.v-hgv{--v:#F8CB3C}                                         /* square   = HGV (lorries)        */
.v-lcv{--v:#9ED43A}.v-lcv .sh{clip-path:polygon(50% 0,100% 100%,0 100%)} /* triangle = LCV (vans)   */
.veh.off{background:none;border:1.5px dashed #C3CBD6;color:#7A8696;font-weight:700;padding:3.5px 8.5px}
.veh.off .sh{background:#C3CBD6}
.veh.off.o-pcv .sh{border-radius:50%}
.veh.off.o-lcv .sh{clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Phones: swap the product map for a plain list (the map's text would shrink too small to read). */
.pmods{display:none;list-style:none;margin:10px 0 4px;padding:0}
.pmods li{padding:10px 0 10px 22px;border-top:1px solid #243044;position:relative;color:#E8EDF2;font-size:17px}
.pmods li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:3px solid var(--c)}
@media (max-width:640px){.pmap{display:none}.pmods{display:block}}

/* "Coming soon" badge on a line */
.tag-soon{display:inline-block;padding:4px 10px;border-radius:999px;border:1.5px dashed var(--c);color:#3D4857;font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.soon .go{width:auto}

.go{text-align:right}
@media (max-width:860px){.line.soon{grid-template-columns:30px 1fr;grid-template-areas:"n t" "k k" "v v" "g g"}.soon .go{grid-area:g;text-align:left}}