/* ==========================================================================
   THEME-PROOFING — added in 1.0.1.
   Floka's style.css loads after this file and declares h1/h2/h3, img, button,
   input, select and textarea at element level. Those rules were winning, which
   turned the page white, replaced IBM Plex Mono with Inter and re-styled the
   whole form. Every selector in this file is now scoped to .v22-page, and the
   block below explicitly resets the properties Floka sets that the design does
   not restate. Do not remove it.
   ========================================================================== */
body.v22-page :where(h1,h2,h3,h4,h5,h6){color:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;clear:none;text-transform:none;text-shadow:none}
body.v22-page :where(p,li,span,a,strong,b,em,i,small,figcaption,label,blockquote,td,th){color:inherit;text-transform:none;text-shadow:none}
body.v22-page :where(img,svg,video,canvas,picture){object-fit:initial;vertical-align:initial;transition:none;border:0;box-shadow:none;filter:none}
body.v22-page button,body.v22-page input,body.v22-page select,body.v22-page textarea{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;background:none;border:0;border-radius:0;box-shadow:none;height:auto;min-height:0;padding:0;margin:0;transition:none;text-align:inherit;line-height:inherit;text-indent:0}
body.v22-page button{cursor:pointer;position:static;overflow:visible;z-index:auto;width:auto}
body.v22-page :where(ul,ol,li){white-space:normal;list-style:none}


/* ==========================================================================
   Scoped reset. Namespaced to .v22-page (set by body_class on this template
   only) so it cannot leak into the theme, and written with :where() so it
   carries no specificity — every rule below in this file still wins.
   Purpose: neutralise whatever the active theme's stylesheet declares.
   ========================================================================== */
.v22-page,.v22-page *,.v22-page *::before,.v22-page *::after{box-sizing:border-box}
.v22-page :where(h1,h2,h3,h4,h5,h6,p,figure,figcaption,blockquote,dl,dd,ul,ol,fieldset,legend,pre){
  margin:0;padding:0;border:0;font-size:inherit;font-weight:inherit}
.v22-page :where(ul,ol){list-style:none}
.v22-page :where(img,svg,video,canvas,picture){display:block;max-width:100%}
.v22-page :where(a){text-decoration:none;color:inherit;background:none;box-shadow:none}
.v22-page :where(button,input,select,textarea){
  font:inherit;color:inherit;margin:0;border-radius:0;background:none;box-shadow:none;letter-spacing:inherit}
.v22-page :where(button){cursor:pointer;border:0}
.v22-page :where(table){border-collapse:collapse}
.v22-page :where(hr){border:0}

:root{
  --void:#050505;
  --panel:#0D0E10;
  --panel-2:#131516;
  --line:#1C1F21;
  --line-2:#292D30;
  --paper:#E9E9E4;
  --ink:#F6F6F3;
  --ink-2:#A8ADA9;
  --mute:#71776F;
  --signal:#3BE081;
  --violet:109,94,248;
  --blue:59,130,246;
  --green:59,224,129;
  --col:1320px;
  --gut:clamp(20px,4vw,60px);
}
.v22-page,.v22-page *{box-sizing:border-box}
html:has(body.v22-page){scroll-behavior:smooth}
body.v22-page{
  margin:0;background:var(--void);color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html:has(body.v22-page){scroll-behavior:auto}.v22-page,.v22-page *{animation:none!important;transition:none!important}}

.v22-page .wrap{max-width:var(--col);margin:0 auto;padding-inline:var(--gut)}
.v22-page h1,.v22-page h2,.v22-page h3,.v22-page .disp{font-family:Inter,"Helvetica Neue",Arial,sans-serif;margin:0;text-wrap:balance}

.v22-page .lab{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}


/* ---------- nav ---------- */
.v22-page .nav{position:fixed;top:18px;left:0;right:0;z-index:80;display:flex;justify-content:center;padding-inline:16px;pointer-events:none}
.v22-page .nav-in{
  pointer-events:auto;width:100%;max-width:1100px;
  background:var(--paper);color:#0A0A0A;border-radius:999px;
  display:flex;align-items:center;gap:20px;
  padding:9px 9px 9px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.v22-page .brand{font-family:Inter,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;white-space:nowrap}
/* the wordmark is vector, drawn in currentColor — see #v22logo */
.v22-page .brand .mk{height:19px;width:auto;display:block;color:#0A0A0A}
@media(max-width:600px){.v22-page .brand .mk{height:17px}}

.v22-page .nav-links{display:flex;gap:26px;margin-left:auto}
.v22-page .nav-links a{
  color:#3A3D39;text-decoration:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:4px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.v22-page .nav-links a:hover,.v22-page .nav-links a:focus-visible{color:#0A0A0A;border-bottom-color:#0A0A0A;outline:none}
.v22-page .nav-cta{
  background:#0A0A0A;color:var(--paper);text-decoration:none;border-radius:999px;
  padding:12px 22px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;display:inline-flex;gap:9px;align-items:center;transition:transform .18s;
}
.v22-page .nav-cta:hover{transform:translateY(-1px)}
.v22-page .nav-links a.on{color:#0A0A0A;border-bottom-color:var(--signal)}


/* burger + mobile sheet */
.v22-page .burger{
  display:none;margin-left:auto;background:transparent;border:0;cursor:pointer;
  width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;padding:0;
}
.v22-page .burger span{display:block;width:19px;height:1.5px;background:#0A0A0A;transition:transform .28s,opacity .2s}
.v22-page .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.v22-page .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.v22-page .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.v22-page .sheet{
  position:fixed;inset:0;z-index:70;background:rgba(5,5,5,.97);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:96px var(--gut) 40px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.v22-page .sheet.open{opacity:1;visibility:visible}
.v22-page .sheet a{
  color:var(--ink);text-decoration:none;font-family:Inter,sans-serif;font-weight:700;
  font-size:clamp(30px,9vw,52px);letter-spacing:-.04em;line-height:1.28;
  display:flex;align-items:baseline;gap:16px;
}
.v22-page .sheet a span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute);letter-spacing:.16em;font-weight:400}
.v22-page .sheet a:hover,.v22-page .sheet a:focus-visible{color:var(--signal)}
.v22-page .sheet .sheet-foot{margin-top:38px;color:var(--mute);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:980px){
  .v22-page .nav-links{display:none}
  .v22-page .burger{display:flex}
  .v22-page .nav-cta{display:none}
  .v22-page .nav-in{padding:9px 9px 9px 22px}
}
@media(min-width:981px){.v22-page .sheet{display:none}}
@media(max-width:980px){body.locked.v22-page{overflow:hidden}}


/* fixed-nav scroll offset */
.v22-page section[id],.v22-page header[id]{scroll-margin-top:96px}


/* ---------- hero ---------- */
.v22-page .hero{position:relative;min-height:min(88svh,880px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.v22-page #field{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85;z-index:0}
.v22-page .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(126% 82% at 50% 38%,transparent 32%,rgba(5,5,5,.52) 68%,rgba(5,5,5,.88) 100%);
}

/* one light source: a shaft from above that pools on the horizon */
.v22-page .beam{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
/* the shaft, built as a stack of widening ellipses so it opens continuously */
.v22-page .beam::before{
  content:"";position:absolute;left:50%;top:0;width:130%;height:100%;
  transform:translateX(-50%);will-change:transform,opacity;
  background:
    radial-gradient(6.5% 22% at 50% 0%,rgba(233,253,255,.70),transparent 66%),
    radial-gradient(8.5% 22% at 50% 15%,rgba(200,243,255,.38),transparent 68%),
    radial-gradient(11% 22% at 50% 31%,rgba(166,229,255,.26),transparent 70%),
    radial-gradient(15% 22% at 50% 47%,rgba(132,212,255,.21),transparent 70%),
    radial-gradient(20% 24% at 50% 63%,rgba(110,198,255,.19),transparent 72%),
    radial-gradient(27% 26% at 50% 79%,rgba(96,186,252,.18),transparent 72%),
    radial-gradient(36% 28% at 50% 95%,rgba(92,180,250,.17),transparent 74%);
}
/* the fan where it meets the floor */
.v22-page .beam::after{
  content:"";position:absolute;left:50%;bottom:0;width:132%;height:56%;
  transform:translateX(-50%);will-change:transform,opacity;
  background:
    radial-gradient(15% 78% at 50% 106%,rgba(236,253,255,.78),transparent 60%),
    radial-gradient(21% 56% at 30% 108%,rgba(59,224,129,.60),transparent 66%),
    radial-gradient(21% 56% at 70% 108%,rgba(134,110,255,.68),transparent 66%),
    radial-gradient(33% 44% at 40% 106%,rgba(90,205,255,.42),transparent 68%),
    radial-gradient(33% 44% at 60% 106%,rgba(126,168,255,.42),transparent 68%),
    radial-gradient(60% 30% at 50% 110%,rgba(66,140,225,.32),transparent 70%);
}
.v22-page .beam .hz{
  position:absolute;left:12%;right:12%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(59,224,129,.55) 18%,
    rgba(236,252,255,.95) 50%,rgba(134,110,255,.62) 82%,transparent);
  box-shadow:0 0 26px rgba(160,220,255,.5);
}
@media(prefers-reduced-motion:no-preference){
  .v22-page .beam::before{animation:shaft 16s ease-in-out infinite}
  .v22-page .beam::after{animation:pool 21s ease-in-out infinite}
  .v22-page .beam .hz{animation:hzb 9s ease-in-out infinite}
}
/* translate + opacity only: both composite, so the blur is rasterised once
   instead of on every frame */
@keyframes shaft{0%,100%{transform:translateX(-50%);opacity:.80}
  50%{transform:translateX(-46.4%);opacity:1}}
@keyframes pool{0%,100%{transform:translateX(-50%);opacity:.84}
  50%{transform:translateX(-53.4%);opacity:1}}
@keyframes hzb{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:700px){
  /* narrower hero: keep the cone proportionally wider, but pull the bright core
     of the pool down so the meta line below still reads against it */
  .v22-page .beam::before{width:104%}
  .v22-page .beam::after{height:30%;width:112%;bottom:-3%}
  .v22-page .beam .hz{left:6%;right:6%}
  .v22-page .hero-meta{color:var(--ink-2);text-shadow:0 1px 10px rgba(5,5,5,.95),0 0 3px rgba(5,5,5,.9)}
}
.v22-page .hero-in{position:relative;z-index:3;text-align:center;padding:120px 0 40px}
.v22-page .chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-2);background:rgba(12,13,14,.6);
  border-radius:999px;padding:8px 18px;margin-bottom:44px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
.v22-page .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;box-shadow:0 0 12px var(--signal)}
@media(prefers-reduced-motion:no-preference){.v22-page .dot{animation:pulse 2.6s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.v22-page h1{
  font-size:clamp(44px,9.2vw,118px);font-weight:800;line-height:.92;letter-spacing:-.055em;
}
.v22-page h1 .sub{display:block;color:#8C8F8B}
.v22-page .hero p{
  max-width:56ch;margin:34px auto 0;color:var(--ink-2);font-size:14px;line-height:1.85;
}
.v22-page .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.v22-page .btn{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  border-radius:999px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:transform .2s,background .2s,border-color .2s;
}
.v22-page .btn-p{background:var(--paper);color:#0A0A0A;padding:8px 30px 8px 8px}
.v22-page .btn-p .ico{width:38px;height:38px;border-radius:50%;background:#0A0A0A;color:var(--paper);display:grid;place-items:center;font-size:17px;flex:none}
.v22-page .btn-p:hover{transform:translateY(-2px)}
.v22-page .btn-g{border:1px solid var(--line-2);color:var(--ink-2);padding:15px 28px}
.v22-page .btn-g:hover{border-color:var(--mute);color:var(--ink)}
.v22-page .hero-meta{
  position:absolute;bottom:26px;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.v22-page .hero-meta a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line-2)}
.v22-page .hero-meta a:hover{color:var(--ink)}


/* ---------- ambient glow: a whisper of colour, mostly neutral ---------- */
.v22-page .hero{background:
  radial-gradient(70% 54% at 22% 26%,rgba(var(--violet),.07),transparent 62%),
  radial-gradient(58% 48% at 82% 72%,rgba(var(--blue),.05),transparent 60%),
  var(--void)}
.v22-page #clients{background:radial-gradient(60% 130% at 50% 50%,rgba(255,255,255,.022),transparent 66%)}
.v22-page #work{background:radial-gradient(50% 70% at 96% 4%,rgba(255,255,255,.02),transparent 60%)}
.v22-page #data{background:
  radial-gradient(56% 80% at 6% 16%,rgba(var(--blue),.045),transparent 62%),
  radial-gradient(46% 70% at 94% 80%,rgba(var(--violet),.035),transparent 60%)}
.v22-page #targeting{background:radial-gradient(58% 80% at 88% 12%,rgba(var(--blue),.05),transparent 64%)}
.v22-page #system{background:radial-gradient(54% 86% at 88% 14%,rgba(var(--green),.035),transparent 62%)}
.v22-page #contact{background:radial-gradient(58% 86% at 12% 8%,rgba(var(--violet),.05),transparent 62%)}


/* one pill, used everywhere */
.v22-page .pill{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:rgba(20,22,24,.9);border:1px solid var(--line-2);border-radius:999px;
  padding:8px 15px;font-size:11.5px;color:var(--ink-2);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:color .2s,border-color .2s,background .2s;
}
.v22-page .pill:hover{color:var(--ink);border-color:var(--mute);background:rgba(26,29,32,.95)}
.v22-page .pill svg{width:15px;height:15px;flex:none}
.v22-page .marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:520px){.v22-page .pill{font-size:10.5px;padding:6px 12px;gap:7px}.v22-page .pill svg{width:13px;height:13px}}


/* ---------- client logos: flat + monochrome, no cards ---------- */
.v22-page .logos{padding:clamp(46px,5.2vw,64px) 0 clamp(60px,7.5vw,88px);border-top:1px solid var(--line);position:relative}
/* the hero light spills onto the surface it lands on */
.v22-page .logos::before{content:"";position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:clamp(70px,12vw,140px);
  background:radial-gradient(44% 100% at 50% 0,rgba(158,208,255,.065),transparent 72%)}
.v22-page .logos>.wrap{position:relative;z-index:1}
.v22-page .logos-head{text-align:center;margin-bottom:38px}
.v22-page .logo-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px clamp(24px,3vw,44px);
}
.v22-page .logo{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(100px,11.4vw,150px);height:58px;
  opacity:1;transition:opacity .25s,transform .25s,filter .25s;
}
.v22-page .logo:hover{opacity:1;transform:translateY(-2px)}
.v22-page .logo img{max-width:100%;max-height:var(--h,40px);width:auto;height:auto;display:block;filter:brightness(1.32) contrast(1.06)}
@media(max-width:600px){.v22-page .logo-grid{gap:26px 22px}.v22-page .logo{height:46px}
  .v22-page .logo img{max-height:calc(var(--h,40px) * .82)}}
.v22-page .logo .mark{
  font-family:Inter,sans-serif;font-weight:700;font-size:16px;letter-spacing:-.025em;
  color:var(--ink);white-space:nowrap;line-height:1.2;
}
.v22-page .logo .mark i{
  font-style:normal;font-weight:400;letter-spacing:.14em;font-size:9.5px;
  display:block;color:var(--mute);text-transform:uppercase;margin-top:3px;
}
@media(max-width:600px){.v22-page .logo .mark{font-size:14px}}



/* ---------- connected systems ---------- */
.v22-page .orbit{position:relative;width:100%;max-width:min(700px,100%);margin:0 auto;aspect-ratio:1/1;overflow:hidden}
.v22-page .orbit .rings{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.v22-page .orbit .rings circle{fill:none;vector-effect:non-scaling-stroke;stroke-width:1}
.v22-page .orbit .rings .r1{stroke:rgba(255,255,255,.10)}
.v22-page .orbit .rings .r2{stroke:rgba(255,255,255,.05);stroke-dasharray:2 10}
.v22-page .orbit .rings .r3{stroke:rgba(255,255,255,.085);stroke-dasharray:4 9}
.v22-page .orbit .rings .r4{stroke:rgba(255,255,255,.06);stroke-dasharray:3 7}
@media(prefers-reduced-motion:no-preference){
  .v22-page .orbit .rings .r2{animation:dash 30s linear infinite}
  .v22-page .orbit .rings .r3{animation:dash 22s linear infinite reverse}
  .v22-page .orbit .rings .r4{animation:dash 16s linear infinite}
}
@keyframes dash{to{stroke-dashoffset:-240}}
.v22-page .ospin{position:absolute;inset:0;z-index:2;transform-origin:50% 50%}
.v22-page .onode{position:absolute;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:no-preference){
  .v22-page .onode{animation:drift 9s ease-in-out infinite}
  .v22-page .ospin.s1{animation:spin 150s linear infinite}
  .v22-page .ospin.s1 .pill{animation:spin 150s linear infinite reverse}
  .v22-page .ospin.s2{animation:spin 110s linear infinite reverse}
  .v22-page .ospin.s2 .pill{animation:spin 110s linear infinite}
}
@keyframes drift{0%,100%{margin-top:0}50%{margin-top:-5px}}
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}
/* inward traces: every platform feeds the same core */
.v22-page .orbit .wires{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.v22-page .orbit .wires path{fill:none;stroke-linecap:round}
.v22-page .orbit .w-l{stroke:url(#v22tw);stroke-width:1.6}
.v22-page .orbit .w-g{stroke:url(#v22tp);stroke-width:8;opacity:.26;stroke-dasharray:22 150;stroke-dashoffset:14}
.v22-page .orbit .w-p{stroke:url(#v22tp);stroke-width:2.4;stroke-dasharray:7 165}
@media(prefers-reduced-motion:no-preference){
  .v22-page .orbit .w-g{animation:flowg linear infinite}
  .v22-page .orbit .w-p{animation:flowp linear infinite}
}
@media(prefers-reduced-motion:reduce){.v22-page .orbit .w-g,.v22-page .orbit .w-p{display:none}}
@keyframes flowg{from{stroke-dashoffset:14}to{stroke-dashoffset:-158}}
@keyframes flowp{from{stroke-dashoffset:0}to{stroke-dashoffset:-172}}
.v22-page .onode.o2 .pill{background:rgba(24,27,30,.92);font-size:11px;padding:7px 13px;gap:7px}
.v22-page .onode.o2 .pill svg{width:14px;height:14px}
.v22-page .core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:20%;aspect-ratio:1;border-radius:26%;
  background:radial-gradient(72% 60% at 50% 34%,rgba(150,190,255,.15),transparent 68%),
             linear-gradient(158deg,#1B1F23 0%,#0A0B0D 62%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 26px 70px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.17),0 0 100px rgba(140,180,240,.12);
  display:grid;place-items:center;overflow:hidden;
}
.v22-page .core img{position:relative;z-index:1;width:88%;height:auto;display:block;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
@media(prefers-reduced-motion:no-preference){.v22-page .core img{animation:hover 7s ease-in-out infinite}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.v22-page .aurora{
  position:absolute;left:50%;top:50%;width:46%;height:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;filter:blur(32px);opacity:.9;
  background:
    radial-gradient(52% 100% at 50% 8%,rgba(90,200,255,.30),transparent 72%),
    radial-gradient(46% 92% at 30% 62%,rgba(120,255,205,.20),transparent 72%),
    radial-gradient(46% 92% at 70% 62%,rgba(165,125,255,.26),transparent 72%);
}
@media(prefers-reduced-motion:no-preference){.v22-page .aurora{animation:breathe 12s ease-in-out infinite}}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.82}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@media(max-width:800px){
  .v22-page .orbit{max-width:min(430px,88vw)}
  .v22-page .orbit .w-l{stroke-width:2.4}.v22-page .orbit .w-g{stroke-width:10}.v22-page .orbit .w-p{stroke-width:3.6}
  .v22-page .orbit .core{width:27%}
  .v22-page .orbit .onode .pill{gap:0;padding:0;width:36px;height:36px;justify-content:center;
    border-radius:50%;font-size:0;letter-spacing:0}
  .v22-page .orbit .onode .pill svg{width:18px;height:18px}
  .v22-page .aurora{width:56%;height:56%;filter:blur(26px)}
}
@media(max-width:400px){
  .v22-page .orbit .onode .pill{width:32px;height:32px}
  .v22-page .orbit .onode .pill svg{width:16px;height:16px}
}

.v22-page .caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:56px;padding:0}
@media(max-width:980px){.v22-page .caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.v22-page .caps{grid-template-columns:1fr}}
.v22-page .caps li{list-style:none;background:#08090A;padding:26px 24px;transition:background .22s}
.v22-page .caps li:hover{background:#0E1012}
.v22-page .caps h4{font-family:Inter,sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
.v22-page .caps p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.7}


/* ---------- dashboard shot ---------- */
.v22-page .dash{margin:clamp(34px,4vw,52px) auto 0;max-width:1040px;position:relative}
.v22-page .dash img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 120px rgba(var(--violet),.10)}
.v22-page .dash figcaption{margin-top:14px;text-align:center;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
@media(max-width:600px){.v22-page .dash figcaption{font-size:8.5px;letter-spacing:.1em}}


/* ---------- targeting map ---------- */
.v22-page .map{position:relative;width:100%;max-width:1120px;margin:0 auto;aspect-ratio:967/624;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(62% 70% at 50% 46%,rgba(var(--blue),.17),transparent 74%),#07080A}
.v22-page .map .geo{position:absolute;inset:0;width:100%;height:100%}
.v22-page .map .geo path{fill:none;stroke:rgba(190,205,215,.30);stroke-width:3.4;stroke-linecap:round}
.v22-page .ring{position:absolute;width:17%;aspect-ratio:1;border-radius:50%;z-index:1;
  --rc:59,224,129;
  border:1px dashed rgba(var(--rc),.48);
  background:radial-gradient(circle,rgba(var(--rc),.10),transparent 68%);
  transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:no-preference){.v22-page .ring{animation:ring 4.6s ease-in-out infinite}}
@keyframes ring{0%,100%{transform:translate(-50%,-50%) scale(.88);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
.v22-page .ping{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 13px var(--signal);transform:translate(-50%,-50%);z-index:2}
.v22-page .ping.ec{background:#A79BFF;box-shadow:0 0 13px #A79BFF}
.v22-page .ping.gy{background:#5AC8FF;box-shadow:0 0 13px #5AC8FF}
.v22-page .ping.s{width:4px;height:4px;opacity:.55;box-shadow:0 0 8px currentColor}
.v22-page .ping.s.ev{box-shadow:0 0 8px var(--signal)}.v22-page .ping.s.ec{box-shadow:0 0 8px #A79BFF}.v22-page .ping.s.gy{box-shadow:0 0 8px #5AC8FF}
.v22-page .ping.xs{width:3px;height:3px;opacity:.32;animation:none}
.v22-page .ping.xs.ev{box-shadow:0 0 6px var(--signal)}.v22-page .ping.xs.ec{box-shadow:0 0 6px #A79BFF}.v22-page .ping.xs.gy{box-shadow:0 0 6px #5AC8FF}
@media(prefers-reduced-motion:no-preference){.v22-page .ping{animation:ping 3.2s ease-out infinite}}
@keyframes ping{0%,70%,100%{box-shadow:0 0 11px var(--signal)}35%{box-shadow:0 0 24px var(--signal)}}
.v22-page .mtag{position:absolute;z-index:3;transform:translate(-50%,-150%);
  display:inline-flex;align-items:center;gap:8px;--tint:var(--signal);
  background:rgba(16,18,20,.95);border:1px solid var(--line-2);border-radius:8px;
  padding:6px 10px;font-size:9.5px;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.65)}
.v22-page .mtag.l{transform:translate(-6%,-150%)}
.v22-page .mtag.r{transform:translate(-94%,-150%)}
.v22-page .mtag.rb{transform:translate(-94%,50%)}
.v22-page .mtag b{color:var(--ink);font-weight:600}
.v22-page .mtag.ev{--tint:var(--signal)}
.v22-page .mtag.ec{--tint:#A79BFF}
.v22-page .mtag.gy{--tint:#5AC8FF}
.v22-page .mtag .ic{width:14px;height:14px;flex:none;color:var(--tint);opacity:.95}
.v22-page .mtag em{font-style:normal;color:var(--tint)}
.v22-page .mtag.aud b::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#A79BFF;margin-right:7px;vertical-align:middle;box-shadow:0 0 7px rgba(167,155,255,.9)}
.v22-page .map-note{position:absolute;left:16px;bottom:13px;z-index:3;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.v22-page .map-note i.opt{font-style:normal}
.v22-page .map-legend{position:absolute;left:16px;bottom:13px;z-index:3;display:flex;gap:15px;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
  transform:translateY(-17px)}
.v22-page .map-legend>span{display:inline-flex;align-items:center;gap:6px}
.v22-page .map-legend .ic{width:12px;height:12px;flex:none}
.v22-page .map-legend .ev .ic{color:var(--signal)}
.v22-page .map-legend .ec .ic{color:#A79BFF}
.v22-page .map-legend .gy .ic{color:#5AC8FF}
@media(max-width:620px){.v22-page .map-legend{left:11px;bottom:8px;font-size:7.5px;gap:9px;letter-spacing:.06em;transform:none}
  .v22-page .map-note{top:10px;bottom:auto;left:11px}}
@media(max-width:520px){.v22-page .map-note{font-size:7.5px;letter-spacing:.1em;left:11px;top:10px;bottom:auto}}
@media(max-width:960px){.v22-page .mtag{font-size:11px;padding:7px 11px}}
/* below 1024 the map is too small to carry ten pins without collisions */
@media(max-width:1023px){.v22-page .map .hide-sm{display:none}}
.v22-page .mtag i.opt{font-style:normal}
@media(max-width:620px){.v22-page .mtag{font-size:8px;padding:4px 7px;border-radius:6px;letter-spacing:0}
  .v22-page .map i.opt{display:none}
  .v22-page .mtag.aud b::before{width:4px;height:4px;margin-right:5px}}


/* ---------- section frame ---------- */
.v22-page section{position:relative}
.v22-page .band{padding:clamp(80px,11vw,140px) 0;border-top:1px solid var(--line)}
.v22-page .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:40px;align-items:end;margin-bottom:64px}
@media(max-width:820px){.v22-page .head{grid-template-columns:1fr;gap:22px;margin-bottom:44px}}
.v22-page .head h2{font-size:clamp(32px,5.4vw,62px);font-weight:800;line-height:1;letter-spacing:-.045em;margin-top:16px}
.v22-page .head h2 em{font-style:normal;color:#83877F}
.v22-page .head p{margin:0;color:var(--ink-2);max-width:52ch;line-height:1.85}


/* ---------- work ---------- */
.v22-page .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.v22-page .grid{grid-template-columns:1fr}}
.v22-page .card{
  position:relative;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
  border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;overflow:hidden;transition:border-color .25s,transform .25s,background .25s;
}
.v22-page .shot{
  position:relative;margin:0;overflow:hidden;flex:none;
  height:clamp(148px,19vw,228px);border-bottom:1px solid var(--line);
  background:#08090A;
}
.v22-page .shot img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .3s}
.v22-page .card:hover .shot img{transform:scale(1.045);opacity:1}
.v22-page .shot.empty{display:grid;place-items:center;
  background:
    radial-gradient(72% 100% at 50% 0%,rgba(255,255,255,.05),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006)),#08090A;
}
.v22-page .shot.empty::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(75% 90% at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(75% 90% at 50% 40%,#000 20%,transparent 78%);
}
.v22-page .shot.empty::after{
  content:attr(data-n);position:relative;font-family:Inter,sans-serif;font-weight:800;
  font-size:clamp(46px,6vw,76px);letter-spacing:-.05em;line-height:1;color:rgba(255,255,255,.09);
}
.v22-page .shot .idx{position:absolute;left:22px;top:18px;z-index:2}
.v22-page .shot.empty .idx{display:none}
.v22-page .card-b{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1 1 auto;justify-content:flex-start}
.v22-page .card:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--panel-2)}
.v22-page .card .idx{font-size:10.5px;color:var(--mute);letter-spacing:.16em}
.v22-page .card .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.v22-page .card h3{font-size:clamp(21px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.v22-page .card .res{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:10px;
}
.v22-page .card .res b{color:var(--signal);font-weight:600}
.v22-page .card::after{
  content:"";position:absolute;right:-40%;top:-60%;width:80%;height:180%;
  background:radial-gradient(closest-side,rgba(59,224,129,.10),transparent 70%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.v22-page .card:hover::after{opacity:1}


/* ---------- system pipeline ---------- */
.v22-page .pipe{position:relative;display:grid;gap:0}
.v22-page .stage{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:32px;
  padding:36px 0;border-top:1px solid var(--line);position:relative;
}
.v22-page .stage:last-child{border-bottom:1px solid var(--line)}
@media(max-width:900px){.v22-page .stage{grid-template-columns:1fr;gap:16px;padding:28px 0}}
.v22-page .stage-n{
  font-family:Inter,sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--mute);
  display:flex;align-items:flex-start;gap:12px;
}
.v22-page .stage-n .node{
  width:11px;height:11px;border-radius:50%;border:2px solid var(--line-2);background:var(--void);
  flex:none;margin-top:4px;transition:border-color .3s,box-shadow .3s;
}
.v22-page .stage.on .stage-n .node{border-color:var(--signal);box-shadow:0 0 14px rgba(59,224,129,.6)}
.v22-page .stage h3{font-size:clamp(24px,3.4vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.v22-page .stage .cap{margin-top:10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.v22-page .stage ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;align-content:start}
.v22-page .stage li{color:var(--ink-2);font-size:13px;display:flex;gap:12px;align-items:baseline}
.v22-page .stage li::before{content:"";width:14px;height:1px;background:var(--line-2);flex:none;transform:translateY(-4px)}
.v22-page .flow{
  grid-column:2 / -1;margin-top:20px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}
@media(max-width:900px){.v22-page .flow{grid-column:1}}
.v22-page .flow b{color:var(--ink-2);font-weight:500}
.v22-page .pipe-foot{
  margin-top:60px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:16px;padding:28px 32px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
}
.v22-page .pipe-foot .lab{color:var(--ink-2);letter-spacing:.16em}


/* ---------- reviews ---------- */
.v22-page .quotes{columns:2;column-gap:14px}
@media(max-width:820px){.v22-page .quotes{columns:1}}
.v22-page .quote{
  break-inside:avoid;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
  border:1px solid var(--line);border-radius:16px;
  padding:28px;margin:0 40px 14px;  /* 40px inset matches the reviewed design */
}
.v22-page .stars{color:var(--signal);letter-spacing:.24em;font-size:11px;margin-bottom:16px}
.v22-page .quote p{margin:0 0 20px;color:var(--ink);font-size:14px;line-height:1.8}
.v22-page .quote .who{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);line-height:1.7}
.v22-page .quote .who b{color:var(--ink-2);font-weight:600;display:block}


/* ---------- contact ---------- */
.v22-page .contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
@media(max-width:900px){.v22-page .contact{grid-template-columns:1fr;gap:36px}}
.v22-page .contact h2{font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1.02;margin:16px 0 26px}
.v22-page .chan{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:34px}
.v22-page .chan a{
  background:var(--panel);padding:16px 20px;text-decoration:none;color:var(--ink-2);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;transition:background .2s,color .2s;
}
.v22-page .chan a:hover{background:var(--panel-2);color:var(--ink)}
.v22-page form{display:grid;gap:14px}
.v22-page .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.v22-page .two{grid-template-columns:1fr}}
.v22-page .f label{display:block;margin-bottom:8px}
.v22-page .f input,.v22-page .f select,.v22-page .f textarea{
  width:100%;background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:13px 14px;font-family:inherit;font-size:13px;
  transition:border-color .2s;
}
.v22-page .f textarea{min-height:120px;resize:vertical}
.v22-page .f input:focus,.v22-page .f select:focus,.v22-page .f textarea:focus{outline:none;border-color:var(--signal)}
.v22-page .f select{appearance:none;cursor:pointer}
.v22-page button[type=submit]{
  margin-top:8px;justify-self:start;border:0;cursor:pointer;font-family:inherit;
  background:var(--paper);color:#0A0A0A;border-radius:999px;
  padding:8px 30px 8px 8px;display:inline-flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:transform .2s;
}
.v22-page button[type=submit] .ico{width:38px;height:38px;border-radius:50%;background:#0A0A0A;color:var(--paper);display:grid;place-items:center;font-size:15px}
.v22-page button[type=submit]:hover{transform:translateY(-2px)}
.v22-page .note{color:var(--mute);font-size:11px;margin:4px 0 0}


/* sectors: one flowing run — a name is never split across two lines */
.v22-page .sectors{color:var(--ink-2);margin:0;line-height:1.9}
.v22-page .sectors span{white-space:nowrap}

/* ---------- footer ---------- */
.v22-page footer{border-top:1px solid var(--line);padding:44px 0 54px}
.v22-page .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.v22-page .foot .lab{color:var(--mute)}
.v22-page .wordmark{margin:44px 0 8px;line-height:0;color:var(--ink);user-select:none}
.v22-page .wordmark .mk{display:block;width:clamp(262px,68vw,860px);max-width:100%;height:auto}


/* reveal */
.v22-page .rv{opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){.v22-page .rv{opacity:1;transform:none}}
.v22-page .rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.v22-page :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}


/* ---------- WordPress integration ---------- */
body.admin-bar.v22-page .nav{top:50px}
@media screen and (max-width:782px){body.admin-bar.v22-page .nav{top:64px}}
body.admin-bar.v22-page .sheet{top:46px}
@media screen and (max-width:782px){body.admin-bar.v22-page .sheet{top:46px}}
.v22-page .formmsg{
  margin:0 0 20px;padding:14px 18px;border-radius:12px;
  font-size:12.5px;line-height:1.7;border:1px solid var(--line-2);
}
.v22-page .formmsg.ok{border-color:rgba(59,224,129,.42);background:rgba(59,224,129,.07);color:var(--ink)}
.v22-page .formmsg.ok b{color:var(--signal);font-weight:600}
.v22-page .formmsg.bad{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.07);color:var(--ink)}
.v22-page .hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}