@font-face{font-family:"Sneak";src:url("assets/fonts/Sneak-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
  @font-face{font-family:"Sneak";src:url("assets/fonts/Sneak-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}
  :root{
    --paper:#FBFAF7; --ink:#3F4343; --muted:#6E7A9C; --red:#704837; --neon:#E8F288;
    --line:rgba(10,10,10,.12); --line-2:rgba(10,10,10,.06);
    --cell:14px; --gutter:56px; --maxw:1176px; --readw:34ch; --radius:26px;   /* spacing snapped to the 14px pixel grid */
    --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  }
  @media(max-width:680px){ :root{--gutter:28px;} }   /* 2 cells on mobile */
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth; overscroll-behavior:none;}
  body{margin:0; overscroll-behavior:none; background:var(--paper); color:var(--ink); overflow-x:hidden; font-family:"Sneak","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; font-feature-settings:"ss06" 1;}
  a{color:inherit;}
  .mono{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;}

  /* ===== pixel controls (cell / brush size) ===== */
  .pxctl{position:fixed; left:16px; bottom:16px; z-index:200; display:none; align-items:center; gap:5px;
    padding:7px 9px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(10,10,10,.12); border-radius:10px;
    font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
  .pxctl .lbl{color:var(--muted); margin:0 3px;}
  .pxctl .lbl:first-child{margin-left:0;}
  .pxctl button{font:inherit; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(10,10,10,.16); background:#FBFAF7; color:var(--ink); border-radius:6px; cursor:pointer; padding:0; transition:background .15s,border-color .15s;}
  .pxctl button:hover{border-color:rgba(10,10,10,.45);}
  .pxctl button.on{background:var(--ink); color:#FBFAF7; border-color:var(--ink);}
  .pxctl{transition:opacity .35s ease, transform .35s ease;}
  .pxctl.hide{opacity:0; transform:translateY(8px); pointer-events:none;}

  /* ===== masthead: centered logo with text left & right ===== */
  .masthead{position:relative; z-index:4; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:12px var(--gutter); background:transparent;}
  .masthead p{margin:0; line-height:1.45; color:var(--ink); font-size:10px;}
  .masthead .mh-l{justify-self:start; text-align:left;}
  .masthead .mh-r{justify-self:end; text-align:right;}
  .masthead .mh-c{justify-self:center; display:flex;}
  .masthead .mh-c img{display:block; width:34px; height:auto;}
  @media(max-width:680px){
    .masthead{grid-template-columns:1fr auto; gap:14px 16px; row-gap:16px;}
    .masthead .mh-c{order:-1; grid-column:1 / -1; justify-self:center;}
    .masthead .mh-r{text-align:right;}
  }

  /* ===== hero ===== */
  #hero-kv{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none;}
  .hero{position:relative; min-height:100vh; background:transparent; z-index:1;}
  .hhead{position:relative; z-index:5; background:#FBFAF7; padding:0 var(--gutter);}
  .hhead::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--line); transform-origin:left; transform:scaleX(0); animation:lineGrowX .9s cubic-bezier(.16,1,.3,1) .5s both;}
  .hhead .hgrid{max-width:var(--maxw); margin:0 auto; padding:calc(var(--cell)*2) 0 calc(var(--cell)*2 + 2px); display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*3); align-items:stretch;}
  @media(min-width:900px){ .hhead .hgrid{grid-template-columns:1.6fr 1fr;} }
  .hhead .hl{margin:0; align-self:start; font-weight:400; text-transform:uppercase; font-size:clamp(32px,5.2vw,82px); line-height:0.92; letter-spacing:-0.035em;}
  @keyframes heroIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
  @keyframes heroLine{ from{transform:translateY(115%);} to{transform:translateY(0);} }
  @keyframes lineGrowX{ to{transform:scaleX(1);} }
  @keyframes lineGrowY{ to{transform:scaleY(1);} }
  .hhead .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em;}
  .hhead .ln > span{display:block; transform:translateY(115%); animation:heroLine .95s steps(6) both;}
  .hhead .hl .ln:nth-child(1) > span{ animation-delay:.10s; }
  .hhead .hl .ln:nth-child(2) > span{ animation-delay:.21s; }
  .hhead .hdesc .ln:nth-child(1) > span{ animation-delay:.36s; }
  .hhead .hdesc .ln:nth-child(2) > span{ animation-delay:.44s; }
  .hhead .htag{ animation:heroIn .9s steps(6) .58s both; }
  .hhead .hfoot img{ animation:heroIn .9s steps(6) .78s both; }   /* logo lands a small beat after the tagline */
  @media(prefers-reduced-motion: reduce){ .hhead .ln > span{ animation:none; transform:none; } .hhead .htag, .hhead .hfoot img{ animation:none; } .hhead::after{ animation:none; transform:scaleX(1); } .hcol::before{ animation:none; transform:scaleY(1); } }
  .hhead .hcol{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:calc(var(--cell)*2);}
  @media(min-width:900px){
    .hhead .hcol{padding-left:calc(var(--cell)*3);}
    .hhead .hcol::before{content:""; position:absolute; left:0; top:calc(var(--cell)*-2); bottom:calc(var(--cell)*-2); width:1px; background:var(--line); transform-origin:top; transform:scaleY(0); animation:lineGrowY .85s cubic-bezier(.16,1,.3,1) .42s both;}  /* divider spans the full bar height */
  }
  .hhead .hdesc{margin:0; font-weight:400; text-transform:uppercase; font-size:clamp(13px,1.45vw,20px); line-height:1.18; letter-spacing:-0.01em;}
  .hhead .hdesc span{display:block; text-align:justify; text-align-last:justify; -webkit-text-align-last:justify;}
  .hhead .hfoot{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; perspective:900px;}
  .hhead .hfoot img{width:34px; height:auto; display:block; flex:none; margin-top:2px;}
  /* W logo: a choppy 3D (rotateY) spin on hover and every ~10s */
  .wlogo{display:inline-block; flex:none; transform-origin:50% 50%;}
  @keyframes wSpin{ from{transform:rotateY(0);} to{transform:rotateY(360deg);} }
  .wlogo:hover, .wlogo.spin{ animation:wSpin .9s steps(18); }
  @media(prefers-reduced-motion: reduce){ .wlogo:hover, .wlogo.spin{ animation:none; } }
  .hhead .htag{margin:0; font-size:13px; line-height:1.45; max-width:34ch; text-align:right;}

  main{position:relative; z-index:2;}
  .sheet{position:relative; z-index:2; background:transparent;}
  .hero + .sheet{margin-top:clamp(calc(var(--cell)*18),55vh,calc(var(--cell)*38));}   /* breathing room after the hero, grid-stepped */
  /* keep the BCP tiles tied to the protocol intro above them */
  #protocol{padding-bottom:calc(var(--cell)*2.5);}
  #protocol-parts{padding-top:calc(var(--cell)*1);}

  /* ===== editorial ===== */
  section.ed{padding:calc(var(--cell)*9) var(--gutter);}
  #shift,#process,#protocol,#protocol-parts,#ai,#lab,#contact{content-visibility:auto; contain-intrinsic-block-size:auto 900px;}
  .ed .wrap{max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:calc(var(--cell)*2);}
  @media(min-width:860px){ .ed .wrap{display:grid; grid-template-columns:0.82fr 1.18fr; column-gap:calc(var(--cell)*6); row-gap:0; align-items:start;} .ed .head{margin:0;} }
  .ed .kick{color:var(--muted); margin:14px 0 0; font-size:10px;}
  .ed h2{font-size:clamp(26px,3.4vw,46px); line-height:1.06; letter-spacing:-.02em; font-weight:400; margin:0; max-width:16ch;}
  .ed p{font-size:clamp(15px,1.15vw,18px); line-height:1.62; max-width:48ch; margin:0 0 1.05em; color:#2a2a2a; text-align:justify; text-align-last:left;}
  .ed p:last-child{margin-bottom:0;} .ed p.s{color:var(--muted); font-size:14px;} .ed strong{font-weight:500; color:var(--ink);}
  .two{display:grid; grid-template-columns:1fr; gap:calc(var(--cell)*2); max-width:none; margin:calc(var(--cell)*3.5) 0;}   /* more breathing room above + below the smileys */
  @media(min-width:560px){ .two{grid-template-columns:1fr 1fr;} }
  .two .c{text-align:center;} .two .c .l{color:var(--muted); margin-bottom:7px;} .two .c p{font-size:14px; margin:0; text-wrap:balance; text-align:center; text-align-last:center;}
  .two .c{position:relative;}
  .two .c .smiley{display:block; width:128px; height:128px; margin:2px auto 18px; transform-origin:50% 58%; will-change:transform; transition:transform .3s ease;}
  .two .c .smiley.sm-jump{animation:smJump .62s cubic-bezier(.3,1.5,.5,1);}
  .two .c .smiley.sm-shy{transform:scale(.93) translateY(3px);}   /* recoil a little when shy */
  @keyframes smJump{0%{transform:translateY(0)}28%{transform:translateY(-18px)}52%{transform:translateY(0)}68%{transform:translateY(-7px)}100%{transform:translateY(0)}}
  .sm-heart{position:absolute; z-index:6; pointer-events:none; animation:smHeart 1s ease-out forwards;}
  @keyframes smHeart{0%{opacity:0; transform:translate(-50%,0) scale(.5)}14%{opacity:1}100%{opacity:0; transform:translate(-50%,-72px) scale(1.1)}}
  .ed .wrap > .reveal:not(.head) > p{max-width:none;}   /* two-column sections: right-column text fills the column, same width as the .two smiley grid */
  #shift p.s, #ai p.s{font-size:clamp(15px,1.15vw,18px); color:#2a2a2a;}   /* match size + color of the body paragraph above */

  /* ===== pull quote ===== */
  .quote{padding:clamp(80px,14vh,180px) var(--gutter); background:var(--ink); color:var(--paper); border-radius:var(--radius); margin:0 8px;}
  .quote .wrap{max-width:var(--maxw); margin:0 auto;}
  .quote .q{font-size:clamp(32px,6vw,98px); line-height:1; letter-spacing:-.03em; font-weight:300; margin:0; max-width:15ch;}
  .quote .attr{margin-top:26px; color:rgba(255,255,255,.5);}
  .quote .after{margin-top:30px; font-size:clamp(15px,1.2vw,19px); line-height:1.6; max-width:40ch; color:rgba(255,255,255,.82);}

  /* ===== springy carousels ===== */
  .caro{position:relative; z-index:2; background:transparent; padding:calc(var(--cell)*7) var(--gutter);}
  .caro .ch{max-width:var(--maxw); margin:0 auto calc(var(--cell)*2); padding:0; display:flex; justify-content:space-between; align-items:baseline; gap:var(--cell);}
  .caro .ch h2{font-size:clamp(26px,3.4vw,46px); line-height:1.06; font-weight:400; letter-spacing:-.02em; margin:0;}
  .caro .ch .hint{color:var(--muted); white-space:nowrap;}
  .track-wrap{overflow:hidden; margin:0 calc(-1 * var(--gutter)); padding:calc(var(--cell)*3) 0; touch-action:pan-y; user-select:none; -webkit-user-select:none;}
  .track-wrap, .track-wrap *{cursor:grab;}
  .track-wrap.drag, .track-wrap.drag *{cursor:grabbing !important;}
  .track-wrap a{-webkit-user-drag:none;}
  .track-wrap{position:relative;}
  .sl-arrow{position:absolute; top:calc(var(--cell)*3 + 175px); transform:translateY(-50%); z-index:6; width:42px; height:42px; border:0; background:var(--ink); color:#FBFAF7; display:none; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background .2s ease, opacity .25s ease;
    clip-path:polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px), 0 10px, 5px 10px, 5px 5px, 10px 5px, 10px 0);}   /* pixel-stepped corners to match the buttons */
  .sl-arrow.prev{left:16px;} .sl-arrow.next{right:16px;}
  .sl-arrow svg{width:18px; height:18px;}
  .sl-arrow:hover{background:#5264A7;}   /* same blue hover as the buttons */
  .sl-arrow[disabled]{opacity:0; pointer-events:none;}
  @media(hover:hover) and (pointer:fine){ .sl-arrow{display:flex;} }
  .track{display:flex; gap:28px; width:max-content; padding:0 max(var(--gutter), calc((100vw - var(--maxw)) / 2)); will-change:transform;}   /* aligned to the centred grid; gap leaves room for the hover frame */
  .slide{flex:0 0 auto; width:min(78vw,320px); display:flex; flex-direction:column; gap:13px; text-decoration:none; color:inherit;}
  .slide .pv{position:relative; border-radius:0; overflow:hidden; background:transparent;}
  .slide .pv canvas, .slide .pv video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#3F4343; pointer-events:none;}
  .slide .cap{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:0 2px;}
  .slide .cap .ti{font-size:16px; font-weight:500; margin:0; letter-spacing:-.01em;} .slide .cap .ds{color:var(--muted);}
  /* case-study slides: media + centered copy */
  .slide.cs{width:min(90vw,420px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; padding:0 0 26px; border-radius:0; overflow:visible; background:transparent;}
  .slide.cs .csm{position:relative; isolation:isolate; width:100%; height:350px; overflow:hidden; background:#3F4343; --mx:50%; --my:50%; --tx:0px; --ty:0px;}   /* 25 cells tall, aligned to the pixel grid */
  .slide.cs .csm img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; pointer-events:none; transform:translate3d(var(--tx),var(--ty),0) scale(1.035); transform-origin:center; transition:transform .28s cubic-bezier(.16,1,.3,1),filter .28s ease;}
  .slide.cs .csm::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle 120px at var(--mx) var(--my),rgba(255,255,255,.42),rgba(255,255,255,0) 72%); opacity:0; transition:opacity .22s ease;}
  .slide.cs:hover .csm img,.slide.cs:focus-visible .csm img{transform:translate3d(var(--tx),var(--ty),0) scale(1.075); will-change:transform;}
  .slide.cs:hover .csm::after,.slide.cs:focus-visible .csm::after{opacity:1;}
  .slide.cs:focus-visible{outline:2px solid var(--ink); outline-offset:5px;}
  /* placeholder media (drop a real clip in later) */
  .slide.cs .csm.ph{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; background:#ececec; color:#9a9a9a;}
  .slide.cs .csm.ph .pi{font-size:23px; line-height:1;}
  .slide.cs .csm.ph .pl{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;}
  .slide.cs .t{font-size:clamp(22px,2.2vw,30px); font-weight:500; letter-spacing:-.02em; margin:20px 0 0;}
  .slide.cs .d{color:#2a2a2a; font-size:14.5px; line-height:1.5; margin:9px 26px 0; max-width:32ch;}
  /* in-image hover tell: "view case study" reveal on the media, desktop only */
  .slide.cs .reveal-cta{display:none; position:absolute; inset:0; z-index:2;
    background:linear-gradient(to top, rgba(10,10,10,.8) 0, rgba(10,10,10,.8) 14px, rgba(10,10,10,.52) 14px, rgba(10,10,10,.52) 28px, rgba(10,10,10,.28) 28px, rgba(10,10,10,.28) 42px, rgba(10,10,10,.1) 42px, rgba(10,10,10,.1) 56px, rgba(10,10,10,0) 56px);   /* 4 stepped lines of black */
    transform:translateY(100%); pointer-events:none; transition:transform .5s steps(4);}   /* gradient slides up, no fade */
  .slide.cs:hover .reveal-cta{transform:translateY(0);}
  .slide.cs .rc-clip{display:none; position:absolute; left:0; right:0; bottom:16px; z-index:3; overflow:hidden; line-height:1.3; text-align:center; color:#FBFAF7; font-size:13px; font-weight:500; letter-spacing:-.01em; pointer-events:none;}
  .slide.cs .rc-i{display:inline-block; transform:translateY(130%); transition:transform .5s steps(5);}   /* label steps up in place, no fade */
  .slide.cs:hover .rc-i{transform:translateY(0);}
  @media(hover:hover) and (pointer:fine){
    .slide.cs .reveal-cta, .slide.cs .rc-clip{display:block;}  /* the tell only exists where there's a cursor to hover with */
    .track-wrap .slide.cs, .track-wrap .slide.cs *{cursor:pointer;}   /* tiles read as clickable, not just draggable */
  }
  @media(prefers-reduced-motion:reduce){
    .slide.cs .csm img,.slide.cs:hover .csm img,.slide.cs:focus-visible .csm img{transform:none; transition:none; will-change:auto;}
    .slide.cs .csm::after{display:none;}
  }
  /* featured case study (dark) */
  .feat{position:relative; z-index:2; margin:0 8px; background:var(--ink); color:var(--paper); border-radius:var(--radius); overflow:hidden;}
  .feat .wrap{max-width:var(--maxw); margin:0 auto; padding:clamp(26px,4vw,54px); display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,44px); align-items:center;}
  @media(min-width:880px){ .feat .wrap{grid-template-columns:1.05fr .95fr;} }
  .feat .media{border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#000;}
  .feat .media video{width:100%; height:100%; object-fit:cover; display:block;}
  .feat .k{color:rgba(255,255,255,.5); margin:0 0 14px;}
  .feat h2{font-size:clamp(30px,4.4vw,60px); line-height:1.02; letter-spacing:-.03em; font-weight:400; margin:0; max-width:15ch;}
  .feat p{color:rgba(255,255,255,.82); font-size:clamp(15px,1.2vw,18px); line-height:1.6; max-width:44ch; margin:20px 0 0;}
  .feat .split{display:flex; gap:28px; margin:26px 0 0;}
  .feat .split div{display:flex; flex-direction:column; gap:3px;}
  .feat .split b{font-size:clamp(22px,2.4vw,32px); font-weight:500;}
  .feat .split span{color:rgba(255,255,255,.5); font-size:10px;}
  .feat .flink{display:inline-block; margin:26px 0 0; color:#FBFAF7; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px;}
  .feat .flink:hover{border-color:#FBFAF7;}
  /* explainer lists */
  .ed .pts{list-style:none; margin:calc(var(--cell)*2) 0 0; padding:0;}
  .ed .pts li{display:grid; grid-template-columns:auto 1fr; gap:var(--cell); align-items:baseline; padding:var(--cell) 0; border-top:1px solid var(--line); font-size:15px; line-height:1.5; color:#2a2a2a;}
  .ed .pts li .n{color:var(--muted); white-space:nowrap;}
  .ed .pts li b{font-weight:500; color:var(--ink);}
  .ed .pts li:last-child{border-bottom:1px solid var(--line);}   /* close the list under L5 */
  #ai p.s{margin-top:calc(var(--cell)*2);}   /* same gap below the list as above it */

  /* ===== cta + footer ===== */
  .cta{position:relative; z-index:2; background:transparent; padding:calc(var(--cell)*12) var(--gutter);}
  .cta .wrap{max-width:var(--maxw); margin:0 auto; text-align:center;}
  .cta h2{font-size:clamp(38px,8vw,130px); line-height:.95; letter-spacing:-.035em; font-weight:400; margin:0;}
  .cta .meta{margin:30px auto 0; font-size:clamp(15px,1.2vw,19px); line-height:1.6; max-width:46ch; color:var(--muted); text-wrap:balance;}
  .cta .meta.near{margin-top:16px;}
  .cta .meta a{color:var(--ink); text-decoration:none; background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 7px) left bottom/0% 3px no-repeat; transition:background-size .45s cubic-bezier(.16,1,.3,1); padding-bottom:2px;}
  .cta .meta a:hover{background-size:100% 3px;}
  .cta .meta .near{color:var(--ink);}
  .btn, .cta .ctabtn{position:relative; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:clamp(15px,1.2vw,18px); font-weight:500; letter-spacing:-.01em; padding:16px 36px; background:var(--ink); color:#FBFAF7; transition:background .2s;
    clip-path:polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px), 0 10px, 5px 10px, 5px 5px, 10px 5px, 10px 0);}   /* pixel-stepped corners, no side nubs (like the slider arrows) */
  .cta .ctabtn{margin-top:38px;}
  .btn:hover, .cta .ctabtn:hover{background:#5264A7;}   /* colour change on hover (no position shift) */
  .btn .lbl, .cta .ctabtn .lbl{position:relative; z-index:2;}
  .btn .pxfx, .cta .ctabtn .pxfx{position:absolute; inset:0; z-index:1; display:grid; pointer-events:none;}

  .reveal{transform:translateY(18px); transition:transform .8s steps(6);}   /* stepped slide, no fade */
  .reveal.in{transform:none;}
  @media (prefers-reduced-motion: reduce){ .reveal{transform:none;} .hero .cue .ln::after{animation:none;} }
  @media(max-width:720px){
    .pxctl{display:none;}
    .ed p{text-align:left;}
    .hhead .hdesc span{text-align:left; -webkit-text-align-last:left; text-align-last:left;}
    .hhead .hfoot{flex-direction:column; gap:10px; align-items:flex-start;}
    .hhead .htag{text-align:left; max-width:none; width:100%;}
    /* tighten the generous desktop spacing so mobile doesn't feel empty */
    .hero + .sheet{margin-top:clamp(calc(var(--cell)*5),16vh,calc(var(--cell)*13));}
    .ed{padding:calc(var(--cell)*5) var(--gutter);}
    .proc{padding:calc(var(--cell)*4) var(--gutter);}
    .caro{padding:calc(var(--cell)*4) var(--gutter);}
    .cta{padding:calc(var(--cell)*7) var(--gutter);}
  }
  .toplink{position:fixed; top:0; right:0; z-index:60; display:inline-flex; align-items:center; gap:8px; height:calc(var(--cell)*3); padding:0 18px; font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); text-decoration:none; background:var(--paper); border:1px solid #fafafa; border-top:0; border-right:0; transform:translateY(-100%);   /* border matches the pixel-grid line color */ pointer-events:none; transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .2s ease;}
  .toplink.show{transform:none; pointer-events:auto;}
  .toplink:hover{border-color:var(--ink);}
  .toplink .ar{width:14px; height:14px;}

  /* ===== intro lead ===== */
  .intro{position:relative; z-index:2; padding:calc(var(--cell)*7) var(--gutter) 0;}
  .intro .wrap{max-width:var(--maxw); margin:0 auto;}
  .intro .lead{font-size:clamp(26px,3.4vw,46px); line-height:1.06; letter-spacing:-.02em; font-weight:400; margin:0; max-width:none; opacity:0;}   /* hidden until JS splits it into lines, so the raw text never flashes */
  .intro .lead.ready{opacity:1;}
  .intro .lead em{font-style:normal; color:var(--muted);}
  .intro .lead .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em;}
  .intro .lead .ln > span{display:block; transform:translateY(115%); transition:transform .85s steps(6);}
  .intro .lead.in .ln > span{transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){ .intro .lead{opacity:1;} .intro .lead .ln > span{transform:none;} }
  .intro .by{margin:18px 0 0; color:var(--muted);}

  /* ===== process / protocol doughnuts (sharp, grid-snapped) ===== */
  .proc{position:relative; z-index:2; padding:calc(var(--cell)*7) var(--gutter);}
  .proc .wrap{max-width:var(--maxw); margin:0 auto;}
  .proc .ph{display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--cell)*2); margin-bottom:calc(var(--cell)*3);}
  .proc .phx{display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--cell)*2);}
  .proc .ph h2{font-size:clamp(26px,3.4vw,46px); line-height:1.04; letter-spacing:-.02em; font-weight:400; margin:0;}
  .proc .ph .pd{color:#2a2a2a; font-size:clamp(15px,1.15vw,18px); line-height:1.62; max-width:46ch; margin:0;}
  .proc .procflow{width:100%; aspect-ratio:3/1; margin-bottom:clamp(14px,2.4vh,26px);}
  .proc .procflow canvas{width:100%; height:100%; display:block;}
  .proc .donuts{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  @media(min-width:840px){ .proc .donuts{grid-template-columns:repeat(4,1fr);} }
  .proc .step{display:flex; flex-direction:column; gap:13px;}
  /* flow steps (process + protocol): hovering one lights its stage in the flow above; the other labels recede with it */
  .proc .step{position:relative; transition:opacity .3s ease;}
  @media(hover:hover){
    .proc .donuts:hover .step{opacity:.45;} .proc .donuts .step:hover{opacity:1;}
    /* the cursor hands over to a line of pixels under the active block */
    .proc .donuts .step{cursor:none; padding-bottom:17px;}
    .proc .pxline{position:absolute; left:0; right:0; bottom:0; height:8px; opacity:0; transition:opacity .25s steps(3); pointer-events:none;}
    .proc .step:hover .pxline{opacity:1;}
    .proc .pxline::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(10,10,10,.12) 0 8px,transparent 8px 9px);}
    .proc .pxline i{position:absolute; top:0; left:0; width:62px; height:8px; background:repeating-linear-gradient(90deg,#3F4343 0 8px,transparent 8px 9px); transform:translateX(var(--lx,0px));}
  }
  .proc .donut{position:relative; aspect-ratio:1/1; overflow:hidden; background:#FBFAF7; transition:transform .4s cubic-bezier(.22,1,.36,1);}
  #process .donut, #protocol-parts .donut{background:transparent;}   /* let the page pixel grid show through the process + protocol visuals */
  .proc .donut canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
  .proc .dl{display:flex; align-items:center; gap:9px; line-height:1.25; margin-top:2px;}
  .proc .dl .dn{display:inline-grid; place-items:center; width:22px; height:22px; flex:none; background:#3A5953; color:#FBFAF7; font-family:var(--mono); font-size:9px; letter-spacing:.04em;
    clip-path:polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0);}   /* small pixel-stepped dark square */
  .proc .dl .dt{font-size:15px; font-weight:500;}
  .proc .dd{margin:0; font-size:13.5px; line-height:1.5; color:#2a2a2a;}

  /* read-the-story button */
  .btn{align-self:flex-start;}
  .btn:hover{transform:translateY(-2px);}

  /* lab tool tags */
  .slide.cs .tags{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:14px 22px 0;}
  .slide.cs .tags span{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; line-height:1; padding:7px 13px; background:var(--c,#3A5953); color:var(--tc,#FBFAF7);
    clip-path:polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0);}   /* pixel-stepped corners, no side nubs */
  .slide.cs .tags .claude{--c:#704837; --tc:#FBFAF7;}
  .slide.cs .tags .weave {--c:#6778BA; --tc:#FBFAF7;}
  .slide.cs .tags .framer{--c:#3F4343; --tc:#FBFAF7;}
  .slide.cs .tags .aframe{--c:#E8F288; --tc:#3F4343;}
  .slide.cs .tags .replit{--c:#E1C363; --tc:#3F4343;}
  .slide.cs .tags .comfy {--c:#6c4cf1; --tc:#FBFAF7;}