@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme:dark;
  --background:#0B0F12;
  --panel:#151B1F;
  --text:#E8E6DF;
  --muted:#9AA4A8;
  --line:#394248;
  --orange:#D45A2F;
  --dark:#101417;
  --beige:#B9B2A3;
  --mono:'IBM Plex Mono',monospace;
  --sans:'DM Sans',Arial,sans-serif}

*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body{
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65}
a{
  color:inherit;
  text-decoration:none}
button{
  font:inherit;
  cursor:pointer}
img{
  max-width:100%;
  display:block}
button,a{
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:5px}
::selection{
  background:var(--orange);
  color:var(--background)}
[hidden]{
  display:none!important}
.motion-enabled .reveal-item{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:
    opacity 650ms cubic-bezier(.2,.7,.2,1),
    transform 650ms cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms)}
.motion-enabled .reveal-item.is-visible{
  opacity:1;
  transform:translate3d(0,0,0)}
.skip-link{
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  padding:12px;
  background:var(--panel);
  color:var(--text)}
.skip-link:focus{
  top:10px}
.site-header{
  height:100px;
  padding:0 5.2%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:var(--background);
  position:sticky;
  top:0;
  z-index:20}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  letter-spacing:2px;
  font-weight:700;
  line-height:1.2}
.brand-mark{
  position:relative;
  display:block;
  flex:0 0 55px;
  width:55px;
  height:55px}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain}
.brand-node{
  position:absolute;
  left:45.5%;
  top:46.5%;
  width:10%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--orange);
  pointer-events:none}
.motion-enabled .site-header .brand-mark{
  animation:brand-mark-in 560ms cubic-bezier(.2,.7,.2,1) both}
.motion-enabled .site-header .brand-node{
  animation:brand-node-pulse 420ms 480ms ease-out both}
@keyframes brand-mark-in{
  from{opacity:0;transform:translate3d(-5px,4px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes brand-node-pulse{
  0%{opacity:.4;transform:scale(.75)}
  55%{opacity:1;transform:scale(1.22)}
  100%{opacity:1;transform:scale(1)}}
.brand small{
  display:block;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:1.9px;
  font-weight:400;
  margin-top:7px}
nav{
  display:flex;
  gap:33px;
  align-items:center;
  font-size:13px;
  font-weight:550}
nav a{
  position:relative}
nav a::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 200ms ease-out}
nav a:hover::after,nav a:focus-visible::after{
  transform:scaleX(1)}
nav>a:hover{
  color:var(--orange)}
.nav-contact{
  border-left:1px solid var(--line);
  padding-left:30px}
.nav-contact span{
  margin-left:17px;
  color:var(--orange)}
.menu-toggle{
  display:none}
.hero{
  padding:57px 5.2% 0;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.13fr;
  gap:15px;
  overflow:hidden}
.eyebrow,.section-label,.status-line,.drawing-header,.hero-visual figcaption,.hero-bottom,.mission-strip span,.scope-tag,.node-index,.diagram-note,.research-foot>div>span,.small-index,.application-label span,.stack-table>div>span,.stack-table small,.evidence-note,footer>span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.25px;
  line-height:1.5}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 26px}
.orange-line{
  display:inline-block;
  background:var(--orange);
  width:23px;
  height:2px;
  flex-shrink:0}
h1,h2,h3,p{
  margin-top:0}
h1{
  font-size:clamp(48px,4.7vw,76px);
  font-weight:500;
  letter-spacing:-3.8px;
  line-height:1.07;
  margin:0 0 29px}
h1>span{
  color:var(--orange)}
.hero-description{
  font-size:16px;
  line-height:1.75;
  max-width:410px;
  color:var(--muted);
  margin-bottom:31px}
.hero-actions{
  display:flex;
  align-items:center;
  gap:24px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:15px 21px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  transition:background .2s,transform .2s}
.primary{
  background:var(--orange);
  color:var(--background)}
.primary:hover{
  background:#E07043;
  transform:translateY(-2px)}
.button span{
  font-size:19px;
  line-height:1;
  transition:transform 200ms ease-out}
.button:hover span,.button:focus-visible span{
  transform:translate3d(3px,-1px,0)}
.text-link{
  font-size:12px;
  font-weight:550;
  display:inline-flex;
  gap:16px;
  align-items:center}
.text-link span,.organisation-link span,.contact-email span,.copy-button span,.hero-bottom a span{
  transition:transform 200ms ease-out}
.text-link:hover span,.text-link:focus-visible span,.organisation-link:hover span,.organisation-link:focus-visible span,.contact-email:hover span,.contact-email:focus-visible span,.copy-button:hover span,.copy-button:focus-visible span,.hero-bottom a:hover span,.hero-bottom a:focus-visible span{
  transform:translate3d(3px,-1px,0)}
.text-link:hover{
  color:var(--orange)}
.status-line{
  margin-top:35px;
  font-size:8px;
  letter-spacing:.65px;
  display:flex;
  align-items:center;
  gap:8px}
.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--orange);
  border-radius:50%;
  flex-shrink:0}
.status-separator{
  margin:0 3px;
  color:var(--line)}
.hero-visual{
  --cad-pointer-x:0px;
  --cad-pointer-y:0px;
  --cad-scroll-y:0px;
  --cad-rotate-x:0deg;
  --cad-rotate-y:0deg;
  margin:0;
  position:relative;
  perspective:1100px;
  background-image:linear-gradient(#39424840 1px,transparent 1px),linear-gradient(90deg,#39424840 1px,transparent 1px);
  background-size:38px 38px;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.drawing-header{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  padding:0 8px 0 23px;
  font-size:8px}
.crosshair{
  font-size:25px;
  line-height:1}
.hero-visual>img{
  width:100%;
  height:400px;
  object-fit:contain;
  transform:
    translate3d(var(--cad-pointer-x),calc(var(--cad-pointer-y) + var(--cad-scroll-y)),0)
    rotateX(var(--cad-rotate-x))
    rotateY(var(--cad-rotate-y));
  transform-origin:50% 52%;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
  will-change:transform}
.motion-enabled .hero-copy{
  animation:hero-copy-in 700ms cubic-bezier(.2,.7,.2,1) both}
.motion-enabled .hero-visual{
  animation:hero-media-in 780ms 90ms cubic-bezier(.2,.7,.2,1) both}
@keyframes hero-copy-in{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-media-in{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}}
.hero-visual figcaption{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid var(--line);
  padding:14px 0;
  color:var(--muted);
  font-size:7px;
  letter-spacing:.7px}
.hero-visual figcaption b{
  color:var(--orange);
  margin-right:7px}
.hero-bottom{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  padding:37px 0 22px;
  font-size:8px;
  color:var(--muted)}
.hero-bottom a{
  color:var(--text)}
.hero-bottom a span{
  margin-left:22px;
  font-size:16px}
.mission-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:27px 5.2%;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel)}
.mission-strip>div{
  padding-left:25px;
  border-left:1px solid var(--line)}
.mission-strip>div:first-child{
  padding-left:0;
  border-left:0}
.mission-strip span{
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-bottom:9px}
.mission-strip strong{
  font-size:14px;
  font-weight:500}
.section{
  padding:76px 5.2%;
  scroll-margin-top:0}
.section-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-bottom:43px;
  font-size:9px}
.section-label>span:first-child::before{
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--orange);
  margin-right:10px;
  vertical-align:2px}
.section-label>span:last-child{
  color:var(--muted);
  font-size:8px}
h2{
  font-size:clamp(32px,3.35vw,48px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-1.7px;
  margin-bottom:25px}
h3{
  font-size:21px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.5px;
  margin-bottom:15px}
p{
  color:var(--muted)}
.section-intro,.heading-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  align-items:start}
.section-intro .lead{
  font-size:21px;
  line-height:1.55;
  letter-spacing:-.35px;
  color:var(--text)}
.section-intro p:not(.lead){
  font-size:14px}
.scope-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:34px}
.scope-cards article{
  border-top:1px solid var(--line);
  padding-top:25px}
@media(hover:hover) and (pointer:fine){
  .scope-cards article,.workflow-grid article,.testing-grid article,.diagram-node{
    transition:transform 200ms ease-out,border-color 200ms ease-out,background-color 200ms ease-out}
  .scope-cards article:hover,.workflow-grid article:hover,.testing-grid article:hover,.diagram-node:hover{
    transform:translate3d(0,-2px,0);
    border-color:#59636a;
    background-color:#151b1f80}
}
.scope-tag{
  display:inline-block;
  width:max-content;
  font-size:8px;
  padding:5px 8px;
  letter-spacing:.7px;
  margin-bottom:20px}
.current{
  background:#1E2926;
  color:#B7C7BC}
.planned{
  background:#2C211A;
  color:#F0B38F}
.future{
  background:#20272B;
  color:#B7C0C4}
.scope-cards p{
  font-size:13px;
  max-width:330px;
  margin:0}
.system-section{
  background:var(--panel)}
.heading-row>p{
  max-width:430px;
  font-size:14px;
  margin:6px 0 0}
.architecture-diagram{
  margin-top:28px;
  border:1px solid var(--line);
  padding:32px 5% 21px;
  background:var(--background)}
.diagram-node{
  --node-border:var(--line);
  border:1px solid var(--node-border);
  background:var(--background);
  padding:22px 23px;
  flex:1}
.motion-enabled .architecture-diagram.is-activated .diagram-flow .diagram-node{
  animation:architecture-node-flow 820ms 220ms ease-out both}
.motion-enabled .architecture-diagram.is-activated .diagram-flow .diagram-node:nth-of-type(2){
  animation-delay:520ms}
.motion-enabled .architecture-diagram.is-activated .diagram-flow .diagram-node:nth-of-type(3){
  animation-delay:820ms}
.motion-enabled .architecture-diagram.is-activated .diagram-flow .flow-arrow{
  animation:architecture-arrow-flow 520ms 390ms ease-out both}
.motion-enabled .architecture-diagram.is-activated .diagram-flow .flow-arrow:nth-of-type(2){
  animation-delay:690ms}
.motion-enabled .architecture-diagram.is-activated .diagram-note .status-dot{
  animation:architecture-action 500ms 1170ms ease-out both}
@keyframes architecture-node-flow{
  0%,100%{border-color:var(--node-border);background:var(--background)}
  45%{border-color:var(--orange);background:#1c1816}}
@keyframes architecture-arrow-flow{
  0%{opacity:.35;transform:translate3d(-3px,0,0)}
  55%,100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes architecture-action{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.4)}}
.diagram-node h3{
  font-size:18px;
  margin-bottom:7px}
.diagram-node p{
  font-size:12px;
  margin-bottom:0}
.learning-node{
  width:42%;
  margin:auto;
  text-align:center;
  border:1px dashed #74503B;
  background:#1E1C19}
.learning-node .scope-tag{
  margin-bottom:9px}
.learning-node h3{
  font-size:19px}
.vertical-connector{
  text-align:center;
  font-size:25px;
  height:65px;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.2}
.vertical-connector span{
  font:8px var(--mono);
  letter-spacing:1px;
  margin:9px 0 6px;
  color:var(--muted)}
.diagram-flow{
  display:flex;
  align-items:stretch}
.flow-arrow{
  align-self:center;
  padding:0 24px;
  color:var(--orange);
  font-size:24px}
.node-index{
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-bottom:17px}
.compute-node{
  --node-border:var(--beige);
  border-color:var(--beige)}
.diagram-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:24px;
  font-size:7px;
  color:var(--muted)}
.platform-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  margin-top:55px}
.platform-details .eyebrow{
  font-size:8px;
  margin-bottom:15px}
.platform-details h3{
  font-size:30px;
  letter-spacing:-1px}
.platform-details p{
  max-width:370px;
  font-size:13px}
dl{
  margin:0}
dl>div{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  border-bottom:1px solid var(--line);
  padding:15px 0;
  gap:20px;
  font-size:12px}
dt{
  color:var(--muted)}
dd{
  margin:0;
  font-weight:500}
.research-section{
  background:var(--dark);
  color:var(--text)}
.research-section .section-label{
  border-color:var(--line)}
.research-section .section-label>span:first-child{
  color:var(--muted)}
.research-section .section-label>.scope-tag{
  color:#F0B38F;
  background:#2C211A;
  margin-bottom:0}
.research-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:10%}
.research-grid .eyebrow{
  color:var(--muted);
  font-size:8px}
.research-grid h2{
  font-size:44px}
.research-grid h2 em{
  font-style:normal;
  color:var(--beige)}
.research-description{
  color:var(--muted);
  font-size:14px;
  max-width:430px}
.light-link{
  color:var(--text);
  margin-top:9px}
.visualization-media{
  margin:0;
  border:1px solid var(--line);
  background:var(--panel)}
.video-frame{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/9;
  min-height:270px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(#3942483d 1px,transparent 1px),
    linear-gradient(90deg,#3942483d 1px,transparent 1px),
    radial-gradient(circle at 52% 48%,#d45a2f1a 0,transparent 42%),
    var(--background);
  background-size:32px 32px,32px 32px,auto,auto}
.video-frame::before,.video-frame::after{
  content:'';
  position:absolute;
  width:70%;
  height:1px;
  background:var(--line)}
.video-frame::before{
  transform:rotate(29deg)}
.video-frame::after{
  transform:rotate(-29deg)}
.video-frame-top{
  position:absolute;
  inset:15px 17px auto;
  display:flex;
  justify-content:space-between;
  z-index:1;
  color:var(--muted);
  font:8px var(--mono);
  letter-spacing:1px}
.play-symbol{
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  padding-left:4px;
  border:1px solid var(--orange);
  border-radius:50%;
  background:var(--dark);
  color:var(--orange);
  font-size:18px;
  z-index:1}
.video-frame-status{
  position:absolute;
  left:17px;
  bottom:15px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:1;
  color:var(--muted);
  font:8px var(--mono);
  letter-spacing:1px}
.visualization-media figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 19px}
.visualization-media figcaption span{
  color:var(--text);
  font-size:14px;
  font-weight:500}
.visualization-media figcaption small{
  max-width:230px;
  color:var(--muted);
  font:8px/1.6 var(--mono);
  letter-spacing:.5px;
  text-align:right}
.research-foot{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  margin-top:47px;
  padding-top:26px}
.research-foot>div{
  border-left:1px solid var(--line);
  padding-left:30px}
.research-foot>div:first-child{
  border:0;
  padding:0}
.research-foot>div>span{
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-bottom:9px}
.research-foot strong{
  font-size:18px;
  font-weight:400}
.research-foot small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:6px}
.workflow-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:33px;
  border:1px solid var(--line)}
.workflow-grid article{
  display:flex;
  flex-direction:column;
  min-height:240px;
  padding:23px 25px 28px;
  border-right:1px solid var(--line)}
.workflow-grid article:last-child{
  border:0}
.step-number{
  display:flex;
  justify-content:space-between;
  font:10px var(--mono);
  color:var(--muted)}
.workflow-grid h3{
  margin:72px 0 15px;
  font-size:19px}
.workflow-grid p{
  font-size:12px;
  margin-bottom:0}
.application-line{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  margin-top:28px;
  border:1px solid var(--line);
  background:var(--panel)}
.application-label{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 27px;
  border-right:1px solid var(--line)}
.application-label span{
  color:var(--orange);
  font-size:8px;
  margin-bottom:7px}
.application-label strong{
  color:var(--text);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.4px}
.application-types{
  display:grid;
  grid-column:2/-1;
  grid-template-columns:repeat(3,1fr)}
.application-types>span{
  display:flex;
  align-items:center;
  gap:15px;
  min-height:94px;
  padding:20px 25px;
  border-right:1px solid var(--line);
  color:var(--text);
  font-size:16px;
  font-weight:500}
.application-types>span:last-child{
  border-right:0}
.application-types b{
  color:var(--orange);
  font:8px var(--mono);
  letter-spacing:1px}
.roadmap-section{
  background:var(--panel)}
.roadmap-tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:29px;
  border-bottom:1px solid var(--line)}
.roadmap-tabs::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--beige);
  opacity:.6;
  transform:scaleX(0);
  transform-origin:left}
.motion-enabled .roadmap-section.is-activated .roadmap-tabs::after{
  animation:roadmap-line-reveal 900ms ease-out forwards}
.motion-enabled .roadmap-motion-ready .roadmap-panel:not([hidden]) li{
  opacity:0;
  transform:translate3d(0,14px,0)}
.motion-enabled .roadmap-motion-ready.is-activated .roadmap-panel:not([hidden]) li{
  animation:roadmap-milestone-in 520ms ease-out forwards}
.motion-enabled .roadmap-motion-ready.is-activated .roadmap-panel:not([hidden]) li:nth-child(2){
  animation-delay:110ms}
.motion-enabled .roadmap-motion-ready.is-activated .roadmap-panel:not([hidden]) li:nth-child(3){
  animation-delay:220ms}
.motion-enabled .roadmap-motion-ready.is-activated .roadmap-panel:not([hidden]) li:nth-child(4){
  animation-delay:330ms}
.motion-enabled .roadmap-section.is-activated .roadmap-tabs button[aria-selected=true]{
  animation:roadmap-current-emphasis 680ms 480ms ease-out}
@keyframes roadmap-line-reveal{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}}
@keyframes roadmap-milestone-in{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes roadmap-current-emphasis{
  0%,100%{background-color:transparent}
  50%{background-color:#d45a2f12}}
.roadmap-tabs button{
  border:0;
  background:none;
  border-bottom:2px solid transparent;
  text-align:left;
  padding:17px 15px 18px 0;
  color:var(--muted);
  font:10px var(--mono);
  transition:color 200ms ease-out,border-color 200ms ease-out,background-color 200ms ease-out}
.roadmap-tabs button>span{
  font:13px var(--sans);
  margin-left:14px}
.roadmap-tabs button[aria-selected=true]{
  color:var(--text);
  border-color:var(--orange)}
.roadmap-tabs button[aria-selected=true]::first-letter{
  color:var(--orange)}
.roadmap-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  padding:37px 0 0}
.roadmap-panel h3{
  font-size:30px;
  line-height:1.25;
  letter-spacing:-1px}
.roadmap-panel ul{
  margin:0;
  list-style:none;
  padding:0}
.roadmap-panel li{
  display:flex;
  gap:17px;
  padding-bottom:20px}
.progress-symbol{
  flex:0 0 25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  color:#B7C7BC;
  font-size:11px;
  font-family:var(--mono)}
.active-symbol{
  color:var(--orange);
  border-color:#74503B}
.roadmap-panel strong{
  font-size:13px;
  font-weight:550}
.roadmap-panel p{
  font-size:12px;
  line-height:1.6;
  margin:6px 0 0}
.stack-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:9%}
.stack-grid>div>p{
  font-size:13px;
  max-width:350px}
.stack-table>div{
  display:grid;
  grid-template-columns:1fr 1.5fr .8fr;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:center}
.stack-table>div:first-child{
  padding-top:0}
.stack-table>div>span{
  font-size:7px;
  color:var(--muted)}
.stack-table strong{
  font-size:12px;
  font-weight:500}
.stack-table small{
  font-size:7px;
  letter-spacing:.2px;
  color:var(--muted);
  text-align:right}
.testing-section{
  padding-top:76px;
  background:var(--dark)}
.testing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:30px}
.testing-grid article{
  padding:25px 23px;
  border:1px solid var(--line)}
.small-index{
  font-size:7px;
  display:block;
  margin-bottom:27px;
  color:var(--muted)}
.testing-grid h3{
  font-size:20px}
.testing-grid p{
  font-size:12px;
  margin:0}
.testing-grid .evidence-card{
  background:var(--panel);
  border:0}
.evidence-note{
  display:flex;
  justify-content:space-between;
  font-size:6px;
  margin-top:23px;
  color:var(--muted)}
.evidence-note span{
  color:var(--orange);
  font-size:14px}
.partners-section{
  padding-top:76px}
.partners-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%}
.partners-grid .eyebrow{
  font-size:8px}
.partners-grid h2{
  font-size:49px;
  line-height:1.08}
.orange-period{
  color:var(--orange)}
.partners-grid h3{
  font-size:22px}
.partners-grid p{
  font-size:13px}
.organisation-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:3px;
  padding-bottom:5px;
  border-bottom:1px solid var(--line);
  color:var(--beige);
  font-size:13px}
.organisation-link:hover{
  color:var(--orange)}
.contact-section{
  background:var(--dark);
  color:var(--text);
  padding:42px 5.2% 0}
.contact-section .contact-label{
  margin-bottom:0;
  border-color:var(--line)}
.contact-body{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  padding:51px 0 52px}
.contact-body h2{
  font-size:60px;
  line-height:1.08;
  letter-spacing:-2px}
.contact-body h2>span{
  color:var(--orange)}
.contact-body p{
  color:var(--muted);
  font-size:13px;
  margin:0}
.contact-actions{
  padding-top:9px}
.contact-button{
  background:var(--beige);
  color:var(--background);
  width:100%;
  max-width:355px;
  font-size:13px}
.contact-button:hover{
  background:var(--text)}
.copy-button{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:355px;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--text);
  padding:19px 0;
  background:none;
  font-size:12px}
.copy-button:hover{
  color:var(--orange)}
.copy-button span{
  font-size:20px}
.contact-body .contact-note{
  font-size:10px;
  color:var(--muted);
  max-width:350px;
  margin-top:16px}
.contact-body #copy-status{
  font-size:11px;
  margin-top:10px;
  color:var(--beige);
  min-height:20px}
footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:25px 0;
  gap:20px}
footer .brand{
  font-size:14px}
footer>span{
  font-size:7px;
  color:var(--muted)}
footer>a:last-child{
  font-size:10px;
  color:var(--muted)}

.contact-email{
  display:inline-flex;
  align-items:center;
  gap:22px;
  font-size:14px;
  color:var(--beige);
  margin-top:22px;
  border-bottom:1px solid var(--line);
  padding-bottom:5px}
.contact-email:hover{
  color:var(--orange)}

@media(min-width:1500px){
  .hero,.section,.site-header,.mission-strip,.contact-section{
  padding-left:max(5.2%,calc((100vw - 1560px)/2));
  padding-right:max(5.2%,calc((100vw - 1560px)/2))}
.hero-visual>img{
  height:465px}
}

@media(max-width:1100px){
  .hero{
  grid-template-columns:1fr 1fr;
  padding-top:42px}
h1{
  font-size:54px;
  letter-spacing:-2.8px}
.hero .eyebrow{
  font-size:8px}
.hero-actions{
  gap:15px;
  flex-wrap:wrap}
.hero-visual>img{
  height:380px}
.hero-visual figcaption{
  flex-direction:column}
.status-line{
  font-size:7px}
.research-grid{
  gap:5%}
.research-grid h2{
  font-size:36px}
.visualization-media figcaption{
  flex-direction:column;
  gap:5px}
.visualization-media figcaption small{
  text-align:left}
.flow-arrow{
  padding:0 15px}
.diagram-node{
  padding:18px}
.stack-table>div{
  grid-template-columns:.9fr 1.4fr .65fr}
.contact-body h2{
  font-size:52px}
}

@media(max-width:760px){
  html{
  scroll-padding-top:77px}
.site-header{
  height:77px;
  padding:0 6%}
.brand{
  font-size:16px;
  gap:9px}
.brand img{
  width:30px;
  height:30px}
.brand-mark{
  flex-basis:30px;
  width:30px;
  height:30px}
.brand small{
  font-size:6px;
  letter-spacing:1.5px}
.menu-toggle{
  display:flex;
  align-items:center;
  gap:15px;
  background:none;
  border:0;
  font-size:12px;
  color:var(--text);
  padding:12px 0}
.menu-toggle span{
  font-size:20px}
nav{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:77px;
  padding:15px 6% 23px;
  background:var(--background);
  border-bottom:1px solid var(--line);
  box-shadow:0 15px 25px #00000050;
  flex-direction:column;
  align-items:stretch;
  gap:0}
nav.open{
  display:flex}
nav a{
  padding:12px 0}
nav a::after{
  bottom:4px}
.nav-contact{
  border-left:0;
  border-top:1px solid var(--line);
  margin-top:8px;
  padding-left:0}
.hero{
  padding:36px 6% 0;
  grid-template-columns:1fr;
  gap:30px}
.hero .eyebrow{
  font-size:7px;
  letter-spacing:.8px;
  margin-bottom:23px}
h1{
  font-size:clamp(44px,8vw,65px);
  line-height:1.08;
  letter-spacing:-2.6px}
.hero-description{
  font-size:14px;
  max-width:440px}
.hero-actions{
  gap:20px}
.button{
  padding:14px 18px}
.status-line{
  margin-top:24px;
  font-size:7px;
  letter-spacing:.35px;
  flex-wrap:wrap}
.hero-visual>img{
  height:auto;
  max-height:390px}
.hero-visual figcaption{
  flex-direction:row;
  font-size:6px}
.hero-bottom{
  padding-top:0;
  font-size:6px;
  gap:15px}
.hero-bottom a span{
  margin-left:8px}
.mission-strip{
  padding:23px 6%;
  grid-template-columns:1fr 1fr;
  row-gap:22px}
.mission-strip>div{
  padding-left:17px}
.mission-strip>div:nth-child(3){
  border-left:0;
  padding-left:0}
.mission-strip span{
  font-size:7px}
.mission-strip strong{
  font-size:12px}
.section{
  padding:48px 6%}
.section-label{
  font-size:8px;
  margin-bottom:30px;
  gap:15px;
  align-items:flex-start}
.section-label>span:last-child{
  font-size:6px;
  text-align:right}
.section-intro,.heading-row,.platform-details,.research-grid,.stack-grid,.partners-grid,.contact-body{
  grid-template-columns:1fr;
  gap:16px}
h2{
  font-size:35px;
  letter-spacing:-1.4px}
.section-intro .lead{
  font-size:19px}
.scope-cards{
  grid-template-columns:1fr;
  gap:23px;
  margin-top:25px}
.scope-cards article{
  padding-top:20px}
.scope-tag{
  margin-bottom:14px}
.scope-cards h3{
  margin-bottom:10px}
.scope-cards p{
  max-width:none}
.heading-row>p{
  margin-top:0}
.architecture-diagram{
  padding:23px 17px 20px}
.learning-node{
  width:100%}
.diagram-flow{
  flex-direction:column}
.flow-arrow{
  text-align:center;
  transform:rotate(90deg);
  padding:7px;
  font-size:23px;
  line-height:1}
.diagram-node{
  width:100%}
.node-index{
  margin-bottom:10px}
.diagram-note{
  font-size:6px;
  text-align:center}
.platform-details{
  margin-top:34px;
  gap:10px}
.platform-details p{
  max-width:100%}
dl>div{
  font-size:11px;
  grid-template-columns:1fr 1.35fr}
.research-grid h2{
  font-size:35px}
.visualization-media{
  margin-top:15px;
  max-width:500px;
  width:100%}
.video-frame{
  min-height:220px}
.research-description{
  max-width:100%}
.research-foot{
  gap:13px;
  margin-top:30px}
.research-foot>div{
  padding-left:13px}
.research-foot>div>span{
  font-size:6px;
  letter-spacing:.6px}
.research-foot strong{
  font-size:13px}
.research-foot small{
  font-size:8px}
.workflow-grid{
  grid-template-columns:1fr 1fr;
  margin-top:25px}
.workflow-grid article{
  min-height:205px;
  padding:18px}
.workflow-grid article:nth-child(2){
  border-right:0}
.workflow-grid article:nth-child(-n+2){
  border-bottom:1px solid var(--line)}
.workflow-grid h3{
  font-size:18px}
.workflow-grid p{
  font-size:11px}
.application-line{
  grid-template-columns:1fr;
  margin-top:22px}
.application-types{
  grid-column:auto}
.application-label{
  padding:19px 20px;
  border-right:0;
  border-bottom:1px solid var(--line)}
.application-label span{
  font-size:7px}
.application-label strong{
  font-size:19px}
.application-types>span{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  min-height:82px;
  padding:16px 14px;
  font-size:12px}
.roadmap-tabs button{
  padding:16px 8px 16px 0;
  display:flex;
  flex-direction:column;
  gap:10px}
.roadmap-tabs button>span{
  margin-left:0;
  font-size:11px;
  line-height:1.5}
.roadmap-panel{
  grid-template-columns:1fr;
  padding-top:27px;
  gap:10px}
.roadmap-panel h3{
  font-size:27px}
.stack-grid{
  gap:24px}
.stack-table>div{
  grid-template-columns:1fr 1.5fr .8fr;
  gap:10px}
.stack-table strong{
  font-size:10px}
.stack-table>div>span,.stack-table small{
  font-size:6px}
.testing-section,.partners-section{
  padding-top:48px}
.testing-grid{
  grid-template-columns:1fr;
  gap:16px}
.testing-grid article{
  padding:22px}
.small-index{
  margin-bottom:18px}
.partners-grid{
  gap:20px}
.partners-grid h2{
  font-size:43px}
.contact-section{
  padding:30px 6% 0}
.contact-body{
  padding:35px 0 30px;
  gap:25px}
.contact-body h2{
  font-size:47px}
.contact-button,.copy-button{
  max-width:none}
.contact-body p br{
  display:none}
footer{
  flex-wrap:wrap;
  padding:22px 0}
footer>span{
  order:3;
  flex-basis:100%;
  font-size:6px}
footer .brand{
  font-size:12px}
}

@media(min-width:1200px){
  body{
  font-size:16px}
.site-header{
  height:108px}
nav{
  font-size:14px}
.hero{
  padding-top:68px}
h1{
  font-size:clamp(62px,5.15vw,86px)}
.hero-description{
  max-width:490px;
  font-size:18px}
.hero-visual>img{
  height:465px}
.section{
  padding-top:94px;
  padding-bottom:94px}
.section-label{
  font-size:10px}
.section-label>span:last-child{
  font-size:9px}
h2{
  font-size:clamp(40px,3.7vw,56px)}
.section-intro .lead{
  font-size:24px}
.section-intro p:not(.lead),.heading-row>p,.platform-details p,.scope-cards p,.stack-grid>div>p,.partners-grid p{
  font-size:15px}
.scope-cards h3,.partners-grid h3{
  font-size:23px}
.diagram-node p,.workflow-grid p,.roadmap-panel p,.testing-grid p{
  font-size:14px}
dl>div{
  font-size:14px}
.research-grid h2{
  font-size:52px}
.research-description{
  max-width:500px;
  font-size:16px}
.visualization-media figcaption span{
  font-size:15px}
.visualization-media figcaption small,.video-frame-top,.video-frame-status{
  font-size:9px}
.research-foot>div>span{
  font-size:9px}
.research-foot strong{
  font-size:20px}
.research-foot small{
  font-size:11px}
.workflow-grid h3{
  font-size:22px}
.roadmap-tabs button>span{
  font-size:15px}
.roadmap-panel strong{
  font-size:15px}
.stack-table>div>span,.stack-table small,.small-index{
  font-size:9px}
.stack-table strong{
  font-size:14px}
.testing-grid h3{
  font-size:22px}
.contact-body p{
  font-size:15px}
.contact-button,.copy-button,.organisation-link{
  font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*::before,*::after{
  animation:none!important;
  transition:none!important}
.motion-enabled .reveal-item{
  opacity:1!important;
  transform:none!important}
.hero-visual>img{
  transform:none!important}
}