@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)}

/* Hero loop behind a service page header. Decorative only: it carries nothing
   the copy does not already say, so it is aria-hidden and it disappears under
   reduced motion without leaving a hole. */
.lk-ph__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.04);
}
.lk-ph--video .lk-ph__veil{
  background:
    linear-gradient(95deg,var(--lk-void) 4%,rgba(4,6,11,.88) 38%,rgba(4,6,11,.42) 70%,rgba(4,6,11,.28) 100%),
    linear-gradient(0deg,var(--lk-black),transparent 44%);
}
.lk-ph--video .lk-bg__grid{opacity:.4}
@media(prefers-reduced-motion:reduce){
  .lk-ph__video{display:none}
}

/* --------------------------------------------------------------------------
   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:#fff;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{
  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}
.lk-qa__q{
  font-size:clamp(1.2rem,2.5vw,1.62rem);letter-spacing:-.028em;line-height:1.22;
  color:#fff;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.
   -------------------------------------------------------------------------- */
.lk-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.lk-plans{grid-template-columns:1fr}}
.lk-plan{
  position:relative;background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:28px 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);
}
.lk-plan:hover{border-color:var(--lk-line-3);transform:translateY(-3px)}
.lk-plan--lead{
  border-color:var(--lk-line-3);
  background:linear-gradient(155deg,rgba(32,187,252,.1),var(--lk-panel-2));
  box-shadow:0 24px 70px -40px rgba(15,118,196,.9);
}
.lk-plan__n{font-family:var(--lk-mono);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--lk-blue-hi)}
.lk-plan--lead .lk-plan__n{color:var(--lk-cyan)}
.lk-plan__t{font-size:1.4rem;font-weight:600;letter-spacing:-.03em;color:#fff}
.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(--lk-blue);
}
.lk-plan--lead .lk-plan__l li::before{background:var(--lk-cyan)}
.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;
}

/* --------------------------------------------------------------------------
   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:#fff;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:#fff;
  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)}
.lk-prose > *+*{margin-top:18px}
.lk-prose h2{
  font-size:clamp(1.28rem,2.6vw,1.7rem);letter-spacing:-.03em;line-height:1.22;
  color:#fff;margin-top:44px;
}
.lk-prose h3{font-size:1.16rem;letter-spacing:-.024em;color:#fff;margin-top:32px}
.lk-prose p{max-width:72ch}
.lk-prose strong,.lk-prose b{color:#fff;font-weight:600}
.lk-prose a{color:var(--lk-sky)}
.lk-prose a:hover{text-decoration:underline}
.lk-prose ul,.lk-prose ol{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-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:#fff;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)}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .lk-ph__canvas,.lk-ph__in,.lk-ph .lk-bg__grid{transform:none !important}
  .lk-scene__n{border-color:var(--lk-cyan) !important}
}