:root{
    --ink:        #142433;
    --ink-soft:   #405060;
    --paper:      #F1F3F1;
    --paper-2:    #E7EAE6;
    --line:       #C9D2CC;
    --grid-line:  rgba(20,36,51,0.07);
    --brass:      #1930b1;
    --brass-soft: #a59ee7;
    --teal:       #2E6B6E;
    --white:      #FBFBF9;
    --radius:     2px;

    --f-display: 'Space Grotesk', sans-serif;
    --f-body:    'Inter', sans-serif;
    --f-mono:    'JetBrains Mono', monospace;

    --maxw: 1180px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--f-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  section{ position:relative; }

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 28px;
  }

  .eyebrow{
    font-family:var(--f-mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass);
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--brass);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--f-display);
    color:var(--ink);
    margin:0;
    letter-spacing:-0.01em;
  }

  .btn{
    font-family:var(--f-mono);
    font-size:13px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:var(--radius);
    border:1px solid var(--ink);
    transition:background .2s ease, color .2s ease, transform .15s ease;
    white-space:nowrap;
  }
  .btn-solid{ background:var(--ink); color:var(--white); }
  .btn-solid:hover{ background:var(--brass); border-color:var(--brass); transform:translateY(-1px); }
  .btn-ghost{ background:#1930b1; color:white }
  .btn-ghost:hover{ background:var(--ink); color:var(--white); transform:translateY(-1px); }
  .btn svg{ width:14px; height:14px; }

  .grid-bg{
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 42px 42px;
  }

  header{
    position:sticky; top:0; z-index:50;
    background:rgba(241,243,241,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    background: black;
  }
  .nav{
    background: black;
    max-width:var(--maxw);
    margin:0 auto;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .logo{
    font-family:var(--f-display);
    font-weight:700;
    font-size:19px;
    letter-spacing:0.02em;
    text-decoration:none;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:9px;
  }
  .logo .dot{ width:8px; height:8px; background:var(--brass); border-radius:1px; display:inline-block; }
  .nav-links{
    display:flex;
    gap:34px;
    list-style:none;
    margin:0; padding:0;
    font-family:var(--f-mono);
    font-size:13px;
    letter-spacing:0.03em;
  }
  .nav-links a{
    text-decoration:none;
    color: white;
    position:relative;
    padding-bottom:3px;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible{ color:var(--white); }
  .nav-cta{ display:flex; align-items:center; gap:22px; }
  .lang-switch{ display:flex; gap:8px; border:1px solid rgba(255,255,255,0.22); border-radius:999px; padding:4px; }
  .lang-btn{ border:none; background:transparent; color:var(--white); padding:6px 10px; cursor:pointer; border-radius:999px; font-family:var(--f-mono); font-size:12px; }
  .lang-btn.active{ background:var(--white); color:var(--ink); }
  .lang-btn:hover{ background:rgba(255,255,255,0.16); }
  .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
  .nav-toggle span{ display:block; width:22px; height:2px; background:var(--white); margin:5px 0; }

  @media (max-width:860px){
    .nav-links{
      position:fixed; inset:0 0 auto 0;
      background:var(--paper);
      flex-direction:column;
      gap:0;
      border-bottom:1px solid var(--line);
      transform:translateY(-110%);
      transition:transform .25s ease;
      padding:6px 28px 18px;
    }
    .nav-links.open{ transform:translateY(0); }
    .nav-links li{ border-top:1px solid var(--line); }
    .nav-links a{ display:block; padding:14px 0;color:black; }
    .nav-toggle{ display:block; }
    .nav-cta .btn-ghost{ display:none; }
  }

  .hero{
    padding:96px 0 80px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:40px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.4vw, 3.4rem);
    line-height:1.08;
    margin-bottom:22px;
  }
  .hero h1 em{ font-style:normal; color:var(--brass); }
  .hero p.lead{
    font-size:17px;
    color:var(--ink-soft);
    max-width:46ch;
    margin-bottom:34px;
  }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px; }

  .hero-stats{
    display:flex;
    gap:38px;
    border-top:1px solid var(--line);
    padding-top:22px;
  }
  .stat b{
    display:block;
    font-family:var(--f-display);
    font-size:26px;
    color:var(--ink);
  }
  .stat span{
    font-family:var(--f-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }

  .diagram-holder{
    position:relative;
    aspect-ratio:6/5;
  }
  .diagram-holder svg{ width:100%; height:100%; overflow:visible; }
  .node-label{
    font-family:var(--f-mono);
    font-size:11.5px;
    fill:var(--ink);
    letter-spacing:0.02em;
  }
  .node-label.hub{ fill:var(--white); font-weight:600; }
  .trace{
    fill:none;
    stroke:var(--ink);
    stroke-width:1.4;
    stroke-dasharray:6 5;
    opacity:0.55;
  }
  .trace-draw{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 1.6s ease forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .pulse{
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ opacity:0.35; }
    50%{ opacity:1; }
  }

  .sec-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }
  .sec-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); }
  .sec-head p{ color:var(--ink-soft); max-width:44ch; margin:10px 0 0; }

  section.pad{ padding:88px 0; }
  section.pad + section.pad{ border-top:1px solid var(--line); }

  /* ---------- About ---------- */
  .about-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
  .about-cols p{ color:var(--ink-soft); margin:0 0 16px; }
  .about-cols p:last-child{ margin-bottom:0; }
  .mini-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
  .mini-list li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:14.5px; color:var(--ink-soft);
  }
  .mini-list li::before{
    content:"—";
    color:var(--brass);
    font-family:var(--f-mono);
    flex-shrink:0;
  }

  /* ---------- Services ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--paper);
    padding:34px 28px;
    transition:background .2s ease;
  }
  .service-card:hover{ background:var(--white); }
  .service-tag{
    font-family:var(--f-mono);
    font-size:11.5px;
    color:var(--brass);
    letter-spacing:0.06em;
    margin-bottom:16px;
    display:block;
  }
  .service-card h3{ font-size:19px; margin-bottom:10px; }
  .service-card p{ color:var(--ink-soft); font-size:14.5px; margin:0; }

  @media (max-width:860px){
    .services-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Process ---------- */
  .process{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:0;
    position:relative;
    margin-top:20px;
  }
  .process::before{
    content:"";
    position:absolute;
    top:17px; left:0; right:0;
    height:1px;
    background:var(--line);
  }
  .p-step{ position:relative; padding-right:16px; }
  .p-step .num{
    width:34px; height:34px;
    border:1px solid var(--ink);
    background:var(--paper);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-mono);
    font-size:13px;
    position:relative; z-index:1;
    margin-bottom:20px;
  }
  .p-step h3{ font-size:15.5px; margin-bottom:8px; }
  .p-step p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

  @media (max-width:920px){
    .process{ grid-template-columns:1fr; gap:28px; }
    .process::before{ left:17px; top:0; bottom:0; width:1px; height:auto; right:auto; }
    .p-step{ padding-left:52px; padding-right:0; }
    .p-step .num{ position:absolute; left:0; top:0; margin-bottom:0; }
  }

  /* ---------- Portfolio ---------- */
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px;
  }
  .p-card{
    border:1px solid var(--line);
    background:var(--white);
  }
  .p-thumb{
    aspect-ratio:16/10;
    background:
      repeating-linear-gradient(45deg, var(--paper-2) 0 2px, transparent 2px 14px);
    border-bottom:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:20px;
  }
  .p-thumb span{
    font-family:var(--f-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    text-transform:uppercase;
    border:1px dashed var(--line);
    padding:10px 14px;
    background:var(--paper);
  }
  .p-body{ padding:24px 26px 26px; }
  .p-tag{
    font-family:var(--f-mono);
    font-size:11px;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-bottom:10px;
    display:block;
  }
  .p-body h3{ font-size:18px; margin-bottom:6px; }
  .p-body p{ font-size:14px; color:var(--ink-soft); margin:0 0 14px; }
  .p-meta{
    display:flex; gap:16px; flex-wrap:wrap;
    font-family:var(--f-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    border-top:1px solid var(--line);
    padding-top:14px;
  }

  @media (max-width:760px){
    .portfolio-grid{ grid-template-columns:1fr; }
  }

  /* ---------- CTA ---------- */
  .cta{
    background:var(--ink);
    color:var(--white);
    padding:90px 0;
  }
  .cta .eyebrow{ color:var(--brass-soft); }
  .cta .eyebrow::before{ background:var(--brass-soft); }
  .cta h2{ color:var(--white); font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:16ch; margin-bottom:20px; }
  .cta-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    flex-wrap:wrap;
  }
  .cta p{ color:#B7C2CC; max-width:42ch; margin:0; }
  .cta .btn-solid{ background:var(--brass); border-color:var(--brass); color:white; }
  .cta .btn-solid:hover{ background:var(--white); border-color:var(--white); }

  /* ---------- Footer ---------- */
  footer{ padding:48px 0 34px; }
  .foot-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    font-family:var(--f-mono);
    font-size:12.5px;
    color:var(--ink-soft);
    border-top:1px solid var(--line);
    padding-top:24px;
  }
  .foot-links{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
  .foot-links a{ text-decoration:none; color:var(--ink-soft); }
  .foot-links a:hover{ color:var(--ink); }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (max-width:860px){
    .hero-grid{ grid-template-columns:1fr; }
    .diagram-holder{ order:-1; max-width:420px; margin:0 auto 20px; }
    .about-cols{ grid-template-columns:1fr; gap:34px; }
  }

  /* ---------- Page header (sub-pages) ---------- */
  .page-head{
    padding:64px 0 56px;
    border-bottom:1px solid var(--line);
  }
  .breadcrumb{
    font-family:var(--f-mono);
    font-size:12px;
    color:var(--ink-soft);
    letter-spacing:0.03em;
    margin-bottom:18px;
  }
  .breadcrumb a{ text-decoration:none; color:var(--ink-soft); }
  .breadcrumb a:hover{ color:var(--brass); }
  .page-head h1{ font-size:clamp(2rem, 4vw, 2.9rem); margin-bottom:14px; }
  .page-head p{ color:var(--ink-soft); max-width:56ch; margin:0; }

  /* ---------- Portfolio filter (optional tags) ---------- */
  .filter-row{
    display:flex; gap:10px; flex-wrap:wrap;
    margin:28px 0 44px;
  }
  .filter-chip{
    font-family:var(--f-mono);
    font-size:12px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:9px 16px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink-soft);
    cursor:pointer;
    transition:all .18s ease;
  }
  .filter-chip:hover{ border-color:var(--ink); color:var(--ink); }
  .filter-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--white); }

  .result-count{
    font-family:var(--f-mono);
    font-size:12.5px;
    color:var(--ink-soft);
    margin-bottom:22px;
  }
  .result-count b{ color:var(--ink); }

  /* ---------- Pagination ---------- */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:56px;
    font-family:var(--f-mono);
    font-size:13px;
  }
  .page-btn{
    min-width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink-soft);
    cursor:pointer;
    text-decoration:none;
    padding:0 10px;
    transition:all .15s ease;
  }
  .page-btn:hover:not(:disabled):not(.active){ border-color:var(--ink); color:var(--ink); }
  .page-btn.active{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--white);
  }
  .page-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .page-btn.nav-arrow{ gap:6px; padding:0 14px; }
  .page-btn.nav-arrow svg{ width:13px; height:13px; }
  .page-ellipsis{
    color:var(--ink-soft);
    padding:0 4px;
  }

  .pagination-status{
    text-align:center;
    font-family:var(--f-mono);
    font-size:11.5px;
    color:var(--ink-soft);
    margin-top:14px;
    letter-spacing:0.03em;
  }

  /* ---------- Portfolio teaser (home page) ---------- */
  .teaser-foot{
    margin-top:38px;
    display:flex;
    justify-content:center;
  }

  .portfolio-grid.teaser{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:900px){ .portfolio-grid.teaser{ grid-template-columns:1fr; } }