@font-face {
  font-family:Instrument Sans;
  src:url('assets/fonts/instrument-sans-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Instrument Sans;
  src:url('assets/fonts/instrument-sans-medium.ttf') format('truetype');
  font-style:normal;
  font-weight:500;
  font-display:swap
}

@font-face {
  font-family:Instrument Sans;
  src:url('assets/fonts/instrument-sans-semibold.ttf') format('truetype');
  font-style:normal;
  font-weight:600 700;
  font-display:swap
}

:root {
  /* Cortibri Visual Identity Guidelines v1.5.2, 23 October 2026. */
  --green:#284E43;
  --active:#F0782F;
  --active-50:#F8BC97;
  --active-25:#FBDDCB;
  --active-10:#FEF2EA;
  --task-context:#BDD9E2;
  --recording-context:#DED7CC;
  --data-task:#356879;
  --data-recording:#786858;
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --ink:#000000;
  --muted:#404040;
  --neutral:#F2F2F2;
  --line:#D9D9D9;
  --line-strong:#808080;
  --green-line:#BFBFBF;
  --shell:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:'Instrument Sans',Arial,sans-serif;
  font-synthesis:none;
  color-scheme:light
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3 {
  color:var(--green);
  font-kerning:normal
}

.hero h1,.system h2,.system h3,.contact h2,.contact h3,.protocol-primary h3 {
  color:var(--white)
}

h1,h2,h3,p,figure {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

img,svg {
  display:block;
  max-width:100%
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px
}

::selection {
  background:var(--active-25);
  color:var(--green)
}

.shell {
  width:min(var(--shell),calc(100% - 112px));
  margin-inline:auto
}

.frame {
  width:min(1536px,calc(100% - 48px));
  margin-inline:auto
}

.section-space {
  padding-block:116px
}

.mono,.eyebrow {
  font-family:'Instrument Sans',Arial,sans-serif
}

.eyebrow {
  font-size:12px;
  line-height:1.6;
  letter-spacing:.055em;
  text-transform:none;
  display:flex;
  align-items:center;
  gap:14px
}

.status-dot {
  width:7px;
  height:7px;
  background:var(--white);
  border-radius:50%;
  flex-shrink:0
}

.hero-closing-line {
  color:inherit
}

.skip-link {
  position:fixed;
  top:10px;
  left:12px;
  z-index:20;
  padding:12px 18px;
  background:var(--green);
  color:var(--white);
  transform:translateY(-180%)
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  background:var(--paper);
  position:relative;
  z-index:10
}

.nav {
  height:92px;
  display:flex;
  align-items:center;
  gap:32px
}

.brand {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  padding-block:20px;
  margin-right:12px
}

.brand img {
  width:auto;
  height:18px
}

.nav-links {
  display:flex;
  gap:28px;
  margin-left:auto
}

.nav-links a {
  font-size:14px;
  color:var(--muted);
  transition:color .2s
}

.nav-links a:hover {
  color:var(--green)
}

.nav-contact {
  margin-left:12px;
  padding:11px 17px;
  display:flex;
  align-items:center;
  gap:27px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:14px;
  transition:background .2s,color .2s
}

.nav-contact:hover {
  background:var(--green);
  color:var(--paper);
  border-color:var(--green)
}

.menu-toggle {
  display:none
}

.hero {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  min-height:0;
  background:var(--green);
  border-radius:5px;
  overflow:hidden
}

.hero-copy {
  padding:52px 54px 28px;
  color:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.hero h1 {
  font-size:clamp(48px,5.05vw,77px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.062em;
  margin-top:47px
}

.hero h1 span {
  display:block
}

.hero-description {
  color:var(--white);
  max-width:390px;
  font-size:17px;
  line-height:1.65;
  margin-top:30px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  border-radius:3px;
  padding:15px 21px;
  font-size:15px;
  font-weight:500;
  transition:background .2s,transform .2s;
  min-height:50px
}

.button span {
  transition:transform .2s
}

.button:hover span {
  transform:translate(2px,-2px)
}

.button-primary {
  background:var(--active);
  color:var(--ink)
}

.button-primary:hover {
  background:var(--active-25)
}

.hero .button {
  margin-top:30px
}

.hero-footnote {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin-top:auto;
  padding-top:35px;
  font-size:12px;
  color:var(--white)
}

.hero-footnote .mono {
  font-size:12px;
  letter-spacing:.04em
}

.hero-visual {
  position:relative;
  min-width:0;
  aspect-ratio:1;
  background:#c9c6be;
  display:flex
}

.hero-visual>img {
  width:100%;
  height:auto;
  min-height:0;
  align-self:center;
  aspect-ratio:1;
  object-fit:cover
}

.hero-visual figcaption {
  position:absolute;
  inset:auto 29px 26px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  color:var(--muted)
}

.hero-visual figcaption .mono {
  font-size:12px
}

.image-cross {
  position:absolute;
  color:var(--muted);
  font:20px 'Instrument Sans',Arial,sans-serif;
  line-height:1
}

.image-cross-top {
  top:25px;
  right:25px
}

.image-cross-bottom {
  bottom:65px;
  left:25px
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 2.08fr;
  gap:55px
}

.section-heading>.eyebrow {
  align-self:start;
  margin-top:10px
}

.section-heading h2,h2 {
  font-size:clamp(35px,3.6vw,54px);
  font-weight:400;
  letter-spacing:-.05em;
  line-height:1.12
}

.section-description {
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  max-width:575px;
  margin-top:25px
}

.gap-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:60px
}

.gap-grid article {
  min-width:0;
  padding:0
}

.gap-grid article+article {
  padding:0
}

.gap-image {
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  margin-bottom:24px
}

.gap-content .section-description { max-width:none; }
.gap-grid .item-index { font-size:14px; letter-spacing:0; }

.item-index {
  font-size:12px;
  letter-spacing:.055em;
  color:var(--muted)
}

.gap-grid h3 {
  font-size:clamp(24px,2.2vw,32px);
  min-height:2.44em;
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.035em;
  margin:18px 0 20px
}

.gap-grid p {
  font-size:16px;
  color:var(--muted);
  max-width:none;
  line-height:1.6
}

@media(min-width:1650px) {
  .hero-copy {
    padding:65px 70px 32px
  }
  .hero {
    min-height:710px
  }
  }

@media(max-width:1100px) {
  .shell {
    width:calc(100% - 72px)
  }
  .nav {
    gap:20px
  }
  .nav-links {
    gap:20px
  }
  .nav-contact {
    margin-left:0
  }
  .hero-copy {
    padding:40px 36px 25px
  }
  .hero {
    min-height:620px
  }
  .hero h1 {
    font-size:clamp(45px,5.2vw,60px)
  }
  .hero-description {
    font-size:16px
  }
  .section-heading {
    gap:30px
  }
  .section-space {
    padding-block:88px
  }
}

@media(max-width:900px) {
  .nav-links {
    gap:17px
  }
  .nav-links a {
    font-size:13px
  }
  .nav-contact {
    gap:15px
  }
  .nav {
    gap:18px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:570px
  }
  .hero-copy {
    padding:35px 29px 24px
  }
  .hero h1 {
    font-size:45px;
    letter-spacing:-.058em;
    margin-top:38px
  }
  .hero-description {
    font-size:16px
  }
  .hero-footnote {
    flex-wrap:wrap;
    gap:5px
  }
  .section-heading {
    grid-template-columns:1fr 2fr
  }
  .gap-grid { gap:24px; }
  .gap-grid article {
    padding:0
  }
  .gap-grid article+article {
    padding:0
  }
  .gap-grid h3 {
    font-size:23px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:30px
  }
  .shell {
    width:calc(100% - 40px)
  }
  .frame {
    width:calc(100% - 24px)
  }
  .nav {
    height:76px;
    gap:15px
  }
  .brand {
    font-size:25px
  }
  .brand img {
    width:27px;
    height:27px
  }
  .nav-contact {
    margin-left:auto;
    padding:9px 12px;
    font-size:13px;
    gap:17px
  }
  .nav-links {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:var(--paper);
    padding:12px 20px 24px;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:0
  }
  .nav-links a {
    font-size:18px;
    padding:13px 0
  }
  .nav-links.is-open {
    display:flex
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:40px;
    height:42px;
    border:0;
    background:transparent;
    padding:8px
  }
  .menu-toggle span {
    width:22px;
    height:1px;
    background:var(--ink);
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .hero {
    grid-template-columns:1fr;
    min-height:0
  }
  .hero-copy {
    padding:31px 26px 25px
  }
  .hero h1 {
    font-size:clamp(43px,8.5vw,64px);
    margin-top:35px;
    letter-spacing:-.055em;
    line-height:1.08
  }
  .hero-description {
    max-width:400px;
    margin-top:23px;
    font-size:16px
  }
  .hero .button {
    margin-top:24px
  }
  .hero-footnote {
    margin-top:16px;
    padding-top:25px;
    flex-wrap:nowrap
  }
  .hero-visual {
    aspect-ratio:1.12
  }
    .hero-visual figcaption {
    left:24px;
    right:24px;
    bottom:22px
  }
  .hero-visual figcaption .mono {
    font-size:12px
  }
  .image-cross-top {
    top:20px;
    right:20px
  }
  .image-cross-bottom {
    display:none
  }
  .section-space {
    padding-block:70px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:25px
  }
  .section-heading>.eyebrow {
    margin-top:0
  }
  .section-heading h2,h2 {
    font-size:38px
  }
  .section-description {
    font-size:16px;
    margin-top:20px
  }
  .gap-grid {
    margin-top:37px;
    grid-template-columns:1fr
  }
  .gap-grid { gap:40px; }
  .gap-grid article,.gap-grid article+article {
    padding:0
  }
  .gap-grid h3 {
    font-size:25px;
    min-height:0;
    margin:16px 0 12px
  }
  .gap-grid h3 br {
    display:none
  }
  .gap-grid p {
    max-width:none
  }
  .eyebrow {
    font-size:12px;
    gap:10px
  }
}

.system {
  background:var(--green);
  color:var(--paper);
  border-radius:5px
}

.system-inner {
  padding:77px 64px 29px;
  max-width:1408px;
  margin-inline:auto
}

.system .section-heading {
  grid-template-columns:1fr 2.08fr
}

.system .section-description {
  color:var(--white);
  max-width:590px
}

.workflow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  list-style:none;
  margin:67px 0 0;
  padding:0
}

.workflow li {
  display:flex;
  flex-direction:column;
  position:relative;
  padding:0 31px 35px 0;
  min-width:0
}

.workflow li:not(:last-child)::before {
  content:'';
  position:absolute;
  top:22px;
  left:45px;
  right:0;
  height:1px;
  background:var(--green-line)
}

.workflow-marker {
  height:45px;
  width:45px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green);
  font-size:12px;
  color:var(--white);
  position:relative
}

.workflow h3 {
  font-size:23px;
  letter-spacing:-.035em;
  font-weight:400;
  margin-top:30px;
  line-height:1.2
}

.workflow p {
  font-size:16px;
  color:var(--white);
  margin-top:14px;
  max-width:220px;
  line-height:1.7
}

.workflow-stage {
  font-weight:700;
  display:block;
  font-size:12px;
  letter-spacing:.07em;
  color:var(--active);
  margin-top:auto;
  padding-top:25px
}

.system-note {
  border-top:1px solid var(--green-line);
  padding-top:24px;
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--white);
  font-size:14px
}

.system-note>.mono {
  font-size:12px;
  margin-left:auto;
  letter-spacing:.04em
}

.note-cross {
  font-family:'Instrument Sans',Arial,sans-serif;
  font-size:23px;
  color:var(--white)
}

.design-layout {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:85px;
  align-items:center;
  margin-top:54px
}

.bedside-figure {
  position:relative;
  border-radius:4px;
  overflow:hidden;
  background:var(--neutral)
}

.bedside-figure img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover
}

.bedside-figure figcaption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 21px;
  color:var(--muted);
  background:var(--neutral);
  font-size:12px
}

.bedside-figure figcaption .mono {
  font-size:12px;
  letter-spacing:.025em
}

.design-intro {
  font-size:12px;
  letter-spacing:.07em;
  color:var(--muted);
  margin-bottom:22px
}

.design-details details {
  border-top:1px solid var(--line)
}

.design-details details:last-of-type {
  border-bottom:1px solid var(--line)
}

.design-details summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:24px 0
}

.design-details summary::-webkit-details-marker {
  display:none
}

.design-details summary h3 {
  font-size:28px;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.2;
  flex:1
}

.detail-toggle {
  width:22px;
  height:22px;
  position:relative;
  margin-top:5px;
  flex-shrink:0
}

.detail-toggle::before,.detail-toggle::after {
  content:'';
  position:absolute;
  top:10px;
  left:4px;
  width:14px;
  height:1px;
  background:var(--green)
}

.detail-toggle::after {
  transform:rotate(90deg);
  transition:transform .2s
}

.design-details details[open] .detail-toggle::after {
  transform:rotate(0)
}

.detail-body {
  padding:0 35px 25px 0;
  color:var(--muted);
  line-height:1.7
}

.concept-note {
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
  margin-top:26px;
  max-width:410px
}

.clinical-focus {
  background:var(--neutral);
  border-block:1px solid var(--line)
}

.protocol-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:55px
}

.protocol {
  padding:27px 27px 23px;
  border:1px solid var(--line);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--neutral)
}

.protocol-primary {
  background:var(--green);
  color:var(--paper);
  border-color:var(--green)
}

.protocol-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}

.protocol-top>.mono {
  font-size:12px;
  letter-spacing:.045em;
  color:var(--muted)
}

.priority-label {
  font-size:12px;
  border:1px solid var(--line);
  border-radius:2px;
  padding:3px 6px;
  color:var(--muted);
  white-space:nowrap
}

.protocol-primary .protocol-top>.mono {
  color:var(--white)
}

.protocol-primary .priority-label {
  color:var(--paper);
  border-color:var(--line)
}

.protocol-graphic {
  margin-block:26px 36px
}

.protocol-graphic svg {
  width:100%;
  height:90px;
  overflow:visible
}

.protocol-graphic .mono {
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  display:block;
  margin-top:8px
}

.graph-baseline {
  stroke:var(--line);
  stroke-width:.8
}

.graph-signal {
  stroke:var(--data-task);
  stroke-width:1.4;
  stroke-linejoin:round;
  stroke-linecap:round
}

.graph-marker {
  stroke:var(--line);
  stroke-width:.7;
  stroke-dasharray:2 4
}

.protocol-primary .graph-baseline {
  stroke:var(--line)
}

.protocol-primary .graph-signal {
  stroke:var(--white)
}

.protocol-primary .graph-marker {
  stroke:var(--line)
}


.protocol h3 {
  font-size:29px;
  letter-spacing:-.045em;
  font-weight:400;
  line-height:1.18;
  min-height:69px
}

.protocol>p {
  font-size:16px;
  color:var(--muted);
  line-height:1.65;
  margin-block:18px 29px
}

.protocol-primary>p {
  color:var(--white)
}

.protocol-bottom {
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:auto;
  font-size:12px;
  color:var(--muted)
}

.protocol-graphic .mono {
  display:flex;
  align-items:center;
  width:100%;
  min-height:36px;
  padding:8px 10px;
  background:var(--recording-context);
  color:var(--ink);
  letter-spacing:0;
  font-size:12px;
  font-weight:500
}

.priority-label { display:inline-flex; align-items:center; justify-content:center; width:104px; min-height:28px; padding:4px 10px; color:var(--green); }
.protocol-primary .priority-label { color:var(--ink); border-color:var(--active); background:var(--active); }

.protocol-primary .protocol-bottom {
  border-color:var(--line);
  color:var(--white)
}

.protocol-note {
  display:flex;
  justify-content:space-between;
  gap:35px;
  margin-top:21px;
  color:var(--muted);
  font-size:12px
}

.protocol-note p {
  max-width:610px
}

.protocol-note .mono {
  font-size:12px;
  white-space:nowrap;
  padding-top:3px
}

.founders {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  margin-top:58px
}

.founder {
  display:grid;
  grid-template-columns:170px 1fr;
  gap:28px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:28px
}

.portrait {
  width:170px;
  aspect-ratio:10 / 13;
  border-radius:4px;
  overflow:hidden;
  background:#000000
}

.portrait img {
  width:100%;
  height:100%;
  object-fit:cover
}

.founder:first-child .portrait img {
  object-fit:cover;
  transform:none
}

.founder-role {
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:10px
}

.founder h3 {
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.035em;
  font-weight:500;
  margin-bottom:14px
}

.founder-bio>p:not(.founder-role) {
  font-size:16px;
  line-height:1.65;
  color:var(--muted)
}

.founder-focus {
  display:block;
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
  margin-top:18px
}

.team-affiliation {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px 48px;
  margin-top:48px;
  padding-top:30px;
  border-top:1px solid var(--line);
}

.affiliation-identity {
  display:inline-flex;
  align-items:center;
  gap:24px;
  padding:12px 0;
  color:var(--ink);
  text-decoration:none;
}

.affiliation-identity img {
  width:33px;
  height:48px;
  flex-shrink:0;
}

.skylab-wordmark {
  color:#000;
  font-family:inherit;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.team-affiliation p {
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
}

.team-affiliation p a {
  color:inherit;
  text-decoration-color:var(--line);
  text-underline-offset:4px;
}

.affiliation-logos {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:26px 48px;
  min-width:0;
}

.team-affiliation>p { flex-basis:100%; }

.footer-funding {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 20px;
  margin-top:16px;
  padding-top:0;
}

.footer-funding>.mono {
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
}

.footer-funding a { display:block; padding-block:4px; }
.footer-funding img { width:87px; height:auto; }

.milestone-funder {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:16px 10px 12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  text-decoration:none;
}

.milestone-funder span { font-size:12px; line-height:1.5; }
.milestone-funder img { width:118px; height:auto; }

@media(max-width:1050px) {
  .milestone-funder { align-items:flex-start; margin-inline:0; max-width:220px; }
}

.roadmap {
  padding-bottom:116px;
}

.roadmap-panel {
  margin-top:49px;
  padding:28px 30px 0;
  background:var(--neutral);
  border:1px solid var(--line);
  border-radius:5px;
}

.roadmap-panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}

.roadmap-panel-header > .mono {
  font-size:12px;
  color:var(--muted);
  letter-spacing:.035em;
}

.roadmap-legend {
  display:flex;
  flex-wrap:wrap;
  gap:23px;
  list-style:none;
  margin:0;
  padding:0;
  color:var(--muted);
  font-size:12px;
}

.roadmap-legend li {
  display:flex;
  align-items:center;
  gap:8px;
}

.legend-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}

.legend-done {
  background:var(--green);
}

.legend-current {
  background:var(--active);
}

.legend-ahead {
  border:1px solid var(--line-strong);
  background:transparent;
}

.roadmap-map {
  height:570px;
  position:relative;
  margin-top:22px;
}

.roadmap-connections {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.roadmap-connections path {
  vector-effect:non-scaling-stroke;
  stroke-width:1.2;
  stroke-linecap:butt;
  stroke-linejoin:miter;
}

.road-link-current,
#road-arrow-current path {
  stroke:var(--active);
}

.road-link-ahead,
#road-arrow-ahead path {
  stroke:var(--line-strong);
}

.road-link-ahead {
  stroke-dasharray:4 6;
}

.roadmap-milestones {
  list-style:none;
  margin:0;
  padding:0;
}

.milestone {
  position:absolute;
  left:var(--node-x);
  top:var(--node-y);
  width:18%;
  transform:translateX(-50%);
  text-align:center;
}

.milestone-research { --node-x:9%; --node-y:193px; }
.milestone-discovery { --node-x:29%; --node-y:66px; }
.milestone-funding { --node-x:29%; --node-y:320px; }
.milestone-prototype { --node-x:50%; --node-y:193px; }
.milestone-technical { --node-x:70%; --node-y:66px; }
.milestone-bedside { --node-x:70%; --node-y:320px; }
.milestone-clinical { --node-x:90%; --node-y:320px; }

.milestone-symbol {
  width:56px;
  height:56px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  margin-inline:auto;
  display:grid;
  place-items:center;
  background:var(--neutral);
  position:relative;
  z-index:1;
}

.milestone-done .milestone-symbol {
  background:var(--green);
  border-color:var(--green);
  color:var(--paper);
}

.milestone-symbol svg {
  width:25px;
  height:25px;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.milestone-current .milestone-symbol {
  background:var(--active);
  border-color:var(--green);
}

.milestone-current .milestone-symbol > span {
  width:10px;
  height:10px;
  background:var(--ink);
  border-radius:50%;
}

.milestone-next .milestone-symbol {
  border:2px solid var(--green);
  outline:4px solid var(--line);
}

.milestone-next .milestone-symbol > span {
  width:10px;
  height:10px;
  border:1px solid var(--green);
  transform:rotate(45deg);
}

.milestone-ahead .milestone-symbol > span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--line-strong);
}

.milestone-status {
  display:block;
  margin-top:17px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}

.milestone-current .milestone-status {
  color:var(--green);
}

.milestone-done .milestone-status,
.milestone-next .milestone-status {
  color:var(--green);
}

.milestone h3 {
  margin-top:8px;
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.035em;
  font-weight:500;
}

.milestone p {
  margin:12px auto 0;
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
  max-width:190px;
}

.roadmap-map.roadmap-compact {
  height:auto;
  margin-block:36px 24px;
  overflow-x:auto;
  padding:8px 0 12px;
}

.roadmap-compact .roadmap-milestones {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  min-width:840px;
  gap:0;
  align-items:start;
}

.roadmap-compact .milestone {
  position:relative;
  inset:auto;
  width:auto;
  transform:none;
  display:block;
  text-align:center;
}

.roadmap-compact .milestone:not(:last-child)::after {
  content:'';
  position:absolute;
  top:20px;
  left:calc(50% + 28px);
  width:calc(100% - 56px);
  height:0;
  bottom:auto;
  border:0;
  border-top:1px solid var(--line-strong);
}

.milestone-toggle {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:0 8px 8px;
  border:0;
  background:none;
  color:var(--ink);
  font:inherit;
  cursor:pointer;
  border-radius:4px;
}

.milestone-toggle:focus-visible {
  outline:2px solid var(--green);
  outline-offset:-2px;
}

.roadmap-compact .milestone-symbol {
  width:40px;
  height:40px;
  margin-inline:auto;
  transition:transform 220ms ease;
}

.roadmap-compact .milestone-status {
  margin-top:16px;
  font-size:12px;
}

.milestone-title {
  color:var(--green);
  margin-top:7px;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.025em;
  min-height:3.9em;
}

.milestone-indicator {
  color:var(--green);
  font-size:18px;
  line-height:1;
  transition:transform 220ms ease;
}

.milestone-detail {
  display:grid;
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition:grid-template-rows 260ms ease,opacity 200ms ease,visibility 260ms;
}

.milestone-detail>div { overflow:hidden; }

.roadmap-compact .milestone p {
  font-size:13px;
  line-height:1.6;
  margin:8px 10px 12px;
  max-width:none;
}

.roadmap-interactive .milestone:not(.is-expanded) .milestone-detail {
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
}

.milestone.is-expanded .milestone-indicator { transform:rotate(45deg); }
.milestone.is-expanded .milestone-symbol { transform:translateY(-2px); }

@media(prefers-reduced-motion:reduce) {
  .milestone-detail,.milestone-indicator,.roadmap-compact .milestone-symbol { transition:none; }
}

@media print {
  .roadmap-map.roadmap-compact { overflow:visible; }
  .roadmap-compact .roadmap-milestones { min-width:0; }
  .roadmap-interactive .milestone .milestone-detail { grid-template-rows:1fr; opacity:1; visibility:visible; }
  .milestone-indicator { display:none; }
}

.roadmap-panel-footer {
  padding-block:22px;
  display:flex;
  align-items:center;
  gap:22px;
  border-top:1px solid var(--line);
}

.roadmap-next-label {
  flex-shrink:0;
  color:var(--green);
  font-size:12px;
}

.roadmap-panel-footer p {
  font-size:16px;
  color:var(--muted);
}

.roadmap-endpoint {
  margin-left:auto;
  font-size:24px;
  line-height:1;
  color:var(--green);
}

.roadmap-note {
  margin-top:20px;
  max-width:760px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}

.contact {
  background:var(--green);
  color:var(--paper);
  border-radius:5px
}

.contact-inner {
  max-width:1408px;
  margin-inline:auto;
  padding:62px 64px 27px
}

.contact-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  margin-top:40px
}

.contact h2 {
  font-size:clamp(40px,4.8vw,72px);
  letter-spacing:-.04em;
  line-height:1.08
}

.contact-arrow {
  width:83px;
  height:83px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:48px;
  font-weight:400;
  line-height:1;
  transition:background .2s
}

.contact-arrow:hover {
  background:var(--white);
  color:var(--green)
}

.contact-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-top:58px;
  border-top:1px solid var(--green-line);
  padding-top:31px
}

.contact-options h3 {
  font-size:22px;
  font-weight:400;
  letter-spacing:-.03em
}

.contact-options p {
  color:var(--white);
  font-size:16px;
  line-height:1.65;
  margin-top:12px;
  max-width:410px
}

.contact-link {
  font-weight:700;
  color:var(--active);
  display:inline-flex;
  align-items:center;
  gap:45px;
  font-size:15px;
  margin-top:26px;
  padding-bottom:7px;
  border-bottom:1px solid currentColor
}

.contact-link:hover {
  color:var(--white)
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--green-line);
  margin-top:53px;
  padding-top:24px;
  color:var(--white)
}

.contact-bottom>a {
  color:var(--white);
  font-size:14px
}

.contact-bottom>a:hover {
  text-decoration:underline
}

.contact-bottom>.mono {
  font-size:12px;
  letter-spacing:.045em
}

.site-footer {
  padding-block:44px 27px
}

.footer-top {
  display:flex;
  align-items:center;
  gap:35px
}

.footer-top .brand {
  padding-block:0;
  font-size:24px
}

.footer-top .brand img {
  width:auto;
  height:16px
}

.footer-top>p {
  font-size:13px;
  color:var(--muted)
}

.back-top {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:12px
}

.footer-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:45px;
  margin-top:16px;
  padding-top:0;
  font-size:12px;
  color:var(--muted)
}

.footer-bottom p {
  max-width:670px;
  line-height:1.7
}

.footer-bottom>span {
  white-space:nowrap
}

.references {
  font-size:12px;
  color:var(--muted);
  margin-top:18px;
  max-width:800px
}

.references summary {
  list-style:none;
  display:inline-flex;
  gap:14px;
  align-items:center;
  cursor:pointer;
  padding:4px 0
}

.references summary::-webkit-details-marker {
  display:none
}

.references[open] summary>span {
  transform:rotate(45deg)
}

.references>div {
  padding:14px 0 5px;
  display:grid;
  gap:10px
}

.references a {
  text-decoration:underline;
  text-underline-offset:3px;
  line-height:1.7
}

.references p {
  font-size:12px
}

@media(max-width:1100px) {
  .system-inner,.contact-inner {
    padding-inline:44px
  }
  .design-layout {
    gap:45px
  }
  .protocol {
    padding:23px 22px
  }
  .protocol h3 {
    font-size:26px
  }
  .protocol-bottom {
    font-size:12px
  }
  .founder {
    grid-template-columns:125px 1fr;
    gap:22px
  }
  .portrait {
    width:125px
  }
  .founders {
    gap:32px
  }
  .founder h3 {
    font-size:23px
  }
  .founder-bio>p:not(.founder-role) {
    font-size:16px
  }
}

@media(max-width:900px) {
  .system-inner,.contact-inner {
    padding-inline:34px
  }
  .system .section-heading {
    grid-template-columns:1fr 2fr
  }
  .workflow li {
    padding-right:22px
  }
  .workflow h3 {
    font-size:21px
  }
  .workflow p {
    font-size:16px
  }
  .design-layout {
    gap:35px
  }
  .design-details summary {
    gap:14px;
    padding:20px 0
  }
  .design-details summary h3 {
    font-size:24px
  }
  .detail-body {
    padding-left:0;
    padding-right:8px
  }
  .detail-body p {
    font-size:15px
  }
  .bedside-figure figcaption {
    flex-wrap:wrap;
    gap:5px;
    padding:13px 16px
  }
  .protocol-grid {
    gap:12px
  }
  .protocol {
    padding:21px 18px
  }
  .protocol h3 {
    font-size:23px;
    min-height:57px
  }
  .protocol>p {
    font-size:14px
  }
  .protocol-top {
    flex-wrap:wrap;
    gap:7px
  }
  .protocol-bottom {
    font-size:12px
  }
  .protocol-note {
    flex-direction:column;
    gap:8px
  }
  .founder {
    grid-template-columns:1fr;
    align-items:start;
    align-content:start
  }
  .portrait {
    width:170px;
    max-width:100%
  }
  .portrait img {
    object-position:center
  }
  .founder:first-child .portrait img {
    transform:none;
    object-position:center
  }
  .founder-bio>p:not(.founder-role) {
    font-size:16px
  }
  .founder-focus {
    font-size:12px
  }
  .contact-options {
    gap:45px
  }
  .contact-options h3 {
    font-size:21px
  }
  .contact-options p {
    font-size:15px
  }
  .contact-arrow {
    width:67px;
    height:67px;
    font-size:38px
  }
}

@media(max-width:760px) {
  .system-inner {
    padding:44px 26px 23px
  }
  .system .section-heading {
    grid-template-columns:1fr;
    gap:25px
  }
  .system h2 br {
    display:none
  }
  .workflow {
    grid-template-columns:1fr 1fr;
    gap:31px 23px;
    margin-top:40px
  }
  .workflow li {
    padding:0
  }
  .workflow li:not(:last-child)::before {
    display:none
  }
  .workflow-marker {
    height:38px;
    width:38px;
    font-size:12px
  }
  .workflow h3 {
    font-size:22px;
    margin-top:20px
  }
  .workflow p {
    font-size:16px;
    margin-top:11px
  }
  .workflow-stage {
    font-size:12px;
    margin-top:auto;
    padding-top:17px
  }
  .system-note {
    margin-top:32px;
    padding-top:20px;
    gap:12px;
    align-items:flex-start;
    font-size:12px
  }
  .system-note>.mono {
    display:none
  }
  .note-cross {
    font-size:20px;
    line-height:1
  }
  .design-layout {
    grid-template-columns:1fr;
    gap:31px;
    margin-top:35px
  }
  .bedside-figure {
    width:100%
  }
  .bedside-figure img {
    aspect-ratio:1.08
  }
  .bedside-figure figcaption {
    flex-wrap:nowrap;
    padding:16px
  }
  .bedside-figure figcaption .mono {
    font-size:12px
  }
  .bedside-figure figcaption>span:last-child {
    font-size:12px
  }
  .design-intro {
    margin-bottom:17px;
    font-size:12px
  }
  .design-details summary {
    gap:17px;
    padding:22px 0
  }
  .design-details summary h3 {
    font-size:27px
  }
  .detail-body {
    padding:0 35px 25px 0;
    margin-top:20px
  }
  .clinical-focus .section-description {
    max-width:430px
  }
  .protocol-grid {
    grid-template-columns:1fr;
    gap:16px;
    margin-top:37px
  }
  .protocol {
    padding:26px
  }
  .protocol-top {
    flex-wrap:nowrap
  }
  .protocol-top>.mono {
    font-size:12px
  }
  .priority-label {
    font-size:12px
  }
  .protocol-graphic {
    margin-block:20px 28px
  }
  .protocol-graphic svg {
    height:85px
  }
  .protocol h3 {
    font-size:32px;
    min-height:0
  }
  .protocol>p {
    font-size:16px;
    margin-bottom:26px
  }
  .protocol-bottom {
    font-size:12px
  }
  .protocol-note {
    font-size:12px;
    line-height:1.65;
    margin-top:22px;
    gap:11px
  }
  .protocol-note .mono {
    font-size:12px
  }
  .founders {
    gap:37px;
    grid-template-columns:1fr;
    margin-top:35px
  }
  .founder {
    grid-template-columns:110px 1fr;
    gap:20px;
    padding-top:23px
  }
  .portrait {
    width:110px
  }
  .portrait img {
    object-position:center
  }
  .founder:first-child .portrait img {
    object-position:center;
    transform:none
  }
  .founder h3 {
    font-size:23px
  }
  .founder-bio>p:not(.founder-role) {
    font-size:16px
  }
  .founder-focus {
    font-size:12px;
    margin-top:14px
  }
  .founder-role {
    font-size:12px;
    margin-bottom:8px
  }
  .contact-inner {
    padding:39px 26px 25px
  }
  .contact-heading {
    margin-top:29px;
    gap:15px;
    align-items:flex-start
  }
  .contact h2 {
    font-size:42px;
    line-height:1.12;
    letter-spacing:-.05em
  }
  .contact h2 br {
    display:none
  }
  .contact-arrow {
    display:none
  }
  .contact-options {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:34px;
    padding-top:27px
  }
  .contact-options article+article {
    border-top:1px solid var(--green-line);
    padding-top:25px
  }
  .contact-options h3 {
    font-size:23px;
    line-height:1.25;
    max-width:270px
  }
  .contact-options p {
    font-size:16px;
    margin-top:13px
  }
  .contact-link {
    font-size:15px;
    margin-top:23px;
    gap:30px
  }
  .contact-bottom {
    margin-top:35px;
    padding-top:22px;
    flex-direction:column;
    gap:14px
  }
  .contact-bottom>a {
    font-size:16px
  }
  .contact-bottom>.mono {
    font-size:12px
  }
  .site-footer {
    padding-block:34px 26px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:15px
  }
  .footer-top .brand {
    font-size:23px
  }
  .footer-top>p {
    order:3;
    width:100%;
    font-size:12px
  }
  .back-top {
    font-size:12px
  }
  .footer-bottom {
    margin-top:16px;
    padding-top:0;
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    font-size:12px
  }
  .references {
    font-size:12px;
    margin-top:15px
  }
}

@media(max-width:370px) {
  .hero-copy {
    padding-inline:23px
  }
  .hero h1 {
    font-size:39px
  }
  .founder {
    grid-template-columns:1fr
  }
  .portrait {
    width:135px
  }
  .nav-contact {
    gap:10px;
    padding-inline:10px
  }
  .nav {
    gap:9px
  }
  .contact h2 {
    font-size:37px
  }
  .bedside-figure figcaption {
    flex-wrap:wrap
  }
  .protocol-top>.mono {
    font-size:12px
  }
}

@media(prefers-reduced-motion:no-preference) {
  .hero-copy {
    animation:enter .65s var(--ease) both
  }
  @keyframes enter {
    from {
      opacity:0;
      transform:translateY(9px)
    }
    to {
      opacity:1;
      transform:translateY(0)
    }
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

.workflow p,
.protocol > p,
.founder-bio > p:not(.founder-role),
.contact-options p {
  font-size:1rem;
}

@media(max-width:1100px) {
  .roadmap { padding-bottom:88px; }
  .roadmap-panel { padding-inline:24px; }
  .milestone h3 { font-size:18px; }
}

@media(max-width:1050px) {
  .roadmap-map.roadmap-compact { overflow:visible; }
  .roadmap-compact .roadmap-milestones { min-width:0; grid-template-columns:1fr; gap:24px; }
  .roadmap-compact .milestone { text-align:left; }
  .roadmap-compact .milestone-toggle {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 24px;
    column-gap:20px;
    padding:0;
    text-align:left;
  }
  .roadmap-compact .milestone-symbol { grid-column:1; grid-row:1 / 3; margin:0; }
  .roadmap-compact .milestone-status { grid-column:2; margin:0; font-size:12px; }
  .roadmap-compact .milestone-title { grid-column:2; min-height:0; margin-top:5px; font-size:19px; }
  .roadmap-compact .milestone-indicator { grid-column:3; grid-row:1 / 3; justify-self:center; }
  .roadmap-compact .milestone-detail { margin-left:60px; }
  .roadmap-compact .milestone p { margin:10px 0 0; font-size:15px; }
  .roadmap-compact .milestone:not(:last-child)::after {
    top:49px;
    bottom:-15px;
    left:19px;
    width:0;
    height:auto;
    border:0;
    border-left:1px solid var(--line-strong);
  }
  .roadmap-panel { padding:27px 30px 0; }
  .roadmap-panel-header { align-items:flex-start; }
  .roadmap-legend { gap:17px; }
  .roadmap-map { height:auto; margin:39px 0 32px; }
  .roadmap-connections { display:none; }
  .roadmap-milestones { display:grid; grid-template-columns:1fr; gap:27px; }
  .milestone { position:relative; left:auto; top:auto; width:100%; transform:none; display:grid; grid-template-columns:56px 1fr; gap:25px; text-align:left; }
  .milestone:not(:last-child)::after { content:''; position:absolute; top:62px; bottom:-21px; left:27px; border-left:1px dashed var(--line-strong); }
  .milestone-done:not(:last-child)::after { border-left-style:solid; border-color:var(--green); }
  .milestone-current:not(:last-child)::after { border-left-style:solid; border-color:var(--active); }
  .milestone-symbol { margin-inline:0; }
  .milestone-copy { padding-block:2px 12px; }
  .milestone-status { margin-top:0; }
  .milestone h3 { font-size:24px; margin-top:6px; }
  .milestone p { max-width:570px; margin:9px 0 0; }
  .roadmap-panel-footer { flex-wrap:wrap; gap:9px 20px; }
}

@media(max-width:760px) {
  .roadmap { padding-bottom:70px; }
  .roadmap-panel { margin-top:34px; padding:24px 20px 0; }
  .roadmap-panel-header { flex-direction:column; gap:16px; }
  .roadmap-legend { gap:17px; }
  .roadmap-map { margin-top:32px; }
  .milestone { grid-template-columns:45px 1fr; gap:19px; }
  .milestone-symbol { width:45px; height:45px; }
  .milestone:not(:last-child)::after { top:51px; left:22px; }
  .milestone h3 { font-size:23px; }
  .milestone p { font-size:16px; }
  .roadmap-panel-footer { padding-block:21px; align-items:flex-start; }
  .roadmap-panel-footer p { width:100%; }
  .roadmap-endpoint { display:none; }
  .roadmap-note { margin-top:17px; }
}


/* The whole-product panel retains the source ratio without letterboxing. */
@media(min-width:1321px) {
  .hero { min-height:0; }
  }
@media(max-width:1320px) {
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-visual { aspect-ratio:1; }
  .hero-visual>img { min-height:0; height:auto; }
}
@media(max-width:760px) {
  .nav { gap:16px; }
  .brand { margin-right:0; }
  .brand img { width:auto; height:18px; }
  .nav-contact { gap:14px; margin-left:auto; }
}

.gap-grid p,.detail-body,.protocol>p,.founder-bio>p:not(.founder-role) { color:var(--ink); }
.protocol-primary>p { color:var(--white); }
@media(max-width:370px) {
  .nav-contact { width:44px; height:44px; padding:10px; font-size:0; gap:0; justify-content:center; }
  .nav-contact span { font-size:18px; }
  .menu-toggle { flex-shrink:0; }
}

@media print {
  .roadmap-map { height:auto; margin-block:30px; }
  .roadmap-connections { display:none; }
  .roadmap-milestones { display:grid; grid-template-columns:repeat(2,1fr); gap:25px; }
  .milestone { position:static; width:auto; transform:none; text-align:left; display:grid; grid-template-columns:45px 1fr; gap:16px; break-inside:avoid; }
  .milestone-symbol { width:45px; height:45px; }
  .milestone-status { margin-top:0; }
  .milestone p { margin-left:0; }
  .roadmap { padding-bottom:35px; }
  .menu-toggle,.nav-contact,.nav-links,.contact-arrow,.back-top {
    display:none
  }
  .shell,.frame {
    width:100%
  }
  .hero,.system,.contact,.protocol-primary {
    background:white;
    color:black;
    border:1px solid #ccc
  }
  .hero-copy,.hero-closing-line,.hero-description,.system .section-description,.system .workflow p,.contact p,.protocol-primary>p {
    color:var(--muted)
  }
  .section-space {
    padding-block:35px
  }
  .hero {
    min-height:0
  }
  .hero h1 {
    font-size:40px
  }
  .hero-visual>img {
    min-height:0
  }
  .hero-copy {
    padding:25px
  }
  .system-inner,.contact-inner {
    padding:30px
  }
  .workflow {
    margin-top:30px
  }
  .protocol-grid {
    gap:12px
  }
  .protocol {
    break-inside:avoid
  }
  .design-details details::details-content {
    display:block
  }
  .contact,.founder {
    break-inside:avoid
  }
}