/* ==========================================================================
   Service scenes — the animated pictures on the service pages
   (inc/service-scenes.php). Drawn in the vehicles' flat livery: white,
   lilac greys and the brand yellow, on the page's own navy grounds.
   Everything settles on its finished picture for reduced motion.
   ========================================================================== */

/* ------------------------------------------------------------ shared */
.sc-stage{position:absolute;left:50%;top:50%;width:300px;height:150px;transform:translate(-50%,-50%)}
.sc-stage > svg{position:absolute;inset:0;width:300px;height:150px;overflow:visible}
.sc-pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border:3px solid var(--yellow);border-radius:50%;background:var(--off)}
.sc-badge{position:absolute;right:9%;top:14%;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:var(--yellow);color:var(--navy);animation:sc-pulse 2s ease-out infinite}
/* Glyphs on solid yellow stay navy on every palette: white on yellow is too faint to read. */
@keyframes sc-pulse{0%{box-shadow:0 0 0 0 rgba(var(--yellow-rgb),.45)}100%{box-shadow:0 0 0 22px rgba(var(--yellow-rgb),0)}}
@keyframes sc-bob{50%{transform:translate(-50%,calc(-50% - 7px))}}
@keyframes sc-march{to{stroke-dashoffset:-14}}
@keyframes sc-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ------------------------------------------------------------ streak */
.sc-streak .sc-veh{position:absolute;left:50%;top:52%;width:clamp(170px,19vw,240px);transform:translate(-50%,-50%);
  animation:sc-bob 2.6s ease-in-out infinite}
.sc-streak .sc-bigic{position:absolute;left:50%;top:44%;display:grid;place-items:center;transform:translate(-50%,-50%);color:var(--ink)}
.sc-streaks i{position:absolute;right:62%;height:2px;border-radius:2px;
  background:linear-gradient(270deg,rgba(var(--yellow-rgb),.9),transparent);animation:sc-streak 1.2s linear infinite}
.sc-streaks i:nth-child(1){top:40%;width:34%}
.sc-streaks i:nth-child(2){top:50%;width:46%;animation-delay:.3s}
.sc-streaks i:nth-child(3){top:60%;width:28%;animation-delay:.6s}
.sc-streaks i:nth-child(4){top:46%;width:22%;animation-delay:.9s}
@keyframes sc-streak{0%{opacity:0;transform:translateX(40px)}30%{opacity:1}100%{opacity:0;transform:translateX(-120px)}}
/* Track under a train: the sleepers run past and the train rattles. */
.sc-rails{position:absolute;left:10%;right:10%;top:calc(44% + 52px);height:12px;
  border-top:2px solid rgba(255,255,255,.4);border-bottom:2px solid rgba(255,255,255,.4);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 4px,transparent 4px 24px);animation:sc-sleepers .5s linear infinite}
@keyframes sc-sleepers{to{background-position:-24px 0}}
.sc-rails ~ .sc-bigic{animation:sc-rattle .25s ease-in-out infinite alternate}
@keyframes sc-rattle{to{transform:translate(-50%,calc(-50% - 1.5px))}}

/* --------------------------------------------------------------- arc */
.sc-arc .sc-path path{fill:none;stroke:rgba(var(--yellow-rgb),.8);stroke-width:2;stroke-dasharray:6 8;animation:sc-march 1s linear infinite}
.sc-arc .sc-pin-a{left:14px;top:128px}
.sc-arc .sc-pin-b{left:286px;top:118px}
.sc-arc .sc-veh{position:absolute;left:0;top:0;width:110px;offset-path:path('M14 128 C 90 20, 210 20, 286 118');
  offset-rotate:auto;offset-anchor:50% 50%;animation:sc-fly 5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sc-fly{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* ------------------------------------------------------------- route */
.sc-route{display:flex;align-items:center;padding:0 9%}
.sc-end{position:relative;z-index:1;flex:0 0 auto;display:grid;place-items:center;width:78px;height:78px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.sc-end-b{color:var(--yellow);border-color:rgba(var(--yellow-rgb),.5)}
.sc-line{position:relative;flex:1 1 auto;height:2px;margin:0 6px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 14px)}
.sc-cargo{position:absolute;z-index:3;left:0;top:50%;display:grid;place-items:center;width:42px;height:42px;margin:-21px 0 0 -21px;
  background:var(--yellow);color:var(--navy);animation:sc-carry 3.2s var(--ease) infinite}
@keyframes sc-carry{0%{left:0;opacity:0}10%{opacity:1}80%{left:100%;opacity:1}100%{left:100%;opacity:0}}
/* The checkpoint answers as the cargo reaches the middle of its run. */
.sc-check{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:50px;height:50px;margin:-25px 0 0 -25px;
  border:1px solid var(--line);border-radius:50%;background:var(--off);color:var(--ink);animation:sc-pass 3.2s ease-out 1.28s infinite}
@keyframes sc-pass{0%{box-shadow:0 0 0 0 rgba(var(--yellow-rgb),.7);border-color:var(--yellow);color:var(--yellow)}
  30%{box-shadow:0 0 0 18px rgba(var(--yellow-rgb),0);border-color:var(--yellow);color:var(--yellow)}
  45%,100%{box-shadow:none;border-color:var(--line);color:var(--ink)}}
.sc-stop{position:absolute;z-index:2;left:var(--p);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid var(--line);
  border-radius:50%;background:var(--off);animation:sc-hit 3.2s ease-out var(--d) infinite}
@keyframes sc-hit{0%{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 0 rgba(var(--yellow-rgb),.6)}
  25%{box-shadow:0 0 0 12px rgba(var(--yellow-rgb),0)}45%{background:var(--yellow);border-color:var(--yellow)}
  46%,100%{background:var(--off);border-color:var(--line)}}

/* -------------------------------------------------------------- seal */
.sc-seal .sc-ring,.sc-seal .sc-core,.sc-seal .sc-orbit{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.sc-seal .sc-ring{width:150px;height:150px;border:2px dashed rgba(var(--yellow-rgb),.55);animation:sc-turn 24s linear infinite}
.sc-seal .sc-ring i{position:absolute;inset:14px;border:1px solid var(--line);border-radius:50%}
.sc-seal .sc-core{display:grid;place-items:center;width:96px;height:96px;background:var(--yellow);color:var(--navy);
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sc-seal .sc-orbit{width:196px;height:196px;animation:sc-turn 7s linear infinite}
.sc-seal .sc-orbit i{position:absolute;left:50%;top:-13px;display:grid;place-items:center;width:26px;height:26px;margin-left:-13px;
  border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--yellow)}

/* ------------------------------------------------ box: FCL and LCL */
.sc-can{position:absolute;left:50%;top:54%;display:grid;gap:4px;width:min(80%,300px);height:112px;padding:6px;
  transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.6);border-radius:3px;
  background:repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,255,255,.06) 16px 18px)}
.sc-can.is-full{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);padding-right:40px}
.sc-can.is-mixed{grid-template-columns:1.6fr 1fr 1.2fr;grid-template-rows:repeat(2,1fr)}
.sc-crate{border-radius:2px;background:var(--yellow);opacity:0;animation:sc-drop 5s var(--ease) infinite;animation-delay:calc(var(--k) * .16s)}
.sc-crate::after{content:'';display:block;height:100%;background:linear-gradient(90deg,transparent 46%,rgba(0,0,0,.14) 46% 54%,transparent 54%)}
/* LCL: several shippers' loads, each its own colour, and a space left over. */
.sc-can.is-mixed .c0{grid-row:1 / 3}
.sc-can.is-mixed .c1{background:#FFFFFF}
.sc-can.is-mixed .c2{background:#C9C7DC}
.sc-can.is-mixed .c3{background:#8F8CAB}
.sc-can.is-mixed .c4{background:transparent;border:2px dashed rgba(var(--yellow-rgb),.7)}
.sc-can.is-mixed .c4::after{display:none}
@keyframes sc-drop{0%{opacity:0;transform:translateY(-44px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
/* FCL: once it is full, the doors swing shut on it. */
.sc-doors{position:absolute;top:0;right:0;bottom:0;display:flex;width:34px}
.sc-doors b{flex:1;background:rgba(255,255,255,.85);border-left:2px solid rgba(22,19,62,.25);transform:scaleX(0);transform-origin:100% 50%}
.sc-can.is-full .sc-doors b{animation:sc-shut 5s var(--ease) infinite}
.sc-can.is-mixed .sc-doors{display:none}
@keyframes sc-shut{0%,40%{transform:scaleX(0)}50%,82%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}

/* -------------------------------------------------------------- rack */
/* Stock arrives slot by slot and leaves first in, first out. */
.sc-shelf{position:absolute;left:50%;top:52%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);
  width:min(74%,290px);height:132px;transform:translate(-50%,-50%);border-left:5px solid #C9C7DC;border-right:5px solid #C9C7DC;
  background:linear-gradient(#C9C7DC,#C9C7DC) 0 33.3% / 100% 3px no-repeat,linear-gradient(#C9C7DC,#C9C7DC) 0 66.6% / 100% 3px no-repeat,
             linear-gradient(#C9C7DC,#C9C7DC) 0 100% / 100% 3px no-repeat}
.sc-shelf i{margin:6px 5px;border-radius:2px;background:var(--yellow);opacity:0;animation:sc-stock 6s var(--ease) infinite;
  animation-delay:calc(var(--k) * .2s)}
.sc-shelf i:nth-child(3n+2){background:#FFFFFF}
.sc-shelf i:nth-child(5n){background:#8F8CAB}
@keyframes sc-stock{0%{opacity:0;transform:translateX(-14px)}6%,58%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateX(14px)}}
.sc-scan-beam{position:absolute;left:0;right:0;top:6%;height:2px;background:linear-gradient(90deg,transparent,var(--yellow),transparent);
  box-shadow:0 0 12px var(--yellow);animation:sc-beam 2.4s ease-in-out infinite alternate}
@keyframes sc-beam{from{top:6%}to{top:94%}}

/* -------------------------------------------------------------- pack */
.sc-carton{position:absolute;left:50%;top:62%;width:150px;height:92px;transform:translate(-50%,-50%);border-radius:3px;
  background:#E4E3EE;box-shadow:inset 0 -10px 0 rgba(22,19,62,.08),0 20px 30px rgba(0,0,0,.3)}
.sc-item{position:absolute;left:50%;top:-40px;width:44px;height:30px;margin-left:-22px;border-radius:2px;background:var(--yellow);
  box-shadow:0 0 0 2px rgba(22,19,62,.12);animation:sc-item 5s var(--ease) infinite}
@keyframes sc-item{0%{top:-70px;opacity:0}6%{opacity:1}18%{top:-6px;opacity:1}24%,100%{top:-6px;opacity:0}}
.sc-flap{position:absolute;top:0;width:50%;height:30px;background:#C9C7DC}
.sc-flap-l{left:0;transform-origin:0 0;animation:sc-flap-l 5s var(--ease) infinite}
.sc-flap-r{right:0;transform-origin:100% 0;animation:sc-flap-r 5s var(--ease) infinite}
@keyframes sc-flap-l{0%,20%{transform:rotate(-104deg)}34%,90%{transform:rotate(0)}100%{transform:rotate(-104deg)}}
@keyframes sc-flap-r{0%,22%{transform:rotate(104deg)}36%,90%{transform:rotate(0)}100%{transform:rotate(104deg)}}
/* TGL's yellow tape along the seam. */
.sc-tape{position:absolute;left:50%;top:0;width:26px;height:44px;margin-left:-13px;background:var(--yellow);transform:scaleY(0);
  transform-origin:top;animation:sc-tape 5s var(--ease) infinite}
@keyframes sc-tape{0%,38%{transform:scaleY(0)}48%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.sc-label{position:absolute;left:16px;bottom:12px;display:flex;align-items:stretch;gap:2px;width:64px;height:34px;padding:5px;
  border-radius:2px;background:#FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.2);opacity:0;animation:sc-label 5s var(--ease) infinite}
.sc-label b{flex:1;background:#16133E}
.sc-label b:nth-child(2n){flex:.45}
@keyframes sc-label{0%,50%{opacity:0;transform:scale(1.4) rotate(-6deg)}56%,90%{opacity:1;transform:none}100%{opacity:0}}
/* Relabelling: the carton arrives closed, the old label peels away. */
.sc-carton.is-relabel .sc-flap,.sc-carton.is-relabel .sc-tape{animation:none;transform:none}
.sc-carton.is-relabel .sc-label-old{opacity:1;animation:sc-peel 5s var(--ease) infinite}
.sc-carton.is-relabel .sc-label-old b{background:#8F8CAB}
@keyframes sc-peel{0%,26%{opacity:1;transform:none}42%,100%{opacity:0;transform:translate(-34px,-24px) rotate(-28deg)}}

/* -------------------------------------------------------------- bars */
.sc-chart{position:absolute;left:50%;top:52%;display:flex;align-items:flex-end;gap:10px;width:min(70%,280px);height:130px;
  padding:0 6px;transform:translate(-50%,-50%);border-bottom:2px solid rgba(255,255,255,.35)}
.sc-chart i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:#FFFFFF;transform-origin:bottom}
/* Stock levels rising and falling above the reorder line. */
.sc-chart.is-stock i{animation:sc-level 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.55s)}
.sc-chart.is-stock i:nth-child(3){background:var(--yellow)}
@keyframes sc-level{from{transform:scaleY(1)}to{transform:scaleY(.5)}}
.sc-reorder{position:absolute;left:0;right:0;bottom:30%;border-top:2px dashed rgba(var(--yellow-rgb),.85)}
/* Costs stepping down, the trend drawn across them. */
.sc-chart.is-cost i{background:linear-gradient(var(--yellow),rgba(var(--yellow-rgb),.45));animation:sc-grow 5s var(--ease) infinite;
  animation-delay:calc(var(--k) * .12s)}
@keyframes sc-grow{0%{transform:scaleY(0)}28%,86%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
.sc-trend{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc-trend path{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:420;stroke-dashoffset:420;animation:sc-trend 5s var(--ease) infinite}
@keyframes sc-trend{0%,22%{stroke-dashoffset:420}58%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:420}}

/* -------------------------------------------------------------- lift */
.sc-mast,.sc-jib{position:absolute;background:
  repeating-linear-gradient(45deg,transparent 0 5px,rgba(201,199,220,.9) 5px 7px),
  linear-gradient(rgba(201,199,220,.9),rgba(201,199,220,.9)) top / 100% 2px no-repeat,
  linear-gradient(rgba(201,199,220,.9),rgba(201,199,220,.9)) bottom / 100% 2px no-repeat}
.sc-mast{left:22%;top:10%;bottom:12%;width:14px}
.sc-jib{left:22%;right:12%;top:10%;height:14px}
.sc-hoist{position:absolute;left:64%;top:calc(10% + 14px);display:flex;flex-direction:column;align-items:center;width:100px;margin-left:-50px}
.sc-cable{display:block;width:2px;height:74px;background:#FFFFFF;animation:sc-cable 4.6s ease-in-out infinite}
@keyframes sc-cable{0%,14%{height:74px}50%,64%{height:22px}100%{height:74px}}
.sc-hook{display:block;width:16px;height:12px;border:3px solid #FFFFFF;border-top:0;border-radius:0 0 10px 10px}
.sc-load{display:block;width:100px;height:46px;margin-top:2px;border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 8px,#16133E 8px 16px) left / 12px 100% no-repeat,
             repeating-linear-gradient(45deg,var(--yellow) 0 8px,#16133E 8px 16px) right / 12px 100% no-repeat,var(--yellow)}
.sc-ground{position:absolute;left:12%;right:12%;bottom:12%;height:2px;background:rgba(255,255,255,.35)}

/* ------------------------------------------------------------- gauge */
.sc-std,.sc-oog{position:absolute;left:50%;top:56%;width:180px;height:82px;border-radius:3px;transform:translate(-50%,-50%)}
.sc-std{z-index:2;border:2px dashed rgba(255,255,255,.7)}
.sc-oog{background:repeating-linear-gradient(45deg,var(--yellow) 0 8px,#16133E 8px 16px) left / 12px 100% no-repeat,
  repeating-linear-gradient(45deg,var(--yellow) 0 8px,#16133E 8px 16px) right / 12px 100% no-repeat,var(--yellow);
  animation:sc-oog 4.6s var(--ease) infinite}
@keyframes sc-oog{0%,12%{transform:translate(-50%,-50%) scale(.72)}42%,86%{transform:translate(-50%,-58%) scale(1.3,1.34)}100%{transform:translate(-50%,-50%) scale(.72)}}
.sc-dim{position:absolute;background:var(--yellow);opacity:0;animation:sc-dim 4.6s var(--ease) infinite}
.sc-dim::before,.sc-dim::after{content:'';position:absolute;width:8px;height:8px;border-top:2px solid var(--yellow);border-left:2px solid var(--yellow)}
.sc-dim-w{left:calc(50% - 124px);top:calc(56% + 52px);width:248px;height:2px}
.sc-dim-w::before{left:0;top:-4px;transform:rotate(-45deg)}
.sc-dim-w::after{right:0;top:-4px;transform:rotate(135deg)}
.sc-dim-h{left:calc(50% + 132px);top:calc(56% - 70px);width:2px;height:112px}
.sc-dim-h::before{left:-4px;top:0;transform:rotate(45deg)}
.sc-dim-h::after{left:-4px;bottom:0;transform:rotate(225deg)}
@keyframes sc-dim{0%,40%{opacity:0}52%,86%{opacity:1}100%{opacity:0}}

/* ------------------------------------------------------------- chain */
.sc-chain{display:flex;align-items:center;justify-content:center;padding:0 7%}
.sc-tile{flex:0 0 auto;display:grid;place-items:center;width:76px;height:76px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);animation:sc-tile 4.2s infinite;animation-delay:calc(var(--k) * 1.1s)}
@keyframes sc-tile{0%,3%{background:var(--card);border-color:var(--line);color:var(--ink);transform:none}
  10%,30%{background:var(--yellow);border-color:var(--yellow);color:var(--navy);transform:translateY(-7px)}
  40%,100%{background:var(--card);border-color:var(--line);color:var(--ink);transform:none}}
.sc-link{position:relative;flex:1 1 auto;max-width:96px;height:2px;margin:0 8px;overflow:hidden;background:rgba(255,255,255,.22)}
.sc-link i{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;
  animation:sc-link 4.2s infinite;animation-delay:calc(var(--k) * 1.1s - .6s)}
@keyframes sc-link{0%{transform:scaleX(0);opacity:1}14%{transform:scaleX(1);opacity:1}30%,100%{transform:scaleX(1);opacity:0}}

/* ----------------------------------------------------------- network */
.sc-network .sc-stage::before{content:'';position:absolute;inset:-10px -20px;opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.22) 1.2px,transparent 1.6px) 0 0 / 12px 12px;
  -webkit-mask:radial-gradient(ellipse,#000 40%,transparent 72%);mask:radial-gradient(ellipse,#000 40%,transparent 72%)}
.sc-map .sc-hop{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;
  animation:sc-hop 5s var(--ease) infinite;animation-delay:calc(var(--k) * .7s)}
@keyframes sc-hop{0%{stroke-dashoffset:170}24%,80%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:170}}
.sc-map .sc-node{fill:var(--off);stroke:#FFFFFF;stroke-width:2;animation:sc-node 5s infinite;animation-delay:calc(var(--k) * .7s)}
@keyframes sc-node{0%,4%{fill:var(--off);stroke:#FFFFFF}12%,84%{fill:var(--yellow);stroke:var(--yellow)}96%,100%{fill:var(--off);stroke:#FFFFFF}}

/* --------------------------------------------------------------- hub */
.sc-spokes path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2;stroke-dasharray:4 6}
.sc-vendor{position:absolute;z-index:1;display:grid;place-items:center;width:42px;height:42px;margin:-21px 0 0 -21px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.sc-pulse{position:absolute;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 10px var(--yellow);opacity:0;animation:sc-feed 2.4s ease-in infinite;animation-delay:calc(var(--k) * .6s)}
@keyframes sc-feed{0%{transform:translate(0,0);opacity:0}15%,85%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.sc-hub .sc-core{position:absolute;z-index:3;left:150px;top:75px;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:var(--yellow);animation:sc-heart 2.4s ease-in-out infinite}
.sc-hub .sc-core img{display:block;width:30px;height:30px}
@keyframes sc-heart{0%,100%{box-shadow:0 0 0 8px rgba(var(--yellow-rgb),.16)}50%{box-shadow:0 0 0 15px rgba(var(--yellow-rgb),.04)}}

/* ----------------------------------------------------------- reroute */
.sc-paths path{fill:none;stroke-width:2.5;stroke-linecap:round}
.sc-paths .sc-old{stroke:rgba(255,255,255,.3);stroke-dasharray:5 7}
.sc-paths .sc-new{stroke:var(--yellow);stroke-dasharray:440;stroke-dashoffset:440;animation:sc-new 5s var(--ease) infinite}
@keyframes sc-new{0%,14%{stroke-dashoffset:440}48%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:440}}
.sc-reroute .sc-pin-a{left:24px;top:110px}
.sc-reroute .sc-pin-b{left:276px;top:110px}
.sc-reroute .sc-pin-b.is-opt{top:36px}
/* The trouble on the direct route. */
.sc-block{position:absolute;left:150px;top:110px;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid #FFFFFF;border-radius:5px;
  background:var(--off);animation:sc-warn 1.2s ease-in-out infinite alternate}
.sc-block::before,.sc-block::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#FFFFFF;transform:rotate(45deg)}
.sc-block::after{transform:rotate(-45deg)}
@keyframes sc-warn{to{border-color:var(--yellow);box-shadow:0 0 0 6px rgba(var(--yellow-rgb),.18)}}
.sc-traveller{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 12px var(--yellow);
  offset-rotate:0deg;offset-anchor:50% 50%;animation:sc-travel 5s var(--ease) infinite}
.sc-t-risk{offset-path:path('M24 110 C 90 110, 100 34, 150 34 S 210 110, 276 110')}
.sc-t-opt{offset-path:path('M24 110 C 110 96, 190 70, 276 36')}
@keyframes sc-travel{0%,46%{offset-distance:0%;opacity:0}50%{opacity:1}84%{offset-distance:100%;opacity:1}90%,100%{offset-distance:100%;opacity:0}}

/* -------------------------------------------------------------- scan */
.sc-sheet{position:absolute;left:50%;top:52%;display:flex;flex-direction:column;justify-content:space-between;width:min(60%,236px);
  height:150px;padding:16px 18px;transform:translate(-50%,-50%);border-radius:4px;background:#FFFFFF;box-shadow:0 20px 34px rgba(0,0,0,.35)}
.sc-sheet i{position:relative;display:block;width:var(--w);height:8px;border-radius:4px;background:#C9C7DC}
.sc-sheet i.is-flag{animation:sc-flag 4s infinite;animation-delay:calc(var(--k) * .42s)}
.sc-sheet i b{position:absolute;right:-22px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--yellow);opacity:0}
.sc-sheet i.is-flag b{animation:sc-dot 4s infinite;animation-delay:calc(var(--k) * .42s)}
@keyframes sc-flag{0%,100%{background:#C9C7DC}12%,80%{background:var(--yellow)}}
@keyframes sc-dot{0%,6%{opacity:0;transform:scale(.4)}14%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.sc-lens{position:absolute;left:calc(50% - 26px);top:calc(52% - 92px);width:52px;height:52px;border:4px solid var(--yellow);border-radius:50%;
  background:rgba(var(--yellow-rgb),.14);animation:sc-lens 4s ease-in-out infinite}
.sc-lens::after{content:'';position:absolute;right:-15px;bottom:-11px;width:20px;height:6px;border-radius:3px;background:var(--yellow);transform:rotate(45deg)}
@keyframes sc-lens{0%,100%{transform:translate(-48px,24px)}50%{transform:translate(46px,112px)}}

/* ------------------------------------------------------------- radar */
.sc-dish{position:absolute;left:50%;top:50%;width:172px;height:172px;overflow:hidden;transform:translate(-50%,-50%);
  border:1px solid rgba(var(--yellow-rgb),.45);border-radius:50%;
  background:radial-gradient(circle,transparent 0 31%,rgba(var(--yellow-rgb),.16) 31.5% 32.5%,transparent 33% 64%,rgba(var(--yellow-rgb),.16) 64.5% 65.5%,transparent 66%),
             linear-gradient(transparent calc(50% - .5px),rgba(var(--yellow-rgb),.14) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
             linear-gradient(90deg,transparent calc(50% - .5px),rgba(var(--yellow-rgb),.14) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.sc-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(var(--yellow-rgb),.5),transparent 70deg);
  animation:sc-sweep 3s linear infinite}
@keyframes sc-sweep{to{transform:rotate(360deg)}}
.sc-dish b{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#FFFFFF;opacity:.3;
  animation:sc-blip 3s infinite;animation-delay:calc(var(--k) * .6s)}
@keyframes sc-blip{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.6)}40%{opacity:.4;box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{opacity:.3}}

@media (max-width:640px){
  .sc-seal .sc-orbit{width:170px;height:170px}
}

/* ==========================================================================
   Hero scenes — for services with no film of their own. The text keeps the
   left of the hero; the picture takes the right.
   ========================================================================== */
.sv-hs{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#07061A 0%,#100E2B 58%,#1B1748 100%)}
.hs-moon{position:absolute;right:13%;top:13%;width:clamp(46px,5vw,72px);aspect-ratio:1;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 60px 16px rgba(var(--yellow-rgb),.22)}
.hs-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFFFFF;opacity:.55;animation:hs-twinkle 3.4s ease-in-out infinite}
.hs-stars i:nth-child(1){left:52%;top:12%}.hs-stars i:nth-child(2){left:64%;top:26%;animation-delay:.6s}
.hs-stars i:nth-child(3){left:72%;top:8%;animation-delay:1.2s}.hs-stars i:nth-child(4){left:92%;top:30%;animation-delay:1.8s}
.hs-stars i:nth-child(5){left:58%;top:34%;animation-delay:.3s}.hs-stars i:nth-child(6){left:79%;top:38%;animation-delay:2.2s}
.hs-stars i:nth-child(7){left:96%;top:9%;animation-delay:1s}
.hs-stars i:nth-child(8){left:44%;top:20%;animation-delay:2.6s}.hs-stars i:nth-child(9){left:68%;top:46%;width:3px;height:3px;animation-delay:.9s}
.hs-stars i:nth-child(10){left:86%;top:52%;animation-delay:1.5s}.hs-stars i:nth-child(11){left:60%;top:5%;width:3px;height:3px;animation-delay:2s}
.hs-stars i:nth-child(12){left:37%;top:9%;animation-delay:.4s}
@keyframes hs-twinkle{50%{opacity:.12}}

/* ------------------------------------------------------------------ sea */
/* Three swells at their own speeds, the ship riding the middle one. */
.hs-sea{position:absolute;left:0;right:0;bottom:0;height:46%}
.hs-sea::before{content:'';position:absolute;left:0;right:0;top:38%;bottom:0;background:linear-gradient(180deg,#241F5C,#1B1748 55%,#100D33)}
.hs-wave{position:absolute;left:0;width:200%;animation:hs-waves 14s linear infinite}
.hs-w3{bottom:60%;height:15%;fill:#241F5C;animation-duration:26s}
.hs-w2{bottom:28%;height:24%;fill:#1B1748;animation-duration:17s}
.hs-w1{bottom:-2%;height:32%;fill:#100D33;animation-duration:11s}
/* Moonlight catching the crests: yellow on the far swell, white nearer in. */
.hs-crest{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2;vector-effect:non-scaling-stroke}
.hs-w3 .hs-crest{stroke:rgba(var(--yellow-rgb),.32)}
.hs-w1 .hs-crest{stroke:rgba(255,255,255,.09)}
@keyframes hs-waves{to{transform:translateX(-50%)}}
.hs-ship{position:absolute;right:5%;bottom:40%;width:clamp(260px,36vw,520px);transform-origin:50% 90%;animation:hs-bob 5s ease-in-out infinite}
.hs-ship .veh{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
@keyframes hs-bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(9px) rotate(1.2deg)}}

/* ----------------------------------------------------------------- road */
.hs-port{position:absolute;right:0;bottom:22%;width:min(70vw,900px);height:auto;aspect-ratio:900 / 260}
.hs-cranes path{fill:none;stroke:rgba(255,255,255,.09);stroke-width:6;stroke-linejoin:round}
.hs-stacks rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.1);stroke-width:2}
.hs-road{position:absolute;left:0;right:0;bottom:0;height:22%;overflow:hidden;background:#0A0820;border-top:2px solid rgba(255,255,255,.1)}
.hs-lane{position:absolute;left:0;top:50%;width:200%;height:4px;margin-top:-2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 60px,transparent 60px 130px);animation:hs-lane .9s linear infinite}
@keyframes hs-lane{to{transform:translateX(-130px)}}
/* The wheels sit on the box's bottom edge, so it can stand on the road. */
.hs-rig{position:absolute;right:5%;bottom:12%;width:clamp(260px,32vw,460px);animation:hs-rumble .45s ease-in-out infinite alternate}
.hs-rig.is-oversize{right:3%;width:clamp(300px,40vw,600px)}
.hs-rig .veh{position:relative;display:block;width:100%;height:auto;transform:translateY(13.5%);filter:drop-shadow(0 14px 16px rgba(0,0,0,.5))}
.hs-rig .sc-rig{transform:translateY(9%)}
@keyframes hs-rumble{from{transform:translateY(0)}to{transform:translateY(-2px)}}
/* Headlights on the road ahead. */
.hs-beam{position:absolute;left:97%;bottom:10%;width:40%;height:36%;background:linear-gradient(90deg,rgba(var(--yellow-rgb),.32),transparent);
  clip-path:polygon(0 38%,100% 0,100% 100%,0 62%);filter:blur(3px)}
.sc-beacon{animation:hs-beacon 1s steps(2,jump-none) infinite}
@keyframes hs-beacon{0%{opacity:1}100%{opacity:.25}}

/* ------------------------------------------------ working drawings */
.hs-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask:radial-gradient(ellipse at 74% 50%,#000 26%,transparent 70%);
  mask:radial-gradient(ellipse at 74% 50%,#000 26%,transparent 70%)}
.hs-board{position:absolute;right:4%;top:50%;width:clamp(300px,40vw,560px);aspect-ratio:560 / 380;transform:translateY(-50%)}
.hs-plan{display:block;width:100%;height:100%;overflow:visible}
.hs-plan g{transform-box:fill-box}

/* Customs: the declaration writes itself, is signed and stamped, the barrier
   lifts and the box goes through. */
.hs-doc rect{fill:rgba(255,255,255,.04);stroke:#FFFFFF;stroke-width:2}
.hs-doc-h{stroke:var(--yellow);stroke-width:6;stroke-linecap:round}
.hs-row{stroke:rgba(255,255,255,.55);stroke-width:5;stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;
  animation:hs-write 7s var(--ease) infinite;animation-delay:calc(var(--k) * .25s)}
@keyframes hs-write{0%{stroke-dashoffset:180}14%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:180}}
.hs-sign{fill:none;stroke:#FFFFFF;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;animation:hs-sign 7s ease infinite}
@keyframes hs-sign{0%,16%{stroke-dashoffset:170}24%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:170}}
.hs-stamp circle{fill:none;stroke:var(--yellow);stroke-width:4}
.hs-stamp path{fill:none;stroke:var(--yellow);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.hs-stamp{transform-origin:center;opacity:0;animation:hs-stamp 7s var(--ease) infinite}
@keyframes hs-stamp{0%,26%{opacity:0;transform:scale(1.6) rotate(-14deg)}30%{opacity:1;transform:scale(.94) rotate(-10deg)}
  33%,88%{opacity:1;transform:scale(1) rotate(-10deg)}96%,100%{opacity:0;transform:scale(1) rotate(-10deg)}}
.hs-post{fill:#C9C7DC}
.hs-arm rect{fill:var(--yellow)}
.hs-arm path{stroke:#16133E;stroke-width:9}
.hs-plan .hs-arm{transform-box:view-box;transform-origin:339px 214px;animation:hs-arm 7s var(--ease) infinite}
@keyframes hs-arm{0%,36%{transform:rotate(0)}44%,70%{transform:rotate(-78deg)}78%,100%{transform:rotate(0)}}
.hs-can rect{fill:rgba(255,255,255,.1);stroke:#FFFFFF;stroke-width:2}
.hs-can path{stroke:rgba(255,255,255,.35);stroke-width:2}
.hs-can{animation:hs-can 7s var(--ease) infinite}
@keyframes hs-can{0%,44%{transform:translateX(0);opacity:1}62%{transform:translateX(210px);opacity:1}68%{transform:translateX(270px);opacity:0}
  74%{transform:translateX(-50px);opacity:0}86%,100%{transform:translateX(0);opacity:1}}
.hs-floor{stroke:rgba(255,255,255,.3);stroke-width:2}

/* Project: the plan fills in, milestones light, and the modes take their
   turns as the marker reaches each one. */
.hs-mode-line{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:6 8}
.hs-modes circle{fill:var(--off);stroke:#FFFFFF;stroke-width:2}
.hs-modes .hs-dot{fill:var(--yellow);stroke:none;animation:hs-dot 6s var(--ease) infinite}
@keyframes hs-dot{0%,8%{transform:translateX(0);opacity:1}33%,41%{transform:translateX(220px)}67%,88%{transform:translateX(440px);opacity:1}
  96%{transform:translateX(440px);opacity:0}100%{transform:translateX(0);opacity:0}}
.hs-mode-icons{position:absolute;inset:0}
.hs-mi{position:absolute;top:18.4%;display:grid;place-items:center;width:9.3%;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);
  background:#1B1748;color:#FFFFFF;transform:translate(-50%,-50%);animation:hs-mi 6s infinite;animation-delay:calc(var(--k) * 2s)}
.hs-mi svg{width:50%;height:auto}
.hs-mi:nth-child(1){left:10.7%}.hs-mi:nth-child(2){left:50%}.hs-mi:nth-child(3){left:89.3%}
@keyframes hs-mi{0%{background:#1B1748;border-color:rgba(255,255,255,.18);color:#FFFFFF}
  3%,22%{background:var(--yellow);border-color:var(--yellow);color:#16133E}
  30%,100%{background:#1B1748;border-color:rgba(255,255,255,.18);color:#FFFFFF}}
.hs-bar{fill:rgba(255,255,255,.85);transform-box:fill-box;transform-origin:left center;transform:scaleX(0);
  animation:hs-bar 6s var(--ease) infinite;animation-delay:calc(var(--k) * .45s)}
.hs-bar.is-y{fill:var(--yellow)}
@keyframes hs-bar{0%{transform:scaleX(0)}18%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.hs-diamond{fill:#07061A;stroke:var(--yellow);stroke-width:2;animation:hs-dia 6s infinite;animation-delay:calc(var(--k) * .45s + .9s)}
@keyframes hs-dia{0%{fill:#07061A}8%,78%{fill:var(--yellow)}88%,100%{fill:#07061A}}
.hs-axis{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2}
.hs-today{stroke:var(--yellow);stroke-width:2;stroke-dasharray:4 5;animation:hs-today 6s linear infinite}
@keyframes hs-today{0%{transform:translateX(0);opacity:1}88%{transform:translateX(470px);opacity:1}100%{transform:translateX(470px);opacity:0}}

/* Consultancy: the costs come down and the lens follows the trend. */
.hs-col{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.34);stroke-width:2;transform-box:fill-box;transform-origin:bottom;
  animation:hs-col 6s var(--ease) infinite;animation-delay:calc(var(--k) * .15s)}
@keyframes hs-col{0%{transform:scaleY(0)}20%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
.hs-trend{fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round;stroke-dasharray:470;stroke-dashoffset:470;
  animation:hs-trend 6s var(--ease) infinite}
@keyframes hs-trend{0%,18%{stroke-dashoffset:470}52%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:470}}
.hs-lens circle{fill:rgba(var(--yellow-rgb),.1);stroke:#FFFFFF;stroke-width:4}
.hs-lens path{stroke:#FFFFFF;stroke-width:6;stroke-linecap:round}
.hs-plan .hs-lens{transform-box:view-box;animation:hs-lens 6s ease-in-out infinite}
@keyframes hs-lens{0%,20%{transform:translate(80px,110px)}54%{transform:translate(300px,196px)}82%,100%{transform:translate(480px,250px)}}

/* ------------------------------------------------ hero layout with a scene */
@media (min-width:901px){
  .sv-cine.is-scene .sv-cine-shade{background:linear-gradient(90deg,rgba(7,6,26,.92) 0%,rgba(7,6,26,.62) 34%,rgba(7,6,26,0) 58%)}
  .sv-cine.is-scene .sv-cine-h,.sv-cine.is-scene .sv-cine-p{max-width:min(640px,52vw)}
  .sv-cine.is-scene .sv-cine-a{font-size:clamp(42px,5vw,76px)}
}

/* Phones and small tablets: the picture sits above the words, not behind. */
@media (max-width:900px){
  .sv-cine.is-scene{justify-content:flex-start}
  .sv-cine.is-scene .sv-cine-bg{position:relative;inset:auto;flex:0 0 auto;height:clamp(240px,60vw,380px)}
  .sv-cine.is-scene .sv-cine-shade{background:linear-gradient(0deg,#07061A 0%,rgba(7,6,26,0) 32%)}
  .sv-cine.is-scene .sv-cine-in{padding-top:6px}
  .hs-board{right:50%;width:min(88vw,460px);transform:translate(50%,-50%)}
  .hs-grid{-webkit-mask:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 74%);mask:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 74%)}
  .hs-ship{right:50%;width:min(72vw,420px);margin-right:calc(min(72vw,420px) / -2)}
  .hs-rig{right:50%;width:min(64vw,400px);margin-right:calc(min(64vw,400px) / -2)}
  .hs-rig.is-oversize{right:50%;width:min(86vw,500px);margin-right:calc(min(86vw,500px) / -2)}
  .hs-beam{display:none}
  .hs-moon{right:8%;top:10%}
  .hs-port{width:140vw}
}

/* ------------------------------------------------------- reduced motion */
/* Every scene rests on its finished picture. */
@media (prefers-reduced-motion:reduce){
  .sv-art *,.sv-hs *{animation:none!important}
  .sc-crate,.sc-shelf i,.sc-label:not(.sc-label-old),.sc-dim,.hs-stamp{opacity:1!important}
  .sc-crate,.sc-shelf i,.sc-label,.sc-flap,.sc-tape,.sc-link i,.hs-bar,.hs-col{transform:none!important}
  .sc-label-old,.sc-item,.sc-pulse,.sc-traveller{opacity:0!important}
  .sc-map .sc-hop,.sc-paths .sc-new,.sc-trend path,.hs-row,.hs-sign,.hs-trend{stroke-dashoffset:0!important}
  .sc-doors b{transform:scaleX(1)!important}
  .sc-cargo{left:100%!important}
  .sc-map .sc-node{fill:var(--yellow)}
  .sc-arc .sc-veh{offset-distance:50%}
  .sc-oog{transform:translate(-50%,-58%) scale(1.3,1.34)!important}
  .sc-sheet i.is-flag{background:var(--yellow)}
  .sc-sheet i.is-flag b{opacity:1}
  .hs-stamp{transform:rotate(-10deg)!important}
  .hs-plan .hs-lens{transform:translate(300px,196px)!important}
  .hs-diamond{fill:var(--yellow)}
}