/* WebRange site styles. Colours, type and logo use follow the WebRange Brand Guide (Draft 1). */
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-wght.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --blue:#1B4C99;--navy:#0A2552;--flat:#133875;--grey:#8E9197;--sky:#6FA3EE;--skyd:#3F74C4;--mist:#B9BCC2;--ink:#4A4E55;--paper:#F7F6F4;--night:#16181C;
  --head:#0A2552;--line:#E4E6EA;--line2:#D5D9E0;--dline:rgba(185,188,194,.18);--tint:#EEF2F8;
  --wrap:1200px;--gut:24px;--r:14px
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:Montserrat,'Segoe UI',Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.65}
img,svg{max-width:100%;display:block}
img{height:auto} /* images carry width and height attributes; without this, a narrowed image keeps its full height and squashes */
a{color:inherit;text-decoration:none}
p a,li a.u,.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.navy p a{color:var(--sky)}
h1,h2,h3,h4,h5{color:var(--head);font-weight:600;text-wrap:balance;line-height:1.2}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
/* Sky reads on dark grounds; Blue on light ones (3:1 or better either way) */
.navy :focus-visible,.phead :focus-visible,.hero :focus-visible,footer :focus-visible,.site-head:not(.light) .nav>:focus-visible,.site-head:not(.light) .menu>li>:focus-visible{outline-color:var(--sky)}
.navy .note,.navy .muted,.phead .note{color:var(--mist)}
.site-head:not(.light).nav-open .sub :focus-visible{outline-color:var(--sky)}
.form .msg{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--tint);color:var(--head);font-size:14px;line-height:1.55}
.form .msg.on{display:block}
.form .msg.bad{background:#fbebeb;color:#7a1f1f}
.form-sum{grid-column:1/-1;margin:0 0 4px;font-size:14px;font-weight:600;color:#7a1f1f}.form-sum:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ops-cap{font-size:13px;color:var(--mist);margin-top:12px}
@media print{img.ill.pre{opacity:1}}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--navy);padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{left:16px}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin:0 auto}
.navy{background:var(--navy);color:var(--mist)}
.navy h1,.navy h2,.navy h3,.navy h4{color:#fff}
.paper{background:var(--paper)}
section{padding:104px 0}
h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.02em;line-height:1.12}
h2{font-size:clamp(28px,3.2vw,38px);line-height:1.15;letter-spacing:-.015em}
h3{font-size:19px;line-height:1.3}
.lead{font-size:18px;line-height:1.65}
.label{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.navy .label{color:var(--sky)}
.label+h1,.label+h2{margin-top:14px}
.note{font-size:13px;color:var(--ink)}
.muted{color:var(--ink)}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:8px;font-weight:600;font-size:15px;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:background-color .15s,border-color .15s,color .15s}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--flat)}
.btn.onnavy{background:#fff;color:var(--navy)}.btn.onnavy:hover{background:var(--tint)}
.btn.line{border-color:var(--line2);color:var(--navy);background:#fff}.btn.line:hover{border-color:var(--blue)}
.btn.lined{border-color:rgba(255,255,255,.35);color:#fff}.btn.lined:hover{border-color:#fff}
.btn.sm{min-height:42px;font-size:14px;padding:0 18px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.link{font-weight:600;color:var(--blue);font-size:15px;display:inline-flex;align-items:center;gap:6px}
.link:after{content:'';width:7px;height:7px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:rotate(45deg);transition:transform .15s}
.link:hover:after{transform:translateX(3px) rotate(45deg)}
.navy .link{color:var(--sky)}

/* header */
.site-head{background:var(--navy);position:sticky;top:0;z-index:50}
.site-head.light{background:#fff;border-bottom:1px solid var(--line)}
.nav{height:84px;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--dline)}
.site-head.light .nav{border-bottom:0}
.nav .logo img{height:36px;width:auto}
.nav .menu{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav .menu>li>a,.nav .menu>li>button{display:block;padding:10px 12px;border-radius:6px;color:#dfe3ea;background:none;border:0;font:inherit;cursor:pointer}
.site-head.light .menu>li>a,.site-head.light .menu>li>button{color:var(--ink)}
.nav .menu>li>a:hover,.nav .menu>li>button:hover,.nav .menu [aria-current=page]{color:#fff}
.site-head.light .menu>li>a:hover,.site-head.light .menu [aria-current=page]{color:var(--blue)}
.nav .menu [aria-current=page]{box-shadow:inset 0 -2px 0 var(--sky);border-radius:0}
.has-sub{position:relative}
.has-sub>button:after{content:'';display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 0 3px 8px}
.sub{position:absolute;top:100%;left:-12px;width:560px;background:#fff;border-radius:12px;box-shadow:0 24px 48px -20px rgba(10,37,82,.4),0 0 0 1px rgba(10,37,82,.06);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:10px 12px;border-radius:8px}
.sub a:hover{background:var(--tint)}
.sub b{display:block;color:var(--head);font-weight:600;font-size:14px}
.sub span{display:block;font-size:12.5px;color:var(--ink);line-height:1.45;margin-top:2px}
.sub .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.nav .cta{margin-left:10px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:8px;border:1.5px solid rgba(255,255,255,.3);background:none;cursor:pointer;position:relative}
.site-head.light .burger{border-color:var(--line2)}
.burger span,.burger:before,.burger:after{content:'';position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.site-head.light .burger span,.site-head.light .burger:before,.site-head.light .burger:after{background:var(--navy)}
.burger:before{top:14px}.burger span{top:20.5px}.burger:after{top:27px}
.nav-open .burger:before{transform:translateY(6.5px) rotate(45deg)}.nav-open .burger span{opacity:0}.nav-open .burger:after{transform:translateY(-6.5px) rotate(-45deg)}

/* page heads (inner pages) */
.phead{background:var(--navy);color:var(--mist);padding:72px 0 88px}
.phead h1{color:#fff;max-width:820px}
.phead .lead{color:#dfe3ea;max-width:720px;margin-top:20px}
.phead.phs .wrap{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center}
.phead.with-panel{padding-bottom:0;background:linear-gradient(180deg,var(--navy) 0,var(--navy) calc(100% - 120px),var(--paper) calc(100% - 120px))}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--mist);margin-bottom:26px}
.crumbs a:hover{color:#fff}
.crumbs li+li:before{content:'/';margin-right:8px;color:var(--grey)}

/* home hero */
.hero{background:linear-gradient(180deg,var(--navy) 0,var(--navy) calc(100% - 300px),var(--paper) calc(100% - 300px))}
.hc{display:grid;grid-template-columns:540px 1fr;gap:40px;align-items:center;padding:56px 0 30px}
.hc .lead{color:#dfe3ea;margin-top:22px}
.hc h1{color:#fff}

/* layered screens (hero visual, option 1) */
.hv{position:relative;height:512px;font-size:12px;color:var(--ink)}
.hv .cap{position:absolute;bottom:-30px;font-size:12px;color:var(--mist);opacity:.8}
.card{position:absolute;background:#fff;border-radius:12px;box-shadow:0 24px 50px -24px rgba(0,0,0,.55);overflow:hidden}
.bar{height:34px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);font-weight:600;font-size:11.5px;color:var(--head)}
.bar i{width:8px;height:8px;border-radius:50%;background:var(--line2);display:inline-block;margin-right:-4px}
.bar .r{margin-left:auto;font-weight:500;color:var(--ink)}
.pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--tint);color:var(--blue);white-space:nowrap;line-height:1.6}
.pill.g{background:#F0F1F3;color:var(--ink)}
.pill.n{background:var(--blue);color:#fff}
.d365{left:40px;top:6px;width:580px;height:300px;display:grid;grid-template-rows:34px 1fr}
.d365 .bd{display:grid;grid-template-columns:118px 1fr}
.rail{background:var(--paper);border-right:1px solid var(--line);padding:14px 0}
.rail div{padding:7px 16px;font-size:11px}
.rail div.on{background:#fff;color:var(--blue);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)}
.rail small{display:block;padding:10px 16px 4px;font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--ink)}
.frm{padding:16px 20px}
.frm h4{font-size:15px}.frm .sub2{color:var(--ink);font-size:11px;margin-top:2px}
.bpf{display:flex;margin:14px 0 16px}
.bpf span{flex:1;text-align:center;padding:7px 0;font-size:10.5px;font-weight:600;background:#F0F1F3;color:var(--ink);margin-right:3px;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%)}
.bpf span.done{background:var(--tint);color:var(--blue)}.bpf span.now{background:var(--blue);color:#fff}
.flds{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.flds div{border-bottom:1px solid var(--line);padding-bottom:7px}
.flds label{display:block;font-size:9.5px;color:var(--ink);margin-bottom:2px}
.flds b{font-weight:500;color:var(--head);font-size:11.5px}
.portal{left:0;top:232px;width:300px;height:248px}
.portal .bd{padding:16px}
.portal h5{font-size:13px;margin-bottom:10px}
.portal .row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:11px}
.portal .row b{display:block;color:var(--head);font-weight:600;font-size:11.5px}
.portal .row small{color:var(--ink);font-size:10px}
.btnx{margin-top:12px;height:30px;border-radius:6px;background:var(--blue);color:#fff;font-weight:600;font-size:11px;display:grid;place-items:center}
.phone{right:-6px;top:214px;width:176px;height:286px;border-radius:26px;padding:8px;background:var(--flat)}
.phone .scr{background:#fff;border-radius:19px;height:100%;padding:16px 12px;overflow:hidden}
.phone .nt{width:52px;height:5px;border-radius:3px;background:var(--line2);margin:0 auto 14px}
.phone h6{font-size:12.5px;font-weight:600;color:var(--head)}
.phone .sm{font-size:9.5px;color:var(--ink);margin:2px 0 10px}
.chk{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:10.5px;color:var(--head)}
.chk i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line2);flex:none;position:relative}
.chk i.y{background:var(--blue);border-color:var(--blue)}
.chk i.y:after{content:'';position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.phone .btnx{height:28px;border-radius:7px;background:var(--navy);font-size:10.5px;margin-top:10px}

/* systems board (managed support visual) */
.ops{position:relative;background:#fff;border-radius:12px;box-shadow:0 24px 50px -24px rgba(0,0,0,.55);overflow:hidden;font-size:12px}
.ops .hd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 14px}
.ops .hd .ttl{font-size:15px;font-weight:600;color:var(--head);margin:0}.ops .hd p{font-size:11px;color:var(--ink);margin-top:2px}
.sys{margin:0 22px 22px;border:1px solid var(--line);border-radius:10px}
.sys .th,.sys .tr{display:grid;grid-template-columns:1.5fr 1fr 1.1fr .9fr;align-items:center;padding:0 16px;gap:8px}
.sys .th{height:32px;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.sys .tr{height:46px;border-bottom:1px solid var(--line);font-size:11.5px}
.sys .tr:last-child{border-bottom:0}
.sys .tr b{font-weight:600;color:var(--head);display:flex;align-items:center;gap:9px}
.sys .tr b:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.sys .tr.w b:before{background:var(--sky)}

/* panel crossing the horizon */
.panel{background:#fff;border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(10,37,82,.45),0 0 0 1px rgba(10,37,82,.06);overflow:hidden;position:relative}
.panel .ph{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:26px 32px;border-bottom:1px solid var(--line)}
.panel .ph h2{font-size:22px}
.ixg{display:grid;grid-template-columns:repeat(4,1fr)}
.ix{display:block;padding:26px 32px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .15s}
.ix:hover{background:var(--tint)}
.ix:nth-child(4n){border-right:0}.ix:nth-last-child(-n+4){border-bottom:0}
.ix .g{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ix h3{font-size:16.5px;line-height:1.35;margin:8px 0}
.ix p{font-size:14px;line-height:1.55}

/* section heads */
.sh{display:grid;grid-template-columns:1fr 440px;gap:80px;align-items:end;margin-bottom:44px}
.sh p{font-size:17px}
.sh.c{display:block;max-width:760px}
.sh.c p{margin-top:16px}
.board{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.board .cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink);margin-top:18px}
.flow{width:100%;height:auto}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x>img{display:block;width:100%;height:auto}

/* process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative;margin-top:16px;counter-reset:s}
.proc:before{content:'';position:absolute;left:22px;right:22px;top:22px;height:1.5px;background:var(--line2)}
.proc li{position:relative}
.proc .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--blue);color:var(--blue);font-weight:600;font-size:16px;position:relative}
.proc h3{margin:24px 0 10px}
.proc p{font-size:15px}
.hc2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:56px}
.callout{margin-top:56px;background:var(--tint);border-radius:12px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.callout h3{font-size:18px}.callout p{font-size:15px;margin-top:4px}

/* integration split */
.int{display:grid;grid-template-columns:620px 1fr;gap:72px;align-items:center}
.int .lead{margin:18px 0 28px}
.il>div{padding:16px 0;border-top:1px solid var(--dline)}
.il>div:last-child{border-bottom:1px solid var(--dline)}
.il b{display:block;color:#fff;font-weight:600;font-size:15.5px}
.il span{font-size:14.5px}

/* work */
.wk{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.feat{background:var(--navy);border-radius:var(--r);padding:40px;color:var(--mist);display:flex;flex-direction:column;transition:background-color .15s}
.feat:hover{background:var(--flat)}
.feat h3{color:#fff;font-size:28px;line-height:1.25;margin:12px 0 26px;max-width:560px}
.feat dl{display:grid;grid-template-columns:130px 1fr;gap:16px 24px;font-size:15px;border-top:1px solid var(--dline);padding-top:24px}
.feat dt{color:var(--sky);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.feat dd{color:#e6e9ee}
.feat .stk{margin-top:auto;padding-top:26px;font-size:13px;font-weight:500;display:flex;justify-content:space-between;gap:20px}
.feat .label{color:var(--sky)}
.minors{display:grid;gap:20px}
.minor{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:border-color .15s}
.minor:hover,.case:hover{border-color:var(--blue)}
.minor h3{margin:10px 0}
.minor p{font-size:14.5px}
.minor .res{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--navy);font-size:14.5px}
.minor .res b,.case .res b{font-weight:600;margin-right:6px}
.minor .body{margin-bottom:14px}

/* generic grids and cards */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split.mid{align-items:center}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.paper .box{border-color:var(--line)}
.box h3{margin-bottom:10px}
.box p{font-size:15px}
.navy .box{background:rgba(255,255,255,.04);border-color:var(--dline)}
a.box{display:flex;flex-direction:column;transition:border-color .15s}
a.box:hover{border-color:var(--blue)}
a.box .link{margin-top:auto;padding-top:18px}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.svc:hover{border-color:var(--blue)}
.svc .art{background:var(--paper);padding:18px 18px 0;border-bottom:1px solid var(--line)}
.svc .art img{border-radius:8px 8px 0 0}
.svc .t{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.svc .g{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.svc h3{margin:8px 0 8px;font-size:18px}
.svc p{font-size:14.5px}
.svc .link{margin-top:auto;padding-top:18px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-size:12px;font-weight:500;padding:3px 10px;border-radius:20px;background:var(--tint);color:var(--flat)}
.navy .tags span{background:rgba(111,163,238,.14);color:#dfe3ea}

/* lists */
.ticks li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li:before{content:'';position:absolute;left:4px;top:18px;width:6px;height:11px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}
.navy .ticks li{border-color:var(--dline)}
.navy .ticks li:before{border-color:var(--sky)}
.ticks.cross li:before{width:12px;height:2px;border:0;background:var(--grey);transform:none;top:22px;left:2px}
.dash li{position:relative;padding-left:20px;margin:8px 0}
.dash li:before{content:'';position:absolute;left:0;top:12px;width:8px;height:1.5px;background:var(--blue)}
.rows>div{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:26px 0;border-top:1px solid var(--line)}
.rows>div:last-child{border-bottom:1px solid var(--line)}
.rows h3{font-size:18px}
.rows p{font-size:15.5px}
.navy .rows>div{border-color:var(--dline)}
.facts>div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.facts>div:last-child{border-bottom:1px solid var(--line)}
.facts b{color:var(--head);font-weight:600}
.problems a{display:grid;grid-template-columns:1fr 300px 20px;gap:30px;align-items:center;padding:24px 0;border-top:1px solid var(--line);transition:padding .15s}
.problems a:last-child{border-bottom:1px solid var(--line)}
.problems q{font-size:20px;font-weight:500;color:var(--head);quotes:'\201C' '\201D'}
.problems span{font-size:14.5px;color:var(--blue);font-weight:600}
.problems a:after{content:'';width:8px;height:8px;border:solid var(--blue);border-width:1.8px 1.8px 0 0;transform:rotate(45deg)}
.problems a:hover{padding-left:8px}
.techline{font-size:14.5px;line-height:1.9;color:var(--ink)}
.navy .techline{color:var(--mist)}

/* case studies */
.case{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px;transition:border-color .15s}
.case+.case{margin-top:20px}
.case h3{font-size:26px;margin:12px 0 14px}
.case .res{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--navy)}
.case dl{display:grid;grid-template-columns:120px 1fr;gap:14px 24px;font-size:15px}
.case dt{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);padding-top:3px}
.cs-body{display:grid;grid-template-columns:260px 1fr;gap:80px;align-items:start}
.cs-side{position:sticky;top:120px;font-size:14.5px}
.cs-side dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:20px}
.cs-side dt:first-child{margin-top:0}
.cs-side dd{color:var(--head);font-weight:500;margin-top:4px}
.prose h2{font-size:26px;margin:48px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px;font-size:17px}
.prose ul{margin:0 0 16px}
.prose li{position:relative;padding-left:22px;margin:8px 0;font-size:16.5px}
.prose li:before{content:'';position:absolute;left:0;top:13px;width:9px;height:1.5px;background:var(--blue)}
.outcome{background:var(--tint);border-radius:12px;padding:26px 30px;margin:24px 0}
.outcome ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;margin:10px 0 0}
.outcome li{font-weight:600;color:var(--navy)}
figure.dg{margin:28px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
figure.dg figcaption{font-size:13px;color:var(--ink);margin-top:14px}

/* academy */
.acad{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:1fr 500px;overflow:hidden}
.acad .t{padding:48px}
.acad .art{background:#0f1729;display:flex;align-items:center}
.acad h2{font-size:30px}
.acad .lead{font-size:16.5px;margin:14px 0 18px}

/* closing cta */
.end{padding:96px 0}
.endc{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;padding-bottom:48px;border-bottom:1px solid var(--dline)}
.endc h2{font-size:clamp(30px,3.6vw,44px);max-width:760px}
.endc p{margin-top:14px;max-width:640px;color:#dfe3ea}
.endc .ctas{margin-top:0}
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:40px;padding-top:32px;font-size:15px}
.ways dt{color:var(--mist);font-size:13px;margin-bottom:4px}
.ways dd{color:#fff;font-weight:500}
.ways a:hover{color:var(--sky)}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:14px;font-weight:600;color:var(--head);margin-bottom:6px}
.form label small{font-weight:400;color:var(--ink)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:15px;color:var(--head);padding:12px 14px;border:1.5px solid var(--line2);border-radius:8px;background:#fff;transition:border-color .15s}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,76,153,.12)}
.form [aria-invalid=true]{border-color:#9b2c2c}
.form .err{font-size:13px;color:#9b2c2c;margin-top:4px;display:none}
.form [aria-invalid=true]+.err{display:block}
.form .actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;font-weight:500;font-size:14px;color:var(--ink);border:1.5px solid var(--line2);border-radius:30px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background-color .15s}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips input:checked+span{color:var(--blue)}
.chips label:has(input:checked){border-color:var(--blue);background:var(--tint)}
.chips input:focus-visible+span{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.steps3 li{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.steps3 li:last-child{border-bottom:1px solid var(--line)}
.steps3 .n{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue);display:grid;place-items:center;font-weight:600;font-size:14px}

/* footer */
footer{background:var(--night);color:var(--mist);padding:64px 0 34px;font-size:14px}
footer .ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(185,188,194,.16)}
footer .logo img{height:36px;width:auto;margin-bottom:18px}
footer h2{color:#fff;font-size:13px;font-weight:600;margin-bottom:12px;letter-spacing:0}
footer li{line-height:2.05}
footer a:hover{color:#fff}
footer .ack{display:flex;justify-content:space-between;gap:48px;padding-top:24px;font-size:12.5px;line-height:1.65}


/* responsive */
@media (max-width:1180px){
  .hc{grid-template-columns:1fr;gap:56px}
  .hv{width:620px;max-width:100%;margin:0 auto}
  .int{grid-template-columns:1fr;gap:48px}
  .phead.phs .wrap{grid-template-columns:1fr;gap:48px}
  .acad{grid-template-columns:1fr}
}
@media (max-width:1020px){
  .nav .menu,.nav .cta{display:none}
  .burger{display:block}
  .nav-open .nav .menu{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;inset:84px 0 0 0;background:var(--navy);padding:16px var(--gut) 40px;overflow-y:auto;z-index:49}
  .site-head.light.nav-open .menu{background:#fff}
  .nav-open .nav .menu>li>a,.nav-open .nav .menu>li>button{padding:16px 0;font-size:17px;border-bottom:1px solid var(--dline);width:100%;text-align:left;border-radius:0}
  .nav-open .nav .menu [aria-current=page]{box-shadow:none;color:var(--sky)}
  .nav-open .sub{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;grid-template-columns:1fr;padding:4px 0 10px;display:none}
  .nav-open .has-sub.open .sub{display:grid}
  .nav-open .sub b{color:#fff}.nav-open .sub span{color:var(--mist)}
  .site-head.light.nav-open .sub b{color:var(--head)}
  .nav-open .sub a:hover{background:rgba(255,255,255,.06)}
  .nav-open .nav .cta{display:flex;position:fixed;left:var(--gut);right:var(--gut);bottom:24px;z-index:51}
  .ixg{grid-template-columns:1fr 1fr}
  .ix:nth-child(n){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ix:nth-child(2n){border-right:0}.ix:nth-last-child(-n+2){border-bottom:0}
  .sh,.hc2,.split{grid-template-columns:1fr;gap:20px}
  .split{gap:48px}
  .wk,.case,.cs-body{grid-template-columns:1fr}
  .cs-side{position:static}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr 1fr;row-gap:48px}.proc:before{display:none}
  .callout{flex-direction:column;align-items:flex-start;gap:20px}
  .endc{grid-template-columns:1fr;gap:28px}
  footer .ft{grid-template-columns:1fr 1fr}
  .problems a{grid-template-columns:1fr 20px}.problems span{grid-column:1;grid-row:2}
  .problems a:after{grid-column:2;grid-row:1/3}
  .rows>div{grid-template-columns:1fr;gap:8px}
}
@media (max-width:680px){
  section{padding:72px 0}
  .phead{padding:48px 0 64px}
  .hv{height:auto;transform:none}
  .hv .card{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%!important;margin-bottom:16px}
  .hv .portal,.hv .phone,.hv .cap{display:none}
  .d365 .bd{grid-template-columns:1fr}.rail{display:none}
  .ixg,.g2,.g3,.g4{grid-template-columns:1fr}
  .ix:nth-child(n){border-right:0;border-bottom:1px solid var(--line)}.ix:last-child{border-bottom:0}
  .proc{grid-template-columns:1fr}
  .feat{padding:28px}.feat dl,.case dl{grid-template-columns:1fr;gap:4px}.feat dd,.case dd{margin-bottom:12px}
  .case{padding:28px;gap:28px}
  .acad .t{padding:28px}
  .form{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr;gap:20px}
  footer .ft{grid-template-columns:1fr}
  footer .ack{flex-direction:column;gap:12px}
  .facts>div{grid-template-columns:1fr;gap:2px}
  .outcome ul{grid-template-columns:1fr}
  .sys .th{display:none}.sys .tr{grid-template-columns:1fr auto;height:auto;padding:12px 16px}.sys .tr span:not(.pill){display:none}
  .board{padding:16px}
  .panel .ph{padding:22px}.ix{padding:22px}
}
@media print{.site-head,.burger,footer .ack,.end{display:none}body{font-size:12pt}section{padding:24px 0}}
.split .rows>div,.box .rows>div{grid-template-columns:1fr;gap:6px}
.hero .label,.phead .label{color:var(--sky)}
.feat .link{color:var(--sky)}
footer p a{color:inherit;text-decoration:none}
.phead p a,.endc p a{color:#fff}
.btn,.link{text-decoration:none!important}
.ops{color:var(--ink)}
.phs .sys .th,.phs .sys .tr{grid-template-columns:1.45fr .95fr 1.25fr .85fr}
.phs .sys .tr{font-size:11px}
/* let grid columns shrink below their content's width on small screens */
.hc>*,.int>*,.sh>*,.hc2>*,.split>*,.g2>*,.g3>*,.g4>*,.wk>*,.case>*,.cs-body>*,.phs .wrap>*,.acad>*,.ixg>*,.form>*{min-width:0}
@media (max-width:680px){.hv{width:auto}.label{letter-spacing:.08em}.btn{white-space:normal;text-align:center}}
@media (min-width:1021px){.csplit{grid-template-columns:1.35fr 1fr;gap:64px}}
.formbox{padding:40px}
@media (max-width:680px){.formbox{padding:22px}}
@media (max-width:1020px){.nav-open .nav .menu{padding-bottom:110px}}

img.ill{width:100%;height:auto;display:block}

/* ---- motion ---------------------------------------------------------------------------
   Everything below runs only when the device allows motion, JavaScript is on (so the pause
   control works), and the visitor hasn't paused it. Diagrams swap to animated SVG twins in site.js. */
.motion-toggle{display:none;align-items:center;gap:8px;font:inherit;font-size:12.5px;font-weight:600;color:var(--blue);background:#fff;border:1.5px solid var(--line2);border-radius:20px;padding:5px 12px 5px 10px;cursor:pointer}
.motion-toggle.on-dark{color:#dfe3ea;background:transparent;border-color:rgba(255,255,255,.3)}
.motion-toggle:hover{border-color:var(--blue)}.motion-toggle.on-dark:hover{border-color:#fff}
.mt-i{width:10px;height:10px;display:inline-block;border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion-paused .mt-i{border:0;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;width:0;height:0}
html.motion-ok .motion-toggle{display:inline-flex}
.board .cap .motion-toggle{margin-left:auto}
.hvwrap{position:relative}
.hvwrap>.motion-toggle{position:absolute;right:0;bottom:-40px}
img.ill.pre{opacity:0}
img.ill{transition:opacity .3s}

/* hero screens: sign-off ticked, record synced, application moves to Approval, portal shows Approved */
.swap{display:inline-grid}.swap>span,.sync>span{grid-area:1/1}
.swap .sb,.sync .sb{opacity:0}
.sync{display:grid}
@media (prefers-reduced-motion:no-preference){
  html.motion-ok:not(.motion-paused) .hvwrap.inview .tk{animation:tk 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .tk:after{animation:tka 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .sync{animation:sy 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .sync .sa{animation:out 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .sync .sb{animation:in 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .s3{animation:s3 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .s4{animation:s4 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .swap .sa{animation:out2 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .swap .sb{animation:in2 12s infinite}
  html.motion-ok:not(.motion-paused) .hvwrap.inview .swap{animation:pl 12s infinite}
}
.tk:after{content:'';position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:0}
@keyframes tk{0%,22%{background:#fff;border-color:var(--line2)}25%,92%{background:var(--blue);border-color:var(--blue)}96%,100%{background:#fff;border-color:var(--line2)}}
@keyframes tka{0%,22%{opacity:0}25%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes sy{0%,32%{background:var(--navy)}34%{background:var(--flat);transform:scale(.97)}36%,92%{background:var(--blue);transform:none}96%,100%{background:var(--navy)}}
@keyframes out{0%,34%{opacity:1}36%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes in{0%,34%{opacity:0}36%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes s3{0%,46%{background:var(--blue);color:#fff}50%,92%{background:var(--tint);color:var(--blue)}96%,100%{background:var(--blue);color:#fff}}
@keyframes s4{0%,46%{background:#F0F1F3;color:var(--ink)}50%,92%{background:var(--blue);color:#fff}96%,100%{background:#F0F1F3;color:var(--ink)}}
@keyframes out2{0%,54%{opacity:1}57%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes in2{0%,54%{opacity:0}57%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes pl{0%,54%{background:var(--tint);color:var(--blue)}57%,92%{background:var(--blue);color:#fff}96%,100%{background:var(--tint);color:var(--blue)}}
@media (max-width:680px){.hvwrap>.motion-toggle{position:static;margin-top:4px}}

/* home hero artwork: Range rings, bleeding off the right edge behind the services panel */
.hero{overflow-x:clip}
.hc>div:first-child{position:relative;z-index:2}
.rings-wrap{position:relative;height:540px}
.rings-wrap img{position:absolute;width:900px;max-width:none;height:auto;left:-70px;top:-120px;z-index:0}
.hero .panel{z-index:2}
@media (max-width:1180px){
  .rings-wrap{height:auto;overflow:hidden;aspect-ratio:900/660;max-width:720px;margin:0 auto;width:100%}
  .rings-wrap img{position:static;width:100%;margin-top:-6%}
}
@media (max-width:680px){
  .rings-wrap{aspect-ratio:900/640}
  .rings-wrap img{width:100%;margin:-7% 0 0}
}
.rings-pause{position:absolute;left:24px;bottom:-6px;z-index:3}
@media (max-width:1180px){.rings-pause{position:static;text-align:center;margin-top:8px}}

/* Technology pages */
.techcard{background:#fff;border-radius:12px;padding:26px 26px 28px;box-shadow:0 24px 50px -24px rgba(0,0,0,.55)}
.techcard .tc-h{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0}
.techcard .tags{gap:8px;margin-top:16px}
.techcard .tags span{font-size:14px;padding:6px 14px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:600;font-size:17px;color:var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'';position:absolute;right:8px;top:26px;width:8px;height:8px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary:after{transform:rotate(-135deg);top:30px}
.faq details p{margin:0 0 22px;max-width:720px}
.also{margin-top:28px;font-size:15px;color:var(--ink)}
.also a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* Blog */
.post .pm,.byline{font-size:13px;color:var(--ink);margin:0 0 10px}
.post h3{margin-bottom:10px}
.article{max-width:760px}
.byline{margin-bottom:32px}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose ol{margin:0 0 16px;padding-left:22px;list-style:decimal}
.prose ol li{padding-left:6px}
.prose ol li:before{display:none}
.prose code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:var(--tint);padding:1px 6px;border-radius:4px}
.prose b{color:var(--head)}

/* Footer with five columns */
footer .ft{grid-template-columns:1.4fr 1fr 1fr 1.1fr .9fr}
@media (max-width:1180px){footer .ft{grid-template-columns:1fr 1fr 1fr}footer .ft>div:first-child{grid-column:1/-1}}
@media (max-width:680px){footer .ft{grid-template-columns:1fr}}

/* The top menu has seven items: tighten it on mid-size screens so it stays on one line */
@media (min-width:1021px) and (max-width:1180px){
  .nav{gap:20px}
  .nav .menu{gap:0;font-size:14px}
  .nav .menu>li>a,.nav .menu>li>button{padding:10px 9px}
  .nav .cta{margin-left:4px}
}
#main:focus{outline:none}

/* Products (Clora): rendered app screens, the screen tour and scroll effects */
.kst{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#dfe3ea;border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:4px 12px;margin-top:22px}
.kst:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--sky)}
img.shot{display:block;width:100%;height:auto}
.hcap{font-size:12.5px;color:var(--ink);margin-top:6px;padding-left:2.4%}
.phead .hcap{color:var(--mist)}
/* page head with a large screen that bleeds off the right edge */
.phead.phx{overflow-x:clip;padding-bottom:64px}
.phead.phx .wrap{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:24px}
.hshot{margin:0 -150px 0 -20px}
.stack{position:relative;aspect-ratio:1660/1190;margin:0 -150px 0 -20px}
.stack img{position:absolute;width:80%;will-change:transform}
.stack .s1{left:0;top:0;opacity:.96}.stack .s2{left:10%;top:15%}.stack .s3{left:20%;top:30%}
/* the screen tour */
.tstep{padding:26px 0 26px 26px;border-left:3px solid var(--line)}
.tstep h3{font-size:24px;margin:10px 0 12px}
.tstep .ticks{margin-top:16px;font-size:15px}
.tstep .tm{margin:22px 0 0 -26px}
#screens{overflow-x:clip} /* the pinned screen bleeds right; clip stops sideways page scroll and, unlike hidden, keeps sticky working */
.tour-stage{display:none}
.tour.on{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:48px}
.tour.on .tstep{min-height:78vh;display:flex;flex-direction:column;justify-content:center;transition:border-color .3s}
.tour.on .tstep.act{border-left-color:var(--blue)}
.tour.on .tstep .tm{display:none}
.tour.on .tour-stage{display:block;position:sticky;top:max(100px,calc(50vh - 20vw));align-self:start;margin-right:-90px}
.tour-frame{position:relative;aspect-ratio:1660/960}
.tour-frame img{position:absolute;inset:0;opacity:0;transform:translateY(26px) scale(.985);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.tour-frame img.on{opacity:1;transform:none}
/* connection diagram */
.dfig{margin:0}
.dfig figcaption{font-size:13px;color:var(--ink);margin-top:8px;padding-left:2.4%}
/* screens rise into view (only when motion is allowed and not paused) */
html.rv-on .rv{opacity:0;transform:translateY(44px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
html.rv-on .rv.in{opacity:1;transform:none}
/* product cards, cycle, roles and notes */
.svc .art.shotart{padding:14px 4px 0;background:var(--paper);overflow:hidden;height:210px}
.svc .art.shotart img{width:150%;max-width:none;margin-left:-2%}
.prow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cyc{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:12px;counter-reset:c}
.cyc li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px 20px;position:relative}
.cyc li:before{counter-increment:c;content:counter(c,decimal-leading-zero);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--blue)}
.cyc li b{display:block;color:var(--head);font-weight:600;font-size:15.5px;margin-top:8px;line-height:1.3}
.cyc li span{display:block;font-size:13.5px;margin-top:6px;line-height:1.55}
.navy .cyc li{background:rgba(255,255,255,.04);border-color:var(--dline)}
.navy .cyc li:before{color:var(--sky)}.navy .cyc li b{color:#fff}
.who .box .label{color:var(--ink)}
.who .box h3{margin-top:8px}
.pnote{background:var(--tint);border-radius:12px;padding:22px 26px;font-size:15px;color:var(--head);margin-top:40px}
.pnote b{font-weight:600}
@media (max-width:1180px){
  .phead.phx .wrap{grid-template-columns:1fr;gap:40px}
  .hshot,.stack{margin:0 -40px 0 -12px}
  .cyc{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1020px){
  .prow{grid-template-columns:1fr 1fr}
  .tour.on{display:block}
  .tour.on .tour-stage{display:none}
  .tour.on .tstep{min-height:0;display:block}
  .tour.on .tstep .tm{display:block}
}
@media (max-width:680px){
  .hshot,.stack{margin:0 -20px 0 -10px}
  .tstep{padding-left:18px}.tstep .tm{margin-left:-18px;margin-right:-12px}
  .cyc{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:1fr}
}
/* Footer with six columns */
footer .ft{grid-template-columns:1.3fr 1fr 1fr 1.1fr .9fr .8fr}
@media (max-width:1180px){footer .ft{grid-template-columns:1fr 1fr 1fr}footer .ft>div:first-child{grid-column:1/-1}}
@media (max-width:680px){footer .ft{grid-template-columns:1fr}}