/* N+1 site. Editorial base, network moments. Tokens from the N+1 Design System (9 Nov 2026). */
:root{
  --gold:#d7ac30; --gold-light:#f0e897; --cyan:#06e4e1; --blue:#0000a6;
  --ink:#111111; --slate:#303841; --white:#ffffff;
  --surface:#ffffff; --surface-alt:#f3f4f4; --text:#111111; --muted:#59646d; --line:#dce0e3;
  --accent-edge:#9a7a1f; --panel-raised:#3a434d; --panel-muted:#dce0e3;
  --heading:"Roboto",Arial,sans-serif; --body:"Montserrat",Arial,sans-serif;
  --max:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text);font:16px/1.65 var(--body)}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--heading);margin:0;text-wrap:balance;color:inherit}
h1{font-size:clamp(36px,5.2vw,56px);line-height:1.08;letter-spacing:-.01em;font-weight:700}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;font-weight:700}
h3{font-size:21px;line-height:1.3;font-weight:500}
p{margin:0}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.panel a:focus-visible,.panel button:focus-visible{outline-color:var(--cyan)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:700 12px/16px var(--heading);letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.panel .eyebrow{color:var(--gold)}
.lead{font-size:20px;line-height:1.6;max-width:62ch}
.prose{max-width:64ch;display:flex;flex-direction:column;gap:16px}
.muted{color:var(--muted)}
.caption{font-size:13px;line-height:20px;color:var(--muted)}
.panel .caption,.panel .muted{color:var(--panel-muted)}
.src{font:500 12px/18px var(--heading);color:var(--muted)}
.panel .src{color:var(--panel-muted)}

/* header */
.site-head{background:var(--ink);color:var(--white);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--ink);z-index:21}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-block:14px}
.logo img{height:34px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-left:auto;font:500 14px/20px var(--heading)}
.nav a{color:var(--white);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.nav a.btn{padding:10px 16px;border-bottom:0}
@media(max-width:720px){.nav{margin-left:0;width:100%;gap:2px 18px}}

/* buttons */
.btn{display:inline-block;font:600 14px/20px var(--body);padding:12px 20px;border-radius:3px;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--accent-edge)}
.btn-gold:hover{background:#e3bb45}
.btn-line{color:var(--ink);border-color:var(--ink);background:transparent}
.btn-line:hover{background:var(--surface-alt)}
.panel .btn-line{color:var(--white);border-color:var(--white)}
.panel .btn-line:hover{background:var(--panel-raised)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.more{font:600 14px/20px var(--body);color:var(--blue);text-decoration:none;border-bottom:2px solid var(--gold);align-self:flex-start;padding-bottom:2px}
.panel .more{color:var(--white)}

/* sections */
section{padding-block:64px}
.panel{background:var(--slate);color:var(--white)}
.band-alt{background:var(--surface-alt)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;max-width:860px}
.sec-head .rule{width:56px;height:3px;background:var(--gold)}
.stack{display:flex;flex-direction:column;gap:24px}

/* hero */
.hero{position:relative;color:var(--white);background:var(--slate) url("assets/np1-network-slate.svg") right center/cover no-repeat;border-bottom:7px solid var(--gold)}
.hero .wrap{padding-block:96px 88px;display:flex;flex-direction:column;gap:24px}
.hero h1{max-width:15ch}
.hero .lead{color:var(--panel-muted)}
.page-hero{background:var(--slate);color:var(--white);border-bottom:7px solid var(--gold);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0 0 0 auto;width:45%;background:url("assets/np1-bg-dots.svg") right center/cover no-repeat;opacity:.55;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;padding-block:72px 64px;display:flex;flex-direction:column;gap:18px}
.page-hero .lead{color:var(--panel-muted)}

/* grids and boxes */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.box{border:1px solid var(--line);border-radius:5px;padding:24px;display:flex;flex-direction:column;gap:10px;background:var(--surface);min-width:0}
.panel .box{background:var(--panel-raised);border-color:#4a5561}
.box h3{display:flex;gap:10px;align-items:baseline}
.box h3::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--gold);transform:translateY(-1px)}
.box p{font-size:15px;line-height:1.6}
.box .src{margin-top:auto}

/* figure table */
.ftable{width:100%;border-collapse:collapse}
.ftable th,.ftable td{text-align:left;vertical-align:top;padding:16px 12px;border-bottom:1px solid var(--line)}
.ftable th{font:700 15px/1.4 var(--heading);width:30%;min-width:140px}
.ftable td{font-size:15px}
.ftable tr:first-child th,.ftable tr:first-child td{border-top:3px solid var(--gold)}
.tscroll{overflow-x:auto}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px}
.stat{border-top:3px solid var(--gold);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.stat .n{font:700 clamp(44px,6vw,64px)/1 var(--heading);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.panel .stat .n{color:var(--gold)}

/* dots */
.dots{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.d{width:22px;height:22px;border-radius:50%;background:#c9ced2;display:inline-block}
.panel .d{background:#56616c}
.d.g{background:var(--gold)}
.d.ring{background:transparent;border:2px solid var(--gold)}
.divider{display:flex;justify-content:center;gap:10px;padding-block:8px}
.divider i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.divider i:nth-child(2){background:var(--slate)}
.divider i:nth-child(4){background:var(--slate)}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}
.legend span{display:flex;align-items:center;gap:8px}
.legend .d{width:14px;height:14px}
.ratio{display:grid;gap:18px}
.ratio-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:16px;align-items:center}
@media(max-width:560px){.ratio-row{grid-template-columns:1fr}}

/* stage chart */
.stage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;font:500 12px/1.3 var(--heading)}
.stage .lab{text-align:center;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line)}
.stage .lab.on{color:var(--ink);font-weight:700}
.stage .bar{border-radius:3px;padding:10px 12px;font-size:13px}
.bar.dev{grid-column:1 / span 3;background:var(--surface-alt);border:1px solid var(--line)}
.bar.inv{grid-column:4 / span 2;background:#dce0e3}
.bar.np1{grid-column:2 / span 3;background:var(--gold);color:var(--ink);font-weight:700}
.chart-box{border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:14px;overflow-x:auto}
.chart-box .stage{min-width:560px}

/* feature split */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0;align-items:stretch}
.split .ph{min-height:320px;background-size:cover;background-position:center}
.split .txt{padding:48px max(16px,4vw);display:flex;flex-direction:column;gap:18px;justify-content:center}
.photo{margin:0;display:flex;flex-direction:column;gap:8px}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photo.tall img{aspect-ratio:3/4}

/* portfolio cards */
.pcard{border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface)}
.pcard img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pcard .body{padding:22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.chip{align-self:flex-start;font:600 11px/16px var(--heading);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:3px;background:var(--surface-alt);border:1px solid var(--line)}
.chip.go{background:var(--gold-light);border-color:var(--accent-edge)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;border-top:1px solid var(--line);padding-top:12px}
.fact{display:flex;flex-direction:column;gap:2px}
.fact b{font:700 22px/1.1 var(--heading);font-variant-numeric:tabular-nums}
.fact span{font-size:12px;line-height:1.4;color:var(--muted)}
.pcard .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:8px}

/* map */
.map{background:var(--slate);border-radius:0;padding:12px;overflow-x:auto}
.map svg{display:block;width:100%;min-width:520px;height:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:0;counter-reset:s}
.step{padding:20px 18px 20px 0;border-top:3px solid var(--gold);display:flex;flex-direction:column;gap:8px;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);font:700 32px/1 var(--heading);color:var(--slate)}
.panel .step::before{color:var(--gold)}
.step p{font-size:14px;line-height:1.55}

/* people */
.person{display:flex;gap:16px;align-items:flex-start}
.mono{flex:0 0 64px;height:64px;border-radius:50%;background:var(--slate);color:var(--gold);display:grid;place-items:center;font:700 20px/1 var(--heading)}
.quote{border-top:3px solid var(--gold);padding-top:18px;font:500 22px/1.45 var(--heading);max-width:40ch}

/* forms */
form{display:grid;gap:16px;max-width:640px}
label{font:600 14px/20px var(--body);display:flex;flex-direction:column;gap:6px}
input,textarea,select{font:16px/1.5 var(--body);padding:12px 14px;border:1px solid #8a949c;border-radius:3px;background:var(--white);color:var(--ink);width:100%}
textarea{min-height:120px;resize:vertical}
.hidden{position:absolute;left:-9999px}

/* footer */
.site-foot{background:var(--ink);color:var(--panel-muted);font-size:14px}
.site-foot .wrap{padding-block:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px}
.site-foot a{color:var(--white);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot img{height:30px;width:auto}
.site-foot .tag{font:700 15px/1.4 var(--heading);color:var(--gold);margin-top:12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legal{grid-column:1/-1;border-top:1px solid #2b3238;padding-top:20px;font-size:12px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(min-width:900px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hero{background-image:linear-gradient(90deg,rgba(48,56,65,.92) 0%,rgba(48,56,65,.7) 45%,rgba(48,56,65,0) 75%),url("assets/np1-network-slate.svg")}
@media(max-width:720px){.hero{background-image:linear-gradient(rgba(48,56,65,.86),rgba(48,56,65,.86)),url("assets/np1-network-slate.svg")}}
.hero{background-image:linear-gradient(90deg,rgba(48,56,65,.82) 0%,rgba(48,56,65,.45) 45%,rgba(48,56,65,0) 70%),url("assets/np1-network-hero.svg")}
@media(max-width:720px){.hero{background-image:linear-gradient(rgba(48,56,65,.78),rgba(48,56,65,.78)),url("assets/np1-network-hero.svg")}}
.stagewrap{overflow-x:auto}
.stagestrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-width:640px}
.sc{border-top:3px solid var(--line);padding:14px 4px 0;display:flex;flex-direction:column;gap:8px;min-height:170px}
.sc.on{border-top-color:var(--gold)}
.sc .sn{font:700 18px/1.2 var(--heading)}
.sc .sd{font-size:13px;line-height:1.45;color:var(--muted)}
.sc .co{align-self:flex-start;background:var(--slate);color:var(--white);font:600 13px/18px var(--heading);padding:6px 12px;border-radius:3px;border-left:4px solid var(--gold)}
/* PlusCo brand chips and buttons: colours from each company's own brand */
.co.b-ezu,.btn.b-ezu{background:#F8972A;color:#152012;border-left-color:#152012;border-color:#B35F0C}
.co.b-uus,.btn.b-uus{background:#017097;color:#fff;border-left-color:#59CAEF}
.co.b-gk,.btn.b-gk{background:#006937;color:#fff;border-left-color:#ffc534}
.co.b-kyn{background:#111;color:#fff;border-left-color:#8a5a3b}
.co.b-pgf{background:#eef5dc;color:#59646d;border-left-color:#a7da36;font-weight:500}
.btn.b-ezu,.btn.b-uus,.btn.b-gk{padding:8px 14px;font-size:13px}
.btn.b-ezu:hover,.btn.b-uus:hover,.btn.b-gk:hover{filter:brightness(1.08)}
.engine-fig{overflow-x:auto;background:var(--white);border:1px solid var(--line);padding:16px}
.engine-fig svg{display:block;width:100%;min-width:600px;max-width:820px;height:auto;margin:0 auto}
/* figure cards: brand panel for diagrams */
.figcard{margin:0;background:var(--slate);color:var(--white);border-bottom:7px solid var(--gold);padding:32px clamp(16px,4vw,48px) 24px;display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden}
.figcard::before{content:"";position:absolute;inset:0 0 auto auto;width:40%;height:180px;background:url("assets/np1-bg-dots.svg") right top/cover no-repeat;opacity:.35;pointer-events:none}
.fc-head{display:flex;flex-direction:column;gap:8px;position:relative;max-width:640px}
.fc-head .eyebrow{color:var(--gold)}
.fc-head h3{font:700 clamp(22px,2.6vw,28px)/1.25 var(--heading);color:var(--white)}
.figcard svg{display:block;width:100%;height:auto;position:relative}
.fig-d svg{max-width:900px;margin:0 auto}
.fig-m{display:none}
@media(max-width:640px){.fig-d{display:none}.fig-m{display:block}}
.fc-note{font-size:12px;color:var(--panel-muted);position:relative}
/* text beside a figure card on wide screens, stacked on narrow */
.fig-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.fig-row .sec-head{margin-bottom:20px}
.fig-row .figcard{padding:24px clamp(16px,2.5vw,32px) 20px;gap:12px}
.fig-row .fc-head h3{font-size:clamp(18px,1.8vw,22px)}
@media(max-width:960px){.fig-row{grid-template-columns:minmax(0,1fr)}}
.h1-mission{font-size:clamp(30px,3.8vw,46px);line-height:1.15;max-width:24ch}
.split .txt h2{color:inherit}
.hero h1.h1-mission{max-width:26ch}
.panel .fact span{color:var(--panel-muted)}
.panel .facts{border-top-color:#4a5561}
/* portfolio card logos */
.pcard .foot{min-height:40px}
.pcard-logo{display:flex;align-items:center;justify-content:center;width:100%;height:76px;padding:12px 18px;background:#fff;border:1px solid var(--line);border-radius:5px}
.pcard-logo img{max-height:50px;width:auto;max-width:80%;object-fit:contain}
.pcard-logo.tile img{max-height:46px;border-radius:4px}
a.pcard-logo{transition:border-color .15s, box-shadow .15s}
a.pcard-logo:hover{border-color:var(--slate);box-shadow:0 2px 0 var(--line)}
/* people tiers, portraits, partner logo slots */
.tier-label{font:700 12px/16px var(--heading);letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin:40px 0 18px}
.portrait{flex:0 0 64px;width:64px;height:64px;border-radius:50%;object-fit:cover}
.portrait.mono{background:var(--slate);color:var(--gold);display:grid;place-items:center;font:700 20px/1 var(--heading)}
.li{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font:600 13px/1 var(--heading);color:var(--blue);text-decoration:none}
.li svg{color:#0a66c2}
.li:hover{color:var(--ink)}
.logo-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.logo-slot{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:64px;padding:10px 20px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--muted);font:600 14px/1.3 var(--heading);text-align:center;text-decoration:none}
.logo-slot img{max-height:38px;max-width:190px;width:auto;object-fit:contain;display:block}
.logo-slot.sm{min-width:130px;min-height:46px;padding:8px 14px;font-size:13px;margin-top:12px}
.logo-slot.cta{border-style:dashed;border-color:var(--gold);color:var(--blue)}
a.logo-slot:hover{border-color:var(--slate);color:var(--ink)}