@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

/* Layout: one reading column for argument, full-measure figure bands for every diagram; a navy monitor-style opener states the thesis as a trace. */
:root{
  --navy:#1F2080; --green:#5E9400; --ice:#C6E9F7; --amber:#B97A00; --red:#B8322F;
  --bg:#F6F8FC; --surface:#FFFFFF; --fg:#14183A; --muted:#565C7C; --rule:#D5DBEA;
  --plate:#FFFFFF; --plate-fg:#4A4F66; --tint:#E9EEFA; --accent:#1F2080; --band:#FBF1DA;
  --hero-bg:#141A4E; --hero-fg:#F2F6FF; --hero-muted:#A9B6E6; --hero-ice:#C6E9F7; --hero-green:#9AD92B; --hero-amber:#F2B53A;
  --display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --navy:#8E9BFF; --green:#9AD92B; --ice:#C6E9F7; --amber:#F2B53A; --red:#FF7A75;
  --bg:#0D1126; --surface:#161B3A; --fg:#EEF1FB; --muted:#A5ACCB; --rule:#2B3260;
  --tint:#1B2148; --accent:#C6E9F7; --band:#3A3113; color-scheme:dark } }
:root[data-theme="dark"]{
  --navy:#8E9BFF; --green:#9AD92B; --ice:#C6E9F7; --amber:#F2B53A; --red:#FF7A75;
  --bg:#0D1126; --surface:#161B3A; --fg:#EEF1FB; --muted:#A5ACCB; --rule:#2B3260;
  --tint:#1B2148; --accent:#C6E9F7; --band:#3A3113; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.0625rem;line-height:1.62;margin:0}
.wrap{max-width:1060px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.08}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prose{max-width:66ch;display:grid;gap:1rem}

/* Opener */
.hero{background:var(--hero-bg);color:var(--hero-fg)}
.hero .wrap{padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px);display:grid;gap:clamp(24px,4vw,40px)}
.hero-head{display:grid;gap:.6rem}
.hero .eyebrow{color:var(--hero-muted)}
.hero h1{font-size:clamp(3.4rem,11vw,7rem);font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.hero .tag{font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:500;color:var(--hero-green)}
.hero .lede{max-width:52ch;font-size:1.2rem;color:var(--hero-fg)}
.hero figcaption{color:var(--hero-muted)}
.brandline{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-muted)}

.mast{background:var(--plate);color:var(--plate-fg)}
.mast .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:14px}
.mast .lock{height:clamp(52px,8vw,72px);width:auto}
.mast .mdy{height:clamp(60px,9vw,84px);width:auto}
.mast span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.hero .wrap > *{min-width:0}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,330px);gap:clamp(20px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:clamp(18px,3vw,30px);min-width:0}
.wearable{margin:0;min-width:0}
.wearable svg{display:block;width:100%;height:auto}
.wearable figcaption{text-align:center;margin-top:.6rem}
@media (max-width:700px){.hero-top{grid-template-columns:1fr}.wearable{max-width:250px;margin-inline:auto}}
.hero svg .w-strap{fill:#2A3187;stroke:var(--hero-ice);stroke-width:1.6}
.hero svg .w-body{fill:#0A0E33;stroke:var(--hero-ice);stroke-width:2.4}
.hero svg .w-screen{fill:#141A4E;stroke:#3A4399;stroke-width:1}
.hero svg .w-crown{fill:var(--hero-ice)}
.hero svg .w-hole{fill:#141A4E;stroke:var(--hero-ice);stroke-width:1}
.hero svg .w-arc{fill:none;stroke:var(--hero-green);stroke-width:3;stroke-linecap:round}
.hero svg .w-pill{fill:var(--hero-amber)}
.hero svg .t-d{fill:#141A4E;font-weight:500}
.hero svg .d-g{fill:var(--hero-green)}
/* Sections */
section{padding-block:clamp(40px,6vw,76px);border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(20px,3vw,32px);max-width:30ch}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:600}
.pull{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:500;line-height:1.2;color:var(--accent);max-width:24ch;margin-top:clamp(24px,4vw,40px)}

figure{margin:clamp(24px,4vw,40px) 0 0}
.fig-scroll{overflow-x:auto}
.fig-scroll svg{display:block;width:100%;min-width:640px;height:auto}
figcaption{font-size:.9rem;color:var(--muted);margin-top:.8rem;max-width:70ch}
figcaption b{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-right:.5em}

/* SVG classes (page tokens, so both themes read) */
svg text{font-family:var(--mono);font-size:12px;fill:var(--fg)}
svg .lab{font-family:var(--display);font-size:17px;font-weight:600}
svg .tm{fill:var(--muted)}
svg .box{fill:var(--surface);stroke:var(--fg);stroke-width:1.4}
svg .box-key{fill:var(--tint);stroke:var(--navy);stroke-width:2}
svg .ln{fill:none;stroke:var(--fg);stroke-width:1.5}
svg .ln-m{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 4}
svg .ln-g{fill:none;stroke:var(--green);stroke-width:2.6}
svg .ah{fill:var(--fg)}
svg .dot{fill:var(--navy)}
svg .dot-g{fill:var(--green)}
svg .bandfill{fill:var(--band)}
svg .t-g{fill:var(--green)} svg .t-a{fill:var(--amber)} svg .t-n{fill:var(--navy)}
/* opener drawing uses the fixed opener palette */
.hero svg text{fill:var(--hero-muted)}
.hero svg .h-obs{fill:none;stroke:var(--hero-ice);stroke-width:2.4}
.hero svg .h-fc{fill:none;stroke:var(--hero-green);stroke-width:2.4;stroke-dasharray:7 6}
.hero svg .h-cone{fill:var(--hero-green);opacity:.16}
.hero svg .h-zone{fill:var(--hero-amber);opacity:.14}
.hero svg .h-thr{fill:none;stroke:var(--hero-amber);stroke-width:1.4;stroke-dasharray:3 5}
.hero svg .h-now{fill:none;stroke:var(--hero-fg);stroke-width:1.2;stroke-dasharray:2 4}
.hero svg .h-grid{fill:none;stroke:var(--hero-muted);stroke-width:.6;opacity:.35}
.hero svg .h-br{fill:none;stroke:var(--hero-fg);stroke-width:1.4}
.hero svg .t-w{fill:var(--hero-fg)} .hero svg .t-hg{fill:var(--hero-green)} .hero svg .t-ha{fill:var(--hero-amber)}
.hero svg .d-w{fill:var(--hero-fg)} .hero svg .d-a{fill:var(--hero-amber)}

/* Three gaps */
.gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,36px)}
.gaps > div{display:grid;gap:.5rem;align-content:start;min-width:0;padding-top:1rem;border-top:3px solid var(--navy)}
.gaps h3{font-size:1.35rem;font-weight:600}
.gaps p{color:var(--muted)}

/* Four functions */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,2.6vw,30px);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:.5rem;align-content:start;min-width:0}
.steps svg{width:56px;height:56px}
.steps .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
.steps .n::before{content:"0" counter(s) "  "}
.steps h3{font-size:1.5rem;font-weight:600}
.steps p{color:var(--muted)}
.ic{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic-g{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic-f{fill:var(--green);stroke:none}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(24px,4vw,40px)}
.two > div{display:grid;gap:.5rem;align-content:start;min-width:0}
.two h3{font-size:1.45rem;font-weight:600}
.two .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* Programme */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:clamp(24px,4vw,40px);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.prog > div{padding:1.1rem 1.1rem 1.2rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:.5rem;align-content:start;min-width:0;background:var(--surface)}
.prog h3{font-size:1.2rem;font-weight:600}
.prog ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.8rem;line-height:1.7;color:var(--muted)}
.prog .all{background:var(--tint)}
.prog .all h3{color:var(--accent)}
.prog .all p{font-size:.95rem}

/* Warning */
.warn{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:680px){.warn{grid-template-columns:1fr}}
.warn svg{width:100%;max-width:300px;height:auto;display:block;margin-inline:auto}
.warn dl{margin:0;display:grid;gap:1.2rem}
.warn dt{font-family:var(--display);font-size:1.4rem;font-weight:600}
.warn dd{margin:.15rem 0 0;color:var(--muted);max-width:52ch}
.dev-body{fill:var(--hero-bg);stroke:var(--fg);stroke-width:2}
.dev-strap{fill:var(--tint);stroke:var(--fg);stroke-width:1.6}
.dev-t{fill:var(--hero-muted) !important}
.dev-w{fill:var(--hero-fg) !important}
.dev-g{fill:var(--hero-green) !important}
.dev-a{fill:var(--hero-amber) !important}
.dev-obs{fill:none;stroke:var(--hero-ice);stroke-width:2}
.dev-fc{fill:none;stroke:var(--hero-green);stroke-width:2;stroke-dasharray:5 4}
.dev-thr{fill:none;stroke:var(--hero-amber);stroke-width:1.2;stroke-dasharray:3 4}
.dev-pill{fill:var(--hero-amber)}
.dev-pt{fill:var(--hero-bg) !important;font-weight:500}

/* Settings */
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,2.6vw,30px);position:relative}
.settings > div{display:grid;gap:.5rem;align-content:start;min-width:0}
.settings svg{width:64px;height:64px}
.settings h3{font-size:1.4rem;font-weight:600}
.settings p{color:var(--muted)}
.onedev{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:.8rem;margin-bottom:clamp(18px,3vw,28px)}
.onedev::after{content:"";flex:1;height:2px;background:var(--green)}

/* Programme of work */
.road{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;gap:0;max-width:820px}
.road li{counter-increment:r;display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;padding-bottom:1.6rem;position:relative}
.road li::before{content:counter(r);font-family:var(--display);font-weight:700;font-size:1.3rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--navy);color:var(--bg);display:grid;place-items:center;position:relative;z-index:1}
.road li::after{content:"";position:absolute;left:1.3rem;top:2.6rem;bottom:0;width:2px;background:var(--rule)}
.road li:last-child{padding-bottom:0}
.road li:last-child::after{display:none}
.road li:last-child::before{background:var(--green)}
.road div{min-width:0;display:grid;gap:.25rem;align-content:start;padding-top:.3rem}
.road h3{font-size:1.4rem;font-weight:600}
.road p{color:var(--muted);max-width:60ch}

.close{background:var(--hero-bg);color:var(--hero-fg);border-top:0}
.close .wrap{display:grid;gap:1.2rem}
.close p.big{font-family:var(--display);font-weight:600;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.08;max-width:18ch;text-wrap:balance}
.close p.big span{color:var(--hero-green)}

/* Additions: conditions map, device, journey, scenarios, benefits */
svg .rl{font-family:var(--display);font-size:15px;font-weight:600}
svg .colband{fill:var(--tint)}
svg .rowln{stroke:var(--rule);stroke-width:1;fill:none}
svg .ln-a{fill:none;stroke:var(--amber);stroke-width:1.3;stroke-dasharray:3 4}
svg .ln-n{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
svg .ln-gd{fill:none;stroke:var(--green);stroke-width:2.2;stroke-dasharray:5 4;stroke-linecap:round}
svg .ln-gs{fill:none;stroke:var(--green);stroke-width:3}
svg .arm{fill:var(--tint);stroke:var(--muted);stroke-width:1.4}
svg .sens{fill:var(--green)}
svg .ah-g{fill:var(--green)}
.scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:clamp(28px,4vw,56px)}
.scen article{display:grid;gap:.7rem;align-content:start;min-width:0;padding-top:1rem;border-top:3px solid var(--green)}
.scen .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scen h3{font-size:1.5rem;font-weight:600}
.scen svg{width:100%;max-width:300px;height:auto;display:block}
.scen ol{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.scen li{display:grid;grid-template-columns:5.6rem 1fr;gap:.8rem;min-width:0}
.scen li b{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);padding-top:.3rem}
.scen li span{color:var(--muted);min-width:0}
.note{font-size:.9rem;color:var(--muted);margin-top:clamp(20px,3vw,30px)}
.ben{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(20px,3vw,36px)}
.ben > div{display:grid;gap:.45rem;align-content:start;min-width:0}
.ben .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ben h3{font-size:1.5rem;font-weight:600;color:var(--accent)}
.ben p{color:var(--muted)}

/* ---------- Website shell ---------- */
html{scroll-behavior:smooth}
.hero .wrap > *,.page-head .wrap > *{min-width:0}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:var(--bg);padding:.6rem 1rem;z-index:20}
.skip:focus{left:8px;top:8px}
.site-head{position:sticky;top:0;z-index:10;background:var(--plate);color:var(--plate-fg);border-bottom:1px solid #D5DBEA}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.site-head .brand img{height:clamp(44px,6vw,58px);width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.site-nav a{font-family:var(--display);font-weight:600;font-size:1.08rem;text-decoration:none;color:#14183A;padding:.45rem 0;border-bottom:3px solid transparent}
.site-nav a:hover{border-bottom-color:#C6E9F7}
.site-nav a[aria-current="page"]{border-bottom-color:#5E9400;color:#1F2080}
.nav-toggle{display:none;font-family:var(--display);font-weight:600;font-size:1rem;background:#1F2080;color:#FFFFFF;border:0;border-radius:6px;padding:.55rem .9rem;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #5E9400;outline-offset:3px}
@media (max-width:860px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--plate);flex-direction:column;align-items:stretch;gap:0;padding:6px clamp(16px,4vw,40px) 14px;border-bottom:1px solid #D5DBEA}
  .site-nav.open{display:flex}
  .site-nav a{padding:.8rem 0;border-bottom:1px solid #E9EEFA}
}
.page-head{background:var(--hero-bg);color:var(--hero-fg)}
.page-head .wrap{padding-block:clamp(36px,6vw,72px);display:grid;gap:.8rem}
.page-head .eyebrow{color:var(--hero-muted)}
.page-head h1{font-size:clamp(2.4rem,6.4vw,4.4rem);font-weight:700;max-width:18ch}
.page-head p{max-width:56ch;font-size:1.2rem;color:var(--hero-fg)}
main > section:first-of-type{border-top:0}
.teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(16px,2.4vw,28px)}
.teasers a{display:grid;gap:.5rem;align-content:start;min-width:0;text-decoration:none;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:1.3rem 1.3rem 1.4rem;transition:border-color .15s,transform .15s}
.teasers a:hover{border-color:var(--navy);transform:translateY(-2px)}
.teasers .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.teasers h3{font-size:1.5rem;font-weight:600}
.teasers p{color:var(--muted)}
.teasers .go{font-family:var(--display);font-weight:600;color:var(--accent);margin-top:.3rem}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.next a{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);color:var(--accent);text-decoration:none;border-bottom:3px solid var(--green)}
.site-foot{background:var(--plate);color:#14183A;border-top:1px solid #D5DBEA}
.foot-grid{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(160px,1fr));gap:clamp(24px,4vw,48px);padding-block:clamp(32px,5vw,52px)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid > div{min-width:0;display:grid;gap:.8rem;align-content:start}
.site-foot img.lock{height:64px;width:auto}
.site-foot img.mdy{height:76px;width:auto;margin-top:.4rem}
.foot-brand p{color:#4A4F66;max-width:34ch;font-size:.98rem}
.foot-brand strong{color:#1F2080}
.foot-brand .enq{font-size:.95rem}
.foot-brand .enq a{font-family:var(--mono);color:#1F2080;font-size:.95rem}
.site-foot h4{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#565C7C;margin:0}
.site-foot nav{display:grid;gap:.5rem}
.site-foot nav a{font-family:var(--display);font-weight:600;color:#14183A;text-decoration:none}
.site-foot nav a:hover{color:#1F2080;text-decoration:underline}
.site-foot address{font-style:normal;color:#4A4F66;line-height:1.6}
.foot-legal{background:var(--hero-bg);color:var(--hero-muted);font-size:.86rem}
.foot-legal .wrap{padding-block:18px 22px;display:grid;gap:.3rem}
.foot-legal p:first-child{color:var(--hero-fg)}
.cta-line{max-width:52ch;font-size:1.15rem;color:var(--hero-fg)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:.6rem}
.cta .btn{font-family:var(--display);font-weight:700;font-size:1.25rem;text-decoration:none;background:var(--hero-green);color:#141A4E;padding:.8rem 1.6rem;border-radius:8px}
.cta .btn:hover{background:#B4EE4A}
.cta .mail{font-family:var(--mono);font-size:1rem;color:var(--hero-fg);user-select:all}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.teasers a{transition:none}}