/* The stylesheet the newer pages share: the desk, the systems, the sectors
   and the films. The tokens, type, buttons, top bar, cards and footer are
   lifted from the home page (index.html) so these pages read as the same
   site; the components after "new for these pages" are theirs. The home
   page's own :root is the authority for every colour here. */

:root{
  --void:#07080B;
  --deep:#071040;
  --panel:#0F1D54;
  --panel-2:#132365;
  --ink:#FFFFFF;
  --mist:#E7F1FD;
  --faint:#C2D3EA;
  --dim:#7E93B4;
  --line:rgba(255,255,255,.2);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.11);
  --teal:#2FDDA0;
  --teal-soft:rgba(47,221,160,.5);
  --cyan:#9CC6EC;
  --ice:#EDF7FF;
  --amber:#D9A441;
  --grad:linear-gradient(105deg,#2FDDA0 0%,#3EE3C0 28%,#3FC8F5 62%,#3E9BFF 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--void);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-weight:400;
  line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
::selection{background:rgba(47,221,160,.24);color:#fff}
a{color:inherit;text-decoration:none}
img,svg,video{display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid rgba(47,221,160,.7);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skiplink{position:absolute;left:16px;top:-60px;z-index:200;background:var(--teal);color:#04120f;padding:10px 14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.skiplink:focus{top:44px}

/* atmosphere, held still: the home page's aurora without the drift */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen}
.a1{top:-26vh;left:-16vw;width:52vw;height:52vw;opacity:.12;background:radial-gradient(circle at 42% 42%,rgba(47,221,160,.42),transparent 52%)}
.a2{top:-16vh;right:-26vw;width:56vw;height:56vw;opacity:.12;background:radial-gradient(circle at 58% 42%,rgba(156,198,236,.4),transparent 52%)}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(116% 94% at 50% 34%,transparent 40%,rgba(0,0,0,.84) 100%)}
.grid{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.033) 1px,transparent 1px);
  background-size:88px 88px;mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%)}

/* layout */
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(16px,5vw,72px);position:relative;z-index:5}
main,section,header.page-hero{position:relative;z-index:5}
.scene{padding:clamp(72px,11vh,130px) 0}
.seam{height:1px;position:relative;z-index:5;max-width:1220px;margin:0 auto}
.seam i{display:block;height:1px;width:100%;background:linear-gradient(90deg,rgba(47,221,160,.55),rgba(156,198,236,.28) 40%,transparent 90%)}

/* type */
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--faint);display:flex;align-items:center;gap:16px}
.eyebrow .idx{color:var(--teal)}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);max-width:min(46vw,520px)}
h1,h2,h3{font-family:'Inter',sans-serif}
.page-h1{font-weight:300;font-size:clamp(32px,5.2vw,60px);line-height:1.1;letter-spacing:-.02em;margin:24px 0 20px;max-width:19ch;padding-bottom:.06em}
h2{font-weight:300;font-size:clamp(28px,4.4vw,50px);line-height:1.14;letter-spacing:-.02em;margin:24px 0 18px;max-width:18ch;padding-bottom:.06em}
h3{font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.lede{color:var(--mist);font-weight:400;font-size:clamp(15px,1.5vw,18.5px);line-height:1.62;max-width:64ch;margin-bottom:clamp(28px,4vh,48px)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.note{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:1.8;margin-top:12px;max-width:90ch}
.note b{color:var(--faint);font-weight:500}
.prose p{color:var(--faint);font-size:15.5px;line-height:1.7;max-width:66ch;margin-bottom:14px}
.prose p b{color:var(--ink);font-weight:500}

/* top bar, as on every page */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,5vw,72px);background:rgba(5,7,14,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2)}
.nav-mark svg{display:block;height:26px;width:auto;overflow:visible}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);
  position:relative;padding:4px 0;transition:color .3s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--teal);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{width:100%}
@media(max-width:1100px){.nav-links{gap:20px}.nav-links a{font-size:11px;letter-spacing:.1em}}
@media(max-width:900px){.nav-links a:not(.btn){display:none}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;font-family:'JetBrains Mono',monospace;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border-radius:2px;cursor:pointer;
  transition:background .3s,color .3s,box-shadow .35s var(--ease),border-color .35s var(--ease)}
.btn .in{display:inline-flex;align-items:center;gap:11px}
.btn-solid{background:linear-gradient(115deg,var(--teal),#63ecd6 50%,var(--teal));background-size:220% 100%;color:#04120f;font-weight:500;border:0;
  box-shadow:0 8px 30px -14px rgba(47,221,160,.5)}
.btn-solid:hover{background-position:100% 0;box-shadow:0 16px 46px -12px rgba(47,221,160,.78)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:rgba(47,221,160,.5);background:rgba(47,221,160,.05)}
.btn svg{width:14px;height:14px}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}
.cta-link{display:inline-flex;align-items:center;gap:8px;padding:4px 2px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid rgba(47,221,160,.32);transition:color .3s,border-color .3s}
.cta-link:hover{color:var(--teal);border-bottom-color:var(--teal)}
.inl{color:var(--teal);border-bottom:1px solid rgba(47,221,160,.35)}

/* cards, as the home page draws them */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-3);border:1px solid var(--line-3)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cards,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}
.card{position:relative;background:rgba(4,6,10,.88);padding:30px 26px 28px}
.card .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.card .tag.amber{color:var(--amber)}
.card h3{margin-bottom:10px}
.card p{color:var(--faint);font-size:14.5px;line-height:1.62}
.card p + p{margin-top:10px}
.card a.more{display:inline-block;margin-top:16px}

/* page hero */
.page-hero{padding:clamp(120px,17vh,170px) 0 clamp(40px,7vh,80px)}
.crumb{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--teal)}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:960px){.hero-split{grid-template-columns:1fr}}

/* ---------------- new for these pages ---------------- */

/* a product picture: the demo desk, framed like a window */
.shot{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#0a0c12;
  box-shadow:0 30px 80px -40px rgba(47,221,160,.35),0 0 0 1px rgba(47,221,160,.06)}
.shot img{width:100%;height:auto}
.shot-bar{display:flex;gap:6px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-3);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.shot-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.shot-bar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-cap{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:12px;line-height:1.7}

/* words and a picture, side by side; stacks on a phone */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.flip{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.split.flip > :first-child{order:2}
@media(max-width:960px){.split,.split.flip{grid-template-columns:1fr}.split.flip > :first-child{order:0}}

/* a checklist in prose */
.ticks{display:grid;gap:12px;margin-top:6px;padding:0}
.ticks li{list-style:none;display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--mist);font-size:15px;line-height:1.58}
.ticks li::before{content:"";width:8px;height:8px;margin-top:7px;border:1.5px solid var(--teal);transform:rotate(45deg)}
.ticks b{color:var(--ink);font-weight:500}

/* the work, listed by what it takes off people */
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px;padding:0}
@media(max-width:1000px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.work{grid-template-columns:1fr}}
.work li{list-style:none;border:1px solid var(--line-3);border-radius:4px;padding:20px 20px 18px;background:rgba(4,6,10,.86)}
.work .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.work h3{font-size:17px;margin:10px 0 6px}
.work p{color:var(--faint);font-size:14px;line-height:1.6}

/* figures with their sources */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-3);border:1px solid var(--line-3);margin:10px 0 8px}
.figs > div{background:rgba(4,6,10,.92);padding:22px 20px}
.figs .n{font-weight:300;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.02em}
.figs .d{color:var(--faint);font-size:14px;line-height:1.5;margin-top:10px}
@media(max-width:900px){.figs{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.figs{grid-template-columns:1fr}}

/* the systems, with their marks */
.systems{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:18px;padding:0}
.sys{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-3);border-radius:6px;background:rgba(4,6,10,.8);min-width:0}
.sys-n{font-size:13px;color:var(--mist);line-height:1.25;min-width:0;overflow-wrap:anywhere}
.ilogo{display:inline-grid;place-items:center;flex:none;overflow:hidden;width:34px;height:34px;border-radius:9px;padding:6px}
.ilogo.colour{background:#F6F5F1;padding:5px}
.ilogo.mono{padding:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ilogo.mono img{filter:invert(1) brightness(2)}
.ilogo.mono.dark img{filter:none}
.ilogo img{width:100%;height:100%;object-fit:contain}
.catlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-3);border:1px solid var(--line-3);margin-top:18px;padding:0}
@media(max-width:960px){.catlist{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.catlist{grid-template-columns:1fr}}
.catlist li{list-style:none;background:rgba(4,6,10,.9);padding:18px 18px 16px}
.catlist .c{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.catlist .c b{font-weight:400;color:var(--ink);font-size:15px}
.catlist .c span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal)}
.catlist p{color:var(--faint);font-size:13.5px;line-height:1.55;margin-top:6px}

/* films */
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,34px)}
@media(max-width:860px){.films{grid-template-columns:1fr}}
.film{min-width:0}
.film-frame{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#04060A;aspect-ratio:16/9}
.film-frame.sq{aspect-ratio:1/1;max-width:560px}
.film-frame video{width:100%;height:100%;object-fit:contain;background:#04060A}
.film h3{margin:16px 0 6px}
.film .len{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.film p{color:var(--faint);font-size:14.5px;line-height:1.6;max-width:60ch}
.film details{margin-top:10px;color:var(--faint);font-size:14px}
.film summary{cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  min-height:32px;display:flex;align-items:center}
.film details p{margin-top:8px}
.hellos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.hellos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.hellos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hello .film-frame{aspect-ratio:1/1}
.hello b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:.08em;margin-top:10px}
.hello span{display:block;color:var(--faint);font-size:13px}

/* a slot for a film still to be supplied: test site only */
.vslot{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px dashed rgba(217,164,65,.75);
  background:radial-gradient(120% 90% at 30% 20%,rgba(47,221,160,.12),transparent 60%),linear-gradient(160deg,#0b1220,#07080B);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2.4vw,26px)}
.vslot .vs-id{position:absolute;top:14px;left:16px;right:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--amber);text-transform:uppercase}
.vslot .vs-play{position:absolute;top:42%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border:1.5px solid rgba(47,221,160,.75);transform:rotate(45deg);display:grid;place-items:center}
.vslot .vs-play::after{content:"";transform:rotate(-45deg) translateX(2px);border-left:13px solid var(--teal);border-top:8px solid transparent;border-bottom:8px solid transparent}
.vslot .vs-t{font-size:clamp(15px,1.5vw,18px);color:var(--ink);position:relative}
.vslot .vs-w{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:6px;position:relative;line-height:1.6}

/* a figure or a price wanted but not known: test site only */
.ph{display:inline-block;border:1px dashed rgba(217,164,65,.8);color:var(--amber);padding:2px 8px;border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* a slot and its note side by side; a wide picture under a list */
.slotrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,40px);align-items:center;max-width:980px}
@media(max-width:860px){.slotrow{grid-template-columns:1fr}}
.wide-shot{max-width:980px;margin-top:28px}

/* trust, in plain words */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.tcard{border:1px solid var(--line-3);border-radius:4px;padding:22px 22px 20px;background:rgba(4,6,10,.86)}
.tcard .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--teal);text-transform:uppercase}
.tcard h3{font-size:18px;margin:10px 0 8px}
.tcard p{color:var(--faint);font-size:14.5px;line-height:1.6}
@media(max-width:1000px){.tgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tgrid{grid-template-columns:1fr}}

/* the closing band on each page: the scan and a conversation */
.close-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(26px,4vw,48px);border:1px solid rgba(47,221,160,.35);background:linear-gradient(140deg,rgba(47,221,160,.08),rgba(4,6,10,.92) 55%)}
@media(max-width:900px){.close-band{grid-template-columns:1fr}}
.close-band h2{margin-top:14px;font-size:clamp(26px,3.4vw,42px)}
.scanform{display:flex;gap:10px;flex-wrap:wrap}
.scanform label{width:100%;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.scanform input{flex:1 1 220px;min-width:0;background:rgba(255,255,255,.028);border:1px solid var(--line-3);color:var(--ink);
  font-family:'Inter',sans-serif;font-weight:300;font-size:16px;padding:14px 16px;border-radius:2px}
.scanform input:focus{border-color:rgba(47,221,160,.5);outline:none;box-shadow:0 0 0 1px rgba(47,221,160,.18)}
.scanform input::placeholder{color:var(--dim)}
@media(max-width:560px){.scanform .btn{width:100%;justify-content:center}}

/* footer, as on every page */
footer{position:relative;z-index:5;padding:clamp(60px,9vh,110px) 0 46px;margin-top:clamp(40px,8vh,90px)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(47,221,160,.45) 30%,rgba(156,198,236,.35) 70%,transparent)}
.foot-grid{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}
.foot-lead{font-weight:300;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;margin-bottom:16px}
.foot-body{color:var(--faint);font-size:15px;max-width:44ch;margin-bottom:34px}
.foot-mark svg{width:210px;height:auto;overflow:visible}
.foot-right{display:flex;flex-direction:column;gap:14px;align-items:flex-end;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
@media(max-width:700px){.foot-right{align-items:flex-start}}
.foot-right a{color:var(--faint);padding:2px 0;transition:color .3s}
.foot-right a:hover{color:var(--ink)}
.entity{margin-top:40px;color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em}
.disclaimer{margin-top:18px;padding-top:22px;border-top:1px solid var(--line-3);color:var(--dim);font-size:12px;line-height:1.7;max-width:100ch}
.disclaimer a{color:var(--teal)}

@media (max-width:768px){
  nav a,footer a,a.btn{min-height:44px;display:inline-flex;align-items:center}
  summary{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}