/* APEX (UK) LIMITED — stylesheet
   Light palette on :root; dark redefines tokens only. */
/* ============================================================
   APEX (UK) LIMITED — design tokens
   Light is the base palette; dark redefines tokens only.
   ============================================================ */
:root{
  --ink:        #0C1120;
  --ink-2:      #39415A;
  --ink-3:      #6C7490;
  --ground:     #F3F4F8;
  --ground-alt: #E9EBF2;
  --surface:    #FFFFFF;
  --surface-2:  #F7F8FC;
  --line:       #DADEE9;
  --line-2:     #BFC5D6;
  --brand:      #1F3BE0;
  --brand-2:    #152BAE;
  --brand-soft: #E5E9FF;
  --on-brand:   #FFFFFF;
  --copper:     #B4622F;
  --copper-soft:#F8EBE1;
  --good:       #0F6B54;
  --warn:       #96610A;
  --shadow-sm:  0 1px 2px rgba(12,17,32,.06);
  --shadow-md:  0 10px 30px -18px rgba(12,17,32,.35);
  --shadow-lg:  0 30px 70px -40px rgba(12,17,32,.45);
  --grid-line:  rgba(12,17,32,.055);
  --scrim:      rgba(243,244,248,.82);

  --r:   3px;
  --r-2: 5px;
  --f-display: clamp(2.15rem, 4.4vw, 3.65rem);
  --f-h1:      clamp(2.1rem, 4vw, 3.1rem);
  --f-h2:      clamp(1.65rem, 2.7vw, 2.35rem);
  --f-h3:      clamp(1.16rem, 1.5vw, 1.35rem);
  --f-body:    1.0rem;
  --f-sm:      .9rem;
  --f-xs:      .78rem;
  --f-mono:    .72rem;
  --maxw: 1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --sect: clamp(4.5rem, 8vw, 7.5rem);
  --hdr: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:        #E7EAF4;
    --ink-2:      #A9B0C6;
    --ink-3:      #767E97;
    --ground:     #080B14;
    --ground-alt: #0D1120;
    --surface:    #10141F;   /* was #111524 */
    --surface-2:  #161B2B;
    --line:       #232941;
    --line-2:     #363E5C;
    --brand:      #7D93FF;
    --brand-2:    #A5B5FF;
    --brand-soft: #171E42;
    --on-brand:   #060913;
    --copper:     #E0A177;
    --copper-soft:#2A1C12;
    --good:       #4FC0A0;
    --warn:       #E0AE5B;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
    --shadow-md:  0 10px 30px -18px rgba(0,0,0,.85);
    --shadow-lg:  0 30px 70px -40px rgba(0,0,0,.95);
    --grid-line:  rgba(231,234,244,.055);
    --scrim:      rgba(8,11,20,.82);
  }
}
:root[data-theme="dark"]{
  --ink:        #E7EAF4;
  --ink-2:      #A9B0C6;
  --ink-3:      #767E97;
  --ground:     #080B14;
  --ground-alt: #0D1120;
  --surface:    #10141F;
  --surface-2:  #161B2B;
  --line:       #232941;
  --line-2:     #363E5C;
  --brand:      #7D93FF;
  --brand-2:    #A5B5FF;
  --brand-soft: #171E42;
  --on-brand:   #060913;
  --copper:     #E0A177;
  --copper-soft:#2A1C12;
  --good:       #4FC0A0;
  --warn:       #E0AE5B;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow-md:  0 10px 30px -18px rgba(0,0,0,.85);
  --shadow-lg:  0 30px 70px -40px rgba(0,0,0,.95);
  --grid-line:  rgba(231,234,244,.055);
  --scrim:      rgba(8,11,20,.82);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--f-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:Archivo,"Public Sans",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.06;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
h3,h4{ font-weight:700; letter-spacing:-.018em; line-height:1.22; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--brand); color:var(--on-brand); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--f-mono);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:.62rem;
}
.eyebrow::before{
  content:""; width:20px; height:1px; background:var(--brand); flex:none;
}
.eyebrow.plain::before{ display:none; }
.lede{ color:var(--ink-2); font-size:clamp(1.02rem,1.35vw,1.17rem); max-width:62ch; }
.muted{ color:var(--ink-3); }
.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.78rem 1.35rem;
  font-size:var(--f-sm); font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--brand); color:var(--on-brand); }
.btn-primary:hover{ background:var(--brand-2); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn-sm{ padding:.55rem 1rem; font-size:var(--f-xs); }
.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--f-sm); font-weight:600; color:var(--brand);
}
.link-arrow svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- blueprint rails ---------- */
.rails{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 78%,transparent);
}

/* ============================================================
   HEADER + MEGA MENU
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:80;
  background:var(--scrim);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.ticker{
  border-bottom:1px solid var(--line);
  background:var(--ground-alt);
  font-family:"IBM Plex Mono",monospace;
  font-size:var(--f-mono); letter-spacing:.1em; color:var(--ink-3);
}
.ticker .wrap{ display:flex; justify-content:space-between; gap:1rem; padding-block:.5rem; }
.ticker b{ color:var(--ink-2); font-weight:500; }
.ticker .dot{ width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block;margin-right:.45rem;
  box-shadow:0 0 0 0 currentColor; animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(15,107,84,.5)} 70%{box-shadow:0 0 0 7px rgba(15,107,84,0)} 100%{box-shadow:0 0 0 0 rgba(15,107,84,0)} }
.ticker-right{ display:none; }
@media(min-width:860px){ .ticker-right{ display:block; } }

.nav-bar{ display:flex; align-items:center; gap:1.5rem; height:var(--hdr); }
.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-mark path{ transition:fill .3s var(--ease); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:Archivo,sans-serif; font-weight:800; font-size:1.06rem;
  letter-spacing:-.02em; text-transform:uppercase;
}
.brand-name span{ color:var(--brand); }
.brand-sub{
  font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.28rem;
}
.nav-main{ display:none; margin-left:auto; align-items:center; gap:.15rem; height:100%; }
@media(min-width:1080px){ .nav-main{ display:flex; } }
.nav-item{ position:relative; height:100%; display:flex; align-items:center; }
.nav-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .8rem; font-size:.92rem; font-weight:500; color:var(--ink-2);
  border-radius:var(--r); background:none; border:0; cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover,.nav-item.open .nav-link,.nav-link.current{ color:var(--ink); background:var(--ground-alt); }
.nav-link.current{ color:var(--brand); }
.nav-link .chev{ width:11px;height:11px;transition:transform .25s var(--ease); color:var(--ink-3); }
.nav-item.open .chev{ transform:rotate(180deg); }

.mega{
  position:absolute; top:calc(100% - 1px); left:50%; transform:translate(-50%,8px);
  width:min(920px,88vw);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  box-shadow:var(--shadow-lg);
  padding:1.4rem; opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item.wide .mega{ width:min(1080px,92vw); }
.nav-item.open .mega{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr 300px; gap:1.4rem; }
.mega-grid.two{ grid-template-columns:1fr 300px; }
.mega-col{ display:flex; flex-direction:column; gap:.2rem; }
.mega-head{
  font-family:"IBM Plex Mono",monospace; font-size:var(--f-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); padding:.2rem .6rem .55rem;
}
.mega-link{
  display:grid; grid-template-columns:26px 1fr; gap:.7rem; align-items:start;
  padding:.6rem; border-radius:var(--r);
  transition:background .18s var(--ease);
}
.mega-link:hover{ background:var(--surface-2); }
.mega-link .mi{ color:var(--brand); margin-top:.15rem; }
.mega-link .mi svg{ width:17px; height:17px; }
.mega-link b{ display:block; font-size:.9rem; font-weight:600; letter-spacing:-.01em; }
.mega-link small{ display:block; font-size:.775rem; color:var(--ink-3); line-height:1.45; margin-top:.1rem; }
.mega-feature{
  background:var(--brand); color:var(--on-brand); border-radius:var(--r);
  padding:1.15rem; display:flex; flex-direction:column; gap:.6rem; justify-content:space-between;
  position:relative; overflow:hidden;
}
.mega-feature .eyebrow{ color:inherit; opacity:.7; }
.mega-feature .eyebrow::before{ background:currentColor; }
.mega-feature h4{ color:inherit; font-size:1.15rem; }
.mega-feature p{ font-size:.83rem; opacity:.85; }
.mega-feature .fx{
  position:absolute; right:-30px; bottom:-30px; width:150px; height:150px; opacity:.14;
}

/* header actions */
.nav-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
@media(min-width:1080px){ .nav-actions{ margin-left:.6rem; } }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; color:var(--ink-2);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover{ border-color:var(--line-2); color:var(--ink); background:var(--surface-2); }
.icon-btn svg{ width:17px; height:17px; }
.theme-btn .moon{ display:none; }
:root[data-theme="dark"] .theme-btn .moon{ display:block; }
:root[data-theme="dark"] .theme-btn .sun{ display:none; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .moon{ display:block; }
  :root:not([data-theme="light"]) .theme-btn .sun{ display:none; }
}
.nav-cta{ display:none; }
@media(min-width:720px){ .nav-cta{ display:inline-flex; } }
.burger{ display:grid; }
@media(min-width:1080px){ .burger{ display:none; } }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:95; background:var(--ground);
  transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; height:var(--hdr); padding-inline:var(--gutter); border-bottom:1px solid var(--line); }
.drawer-body{ padding:1.2rem var(--gutter) 3rem; display:flex; flex-direction:column; gap:.2rem; }
.acc-btn{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:none; border:0; border-bottom:1px solid var(--line);
  padding:1.05rem .2rem; font-family:Archivo,sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em; cursor:pointer; text-align:left;
}
.acc-btn svg{ width:14px; height:14px; color:var(--ink-3); transition:transform .25s var(--ease); }
.acc.open .acc-btn svg{ transform:rotate(45deg); color:var(--brand); }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.acc.open .acc-panel{ grid-template-rows:1fr; }
.acc-panel > div{ overflow:hidden; }
.acc-panel a{ display:block; padding:.62rem .2rem .62rem 1rem; font-size:.94rem; color:var(--ink-2); border-left:1px solid var(--line); margin-left:.2rem; }
.acc-panel a:hover{ color:var(--brand); border-color:var(--brand); }

/* ============================================================
   PAGE / ROUTER
   ============================================================ */
.page{ display:none; }
.page.active{ display:block; animation:pageIn .5s var(--ease) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

section{ position:relative; }
.sect{ padding-block:var(--sect); }
.sect-tight{ padding-block:clamp(3rem,5vw,4.5rem); }
.band{ background:var(--ground-alt); border-block:1px solid var(--line); }
.band-ink{ background:var(--ink); color:var(--ground); border-block:1px solid var(--ink); }
.band-ink h2,.band-ink h3{ color:var(--ground); }

.sect-head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2.8rem; }
.sect-head .row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.4rem; }
.sect-head h2{ font-size:var(--f-h2); max-width:20ch; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.hero-inner{ position:relative; z-index:2; padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3rem,5vw,4.5rem); }
.hero-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; }
@media(min-width:1000px){ .hero-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); align-items:end; } }
.hero h1{ font-size:var(--f-display); margin-block:1.1rem 1.35rem; }
.hero h1 .accent{
  background:linear-gradient(100deg,var(--brand),var(--copper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.hero-side{ display:flex; flex-direction:column; gap:1rem; }
.spec-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  padding:1.25rem; box-shadow:var(--shadow-md);
}
.spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--line); font-size:var(--f-sm); }
.spec-row:last-child{ border-bottom:0; }
.spec-row dt{ color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:var(--f-mono); letter-spacing:.1em; text-transform:uppercase; }
.spec-row dd{ margin:0; font-weight:600; text-align:right; }

/* logo marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--surface); position:relative; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--surface),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--surface),transparent); }
.marquee-track{ display:flex; gap:3.2rem; width:max-content; padding-block:1.1rem; animation:slide 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee-item{
  font-family:Archivo,sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.01em;
  color:var(--ink-3); white-space:nowrap; display:flex; align-items:center; gap:.5rem;
  transition:color .25s var(--ease);
}
.marquee-item:hover{ color:var(--ink); }
.marquee-item i{ font-style:normal; color:var(--brand); font-size:.7rem; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden; }
@media(min-width:820px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--surface); padding:1.5rem 1.3rem; display:flex; flex-direction:column; gap:.3rem; position:relative; }
.stat::after{ content:""; position:absolute; left:0; top:0; width:2px; height:0; background:var(--brand); transition:height .5s var(--ease); }
.stat:hover::after{ height:100%; }
.stat .num{ font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.stat .num .suf{ color:var(--brand); }
.stat .lbl{ font-size:var(--f-xs); color:var(--ink-3); letter-spacing:.01em; }

/* ---------- service cards ---------- */
.card-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden; }
@media(min-width:700px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1060px){ .card-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{
  background:var(--surface); padding:1.9rem 1.6rem 1.7rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.85rem; min-height:270px;
  transition:background .3s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.svc:hover::before{ opacity:1; }
.svc:hover{ background:var(--surface-2); }
.svc-idx{
  position:absolute; top:1.1rem; right:1.3rem;
  font-family:"IBM Plex Mono",monospace; font-size:var(--f-mono); color:var(--ink-3);
  letter-spacing:.1em;
}
.svc-ico{
  width:44px; height:44px; border:1px solid var(--line-2); border-radius:var(--r);
  display:grid; place-items:center; color:var(--brand); flex:none;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .4s var(--ease);
  position:relative; z-index:1;
}
.svc:hover .svc-ico{ border-color:var(--brand); background:var(--brand-soft); transform:translateY(-2px); }
.svc-ico svg{ width:21px; height:21px; }
.svc h3{ font-size:var(--f-h3); position:relative; z-index:1; }
.svc p{ font-size:var(--f-sm); color:var(--ink-2); position:relative; z-index:1; }
.svc .tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:.6rem; position:relative; z-index:1; }
.tag{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:2px; padding:.2rem .45rem;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.svc:hover .tag{ border-color:var(--line-2); color:var(--ink-2); }
.svc-go{
  position:absolute; right:1.3rem; bottom:1.4rem; color:var(--brand);
  opacity:0; transform:translate(-6px,6px); transition:all .32s var(--ease);
}
.svc:hover .svc-go{ opacity:1; transform:none; }
.svc-go svg{ width:16px; height:16px; }

/* ---------- split feature ---------- */
.split{ display:grid; gap:clamp(2rem,4vw,3.6rem); align-items:center; }
@media(min-width:960px){ .split{ grid-template-columns:1fr 1fr; } }
.split.rev > :first-child{ order:2; }
@media(min-width:960px){ .split.form-split{ grid-template-columns:1.4fr .85fr; align-items:start; } }
@media(max-width:959px){ .split.rev > :first-child{ order:0; } }
.checks{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.6rem; }
.check{ display:grid; grid-template-columns:20px 1fr; gap:.7rem; font-size:var(--f-sm); color:var(--ink-2); }
.check svg{ width:15px; height:15px; color:var(--brand); margin-top:.28rem; }
.check b{ color:var(--ink); font-weight:600; }

/* ---------- process timeline ---------- */
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden; }
@media(min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--surface); padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; position:relative; }
.step .n{
  font-family:"IBM Plex Mono",monospace; font-size:var(--f-mono); letter-spacing:.14em;
  color:var(--brand); border:1px solid var(--brand-soft); background:var(--brand-soft);
  width:fit-content; padding:.2rem .5rem; border-radius:2px;
}
.step h4{ font-size:1.02rem; }
.step p{ font-size:var(--f-xs); color:var(--ink-3); }

/* ---------- case studies ---------- */
.work-grid{ display:grid; gap:1.4rem; }
@media(min-width:900px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
.work{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2);
  padding:1.7rem; display:flex; flex-direction:column; gap:1rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.work:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.work-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.25rem .55rem; border-radius:2px; background:var(--brand-soft); color:var(--brand); white-space:nowrap;
}
.chip.copper{ background:var(--copper-soft); color:var(--copper); }
.work h3{ font-size:1.3rem; }
.work-res{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:auto; }
.work-res div{ background:var(--surface-2); padding:.85rem .8rem; }
.work-res .v{ font-family:Archivo,sans-serif; font-weight:800; font-size:1.35rem; letter-spacing:-.03em; color:var(--brand); font-variant-numeric:tabular-nums; }
.work-res .k{ font-size:.68rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }

/* ---------- careers ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.6rem; }
.filter{
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  padding:.45rem .9rem; font-size:var(--f-xs); font-weight:500; color:var(--ink-2); cursor:pointer;
  transition:all .22s var(--ease);
}
.filter:hover{ border-color:var(--line-2); color:var(--ink); }
.filter.on{ background:var(--ink); color:var(--ground); border-color:var(--ink); }
.jobs{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden; }
.job{
  background:var(--surface); padding:1.3rem 1.5rem;
  display:grid; gap:.9rem; align-items:center; grid-template-columns:1fr;
  transition:background .25s var(--ease);
}
@media(min-width:840px){ .job{ grid-template-columns:1fr auto auto; gap:1.6rem; } }
.job:hover{ background:var(--surface-2); }
.job h4{ font-size:1.06rem; margin-bottom:.25rem; }
.job .meta{ display:flex; flex-wrap:wrap; gap:.9rem; font-size:var(--f-xs); color:var(--ink-3); }
.job .meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.job .meta svg{ width:12px; height:12px; }
.job .pay{ font-family:"IBM Plex Mono",monospace; font-size:var(--f-sm); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.job.hide{ display:none; }
.empty-note{ background:var(--surface); padding:2.5rem 1.5rem; text-align:center; color:var(--ink-3); font-size:var(--f-sm); }

/* ---------- form ---------- */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow-md); }
.field-grid{ display:grid; gap:1.05rem; }
@media(min-width:680px){ .field-grid.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:var(--f-xs); font-weight:600; letter-spacing:.02em; }
.field label .req{ color:var(--copper); }
.field input,.field select,.field textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:.72rem .85rem; font-size:var(--f-sm); width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input[type="checkbox"]{ padding:0; height:16px; accent-color:var(--brand); background:none; border-radius:2px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); background:var(--surface); }
.field .err{ font-size:.72rem; color:var(--copper); min-height:0; display:none; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--copper); }
.field.invalid .err{ display:block; }
.form-note{ font-size:var(--f-xs); color:var(--ink-3); }
.form-ok{
  display:none; gap:.7rem; align-items:flex-start;
  border:1px solid var(--good); background:color-mix(in srgb,var(--good) 10%,transparent);
  border-radius:var(--r); padding:1rem 1.1rem; font-size:var(--f-sm); color:var(--ink);
}
.form-ok.show{ display:flex; }
.form-ok svg{ width:18px; height:18px; color:var(--good); flex:none; margin-top:.15rem; }

/* ---------- contact rail ---------- */
.contact-rail{ display:flex; flex-direction:column; gap:1.2rem; }
.contact-block{ border-top:1px solid var(--line); padding-top:1.1rem; }
.contact-block h4{ font-size:.95rem; margin-bottom:.4rem; }
.contact-block p,.contact-block address{ font-size:var(--f-sm); color:var(--ink-2); font-style:normal; }

/* ---------- accordion (FAQ) ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem .2rem; text-align:left; cursor:pointer;
  font-family:Archivo,sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:-.015em;
}
.faq-q svg{ width:14px; height:14px; color:var(--ink-3); transition:transform .28s var(--ease); flex:none; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); color:var(--brand); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); border-bottom:1px solid var(--line); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ font-size:var(--f-sm); color:var(--ink-2); padding:.2rem .2rem 1.15rem; max-width:70ch; }

/* ---------- CTA banner ---------- */
/* The CTA is a deliberate inverse block: it stays dark in both themes,
   so every colour inside it is fixed rather than token-derived. */
.cta{ background:#0A0E1C; color:#E8EBF5; border-radius:var(--r-2); padding:clamp(2rem,4vw,3.2rem); position:relative; overflow:hidden; }
.cta h2{ color:#FFFFFF; font-size:var(--f-h2); max-width:18ch; }
.cta p{ color:rgba(232,235,245,.66); max-width:52ch; margin-top:.9rem; }
.cta .eyebrow{ color:rgba(232,235,245,.55); }
.cta .eyebrow::before{ background:#7D93FF; }
.cta .btn-primary{ background:#2743E8; color:#FFFFFF; }
.cta .btn-primary:hover{ background:#3E57F6; }
.cta .btn-ghost{ border-color:rgba(232,235,245,.3); color:#E8EBF5; }
.cta .btn-ghost:hover{ border-color:#E8EBF5; color:#FFFFFF; }
.cta-fx{ position:absolute; right:-8%; top:-30%; width:min(460px,52%); opacity:.18; color:#7D93FF; pointer-events:none; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--ground-alt); margin-top:0; }
.foot-grid{ display:grid; gap:2.2rem; padding-block:clamp(3rem,5vw,4rem) 2rem; }
@media(min-width:880px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.foot-col h5{ font-family:"IBM Plex Mono",monospace; font-size:var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1rem; font-weight:500; }
.foot-col a{ display:block; font-size:var(--f-sm); color:var(--ink-2); padding:.28rem 0; transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--brand); }
.foot-about p{ font-size:var(--f-sm); color:var(--ink-2); max-width:38ch; margin-top:1rem; }
.foot-legal{ border-top:1px solid var(--line); padding-block:1.3rem; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; font-size:var(--f-xs); color:var(--ink-3); }
.foot-legal .links{ display:flex; flex-wrap:wrap; gap:1.2rem; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}
/* scroll to top */
.totop{ position:fixed; right:18px; bottom:18px; z-index:70; opacity:0; pointer-events:none; transform:translateY(8px); transition:all .3s var(--ease); background:var(--surface); box-shadow:var(--shadow-md); }
.totop.show{ opacity:1; pointer-events:auto; transform:none; }
.skip{ position:absolute; left:-9999px; }
.legal-doc h2{ font-size:var(--f-h3); margin:2.4rem 0 .8rem; scroll-margin-top:100px; }
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc p, .legal-doc li{ font-size:var(--f-sm); color:var(--ink-2); max-width:72ch; }
.legal-doc ul{ margin:.6rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.legal-doc .note{ border:1px solid var(--copper); background:var(--copper-soft); border-radius:var(--r); padding:1rem 1.15rem; font-size:var(--f-sm); color:var(--ink); }
.toc{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:2.4rem; }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--brand); color:var(--on-brand); padding:.6rem 1rem; border-radius:var(--r); }

/* ---------- multi-page additions ---------- */
.page{ display:block; }                 /* no router: each file is one page */
.nav-link[aria-current="page"],
.nav-link[aria-current="true"],
.nav-link.current{ color:var(--brand); background:var(--ground-alt); }
[data-current] b, .acc-panel a[data-current], .foot-col a[data-current],
.acc-btn[data-current]{ color:var(--brand); }
.mega-link[data-current]{ background:var(--surface-2); }
section[id]{ scroll-margin-top:104px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:var(--f-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:1.4rem; }
.crumbs a{ color:var(--ink-3); }
.crumbs a:hover{ color:var(--brand); }
.crumbs span[aria-current]{ color:var(--ink-2); }
.legal-doc h2{ font-size:var(--f-h3); margin:2.4rem 0 .8rem; scroll-margin-top:100px; }
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc p, .legal-doc li{ font-size:var(--f-sm); color:var(--ink-2); max-width:72ch; }
.legal-doc ul{ margin:.6rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.legal-doc .note{ border:1px solid var(--copper); background:var(--copper-soft);
  border-radius:var(--r); padding:1rem 1.15rem; font-size:var(--f-sm); color:var(--ink); }
.toc{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:2.4rem; }