/* Fieldforce theme-night.css · the dark theme ("Night operations") · 22 October 2026
   Load after site.css and setpieces.css. Behaviour in assets/js/theme-night.js.
   Sources: Option A (palette, type, header, footer, bands, industries rows, integrations), Option C (hero assembly,
   figures, duotone, annotated photograph), Option B (pinned gallery), retoned to A's palette.
   Component index: 1 tokens and base · 2 layout · 3 photographic band · 4 duotone · 5 hero assembly · 6 figures ·
   7 annotated photograph · 8 pinned gallery · 9 set pieces retoned · 10 home sections · 11 inner-page components ·
   12 reduced motion and static. Classes are prefixed nt-; .sk is the interface-sketch vocabulary. */

/* ---------- 1. Tokens and base ---------- */
:root{
  --ground:#060E18; --navy:#0A1A2C; --navy-2:#0F2438; --petrol:#3FB8AC;
  --paper:#08131F; --paper-2:#0B1A2B;
  --ink:#E8EFF6; --ink-2:#A8BACB; --ink-3:#7D93A8;
  --text-on-navy:#D0DCE8; --dim-on-navy:#7D93A8;
  --hairline-dark:#18304A; --hairline-light:#18304A;
  --signal:#2EC4B6; --amber:#E0A43A; --amber-ink:#E0A43A; --approve:#5BB98C;
  --cyan:#7FB8D6; --line:rgba(127,184,214,.6); --active:#E8692B; --duo-hi:#4A7F9C;
  --fs-h2:clamp(30px,1rem + 2.3vw,52px);
  --fs-body:17px;
  --nt-ease:cubic-bezier(.16,1,.3,1);
  --left:max(var(--gutter),calc((100vw - var(--maxw)) / 2));
  color-scheme:dark;
}
@media (min-width:900px){:root{--fs-body:18px}}
body{background:var(--ground);color:var(--ink);line-height:1.6}
.paper,.paper-2,body{--eyebrow:var(--signal)}
.hdr{background:rgba(6,14,24,0);border-bottom-color:rgba(24,48,74,.6)}
.hdr.is-solid{background:rgba(6,14,24,.92)}
body.menu-open .hdr,.menu{background:var(--ground)}
a{color:var(--signal)}
.btn--ghost{border-color:rgba(208,220,232,.35)}
h2,.h2{line-height:1.08}
.ftr{background:var(--ground)}

/* ---------- 2. Layout ---------- */
.nt-wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.nt-12{display:grid;gap:28px}
@media (min-width:900px){.nt-12{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px}}
@media (max-width:899px){.nt-12>*{grid-column:1/-1!important;grid-row:auto!important}}
.nt-p{color:var(--ink-2);max-width:34em}
.nt-p+.nt-p{margin-top:1.1em}
.nt-ill{font:400 11px/1.5 var(--f-mono);letter-spacing:.08em;color:var(--ink-3)}
.nt-num{font:400 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--signal);font-variant-numeric:tabular-nums}

/* ---------- 3. Photographic band: full-bleed photo moving at 0.85x, dark gradient at both edges ----------
   <div class="nt-band" aria-hidden="true"><div class="nt-photo" data-nt-par="0.85"><img …></div></div>
   --head adds a headline at the foot: <div class="nt-band__in nt-wrap"><h2>…</h2></div>. --band-h sets the height. */
.nt-band{position:relative;height:var(--band-h,clamp(300px,64vh,660px));overflow:hidden;background:var(--ground);display:flex;align-items:flex-end}
.nt-band--short{--band-h:clamp(280px,52vh,560px)}
.nt-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--ground) 0%,rgba(6,14,24,0) 26%,rgba(6,14,24,0) 74%,var(--ground) 100%)}
.nt-photo{position:absolute;left:0;right:0;top:-16vh;height:calc(100% + 32vh);z-index:0;will-change:transform}
.nt-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.45) brightness(.7) contrast(1.1)}
.nt-band--head{--band-h:clamp(520px,96vh,1000px)}
.nt-band--head::after{background:linear-gradient(180deg,var(--ground) 0%,rgba(6,14,24,.2) 22%,rgba(6,14,24,.15) 50%,rgba(6,14,24,.85) 82%,var(--ground) 100%)}
.nt-band--head .nt-photo img{filter:saturate(.5) brightness(.62) contrast(1.08)}
.nt-band__in{position:relative;z-index:2;padding-bottom:clamp(32px,6vh,72px)}
.nt-band__in h2{font-size:clamp(34px,1rem + 3.6vw,72px);line-height:1.03;letter-spacing:-.035em;max-width:13em;color:var(--white)}
.nt-band__cap{position:absolute;z-index:4;left:var(--left);bottom:20px;margin:0;font:400 10.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#C9D6E2;opacity:.8}
.nt-band__rule{position:absolute;z-index:4;left:var(--left);right:var(--left);top:32px;height:1px;background:rgba(201,214,226,.3)}
@media (max-width:899px){.nt-band--head{--band-h:84vh;min-height:520px}}

/* ---------- 4. Duotone: grayscale photo multiplied over --duo-hi, ground lightened over the result ----------
   Add .nt-duo to the frame. Inside a parallax layer the layer inherits the frame's background (stacking context). */
.nt-duo{position:relative;overflow:hidden;isolation:isolate;background:var(--duo-hi)}
.nt-duo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.04);mix-blend-mode:multiply}
.nt-duo::after{content:"";position:absolute;inset:0;z-index:2;background:var(--ground);mix-blend-mode:lighten;pointer-events:none}
.nt-duo .nt-photo{background:inherit}
.nt-duo--bright{--duo-hi:var(--cyan)}
.nt-band.nt-duo::after{background:var(--ground);mix-blend-mode:lighten}
.nt-band__fade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,var(--ground) 0%,rgba(6,14,24,0) 22%,rgba(6,14,24,0) 78%,var(--ground) 100%)}

/* ---------- 5. Hero assembly: the site assembles behind the headline (FFRecord.drawInto) ----------
   Cyan drawing lines on the ground; orange only on the active layer. */
.nt-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:var(--ground);color:var(--text-on-navy);border-bottom:0}
.nt-hero__photo{position:absolute;inset:0;z-index:0;opacity:.32;transition:opacity 2.4s ease}
.nt-hero__photo::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,var(--ground) 0,rgba(6,14,24,.55) 42%,rgba(6,14,24,0) 75%),linear-gradient(0deg,var(--ground) 0,rgba(6,14,24,0) 40%)}
.js .nt-hero:not(.is-done) .nt-hero__photo{opacity:0;animation:nt-show 0s 7s forwards}
@keyframes nt-show{to{opacity:.32}}
.nt-hero__grid{position:absolute;left:0;right:0;top:-120px;bottom:0;z-index:1;pointer-events:none;will-change:transform;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 62% 48%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 62% 48%,#000 30%,transparent 100%)}
.nt-hero__grid i{position:absolute;inset:-100px;background-image:linear-gradient(rgba(127,184,214,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(127,184,214,.09) 1px,transparent 1px),linear-gradient(rgba(127,184,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(127,184,214,.035) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;animation:nt-drift 48s linear infinite}
@keyframes nt-drift{to{transform:translate3d(100px,100px,0)}}
.nt-hero__dwg{position:absolute;z-index:2;top:calc(var(--hdr-h) + 12px);bottom:72px;right:max(2vw,calc((100vw - 1400px) / 2));width:min(47vw,820px);pointer-events:none}
.nt-hero__dwg svg{display:block;width:100%;height:100%;overflow:visible}
.nt-hero .ff-iso .ln,.nt-hero .ff-iso .fc,.nt-hero .ff-iso .fc2{stroke:var(--cyan);stroke-width:1.5}
.nt-hero .ff-iso .fc{fill:#0E2438}
.nt-hero .ff-iso .fc2{fill:#0B1D30}
.nt-hero .ff-iso .lt{stroke:var(--cyan);stroke-width:1.1;opacity:.7}
.nt-hero .ff-iso .lf{stroke:var(--cyan);opacity:.24}
.nt-hero .ff-iso .gnd{fill:rgba(127,184,214,.06);stroke:var(--cyan);stroke-width:1.4;opacity:1}
.nt-hero .ff-iso .pad{fill:rgba(127,184,214,.1);stroke:var(--cyan);stroke-width:1.4}
.nt-hero .ff-iso .lease{stroke:var(--cyan);stroke-width:1.4;opacity:1}
.nt-hero .ff-iso .flow{stroke:var(--cyan)}
.nt-hero .ff-iso .L.cur .ln,.nt-hero .ff-iso .L.cur .fc,.nt-hero .ff-iso .L.cur .fc2,.nt-hero .ff-iso .L.cur .pad,.nt-hero .ff-iso .L.cur .gnd,.nt-hero .ff-iso .L.cur .lease,.nt-hero .ff-iso .L.cur .lt,.nt-hero .ff-iso .L.cur .flow{stroke:var(--active);stroke-width:1.6;opacity:1}
.nt-hero .ff-iso .tag circle{fill:var(--active)}
.nt-hero .ff-iso .tag text{fill:var(--active);font-size:12px}
.nt-hero .ff-iso .tag text+text{fill:var(--text-on-navy)}
.nt-hero .ff-iso .dim{fill:var(--cyan);font-size:11px}
.nt-hero .ff-iso .ghost{opacity:.1}
.nt-dim path{fill:none;stroke:var(--cyan);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.35,1)}
.nt-dim circle{fill:var(--cyan);opacity:0;transition:opacity .4s .8s}
.nt-dim text{fill:var(--cyan);font:500 11px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;opacity:0;transition:opacity .6s .7s}
.nt-dim.on path{stroke-dashoffset:0}
.nt-dim.on circle,.nt-dim.on text{opacity:1}
.nt-hero__in{position:relative;z-index:3;padding-top:calc(var(--hdr-h) + 120px);padding-bottom:48px;display:flex;flex-direction:column;align-items:flex-start}
.nt-hero__h{font:300 44px/.98 var(--f-display);letter-spacing:-.035em;color:#fff;max-width:7.4em;text-wrap:balance}
.nt-hero__sub{margin-top:28px;max-width:31em;font-size:17px;line-height:1.6;color:#C2D0DD}
.nt-hero__ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.nt-hero__strip{position:relative;z-index:3;border-top:1px solid rgba(24,48,74,.8)}
.nt-hero__strip .nt-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-block:16px;font:400 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-on-navy)}
.nt-hero__strip ul{display:flex;flex-wrap:wrap;gap:6px 28px}
.nt-hero__strip li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:10px;vertical-align:1px}
.nt-dwgno{color:#5F7A93}
@media (min-width:640px){.nt-hero__h{font-size:clamp(56px,2.2rem + 4.6vw,96px)}.nt-hero__sub{font-size:clamp(17px,.9rem + .35vw,19px)}}
@media (min-width:900px){.nt-hero__in{padding-bottom:72px}}
/* mobile pass: the drawing is sized from the width (its 620x476 viewBox), sits inside the viewport under the header,
   and the headline starts below it, so nothing is cropped or overlapped. No-JS shows the inlined final drawing, so it gets the same padding. */
@media (max-width:899px){
  .nt-hero{--dwg-h:min(80vw,46vh)}
  .nt-hero__dwg .tag{display:none}
  .nt-hero__dwg{left:-2vw;right:-2vw;width:auto;top:var(--hdr-h);bottom:auto;height:var(--dwg-h);opacity:.85}
  .nt-hero__in{padding-top:calc(var(--hdr-h) + var(--dwg-h) + 8px)}
  .nt-hero__photo::before{background:linear-gradient(0deg,var(--ground) 0,rgba(6,14,24,.7) 55%,rgba(6,14,24,.2) 100%)}
}
/* line-split headline and following copy; visible without JS, and by failsafe if the run stalls */
.nt-ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.nt-ln>span{display:block;transform:translateY(108%);transition:transform 1s var(--nt-ease)}
.nt-hero__h.is-up .nt-ln>span{transform:none}
.js .nt-hero.is-run .nt-hero__h:not(.on),.js .nt-hero.is-run .nt-f:not(.on){opacity:0;animation:nt-fail 0s 5.5s forwards}
@keyframes nt-fail{to{opacity:1}}
.nt-f{transition:opacity .9s var(--nt-ease),transform .9s var(--nt-ease)}
.js .nt-hero.is-run .nt-f:not(.on){transform:translateY(16px)}

/* ---------- 6. Figures band: lead figure and three, a dimension tick over each, count-up on view ---------- */
.nt-figs{position:relative;background:var(--ground);padding-block:clamp(56px,9vh,104px) clamp(40px,6vh,64px);border-bottom:1px solid var(--hairline-dark)}
.nt-figs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;align-items:end}
.nt-fig{position:relative;padding-top:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.nt-fig::before,.nt-fig::after{content:"";position:absolute;top:6px;left:0;height:1px;right:12%;background:var(--cyan);opacity:.45;transform-origin:left;transition:transform .9s var(--nt-ease) var(--d,0ms)}
.nt-fig::after{top:0;width:1px;height:13px;right:auto}
html.js:not(.rm) .nt-fig.rv:not(.in)::before{transform:scaleX(0)}
.nt-fig__n{font:300 clamp(46px,1rem + 4vw,76px)/.95 var(--f-display);letter-spacing:-.035em;color:var(--white);font-variant-numeric:tabular-nums}
.nt-fig__l{font-size:15px;color:var(--ink-2)}
.nt-fig--lead .nt-fig__n{font-size:clamp(64px,1rem + 7vw,128px);color:var(--signal);text-shadow:0 0 48px rgba(46,196,182,.25)}
.nt-fig--lead .nt-fig__l{color:var(--ink)}
.nt-figs__asat{margin-top:40px;font-size:13.5px;color:var(--ink-3);max-width:60ch}
@media (min-width:900px){.nt-figs__grid{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:0 40px}}
@media (max-width:899px){.nt-fig--lead{grid-column:1/-1}.nt-figs__grid{align-items:start}} /* mobile pass: top-align so two-line labels do not stagger the figures */
@media (max-width:520px){.nt-fig__n{font-size:40px}.nt-fig__l{font-size:13.5px}}

/* ---------- 7. Annotated photograph: duotone frame, leaders, points and surveyed labels drawn in once ----------
   <figure class="nt-ann-fig nt-duo" data-nt-ann><div class="nt-photo nt-photo--frame" data-nt-par="0.9"><img …>
   <svg class="nt-ann" viewBox="0 0 100 100" preserveAspectRatio="none"><path pathLength="1" d="…"/></svg>
   <span class="nt-pt" style="left:…;top:…"></span><span class="nt-lab" style="…"><b>Key</b>Value</span></div>
   <figcaption class="nt-ann-fig__cap">…</figcaption></figure>. Positions are percentages of the frame;
   add .nt-lab--r to labels in the right half so they anchor to the right edge on phones. */
.nt-ann-fig{position:relative;margin:0;min-height:560px}
.nt-photo--frame{top:-8%;height:116%}
.nt-photo--frame img{filter:grayscale(1) contrast(1.12) brightness(1.04)}
.nt-ann-fig__cap{position:absolute;z-index:5;left:20px;bottom:16px;right:20px;font:400 10.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#C9D6E2;opacity:.8}
.nt-ann{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.nt-ann path{fill:none;stroke:#E8EFF6;stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity 1s ease var(--d,0s)}
/* mobile pass 22 Oct 2026: pathLength dashes under non-scaling-stroke render with gaps in Chrome at any non-uniform scale, so the leaders fade in instead of drawing */
.nt-ann path.nt-ann__dim{stroke:var(--signal)}
.nt-pt{position:absolute;z-index:4;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1px solid #E8EFF6;border-radius:50%;background:rgba(6,14,24,.6);transition:opacity .4s var(--d,0s)}
.nt-lab{position:absolute;z-index:4;font:500 10.5px/1.35 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#E8EFF6;background:rgba(6,14,24,.82);border:1px solid rgba(127,184,214,.55);padding:7px 10px;white-space:nowrap;transition:opacity .6s calc(var(--d,0s) + .7s),transform .6s calc(var(--d,0s) + .7s)}
.nt-lab b{display:block;font-weight:500;color:var(--cyan)}
.nt-lab--k{border-color:var(--signal)}
.nt-lab--k b{color:var(--signal)}
[data-nt-ann].is-armed:not(.in) .nt-ann path{opacity:0}
[data-nt-ann].is-armed:not(.in) .nt-pt{opacity:0}
[data-nt-ann].is-armed:not(.in) .nt-lab{opacity:0;transform:translateY(6px)}
@media (max-width:899px){.nt-ann-fig{aspect-ratio:4/5;min-height:0}.nt-lab{font-size:9.5px;padding:5px 7px}.nt-lab--r{left:auto!important;right:4%}}

/* ---------- 8. Pinned gallery: the section pins and the track moves sideways (900px+, motion allowed) ----------
   <div class="nt-gal" data-nt-gal><div class="nt-gal__pin"><div class="nt-wrap nt-gal__head">…</div>
   <div class="nt-gal__view"><ol class="nt-gal__track"><li class="nt-pan"><div class="nt-pan__sk">svg.sk</div>
   <div class="nt-pan__cap"><span class="nt-num">01</span><h3>…</h3><p>…</p></div></li>…<li class="nt-gal__end">…</li></ol></div>
   <div class="nt-gal__bar" aria-hidden="true"><span class="nt-num" data-nt-gal-n>01 / 06</span><i><b></b></i></div></div></div>
   Without the pin (phones, reduced motion, no JS) it is a vertical stack. */
.nt-gal{position:relative;background:var(--ground);color:var(--ink)}
.nt-gal__pin{padding:clamp(40px,7vh,72px) 0 clamp(64px,10vh,120px)}
.nt-gal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.nt-gal__note{font:400 12px/1.5 var(--f-mono);color:var(--ink-3)}
.nt-gal__track{display:grid;gap:72px}
.nt-gal:not(.is-pin) .nt-gal__track{max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.nt-pan{display:grid;gap:20px;margin:0}
.nt-pan__sk{position:relative;background:#0B1A2B;border:1px solid #1F3B57;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.nt-pan__sk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.05),transparent 40%)}
.nt-pan__sk svg{display:block;width:100%;height:auto}
.nt-pan__cap{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 12px;max-width:38em}
.nt-pan__cap .nt-num{grid-row:span 2;padding-top:6px}
.nt-pan__cap h3{font:400 clamp(22px,1rem + .8vw,30px)/1.15 var(--f-display);letter-spacing:-.015em;color:var(--white)}
.nt-pan__cap p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.nt-gal__end{display:flex;flex-direction:column;gap:18px;justify-content:center;max-width:22em;color:var(--ink-2)}
.nt-gal__end p{font:300 clamp(22px,1rem + .8vw,30px)/1.25 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.nt-gal__bar{display:none}
.nt-gal.is-pin .nt-gal__pin{position:sticky;top:0;height:100vh;overflow:hidden;padding:calc(var(--hdr-h) + 28px) 0 28px;display:flex;flex-direction:column}
.nt-gal.is-pin .nt-gal__head{margin-bottom:24px}
.nt-gal.is-pin .nt-gal__view{flex:1;min-height:0;display:flex;align-items:center}
.nt-gal.is-pin .nt-gal__track{display:flex;gap:clamp(48px,6vw,104px);padding:0 var(--gutter);align-items:center;will-change:transform;width:max-content}
.nt-gal.is-pin .nt-pan{flex:0 0 auto;width:min(var(--pw,58vw),calc((100vh - var(--hdr-h) - 270px) * 1.6))}
.nt-gal.is-pin .nt-pan:nth-child(even){align-self:flex-end}
.nt-gal.is-pin .nt-pan:nth-child(even) .nt-pan__cap{order:-1}
.nt-gal.is-pin .nt-pan:nth-child(3n+2){--pw:50vw}
.nt-gal.is-pin .nt-pan:nth-child(3n){--pw:62vw}
.nt-gal.is-pin .nt-gal__end{flex:0 0 auto;width:26em;padding-right:8vw}
.nt-gal.is-pin .nt-gal__bar{display:flex;align-items:center;gap:20px;padding:0 var(--gutter);margin-top:20px}
.nt-gal__bar i{position:relative;flex:1;height:1px;background:var(--hairline-dark);overflow:hidden}
.nt-gal__bar i b{position:absolute;inset:0;background:var(--signal);transform-origin:left;transform:scaleX(var(--gp,0))}
.nt-gal__bar .nt-num{min-width:5.5em}
@media (min-width:900px){
  .nt-gal:not(.is-pin) .nt-pan{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;gap:40px}
  .nt-gal:not(.is-pin) .nt-pan:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .nt-gal:not(.is-pin) .nt-pan:nth-child(even) .nt-pan__cap{order:-1}
}
/* interface-sketch vocabulary (inline SVG, viewBox 640x400) */
.sk text{font-family:var(--f-mono);font-size:11px;fill:#8FA6BC}
.sk .t1{font-family:var(--f-display);font-size:15px;fill:#E8EFF6}
.sk .t2{font-size:10px;fill:#5F7A93;letter-spacing:.06em}
.sk .bg{fill:#0B1A2B}
.sk .mapbg{fill:#0D2033}
.sk .scr{fill:#0B1A2B}
.sk .pn{fill:#0F2438;stroke:#1F3B57}
.sk .hl{stroke:#18304A;fill:none}
.sk .rd{stroke:#163550;fill:none}
.sk .rd2{stroke:#12293F;fill:none}
.sk .ln{stroke:#7D93A8;fill:none;stroke-width:1.2}
.sk .mut{fill:#15304A}
.sk .sd{fill:var(--petrol)}
.sk .sds{stroke:var(--signal);fill:none;stroke-width:1.5}
.sk .sdl{fill:rgba(46,196,182,.14)}
.sk .wnl{fill:rgba(224,164,58,.13)}
.sk .wnd{fill:var(--amber)}
.sk .wn{fill:var(--amber)}
.sk .lvt{fill:var(--signal)}
.sk .ink{fill:#E8EFF6}
.sk .nv{fill:#050C15}
.sk .nvt{fill:#D0DCE8}
.sk .nvk{fill:#06221F}
.sk .ok{fill:var(--approve)}
.sk .okl{stroke:var(--approve);fill:none}
.sk .lv{fill:var(--signal)}
.sk .today{stroke:var(--amber)}

/* ---------- 9. Set pieces retoned (record.js, flows.js, agents.js) ---------- */
.ff-rec{background:var(--navy)}
[data-setpiece="C"]{background:var(--navy)}
[data-setpiece="C"] .ff-agents__copy>p+p{margin-top:-6px}
.ff-flow__node{background:var(--navy-2);border-color:var(--hairline-dark)}
.ff-flow__node span,.ff-flow__legend{color:var(--ink-3)}
.ff-flow__node .ff-flow__dir{color:var(--signal)}
.ff-flow__rec{background:#050C15;border:1px solid rgba(46,196,182,.4);box-shadow:0 0 80px -20px rgba(46,196,182,.3)}
.ff-wire__line{background:#22405C}
.ff-chain__stage p.ff-chain__invoice{background:var(--navy-2);border-color:var(--hairline-dark);color:var(--approve)}
.ff-chain__stage p{color:var(--ink-2)}
.ff-chain__stage h3{color:var(--white)}

/* ---------- 10. Home sections ---------- */
/* 02 the moment: text left, annotated photograph right */
.nt-moment{display:grid;background:var(--ground)}
.nt-moment__txt{padding:clamp(80px,13vh,168px) var(--gutter) 56px var(--left);display:flex;flex-direction:column;justify-content:space-between;gap:56px}
.nt-moment__txt h2{font-size:clamp(34px,1rem + 2.7vw,60px);line-height:1.03;letter-spacing:-.03em;color:var(--white);max-width:11.5em}
.nt-moment__txt .nt-p{max-width:31em}
.nt-lead{margin-top:1.4em;font:300 clamp(24px,1rem + 1vw,32px)/1.25 var(--f-display);letter-spacing:-.015em;color:var(--white)}
@media (min-width:900px){
  .nt-moment{grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(1000px,108vh)}
  .nt-moment__txt{padding-right:clamp(40px,5vw,88px);padding-bottom:clamp(64px,10vh,120px)}
  .nt-moment .nt-ann-fig{min-height:0}
}
/* 04 platform: chapter band, then the gallery */
.nt-plat__foot{color:var(--ink-3)}
/* 05 integrations */
.nt-int{padding:clamp(48px,8vh,96px) 0 clamp(88px,13vh,152px);background:var(--paper-2)}
.nt-int__head{margin-bottom:clamp(40px,6vh,64px);row-gap:20px}
.nt-int__head h2{grid-column:1/6}
.nt-int__head .nt-int__body{grid-column:7/12;padding-top:8px}
.nt-band--fibre{--band-h:clamp(300px,58vh,600px);background:var(--paper-2)}
.nt-band--fibre::after{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,26,43,0) 28%,rgba(11,26,43,.1) 70%,var(--paper-2) 100%)}
/* 07 industries: three photographic rows on different grids */
.nt-ind{padding:clamp(96px,15vh,168px) 0 clamp(64px,10vh,112px)}
.nt-ind__head{margin-bottom:clamp(48px,8vh,96px)}
.nt-ind__head h2{grid-column:1/8}
.nt-ind__rows{display:flex;flex-direction:column;gap:clamp(56px,10vh,120px)}
.nt-ind__row a{color:inherit;text-decoration:none;align-items:end}
.nt-ind__ph{position:relative;overflow:hidden;border-radius:2px;background:var(--navy-2)}
.nt-ind__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.75) contrast(1.08);transition:transform 1.2s var(--nt-ease),filter .6s}
.nt-ind__row a:hover img{transform:scale(1.035);filter:saturate(.65) brightness(.85) contrast(1.08)}
.nt-ind__row h3{font:300 clamp(26px,1rem + 1.4vw,40px)/1.1 var(--f-display);letter-spacing:-.02em;color:var(--white);margin-bottom:14px}
.nt-ind__row p{color:var(--ink-2);max-width:26em}
.nt-ind__row a:hover h3{color:var(--signal)}
.nt-ind__go{display:inline-block;margin-top:18px;font-size:14px;color:var(--signal)}
.nt-ind__row--1 .nt-ind__ph{aspect-ratio:16/9}
.nt-ind__row--2 .nt-ind__ph{aspect-ratio:4/5}
.nt-ind__row--3 .nt-ind__ph{aspect-ratio:21/9}
@media (min-width:900px){
  .nt-ind__row--1 .nt-ind__ph{grid-column:1/8}
  .nt-ind__row--1 .nt-ind__tx{grid-column:9/13;padding-bottom:12px}
  .nt-ind__row--2 .nt-ind__tx{grid-column:2/6;grid-row:1;align-self:center}
  .nt-ind__row--2 .nt-ind__ph{grid-column:7/12}
  .nt-ind__row--3 .nt-ind__ph{grid-column:3/13}
  .nt-ind__row--3 .nt-ind__tx{grid-column:3/8;grid-row:2;margin-top:24px}
}
@media (max-width:899px){.nt-ind__row--2 .nt-ind__ph{aspect-ratio:4/3}}
/* 08 proof */
.nt-proof{padding:clamp(80px,12vh,128px) 0 clamp(96px,14vh,160px);background:var(--paper-2)}
.nt-proof__head h2{grid-column:1/7;margin-bottom:36px}
/* 09 how we work */
.nt-how{padding:clamp(88px,13vh,152px) 0 clamp(72px,10vh,112px)}
.nt-how h2{grid-column:1/7;margin-bottom:clamp(36px,6vh,64px)}
.stages::before{background:var(--hairline-dark)}
.stages::after{background:var(--signal)}
.stage-n{color:var(--signal)}
.stage-t{color:var(--white)}
/* 10 closing */
.nt-close{position:relative;padding:clamp(104px,16vh,184px) 0 64px;background:radial-gradient(900px 500px at 15% 0%,rgba(46,196,182,.08),transparent 70%),var(--ground);border-top:1px solid var(--hairline-dark)}
.nt-close h2{font-size:clamp(34px,1rem + 3.2vw,64px);line-height:1.03;letter-spacing:-.03em;max-width:12em;margin-bottom:28px}
.nt-close__l{grid-column:1/7}
.nt-close__r{grid-column:8/13;padding-top:12px;display:flex;flex-direction:column;gap:28px}

/* ---------- 11. Inner-page components ---------- */
/* photographic page hero: eyebrow, H1, sub-line over a dark band */
.nt-pagehero{position:relative;min-height:clamp(480px,78vh,820px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--ground);color:var(--text-on-navy)}
.nt-pagehero .nt-photo{z-index:-2;top:-10vh;height:calc(100% + 20vh)}
.nt-pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,14,24,.9) 0%,rgba(6,14,24,.6) 40%,rgba(6,14,24,.15) 75%,rgba(6,14,24,.35) 100%),linear-gradient(180deg,rgba(6,14,24,.6) 0%,rgba(6,14,24,0) 30%,rgba(6,14,24,0) 60%,var(--ground) 100%)}
.nt-pagehero__in{display:flex;flex-direction:column;gap:22px;padding-top:calc(var(--hdr-h) + 96px);padding-bottom:clamp(48px,9vh,96px)}
.nt-pagehero h1{font-size:clamp(40px,1.4rem + 3.6vw,76px);line-height:1;letter-spacing:-.03em;max-width:14em;color:var(--white)}
.nt-pagehero .lede{color:#C2D0DD;max-width:34em}
/* chapters on the dark ground; alternate .nt-sec and .nt-sec--alt */
.nt-sec{padding-block:clamp(80px,12vh,152px);background:var(--ground)}
.nt-sec--alt{background:var(--paper-2)}
.nt-sec--navy{background:var(--navy)}
/* hairline table, status pills and trust block on the dark ground (site.css markup) */
.navy .tbl thead th,.tbl thead th{background:none;color:var(--ink-3);padding-left:0}
.tbl td{color:var(--ink-2)}
.pill--live{color:#06221F}
.trust li,.ff-trust li{color:var(--ink-2);border-color:var(--hairline-dark)}
.trust,.ff-trust{border-color:var(--hairline-dark)}
.cta-band{background:var(--ground);border-top-color:var(--hairline-dark)}

/* ---------- 12. Reduced motion and #static: final states ---------- */
@media (prefers-reduced-motion:reduce){.nt-hero__grid i{animation:none}.nt-hero__photo{opacity:.32!important}.nt-photo{transform:none!important}}
html.rm .nt-hero__photo{opacity:.32!important}
html.rm .nt-photo,html.rm .nt-hero__grid{transform:none!important}

/* ---------- Section 03 drawing matched to the hero: cyan lines, orange active layer ---------- */
.ff-rec .ff-iso .ln,.ff-rec .ff-iso .fc,.ff-rec .ff-iso .fc2{stroke:var(--cyan);stroke-width:1.5}
.ff-rec .ff-iso .fc{fill:#0E2438}
.ff-rec .ff-iso .fc2{fill:#0B1D30}
.ff-rec .ff-iso .lt{stroke:var(--cyan);stroke-width:1.1;opacity:.7}
.ff-rec .ff-iso .lf{stroke:var(--cyan);opacity:.24}
.ff-rec .ff-iso .gnd{fill:rgba(127,184,214,.06);stroke:var(--cyan);stroke-width:1.4;opacity:1}
.ff-rec .ff-iso .pad{fill:rgba(127,184,214,.1);stroke:var(--cyan);stroke-width:1.4}
.ff-rec .ff-iso .lease{stroke:var(--cyan);stroke-width:1.4;opacity:1}
.ff-rec .ff-iso .flow{stroke:var(--cyan)}
.ff-rec .ff-iso .L.cur .ln,.ff-rec .ff-iso .L.cur .fc,.ff-rec .ff-iso .L.cur .fc2,.ff-rec .ff-iso .L.cur .pad,.ff-rec .ff-iso .L.cur .gnd,.ff-rec .ff-iso .L.cur .lease,.ff-rec .ff-iso .L.cur .lt,.ff-rec .ff-iso .L.cur .flow{stroke:var(--active);stroke-width:1.6;opacity:1}
.ff-rec .ff-iso .tag circle{fill:var(--active)}
.ff-rec .ff-iso .tag text{fill:var(--active);font-size:12px}
.ff-rec .ff-iso .tag text+text{fill:var(--text-on-navy)}
.ff-rec .ff-iso .dim{fill:var(--cyan);font-size:11px}
.ff-rec .ff-iso .ghost{opacity:.1}

/* ---------- 13. Customer strip (home 08): continuous logo marquee, left to right ----------
   Markup: section.nt-cust > .nt-wrap (heading) + .nt-cust__mq > ul.nt-cust__track > li.nt-cust__i x 28.
   The 14 logos are listed twice; the second set is aria-hidden with empty alt, so the loop at translateX(-50%) is seamless.
   Logos are monochrome white: SVG files already white (*-white.svg); raster files take .is-raster (brightness(0) invert(1)).
   Cap height --cap: 28px on phones, 36px from 900px; per-logo optical scale through --s on the li.
   Spacing is margin on each item (not gap), so each half of the track is exactly 50%.
   Pauses on hover; under reduced motion or #static (html.rm) the duplicate set is hidden and the row wraps, static. */
.nt-cust{--cap:28px;--mq-gap:clamp(44px,7vw,96px);--mq-dur:48s;overflow:hidden}
@media (min-width:900px){.nt-cust{--cap:36px;--mq-dur:64s}}
.nt-cust .nt-proof__head h2{margin-bottom:clamp(40px,6vh,64px)}
.nt-cust__mq{position:relative;overflow:hidden;padding-block:clamp(20px,3vh,32px);border-block:1px solid var(--hairline-dark);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.nt-cust__track{display:flex;align-items:center;width:max-content;margin:0;padding:0;list-style:none;animation:nt-mq var(--mq-dur) linear infinite;will-change:transform}
.nt-cust__mq:hover .nt-cust__track{animation-play-state:paused}
.nt-cust__i{flex:none;display:flex;align-items:center;height:calc(var(--cap) * 1.4);margin:0 var(--mq-gap) 0 0;padding:0}
.nt-cust__i img{display:block;height:calc(var(--cap) * var(--s,1));width:auto;max-width:none;opacity:.7}
.nt-cust__i img.is-raster{filter:brightness(0) invert(1)}
.nt-cust__type{font:400 calc(var(--cap) * .8)/1 "Inter Tight",var(--f-display),sans-serif;letter-spacing:-.01em;color:#fff;opacity:.7;white-space:nowrap}
@keyframes nt-mq{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){
  .nt-cust__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:12px;padding-inline:var(--gutter)}
  .nt-cust__i[aria-hidden="true"]{display:none}
  .nt-cust__i{margin:0 calc(var(--mq-gap) / 3)}
  .nt-cust__mq{-webkit-mask-image:none;mask-image:none}
}
html.rm .nt-cust__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:12px;padding-inline:var(--gutter)}
html.rm .nt-cust__i[aria-hidden="true"]{display:none}
html.rm .nt-cust__i{margin:0 calc(var(--mq-gap) / 3)}
html.rm .nt-cust__mq{-webkit-mask-image:none;mask-image:none}

/* ---------- Consent banner (analytics.js): fixed to the foot of the viewport, dark theme ---------- */
.ff-consent{position:fixed;z-index:1000;left:16px;right:16px;bottom:16px;max-width:720px;margin-inline:auto;padding:18px 20px;border:1px solid var(--hairline-dark);border-radius:6px;background:var(--navy-2);color:var(--text-on-navy);box-shadow:0 12px 40px rgba(0,0,0,.45);display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font:400 14px/1.5 var(--f-body)}
.ff-consent__t{margin:0;flex:1 1 300px}
.ff-consent__t a{color:var(--signal)}
.ff-consent__opt{flex:1 1 100%;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ff-consent__opt label{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.ff-consent__opt input{width:18px;height:18px;accent-color:var(--signal)}
.ff-consent__b{display:flex;flex-wrap:wrap;gap:8px}
.ff-consent .btn--ghost{color:var(--text-on-navy)}
@media (max-width:480px){.ff-consent{left:8px;right:8px;bottom:8px;padding:16px}.ff-consent__b .btn{flex:1 1 auto}}