/* modernise: static site styles. System fonts, no external requests, no inline styles (works with a strict CSP). */
:root{color-scheme:light;--blue:#000099;--blue-2:#1212b5;--blue-3:#0b0ba8;--ink:#0b0b33;--muted:#4a4f78;--ground:#f5f7fb;--line:#e3e7f4;--line-2:#dadff2;--field:#8088b0;--cyan:#5ce1e6;--cyan-tint:#e3f8f9;--navy:#00002e;--lav:#c7caff;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--edge:12px;--inset:20px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 var(--font)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul{margin:0}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--cyan)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;padding:10px 16px;border-radius:8px;background:#fff;color:var(--ink)}
.skip:focus{left:8px}

/* layout */
.page{max-width:1200px;margin:0 auto;padding:var(--edge)}
.panel{position:relative;overflow:hidden;padding:0 var(--inset);border-radius:28px;color:#fff}
/* Let the open Services menu extend below the hero; clip sideways so the decorations add no page scroll.
   A header-only panel (no .hero, e.g. 404) is too short for its decorations to stay inside, so hide them while the menu is open. */
.panel:has(.nav-menu[open]){overflow:visible;overflow-x:clip}
.panel:not(:has(.hero)):has(.nav-menu[open])::before,.panel:not(:has(.hero)):has(.nav-menu[open])::after{display:none}
.panel--blue{background:var(--blue)}
.panel--navy{background:var(--navy)}
.panel--top{border-radius:28px 28px 0 0}
.panel--bottom{border-radius:0 0 28px 28px}
.panel--bottom .footer{border-top:1px solid #2a2a5e}
.panel__in{position:relative;z-index:1}
.panel--blue::before,.panel--blue::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.panel--blue::before{width:320px;height:320px;right:-120px;top:-100px;background:var(--blue-2);clip-path:inset(100px 120px 0 0 round 0 28px 0 0)}
.panel--blue::after{display:none;width:340px;height:340px;right:140px;bottom:-220px;background:var(--blue-3);clip-path:inset(0 0 220px 0)}

/* header and navigation */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 0}
.logo{display:block;line-height:0}
.logo img{height:28px;width:auto}
.menu-toggle{display:none;width:44px;height:44px;padding:0;align-items:center;justify-content:center;border:1px solid #8c8ce0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-weight:500}
.nav a{color:#fff;text-decoration:none}
.nav a:hover{color:var(--cyan)}
.nav a.btn,.nav a.btn:hover{color:var(--navy)}
.site-header .header-cta{display:none;white-space:nowrap}
.nav-menu{position:relative}
.nav-menu summary{display:flex;align-items:center;min-height:44px;color:#fff;cursor:pointer;list-style:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:"";display:inline-block;margin-left:8px;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.nav-menu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.nav-menu summary:hover{color:var(--cyan)}
.nav-menu__panel{display:flex;flex-direction:column;padding:4px 0 4px 16px}
.nav-menu__panel a{display:flex;align-items:center;min-height:44px}
.nav-menu__group{display:flex;flex-direction:column}
.nav-menu__panel .nav-menu__head{font-weight:700}
@media (min-width:1024px){
  .nav{gap:8px 20px}
  .nav a.btn{padding:0 22px}
  .site-header{position:relative}
  .nav-menu{position:static}
  .nav-menu--sm{position:relative}
  .nav-menu--sm .nav-menu__panel{left:-12px;right:auto;width:max-content;min-width:14rem;display:flex;flex-direction:column;grid-template-columns:none}
  .nav-menu__panel{position:absolute;top:calc(100% - 16px);left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;column-gap:8px;width:auto;max-width:none;padding:8px;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,46,.25)}
  .nav .nav-menu__panel a{padding:6px 12px;white-space:normal;border-radius:8px;color:var(--ink)}
  .nav .nav-menu__panel a:hover{background:var(--cyan-tint);color:var(--blue)}
  .nav-menu__panel :focus-visible{outline-color:var(--blue)}
  .nav-menu__all{grid-column:1/-1}
  .nav-menu__group{display:flex;flex-direction:column;align-self:start;margin-top:4px;border-top:1px solid var(--line)}
  .nav-menu__panel .nav-menu__head{color:var(--blue)}
  .nav-menu__panel .nav-menu__head~a{padding-left:24px;font-weight:400}
  /* The menu has exactly four groups (Productivity, Security, Compliance, AI). Update these rules if a group is added. */
  .nav-menu__group:nth-of-type(1){grid-column:1;grid-row:2/4}
  .nav-menu__group:nth-of-type(2){grid-column:2;grid-row:2/4}
  .nav-menu__group:nth-of-type(3){grid-column:3;grid-row:2}
  .nav-menu__group:nth-of-type(4){grid-column:3;grid-row:3}
}
@media (min-width:1200px){
  .nav{gap:8px 28px}
  .nav-menu__panel{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nav-menu__panel .nav-menu__group{grid-column:auto;grid-row:2}
}
@media (max-width:1023px){
  .js .menu-toggle{display:inline-flex}
  .js .header-cta{display:inline-flex;margin-left:auto}
  .site-header{gap:12px 8px}
  .js .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;padding:4px 0 16px}
  .js .nav.is-open{display:flex}
  .nav a{padding:10px 0}
  .nav-menu__panel .nav-menu__head~a,.nav-menu--sm .nav-menu__panel a{padding-left:16px;font-weight:400}
  .nav a.btn{padding:0 28px}
  .js .nav a.btn{display:none}
}
@media (max-width:759px){
  .logo img{width:150px;height:auto}
  /* 223px = header CTA (~97px) + toggle (44px) + gaps + 2 x 32px text inset; keeps logo, CTA and toggle on one row */
  .site-header:has(.header-cta) .logo img{width:clamp(96px,calc(100vw - 223px),150px)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:0;border-radius:999px;background:var(--cyan);color:var(--navy);font:600 1.0625rem var(--font);text-decoration:none;cursor:pointer}
.btn:hover{background:#8aeaee}
.btn:disabled{opacity:.7;cursor:progress}
.btn--sm{min-height:44px;padding:0 12px;font-size:.875rem}
.btn--ghost{background:transparent;color:#fff;border:2px solid #8c8ce0}
.btn--ghost:hover{background:rgba(255,255,255,.1)}

/* hero */
.hero{max-width:44rem;padding:32px 0 44px}
.hero h1{font:600 clamp(2.4rem,7vw,3.75rem)/1.05 var(--font);letter-spacing:-.025em}
.hero h1 span{display:block}
.hero .accent{display:inline;color:var(--cyan)}
.hero .lead{margin:20px 0 28px;color:var(--lav);font-size:1.2rem}
.eyebrow{margin-bottom:16px;color:var(--cyan);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}

/* sections */
.section{padding:48px var(--inset) 8px}
.h2{font:600 clamp(1.75rem,4vw,2.5rem)/1.15 var(--font);letter-spacing:-.02em}
.lede{max-width:34rem;margin:10px 0 28px;color:var(--muted)}
.grid{display:grid;gap:20px;margin:28px calc(var(--inset) * -1) 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.card{padding:calc(var(--inset) - 1px);border:1px solid var(--line);border-radius:24px;background:#fff}
.card h3{margin:0 0 8px;font:600 1.375rem/1.25 var(--font);letter-spacing:-.01em}
.card p{color:var(--muted)}
.card--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.card--blue p{color:var(--lav)}
.card--blue a{color:var(--cyan);text-decoration:underline}
.card--tint{background:var(--cyan-tint);border-color:var(--cyan-tint)}
.card--tint p{color:#2f3560}
.badge{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:50%;background:var(--cyan-tint);color:var(--blue);font-weight:700}
.card--blue .badge{background:var(--cyan);color:var(--navy)}
.card--tint .badge{background:var(--blue);color:#fff}
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;padding:0;list-style:none}
.pills__label{margin-right:8px;color:var(--muted);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pill{padding:8px 18px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:.9375rem;font-weight:500}
.pill--link{padding:0}
.pill--link a{display:block;padding:8px 18px;border-radius:inherit;color:inherit;text-decoration:none}
.pill--link a::after{content:" \2192"}
.pill--link:is(:hover,:focus-within){border-color:var(--blue);background:var(--cyan-tint);color:var(--blue)}
.section--solo{margin-bottom:48px}
.section--end{padding-top:0;padding-bottom:48px}
.section+.section--end{padding-top:48px}
.card .pills{margin-top:16px}
.card-sub{margin-top:20px;color:var(--muted);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.card-sub+.pills{margin-top:10px}
.faq{margin-top:28px;border-bottom:1px solid var(--line-2)}
.faq details{border-top:1px solid var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;font:600 1.125rem/1.35 var(--font);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cyan-tint);color:var(--blue);font-size:1.25rem;font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq details p{max-width:44rem;padding:0 48px 20px 0;color:var(--muted)}
.split{display:grid;gap:28px;align-items:start;padding:48px var(--inset) 56px;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.split .lede{margin-bottom:0}
.split+.section{padding-top:0}
.rows{border-bottom:1px solid var(--line-2)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid var(--line-2);color:inherit;text-decoration:none}
.row h3{font:600 1.375rem/1.25 var(--font);letter-spacing:-.01em}
.row p{margin-top:4px;color:var(--muted)}
.row__arrow{flex:none;color:var(--blue);font-size:1.5rem}
a.row:hover h3{color:var(--blue);text-decoration:underline}

/* call to action and footer */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:44px 0 32px}
.cta__sub{margin-top:8px;color:var(--lav)}
.link-plain{color:inherit;text-decoration:none}
.link-plain:hover,.link-plain:focus-visible{text-decoration:underline}
.footer{display:flex;flex-direction:column;gap:20px;padding:24px 0 28px;color:var(--lav);font-size:.875rem}
.footer img{height:22px;width:auto}
.footer a{color:var(--lav);text-decoration:none}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer__brand p{line-height:24px}
.footer__brand a:hover,.footer__nav a:hover{text-decoration:underline}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer__nav a{display:flex;align-items:center;min-height:24px}

/* contact page */
.contact{display:grid;gap:24px;padding:20px 0;align-items:start;grid-template-columns:minmax(0,1fr)}
.form-card{padding:calc(var(--inset) - 1px);border:1px solid var(--line);border-radius:24px;background:#fff}
.form-card h2{margin-bottom:20px;font:600 1.625rem/1.2 var(--font);letter-spacing:-.01em}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{padding:0;font-size:.875rem;font-weight:600}
/* .field label zeroes padding; restore it for the service pills */
.field .check{padding:10px 16px}
.field-row{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.input{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--field);border-radius:14px;background:#fff;color:var(--ink);font:inherit}
textarea.input{min-height:140px;padding:12px 16px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.check{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid var(--field);border-radius:999px;font-size:.9375rem;font-weight:500;cursor:pointer}
.check input{flex:none;width:18px;height:18px;accent-color:var(--blue)}
.field:has(:required)>label::after{content:" (required)";font-weight:400;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{color:var(--muted);font-size:.875rem}
.fine a{color:var(--blue)}
.status{padding:14px 16px;border-radius:14px;font-weight:500}
.status:empty{display:none}
.status--ok{background:var(--cyan-tint);color:#0b3b3d}
.status--err{background:#fde8e8;color:#7a1212}
.aside{display:flex;flex-direction:column;gap:20px}
.aside .card{padding:calc(var(--inset) - 1px)}
.aside h2{margin-bottom:16px;font:600 1.5rem/1.2 var(--font);letter-spacing:-.01em}
.aside .label{color:var(--cyan);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.card--blue .label{color:var(--cyan)}
.steps{display:flex;flex-direction:column;gap:18px;padding:0;list-style:none}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps .badge{flex:none;width:36px;height:36px;margin:0}
.steps strong{display:block}
.steps span{color:#2f3560}

/* long-form text (privacy) */
.prose{max-width:820px;margin:20px auto;padding:8px calc(var(--inset) - 1px) 32px;border:1px solid var(--line);border-radius:24px;background:#fff}
.prose section{margin-top:28px}
.prose h2{margin-bottom:10px;font:600 1.5rem/1.25 var(--font);letter-spacing:-.01em}
.prose p,.prose li{color:#2b2f55}
.prose ul{margin-top:10px;padding-left:22px}
.prose li+li{margin-top:6px}
.prose a{color:var(--blue)}

@media (min-width:760px){
  .page{padding:20px}
  .grid{margin-left:0;margin-right:0}
  .panel{padding:0 48px;border-radius:36px}
  .panel--top{border-radius:36px 36px 0 0}
  .panel--bottom{border-radius:0 0 36px 36px}
  .panel--blue::before{width:520px;height:520px;right:-160px;top:-140px;clip-path:inset(140px 160px 0 0 round 0 36px 0 0)}
  .panel--blue::after{display:block;clip-path:inset(0 0 220px 0)}
  .site-header{padding:28px 0}
  .logo img{height:34px}
  .footer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 40px}
  .footer img{height:24px}
  .footer__copy{grid-column:1/-1;padding-top:16px;border-top:1px solid #2a2a5e}
  .hero{padding:56px 0 88px}
  .section{padding:88px 28px 16px}
  .split+.section{padding-top:0}
  .split{padding:72px 28px 88px;gap:48px}
  .section--end{padding:0 28px 72px}
  .section+.section--end{padding-top:88px}
  .cta{padding:72px 0 48px}
  .contact{padding:28px 0}
  .form-card{padding:36px;border-radius:28px}
  .card{padding:32px;border-radius:28px}
  .aside .card{padding:32px}
  .prose{padding:12px 48px 48px;border-radius:28px}
}
@media (min-width:960px){
  .contact{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
:root{--c-prod:#000099;--c-prod-t:#e8e8fa;--c-sec:#075e63;--c-sec-t:#e3f8f9;--c-comp:#5b2a9e;--c-comp-t:#f0e9fb;--c-ai:#a1155c;--c-ai-t:#fbe9f2}
.sec-prod{--c:var(--c-prod);--ct:var(--c-prod-t)}
.sec-sec{--c:var(--c-sec);--ct:var(--c-sec-t)}
.sec-comp{--c:var(--c-comp);--ct:var(--c-comp-t)}
.sec-ai{--c:var(--c-ai);--ct:var(--c-ai-t)}

/* Section colours and icons */
.icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:14px;background:var(--ct,var(--cyan-tint));color:var(--c,var(--blue))}
.icon svg{width:24px;height:24px}

/* Hero shapes and accents */
.panel--shape::before{background:none;border:56px solid var(--blue-2)}
.panel--shape::after{display:block;width:180px;height:180px;right:24px;bottom:-60px;border-radius:24px;background:radial-gradient(circle,var(--accent,#5ce1e6) 2px,transparent 2.5px) 0 0/20px 20px;opacity:.55;transform:rotate(12deg);clip-path:polygon(0 0,100% 0,100% 102px,0 140px)}
.panel--shape .eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--accent,var(--cyan));color:var(--navy)}
.sec-prod{--accent:#a9b4ff}
.sec-sec{--accent:#7fe6c8}
.sec-comp{--accent:#d2b8ff}
.sec-ai{--accent:#ff9ccd}
.accent-top .card{border-top:4px solid var(--c,var(--blue))}
.h2--bar::before{content:"";display:block;width:48px;height:4px;margin-bottom:16px;border-radius:2px;background:var(--c,var(--blue))}
/* Dark panels get no bar, so the section colour never sits on a matching background */
.on-dark .h2--bar::before{display:none}
@media (min-width:760px){
  .panel--shape::before{border-width:90px}
  .panel--shape::after{width:260px;height:260px;right:200px;bottom:-90px;clip-path:polygon(0 0,100% 0,100% 143px,0 199px)}
}

/* Hero layouts: sticker, arch, stack and circle */
.hero--split{max-width:none}
.hero__visual{position:relative;max-width:30rem;margin:36px auto 0}
/* Phones show the heading and button without the drawing, so the first screen is shorter */
@media (max-width:759px){.hero__visual{display:none}}
.hero__pic{padding:14px;border-radius:24px;background:#fff;box-shadow:0 24px 48px rgba(0,0,46,.3)}
.hero__pic img{width:100%;border-radius:14px}
.hero__badge{position:absolute;z-index:2;padding:10px 16px;background:var(--accent,var(--cyan));color:var(--navy);font-weight:700;line-height:1.2;box-shadow:0 10px 20px rgba(0,0,46,.2)}
.v-sticker .hero__pic{transform:rotate(-3deg)}
.v-sticker .hero__badge{right:4px;top:-14px;border-radius:999px;transform:rotate(8deg)}
.v-arch .hero__pic{padding:0;overflow:hidden;border-radius:240px 240px 24px 24px;background:var(--ground)}
.v-arch .hero__pic img{border-radius:0}
.v-arch .hero__badge{left:16px;bottom:16px;border-radius:10px;font-size:.9375rem;transform:rotate(-4deg)}
.v-stack .hero__pic{transform:rotate(2deg)}
.hero__card{position:relative;z-index:2;width:88%;margin:20px 0 0 auto;padding:12px 18px;border-radius:20px;background:#fff;color:var(--ink);list-style:none;transform:rotate(-2deg);box-shadow:0 18px 36px rgba(0,0,46,.25)}
.hero__card li{display:flex;align-items:center;gap:10px;padding:8px 0;font-weight:600;border-bottom:1px solid var(--line)}
.hero__card li:last-child{border-bottom:0}
.hero__card li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--blue))}
.v-circle .hero__disc{width:min(26rem,88%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:50%;background:var(--ground);box-shadow:0 0 0 14px rgba(255,255,255,.12),0 24px 48px rgba(0,0,46,.3)}
.v-circle .hero__disc img{width:100%;height:100%;object-fit:cover}
.trust{margin-top:var(--edge);padding:24px var(--inset);border:1px solid var(--line);border-radius:22px;background:#fff}
.trust h2{margin-bottom:14px;color:var(--muted);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.trust ul{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
.trust li{padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;font-weight:600;font-size:.9375rem}
@media (min-width:760px){
  .trust{padding:28px 48px;border-radius:28px}
}
@media (min-width:900px){
  .hero--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
  .hero--split h1{font-size:clamp(2.4rem,4.4vw,3.5rem)}
  .hero__visual{width:100%;margin:0}
  .v-stack .hero__pic{width:80%;margin-left:auto}
  .hero__card{position:absolute;left:0;bottom:-48px;width:16rem;margin:0;transform:rotate(-3deg)}
}