:root{
    box-sizing:border-box;
    --navy:#1D3557; --navy-dark:#12233C;
    --paper:#EDEAE2; --paper-light:#F6F4EF;
    --ink:#1A1A1A; --line:#6B6F76; --line-soft:#C8C3B8;
    --signal:#C1442D;
    --ink-on-navy:#F1EFE8; --line-on-navy:rgba(241,239,232,.35);
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  :root:not([data-theme="light"]){ }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#17181A; --paper-light:#1E1F21; --ink:#EDEAE2; --line:#8A8D92; --line-soft:#33342F;
    }
  }
  :root[data-theme="dark"]{
    --paper:#17181A; --paper-light:#1E1F21; --ink:#EDEAE2; --line:#8A8D92; --line-soft:#33342F;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
  html,body{height:100%}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif; line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',system-ui,sans-serif; letter-spacing:-0.01em; margin:0}
  .mono{font-family:'JetBrains Mono',monospace}
  a{color:inherit}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px}
  .rule{border:none; border-top:1px solid var(--line-soft); margin:0}

  header{
    position:sticky; top:0; z-index:20;
    padding-top:env(safe-area-inset-top,0px);
    background:var(--paper); border-bottom:1px solid var(--line-soft);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{font-size:1.05rem; font-weight:700}
  .brand span{color:var(--signal)}
  nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:.92rem}
  nav a{text-decoration:none; color:var(--ink)}
  .btn{
    display:inline-block; padding:10px 18px; border:1px solid var(--ink);
    font-size:.9rem; text-decoration:none; color:var(--ink); background:transparent;
    transition:background .15s ease, color .15s ease;
  }
  .btn:hover{background:var(--ink); color:var(--paper)}
  .btn-signal{border-color:var(--signal); color:var(--signal)}
  .btn-signal:hover{background:var(--signal); color:#fff}
  @media (max-width:720px){ nav ul{display:none} }

  .hero{
    background:var(--navy); color:var(--ink-on-navy); position:relative;
    padding:72px 0 56px; overflow:hidden;
  }
  .hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
  @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} }
  .eyebrow{font-size:.78rem; color:var(--ink-on-navy); opacity:.7; margin-bottom:14px}
  .hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.08; max-width:14ch}
  .hero p{max-width:46ch; margin:20px 0 28px; opacity:.85; font-size:1.05rem}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap}
  .hero .btn{border-color:var(--ink-on-navy); color:var(--ink-on-navy)}
  .hero .btn:hover{background:var(--ink-on-navy); color:var(--navy)}

  .plate{width:100%; height:auto; display:block}
  .plate path,.plate line,.plate circle,.plate rect{
    stroke:var(--line-on-navy); fill:none; stroke-width:1.2;
  }
  .draw{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s ease forwards .3s}
  @media (prefers-reduced-motion:reduce){ .draw{animation:none; stroke-dashoffset:0} }
  @keyframes draw{ to{stroke-dashoffset:0} }
  .plate text{font-family:'JetBrains Mono',monospace; font-size:9px; fill:var(--line-on-navy)}

  section{padding:72px 0}
  .kicker{font-size:.85rem; color:var(--line); margin-bottom:10px}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:36px; flex-wrap:wrap}
  .section-head h2{font-size:clamp(1.5rem,3vw,2rem); max-width:22ch}
  .section-head p{max-width:38ch; color:var(--line); font-size:.95rem; margin:0}

  .group-label{font-size:.78rem; color:var(--signal); margin:28px 0 4px}
  .row{
    display:grid; grid-template-columns:88px 1fr; gap:24px;
    padding:20px 0; border-top:1px solid var(--line-soft);
  }
  .row:last-child{border-bottom:1px solid var(--line-soft)}
  .row .code{font-size:.85rem; color:var(--line); padding-top:2px}
  .row h3{font-size:1.1rem; font-weight:500; margin-bottom:6px}
  .row p{margin:0; color:var(--line); max-width:60ch; font-size:.95rem}
  @media (max-width:600px){ .row{grid-template-columns:1fr; gap:6px} }

  .process{background:var(--navy); color:var(--ink-on-navy)}
  .process .kicker{color:rgba(241,239,232,.65)}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:36px}
  @media (max-width:860px){ .steps{grid-template-columns:1fr 1fr} }
  @media (max-width:500px){ .steps{grid-template-columns:1fr} }
  .step{border-top:1px solid var(--line-on-navy); padding-top:14px}
  .step .num{font-size:.85rem; opacity:.6; display:block; margin-bottom:8px}
  .step h3{font-size:1.02rem; font-weight:500; margin-bottom:6px}
  .step p{margin:0; font-size:.9rem; opacity:.75}

  .work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
  @media (max-width:780px){ .work-grid{grid-template-columns:1fr} }
  .card{border:1px solid var(--line-soft); padding:18px}
  .card svg{width:100%; height:140px; display:block}
  .card svg *{stroke:var(--line); fill:none; stroke-width:1}
  .card figcaption{margin-top:12px; font-size:.85rem; color:var(--line)}
  .card figcaption strong{color:var(--ink); font-weight:500; display:block; font-size:.95rem; margin-bottom:2px}

  footer{background:var(--ink); color:var(--paper-light); padding:64px 0 28px}
  .contact h2{font-size:clamp(1.6rem,3.4vw,2.3rem); max-width:16ch}
  .contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; margin-top:28px}
  @media (max-width:760px){ .contact-grid{grid-template-columns:1fr} }
  .contact p{color:#B9B6AC; max-width:46ch}
  .meta{list-style:none; margin:0; padding:0; font-size:.92rem}
  .meta li{padding:10px 0; border-top:1px solid #3A3A38}
  .meta li:last-child{border-bottom:1px solid #3A3A38}
  .meta a{text-decoration:none}
  .fine{display:flex; justify-content:space-between; margin-top:48px; font-size:.78rem; color:#7C7A73; flex-wrap:wrap; gap:8px}