@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo.woff2) format("woff2-variations"),url(/fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4.woff2) format("woff2-variations"),url(/fonts/source-serif-4.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format("woff2-variations"),url(/fonts/jetbrains-mono.woff2) format("woff2")}
html{color-scheme:light}
  body{margin:0}
  img{max-width:100%}
  [hidden]{display:none!important}

  :root{
    --bg:#f3f4f7; --surface:#ffffff; --surface-2:#e9ecf2; --ink:#0f1c3d; --ink-2:#2c3958; --muted:#5e6983; --line:#d6dae4; --line-2:#bcc3d3;
    --water:#01265A; --water-ink:#001a40; --water-soft:#dfe5f1; --water-deep:#2a4f9a;
    --heat:#E61B22; --heat-soft:#fbe0e1;
    --coal:#0b1430; --strata-a:#e2e5ec; --strata-b:#d5d9e3; --strata-c:#c8cdd9; --seam:#3a4460;
    --shadow:0 1px 2px rgba(15,28,61,.06),0 8px 24px -12px rgba(15,28,61,.18);
    --show-light:block; --show-dark:none;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --bg:#0c1326; --surface:#131c33; --surface-2:#182340; --ink:#e9ecf4; --ink-2:#c7cedd; --muted:#97a2bb; --line:#263353; --line-2:#35446a;
      --water:#7fa6ea; --water-ink:#a9c4f2; --water-soft:#14203a; --water-deep:#5c86d6;
      --heat:#f0464c; --heat-soft:#3a1519;
      --coal:#070d1c; --strata-a:#141d38; --strata-b:#182344; --strata-c:#1d2a50; --seam:#040914;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
      --show-light:none; --show-dark:block;
    }
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
      --bg:#0c1326; --surface:#131c33; --surface-2:#182340; --ink:#e9ecf4; --ink-2:#c7cedd; --muted:#97a2bb; --line:#263353; --line-2:#35446a;
      --water:#7fa6ea; --water-ink:#a9c4f2; --water-soft:#14203a; --water-deep:#5c86d6;
      --heat:#f0464c; --heat-soft:#3a1519;
      --coal:#070d1c; --strata-a:#141d38; --strata-b:#182344; --strata-c:#1d2a50; --seam:#040914;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
      --show-light:none; --show-dark:block;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; margin:0; text-wrap:balance; color:var(--ink)}
  h1{font-size:clamp(2rem,4.6vw,3.6rem); font-weight:700; line-height:1.05; letter-spacing:-.015em; font-stretch:105%}
  h2{font-size:clamp(1.6rem,3vw,2.35rem); font-weight:700; line-height:1.12; letter-spacing:-.01em; font-stretch:105%}
  h3{font-size:1.2rem; font-weight:650; line-height:1.3}
  p{margin:0}
  a{color:inherit}
  .eyebrow{font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
  .lede{font-size:1.2rem; line-height:1.55; color:var(--ink-2); max-width:38rem}
  .wrap{width:min(1120px, 100% - 40px); margin-inline:auto}
  @media (max-width:520px){.wrap{width:calc(100% - 32px)}}
  section{padding-block:clamp(56px,8vw,104px)}
  .stack{display:grid; gap:20px}
  .prose p{max-width:36rem}

  /* header */
  header{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
    background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .bar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
  .logo{height:54px; width:auto; display:block} .logo-light{display:var(--show-light)} .logo-dark{display:var(--show-dark)}
  .wordmark{font-family:"Archivo", Arial, sans-serif; font-weight:800; font-stretch:125%; letter-spacing:.06em; font-size:1.15rem; color:var(--ink)}
  nav ul{list-style:none; margin:0; padding:0; display:flex; gap:26px}
  nav a{font-family:"Archivo", Arial, sans-serif; font-size:.92rem; font-weight:500; text-decoration:none; color:var(--ink-2)}
  nav a:hover{color:var(--water)}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:6px; text-decoration:none;
    font-family:"Archivo", Arial, sans-serif; font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{background:var(--water); color:#fff; border-color:var(--water)}
  .btn-primary:hover{background:var(--water-ink); border-color:var(--water-ink)}
  :root[data-theme="dark"] .btn-primary, :root:not([data-theme="light"]) .btn-primary{color:#0c1326}
  @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
  :root[data-theme="light"] .btn-primary{color:#fff}
  .btn-ghost{border-color:var(--line-2); color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink)}
  .btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--heat); outline-offset:3px}
  

  /* hero */
  .hero{padding-block:clamp(48px,7vw,96px) 0}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr; gap:36px}}
  .hero .stack{gap:24px}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px}
  .hero-art{width:100%; max-width:100%; display:block}
  .hero-foot{margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--line); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px 40px; color:var(--muted); font-family:"Archivo", Arial, sans-serif; font-size:.9rem}
  .hero-foot b{color:var(--ink); font-weight:600}

  /* pillars */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
  .pillar{background:var(--surface); padding:28px 26px; display:grid; gap:12px; align-content:start}
  .pillar .eyebrow{color:var(--water)}
  .pillar.heat .eyebrow{color:var(--heat)}
  .pillar p{color:var(--ink-2); font-size:1rem}
  @media (max-width:760px){.pillars{grid-template-columns:1fr}}

  /* two column */
  .split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:start}
  @media (max-width:860px){.split{grid-template-columns:1fr}}
  .facts{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
  .facts li{padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start}
  .facts li span.k{font-family:"JetBrains Mono", monospace; font-size:.8rem; color:var(--water); padding-top:.35em}
  .facts li p{color:var(--ink-2)}
  .facts li strong{display:block; font-family:"Archivo", Arial, sans-serif; font-weight:650; color:var(--ink); margin-bottom:4px}

  /* diagram */
  .dark-band{background:var(--coal); color:#eef1f8; --ink:#eef1f8; --ink-2:#c7cedd; --muted:#97a2bb; --line:#263353; --water:#7fa6ea; --heat:#f0464c}
  .dark-band h2, .dark-band h3{color:#eef1f8}
  .diagram-wrap{overflow-x:auto; margin-top:36px; border:1px solid var(--line); border-radius:8px; background:#070d1c}
  .diagram{display:block; width:100%; min-width:720px; height:auto}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px}
  @media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.steps{grid-template-columns:1fr}}
  .step{display:grid; gap:8px; padding-top:14px; border-top:2px solid var(--water)}
  .step.heat{border-top-color:var(--heat)}
  .step .num{font-family:"JetBrains Mono", monospace; font-size:.78rem; color:var(--muted)}
  .step h3{font-size:1.05rem}
  .step p{color:var(--ink-2); font-size:.98rem}

  /* services */
  .services{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  @media (max-width:860px){.services{grid-template-columns:1fr}}
  .service{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:32px; display:grid; gap:18px; align-content:start; box-shadow:var(--shadow)}
  .service ul{margin:0; padding-left:0; list-style:none; display:grid; gap:10px}
  .service li{padding-left:22px; position:relative; color:var(--ink-2); font-size:1rem}
  .service li::before{content:""; position:absolute; left:0; top:.62em; width:10px; height:2px; background:var(--water)}
  .service.digital li::before{background:var(--heat)}
  .service .tag{font-family:"JetBrains Mono", monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--water)}
  .service.digital .tag{color:var(--heat)}

  /* partners */
  .who{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
  @media (max-width:860px){.who{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.who{grid-template-columns:1fr}}
  .who div{background:var(--surface); padding:24px 22px; display:grid; gap:8px}
  .who h3{font-size:1.02rem}
  .who p{font-size:.95rem; color:var(--ink-2)}

  /* founders */
  .founders{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px}
  @media (max-width:760px){.founders{grid-template-columns:1fr}}
  .founder{display:grid; grid-template-columns:72px 1fr; gap:20px; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:8px}
  .avatar{width:72px; height:72px; border-radius:50%; background:var(--water-soft); color:var(--water-ink); display:grid; place-items:center; font-family:"Archivo", Arial, sans-serif; font-weight:700; font-stretch:110%; font-size:1.25rem; letter-spacing:.04em; border:1px solid var(--line)}
  :root[data-theme="dark"] .avatar{background:var(--surface-2)}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .avatar{background:var(--surface-2)}}
  .founder .role{font-family:"Archivo", Arial, sans-serif; font-size:.9rem; color:var(--muted); margin-top:2px}
  .founder p.bio{margin-top:12px; color:var(--ink-2); font-size:1rem}
  .founder .stack{gap:0}

  /* contact */
  .contact-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:clamp(28px,4vw,44px); display:grid; grid-template-columns:1.1fr .9fr; gap:36px; box-shadow:var(--shadow)}
  @media (max-width:860px){.contact-card{grid-template-columns:1fr}}
  .kv{display:grid; gap:14px; border-top:1px solid var(--line); padding-top:18px}
  .kv div{display:grid; gap:3px}
  .kv .eyebrow{font-size:.68rem}
  .kv .v{font-family:"Archivo", Arial, sans-serif; font-weight:500; font-size:1.02rem; user-select:all}
  .copy{display:inline-flex; align-items:center; gap:10px}
  .copy button{font:inherit; font-family:"JetBrains Mono", monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:4px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer}
  .copy button:hover{color:var(--ink); border-color:var(--ink)}
  form{display:grid; gap:14px}
  .field{display:grid; gap:6px}
  label{font-family:"Archivo", Arial, sans-serif; font-size:.85rem; font-weight:600; color:var(--ink-2)}
  input,textarea,select{font:inherit; font-size:1rem; padding:11px 12px; border:1px solid var(--line-2); border-radius:6px; background:var(--bg); color:var(--ink); width:100%}
  input:focus,textarea:focus,select:focus{outline:2px solid var(--water); outline-offset:1px; border-color:var(--water)}
  textarea{min-height:120px; resize:vertical}
  .form-note{font-size:.9rem; color:var(--muted)}
  .toast{font-family:"Archivo", Arial, sans-serif; font-size:.92rem; color:var(--water); padding:10px 12px; border:1px solid var(--water); border-radius:6px}


  /* ---- visual enrichment ---- */
  body{
    background-color:var(--bg);
    background-image:
      radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--water) 9%, transparent), transparent 60%),
      radial-gradient(900px 500px at -10% 40%, color-mix(in srgb, var(--heat) 6%, transparent), transparent 60%);
    background-attachment:fixed;
  }
  .hero{position:relative; overflow:hidden; background:var(--coal); color:#eef1f8; --ink:#eef1f8; --ink-2:#c7cedd; --muted:#97a2bb; --line:#263353; --line-2:#35446a; --surface:#0f1830; --strata-a:#111a35; --strata-b:#162142; --strata-c:#1b294f; --seam:#040914; --water:#7fa6ea; --water-deep:#5c86d6; --heat:#f0464c; padding-block:clamp(56px,8vw,112px) 0}
  .hero h1{color:#fff} .hero h1 .accent{color:#ff7a7e}
  .hero .eyebrow{color:#a9c4f2}
  .hero .btn-primary{background:var(--heat); border-color:var(--heat); color:#fff}
  .hero .btn-primary:hover{background:#c4151b; border-color:#c4151b}
  .hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.35)}
  .hero .btn-ghost:hover{border-color:#fff}
  .hero-bg{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:.9}
  .hero .wrap{position:relative}
  .hero-foot{border-top-color:rgba(255,255,255,.14); color:#c7cedd; padding-bottom:96px}
  .hero-foot b{color:#fff}
  .hero-art{filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); border-radius:10px; overflow:hidden; background:linear-gradient(180deg, transparent 0 34%, rgba(255,255,255,.02) 34%)}
  .hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:70px; background:var(--bg); clip-path:polygon(0 100%, 100% 100%, 100% 55%, 66% 100%, 33% 45%, 0 90%); opacity:1}
  /* strata texture for tinted sections */
  .tinted{position:relative; background:var(--surface-2); overflow:hidden}
  .tinted::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='140' viewBox='0 0 600 140'><path d='M0 30 C100 20 200 45 300 32 S500 18 600 30' fill='none' stroke='%2301265A' stroke-opacity='.10' stroke-width='1.2'/><path d='M0 80 C100 70 200 95 300 82 S500 68 600 80' fill='none' stroke='%2301265A' stroke-opacity='.08' stroke-width='1.2'/><path d='M0 125 C100 115 200 140 300 127 S500 113 600 125' fill='none' stroke='%23E61B22' stroke-opacity='.10' stroke-width='1.2'/></svg>");
    background-size:600px 140px}
  :root[data-theme="dark"] .tinted::before{filter:invert(1) hue-rotate(180deg); opacity:.35}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tinted::before{filter:invert(1) hue-rotate(180deg); opacity:.35}}
  .tinted > .wrap{position:relative}
  .motif{position:absolute; right:-40px; bottom:-30px; width:min(520px,60vw); height:auto; opacity:.08; pointer-events:none; color:var(--water)}
  /* cards */
  .pillar, .who div, .service, .founder, .contact-card{transition:transform .25s ease, box-shadow .25s ease}
  .pillar:hover, .who div:hover, .service:hover, .founder:hover{transform:translateY(-3px); box-shadow:0 14px 34px -18px rgba(0,32,88,.35)}
  .pillar{position:relative}
  .pillar::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--water)}
  .pillar.heat::before{background:var(--heat)}
  .service{background:linear-gradient(180deg, color-mix(in srgb, var(--water) 6%, var(--surface)) 0%, var(--surface) 30%)}
  .service.digital{background:linear-gradient(180deg, color-mix(in srgb, var(--heat) 6%, var(--surface)) 0%, var(--surface) 30%)}
  .avatar{background:linear-gradient(135deg, var(--water) 0%, var(--water-deep) 100%); color:#fff; border:none}
  .founder .avatar{box-shadow:0 8px 20px -10px rgba(0,32,88,.6)}
  .steps .step h3{color:#fff}
  h2 .accent{color:var(--heat)}
  .section-rule{display:flex; align-items:center; gap:14px}
  .section-rule::after{content:""; height:1px; flex:1; background:linear-gradient(90deg, var(--line-2), transparent)}
  .cta-band{background:linear-gradient(120deg, var(--water) 0%, #0b1430 100%); color:#fff; border-radius:12px; padding:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; position:relative; overflow:hidden}
  .cta-band h3{color:#fff; font-size:clamp(1.3rem,2.4vw,1.8rem); max-width:30rem}
  .cta-band p{color:#c7cedd; max-width:34rem}
  .cta-band .btn-primary{background:var(--heat); border-color:var(--heat); color:#fff}
  .cta-band svg{position:absolute; right:-20px; top:-40px; width:260px; opacity:.12}

  /* mobile nav */
  .menu-btn{display:none; background:none; border:1px solid var(--line-2); border-radius:6px; padding:8px 10px; color:var(--ink); cursor:pointer; font-family:"Archivo", Arial, sans-serif; font-weight:600; font-size:.9rem; gap:8px; align-items:center}
  .menu-btn svg{width:18px; height:18px}
  @media (max-width:760px){
    .menu-btn{display:inline-flex}
    .bar .btn-primary{display:none}
    nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
    nav.open{display:block}
    nav ul{flex-direction:column; gap:0; padding:8px 20px 12px}
    nav li{border-top:1px solid var(--line)}
    nav li:first-child{border-top:none}
    nav a{display:block; padding:14px 0; font-size:1.05rem}
  }

  footer{border-top:1px solid var(--line); padding-block:36px; color:var(--muted); font-size:.9rem; font-family:"Archivo", Arial, sans-serif}
  .foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px; align-items:center}
  .foot .legal{max-width:52rem; line-height:1.5}

  /* system diagram */
  .diagram .lbl{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px; fill:#c7cedd}
  .diagram .lbl.b{fill:#eef1f8; font-weight:500}
  .diagram .lbl.w{fill:#a9c4f2}
  .diagram .lbl.h{fill:#f0464c}
  .diagram .ttl{font-family:"Archivo", Arial, sans-serif; font-size:13px; font-weight:600; fill:#eef1f8}
  .diagram .pin circle{fill:#eef1f8}
  .diagram .pin text{font-family:"JetBrains Mono", monospace; font-size:12px; font-weight:500; fill:#070d1c; text-anchor:middle}