:root{
    --bg:#0D1117;
    --panel:#161B22;
    --olive:#8FAD86;
    --olive-dim:#5E7355;
    --text:#E6EDF3;
    --mute:#8B949E;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter Tight',sans-serif;
    min-height:100vh;
    padding:7vh 6vw 14vh;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  /* faint olive node-graph atmosphere, no distraction */
  body::before{
    content:"";
    position:fixed;inset:0;
    background:
      radial-gradient(circle at 78% 18%, rgba(143,173,134,.10), transparent 42%),
      radial-gradient(circle at 12% 88%, rgba(143,173,134,.06), transparent 45%);
    pointer-events:none;
    z-index:0;
  }
  main{
    max-width:680px;
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:1;
    animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .mark{
    font-size:13px;
    letter-spacing:.32em;
    color:var(--olive);
    text-transform:uppercase;
    margin-bottom:1.6rem;
  }
  h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(2.4rem,7vw,4rem);
    line-height:1.04;
    letter-spacing:-.02em;
  }
  .sub{
    font-family:'Fraunces',serif;
    font-size:clamp(1.25rem,3.4vw,1.9rem);
    color:var(--olive);
    margin-top:.6rem;
    font-weight:400;
  }
  .rule{
    width:54px;height:2px;
    background:var(--olive-dim);
    margin:2.6rem 0;
  }
  .rule.section{
    margin:4.4rem 0 3.2rem;
  }
  p{color:var(--text);font-size:1.06rem;max-width:54ch}
  p + p{margin-top:1.1rem}
  .lede{font-size:1.18rem}
  .proof{
    margin-top:2.2rem;
    padding-left:1.2rem;
    border-left:2px solid var(--olive-dim);
  }
  .proof .k{color:var(--olive);font-weight:600}
  .flow{
    font-family:'Fraunces',serif;
    font-size:1.15rem;
    margin-top:.4rem;
    color:var(--text);
  }
  .status{
    margin-top:2.4rem;
    color:var(--mute);
    font-size:1rem;
  }
  .status b{color:var(--text);font-weight:600}

  /* Section intro (chapter-style heading above a group of sections) */
  .section-intro{
    margin-bottom:3.6rem;
  }
  .section-intro .big-title{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(2.2rem,6.5vw,3.6rem);
    line-height:1.04;
    letter-spacing:-.02em;
  }
  .section-intro .sub-title{
    font-family:'Fraunces',serif;
    font-size:clamp(1.15rem,3vw,1.6rem);
    color:var(--olive);
    margin-top:.6rem;
    font-weight:400;
    max-width:54ch;
  }

  /* YouTube video embed */
  .video{
    margin-top:2.4rem;
    width:100%;
    aspect-ratio:16/9;
    background:var(--panel);
    border:1px solid #2A313B;
    border-radius:2px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mute);
    font-size:.9rem;
    letter-spacing:.04em;
    text-align:center;
    padding:1rem;
  }
  .video iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
  }

  /* Capability sections */
  .capability .num{
    font-size:13px;
    letter-spacing:.32em;
    color:var(--olive);
    text-transform:uppercase;
    margin-bottom:.9rem;
  }
  .capability h2{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(1.9rem,5.4vw,2.7rem);
    letter-spacing:-.018em;
    line-height:1.08;
  }
  .capability .desc{
    margin-top:1.3rem;
    font-size:1.06rem;
    color:var(--text);
    max-width:54ch;
  }
  .capability .desc + .desc{
    margin-top:1.1rem;
  }
  .capability .tagline{
    margin-top:1.1rem;
    font-family:'Fraunces',serif;
    font-size:clamp(1.2rem,2.8vw,1.5rem);
    color:var(--olive);
    font-weight:400;
    line-height:1.35;
    max-width:54ch;
  }
  .partner-prompt{
    margin-top:2rem;
    padding-left:1.2rem;
    border-left:2px solid var(--olive-dim);
    font-family:'Fraunces',serif;
    font-size:1.08rem;
    color:var(--text);
    line-height:1.45;
    max-width:54ch;
  }

  /* Capability image (reusable placeholder + image holder) */
  .capability-img{
    margin-top:1.8rem;
    width:100%;
  }
  .capability-img.placeholder{
    aspect-ratio:16/9;
    background:var(--panel);
    border:1px solid #2A313B;
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mute);
    font-size:.9rem;
    letter-spacing:.04em;
    text-align:center;
    padding:1rem;
  }
  .capability-img img,
  .capability-img video{
    width:100%;
    height:auto;
    display:block;
    border-radius:2px;
  }
  .capability-img-caption{
    margin-top:.7rem;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:.9rem;
    color:var(--mute);
    text-align:center;
    line-height:1.45;
  }

  /* Card grid */
  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:.9rem;
    margin-top:1.8rem;
  }
  .card{
    background:var(--panel);
    padding:1.15rem 1.3rem 1.25rem;
    border-radius:2px;
    border-left:2px solid var(--olive-dim);
    cursor:pointer;
    transition:border-color .25s ease,transform .25s ease,background .25s ease;
  }
  .card.active{
    border-left-color:var(--olive);
    background:#1A2029;
    transform:translateY(-1px);
    outline:none;
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover,
    .card:focus{
      border-left-color:var(--olive);
      background:#1A2029;
      transform:translateY(-1px);
      outline:none;
    }
  }
  .card .title{
    color:var(--olive);
    font-weight:600;
    font-size:1.02rem;
    margin-bottom:.5rem;
    letter-spacing:-.005em;
  }
  .card .body{
    color:var(--mute);
    font-size:.93rem;
    line-height:1.55;
  }
  .card .detail{
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;
    padding-top:0;
    border-top:1px solid transparent;
    color:var(--text);
    font-size:.9rem;
    line-height:1.55;
    transition:max-height .35s ease, opacity .25s ease, margin-top .25s ease, padding-top .25s ease, border-top-color .25s ease;
  }
  .card.active .detail{
    max-height:600px;
    opacity:1;
    margin-top:.9rem;
    padding-top:.9rem;
    border-top-color:#2A313B;
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover .detail,
    .card:focus .detail{
      max-height:600px;
      opacity:1;
      margin-top:.9rem;
      padding-top:.9rem;
      border-top-color:#2A313B;
    }
  }

  /* Contact CTA + form (existing) */
  .cta{
    display:inline-block;
    margin-top:2.6rem;
    font-size:1rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--olive);
    text-decoration:none;
    padding:.85rem 1.8rem;
    border-radius:2px;
    transition:background .2s ease,transform .2s ease;
  }
  .cta:hover{background:#A6C29C;transform:translateY(-1px)}
  .contact-note{
    margin-top:1rem;
    color:var(--mute);
    font-size:.95rem;
  }
  .contact-form{
    margin-top:2rem;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .5s ease,opacity .4s ease,margin-top .4s ease;
  }
  .contact-form.open{
    max-height:520px;
    opacity:1;
  }
  .contact-form input,
  .contact-form textarea{
    display:block;
    width:100%;
    max-width:420px;
    background:var(--panel);
    border:1px solid #2A313B;
    color:var(--text);
    font-family:'Inter Tight',sans-serif;
    font-size:1rem;
    padding:.8rem 1rem;
    margin-bottom:.9rem;
    border-radius:2px;
    transition:border-color .2s ease;
  }
  .contact-form input:focus,
  .contact-form textarea:focus{
    outline:none;
    border-color:var(--olive);
  }
  .contact-form textarea{resize:vertical}
  .contact-form button{
    font-family:'Inter Tight',sans-serif;
    font-size:1rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--olive);
    border:none;
    cursor:pointer;
    padding:.85rem 1.8rem;
    border-radius:2px;
    transition:background .2s ease,transform .2s ease;
  }
  .contact-form button:hover{background:#A6C29C;transform:translateY(-1px)}
  .form-status{
    margin-top:1rem;
    font-size:.95rem;
    color:var(--olive);
    min-height:1.2em;
  }
  footer{
    margin-top:3.4rem;
    font-size:.82rem;
    color:var(--mute);
    letter-spacing:.04em;
  }

  /* ============================================================
     ADDED: Capability overview cards (homepage) + capability pages
     ============================================================ */

  /* --- Homepage: 4 capability overview cards --- */
  .cap-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
  }
  @media (max-width:560px){
    .cap-grid{grid-template-columns:1fr}
  }
  .cap-card{
    display:flex;
    flex-direction:column;
    background:var(--panel);
    border:1px solid #2A313B;
    border-left:2px solid var(--olive-dim);
    border-radius:2px;
    padding:1.6rem 1.55rem 1.4rem;
    text-decoration:none;
    color:inherit;
    position:relative;
    transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .cap-card:hover,
  .cap-card:focus-visible{
    border-color:#3A434F;
    border-left-color:var(--olive);
    background:#1A2029;
    transform:translateY(-2px);
    outline:none;
  }
  .cap-icon{
    color:var(--olive);
    width:44px;height:44px;
    margin-bottom:1.15rem;
  }
  .cap-icon svg{width:100%;height:100%;display:block}
  .cap-card .num{
    font-size:12px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--olive);
    margin-bottom:.5rem;
  }
  .cap-card .cap-title{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.42rem;
    line-height:1.1;
    letter-spacing:-.015em;
    color:var(--text);
  }
  .cap-card .cap-sentence{
    margin-top:.7rem;
    color:var(--mute);
    font-size:.96rem;
    line-height:1.55;
    flex:1 1 auto;
  }
  .cap-card .go{
    margin-top:1.2rem;
    font-size:.8rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--olive);
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-weight:500;
  }
  .cap-card .go .arrow{transition:transform .25s ease}
  .cap-card:hover .go .arrow,
  .cap-card:focus-visible .go .arrow{transform:translateX(5px)}

  /* --- Top bar (mark + back link) on capability pages --- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:2.4rem;
  }
  .topbar .mark{margin-bottom:0}
  .back{
    font-size:.85rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--mute);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    transition:color .2s ease;
    white-space:nowrap;
  }
  .back:hover{color:var(--olive)}
  .back .arrow{transition:transform .2s ease}
  .back:hover .arrow{transform:translateX(-4px)}

  /* --- Capability page hero --- */
  .cap-hero{margin-bottom:1.2rem}
  .cap-hero .cap-icon{
    width:52px;height:52px;
    margin-bottom:1.3rem;
  }
  .cap-hero .num{
    font-size:13px;
    letter-spacing:.32em;
    color:var(--olive);
    text-transform:uppercase;
    margin-bottom:.9rem;
  }
  .cap-hero h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(2.2rem,6.5vw,3.4rem);
    line-height:1.05;
    letter-spacing:-.02em;
  }

  /* Bottom back link on capability pages */
  .back-bottom{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-top:2.4rem;
    font-size:.9rem;
    letter-spacing:.04em;
    color:var(--mute);
    text-decoration:none;
    transition:color .2s ease;
  }
  .back-bottom:hover{color:var(--olive)}
  .back-bottom .arrow{transition:transform .2s ease}
  .back-bottom:hover .arrow{transform:translateX(-4px)}

  /* --- Brand lockup: node-graph M | Mandelia --- */
  .brand{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
  }
  .brand-mark{
    width:1.35em;
    height:1.35em;
    color:var(--olive);
    display:inline-flex;
    flex:0 0 auto;
  }
  .brand-mark svg{width:100%;height:100%;display:block}
  .brand-sep{
    width:1px;
    height:1.05em;
    background:var(--olive-dim);
    display:inline-block;
    flex:0 0 auto;
  }