@font-face {
  font-family:Barlow;
  src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');
  font-display:swap;
  font-weight:700;
}
@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/Manrope-Variable.ttf') format('truetype');
  font-display:swap;
  font-weight:200 800;
}
:root {
  --bg:#090f11;
  --text:#f6f8f2;
  --lime:#d9f56c;
  --muted:#aab6af;
  --line:#2b3935;
  --gutter:56px;
  --frame:1600px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:400 16px/1.5 Manrope,Arial,sans-serif;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.32;
  background:linear-gradient(90deg,transparent 49.9%,var(--line) 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,var(--line) 50%,transparent 50.1%);
  mask-image:linear-gradient(to bottom,transparent 0 75%,#000 100%);
}
a {
  color:inherit;
}
button {
  font:inherit;
  cursor:pointer;
}
.skip-link {
  position:fixed;
  top:12px;
  left:16px;
  z-index:20;
  padding:10px 14px;
  color:#101913;
  background:var(--lime);
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:none;
}
.site-header,main,.site-footer {
  width:min(100%,var(--frame));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.site-header {
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  text-transform:uppercase;
  font:700 clamp(1.35rem,2vw,1.9rem)/1 Barlow,sans-serif;
  letter-spacing:.16em;
}
.brand-mark {
  width:53px;
  height:31px;
  flex:none;
  color:var(--lime);
}
.site-nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,3.4vw,50px);
}
.site-nav a:not(.button) {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.site-nav a:not(.button):hover,.quiet-link:hover {
  text-decoration:underline;
  text-decoration-color:var(--lime);
  text-underline-offset:6px;
}
.button {
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 24px;
  border:1px solid var(--lime);
  border-radius:2px;
  color:#101913;
  background:var(--lime);
  font:inherit;
  font-weight:800;
  text-decoration:none;
  transition:transform .2s,background-color .2s,color .2s;
}
.button:hover {
  color:var(--lime);
  background:transparent;
  transform:translateY(-2px);
}
.button-outline {
  color:var(--lime);
  background:transparent;
  min-height:56px;
}
.button-outline:hover {
  color:#101913;
  background:var(--lime);
}
.button svg,.gallery-expand svg {
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.section-rule {
  border-bottom:1px solid var(--line);
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.4fr);
  align-items:start;
  gap:54px;
  padding-block:72px 48px;
}
.hero-copy {
  container-type:inline-size;
  padding-top:8px;
}
.eyebrow {
  margin:0 0 20px;
  color:var(--lime);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.22em;
}
.hero h1,h2,h3 {
  margin:0;
  font-family:Barlow,sans-serif;
  text-transform:uppercase;
}
.hero h1 {
  font-size:clamp(3rem,21cqw,7rem);
  line-height:.9;
  letter-spacing:.015em;
}
.hero h1 span {
  display:block;
  white-space:nowrap;
}
.hero h1 em,h2 em {
  color:var(--lime);
  font-style:normal;
}
.hero-intro {
  max-width:517px;
  margin:32px 0 16px;
  color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.24rem);
  line-height:1.55;
}
.status {
  margin:0;
  color:var(--muted);
  font-size:.88rem;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
  margin-top:29px;
}
.quiet-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-underline-offset:7px;
  text-decoration:underline;
  text-decoration-color:var(--lime);
}
.hero-media {
  position:relative;
  margin:0;
}
.hero-media img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.hero-media figcaption,.feature-media figcaption {
  margin-top:10px;
  color:var(--muted);
  font-size:.8rem;
}
.corner {
  position:absolute;
  z-index:1;
  width:34px;
  height:34px;
  border:3px solid var(--lime);
}
.corner-top {
  top:-11px;
  left:-11px;
  border-right:0;
  border-bottom:0;
}
.corner-bottom {
  right:-11px;
  bottom:28px;
  border-top:0;
  border-left:0;
}
.hero-bottom {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  color:var(--muted);
  font:700 .7rem/1 Barlow,sans-serif;
  letter-spacing:.32em;
  text-align:center;
}
.hero-bottom span:first-child,.hero-bottom span:last-child {
  color:var(--line);
  font-size:2rem;
  letter-spacing:0;
}
.hero-bottom span:first-child,.hero-bottom span:last-child {
  height:1px;
  background:var(--line);
}
.hero-bottom span:first-child {
  text-align:left;
}
.hero-bottom span:last-child {
  text-align:right;
}
.features,.gallery,.future,.project {
  padding-block:clamp(72px,9vw,128px);
}
.section-heading h2,.future h2,.project h2 {
  font-size:clamp(3.5rem,6vw,6.6rem);
  line-height:.88;
  letter-spacing:.015em;
}
.features .section-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.62fr);
  align-items:end;
  gap:40px;
}
.section-intro {
  max-width:360px;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.55;
}
.features-layout {
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr);
  gap:clamp(40px,6vw,110px);
  margin-top:72px;
}
.feature {
  display:grid;
  grid-template-columns:68px 1fr;
  gap:22px;
  padding-bottom:22px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.feature-number {
  color:var(--lime);
  font:700 2rem/1 Barlow,sans-serif;
}
.feature h3 {
  margin-bottom:6px;
  font-size:1.7rem;
  letter-spacing:.02em;
}
.feature p {
  max-width:650px;
  margin:0;
  color:var(--muted);
}
.feature-media {
  margin:0;
}
.feature-media img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.4/1;
  object-fit:cover;
  object-position:center;
}
.feature-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.feature-strip span {
  padding:0 0 7px;
  border-right:1px solid var(--line);
  border-bottom:0;
}
.feature-strip span:last-child {
  border-right:0;
}
.gallery-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}
.gallery-heading>p {
  margin:0 0 7px;
  color:var(--muted);
}
.gallery-stage {
  margin-top:54px;
}
.gallery-frame {
  position:relative;
}
.gallery-stage>img,.gallery-frame>img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
.gallery-expand {
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:1;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--lime);
  color:var(--lime);
  background:rgba(9,15,17,.75);
}
.gallery-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:18px;
}
.gallery-announcement {
  margin:16px 0 0;
  color:var(--muted);
  font-size:.88rem;
}
.gallery-announcement:empty {
  display:none;
}
.gallery-caption h3 {
  font-size:1.65rem;
  letter-spacing:.02em;
}
.gallery-caption p {
  margin:2px 0 0;
  color:var(--muted);
  font-size:.9rem;
}
.gallery-controls {
  display:flex;
  align-items:center;
  gap:17px;
}
.gallery-controls>span {
  margin-right:7px;
  color:var(--muted);
  font-size:.88rem;
}
.icon-button {
  width:54px;
  height:54px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--text);
  color:var(--text);
  background:transparent;
  font-size:1.5rem;
}
.icon-button:hover {
  border-color:var(--lime);
  color:#101913;
  background:var(--lime);
}
.thumbnails {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}
.thumbnail {
  min-height:44px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:transparent;
}
.thumbnail img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  opacity:.68;
  transition:opacity .2s,transform .2s;
}
.thumbnail:hover img,.thumbnail.is-active img {
  opacity:1;
}
.thumbnail.is-active {
  border:2px solid var(--lime);
}
.thumbnail:hover img {
  transform:scale(1.04);
}
.future {
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:clamp(44px,8vw,145px);
}
.future-intro>p:not(.eyebrow):not(.status) {
  max-width:540px;
  margin:34px 0 18px;
  color:var(--muted);
  font-size:1.08rem;
}
.tabs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.tabs button {
  position:relative;
  min-height:44px;
  padding:14px 8px;
  border:0;
  color:var(--muted);
  background:none;
}
.tabs button[aria-selected='true'] {
  color:var(--lime);
  font-weight:800;
}
.tabs button[aria-selected='true']::after {
  content:'';
  position:absolute;
  right:0;
  bottom:-2px;
  left:0;
  height:3px;
  background:var(--lime);
}
.tab-panel {
  padding-top:32px;
}
.tab-panel h3 {
  font-size:2.55rem;
}
.tab-panel>p {
  max-width:680px;
  margin:11px 0 26px;
  color:var(--muted);
}
.diagram {
  display:grid;
  place-items:center;
  gap:48px;
  width:100%;
  max-width:550px;
  margin:16px auto;
  color:var(--lime);
}
.diagram-node {
  position:relative;
  display:grid;
  place-items:center;
  gap:8px;
  min-height:90px;
  min-width:150px;
  padding:18px 16px;
  border:2px solid var(--lime);
  font:700 .76rem/1 Barlow,sans-serif;
  letter-spacing:.2em;
}
.diagram-node svg {
  width:36px;
  height:36px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.diagram>.diagram-node::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-24px;
  width:2px;
  height:24px;
  background:var(--lime);
  transform:translateX(-50%);
}
.diagram-branch {
  position:relative;
  display:flex;
  justify-content:center;
  gap:120px;
}
.diagram-branch::before {
  content:'';
  position:absolute;
  top:-24px;
  left:50%;
  width:calc(100% - 150px);
  height:24px;
  border-top:2px solid var(--lime);
  border-right:2px solid var(--lime);
  border-left:2px solid var(--lime);
  transform:translateX(-50%);
}
.tab-panel small {
  display:block;
  color:var(--muted);
  text-align:center;
}
.project {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(45px,8vw,140px);
}
.project h2 {
  font-size:clamp(3rem,3.5vw,3.5rem);
  line-height:1;
}
.project-copy>p:not(.eyebrow):not(.copy-status) {
  max-width:550px;
  color:var(--muted);
  font-size:1.08rem;
}
.project-copy .button {
  margin-top:22px;
}
.copy-status {
  min-height:24px;
  color:var(--lime);
  font-size:.86rem;
}
.faq details {
  border-top:1px solid var(--line);
}
.faq details:last-child {
  border-bottom:1px solid var(--line);
}
.faq summary {
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
  cursor:pointer;
  font-size:1.05rem;
}
.faq summary::-webkit-details-marker {
  display:none;
}
.faq summary::after {
  content:'+';
  color:var(--lime);
  font-size:1.6rem;
}
.faq details[open] summary::after {
  content:'−';
}
.faq details p {
  max-width:640px;
  margin:0 40px 22px 0;
  color:var(--muted);
  font-size:.93rem;
}
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:28px 40px;
  font-size:.9rem;
}
.site-footer>span {
  color:var(--muted);
}
.top-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.top-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}
.lightbox {
  width:min(92vw,1200px);
  padding:18px;
  border:1px solid var(--line);
  color:var(--text);
  background:var(--bg);
}
.lightbox::backdrop {
  background:rgba(0,0,0,.85);
}
.lightbox-inner {
  position:relative;
}
.lightbox img {
  display:block;
  width:100%;
  height:auto;
  max-height:75vh;
  object-fit:contain;
}
.lightbox h2 {
  margin:16px 0 0;
  font-size:2rem;
}
.lightbox p {
  margin:0;
  color:var(--muted);
}
.lightbox-close {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1;
  background:rgba(9,15,17,.8);
}
[hidden] {
  display:none!important;
}
.js-control[hidden] {
  display:none!important;
}
.reveal {
  opacity:1;
  transform:none;
}
.gallery-image-enter {
  animation:gallery-image-in .28s ease both;
}
@keyframes gallery-image-in {
  from {
    opacity:.35;
    transform:scale(.995);
  }
  to {
    opacity:1;
    transform:none;
  }
}
:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:4px;
}
@media(max-width:900px) {
  :root {
    --gutter:32px;
  }
  .site-header {
    align-items:flex-start;
    flex-direction:column;
    padding-block:24px;
  }
  .site-nav {
    width:100%;
    flex-wrap:wrap;
    gap:16px 25px;
  }
  .hero,.future,.project {
    grid-template-columns:1fr;
  }
  .hero {
    padding-top:58px;
  }
  .hero-copy {
    max-width:700px;
  }
  .features-layout {
    grid-template-columns:1fr;
  }
  .feature-media {
    max-width:800px;
  }
  .future {
    gap:60px;
  }
  .project {
    gap:55px;
  }
}
@media(max-width:560px) {
  :root {
    --gutter:22px;
  }
  .site-nav .button {
    width:100%;
  }
  .hero {
    gap:40px;
    padding-block:48px 36px;
  }
  .hero h1 {
    font-size:clamp(3rem,20cqw,5.2rem);
  }
  .hero-intro {
    margin-top:26px;
    font-size:1rem;
  }
  .hero-actions {
    gap:22px;
  }
  .hero-actions .button {
    width:100%;
  }
  .hero-bottom {
    grid-template-columns:1fr;
    gap:10px;
    font-size:.64rem;
  }
  .hero-bottom span:first-child,.hero-bottom span:last-child {
    display:none;
  }
  .features,.gallery,.future,.project {
    padding-block:70px;
  }
  .features .section-heading {
    display:block;
  }
  .section-intro {
    margin-top:24px;
  }
  .features-layout {
    margin-top:38px;
  }
  .feature {
    grid-template-columns:46px 1fr;
    gap:14px;
  }
  .feature-number {
    font-size:1.5rem;
  }
  .feature h3 {
    font-size:1.4rem;
  }
  .feature-strip {
    grid-template-columns:1fr 1fr;
  }
  .gallery-heading {
    display:block;
  }
  .gallery-heading>p {
    margin-top:25px;
  }
  .gallery-caption {
    align-items:flex-start;
    flex-direction:column;
  }
  .gallery-controls {
    width:100%;
    justify-content:space-between;
  }
  .thumbnails {
    grid-template-columns:repeat(5,minmax(64px,1fr));
    overflow-x:auto;
    padding-bottom:4px;
  }
  .thumbnail {
    min-width:64px;
  }
  .diagram-branch {
    gap:18px;
  }
  .diagram-node {
    min-width:120px;
  }
  .diagram-branch::before {
    width:calc(100% - 120px);
  }
  .project h2 {
    font-size:3.5rem;
  }
  .site-footer {
    align-items:flex-start;
    flex-direction:column;
  }
  .site-footer .brand {
    font-size:1.4rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
