:root {
  --ink: #06101b;
  --ink-2: #0a1725;
  --panel: #0c1b2a;
  --paper: #f2f5f7;
  --white: #f8fbfd;
  --muted: #9cb0c2;
  --line: rgba(178, 219, 245, .16);
  --blue: #5ec8ff;
  --blue-2: #b9ebff;
  --green: #76e7bc;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--ink); color: var(--white); line-height: 1.6; }
a { color: inherit; }
svg { display: block; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: clamp(88px, 10vw, 150px) 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:1000; padding:10px 14px; background:var(--white); color:var(--ink); border-radius:8px; }
.skip-link:focus { top:16px; }

.site-header { position:fixed; inset:0 0 auto; z-index:50; border-bottom:1px solid transparent; transition:.25s ease; }
.site-header.scrolled { background:rgba(6,16,27,.86); backdrop-filter: blur(16px); border-color:var(--line); }
.nav-wrap { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; line-height:1; }
.brand-logo { display:block; width:clamp(168px, 16vw, 220px); height:auto; }
.footer-logo { width:190px; }
.primary-nav { display:flex; align-items:center; gap:30px; }
.primary-nav a { color:#c6d3de; text-decoration:none; font-size:.88rem; }
.primary-nav a:hover { color:var(--white); }
.primary-nav .nav-cta { padding:11px 16px; border:1px solid rgba(185,235,255,.28); border-radius:9px; color:var(--white); }
.nav-toggle { display:none; background:none; border:0; padding:10px; }
.nav-toggle span:not(.sr-only) { display:block; width:25px; height:1px; background:var(--white); margin:6px; }

.hero { min-height:860px; height:100svh; position:relative; display:grid; align-items:center; overflow:hidden; background:var(--ink); }
.hero-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(6,16,27,1) 0%, rgba(6,16,27,.92) 37%, rgba(6,16,27,.28) 72%, rgba(6,16,27,.68) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 24%); }
.blueprint { position:absolute; inset:0; overflow:hidden; }
.blueprint-svg { width:100%; height:100%; opacity:.74; }
.grid-line { fill:none; stroke:var(--blue); }
.grid-line.minor { opacity:.045; stroke-width:1; }
.grid-line.major { opacity:.09; stroke-width:1; }
.architecture { opacity:.82; }
.bp-node rect, .bp-node ellipse, .bp-node path, .draw-line { fill:none; stroke:var(--blue-2); stroke-width:1.7; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.bp-node text, .bp-note { fill:var(--blue-2); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; }
.bp-node text { font-size:11px; }
.bp-note { font-size:11px; font-style:italic; opacity:0; animation:noteIn .5s ease forwards; }
.note-1 { animation-delay:3.9s; }.note-2 { animation-delay:4.2s; }.note-3 { animation-delay:4.5s; }
.draw-line { stroke-dasharray:1; stroke-dashoffset:1; animation:draw .7s ease forwards; }
.line-1{animation-delay:.3s}.line-2{animation-delay:.8s}.line-3{animation-delay:1.3s}.line-4{animation-delay:1.8s}.line-5{animation-delay:2.3s}.line-6{animation-delay:2.8s}.line-7{animation-delay:3.3s}.line-8{animation-delay:3.55s}
.bp-node { opacity:0; transform-box:fill-box; transform-origin:center; animation:nodeIn .45s ease forwards; }
.node-1{animation-delay:.15s}.node-2{animation-delay:.68s}.node-3{animation-delay:1.15s}.node-4{animation-delay:1.65s}.node-5{animation-delay:2.15s}.node-6{animation-delay:2.65s}.node-7{animation-delay:3.15s}
.packet circle { fill:var(--blue-2); }
.packet-a { offset-path:path('M762 232 H932'); animation:packet 6s ease-in-out 4.8s infinite; }
.packet-b { offset-path:path('M1607 289 V410'); animation:packet 6.5s ease-in-out 6.2s infinite; }
.packet-c { offset-path:path('M1542 470 H1370'); animation:packet 7s ease-in-out 7.5s infinite; }
.hero-layout { position:relative; z-index:2; padding-top:80px; }
.hero-copy { width:min(720px, 66vw); }
.eyebrow, .section-kicker { margin:0 0 20px; color:var(--blue); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; font-weight:700; }
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow span { width:32px; height:1px; background:var(--blue); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:26px; font-size:clamp(3.5rem, 7.3vw, 7.25rem); line-height:.93; letter-spacing:-.06em; font-weight:600; }
h1 em { font-style:normal; color:var(--blue-2); font-weight:420; }
.hero-lede { max-width:650px; margin-bottom:34px; color:#bdcad5; font-size:clamp(1.05rem, 1.6vw, 1.3rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:0 20px; border-radius:9px; text-decoration:none; font-weight:650; font-size:.9rem; transition:.2s ease; }
.button.primary { background:var(--blue-2); color:var(--ink); }
.button.primary:hover { background:#e9f9ff; transform:translateY(-2px); }
.button.ghost { border:1px solid rgba(185,235,255,.22); background:rgba(8,23,37,.42); }
.button.ghost:hover { border-color:rgba(185,235,255,.5); }
.trust-row { display:flex; flex-wrap:wrap; gap:10px 28px; padding:0; margin:0; list-style:none; color:#91a5b7; font-size:.78rem; }
.trust-row li { display:flex; align-items:center; gap:10px; }
.trust-row li::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--blue); }
.scroll-cue { position:absolute; z-index:3; right:40px; bottom:36px; display:flex; align-items:center; gap:12px; color:#6f879a; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; writing-mode:vertical-rl; }
.scroll-cue span { width:1px; height:58px; background:linear-gradient(var(--blue), transparent); }

.statement { background:var(--paper); color:var(--ink); }
.statement-grid { display:grid; grid-template-columns:1fr 2.2fr; gap:50px; }
.statement .section-kicker { color:#14658d; }
.statement-copy h2, .section-head h2, .approach h2, .about h2, .contact h2 { font-size:clamp(2.3rem, 4.8vw, 4.9rem); line-height:1.04; letter-spacing:-.045em; font-weight:550; }
.statement-copy p { max-width:850px; color:#4d5b66; font-size:clamp(1.12rem, 2vw, 1.55rem); }

.capabilities { background:var(--ink); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:56px; }
.section-head > div { max-width:800px; }
.section-head h2 { margin-bottom:0; }
.section-head > p { max-width:420px; color:var(--muted); }
.capability-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.capability-card { position:relative; min-height:410px; padding:42px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; transition:.25s ease; }
.capability-card::after { content:""; position:absolute; inset:auto -30% -60% 20%; height:60%; background:radial-gradient(circle, rgba(94,200,255,.1), transparent 65%); opacity:0; transition:.3s; }
.capability-card:hover { background:#081725; }
.capability-card:hover::after { opacity:1; }
.card-index { position:absolute; right:32px; top:28px; color:#577084; font:12px ui-monospace,monospace; }
.capability-card svg { width:52px; height:52px; margin-bottom:62px; fill:none; stroke:var(--blue-2); stroke-width:1.5; }
.capability-card h3 { margin-bottom:16px; font-size:1.65rem; font-weight:550; }
.capability-card p { max-width:490px; color:var(--muted); }
.capability-card a { position:absolute; left:42px; bottom:36px; color:var(--blue-2); font-size:.82rem; text-decoration:none; }

.approach { background:var(--ink-2); }
.approach-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,110px); align-items:center; }
.approach-copy > p:not(.section-kicker) { color:var(--muted); max-width:600px; }
.process-list { padding:0; margin:48px 0 0; list-style:none; border-top:1px solid var(--line); }
.process-list li { display:grid; grid-template-columns:56px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.process-list li > span { color:var(--blue); font:12px ui-monospace,monospace; }
.process-list h3 { margin-bottom:4px; font-size:1.05rem; }
.process-list p { margin:0; color:var(--muted); font-size:.88rem; }
.diagnostic-panel { border:1px solid var(--line); background:#07131f; }
.panel-top { min-height:54px; padding:0 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#7891a5; font:11px ui-monospace,monospace; }
.live-dot { color:var(--green); display:flex; align-items:center; gap:8px; }
.live-dot::before { content:""; width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green); }
.timeline { position:relative; padding:44px 28px 35px; }
.timeline-axis { position:absolute; left:115px; top:62px; bottom:58px; width:1px; background:var(--line); }
.event { position:relative; display:grid; grid-template-columns:72px 14px 1fr; gap:18px; align-items:start; margin-bottom:38px; }
.event time { color:#6f879a; font:11px ui-monospace,monospace; }
.event > span { z-index:1; width:9px; height:9px; margin-top:5px; border-radius:50%; background:#07131f; border:2px solid #607d91; }
.event strong, .event small { display:block; }
.event strong { font-size:.92rem; }
.event small { color:#73899a; margin-top:4px; }
.event.resolved > span { border-color:var(--green); box-shadow:0 0 12px rgba(118,231,188,.5); }
.event.resolved strong { color:var(--green); }
.panel-result { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; border-top:1px solid var(--line); background:rgba(94,200,255,.035); }
.panel-result span { color:#6f879a; font:11px ui-monospace,monospace; text-transform:uppercase; }
.panel-result strong { text-align:right; font-size:.88rem; }

.work { background:var(--paper); color:var(--ink); }
.work .section-kicker { color:#14658d; }
.work-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:20px; }
.work-card { min-height:350px; padding:36px; border:1px solid #d3dde4; display:flex; flex-direction:column; }
.work-card.featured { grid-row:span 2; min-height:720px; background:var(--ink-2); color:var(--white); border:0; justify-content:flex-end; position:relative; overflow:hidden; }
.work-card.featured::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(6,16,27,.15),rgba(6,16,27,.86)), repeating-linear-gradient(0deg,transparent 0 29px,rgba(94,200,255,.08) 30px), repeating-linear-gradient(90deg,transparent 0 29px,rgba(94,200,255,.08) 30px); }
.work-card > * { position:relative; }
.work-card > p:first-child { color:#29769b; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; font-weight:700; }
.work-card.featured > p:first-child { color:var(--blue); }
.work-card h3 { font-size:clamp(1.7rem,3vw,3.1rem); line-height:1.08; font-weight:550; }
.work-card:not(.featured) h3 { font-size:1.65rem; }
.work-card > p:not(:first-child) { color:#5a6872; }
.work-card.featured > p:not(:first-child) { color:#a8bac8; max-width:620px; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:30px; }
.tag-row span { padding:6px 9px; border:1px solid currentColor; border-radius:99px; opacity:.68; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }

.about { background:#dce8ed; color:var(--ink); }
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
.about-visual { min-height:440px; border:1px solid rgba(6,16,27,.16); display:flex; flex-direction:column; justify-content:center; align-items:center; background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(6,16,27,.04) 24px), repeating-linear-gradient(90deg,transparent 0 23px,rgba(6,16,27,.04) 24px); }
.about-visual > span { font-size:clamp(6rem,14vw,11rem); line-height:.8; letter-spacing:-.1em; font-weight:300; }
.about-visual > span span { color:#16729f; font-size:.45em; vertical-align:top; }
.about-visual small { margin-top:38px; color:#4a6372; font:11px/1.55 ui-monospace,monospace; letter-spacing:.18em; }
.about .section-kicker { color:#14658d; }
.about-copy > p:not(.section-kicker) { color:#455965; font-size:1.05rem; }

.contact { background:var(--ink); }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; }
.contact-panel { padding:36px; border:1px solid var(--line); }
.contact-panel p { color:var(--muted); margin-bottom:28px; }
.contact-panel .button { width:100%; }
.contact-panel small { display:block; margin-top:20px; color:#6f879a; text-align:center; }
.site-footer { padding:34px 0; border-top:1px solid var(--line); color:#70879a; }
.footer-grid { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:30px; align-items:center; font-size:.74rem; }
.footer-grid p { margin:0; }
.footer-grid p:last-child { text-align:right; }
.footer-brand { color:var(--white); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes nodeIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes noteIn { to { opacity:.72; } }
@keyframes packet { 0%,15% { opacity:0; offset-distance:0%; } 24%,70% { opacity:1; } 84%,100% { opacity:0; offset-distance:100%; } }

@media (max-width: 900px) {
  .nav-toggle { display:block; z-index:2; }
  .primary-nav { position:absolute; left:20px; right:20px; top:72px; padding:24px; display:none; align-items:stretch; flex-direction:column; background:#091725; border:1px solid var(--line); }
  .primary-nav.open { display:flex; }
  .hero-copy { width:min(760px, 90vw); }
  .blueprint-svg { transform:translateX(22%); opacity:.48; }
  .statement-grid, .approach-grid, .about-grid, .contact-grid { grid-template-columns:1fr; }
  .capability-grid { grid-template-columns:1fr; }
  .work-grid { grid-template-columns:1fr; }
  .work-card.featured { grid-row:auto; min-height:520px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid p:last-child { text-align:left; }
}
@media (max-width: 640px) {
  .shell { width:min(calc(100% - 28px), var(--max)); }
  .hero { min-height:760px; }
  .hero-copy { width:100%; }
  h1 { font-size:clamp(3.15rem,16vw,5rem); }
  .hero-shade { background:linear-gradient(90deg,rgba(6,16,27,.98),rgba(6,16,27,.7)),linear-gradient(0deg,var(--ink),transparent 35%); }
  .blueprint-svg { transform:translate(34%, 14%) scale(1.1); opacity:.38; }
  .scroll-cue { display:none; }
  .trust-row { display:grid; }
  .section-head { align-items:start; flex-direction:column; gap:10px; }
  .capability-card { min-height:390px; padding:30px; }
  .capability-card a { left:30px; }
  .diagnostic-panel { margin-inline:-5px; }
  .panel-top { font-size:9px; }
  .timeline { padding-inline:18px; }
  .timeline-axis { left:92px; }
  .event { grid-template-columns:57px 10px 1fr; gap:12px; }
  .event time { font-size:9px; }
  .panel-result { display:block; }
  .panel-result strong { display:block; margin-top:8px; text-align:left; }
  .work-card { padding:28px; }
  .about-visual { min-height:360px; }
  .contact-panel { padding:26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}