:root{
    --ground:#0F0F0F;
    --pitch:#171313;
    --slate:#241C18;
    --wine:#6E0D25;
    --brown:#774E24;
    --bone:#EDE4D6;
    --fog:#9E8F7C;
    --signal:#DCAB6B;
    --rule:rgba(237,228,214,0.12);
    --rule-strong:rgba(237,228,214,0.24);
    --display:'Archivo Expanded',system-ui,sans-serif;
    --sans:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --edge:min(6vw,72px);
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ground);color:var(--bone);
    font-family:var(--sans);
    font-size:clamp(1rem,0.96rem + 0.2vw,1.125rem);line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--signal);color:var(--pitch);}
  .wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--edge);}

  a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

  .tag{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--signal);}
  .tag.side{display:inline-flex;align-items:center;gap:9px;color:var(--fog);}
  .tag.side::before{content:"";width:22px;height:1px;background:var(--brown);}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:60;background:var(--ground);border-bottom:1px solid var(--rule);}
  .nav-inner{max-width:1280px;margin-inline:auto;padding:0 var(--edge);height:70px;display:flex;align-items:center;justify-content:space-between;gap:2rem;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand .mark{width:26px;height:26px;flex:none;}
  .brand .word{font-family:var(--display);font-weight:800;letter-spacing:0.02em;font-size:1.02rem;text-transform:uppercase;}
  .brand-logo{height:26px;width:auto;display:block;}
  .foot-logo{height:34px;}
  .brand-fallback{display:none;align-items:center;gap:12px;}
  .nav-links{display:flex;gap:1.6rem;align-items:center;}
  .nav-links a{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fog);position:relative;padding:4px 0;transition:color .2s;}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1);}
  .nav-links a:hover{color:var(--bone);}
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-toggle{display:none;background:none;border:1px solid var(--rule-strong);color:var(--bone);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;padding:9px 13px;text-transform:uppercase;cursor:pointer;}
  .mobile-menu{display:none;}


  main{position:relative;}

  /* ---------- hero: logo over the mesh play ---------- */
  .hero{position:relative;min-height:100svh;display:flex;overflow:hidden;}
  .hero-frame{flex:1;display:grid;grid-template-rows:1fr auto auto;gap:1.8rem;padding-block:2rem 2.2rem;}
  .play{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .play-inner{position:relative;width:min(92%,860px);min-height:clamp(260px,42vh,380px);display:flex;align-items:center;justify-content:center;}
  .play-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;}
  .play-svg path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;}
  .play-svg .pa{stroke:var(--signal);}
  .play-svg .pb{stroke:var(--rule-strong);}
  .play-svg .draw{stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);}
  .play-svg .draw.on{stroke-dashoffset:0;}
  .play-svg .dot{fill:var(--bone);opacity:0;}
  .play-logo{position:relative;z-index:2;display:block;width:100%;height:auto;}
  .mp-glow{position:absolute;left:47%;top:50%;width:clamp(64px,10vw,120px);height:clamp(64px,10vw,120px);transform:translate(-50%,-50%) scale(0.3);background:radial-gradient(circle,rgba(220,171,107,0.6) 0%,rgba(220,171,107,0) 66%);opacity:0;pointer-events:none;z-index:3;}
  .mp-glow.bloom{animation:bloom .62s ease;}
  @keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(0.3);}40%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35);}}
  .hero-lead{max-width:46ch;margin:0 auto;text-align:center;color:var(--bone);font-size:clamp(1.02rem,0.96rem + 0.4vw,1.3rem);}
  .hero-base .scrimmage{height:12px;border-top:1px solid var(--rule-strong);background-image:linear-gradient(to right,var(--rule) 1px,transparent 1px);background-size:22px 7px;background-repeat:repeat-x;background-position:left top;}
  .hero-base-row{display:flex;justify-content:space-between;gap:1.4rem;margin-top:1.1rem;}
  .entry{display:inline-flex;flex-direction:column;gap:9px;max-width:22ch;}
  .entry.right{text-align:right;align-items:flex-end;}
  .entry .who{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--fog);}
  .entry .lead{font-family:var(--display);font-weight:600;font-size:clamp(1rem,0.9rem + 0.5vw,1.35rem);text-transform:uppercase;letter-spacing:0.01em;color:var(--bone);border-bottom:1px solid var(--rule-strong);padding-bottom:7px;display:inline-flex;align-items:center;gap:9px;transition:color .2s,border-color .2s;}
  .entry.brand .lead{color:var(--signal);border-color:var(--signal);}
  .entry:hover .lead{color:var(--signal);border-color:var(--signal);}
  .entry .tick{transition:transform .22s cubic-bezier(.2,.7,.2,1);}
  .entry:hover .tick{transform:translateX(4px);}
  @media (max-width:900px){
    .hero-lead{font-size:1rem;}
    .play-inner{min-height:200px;width:100%;}
    .hero-base-row{flex-direction:column;gap:1.2rem;}
    .entry,.entry.right{text-align:left;align-items:flex-start;max-width:none;}
  }
  /* ---------- representation: what we handle ---------- */
  .handle{padding-block:clamp(4rem,10vh,7rem);border-top:1px solid var(--rule);}
  .handle .tag{display:block;}
  .handle h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.3rem + 2.4vw,3.2rem);line-height:1.02;letter-spacing:-0.01em;margin-top:1rem;max-width:20ch;}
  .handle-list{list-style:none;margin-top:2.2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,3.5rem);max-width:680px;}
  .handle-list li{font-family:var(--mono);font-size:0.92rem;color:var(--bone);padding:0.72rem 0;border-top:1px solid var(--rule);display:flex;align-items:center;gap:12px;}
  .handle-list li::before{content:"";width:7px;height:7px;background:var(--ground);border:1px solid var(--brown);flex:none;}
  .handle-note{max-width:54ch;color:var(--fog);margin-top:2.2rem;}
  /* ---------- consulting ---------- */
  .consult{padding-block:clamp(4rem,10vh,7rem);border-top:1px solid var(--rule);}
  .consult-head .tag{display:block;}
  .consult h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,1.3rem + 2.4vw,3.2rem);line-height:1.02;letter-spacing:-0.01em;margin-top:1rem;max-width:20ch;}
  .consult-head p{color:var(--fog);margin-top:1.2rem;max-width:54ch;}
  .consult-cols{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(2.4rem,6vh,4rem);border-top:1px solid var(--rule-strong);}
  .prong{padding-top:2.2rem;}
  .prong:first-child{padding-right:clamp(2rem,5vw,4rem);border-right:1px solid var(--rule);}
  .prong:last-child{padding-left:clamp(2rem,5vw,4rem);}
  .prong .pk{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--signal);}
  .prong h3{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1rem + 0.8vw,1.6rem);line-height:1.06;letter-spacing:-0.01em;margin-top:0.9rem;max-width:20ch;}
  .prong p{color:var(--fog);margin-top:0.9rem;max-width:42ch;}
  @media (max-width:900px){
    .consult-cols{grid-template-columns:1fr;}
    .prong:first-child{padding-right:0;border-right:none;border-bottom:1px solid var(--rule);padding-bottom:1.8rem;}
    .prong:last-child{padding-left:0;}
  }

  /* ---------- manifesto: the mesh point in words ---------- */
  .manifesto{padding-block:clamp(5rem,13vh,9rem);}
  .man-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start;}
  .man-col .tag{display:block;margin-bottom:1.4rem;}
  .man-def{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.05rem + 0.9vw,1.7rem);line-height:1.24;letter-spacing:-0.01em;color:var(--bone);max-width:34ch;}
  .man-def .accent{color:var(--signal);}
  .man-lead{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,1.05rem + 1vw,1.8rem);line-height:1.15;letter-spacing:-0.01em;color:var(--bone);max-width:26ch;}
  .man-body{margin-top:1.4rem;color:var(--fog);font-size:clamp(1rem,0.96rem + 0.3vw,1.15rem);max-width:48ch;}
  .man-close{margin-top:clamp(3rem,8vh,5.5rem);border-top:1px solid var(--rule);padding-top:clamp(2rem,5vh,3.2rem);}
  .man-close p{font-family:var(--display);line-height:1;letter-spacing:-0.02em;}
  .man-close p:first-child{font-weight:600;font-size:clamp(1.3rem,1.05rem + 1.4vw,2.1rem);color:var(--bone);}
  .man-close .big{font-weight:800;font-size:clamp(2.6rem,8vw,6rem);text-transform:uppercase;margin-top:0.5rem;}
  .man-close .hi{color:var(--signal);}
  @media (max-width:900px){ .man-grid{grid-template-columns:1fr;gap:2.2rem;} }

  /* ---------- mesh band: the crossing ---------- */
  .mesh{background:var(--wine);border-block:1px solid var(--rule);padding-block:clamp(5rem,13vh,10rem);position:relative;}
  .hashline{position:absolute;top:0;left:0;width:100%;height:10px;border-bottom:1px solid var(--rule);background-image:linear-gradient(to right,var(--rule-strong) 1px,transparent 1px);background-size:16px 7px;background-repeat:repeat-x;background-position:left bottom;opacity:.7;pointer-events:none;}
  .mesh-cross{width:100%;max-width:760px;margin:0 auto clamp(2rem,6vh,4rem);display:block;overflow:visible;}
  .mesh-cross path{fill:none;stroke-width:1.5;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);}
  .mesh-cross.in .a{stroke-dashoffset:0;stroke:var(--rule-strong);}
  .mesh-cross.in .b{stroke-dashoffset:0;stroke:var(--signal);}
  .mesh-cross .a,.mesh-cross .b{stroke:var(--rule-strong);}
  .mesh-cross circle{fill:var(--ground);stroke:var(--fog);stroke-width:1.4;}
  .mesh-cross circle.hub{fill:var(--signal);stroke:none;opacity:0;transition:opacity .5s ease 1.1s;}
  .mesh-cross.in circle.hub{opacity:1;}
  .mesh-cross circle.hub{transform-box:fill-box;transform-origin:center;}
  .mesh-cross circle.runner{fill:var(--bone);stroke:none;opacity:0;}
  .mesh-cross circle.hub.rub{animation:rub .6s ease;}
  @keyframes rub{0%{transform:scale(1);}40%{transform:scale(1.8);}100%{transform:scale(1);}}
  .mesh-cross text{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;fill:var(--fog);}
  .fit h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,11vw,8.5rem);line-height:0.88;letter-spacing:-0.025em;}
  .fit h2 .dot{color:var(--signal);}
  .fit-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);margin-top:2.4rem;align-items:start;}
  .fit-body p{max-width:44ch;color:var(--bone);}
  .fit-q{padding:1.4rem 0 1.4rem 1.6rem;border-left:2px solid var(--signal);font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1.1rem + 1vw,1.9rem);line-height:1.15;letter-spacing:-0.01em;}
  .fit-tag{margin-top:1.1rem;font-family:var(--mono);font-size:0.82rem;color:var(--fog);}
  .trust{margin-top:0;}
  .trust h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,1.4rem + 3.5vw,4.6rem);line-height:0.92;letter-spacing:-0.02em;max-width:16ch;}
  .legs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.2rem;}
  .leg{border-top:1px solid var(--rule-strong);padding-top:1.1rem;}
  .leg h4{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.02rem;letter-spacing:0.01em;}
  .leg p{color:var(--fog);margin-top:0.6rem;font-size:0.96rem;max-width:34ch;}

  /* ---------- contact: the fork ---------- */
  .contact{padding-block:clamp(5rem,12vh,9rem);border-top:1px solid var(--rule);}
  .contact h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,1.6rem + 5vw,6rem);line-height:0.9;letter-spacing:-0.02em;}
  .fork{width:100%;height:80px;margin:1.6rem 0 2.4rem;overflow:visible;}
  .fork path{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);}
  .fork.in path{stroke-dashoffset:0;}
  .fork .stem{stroke:var(--signal);}
  .fork .branch{stroke:var(--rule-strong);}
  .channels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
  .channel{background:var(--ground);padding:1.8rem clamp(1.2rem,2.5vw,2rem);transition:background .2s;}
  .channel:hover{background:var(--pitch);}
  .channel .k{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--signal);}
  .channel h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.05rem;margin-top:0.7rem;}
  .channel a.mail{display:inline-block;margin-top:0.8rem;font-family:var(--mono);font-size:0.88rem;color:var(--bone);border-bottom:1px solid var(--rule-strong);padding-bottom:2px;transition:color .2s,border-color .2s;}
  .channel a.mail:hover{color:var(--signal);border-color:var(--signal);}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--rule-strong);padding-block:3.4rem;}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;}
  .foot-brand{display:flex;align-items:center;gap:12px;}
  .foot-brand .mark{width:30px;height:30px;}
  .foot-brand .w{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:0.02em;font-size:1.05rem;}
  .foot-brand .s{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fog);}
  .foot-links{display:flex;flex-wrap:wrap;gap:1.4rem;}
  .foot-links a{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fog);transition:color .2s;}
  .foot-links a:hover{color:var(--bone);}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;color:var(--fog);}
  .foot-bottom .legal{display:flex;gap:1.4rem;}
  .foot-bottom a:hover{color:var(--bone);}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-toggle{display:inline-block;}
    .mobile-menu.open{display:block;border-bottom:1px solid var(--rule);background:var(--ground);}
    .mobile-menu.open .mm-inner{padding:1rem var(--edge) 1.6rem;display:flex;flex-direction:column;}
    .mobile-menu.open a{font-family:var(--mono);font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fog);padding:0.7rem 0;border-bottom:1px solid var(--rule);}
    .handle-list{grid-template-columns:1fr;}
    .fit-body,.legs{grid-template-columns:1fr;}
    .channels{grid-template-columns:1fr;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;animation:none !important;}
    .draw,.mesh-cross path,.fork path{stroke-dashoffset:0 !important;}
    .mesh-cross circle.hub{opacity:1 !important;}
  }

  /* ---------- multi-page: page header, offerings, cta ---------- */
  .page-header{padding-block:clamp(4rem,11vh,7rem) clamp(2rem,5vh,3rem);border-bottom:1px solid var(--rule);}
  .page-header .tag{display:block;}
  .page-header h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,1.8rem + 4vw,5.5rem);line-height:0.9;letter-spacing:-0.02em;margin-top:1rem;}
  .page-header .ph-lead{max-width:54ch;color:var(--fog);margin-top:1.4rem;font-size:clamp(1.02rem,0.96rem + 0.4vw,1.28rem);}
  .offerings{padding-block:clamp(4rem,10vh,7rem);border-top:1px solid var(--rule);}
  .offerings .tag{display:block;margin-bottom:1.6rem;}
  .off-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-strong);}
  .off{display:block;padding:2.2rem clamp(1.4rem,3vw,2.4rem) 2.6rem;border-right:1px solid var(--rule);transition:background .2s ease;}
  .off:first-child{padding-left:0;}
  .off:last-child{border-right:none;padding-right:0;}
  .off:hover{background:var(--pitch);}
  .off h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);letter-spacing:-0.01em;}
  .off p{color:var(--fog);margin-top:0.8rem;max-width:32ch;font-size:0.96rem;}
  .off .go{display:inline-flex;align-items:center;gap:9px;margin-top:1.4rem;font-family:var(--mono);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--bone);}
  .off:hover .go{color:var(--signal);}
  .off .go .tick{transition:transform .22s cubic-bezier(.2,.7,.2,1);}
  .off:hover .go .tick{transform:translateX(5px);}
  .pagecta{padding-block:clamp(4rem,11vh,7rem);border-top:1px solid var(--rule);}
  .pagecta h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,1.4rem + 3.5vw,4.5rem);line-height:0.94;letter-spacing:-0.02em;max-width:18ch;}
  .pagecta .clink{display:inline-flex;align-items:center;gap:12px;margin-top:1.8rem;font-family:var(--mono);font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--signal);border-bottom:1px solid var(--signal);padding-bottom:8px;transition:gap .2s ease;}
  .pagecta .clink:hover{gap:18px;}
  .nav-links a[aria-current="page"]{color:var(--bone);}
  .nav-links a[aria-current="page"]::after{transform:scaleX(1);}
  @media (max-width:900px){
    .off-grid{grid-template-columns:1fr;}
    .off,.off:first-child,.off:last-child{border-right:none;border-bottom:1px solid var(--rule);padding:1.8rem 0;}
    .off:last-child{border-bottom:none;}
  }
