/* ============================================================
   Delta-Sigma, Inc. — site design system
   Palette derived from the DSI mark: ultramarine block + red Δ Σ.
   Red is reserved. It only ever marks the legacy/distorted case
   or a measured limit. It is never decoration.
   ============================================================ */

:root{
  --void:#030A16;
  --hull:#0A1A31;
  --deep:#202858;
  --signal:#3E489D;
  --beam:#9EA4CE;
  --ice:#C2C6E2;
  --pulse:#E4141B;
  --pulse-dim:#FF6A6F;
  --paper:#FFFFFF;
  --fog:#EDF2F8;
  --ink:#081426;
  --steel:#566D8A;
  --line-l:#DEE7F1;
  --line-d:rgba(194,198,226,.16);

  --r-lg:20px;
  --r-md:12px;
  --r-sm:8px;
  --maxw:1180px;

  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3{
  font-family:var(--display);
  font-stretch:112%;
  letter-spacing:-.025em;line-height:1.04;font-weight:800;
}
h1{font-stretch:118%}

/* ---------- utility type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin-bottom:18px;
}
.eyebrow::before{content:"";width:14px;height:2px;background:var(--pulse);flex:none}
.on-dark .eyebrow,.eyebrow.inv{color:var(--beam)}
.lede{color:var(--steel);font-size:17px;max-width:62ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.note{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--steel);letter-spacing:.02em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-stretch:108%;
  font-weight:700;font-size:14.5px;
  padding:12px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-signal{background:var(--signal);color:#fff;box-shadow:0 8px 22px rgba(62,72,157,.26)}
.btn-signal:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(62,72,157,.38)}
.btn-paper{background:#fff;color:var(--void);box-shadow:0 10px 30px rgba(3,10,22,.35)}
.btn-paper:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(3,10,22,.5)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(194,198,226,.4)}
.btn-ghost:hover{border-color:var(--beam);background:rgba(158,164,206,.1)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line-l);
}
.nav-inner{display:flex;align-items:center;gap:30px;max-width:var(--maxw);margin:0 auto;padding:11px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav-links a{opacity:.7;transition:opacity .2s;position:relative;padding:2px 0}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current]{opacity:1}
.nav-links a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--pulse);
}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:22px;color:var(--void);cursor:pointer;padding:4px 8px}

/* ---------- sections ---------- */
.sec{padding:92px 0}
.sec-paper{background:var(--paper)}
.sec-fog{background:var(--fog)}
.sec h2{font-size:clamp(30px,4vw,46px);margin-bottom:16px}
.sec-head{max-width:64ch}

/* dark band shared by hero / talk / feature bands */
.band{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--void) 0%,#08182F 52%,var(--deep) 100%);
}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px circle at 84% 26%,rgba(62,72,157,.34),transparent 64%);
}
.band .wrap{position:relative;z-index:2}
.band h2{font-size:clamp(28px,3.6vw,42px)}
.band .lede{color:#BFD5EA}

/* grid mesh texture for dark bands */
.mesh::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(194,198,226,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(194,198,226,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}

/* ---------- hero ---------- */
.hero{padding:96px 0 88px;min-height:600px;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:900;max-width:15ch}
.hero .kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice);margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
.hero .kicker b{color:#fff;font-weight:500}
.hero .kicker i{width:5px;height:5px;border-radius:50%;background:var(--pulse);font-style:normal;flex:none}
.hero p.sub{color:#C6DAEE;font-size:17px;max-width:52ch;margin:24px 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.hero-tags span{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ice);border:1px solid rgba(194,198,226,.26);
  background:rgba(8,24,47,.5);border-radius:var(--r-sm);padding:6px 11px;
}

/* page hero (interior pages) */
.hero-page{padding:84px 0 76px}
.hero-page h1{font-size:clamp(34px,4.8vw,54px);font-weight:900;max-width:17ch}
.hero-page .rule{width:220px;max-width:55%;height:2px;background:linear-gradient(90deg,var(--pulse) 0 42px,var(--beam) 42px,rgba(158,164,206,0));margin:22px 0 22px}
.hero-page p{color:#C6DAEE;font-size:16.5px;max-width:60ch}

/* ---------- platform cards ---------- */
.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:52px}
.plat{
  border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.plat:hover{transform:translateY(-5px);border-color:rgba(62,72,157,.4);box-shadow:0 22px 54px rgba(8,20,38,.12)}
.plat-art{position:relative;aspect-ratio:16/8;background:var(--void);overflow:hidden}
.plat-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.plat:hover .plat-art img{transform:scale(1.04)}
.plat-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,10,22,.05),rgba(3,10,22,.5))}
.plat-tag{
  position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(62,72,157,.9);border-radius:var(--r-sm);padding:5px 10px;
}
.plat-body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.plat-body h3{font-size:23px;margin-bottom:6px}
.plat-body .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.plat-body p{color:var(--steel);font-size:15px;margin-bottom:18px}
.plat-body .lnk{margin-top:auto;font-family:var(--display);font-weight:700;font-size:14px;color:var(--signal);display:inline-flex;gap:8px;align-items:center}
.plat-body .lnk:hover{gap:12px}

/* ---------- capability list ---------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;margin-top:48px}
.cap{background:var(--paper);padding:30px 26px;transition:background .25s}
.cap:hover{background:#FAFCFE}
.cap h3{font-size:17px;margin-bottom:9px}
.cap p{color:var(--steel);font-size:14px}
.cap .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--signal);display:block;margin-bottom:13px}
.sec-fog .caps{background:var(--line-l)}
.sec-fog .cap{background:var(--paper)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--paper);padding:28px 22px}
.stat b{display:block;font-family:var(--display);font-stretch:118%;font-size:clamp(24px,2.8vw,34px);font-weight:900;letter-spacing:-.035em;color:var(--void);line-height:1}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);display:block;margin-top:10px}
.band .stats{background:var(--line-d);border-color:var(--line-d)}
.band .stat{background:rgba(8,24,47,.5)}
.band .stat b{color:#fff}
.band .stat span{color:var(--ice);opacity:.75}

/* ---------- rack-unit ruler (signature #2) ---------- */
.racks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.rack{border:1px solid var(--line-d);border-radius:var(--r-lg);background:rgba(8,24,47,.45);padding:20px;display:flex;flex-direction:column}
.rack.win{border-color:rgba(158,164,206,.55);background:rgba(62,72,157,.14);box-shadow:0 0 0 1px rgba(158,164,206,.2),0 20px 48px rgba(3,10,22,.4)}
.rack-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.rack-h .u{font-family:var(--display);font-stretch:118%;font-weight:900;font-size:30px;letter-spacing:-.04em;line-height:1}
.rack.win .rack-h .u{color:var(--beam)}
.rack-h .who{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);opacity:.75;text-align:right}
.rack-vis{display:flex;gap:14px;align-items:flex-end;flex:1}
.rack-bar{width:26px;flex:none;border-radius:3px;background:linear-gradient(180deg,rgba(194,198,226,.3),rgba(194,198,226,.12));border:1px solid rgba(194,198,226,.28);position:relative}
.rack.win .rack-bar{background:linear-gradient(180deg,var(--beam),var(--signal));border-color:rgba(158,164,206,.6);box-shadow:0 0 18px rgba(158,164,206,.45)}
.rack-photo{flex:1;border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(194,198,226,.16);background:#fff}
.rack-photo img{width:100%;height:190px;object-fit:contain;background:#fff}
.rack-foot{margin-top:14px;font-size:13.5px;color:#BFD5EA}
.rack-foot b{color:#fff;font-family:var(--display);font-weight:700}

/* ---------- tables ---------- */
.table-wrap{border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);margin-top:26px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
thead th{
  text-align:left;padding:14px 18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal);background:var(--fog);font-weight:500;border-bottom:1px solid var(--line-l);white-space:nowrap;
}
tbody td{padding:13px 18px;border-bottom:1px solid var(--line-l);color:var(--steel);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:#FAFCFE}
tbody td:first-child{color:var(--void);font-weight:500}
tbody td.hi{color:var(--signal);font-weight:500}
.band .table-wrap{border-color:var(--line-d);background:rgba(8,24,47,.4)}
.band thead th{background:rgba(62,72,157,.22);color:var(--beam);border-bottom-color:var(--line-d)}
.band tbody td{border-bottom-color:var(--line-d);color:#BFD5EA}
.band tbody tr:hover{background:rgba(62,72,157,.12)}
.band tbody td:first-child{color:#fff}
.band tbody td.hi{color:var(--beam)}

/* ---------- product rows (platforms page) ---------- */
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:center}
.row.flip .row-art{order:-1}
.row h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:0}
.row .rule{width:110px;height:3px;background:var(--pulse);border-radius:3px;margin:18px 0 20px}
.row p{color:var(--steel);font-size:15.5px;margin-bottom:20px;max-width:54ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--signal);
  background:rgba(62,72,157,.07);border:1px solid rgba(62,72,157,.2);
  border-radius:var(--r-sm);padding:6px 11px;white-space:nowrap;
}
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line-l);box-shadow:0 22px 54px rgba(8,20,38,.14)}
.shot img{width:100%;height:100%;object-fit:contain;background:#fff}
.shot.dark{background:#02060E;border-color:rgba(194,198,226,.18)}
.shot.dark img{background:#02060E}
.shot .cap{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(3,10,22,.78);backdrop-filter:blur(6px);
  border:1px solid rgba(194,198,226,.2);border-radius:var(--r-sm);padding:5px 10px;
}

/* ---------- proof gallery ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.proof figure{border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden;background:rgba(8,24,47,.45)}
.proof img{width:100%;height:230px;object-fit:contain;background:#02060E}
.proof figcaption{padding:16px 18px;font-size:13.5px;color:#BFD5EA}
.proof figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff;margin-bottom:5px}

/* ---------- catalog map (svg scatter) ---------- */
.map{border:1px solid var(--line-l);border-radius:var(--r-lg);background:var(--paper);padding:26px 24px 18px;margin-top:26px}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map-key{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-l)}
.map-key span{font-family:var(--mono);font-size:10.5px;color:var(--steel);display:inline-flex;align-items:center;gap:7px}
.map-key i{width:9px;height:9px;border-radius:2px;flex:none;font-style:normal}

/* ---------- logo wall ---------- */
.wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;margin-top:44px}
.wall a,.wall div{
  background:var(--paper);aspect-ratio:5/3;display:grid;place-items:center;padding:22px 18px;
  transition:background .25s;position:relative;min-width:0;overflow:hidden;
}
.wall img{
  width:100%;height:100%;object-fit:contain;
  filter:grayscale(1) contrast(.92) opacity(.62);
  transition:filter .3s var(--ease),transform .3s var(--ease);
}
.wall a:hover,.wall div:hover{background:#FAFCFE}
.wall a:hover img,.wall div:hover img{filter:none;transform:scale(1.05)}
.wall figcaption{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);opacity:0;transition:opacity .25s;pointer-events:none;
}
.wall a:hover figcaption,.wall div:hover figcaption{opacity:.8}

/* ---------- program vignettes ---------- */
.progs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
.prog{
  border:1px solid var(--line-l);border-radius:var(--r-lg);background:var(--paper);padding:28px;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
}
.prog:hover{transform:translateY(-4px);border-color:rgba(62,72,157,.35);box-shadow:0 18px 44px rgba(8,20,38,.1)}
.prog .k{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.prog .k span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.prog .k .yr{color:var(--steel);margin-left:auto}
.prog h3{font-size:19px;margin-bottom:9px}
.prog p{color:var(--steel);font-size:14.5px}
.prog .metric{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-l);
  font-family:var(--mono);font-size:11.5px;color:var(--void);letter-spacing:.02em;
}
.prog .metric b{color:var(--signal)}

/* ---------- timeline ---------- */
.tl{margin-top:44px;border-left:2px solid var(--line-l);padding-left:0}
.tl-item{position:relative;padding:0 0 34px 30px}
.tl-item::before{
  content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:3px;
  background:var(--paper);border:2px solid var(--signal);
}
.tl-item.mark::before{background:var(--pulse);border-color:var(--pulse)}
.tl-item:last-child{padding-bottom:0}
.tl-item .yr{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--signal);display:block;margin-bottom:6px}
.tl-item h3{font-size:17px;margin-bottom:6px}
.tl-item p{color:var(--steel);font-size:14.5px;max-width:60ch}

/* ---------- contact ways ---------- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.way{
  border:1px solid var(--line-l);border-radius:var(--r-lg);background:var(--paper);padding:30px;
  display:flex;flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
}
.way:hover{transform:translateY(-5px);border-color:rgba(62,72,157,.45);box-shadow:0 20px 48px rgba(8,20,38,.1)}
.way .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.way h3{font-size:20px;margin-bottom:10px}
.way h3 a:hover{color:var(--signal)}
.way p{color:var(--steel);font-size:14.5px}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:44px;padding-top:38px;border-top:1px solid var(--line-l)}
.info .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.info p{color:var(--steel);font-size:14.5px}
.info strong{color:var(--void);font-weight:600}

/* ---------- callout ---------- */
.callout{
  margin-top:32px;border:1px solid rgba(228,20,27,.3);border-left:3px solid var(--pulse);
  background:rgba(228,20,27,.04);border-radius:var(--r-md);padding:22px 24px;
}
.callout h3{font-size:15.5px;margin-bottom:7px}
.callout p{color:var(--steel);font-size:14px;max-width:74ch}
.band .callout{border-color:rgba(228,20,27,.4);background:rgba(228,20,27,.1)}
.band .callout p{color:#BFD5EA}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r-lg);overflow:hidden;box-shadow:0 26px 64px rgba(8,20,38,.18)}
.split-art{position:relative;min-height:420px;background:linear-gradient(160deg,var(--deep),var(--void));overflow:hidden}
.split-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;mix-blend-mode:screen}
.split-art::after{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at 45% 50%,rgba(62,72,157,.4),transparent 70%)}
.split-fig{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:36px}
.split-fig b{font-family:var(--display);font-stretch:122%;font-weight:900;font-size:clamp(54px,7vw,84px);color:#fff;letter-spacing:-.045em;line-height:.92;text-align:center}
.split-fig b small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--beam);margin-top:16px}
.split-body{background:var(--hull);color:#fff;padding:50px 44px;display:flex;flex-direction:column;justify-content:center}
.split-body h2{color:#fff;font-size:clamp(26px,3.2vw,38px);margin-bottom:14px}
.split-body p{color:#B5CDE4;font-size:15px;margin-bottom:12px;max-width:46ch}
.split-body .btn{align-self:flex-start;margin-top:18px}

/* ---------- talk band ---------- */
.talk{padding:80px 0}
.talk .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.talk h2{max-width:15ch}
.talk p{color:#BFD5EA;font-size:16px;max-width:44ch;margin-bottom:26px}

/* ---------- footer ---------- */
footer{background:var(--void);color:#fff;padding:62px 0 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:36px;margin-bottom:44px}
.foot-brand img{height:33px;width:auto;margin-bottom:18px}
.foot-brand p{color:#7E99B8;font-size:13.5px;max-width:34ch}
.foot-col .foot-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-bottom:16px;font-weight:500}
.foot-col a,.foot-col p{display:block;color:#7E99B8;font-size:13.5px;margin-bottom:9px;transition:color .2s}
.foot-col a:hover{color:var(--beam)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line-d);font-family:var(--mono);font-size:10.5px;color:#7E99B8;flex-wrap:wrap}

/* ---------- reveal ---------- */
.rv{min-width:0;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line-l);
    flex-direction:column;gap:0;padding:8px 24px 16px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 0;opacity:1;border-bottom:1px solid var(--line-l)}
  .nav-links a[aria-current]::after{display:none}
  .nav-links a[aria-current]{color:var(--signal)}
  .burger{display:block}
  .brand img{height:34px}
  .nav > .nav-inner{position:relative}
  .nav .btn{display:none}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero h1{max-width:none}
  .plats,.caps,.proof,.progs,.ways,.info,.row,.split,.talk .wrap{grid-template-columns:minmax(0,1fr)}
  .row{gap:36px}
  .row.flip .row-art{order:0}
  .split-art{min-height:300px}
  .racks{grid-template-columns:minmax(0,1fr)}
  .rack-photo img{height:220px}
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .sec,.talk{padding:60px 0}
  .hero{padding:64px 0;min-height:0}
  .hero-page{padding:60px 0 52px}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .split-body{padding:38px 26px}
  .plat-body{padding:24px}
  .foot-bot{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* wall: trailing note cell fills the last row without inheriting logo-cell sizing */
.wall .wall-note{
  grid-column:span 3;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;
  padding:24px 22px;text-align:center;
}
.wall .wall-note p{max-width:52ch}
@media(max-width:1020px){.wall .wall-note{grid-column:span 4}}
@media(max-width:640px){.wall .wall-note{grid-column:span 3}}


/* ---------- hero art ----------
   The image is dark at the left where the headline sits — mean rgb(5,16,28)
   against the site's void at rgb(3,10,22), so it joins the page rather than
   sitting on it. The scrim is weighted left so type stays clear of the circuit
   detail, and lifts toward the right so the HUD ring reads on its own. */
.hero-art{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:72% center;display:block}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,10,22,.95) 0%,rgba(3,10,22,.88) 32%,rgba(3,10,22,.58) 60%,rgba(3,10,22,.40) 100%),
    linear-gradient(180deg,rgba(3,10,22,.45) 0%,rgba(3,10,22,0) 26%,rgba(3,10,22,0) 68%,rgba(3,10,22,.72) 100%);
}
.hero .wrap{position:relative;z-index:2}
@media(max-width:900px){
  .hero-art img{object-position:64% center}
  .hero-art::after{background:linear-gradient(180deg,rgba(3,10,22,.86) 0%,rgba(3,10,22,.80) 55%,rgba(3,10,22,.92) 100%)}
}

/* v1.2.0: brand line under the footer blurb */
.foot-tagline{margin-top:10px;font-weight:600;letter-spacing:.01em;}

/* v1.3.0: hero closer line, pillar 2x2 grid, four-door row, platform tiles */
.hero .sub2{font-size:15px;color:rgba(226,230,246,.82);max-width:64ch;margin-top:12px}
.caps.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
.caps.doors{grid-template-columns:repeat(4,minmax(0,1fr))}
.plat2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:48px}
.plat{background:var(--signal);border-radius:var(--r-lg);padding:38px 30px;color:#fff;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.plat img{width:min(340px,82%);height:auto}
.plat h3{color:#fff;margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.plat p{color:rgba(255,255,255,.88);font-size:14.5px;max-width:46ch}
.plat .btn{margin-top:8px}
@media(max-width:960px){.caps.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.plat2{grid-template-columns:1fr}.caps.pillars{grid-template-columns:1fr}}
@media(max-width:560px){.caps.doors{grid-template-columns:1fr}}

/* v1.4.0: hero background video. The poster paints first and carries the hero on its
   own; the video is decoration that attaches after load, only when the connection and
   the visitor's motion settings allow it, and pauses the moment the hero scrolls away.
   Scrim sits above both so type contrast never depends on which frame is showing. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:1;opacity:0;transition:opacity .8s ease}
.hero-vid.on{opacity:1}
.hero-art::after{z-index:2}
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}

/* v1.4.1 ------------------------------------------------------------------
   Hero headline holds two lines. Platform tiles align on a fixed logo band and
   a bottom-anchored button so the two boxes read as a pair. A faint blueprint
   motif breaks up the long white stretch without adding a single image byte. */
.hero h1{max-width:22ch;text-wrap:balance}
@media(max-width:900px){.hero h1{max-width:none}}

.plat{justify-content:flex-start}
.plat img{width:auto;max-width:78%;height:74px;object-fit:contain}
.plat h3{margin-top:4px}
.plat p{flex:1 0 auto}
.plat .btn{margin-top:auto;align-self:center}

.sec-motif{position:relative;overflow:hidden}
.sec-motif::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(23,55,93,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,55,93,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 88% 8%,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 88% 8%,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%);
}
.sec-motif::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:520px;height:520px;right:-160px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,89,171,.07) 0%,rgba(0,89,171,.03) 45%,transparent 70%);
}
.sec-motif .wrap{position:relative;z-index:1}

/* v1.4.2 ------------------------------------------------------------------
   Headline holds two lines at every desktop width. Centered section head for
   the value block, with the lede running wider so the paragraphs stop stacking
   into narrow columns. Platform tiles now sit inside the foundation section
   above the value cards, so they get breathing room beneath them. */
.hero h1{max-width:19ch;text-wrap:balance}
@media(min-width:901px){.hero h1{font-size:clamp(38px,4.6vw,58px)}}

.sec-head-center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head-center h2{max-width:none;text-wrap:balance}
.sec-head-center .lede{margin-left:auto;margin-right:auto}
.sec-head .lede{max-width:92ch}
.sec-head-center .lede{max-width:96ch}

.plat2{margin-bottom:52px}

/* v1.4.7 ------------------------------------------------------------------
   Rack visuals are wireframe elevations now, drawn on one shared rack-unit
   scale, so the photo frame goes transparent and the DSI box takes a green
   accent to mark it as the solution rather than just another option. */
.rack-photo{background:transparent;border-color:rgba(194,198,226,.10)}
.rack-photo img{background:transparent;height:172px;object-fit:contain}

.rack.win{
  border-color:rgba(78,208,138,.55);
  background:linear-gradient(180deg,rgba(78,208,138,.15),rgba(78,208,138,.05));
  box-shadow:0 0 0 1px rgba(78,208,138,.28),0 20px 48px rgba(3,10,22,.45);
}
.rack.win .rack-h .u{color:#4ED08A}
.rack.win .rack-bar{
  background:linear-gradient(180deg,#4ED08A,#2D9A43);
  border-color:rgba(78,208,138,.65);
  box-shadow:0 0 18px rgba(78,208,138,.45);
}
.rack.win .rack-photo{border-color:rgba(78,208,138,.28)}
.rack.win .rack-foot b{color:#8BE8B4}

/* v1.4.9 ------------------------------------------------------------------
   1. Headline breaks on two lines: "Breaking the Limits of" / "RF Innovation".
      An explicit break beats a measure, which shifts with the viewport clamp.
   2. Sub paragraphs run 15% wider. 52ch -> 60ch in the hero, 92ch -> 106ch on
      section ledes, 96ch -> 110ch centered.
   3. Hero buttons removed in markup; the trailing margin under the sub goes
      with them. */
.hero h1{max-width:none;text-wrap:balance}
@media(min-width:901px){
  .hero h1{font-size:clamp(38px,4.6vw,58px)}
  .hero h1 br{display:inline}
}
@media(max-width:900px){.hero h1 br{display:none}}

.hero p.sub{max-width:60ch;margin:24px 0 0}
.hero .sub2{max-width:74ch}
.sec-head .lede{max-width:106ch}
.sec-head-center .lede{max-width:110ch}

/* v1.5.0 ------------------------------------------------------------------
   The headline kept wrapping to three lines because .hero-grid is a two column
   grid whose right column is empty, so the type only ever had half the width to
   work with. The grid collapses to one column and each headline line is its own
   non-wrapping block, which makes two lines structural instead of a coincidence
   of viewport width. Below 900px the lines wrap normally again. */
.hero-grid{grid-template-columns:minmax(0,1fr)}
.hero h1 span{display:block;white-space:nowrap}
@media(max-width:900px){
  .hero h1 span{display:inline;white-space:normal}
  .hero h1 span + span::before{content:" "}
}

/* v1.5.2: centered section headings break on their own line spans, same technique
   as the hero, so a two line heading stays two lines instead of following the
   viewport. Spans go inline again on small screens. */
.sec-head-center h2 span{display:block}
@media(max-width:760px){
  .sec-head-center h2 span{display:inline}
}

/* v1.5.5 ------------------------------------------------------------------
   1. HD hero. The old scrim ran to 95% black on the left, which was tuned for a
      poster that had bright areas to kill. The new footage is already dark blue
      end to end, so the scrim comes down hard and the type carries its own
      contrast with a shadow instead. Same technique on the band tint, which was
      washing the footage violet.
   2. Catalog bar under the capability cards.
   3. Colour logo belt, continuous scroll, static on reduced-motion. */
.hero-art::after{
  background:
    linear-gradient(90deg,rgba(3,10,22,.56) 0%,rgba(3,10,22,.38) 34%,rgba(3,10,22,.10) 66%,rgba(3,10,22,0) 100%),
    linear-gradient(180deg,rgba(3,10,22,.34) 0%,rgba(3,10,22,0) 22%,rgba(3,10,22,0) 74%,rgba(3,10,22,.44) 100%);
}
@media(max-width:900px){
  .hero-art::after{background:linear-gradient(180deg,rgba(3,10,22,.62) 0%,rgba(3,10,22,.48) 55%,rgba(3,10,22,.70) 100%)}
}
.band.hero::before{background:radial-gradient(760px circle at 84% 26%,rgba(62,72,157,.16),transparent 64%)}
.hero h1,.hero p.sub,.hero .kicker{
  text-shadow:0 1px 2px rgba(3,10,22,.55),0 2px 22px rgba(3,10,22,.62);
}

/* catalog bar */
.caps.has-bar{border-radius:var(--r-lg) var(--r-lg) 0 0;margin-bottom:0}
.capbar{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--signal);color:#fff;
  padding:24px 30px;border-radius:0 0 var(--r-lg) var(--r-lg);
  border:1px solid var(--signal);border-top:0;
}
.capbar b{
  font-family:var(--display);font-stretch:118%;font-weight:900;
  font-size:clamp(34px,4vw,48px);letter-spacing:-.04em;line-height:1;flex:none;
  padding-left:16px;border-left:4px solid var(--pulse);
}
.capbar span{color:rgba(255,255,255,.9);font-size:14.5px;flex:1 1 320px;max-width:64ch}
.capbar .btn{flex:none;margin-left:auto}
@media(max-width:760px){
  .capbar{padding:22px;gap:16px}
  .capbar .btn{margin-left:0}
}

/* colour logo belt */
.logo-belt{
  margin-top:44px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-belt-track{display:flex;align-items:center;gap:30px;width:max-content;animation:belt 62s linear infinite}
.logo-belt:hover .logo-belt-track{animation-play-state:paused}
.logo-belt img{height:50px;width:auto;flex:none;display:block;border-radius:6px;
  box-shadow:0 1px 3px rgba(8,20,38,.14),0 0 0 1px rgba(8,20,38,.06)}
@keyframes belt{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .logo-belt{-webkit-mask-image:none;mask-image:none}
  .logo-belt-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:34px 46px}
}
@media(max-width:760px){.logo-belt img{height:38px}.logo-belt-track{gap:20px}}


/* v1.5.6 ------------------------------------------------------------------
   1. Delta-Sigma mark down 20% in the nav and the footer.
   2. Logo belt now carries transparent-background marks sourced at full
      resolution, so the chip treatment comes off and the logos sit directly
      on the section ground. */
.brand img{height:35px}
.foot-brand img{height:26px}
@media(max-width:900px){.brand img{height:27px}}

.logo-belt img{height:50px;width:auto;flex:none;display:block;border-radius:0;box-shadow:none}
.logo-belt-track{gap:20px}
@media(max-width:760px){.logo-belt img{height:38px}.logo-belt-track{gap:14px}}

/* Wall cells sized their images from width alone, so the taller badges in the
   new transparent logo set overflowed into the row below. Constrain on both
   axes instead: badges fill the cell height, wordmarks fill the width. */
.wall img{position:absolute;inset:0;box-sizing:border-box;padding:22px 18px 26px;
  width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}

/* v1.5.7: .sec-head is measured at 64ch, which is right for the lede and too
   narrow for a short heading set at 46px. The wide modifier lifts the cap on
   the block and re-applies the measure to the lede alone, so a one-line
   heading stays one line without changing the paragraph rhythm. */
.sec-head.wide{max-width:none}
.sec-head.wide .lede{max-width:64ch}

/* v1.5.9: three of the four door headings run two lines and one runs one, so the
   paragraphs started at different heights. The headings are locked bucket names,
   so reserve two lines of space instead of editing the copy. */
.caps.doors .cap h3{min-height:2lh}
@supports not (height:1lh){.caps.doors .cap h3{min-height:2.15em}}

/* v1.6.0: the closing CTA is one centred column on every page. Heading, then the
   paragraph, then the button, no eyebrow and no arrow. Same block verbatim on
   the homepage, platforms, past performance and about, so the last thing a
   reader sees is identical wherever they came in. */
.talk-center .wrap{display:block;text-align:center}
.talk-center h2{max-width:none;margin:0 auto 20px}
.talk-center p{max-width:82ch;margin:0 auto 32px;color:#BFD5EA;font-size:16px}
.talk-center .btn{margin:0 auto}

/* Coverage rows: the whole row is the hit target, so hovering anywhere on it
   lifts that part out of the field and surfaces its tooltip. */
.map .fam rect[fill^="#"]{transition:opacity .18s var(--ease)}
.map:hover .fam rect[fill^="#"]{opacity:.45}
.map .fam:hover rect[fill^="#"]{opacity:1}
.map .fam text{transition:fill .18s var(--ease)}
.map .fam:hover text{fill:var(--void)}

/* v1.6.1: the wall was desaturating the logos. The set is now high-resolution
   colour with real alpha, so show it as supplied. */
.wall img{filter:none}
.wall a:hover img,.wall div:hover img{filter:none;transform:scale(1.04)}

/* v1.6.3 ------------------------------------------------------------------
   1. Amplifier mosaic replaces the single studio shot beside GhostLink. Six
      production modules, each captioned with its own numbers, most of them
      photographed next to a phone or a coin so the scale claim is visible
      rather than asserted.
   2. Full-width note in the case study grid for the programs that cannot be
      named individually. */
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mosaic figure{margin:0}
.mosaic img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:var(--r-md);border:1px solid var(--line-l);background:var(--fog);
}
.mosaic figcaption{
  font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.02em;
  color:var(--steel);margin-top:7px;
}
.mosaic-cap{font-family:var(--mono);font-size:10.5px;color:var(--steel);margin-top:16px;letter-spacing:.02em}
.mosaic-cap b{color:var(--void);font-weight:600}
@media(max-width:600px){.mosaic{grid-template-columns:1fr 1fr;gap:9px}.mosaic figcaption{font-size:9px}}

.prog-more{
  grid-column:1 / -1;
  background:var(--signal);border-color:var(--signal);color:#fff;
}
.prog-more:hover{transform:none;box-shadow:none;border-color:var(--signal)}
.prog-more h3{color:#fff;margin-bottom:10px}
.prog-more p{color:rgba(255,255,255,.9);max-width:88ch}

/* v1.7.0: contact page reduced to two routes. Both boxes are the whole link, so
   the tap target is the box rather than the line of text inside it. */
.reach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.reach-box{
  display:block;background:var(--signal);color:#fff;border-radius:var(--r-lg);
  padding:44px 38px;transition:transform .28s var(--ease),box-shadow .28s;
  box-shadow:0 14px 34px rgba(62,72,157,.22);
}
.reach-box:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(62,72,157,.34)}
.reach-box .k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);display:block;margin-bottom:16px;
}
.reach-box b{
  font-family:var(--display);font-stretch:112%;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(24px,2.6vw,34px);line-height:1.1;display:block;color:#fff;
}
.reach-box .s{display:block;margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.82)}
@media(max-width:760px){.reach{grid-template-columns:1fr;gap:16px}.reach-box{padding:32px 26px}}

/* v1.7.1 ------------------------------------------------------------------
   1. Long stat values wrapped to two lines and pushed their own label out of
      alignment with the row. Values never wrap now, and the ones too long for
      the display size carry .sm so they hold one line at every breakpoint.
   2. The full-width note in the case study grid reads as a statement, so it
      centres rather than sitting left against four left-aligned cards. */
.stat b{white-space:nowrap}
.stat b.sm{font-size:clamp(17px,1.85vw,23px);letter-spacing:-.02em}

/* Credential table. Every value sits at the size the longest one needs, so the
   four labels land on the same baseline instead of stepping. The table also
   takes the same 44px of air under a section head that .caps and .wall do,
   which it was missing. */
.stats-cred{margin-top:44px}
.stats-cred .stat b{font-size:clamp(17px,1.85vw,23px);letter-spacing:-.02em}

.prog-more{text-align:center}
.prog-more h3{margin-bottom:12px}
.prog-more p{max-width:86ch;margin-left:auto;margin-right:auto}

/* v1.7.3: history block runs a wider measure than the default section head and
   holds two paragraphs, so the second one needs its own leading. */
.sec-head.lede-wide .lede{max-width:77ch}
.sec-head .lede + .lede{margin-top:1.05em}

/* v1.7.6: the centred value heading is two spans, but .sec-head caps the block
   at 64ch and the first span sits right on that boundary in Archivo, so it
   broke to three lines on some machines and two on others. The block is
   unconstrained here and the spans do not wrap on desktop, which makes two
   lines structural instead of a coincidence of font metrics. */
@media(min-width:761px){
  .sec-head-center h2 span{white-space:nowrap}
}
.sec-head-center.lede-wide .lede{max-width:77ch}

/* v1.9.0: FAQ list. One column, because these are read rather than scanned, and
   a long measure beats a narrow one when the answer carries numbers. */
.faqs{display:grid;gap:1px;background:var(--line-l);border:1px solid var(--line-l);
  border-radius:var(--r-lg);overflow:hidden;margin-top:8px}
.faq{background:var(--paper);padding:30px 34px;transition:background .25s}
.faq:hover{background:#FAFCFE}
.faq h3{font-size:19px;margin-bottom:10px;max-width:70ch}
.faq p{color:var(--steel);font-size:15px;max-width:96ch}
@media(max-width:600px){.faq{padding:24px 22px}.faq h3{font-size:17px}}