:root{
  --ink:#070D12;
  --panel:#0D1A21;
  --panel-2:#122530;
  --green:#2ED3A0;
  --green-dark:#06130E;
  --text:#E6EEF2;
  --muted:#8FA3AE;
  --dim:#5E7380;
  --line:#16242C;
}
/* rem-based: root scales like klicnsend.com and klictechnologies.com */
html{font-size:16px;scroll-behavior:smooth}
@media (min-width:2560px){html{font-size:21.333px}}
@media (min-width:3840px){html{font-size:32px}}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:2560px;margin:0 auto;padding:0 16px}
@media (min-width:900px){.wrap{padding:0 48px}}
@media (min-width:1920px){.wrap{padding:0 160px}}
@media (min-width:3840px){.wrap{max-width:none;padding:0 240px}}

/* header */
header{padding:1.75rem 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,13,18,.88);backdrop-filter:blur(10px);z-index:20}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
/* KT's logo image has space above the letters, ours is trimmed:
   2.99rem + .5rem top puts KLIC at KT's exact size and position */
header .logo{display:block}
header .logo img{height:2.99rem;width:auto;margin-top:.5rem}
nav{display:flex;align-items:center;gap:1.75rem}
nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;transition:color .2s}
nav a:hover,nav a:focus-visible,nav a.active{color:var(--green)}
@media (max-width:700px){nav a.hide-sm{display:none}}

/* buttons */
.btn{display:inline-block;background:var(--green);color:var(--green-dark);text-decoration:none;font-weight:600;font-size:.95rem;padding:.75rem 1.5rem;border-radius:3px;transition:filter .2s}
.btn:hover,.btn:focus-visible{filter:brightness(1.1)}
.btn.ghost{background:none;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--green);color:var(--green);filter:none}

/* hero */
.hero{padding:5rem 0 4.5rem}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.12;font-weight:700;margin:0 0 1.25rem;letter-spacing:-.01em}
.hero h1 .acc{color:var(--green)}
.hero p{color:var(--muted);font-size:1.15rem;max-width:34rem;margin:0 0 2rem}
.hero .actions{display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:900px){.hero{padding:3rem 0}.hero .wrap{grid-template-columns:1fr;gap:2.5rem}}

/* rack graphic */
.rack{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.5rem;display:grid;gap:.9rem}
.unit{height:3.25rem;background:var(--panel-2);border-radius:4px;display:flex;align-items:center;gap:.6rem;padding:0 1.25rem}
.unit .vent{width:.35rem;height:1.25rem;background:var(--line);border-radius:1px}
.unit .sp{flex:1}
.unit .led{width:.6rem;height:.6rem;border-radius:50%;background:var(--green);box-shadow:0 0 .6rem rgba(46,211,160,.6)}
.unit .led.off{background:#3A5562;box-shadow:none}
.unit .led.blink{animation:blink 2.4s infinite}
@keyframes blink{0%,60%{opacity:1}70%,80%{opacity:.25}90%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.unit .led.blink{animation:none}}

/* sections */
section.block{padding:4.5rem 0;border-top:1px solid var(--line)}
section.block h2{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:700;margin:0 0 .5rem}
section.block .lead{color:var(--muted);max-width:44rem;margin:0 0 2.5rem;font-size:1.05rem}

/* service tiles: each tile is one big link */
.tiles{display:grid;gap:1rem}
.tile{display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:6px;padding:1.75rem 2rem;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.tile:hover,.tile:focus-visible{background:var(--panel-2);border-color:var(--green);transform:translateX(4px)}
.tile .ico{flex-shrink:0;width:3rem;height:3rem;border-radius:6px;background:var(--panel-2);display:grid;place-items:center;color:var(--green)}
.tile .ico svg{width:1.6rem;height:1.6rem}
.tile .txt{flex:1}
.tile h3{margin:0 0 .25rem;font-size:1.3rem;font-weight:600}
.tile p{margin:0;color:var(--muted)}
.tile .arr{color:var(--green);font-size:1.75rem;line-height:1;flex-shrink:0}
@media (max-width:600px){.tile{padding:1.25rem;gap:1rem}.tile .ico{display:none}}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.about p{color:var(--muted);margin:0 0 1rem}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* call to action */
.cta{text-align:center}
.cta .lead{margin-left:auto;margin-right:auto;text-align:center}

/* service detail pages */
.page-hero{padding:4rem 0 3rem}
.crumb{color:var(--dim);font-size:.9rem;margin-bottom:1rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--green)}
.page-hero h1{font-size:clamp(2rem,3.5vw,3rem);margin:0 0 1rem;line-height:1.15}
.page-hero p{color:var(--muted);font-size:1.15rem;max-width:44rem;margin:0}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1.5rem}
.feature h3{margin:0 0 .4rem;font-size:1.1rem;color:var(--text)}
.feature p{margin:0;color:var(--muted)}
@media (max-width:800px){.features{grid-template-columns:1fr}}
.next{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* footer - copied from klictechnologies.com (which copies klicnsend.com):
   logo left, links middle, social right, lighter copyright bar below.
   Only change: cyan -> green. */
footer{border-top:1px solid var(--line)}
.foot-main .wrap{display:flex;align-items:center;gap:4rem}
.foot-logo{width:119px;height:auto;max-width:100%;display:block;flex-shrink:0}
@media (max-width:1023px){.foot-logo{width:223px}}
@media (max-width:560px){.foot-logo{width:178px}}
@media (min-width:1024px){.foot-logo{width:190px}}
@media (min-width:1280px){.foot-logo{width:238px}}
@media (min-width:1536px){.foot-logo{width:273px}}
@media (min-width:2560px){.foot-logo{width:357px}}
@media (min-width:3840px){.foot-logo{width:392px}}
.foot-nav{display:flex;gap:2.5rem;flex:1;justify-content:center}
.foot-nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:16px}
@media (min-width:1024px){.foot-nav a{font-size:18px}}
@media (min-width:1280px){.foot-nav a{font-size:20px}}
@media (min-width:1536px){.foot-nav a{font-size:24px}}
@media (min-width:2560px){.foot-nav a{font-size:36px}}
@media (min-width:3840px){.foot-nav a{font-size:48px}}
@media (min-width:768px) and (max-width:1023px){.foot-nav a{font-size:20px}}
@media (min-width:1024px) and (max-width:1279px){.foot-nav a{font-size:22px}}
@media (min-width:1280px) and (max-width:1366px){.foot-nav a{font-size:24px}}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--green)}
.foot-social{text-align:center;flex-shrink:0}
.foot-social p{margin:0 0 .625rem;font-weight:800;font-size:1.05rem;color:var(--text)}
.foot-social .icons{display:flex;justify-content:center;gap:1rem}
.foot-social svg{width:1.75rem;height:1.75rem;display:block;color:var(--muted)}
.foot-social span[title^="Facebook"] svg{transform:scale(1.2)}
@media (min-width:1024px){.foot-social{padding-right:64px}}
@media (min-width:1280px){.foot-social{padding-right:80px}}
@media (min-width:1536px){.foot-social{padding-right:96px}}
@media (min-width:2560px){.foot-social{padding-right:160px}}
@media (min-width:3840px){.foot-social{padding-right:224px}}
.foot-bar{background:var(--panel);border-top:1px solid var(--line);padding:1.25rem 0;text-align:center}
.foot-bar p{margin:0;color:var(--muted);font-size:.85rem;font-weight:600}
.foot-bar a{color:var(--muted);text-decoration:none}
.foot-bar a:hover,.foot-bar a:focus-visible{color:var(--green)}
footer .wrap{max-width:1536px;padding:0 20px}
@media (min-width:768px){footer .wrap{padding:0 48px}}
@media (min-width:2560px){footer .wrap{max-width:2560px;padding:0 160px}}
@media (min-width:3840px){footer .wrap{max-width:3840px;padding:0 240px}}
@media (min-width:1680px){footer .wrap{padding-left:32px}}
@media (min-width:2560px){footer .wrap{padding-left:120px}}
@media (min-width:3840px){footer .wrap{padding-left:180px}}
.foot-main{padding:40px 0}
@media (min-width:2560px){.foot-main{padding:80px 0}}
@media (min-width:1024px) and (max-width:1279px){.foot-main .wrap{gap:3rem}}
@media (max-width:1023px){.foot-main .wrap{flex-direction:column;gap:1.75rem;text-align:center}.foot-nav{gap:1.75rem}}
@media (min-width:768px) and (max-width:1279px){.foot-nav{gap:3rem}}
@media (min-width:1280px){.foot-nav{gap:4rem}}
@media (min-width:1024px){
  .foot-main .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0}
  .foot-nav{flex:0 0 auto;justify-content:center}
  .foot-social{justify-self:end}
}

:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* social media sizes - copied from klictechnologies.com (second footer block) */
@media (min-width:3840px){.foot-main{padding:112px 0}}
.foot-social{padding-top:20px}
.foot-social p{font-size:20px;line-height:1.4;margin:0}
.foot-social .icons{gap:16px;margin-top:12px}
.foot-social svg{width:20px;height:20px}
@media (min-width:768px){.foot-social p{font-size:24px}}
@media (min-width:1024px){.foot-social svg{width:24px;height:24px}}
@media (min-width:1680px){.foot-social svg{width:28px;height:28px}}
@media (min-width:1920px){.foot-social svg{width:32px;height:32px}}
@media (min-width:2560px){
  .foot-social p{font-size:48px}
  .foot-social svg{width:48px;height:48px}
  .foot-social .icons{gap:24px;margin-top:20px}
}
@media (min-width:3840px){
  .foot-social p{font-size:60px}
  .foot-social svg{width:64px;height:64px}
  .foot-social .icons{gap:32px;margin-top:24px}
}
/* header logo sizes per screen - mirror klictechnologies.com, scaled for
   our trimmed logo (height x0.854, top offset = 1/7 of KT's height) */
@media (min-width:900px) and (max-height:860px){header{padding:1.25rem 0}}
@media (min-width:900px) and (max-height:740px){header{padding:.875rem 0}header .logo img{height:2.35rem;margin-top:.39rem}}
@media (max-width:760px){header .logo img{height:2.14rem;margin-top:.36rem}}
@media (max-width:560px){header{padding:1.125rem 0}header .logo img{height:1.28rem;margin-top:.21rem}}
/* service page v2: hero icon + actions, checklist, steps, plans, why, faq */
.page-hero .wrap{display:grid;grid-template-columns:auto 1fr;gap:1.75rem;align-items:center}
.page-hero .big-ico{width:5rem;height:5rem;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;color:var(--green)}
.page-hero .big-ico svg{width:2.5rem;height:2.5rem}
.page-hero .actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}
@media (max-width:600px){.page-hero .wrap{grid-template-columns:1fr}}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 2.5rem}
.checklist li{position:relative;padding-left:1.75rem}
.checklist li:before{content:"";position:absolute;left:0;top:.4em;width:.8rem;height:.45rem;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
@media (max-width:800px){.checklist{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.step{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:6px;padding:1.5rem}
.step h3{margin:0 0 .4rem;font-size:1.1rem}
.step h3 span{color:var(--green);margin-right:.4rem}
.step p{margin:0;color:var(--muted)}
@media (max-width:800px){.steps{grid-template-columns:1fr}}
.plans{overflow-x:auto}
.plans table{width:100%;border-collapse:collapse;min-width:36rem}
.plans th,.plans td{padding:.9rem 1rem;border-bottom:1px solid var(--line);text-align:center}
.plans th{font-size:1.1rem;font-weight:600}
.plans th:first-child,.plans td:first-child{text-align:left;color:var(--muted);font-weight:500}
.plans .hl{background:var(--panel)}
.plans th.hl{border-top:3px solid var(--green)}
.plans .yes{color:var(--green);font-weight:700}
.plans .no{color:var(--dim)}
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.why div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1.5rem}
.why h3{margin:0 0 .4rem;font-size:1.1rem}
.why p{margin:0;color:var(--muted)}
@media (max-width:800px){.why{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--green);font-size:1.4rem;line-height:1}
.faq details[open] summary:after{content:"\2013"}
.faq details p{margin:.75rem 0 0;color:var(--muted);max-width:52rem}
/* contact page */
.page-hero.simple .wrap{display:block}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.qform{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2rem;display:grid;gap:1.25rem;position:relative}
.qform .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:600px){.qform{padding:1.25rem}.qform .row2{grid-template-columns:1fr}}
.qform label,.qform .lbl{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.4rem;font-weight:500}
.qform input[type=text],.qform input[type=email],.qform textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:4px;color:var(--text);font:inherit;padding:.75rem .9rem}
.qform textarea{min-height:9rem;resize:vertical}
.qform input:focus,.qform textarea:focus{outline:none;border-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;cursor:pointer;color:var(--muted);transition:border-color .2s,color .2s}
.chip input:checked+span{border-color:var(--green);color:var(--green)}
.chip input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform button.btn{border:0;cursor:pointer;font:inherit;font-weight:600;justify-self:start;padding:.9rem 2rem}
.qform button.btn:disabled{opacity:.6;cursor:wait}
.form-status{margin:0;font-size:.95rem}
.form-status.ok{color:var(--green)}
.form-status.err{color:#FF8A8A}
.side-cards{display:grid;gap:1rem}
.side-cards div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.5rem}
.side-cards h3{margin:0 0 .4rem;font-size:1.1rem}
.side-cards p{margin:0;color:var(--muted)}
.side-cards a{color:var(--green);text-decoration:none}

/* language selector - copied unchanged from klictechnologies.com */
/* language selector - copied from klicnsend.com's LanguageSelect.vue, in px:
   flag h-3 w-5 / xl h-4 w-6 / 2xl h-5 w-7 / res-2560 h-7 w-9 / 4K h-10 w-14;
   code text-sm / xl text-lg / res-2560 text-2xl / 4K text-4xl;
   white dropdown w-40 / res-2560 w-56 / 4K w-80 */
.lang{position:relative;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0;cursor:pointer;color:#fff;font:inherit;font-weight:600}
.lang-btn:hover,.lang-btn:focus-visible{background:none}
.lang-btn img{width:20px;height:12px;object-fit:contain;flex-shrink:0}
.lang-code{width:24px;flex-shrink:0;text-transform:uppercase;font-size:14px;text-align:left}
.lang-arrow{width:10px;height:10px;flex-shrink:0;color:#fff}
.lang-list{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin:8px 0 0;width:160px;
  background:#fff;color:#000;border-radius:6px;box-shadow:0 10px 15px -3px rgba(0,0,0,.25),0 4px 6px -4px rgba(0,0,0,.2);
  list-style:none;padding:8px 0;z-index:30;text-transform:uppercase;font-size:12px}
.lang-list li{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer}
.lang-list li+li{margin-top:4px}
.lang-list li:hover{background:#d1d5db}
.lang-list li img{width:24px;height:16px;object-fit:contain}
@media (min-width:1280px){
  .lang-btn img{width:24px;height:16px}
  .lang-code{font-size:18px}
  .lang-arrow{width:12px;height:12px}
  .lang-list{font-size:14px}
}
@media (min-width:1536px){
  .lang-btn img,.lang-list li img{width:28px;height:20px}
  .lang-arrow{width:14px;height:14px}
  .lang-list{font-size:16px}
}
@media (min-width:2560px){
  .lang-btn img,.lang-list li img{width:36px;height:28px}
  .lang-code{width:40px;font-size:24px}
  .lang-arrow{width:20px;height:20px}
  .lang-list{width:224px;font-size:20px}
  .lang-list li{padding:12px 24px}
}
@media (min-width:3840px){
  .lang-btn img,.lang-list li img{width:56px;height:40px}
  .lang-code{width:64px;font-size:36px}
  .lang-arrow{width:28px;height:28px}
  .lang-list{width:320px;font-size:30px}
  .lang-list li{padding:20px 32px}
}
/* small screens: open the list to the left so it never runs off the edge */
@media (max-width:899px){.lang-list{left:auto;right:0;transform:none}}
/* language selector from 768px up - copied unchanged from klictechnologies.com */
@media (min-width:768px){
  .lang-btn img{width:24px;height:16px}
  .lang-list li img{width:28px;height:20px}
  .lang-code{width:28px;font-size:16px}
  .lang-arrow{width:12px;height:12px}
}
@media (min-width:1280px){
  .lang-btn img{width:28px;height:20px}
  .lang-code{width:32px;font-size:20px}
  .lang-arrow{width:14px;height:14px}
  .lang-list{font-size:16px}
}
@media (min-width:1536px){
  .lang-btn img,.lang-list li img{width:32px;height:22px}
  .lang-code{width:34px;font-size:22px}
  .lang-arrow{width:16px;height:16px}
  .lang-list{font-size:18px}
}
@media (min-width:2560px){
  .lang-btn img,.lang-list li img{width:44px;height:32px}
  .lang-code{width:48px;font-size:28px}
  .lang-arrow{width:24px;height:24px}
  .lang-list{font-size:24px}
}
@media (min-width:3840px){
  .lang-btn img,.lang-list li img{width:64px;height:48px}
  .lang-code{width:72px;font-size:42px}
  .lang-arrow{width:32px;height:32px}
  .lang-list{font-size:36px}
}

/* home network diagram - "How it fits together" */
.net{margin-top:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1rem 1rem}
.net svg{display:block;width:100%;height:auto;max-width:52rem;margin:0 auto}
.net .net-v,.net .net-w{display:none}
@media (min-width:1100px){.net .net-h{display:none}.net .net-w{display:block;max-width:72rem}}
@media (max-width:760px){.net .net-h{display:none}.net .net-v{display:block;max-width:24rem;margin:0 auto}}
.net .ln{fill:none;stroke:#22394A;stroke-width:2}
.net .ln-d{stroke-dasharray:4 4}
.net .ln-t{fill:none;stroke:#2A4250;stroke-width:1}
.net .nd{fill:var(--ink);stroke:#2A4250;stroke-width:1}
.net .nd-g{fill:var(--ink);stroke:var(--green);stroke-width:1.5}
.net .nd-r{fill:var(--ink);stroke:#F87171;stroke-width:1.2}
.net .gr{fill:none;stroke:#2A4250;stroke-width:1.2}
.net .bars{fill:none;stroke:#2A4250;stroke-width:3}
.net .g{fill:var(--green)}
.net .gs{fill:none;stroke:var(--green);stroke-width:1.5}
.net .gs-t{stroke-width:1.1}
.net .pulse{stroke-dasharray:90;stroke-dashoffset:90}
.net .ms{fill:none;stroke:var(--muted);stroke-width:1.3}
.net .lock rect{fill:var(--ink);stroke:var(--green);stroke-width:1.2}
.net .lock path{fill:none;stroke:var(--green);stroke-width:1.2}
.net .cloud{fill:none;stroke:var(--green);stroke-width:1;stroke-dasharray:6 5;opacity:.7}
.net .lbl{fill:var(--text);font-size:12px}
.net .sub{fill:var(--muted);font-size:11px}
.net .cl{fill:var(--green);font-size:12px}
.net .bot{fill:#F87171;font-size:11px}
.net .bad{fill:#F87171}
.net .badx{fill:none;stroke:#F87171;stroke-width:2}
.net .badx-t{fill:none;stroke:#F87171;stroke-width:1.2}
.net-legend{display:flex;justify-content:center;gap:1.5rem;margin:.75rem 0 0;color:var(--muted);font-size:.85rem}
.net-legend span::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.45rem;vertical-align:middle;background:var(--green)}
.net-legend .no::before{background:#F87171}
.net-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.25rem}
.net-facts div{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem}
.net-facts h3{margin:0;font-size:1rem;color:var(--green)}
.net-facts p{margin:.2rem 0 0;font-size:.875rem;color:var(--muted)}
@media (max-width:560px){.net-facts{grid-template-columns:1fr}}

/* home hero: network cables photo (Unsplash, Scott Rodgerson) */
.hero{position:relative;overflow:hidden;background:var(--ink) url(/assets/ks-hero-1600.jpg) center 35%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,13,18,.94) 0%,rgba(7,13,18,.84) 38%,rgba(7,13,18,.5) 72%,rgba(7,13,18,.38) 100%),linear-gradient(180deg,rgba(7,13,18,0) 55%,var(--ink) 100%)}
.hero .wrap{position:relative;grid-template-columns:1fr}
.hero .wrap>div{max-width:44rem}
@media (min-width:901px){.hero{padding:7rem 0}}
@media (min-width:1600px){.hero{background-image:url(/assets/ks-hero-2560.jpg)}}
@media (max-width:760px){.hero{background-image:url(/assets/ks-hero-m.jpg);background-position:center top;padding:4rem 0 6rem}.hero::before{background:linear-gradient(180deg,rgba(7,13,18,.55) 0%,rgba(7,13,18,.8) 45%,var(--ink) 100%)}}
@media (min-width:761px) and (max-width:900px){.hero{padding:5rem 0}}

/* service page hero illustrations (cloud, hosting, security) */
.page-hero.art .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem}
.svc-art{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem}
.svc-art svg{display:block;width:100%;height:auto;max-width:28rem;margin:0 auto}
@media (max-width:900px){.page-hero.art .wrap{grid-template-columns:1fr;gap:2rem}.svc-art svg{max-width:22rem}}
.svc-art .ln{fill:none;stroke:#22394A;stroke-width:2}
.svc-art .ln-d{stroke-dasharray:4 4}
.svc-art .ln-t{fill:none;stroke:var(--line);stroke-width:1}
.svc-art .nd{fill:var(--ink);stroke:#2A4250;stroke-width:1}
.svc-art .nd-g{fill:var(--ink);stroke:var(--green);stroke-width:1.8}
.svc-art .nd-r{fill:var(--ink);stroke:#F87171;stroke-width:1.2}
.svc-art .bars{fill:none;stroke:#2A4250;stroke-width:3}
.svc-art .g{fill:var(--green)}
.svc-art .gs{fill:none;stroke:var(--green);stroke-width:1.5}
.svc-art .ms{fill:none;stroke:var(--muted);stroke-width:1.2}
.svc-art .beat{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:190;stroke-dashoffset:190}
.svc-art .scan{fill:var(--green);opacity:.55}
.svc-art .tick{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.svc-art .bad{fill:#F87171}
.svc-art .badx{fill:none;stroke:#F87171;stroke-width:2}
.svc-art .lbl{fill:var(--text);font-size:11px}
.svc-art .sub{fill:var(--muted);font-size:11px}
.svc-art .cl{fill:var(--green);font-size:12px}

/* service page photo bands (between "What's included" and "How we work") */
.photo-band{position:relative;height:clamp(11rem,24vw,22rem);background:var(--ink) center/cover no-repeat;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.photo-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,13,18,.45) 0%,rgba(7,13,18,.1) 50%,rgba(7,13,18,.45) 100%)}
.band-cloud{background-image:url(/assets/ks-band-cloud-1200.jpg)}
.band-hosting{background-image:url(/assets/ks-band-hosting-1200.jpg)}
.band-security{background-image:url(/assets/ks-band-security-1200.jpg)}
@media (min-width:1200px){
  .band-cloud{background-image:url(/assets/ks-band-cloud-2400.jpg)}
  .band-hosting{background-image:url(/assets/ks-band-hosting-2400.jpg)}
  .band-security{background-image:url(/assets/ks-band-security-2400.jpg)}
}

/* software page hero illustration */
.svc-art .code{fill:none;stroke-width:4;stroke-linecap:round}
.svc-art .cl1{stroke:#2A4250}
.svc-art .cl2{stroke:var(--green);opacity:.7}
.svc-art .cl3{stroke:var(--muted);opacity:.6}
.svc-art .dot-r{fill:#F87171}
.svc-art .dot-y{fill:#E3B341}
.svc-art .mono{fill:var(--green);font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* software page photo band */
.band-software{background-image:url(/assets/ks-band-software-1200.jpg)}
@media (min-width:1200px){.band-software{background-image:url(/assets/ks-band-software-2400.jpg)}}