:root{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --ink:#0A0F1C;
  --text:#1B2333;
  --text-dim:#5A6578;
  --line:#E3E7EE;
  --teal:#2F8F84;
  --teal-soft:#E5F3F1;
  --signal:#9FE3DA;
  --gold:#2F8F84;
  --gold-dark:#1F7A70;
  --display:'Unbounded', sans-serif;
  --sans:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --pad:max(24px, calc((100vw - 1160px) / 2));
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;}
::selection{background:var(--signal); color:var(--ink);}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:rgba(247,248,250,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
header.scrolled{border-bottom-color:var(--line);}
.logo a{display:block;}
.logo img{height:30px; width:auto; display:block;}
nav{display:flex; align-items:center; gap:28px;}
.nav-links{display:flex; gap:28px;}
nav a{font-size:14px; font-weight:500; color:var(--text-dim); text-decoration:none; transition:color .2s;}
nav a:hover{color:var(--ink);}
.lang-toggle{
  display:flex; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:3px;
}
.lang-toggle button{
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  padding:5px 12px; border-radius:999px; transition:all .2s;
}
.lang-toggle button.active{background:var(--ink); color:#fff;}
.menu-toggle{
  display:none; background:none; border:none; color:var(--ink);
  font-size:24px; line-height:1; cursor:pointer; padding:4px;
}

/* ---------- HERO ---------- */
.hero, .sub-hero{position:relative; isolation:isolate; overflow:hidden;}
.hero::before, .sub-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(55% 55% at 88% 0%, rgba(159,227,218,.55), transparent 70%),
    radial-gradient(40% 45% at 0% 100%, rgba(47,143,132,.08), transparent 70%);
}
.hero{
  padding:150px var(--pad) 88px;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center;
}
.hero h1{font-size:clamp(32px, 4.4vw, 60px);}
.hero-visual{display:flex; align-items:center; justify-content:center;}
.weave{width:100%; max-width:460px; height:auto; overflow:visible;}
.thread{
  fill:none; stroke:url(#fade); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:1 2; stroke-dashoffset:1.02;
  animation:drawThread 0.9s cubic-bezier(.3,0,.7,1) forwards;
}
.thread.teal{stroke:url(#fadeTeal);}
.weave-gold{
  fill:none; stroke:url(#goldIn); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:1 2; stroke-dashoffset:1.02;
  animation:drawThread 1.3s 0.9s ease-out forwards;
}
.weave-dot{
  fill:#E8A317; stroke:#fff; stroke-width:1.5; opacity:0;
  animation:showPulse .3s 0.9s ease-out forwards, pulseBeat 2.4s 1.2s ease-in-out infinite;
}
@keyframes drawThread{to{stroke-dashoffset:0;}}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teal);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal);}
.eyebrow::before{flex:none;}
@media (max-width:600px){
  .eyebrow .eb-dash{display:none;}
  .eyebrow .eb-loc{display:block;}
}
h1{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:clamp(34px, 5vw, 68px); line-height:1.08; letter-spacing:-.03em;
  margin-top:26px;
}
.hero-tagline{font-family:var(--mono); font-size:15px; color:var(--gold-dark); margin-top:26px;}
.hero-sub{font-size:19px; color:var(--text-dim); max-width:56ch; margin-top:16px;}
.hero-cta{margin-top:36px; display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:15px; font-weight:600; padding:14px 24px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:all .2s;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--teal);}
.btn-ghost{background:var(--surface); border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

.signal-wrap{
  margin-top:56px; max-width:760px; padding:20px 24px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
}
.signal-line{width:100%; height:70px; display:block;}
.noise-path{
  fill:none; stroke:#9AA6BD; stroke-width:1.4; opacity:.8;
  stroke-dasharray:700; stroke-dashoffset:700;
  animation:drawNoise 1s ease-out forwards;
}
.clean-path{
  fill:none; stroke:var(--gold); stroke-width:2.2;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:drawClean 2.6s .5s ease-out forwards;
}
.pulse-dot{
  fill:var(--teal); opacity:0;
  animation:showPulse .4s 2.7s ease-out forwards, pulseBeat 2.4s 3.1s ease-in-out infinite;
}
@keyframes drawNoise{to{stroke-dashoffset:0;}}
@keyframes drawClean{to{stroke-dashoffset:0;}}
@keyframes showPulse{to{opacity:1;}}
@keyframes pulseBeat{0%,100%{r:9; opacity:1;} 50%{r:14; opacity:.35;}}

/* ---------- SECTIONS ---------- */
section{padding:96px var(--pad); position:relative;}
section[id]{scroll-margin-top:72px;}
.section-line{position:relative;}
.section-line::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); z-index:-2; pointer-events:none;}
.section-head{
  display:grid; grid-template-columns:200px 1fr; gap:24px 40px;
  margin-bottom:56px; align-items:start;
}
.section-tag{
  font-family:var(--mono); font-size:12px; font-weight:500; color:var(--teal);
  letter-spacing:.12em; text-transform:uppercase; padding-top:14px;
}
h2{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:clamp(26px, 3.4vw, 44px); line-height:1.15; letter-spacing:-.025em;
  max-width:24ch;
}
.lede{font-size:17px; color:var(--text-dim); max-width:60ch; margin-top:18px;}

.approach-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.approach-grid p{font-size:17px; color:var(--text-dim); max-width:52ch;}
.approach-grid strong{color:var(--ink); font-weight:600;}

.core-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:48px; display:grid; grid-template-columns:1.1fr 1fr; gap:56px;
}
.core-panel h3{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:clamp(20px, 2.2vw, 26px); line-height:1.2; letter-spacing:-.02em;
}
.core-panel .lede{margin-top:16px;}
.stat-list{display:flex; flex-direction:column;}
.stat-row{
  display:flex; justify-content:space-between; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.stat-row:first-child{padding-top:0;}
.stat-row:last-child{border-bottom:none;}
.stat-row .label{font-size:14px; color:var(--text-dim);}
.stat-row .value{font-family:var(--mono); font-size:13px; color:var(--teal); text-align:right;}

/* ---------- CAPABILITIES ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.cap-card{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:32px; min-height:250px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.cap-card:hover{
  transform:translateY(-3px); border-color:var(--teal);
  box-shadow:0 18px 40px -22px rgba(10,15,28,.28);
}
.cap-index{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--teal-soft); color:var(--teal);
  font-family:var(--mono); font-size:12px; font-weight:500;
}
.cap-card h4{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:20px; line-height:1.25; letter-spacing:-.015em; margin-top:22px; min-height:2.5em;
}
.cap-card p{color:var(--text-dim); font-size:15px; margin-top:12px; max-width:46ch;}
.cap-arrow{
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--teal);
  margin-top:22px; transition:transform .2s;
}
.cap-card:hover .cap-arrow{transform:translateX(4px);}

/* ---------- HOW WE WORK ---------- */
#how-we-work .steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.dispatch-row{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:28px; display:flex; flex-direction:column; gap:12px;
}
.dispatch-tag{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--gold-dark);}
.dispatch-title{font-family:var(--display); font-weight:500; font-size:22px; color:var(--ink); letter-spacing:-.015em;}
.dispatch-body{color:var(--text-dim); font-size:15px;}

/* ---------- CONTACT ---------- */
#contact{padding-top:24px;}
#contact::before{display:none;}
.contact-panel{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff; border-radius:28px; padding:56px;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px;
}
.contact-panel::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 80% at 100% 0%, rgba(159,227,218,.28), transparent 70%);
}
.contact-panel > *{position:relative; z-index:1;}
.contact-panel .cweave{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.cthread{stroke-dasharray:1 2; stroke-dashoffset:1.02;}
.ctail{stroke-dasharray:1 2; stroke-dashoffset:1.02;}
.cdot{opacity:0;}
.contact-panel.in .cthread{animation:drawThread 1.6s cubic-bezier(.3,0,.7,1) forwards;}
.contact-panel.in .ctail{animation:drawThread 1.2s 1.4s ease-out forwards;}
.contact-panel.in .cdot{animation:showPulse .3s 2.4s ease-out forwards, pulseBeat 2.4s 2.7s ease-in-out infinite;}
.contact-panel h2{color:#fff; max-width:14ch;}
.contact-meta{display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:14px; color:#9AA6BD;}
.contact-meta a{color:var(--signal); text-decoration:none; font-weight:500;}
.contact-meta a:hover{text-decoration:underline;}

.cross-links{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.cross-link{
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:10px 18px; font-size:13px; font-weight:500; color:var(--text-dim);
  text-decoration:none; transition:all .2s;
}
.cross-link:hover{border-color:var(--teal); color:var(--teal);}

/* ---------- SUBPAGES ---------- */
.sub-hero{padding:152px var(--pad) 72px;}
.sub-hero h1{font-size:clamp(30px, 4.2vw, 56px);}
.back-link{
  display:flex; width:fit-content; align-items:center; gap:8px; margin-bottom:28px;
  font-family:var(--mono); font-size:13px; color:var(--text-dim); text-decoration:none; transition:color .2s;
}
.back-link:hover{color:var(--teal);}
.pillars{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px;}
.pillar-tag{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--teal); letter-spacing:.1em;}
.pillar h4{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:18px; line-height:1.3; letter-spacing:-.01em; margin-top:14px;
}
.pillar p{color:var(--text-dim); font-size:15px; margin-top:10px;}

/* ---------- FOOTER ---------- */
footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding:32px var(--pad); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:13px; color:var(--text-dim);
}
.foot-brand{display:flex; align-items:center; gap:12px;}
.foot-brand img{height:20px; width:auto; display:block;}

/* ---------- PAGE GUIDE LINE ---------- */
.page-line{position:absolute; top:0; left:0; width:100%; height:0; z-index:-1; pointer-events:none; overflow:hidden;}
.page-svg{position:absolute; top:0; left:0;}
.page-base{fill:none; stroke:none;}
.page-fill{fill:none; stroke:#1E6B63; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:1 2; stroke-dashoffset:1.02;}
.page-dot{
  position:absolute; z-index:-1; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:#E8A317; border:3px solid #fff; box-shadow:0 0 0 6px rgba(232,163,23,.18);
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.cap-card, .dispatch-row, .pillar{transition:border-color .35s, box-shadow .35s, transform .25s;}
.cap-card.read, .dispatch-row.read, .pillar.read{border-color:var(--teal); box-shadow:0 10px 30px -20px rgba(47,143,132,.55);}

@keyframes dotPulse{0%,100%{box-shadow:0 0 0 6px rgba(232,163,23,.18);} 50%{box-shadow:0 0 0 15px rgba(232,163,23,.04);}}
.page-dot.front{z-index:60;}
.page-dot.landed{animation:dotPulse 2.4s ease-in-out infinite;}
.contact-panel .page-tail{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.page-tail-path{fill:none; stroke:#9FE3DA; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:1 2; stroke-dashoffset:1.02;}

/* ---------- REVEAL ---------- */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in{opacity:1; transform:none;}
.js .cap-card.reveal.in{transition:transform .25s, box-shadow .25s, border-color .25s;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  #how-we-work .steps{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-links.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 16px;
  }
  .nav-links.open a{padding:14px 0; border-bottom:1px solid var(--line); font-size:15px;}
  .nav-links.open a:last-child{border-bottom:none;}
  .menu-toggle{display:block;}
  nav{gap:14px;}
  .logo img{height:26px;}
  .section-head{grid-template-columns:1fr; gap:12px; margin-bottom:40px;}
  .section-tag{padding-top:0;}
  .approach-grid, .core-panel, .cap-grid, .pillars{grid-template-columns:1fr;}
  .cap-card h4{min-height:0;}
  .approach-grid{gap:24px;}
  .core-panel{padding:28px; gap:32px;}
  section{padding:72px var(--pad);}
  .hero{padding:120px var(--pad) 64px; grid-template-columns:1fr; gap:24px;}
  .weave{max-width:340px;}
  .sub-hero{padding:120px var(--pad) 56px;}
  .contact-panel{padding:36px 28px;}
}
@media (max-width:600px){
  #how-we-work .steps{grid-template-columns:1fr;}
  .hero-sub{font-size:17px;}
  .signal-wrap{padding:14px 16px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .noise-path, .clean-path, .thread, .weave-gold{animation:none; stroke-dashoffset:0;}
  .cthread, .ctail{animation:none !important; stroke-dashoffset:0;}
  .cdot{animation:none !important; opacity:1;}
  .pulse-dot, .weave-dot{animation:none; opacity:1;}
  .js .reveal{opacity:1; transform:none; transition:none;}
}