/* index.html - extracted from inline <style> blocks, original document order preserved */

/* --- block --- */
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:dark;
  --o:#ED671C;--p:#B71CED;
  --pp:rgba(151,71,255,.62);--pd:rgba(208,20,255,.71);
  --line:rgba(255,255,255,.12);
  /* the empty middle channel the dart flies through */
  --channel:clamp(280px,32vw,500px);
}
html{scroll-behavior:smooth}
body{
  background:#000;color:#fff;
  font-family:'Satoshi',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* layering, same as the sample draft:
   hero / approach / clients / cta sit BEHIND the dart,
   card sections + footer sit IN FRONT */
section,header.H{position:relative;z-index:0}
.WD,.PR,.CL,.CT{z-index:2} /* text always reads over the dart */

/* ===== DART CANVAS — fixed, the page is built around it ===== */
#cv{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1;pointer-events:none}
/* journey progress — fills as the dart flies */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:400}
/* ambient stage light — the dart always flies through it */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 38% at 50% 52%,rgba(183,28,237,.09),rgba(237,103,28,.025) 55%,transparent 72%)}
::selection{background:rgba(183,28,237,.45);color:#fff}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:70px;padding:0 56px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .4s,border-color .4s;
}
.nav.sc{
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(40px) saturate(160%);-webkit-backdrop-filter:blur(40px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-logo img{height:30px}
.nav-center{
  display:flex;align-items:center;gap:2px;
  background:rgba(20,20,23,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:5px 7px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav-center > a{
  font-size:14px;font-weight:500;padding:9px 17px;border-radius:8px;
  color:rgba(255,255,255,.7);transition:color .2s,background .2s;
}
.nav-center > a:hover,.nav-center > a.active{color:#fff;background:rgba(255,255,255,.08)}

/* SERVICES DROPDOWN */
.svc-drop{position:relative}
.svc-trigger{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;padding:9px 17px;border-radius:8px;
  color:rgba(255,255,255,.7);transition:color .2s,background .2s;
  cursor:pointer;user-select:none;
}
.svc-trigger::after{content:'▾';font-size:13px;opacity:.7;transition:transform .25s}
.svc-drop:hover .svc-trigger{color:#fff;background:rgba(255,255,255,.07)}
.svc-drop:hover .svc-trigger::after{transform:rotate(180deg)}
.svc-menu{
  position:absolute;top:calc(100% + 10px);left:-16px;
  display:none;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 22px 18px;
  box-shadow:0 24px 72px rgba(0,0,0,.85);
  width:580px;
}
.svc-drop:hover .svc-menu{display:block}
.svc-drop::after{content:'';position:absolute;left:-16px;right:-16px;top:100%;height:16px}
.svc-drop.open .svc-menu{display:block}
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.svc-menu a{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;padding:9px 13px;border-radius:9px;
  color:rgba(255,255,255,.62);transition:color .2s,background .2s;
}
.svc-menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.svc-menu a.cur{color:var(--purple2);background:rgba(183,28,237,.08)}
.svc-menu a::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.2);transition:background .2s;
}
.svc-menu a:hover::before,.svc-menu a.cur::before{background:var(--grad);background-size:100%;background-clip:unset}
.svc-tailored{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.svc-tailored-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.48);display:block;margin-bottom:10px;padding-left:13px;
}
.svc-tailored-links{display:flex;gap:4px}

.nav-cta{
  font-size:var(--t-btn);font-weight:600;padding:11px 22px;border-radius:10px;
  border:none;color:#fff;cursor:pointer;
  background:linear-gradient(95deg,#a31ce8 0%,#c41fd4 100%);
  transition:box-shadow .25s,transform .2s,background .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-cta .cta-ico{font-size:var(--t-btn);line-height:1}
.nav-cta:hover{background:linear-gradient(95deg,#b228f5 0%,#d52ae6 100%);transform:translateY(-1px)}
@media(max-width:1024px){.nav-center{display:none}.nav{padding:0 22px}}

/* ===== shared text styles — Dart design language ===== */
.sl{ /* minimal eyebrow — index · section */
  font-size:var(--t-body);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pp);
  display:inline-flex;align-items:center;gap:14px;
}
.sl::before,.sl::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--p),var(--o));opacity:.7}
.sh{ /* big gradient heading — Satoshi Bold, tight */
  font-size:var(--t-h2);font-weight:700;letter-spacing:-.035em;line-height:1.08;
  padding-bottom:.1em;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.ct{ /* card title */
  font-size:clamp(20px,1.8vw,25px);font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.18em;
}
/* ===== the two standard text gradients =====
   1. mono  — white → grey (.sh, .ct, hero)
   2. brand — violet → purple → magenta → orange  */
:root{--gtext:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%)}
.g-brand{
  background:var(--gtext);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}

/* ===== HERO ===== */
.H{
  min-height:118vh; /* tight runway — Why Dart arrives right after the logos */
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:35vh; /* headline and dart both centred in the viewport */
}
.Hbg{display:none}
.Hc{position:relative;padding:0 40px}
.H h1{
  font-size:var(--t-h1);font-weight:500;line-height:1.22;letter-spacing:-.05em;
  padding-left:.2em;padding-right:.2em; /* never clip the last glyph */
  padding-bottom:.18em; /* room for descenders — gradient fill only paints inside the box */
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.Heye{font-size:13px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:22px}
/* WWDC-style cursor glow on the hero headline */
.hglow{position:relative;cursor:default}
.hglow .lit{
  position:absolute;inset:0;
  color:#fff;-webkit-text-fill-color:#fff;background:none;
  text-shadow:
    0 0 16px rgba(255,255,255,.6),
    0 0 44px rgba(206,140,255,.55),
    0 0 96px rgba(237,103,28,.3);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.5) 45%,transparent 72%);
  mask-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.5) 45%,transparent 72%);
}
.hglow.on .lit{opacity:1}
.Htrust{font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.48);text-align:center;margin-bottom:4px}
.Hscroll{
  position:absolute;bottom:30px;left:48px;
  font-size:13px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.48);
  display:flex;align-items:center;gap:12px;
}
.Hscroll::after{content:'';width:44px;height:1px;background:linear-gradient(90deg,var(--p),transparent);animation:hsc 2s ease-in-out infinite}
@keyframes hsc{0%,100%{transform:scaleX(.4);transform-origin:0 50%;opacity:.4}50%{transform:scaleX(1);transform-origin:0 50%;opacity:1}}
.Hchannel{height:19vh;width:100%;pointer-events:none}
.Hlo{position:relative;z-index:2;width:100%;overflow:hidden;padding:30px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.Hlt{display:flex;gap:110px;align-items:center;width:max-content;animation:losc 38s linear infinite}
.Hlt img{max-height:32px;max-width:130px;height:auto;width:auto;opacity:.8}
@keyframes losc{to{transform:translateX(-50%)}}

/* ===== WHY DART — the 4 points of the dart, locking in around the crosshair ===== */
.WD{min-height:100vh;display:flex;align-items:center;padding:11vh 0 4vh;position:relative;overflow:hidden}
.WDbg{display:none}
.WDi{max-width:1380px;margin:0 auto;position:relative;z-index:1;padding:0 40px;width:100%}
.WDh{text-align:center;margin-bottom:4vh}
.WD .sh{font-size:var(--t-h2)}
.WG{
  display:grid;grid-template-columns:1fr var(--channel) 1fr;
  row-gap:clamp(32px,8vh,80px);align-items:center;position:relative;
}
.WG .gap{grid-column:2}
.wc{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:6px;max-width:400px;
  opacity:0;transition:opacity .45s ease,transform .5s ease,border-color .3s,background .3s;
}
.wc .ct{font-size:clamp(18px,1.6vw,21px)}
.wc p{font-size:var(--t-body)}
.wc:hover{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(183,28,237,.5)}
.wc p{font-size:var(--t-body);font-weight:400;line-height:1.5;color:rgba(255,255,255,.78)}
.wc.r{justify-self:end}
.wc{position:relative}
.wc .ic{
  width:46px;height:46px;border-radius:11px;flex:none;margin-bottom:4px;
  background:rgba(183,28,237,.12);border:1px solid rgba(183,28,237,.28);
  display:flex;align-items:center;justify-content:center;
}
.wc .ic img{width:30px;height:30px;object-fit:contain}
/* the four points start at the dart's centre and lock outward into place */
.wc.q1{transform:translate(70px,46px) scale(.88)}
.wc.q2{transform:translate(-70px,46px) scale(.88)}
.wc.q3{transform:translate(70px,-46px) scale(.88)}
.wc.q4{transform:translate(-70px,-46px) scale(.88)}
.WD.lock .wc{opacity:1;transform:none;transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
.WD.lock .wc.q1{transition-delay:.18s,.18s,0s,0s}
.WD.lock .wc.q2{transition-delay:.30s,.30s,0s,0s}
.WD.lock .wc.q3{transition-delay:.42s,.42s,0s,0s}
.WD.lock .wc.q4{transition-delay:.54s,.54s,0s,0s}
/* target lock: lines + rings radiating from the crosshair — BEHIND the dart */
.tgtfix{position:fixed;left:50%;top:50%;width:0;height:0;z-index:0;pointer-events:none}
.tgtfix .ln{
  position:absolute;left:0;top:0;height:1px;width:clamp(150px,17vw,250px);
  background:linear-gradient(90deg,rgba(183,28,237,.75),transparent);
  transform-origin:0 50%;transform:rotate(var(--a)) scaleX(0);
  transition:transform .5s ease;
}
.tgtfix.lock .ln{transform:rotate(var(--a)) scaleX(1);transition:transform .7s cubic-bezier(.16,1,.3,1) .1s}
.tgtfix .ring{
  position:absolute;left:0;top:0;border:1px solid rgba(183,28,237,.45);border-radius:50%;
  box-shadow:0 0 34px rgba(183,28,237,.18),inset 0 0 34px rgba(183,28,237,.12);
  transform:translate(-50%,-50%) scale(.45);opacity:0;
  transition:transform .6s ease,opacity .6s ease;
}
.tgtfix .r1{width:clamp(120px,13vw,190px);height:clamp(120px,13vw,190px)}
.tgtfix .r2{width:clamp(210px,24vw,350px);height:clamp(210px,24vw,350px);border-color:rgba(183,28,237,.22)}
.tgtfix.lock .ring{transform:translate(-50%,-50%) scale(1);opacity:1;transition:transform .9s cubic-bezier(.16,1,.3,1) .1s,opacity .7s ease .1s}
.tgtfix.lock .r2{transition-delay:.25s,.25s}

/* ===== OUR APPROACH — scroll-locked reveal around the horizontal dart ===== */
.AP{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:12vh 0 6vh;text-align:center;position:relative;overflow:hidden;
}
.chl{position:absolute;left:-90px;top:14%;width:280px;opacity:.85;z-index:0;pointer-events:none;will-change:transform}
.chr{position:absolute;right:-70px;bottom:6%;width:430px;opacity:.8;z-index:0;pointer-events:none;will-change:transform}
.MQ{overflow:hidden;white-space:nowrap;margin-bottom:7vh;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.MQt{display:inline-flex;animation:losc 30s linear infinite}
.MQt span{
  font-size:clamp(64px,8.5vw,120px);font-weight:700;letter-spacing:-.02em;padding:0 24px;line-height:1.25;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
}
.APh{position:relative;z-index:2;text-align:center;margin-top:6vh;padding:0 40px}
.APchannel{height:30vh;pointer-events:none;position:relative}
/* flight path — pinned to the dart's exact axis (viewport centre during the pin) */
.path{
  position:absolute;left:50%;top:50vh;transform:translateX(-50%);
  width:min(78vw,1100px);pointer-events:none;z-index:1;
}
.path .dash{
  height:1px;width:100%;
  background-image:linear-gradient(90deg,rgba(255,255,255,.35) 0 14px,transparent 14px 28px);
  background-size:28px 1px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  transform-origin:0 50%;
}
.path .ways{display:flex;justify-content:space-between;margin-top:46px;padding:0 6%}
.way{display:flex;flex-direction:column;align-items:center;gap:8px}
.way::before{content:'';width:7px;height:7px;border-radius:50%;background:linear-gradient(100deg,var(--p),var(--o));box-shadow:0 0 14px rgba(183,28,237,.8)}
.way b{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.way span{font-size:var(--t-body);color:rgba(255,255,255,.5)}
.APb{max-width:820px;margin:0 auto;position:relative;z-index:2;padding:0 40px}
.APb strong{ /* editorial pull-quote */
  display:block;font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;
  line-height:1.22;margin-bottom:14px;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.APb p{font-size:var(--t-body);font-weight:400;line-height:1.5;color:rgba(255,255,255,.5);max-width:50ch;margin:0 auto}

/* ===== PROCESS — cards around the exploded dart ===== */
.PR{padding:16vh 0;position:relative;overflow:hidden}
/* animated silk-light background — morphing SVG ribbons, like flowing fabric */
.PRbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.PRbg svg{position:absolute;inset:0;width:100%;height:100%}
.PR{min-height:100vh;display:flex;align-items:center;padding:11vh 0 5vh}
.PRi{max-width:1380px;margin:0 auto;position:relative;z-index:1;padding:0 40px;width:100%}
.PRh{text-align:center;margin-bottom:3vh}
.PR .sh{font-size:var(--t-h2)}
.PRh .sub{font-size:clamp(15px,1.5vw,19px);font-weight:500;margin-top:10px;color:rgba(255,255,255,.6)}
.PRchannel{height:38vh;pointer-events:none}
/* the dart comes apart — each card is one of its four parts, in order */
.PRrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prc{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:20px 20px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:7px;position:relative;
  transition:border-color .3s;
}
/* light beams — rounded-corner connectors from each piece into its card */
.plines{position:absolute;left:0;top:0;width:100%;height:100vh;pointer-events:none;z-index:0;overflow:visible}
.plines .bg2{ /* the plasma blade */
  fill:none;stroke:rgba(183,28,237,.9);stroke-width:7;stroke-linecap:round;
  filter:blur(4px) drop-shadow(0 0 14px rgba(183,28,237,.95)) drop-shadow(0 0 30px rgba(183,28,237,.5));
  stroke-dasharray:1;stroke-dashoffset:1;
}
.plines .bp{ /* white-hot core */
  fill:none;stroke:#F2E3FF;stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(225,170,255,.95));
  stroke-dasharray:1;stroke-dashoffset:1;
}
.plines .bf{ /* energy flowing along the line */
  fill:none;stroke:rgba(232,200,255,.9);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:4 15;animation:bfl 1s linear infinite;
}
@keyframes bfl{to{stroke-dashoffset:-19}}
.plines .bd{fill:#B71CED;filter:drop-shadow(0 0 9px rgba(183,28,237,1)) drop-shadow(0 0 20px rgba(183,28,237,.6))}
.PR.lock .prc:nth-child(1){transition-delay:.1s}
.PR.lock .prc:nth-child(2){transition-delay:.25s}
.PR.lock .prc:nth-child(3){transition-delay:.4s}
.PR.lock .prc:nth-child(4){transition-delay:.55s}
.prc:hover{border-color:rgba(183,28,237,.45)}
.prc .part{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--p),var(--o));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.prc .tt{font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.3px;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.prc p{font-size:var(--t-body);font-weight:400;line-height:1.5;color:rgba(255,255,255,.7)}

/* ===== CAPABILITIES — the full arsenal, from the deck ===== */
.CP{padding:13vh 0;position:relative;z-index:2}
.CPi{max-width:1380px;margin:0 auto;padding:0 40px}
.CPh{text-align:center;margin-bottom:7vh}
.CPg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cpc{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .3s,background .3s,transform .3s;
}
.cpc:hover{background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border-color:rgba(183,28,237,.5);transform:translateY(-4px)}
.cpc .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cpc .top img{width:46px;height:46px;object-fit:contain;flex:none}
.cpc h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.3px;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.cpc p{font-size:var(--t-body);font-weight:400;line-height:1.5;color:rgba(255,255,255,.7)}

/* ===== AI — Dart Intelligence ===== */
.AI{padding:14vh 0;position:relative;z-index:2}
.AIi{max-width:1380px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:center}
.AIi .sh{font-size:var(--t-h2)}
.AIi>div:first-child p{font-size:var(--t-body);line-height:1.75;color:rgba(255,255,255,.5);margin-top:18px;max-width:44ch}
.AIg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aic{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .3s,transform .3s;
}
.aic:hover{border-color:rgba(183,28,237,.45);transform:translateY(-3px)}
.aic img{width:38px;height:38px;object-fit:contain;margin-bottom:12px}
.aic b{display:block;font-size:var(--t-h3);font-weight:700;letter-spacing:-.2px;margin-bottom:5px}
.aic p{font-size:var(--t-body);line-height:1.55;color:rgba(255,255,255,.55)}

/* ===== VS — Dart vs typical agencies ===== */
.VS{padding:14vh 0;position:relative;z-index:2}
.VSi{max-width:1080px;margin:0 auto;padding:0 40px}
.VSh{text-align:center;margin-bottom:7vh}
.VSh .sub{font-size:var(--t-body);color:rgba(255,255,255,.5);margin-top:12px}
.vsrow{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:0;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);padding:17px 0;
  transition:background .3s ease;
}
.vsrow:not(.head):hover{background:rgba(255,255,255,.022)}
.vsrow.head{border-bottom:1px solid rgba(255,255,255,.16);padding:10px 0 14px}
.vsrow.head span{font-size:13px!important;line-height:1.3!important;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.vsrow.head span:first-child{padding-right:20px}
.vsrow.head span:last-child{padding-left:22px}
.vsrow.head .dartcol{color:#fff;-webkit-text-fill-color:#fff;background:none}
.vsrow .cap{font-size:var(--t-body);font-weight:500;color:rgba(255,255,255,.65);padding-right:20px}
.vsrow .dartcol{
  position:relative;font-size:var(--t-body);font-weight:700;padding:0 22px;
  background:linear-gradient(100deg,#C956F5,var(--o));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.vsrow .them{font-size:var(--t-body);color:rgba(255,255,255,.48);padding-left:22px}
.vlab{display:none}
.vswrap{position:relative;z-index:1}
.vswrap::before{ /* solid panel behind the Dart column, no backdrop blur so the mascot cannot smear */
  content:'';position:absolute;top:-12px;bottom:-12px;left:29.41%;width:41.18%;z-index:0;
  background:linear-gradient(180deg,rgba(34,17,52,.96),rgba(16,10,24,.96));
  border:1px solid rgba(183,28,237,.28);border-radius:16px;pointer-events:none;
  box-shadow:0 0 70px rgba(183,28,237,.10);
}

/* ===== CLIENTS — wall of fame flanking the dart ===== */
.CL{padding:14vh 0;position:relative}
.CLh{text-align:center;margin-bottom:5vh;padding:0 40px}
.CLstats{display:flex;justify-content:center;gap:14px;margin-bottom:7vh;padding:0 40px;flex-wrap:wrap}
.CLstats div{
  text-align:center;min-width:170px;padding:18px 28px;border-radius:14px;
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.CLstats b{
  display:block;font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-1px;line-height:1.15;
  background:linear-gradient(100deg,var(--p),var(--o));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.CLstats span{font-size:var(--t-body);color:rgba(255,255,255,.55)}
.CLg{
  max-width:1380px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr var(--channel) 1fr;align-items:center;
}
.CLc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,5vh,64px) clamp(24px,3vw,48px)}
.tile{display:flex;align-items:center;justify-content:center}
.tile img{max-height:38px;max-width:110px;height:auto;width:auto;opacity:.8;transition:opacity .25s,transform .25s}
.tile:hover img{opacity:1;transform:scale(1.06)}

/* ===== CTA — the strike ===== */
.CT{padding:14vh 0 0;text-align:center;position:relative;overflow:hidden}
.CTgl{position:absolute;left:0;top:0;bottom:30%;width:42%;
  background:url('/vendor/neon-left.webp') left center/contain no-repeat;opacity:.5;pointer-events:none}
.CTgr{position:absolute;right:0;top:0;bottom:30%;width:42%;
  background:url('/vendor/neon-right.webp') right center/contain no-repeat;opacity:.5;pointer-events:none}
.CTi{position:relative;z-index:2;padding:0 40px}
.CTd{font-size:var(--t-body);font-weight:500;color:rgba(255,255,255,.55);max-width:540px;margin:20px auto 32px;line-height:1.6}
.cbtn{
  display:inline-block;padding:15px 34px;
  background:#1c1c1c;border:1px solid #505050;border-radius:8px;
  font-size:18px;font-weight:500;color:#fff;
  transition:all .3s;cursor:pointer;
}
.cbtn:hover{background:#2a2a2a;border-color:rgba(183,28,237,.5);}
.CTchannel{height:100vh;pointer-events:none}
.CTbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.CTbtns .cbtn:not(.ghost){
  background:linear-gradient(-84deg,rgba(151,71,255,1) -20%,rgba(105,49,178,.9) 8%,#0a0a0a 45%,#0a0a0a 60%,rgba(208,20,255,.85) 160%),#141414;
  border-color:rgba(110,110,110,.5);
}
.CTbtns .cbtn:not(.ghost):hover{}
.cbtn.ghost{background:transparent;border-color:rgba(255,255,255,.25)}
.cbtn.ghost:hover{border-color:rgba(183,28,237,.5)}
/* impact shockwave — fires the moment the dart strikes the board */
.shock{position:fixed;left:50%;top:62%;z-index:0;pointer-events:none}
.shock span{
  position:absolute;left:0;top:0;border:1px solid rgba(183,28,237,.55);border-radius:50%;
  width:10px;height:10px;transform:translate(-50%,-50%) scale(0);opacity:0;
}
.shock.boom span{animation:boom 1.1s cubic-bezier(.1,.7,.3,1) forwards}
.shock.boom span:nth-child(2){animation-delay:.12s;border-color:rgba(237,103,28,.4)}
.shock.boom span:nth-child(3){animation-delay:.24s;border-color:rgba(183,28,237,.25)}
@keyframes boom{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  100%{transform:translate(-50%,-50%) scale(60);opacity:0}
}

/* ===== FOOTER — the board, after the throw ===== */
.F{
  position:relative;z-index:3;overflow:hidden;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(183,28,237,.6),rgba(237,103,28,.5),transparent) 1;
  padding:48px 60px 22px;background:#070708;
}
.F::after{ /* faint dartboard rings in the corner */
  content:'';position:absolute;right:-180px;bottom:-180px;width:560px;height:560px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,rgba(183,28,237,.1) 0 1px,transparent 1px 56px);
  pointer-events:none;
}
.Fin{position:relative;z-index:1;max-width:1380px;margin:0 auto}
.Fstate{
  font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  max-width:34ch;padding-bottom:.14em;padding-bottom:.18em;
}
.Fstate .grad{background:var(--gtext);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
/* offices — slim column with the 3D country maps as small marks */
.offmini{display:flex;gap:10px;align-items:center;padding:6px 0}
.offmini img{width:26px;height:auto;flex:none;filter:drop-shadow(0 4px 12px rgba(183,28,237,.4))}
.offmini b{display:block;font-size:13px;font-weight:700;letter-spacing:.02em}
.offmini a{display:block;font-size:13px;color:rgba(255,255,255,.48);transition:color .2s}
.offmini a:hover{color:#fff}
.Fgrid{display:grid;grid-template-columns:1.3fr .7fr .9fr .9fr 1.2fr;gap:40px;margin-top:42px}
.Fbrand img{height:24px;margin-bottom:14px}
.Fbrand p{font-size:13px;color:rgba(255,255,255,.48);max-width:28ch;line-height:1.6}
.Fsoc{display:flex;gap:8px;margin-top:18px}
.Fsoc a{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);
  transition:all .25s;
}
.Fsoc a:hover{border-color:rgba(183,28,237,.55);color:#fff;transform:translateY(-2px)}
.Fsoc svg{width:14px;height:14px;fill:currentColor;display:block}
.Fcol h4,.Fcol h3{font-size:var(--t-h3);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:14px}
.Fcol a{display:block;font-size:13px;padding:4px 0;color:rgba(255,255,255,.65);transition:color .2s,padding-left .25s}
.Fcol a:hover{color:#fff;padding-left:6px}
.Fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.48)}

/* ===== scroll reveals ===== */
.rv{opacity:0;transform:translateY(34px)}

@media(max-width:1024px){
  .N{padding:14px 22px}
}
@media(max-width:860px){
  :root{--channel:0px}
  .H{min-height:150vh}
  .Hchannel{height:62vh}
  .WG{grid-template-columns:1fr;row-gap:24px}
  .WG .gap{display:none}
  .tgtfix{display:none}
  .wc.q1,.wc.q2,.wc.q3,.wc.q4{transform:translateY(26px) scale(1)}
  .WD{min-height:auto;padding:14vh 0}
  .wc,.wc.r,.prc,.prc.r{justify-self:stretch;max-width:none}
  .APchannel{height:50vh}
  .PRrow{grid-template-columns:1fr;gap:14px}
  .prc{opacity:1;transform:none}
  .prc::before{display:none}
  .PR{min-height:auto;padding:14vh 0}
  .PRchannel{height:34vh}
  .path{display:none}
  .CLstats{flex-wrap:wrap;gap:28px}
  .Fgrid{grid-template-columns:1fr;gap:36px}
  .Foffices{grid-template-columns:1fr}
  .AIi{grid-template-columns:1fr;gap:32px}
  .AIg{grid-template-columns:1fr 1fr}
  .vsrow{grid-template-columns:1fr;gap:0;text-align:left;padding:20px 0}
  .vsrow.head{display:none}
  .vsrow .cap{padding-right:0;margin-bottom:14px}
  .vsrow .dartcol{padding:0;margin-bottom:14px}
  .vsrow .them{padding:0}
  .vlab{display:block;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px}
  .vlab-d{color:#C956F5}
  .vlab-t{color:rgba(255,255,255,.55)}
  .vswrap::before{display:none}
  .CPg{grid-template-columns:1fr}
  .CLg{grid-template-columns:1fr;row-gap:44px}
  .CLmid{height:48vh}
  .CTchannel{height:92vh}
  .F{padding:60px 28px 28px}
}
@media(prefers-reduced-motion:reduce){
  .Hlt,.MQt{animation:none}
  .rv{opacity:1;transform:none}
}

/* inline section links into the deeper pages */
.sec-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:#d9a9f5;font-size:var(--t-btn);font-weight:500;text-decoration:none;transition:color .2s,gap .2s}
.sec-link:hover{color:#fff;gap:11px}
.sec-links{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:26px}
}

/* --- dart-footer-size --- */
/* ===== footer text at body size ===== */
.F .Fbrand p,.F .Fcol a,.F .offmini b,.F .offmini a,.F .Fbot{font-size:var(--dart-body,18px)!important;line-height:1.35!important}
.F .Fcol h4,.F .Fcol h3{font-size:14px!important}
.F .offmini img{width:32px!important}

/* --- dart-typography --- */
/* ===== TYPE SCALE (single source, fluid): H1 70 | H2 60 | H3 25 | Body 18 | Caption 14 | Button 18 ===== */
:root{--t-h1:clamp(42px,5.2vw,70px);--t-h2:clamp(32px,4.4vw,60px);--t-h3:clamp(20px,1.85vw,25px);--t-sub:clamp(17px,1.35vw,18px);--t-body:clamp(17px,1.3vw,18px);--t-btn:clamp(16px,1.3vw,18px);--t-caption:clamp(15px,1.2vw,16px);--dart-body:clamp(17px,1.3vw,18px);--dart-body-sm:clamp(17px,1.3vw,18px)}
body{font-size:var(--t-body)!important}
.bp-hero h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.08!important}
.AIi .sh, .PR .sh, .WD .sh, .sh{font-size:var(--t-h2)!important;font-weight:500!important;line-height:1.12!important}
h3, h4, .bp-art h2, .bp-art h3{font-size:var(--t-h3)!important;font-weight:600!important;line-height:1.25!important}
.abf-front b, .abf-back b, .bd-step b, .ai-hf-card b, .ai-step b, .ai-svc-card b, .aic b, .bd-wcard b, .cmf-face b, .prf-face b, .sif-face b, .wdf-face b, .pm-wrong-card b, .wd-wcard b, .ab-member b, .pstep b, .seg-top b, .ct-loc b{font-size:var(--t-h3)!important;font-weight:600!important;line-height:1.25!important}
.AIi>div:first-child p, .APb p, .CLstats span, .CTd, .VSh .sub, .aic p, .bd-price-sub, .bd-proc-sub, .bl-hero-sub, .cpc p, .cta-tagline, .faq-sub, .fs-hero-sub, .hero-sub, .lead, .prc p, .sec-sub, .sl, .vnums-sub, .vsrow .cap, .vsrow .dartcol, .vsrow .them, .way span, .wc p{font-size:var(--t-body)!important;line-height:1.3!important}
.VSh .sub, .bd-price-sub, .bd-proc-sub, .bl-hero-sub, .bp-hero .excerpt, .cr-form .sub, .ct-every .sub, .cta-tagline, .faq-sub, .fs-hero-sub, .hero-sub, .lead, .sec-sub, .vnums-sub{font-size:var(--t-sub)!important;line-height:1.5!important}
.nav-cta, .btn-p, .btn-o, .form-btn, .fs-btn, .bd-btn, .cr-btn, .cm-btn, .bl-btn, .bd-plan .cta, .nav-cta .cta-ico, .form-btn .btn-ico, .bl-pager button, .fs-btn.ghost{font-size:var(--t-btn)!important;font-weight:500!important}
.sec-kicker, .kicker, .eyebrow, figcaption, .bp-fig figcaption, .bp-cat, .bl-card .date, .bp-hero .date, .cover .site, .svc-tailored-label, .F .Fcol h4,.F .Fcol h3, .tp-txt, .abf-hint, .dstack-label, .stack-label, .sec-label, .stat .lab, .camp-stats span, .bull-tools span, .trev-ctag, .logos-label, .tag, .chips a{font-size:var(--t-caption)!important}
/* ===== DESIGN SYSTEM - tokens, radius, buttons (single source of truth) ===== */
:root{
  --c-bg:#000;
  --c-orange:#ED671C;
  --c-magenta:#B71CED;
  --c-violet:#8B5CF6;
  --c-pink:#E91E8C;
  --grad-brand:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  --grad-btn:linear-gradient(95deg,#a31ce8 0%,#c41fd4 100%);
  --grad-btn-hover:linear-gradient(95deg,#b228f5 0%,#d52ae6 100%);
  --tx-1:#fff;
  --tx-2:rgba(255,255,255,.65);
  --tx-3:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.14);
  --r-nav:12px;
  --r-nav-link:8px;
  --r-btn:10px;
  --r-card:16px;
  --r-panel:20px;
}
/* Every button shares one radius */
.btn-p, .btn-o, .form-btn, .fs-btn, .fs-btn.ghost, .bd-btn, .cr-btn, .ct-submit, .cm-btn,
.bl-btn, .bd-plan .cta, .nav-cta, .bl-pager button{border-radius:var(--r-btn)!important}
/* Section CTA buttons */
.btn-p, .btn-o, .bd-btn, .cm-btn, .fs-btn, .fs-btn.ghost, .bl-btn, .bd-plan .cta{padding:14px 30px!important}
/* Form submit buttons */
.form-btn, .ct-submit, .cr-btn{padding:15px!important}
/* Nav CTA */
.nav-cta{padding:11px 22px!important}
@media(max-width:1024px){.nav-cta{padding:9px 16px!important}}
/* Primary button - one gradient style, one hover behaviour */
.btn-p, .form-btn, .ct-submit, .cr-btn, .bd-btn, .cm-btn, .bl-btn, .bd-plan .cta{
  background:var(--grad-btn)!important;color:var(--tx-1)!important;border:none!important;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease!important;
}
.btn-p:hover, .form-btn:hover, .ct-submit:hover, .cr-btn:hover, .bd-btn:hover, .cm-btn:hover,
.bl-btn:hover, .bd-plan .cta:hover, .nav-cta:hover{
  background:var(--grad-btn-hover)!important;transform:translateY(-1px)!important;
  box-shadow:0 8px 24px rgba(183,28,237,.28)!important;
}
/* Secondary button - one outline style, matching hover */
.btn-o, .fs-btn.ghost{
  background:transparent!important;color:var(--tx-1)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  transition:background .25s ease,border-color .25s ease,transform .2s ease!important;
}
.btn-o:hover, .fs-btn.ghost:hover{
  background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.40)!important;
  transform:translateY(-1px)!important;
}

/* --- nav-mobile-fix --- */
/* ===== Mobile navigation (hamburger + drawer) ===== */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(20,20,23,.72);cursor:pointer;padding:0;position:relative;z-index:901;flex:none}
.nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:#fff;border-radius:2px;transition:transform .3s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mob{position:fixed;inset:0;z-index:890;background:rgba(8,6,12,.98);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:flex;flex-direction:column;padding:92px 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s ease,transform .4s ease,visibility .4s}
.nav-mob.open{opacity:1;visibility:visible;transform:none}
.nav-mob-links{display:flex;flex-direction:column}
.nav-mob-links>a,.nm-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:inherit;font-size:19px;font-weight:500;color:#fff;text-decoration:none;padding:15px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:none;cursor:pointer;text-align:left}
.nav-mob-links>a:hover,.nm-trigger:hover{color:#fff}
.nm-trigger .chev{font-size:14px;color:rgba(255,255,255,.5);transition:transform .3s}
.nm-group.open .nm-trigger .chev{transform:rotate(180deg)}
.nm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.nm-group.open .nm-sub{grid-template-rows:1fr}
.nm-sub-in{overflow:hidden;min-height:0}
.nm-sub a{display:block;font-size:15px;color:rgba(255,255,255,.62);text-decoration:none;padding:10px 6px 10px 18px}
.nm-sub a:hover{color:#fff}
.nm-sub-label{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48);padding:14px 6px 4px 18px}
.nav-mob .nav-cta{display:inline-flex;justify-content:center;width:100%;margin-top:28px}
body.nav-locked{overflow:hidden}
@media(max-width:1024px){.nav-burger{display:flex}.nav-logo{position:relative;z-index:901}.nav>.nav-cta{display:none}}
@media(min-width:1025px){.nav-mob{display:none!important}.nav-burger{display:none!important}}
@media(prefers-reduced-motion:reduce){.nav-mob,.nav-burger span,.nm-sub,.nm-trigger .chev{transition:none}}

/* --- a11y-focus --- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #c41fd4;outline-offset:3px}

/* --- dart-mobile-fix --- */
/* Dart Marketing - mobile responsiveness fixes.
   Scoped to mobile / tablet media queries only.
   Rendering above 1180px is unchanged. */
/* clients logo wall: 3 tiles x .tile img{max-width:110px} + 2 x 24px gaps =
   378px inside a 240px content box, which widened the whole layout viewport
   to 418px. Two-up below 520px matches the .cta-p-logos treatment. */
@media(max-width:520px){
  .CLc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .CLc .tile img{max-width:100%}
}
/* Dart Intelligence cards stayed 2-up on the narrowest phones: a card needs
   160px against a 113px track. */
@media(max-width:520px){
  .AIg{grid-template-columns:1fr}
}
/* touch targets: transparent hit area only, no visual change */
@media(max-width:860px){
  .nav-logo{position:relative}
  .nav-logo::after{content:"";position:absolute;top:-7px;right:0;bottom:-7px;left:0}
  .Fsoc a{position:relative}
  .Fsoc a::after{content:"";position:absolute;top:-6px;right:-4px;bottom:-6px;left:-4px;border-radius:50%}
}
/* secondary text CTAs sat 1-3px under the 24px minimum; hit area only */
@media(max-width:860px){
  .Fbot a{position:relative}
  .Fbot a::after{content:"";position:absolute;top:-3px;right:0;bottom:-3px;left:0}
}

/* --- dart-landmark-css --- */
.dart-skip{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;z-index:100000}
.dart-skip:focus,.dart-skip:focus-visible{left:14px;top:14px;width:auto;height:auto;overflow:visible;white-space:normal;padding:12px 20px;background:#fff;color:#000;border-radius:10px;font-family:'Satoshi',sans-serif;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;outline:3px solid #fff;outline-offset:2px;box-shadow:0 8px 28px rgba(0,0,0,.6)}
main{display:block}
main:focus{outline:none}

/* --- dart-overflow-css --- */
/* #clients: the 1fr side tracks carry an automatic min-content floor set by the
   3-up logo grids inside them, so between 861px and ~1150px the grid was wider
   than the viewport (159px of real horizontal scroll at 861px). minmax(0,1fr)
   removes that floor. Scoped above 860px so the single-column mobile rule is
   untouched. Section height, document height and logo sizes are unchanged at
   every width; the only difference is that the two side tracks become symmetric. */
@media(min-width:861px){
  .CLg{grid-template-columns:minmax(0,1fr) var(--channel) minmax(0,1fr)}
  .CLc{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Gradient text is clipped to the glyph box, so tight leading and negative
   letter-spacing cut descenders and the last glyph. Pad the box and pull the
   padding back with a matching negative margin so layout is unchanged. */
h1,h2,h3,.g-text,.g-brand,.grad{}
[class*="hero"] h1,[class*="hero"] h2,.sec-title,.sh,.g-text,.g-brand,.grad{
  padding-bottom:.16em;margin-bottom:-.16em;
  padding-right:.06em;
}

/* The nav CTA was taller than the nav row it sits in. */
.nav-cta{padding:9px 18px!important;font-size:var(--t-btn)!important;line-height:1.25!important}
@media(max-width:1024px){.nav-cta{padding:8px 14px!important}}

/* The "Everything Your Brand Needs To Win." subtitle was hardcoded inline at
   14.5px, half the weight of every other section subtitle on the page. It now
   uses .sub, pinned here to the same 19px and 60% white the Dart Process and
   Dart vs Typical Agencies subtitles render at. */
.CPh .sub{font-size:clamp(15px,1.5vw,19px);color:rgba(255,255,255,.6);margin-top:12px}

/* On a phone the dart canvas kept travelling past the hero and painted over
   the comparison rows, the stats and the closing CTA. Dropping it behind the
   content layer keeps it visible through the transparent sections while text
   always wins. Desktop, where the dart is pinned to the hero, is untouched. */
@media(max-width:820px){ #cv{z-index:-1} }

/* Footer region icons: each map has its own aspect ratio, so at a fixed width
   they rendered at four different heights and never lined up. They also came
   out near-black on a black footer, and the ones whose artwork runs to the
   edge of the file looked clipped. One fixed box with object-fit gives them a
   common size and centre, and the brightness lift makes them legible. The
   dartboard rings sat behind this column, so they move clear of it. */
.F .offmini img{width:32px!important;height:26px;object-fit:contain;object-position:center;
  filter:brightness(2.15) saturate(1.15) drop-shadow(0 3px 10px rgba(183,28,237,.45))}
.F .offmini{align-items:center;gap:12px}
.F::after{right:-300px;bottom:-250px}

/* The wall is a three-column grid per side. At ten logos a side the tenth sits
   alone at the start of a fourth row, which reads as a mistake; centre it. */
.CLc > .tile:last-child:nth-child(3n+1){grid-column:2}

/* Phone: the dart is only welcome in the empty lanes. index.html toggles this
   class as the viewport centre enters and leaves one. */
@media(max-width:820px){
  #cv{transition:opacity .28s ease}
  body.dart-hidden #cv{opacity:0}
}