/* ══════════════════════════════════════════════════════════════════
   BeeBuzzy — animated service card scenes
   Shared by the home page cards and the service page heroes so the two
   can never drift apart. The scene is authored in a fixed 400×500
   coordinate space (matching the SVG viewBox) and scaled as one unit,
   which is what keeps the lens centred on its markers at every size.
   ══════════════════════════════════════════════════════════════════ */

  /* ═══ Orbiting edge-flare card system ═══
     One animated <angle> custom property (--orbit) drives every lighting
     layer — flare, rim hairline and dot-matrix all rotate in lockstep.
     Applied as extra classes on top of each card's own layout classes. */
  @property --orbit {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  @keyframes orbit {
    to { --orbit: 360deg; }
  }
  .glow-card{
    --flare-rgb: 255 209 0;      /* brand yellow — main flare tint */
    --flare-deep-rgb: 0 89 96;   /* brand teal — hue the tail fades through */
    --core-rgb: 255 255 255;    /* white-hot core at the rim */
    --dot-rgb: 255 255 255;
    --radius: 28px;
    --speed: 22s;
    --start-angle: 225deg;
    --orbit: 0deg;
    animation: orbit var(--speed) linear infinite;
    /* deliberately NOT a stacking context: the negative-z glow layers must
       resolve against the section (which isolates), so every card's glow
       pools into one layer behind every card body — otherwise a card later
       in the DOM paints its glow over the card to its left. */
  }
  @media (prefers-reduced-motion: reduce){
    .glow-card{ animation:none; }
  }

  /* Dot matrix — visible only where the flare currently is:
     conic sector (rotates with --orbit) ∩ distance ring around the card */
  .glow-card__dots{
    position:absolute; inset:-150px; z-index:-2;
    pointer-events:none;
    background-image: radial-gradient(rgb(var(--dot-rgb) / .26) .85px, transparent .9px);
    background-size: 5px 5px;
    -webkit-mask-image:
      conic-gradient(from calc(var(--orbit) + var(--start-angle)) at 50% 50%,
        rgba(0,0,0,0) 20deg, rgba(0,0,0,.55) 58deg, #000 84deg,
        #000 96deg, rgba(0,0,0,.55) 122deg, rgba(0,0,0,0) 160deg),
      radial-gradient(ellipse 62% 60% at 50% 50%,
        rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.3) 58%, rgba(0,0,0,0) 72%);
    mask-image:
      conic-gradient(from calc(var(--orbit) + var(--start-angle)) at 50% 50%,
        rgba(0,0,0,0) 20deg, rgba(0,0,0,.55) 58deg, #000 84deg,
        #000 96deg, rgba(0,0,0,.55) 122deg, rgba(0,0,0,0) 160deg),
      radial-gradient(ellipse 62% 60% at 50% 50%,
        rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.3) 58%, rgba(0,0,0,0) 72%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* Flare layers — blurred copies of the card silhouette painted with a
     peaked conic sector; blur diffuses outward from the true edge so the
     light hugs the rim whether it crosses a corner or slides along a side. */
  .glow-card__flare{
    position:absolute; inset:-3px;
    border-radius: calc(var(--radius) + 2px);
    z-index:-1;
    pointer-events:none;
    background: conic-gradient(from calc(var(--orbit) + var(--start-angle)) at 50% 50%,
      rgb(var(--flare-deep-rgb) / 0) 28deg,
      rgb(var(--flare-rgb) / .35) 60deg,
      rgb(var(--flare-rgb) / .95) 90deg,
      rgb(var(--flare-rgb) / .35) 120deg,
      rgb(var(--flare-deep-rgb) / 0) 152deg);
  }
  .glow-card__flare--hot{
    inset:-2px;
    filter: blur(5px);
    background: conic-gradient(from calc(var(--orbit) + var(--start-angle)) at 50% 50%,
      rgb(var(--flare-rgb) / 0) 55deg,
      rgb(var(--core-rgb) / .75) 76deg,
      rgb(var(--core-rgb) / 1) 90deg,
      rgb(var(--core-rgb) / .75) 104deg,
      rgb(var(--flare-rgb) / 0) 125deg);
  }
  .glow-card__flare--tight{ filter: blur(10px); }
  .glow-card__flare--mid{ filter: blur(18px); opacity:.8; inset:-3px; }
  .glow-card__flare--soft{ filter: blur(34px); opacity:.5; inset:-4px; }

  /* Rim hairline — same conic scheme, so the bright edge line travels with
     the flare. Drawn with the padding + mask-composite border trick. */
  .glow-card__body::after{
    content:"";
    position:absolute; inset:0; z-index:2;
    border-radius:inherit;
    padding:1.5px;
    background: conic-gradient(from calc(var(--orbit) + var(--start-angle)) at 50% 50%,
      rgb(var(--flare-rgb) / .07) 30deg,
      rgb(var(--flare-rgb) / .65) 64deg,
      rgb(var(--core-rgb) / 1) 90deg,
      rgb(var(--flare-rgb) / .65) 116deg,
      rgb(var(--flare-rgb) / .07) 150deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
  }

  /* --- shared section tokens --- */
  /* One continuous dark run behind story → services → contact. Owning the
     background here (instead of per-section) means a card's glow can bleed
     across a section boundary without the next section's background
     painting over it. Isolating here also pools every card's negative-z
     glow into a single layer that sits behind every card body. */
  .dark-run{
    position:relative;
    isolation:isolate;
    background:var(--ink);
    overflow-x:clip;   /* clip sideways spill only — vertical bleed stays */
  }

  .svc-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  }
  .svc-card{
    position:relative; border-radius:20px;
    aspect-ratio:4/5; cursor:pointer;
    top:0;
    /* lift via `top`, not `transform` — a transform would make the card a
       stacking context and pull its glow back on top of its neighbours */
    transition: top .45s cubic-bezier(.22,.61,.36,1);
  }
  .svc-card:hover{
    top:-4px;
  }
  .svc-card__clip{
    position:absolute; inset:0; z-index:0;
    border-radius:20px;
    overflow:hidden;
    background:#0c0e0d;
    container-type:size;
    /* one uniform factor scaling the whole 400×500 scene with the card —
       tan(atan2()) turns a length ratio into a plain number */
    --svc-scene-scale: min(tan(atan2(100cqw, 400px)), tan(atan2(100cqh, 500px)));
  }
  .svc-scene{
    position:absolute; left:50%; top:50%;
    width:400px; height:500px;
    transform: translate(-50%,-50%) scale(var(--svc-scene-scale, 1));
  }

  /* ── Service card animated scenes (ported from nav-card.html) ──────
     Each card keeps its own accent (--svc-acc*) driving both the inner
     animation colours and, via --flare-rgb on the outer glow-card, the
     orbiting edge glow — so the border always matches that card's scene. */
  .svc-map{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .svc-shade{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(9,10,9,.62) 0%, rgba(9,10,9,.32) 30%, rgba(9,10,9,.05) 60%),
      radial-gradient(130% 110% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  }
  .svc-shade--soft{
    background: radial-gradient(130% 110% at 50% 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%);
  }

  .svc-glass{
    position:absolute; z-index:5;
    width:254px; padding:22px 60px 21px 24px; border-radius:28px;
    --svc-tilt:-6deg; --svc-tx:0px; --svc-ty:0px;
    left:26px; bottom:92px;
    transform: translate(var(--svc-tx), var(--svc-ty)) rotate(var(--svc-tilt));
    /* hover growth rides the independent `scale` property, so the float
       keyframes (which own `transform`) can't outrank the transition —
       that override is what made the old --svc-hs version snap */
    scale:1;
    transition: scale 1.15s cubic-bezier(.22,.61,.36,1);
    background: linear-gradient(155deg, rgba(186,196,188,.26) 0%, rgba(142,152,144,.16) 55%, rgba(120,130,122,.20) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
            backdrop-filter: blur(16px) saturate(1.2);
    border:1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 50px -12px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.22);
    color:#eef1ef;
    animation: svc-glass-float 9s ease-in-out infinite;
  }
  @keyframes svc-glass-float {
    0%, 100% { transform: translate(var(--svc-tx), var(--svc-ty)) rotate(var(--svc-tilt)); }
    50%      { transform: translate(var(--svc-tx), calc(var(--svc-ty) - 5px)) rotate(var(--svc-tilt)); }
  }
  .svc-card:hover .svc-glass{ scale:1.05; }
  .svc-glass--top{ left:28px; top:54px; bottom:auto; --svc-tilt:4deg; }
  .svc-glass--mid{
    left:50%; top:50%; bottom:auto; width:296px;
    --svc-tx:-50%; --svc-ty:-50%; --svc-tilt:-3deg;
  }
  .svc-glass-title{ font-size:19.5px; font-weight:550; letter-spacing:.2px; }
  .svc-glass-sub{ font-size:14px; color:rgba(230,236,232,.62); margin-top:5px; }
  .svc-glass-go{
    position:absolute; right:16px; bottom:16px; width:31px; height:31px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  }

  /* Card 1 (Buy) — calculator typing → split-flap payout counter */
  .svc-calc{
    position:absolute; left:50%; bottom:26px; z-index:4;
    width:136px; padding:10px; border-radius:18px;
    transform: translateX(-50%) rotate(3deg);
    background: rgba(20,24,22,.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
            backdrop-filter: blur(12px) saturate(1.15);
    border:1px solid rgba(255,255,255,.13);
    box-shadow: 0 22px 46px -12px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.16);
    animation: svc-calc-float 9s ease-in-out -3s infinite;
  }
  @keyframes svc-calc-float {
    0%, 100% { transform: translateX(-50%) rotate(3deg) scale(1); }
    50%      { transform: translateX(-50%) translateY(-5px) rotate(3deg) scale(1.035); }
  }
  .svc-calc-screen{
    position:relative; height:32px; border-radius:9px;
    background: rgba(8,12,10,.92);
    border:1px solid rgb(var(--svc-acc-rgb) / .25);
    color: var(--svc-acc);
    font-size:13px; font-weight:600; letter-spacing:.6px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgb(var(--svc-acc-rgb) / .4);
    animation: svc-screen-pulse 18s ease-in-out infinite;
  }
  .svc-formula{ position:absolute; top:0; bottom:0; right:11px; display:flex; align-items:center; }
  @keyframes svc-screen-pulse {
    0%, 15.5%     { text-shadow: 0 0 8px rgb(var(--svc-acc-rgb) / .4); border-color: rgb(var(--svc-acc-rgb) / .25); }
    17%, 20.5%    { text-shadow: 0 0 15px rgb(var(--svc-acc-rgb) / .85); border-color: rgb(var(--svc-acc-rgb) / .65); }
    23%, 48.8%    { text-shadow: 0 0 8px rgb(var(--svc-acc-rgb) / .4); border-color: rgb(var(--svc-acc-rgb) / .25); }
    50.3%, 53.8%  { text-shadow: 0 0 15px rgb(var(--svc-acc-rgb) / .85); border-color: rgb(var(--svc-acc-rgb) / .65); }
    56.3%, 82.1%  { text-shadow: 0 0 8px rgb(var(--svc-acc-rgb) / .4); border-color: rgb(var(--svc-acc-rgb) / .25); }
    83.6%, 87.1%  { text-shadow: 0 0 15px rgb(var(--svc-acc-rgb) / .85); border-color: rgb(var(--svc-acc-rgb) / .65); }
    89.6%, 100%   { text-shadow: 0 0 8px rgb(var(--svc-acc-rgb) / .4); border-color: rgb(var(--svc-acc-rgb) / .25); }
  }
  .svc-schar{ opacity:0; animation: 18s linear infinite; }
  .svc-formula--2 .svc-schar{ animation-delay: 6s; }
  .svc-formula--3 .svc-schar{ animation-delay: 12s; }
  .svc-schar--1{ animation-name: svc-rchar-1; }
  .svc-schar--2{ animation-name: svc-rchar-2; }
  .svc-schar--3{ animation-name: svc-rchar-3; }
  .svc-schar--4{ animation-name: svc-rchar-4; }
  .svc-schar--5{ animation-name: svc-rchar-5; }
  @keyframes svc-rchar-1 { 0%, 1.8%  { opacity:0; } 3%, 31%    { opacity:1; } 32.5%, 100% { opacity:0; } }
  @keyframes svc-rchar-2 { 0%, 4.6%  { opacity:0; } 5.8%, 31%  { opacity:1; } 32.5%, 100% { opacity:0; } }
  @keyframes svc-rchar-3 { 0%, 7.4%  { opacity:0; } 8.6%, 31%  { opacity:1; } 32.5%, 100% { opacity:0; } }
  @keyframes svc-rchar-4 { 0%, 10.2% { opacity:0; } 11.4%, 31% { opacity:1; } 32.5%, 100% { opacity:0; } }
  @keyframes svc-rchar-5 { 0%, 13%   { opacity:0; } 14.2%, 31% { opacity:1; } 32.5%, 100% { opacity:0; } }
  .svc-calc-keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:9px; }
  .svc-calc-key{
    position:relative; aspect-ratio:1/1; border-radius:7px;
    background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  }
  .svc-calc-key--go{ background: rgb(var(--svc-acc-rgb) / .14); border-color: rgb(var(--svc-acc-rgb) / .4); }
  .svc-kp{
    position:absolute; inset:-1px; border-radius:inherit; opacity:0;
    background: var(--svc-acc); border:1px solid var(--svc-acc);
    box-shadow: 0 0 6px rgb(var(--svc-acc-rgb) / .9), 0 0 18px rgb(var(--svc-acc-rgb) / .55), 0 0 38px rgb(var(--svc-acc-rgb) / .3);
    animation: svc-kp-flash 18s ease-in-out infinite;
    animation-delay: var(--d);
  }
  @keyframes svc-kp-flash {
    0%, 1%    { opacity:0; }
    2%, 3.2%  { opacity:1; }
    5%, 100%  { opacity:0; }
  }
  .svc-counter{
    position:absolute; left:50%; top:198px; z-index:4; display:flex; gap:6px;
    transform: translateX(-50%) rotate(-3deg);
    animation: svc-counter-dim 18s linear infinite;
  }
  @keyframes svc-counter-dim {
    0%, 15.5% { opacity:.5; }
    20%, 95%  { opacity:1; }
    100%      { opacity:.5; }
  }
  .svc-digit{
    position:relative; width:34px; height:50px; overflow:hidden; border-radius:9px;
    background: linear-gradient(180deg, #171c1a 0%, #0d1110 100%);
    border:1px solid rgb(var(--svc-acc-rgb) / .32);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -9px 16px rgba(0,0,0,.45),
      0 9px 20px rgba(0,0,0,.45),
      0 0 18px rgb(var(--svc-acc-rgb) / .12);
    color: var(--svc-acc);
    font-size:26px; font-weight:650; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 11px rgb(var(--svc-acc-rgb) / .5);
  }
  .svc-digit::after{
    content:""; position:absolute; left:2px; right:2px; top:50%; height:1px;
    background: rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.05); z-index:2;
  }
  .svc-digit--r{
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, rgb(var(--svc-acc-rgb) / .22) 0%, rgb(var(--svc-acc-rgb) / .09) 100%);
  }
  .svc-reel{ display:block; animation: svc-reel-roll 18s infinite; }
  .svc-reel b{ display:block; height:50px; line-height:50px; text-align:center; font-weight:650; }
  @keyframes svc-reel-roll {
    0%, 16.2% { transform: translateY(0); animation-timing-function: cubic-bezier(.14,.68,.1,1); }
    24.5%, 49.5% { transform: translateY(-550px); animation-timing-function: cubic-bezier(.14,.68,.1,1); }
    57.8%, 82.8% { transform: translateY(-1100px); animation-timing-function: cubic-bezier(.14,.68,.1,1); }
    91%, 100% { transform: translateY(-1650px); }
  }

  /* Card 2 (Source) — price lookup lens gliding over the map */
  .svc-lens{
    position:absolute; z-index:4; width:62px; height:62px; border-radius:50%;
    border:3px solid rgb(var(--svc-acc-rgb) / .95);
    background: radial-gradient(70% 70% at 34% 28%, rgba(255,255,255,.18) 0%, rgb(var(--svc-acc-rgb) / .05) 60%, rgb(var(--svc-acc-rgb) / .10) 100%);
    -webkit-backdrop-filter: blur(1.5px) brightness(1.3) saturate(1.25);
            backdrop-filter: blur(1.5px) brightness(1.3) saturate(1.25);
    box-shadow:
      0 12px 30px rgba(0,0,0,.5),
      0 0 8px rgb(var(--svc-acc-rgb) / .7),
      0 0 24px rgb(var(--svc-acc-rgb) / .5),
      0 0 48px rgb(var(--svc-acc-rgb) / .28),
      inset 0 0 14px rgb(var(--svc-acc-rgb) / .2),
      inset 0 1px 1px rgba(255,255,255,.35);
    offset-path: path("M 110 120 C 200 62, 296 108, 315 185 C 332 258, 322 336, 255 385 C 225 407, 195 432, 170 420 C 108 396, 82 320, 86 248 C 89 196, 92 152, 110 120");
    offset-rotate: 0deg;
    animation: svc-seek 18s ease-in-out infinite;
  }
  .svc-lens::after{
    content:""; position:absolute; right:-16px; bottom:-12px; width:24px; height:6px; border-radius:3px;
    background: linear-gradient(90deg, var(--svc-acc-hi), var(--svc-acc));
    transform: rotate(45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 0 10px rgb(var(--svc-acc-rgb) / .4);
  }
  @keyframes svc-seek {
    0%    { offset-distance:0%; }
    12%   { offset-distance:0%; }
    27%   { offset-distance:27.85%; }
    41%   { offset-distance:27.85%; }
    57%   { offset-distance:63%; }
    71%   { offset-distance:63%; }
    88%   { offset-distance:100%; }
    100%  { offset-distance:100%; }
  }
  .svc-price{
    position:absolute; z-index:3;
    --svc-pos: translate(-50%, calc(-100% - 38px));
    transform: var(--svc-pos);
    padding:7px 13px 8px; border-radius:13px;
    background: rgba(20,24,22,.78);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border:1px solid rgba(255,255,255,.14);
    color:#ecf2ef; font-size:12.5px; font-weight:550; letter-spacing:.3px; white-space:nowrap;
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
    opacity:0;
    animation: 18s ease-in-out infinite;
  }
  .svc-price::after{
    content:""; position:absolute; left:50%; top:100%; width:1.5px; height:30px;
    transform: translateX(-50%);
    background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.08));
  }
  .svc-price--1{ animation-name: svc-pop1; }
  .svc-price--2{ animation-name: svc-pop2; }
  .svc-price--3{ animation-name: svc-pop3; }
  @keyframes svc-pop1 {
    0%, 13%   { opacity:1; transform: var(--svc-pos) scale(1); }
    21%, 91%  { opacity:0; transform: var(--svc-pos) scale(.88); }
    100%      { opacity:1; transform: var(--svc-pos) scale(1); }
  }
  @keyframes svc-pop2 {
    0%, 21%   { opacity:0; transform: var(--svc-pos) scale(.88); }
    28%, 41%  { opacity:1; transform: var(--svc-pos) scale(1); }
    49%, 100% { opacity:0; transform: var(--svc-pos) scale(.88); }
  }
  @keyframes svc-pop3 {
    0%, 51%   { opacity:0; transform: var(--svc-pos) scale(.88); }
    58%, 71%  { opacity:1; transform: var(--svc-pos) scale(1); }
    79%, 100% { opacity:0; transform: var(--svc-pos) scale(.88); }
  }
  .svc-mark{ transform-box: fill-box; transform-origin:center; animation: 18s ease-in-out infinite; }
  .svc-mark circle + circle{ stroke: rgb(var(--svc-acc-rgb) / .45); }
  .svc-mark--1{ animation-name: svc-warp1; }
  .svc-mark--2{ animation-name: svc-warp2; }
  .svc-mark--3{ animation-name: svc-warp3; }
  @keyframes svc-warp1 { 0%, 13% { transform: scale(2.1); } 22%, 90% { transform: scale(1); } 100% { transform: scale(2.1); } }
  @keyframes svc-warp2 { 0%, 22% { transform: scale(1); } 28%, 41% { transform: scale(2.1); } 50%, 100% { transform: scale(1); } }
  @keyframes svc-warp3 { 0%, 52% { transform: scale(1); } 58%, 71% { transform: scale(2.1); } 80%, 100% { transform: scale(1); } }

  /* Card 3 (Routes) — route line draw + pulsing pin */
  .svc-route-draw{
    stroke-dasharray:1000; stroke-dashoffset:-1000;
    animation: svc-draw 4.6s cubic-bezier(.3,0,.12,1) .5s forwards;
  }
  @keyframes svc-draw { to { stroke-dashoffset:0; } }
  .svc-route-halo{ opacity:0; animation: svc-halo-in 2.4s ease 2.2s forwards; }
  @keyframes svc-halo-in { to { opacity:1; } }
  .svc-route-flow{
    stroke-dasharray:70 930; stroke-dashoffset:0; opacity:0;
    animation: svc-flow 7s linear 5.4s infinite, svc-halo-in 1.2s ease 5.4s forwards;
  }
  @keyframes svc-flow { to { stroke-dashoffset:1000; } }
  .svc-pin-wrap{ position:absolute; left:263px; top:192px; z-index:4; width:0; height:0; }
  .svc-pin-ring{
    position:absolute; left:-78px; top:-78px; width:156px; height:156px;
    animation: svc-ring-rot 70s linear infinite;
  }
  @keyframes svc-ring-rot { to { transform: rotate(360deg); } }
  .svc-pin{
    position:absolute; left:-27px; top:-27px; width:54px; height:54px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(70% 70% at 32% 26%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 60%),
      rgba(158,168,160,.20);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
            backdrop-filter: blur(10px) saturate(1.15);
    border:1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.3);
  }
  .svc-eta{
    position:absolute; right:30px; bottom:26px; z-index:3; text-align:center;
    color:#fff; text-shadow: 0 1px 10px rgba(0,0,0,.8);
  }
  .svc-eta b{ display:block; font-size:21px; font-weight:600; letter-spacing:.2px; }
  .svc-eta span{ display:block; font-size:11px; font-weight:400; color:rgba(240,243,241,.75); margin-top:1px; }

  @media (prefers-reduced-motion: reduce){
    .svc-glass, .svc-calc, .svc-calc-screen, .svc-kp, .svc-schar,
    .svc-counter, .svc-reel, .svc-lens, .svc-price, .svc-mark,
    .svc-pin-ring, .svc-route-draw, .svc-route-halo, .svc-route-flow{
      animation: none !important;
    }
    .svc-price, .svc-counter{ opacity:1; }
    .svc-formula--3 .svc-schar{ opacity:1; }
    .svc-reel{ transform: translateY(-1650px); }
    .svc-route-flow{ opacity:0 !important; }
  }