@charset "UTF-8";
/* ==========================================================================
   LANTEK Computers - inner page components
   Everything the home page does not use: page header, answer blocks, plans,
   tables, story scenes, prose, the mega footer.
   Depends on lantek.css for tokens and lantek-ui.css for reveals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HEADER
   The home hero's little sibling: same layers, same parallax variables, a
   third of the height. Never a full viewport, because on an inner page the
   answer should be visible without scrolling.
   -------------------------------------------------------------------------- */
.lk-ph{
  position:relative;overflow:hidden;background:var(--lk-void);
  padding:calc(var(--lk-nav-h) + clamp(56px,7vw,96px)) 0 clamp(48px,6vw,84px);
}
.lk-ph__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.7;
}
.lk-ph__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,var(--lk-void) 2%,rgba(4,6,11,.7) 40%,transparent 74%),
    linear-gradient(0deg,var(--lk-black),transparent 46%);
}
.lk-ph__in{
  position:relative;z-index:2;
}
.lk-ph__h1{
  font-size:clamp(2.1rem,5.4vw,4rem);letter-spacing:-.042em;line-height:1.02;
  max-width:20ch;
}
.lk-ph .lk-lead{max-width:58ch;font-size:clamp(1.05rem,2vw,1.28rem)}

/* The supplied slide, behind the page header. Decorative: it carries nothing
   the copy does not already say, so it is aria-hidden. The veil is heavier on
   this variant because a photograph is far busier than the generated canvas
   and the headline has to stay readable across the whole width. */
.lk-ph__img{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  /* A barely perceptible scale, so the edges never show a seam while the
     composition stays as it was cropped. Photography arrives brighter than
     this palette, hence the filter. */
  transform:scale(1.02);
  filter:saturate(.7) brightness(.8);
}

/* Same reconciliation the article cards use, and needed for the same reason:
   two of these frames are lit green and one is lit amber. Without a tint
   toward the brand navy, seven service pages look like seven different sites. */
.lk-ph__img::after{
  content:"";position:absolute;inset:0;
  background:#132844;mix-blend-mode:color;opacity:.5;
}

/* ONLY for the supplied slides, which are not currently in use.
   Every one carries an on-screen COMPLIANCE STATUS panel down its right edge
   reading "ISO 27001 Compliant", which section 5 of the 27 August handover does
   not approve. This zooms and anchors left so the panel falls out of frame:
   scale(1.34) from a left origin shows the leftmost 74.6%, and the panel sits
   in the rightmost ~12%.

   It is a crop, not a fix, and it does NOT deal with the fabricated dashboard
   figures on Title.png and Title 2.png, which sit across the frame rather than
   down one edge. See HANDOVER blocking issues 1 and 1b.

   Add this class in pageHeader() if you ever point the heroes back at
   /media/<slug>/hero.jpg. */
.lk-ph__img--crop{
  transform:scale(1.34);
  transform-origin:0% 50%;
}
/* A service page with a supplied slide gets a full hero rather than a page
   header, per "Recommended hero implementation.txt" on the shared drive:
   min-height clamp(560px, 76vh, 820px), the image behind, a directional
   overlay, real HTML content over the top.
   The supplied overlay runs .96 to .08 left to right. This one holds the right
   edge at .30 instead of .08, deliberately: see .lk-ph__img below. */
.lk-ph--img{
  min-height:clamp(560px,76vh,820px);
  display:flex;align-items:center;
  padding-block:calc(var(--lk-nav-h) + clamp(56px,7vw,96px)) clamp(56px,7vw,96px);
}
.lk-ph--img .lk-ph__in{width:100%}
.lk-ph--img .lk-ph__veil{
  background:
    linear-gradient(95deg,var(--lk-void) 0%,rgba(4,6,11,.94) 30%,rgba(4,6,11,.62) 62%,rgba(4,6,11,.30) 100%),
    linear-gradient(0deg,var(--lk-black),transparent 46%);
}
@media(max-width:760px){
  /* On a narrow screen the copy sits over the middle of the image, so the
     veil goes flat rather than directional. */
  .lk-ph--img .lk-ph__veil{
    background:linear-gradient(0deg,var(--lk-black) 6%,rgba(4,6,11,.86) 48%,rgba(4,6,11,.74) 100%);
  }
}

/* --------------------------------------------------------------------------
   1a2. VIDEO BLOCK
   The service loop, centred, with room to actually be watched. Where no loop
   has been supplied the same frame renders as a labelled slot, so the gap is
   visible on the page rather than silently absent.
   -------------------------------------------------------------------------- */
.lk-vid{max-width:960px;margin-inline:auto}
.lk-vid__head{text-align:center;margin-bottom:clamp(20px,3vw,32px)}
.lk-vid__head .lk-small{margin-top:8px}
.lk-vid__frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--lk-line);border-radius:var(--lk-r-lg);
  background:var(--lk-panel);box-shadow:var(--lk-glow);
}
.lk-vid__el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Plain surface, deliberately. This carried a 42px tiled hairline grid at .05
   alpha, which measured about a 2% luminance lift on this panel: close to
   invisible, and a decorative grid field is the kind of generic ornament the
   design rules rule out except on a real canvas or measurement surface.
   What makes this read as an empty slot is doing the work already: the 16:9
   frame, the border, the play glyph, the VIDEO SLOT label and the literal path
   in a <code>. The grid was adding nothing those four do not. */
.lk-vid__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;
  background:var(--lk-panel-2);
}
.lk-vid__ph svg{width:52px;height:52px}
.lk-vid__pht{
  font-family:var(--lk-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lk-sky);
}
.lk-vid__phd{font-size:14px;color:var(--lk-ink-3);max-width:44ch;line-height:1.6}
.lk-vid__phd code{
  font-family:var(--lk-mono);font-size:12.5px;color:var(--lk-ink-2);
  background:rgba(79,180,245,.08);border:1px solid var(--lk-line-2);
  border-radius:3px;padding:2px 6px;
}

/* --------------------------------------------------------------------------
   1b. CREDIBILITY STRIP
   Three claims under each service description: what LANTEK holds in house,
   what it delivers, and what the client gets. The platform partner is never
   named, by instruction.
   -------------------------------------------------------------------------- */
.lk-strips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--lk-line-2);border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);overflow:hidden}
@media(max-width:820px){.lk-strips{grid-template-columns:1fr}}
.lk-strip{background:var(--lk-panel-2);padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;
  transition:background var(--lk-med) var(--lk-ease)}
.lk-strip:hover{background:var(--lk-panel-3)}
.lk-strip__k{
  font-family:var(--lk-mono);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lk-sky);
}
.lk-strip__v{font-size:15px;line-height:1.58;color:var(--lk-ink-2)}

/* --------------------------------------------------------------------------
   1c. PUBLIC-SECTOR PROOF PANEL
   -------------------------------------------------------------------------- */
.lk-dube{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(32,187,252,.09),var(--lk-panel-2));
  border:1px solid var(--lk-line-3);border-radius:var(--lk-r-lg);
  padding:clamp(28px,4vw,52px);
  box-shadow:0 30px 90px -55px rgba(15,118,196,.9);
}
.lk-dube__k{
  font-family:var(--lk-mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lk-cyan);
}
.lk-dube__h{
  font-size:clamp(1.3rem,2.9vw,2rem);letter-spacing:-.032em;line-height:1.18;
  color:var(--lk-head);margin:16px 0 18px;max-width:30ch;
}
.lk-dube__p{font-size:16px;line-height:1.62;color:var(--lk-ink-2);max-width:74ch}
.lk-dube__proof{
  display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--lk-line-2);
  font-size:15px;line-height:1.58;color:var(--lk-ink);max-width:74ch;
}
.lk-dube__proof svg{width:20px;height:20px;margin-top:1px;flex:none}

/* Breadcrumb */
.lk-crumb{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:22px;
  font-family:var(--lk-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lk-ink-4);
}
.lk-crumb a{color:var(--lk-ink-3)}
.lk-crumb a:hover{color:var(--lk-cyan)}
.lk-crumb span[aria-hidden]{opacity:.45}

/* --------------------------------------------------------------------------
   2. ANSWER BLOCKS
   A question, then a direct answer, then the elaboration. Retrieval happens
   at passage level, so each one has to survive being lifted out and read on
   its own. The rule between them is the only decoration.
   -------------------------------------------------------------------------- */
.lk-qa{display:flex;flex-direction:column}
.lk-qa__item{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:clamp(26px,3.4vw,40px) 0;
  border-top:1px solid var(--lk-line-2);
}
.lk-qa__item:first-child{border-top:0;padding-top:0}
@media(max-width:700px){
  .lk-qa__item{grid-template-columns:1fr;gap:14px}
}
/* The numbered spine. Gives the column a left edge to sit against, so a run
   of answers reads as a sequence instead of one long block of prose. */
.lk-qa__i{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:4px}
@media(max-width:700px){.lk-qa__i{flex-direction:row;align-items:center;padding-top:0}}
.lk-qa__n{
  font-family:var(--lk-mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--lk-sky);
}
.lk-qa__rule{width:1px;flex:1;min-height:34px;background:linear-gradient(180deg,var(--lk-line-3),transparent)}
@media(max-width:700px){
  .lk-qa__rule{width:auto;height:1px;min-height:0;flex:1;
    background:linear-gradient(90deg,var(--lk-line-3),transparent)}
}
/* .lk-scoped on purpose. This rule sets a margin on an element that `.lk
   p{margin:0}` / `.lk h1..h4{margin:0}` also matches, and a bare class
   (0-1-0) loses to a class plus a type (0-1-1). Every instance of this
   component was rendering flush against its neighbour. Found by a sweep on
   14 September 2026 and fixed the same way as the .lk-mt-* utilities. */
.lk .lk-qa__q{
  font-size:clamp(1.2rem,2.5vw,1.62rem);letter-spacing:-.028em;line-height:1.22;
  color:var(--lk-head);margin-bottom:16px;max-width:34ch;
}
.lk-qa__a{
  font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.62;color:var(--lk-ink);
  max-width:72ch;
}
.lk-qa__more{margin-top:16px;color:var(--lk-ink-2);font-size:16px;line-height:1.62;max-width:72ch}
.lk-qa__more p+p{margin-top:12px}
.lk-qa__more a{color:var(--lk-sky)}
.lk-qa__more a:hover{text-decoration:underline}
.lk-qa__more ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.lk-qa__more li::marker{color:var(--lk-blue-hi)}

/* --------------------------------------------------------------------------
   3. SERVICE PLANS
   Three columns, the middle one lifted. No pricing anywhere, by instruction.
   -------------------------------------------------------------------------- */
/* Three tiers, three identities.
   Each card takes its accent from a --lk-tier-* token, and those are separated
   by chroma rather than hue because this palette is one hue: Core is a quiet
   27% grey-blue, Secure the only full-chroma colour of the three, Sentinel the
   one violet on the site. See the token block in lantek.css.

   --tier is set once per card and everything downstream reads it: the rule
   across the top, the tier name, the bullets and the glow. Adding a fourth
   plan is one more data-tier line.

   The recommended tier used to carry an OUR RECOMMENDATION ribbon. It was
   removed on 8 September 2026, so the card has to do that work itself. It does
   it five ways at once, deliberately quietly, because one loud signal reads as
   an advert and five quiet ones read as the obvious answer:

     1  the widest track, 1.14fr against 1fr
     2  lifted, and it holds the lift at rest rather than on hover
     3  the only saturated accent of the three
     4  its heading a size and a half larger than the other two
     5  a 4px gradient rule and a wash where the others have a 2px flat rule

   A sixth would be too many. */
.lk-plans{
  display:grid;grid-template-columns:1fr 1.14fr 1fr;
  gap:16px;align-items:start;
}
@media(max-width:900px){.lk-plans{grid-template-columns:1fr}}
.lk-plan{
  --tier:var(--lk-tier-core);
  position:relative;background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:30px 26px 30px;
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:border-color var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease),
             box-shadow var(--lk-med) var(--lk-ease);
}
.lk-plan[data-tier="core"]{--tier:var(--lk-tier-core)}
.lk-plan[data-tier="secure"]{--tier:var(--lk-tier-secure)}
.lk-plan[data-tier="sentinel"]{--tier:var(--lk-tier-sentinel)}

/* The rule across the top is the whole tier signal at a glance. 2px on the
   two supporting tiers, 4px and a gradient on the one being recommended. */
.lk-plan::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--tier);opacity:.75;
}
.lk-plan:hover{
  border-color:color-mix(in srgb,var(--tier) 42%,transparent);
  transform:translateY(-3px);
}
.lk-plan:hover::before{opacity:1}

/* The recommended tier. No badge: see the five signals listed at .lk-plans. */
.lk-plan--lead{
  border-color:color-mix(in srgb,var(--tier) 46%,transparent);
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tier) 15%,transparent),transparent 72%),
    var(--lk-panel-2);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--tier) 22%,transparent),
    0 30px 90px -44px color-mix(in srgb,var(--tier) 80%,transparent);
  padding:34px 30px 34px;
}
.lk-plan--lead::before{height:4px;opacity:1;
  background:linear-gradient(90deg,var(--lk-ice),var(--tier) 52%,var(--lk-blue))}
.lk-plan--lead:hover{transform:translateY(-6px)}
@media(min-width:901px){.lk-plan--lead{transform:translateY(-10px)}}

.lk-plan__n{font-family:var(--lk-mono);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--tier)}
.lk-plan .lk-plan__t{
  font-size:1.4rem;font-weight:700;letter-spacing:.02em;color:var(--tier);
  font-family:var(--lk-mono);text-transform:uppercase;
}
/* The recommended tier's name is set larger, in the same solid accent.
   A gradient was tried here and removed: across seven letters of mono type it
   resolves to roughly one colour anyway, so it bought nothing the chroma jump
   between the three tokens was not already doing, and it made one of three
   sibling headings behave differently to the other two for decoration. */
.lk-plan--lead .lk-plan__t{font-size:1.66rem}
.lk-plan__f{font-size:15px;color:var(--lk-ink-2);line-height:1.55}
.lk-plan__l{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.lk-plan__l li{
  font-size:14.8px;line-height:1.5;padding-left:22px;position:relative;color:var(--lk-ink);
}
.lk-plan__l li::before{
  content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--tier);
}
p.lk-plan__note{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--lk-line-2);
  font-size:13.5px;color:var(--lk-ink-3);line-height:1.5;
}
/* color-mix is not everywhere yet. Where it is missing the accents still land,
   because --tier drives them directly; only the four blends fall back. */
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  .lk-plan:hover{border-color:var(--lk-line-3)}
  .lk-plan--lead{border-color:var(--lk-line-3);box-shadow:0 28px 80px -44px rgba(15,118,196,.9)}
}

/* --------------------------------------------------------------------------
   3b. MEET THE TEAM
   Role cards. The monogram is a plate rather than a circle, because a circle
   reads as a missing avatar and a plate reads as a badge, which is what it is
   until real photographs and names are supplied. Set "img" on a team entry and
   the same card takes a photograph at the same size.
   -------------------------------------------------------------------------- */
.lk-team{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin:0;padding:0;list-style:none;
}
@media(max-width:920px){.lk-team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.lk-team{grid-template-columns:1fr}}
.lk-tm{
  position:relative;background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:26px 24px 26px;
  display:flex;flex-direction:column;gap:9px;
  transition:border-color var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease);
}
.lk-tm:hover{border-color:var(--lk-line-3);transform:translateY(-3px)}
.lk-tm__av,.lk-tm__ph{
  width:56px;height:56px;border-radius:var(--lk-r);margin-bottom:6px;flex:none;
}
.lk-tm__av{
  display:grid;place-items:center;
  background:var(--lk-grad-soft);border:1px solid var(--lk-line-3);
  font-family:var(--lk-mono);font-size:17px;font-weight:600;
  letter-spacing:.04em;color:var(--lk-sky);
}
.lk-tm__ph{object-fit:cover;display:block;border:1px solid var(--lk-line-3)}
.lk-tm__n{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;color:var(--lk-head);line-height:1.25}
.lk-tm__r{
  font-family:var(--lk-mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lk-sky);
}
p.lk-tm__d{font-size:14.6px;line-height:1.6;color:var(--lk-ink-2);margin:2px 0 0}
.lk-tm__c{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--lk-line-2);
  font-size:13.2px;line-height:1.55;color:var(--lk-ink-3);
}
.lk-tm__c b{
  display:block;font-family:var(--lk-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lk-ink-4);margin-bottom:5px;
}

/* --------------------------------------------------------------------------
   4. TABLES
   -------------------------------------------------------------------------- */
.lk-tablewrap{
  overflow-x:auto;border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);
  background:var(--lk-panel-2);
  scrollbar-width:thin;scrollbar-color:var(--lk-line-3) transparent;
}
.lk-tablewrap::-webkit-scrollbar{height:6px}
.lk-tablewrap::-webkit-scrollbar-thumb{background:var(--lk-line-3);border-radius:3px}
.lk-table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.lk-table th,.lk-table td{
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--lk-line-2);
  vertical-align:top;line-height:1.55;
}
.lk-table thead th{
  font-family:var(--lk-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lk-sky);font-weight:500;background:rgba(79,180,245,.05);
  position:sticky;top:0;
}
.lk-table tbody th{color:var(--lk-head);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.lk-table td{color:var(--lk-ink-2)}
.lk-table tbody tr:last-child th,.lk-table tbody tr:last-child td{border-bottom:0}
.lk-table tbody tr{transition:background var(--lk-fast) var(--lk-ease)}
.lk-table tbody tr:hover{background:rgba(79,180,245,.04)}

/* --------------------------------------------------------------------------
   5. STORY SCENES
   Numbered beats down a spine. Built as states, not animation: with scripting
   off or reduced motion on, it still reads as a captioned stack.
   -------------------------------------------------------------------------- */
.lk-scenes{position:relative;display:flex;flex-direction:column;gap:0}
.lk-scenes::before{
  content:"";position:absolute;left:19px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--lk-line-3)12%,var(--lk-line-3) 88%,transparent);
}
@media(max-width:640px){.lk-scenes::before{left:15px}}
.lk-scene{
  position:relative;display:grid;grid-template-columns:40px 1fr;gap:22px;
  padding:20px 0;align-items:start;
}
@media(max-width:640px){.lk-scene{grid-template-columns:32px 1fr;gap:16px}}
.lk-scene__n{
  position:relative;z-index:1;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--lk-panel-2);border:1px solid var(--lk-line-3);
  font-family:var(--lk-mono);font-size:12px;font-weight:600;color:var(--lk-sky);
  transition:border-color var(--lk-med) var(--lk-ease),background var(--lk-med) var(--lk-ease);
}
@media(max-width:640px){.lk-scene__n{width:32px;height:32px;font-size:10.5px}}
.lk-scene.is-in .lk-scene__n{border-color:var(--lk-cyan);background:rgba(32,187,252,.14)}
.lk-scene__lead{
  font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.5;color:var(--lk-head);
  letter-spacing:-.022em;max-width:56ch;
}
.lk-scene__s{margin-top:10px;font-size:15px;line-height:1.6;color:var(--lk-ink-2);max-width:66ch}

/* --------------------------------------------------------------------------
   6. CHECK LIST
   -------------------------------------------------------------------------- */
.lk-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.lk-checks li{
  display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;
  background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:18px 20px;
  font-size:15px;line-height:1.55;color:var(--lk-ink-2);
}
.lk-checks svg{width:20px;height:20px;margin-top:1px;flex:none}

/* --------------------------------------------------------------------------
   7. PROSE - the insights articles
   -------------------------------------------------------------------------- */
.lk-prose{font-size:17px;line-height:1.72;color:var(--lk-ink-2)}
/* 1.4em, not 18px, and the same value as the paragraph rule below so a list or
   a blockquote between two paragraphs does not sit on a different rhythm to
   them. Headings keep their own larger values further down: more space above a
   heading than below it is the point of them. */
.lk-prose > *+*{margin-top:1.4em}

/* Paragraph spacing, and it needs its own rule.
   `.lk-prose > *+*` above is a class plus a universal, 0-1-0. `.lk p{margin:0}`
   in lantek.css is a class plus a type, 0-1-1, so it outranked it and EVERY
   paragraph in every prose block had zero space above it. Only the h2s and the
   lists were getting their gap, because neither is a `p`. Found on 9 September
   2026 while building the About page: six paragraphs rendered as one
   unbroken wall, and the same was true of all forty Insights articles and
   every policy page, live.

   `.lk .lk-prose > * + p` is 0-2-1, which beats it outright rather than tying
   it and depending on stylesheet order. This is the fifth instance of the same
   trap, after .lk-plan__note and three heading colours; e2e-specificity.cjs
   exists because of it and does not cover margins.

   1.4em rather than the 18px above: at 17px on a 1.72 line height, 18px is
   0.6 of a line and reads as a loose line break rather than a new paragraph. */
.lk .lk-prose > * + p{margin-top:1.4em}
.lk-prose h2{
  font-size:clamp(1.28rem,2.6vw,1.7rem);letter-spacing:-.03em;line-height:1.22;
  color:var(--lk-head);margin-top:44px;
}
.lk-prose h3{font-size:1.16rem;letter-spacing:-.024em;color:var(--lk-head);margin-top:32px}
.lk-prose p{max-width:72ch}
.lk-prose strong,.lk-prose b{color:var(--lk-head);font-weight:600}
.lk-prose a{color:var(--lk-sky)}
.lk-prose a:hover{text-decoration:underline}
/* Editorial bullets only.
   This rule was written for the bullets inside a carried article, and it also
   matched every component list placed inside a prose block: `.lk-prose ul` is
   a class plus a type, 0-1-1, so it beat `.lk-checks`, `.lk-num` and
   `.lk-apps` at 0-1-0 and overrode their display, their flex-direction and
   their padding. Measured on 10 September 2026: the Microsoft app wall
   rendered nineteen tiles one per row at 667px wide instead of eight across,
   and the numbered six layers lost their panel dividers.

   `:not([class])` is the fix rather than raising the components' specificity,
   because it says the true intent: this is for a list that came out of an
   article and carries no class of ours. It does not match our lists at all,
   so there is no specificity race left to lose. */
.lk-prose ul:not([class]),
.lk-prose ol:not([class]){padding-left:22px;display:flex;flex-direction:column;gap:10px;max-width:72ch}
.lk-prose li::marker{color:var(--lk-blue-hi)}
.lk-prose blockquote{
  margin:0;padding:20px 24px;background:rgba(79,180,245,.05);
  border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);
  font-size:1.06rem;color:var(--lk-ink);
}
/* .lk-scoped on purpose. This rule sets a margin on an element that `.lk
   p{margin:0}` / `.lk h1..h4{margin:0}` also matches, and a bare class
   (0-1-0) loses to a class plus a type (0-1-1). Every instance of this
   component was rendering flush against its neighbour. Found by a sweep on
   14 September 2026 and fixed the same way as the .lk-mt-* utilities. */
.lk .lk-artmeta{
  display:flex;gap:22px;flex-wrap:wrap;font-family:var(--lk-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lk-ink-4);
  padding:16px 0;border-top:1px solid var(--lk-line-2);border-bottom:1px solid var(--lk-line-2);
  margin-bottom:36px;
}

/* --------------------------------------------------------------------------
   8. MEGA FOOTER
   -------------------------------------------------------------------------- */
.lk-foot__top{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;
  align-items:flex-start;padding-bottom:clamp(32px,4vw,48px);
  border-bottom:1px solid var(--lk-line-2);margin-bottom:clamp(32px,4vw,48px);
}
.lk-foot__id{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px)}
.lk-foot__addr{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px)}
.lk-foot__addr > div{font-size:14px;line-height:1.65;color:var(--lk-ink-2);max-width:30ch}
.lk-foot__addr b{
  display:block;color:var(--lk-head);font-size:12.5px;font-weight:600;
  letter-spacing:-.01em;margin-bottom:8px;
}
/* Three columns since the Solutions block was cut. */
.lk-foot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,52px)}
@media(max-width:820px){.lk-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lk-foot__grid{grid-template-columns:1fr;gap:32px}}
.lk-foot__bottom{
  margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--lk-line-2);
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
}
.lk-foot__legal{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:13px;color:var(--lk-ink-4);
}
.lk-foot__legal a{color:var(--lk-ink-3);font-size:13px}
.lk-foot__legal a:hover{color:var(--lk-cyan)}
.lk-foot__top-link{
  font-family:var(--lk-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lk-ink-3);border:1px solid var(--lk-line-2);border-radius:2px;padding:6px 12px;
  transition:border-color var(--lk-fast) var(--lk-ease),color var(--lk-fast) var(--lk-ease);
}
.lk-foot__top-link:hover{border-color:var(--lk-line-3);color:var(--lk-cyan)}

/* --- 8b. THE CENTRED FOOTER -----------------------------------------------
   .lk-foot--mid puts the whole footer on the same centre line the header nav
   sits on.

   A centred footer usually costs legibility, because a ragged centred list is
   slower to scan than a flush one. It is bought back by centring the block,
   not the text: each nav column is only as wide as its widest link, the group
   of three is centred in the row, and the links inside stay on one left edge.
   The heading is the one thing centred over its own column, which is what
   reads as deliberate rather than as a stylesheet that lost an alignment.
   Once the columns stack on a phone there is no left edge left to hold, so
   everything goes to true centre. */
.lk-foot--mid{text-align:center}

.lk-foot--mid .lk-foot__top{
  flex-direction:column;align-items:center;gap:clamp(30px,4vw,46px);
  justify-content:flex-start;
}
.lk-foot--mid .lk-foot__id{
  flex-direction:column;align-items:center;gap:14px;
}
.lk-foot--mid .lk-logo{justify-content:center}
.lk-foot--mid .lk-logo__img{background-position:center center}
.lk-foot--mid .lk-foot__tag{
  margin:0;font-size:14px;color:var(--lk-ink-3);
  font-family:var(--lk-mono);letter-spacing:.06em;
}
.lk-foot--mid .lk-foot__badges{justify-content:center;margin-top:2px}

.lk-foot--mid .lk-foot__addr{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);width:100%;max-width:900px;
}
.lk-foot--mid .lk-foot__addr > div{max-width:none}
.lk-foot--mid .lk-foot__addr b{
  font-family:var(--lk-mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--lk-sky);
  margin-bottom:10px;
}
@media(max-width:720px){
  .lk-foot--mid .lk-foot__addr{grid-template-columns:1fr;gap:26px}
}

.lk-foot--mid .lk-foot__grid{justify-items:center}
.lk-foot--mid .lk-foot__grid > div{text-align:left;display:inline-block}
.lk-foot--mid .lk-foot__grid h4{text-align:center}
@media(max-width:560px){
  .lk-foot--mid .lk-foot__grid > div{text-align:center;display:block}
}

.lk-foot--mid .lk-foot__bottom{
  flex-direction:column;justify-content:center;gap:18px;
}
.lk-foot--mid .lk-foot__legal{justify-content:center}
.lk-foot--mid .lk-foot__bottom .lk-foot__badges{margin-top:0}

/* --------------------------------------------------------------------------
   9. ENQUIRY FORM
   A form on a dark ground has one hard problem: an empty input has to read as
   "type here" without glowing brighter than the copy above it. The resting
   state is therefore a panel one step lighter than the section, and only the
   focused field gets the cyan.
   -------------------------------------------------------------------------- */
.lk-form{
  position:relative;background:var(--lk-panel);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:clamp(20px,3vw,38px);
}
.lk-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.lk-form__grid>.lk-field--wide{grid-column:1/-1}
@media(max-width:720px){
  .lk-form__grid{grid-template-columns:1fr}
  .lk-form__grid>.lk-field--wide{grid-column:auto}
}

.lk-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.lk-field>label{
  font:600 11px/1.3 var(--lk-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--lk-ink-3);
}
.lk-field__req{color:var(--lk-cyan);margin-left:3px}
.lk-field input,.lk-field select,.lk-field textarea{
  width:100%;font:400 15px/1.5 var(--lk-sans);color:var(--lk-ink);
  background:var(--lk-panel-2);border:1px solid var(--lk-line-2);border-radius:var(--lk-r);
  padding:12px 14px;appearance:none;
  transition:border-color var(--lk-fast) var(--lk-ease),box-shadow var(--lk-fast) var(--lk-ease),
             background-color var(--lk-fast) var(--lk-ease);
}
.lk-field textarea{min-height:132px;resize:vertical}
/* The native arrow is drawn by the OS and cannot be recoloured, so it is
   replaced with one that matches the rest of the system. */
.lk-field select{
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%236f8099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
}
.lk-field input::placeholder,.lk-field textarea::placeholder{color:var(--lk-ink-4)}
.lk-field input:hover,.lk-field select:hover,.lk-field textarea:hover{border-color:var(--lk-line-3)}
.lk-field input:focus,.lk-field select:focus,.lk-field textarea:focus{
  outline:none;border-color:var(--lk-blue);background:var(--lk-panel-3);
  box-shadow:0 0 0 3px rgba(32,187,252,.16);
}
.lk-field.is-bad input,.lk-field.is-bad select,.lk-field.is-bad textarea{
  border-color:var(--lk-warn);box-shadow:0 0 0 3px rgba(242,163,60,.14);
}
.lk-field__err{
  font:400 13px/1.45 var(--lk-sans);color:var(--lk-warn);min-height:0;
}
.lk-field__err:empty{display:none}
.lk-field__hint{font:400 13px/1.45 var(--lk-sans);color:var(--lk-ink-4)}

/* Consent is a decision, not a field, so it is given its own weight. */
.lk-field--check{
  flex-direction:row;align-items:flex-start;gap:12px;grid-column:1/-1;
  background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r);padding:14px 16px;
}
.lk-field--check input[type=checkbox]{
  width:20px;height:20px;flex:0 0 20px;margin-top:1px;border-radius:4px;cursor:pointer;
  border:1px solid var(--lk-line-3);background:var(--lk-panel-3);
}
.lk-field--check input[type=checkbox]:checked{
  background:var(--lk-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5.5 10.3 3 3 6-6.6' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  border-color:var(--lk-blue);
}
.lk-field--check>div{display:flex;flex-direction:column;gap:5px}
.lk-field--check label{
  font:400 14px/1.55 var(--lk-sans);letter-spacing:0;text-transform:none;
  color:var(--lk-ink-2);cursor:pointer;
}
.lk-field--check.is-bad{border-color:var(--lk-warn)}

/* Off screen rather than display:none, because a bot that reads computed
   style skips a hidden field and fills a visible one. */
.lk-form__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.lk-form__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--lk-line);
}
.lk-form__status{font:500 14px/1.5 var(--lk-sans);flex:1 1 240px;min-width:0}
.lk-form__status.is-good{color:var(--lk-ok)}
.lk-form__status.is-bad{color:var(--lk-warn)}
.lk-form__status.is-note{color:var(--lk-ink-3)}
.lk-form.is-sent{border-color:rgba(1,169,130,.4)}

.lk-form__privacy{
  margin-top:18px;padding:16px 18px;background:var(--lk-panel-2);
  border:1px solid var(--lk-line);border-radius:var(--lk-r);
}
.lk-form__privacy h3{
  font:600 11px/1.3 var(--lk-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--lk-ink-3);margin:0 0 10px;
}
.lk-form__privacy ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lk-form__privacy li{
  font:400 13.5px/1.6 var(--lk-sans);color:var(--lk-ink-3);
  padding-left:16px;position:relative;
}
.lk-form__privacy li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--lk-blue);
}
.lk-form__privacy a{color:var(--lk-cyan);text-decoration:underline;text-underline-offset:2px}

/* The form sits beside the direct channels, because a visitor who would
   rather telephone should never have to scroll past a form to find a number. */
.lk-contact{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:900px){.lk-contact{grid-template-columns:1fr}}
.lk-contact__aside{display:flex;flex-direction:column;gap:14px}
.lk-dial{
  display:block;background:var(--lk-panel);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:20px;text-decoration:none;
  transition:border-color var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease);
}
a.lk-dial:hover{border-color:var(--lk-blue);transform:translateY(-2px)}
.lk-dial__k{
  display:block;font:600 10.5px/1.3 var(--lk-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--lk-ink-4);margin-bottom:9px;
}
.lk-dial__v{
  display:block;font:700 clamp(17px,1.8vw,21px)/1.28 var(--lk-sans);color:var(--lk-ink);
  letter-spacing:-.01em;
  /* An email address has no spaces, so it either fits or it breaks mid-word.
     info@lantekcomputers.com was breaking as "...lantekcomputers.c om",
     which reads as a typo. One size step down fits it, and break-word only
     intervenes on a genuinely narrow screen. */
  overflow-wrap:break-word;
}
a.lk-dial:hover .lk-dial__v{color:var(--lk-cyan)}
.lk-dial__d{display:block;font:400 13.5px/1.6 var(--lk-sans);color:var(--lk-ink-3);margin-top:7px}

/* --------------------------------------------------------------------------
   10. INSIGHTS INDEX
   A reading index, so the title carries the weight and everything else gets
   out of its way. Cards are one link each, edge to edge, because a card with
   two links in it makes the whole card ambiguous to click.
   -------------------------------------------------------------------------- */
.lk-feature{
  display:grid;grid-template-columns:1fr;gap:18px;text-decoration:none;
  background:var(--lk-panel);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:clamp(22px,3.2vw,40px);
  transition:border-color var(--lk-med) var(--lk-ease);
}
.lk-feature:hover{border-color:var(--lk-blue)}
.lk-feature__b{display:flex;flex-direction:column;gap:14px;min-width:0}

/* With a lead image the feature becomes two columns and the padding moves off
   the panel onto the copy, so the photograph runs to the panel edge. */
.lk-feature--img{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0;padding:0;overflow:hidden;align-items:stretch;
}
.lk-feature--img .lk-feature__b{
  padding:clamp(22px,3vw,40px);justify-content:center;
}
.lk-feature__img{
  position:relative;display:block;min-height:100%;overflow:hidden;
  background:var(--lk-panel-2);order:2;
}
.lk-feature__img__i,.lk-feature__img img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* Photography is warmer and lighter than this palette. Knocking the
     saturation back and laying a navy wash over it stops a stock photograph
     shouting louder than the headline next to it. Held higher than the cards
     because this one is large enough for detail to be worth keeping. */
  filter:saturate(.72) contrast(1.04) brightness(.88);
  transition:transform 1.2s var(--lk-ease),filter var(--lk-med) var(--lk-ease);
}
.lk-feature__img::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#132844;mix-blend-mode:color;opacity:.42;
}
/* Fades into the copy panel on its left edge, so there is no hard seam between
   photograph and text. */
.lk-feature__img::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--lk-panel) 0%,rgba(10,15,25,.55) 26%,rgba(10,15,25,.08) 70%,rgba(10,15,25,0) 100%);
}
.lk-feature--img:hover .lk-feature__img__i{transform:scale(1.03);filter:saturate(.95) contrast(1.04) brightness(.97)}
@media(max-width:820px){
  .lk-feature--img{grid-template-columns:1fr}
  .lk-feature__img{order:0;aspect-ratio:16/7;min-height:0}
  .lk-feature__img::after{
    background:linear-gradient(180deg,rgba(10,15,25,0) 40%,rgba(10,15,25,.6) 78%,var(--lk-panel) 100%);
  }
}
.lk-feature__k{
  font:600 10.5px/1.3 var(--lk-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lk-cyan);
}
.lk-feature .lk-feature__h{
  font:800 clamp(26px,3.6vw,42px)/1.12 var(--lk-sans);letter-spacing:-.02em;
  color:var(--lk-ink);margin:0;text-wrap:balance;
}
.lk-feature:hover .lk-feature__h{color:var(--lk-cyan)}
/* .lk-scoped on purpose. This rule sets a margin on an element that `.lk
   p{margin:0}` / `.lk h1..h4{margin:0}` also matches, and a bare class
   (0-1-0) loses to a class plus a type (0-1-1). Every instance of this
   component was rendering flush against its neighbour. Found by a sweep on
   14 September 2026 and fixed the same way as the .lk-mt-* utilities. */
.lk .lk-feature__d{
  font:400 clamp(15px,1.5vw,17px)/1.65 var(--lk-sans);color:var(--lk-ink-2);
  margin:0;max-width:66ch;
}
.lk-feature__m{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font:500 12px/1.4 var(--lk-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--lk-ink-4);
}

/* Cluster jump list. Real anchors, so it works with JavaScript off and each
   one is a crawlable internal link to a labelled group. */
.lk-chips{display:flex;flex-wrap:wrap;gap:9px}
.lk-chip{
  font:600 11.5px/1 var(--lk-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--lk-ink-3);text-decoration:none;
  border:1px solid var(--lk-line-2);border-radius:999px;padding:9px 15px;
  transition:border-color var(--lk-fast) var(--lk-ease),color var(--lk-fast) var(--lk-ease),
             background-color var(--lk-fast) var(--lk-ease);
}
.lk-chip:hover{border-color:var(--lk-blue);color:var(--lk-cyan);background:var(--lk-panel-2)}

.lk-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lk-posts--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.lk-posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lk-posts,.lk-posts--2{grid-template-columns:1fr}}

.lk-post{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--lk-panel);border:1px solid var(--lk-line);
  border-radius:var(--lk-r-lg);overflow:hidden;position:relative;
  transition:border-color var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease),
             background-color var(--lk-med) var(--lk-ease);
}
.lk-post:hover{
  border-color:var(--lk-blue);background:var(--lk-panel-2);transform:translateY(-3px);
}
/* The body carries the padding, so a card with an image runs it edge to edge
   and a card without one looks no different to before. */
.lk-post__b{display:flex;flex-direction:column;gap:11px;padding:22px 22px 20px;flex:1 1 auto;min-width:0}
.lk-post__m-img{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--lk-panel-2);border-bottom:1px solid var(--lk-line);
}
.lk-post__m-img__i,.lk-post__m-img img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.6) contrast(1.05) brightness(.84);
  transition:transform 1s var(--lk-ease),filter var(--lk-med) var(--lk-ease);
}
/* Two layers, and both are doing a job.
   ::before tints the whole frame toward the brand navy with mix-blend-mode,
   which is what pulls an off-palette photograph into the set. Stock imagery
   arrives in every hue going, and one green-lit server rack next to one warm
   boardroom reads as clip art unless something reconciles them.
   ::after is the plain wash top and bottom, so the eyebrow underneath never
   sits against a bright edge. */
.lk-post__m-img::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#132844;mix-blend-mode:color;opacity:.55;
}
.lk-post__m-img::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,25,.4) 0%,rgba(10,15,25,.08) 45%,rgba(10,15,25,.55) 100%);
}
.lk-post:hover .lk-post__m-img__i{transform:scale(1.04);filter:saturate(.95) contrast(1.04) brightness(.96)}
.lk-post__k{
  font:600 10px/1.3 var(--lk-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lk-ink-4);
}
.lk-post .lk-post__h{
  font:700 clamp(17px,1.7vw,19.5px)/1.28 var(--lk-sans);letter-spacing:-.01em;
  color:var(--lk-ink);margin:0;text-wrap:pretty;
}
.lk-post:hover .lk-post__h{color:var(--lk-cyan)}
/* .lk-scoped on purpose. This rule sets a margin on an element that `.lk
   p{margin:0}` / `.lk h1..h4{margin:0}` also matches, and a bare class
   (0-1-0) loses to a class plus a type (0-1-1). Every instance of this
   component was rendering flush against its neighbour. Found by a sweep on
   14 September 2026 and fixed the same way as the .lk-mt-* utilities. */
.lk .lk-post__d{
  font:400 14.5px/1.62 var(--lk-sans);color:var(--lk-ink-3);margin:0;
  flex:1 1 auto;
}
.lk-post__m{
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:2px;
  font:500 11px/1.4 var(--lk-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--lk-ink-4);
}
/* --lk-blue is the action colour, but at 12.5px on the card panel it measures
   4.03:1, under AA. The lighter sky carries the same intent and passes. */
.lk-post__go{
  font:600 12.5px/1 var(--lk-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--lk-sky);
}
.lk-post:hover .lk-post__go{color:var(--lk-cyan)}

/* A group that has nothing in it yet still gets a heading, so the shape of
   the publishing plan is visible rather than implied. */
.lk-group{margin-top:clamp(34px,4.5vw,60px)}
.lk-group:first-of-type{margin-top:0}
.lk-group__note{
  font:400 14px/1.6 var(--lk-sans);color:var(--lk-ink-4);
  border:1px dashed var(--lk-line-2);border-radius:var(--lk-r);padding:18px 20px;
}

/* --------------------------------------------------------------------------
   11. THE ARTICLE PAGE
   Insights articles are WordPress posts, so they render through Divi's own
   single template rather than through a generated layout. That template ships
   with a right sidebar and no allowance for a fixed header, which put the
   headline underneath the navigation and the body in a 696px column next to a
   widget stack.

   Three things are corrected here: the header overlap, the sidebar, and the
   measure. The prose itself is not restyled, because the_content is wrapped in
   .lk-prose by inc/insights.php so the existing article styling applies.
   -------------------------------------------------------------------------- */

/* .lk-hdr is position:fixed at var(--lk-nav-h), so it sits over the document
   and Divi's template leaves nothing behind it. Everything below is the same
   clearance the generated page headers use. */
.single-post #main-content{
  padding-top:calc(var(--lk-nav-h) + clamp(40px,5vw,72px));
  padding-bottom:clamp(56px,7vw,104px);
}

/* One column, centred, at a reading measure. Divi gives #left-area a
   percentage width and a right gutter for the sidebar it no longer has. */
.single-post #content-area{display:block}
.single-post #left-area{
  width:100%;max-width:74ch;margin-inline:auto;
  padding-right:0;float:none;
}
.single-post #sidebar{display:none}

.single-post .entry-title{
  font:800 clamp(1.9rem,4.4vw,2.9rem)/1.12 var(--lk-sans);
  letter-spacing:-.03em;color:var(--lk-head);margin:0 0 4px;text-wrap:balance;
}

/* Divi prints the featured image above the title on some configurations and
   inside the entry on others. Either way it wants the panel treatment the
   cards use rather than sitting flush as a raw photograph. */
.single-post .et_post_meta_wrapper > img,
.single-post .entry-featured-image-url,
.single-post .wp-post-image{
  display:block;width:100%;height:auto;margin:0 0 clamp(22px,3vw,38px);
  border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);
  filter:saturate(.72) contrast(1.04) brightness(.88);
}

/* Divi's own post meta line duplicates the date the article already carries in
   its .lk-artmeta rule. */
.single-post .post-meta{display:none}

.single-post .lk-prose > :first-child{margin-top:0}
.single-post .lk-prose ul:not([class]),
.single-post .lk-prose ol:not([class]){padding-left:22px;max-width:72ch}
.single-post .lk-prose li+li{margin-top:8px}
.single-post .lk-prose li{color:var(--lk-ink-2)}

/* Related reading and the conversion band, appended by inc/insights.php. */
.lk-artnav{
  max-width:74ch;margin:clamp(44px,6vw,80px) auto 0;
  padding-top:clamp(26px,3.5vw,40px);border-top:1px solid var(--lk-line-2);
}

/* --------------------------------------------------------------------------
   12. MID-PAGE CALL TO ACTION BAND
   Section 6 of the 27 August audit: sections 2 to 8 of the home page carried
   the entire argument and nothing to click. One line and one button, sitting
   directly after "what we do".

   Deliberately quieter than the closing conversion band. It is an offer made in
   passing to a reader who is still reading, not the final ask, and if it shouts
   as loudly as section 13 it competes with it.
   -------------------------------------------------------------------------- */
.lk-band{position:relative;overflow:hidden}
.lk-band__in{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
  background:
    linear-gradient(100deg,rgba(15,118,196,.15),rgba(15,118,196,.03) 62%,transparent),
    var(--lk-panel);
  border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);
  padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);
}
.lk-band__t{
  margin:0;flex:1 1 26ch;min-width:0;
  font:700 clamp(1.05rem,1.9vw,1.35rem)/1.35 var(--lk-sans);
  letter-spacing:-.02em;color:var(--lk-head);text-wrap:balance;
}
/* The qualifier is the part that carries the actual offer, so it reads as a
   second line rather than competing with the question. */
.lk-band__t span{
  display:block;margin-top:7px;
  font:400 clamp(.92rem,1.5vw,1rem)/1.55 var(--lk-sans);
  letter-spacing:0;color:var(--lk-ink-2);
}
.lk-band .lk-btn{flex:0 0 auto}
@media(max-width:640px){
  .lk-band__in{flex-direction:column;align-items:flex-start}
  .lk-band .lk-btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   12a2. THE NUMBERED SEQUENCE, inside prose
   For a short ordered list where the numbers are part of the content rather
   than furniture: the six layers of control are 01 to 06 on the home page, so
   they are 01 to 06 here too.

   A real <ol> with its marker suppressed, and the counter drawn as a span, so
   the two-digit form is under our control and the semantics stay intact.
   Named in the Divi list reset in lantek.css for the usual reason.
   -------------------------------------------------------------------------- */
.lk-num{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;
  background:var(--lk-line-2);
  border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);overflow:hidden;
}
.lk-num > li{
  display:flex;align-items:baseline;gap:14px;
  padding:15px 18px;background:var(--lk-panel-2);
  transition:background var(--lk-med) var(--lk-ease);
}
.lk-num > li:hover{background:var(--lk-panel-3)}
.lk-num__n{
  font-family:var(--lk-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--lk-sky);flex:none;
  /* Tabular so 01 and 06 occupy the same width and the labels line up. */
  font-variant-numeric:tabular-nums;
}
.lk-num > li > span:last-child{font-size:15.5px;line-height:1.5;color:var(--lk-ink-2)}
@media(max-width:560px){
  .lk-num > li{padding:13px 14px;gap:11px}
}

/* --------------------------------------------------------------------------
   12a3. THE MICROSOFT APP WALL
   Twenty product icons with their names under them, on the Microsoft 365 page.

   Not the white plates the partner carousel uses, and for a reason: these are
   full-colour app icons on a dark ground, and each one already carries its own
   silhouette. A white plate behind twenty of them would read as twenty
   stickers. They sit on the panel tint instead, with the name doing the work a
   plate would otherwise do.

   Flex with a centred last row, same as .lk-lgrid: an ordered set of twenty
   never divides evenly into whatever fits, and a part-filled row hanging off
   the left reads as a layout that ran out.
   -------------------------------------------------------------------------- */
.lk-apps{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.lk-apps__i{
  flex:0 1 calc((100% - 9 * 10px) / 10);min-width:92px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;
  padding:16px 8px 14px;
  background:var(--lk-panel-2);
  border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);
  transition:background var(--lk-med) var(--lk-ease),border-color var(--lk-med) var(--lk-ease);
}
.lk-apps__i:hover{background:var(--lk-panel-3);border-color:var(--lk-line-3)}
/* The source files are stripped of their own width and height by build time,
   so the size is set once here and every icon obeys it whatever its viewBox. */
.lk-apps__i svg{width:30px;height:30px;flex:none;display:block}

/* Out of the reading column, but only where there is provably room for it.

   This wall sits inside a prose block, and proseBlock caps its wrap at 74ch
   for the paragraphs above. A grid of nineteen icons is a figure rather than
   something read a line at a time, and at 690px it came out six across with
   one tile alone on a fourth row.

   The first attempt at this was a negative `margin-inline` computed from
   `74ch` against `--lk-max`. It looked right at 1440 and overflowed the
   viewport at every width below: 32px past each edge at 1024 and 159px at
   768, invisible only because body carries overflow-x:hidden, which hid a
   real clip rather than preventing one. A plain breakpoint at the width where
   the room exists cannot do that. Below it the wall simply fills the reading
   column and wraps to more rows, which is fine. */
@media(min-width:1200px){
  /* `margin-inline: auto` cannot do this. Auto margins resolve to zero for a
     child wider than its containing block, so a 1040px wall in a 689px column
     simply extended to the right: measured 375px of space on the left and 25px
     on the right at 1440, and 55px past the viewport edge at 1280.

     `calc(50% - 520px)` is the symmetric version. 50% is half the parent, 520
     is half the wall, so each side pulls back by exactly the difference and
     the wall ends up centred on the parent, which is itself centred on the
     page. 1040 plus two 56px gutters is 1152, so 1200px is the width at which
     this is safe. */
  .lk-apps{width:1040px;max-width:none;margin-inline:calc(50% - 520px)}
}
.lk-apps__i span{
  font-family:var(--lk-mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lk-ink-3);text-align:center;line-height:1.35;
}
@media(max-width:900px){
  .lk-apps__i{flex-basis:calc((100% - 5 * 10px) / 6);min-width:84px;padding:13px 6px 11px}
  .lk-apps__i svg{width:26px;height:26px}
}
@media(max-width:560px){
  .lk-apps{gap:8px}
  .lk-apps__i{flex-basis:calc((100% - 3 * 8px) / 4);min-width:70px;padding:11px 5px 10px}
  .lk-apps__i svg{width:24px;height:24px}
  .lk-apps__i span{font-size:8.5px;letter-spacing:.05em}
}

/* --------------------------------------------------------------------------
   12b. THE STATIONARY LOGO GRID
   Accreditations page. Replaced the vendor table on 9 September 2026.

   Flex rather than grid, and that is the whole design decision. Fourteen
   items in a grid of equal tracks leaves a part-filled last row hanging off
   the left, which reads as a layout that ran out. Flex with
   justify-content:center centres whatever is left over, so seven across
   becomes 7 and 7, five across becomes 5, 5 and a centred 4, and none of it
   needs a breakpoint per column count.

   The basis is written as a seventh of the row minus its share of the gaps,
   so at full width it lands on exactly seven. min-width is what makes it wrap
   on its own below that, without a media query.

   Stationary means stationary: no hover transform and no transition. The
   moving version of this is the carousel in the hero, and a page does not
   need two.
   -------------------------------------------------------------------------- */
.lk-lgrid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;padding:0;margin:0;
}
.lk-lgrid__c{
  flex:0 1 calc((100% - 6 * 10px) / 7);min-width:126px;
  /* Flex, not grid, and this one is measured. With `display:grid` the plate
     had one implicit auto track, so the track sized itself to the logo and
     `max-width:100%` on the logo then resolved against that same track. The
     constraint was circular and did nothing: Fortinet is 8.28:1, which at its
     15px optical height is 124px, and it sat 13px wider than the 111px
     content box, eating its padding. A flex container resolves the child's
     percentage against the container's own content box, and shrinks the child
     to fit besides, so the widest marks now letterbox down instead of
     spreading. */
  display:flex;align-items:center;justify-content:center;
  height:84px;padding:0 14px;
  background:#fff;border-radius:var(--lk-r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px -18px rgba(0,0,0,.95);
}
/* White plates rather than mono-white silhouettes, for the same two reasons
   as the carousel: mono destroys ESET, whose mark is white type inside a teal
   box, and these trademark policies ask for the artwork unaltered. The
   background-image and the aspect-ratio for each slug are printed by
   lantek_brand_css() against .lk-part__i, which is why every cell carries
   that class as well as this one. */
.lk-lgrid__i{max-width:100%}
@media(max-width:900px){
  .lk-lgrid__c{height:74px;padding:0 12px;min-width:112px}
}
@media(max-width:560px){
  .lk-lgrid{gap:8px}
  .lk-lgrid__c{height:64px;padding:0 10px;min-width:96px}
  /* The optical heights in brand.cjs are set for an 84px plate. Scaling them
     with the plate keeps the marks level against each other rather than
     letting the tall ones crowd a shorter box. */
  .lk-lgrid__c .lk-part__i{height:calc(var(--h,26px) * .8)}
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .lk-ph__canvas,.lk-ph__in{transform:none !important}
  .lk-scene__n{border-color:var(--lk-cyan) !important}
  .lk-post:hover,a.lk-dial:hover{transform:none !important}
  .lk-post__m-img__i,.lk-feature__img__i{transition:none !important}
  .lk-post:hover .lk-post__m-img__i,
  .lk-feature--img:hover .lk-feature__img__i{transform:none !important}
}

/* --------------------------------------------------------------------------
   A MARGINAL NOTE
   A caveat about the page rather than a section of it. Added 15 September 2026
   for the four See It In Action disclaimers, which were running through the
   prose renderer and arriving centred, at 74ch, under a left aligned hero,
   with a full section's padding around two lines of text.

   Left aligned to the same edge as everything above it, tight, and marked with
   a rule rather than a box: a disclaimer in a box reads as a cookie banner.
   -------------------------------------------------------------------------- */
.lk-sec--note{padding:clamp(26px,3vw,40px) 0 0}
.lk-note{
  max-width:68ch;
  border-left:1px solid var(--lk-line-3);
  padding-left:clamp(14px,1.6vw,20px);
}
.lk .lk-note p{
  font-size:14.5px;line-height:1.62;color:var(--lk-ink-3);
}
.lk .lk-note p + p{margin-top:9px}

/* Moved here from lantek-ui.css on 15 September 2026. The footer overrides
   below have the same weight as the .lk-foot--mid rules earlier in THIS
   file, and this file loads after lantek-ui.css, so from there they lost on
   source order and the phone type floor silently did nothing. Moving the
   block was the fix; bumping every selector to out-specify a later file is
   how a stylesheet stops being readable. */
/* --------------------------------------------------------------------------
   THE PHONE LEGIBILITY FLOOR, SHARED FURNITURE
   Menu keys, status tags, footer headings and badges. Every one of these is
   a small tracked label that earns its size on a monitor and loses it on a
   handset, so each gets the smallest increase that makes it readable rather
   than a blanket bump that would flatten the hierarchy.
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  .lk-mega__k,.lk-drawer__k,.lk-mega__pitch-k{font-size:11.5px;letter-spacing:.1em}
  .lk-soc__tag{font-size:11px}
  .lk-rule__t,.lk-flag__t{font-size:11.5px;letter-spacing:.09em}
  /* Several of these classes are also styled by .lk-foot--mid rules
     earlier in this file at the same weight, so each carries the section
     class to settle it on specificity rather than on line number. */
  .lk .lk-foot__badge{font-size:11.5px}
  .lk .lk-foot__grid h4{font-size:11.5px}
  .lk .lk-foot__addr b{font-size:12.5px}
  .lk .lk-foot__top-link{font-size:11.5px}
  .lk-marq__r{font-size:11px}
  .lk .lk-term__bar,.lk .lk-term__bar span{font-size:11.5px}
  .lk .lk-small,.lk .lk-dia__cap{font-size:12px}

  /* The policy row at the foot is four separate destinations sitting on one
     line, and twenty one pixels of height between them is a coin toss with
     a thumb. Padding on the link, not gap on the row, so the target grows
     rather than the space around it. */
  .lk .lk-foot__bottom a{display:inline-block;padding:8px 0;min-height:24px}
  .lk .lk-foot__top-link{padding:10px 0}

  /* The navigation columns and the two contact links, same problem and a
     trap in the fix. .lk li a draws its link line as a border-bottom, and a
     border sits on the BOX: add vertical padding and the line detaches from
     the word and floats nine pixels beneath it, which is exactly what the
     first attempt at this did to every link in the footer.

     text-decoration is drawn on the TEXT. The padding grows the target, the
     line stays under the word, and the footer looks identical to before.

     Inline links inside a sentence are left alone on purpose: WCAG 2.2
     exempts them, and padding a link mid-paragraph makes it overlap the
     line above. */
  .lk-foot ul{gap:2px}
  .lk .lk-foot ul li > a,.lk .lk-foot__addr a{
    display:inline-block;padding:9px 0;min-height:24px;
    border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;
    text-decoration-color:rgba(79,180,245,.35);text-underline-offset:3px;
  }
  .lk .lk-foot ul li > a:hover,.lk .lk-foot__addr a:hover{
    text-decoration-color:var(--lk-cyan);
  }
}

/* --------------------------------------------------------------------------
   THE AMBIENT PAGE HEADER
   18 September 2026. Every page without a hero photograph used to run an
   animated node-graph canvas behind its title: a requestAnimationFrame loop,
   a conic gradient and up to fifty-eight moving nodes, on thirty four pages.
   The home page dropped it on 14 September for costing frames and for looking
   machine-made, and it went on running everywhere else for four more days.

   This is the home page's own background, at header height. Four gradient
   fields and a grid, all of it composited, none of it JavaScript.

   The fields are sized in vw and the home page hero is a full screen tall, so
   at header height they would sit mostly below the fold of the box. They are
   pulled up and in here, which is the only difference.
   -------------------------------------------------------------------------- */
.lk-ph__amb{position:absolute;inset:0;z-index:0}
.lk-ph__amb .lkh-amb__f--1{width:62vw;height:62vw;left:-16vw;top:-30vw}
.lk-ph__amb .lkh-amb__f--2{width:54vw;height:54vw;right:-10vw;top:-26vw}
.lk-ph__amb .lkh-amb__f--3{width:58vw;height:58vw;left:26vw;bottom:-40vw}
.lk-ph__amb .lkh-amb__f--4{width:38vw;height:38vw;right:4vw;bottom:-24vw}
/* The page header carries its own veil for the copy, so the ambient scrim
   underneath it is lighter than the hero's or the two stack into mud. */
.lk-ph__amb::after{
  background:
    radial-gradient(ellipse 88% 76% at 50% 34%,
      rgba(2,5,12,.10) 0%,rgba(2,5,12,.34) 64%,rgba(2,5,12,.56) 100%),
    linear-gradient(180deg,rgba(2,5,12,.34) 0%,transparent 30%,
      transparent 62%,rgba(4,6,11,.80) 100%);
}

/* --------------------------------------------------------------------------
   A PAGE HEADER WITH A PHOTOGRAPH
   18 September 2026. Thirty four pages that had no picture now have one, and
   a picture needs room: behind the ninety pixels a bare header occupies it
   reads as a texture rather than as a photograph.

   Shorter than .lk-ph--img, deliberately. That variant is 76vh because a
   service page is a landing page. An accreditations page is not, and a reader
   who has clicked through to it wants the text, so this stops at a little
   under half a screen and lets the content start.
   -------------------------------------------------------------------------- */
.lk-ph--pg{
  min-height:clamp(340px,44vh,460px);
  display:flex;align-items:center;
  padding-block:calc(var(--lk-nav-h) + clamp(40px,5vw,68px)) clamp(40px,5vw,68px);
}
.lk-ph--pg .lk-ph__in{width:100%}
/* The same directional veil the service heroes use, one step lighter: these
   images are carrying less weight and can afford to be seen. */
.lk-ph--pg .lk-ph__veil{
  background:
    linear-gradient(95deg,var(--lk-void) 0%,rgba(4,6,11,.92) 28%,rgba(4,6,11,.58) 60%,rgba(4,6,11,.26) 100%),
    linear-gradient(0deg,var(--lk-black),transparent 52%);
}
@media(max-width:760px){
  /* Narrow, the copy sits over the middle of the frame, so the veil goes flat
     rather than directional. Same reasoning as .lk-ph--img above. */
  .lk-ph--pg{min-height:clamp(300px,52vw,400px)}
  .lk-ph--pg .lk-ph__veil{
    background:linear-gradient(0deg,var(--lk-black) 6%,rgba(4,6,11,.84) 46%,rgba(4,6,11,.72) 100%);
  }
}

/* --------------------------------------------------------------------------
   THE RULE UNDER A SECTION HEADING
   .lkfx-rule is a 1px line with a cyan sweep crossing it every seven seconds.
   It needs room of its own: dropped straight after an h2 it sits on the
   heading's own descenders.
   -------------------------------------------------------------------------- */
.lk-head__rule{margin-top:clamp(12px,1.4vw,18px);max-width:180px}
/* A head with a lead paragraph under it wants the rule between the two, not
   pushed against the paragraph. */
.lk-head__rule + .lk-lead{margin-top:clamp(14px,1.6vw,20px)}

/* --------------------------------------------------------------------------
   THE CONTENTS RAIL
   18 September 2026. Forty nine prose blocks carry three or more headings and
   rendered as an unbroken 74ch column; the policy pages run past five thousand
   pixels of it. This is the one interactive thing a long read actually wants.

   The reading column keeps its 74ch. The rail is given its own track beside
   it rather than taken out of it, because a measure that changes because a
   page happens to have headings is a worse read, not a better one.
   -------------------------------------------------------------------------- */
.lk-read{display:grid;gap:clamp(24px,3vw,44px)}
@media(min-width:1120px){
  .lk-read{grid-template-columns:minmax(0,74ch) minmax(0,210px);align-items:start}
}
.lk-read .lk-prose{max-width:74ch;min-width:0}

.lk-toc{
  position:relative;min-width:0;
  border-left:1px solid var(--lk-line-2);
  padding-left:clamp(14px,1.4vw,18px);
}
@media(min-width:1120px){
  /* Sticky under the header, and only here: below 1120px the rail sits above
     the text, where sticking it would cover the thing it indexes. */
  .lk-toc{position:sticky;top:calc(var(--lk-nav-h) + 22px);order:2}
}
.lk-toc__k{
  display:block;font-family:var(--lk-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lk-ink-4);margin-bottom:10px;
}
.lk .lk-toc__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.lk .lk-toc__i{margin:0;font-size:13px;line-height:1.4}
.lk .lk-toc__i--h3{padding-left:12px;font-size:12.5px}
/* .lk .lk-toc__l .lk-toc__i a, and the extra class is not padding.
   `.lk li a:not([class*="lk-btn"])` in lantek.css draws the link line every
   prose link carries, and :not() counts its argument, so that selector is
   0-2-2. A two class rule here is 0-2-1 and loses: the rail shipped with a
   full width rule under every item, because these anchors are display:block.
   Fourteenth instance of this family of trap in this codebase. */
.lk .lk-toc__l .lk-toc__i a{
  display:block;padding:6px 2px;color:var(--lk-ink-3);
  border-bottom:0;text-decoration:none;
  transition:color var(--lk-fast) var(--lk-ease);
}
.lk .lk-toc__l .lk-toc__i a:hover{color:var(--lk-ink);border-bottom:0}
/* The current heading. A needle on the rail rather than a background on the
   item, so the rail reads as a scale with a position on it instead of as a
   menu with a selection.

   The needle is ONE pseudo element on the nav, moved with a transform. Put on
   the item instead it would have to be drawn and undone on fifteen elements
   per scroll, and its own static position would fight the translate. */
.lk .lk-toc__l .lk-toc__i.is-here a{color:#fff}
.lk-toc::after{
  content:"";position:absolute;left:-1px;top:0;width:2px;
  height:var(--lk-toc-h,18px);transform:translateY(var(--lk-toc-y,0px));
  background:var(--lk-cyan);box-shadow:0 0 9px rgba(32,187,252,.85);
  transition:transform .28s var(--lk-ease),height .28s var(--lk-ease);
  opacity:0;
}
.lk-toc.is-live::after{opacity:1}
@media(prefers-reduced-motion:reduce){.lk-toc::after{transition:none}}

/* Narrow: the rail becomes a plain list above the text, still real links. */
@media(max-width:1119px){
  .lk-toc{
    border-left:0;border-top:1px solid var(--lk-line-2);
    border-bottom:1px solid var(--lk-line-2);
    padding:14px 0;
  }
  .lk .lk-toc__l{flex-direction:row;flex-wrap:wrap;gap:2px 16px}
  .lk .lk-toc__i--h3{display:none}
  .lk-toc::after{display:none}
  .lk .lk-toc__l .lk-toc__i.is-here a{color:var(--lk-cyan)}
}