:root{
  --ink:#0d1b20;
  --ink-soft:#16282f;
  --paper:#f4f6f4;
  --paper-dim:#e8ebe7;
  --vessel:#1f6f72;
  --vessel-soft:#a9c9c6;
  --signal:#c1502f;
  --signal-soft:#e7c3b3;
  --slate:#4a565a;
  --line:rgba(13,27,32,0.12);
  --line-strong:rgba(13,27,32,0.22);
  --serif: "Newsreader", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(244,246,244,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif);
  font-size:1.28rem;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--ink);
}
.brand-mark{
  width:30px; height:30px;
  flex-shrink:0;
}
.brand-name em{
  font-style:italic;
  color:var(--vessel);
}

nav.primary{
  display:flex; align-items:center; gap:40px;
}
nav.primary ul{
  display:flex; gap:34px;
}
nav.primary a.nav-link{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate);
  position:relative;
  padding-bottom:4px;
  transition:color 0.2s ease;
}
nav.primary a.nav-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-1px;
  height:1.5px; background:var(--signal);
  transition:right 0.25s ease;
}
nav.primary a.nav-link:hover{color:var(--ink);}
nav.primary a.nav-link:hover::after{right:0;}
nav.primary a.nav-link.active{color:var(--ink);}
nav.primary a.nav-link.active::after{right:0;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:11px 20px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn.solid{background:var(--ink); color:var(--paper);}
.btn.solid:hover{background:var(--vessel); border-color:var(--vessel);}
.btn.accent{border-color:var(--signal); color:var(--signal);}
.btn.accent:hover{background:var(--signal); color:var(--paper);}

.menu-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:6px;
}
.menu-toggle span{width:22px; height:1.5px; background:var(--ink); display:block;}

#mobileMenu{
  display:none;
  border-top:1px solid var(--line);
  padding:18px 32px 22px;
  flex-direction:column;
  gap:16px;
}
#mobileMenu.open{display:flex;}

/* ---------- Page load fade ---------- */
main{animation:fadeIn 0.5s ease;}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--vessel);
  display:flex; align-items:center; gap:10px;
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--vessel);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:96px 0 100px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.3rem, 4.2vw, 3.55rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  max-width:14ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--vessel);
}
.hero .sub{
  margin-top:26px;
  font-size:1.08rem;
  line-height:1.65;
  color:var(--slate);
  max-width:46ch;
}
.hero .cta-row{
  display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;
}

.hero-art{
  position:relative;
  aspect-ratio:1/1.05;
}
.hero-art svg{width:100%; height:100%; display:block;}

.flow-path{
  fill:none;
  stroke:var(--vessel);
  stroke-width:1.4;
  stroke-linecap:round;
  opacity:0.55;
}
.flow-path.thin{stroke-width:0.9; opacity:0.35;}
.flow-dash{
  stroke-dasharray:6 10;
  animation:dashflow 5s linear infinite;
}
@keyframes dashflow{ to { stroke-dashoffset:-160; } }

.no-node{
  fill:var(--signal);
}
.no-pulse{
  fill:none;
  stroke:var(--signal);
  stroke-width:1.2;
  opacity:0;
  transform-origin:center;
  animation:pulseOut 3.2s ease-out infinite;
}
.no-pulse.d2{animation-delay:1.1s;}
.no-pulse.d3{animation-delay:2.2s;}
@keyframes pulseOut{
  0%{opacity:0.65; transform:scale(0.4);}
  75%{opacity:0;}
  100%{opacity:0; transform:scale(2.6);}
}

/* ---------- Section rhythm ---------- */
section.block{
  padding:84px 0;
  border-bottom:1px solid var(--line);
}
section.block:last-of-type{border-bottom:none;}
.block-head{
  display:grid;
  grid-template-columns:0.62fr 1fr;
  gap:60px;
  margin-bottom:46px;
}
.block-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem, 2.6vw, 2.15rem);
  line-height:1.22;
}
.block-head p{
  color:var(--slate);
  font-size:1.02rem;
  line-height:1.7;
  max-width:56ch;
}
.block.tight .block-head{margin-bottom:34px;}

/* about / vision text-only blocks */
.prose-block p{
  font-size:1.02rem;
  line-height:1.75;
  color:var(--slate);
  max-width:70ch;
}
.prose-block .eyebrow{margin-bottom:18px;}
.about-head{
  grid-template-columns:0.62fr 1fr auto;
  align-items:center;
}
.molecule-art{
  width:100%;
  max-width:220px;
  justify-self:end;
}
.molecule-art svg{width:100%; height:auto; display:block;}

/* ---------- What we do — feature list ---------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.feature{
  background:var(--paper);
  padding:32px 26px;
  display:flex; flex-direction:column; gap:14px;
}
.feature-icon{
  width:34px; height:34px;
  color:var(--vessel);
}
.feature-icon svg{width:100%; height:100%; display:block;}
.feature .mark{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--vessel);
  letter-spacing:0.05em;
}
.feature h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.14rem;
  line-height:1.35;
}

/* ---------- Vision block ---------- */
.vision{
  background:var(--ink);
  color:var(--paper-dim);
  position:relative;
  overflow:hidden;
}
.vision .wrap{position:relative; z-index:2;}
.vision .eyebrow{color:var(--vessel-soft);}
.vision .eyebrow::before{background:var(--vessel-soft);}
.vision p.big{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.5;
  max-width:26ch;
  color:#f4f6f4;
}
.vision-bg{
  position:absolute; right:-8%; top:0; bottom:0;
  width:60%;
  opacity:0.35;
}

/* ---------- Footer ---------- */
footer.site{
  padding:56px 0 40px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.footer-brand{
  font-family:var(--serif); font-size:1.1rem;
}
.footer-meta{
  display:flex; gap:36px; flex-wrap:wrap;
}
.footer-meta div{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--slate);
  line-height:1.7;
}
.footer-meta span{
  display:block;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--line-strong);
  font-size:0.68rem;
  margin-bottom:4px;
}
.copyright{
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--slate);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- Platform page specifics ---------- */
.page-intro{
  padding:76px 0 60px;
  border-bottom:1px solid var(--line);
}
.page-intro h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 3.6vw, 2.9rem);
  line-height:1.16;
  max-width:20ch;
}
.page-intro .sub{
  margin-top:22px;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--slate);
  max-width:60ch;
}

.pilot-block{
  background:var(--paper-dim);
}
.pilot-inner{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:center;
}
.pilot-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--signal);
  padding:6px 12px;
  margin-bottom:18px;
}
.pilot-inner h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem, 2.6vw, 2.15rem);
  line-height:1.24;
}
.pilot-inner p{
  margin-top:20px;
  color:var(--slate);
  font-size:1.02rem;
  line-height:1.75;
  max-width:52ch;
}
.pilot-art{aspect-ratio:1/0.95;}
.pilot-art svg{width:100%;height:100%;}

.indication-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:44px;
}
.indication-card{
  border:1px solid var(--line-strong);
  padding:30px 26px 26px;
  position:relative;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.indication-card:hover{border-color:var(--vessel); transform:translateY(-3px);}
.indication-card .num{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--vessel);
  letter-spacing:0.06em;
}
.indication-icon{
  width:30px; height:30px;
  color:var(--vessel);
  margin-bottom:16px;
}
.indication-icon svg{width:100%; height:100%; display:block;}
.indication-card.lead .indication-icon{color:var(--signal-soft);}
.indication-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.25rem;
  margin-top:14px;
}
.indication-card .status{
  margin-top:14px;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--slate);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.indication-card.lead{background:var(--ink); color:var(--paper);}
.indication-card.lead .num{color:var(--signal-soft);}
.indication-card.lead .status{color:var(--vessel-soft);}

.fine-print{
  margin-top:26px;
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--slate);
  font-style:italic;
}

.dev-model{
  display:grid;
  grid-template-columns:0.62fr 1fr;
  gap:60px;
}
.dev-model .note-box{
  border-left:2px solid var(--line-strong);
  padding-left:22px;
  margin-top:22px;
}
.dev-model .note-box p{
  font-size:0.9rem;
  color:var(--slate);
  line-height:1.7;
}

/* ---------- Contact page ---------- */
.contact-hero{
  padding:76px 0 20px;
  position:relative;
}
.contact-hero .wrap{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:40px;
}
.route-art{
  width:100%;
  max-width:200px;
}
.route-art svg{width:100%; height:auto; display:block;}
.contact-hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem, 3.8vw, 3rem);
}
.contact-hero .sub{
  margin-top:20px;
  color:var(--slate);
  font-size:1.05rem;
  line-height:1.7;
  max-width:60ch;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:64px 0;
  border-bottom:1px solid var(--line);
}
.contact-stack{
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:64px 0;
  border-bottom:1px solid var(--line);
}

/* ---------- Office cards (dual location) ---------- */
.office-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:30px;
}
.office{
  background:var(--paper);
  padding:26px 24px 22px;
}
.office-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper);
  padding:5px 11px;
  margin-bottom:20px;
}
.office-de .office-tag{background:var(--vessel);}
.office-us .office-tag{background:var(--signal);}
.office-line{
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:0.92rem;
  line-height:1.55;
}
.office-line:first-of-type{border-top:none;}
.office-line .label{
  display:block;
  font-family:var(--mono);
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--slate);
  margin-bottom:4px;
}

/* ---------- Footer dual-office block ---------- */
.footer-office{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--slate);
  line-height:1.75;
}
.footer-office span{
  display:block;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--line-strong);
  font-size:0.68rem;
  margin-bottom:4px;
}
.contact-card{
  border:1px solid var(--line-strong);
  padding:40px;
}
.contact-card .eyebrow{color:var(--vessel); margin-bottom:24px;}
.contact-card .legal{
  font-family:var(--serif);
  font-size:1.3rem;
  margin-bottom:4px;
}
.contact-card .legal-sub{
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--slate);
  margin-bottom:26px;
}
.contact-line{
  display:flex; gap:16px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:0.96rem;
}
.contact-line:first-of-type{border-top:none;}
.contact-line .label{
  font-family:var(--mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--slate);
  width:96px;
  flex-shrink:0;
  padding-top:2px;
}

.inquiry-list{list-style:none;}
.inquiry-list li{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line);
}
.inquiry-list li:first-child{border-top:none;}
.inquiry-list .idx{
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--vessel);
}
.inquiry-list h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
}

.closing-line{
  padding:52px 0;
  text-align:center;
}
.closing-line span{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--vessel);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:14px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  nav.primary ul{display:none;}
  .menu-toggle{display:flex;}
  .hero-grid, .pilot-inner, .dev-model, .block-head, .contact-grid{
    grid-template-columns:1fr;
  }
  .about-head{grid-template-columns:1fr;}
  .molecule-art{display:none;}
  .contact-hero .wrap{grid-template-columns:1fr;}
  .route-art{display:none;}
  .office-grid{grid-template-columns:1fr;}
  .footer-meta{flex-direction:column; gap:24px;}
  .hero-art{order:-1; max-width:280px; margin:0 auto;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .indication-cards{grid-template-columns:1fr;}
  .footer-grid{flex-direction:column; align-items:flex-start;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .feature-grid{grid-template-columns:1fr;}
  .btn{padding:10px 16px;}
}