/* ── the group typeface ───────────────────────────────────────────────
   23 August: Archivo and Manrope, adopted from multicomkasa.com so the three
   sites read as one company's work. Two variable files replace nine static
   ones — Archivo carries width as well as weight, which is what lets a
   display line be tightened without a second cut, and Manrope covers 200–800
   for everything that is read rather than scanned.

   Self-hosted, like everything else here: this site makes no external
   request, and a font from a CDN would be the first one. Both files are the
   latin subset from @fontsource-variable, the same source the MulticomIoT
   site's faces come from.

   'JetBrains Mono' is gone. Its job — the small, wide-tracked uppercase
   label — is now done by Archivo at 700 with the tracking already set on
   each rule, which is exactly how the MulticomKasa page does it. The alias
   below keeps the old name resolving to Archivo so a rule written before
   today does not silently fall back to a system monospace. */
@font-face{font-family:'Archivo Variable';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('/assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');}
@font-face{font-family:'Manrope Variable';font-style:normal;font-display:swap;
  font-weight:200 800;
  src:url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2');}


/* ==========================================================
   MULTICOM — sleek light system
   Gloss comes from layered elevation, gradient surfaces and
   specular highlights. Motion is interaction-triggered only:
   no idle loops, no ambient animation.
   ========================================================== */
:root{
  /* brand */
  --b-25:#FFF9F5; --b-50:#FFF4ED; --b-100:#FFE4D3; --b-200:#FECDAA;
  --b-300:#FDBA74; --b-500:#F97316; --b-600:#EA580C; --b-700:#C2410C;
  --b-750:#B03D0A; --b-800:#A33707; --b-900:#7C2A05;
  /* neutrals */
  --n-0:#FFFFFF; --n-25:#FCFCFD; --n-50:#F7F9FB; --n-100:#EFF2F6;
  --n-150:#E8ECF2; --n-200:#E2E7EE; --n-300:#CBD3DD; --n-400:#9AA5B4;
  --n-500:#6B7787; --n-550:#5A6675; --n-600:#4B5665; --n-700:#343E4C;
  --n-800:#1F2733; --n-900:#0E141C; --n-950:#12181F;
  /* type scale, measured live on multicomkasa.com and rounded to the rem
     steps it actually uses: .68 .8 1.0625 1.18 1.4 1.85 2.4 2.8 3.4 3.9rem.
     The same scale now runs on multicomiot.com, which is the point — three
     sites, one typographic voice, set in Archivo and Manrope. */
  --t-xs:10.9px; --t-sm:12.8px; --t-b:17px;  --t-md:18.9px;
  --t-1:22.4px;  --t-2:29.6px;  --t-3:38.4px; --t-4:44.8px;
  --t-5:54.4px;  --t-6:62.4px;
  /* semantic */
  --ok:#0F7A4A; --ok-bg:#E9F6EF; --ok-br:#BCE3CE;
  --wa:#8A5104; --wa-bg:#FDF4E3; --wa-br:#EBD5A8;
  --in:#0E6E85; --in-bg:#E6F3F7; --in-br:#BCDDE6;
  /* gloss */
  --grad-brand:linear-gradient(180deg,#C9460A 0%,#A33707 100%);
  --grad-brand-hi:linear-gradient(180deg,#D14C0D 0%,#963105 100%);
  --grad-surface:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%);
  --grad-tint:linear-gradient(180deg,#FBFCFE 0%,#F4F7FA 100%);
  --grad-ink:linear-gradient(150deg,#1B2430 0%,#0C1118 60%,#12181F 100%);
  --hair:linear-gradient(90deg,transparent,var(--n-200) 12%,var(--n-200) 88%,transparent);
  --sheen:inset 0 1px 0 rgba(255,255,255,.9);
  --sheen-d:inset 0 1px 0 rgba(255,255,255,.18);
  /* elevation */
  --e1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --e2:0 2px 4px -1px rgba(16,24,40,.05), 0 10px 22px -8px rgba(16,24,40,.12);
  --e3:0 4px 8px -2px rgba(16,24,40,.06), 0 22px 46px -14px rgba(16,24,40,.18);
  --e4:0 8px 18px -4px rgba(16,24,40,.09), 0 36px 76px -22px rgba(16,24,40,.28);
  --e-brand:0 1px 2px rgba(124,42,5,.30), 0 10px 24px -10px rgba(194,65,12,.50);
  --e-brand-hi:0 1px 2px rgba(124,42,5,.34), 0 16px 34px -12px rgba(194,65,12,.62);
  /* system */
  --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px;
  --maxw:1200px; --gut:24px; --header-h:92px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--n-25);color:var(--n-600);
  font-family:'Manrope Variable','Manrope',sans-serif;
  font-size:var(--t-b);line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";overflow-x:hidden;
}
body.locked{overflow:hidden}
h1,h2,h4,.dsp{font-family:'Archivo Variable','Archivo',sans-serif;color:var(--n-900);
  font-weight:700;line-height:1.02;letter-spacing:-.035em;font-stretch:112%}
h1{font-size:clamp(35px,4.4vw,var(--t-6));line-height:.99;letter-spacing:-.045em;
  font-stretch:108%}
h2{font-size:clamp(26px,3.8vw,var(--t-5));letter-spacing:-.035em}
/* h3 is a text-weight heading on Kasa, not a display one: Manrope 700 */
h3{font-family:'Manrope Variable','Manrope',sans-serif;color:var(--n-900);
  font-weight:700;font-size:16.8px;line-height:1.6;letter-spacing:-.02em}
h4{font-size:15.2px;letter-spacing:-.02em;line-height:1.4;font-stretch:normal}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
svg{flex:0 0 auto}
::selection{background:var(--b-100);color:var(--n-900)}
:focus-visible{outline:2px solid var(--b-700);outline-offset:2px;border-radius:5px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:400;background:var(--n-900);color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:var(--e3)}
.skip:focus{left:16px}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(70px,7vw,108px) 0;position:relative}
.sec-sm{padding:clamp(52px,5vw,78px) 0;position:relative}
.tint{background:var(--grad-tint);border-top:1px solid var(--n-150);border-bottom:1px solid var(--n-150)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;flex-wrap:wrap;gap:12px}
.center{text-align:center}
@media(max-width:1000px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.sec{padding:60px 0}.sec-sm{padding:46px 0}.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:'Archivo Variable','Archivo',sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--b-700)}
.eyebrow::before{content:'';width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--b-500),var(--b-700))}
.eyebrow.plain::before{display:none}
.lead{font-size:clamp(16px,1.4vw,var(--t-md));color:var(--n-550);line-height:1.6;
  letter-spacing:-.005em;max-width:62ch}
.sub{color:var(--n-550);font-size:15.2px;line-height:1.6}
.small{font-size:14.4px;color:var(--n-500);line-height:1.6}
.mono{font-family:'Archivo Variable','Archivo',sans-serif;font-size:var(--t-sm);
  font-weight:600;letter-spacing:.02em}
/* A heading inside a grid column is a sub-heading, not a page heading. At
   the full h2 size it filled its column with three short lines and left the
   other half of the row empty — the commonest way a big type scale goes
   wrong on a two-column section. */
.grid h2,.grid .ch2{font-size:clamp(24px,2.7vw,var(--t-3));line-height:1.05}
.head{max-width:58ch}
.head .eyebrow+h2{margin-top:15px}
.head h2+.lead{margin-top:16px}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}
.head.mid .eyebrow{justify-content:center}
.head.mid .lead{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14.7px;font-weight:700;line-height:1;padding:12px 18px;border-radius:11px;
  border:1px solid transparent;white-space:nowrap;isolation:isolate;
  transition:transform .18s var(--ease),box-shadow .2s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn svg{width:16px;height:16px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--e-brand),var(--sheen-d)}
.btn-primary:hover{background:var(--grad-brand-hi);box-shadow:var(--e-brand-hi),var(--sheen-d);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);box-shadow:var(--e-brand)}
.btn-secondary{background:var(--grad-surface);color:var(--n-800);border-color:var(--n-300);box-shadow:var(--e1),var(--sheen)}
.btn-secondary:hover{border-color:var(--n-400);box-shadow:var(--e2),var(--sheen);transform:translateY(-1px)}
.btn-quiet{color:var(--n-600)}
.btn-quiet:hover{background:var(--n-100);color:var(--n-900)}
.btn-onDark{background:linear-gradient(180deg,#fff,#F2F5F8);color:var(--n-900);box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 26px -12px rgba(0,0,0,.6)}
.btn-onDark:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 34px -14px rgba(0,0,0,.7)}
.btn-onDarkGhost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.btn-onDarkGhost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
.btn-lg{padding:14px 22px;font-size:15.5px;border-radius:12px}
.btn-block{width:100%}
.link{color:var(--b-700);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:7px;
  border-radius:6px;transition:color .16s}
.link svg{width:15px;height:15px;transition:transform .22s var(--ease-out)}
.link:hover{color:var(--b-800)}
.link:hover svg{transform:translateX(3px)}
kbd{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;font-weight:600;color:var(--n-550);
  background:var(--n-0);border:1px solid var(--n-200);border-bottom-width:2px;border-radius:6px;padding:2px 6px;line-height:1.4;white-space:nowrap}

/* ---------- cards ---------- */
/* The card is the site's one repeated object — every page is built out of
   them — so it is worth getting exactly right: warm white on the bone
   ground, a hairline rather than a border, and a shadow with warmth in it
   rather than grey. The lift on hover is small on purpose; a card that
   jumps reads as a toy. */
.card{position:relative;background:var(--grad-surface);border:1px solid var(--n-200);
  border-radius:18px;box-shadow:0 1px 2px rgba(70,50,28,.05),0 10px 24px -18px rgba(70,50,28,.28),var(--sheen);
  transition:transform .26s var(--ease-out),box-shadow .26s var(--ease-out),border-color .2s var(--ease)}
.card-hover:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(70,50,28,.06),0 26px 44px -26px rgba(70,50,28,.42),var(--sheen);
  border-color:var(--n-300)}
.card-hover:active{transform:translateY(-1px)}
.pad{padding:26px}
.pad-lg{padding:clamp(26px,2.4vw,34px)}
.icon{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--b-50),var(--b-100));color:var(--b-700);
  border:1px solid var(--b-200);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(124,42,5,.08)}
.icon svg{width:20px;height:20px}
.icon-n{background:linear-gradient(180deg,var(--n-50),var(--n-100));border-color:var(--n-200);color:var(--n-700);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,24,40,.05)}
.icon-sm{width:34px;height:34px;border-radius:10px}
.icon-sm svg{width:17px;height:17px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 11px;border-radius:999px;border:1px solid var(--n-200);
  background:linear-gradient(180deg,#fff,var(--n-50));color:var(--n-550);box-shadow:var(--sheen)}
.badge-ok{background:linear-gradient(180deg,#F1FAF5,var(--ok-bg));border-color:var(--ok-br);color:var(--ok)}
.badge-wa{background:linear-gradient(180deg,#FEF9EE,var(--wa-bg));border-color:var(--wa-br);color:var(--wa)}
.badge-in{background:linear-gradient(180deg,#F0F8FB,var(--in-bg));border-color:var(--in-br);color:var(--in)}
.badge-br{background:linear-gradient(180deg,var(--b-25),var(--b-50));border-color:var(--b-200);color:var(--b-700)}
.mk{width:6px;height:6px;border-radius:999px;background:currentColor;flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}

/* ---------- lists ---------- */
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--n-550)}
/* the text half of a tick, so a link inside it stays part of the sentence
   rather than becoming a flex item of its own */
.ticks li>span{min-width:0}
.ticks svg{width:18px;height:18px;color:var(--ok);margin-top:2px}
.ticks.compact li{font-size:14px;gap:9px}
.ticks.compact svg{width:16px;height:16px;margin-top:3px}

/* ---------- utility bar ---------- */
.util{background:var(--n-50);border-bottom:1px solid var(--n-150);font-size:13px;color:var(--n-500)}
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px}
.util a{border-radius:6px;transition:color .16s}
.util a:hover{color:var(--b-700)}
.util .set{display:flex;align-items:center;gap:18px}
@media(max-width:900px){.util{display:none}}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.74);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
header.site::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);opacity:.9}
header.site.stuck{background:rgba(255,255,255,.9);box-shadow:0 10px 30px -22px rgba(16,24,40,.5)}
header.site .bar{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--header-h);display:flex;align-items:center;gap:18px}
/* The mark, redrawn as vector. The supplied file was a JPEG on a white
   plate; it was colour-separated into an orange layer and a teal layer and
   each traced to a path, so the artwork is now resolution-independent and
   the M's counter is genuinely transparent rather than white. That is why
   it sits directly on the ink footer with no plate behind it — there is no
   halo to hide. 108KB of path data, ~24KB over the wire. */
.brand{display:flex;align-items:center;gap:13px;margin-right:auto;border-radius:10px}
.brand-logo{height:72px;width:auto;display:block}
.brand-logo-ft{height:66px}
@media(max-width:1100px){.brand-logo{height:62px}}
@media(max-width:600px){.brand-logo{height:52px}}
.brand .mk-logo{width:36px;height:36px;border-radius:11px;color:#fff;display:grid;place-items:center;
  font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;
  background:var(--grad-brand);box-shadow:var(--e-brand),inset 0 1px 0 rgba(255,255,255,.28)}
.brand .nm{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;font-size:17.5px;color:var(--n-900);letter-spacing:-.024em;line-height:1.15;display:block;white-space:nowrap}
.brand .tl{font-size:11px;color:var(--n-500);display:block;white-space:nowrap;line-height:1.2}
nav.main{display:flex;align-items:center;gap:2px}
/* direct children only: the dropdown panel is full of <a>, and an
   unscoped `nav.main a` gave every panel item white-space:nowrap — which
   pushed the blurbs straight out through the side of the panel. */
nav.main>a{position:relative;padding:8px 12px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--n-550);
  white-space:nowrap;transition:color .16s var(--ease),background-color .16s var(--ease)}
nav.main>a:hover{color:var(--n-900);background:var(--n-100)}
nav.main>a[aria-current="page"]{color:var(--b-700);font-weight:600;
  background:linear-gradient(180deg,var(--b-25),var(--b-50));box-shadow:inset 0 0 0 1px var(--b-100)}
/* ---------- nav dropdowns ----------------------------------------
   <details name="nav"> rather than a scripted menu: the browser handles
   open/close, the keyboard contract and mutual exclusion, and the panel is
   real markup in the page whether or not any script runs. The JS adds only
   Escape and click-outside, which HTML has no answer for. */
.nd{position:relative}
.nd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;padding:8px 12px;border-radius:9px;font-size:14.5px;font-weight:500;
  color:var(--n-550);white-space:nowrap;
  transition:color .16s var(--ease),background-color .16s var(--ease)}
.nd>summary::-webkit-details-marker{display:none}
.nd>summary::after{content:'';width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);opacity:.5;transition:transform .2s var(--ease-out)}
.nd>summary:hover{color:var(--n-900);background:var(--n-100)}
.nd[open]>summary{color:var(--n-900);background:var(--n-100)}
.nd[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.nd>summary.here{color:var(--b-700);font-weight:600;
  background:linear-gradient(180deg,var(--b-25),var(--b-50));
  box-shadow:inset 0 0 0 1px var(--b-100)}
.nd>summary:focus-visible{outline:2px solid var(--b-700);outline-offset:2px}
.ndp{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  width:min(540px,calc(100vw - 32px));background:var(--n-0);
  border:1px solid var(--n-200);border-radius:18px;padding:14px;z-index:120;
  box-shadow:0 30px 60px -28px rgba(70,50,28,.5),0 2px 8px -3px rgba(70,50,28,.25);
  animation:ndIn .18s var(--ease-out) both}
@keyframes ndIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.ndp{animation:none}}
.ndh{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--n-400);margin:2px 4px 10px}
.ndg{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ndi{display:block;padding:11px 12px;border-radius:12px;
  transition:background-color .14s var(--ease)}
.ndi:hover,.ndi:focus-visible{background:var(--n-50)}
.ndi b{display:block;font-size:14.6px;font-weight:700;color:var(--n-900);
  letter-spacing:-.012em;line-height:1.3}
.ndi span{display:block;font-size:13px;line-height:1.45;color:var(--n-500);
  margin-top:3px}
.ndf{display:inline-flex;align-items:center;gap:7px;margin:10px 4px 2px;
  font-size:13.6px;font-weight:700;color:var(--b-700)}
.ndf svg{transition:transform .2s var(--ease-out)}
.ndf:hover svg{transform:translateX(3px)}

/* in the drawer the same markup is a plain accordion — no overlay, no arrow
   positioning, nothing to collide with the viewport edge */
.drawer .nd{border-bottom:1px solid var(--n-100)}
.drawer .nd>summary{display:flex;justify-content:space-between;width:100%;
  padding:13px 6px;font-size:16px;font-weight:600;color:var(--n-800);
  border-radius:8px}
.drawer .ndp{position:static;transform:none;width:auto;border:0;box-shadow:none;
  padding:0 0 10px;animation:none;background:none}
.drawer .ndg{grid-template-columns:1fr;gap:0}
.drawer .ndi{padding:10px 12px}
/* ---------- the services register (/services) ---------------------
   Five services, one hairline-separated row each: what it is on the left,
   what it includes on the right. It replaced five full-width cards, two of
   which had no photograph to carry — the same content in a third of the
   page. */
.svxlist{margin-top:6px;border-top:1px solid var(--n-200)}
.svx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);padding:clamp(26px,3.2vw,40px) 0;
  border-bottom:1px solid var(--n-200);align-items:start;
  transition:background-color .18s var(--ease)}
.svx:hover{background:linear-gradient(90deg,rgba(255,253,250,.9),transparent 72%)}
.svx-a{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px}
.svx-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--b-50),var(--b-100));
  border:1px solid var(--b-200);color:var(--b-700)}
.svx-i svg{width:19px;height:19px}
.svx-n{font-family:'Archivo Variable','Archivo',sans-serif;font-size:12.8px;
  font-weight:800;letter-spacing:.06em;color:var(--n-300);
  font-variant-numeric:tabular-nums;padding-top:4px}
.svx-tag{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--b-700);margin:0}
.svx-h{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;
  font-stretch:112%;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(22px,2.3vw,var(--t-2));color:var(--n-900);margin:9px 0 0}
.svx-p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--n-550);
  max-width:52ch}
.svx-for{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--n-500)}
.svx-for b{color:var(--n-700);font-weight:700}
.svx-lbl{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--n-400);margin:5px 0 14px}
.svx-inc{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin:0;padding:0}
.svx-inc li{position:relative;padding-left:22px;font-size:14.6px;line-height:1.5;
  color:var(--n-600)}
.svx-inc li::before{content:'';position:absolute;left:0;top:6px;width:11px;height:6px;
  border-left:1.9px solid var(--b-600);border-bottom:1.9px solid var(--b-600);
  transform:rotate(-45deg)}
.svx-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:14.6px;font-weight:700;color:var(--n-900);
  border-bottom:1.5px solid var(--n-300);padding-bottom:3px;
  transition:color .16s,border-color .16s}
.svx-go:hover{color:var(--b-700);border-color:var(--b-600)}
.svx-go svg{transition:transform .2s var(--ease-out)}
.svx-go:hover svg{transform:translateX(3px)}
@media(max-width:900px){
  .svx{grid-template-columns:1fr;gap:22px}
  .svx-inc{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svx-a{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .svx-n{display:none}
}
/* ---------- about: what the company actually is -------------------
   Was one narrow column of run-on prose with the entity structure buried in
   the third paragraph — the single thing a procurement reader is looking
   for on that page. Now the claim is on the left and the structure is a
   card on the right, where it can be read without being read through. */
.abt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,4.4vw,64px);align-items:start}
.abt-lead{font-size:var(--t-md);line-height:1.6;color:var(--n-600);margin-top:18px;
  max-width:44ch}
.abt-lead strong{color:var(--n-900);font-weight:700}
.abt-p{margin-top:16px;font-size:16.4px;line-height:1.65;color:var(--n-550);
  max-width:46ch}
.abt-p strong{color:var(--n-800);font-weight:700}
.abt-lbl{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--n-400);margin:0 0 4px}
.abt-dl{margin:0}
.abt-dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;
  padding:15px 0;border-bottom:1px solid var(--n-150)}
.abt-dl>div:last-of-type{border-bottom:0}
.abt-dl dt{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--b-700);
  padding-top:3px}
.abt-dl dd{margin:0;font-size:15px;line-height:1.55;color:var(--n-600)}
.abt-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--n-150);
  font-size:13.6px;line-height:1.6;color:var(--n-500)}
@media(max-width:900px){
  .abt{grid-template-columns:1fr}
  .abt-dl>div{grid-template-columns:1fr;gap:5px;padding:13px 0}
  .abt-dl dt{padding-top:0}
}
/* ---------- division pages (/datum, /kasa) --------------------------
   One template, two pages, set in the parent's type and palette. Datum's
   sand and clay and Kasa's own voice belong on their own domains; here the
   parent is speaking about a division it owns. */
.dvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dvc{position:relative;overflow:hidden;background:var(--n-0);
  border:1px solid var(--n-200);border-radius:18px;padding:30px 26px 26px;
  box-shadow:var(--e1);transition:transform .2s,box-shadow .2s}
.dvc:hover{transform:translateY(-3px);box-shadow:var(--e2)}
.dvc::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--b-500),var(--b-700))}
.dvc-n{display:block;font-family:'Archivo Variable','Archivo',sans-serif;
  font-size:12.8px;font-weight:800;letter-spacing:.08em;color:var(--n-300);
  font-variant-numeric:tabular-nums;margin-bottom:14px}
.dvc h3{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;
  font-stretch:108%;font-size:var(--t-1);line-height:1.15;letter-spacing:-.028em;
  color:var(--n-900);margin:0 0 11px}
.dvc p{margin:0;font-size:15.6px;line-height:1.62;color:var(--n-550)}
.dvs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.dvs-b p{font-size:16.4px;line-height:1.72;color:var(--n-600);margin:0 0 16px;
  max-width:62ch}
.dvs-b p:last-child{margin-bottom:0}
.dvs-b strong{color:var(--n-800);font-weight:700}
.dvs-note{border-left:2px solid var(--b-300);padding:2px 0 2px 16px;
  font-size:14.4px !important;color:var(--n-500) !important;margin-top:22px !important}
@media(max-width:1000px){.dvgrid{grid-template-columns:1fr}.dvs{grid-template-columns:1fr}}
/* ---------- solution pages -----------------------------------------
   Five pages that all opened on a heading, a sentence and a button, two of
   them with no photograph to follow. The hero now carries the facts a buyer
   checks first, the engagement list gets the width it needs, and the
   cross-links are cards that say what they are instead of five identical
   boxes. */
.solh-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.4vw,64px);align-items:start}
.solh-b{position:relative;background:var(--n-0)}
.solh-n{position:absolute;top:18px;right:22px;
  font-family:'Archivo Variable','Archivo',sans-serif;font-size:12.8px;
  font-weight:800;letter-spacing:.06em;color:var(--n-300);
  font-variant-numeric:tabular-nums}
.solh-lbl{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--n-400);margin:0 0 4px}
.solh-dl{margin:0}
.solh-dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--n-150)}
.solh-dl>div:last-child{border-bottom:0;padding-bottom:0}
.solh-dl dt{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--b-700);padding-top:2px}
.solh-dl dd{margin:0;font-size:14.6px;line-height:1.55;color:var(--n-600)}

.solb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.solb-ticks{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;
  gap:14px 26px}
.solb-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.6px;
  line-height:1.5;color:var(--n-600)}
.solb-ticks svg{color:var(--b-600);flex:0 0 auto;margin-top:2px}
.solb-b{align-self:start}

/* the cross-link card, shared by solutions and services */
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.xcard{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"i t" "i d" "i g";gap:2px 15px;padding:22px 24px;
  align-content:start}
.xcard-i{grid-area:i;width:42px;height:42px;border-radius:12px;display:grid;
  place-items:center;background:linear-gradient(180deg,var(--b-50),var(--b-100));
  border:1px solid var(--b-200);color:var(--b-700)}
.xcard-i svg{width:19px;height:19px}
.xcard b{grid-area:t;font-family:'Manrope Variable','Manrope',sans-serif;
  font-size:16.8px;font-weight:700;letter-spacing:-.02em;color:var(--n-900);
  line-height:1.35}
.xcard>span:not([class]){grid-area:d;font-size:14.4px;line-height:1.5;
  color:var(--n-500);margin-top:3px}
.xcard-go{grid-area:g;display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;font-size:13.4px;font-weight:700;color:var(--b-700)}
.xcard-go svg{transition:transform .2s var(--ease-out)}
.xcard:hover .xcard-go svg{transform:translateX(3px)}
@media(max-width:1000px){
  .solh-grid,.solb{grid-template-columns:1fr}
  .xgrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .solb-ticks{grid-template-columns:1fr}
  .solh-dl>div{grid-template-columns:1fr;gap:5px}
  .solh-dl dt{padding-top:0}
}
/* ---------- long-form document pages -------------------------------
   Privacy, and anything else that is one narrow column of headings and
   paragraphs. Two things were wrong: the h2 is the site's landing-page
   display size, so a legal notice was set in 54px type; and eight sections
   ran together with no way to reach the one you came for. */
.doc{padding-top:clamp(40px,4vw,62px)}
.doc-grid{display:grid;grid-template-columns:216px minmax(0,1fr);
  gap:clamp(30px,4.5vw,70px);align-items:start;max-width:1080px}
.doc-toc{position:sticky;top:calc(var(--header-h) + 22px)}
.doc-toc-h{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.9px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--n-400);margin:0 0 12px}
.doc-toc-l{list-style:none;margin:0;padding:0;counter-reset:doc;
  border-left:1px solid var(--n-200)}
.doc-toc-l li{counter-increment:doc}
.doc-toc-l a{display:block;padding:8px 0 8px 15px;margin-left:-1px;
  border-left:2px solid transparent;font-size:14px;line-height:1.4;
  color:var(--n-500);transition:color .15s,border-color .15s}
.doc-toc-l a:hover{color:var(--n-900);border-left-color:var(--b-500)}
.doc-body{max-width:68ch}
.doc-sec{padding:clamp(24px,2.6vw,34px) 0;border-top:1px solid var(--n-200);
  scroll-margin-top:calc(var(--header-h) + 26px)}
.doc-sec:first-child{border-top:0;padding-top:0}
.doc-sec h2{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;
  font-stretch:108%;font-size:24px;line-height:1.2;letter-spacing:-.028em;
  color:var(--n-900);margin:0 0 14px}
.doc-sec h3{font-size:16.8px;margin:22px 0 8px}
.doc-sec p{font-size:16.4px;line-height:1.72;color:var(--n-600);margin:0 0 14px}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec strong,.doc-sec b{color:var(--n-800);font-weight:700}
.doc-sec a:not(.btn){color:var(--b-700);font-weight:600;
  border-bottom:1px solid var(--b-200);transition:border-color .15s}
.doc-sec a:not(.btn):hover{border-bottom-color:var(--b-600)}
.doc-sec ul,.doc-sec ol{margin:0 0 14px;padding-left:0;list-style:none}
.doc-sec ul>li{position:relative;padding-left:20px;font-size:16.4px;
  line-height:1.7;color:var(--n-600);margin-bottom:8px}
.doc-sec ul>li::before{content:'';position:absolute;left:2px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--b-300)}
@media(max-width:900px){
  .doc-grid{grid-template-columns:1fr;gap:26px}
  .doc-toc{position:static;border:1px solid var(--n-200);border-radius:14px;
    padding:18px 20px;background:var(--n-0)}
  .doc-toc-l{columns:2;column-gap:24px;border-left:0}
  .doc-toc-l a{padding:5px 0;border-left:0;margin-left:0}
}
@media(max-width:560px){.doc-toc-l{columns:1}}
.hactions{display:flex;align-items:center;gap:9px}
.iconbtn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--n-600);
  background:var(--grad-surface);border:1px solid var(--n-200);box-shadow:var(--e1),var(--sheen);
  transition:border-color .16s,color .16s,box-shadow .16s,transform .16s}
.iconbtn:hover{color:var(--n-900);border-color:var(--n-300);box-shadow:var(--e2),var(--sheen);transform:translateY(-1px)}
.searchbtn{display:flex;align-items:center;gap:9px;height:40px;padding:0 10px 0 12px;border-radius:10px;
  background:var(--grad-surface);border:1px solid var(--n-200);box-shadow:var(--e1),var(--sheen);
  color:var(--n-500);font-size:13.5px;transition:border-color .16s,box-shadow .16s,color .16s}
.searchbtn:hover{border-color:var(--n-300);color:var(--n-700);box-shadow:var(--e2),var(--sheen)}
.searchbtn svg{width:16px;height:16px}
@media(max-width:1180px){nav.main>a,.nd>summary{padding:8px 9px;font-size:14px}header.site .bar{gap:12px}.searchbtn .lbl{display:none}.searchbtn{padding:0 10px}}
@media(max-width:1200px){nav.main,.hide-md{display:none}}
@media(min-width:1201px){.menu-btn{display:none}}
@media(max-width:600px){.brand .tl{display:none}.brand .nm{font-size:18px}.hactions .btn{padding:11px 14px;font-size:14px}}

/* ---------- mobile drawer ---------- */
.drawer{position:sticky;top:var(--header-h);z-index:99;background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--n-200);box-shadow:var(--e3);
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
.drawer.open{grid-template-rows:1fr}
.drawer .inner{overflow:hidden}
.drawer .wrap{padding-top:10px;padding-bottom:18px}
.drawer a.dl{display:flex;align-items:center;justify-content:space-between;padding:13px 6px;font-size:16px;font-weight:600;
  color:var(--n-800);border-bottom:1px solid var(--n-100);border-radius:8px}
.drawer a.dl[aria-current="page"]{color:var(--b-700)}
.drawer a.dl svg{color:var(--n-400)}
.drawer .dcta{display:grid;gap:10px;margin-top:16px}

/* ---------- hero ---------- */
.hero{position:relative;padding:78px 0 68px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(62% 58% at 84% 4%,rgba(249,115,22,.14),transparent 62%),
    radial-gradient(48% 52% at 2% 92%,rgba(14,110,133,.10),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.6),transparent 40%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--n-150) 1px,transparent 1px),linear-gradient(90deg,var(--n-150) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
@media(max-width:980px){.hero{padding:50px 0 46px}.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{margin-top:18px}
.hero .lead{margin-top:20px}
.hero .row{margin-top:30px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding-top:22px;position:relative}
.hero-proof::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair)}
.hero-proof span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--n-550)}
.hero-proof svg{width:16px;height:16px;color:var(--ok)}
.hero-media{position:relative;border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--n-200);
  box-shadow:var(--e4),var(--sheen);background:var(--n-100)}
.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-media::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -60px 80px -60px rgba(12,17,24,.5)}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.stat{padding:28px 24px;position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--n-200)}
.stat .v{font-family:'Archivo Variable','Archivo',sans-serif;font-size:var(--t-2);
  font-weight:800;font-stretch:112%;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(160deg,var(--n-900),var(--n-700));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .k{font-size:13.5px;color:var(--n-500);margin-top:8px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd)::before{display:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--n-200)}}

/* ---------- platform chips ---------- */
.plat{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.plat .p{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--n-200);
  background:var(--grad-surface);border-radius:999px;font-size:13.5px;color:var(--n-550);box-shadow:var(--e1),var(--sheen)}
.plat .p b{color:var(--n-800);font-weight:600}

/* ---------- photos ---------- */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--n-100),var(--n-150));display:block}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.r16{aspect-ratio:16/10}.ph.r32{aspect-ratio:3/2}.ph.r43{aspect-ratio:4/3}
.ph .cap{position:absolute;left:13px;bottom:13px;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);font-size:12.5px;font-weight:600;color:var(--n-800);
  box-shadow:0 2px 8px rgba(16,24,40,.16)}
.ph .cap svg{width:14px;height:14px;color:var(--b-700)}
.ph.failed{display:none}
.imgcard{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--n-200);box-shadow:var(--e2),var(--sheen)}

/* ---------- service card ---------- */
.svc{display:flex;flex-direction:column;height:100%;overflow:hidden}
.svc .ph{border-bottom:1px solid var(--n-200)}
.svc .ph img{transition:transform .5s var(--ease-out)}
.svc:hover .ph img{transform:scale(1.035)}
.svc .body{padding:22px;display:flex;flex-direction:column;gap:11px;flex:1}
.svc h3{font-size:18.5px}
.svc p{font-size:14.5px;color:var(--n-550)}
.svc .fit{margin-top:auto;padding-top:14px;border-top:1px solid var(--n-100);font-size:13px;color:var(--n-500);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc .fit b{color:var(--n-700);font-weight:600}
.svc .fit .go{color:var(--b-700);display:inline-flex;transition:transform .22s var(--ease-out)}
.svc:hover .fit .go{transform:translateX(3px)}

/* ---------- service detail row ---------- */
.srow{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:28px;align-items:stretch;
  scroll-margin-top:calc(var(--header-h) + 78px)}
.srow>*{align-self:start}
.srow .ph{border-radius:var(--r);border:1px solid var(--n-200);align-self:stretch;aspect-ratio:auto;min-height:250px}
.srow .inc{background:var(--grad-tint);border:1px solid var(--n-200);border-radius:var(--r);padding:20px;box-shadow:var(--sheen)}
.srow .inc h4{margin-bottom:12px;color:var(--n-800)}
@media(max-width:1100px){.srow{grid-template-columns:minmax(0,240px) minmax(0,1fr)}.srow .ph{grid-row:span 2}}
@media(max-width:860px){.srow{grid-template-columns:1fr;gap:20px;padding:22px}
  .srow .ph{grid-row:auto;aspect-ratio:16/9;min-height:0}}

/* ---------- sticky sub nav ---------- */
.subnav{position:sticky;top:var(--header-h);z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--n-150)}
.subnav .wrap{display:flex;align-items:center;gap:8px;height:56px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--n-550);
  border:1px solid transparent;transition:color .16s,background-color .16s,border-color .16s}
.subnav a:hover{color:var(--n-900);background:var(--n-100)}
.subnav a.on{color:var(--b-700);font-weight:600;background:linear-gradient(180deg,var(--b-25),var(--b-50));border-color:var(--b-200)}

/* ---------- steps ----------
   .steps and .step are ALSO defined further down, under "delivery steps",
   and that later pair wins. A note in this file used to call this block dead
   code. It was not, and acting on that would have broken a page:

     .steps grid rules        genuinely shadowed — removed
     .step h3 / .step p       genuinely shadowed — removed
     .step border/shadow/hover  WAS applying. It turned the later rule's
                              hairline strip into five separate bordered
                              cards, which is not what that rule draws.
                              Removed, so the strip looks like a strip.
     .step .n                 LIVE, and the reason this block survives at
                              all. /iot/metering writes <span class="n">;
                              the homepage writes <span class="step-n">.
                              Two number treatments, two class names, both
                              real. Delete this and the metering page's
                              badges silently become grey text.

   Checked by rendering both pages before and after, not by reading. */
.step .n{width:30px;height:30px;border-radius:9px;color:#fff;display:grid;place-items:center;
  font-family:'Archivo Variable','Archivo',sans-serif;font-size:12.5px;font-weight:600;
  background:linear-gradient(180deg,#2C3846,#161D27);box-shadow:0 1px 2px rgba(16,24,40,.3),inset 0 1px 0 rgba(255,255,255,.16)}

/* ---------- table ---------- */
.tblwrap{border:1px solid var(--n-200);border-radius:var(--r-lg);overflow:hidden;background:var(--n-0);box-shadow:var(--e1),var(--sheen)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--n-150);vertical-align:top}
.tbl thead th{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.9px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--n-500);font-weight:700;
  background:var(--grad-tint)}
.tbl tbody tr{transition:background-color .14s}
.tbl tbody tr:hover{background:var(--n-25)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;color:var(--n-800);white-space:nowrap}
.tbl td.val{color:var(--n-550)}

/* ── wide tables on a phone ──────────────────────────────────────────
   A table of SHORT values survives being narrow: four columns of "U",
   "V", "1 min" read perfectly at 390px, and MulticomIoT's parameter
   tables were checked and left alone for exactly that reason.

   A table whose cells carry SENTENCES does not. /support's three columns
   put "99.95% on contracted managed services" into a 111px column, four
   words tall, with the third column pushed into a horizontal scroll — on
   the page where a procurement officer checks your SLA from a phone.

   So: only tables the build marks as .tbl--stack collapse, and the build
   only marks the ones with three or more columns. Below 720px each row
   becomes a block, the first cell is its heading, and every other cell
   carries its column name from data-label — which the build copies off
   the <th>, so a header change can never leave a stale label behind.

   thead is removed from the flow rather than display:none'd, so screen
   readers still announce the columns.                                */
@media(max-width:720px){
  /* .tbl.tbl--stack, not .tbl--stack. A later @media(max-width:640px) block
     sets `.tbl th,.tbl td{padding:12px 14px}` at the same specificity, and it
     won on source order — every stacked cell kept its table padding and each
     row grew to fill a phone screen. The extra class makes this immune to
     where in the file it sits. */
  .tbl.tbl--stack,.tbl.tbl--stack tbody,
  .tbl.tbl--stack tr,.tbl.tbl--stack td{display:block;width:auto}
  .tbl.tbl--stack thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .tbl.tbl--stack tr{padding:16px 18px;border-bottom:1px solid var(--n-150)}
  .tbl.tbl--stack tbody tr:last-child{border-bottom:0}
  .tbl.tbl--stack td{padding:0;border-bottom:0;white-space:normal}
  .tbl.tbl--stack td:first-child{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;
    font-size:16.5px;line-height:1.3;letter-spacing:-.015em;color:var(--n-900)}
  .tbl.tbl--stack td+td{margin-top:11px}
  .tbl.tbl--stack td[data-label]::before{content:attr(data-label);display:block;
    font-family:'Archivo Variable','Archivo',sans-serif;font-size:10px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--n-400);margin-bottom:3px}
}
@media(max-width:640px){.tbl th,.tbl td{padding:12px 14px;font-size:14px}.tbl td:first-child{white-space:normal}}

/* ---------- industry tile ---------- */
.ind{padding:24px 24px 22px;display:flex;flex-direction:column;gap:12px;height:100%}
.ind .hd{display:flex;align-items:center;gap:13px}
.ind h3{font-family:'Manrope Variable','Manrope',sans-serif;font-size:16.8px;
  font-weight:700;letter-spacing:-.02em;line-height:1.35}
.ind .need{font-size:14.6px;line-height:1.55;color:var(--n-550)}
.ind .rec{margin-top:auto;padding-top:14px;border-top:1px solid var(--n-150);
  font-size:13.4px;color:var(--b-700);font-weight:700;letter-spacing:-.005em}

/* ---------- coverage ---------- */
.cov{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--n-200);border-radius:var(--r-lg);
  overflow:hidden;background:var(--n-0);box-shadow:var(--e1),var(--sheen)}
@media(max-width:760px){.cov{grid-template-columns:1fr}}
.cov .c{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;
  border-bottom:1px solid var(--n-150);transition:background-color .14s}
.cov .c:hover{background:var(--n-25)}
.cov .c:nth-child(odd){border-right:1px solid var(--n-150)}
@media(max-width:760px){.cov .c:nth-child(odd){border-right:0}}
.cov .c b{display:block;font-family:'Archivo Variable','Archivo',sans-serif;font-size:15px;color:var(--n-900);font-weight:600}
.cov .c small{font-size:12.5px;color:var(--n-500)}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--n-200);border-radius:var(--r-lg);overflow:hidden;background:var(--n-0);box-shadow:var(--e1),var(--sheen)}
.faq details{border-bottom:1px solid var(--n-150)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;padding:18px 22px;font-weight:600;font-size:15.5px;color:var(--n-900);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Archivo Variable','Archivo',sans-serif;transition:background-color .14s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--n-25)}
.faq summary .pm{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--n-500);
  background:var(--n-50);border:1px solid var(--n-200);transition:transform .25s var(--ease-out),color .18s,background-color .18s}
.faq summary .pm svg{width:14px;height:14px}
.faq details[open] summary .pm{transform:rotate(45deg);color:var(--b-700);background:var(--b-50);border-color:var(--b-200)}
.faq .ans{padding:0 22px 20px;font-size:14.8px;color:var(--n-550);max-width:78ch}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--grad-ink);border-radius:var(--r-2xl);padding:52px;
  display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center;overflow:hidden;
  box-shadow:var(--e4),inset 0 1px 0 rgba(255,255,255,.1)}
.cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 88% 8%,rgba(249,115,22,.26),transparent 60%),
             radial-gradient(50% 80% at 2% 100%,rgba(14,110,133,.20),transparent 60%)}
.cta>*{position:relative}
.cta h2{color:#fff}
.cta p{color:#B9C2CE;margin-top:12px;font-size:16px;max-width:56ch}
@media(max-width:880px){.cta{grid-template-columns:1fr;padding:34px}}

/* ---------- page hero ---------- */
.phero{position:relative;background:var(--grad-tint);border-bottom:1px solid var(--n-150);
  padding:clamp(62px,6.4vw,96px) 0 clamp(56px,5.6vw,82px);overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 70% at 92% 0%,rgba(249,115,22,.10),transparent 60%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(30px,4.1vw,var(--t-5));margin-top:14px}
.phero .lead{margin-top:18px;max-width:58ch;font-size:clamp(16.5px,1.5vw,var(--t-md))}
.crumb{font-size:13px;color:var(--n-500);display:flex;align-items:center;gap:8px;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--n-200);
  max-width:max-content}
.crumb a{border-radius:5px}
.crumb a:hover{color:var(--b-700)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;font-weight:600;color:var(--n-700)}
.field .hint{font-size:12.5px;color:var(--n-500);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;padding:11px 13px;border:1px solid var(--n-300);border-radius:10px;
  background:var(--n-0);font-size:15px;color:var(--n-900);box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
  transition:border-color .16s,box-shadow .16s}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7787' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.field input::placeholder,.field textarea::placeholder{color:var(--n-400)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--n-400)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--b-700);
  box-shadow:0 0 0 4px rgba(194,65,12,.12),inset 0 1px 2px rgba(16,24,40,.04)}
.field [aria-invalid="true"]{border-color:#C2410C;background:#FFFCFA}
.field .err{font-size:12.5px;color:var(--b-800);font-weight:500;display:none}
.field.bad .err{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.note{padding:14px 16px;border-radius:11px;background:linear-gradient(180deg,#F0F8FB,var(--in-bg));
  border:1px solid var(--in-br);color:var(--in);font-size:13.8px;box-shadow:var(--sheen)}
.quiet-box h3{font-size:16px;font-weight:600;letter-spacing:-.012em}
.quiet-box{background:var(--grad-tint);border:1px solid var(--n-200);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sheen)}

/* ---------- contact rows ---------- */
.crow{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--n-200);border-radius:var(--r);
  background:var(--grad-surface);box-shadow:var(--e1),var(--sheen);transition:transform .2s var(--ease-out),box-shadow .2s,border-color .16s}
a.crow:hover,button.crow:hover{transform:translateY(-2px);box-shadow:var(--e2),var(--sheen);border-color:var(--n-300)}
.crow .k{font-size:12.5px;color:var(--n-500)}
.crow .v{font-size:15px;font-weight:600;color:var(--n-900)}
.crow .tail{margin-left:auto;font-size:12px;color:var(--n-400);display:inline-flex;align-items:center;gap:6px}
.crow .tail svg{width:15px;height:15px}
.crow.copied .tail{color:var(--ok);font-weight:600}

/* ================= PLANNER ================= */
.planner{position:relative;border:1px solid var(--n-200);border-radius:var(--r-2xl);overflow:hidden;
  background:var(--grad-surface);box-shadow:var(--e3),var(--sheen)}
.planner-hd{padding:24px 28px;border-bottom:1px solid var(--n-150);background:var(--grad-tint);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.planner-hd h2{font-size:20px;letter-spacing:-.02em}
.planner-hd p{font-size:14px;color:var(--n-550);margin-top:4px}
.psteps{display:flex;align-items:center;gap:8px}
.pstep{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--n-400)}
.pstep .dot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:11px;
  background:var(--n-100);color:var(--n-500);border:1px solid var(--n-200);font-family:'Archivo Variable','Archivo',sans-serif}
.pstep.on{color:var(--n-900)}
.pstep.on .dot{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--e-brand)}
.pstep.done .dot{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.pstep .bar{width:22px;height:2px;border-radius:2px;background:var(--n-200)}
@media(max-width:720px){.pstep .lbl{display:none}}
.planner-bd{padding:28px}
.pq{font-family:'Archivo Variable','Archivo',sans-serif;font-size:17px;font-weight:600;color:var(--n-900);margin-bottom:6px}
.pd{font-size:13.8px;color:var(--n-500);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:11px;font-size:14px;font-weight:500;
  color:var(--n-700);background:var(--grad-surface);border:1px solid var(--n-200);box-shadow:var(--e1),var(--sheen);
  transition:transform .18s var(--ease),border-color .16s,box-shadow .18s,color .16s,background-color .16s}
.chip svg{width:17px;height:17px;color:var(--n-500);transition:color .16s}
.chip:hover{transform:translateY(-1px);border-color:var(--n-400);box-shadow:var(--e2),var(--sheen)}
.chip[aria-pressed="true"],.chip.sel{color:var(--b-800);font-weight:600;border-color:var(--b-300);
  background:linear-gradient(180deg,var(--b-25),var(--b-50));box-shadow:0 0 0 3px rgba(194,65,12,.10),var(--e1)}
.chip[aria-pressed="true"] svg,.chip.sel svg{color:var(--b-700)}
.planner-ft{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 28px;
  border-top:1px solid var(--n-150);background:var(--grad-tint);flex-wrap:wrap}
.presult{padding:0}
.pres-top{padding:26px 28px;background:var(--grad-ink);color:#fff;position:relative;overflow:hidden}
.pres-top::before{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 100% at 92% 0%,rgba(249,115,22,.28),transparent 62%)}
.pres-top>*{position:relative}
.pres-top .lbl{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-300);font-weight:600}
.pres-top h4{color:#fff;font-size:23px;margin-top:8px;font-family:'Archivo Variable','Archivo',sans-serif;letter-spacing:-.025em}
.pres-top p{color:#B9C2CE;font-size:14.5px;margin-top:8px;max-width:60ch}
.pres-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.pres-badges .b{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12.5px;
  font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
.pres-body{padding:26px 28px}
.pres-list{display:grid;gap:12px;margin-top:14px}
.pres-item{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border:1px solid var(--n-200);
  border-radius:var(--r);background:var(--grad-surface);box-shadow:var(--e1),var(--sheen)}
.pres-item b{font-family:'Archivo Variable','Archivo',sans-serif;font-size:15px;color:var(--n-900);display:block}
.pres-item span{font-size:13.5px;color:var(--n-550)}
.pmini{display:flex;gap:10px}
.pmini input{flex:1;padding:12px 14px;border:1px solid var(--n-300);border-radius:11px;background:#fff;font-size:15px;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);transition:border-color .16s,box-shadow .16s}
.pmini input:focus{outline:none;border-color:var(--b-700);box-shadow:0 0 0 4px rgba(194,65,12,.12)}

/* ================= COMMAND PALETTE ================= */
.cmdk{position:fixed;inset:0;z-index:300;display:none;padding:12vh 20px 20px;justify-content:center;align-items:flex-start}
.cmdk.open{display:flex}
.cmdk-scrim{position:absolute;inset:0;background:rgba(14,20,28,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmdk-panel{position:relative;width:100%;max-width:620px;background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--n-200);border-radius:var(--r-xl);
  box-shadow:var(--e4),inset 0 1px 0 #fff;overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--n-150)}
.cmdk-in svg{width:19px;height:19px;color:var(--n-400)}
.cmdk-in input{flex:1;font-size:16.5px;color:var(--n-900);background:none;border:none;outline:none}
.cmdk-in input::placeholder{color:var(--n-400)}
.cmdk-list{overflow-y:auto;padding:8px;overscroll-behavior:contain}
.cmdk-group{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--n-400);
  padding:12px 12px 6px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;
  color:var(--n-700);transition:background-color .12s}
.cmdk-item .ci{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--n-100);color:var(--n-600);border:1px solid var(--n-200)}
.cmdk-item .ci svg{width:16px;height:16px}
.cmdk-item .tx{min-width:0;flex:1}
.cmdk-item .tx b{display:block;font-size:14.5px;font-weight:600;color:var(--n-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .tx small{display:block;font-size:12.5px;color:var(--n-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .go{color:var(--n-300);font-size:12px}
.cmdk-item[aria-selected="true"]{background:linear-gradient(180deg,var(--b-25),var(--b-50));box-shadow:inset 0 0 0 1px var(--b-100)}
.cmdk-item[aria-selected="true"] .ci{background:linear-gradient(180deg,var(--b-50),var(--b-100));color:var(--b-700);border-color:var(--b-200)}
.cmdk-item[aria-selected="true"] .go{color:var(--b-700)}
.cmdk-empty{padding:36px 20px;text-align:center;color:var(--n-500);font-size:14.5px}
.cmdk-ft{display:flex;align-items:center;gap:16px;padding:11px 18px;border-top:1px solid var(--n-150);
  background:var(--grad-tint);font-size:12px;color:var(--n-500)}
.cmdk-ft span{display:inline-flex;align-items:center;gap:6px}
@media(max-width:600px){.cmdk{padding:6vh 12px 12px}.cmdk-ft{display:none}}

/* ================= FLOATING ACTION BAR ================= */
.fab{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid var(--n-200);display:none;gap:10px;
  transform:translateY(110%);transition:transform .3s var(--ease-out)}
.fab.show{transform:none}
.fab .btn{flex:1}
@media(max-width:1080px){.fab{display:flex}body{padding-bottom:76px}}

/* back to top */
.totop{position:fixed;right:20px;bottom:20px;z-index:88;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--n-200);color:var(--n-700);
  box-shadow:var(--e3),var(--sheen);opacity:0;transform:translateY(12px) scale(.94);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease-out)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{color:var(--b-700);border-color:var(--b-200)}
@media(max-width:1080px){.totop{bottom:86px}}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:320;
  background:var(--grad-ink);color:#fff;font-size:14px;font-weight:500;padding:12px 20px;border-radius:999px;
  box-shadow:var(--e4),inset 0 1px 0 rgba(255,255,255,.14);opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .28s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1080px){.toast{bottom:96px}}

/* ---------- footer ---------- */
footer.site{background:var(--grad-tint);border-top:1px solid var(--n-150);position:relative}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding:58px 0 40px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h5{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--n-500);font-weight:600;margin-bottom:14px}
footer ul{display:flex;flex-direction:column;gap:9px}
footer li,footer a{font-size:14px;color:var(--n-550)}
footer a{border-radius:5px;transition:color .16s}
footer a:hover{color:var(--b-700)}
.fbot{border-top:1px solid var(--n-200);padding:18px 0;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;font-size:13px;color:var(--n-500)}

/* ---------- route transition (instant paint, then settle) ---------- */
main.page-in{animation:pagein .22s var(--ease-out)}
@keyframes pagein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .card-hover:hover,.step:hover,.btn:hover,.crow:hover{transform:none !important}
}

/* ── rebuild additions ──────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--b-600,#EA580C);
  color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--b-600,#EA580C);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(min-width:1201px){.drawer{display:none}}

/* ---------- service page link list ---------- */
.linklist{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.linklist a{display:block;padding:14px 16px;border:1px solid var(--n-200);border-radius:12px;
  background:var(--n-0);font-weight:600;font-size:15px;color:var(--n-800);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.linklist a:hover{border-color:var(--b-300);box-shadow:var(--e2);transform:translateY(-1px);
  color:var(--b-700)}

/* ---------- narrow reading column, left aligned to the grid ---------- */
.wrap.narrow > *{max-width:74ch}
.wrap.narrow > .linklist{max-width:none}

/* ══════════════════════════════════════════════════════════════
   v2 — cinematic surfaces
   Full-bleed photography with a scrim, oversized light type, and
   confident brand-colour blocks between the white sections.
   ══════════════════════════════════════════════════════════════ */

/* ── hero: full-bleed photograph ─────────────────────────────── */
.hero{background:#070a0e;padding:clamp(92px,13vw,178px) 0 clamp(68px,9vw,120px)}
.hero::before{
  background:url('/assets/img/hero-technician.jpg') center 42%/cover no-repeat!important;
  opacity:1;filter:saturate(.94) contrast(1.03)}
.hero::after{
  opacity:1;
  -webkit-mask-image:none;mask-image:none;
  background-size:auto;background-repeat:no-repeat;
  background:
    linear-gradient(95deg,rgba(4,6,9,.97) 0%,rgba(4,6,9,.94) 34%,
                    rgba(4,6,9,.80) 56%,rgba(4,6,9,.48) 78%,rgba(4,6,9,.30) 100%),
    linear-gradient(0deg,rgba(4,6,9,.90) 0%,rgba(4,6,9,.30) 38%,rgba(4,6,9,0) 62%),
    linear-gradient(180deg,rgba(4,6,9,.55) 0%,rgba(4,6,9,0) 30%)}
.hero .wrap{z-index:2}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
.hero-media{display:none!important}
.hero h1{color:#fff;font-size:clamp(36px,5.6vw,68px);line-height:1.04;
  letter-spacing:-.032em;max-width:16ch;text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.55)}
.hero .lead{color:rgba(255,255,255,.88);max-width:48ch;font-size:clamp(16.5px,1.7vw,19px);
  text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero .badge-br{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);
  color:#fff;backdrop-filter:blur(8px)}
.hero .badge-br svg{color:var(--b-300)}
.hero .btn-secondary{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.30);
  color:#fff;backdrop-filter:blur(8px)}
.hero .btn-secondary:hover{background:rgba(255,255,255,.15)}
.hero-proof::before{background:rgba(255,255,255,.18)}
.hero-proof span{color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero-proof svg{color:var(--b-300)}
@media(max-width:980px){
  .hero::after{background:
    linear-gradient(180deg,rgba(5,7,10,.90) 0%,rgba(5,7,10,.80) 45%,rgba(5,7,10,.94) 100%)}
  .hero h1{max-width:none}
}

/* ── stats band rides the dark, straight off the hero ────────── */
.hero + .tint{background:#0d1117;border-top:1px solid rgba(255,255,255,.07)}
.hero + .tint .stat .v{color:#fff}
.hero + .tint .stat .k{color:rgba(255,255,255,.62)}
.hero + .tint .stat + .stat{border-left-color:rgba(255,255,255,.10)}

/* ── full-width brand block ──────────────────────────────────── */
.band{background:linear-gradient(135deg,var(--b-700) 0%,var(--b-600) 46%,var(--b-500) 100%);
  color:#fff;padding:clamp(58px,7vw,92px) 0;position:relative;overflow:hidden}
.band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 88% -10%,rgba(255,255,255,.20),transparent 62%)}
.band .wrap{position:relative;z-index:1}
.band h2{color:#fff;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.025em;max-width:20ch}
.band p{color:rgba(255,255,255,.90);max-width:56ch;margin-top:14px;font-size:16.5px}
.band .bandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:38px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);border-radius:14px;
  overflow:hidden}
.band .bandgrid div{background:rgba(255,255,255,.06);padding:22px 20px;backdrop-filter:blur(2px)}
.band .bandgrid .v{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;font-size:clamp(21px,2.6vw,30px);
  line-height:1;margin-bottom:8px}
.band .bandgrid .k{font-size:13.5px;color:rgba(255,255,255,.86);line-height:1.45}
@media(max-width:820px){.band .bandgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.band .bandgrid{grid-template-columns:1fr}}
.band .btn-primary{background:#fff;color:var(--b-800);border-color:#fff;margin-top:30px}
.band .btn-primary:hover{background:rgba(255,255,255,.90)}

/* ── operations photo strip ──────────────────────────────────── */
.strip{padding:clamp(56px,7vw,92px) 0}
.stripgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:32px}
.shot{position:relative;border-radius:16px;overflow:hidden;background:var(--n-100);
  border:1px solid var(--n-200);min-height:210px}
.shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.035)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 13px;
  font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(0deg,rgba(6,8,11,.86),rgba(6,8,11,0))}
.shot.tall{grid-row:span 2}
.shot.tall img{aspect-ratio:auto;height:100%;min-height:434px}
@media(max-width:900px){
  .stripgrid{grid-template-columns:1fr 1fr}
  .shot.tall{grid-row:auto}
  .shot.tall img{min-height:0;aspect-ratio:4/3}
}
@media(max-width:560px){.stripgrid{grid-template-columns:1fr}}

/* ── scroll reveal ───────────────────────────────────────────── */
/* Visible by default. Two paths, in order of preference:
   1. rv-native — scroll-driven animation, runs on the compositor, no JS
   2. rv-on     — IntersectionObserver fallback, with a 2.5s safety net
   Neither is applied until the script confirms it can finish the job, so a
   failed script leaves every element visible rather than blank. */
.rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.rv-on .rv{opacity:0;transform:translateY(18px)}
html.rv-on .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    html.rv-native .rv{animation:rv-rise linear both;animation-timeline:view();
      animation-range:entry 5% entry 42%}
  }
}
@keyframes rv-rise{from{opacity:0;transform:translateY(18px)}}

@media(prefers-reduced-motion:reduce){
  html.rv-on .rv{opacity:1;transform:none;transition:none}
  html.rv-native .rv{animation:none}}

/* ── cross-document view transitions ─────────────────────────── */
/* A short cross-fade with a small lift between pages. Progressive
   enhancement: unsupported browsers navigate instantly, as before.
   Deliberately restrained — this site is read by procurement officers,
   and a sliding carousel of a page transition reads as a startup. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.24s cubic-bezier(.4,0,1,1) both vt-out}
  ::view-transition-new(root){animation:.30s cubic-bezier(0,0,.2,1) both vt-in}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(9px)}}

/* ---------- single wide photo band (portrait source, cropped) ---------- */
.stripgrid.one{grid-template-columns:1fr}
.stripgrid.two{grid-template-columns:1fr 1fr}
@media(max-width:700px){.stripgrid.two{grid-template-columns:1fr}}
.stripgrid.one .shot img{aspect-ratio:16/7;object-position:center 34%;min-height:0}
@media(max-width:720px){.stripgrid.one .shot img{aspect-ratio:4/3}}

/* ---------- service card photos: crop portraits to the card ratio ---------- */
.srow .ph{align-self:start}
.srow .ph img{aspect-ratio:4/3;object-fit:cover;object-position:center 38%;
  width:100%;height:auto;display:block}

/* ══════════════════════════════════════════════════════════════
   v3 — warm ground
   Same family as multicomdatum.com: a warm paper ground with ink
   sections and one warm accent. Differentiated from it by a paler,
   less yellow ground, a brighter accent, and Inter Tight rather
   than Poppins — sibling, not twin.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* warm the light end only — the dark end stays neutral, which is
     what stops a warm ground from reading as muddy */
  --n-0:#FFFDFA;  --n-25:#FBF7F1; --n-50:#F4EFE7; --n-100:#EDE6DB;
  --n-150:#E6DED1; --n-200:#DFD5C6; --n-300:#C6BCAB; --n-400:#9A9287;

  --grad-surface:linear-gradient(180deg,#FFFDFA 0%,#FCF8F2 100%);
  --grad-tint:linear-gradient(180deg,#F7F2EA 0%,#EFE8DD 100%);
  --grad-ink:linear-gradient(150deg,#1E2129 0%,#0F1216 60%,#14171C 100%);
  --hair:linear-gradient(90deg,transparent,var(--n-200) 12%,var(--n-200) 88%,transparent);

  /* shadows pick up the ground's warmth instead of going blue */
  --e1:0 1px 2px rgba(70,50,28,.05), 0 1px 3px rgba(70,50,28,.04);
  --e2:0 2px 4px -1px rgba(70,50,28,.05), 0 10px 22px -8px rgba(70,50,28,.13);
  --e3:0 4px 8px -2px rgba(70,50,28,.07), 0 22px 40px -12px rgba(70,50,28,.15);
}

body{background:var(--n-50)}
.sec,.sec-sm,.strip{background:transparent}
.tint,.sec.tint{background:var(--grad-tint)}
.card,.shot{background:var(--n-0)}
.inc{background:var(--n-25);border-color:var(--n-200)}
header.site{background:rgba(255,253,250,.86)}
.drawer{background:rgba(255,253,250,.97)}

/* stats band under the hero stays ink, matching Datum's dark bands */
.hero + .tint{background:var(--grad-ink)}

/* footer: ink, as on Datum */
footer.site{background:var(--grad-ink);border-top:none}
footer.site,footer.site p,footer.site .small{color:#9AA0A8}
footer.site h5{color:#7E8590}
footer.site a{color:#C9CDD3}
footer.site a:hover{color:#fff}
footer.site .nm{color:var(--n-25)}
footer.site .tl{color:#8A9099}
footer.site .fbot{border-top-color:rgba(255,255,255,.10)}

/* the phero (page headers) sits on the warm ground */
.phero{background:linear-gradient(180deg,#F7F2EA 0%,#F4EFE7 100%)}

/* ══════════════════════════════════════════════════════════════
   v4 — Daylight
   The theme chosen from the three directions. Keeps the warm
   ground of v3 but raises it: the home hero returns to daylight
   as a split layout with a real photograph, the type gets bigger
   and heavier, the accent becomes a single confident orange, and
   the mid-page orange slab gives way to ink so the page reads
   bone → ink → bone → ink rather than shouting twice.
   ══════════════════════════════════════════════════════════════ */

/* ── hero: back to daylight, split, photograph on the right ──── */
.hero{background:linear-gradient(180deg,#F7F2EA 0%,#F4EFE7 100%);
  padding:clamp(54px,7vw,88px) 0 clamp(50px,6.5vw,78px)}
.hero::before{background:none!important;background-image:none!important;opacity:0}
.hero::after{display:none}
.hero .wrap{z-index:1}
.hero-grid{grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.4vw,54px);align-items:center}
.hero-media{display:block!important;border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--n-200);background:var(--n-100);
  box-shadow:0 30px 60px -30px rgba(70,50,28,.45),var(--sheen)}
.hero-media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.hero-media::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.hero h1{color:var(--n-900);font-weight:700;font-stretch:108%;letter-spacing:-.045em;
  line-height:.99;font-size:clamp(34px,4.6vw,var(--t-6));max-width:16ch;text-shadow:none}
.hero .lead{color:var(--n-550);max-width:46ch;text-shadow:none;
  font-size:clamp(15.5px,1.6vw,var(--t-md))}
.hero .badge-br{background:var(--n-0);border-color:var(--n-200);color:var(--n-700);
  backdrop-filter:none}
.hero .badge-br svg{color:var(--b-600)}
.hero .btn-secondary{background:var(--n-0);border-color:var(--n-200);color:var(--n-800);
  backdrop-filter:none}
.hero .btn-secondary:hover{background:var(--n-0);border-color:var(--n-400)}
.hero-proof::before{background:var(--hair)}
.hero-proof span{color:var(--n-550);text-shadow:none}
.hero-proof svg{color:var(--ok)}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{max-width:none}
  .hero-media{aspect-ratio:16/10}
}

/* ── the eyebrow becomes a quiet mono label, not a coloured bar ─ */
.eyebrow{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.2em;color:#8A5104}
.eyebrow::before{display:none}

/* ── one confident orange, as a pill ──────────────────────────── */
.btn{border-radius:999px;padding:13px 22px}
.btn-lg{border-radius:999px;padding:14px 26px;font-size:15.5px;font-weight:700}
.btn-primary{background:var(--b-600);box-shadow:0 10px 24px -10px rgba(194,65,12,.55)}
.btn-primary:hover{background:var(--b-700);box-shadow:0 14px 30px -10px rgba(194,65,12,.62)}
.btn-primary:active{box-shadow:0 6px 16px -8px rgba(194,65,12,.5)}
.btn-secondary{border-radius:999px}

/* ── ink instead of a second orange slab ──────────────────────── */
.band{background:var(--grad-ink)}
.band::after{background:radial-gradient(70% 120% at 88% -10%,rgba(234,88,12,.20),transparent 62%)}
.band .bandgrid{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.13)}
.band .bandgrid div{background:rgba(255,255,255,.045)}

/* ── cards sit a little softer on the warm ground ─────────────── */
.card,.svc,.imgcard,.shot{border-radius:18px}

/* ── the centred statement: one line, room around it ──────────── */
.quote{padding:clamp(62px,7.5vw,96px) 0;text-align:center}
.quote .wrap{max-width:860px}
.quote h2{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;
  font-stretch:112%;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(24px,3.5vw,var(--t-3));margin:0;text-wrap:balance}
.quote p{color:var(--n-550);font-size:16px;line-height:1.68;margin:18px auto 0;max-width:56ch}

/* ══════════════════════════════════════════════════════════════
   v5 — Institutional
   The home page rebuilt for the reader who decides whether this
   company is a credible contracting party. Same Daylight palette;
   more air, fewer words, and the interactions carried by native
   HTML — radio inputs for the sector tabs, <details name> for the
   capability accordion — so nothing depends on JavaScript to be
   readable, findable in-page, or reachable by keyboard.
   ══════════════════════════════════════════════════════════════ */

.chero,.csec,.crail,.cclose,.srail{--pad:clamp(56px,7vw,104px)}

/* ── shared type ─────────────────────────────────────────────── */
.ceyebrow{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8A5104;margin:0}
.ceyebrow-d{color:#E9A06B}
.ch2{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;font-stretch:112%;
  letter-spacing:-.035em;line-height:1.02;font-size:clamp(27px,3.9vw,var(--t-5));
  color:var(--n-900);margin:12px 0 0;text-wrap:balance}
.ch2-d{color:#fff}
.clink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
  color:var(--b-700);text-decoration:none}
.clink svg{width:15px;height:15px;transition:transform .22s var(--ease-out)}
.clink:hover svg{transform:translateX(4px)}

.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;
  font-size:15px;line-height:1;padding:15px 26px;border-radius:999px;text-decoration:none;
  border:1px solid transparent;transition:background-color .18s,border-color .18s,transform .18s,box-shadow .2s}
.cbtn svg{width:17px;height:17px}
.cbtn-p{background:var(--b-600);color:#fff;box-shadow:0 10px 26px -10px rgba(194,65,12,.55)}
.cbtn-p:hover{background:var(--b-700);transform:translateY(-1px)}
.cbtn-s{background:var(--n-0);color:var(--n-800);border-color:var(--n-200)}
.cbtn-s:hover{border-color:var(--n-400)}
.cbtn-onink{background:#fff;color:#14171C}
.cbtn-onink:hover{transform:translateY(-1px)}
.cbtn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.cbtn-ghost:hover{background:rgba(255,255,255,.10)}
.cacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ── hero ────────────────────────────────────────────────────── */
.chero{background:linear-gradient(180deg,#F8F3EB 0%,#F4EFE7 100%);
  padding:clamp(52px,6.5vw,86px) 0 clamp(50px,6vw,80px)}
.chero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4.6vw,58px);
  align-items:center}
.chero h1{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;font-stretch:108%;
  letter-spacing:-.045em;line-height:.99;font-size:clamp(35px,5.4vw,var(--t-6));
  color:var(--n-900);margin:16px 0 0;
  max-width:15ch;text-wrap:balance}
.clead{color:var(--n-550);font-size:clamp(16px,1.6vw,var(--t-md));line-height:1.6;
  letter-spacing:-.005em;
  max-width:44ch;margin:20px 0 0}
.chero-media{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--n-200);background:var(--n-100);
  box-shadow:0 34px 66px -32px rgba(70,50,28,.48)}
.chero-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ── credential rail ─────────────────────────────────────────── */
.crail{background:#14171C;color:#fff;position:relative;overflow:hidden}
.crail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:rgba(255,255,255,.12);position:relative}
/* translucent, so the band's warm light reads THROUGH the cells. Opaque
   cells let it show only in the page margins, which lit the two gutters and
   left the middle flat — the opposite of the intended effect. */
.crail-grid>div{background:rgba(20,23,28,.82);padding:26px 20px}
.crail b{display:block;font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;
  font-stretch:112%;font-size:clamp(21px,2.7vw,var(--t-2));letter-spacing:-.035em;
  line-height:1}
.crail span{display:block;color:#A8B0BD;font-size:12.5px;margin-top:7px;line-height:1.4}

/* ── sticky section rail ─────────────────────────────────────── */
.srail{position:sticky;top:var(--header-h,68px);z-index:30;
  background:rgba(248,243,235,.9);backdrop-filter:blur(12px) saturate(150%);
  border-bottom:1px solid var(--n-200)}
.srail .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:9px;padding-bottom:9px}
.srail .wrap::-webkit-scrollbar{display:none}
.srail a{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--n-550);text-decoration:none;
  padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background-color .16s,color .16s}
.srail a:hover{background:var(--n-100);color:var(--n-900)}
:target{scroll-margin-top:calc(var(--header-h,68px) + 60px)}

/* ── generic section ─────────────────────────────────────────── */
.csec{padding:var(--pad) 0}
.csec.tinted{background:var(--grad-tint)}
.csec.ink{background:var(--grad-ink)}

/* ── sector selector: radios, no JS ──────────────────────────── */
.sectors{margin-top:34px}
.sec-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.sec-tabs::-webkit-scrollbar{display:none}
.sec-tab{flex:0 0 auto;cursor:pointer;font-size:14px;font-weight:600;color:var(--n-550);
  background:var(--n-0);border:1px solid var(--n-200);border-radius:999px;padding:11px 18px;
  white-space:nowrap;transition:background-color .18s,color .18s,border-color .18s}
.sec-tab:hover{border-color:var(--n-400);color:var(--n-800)}
.sec-panel{display:none;margin-top:26px}
#sec-gov:focus-visible  ~ .sec-tabs .sec-tab:nth-of-type(1),
#sec-util:focus-visible ~ .sec-tabs .sec-tab:nth-of-type(2),
#sec-est:focus-visible  ~ .sec-tabs .sec-tab:nth-of-type(3),
#sec-home:focus-visible ~ .sec-tabs .sec-tab:nth-of-type(4){
  outline:2px solid var(--b-600);outline-offset:2px}
/* each checked radio lights its own label and shows its own panel */
#sec-gov:checked  ~ .sec-tabs .sec-tab:nth-of-type(1),
#sec-util:checked ~ .sec-tabs .sec-tab:nth-of-type(2),
#sec-est:checked  ~ .sec-tabs .sec-tab:nth-of-type(3),
#sec-home:checked ~ .sec-tabs .sec-tab:nth-of-type(4){
  background:var(--n-900);border-color:var(--n-900);color:#fff}
#sec-gov:checked  ~ .sec-panels #secp-gov,
#sec-util:checked ~ .sec-panels #secp-util,
#sec-est:checked  ~ .sec-panels #secp-est,
#sec-home:checked ~ .sec-panels #secp-home{display:grid}
.sec-panel{grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px);align-items:center}
.sec-lead{font-size:17px;line-height:1.55;color:var(--n-800);margin:0;max-width:42ch}
.sec-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.sec-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--n-550);
  line-height:1.5}
.sec-list svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--ok)}
.sec-body .clink{margin-top:24px}
.sec-shot{margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--n-200);box-shadow:var(--e3)}
.sec-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sec-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 15px 12px;
  font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(6,9,13,.82))}

/* ── capability accordion: native <details name> ─────────────── */
.caps{margin-top:34px;border-top:1px solid var(--n-200)}
.cap{border-bottom:1px solid var(--n-200)}
.cap summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;
  padding:24px 4px;transition:color .16s}
.cap summary::-webkit-details-marker{display:none}
.cap summary:hover .cap-t{color:var(--b-700)}
.cap summary:focus-visible{outline:2px solid var(--b-600);outline-offset:-2px;border-radius:8px}
.cap-n{font-family:'Archivo Variable','Archivo',sans-serif;font-size:12px;color:var(--n-400);
  letter-spacing:.1em;flex:0 0 auto}
.cap-t{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;letter-spacing:-.028em;
  font-size:clamp(18px,2.3vw,25px);color:var(--n-900);flex:1;transition:color .16s}
.cap-i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--n-300);
  position:relative;transition:background-color .2s,border-color .2s,transform .25s var(--ease-out)}
.cap-i::before,.cap-i::after{content:'';position:absolute;inset:50% 7px auto;height:1.5px;
  background:var(--n-700);border-radius:2px;transform:translateY(-50%)}
.cap-i::after{transform:translateY(-50%) rotate(90deg);transition:transform .25s var(--ease-out)}
.cap[open] .cap-i{background:var(--b-600);border-color:var(--b-600);transform:rotate(180deg)}
.cap[open] .cap-i::before,.cap[open] .cap-i::after{background:#fff}
.cap[open] .cap-i::after{transform:translateY(-50%) rotate(0deg)}
.cap-body{padding:0 4px 30px 56px;max-width:78ch}
.cap-body>p{margin:0;font-size:16.5px;color:var(--n-800);line-height:1.55;max-width:52ch}
.cap-body .sec-list{grid-template-columns:1fr 1fr;gap:11px 26px}
.cap-body .clink{margin-top:22px}

/* ── delivery steps ──────────────────────────────────────────── */
.steps{list-style:none;margin:38px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:1px;background:var(--n-200);
  border:1px solid var(--n-200);border-radius:18px;overflow:hidden}
.step{background:var(--n-0);padding:26px 22px 30px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--n-900);color:#fff;font-family:'Archivo Variable','Archivo',sans-serif;
  font-weight:800;font-size:var(--t-sm)}
.step h3{font-family:'Manrope Variable','Manrope',sans-serif;font-weight:700;
  letter-spacing:-.02em;font-size:16.8px;line-height:1.5;margin:16px 0 8px;
  color:var(--n-900)}
.step p{margin:0;font-size:14px;line-height:1.55;color:var(--n-550)}

/* ── governance ──────────────────────────────────────────────── */
.govgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:38px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);
  border-radius:18px;overflow:hidden}
.govgrid>.gov{background:#14171C;padding:26px 24px 30px}
.gov h3{font-family:'Manrope Variable','Manrope',sans-serif;font-weight:700;
  letter-spacing:-.02em;font-size:16.8px;line-height:1.5;margin:0 0 9px;color:#fff}
.gov p{margin:0;font-size:14.5px;line-height:1.6;color:#A8B0BD}
.gov a{color:#F0A97B}
.gov b{color:#fff;font-weight:600}
.govnote{margin:22px 0 0;font-size:13.5px;color:#8A94A6;max-width:64ch}
.govgrid-light{background:var(--n-200);border-color:var(--n-200);margin-top:0;
  grid-template-columns:repeat(2,1fr)}
.govgrid-light>.gov{background:var(--n-0)}
.govgrid-light .gov h3{color:var(--n-900)}
.govgrid-light .gov p{color:var(--n-550)}
.govgrid-light .gov a{color:var(--b-700)}
.govgrid-light .gov b{color:var(--n-900)}

/* ── group structure ─────────────────────────────────────────── */
.grp{margin-top:34px;display:grid;gap:14px}
.grp-parent{background:var(--grad-ink);color:#fff;border-radius:18px;padding:30px 28px 34px}
.grp-parent h3{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;
  font-stretch:112%;letter-spacing:-.035em;font-size:clamp(21px,2.7vw,var(--t-2));
  margin:12px 0 8px;color:#fff}
.grp-parent p{margin:0;color:#A8B0BD;font-size:15px}
.grp-tag{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#E9A06B}
/* three since 23 August, when MulticomKasa joined Datum under the parent:
   two columns left the third card orphaned on its own row, which reads as a
   card that failed to load rather than as a third division */
.grp-kids{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grp-kid{display:block;text-decoration:none;background:var(--n-0);border:1px solid var(--n-200);
  border-radius:18px;padding:26px 24px 30px;box-shadow:var(--e1);
  transition:transform .2s var(--ease-out),box-shadow .2s,border-color .18s}
.grp-kid:hover{transform:translateY(-2px);box-shadow:var(--e3);border-color:var(--n-300)}
.grp-kid .grp-tag{color:#8A5104}
.grp-kid h3{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:700;
  font-stretch:112%;letter-spacing:-.03em;font-size:var(--t-1);margin:11px 0 7px;
  color:var(--n-900)}
.grp-kid p{margin:0;color:var(--n-550);font-size:14.5px;line-height:1.55}

/* ── close ───────────────────────────────────────────────────── */
.cclose{background:var(--grad-ink);color:#fff;padding:var(--pad) 0}
.cclose h2{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;letter-spacing:-.04em;
  line-height:1.04;font-size:clamp(26px,3.7vw,42px);margin:0;max-width:19ch;color:#fff;
  text-wrap:balance}
.cclose p{color:#A8B0BD;font-size:16px;line-height:1.6;max-width:52ch;margin:18px 0 0}

/* ── responsive ──────────────────────────────────────────────── */
@media(max-width:1080px){
  .crail-grid{grid-template-columns:repeat(3,1fr)}
  .crail-grid>div:nth-child(4){grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr)}
  .govgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){.govgrid-light{grid-template-columns:1fr}}
@media(max-width:900px){
  .chero-grid{grid-template-columns:1fr;gap:30px}
  .chero h1{max-width:none}
  .chero-media{aspect-ratio:16/10}
  .sec-panel{grid-template-columns:1fr}
  .cap-body{padding-left:4px}
  .cap-body .sec-list{grid-template-columns:1fr}
  .grp-kids{grid-template-columns:1fr}
}
@media(max-width:640px){
  .crail-grid{grid-template-columns:repeat(2,1fr)}
  .crail-grid>div:nth-child(4){grid-column:auto}
  .crail-grid>div:last-child{grid-column:span 2}
  .steps{grid-template-columns:1fr}
  .govgrid{grid-template-columns:1fr}
  .cacts .cbtn{width:100%}
}

/* ── motion: scroll-driven, and entirely optional ────────────── */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes c-rise{from{opacity:0;transform:translateY(22px)}}
    .csec>.wrap>*,.cclose>.wrap>*,.chero-copy,.chero-media{
      animation:c-rise .7s var(--ease-out) backwards;
      animation-timeline:view();
      animation-range:entry 0% entry 42%}
    .chero-copy,.chero-media{animation-timeline:auto;animation-range:normal}
  }
}

/* ── footer: five columns, so Company sits on the right of the top row
   rather than wrapping underneath the brand block ─────────────────── */
.fgrid{grid-template-columns:1.35fr 1fr 1.2fr 1fr 1fr;gap:30px}
@media(max-width:1080px){
  .fgrid{grid-template-columns:repeat(4,1fr);gap:28px}
  .fgrid>div:first-child{grid-column:1/-1}
}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   v6 — the profile booklet
   A page-turning company profile. The pages are ordinary sections
   stacked in the DOM; JavaScript adds `bk-on` and turns them into
   a 3D flip. Without JavaScript, without a 3D-capable browser, or
   with reduced motion requested, every page simply renders in
   order down the document — the profile is still readable, still
   printable, still indexable.
   ══════════════════════════════════════════════════════════════ */

.bk-hero{padding-bottom:clamp(26px,3vw,40px)}
.bk-wrap{padding:0 0 clamp(56px,7vw,96px);background:var(--grad-tint)}

/* ── no-JS / fallback: a readable stack ──────────────────────── */
.bk-book{display:grid;gap:22px}
.bk-page{background:var(--n-0);border:1px solid var(--n-200);border-radius:20px;
  overflow:hidden;box-shadow:var(--e2)}
.bk-inner{padding:clamp(26px,4vw,52px);position:relative;height:100%}
.bk-nav,.bk-bar,.bk-hint{display:none}

/* ── flip mode ───────────────────────────────────────────────── */
.bk-on .bk-stage{position:relative;perspective:2600px;margin-top:6px}
.bk-on .bk-book{display:block;position:relative;aspect-ratio:16/10.4;
  max-width:1020px;margin:0 auto;transform-style:preserve-3d}
.bk-on .bk-page{position:absolute;inset:0;margin:0;backface-visibility:hidden;
  transform-origin:left center;transition:transform .62s var(--ease-out),
  box-shadow .62s var(--ease-out);will-change:transform;
  box-shadow:0 24px 60px -30px rgba(70,50,28,.55),0 2px 6px rgba(70,50,28,.10)}
.bk-on .bk-inner{overflow:auto;overscroll-behavior:contain}
.bk-on .bk-page[data-state="turned"]{transform:rotateY(-176deg);pointer-events:none;
  box-shadow:none}
.bk-on .bk-page[data-state="under"]{transform:rotateY(0);pointer-events:none}
.bk-on .bk-page[data-state="current"]{transform:rotateY(0);pointer-events:auto}
/* the sheet catches a little light as it swings */
.bk-on .bk-page::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .62s var(--ease-out);
  background:linear-gradient(90deg,rgba(20,23,28,.22),transparent 42%)}
.bk-on .bk-page[data-state="turned"]::after{opacity:1}

.bk-nav{display:grid;place-items:center;position:absolute;top:50%;z-index:6;
  width:46px;height:46px;margin-top:-23px;border-radius:50%;cursor:pointer;
  background:var(--n-0);border:1px solid var(--n-200);color:var(--n-800);
  box-shadow:var(--e2);transition:transform .18s var(--ease-out),border-color .18s,opacity .18s}
.bk-nav svg{width:20px;height:20px}
.bk-nav:hover{transform:scale(1.07);border-color:var(--n-400)}
.bk-nav:disabled{opacity:.32;cursor:default;transform:none}
.bk-nav:focus-visible{outline:2px solid var(--b-600);outline-offset:3px}
.bk-prev{left:-6px}
.bk-next{right:-6px}
@media(min-width:1180px){.bk-prev{left:-26px}.bk-next{right:-26px}}

.bk-bar{display:flex;align-items:center;gap:18px;justify-content:center;
  margin-top:26px;flex-wrap:wrap}
.bk-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.bk-dot{width:22px;height:22px;display:grid;place-items:center;background:none;
  border:0;cursor:pointer;padding:0}
.bk-dot span{width:7px;height:7px;border-radius:50%;background:var(--n-300);
  transition:background-color .2s,transform .2s}
.bk-dot:hover span{background:var(--n-400)}
.bk-dot[aria-current="true"] span{background:var(--b-600);transform:scale(1.5)}
.bk-dot:focus-visible{outline:2px solid var(--b-600);outline-offset:1px;border-radius:50%}
.bk-count{margin:0;font-family:'Archivo Variable','Archivo',sans-serif;font-size:12px;
  letter-spacing:.14em;color:var(--n-500)}
.bk-hint{display:block;text-align:center;margin:14px 0 0;font-size:13px;color:var(--n-500)}

/* ── page furniture ──────────────────────────────────────────── */
.bk-page h2{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;letter-spacing:-.038em;
  line-height:1.05;font-size:clamp(24px,3.1vw,38px);margin:10px 0 20px;color:var(--n-900)}
.bk-page h3{font-family:'Manrope Variable','Manrope',sans-serif;font-weight:700;
  letter-spacing:-.02em;font-size:16.8px;line-height:1.5;margin:0 0 7px;color:var(--n-900)}
.bk-page p{font-size:14.8px;line-height:1.62;color:var(--n-550);margin:0 0 12px}
.bk-eyebrow{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.5px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8A5104;margin:0}
.bk-eyebrow-d{color:#E9A06B}
.bk-h2d{color:#fff}
.bk-leadd{color:#A8B0BD;max-width:60ch}
.bk-folio{position:absolute;right:clamp(26px,4vw,52px);bottom:clamp(18px,2.4vw,30px);
  margin:0;font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  letter-spacing:.16em;color:var(--n-400)}
.bk-dark .bk-folio{color:#6B7787}
.bk-note{font-size:12.5px;color:var(--n-500);margin:16px 0 0;max-width:70ch}
.bk-note-d{color:#8A94A6}
.bk-sub{font-size:13.5px;color:var(--n-550);margin-top:16px}

.bk-dark{background:var(--grad-ink);border-color:transparent}
.bk-dark h2,.bk-dark h3{color:#fff}
.bk-dark p{color:#A8B0BD}
.bk-dark b{color:#fff}

/* ── layout helpers ──────────────────────────────────────────── */
.bk-2col{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(20px,3vw,36px);
  align-items:start}
.bk-2col-eq{grid-template-columns:1fr 1fr;align-items:stretch}
.bk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bk-shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--n-200);
  position:relative;aspect-ratio:4/3}
.bk-shot img{width:100%;height:100%;object-fit:cover;display:block}
.bk-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:12px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(6,9,13,.85))}

.bk-stat{display:flex;align-items:center;gap:20px;margin-top:20px;padding:20px 24px;
  background:var(--grad-ink);border-radius:16px}
.bk-stat b{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;font-size:40px;
  letter-spacing:-.04em;color:var(--b-500);line-height:1}
.bk-stat strong{display:block;color:#fff;font-size:13.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.bk-stat span{color:#A8B0BD;font-size:13.5px;line-height:1.5}

.bk-fig{background:var(--n-25);border:1px solid var(--n-150);border-radius:14px;
  padding:16px 16px 18px}
.bk-fig b{display:block;font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;
  font-size:clamp(20px,2.4vw,27px);letter-spacing:-.035em;color:var(--n-900);line-height:1}
.bk-fig span{display:block;font-size:12.5px;color:var(--n-550);margin-top:6px;line-height:1.45}

.bk-time{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bk-time li{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--n-150)}
.bk-time li:first-child{border-top:0}
.bk-time b{font-family:'Archivo Variable','Archivo',sans-serif;font-size:14px;
  color:var(--b-700);letter-spacing:.02em}
.bk-time span{font-size:14px;color:var(--n-550);line-height:1.55}

.bk-panel{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:24px 22px}
.bk-plabel{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#E9A06B;margin:0 0 10px}

.bk-cap{background:var(--n-25);border:1px solid var(--n-150);border-radius:14px;
  padding:18px 18px 20px;position:relative}
.bk-cap b{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  color:var(--n-400);letter-spacing:.14em;display:block;margin-bottom:9px}
.bk-cap p{font-size:13.6px;margin:0}
.bk-cap-wide{grid-column:1/-1}

.bk-box{background:var(--n-25);border:1px solid var(--n-150);border-radius:14px;padding:18px}
.bk-box ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.bk-box li{font-size:13.2px;color:var(--n-550);padding-left:14px;position:relative;line-height:1.45}
.bk-box li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--b-500)}

.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bk-list li{display:flex;gap:11px;align-items:flex-start}
.bk-list svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--ok)}
.bk-list b{display:block;font-size:14px;color:var(--n-900);font-weight:600}
.bk-list span{display:block;font-size:13.2px;color:var(--n-550);line-height:1.5}

.bk-team{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.bk-person{margin:0;text-align:center}
.bk-person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:3px solid var(--n-150);display:block}
.bk-person b{display:block;font-size:13.5px;color:var(--n-900);margin-top:11px;
  font-weight:600;line-height:1.3}
.bk-role{display:block;font-family:'Archivo Variable','Archivo',sans-serif;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#8A5104;margin-top:5px}
.bk-bio{display:block;font-size:11.8px;color:var(--n-550);margin-top:7px;line-height:1.45}

.bk-cred{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:18px 18px 20px}
.bk-cred p{margin:0;font-size:13.6px}

/* ── cover and closing pages ─────────────────────────────────── */
.bk-cover,.bk-close{background:var(--grad-ink);border-color:transparent}
.bk-cover .bk-inner,.bk-close .bk-inner{display:flex;flex-direction:column;
  justify-content:center;min-height:100%}
.bk-brand{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:19px;color:#fff;margin:0}
.bk-brand span{display:block;font-family:'Archivo Variable','Archivo',sans-serif;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#8A94A6;
  margin-top:5px;font-weight:500}
.bk-tag{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#E9A06B;margin:26px 0 0}
.bk-covertitle{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;letter-spacing:-.048em;
  line-height:.92;font-size:clamp(42px,7vw,84px);color:#fff;margin:14px 0 0}
.bk-covertitle em{font-style:normal;color:var(--b-500)}
.bk-coverlead{color:#A8B0BD;font-size:15px;line-height:1.6;max-width:46ch;margin:24px 0 0}
.bk-covermeta{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.5px;
  letter-spacing:.16em;color:#6B7787;margin:auto 0 0;padding-top:26px}
.bk-closetitle{font-family:'Archivo Variable','Archivo',sans-serif;font-weight:800;letter-spacing:-.04em;
  line-height:1.05;font-size:clamp(26px,3.6vw,42px);color:#fff;margin:20px 0 16px}
.bk-close p{color:#A8B0BD;max-width:52ch}
.bk-contact{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:26px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;overflow:hidden}
.bk-contact>div{background:#14171C;padding:16px 16px 18px}
.bk-contact span{display:block;font-family:'Archivo Variable','Archivo',sans-serif;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8A94A6}
.bk-contact b{display:block;color:#fff;font-size:13.5px;font-weight:600;margin-top:7px;
  line-height:1.4}

/* ── responsive ──────────────────────────────────────────────── */
@media(max-width:900px){
  .bk-on .bk-book{aspect-ratio:3/4.05}
  .bk-2col,.bk-2col-eq,.bk-grid2{grid-template-columns:1fr}
  .bk-grid3{grid-template-columns:1fr 1fr}
  .bk-team{grid-template-columns:repeat(3,1fr)}
  .bk-contact{grid-template-columns:1fr 1fr}
  .bk-cap-wide{grid-column:auto}
  .bk-nav{width:40px;height:40px;margin-top:-20px}
  .bk-prev{left:2px}.bk-next{right:2px}
  .bk-shot{aspect-ratio:16/9}
}
@media(max-width:560px){
  .bk-on .bk-book{aspect-ratio:auto;height:74vh;min-height:460px}
  .bk-grid3{grid-template-columns:1fr}
  .bk-team{grid-template-columns:repeat(2,1fr)}
  .bk-bio{display:none}
  .bk-contact{grid-template-columns:1fr}
  .bk-time li{grid-template-columns:60px 1fr;gap:10px}
}

/* ── motion: the flip is an enhancement, never a requirement ─── */
@media (prefers-reduced-motion: reduce){
  .bk-on .bk-page,.bk-on .bk-page::after{transition:none}
}

/* The generic .bk-page h2/p rules out-specify the cover and closing styles,
   which left white type rendering as dark-on-dark. Match their specificity. */
.bk-page .bk-brand{color:#fff}
.bk-page .bk-covertitle,.bk-page .bk-closetitle{color:#fff}
.bk-page .bk-covertitle em{color:var(--b-500)}
.bk-page .bk-coverlead,.bk-page .bk-close p{color:#A8B0BD}
.bk-page .bk-covermeta{color:#6B7787}
.bk-page .bk-tag{color:#E9A06B}
.bk-page .bk-contact b{color:#fff}
.bk-page .bk-panel p{color:#A8B0BD}
.bk-page .bk-cred p{color:#A8B0BD}
.bk-page .bk-leadd{color:#A8B0BD}
.bk-page .bk-stat span{color:#A8B0BD}
/* mission & vision reads better filling the sheet */
.bk-dark .bk-inner:has(.bk-2col-eq){display:flex;flex-direction:column}
.bk-2col-eq{flex:1;align-content:stretch}

/* ══ the solutions register — /solutions ════════════════════════════════
   Five capability areas as a worked index rather than five identical cards.
   The rail on the left is a real tablist; the stage on the right shows the
   selected area's scope, which until now lived only on the sub-page.

   Progressive enhancement, like the profile booklet: with no script every
   panel is visible and the page reads as five headed sections. `.solx-on`
   is added by the script, and only then is anything hidden — so a failed
   script leaves a longer page, never an empty one. */
.solx{display:grid;grid-template-columns:minmax(300px,.86fr) 1.14fr;
  gap:26px;align-items:start}
.solx-rail{display:flex;flex-direction:column;gap:8px}
.solx-row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:14px;width:100%;text-align:left;padding:16px 16px 16px 18px;
  background:transparent;border:1px solid transparent;border-radius:var(--r-lg);
  cursor:pointer;font:inherit;color:inherit;position:relative;
  transition:background .22s var(--ease),border-color .22s var(--ease),
    box-shadow .22s var(--ease),transform .22s var(--ease-out)}
.solx-row::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:transparent;transition:background .22s var(--ease)}
.solx-row:hover{background:var(--grad-surface);border-color:var(--n-200)}
.solx-row:focus-visible{outline:2px solid var(--b-600);outline-offset:2px}
.solx-row[aria-selected="true"]{background:var(--grad-surface);
  border-color:var(--n-200);box-shadow:var(--e2),var(--sheen)}
.solx-row[aria-selected="true"]::before{background:var(--b-600)}
.solx-n{font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;
  font-weight:500;color:var(--n-400);letter-spacing:.06em}
.solx-row[aria-selected="true"] .solx-n{color:var(--b-700)}
.solx-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;
  place-items:center;background:linear-gradient(180deg,var(--n-50),var(--n-100));
  border:1px solid var(--n-200);color:var(--n-700);
  transition:background .22s var(--ease),color .22s var(--ease),
    border-color .22s var(--ease)}
.solx-ic svg{width:19px;height:19px}
.solx-row[aria-selected="true"] .solx-ic{
  background:linear-gradient(180deg,var(--b-50),var(--b-100));
  border-color:var(--b-200);color:var(--b-700)}
.solx-rt{min-width:0;display:grid;gap:3px}
.solx-rt b{font-size:15.5px;font-weight:600;letter-spacing:-.012em;color:var(--n-900)}
/* the one-line summary is a promise about the row, so it must stay one line —
   truncated rather than wrapped, or the rail rows jump between two and three
   lines and the list stops scanning as a list */
.solx-rt i{font-style:normal;font-size:13px;color:var(--n-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.solx-ch{width:7px;height:7px;flex:none;border-right:1.6px solid var(--n-400);
  border-bottom:1.6px solid var(--n-400);transform:rotate(-45deg);
  transition:transform .22s var(--ease-out),border-color .22s var(--ease)}
.solx-row[aria-selected="true"] .solx-ch{border-color:var(--b-600);
  transform:rotate(-45deg) translate(2px,2px)}

.solx-panel{background:var(--grad-surface);border:1px solid var(--n-200);
  border-radius:var(--r-xl);box-shadow:var(--e2),var(--sheen);padding:34px 34px 30px}
.solx-on .solx-panel[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .solx-on .solx-panel:not([hidden]){animation:solxin .34s var(--ease-out) both}
}
@keyframes solxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.solx-eyebrow{display:flex;align-items:center;gap:9px;
  font-family:'Archivo Variable','Archivo',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--n-500);margin-bottom:12px}
.solx-eyebrow span{color:var(--b-700)}
.solx-panel h2{font-size:clamp(24px,2.3vw,30px);letter-spacing:-.02em;
  margin-bottom:10px}
.solx-lead{font-size:17px;line-height:1.58;color:var(--n-550);max-width:52ch}
.solx-h3{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--n-500);margin:26px 0 14px;padding-top:20px;
  border-top:1px solid var(--n-150)}
.solx-ticks li{font-size:14.5px;color:var(--n-600)}
.solx-ticks a,.solx-note a{color:var(--b-700);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--b-200)}
.solx-ticks a:hover,.solx-note a:hover{text-decoration-color:var(--b-600)}
.solx-note{margin-top:20px;padding:14px 16px;border-radius:var(--r);
  background:var(--grad-tint);border:1px solid var(--n-150);
  font-size:13.5px;line-height:1.6;color:var(--n-550)}
.solx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

@media(max-width:960px){
  .solx{grid-template-columns:1fr;gap:18px}
  .solx-rt i{white-space:normal}
  .solx-panel{padding:26px 22px 24px}
}
@media(max-width:560px){
  .solx-row{padding:13px 12px 13px 14px;gap:11px}
  .solx-ic{width:34px;height:34px;border-radius:10px}
  .solx-ic svg{width:17px;height:17px}
  .solx-rt b{font-size:14.5px}
  .solx-rt i{font-size:12.5px}
}

/* ══ energy mesh metering — /iot/metering ═══════════════════════════════
   Added 22 Aug 2026; rebuilt 23 Aug around the drawing ported from
   multicomiot.com, so both sites tell the metering story the same way.

   The drawing sits on an ink panel because a mesh is unreadable on a light
   ground, and --grad-ink is already the system's dark surface. The palette is
   brand orange and neutral: no teal, no violet. The multicomiot.com version
   of this same drawing is teal and orange, and the two must not be mistakable
   for one another.

   Gone with the rebuild: the SVG mesh, the three self-healing frames, the
   four-stage architecture diagram and the head-end / MDMS function tables —
   with every class and keyframe that served only them. Kept in
   /home/claude/mgh-backup/site-metering-old.css. */
.mm-frame{border-radius:var(--r-xl);overflow:hidden;background:var(--grad-ink);
  border:1px solid var(--n-800);box-shadow:var(--e4)}
.mm-sp{margin-left:auto}
/* The stage the ported drawing sits on. The canvas is painted transparent so
   the ink panel reads straight through it, and the edges are masked rather
   than cropped — a hard edge on a mesh makes it look like a screenshot of a
   bigger map, which is exactly the impression this drawing must not give. */
.am-stage{padding:10px 10px 4px;
  background:radial-gradient(58% 76% at 50% 46%,rgba(249,115,22,.055),transparent 70%),
    radial-gradient(46% 62% at 16% 84%,rgba(203,211,221,.05),transparent 68%)}
.am-stage canvas{display:block;width:100%;aspect-ratio:21/9;
  -webkit-mask-image:radial-gradient(76% 82% at 50% 48%,#000 38%,transparent 100%);
  mask-image:radial-gradient(76% 82% at 50% 48%,#000 38%,transparent 100%)}
@media(max-width:560px){.am-stage canvas{aspect-ratio:16/10}}
.mm-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 18px 15px;border-top:1px solid rgba(255,255,255,.08)}
.mm-key{display:inline-flex;align-items:center;gap:8px;
  font-family:'Archivo Variable','Archivo',sans-serif;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#9AA5B4}
.mm-key i{width:9px;height:9px;flex:none}
/* two keys now, not five: the failed-link and backhaul-out swatches went
   with the SVG drawing they belonged to */
.mm-key .k1{background:#CBD3DD}
.mm-key .k3{background:var(--b-500)}
.mm-dis{font-family:'Archivo Variable','Archivo',sans-serif;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:#5A6675}
/* The duplicate .steps/.step definitions this note described were
   resolved on 22 August — see the "steps" block higher up. The build
   now fails on a new duplicate bare-class definition rather than
   leaving one for somebody to find. */
.mm-steps{margin-bottom:36px;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.mm-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mm-steps{grid-template-columns:1fr}}


/* ══ v5 — the badge, the display line, the lit band ══════════════════════
   23 August. One treatment applied across the whole site rather than a new
   page: the eyebrow becomes a badge, the display line carries a gradient on
   the phrase that matters, and every ink surface is lit warm from one
   corner instead of being flat black.

   It is drawn from the two references William sent — a dark amber-lit
   landing page and a deep-gradient public portal. What is taken is the
   STRUCTURE: a pill above the line, an oversized line with one half
   emphasised, figures on a lit band under it. The palettes are not taken.
   Brand orange stays the accent; the amber appears only inside gradients,
   never as a colour text or a control is set in.

   Everything here is CSS on markup that already exists, which is why it
   reaches 22 pages at once and why it can be reverted by deleting this
   block. */

/* ── the badge ─────────────────────────────────────────────────────────
   .ceyebrow on the home hero and .eyebrow inside a page hero become pills.
   Section eyebrows further down the page are deliberately left as plain
   mono rules: if every eyebrow is a badge, none of them is. */
.chero .ceyebrow,.phero .eyebrow{display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 11px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--n-200);
  box-shadow:var(--e1),var(--sheen);color:var(--n-600);
  letter-spacing:.12em;margin-bottom:4px}
.chero .ceyebrow::before,.phero .eyebrow::before{content:'';width:7px;height:7px;
  flex:none;border-radius:50%;background:var(--b-500);
  box-shadow:0 0 0 4px rgba(249,115,22,.16)}
/* .eyebrow ships with an 18px dash at line 97 and then display:none at 873 —
   the v4 theme turned the dash off globally. Inside a page hero the dot has
   to turn display back ON, which the shorthand above does not do. */
.phero .eyebrow::before{display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--b-500);
  box-shadow:0 0 0 4px rgba(249,115,22,.16)}

/* ── the display line ──────────────────────────────────────────────────
   An <em> inside a hero heading is not italic here; it is the half of the
   sentence the page is actually about. */
.chero h1 em,.phero h1 em,.cta h2 em{font-style:normal;
  background:linear-gradient(94deg,var(--b-600),var(--b-500) 46%,#F5A524);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.chero h1{letter-spacing:-.046em}

/* ── lit ink ───────────────────────────────────────────────────────────
   Every dark surface on the site gets the same warm light from one corner:
   the credential rail under the hero, ink sections, and the footer. Flat
   #14171C reads as a hole in the page; lit, it reads as a surface. */
/* the light belongs INSIDE the grid, not on the band: on the band it spilled
   into the page margins either side of the wrap, where there are no cells to
   sit under it, and lit two gutters brighter than the middle */
.crail-grid::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 160% at 16% 0%,rgba(249,115,22,.22),transparent 64%),
    radial-gradient(50% 140% at 94% 100%,rgba(245,165,36,.14),transparent 62%)}
.crail b{background:linear-gradient(150deg,#fff,#F1E4D6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.csec.ink{position:relative;overflow:hidden}
.csec.ink::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 68% at 88% 4%,rgba(249,115,22,.16),transparent 62%),
    radial-gradient(44% 60% at 6% 96%,rgba(245,165,36,.08),transparent 60%)}
.csec.ink>*{position:relative}
footer.site{position:relative;overflow:hidden}
footer.site::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 60% at 6% 0%,rgba(249,115,22,.10),transparent 62%)}
footer.site>*{position:relative}

/* ── the width axis ───────────────────────────────────────────────────
   Archivo carries width as well as weight, and the MulticomKasa page uses
   it: display lines are set slightly wide (104–118%) so a heading has the
   block-letter presence the reference has, while running text stays at the
   normal width where it is easier to read. font-stretch, not
   font-variation-settings — same axis, but it is the property the cascade
   understands, so it inherits and can be overridden. */
h1,.chero h1,.dsp{font-stretch:108%}
h2,.ch2{font-stretch:112%}
.crail b,.stat .v,.grp-parent h3{font-stretch:112%}
.brand .nm,.mk-logo{font-stretch:118%}
/* labels: the wide-tracked uppercase line the reference sets in the display
   face at 700 rather than in a monospace */
.eyebrow,.ceyebrow,.crumb,.mm-dis,.mm-key,.sit-tag,.solx-n,.dvz-idx,
.grp-tag,.idn{font-weight:700}