/* NVizione Systems, site.css
   Design system per nvizione-website-plan.md section 9.
   Palette sampled from the production logo. Two colours are banned for text
   and that ban is enforced by never assigning them to a text property here. */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1F2933;
  --ink-soft:#5A6672;
  --blue:#204C7E;
  --blue-dark:#193B62;
  --green-deep:#0A7755;
  --green:#2CB674;
  --blue-light:#5BA7D9;
  --paper:#fff;
  --paper-alt:#F7F9FA;
  --rule:#E3E8EC;
  --grad:linear-gradient(90deg,#2CB674 0%,#0A7755 33%,#204C7E 66%,#5BA7D9 100%);
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --wrap:1120px;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}

h1,h2,h3{color:var(--blue);font-weight:600;line-height:1.2;margin:0 0 var(--s3)}
h1{font-size:32px;line-height:1.15;letter-spacing:-.01em}
h2{font-size:24px;margin-top:var(--s6)}
h3{font-size:20px;color:var(--ink);margin-top:var(--s5)}
@media (min-width:768px){h1{font-size:44px}h2{font-size:30px}h3{font-size:21px}}
p{margin:0 0 var(--s3);max-width:68ch}
ul,ol{max-width:68ch;padding-left:1.25em}
li{margin-bottom:var(--s2)}
strong{font-weight:600}
a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--green);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
@media (min-width:768px){.wrap{padding:0 var(--s5)}}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:var(--s2) var(--s3);z-index:100;text-decoration:none}
.skip:focus{left:var(--s3);top:var(--s3)}
.gradbar{height:3px;background:var(--grad)}

/* header */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;gap:var(--s4);min-height:68px;flex-wrap:wrap;padding-top:var(--s2);padding-bottom:var(--s2)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;flex-shrink:0}
.brand img{width:32px;height:32px;display:block}
.brand span{color:var(--blue);font-weight:600;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.nav{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:16px;padding:var(--s1) 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--green);color:var(--blue)}
@media (max-width:767px){
  .head-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;min-height:0;padding:9px 0}
  .brand{margin-right:0}
  .brand img{width:28px;height:28px}
  .brand span{font-size:16px}
  .head-in>.btn{grid-column:2;grid-row:1;padding:8px 14px;font-size:14px}
  .nav{grid-column:1/-1;grid-row:2;width:100%;gap:0;flex-wrap:nowrap;justify-content:space-between}
  .nav a{font-size:15px;white-space:nowrap;padding:2px 0}
}

/* buttons */
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:14px 28px;border-radius:6px;border:2px solid var(--blue);line-height:1.2;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn-sm{padding:9px 18px;font-size:15px}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--paper-alt);color:var(--blue)}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

/* sections */
main{display:block}
section{padding:var(--s6) 0}
section.alt{background:var(--paper-alt);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hero{padding:var(--s6) 0 var(--s5)}
@media (min-width:768px){.hero{padding:var(--s7) 0 var(--s6)}}
.eyebrow{color:var(--green-deep);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--s3)}
.lede{font-size:19px;line-height:1.6;max-width:64ch}
@media (min-width:768px){.lede{font-size:20px}}
.answer{border-left:4px solid var(--green);padding-left:var(--s4);margin:var(--s4) 0 0}
.answer p{margin-bottom:0}

/* two-column cards */
.cols{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:768px){.cols{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:var(--s4)}
section.alt .card{background:var(--paper)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* credential list */
.creds{list-style:none;padding:0;margin:var(--s4) 0 0;max-width:none}
.creds li{padding:var(--s3) 0;border-top:1px solid var(--rule);margin:0}
.creds li:last-child{border-bottom:1px solid var(--rule)}
.creds .verify{font-size:14px;font-weight:600;white-space:nowrap;margin-left:var(--s2)}
.creds .note{display:block;color:var(--ink-soft);font-size:15px;margin-top:2px}

/* numbered process */
.steps{counter-reset:s;list-style:none;padding:0;margin:var(--s5) 0 0}
.steps li{counter-increment:s;position:relative;padding-left:48px;margin-bottom:var(--s4)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center}

/* facts list */
.facts{list-style:none;padding:0;margin:var(--s4) 0 0}
.facts li{padding-left:22px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:8px;border-radius:2px;background:var(--green)}

/* faq */
.faq{margin-top:var(--s5)}
.faq details{border-top:1px solid var(--rule);padding:var(--s3) 0}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:600;color:var(--blue);font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green-deep);font-size:22px;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:var(--s3) 0 0;color:var(--ink)}

/* forms */
form{max-width:560px;margin-top:var(--s5)}
.field{margin-bottom:var(--s4)}
label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:var(--ink)}
input[type=text],input[type=email],textarea{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);padding:11px 13px;border:1px solid #C7D0D8;border-radius:6px;background:var(--paper)}
input:focus,textarea:focus{border-color:var(--blue);outline:3px solid var(--green);outline-offset:1px}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px}

/* portrait */
.portrait{width:160px;height:160px;border-radius:10px;float:right;margin:0 0 var(--s4) var(--s4);border:1px solid var(--rule)}
@media (min-width:768px){.portrait{width:220px;height:220px}}

/* figures */
.fig{margin:var(--s5) 0 0;padding:0}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:8px;background:var(--paper);padding:var(--s4)}
.fig figcaption{font-size:15px;color:var(--ink-soft);margin-top:var(--s3);max-width:68ch}


/* before and after comparison */
.ba{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:768px){.ba{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.ba-panel{border:1px solid var(--rule);border-radius:10px;padding:var(--s4);background:var(--paper)}
.ba-panel.now{border-color:#D9C2C2;background:#FDF8F7}
.ba-panel.after{border-color:var(--green);background:#F2FBF7}
.ba-head{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--s3)}
.ba-panel.now .ba-head{color:#8A4B3F}
.ba-panel.after .ba-head{color:var(--green-deep)}
.ba-chain{list-style:none;margin:0;padding:0;max-width:none}
.ba-chain li{margin:0;padding:10px 0 10px 26px;position:relative;font-size:16px;line-height:1.45}
.ba-chain li+li{border-top:1px dashed var(--rule)}
.ba-chain li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:10px;border-radius:50%}
.ba-panel.now .ba-chain li::before{background:#C98B7C}
.ba-panel.after .ba-chain li::before{background:var(--green)}
.ba-panel.after .ba-chain li.human::before{background:var(--paper);border:2px solid var(--blue);width:8px;height:8px;top:16px}
.ba-foot{margin:var(--s3) 0 0;font-size:15px;font-weight:600}
.ba-panel.now .ba-foot{color:#8A4B3F}
.ba-panel.after .ba-foot{color:var(--green-deep)}

/* use case cards */
.uc{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:700px){.uc{grid-template-columns:repeat(3,1fr)}}
.uc article{border:1px solid var(--rule);border-radius:10px;padding:var(--s4);background:var(--paper);border-top:3px solid var(--green)}
.uc h3{margin:0 0 var(--s2);font-size:18px;color:var(--blue)}
.uc p{margin:0;font-size:16px;line-height:1.55;max-width:none}

/* connected categories */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:var(--s4);list-style:none;padding:0;max-width:none}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tiles li{margin:0;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);font-size:15px;font-weight:600;color:var(--ink);text-align:center}

/* numbers band */
.stats{display:grid;gap:var(--s4);margin-top:var(--s5);list-style:none;padding:0;max-width:none}
@media (min-width:700px){.stats{grid-template-columns:repeat(3,1fr)}}
.stats li{margin:0;padding:var(--s4) 0;border-top:3px solid var(--green)}
.stats .fig{display:block;font-size:34px;line-height:1.1;font-weight:600;color:var(--blue);letter-spacing:-.02em}
@media (min-width:768px){.stats .fig{font-size:42px}}
.stats .cap{display:block;margin-top:6px;font-size:15px;color:var(--ink)}


/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:16px}
.cmp th,.cmp td{border-bottom:1px solid var(--rule);padding:14px 12px;text-align:left;vertical-align:top}
.cmp thead th{border-bottom:2px solid var(--blue);color:var(--blue);font-size:17px;font-weight:600}
.cmp thead th:first-child{border-bottom-color:var(--rule)}
.cmp tbody th{font-weight:400;color:var(--ink-soft);width:34%;font-size:15px}
.cmp .flag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);background:#E9F7F0;border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:2px}
@media (max-width:599px){.cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block}.cmp thead{display:none}.cmp tbody th{width:auto;padding-bottom:0;border:0}.cmp td{border:0;padding-top:4px}.cmp td::before{content:attr(data-l);display:block;font-size:13px;font-weight:600;color:var(--blue)}.cmp tr{border-bottom:1px solid var(--rule);padding:10px 0}}

/* deliverables checklist */
.deliv{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:12px}
@media (min-width:700px){.deliv{grid-template-columns:1fr 1fr;gap:12px var(--s5)}}
.deliv li{margin:0;padding-left:30px;position:relative;font-size:16px;line-height:1.5}
.deliv li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:#E9F7F0;border:1.5px solid var(--green)}
.deliv li::after{content:"";position:absolute;left:6px;top:11px;width:6px;height:3px;border-left:2px solid var(--green-deep);border-bottom:2px solid var(--green-deep);transform:rotate(-45deg)}

/* career timeline */
.tl{list-style:none;padding:0;margin:var(--s4) 0 0;border-left:2px solid var(--rule)}
.tl li{margin:0 0 var(--s4);padding:0 0 0 var(--s4);position:relative}
.tl li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--paper)}
.tl .yr{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep)}
.tl .what{display:block;font-weight:600;color:var(--blue);font-size:17px;margin-top:2px}
.tl .det{display:block;font-size:15px;color:var(--ink);margin-top:2px}

/* contact details */
.nap{list-style:none;padding:0;margin:var(--s4) 0 0}
.nap li{margin-bottom:var(--s2)}
.nap .lbl{color:var(--ink-soft);display:inline-block;min-width:72px}

/* footer */
.site-foot{background:var(--blue);color:#DCE6F0;padding:var(--s6) 0 var(--s5);margin-top:var(--s7)}
.site-foot h2{color:#fff;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--s3)}
.foot-cols{display:grid;gap:var(--s5)}
@media (min-width:768px){.foot-cols{grid-template-columns:2fr 1fr 1.4fr}}
.site-foot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.site-foot a:hover{border-bottom-color:var(--green)}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:var(--s2)}
.site-foot p{color:#DCE6F0}
.foot-mark{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3)}
.foot-mark img{width:30px;height:30px;background:#fff;border-radius:5px;padding:2px}
.foot-mark span{color:#fff;font-weight:600;letter-spacing:.01em}
.foot-base{border-top:1px solid rgba(255,255,255,.2);margin-top:var(--s5);padding-top:var(--s4);font-size:14px}
.foot-base .uen{display:block;margin-top:4px;color:#BFD0E2}
.site-foot :focus-visible{outline-color:#fff}

/* utility */
.mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)}
.tagline{font-style:normal;color:#DCE6F0}
.center-narrow{max-width:640px}
.mt0{margin-top:0}
.small{font-size:15px;color:var(--ink-soft)}
@media print{.site-head,.site-foot,.btn-row{display:none}body{font-size:12pt}}