/* ---------- desktop ---------- */
nav.main .kst-dd{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
nav.main .kst-dd>a{display:inline-flex;align-items:center;gap:.34em;cursor:pointer}
nav.main .kst-dd:hover>button,nav.main .kst-dd.open>a{color:var(--ink)}
nav.main .kst-caret{width:.38em;height:.38em;flex:0 0 auto;margin-top:-.15em;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;border-radius:1px;transform:rotate(45deg);transition:transform .18s ease}
nav.main .kst-dd.open .kst-caret{transform:rotate(-135deg);margin-top:.08em}

nav.main .kst-menu{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:17rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 20px 44px -18px rgba(13,20,36,.34);
  padding:14px;z-index:1200;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
/* An invisible bridge across the 16px gap. Without it the pointer leaves
   .kst-dd on the way down to the items and the panel closes under the cursor. */
nav.main .kst-menu::before{content:'';position:absolute;left:-10px;right:-10px;top:-24px;height:24px}
nav.main .kst-dd.open .kst-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
nav.main .kst-menu-h{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin:2px 4px 10px;
}
nav.main .kst-menu-h::after{content:'';display:block;height:1px;background:var(--line);margin-top:9px}
nav.main .kst-menu a{
  display:block;padding:10px 11px;border:0;border-radius:9px;
  text-decoration:none;font-size:15px;font-weight:500;line-height:1.35;
  color:var(--ink);white-space:nowrap;
}
nav.main .kst-menu a small{
  display:block;font-size:12.5px;font-weight:400;color:var(--muted);
  margin-top:2px;white-space:normal;
}
nav.main .kst-menu a:hover,nav.main .kst-menu a:focus-visible{
  background:#F1F5FF;color:var(--blue);outline:none;
}
nav.main .kst-menu a:hover small{color:var(--blue)}

/* ---------- phone: the panel becomes ordinary nav rows ----------
   The collapsed menu is a plain white sheet of full-width rows. A floating
   card inside it looks wrong and, as the first attempt proved, fights the
   site's own rules. So the three items are rendered as rows with the SAME
   metrics as Home/Services/Work, just indented. */
@media (max-width:940px){
  nav.main .kst-dd{display:block;width:100%}
  nav.main .kst-dd>a{
    width:100%;justify-content:space-between;text-align:left;
    padding:15px 2px;border-bottom:1px solid var(--line);
    font-size:16px;font-weight:500;color:var(--muted);
  }
  nav.main .kst-dd.open>a{color:var(--blue)}
  nav.main .kst-menu{
    position:static;transform:none;display:none;
    opacity:1;visibility:visible;pointer-events:auto;
    background:none;border:0;border-radius:0;box-shadow:none;
    min-width:0;margin:0;padding:0;
  }
  nav.main .kst-menu::before{display:none}
  /* .kst-dd.open .kst-menu is more specific than the media rule above, so the
     desktop translateX(-50%) survived and pushed the rows off the left edge. */
  nav.main .kst-dd .kst-menu,nav.main .kst-dd.open .kst-menu{
    position:static!important;transform:none!important;
    left:auto!important;right:auto!important;top:auto!important;
  }
  nav.main .kst-dd.open .kst-menu{display:block!important}
  nav.main .kst-menu-h{display:none}
  nav.main .kst-menu a{
    /* !important because the site's own nav.main a rule is equally specific
       and appears later in the sheet */
    display:block!important;opacity:1!important;visibility:visible!important;
    pointer-events:auto!important;transform:none!important;
    padding:15px 2px 15px 20px!important;
    border-bottom:1px solid var(--line)!important;border-radius:0!important;
    font-size:16px!important;font-weight:500!important;
    color:var(--muted)!important;background:none!important;
    white-space:normal!important;
  }
  nav.main .kst-menu a:active{color:var(--blue)!important}
  nav.main .kst-menu a small{display:none}
}
/* ---------- phone: the proof band was five full-height rows on a handset ---------- */
@media (max-width:600px){
  .proof{padding:26px 0 32px!important}
  .proof-stats{grid-template-columns:repeat(2,1fr)!important}
  .pstat{padding:15px 14px!important;border-top:0!important}
  .pstat::before{display:none!important}
  .pstat:nth-child(even){border-left:1px solid rgba(255,255,255,.2)!important}
  .pstat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)!important}
  .pstat:last-child{grid-column:1 / -1}
  .pn{font-size:21px!important}
  .pl{font-size:12px!important;margin-top:4px!important}
  .proof-trust li{padding:13px 14px!important;gap:11px!important}
  .pt-ic{width:28px!important;height:28px!important;border-radius:8px!important}
  .pt-ic .ic{width:14px!important;height:14px!important}
  .proof-trust b{font-size:13.5px!important;margin-bottom:1px!important}
  .proof-trust li>span:last-child{font-size:12px!important;line-height:1.45!important}
}

/* Persistent action bar for the core business. This document is ~2 MB of
   single page; someone 60% down it has no way to act without scrolling back.
   It hides once the partner-programme block starts, so it can never collide
   with that section's own fixed bar. */
.kbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy);color:#fff;
  border-top:3px solid var(--blue);transform:translateY(120%);transition:transform .28s ease;
  padding:11px 0}
.kbar.on{transform:none}
.kbar-in{max-width:var(--container,1160px);margin:0 auto;padding:0 24px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.kbar-txt{font-size:14px;color:rgba(255,255,255,.82);flex:1;min-width:190px;line-height:1.45}
.kbar-txt b{color:#fff;font-weight:600}
.kbar .btn{padding:9px 15px;font-size:13.5px}
.kbar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32);background:transparent}
.kbar .btn-ghost:hover{border-color:#fff}
.kbar-x{background:none;border:0;color:rgba(255,255,255,.5);font-size:20px;line-height:1;
  cursor:pointer;padding:4px 6px}
.kbar-x:hover{color:#fff}
@media(max-width:640px){.kbar-txt{display:none}.kbar .btn{flex:1;text-align:center}}
@media (prefers-reduced-motion: reduce){.kbar{transition:none}}