/* Homepage sections and drawing styles. */

/* ---------- drawing primitives (work inside <use> via inherited custom properties) ---------- */
.ns-lbl,.ns-zl{fill:var(--ns-ink-2)}
.ns-hair{stroke:var(--ns-rule);stroke-width:1}
.ns-ground{stroke:var(--ns-ink);stroke-width:2.5}
.ns-hatch{stroke:var(--ns-ink);stroke-width:1;opacity:.45}
/* colour roles: data and connections = verdigris (as Technology & Systems); energy = ochre; trees = leaf green; flow arrows = red */
.ns-main-w,.ns-drop-w{fill:none;stroke:var(--ns-verdigris);stroke-width:2}
.ns-main-p,.ns-drop-p{fill:none;stroke:var(--ns-ochre);stroke-width:2}
.ns-valve{fill:var(--ns-paper);stroke:var(--ns-verdigris);stroke-width:2}
.ns-valve.on{fill:var(--ns-verdigris)}
/* words typing in and out around each part of the hero drawing */
.ns-words{font-family:"NS Hand","Segoe Print","Comic Sans MS",cursive;letter-spacing:.02em;font-stretch:normal}
.ns-words text{fill:var(--ns-ink-2);font-weight:400}
.ns-sv{fill:none;stroke:var(--ns-survey);stroke-width:1.5;stroke-dasharray:5 5}
.ns-dim{fill:none;stroke:var(--ns-survey);stroke-width:1}
.ns-ln{fill:none;stroke:var(--ns-ink);stroke-width:1.8}
.ns-ln.thin,.ns-ln .thin{stroke-width:1.2}
.ns-fig{fill:none;stroke:var(--ns-ink);stroke-width:1.6;stroke-linecap:square}
.ns-figf{fill:var(--ns-ink)}
.ns-net{fill:none;stroke:var(--ns-verdigris);stroke-width:1.5}
/* arrows between the part headings of the hero drawing: people, then organisations, then systems */
.ns-flow path{fill:none;stroke:var(--ns-redline);stroke-width:1.4}
.ns-flow .march{stroke-dasharray:4 5}
.ns-rl{fill:none;stroke:var(--ns-redline);stroke-width:2}
.ns-rlt{fill:var(--ns-redline)}
.ns-fill{fill:var(--ns-ink)}
/* sky and trees in the hero drawing */
.ns-sky{fill:none;stroke:var(--ns-survey);stroke-width:1.2}
.ns-sun{fill:none;stroke:var(--ns-ochre);stroke-width:1.4;stroke-linecap:round}
.ns-bird{fill:none;stroke:var(--ns-ink-2);stroke-width:1.2;stroke-linecap:round}
.ns-tree{fill:#5E8F4E} /* muted leaf green: living things, kept apart from the verdigris lines */
.ns-trunk{fill:none;stroke:var(--ns-ink);stroke-width:2}
/* lighter sky and trees around People and Organisations, so the planted Systems trees read as the finished state */
#d1-art .lite{opacity:.4}
/* the hero's floor-to-reorganise cloud is drawn in ink, so red is kept for the People, Organisations, Systems arrows */
#d1-art .ns-cloud{stroke:var(--ns-ink);stroke-dasharray:5 4} /* dashed ink: still marks the floor to reorganise, without another colour */
.ns-win{fill:var(--ns-paper)}
.ns-sign{fill:var(--ns-ochre)}
.ns-rampf{fill:var(--ns-verdigris)}
.ns-ramp{fill:var(--ns-survey)} /* hero city entrance ramp: grey */
.ns-sb{fill:var(--ns-ink);stroke:var(--ns-ink)}
.ns-sb.o{fill:none}
.ns-hl{fill:none;stroke:var(--ns-ochre);stroke-width:2.5}
.ns-ochre-u{stroke:var(--ns-ochre);stroke-width:4}
.ns-focus{fill:var(--ns-ochre)}
.ns-focusb{stroke:var(--ns-ochre);stroke-width:2.5}
.ns-hlfill{fill:var(--ns-ink);stroke:var(--ns-ochre);stroke-width:3}
.ns-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 1. hero ---------- */
.ns-hero{padding-block:var(--ns-s7) var(--ns-s7)}
.ns-hero-grid{display:grid;gap:var(--ns-s6)}
/* Desktop: the brand line alone fills the first view, edge to edge across the full content width.
   The lead text and buttons sit in a row beneath it: lead on the left, the two buttons on the right. */
@media (min-width:1024px){
  .ns-hero{padding-block:var(--ns-s8) var(--ns-s7)}
  .ns-hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter);row-gap:calc(var(--ns-s7) + var(--ns-s2));align-items:end}   /* 56px: lead and buttons sit closer under the title */
  .ns-hero-title{grid-column:1 / -1;grid-row:1}
  .ns-hero .ns-brandline{font-size:calc(100cqi / var(--bl-w))}
  .ns-hero-aside{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:subgrid;align-items:end}
  .ns-hero-aside .ns-lead{grid-column:1 / 8;max-width:none}
  .ns-hero-actions{grid-column:9 / 13}
}
.ns-hero-title{container-type:inline-size;min-width:0}
/* --bl-w: width of the longest line ("Solve What Matters.") in em, measured in the browser. */
.ns-brandline{--bl-w:6.72;font-family:var(--ns-f-display);font-weight:800;font-stretch:82%;
  font-size:min(var(--ns-t-d1), calc(100cqi / var(--bl-w)));line-height:.9;letter-spacing:-.035em;display:grid;gap:.05em;margin:0}
.ns-bl{display:block;white-space:nowrap;width:max-content}
.ns-bl-1{font-family:"Bricolage Outline",var(--ns-f-display);font-stretch:normal;color:transparent;-webkit-text-stroke:2px var(--ns-ink)}
@supports not (-webkit-text-stroke:2px #000){.ns-bl-1{color:var(--ns-ink)}}
.ns-bl-mark{position:relative;display:inline-block}
.ns-bl-mark::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:.04em;height:.09em;background:var(--ns-redline);transform:skewX(-14deg);transform-origin:left center}
/* line 3's ink block runs the full width of line 2, out to the end of the red underline */
.ns-brandline{width:max-content;max-width:100%}
.ns-bl-3{width:auto}
.ns-bl-fill{display:block;background:var(--ns-ink);color:var(--ns-paper);padding:0 .08em .02em;margin-left:-.08em;margin-right:-.03em}

.ns-hero-aside{display:grid;gap:var(--ns-s5);align-content:end}
/* mobile order: title, then lead and actions */
.ns-hero-title{order:1}.ns-hero-aside{order:3}
.ns-hero-actions{display:flex;flex-wrap:wrap;gap:var(--ns-s3)}
/* Desktop: the two buttons share the column in two equal halves with the same 12px gap as phones and tablets,
   so Find your route ends at the right edge. */
@media (min-width:1024px){
  .ns-hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ns-hero-actions .ns-btn{justify-content:center;padding-inline:12px;white-space:nowrap}
}

/* Phones: the brand line is stretched tall (fills the width, then scaled 1.7x
   vertically from the top; the bottom margin reserves the extra height, as transforms take no layout space).
   The two hero buttons share one row: Discuss a Project on the left, Find your route on the right, edge to edge. */
@media (max-width:767px){
  .ns-brandline{font-size:calc(100cqi / var(--bl-w));--sy:1.7;transform:scaleY(var(--sy));transform-origin:left top;
    margin-bottom:calc((var(--sy) - 1) * 2.8em)}
  .ns-hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ns-s3)}
  .ns-hero-actions .ns-btn{justify-content:center;padding-inline:8px;gap:6px;white-space:nowrap;font-size:clamp(.8125rem,3.6vw,1rem)}
}
/* Tablet (768 to 1023px): the hero stacks, so every row runs edge to edge.
   Brand line fills the column, lead runs full width, the two buttons share the row. */
@media (min-width:768px) and (max-width:1023px){
  .ns-hero .ns-brandline{font-size:calc(100cqi / var(--bl-w))}
  .ns-hero-aside .ns-lead{max-width:none}
  .ns-hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .ns-hero-actions .ns-btn{justify-content:center}
}

.ns-hero-fig{margin-top:var(--ns-s7);border-top:1px solid var(--ns-ink)}
.ns-hero-fig svg{width:100%;height:auto}
/* desktop: the whole section. phones: the same drawing, one zone at a time */
.ns-hero-fig .ns-d1{display:none}
.ns-pan-frames{display:grid;gap:var(--ns-s4)}
.ns-pan-f + .ns-pan-f{border-top:1px solid var(--ns-rule)}
.ns-pan-steps{display:none}
/* swipe mode, set by main.js on phones: one zone at a time, swipe sideways or tap a name; vertical scrolling passes straight through */
.ns-pan.swipe .ns-pan-steps{display:flex;gap:var(--ns-s2);margin:var(--ns-s4) 0 var(--ns-s3)}
.ns-pan.swipe .ns-pan-steps button{flex:1;text-align:left;background:none;border:0;border-top:3px solid var(--ns-rule);padding:8px 0 4px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ns-ink-2);cursor:pointer;transition:border-color var(--ns-ui) var(--ns-ease),color var(--ns-ui) var(--ns-ease)}
.ns-pan.swipe .ns-pan-steps button[aria-pressed="true"]{border-top-color:var(--ns-redline);color:var(--ns-ink)}
.ns-pan.swipe .ns-pan-view{overflow:hidden;touch-action:pan-y}
.ns-pan.swipe .ns-pan-frames{display:flex;gap:16px;will-change:transform}
.ns-pan.swipe .ns-pan-f{flex:0 0 100%;border:0}
.ns-pan.swipe .ns-pan-frames.glide{transition:transform 380ms var(--ns-ease)}
@media (min-width:768px){.ns-hero-fig .ns-d1{display:block}.ns-pan{display:none}}
.ns-figcap{display:flex;justify-content:space-between;gap:var(--ns-s3);flex-wrap:wrap;margin-top:var(--ns-s3)}

/* ---------- 2. scales ---------- */
.ns-scene-steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--ns-s7)}
.ns-step{display:grid;gap:var(--ns-s3);align-content:start}
.ns-mini{border:1px solid var(--ns-rule);background:var(--ns-paper);padding:var(--ns-s4)}
.ns-mini svg{width:100%;height:auto}
.ns-step-t{font-family:var(--ns-f-display);font-weight:700;font-stretch:92%;font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);line-height:1.15;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.ns-scene-fig{display:none}
.ns-scene-close{margin-top:var(--ns-s7);padding-top:var(--ns-s5);border-top:1px solid var(--ns-rule);max-width:none;container-type:inline-size}
/* closing line set to fill the full width: one line on desktop and tablet, two lines on phones.
   --fit-1 / --fit-2: measured width of the text in em (one line / longest phone line) */
.ns-fit{--fit-1:17.2;--fit-2:11.95;display:block;font-family:var(--ns-f-display);font-weight:800;font-stretch:86%;letter-spacing:-.03em;line-height:.98;
  font-size:calc(100cqi / var(--fit-1));white-space:nowrap}
.ns-fit-l{display:inline}
/* "Everything is connected." between the hero and its drawing: same full-width type-in line, one line at every width */
.ns-connect{margin:var(--ns-s8) 0 0;padding-top:var(--ns-s5);border-top:1px solid var(--ns-ink);max-width:none;container-type:inline-size}
.ns-connect .ns-fit{--fit-1:8.68;--fit-2:8.68}
/* the rule now sits above the line, so the drawing follows straight on without its own top rule */
.ns-connect + .ns-hero-fig{margin-top:var(--ns-s5);border-top:0}
@media (max-width:767px){.ns-fit{font-size:calc(100cqi / var(--fit-2))}.ns-fit-l{display:block}}
@media (min-width:768px){.ns-scene-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ns-gutter)}}
@media (min-width:1024px){
  .js .ns-scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ns-gutter)}
  .js .ns-scene-steps{grid-column:1 / 6;grid-template-columns:1fr;gap:0}
  .js .ns-step{min-height:62vh;align-content:center;border-left:1px solid var(--ns-rule);padding-left:var(--ns-s5);transition:border-color var(--ns-ui) var(--ns-ease)}
  .js .ns-step.is-active{border-left-color:var(--ns-ochre)}
  .js .ns-step .ns-mini{display:none}
  .js .ns-scene-fig{display:block;grid-column:6 / 13}
  .ns-scene-sticky{position:sticky;top:calc(64px + 8vh);border:1px solid var(--ns-ink);background:var(--ns-paper)}
}
.ns-scene-tb{display:flex;justify-content:space-between;gap:var(--ns-s3);padding:var(--ns-s3) var(--ns-s4);border-bottom:1px solid var(--ns-ink)}
.ns-scene-stage{position:relative;aspect-ratio:480 / 360;max-width:100%}
.ns-s{position:absolute;inset:0;width:100%;height:100%;padding:var(--ns-s5);opacity:0;transform:scale(1.12);transition:opacity 600ms var(--ns-ease),transform 800ms var(--ns-ease)}
.ns-scene-stage[data-active="1"] .ns-s-1,
.ns-scene-stage[data-active="100"] .ns-s-100,
.ns-scene-stage[data-active="10000"] .ns-s-10000{opacity:1;transform:none}
.ns-scene-bar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ns-ink)}
.ns-scene-bar i{height:6px;background:transparent}
.ns-scene-bar i+i{border-left:1px solid var(--ns-ink)}
.ns-scene-bar i.on{background:var(--ns-ink)}

/* ---------- 3. where we work ---------- */
.ns-cols{display:grid;gap:0;grid-template-columns:1fr}
.ns-col{position:relative;display:grid;gap:var(--ns-s4);align-content:start;padding:var(--ns-s5) 0 var(--ns-s6) var(--ns-s5)}
.ns-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ns-ink);transform-origin:top}
.ns-ratio{font-family:var(--ns-f-display);font-weight:800;font-stretch:80%;font-size:clamp(2.75rem,2rem + 2.4vw,4rem);line-height:1;letter-spacing:-.03em}
.ns-ex{list-style:none;padding:0;margin:0;display:grid;gap:var(--ns-s2);border-top:1px solid var(--ns-rule);padding-top:var(--ns-s3)}
.ns-ex li{display:flex;gap:var(--ns-s3);align-items:baseline;font-size:.9375rem}
.ns-ex li::before{content:"";flex:none;width:10px;height:0;border-top:1.5px solid var(--ns-ink);transform:translateY(-.3em)}
.ns-col .ns-link{justify-self:start;margin-top:auto}
.ns-band{grid-column:1 / -1;margin-top:var(--ns-s5)}
.ns-band-line svg{width:100%;height:24px}
.ns-band-path{stroke:var(--ns-verdigris);stroke-width:3;fill:none}
.ns-band-line circle{fill:var(--ns-paper);stroke:var(--ns-verdigris);stroke-width:2.5}
.ns-band-body{display:grid;gap:var(--ns-s3);padding:var(--ns-s4) 0 0 var(--ns-s5);border-left:3px solid var(--ns-verdigris)}
.ns-band .ns-link{justify-self:start;color:var(--ns-verdigris)}
@media (min-width:768px){
  .ns-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* ratio, heading, description, examples and link share rows across the three columns */
  .ns-col{grid-row:span 5;grid-template-rows:subgrid;row-gap:var(--ns-s4)}
  .ns-col .ns-ex{align-self:start}
  .ns-col .ns-link{align-self:start;margin-top:var(--ns-s3)}
  .ns-band-body{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter);align-items:baseline}
  .ns-band-body .ns-ann{grid-column:1 / -1}
  .ns-band-body .ns-h3{grid-column:1 / 5}
  .ns-band-body .ns-body{grid-column:5 / 10}
  .ns-band-body .ns-link{grid-column:10 / 13;justify-self:end}
  .ns-band-body .ns-body:last-child{grid-column:5 / -1}   /* no link beside it: the text runs to the right edge */
}

/* ---------- 4. method ---------- */
.ns-method .ns-plate-h{border-top-color:var(--ns-ink)}
.ns-panels{display:grid;gap:var(--ns-s6)}
.ns-panel{display:grid;gap:var(--ns-s4);align-content:start}
.ns-pfig{width:100%;height:auto;border:1px solid var(--ns-rule);background:var(--ns-sheet);padding:var(--ns-s3)}
.ns-ptext{display:grid;gap:var(--ns-s3);justify-items:start}
.ns-ptext p{color:var(--ns-ink-2);max-width:44ch}
.ns-method-cap{margin-top:var(--ns-s5)}
@media (min-width:768px){.ns-panels{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ns-gutter)}}

.ns-tabs{display:flex;gap:0;border-bottom:1px solid var(--ns-rule);margin-bottom:var(--ns-s6);overflow-x:auto}
.ns-tabs [role="tab"]{display:flex;align-items:baseline;gap:var(--ns-s3);background:none;border:0;border-bottom:3px solid transparent;padding:var(--ns-s3) var(--ns-s5) var(--ns-s3) 0;margin-right:var(--ns-s5);cursor:pointer;font-family:var(--ns-f-display);font-weight:750;font-stretch:90%;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);letter-spacing:-.015em;color:var(--ns-ink-2);white-space:nowrap}
.ns-tabs [role="tab"][aria-selected="true"]{color:var(--ns-ink);border-bottom-color:var(--ns-redline)}
.ns-tabs [role="tab"]:hover{color:var(--ns-ink)}
.ns-tabs .ns-ann{font-size:.6875rem}
/* tab mode (JS, motion allowed) */
.ns-method.tabbed .ns-panels{grid-template-columns:1fr}
.ns-method.tabbed .ns-panel{grid-template-columns:1fr;gap:var(--ns-s5)}
@media (min-width:1024px){
  .ns-method.tabbed .ns-panel{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ns-gutter);align-items:end}
  .ns-method.tabbed .ns-pfig{grid-column:1 / 9;max-height:52vh;width:auto;max-width:100%}
  .ns-method.tabbed .ns-ptext{grid-column:9 / 13;padding-bottom:var(--ns-s3)}
  .ns-method.tabbed.scrolly .ns-method-track{height:240vh}
  .ns-method.tabbed.scrolly .ns-method-sticky{position:sticky;top:64px;padding-block:var(--ns-s7)}
}
.ns-method.tabbed .ns-ptext .ns-h3{font-size:var(--ns-t-d2);font-weight:750;font-stretch:88%;line-height:1;letter-spacing:-.025em}

/* ---------- 5. problems ---------- */
.ns-plist{list-style:none;padding:0;margin:0;border-top:1px solid var(--ns-ink)}
.ns-plist li{position:relative;border-bottom:1px solid var(--ns-rule)}
.ns-plist a{display:grid;grid-template-columns:auto 1fr;gap:var(--ns-s2) var(--ns-s4);align-items:baseline;padding:var(--ns-s5) 0;text-decoration:none}
.ns-plist .ns-tag{justify-self:start}
.ns-pt{grid-column:1 / -1;font-family:var(--ns-f-display);font-weight:700;font-stretch:94%;font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.2;letter-spacing:-.012em;text-wrap:balance;
  background:linear-gradient(var(--ns-redline),var(--ns-redline)) no-repeat 0 100% / 0 2px;padding-bottom:4px;justify-self:start;transition:background-size 300ms var(--ns-ease)}
.ns-plist a:hover .ns-pt,.ns-plist a:focus-visible .ns-pt{background-size:100% 2px}
.ns-pa{grid-column:1 / -1}
.ns-plist .ns-tag--confirm{position:absolute;right:0;top:var(--ns-s5)}
@media (min-width:768px){
  .ns-plist a{grid-template-columns:110px minmax(0,1fr) 220px;gap:var(--ns-s5)}
  .ns-pt{grid-column:auto}
  .ns-pa{grid-column:auto;text-align:right}
  .ns-plist li[data-confirm] .ns-pa{padding-right:110px}
  .ns-plist .ns-tag--confirm{top:calc(var(--ns-s5) + 30px)}
}

/* ---------- 6. resource center ledger ---------- */
.ns-ledger-wrap{border-top:1px solid var(--ns-ink)}
.ns-ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.ns-ledger th,.ns-ledger td{text-align:left;padding:var(--ns-s4) var(--ns-s3) var(--ns-s4) 0;border-bottom:1px solid var(--ns-rule);vertical-align:baseline}
.ns-ledger thead th{font-family:var(--ns-f-mono);font-size:var(--ns-t-ann);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ns-ink-2);padding-block:var(--ns-s3)}
.ns-ledger tbody th{font-family:var(--ns-f-display);font-weight:700;font-stretch:94%;font-size:1.25rem;letter-spacing:-.01em;line-height:1.2}
.ns-sched{display:block;font-family:var(--ns-f-mono);font-size:.6875rem;font-weight:400;letter-spacing:.04em;color:var(--ns-ink-2);margin-top:4px;text-transform:uppercase;font-stretch:100%}
.ns-ledger .num{text-align:right}
.ns-ledger td.num{font-family:var(--ns-f-display);font-weight:800;font-stretch:88%;font-size:1.5rem;letter-spacing:-.02em}
/* US dollars leads; pounds and naira follow in grey, lighter and smaller */
.ns-ledger td.ns-cur-alt{color:var(--ns-ink-2);font-weight:650;font-size:1.2rem}
.ns-ledger td:last-child{text-align:right;padding-right:0}
.ns-rc{overflow-x:clip}
.ns-rc-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--ns-s4);flex-wrap:wrap;margin-top:var(--ns-s5)}
@media (max-width:767px){
  .ns-ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ns-ledger,.ns-ledger tbody{display:block}
  .ns-ledger tr{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--ns-s2) var(--ns-s5);padding:var(--ns-s4) 0;border-bottom:1px solid var(--ns-rule)}
  .ns-ledger th,.ns-ledger td{border:0;padding:0}
  .ns-ledger tbody th{grid-column:1 / -1}
  .ns-ledger td:nth-of-type(1){grid-column:1 / -1;font-size:.9375rem;color:var(--ns-ink-2)}
  .ns-ledger td.num{text-align:left}
  .ns-ledger td.num::before{display:block;font-family:var(--ns-f-mono);font-size:.6875rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ns-ink-2);font-stretch:100%}
  .ns-ledger td:nth-of-type(2)::before{content:"Pay in USD"}
  .ns-ledger td:nth-of-type(3)::before{content:"Pay in GBP"}
  .ns-ledger td:nth-of-type(4)::before{content:"Pay in NGN"}
  .ns-ledger td:last-child{grid-column:1 / -1;text-align:left}
}

/* ---------- 7. routes ---------- */
.ns-start{scroll-margin-top:64px}
.ns-start:focus{outline:none}
.ns-routes{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid var(--ns-rule)}
.ns-routes li{display:grid;gap:var(--ns-s4);align-content:start;justify-items:start;padding:var(--ns-s5) 0 var(--ns-s6);border-bottom:1px solid var(--ns-rule)}
.ns-routes .ns-h3{max-width:22ch}
.ns-start .ns-btn:not(.ns-btn--primary){border-color:var(--ns-ink);color:var(--ns-ink)}
.ns-start .ns-btn:not(.ns-btn--primary):hover,.ns-start .ns-btn:not(.ns-btn--primary):focus-visible{background:var(--ns-ink);color:var(--ns-deep)}
.ns-start .ns-btn--primary:hover,.ns-start .ns-btn--primary:focus-visible{background:var(--ns-ink);border-color:var(--ns-ink);color:var(--ns-deep)}
@media (min-width:768px){
  .ns-routes{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ns-rule)}
  .ns-routes li{display:flex;flex-direction:column;align-items:flex-start;border-bottom:0;padding:var(--ns-s5) var(--ns-s5) 0 var(--ns-s5);border-left:1px solid var(--ns-rule);height:100%}
  .ns-routes .ns-h3{margin-bottom:var(--ns-s5)}
  .ns-routes li:first-child{border-left:0;padding-left:0}
  .ns-routes .ns-btn{margin-top:auto}
}
.ns-footer.ns-deep{border-top:0}

/* ---------- motion (only when JS sets html.motion) ---------- */
@keyframes ns-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ns-fade{from{opacity:0}to{opacity:1}}
@keyframes ns-scalex{from{transform:skewX(-14deg) scaleX(0)}to{transform:skewX(-14deg) scaleX(1)}}
@keyframes ns-clip{from{clip-path:inset(-10% 100% -10% -5%)}to{clip-path:inset(-10% -5% -10% -5%)}}
@keyframes ns-march{to{stroke-dashoffset:-240}}
@keyframes ns-slide{from{transform:translateX(56px);opacity:0}to{transform:none;opacity:1}}
@keyframes ns-rise{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes ns-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* pre: below the fold at load, not yet seen. Lines wait undrawn; text is never hidden. */
.motion .pre .dr{stroke-dasharray:1;stroke-dashoffset:1}
.motion .pre .rl,.motion .pre .fl{opacity:0}
.motion .is-in .dr{stroke-dasharray:1;animation:ns-draw var(--ns-draw) var(--ns-ease) both}
.motion .is-in .rl{animation:ns-fade 500ms var(--ns-ease) 450ms both}
.motion .is-in .fl{animation:ns-fade 600ms var(--ns-ease) 750ms both}
/* Problems list: rolls out in reading order when scrolling down (1 to 6) and in reverse when scrolling up (6 to 1).
   Each line moves in from the direction of travel. Resets instantly once off-screen, so it plays every time. */
.motion .ns-plist li{transition:opacity 550ms var(--ns-ease),transform 650ms var(--ns-ease);transition-delay:var(--d,0ms)}
.motion .ns-plist li.p-out{opacity:0;transform:translateY(var(--dy,28px));transition-duration:0ms;transition-delay:0ms}
/* One drawing. Three scales.: each step's contents roll out 1:1, 1:100, 1:10,000 (reverse going up); the step's rule stays put */
.motion .ns-step > *{transition:opacity 600ms var(--ns-ease),transform 700ms var(--ns-ease);transition-delay:var(--d,0ms)}
.motion .ns-step.p-out > *{opacity:0;transform:translateY(var(--dy,28px));transition-duration:0ms;transition-delay:0ms}
/* Closing line types in letter by letter, holds, clears, and types again while on screen */
.ns-type-w{display:inline-block;white-space:nowrap}
.ns-type-c{display:inline-block;opacity:0;transform:translateY(.25em);transition:opacity 420ms var(--ns-ease),transform 480ms var(--ns-ease);transition-delay:var(--cd,0ms)}
.ns-type-on .ns-type-c{opacity:1;transform:none}
.ns-type-clear .ns-type-c{transition-duration:600ms;transition-delay:0ms}
/* Header "Discuss a Project": a slow ripple runs out from the button every so often (first after 5s, then every 14s).
   One ring, about 7s to spread and fade. Paused while hovered. */
.ns-header .ns-cta{position:relative}
.motion .ns-header .ns-cta::before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;animation:ns-ripple 14s cubic-bezier(.25,.5,.35,1) 5s infinite}
.motion .ns-header .ns-cta:hover::before{animation-play-state:paused}
@keyframes ns-ripple{
  0%{box-shadow:0 0 0 0 rgba(232,103,63,.65)}
  50%{box-shadow:0 0 0 18px rgba(232,103,63,0)}
  100%{box-shadow:0 0 0 18px rgba(232,103,63,0)}
}
/* Route buttons rise in 1, 2, 3 every time they come into view */
.motion .c-out.ns-rise{transform:translateY(28px);opacity:0}
.motion .c-in.ns-rise{animation:ns-rise 650ms var(--ns-ease) var(--d,0ms) both}
@media (min-width:768px){
  .ns-routes li:nth-child(2) .ns-rise{--d:250ms}
  .ns-routes li:nth-child(3) .ns-rise{--d:500ms}
}
/* Resource Center button: on hover and focus, two red trace lines run slowly round the border while the fill turns ink */
@property --ns-trace{syntax:"<angle>";inherits:false;initial-value:0deg}
.ns-trace{position:relative;isolation:isolate}
.ns-trace::after{content:"";position:absolute;inset:-1.5px;padding:3px;border-radius:inherit;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--ns-trace),transparent 0deg 95deg,var(--ns-action) 95deg 150deg,transparent 150deg 275deg,var(--ns-action) 275deg 330deg,transparent 330deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity var(--ns-ui) var(--ns-ease)}
/* wait 0.15s after hover starts; disappear at once on leave */
.ns-trace:hover::after,.ns-trace:focus-visible::after{opacity:1;transition:opacity 300ms var(--ns-ease) .15s;animation:ns-trace 4.8s linear .15s infinite}
@keyframes ns-trace{to{--ns-trace:360deg}}
/* Resource Center button slides in every time it comes into view */
.motion .c-out.ns-slide{transform:translateX(56px);opacity:0}
.motion .c-in.ns-slide{animation:ns-slide 700ms var(--ns-ease) 150ms both}
/* "Visit the Resource Center": a quicker double ripple than the header button, to draw the eye: two soft rings 0.9s apart, each 5s, spreading 16px from 50% strength, every 12s.
   Starts each time the button slides in (first ring 6s after it appears). Paused while hovered or focused. */
.motion .ns-rc .ns-slide::before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;z-index:-1}
.motion .ns-rc .c-in.ns-slide::before{animation:ns-ripple-rc 12s linear 6s infinite}
@keyframes ns-ripple-rc{0.00%{box-shadow:0 0 0 0 rgba(232,103,63,0.5),0 0 0 0 rgba(232,103,63,0.5)} 2.08%{box-shadow:0 0 0 1.71px rgba(232,103,63,0.447),0 0 0 0 rgba(232,103,63,0.5)} 4.17%{box-shadow:0 0 0 3.31px rgba(232,103,63,0.397),0 0 0 0 rgba(232,103,63,0.5)} 6.25%{box-shadow:0 0 0 4.81px rgba(232,103,63,0.350),0 0 0 0 rgba(232,103,63,0.5)} 8.33%{box-shadow:0 0 0 6.21px rgba(232,103,63,0.306),0 0 0 0.70px rgba(232,103,63,0.478)} 10.42%{box-shadow:0 0 0 7.50px rgba(232,103,63,0.266),0 0 0 2.36px rgba(232,103,63,0.426)} 12.50%{box-shadow:0 0 0 8.70px rgba(232,103,63,0.228),0 0 0 3.92px rgba(232,103,63,0.377)} 14.58%{box-shadow:0 0 0 9.80px rgba(232,103,63,0.194),0 0 0 5.38px rgba(232,103,63,0.332)} 16.67%{box-shadow:0 0 0 10.80px rgba(232,103,63,0.163),0 0 0 6.74px rgba(232,103,63,0.289)} 18.75%{box-shadow:0 0 0 11.71px rgba(232,103,63,0.134),0 0 0 7.99px rgba(232,103,63,0.250)} 20.83%{box-shadow:0 0 0 12.52px rgba(232,103,63,0.109),0 0 0 9.15px rgba(232,103,63,0.214)} 22.92%{box-shadow:0 0 0 13.24px rgba(232,103,63,0.086),0 0 0 10.21px rgba(232,103,63,0.181)} 25.00%{box-shadow:0 0 0 13.87px rgba(232,103,63,0.067),0 0 0 11.17px rgba(232,103,63,0.151)} 27.08%{box-shadow:0 0 0 14.41px rgba(232,103,63,0.050),0 0 0 12.04px rgba(232,103,63,0.124)} 29.17%{box-shadow:0 0 0 14.87px rgba(232,103,63,0.035),0 0 0 12.82px rgba(232,103,63,0.099)} 31.25%{box-shadow:0 0 0 15.24px rgba(232,103,63,0.024),0 0 0 13.50px rgba(232,103,63,0.078)} 33.33%{box-shadow:0 0 0 15.54px rgba(232,103,63,0.014),0 0 0 14.10px rgba(232,103,63,0.059)} 35.42%{box-shadow:0 0 0 15.75px rgba(232,103,63,0.008),0 0 0 14.60px rgba(232,103,63,0.044)} 37.50%{box-shadow:0 0 0 15.90px rgba(232,103,63,0.003),0 0 0 15.03px rgba(232,103,63,0.030)} 39.58%{box-shadow:0 0 0 15.98px rgba(232,103,63,0.001),0 0 0 15.37px rgba(232,103,63,0.020)} 41.67%{box-shadow:0 0 0 16px rgba(232,103,63,0),0 0 0 15.63px rgba(232,103,63,0.011)} 43.75%{box-shadow:0 0 0 16px rgba(232,103,63,0),0 0 0 15.82px rgba(232,103,63,0.006)} 45.83%{box-shadow:0 0 0 16px rgba(232,103,63,0),0 0 0 15.94px rgba(232,103,63,0.002)} 47.92%{box-shadow:0 0 0 16px rgba(232,103,63,0),0 0 0 15.99px rgba(232,103,63,0.000)} 49.17%{box-shadow:0 0 0 16px rgba(232,103,63,0),0 0 0 16px rgba(232,103,63,0)} 100.00%{box-shadow:0 0 0 16px rgba(232,103,63,0),0 0 0 16px rgba(232,103,63,0)}}
.motion .ns-rc .ns-slide:hover::before,.motion .ns-rc .ns-slide:focus-visible::before{animation-play-state:paused}

.motion .ns-hero.is-in .ns-bl-1{animation:ns-clip 600ms var(--ns-ease) both}
.motion .ns-hero.is-in .ns-bl-mark::after{animation:ns-scalex 450ms var(--ns-ease) 450ms both}
.motion .ns-hero.is-in .ns-bl-fill{animation:ns-clip 550ms var(--ns-ease) 600ms both}
/* hero lines and arrows stay still (dashed only); the typing words are the drawing's one moving element */
.motion .ns-hero .march{stroke-dasharray:6 6}

/* Where we work: 1:1, then 1:100, then 1:10,000, then the Technology band. Replays every time the section comes back into view. */
.motion .ns-col,.motion .ns-band{transition:opacity 650ms var(--ns-ease),transform 750ms var(--ns-ease);transition-delay:var(--d,0ms)}
.motion .ns-col::before{transition:transform 750ms var(--ns-ease);transition-delay:var(--d,0ms)}
/* reset is instant (it happens off-screen); the stagger applies only on the way in */
.motion .c-out.ns-col,.motion .c-out.ns-band{opacity:0;transform:translateY(40px);transition-duration:0ms;transition-delay:0ms}
.motion .c-out.ns-col::before{transform:scaleY(0);transition-duration:0ms;transition-delay:0ms}
.motion .c-in.ns-band .ns-band-path{stroke-dasharray:1;animation:ns-draw 1000ms var(--ns-ease) calc(var(--d,0ms) + 250ms) both}
.motion .c-out.ns-band .ns-band-path{stroke-dasharray:1;stroke-dashoffset:1}
@media (min-width:768px){
  .ns-col:nth-child(2){--d:250ms}
  .ns-col:nth-child(3){--d:500ms}
  .ns-band{--d:750ms}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* "Our World:" sits on its own line on phones so "One Drawing. Three Scales." stays together */
@media (max-width:767px){.ns-h-pre{display:block}}

/* Pause motion: a small control under the hero drawing and in the footer (WCAG 2.2.2).
   It stops every looping animation on the page: the hero words, the two typing lines and the button ripples. */
/* hand-drawn control: a sketched circle with pencil-stroke pause bars (or a play mark) and a hand-lettered label */
.ns-motion-btn{display:inline-flex;align-items:center;gap:10px;margin-top:var(--ns-s4);padding:4px 8px 4px 2px;border:0;background:none;color:var(--ns-ink-2);cursor:pointer;font-family:"NS Hand","Segoe Print",cursive;font-size:1rem;letter-spacing:.01em}
.ns-motion-btn .ns-mb-ic{width:34px;height:34px;flex:none;overflow:visible;transition:transform 400ms var(--ns-ease)}
.ns-mb-ic path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ns-mb-ic .ring{stroke-dasharray:3 0}
.ns-mb-ic .pl{display:none;fill:currentColor;fill-opacity:.12}
.ns-motion-btn[aria-pressed="true"] .pz{display:none}
.ns-motion-btn[aria-pressed="true"] .pl{display:inline}
.ns-motion-btn:hover,.ns-motion-btn:focus-visible{color:var(--ns-redline)}
.ns-motion-btn:hover .ns-mb-ic,.ns-motion-btn:focus-visible .ns-mb-ic{transform:rotate(-12deg)}
.ns-mb-t{border-bottom:1px solid transparent;transition:border-color var(--ns-ui) var(--ns-ease)}
.ns-motion-btn:hover .ns-mb-t{border-bottom-color:currentColor}
.ns-footer-base .ns-motion-btn{margin-top:0;color:var(--ns-ink-2)}
html.motion.ns-paused .ns-header .ns-cta::before,html.motion.ns-paused .ns-rc .ns-slide::before{animation:none}
/* typing words are larger on phones, where the drawing is shown at about a third of its desktop size */
@media (max-width:767px){#d1-words{font-size:12px}}
.ns-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* programme ledger: the whole row opens the programme's page */
.ns-ledger tbody tr{position:relative}
.ns-ledger-name{color:inherit;text-decoration:none}
.ns-ledger-name::after{content:"";position:absolute;inset:0}
.ns-ledger tbody tr:hover th,.ns-ledger tbody tr:focus-within th{text-decoration:underline;text-underline-offset:.2em}
.ns-ledger tbody tr th,.ns-ledger tbody tr td{transition:color var(--ns-ui) var(--ns-ease)}
.ns-ledger tbody tr:hover th,.ns-ledger tbody tr:hover td,.ns-ledger tbody tr:hover td a,
.ns-ledger tbody tr:focus-within th,.ns-ledger tbody tr:focus-within td,.ns-ledger tbody tr:focus-within td a{color:var(--ns-redline)}   /* the whole row turns red, like Enquire */
.ns-ledger tbody tr:hover{background:color-mix(in srgb,var(--ns-ink) 4%,transparent)}
.ns-ledger tbody td a{position:relative;z-index:1}
/* desktop: the buttons rest on the baseline of the write-up's last line */
@media (min-width:1024px){.ns-hero-aside{align-items:end}.ns-hero-actions{margin-bottom:7px}}
/* drawing fills shared with the Resource Centre, used by the homepage scale drawings */
.ns-bk{fill:var(--ns-ink)}
.ns-bk-o{fill:var(--ns-ochre)}
.ns-bk-v{fill:var(--ns-verdigris)}
.ns-lamp{fill:var(--ns-ink)}
.ns-glow{fill:var(--ns-ochre);opacity:.12}
.ns-plant{fill:#5E8F4E;stroke:#5E8F4E;stroke-width:2}

.ns-footer-base .ns-motion-btn:hover,.ns-footer-base .ns-motion-btn:focus-visible{color:var(--ns-redline)}   /* the footer button reacts like the one that sat in the hero */
.ns-earth{fill:var(--ns-earth)}
.ns-slab{fill:var(--ns-ink)}   /* the floor slab: a thick band under the ground line, before the earth */
.ns-hatch{transform:translateY(8px)}   /* soil hatching starts below the slab */

/* method tabs: one red line that moves between the stages and can be dragged */
.ns-tabs.has-ind{position:relative}
.ns-tabs.has-ind [role="tab"][aria-selected="true"]{border-bottom-color:transparent}
.ns-tab-ind{position:absolute;bottom:0;left:0;height:3px;background:var(--ns-redline);cursor:grab;touch-action:none;transition:left 320ms var(--ns-ease),width 320ms var(--ns-ease)}
.ns-tab-ind::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:0}   /* a larger area to grab */
.ns-tab-ind:hover{height:5px}
.ns-tab-ind.drag{cursor:grabbing;height:5px;transition:width 200ms var(--ns-ease)}
.ns-pan-f{overflow:hidden;clip-path:inset(0)}

/* Enquire inside a highlighted row: green, so it stands apart from the red row and from the other Enquire links;
   hovering Enquire itself fills it, a third state distinct from both */
.ns-ledger tbody tr:hover td a.ns-link,.ns-ledger tbody tr:focus-within td a.ns-link{color:var(--ns-verdigris)}
.ns-ledger tbody td a.ns-link{transition:color var(--ns-ui) var(--ns-ease),background-color var(--ns-ui) var(--ns-ease);padding:2px 6px;margin:-2px -6px}
.ns-ledger tbody tr td a.ns-link:hover,.ns-ledger tbody tr td a.ns-link:focus-visible{background:var(--ns-ink);color:var(--ns-paper);border-bottom-color:transparent}

/* Problems, owner's revision: numbered area, the situation, and the help we bring */
.ns-plate-stack{display:grid;gap:var(--ns-s3);justify-items:start}
.ns-plate-stack .ns-ann{margin:0;text-transform:none;letter-spacing:.02em;font-size:.9375rem;font-family:var(--ns-f-body);color:var(--ns-ink-2)}
.ns-plist a{grid-template-columns:1fr}
.ns-pn{color:var(--ns-ink-2)}
.ns-pn b{color:var(--ns-redline);font-weight:500}
.ns-pbody{display:grid;gap:var(--ns-s2);justify-items:start}
.ns-pbody .ns-pt{grid-column:auto}
.ns-phelp{color:var(--ns-ink-2);font-size:.9375rem;line-height:1.5}
@media (min-width:768px){
  .ns-plist a{grid-template-columns:260px minmax(0,1fr);gap:var(--ns-s5)}
}
/* Resource Centre invitation */
.ns-rcx{display:grid;gap:var(--ns-s6);align-items:center}
.ns-rcx-t{display:grid;gap:var(--ns-s4);justify-items:start}
.ns-rcx-t p{margin:0;max-width:52ch}
.ns-rcx-t .ns-body{color:var(--ns-ink-2)}
.ns-rcx-t .ns-btn{margin-top:var(--ns-s3)}
.ns-rcx-fig{margin:0}
.ns-rcx-art{display:block;width:100%;height:auto}
.sc-only{display:none}
@media (min-width:1024px){.ns-rcx{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter)}.ns-rcx-t{grid-column:1 / 6}.ns-rcx-fig{grid-column:6 / 13}}