:root{
 --ink:#050608;
 --ink-2:#090b0f;
 --ink-3:#0d1117;
 --paper:#f2f5f7;
 --muted:#98a3af;
 --dim:#64707c;
 --line:#20262e;
 --line-hi:#333d49;
 --blue:#7ec8ff;
 --ice:#cdeaff;
 --green:#9de4b5;
 --amber:#d6bc7d;
 --max:1240px;
 --pad:clamp(22px,4vw,52px);
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{
 margin:0;
 color:var(--paper);
 background:var(--ink);
 font:16px/1.62 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 -webkit-font-smoothing:antialiased;
 overflow-x:hidden;
}
body:before{
 content:"";
 position:fixed; inset:0; z-index:-3; pointer-events:none;
 background:
   radial-gradient(900px 520px at 76% 5%,rgba(78,147,197,.12),transparent 65%),
   radial-gradient(700px 480px at 15% 70%,rgba(70,125,89,.06),transparent 65%);
}
a{color:inherit}
a:hover{opacity:.86}
::selection{background:rgba(126,200,255,.25)}
.wrap{width:min(var(--max),calc(100% - 2*var(--pad)));margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:9px 12px;z-index:100}

.site-header{
 position:sticky;top:0;z-index:50;
 border-bottom:1px solid rgba(255,255,255,.06);
 background:rgba(5,6,8,.76);
 backdrop-filter:blur(18px);
}
.header-inner{
 width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto;
 min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
 display:flex;align-items:center;gap:12px;
 text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-weight:820;font-size:.78rem;
}
.brand-glyph{width:22px;height:22px;position:relative;display:inline-block}
.brand-glyph:before,.brand-glyph:after{content:"";position:absolute;inset:0;border:1px solid var(--blue);transform:rotate(45deg)}
.brand-glyph:after{inset:6px;border-color:var(--paper);opacity:.65}
nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav a{
 text-decoration:none;color:var(--muted);font-size:.88rem;
 padding:9px 11px;border-radius:8px;transition:.16s ease;
}
nav a:hover{opacity:1;color:var(--paper);background:rgba(255,255,255,.04)}

.hero{
 position:relative;
 min-height:calc(100vh - 78px);
 display:flex;align-items:center;
 padding:72px 0 96px;
 border-bottom:1px solid var(--line);
 overflow:hidden;
}
.hero.compact{min-height:0;padding:110px 0 78px}
.hero:after{
 content:"";
 position:absolute;
 width:46vw;height:46vw;max-width:720px;max-height:720px;
 right:-13vw;top:3vw;
 border:1px solid rgba(126,200,255,.12);
 transform:rotate(45deg);
 box-shadow:0 0 0 90px rgba(126,200,255,.018),0 0 0 180px rgba(126,200,255,.01);
 pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:72px;align-items:end}
.eyebrow{
 display:flex;align-items:center;gap:12px;
 text-transform:uppercase;letter-spacing:.2em;color:var(--blue);
 font-size:.7rem;font-weight:800;
}
.eyebrow:before{content:"";width:34px;height:1px;background:currentColor}
h1{
 margin:.26em 0 .26em;
 max-width:1080px;
 font-size:clamp(4.2rem,9.5vw,9.2rem);
 line-height:.83;
 letter-spacing:-.06em;
 font-weight:850;
}
h1 .thin{font-weight:420;color:#c5ccd3}
h2{
 margin:0;
 font-size:clamp(2.2rem,4.8vw,4.1rem);
 line-height:.98;
 letter-spacing:-.045em;
}
h3{margin:0 0 8px;font-size:1.1rem;line-height:1.25}
.lede{max-width:820px;font-size:clamp(1.1rem,2vw,1.34rem);color:var(--muted);margin-top:24px}
.hero-aside{
 border-top:1px solid var(--line-hi);
 padding-top:18px;
 color:var(--muted);
 font-size:.9rem;
}
.hero-aside .label{
 display:block;color:var(--dim);text-transform:uppercase;letter-spacing:.16em;font-size:.67rem;margin-bottom:11px
}
.hero-aside strong{display:block;color:var(--paper);font-size:1.04rem;margin-bottom:7px}
.hero-index{
 position:absolute;left:var(--pad);bottom:28px;
 color:var(--dim);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase
}

.section{padding:104px 0;border-bottom:1px solid var(--line)}
.section.dark{background:var(--ink-2)}
.section-head{
 display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
 gap:70px;margin-bottom:54px;align-items:start
}
.section-num{color:var(--dim);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;margin-bottom:20px}
.section-intro{max-width:780px;color:var(--muted);font-size:1.04rem;margin:22px 0 0}
.big-statement{font-size:clamp(2rem,4.3vw,3.8rem);line-height:1.02;letter-spacing:-.04em;max-width:900px}

.capability-list{border-top:1px solid var(--line)}
.capability{
 display:grid;grid-template-columns:80px 1fr 1.2fr;
 gap:26px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start
}
.capability .n{color:var(--dim);font-size:.72rem;letter-spacing:.14em}
.capability p{margin:0;color:var(--muted)}
.capability h3{font-size:1.32rem}

.project-stage{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.project{
 position:relative;min-height:430px;
 padding:34px;
 border:1px solid var(--line);
 background:
  linear-gradient(150deg,rgba(17,23,31,.97),rgba(7,9,13,.99));
 overflow:hidden;
 display:flex;flex-direction:column;justify-content:space-between;
}
.project:after{
 content:"";
 position:absolute;right:-95px;bottom:-95px;width:250px;height:250px;
 border:1px solid rgba(126,200,255,.13);transform:rotate(45deg);
}
.project-top{position:relative;z-index:2}
.project-meta{
 display:flex;justify-content:space-between;gap:20px;
 color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;margin-bottom:76px
}
.status{color:var(--green);display:inline-flex;align-items:center;gap:7px}
.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.project h3{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;margin-bottom:14px}
.project p{color:var(--muted);max-width:530px}
.project-link{position:relative;z-index:2;text-decoration:none;color:var(--blue);font-weight:760}
.project-link span{display:inline-block;transition:transform .15s ease}
.project-link:hover span{transform:translateX(4px)}

.stack-band{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line)}
.stack-item{padding:24px 18px;border-right:1px solid var(--line);min-height:110px;display:flex;flex-direction:column;justify-content:space-between}
.stack-item:nth-child(5n){border-right:0}
.stack-item .tag{font-size:.66rem;color:var(--dim);text-transform:uppercase;letter-spacing:.14em}
.stack-item strong{font-size:.98rem}

.system-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line)}
.flow-node{padding:24px;min-height:210px;border-right:1px solid var(--line);background:var(--ink-3);position:relative}
.flow-node:last-child{border-right:0}
.flow-node .n{color:var(--dim);font-size:.67rem;letter-spacing:.16em;margin-bottom:50px}
.flow-node h3{font-size:1.05rem}
.flow-node p{font-size:.86rem;color:var(--muted);margin-bottom:0}
.flow-node:after{content:"→";position:absolute;right:-10px;top:50%;transform:translateY(-50%);color:var(--blue);z-index:2;background:var(--ink);padding:2px}
.flow-node:last-child:after{display:none}

.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.principle{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:190px}
.principle .n{font-size:.66rem;color:var(--dim);letter-spacing:.14em;margin-bottom:42px}
.principle strong{display:block;font-size:1.16rem;margin-bottom:8px}
.principle span{color:var(--muted);font-size:.9rem}

.prose{max-width:830px}
.prose p,.prose li{color:var(--muted);font-size:1.03rem}
.prose strong{color:var(--paper)}
.prose a{color:var(--blue)}

.contact-shell{
 display:grid;grid-template-columns:1.15fr .85fr;
 gap:0;border:1px solid var(--line);background:var(--ink-3)
}
.contact-copy,.contact-action{padding:46px}
.contact-action{border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;min-height:300px}
.contact-action .label{color:var(--dim);font-size:.67rem;text-transform:uppercase;letter-spacing:.14em}
.contact-email{font-size:clamp(1.35rem,2.8vw,2.4rem);line-height:1.05;text-decoration:none;color:var(--blue);font-weight:760;word-break:break-word}

.site-footer{padding:38px 0 48px;background:#030405}
.footer-inner{
 width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto;
 display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;color:var(--dim);font-size:.86rem
}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{text-decoration:none;color:var(--muted)}

@media(max-width:1050px){
 .system-flow{grid-template-columns:repeat(3,1fr)}
 .flow-node:nth-child(3){border-right:0}
 .flow-node:nth-child(-n+3){border-bottom:1px solid var(--line)}
 .flow-node:nth-child(3):after{display:none}
 .stack-band{grid-template-columns:repeat(2,1fr)}
 .stack-item{border-bottom:1px solid var(--line)}
 .stack-item:nth-child(5n){border-right:1px solid var(--line)}
 .stack-item:nth-child(2n){border-right:0}
}
@media(max-width:900px){
 .hero{min-height:auto}
 .hero-grid,.section-head,.contact-shell{grid-template-columns:1fr}
 .hero-grid{gap:40px}
 .section-head{gap:24px}
 .contact-action{border-left:0;border-top:1px solid var(--line)}
 .principles{grid-template-columns:repeat(2,1fr)}
 .project-stage{grid-template-columns:1fr}
 .capability{grid-template-columns:50px 1fr}
 .capability p{grid-column:2}
}
@media(max-width:680px){
 .header-inner{align-items:flex-start;flex-direction:column;padding-top:17px;padding-bottom:17px}
 h1{font-size:clamp(4rem,20vw,6rem)}
 .hero{padding-top:72px}
 .section{padding:72px 0}
 .project{min-height:360px}
 .stack-band,.system-flow,.principles{grid-template-columns:1fr}
 .stack-item,.flow-node,.principle{border-right:0!important}
 .flow-node{border-bottom:1px solid var(--line)}
 .flow-node:after{display:none}
 .capability{grid-template-columns:1fr;gap:8px}
 .capability p{grid-column:1}
 .contact-copy,.contact-action{padding:30px}
 nav{gap:0}
 nav a{padding-left:8px;padding-right:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-link span{transition:none}}