/* ==========================================================================
   THE SERVICE PAGE REELS
   Generated by reels.cjs from the six concept documents in
   src/reels/source. Do not edit this file; edit the source, the script,
   or src/reels/corrections.css.

   ONE BLOCK PER DISTINCT STYLESHEET, each scoped to the reels that use
   it, because two of them define .stats differently and merging their
   rules reordered a media query behind a base rule.

   SCOPED, NOT RENAMED. Every class the concepts use is generic: .stage,
   .scene, .stat, .term, .wm. None collides with this site today, because
   everything here is lk- prefixed, but Divi is the parent theme and
   .stage is the kind of name a parent theme claims later.
   ========================================================================== */
/* fixed cinema tokens for the stage itself. This piece is the actual dark
     motion module already live on lantek.co.za, so it stays one look regardless
     of page theme, exactly as the real <video> would */
  .lkr-stage{
    --void:#04060B;
    --panel:#0A0F19;
    --panel-2:#0E1524;
    --raise:#162034;
    --line:rgba(79,180,245,.13);
    --line-2:rgba(255,255,255,.08);
    --cyan:#20BBFC;
    --blue-hi:#2E93DE;
    --blue-lo:#0A4F86;
    --ink:#E9F1FA;
    --ink-2:#9FB3CE;
    --ink-3:#7383A0;
    --ok:#1FBF8F;
    --warn:#F2A33C;
  }

/* The three marks. A span where the concept had an img, so the file can
   come from the theme rather than from 46 KB of base64 three times over.
   An img had an intrinsic aspect ratio and a span does not: the mark is
   480 by 120. The background itself is printed by brandCss() for the
   preview and lantek_brand_css() for WordPress, off one filename. */
.lkr-stage .lkr-mark{aspect-ratio:4/1;background-size:contain;background-repeat:no-repeat;background-position:center;display:block}

/* Shared by 5 reels: cybersecurity, managed-it, monitoring, phishing, vulnerability */
.lkr-stage{position:relative; width:100%; aspect-ratio:16/9; background:var(--void);
    border:1px solid rgba(79,180,245,.28); border-radius:10px; overflow:hidden;
    box-shadow:0 0 0 1px rgba(79,180,245,.1), 0 30px 70px -30px rgba(0,0,0,.6);}
.lkr-stage canvas.bgfx{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.lkr-stage .scene{position:absolute;inset:0; display:flex;align-items:center;justify-content:center; opacity:0; transition:opacity .5s ease; pointer-events:none;}
.lkr-stage .scene.on{opacity:1;}
.lkr-stage .ident{flex-direction:column;gap:18px;}
.lkr-stage .ident-mark{width:min(46%,240px); filter:drop-shadow(0 0 26px rgba(32,187,252,.35)); transform:scale(.92); opacity:0; transition:opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1);}
.lkr-stage .scene.on .ident-mark{opacity:1;transform:scale(1);}
.lkr-stage .ident-tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); opacity:0; transition:opacity .6s ease .25s;}
.lkr-stage .scene.on .ident-tag{opacity:1;}
.lkr-stage .wm{position:absolute; right:16px; bottom:16px; width:74px; opacity:0; transition:opacity .5s ease; filter:drop-shadow(0 0 10px rgba(0,0,0,.5)); z-index:5; pointer-events:none;}
.lkr-stage .wm.on{opacity:.55;}
.lkr-stage .fictitious-tag{position:absolute; left:16px; bottom:16px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.04em; color:var(--ink-3);
    background:rgba(10,15,25,.55); border:1px solid var(--line-2); padding:5px 9px;border-radius:20px;
    opacity:0; transition:opacity .5s ease; z-index:5; pointer-events:none; display:flex; align-items:center; gap:6px;}
.lkr-stage .fictitious-tag.on{opacity:1;}
.lkr-stage .fictitious-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--warn); box-shadow:0 0 6px var(--warn);}
.lkr-stage .term{width:min(88%,500px); background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 0 0 1px rgba(79,180,245,.16), 0 20px 50px -20px rgba(0,0,0,.7);}
.lkr-stage .term-bar{display:flex;align-items:center;gap:6px; padding:9px 12px;border-bottom:1px solid var(--line);}
.lkr-stage .term-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);opacity:.5;}
.lkr-stage .term-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3); margin-left:6px;letter-spacing:.02em;}
.lkr-stage .term-body{font-family:'JetBrains Mono',monospace; font-size:12.5px;line-height:1.85; color:var(--ink-2); padding:16px 16px 18px; white-space:pre-wrap; min-height:190px;}
.lkr-stage .term-body .cur{display:inline-block;width:7px;height:13px;background:var(--cyan); vertical-align:-2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}
}
.lkr-stage .cv-wrap{position:relative;width:100%;height:100%;}
.lkr-stage .cv-wrap canvas{position:absolute;inset:0;width:100%;height:100%;}
.lkr-stage .cv-label{position:absolute; top:14px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.lkr-stage .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(92%,580px);}
.lkr-stage .stat{background:var(--panel);border:1px solid var(--line);border-radius:8px; padding:16px 10px;text-align:center;}
.lkr-stage .stat b{display:block;font-size:clamp(18px,3.4vw,26px);font-weight:700; font-variant-numeric:tabular-nums;
    background:linear-gradient(96deg,#8FD8FF 0%,var(--cyan) 45%,var(--blue-hi) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1.1;margin-bottom:6px;}
.lkr-stage .stat span{font-size:10.5px;color:var(--ink-2);line-height:1.35;display:block;}
.lkr-stage .compare{display:flex; gap:14px; width:min(92%,600px);}
.lkr-stage .cc{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 16px;}
.lkr-stage .cc h3{margin:0 0 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-family:'JetBrains Mono',monospace;}
.lkr-stage .cc.bad h3{color:var(--hot);}
.lkr-stage .cc.good h3{color:var(--ok);}
.lkr-stage .cc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.lkr-stage .cc li{font-size:12px;color:var(--ink-2);line-height:1.4;padding-left:14px;position:relative;}
.lkr-stage .cc.bad li::before{content:'\2013';position:absolute;left:0;color:var(--hot);}
.lkr-stage .cc.good li::before{content:'\2713';position:absolute;left:0;color:var(--ok);}
.lkr-stage .outro{flex-direction:column;gap:16px;text-align:center;padding:0 24px;}
.lkr-stage .outro-mark{width:min(40%,190px);filter:drop-shadow(0 0 22px rgba(32,187,252,.3));}
.lkr-stage .outro-line{font-size:15px;color:var(--ink);font-weight:500;}
.lkr-stage .outro-line b{background:linear-gradient(96deg,#8FD8FF 0%,var(--cyan) 34%,var(--blue-hi) 72%,var(--blue-lo) 100%); -webkit-background-clip:text;background-clip:text;color:transparent;}
.lkr-stage .outro-cta{font-family:'JetBrains Mono',monospace; font-size:11.5px;letter-spacing:.04em; color:var(--void);
    background:linear-gradient(135deg,var(--cyan) 0%,var(--blue-hi) 42%,var(--blue-lo) 100%); padding:9px 18px;border-radius:5px;font-weight:600;}
.lkr-stage .transport{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px; padding:8px 12px;
    background:linear-gradient(0deg,rgba(4,6,11,.9),rgba(4,6,11,0)); z-index:6;}
.lkr-stage .tbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center; background:none;border:0;color:var(--ink-2);cursor:pointer;padding:0;border-radius:5px;}
.lkr-stage .tbtn:hover{color:var(--ink);}
.lkr-stage .tbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.lkr-stage .tbtn svg{width:15px;height:15px;}
.lkr-stage .ttime{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3); font-variant-numeric:tabular-nums;white-space:nowrap;}
.lkr-stage .tbar{flex:1;height:3px;background:rgba(255,255,255,.14);border-radius:2px; cursor:pointer;position:relative;}
.lkr-stage .tbar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--blue-hi)); width:0%;}
.lkr-stage .tmute{color:var(--ink-3);}
@media (prefers-reduced-motion:reduce){.lkr-stage .scene{transition:none !important;}
.lkr-stage .ident-mark{transition:none !important;}
}
@media (max-width:560px){.lkr-stage .stats{grid-template-columns:repeat(2,1fr);}
.lkr-stage .term-body{font-size:11px;}
.lkr-stage .compare{flex-direction:column;}
}

/* Only dark-web, scoped so it cannot reach the others */
.lkr-stage[data-lk-reel="dark-web"]{position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:var(--void);
    border:1px solid rgba(79,180,245,.28);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(79,180,245,.1), 0 30px 70px -30px rgba(0,0,0,.6);}
.lkr-stage[data-lk-reel="dark-web"] canvas.bgfx{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.lkr-stage[data-lk-reel="dark-web"] .scene{position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    transition:opacity .5s var(--e,ease);
    pointer-events:none;}
.lkr-stage[data-lk-reel="dark-web"] .scene.on{opacity:1;}
.lkr-stage[data-lk-reel="dark-web"] .ident{flex-direction:column;gap:18px;}
.lkr-stage[data-lk-reel="dark-web"] .ident-mark{width:min(46%,240px);
    filter:drop-shadow(0 0 26px rgba(32,187,252,.35));
    transform:scale(.92);
    opacity:0;
    transition:opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1);}
.lkr-stage[data-lk-reel="dark-web"] .scene.on .ident-mark{opacity:1;transform:scale(1);}
.lkr-stage[data-lk-reel="dark-web"] .ident-tag{font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink-3);
    opacity:0;
    transition:opacity .6s ease .25s;}
.lkr-stage[data-lk-reel="dark-web"] .scene.on .ident-tag{opacity:1;}
.lkr-stage[data-lk-reel="dark-web"] .wm{position:absolute; right:16px; bottom:16px;
    width:74px; opacity:0; transition:opacity .5s ease;
    filter:drop-shadow(0 0 10px rgba(0,0,0,.5));
    z-index:5; pointer-events:none;}
.lkr-stage[data-lk-reel="dark-web"] .wm.on{opacity:.55;}
.lkr-stage[data-lk-reel="dark-web"] .fictitious-tag{position:absolute; left:16px; bottom:16px;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; letter-spacing:.04em;
    color:var(--ink-3);
    background:rgba(10,15,25,.55);
    border:1px solid var(--line-2);
    padding:5px 9px;border-radius:20px;
    opacity:0; transition:opacity .5s ease;
    z-index:5; pointer-events:none;
    display:flex; align-items:center; gap:6px;}
.lkr-stage[data-lk-reel="dark-web"] .fictitious-tag.on{opacity:1;}
.lkr-stage[data-lk-reel="dark-web"] .fictitious-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--warn);
    box-shadow:0 0 6px var(--warn);}
.lkr-stage[data-lk-reel="dark-web"] .term{width:min(84%,480px);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:var(--lk-glow,0 0 0 1px rgba(79,180,245,.16)), 0 20px 50px -20px rgba(0,0,0,.7);}
.lkr-stage[data-lk-reel="dark-web"] .term-bar{display:flex;align-items:center;gap:6px;
    padding:9px 12px;border-bottom:1px solid var(--line);}
.lkr-stage[data-lk-reel="dark-web"] .term-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);opacity:.5;}
.lkr-stage[data-lk-reel="dark-web"] .term-title{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);
    margin-left:6px;letter-spacing:.02em;}
.lkr-stage[data-lk-reel="dark-web"] .term-body{font-family:'JetBrains Mono',monospace;
    font-size:12.5px;line-height:1.85;
    color:var(--ink-2);
    padding:16px 16px 18px;
    white-space:pre-wrap;
    min-height:190px;}
.lkr-stage[data-lk-reel="dark-web"] .term-body .cur{display:inline-block;width:7px;height:13px;background:var(--cyan);
    vertical-align:-2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}
}
.lkr-stage[data-lk-reel="dark-web"] .radar-wrap{position:relative;width:100%;height:100%;}
.lkr-stage[data-lk-reel="dark-web"] .radar-wrap canvas{position:absolute;inset:0;width:100%;height:100%;}
.lkr-stage[data-lk-reel="dark-web"] .radar-label{position:absolute; top:14px; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono',monospace; font-size:11px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.lkr-stage[data-lk-reel="dark-web"] .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(90%,560px);}
.lkr-stage[data-lk-reel="dark-web"] .stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;
    padding:16px 10px;text-align:center;}
.lkr-stage[data-lk-reel="dark-web"] .stat b{display:block;font-size:clamp(22px,4vw,30px);font-weight:700;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(96deg,#8FD8FF 0%,var(--cyan) 45%,var(--blue-hi) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    line-height:1.1;margin-bottom:6px;}
.lkr-stage[data-lk-reel="dark-web"] .stat span{font-size:10.5px;color:var(--ink-2);line-height:1.35;display:block;}
.lkr-stage[data-lk-reel="dark-web"] .outro{flex-direction:column;gap:16px;text-align:center;padding:0 24px;}
.lkr-stage[data-lk-reel="dark-web"] .outro-mark{width:min(40%,190px);filter:drop-shadow(0 0 22px rgba(32,187,252,.3));}
.lkr-stage[data-lk-reel="dark-web"] .outro-line{font-size:15px;color:var(--ink);font-weight:500;}
.lkr-stage[data-lk-reel="dark-web"] .outro-line b{background:linear-gradient(96deg,#8FD8FF 0%,var(--cyan) 34%,var(--blue-hi) 72%,var(--blue-lo) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
.lkr-stage[data-lk-reel="dark-web"] .outro-cta{font-family:'JetBrains Mono',monospace;
    font-size:11.5px;letter-spacing:.04em;
    color:var(--void);
    background:linear-gradient(135deg,var(--cyan) 0%,var(--blue-hi) 42%,var(--blue-lo) 100%);
    padding:9px 18px;border-radius:5px;font-weight:600;}
.lkr-stage[data-lk-reel="dark-web"] .transport{position:absolute; left:0; right:0; bottom:0;
    display:flex; align-items:center; gap:12px;
    padding:8px 12px;
    background:linear-gradient(0deg,rgba(4,6,11,.9),rgba(4,6,11,0));
    z-index:6;}
.lkr-stage[data-lk-reel="dark-web"] .tbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;color:var(--ink-2);cursor:pointer;padding:0;border-radius:5px;}
.lkr-stage[data-lk-reel="dark-web"] .tbtn:hover{color:var(--ink);}
.lkr-stage[data-lk-reel="dark-web"] .tbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.lkr-stage[data-lk-reel="dark-web"] .tbtn svg{width:15px;height:15px;}
.lkr-stage[data-lk-reel="dark-web"] .ttime{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);
    font-variant-numeric:tabular-nums;white-space:nowrap;}
.lkr-stage[data-lk-reel="dark-web"] .tbar{flex:1;height:3px;background:rgba(255,255,255,.14);border-radius:2px;
    cursor:pointer;position:relative;}
.lkr-stage[data-lk-reel="dark-web"] .tbar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;
    background:linear-gradient(90deg,var(--cyan),var(--blue-hi));
    width:0%;}
.lkr-stage[data-lk-reel="dark-web"] .tmute{color:var(--ink-3);}
@media (prefers-reduced-motion:reduce){.lkr-stage[data-lk-reel="dark-web"] .scene{transition:none !important;}
.lkr-stage[data-lk-reel="dark-web"] .ident-mark{transition:none !important;}
}
@media (max-width:520px){.lkr-stage[data-lk-reel="dark-web"] .stats{grid-template-columns:repeat(2,1fr);}
.lkr-stage[data-lk-reel="dark-web"] .term-body{font-size:11px;}
}

/* ==========================================================================
   FOUR CORRECTIONS TO THE SUPPLIED CONCEPTS

   Appended to the generated stylesheet by reels.cjs rather than edited into
   the extracted rules, so that what came from the concept documents and what
   was changed afterwards stay separable.

   Every one is reproducible in the original documents in src/reels/source,
   checked side by side before anything was changed, so none of them is
   something the extraction introduced.

   WHY EVERY SELECTOR CARRIES [data-lk-reel]. The generated stylesheet emits
   one block per distinct concept stylesheet, and any block that is not the
   majority is scoped to its own reels by attribute, which makes those rules
   0-3-0. A correction written as `.lkr-stage .outro-cta` is 0-2-0 and loses to
   them: the button fix silently did nothing on the Dark Web reel and the
   contrast failure stayed. The attribute is present on every stage, so this
   matches everywhere and ties or beats every block, and being last it wins.

   1. THE TERMINAL SCENE FILLED HALF THE FRAME.
      Its wrapper is <div class="scene term">, so it takes .term as well as
      .scene, and .term sets width:min(84%,480px). The scene was therefore
      pinned to 480px against the left edge of a 960px stage, leaving the right
      half empty with a visible seam down the middle. Only the inner panel
      wants that width. All six reels do it.

   2. THE TRANSPORT BAR SAT ON TOP OF THE DISCLAIMER.
      The bar is 42px tall at bottom:0; the "Illustrative · fictitious data"
      tag sits at bottom:16px, inside it. That tag is the one element on the
      reel that must never be hard to read: it is what stops illustrative
      figures being taken for real client data.

   3. AND ON THE WATERMARK, same cause, other corner.

   4. THE OUTRO BUTTON FAILED AA ACROSS ITS LAST THIRD.
      "Get Your Free Health Check" is --void, near black, on a gradient running
      --cyan to --blue-hi to --blue-lo. Measured against --void that is 9.24:1
      where it starts, 6.12:1 in the middle and 2.39:1 where it ends, and AA
      wants 4.5 at 11.5px. A button legible at one end and not the other is a
      button that fails. Solid --cyan is 9.24:1 the whole way across and still
      reads as the bright call to action it was drawn as. White text was the
      other option and is worse: 2.19:1 on cyan.

      It also lets the contrast pass in e2e-pages.cjs see it. That check treats
      any background-image as dark, which for a bright cyan gradient is exactly
      backwards, so the reels failed at 1.06:1 on a button that was really
      9.24:1 where the eye lands.
   ========================================================================== */
.lkr-stage[data-lk-reel] .scene.term{width:auto;max-width:none}
.lkr-stage[data-lk-reel] .fictitious-tag,
.lkr-stage[data-lk-reel] .wm{bottom:56px}
.lkr-stage[data-lk-reel] .outro-cta{background:var(--cyan)}