:root{
      --paper:#f4f4f0;
      --paper-2:#ecece7;
      --ink:#11120f;
      --muted:#74766f;
      --grid:rgba(17,18,15,.045);
      --line:rgba(17,18,15,.20);
      --line-dark:rgba(255,255,255,.16);

      --acid:#dfff20;
      --orange:#ff5a3a;
      --violet:#6957ff;
      --cyan:#20d6ff;

      --sans:"IBM Plex Sans",Arial,sans-serif;
      --mono:"IBM Plex Mono",monospace;
      --ease:cubic-bezier(.22,.74,.18,1);
      --max:1600px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family:var(--sans);
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-20;
      pointer-events:none;
      background:
        linear-gradient(to right,var(--grid) 1px,transparent 1px) 0 0 / calc(100vw / 12) 100%,
        linear-gradient(to bottom,var(--grid) 1px,transparent 1px) 0 0 / 100% 72px;
    }

    a{color:inherit;text-decoration:none}
    button{font:inherit;color:inherit}
    ::selection{background:var(--acid);color:#000}

    .wrap{
      width:min(100%,var(--max));
      margin:0 auto;
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
    }

    /* HEADER */
    .site-header{
      height:58px;
      position:fixed;
      inset:0 0 auto;
      z-index:80;
      background:rgba(244,244,240,.95);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(10px);
    }
    .header-grid{
      width:min(100%,var(--max));
      height:100%;
      margin:0 auto;
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
      display:grid;
      grid-template-columns:3fr 6fr 3fr;
    }
    .header-cell{
      min-width:0;
      display:flex;
      align-items:center;
      padding:0 18px;
    }
    .header-cell + .header-cell{border-left:1px solid var(--line)}
    .brand{
      font-family:var(--mono);
      font-size:15px;
      font-weight:600;
      letter-spacing:-.04em;
    }
    .header-center{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      letter-spacing:.07em;
      text-transform:uppercase;
    }
    .header-right{
      padding-right:0;
      justify-content:space-between;
      gap:12px;
      font-family:var(--mono);
      font-size:10px;
    }
    .langs{display:flex;height:100%}
    .lang{
      height:58px;
      min-width:50px;
      border:0;
      border-left:1px solid var(--line);
      background:transparent;
      cursor:pointer;
      font-family:var(--mono);
      font-size:10px;
    }
    .lang[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

    /* DECORATIVE LIQUID BLOBS */
    .liquid{
      position:absolute;
      pointer-events:none;
      z-index:0;
      opacity:.42;
      mix-blend-mode:multiply;
      filter:saturate(.92);
    }
    .liquid svg{width:100%;height:100%;overflow:visible}
    .liquid .edgeFlood{transition:flood-color .7s ease}
    .liquid .fillFlood{transition:flood-color .7s ease}

    .liquid.hero-liquid{
      width:min(66vw,1040px);
      height:min(58vw,840px);
      right:-7%;
      top:7%;
      opacity:.34;
    }
    .liquid.section-liquid{
      width:500px;
      height:390px;
      right:-120px;
      top:40px;
      opacity:.20;
      filter:saturate(.82);
    }
    .liquid.about-liquid{
      width:430px;
      height:330px;
      left:-130px;
      bottom:-30px;
      opacity:.17;
    }
    .liquid.play-liquid{
      width:480px;
      height:380px;
      right:-120px;
      bottom:10px;
      opacity:.16;
      mix-blend-mode:screen;
    }
    .liquid.contact-liquid{
      width:560px;
      height:430px;
      right:-140px;
      top:10px;
      opacity:.20;
      mix-blend-mode:screen;
    }

    /* HERO */
    .hero{
      position:relative;
      padding-top:58px;
      min-height:100svh;
      overflow:hidden;
      isolation:isolate;
    }
    .hero-grid{
      min-height:calc(100svh - 58px);
      display:grid;
      grid-template-columns:3fr 6fr 3fr;
      grid-template-rows:60px minmax(290px,.78fr) minmax(360px,1fr) 68px;
      position:relative;
      z-index:1;
    }
    .hero-grid > *{min-width:0}
    .hero-label{
      padding:16px 18px;
      font-family:var(--mono);
      font-size:11px;
      color:var(--muted);
      border-bottom:1px solid var(--line);
    }
    .hero-label + .hero-label{border-left:1px solid var(--line)}

    .hero-title{
      grid-column:1 / 3;
      padding:28px 18px 34px;
      display:flex;
      align-items:flex-end;
      border-bottom:1px solid var(--line);
      position:relative;
      z-index:2;
    }
    .hero-title h1{
      margin:0;
      max-width:1180px;
      font-size:clamp(80px,9.8vw,158px);
      line-height:.79;
      letter-spacing:-.085em;
      font-weight:400;
    }
    .hero-summary{
      border-left:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:30px 18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      z-index:2;
    }
    .hero-summary .top{
      font-family:var(--mono);
      font-size:10px;
      line-height:1.6;
    }
    .hero-summary p{
      margin:0;
      font-size:13px;
      line-height:1.55;
      max-width:300px;
    }

    .hero-role,
    .hero-menu,
    .hero-state{
      padding:28px 18px;
      position:relative;
      z-index:2;
    }
    .hero-menu,.hero-state{border-left:1px solid var(--line)}
    .hero-role{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .role-label{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .role-main{
      font-size:clamp(31px,3vw,48px);
      line-height:.94;
      letter-spacing:-.06em;
    }
    .role-copy{
      margin:0;
      max-width:350px;
      font-size:14px;
      line-height:1.55;
    }

    .hero-menu{
      padding-left:0;
      padding-right:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .hero-menu-item{
      appearance:none;
      width:100%;
      border:0;
      border-top:1px solid transparent;
      border-bottom:1px solid transparent;
      background:transparent;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:baseline;
      padding:4px 18px 7px;
      cursor:pointer;
      text-align:left;
      transition:background .28s ease,border-color .28s ease,padding-left .38s var(--ease);
    }
    .hero-menu-item .name{
      font-size:clamp(38px,4.5vw,70px);
      line-height:.95;
      letter-spacing:-.065em;
      font-weight:400;
      white-space:nowrap;
    }
    .hero-menu-item .count{
      font-family:var(--mono);
      color:var(--muted);
      font-size:10px;
      padding-left:18px;
    }
    .hero-menu-item:hover,
    .hero-menu-item.is-active{
      background:rgba(17,18,15,.027);
      border-color:var(--line);
      padding-left:30px;
    }

    .hero-state{
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    .hero-state-inner{
      transition:opacity .2s ease,transform .38s var(--ease);
    }
    .hero-state-inner.is-changing{opacity:0;transform:translateY(12px)}
    .state-index{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      margin-bottom:13px;
    }
    .state-title{
      margin:0 0 12px;
      font-size:clamp(27px,2.6vw,42px);
      line-height:.96;
      letter-spacing:-.055em;
      font-weight:400;
    }
    .state-copy{
      margin:0;
      font-size:13px;
      line-height:1.55;
      max-width:310px;
    }
    .state-link{
      display:inline-block;
      margin-top:22px;
      font-family:var(--mono);
      font-size:10px;
      text-decoration:underline;
      text-underline-offset:4px;
    }

    .hero-bottom{
      grid-column:1/-1;
      border-top:1px solid var(--line);
      display:grid;
      grid-template-columns:3fr 6fr 3fr;
      font-family:var(--mono);
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.05em;
      position:relative;
      z-index:2;
    }
    .hero-bottom > div{padding:17px 18px}
    .hero-bottom > div + div{border-left:1px solid var(--line)}

    /* SECTION SYSTEM / hierarchy */
    section{scroll-margin-top:58px}
    .section{position:relative;isolation:isolate}
    .section-head{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:3fr 9fr;
      min-height:220px;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .section-head > *{padding:24px 18px}
    .section-head > * + *{border-left:1px solid var(--line)}
    .section-kicker{
      font-family:var(--mono);
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
    }
    .section-title{
      margin:0;
      align-self:end;
      max-width:1100px;
      font-size:clamp(72px,8.4vw,136px);
      line-height:.82;
      letter-spacing:-.08em;
      font-weight:400;
    }
    .section-intro{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:3fr 9fr;
      border-bottom:1px solid var(--line);
    }
    .section-intro > *{padding:18px}
    .section-intro > * + *{border-left:1px solid var(--line)}
    .section-intro .lead{
      max-width:760px;
      font-size:18px;
      line-height:1.45;
      letter-spacing:-.025em;
    }
    .section-intro .micro{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.05em;
    }

    /* STATS */
    .stats{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border-bottom:1px solid var(--line);
    }
    .stat{
      min-height:154px;
      padding:24px 18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .stat + .stat{border-left:1px solid var(--line)}
    .stat strong{
      font-size:clamp(55px,6.2vw,96px);
      line-height:.82;
      letter-spacing:-.075em;
      font-weight:400;
    }
    .stat span{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    /* PROJECT LIST: fixed grid, preview is a native cell, no layout shift */
    .projects{
      position:relative;
      z-index:2;
    }
    .project-row{
      min-height:188px;
      display:grid;
      grid-template-columns:.55fr 4.15fr 2.8fr 1.45fr .9fr .45fr;
      border-bottom:1px solid var(--line);
      position:relative;
      cursor:pointer;
      transition:background .25s ease;
    }
    .project-row:hover,
    .project-row.is-active{background:rgba(17,18,15,.022)}
    .project-row > *{
      min-width:0;
      padding:20px 18px;
    }
    .project-row > * + *{border-left:1px solid var(--line)}

    .p-no,.p-meta,.p-year,.p-arrow{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .p-main{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:18px;
    }
    .p-title{
      margin:0;
      font-size:clamp(30px,3.15vw,50px);
      line-height:.95;
      letter-spacing:-.055em;
      font-weight:400;
      max-width:760px;
      transition:transform .35s var(--ease);
    }
    .project-row:hover .p-title,
    .project-row.is-active .p-title{transform:translateX(4px)}
    .p-desc{
      margin:0;
      max-width:650px;
      font-size:13px;
      line-height:1.5;
      color:#3f403c;
    }
    .p-meta{
      line-height:1.55;
    }
    .p-year{display:flex;align-items:flex-start;justify-content:flex-end}
    .p-arrow{
      display:flex;
      align-items:flex-start;
      justify-content:center;
      font-size:18px;
      color:var(--ink);
      transition:transform .35s var(--ease);
    }
    .project-row:hover .p-arrow,
    .project-row.is-active .p-arrow{transform:translate(3px,-3px)}

    .preview-cell{
      padding:0!important;
      position:relative;
      overflow:hidden;
      background:rgba(17,18,15,.018);
    }
    .preview{
      position:absolute;
      inset:0;
      opacity:0;
      transform:scale(.985);
      transition:opacity .32s ease,transform .55s var(--ease);
      overflow:hidden;
    }
    .project-row:hover .preview,
    .project-row.is-active .preview{
      opacity:1;
      transform:scale(1);
    }
    .preview::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 55%);
      pointer-events:none;
    }
    .mock{
      position:absolute;
      inset:18px;
      background:#151613;
      color:#f4f4ef;
      border:1px solid rgba(255,255,255,.16);
      display:grid;
      grid-template-rows:24px 1fr;
      box-shadow:0 16px 40px rgba(17,18,15,.08);
    }
    .mock.light{
      background:#e8e7e1;
      color:#11120f;
      border-color:rgba(17,18,15,.18);
    }
    .mock-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 8px;
      font-family:var(--mono);
      font-size:7px;
      border-bottom:1px solid currentColor;
      opacity:.6;
    }
    .mock-body{
      position:relative;
      overflow:hidden;
      padding:12px;
    }
    .mock-title{
      font-size:clamp(18px,1.5vw,28px);
      line-height:.9;
      letter-spacing:-.06em;
      max-width:80%;
    }
    .mock-lines{
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      display:grid;
      gap:6px;
    }
    .mock-lines span{
      height:3px;
      background:currentColor;
      opacity:.24;
    }
    .mock-lines span:nth-child(2){width:72%}
    .mock-lines span:nth-child(3){width:48%}
    .mock-accent{
      position:absolute;
      width:55%;
      aspect-ratio:1.3;
      right:-18%;
      top:18%;
      opacity:.55;
    }

    /* ABOUT / SERVICES */
    .about-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:5fr 7fr;
      border-bottom:1px solid var(--line);
    }
    .about-copy,.services{
      min-height:520px;
      padding:34px 18px;
    }
    .services{border-left:1px solid var(--line)}
    .about-copy{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .about-copy h3{
      margin:0;
      font-size:clamp(62px,7vw,112px);
      line-height:.84;
      letter-spacing:-.08em;
      font-weight:400;
    }
    .about-copy p{
      margin:0;
      max-width:580px;
      font-size:17px;
      line-height:1.55;
    }
    .micro{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .service{
      display:grid;
      grid-template-columns:46px 1fr 28px;
      gap:12px;
      align-items:start;
      padding:20px 0 24px;
      border-top:1px solid var(--line);
    }
    .service:last-child{border-bottom:1px solid var(--line)}
    .service-no{
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      padding-top:5px;
    }
    .service h4{
      margin:0;
      font-size:clamp(25px,2.7vw,43px);
      line-height:.98;
      letter-spacing:-.05em;
      font-weight:400;
    }
    .service p{
      margin:8px 0 0;
      max-width:520px;
      font-size:12px;
      line-height:1.55;
      color:var(--muted);
    }
    .service-arrow{font-family:var(--mono);font-size:17px}

    /* INVERSE / PLAYGROUND */
    .inverse{
      color:#f2f2ed;
      background:#11120f;
    }
    .inverse::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px) 0 0 / calc(100vw / 12) 100%,
        linear-gradient(to bottom,rgba(255,255,255,.038) 1px,transparent 1px) 0 0 / 100% 72px;
    }
    .inverse .section-head{border-color:var(--line-dark)}
    .inverse .section-head > * + *{border-color:var(--line-dark)}
    .inverse .section-kicker{color:rgba(255,255,255,.45)}

    .play-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:3fr 9fr;
      border-bottom:1px solid var(--line-dark);
    }
    .play-aside{
      padding:30px 18px;
      max-width:440px;
      font-size:15px;
      line-height:1.55;
      color:rgba(255,255,255,.62);
    }
    .play-list{border-left:1px solid var(--line-dark)}
    .exp{
      min-height:190px;
      display:grid;
      grid-template-columns:1fr 4.2fr 1.5fr;
      border-bottom:1px solid var(--line-dark);
      transition:background .25s ease;
    }
    .exp:last-child{border-bottom:0}
    .exp:hover{background:rgba(255,255,255,.035)}
    .exp > *{padding:20px 18px}
    .exp > * + *{border-left:1px solid var(--line-dark)}
    .exp small{
      font-family:var(--mono);
      font-size:10px;
      color:rgba(255,255,255,.45);
      text-transform:uppercase;
    }
    .exp h3{
      margin:0;
      font-size:clamp(38px,4.6vw,72px);
      line-height:.9;
      letter-spacing:-.065em;
      font-weight:400;
    }
    .exp p{
      margin:0;
      font-size:12px;
      line-height:1.55;
      color:rgba(255,255,255,.58);
    }

    /* MANIFESTO */
    .manifesto{
      min-height:72svh;
      display:grid;
      grid-template-columns:3fr 9fr;
      border-bottom:1px solid var(--line);
      position:relative;
      overflow:hidden;
    }
    .manifesto-label{
      padding:24px 18px;
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
    }
    .manifesto-copy{
      border-left:1px solid var(--line);
      padding:clamp(70px,8vw,140px) 18px;
      display:flex;
      align-items:center;
      position:relative;
      z-index:2;
    }
    .manifesto-copy p{
      margin:0;
      max-width:1200px;
      font-size:clamp(55px,7.6vw,120px);
      line-height:.84;
      letter-spacing:-.08em;
      font-weight:400;
    }

    /* CONTACT */
    .contact{
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .contact-grid{
      min-height:70svh;
      display:grid;
      grid-template-columns:3fr 6fr 3fr;
      position:relative;
      z-index:2;
    }
    .contact-grid > *{padding:30px 18px}
    .contact-grid > * + *{border-left:1px solid var(--line-dark)}
    .contact-kicker{
      font-family:var(--mono);
      font-size:10px;
      color:rgba(255,255,255,.45);
      text-transform:uppercase;
    }
    .contact-main{
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    .contact-main h2{
      margin:0;
      font-size:clamp(64px,8.3vw,132px);
      line-height:.82;
      letter-spacing:-.08em;
      font-weight:400;
    }
    .contact-side{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      font-size:13px;
      line-height:1.55;
      color:rgba(255,255,255,.66);
    }
    .contact-side a{
      color:#fff;
      text-decoration:underline;
      text-underline-offset:4px;
    }
    .footer{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:3fr 6fr 3fr;
      border-top:1px solid var(--line-dark);
      font-family:var(--mono);
      font-size:10px;
      text-transform:uppercase;
      color:rgba(255,255,255,.46);
    }
    .footer > *{padding:18px}
    .footer > * + *{border-left:1px solid var(--line-dark)}
    .footer-links{display:flex;gap:16px;flex-wrap:wrap}

    .reveal{
      opacity:0;
      transform:translateY(18px);
      transition:opacity .7s var(--ease),transform .7s var(--ease);
    }
    .reveal.in{opacity:1;transform:none}

    @media(max-width:1050px){
      .header-grid{grid-template-columns:1fr 1fr}
      .header-center{display:none}
      .hero-grid{
        grid-template-columns:1fr;
        grid-template-rows:48px auto auto auto auto auto 58px;
      }
      .hero-label:nth-child(2),.hero-label:nth-child(3){display:none}
      .hero-title{grid-column:1;padding-top:34px}
      .hero-summary,.hero-menu,.hero-state{border-left:0;border-top:1px solid var(--line)}
      .hero-summary{min-height:230px}
      .hero-role{min-height:300px}
      .hero-menu{min-height:330px}
      .hero-state{min-height:260px}
      .hero-bottom{grid-template-columns:1fr}
      .hero-bottom > div + div{border-left:0;border-top:1px solid var(--line)}
      .liquid.hero-liquid{width:110vw;height:86vw;right:-38%;top:6%}
      .section-head{grid-template-columns:1fr}
      .section-head > * + *{border-left:0;border-top:1px solid var(--line)}
      .section-intro{grid-template-columns:1fr}
      .section-intro > * + *{border-left:0;border-top:1px solid var(--line)}
      .project-row{
        grid-template-columns:.55fr 4fr 2.6fr 1.4fr .7fr;
      }
      .p-year{display:none}
      .about-grid{grid-template-columns:1fr}
      .services{border-left:0;border-top:1px solid var(--line)}
      .play-grid{grid-template-columns:1fr}
      .play-list{border-left:0;border-top:1px solid var(--line-dark)}
      .manifesto{grid-template-columns:1fr}
      .manifesto-copy{border-left:0;border-top:1px solid var(--line)}
      .contact-grid{grid-template-columns:1fr}
      .contact-grid > * + *{border-left:0;border-top:1px solid var(--line-dark)}
      .contact-main{min-height:430px}
      .contact-side{min-height:220px}
      .footer{grid-template-columns:1fr}
      .footer > * + *{border-left:0;border-top:1px solid var(--line-dark)}
    }

    @media(max-width:720px){
      body::before{
        background:
          linear-gradient(to right,var(--grid) 1px,transparent 1px) 0 0 / 25vw 100%,
          linear-gradient(to bottom,var(--grid) 1px,transparent 1px) 0 0 / 100% 64px;
      }
      .header-cell{padding:0 12px}
      .header-right > span{display:none}
      .hero-title,.hero-summary,.hero-role,.hero-state{padding-left:12px;padding-right:12px}
      .hero-title h1{font-size:clamp(68px,20vw,104px)}
      .hero-menu-item{padding-left:12px;padding-right:12px}
      .hero-menu-item:hover,.hero-menu-item.is-active{padding-left:20px}
      .hero-menu-item .name{font-size:clamp(38px,12vw,62px)}
      .stats{grid-template-columns:1fr}
      .stat + .stat{border-left:0;border-top:1px solid var(--line)}
      .section-head > *,.section-intro > *,.about-copy,.services,.play-aside,.manifesto-label,.manifesto-copy,.contact-grid > *{padding-left:12px;padding-right:12px}
      .project-row{
        grid-template-columns:44px 1fr;
        min-height:auto;
      }
      .project-row .preview-cell,.project-row .p-meta,.project-row .p-year,.project-row .p-arrow{display:none}
      .project-row > *{padding:18px 12px}
      .p-title{font-size:34px}
      .about-copy{min-height:460px}
      .service{grid-template-columns:34px 1fr 20px}
      .exp{grid-template-columns:56px 1fr}
      .exp p{display:none}
      .liquid.section-liquid,.liquid.about-liquid,.liquid.play-liquid,.liquid.contact-liquid{width:340px;height:270px}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
      }
    }