@font-face{font-family:"Necosmic";src:url("Necosmic.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}
  /* ============================ TOKENS + FLUID REM ============================ */
  :root{
    --c-bg:#ede8e8; --c-light:#fff; --c-dark:#000; --c-text:#000;
    --c-accent:#beff8b; --c-secondary:#d5bafb; --c-placeholder:#c0dfe9; --c-brand:#9dbbc5;
    --radius:1.4rem; --radius-s:1rem;
    --ff:"Inter",-apple-system,system-ui,Helvetica,Arial,sans-serif;
    /* grid + fluid sizing (mobile) */
    --size:390; --columns:6; --gutter:1rem; --width:calc(100vw - 2rem);
    --col:calc((var(--width) - (var(--columns) - 1)*var(--gutter))/var(--columns));
    --col-1:calc(var(--col)*1); --col-3:calc(var(--col)*3 + var(--gutter)*2);
    --col-4:calc(var(--col)*4 + var(--gutter)*3); --col-5:calc(var(--col)*5 + var(--gutter)*4);
    --col-6:calc(var(--col)*6 + var(--gutter)*5); --col-8:calc(var(--col)*8 + var(--gutter)*7);
    --offset:calc((100vw - var(--width))/2); --offset-double:calc(100vw - var(--width));
  }
  @media(min-width:768px){ :root{ --size:1024; --columns:10; --gutter:2rem; --width:calc(100vw - 5rem);} }
  @media(min-width:1024px){ :root{ --size:1920; --columns:10; --gutter:4rem; --width:calc(100vw - 5rem);} }
  html{font-size:calc(100vw/var(--size)*10);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--ff);background:var(--c-bg);color:var(--c-text);line-height:1.4;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img,video{display:block;max-width:100%}
  ul{list-style:none}
  ::selection{background:var(--c-accent)}

  /* type scale (fluid, matches Wembi) */
  .fs-200{font-size:clamp(3.8rem,-.33rem + 10.59vw,20rem);line-height:1.02;letter-spacing:-.02em}
  .fs-130{font-size:clamp(3rem,.45rem + 6.54vw,13rem);line-height:1.06;letter-spacing:-.02em}
  .fs-100{font-size:clamp(3rem,1.22rem + 4.58vw,10rem);line-height:1.05;letter-spacing:-.02em}
  .fs-70{font-size:clamp(2.6rem,1.73rem + 2.75vw,7rem);line-height:1.1;letter-spacing:-.015em}
  .fs-50{font-size:clamp(2rem,1.6rem + 1.63vw,4.2rem);line-height:1.2;letter-spacing:-.01em}
  .fs-40{font-size:clamp(1.8rem,1.49rem + 1.31vw,3.4rem);line-height:1.3}
  .fs-base{font-size:clamp(1.4rem,1.3rem + .26vw,1.7rem);line-height:1.3}
  .ff-med{font-weight:600}
  .tt-u{text-transform:uppercase}.ta-c{text-align:center}.ta-r{text-align:right}
  .c-accent{color:var(--c-accent)}
  .sp-200{margin-bottom:clamp(10rem,7.45rem + 6.54vw,20rem)}
  .sp-100{margin-bottom:clamp(5rem,3.73rem + 3.27vw,10rem)}
  .sp-60{margin-bottom:clamp(3rem,2.24rem + 1.96vw,6rem)}
  .sp-40{margin-bottom:clamp(2rem,1.49rem + 1.31vw,4rem)}
  .sp-20{margin-bottom:clamp(1.5rem,1.37rem + .33vw,2rem)}

  .container{margin:0 auto;position:relative;width:var(--width)}
  /* text blocks inside a full-width container line up with .wrap text below 1024 */
  @media(max-width:1023.8px){.container > .container.small{width:calc(var(--width) - var(--offset)*2)}
    .ev-sec .container > :not(.s-head){margin-left:var(--offset);margin-right:var(--offset)}}
  .m-br{display:none}
  @media(max-width:767.8px){.m-br{display:inline}.mt-dot{display:none}}
  @media(min-width:1024px){.container{width:calc(var(--width) - var(--offset)*2)}}
  .small{max-width:var(--col-8)}
  section{position:relative}

  /* ============================ REVEAL (scroll-in) ============================ */
  .reveal .mask{clip-path:inset(-15% 0 -22% 0);display:block}
  .reveal .up{display:block;transform:translateY(130%);transition:transform 1s cubic-bezier(.19,1,.22,1) var(--d,0s)}
  .reveal.is-in .up{transform:translateY(0)}
  .reveal-f{opacity:0;transform:translateY(2rem);transition:opacity 1s cubic-bezier(.19,1,.22,1) var(--d,0s),transform 1s cubic-bezier(.19,1,.22,1) var(--d,0s)}
  .reveal-f.is-in{opacity:1;transform:none}
  /* buttery line-by-line reveal (JS splits text into lines) */
  .js-lines .ln-mask{display:block;clip-path:inset(-18% 0 -26% 0)}
  .js-lines .ln{display:block;transform:translateY(134%);transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*.05s)}
  .js-lines.is-in .ln{transform:translateY(0)}
  .js-lines.no-anim .ln{transition:none}


  /* ============================ LOADER ============================ */
  #loader{position:fixed;inset:0;z-index:8000;background:var(--c-accent);color:var(--c-dark);
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  #loader.done{transform:translateY(-101%);transition:transform 1s cubic-bezier(.76,0,.24,1)}
  #loader h3{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.2rem;font-weight:600;text-align:center}
  #loader .mask{display:inline-block;clip-path:inset(-12% 0 -30% 0)}
  #loader .w{display:inline-block;transform:translateY(145%);transition:transform .8s cubic-bezier(.19,1,.22,1) var(--d)}
  #loader.reveal-go .w{transform:translateY(0)}
  #loader .bar{position:absolute;left:var(--offset);bottom:calc(var(--offset) + 3rem);width:calc(100% - var(--offset)*2);height:2px;background:rgba(0,0,0,.25)}
  #loader .bar i{display:block;height:100%;background:#000;transform-origin:left;transform:scaleX(0)}
  #loader .num{position:absolute;left:var(--offset);bottom:var(--offset);font-weight:600}

  /* ============================ FLOATING NAV ============================ */
  .site-nav{position:fixed;left:0;right:0;bottom:calc(var(--offset));margin:0 auto;width:calc(var(--width) - var(--offset-double));
    display:flex;justify-content:center;z-index:2000;pointer-events:none;transition:transform .5s cubic-bezier(.5,0,0,1)}
  .site-nav.hide{transform:translateY(200%)}
  .nav{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background:color-mix(in oklab,var(--c-light) 55%,transparent);
    border-radius:100px;height:6rem;padding:1rem;pointer-events:all;box-shadow:0 .5rem 1.4rem -.8rem rgba(0,0,0,.08)}
  @media(max-width:767.8px){.nav{width:100%}}
  .nav ul{display:flex}
  @media(max-width:767.8px){.nav ul{justify-content:space-between;width:100%}}
  .nav__item{position:relative}
  .nav__item:before{content:"";position:absolute;inset:0;background:var(--c-accent);border-radius:100px;transform:scale(0);transition:transform .5s cubic-bezier(.19,1,.22,1);z-index:0}
  .nav__item.active:before{transform:scale(1)}
  .nav__btn{position:relative;z-index:2;height:4rem;padding:0 3rem;display:flex;align-items:center;font-weight:500;text-transform:capitalize;background:none;border:0;cursor:pointer;color:var(--c-dark);font-family:var(--ff);font-size:inherit}
  .nav__btn span{position:relative;display:flex;line-height:1}

  /* ============================ HERO ============================ */
  .hero{position:relative;margin:var(--offset);width:var(--width);border-radius:var(--radius);overflow:hidden;
    background:var(--c-placeholder);display:flex;flex-direction:column;justify-content:space-between;
    padding:var(--offset-double,2rem);min-height:calc(100svh - var(--offset)*2)}
  .hero{padding:clamp(2rem,3vw,5rem)}
  @media(min-width:768px){.hero{height:190vh;min-height:0}}
  .hero__bg{position:absolute;inset:0;z-index:0;background:var(--c-placeholder)}
  .hero__bg video{width:100%;height:100%;object-fit:cover;display:block}
  /* the ripple canvas stands in for the video; the video keeps playing
     underneath as the texture source. Desktop only — ripple.js bails out
     on coarse pointers, narrow screens and reduced motion. */
  .hero__ripple{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
  .hero__bg.has-ripple video{opacity:0}
  /* The footage stays bright through the middle. A dark scrim holds the
     wordmark at the top; the purple builds through the lower half so the
     mission copy has something to sit on — this clip goes near-white
     there, so the bottom has to carry real weight. Above the ripple. */
  .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(to bottom,
      rgba(16,24,32,.38) 0%, rgba(16,24,32,.10) 19%,
      transparent 33%, rgba(16,24,32,.08) 48%,
      rgba(16,24,32,.32) 72%, rgba(16,24,32,.62) 100%),
    linear-gradient(to bottom,
      rgba(46,28,74,0) 28%, rgba(46,28,74,.17) 52%,
      rgba(46,28,74,.38) 78%, rgba(46,28,74,.56) 100%)}
  /* the wordmark is decorative and sits over an interactive canvas: a
     double-click while playing with the ripple used to select it, and
     ::selection painted the whole 22vw block lime */
  .hero__logo{position:relative;z-index:3;color:var(--c-accent);display:flex;flex-direction:column;align-items:flex-start;line-height:.8;opacity:0;transition:opacity .45s ease;
    -webkit-user-select:none;user-select:none}
  .hero__ripple{-webkit-user-select:none;user-select:none}
  .hero__logo.ready{opacity:1}
  .hero__logo .wm{font-family:"Necosmic",var(--ff);font-weight:400;text-transform:uppercase;display:inline-block;white-space:nowrap;line-height:.8;font-size:22vw;letter-spacing:.01em}
  .hero__logo .sub{font-family:var(--ff);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,2.6vw,3.6rem);letter-spacing:.04em;margin-top:.6em;padding-left:0}
  .hero__content{position:relative;z-index:3;margin-top:clamp(3rem,5vw,7rem);color:var(--c-accent);max-width:var(--col-8)}
  .mini-t{display:flex;gap:var(--gutter);font-weight:500;letter-spacing:.04em}
  .mini-t .idx{min-width:var(--col-1)}
  .exp-no{display:flex;flex-direction:column;line-height:1.15;font-weight:700}
  .steps__head .mini-t{align-items:flex-start}
  .hero__head{margin-top:clamp(1.5rem,2vw,3rem);font-weight:500}
  .hero__sub{margin-top:clamp(1.2rem,1.6vw,2.2rem);font-weight:500}
  .bullet{display:inline-flex;width:var(--col-1);height:1cap;vertical-align:middle;justify-content:space-between;align-items:center;margin-right:var(--gutter);transform:translateY(-.1em)}
  @media(min-width:1024px){.bullet{filter:url(#goo)}}
  .bullet i{width:1.6rem;height:1.6rem;border-radius:3rem;background:var(--c-accent);display:inline-block;scale:0;transition:scale .8s cubic-bezier(.5,0,0,1),transform 1s cubic-bezier(.5,0,0,1) .4s}
  .is-in .bullet i:first-child{scale:1;transform:translateX(calc(var(--col-1)/2 - 50%))}
  .is-in .bullet i:last-child{scale:1;transform:translateX(calc(var(--col-1)/-2 + 50%))}

  /* ============================ SECTION HEAD (numbered) ============================ */
  .s-head{display:flex;justify-content:center;width:100%;border-bottom:1px solid;padding:clamp(3rem,2.24rem + 1.96vw,6rem) 0}
  .s-head__in{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;width:100%;max-width:var(--col-8);font-weight:500}

  /* ============================ MEDIA (gradient placeholders) ============================ */
  .media{position:relative;overflow:hidden;background:var(--c-placeholder)}
  .grad{position:absolute;inset:0;background:
    radial-gradient(60% 60% at 20% 15%, #d5bafb, transparent 60%),
    radial-gradient(55% 55% at 85% 20%, #beff8b, transparent 60%),
    radial-gradient(60% 60% at 75% 90%, #9dbbc5, transparent 60%),
    radial-gradient(50% 50% at 15% 85%, #ffd9a8, transparent 60%),
    var(--c-placeholder);filter:saturate(1.05)}

  /* ============================ PILL STACK (gooey) ============================ */
  .pillcard{position:relative;width:var(--width);margin:0 auto;border-radius:var(--radius);overflow:hidden;background:var(--c-placeholder);
    display:flex;flex-direction:column;aspect-ratio:1870/2500}
  @media(min-width:1024px){.pillcard{aspect-ratio:1870/2000} [data-page="lab"] #layer .pillcard,[data-page="lab"] #contact .pillcard,[data-page="evals"] #contact .pillcard,[data-page="team"] #contact .pillcard,.team-head .pillcard{aspect-ratio:1870/1400}}
  .pillcard .grad{z-index:0}
  .pillcard__bg{position:absolute;inset:0;z-index:0;background:#05060a}
  .pillcard__bg video{width:100%;height:100%;object-fit:cover;display:block}
  .pillcard .container{z-index:2;display:flex;flex-direction:column;height:100%}
  .pills{margin:auto 0;display:flex;justify-content:center}
  .pills-list{display:flex;flex-direction:column;align-items:center;width:fit-content;margin:0 auto}
  @media(min-width:1024px){.pills-list{filter:url(#goo)}}
  .pill{display:flex;align-items:center;justify-content:center;width:fit-content;padding:clamp(1.8rem,2.4vw,3.4rem) clamp(4.5rem,6vw,9rem);background:var(--pbg);color:var(--pc,var(--c-dark));
    border-radius:var(--radius);position:relative;overflow:hidden;transform:translateY(calc(-100% * var(--i))) scale(.3);
    transition:transform .8s cubic-bezier(.5,0,0,1) calc(var(--i)*.09s)}
  .pill:nth-child(2n){border-radius:20rem}
  .is-in .pill{transform:translateY(0) scale(1)}
  .pill span{display:block;white-space:nowrap;font-weight:600;font-size:clamp(2.6rem,1.73rem + 2.75vw,7rem);line-height:.9;transform:translateY(120%);transition:transform .8s cubic-bezier(.5,0,0,1) calc(var(--i)*.09s + .2s)}
  .is-in .pill span{transform:translateY(0)}

  /* ============================ STEPS ============================ */
  .steps{display:flex;flex-direction:column;padding:clamp(6rem,10vw,14rem) var(--offset)}
  .steps__head{width:100%;margin:0 auto clamp(2.4rem,4vw,4.2rem);max-width:calc(var(--width) - var(--offset)*2)}
  .steps__in{display:flex;flex-direction:column;gap:clamp(3rem,5vw,6rem);width:100%;margin:0 auto;max-width:calc(var(--width) - var(--offset)*2)}
  @media(min-width:768px){.steps__in{flex-direction:row;align-items:stretch;gap:var(--col-1)}.steps.rtl .steps__in{flex-direction:row-reverse}}
  .steps__media{display:block;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--c-placeholder);aspect-ratio:720/850;width:100%;cursor:pointer;text-decoration:none}
  a.steps__media{transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s cubic-bezier(.19,1,.22,1)}
  a.steps__media:hover{transform:translateY(-.6rem);box-shadow:0 1.2rem 2.6rem -1.6rem rgba(0,0,0,.18)}
  @media(min-width:768px){.steps__media{width:var(--col-4)}}
  .steps__media .frame{position:absolute;inset:0;opacity:0;transform:scale(1.15);filter:blur(1rem);transition:opacity .5s cubic-bezier(.5,0,0,1),transform .5s cubic-bezier(.5,0,0,1),filter .5s}
  .steps__media .frame.on{opacity:1;transform:scale(1);filter:blur(0)}
  .steps__media .frame video{width:100%;height:100%;object-fit:cover;display:block}
  .steps__content{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(3rem,4vw,5rem);width:100%}
  @media(min-width:768px){.steps__content{width:var(--col-5)}}
  .steps__title{display:flex;flex-direction:column}
  .steps__col{position:relative;padding-bottom:.3em;margin-bottom:.15em}
  .steps__col:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--c-dark)}
  .steps__idx{font-weight:500}
  .steps__heading a{color:inherit;text-decoration:none;display:inline-block}
  .steps__heading span{position:relative;padding:0 1rem;display:inline-block}
  @media(min-width:768px){.steps__heading span{padding:0 2rem}}
  .steps__heading span:before{content:"";position:absolute;left:0;bottom:.05em;height:92%;width:0;background:var(--c-accent);border-radius:var(--radius-s);z-index:-1}
  .is-in .steps__heading span:before{width:100%;transition:width .75s cubic-bezier(.5,0,0,1) .2s}
  .steps__cat{position:relative;overflow:hidden;height:1.5em}
  .steps__cat__in{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.5,0,0,1)}
  .steps__cat__item{height:1.5em;line-height:1.5em}
  .steps__proof{margin-top:clamp(1.6rem,2.4vw,2.4rem);display:flex;gap:.55em;align-items:baseline;font-weight:600;letter-spacing:-.01em;max-width:36ch}
  .steps__proof:before{content:"";flex:none;width:.42em;height:.42em;transform:translateY(-.08em);border-radius:50%;background:var(--c-accent)}
  /* founders (half-and-half, mirrors .steps) */
  .founder{padding:clamp(4rem,7vw,9rem) var(--offset)}
  .founder__in{display:flex;flex-direction:column;gap:clamp(2.5rem,4vw,4rem);width:100%;margin:0 auto;max-width:calc(var(--width) - var(--offset)*2);align-items:center}
  @media(min-width:768px){.founder__in{flex-direction:row;gap:var(--col-1)}.founder.rtl .founder__in{flex-direction:row-reverse}}
  .founder__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--c-placeholder);aspect-ratio:720/850;width:100%;flex:none}
  @media(min-width:768px){.founder__media{width:var(--col-4)}}
  .founder__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .founder__content{width:100%}
  @media(min-width:768px){.founder__content{width:var(--col-6)}}
  .founder__name{font-weight:500;letter-spacing:-.02em;margin-top:.35em}
  .founder__bio{margin-top:clamp(1.5rem,2vw,2.6rem);font-weight:400;max-width:var(--col-5)}
  .steps__desc{position:relative;display:grid}
  .steps__desc p{grid-area:1/1;opacity:0;transition:opacity .5s;color:var(--c-dark)}
  .steps__desc p.on{opacity:1}
  .steps__dots{display:flex;gap:1rem;margin-top:2rem}
  .steps__dots button{width:1.2rem;height:1.2rem;border-radius:50%;border:0;background:rgba(0,0,0,.2);cursor:pointer;transition:background .3s,width .3s;padding:0}
  .steps__dots button.on{background:var(--c-dark);width:3rem;border-radius:1rem}

  /* ============================ EXPERIMENTS (4 half-and-half) ============================ */
  .exp-intro{margin-bottom:clamp(1rem,2vw,3rem)}
  .exp{display:flex;flex-direction:column;gap:clamp(2.5rem,4vw,4rem);padding:clamp(5rem,7vw,9rem) var(--offset)}
  @media(min-width:768px){.exp{flex-direction:row;align-items:center;gap:var(--col-1)}.exp.rtl{flex-direction:row-reverse}}
  .exp__text{width:100%;opacity:0;transform:translateY(2.5rem);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
  @media(min-width:768px){.exp__text{width:var(--col-4)}}
  .exp.is-in .exp__text{opacity:1;transform:none}
  .exp__eyebrow{display:flex;align-items:center;gap:1rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:clamp(1.5rem,2vw,2.5rem);color:var(--c-dark)}
  .exp__eyebrow .dot{width:1rem;height:1rem;border-radius:50%;background:var(--c-accent);flex:none;box-shadow:0 0 0 .4rem color-mix(in oklab,var(--c-accent) 30%,transparent)}
  .exp__name{font-weight:700;letter-spacing:-.03em;line-height:.95}
  .exp__desc{color:var(--c-dark);opacity:.66;margin-top:clamp(1.6rem,2vw,2.6rem);max-width:36ch}
  .exp__gallery{display:flex;gap:clamp(.8rem,1vw,1.4rem);width:100%}
  @media(min-width:768px){.exp__gallery{width:var(--col-5)}}
  .exp__card{flex:1;aspect-ratio:9/16;border-radius:var(--radius-s);overflow:hidden;background:var(--c-placeholder);clip-path:inset(6% round var(--radius-s))}
  .exp__card video{width:100%;height:100%;object-fit:cover;display:block}
  .exp.is-in .exp__card{clip-path:inset(0 round var(--radius-s));transition:clip-path .9s cubic-bezier(.5,0,0,1) calc(var(--ci,0)*.12s)}

  /* ============================ ACCORDION (WHERE) ============================ */
  .acc-wrap{padding:clamp(6rem,9vw,12rem) 0}
  .acc-media{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;margin:0 auto clamp(4rem,6vw,8rem);width:var(--col-6)}
  .acc-media video{width:100%;height:100%;object-fit:cover;display:block}
  @media(min-width:1024px){.acc-media{width:var(--col-4)}}
  .acc{position:relative;max-width:var(--col-8);margin:0 auto}
  .acc__item{border-bottom:1px solid var(--c-dark)}
  .acc__head{width:100%;background:none;border:0;font-family:var(--ff);font-size:inherit;color:var(--c-dark);cursor:pointer;
    text-align:center;padding:.35em 0;font-weight:500;position:relative}
  .acc__head:hover{color:#333}
  .acc__panel{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.5,0,0,1)}
  .acc__panel__in{padding:0 var(--gutter) clamp(2rem,3vw,3.5rem);max-width:var(--col-6);margin:0 auto;text-align:center;color:#333}
  .acc__item.open .acc__head{color:var(--c-dark)}

  /* ============================ FAQ ============================ */
  .faq{background:var(--c-light);border-radius:var(--radius);width:var(--width);margin:0 auto;padding:clamp(6rem,9vw,12rem) 0 clamp(10rem,15vw,20rem);position:relative}
  .faq__intro{max-width:var(--col-6);margin:0 auto clamp(4rem,6vw,7rem);text-align:center}
  .tabs{width:var(--col-6);max-width:70rem;margin:0 auto}
  .tabs__labels{display:flex;padding-left:2rem}
  .tabs__label{background:var(--c-bg);border:1px solid var(--c-dark);border-bottom:0;border-top-left-radius:var(--radius-s);border-top-right-radius:var(--radius-s);
    padding:1.2rem 2.4rem .8rem;cursor:pointer;display:flex;align-items:center;gap:.8rem;transform:translateX(calc(var(--i)*-1.6rem));font-weight:500}
  .tabs__label.on{background:var(--c-light)}
  .tabs__label i{width:1rem;height:1rem;border-radius:1rem;background:var(--c-accent);transform:scale(0);transition:transform .3s cubic-bezier(.5,0,0,1)}
  .tabs__label.on i{transform:scale(1)}
  .tabs__body{border:1px solid var(--c-dark);border-radius:var(--radius-s);border-top-left-radius:0;padding:clamp(2rem,3vw,3.5rem);transform:translateY(-1px);min-height:34rem;display:flex;flex-direction:column}
  .tabs__q{border-bottom:1px solid var(--c-dark);padding-bottom:1.5rem;margin-bottom:2rem;font-weight:500}
  .tabs__q .label{font-size:clamp(1.4rem,1.3rem + .26vw,1.7rem);opacity:.6;display:block;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.06em}
  .tabs__panes{position:relative;display:grid;flex:1}
  .tabs__pane{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .4s;color:#222}
  .tabs__pane.on{opacity:1;pointer-events:auto}
  .tabs__nav{display:flex;gap:.8rem;margin-top:auto;padding-top:3rem}
  .tabs__nav button{flex:none;width:5rem;height:5rem;border-radius:.6rem;background:var(--c-accent);border:0;cursor:pointer;display:grid;place-items:center;transition:transform .3s}
  .tabs__nav button:active{transform:scale(.88)}
  .tabs__nav .cta{flex:1;display:flex;align-items:center;padding:0 2.4rem;font-weight:600}
  .tabs__nav svg{width:2.4rem;height:2.4rem}
  .tabs__nav .prev svg{transform:rotate(180deg)}

  /* ============================ CONTACT ============================ */
  .contact{padding:clamp(4rem,8vw,11rem) 0 clamp(8rem,14vw,20rem)}
  .contact__title{max-width:var(--col-8);margin:0 auto clamp(5rem,7vw,10rem);text-align:center;font-weight:500}
  .contact .pills-list{filter:none}
  @media(min-width:1024px){.contact .pills-list{filter:url(#goo)}}
  .contact .pill{cursor:pointer}
  .contact .pill a{color:inherit;display:block}

  /* ============================ FOOTER ============================ */
  footer{padding:var(--offset) var(--offset) calc(var(--offset) + 8rem);overflow:hidden}
  .foot{display:flex;flex-direction:column;gap:clamp(3rem,4vw,6rem)}
  @media(min-width:768px){.foot{display:grid;grid-template-columns:1fr 1fr;gap:0}}
  .foot__col__t{border-bottom:1px solid var(--c-dark);padding-bottom:1.5rem;margin-bottom:clamp(3rem,4vw,6rem);font-weight:500}
  @media(min-width:768px){.foot__col:nth-child(2) .foot__col__t{border-left:1px solid var(--c-dark);padding-left:var(--gutter)}}
  .foot__col__c{color:#111}
  @media(min-width:768px){.foot__col__c{margin-left:var(--gutter)}.foot__col:nth-child(2) .foot__col__c{border-left:1px solid var(--c-dark);padding-left:var(--gutter);margin-left:0}}
  .foot__col__c a{display:block;padding:.4rem 0}
  .foot__col__c a:hover{opacity:.6}
  .foot__bottom{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;margin-top:clamp(4rem,6vw,8rem);padding-top:2rem;border-top:1px solid var(--c-dark);font-weight:500}
  .foot__bottom ul{display:flex;gap:var(--gutter)}
  .foot__bottom a:hover{opacity:.6}
  .under{position:relative;display:inline-block}
  .under:after{content:"";position:absolute;left:0;bottom:-.1em;width:100%;height:.08em;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.19,1,.22,1)}
  .under:hover:after{transform:scaleX(1);transform-origin:left}

  /* ============================ MOBILE REFINEMENTS ============================ */
  @media(max-width:767.8px){
    /* hero: keep the logo from clipping at the top + fit full screen */
    .hero{padding-top:clamp(4rem,11vw,7rem)}
    .hero__logo .wm{line-height:.94}
    .hero__content{margin-top:clamp(2rem,4vw,3rem)}
    .hero{padding-bottom:1.4rem}
    /* pillcard modules (How / Why / About): taller, centered pills + inset corner numbers */
    .pillcard{aspect-ratio:auto;min-height:82svh}
    .pillcard .container{flex:1;min-height:0;padding-left:clamp(1.8rem,6vw,2.6rem);padding-right:clamp(1.8rem,6vw,2.6rem)}
    /* accordion (Where): even, generous spacing on every word */
    .acc__head{padding:.72em 0}
    .where .s-head{margin-bottom:0}
    /* experiments: bigger, more readable description text */
    .steps__desc{font-size:clamp(2.5rem,6.6vw,3.1rem);line-height:1.28}
  }

  /* ======================================================================
     V2 COMPONENTS — mission homepage, experiments page, team page
     ====================================================================== */

  /* ---------- shared ---------- */
  .wrap{width:100%;margin:0 auto;max-width:calc(var(--width) - var(--offset)*2)}
  .lead{max-width:var(--col-6);color:#222}
  .eyebrow{display:flex;align-items:center;gap:1rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .eyebrow .dot{width:1rem;height:1rem;border-radius:50%;background:var(--c-accent);flex:none;
    box-shadow:0 0 0 .4rem color-mix(in oklab,var(--c-accent) 30%,transparent)}
  .is-tbd{outline:2px dashed #c2452d;outline-offset:.8rem;border-radius:.4rem}
  .is-tbd:before{content:"PLACEHOLDER — supply real copy before launch";display:block;
    font-size:1.2rem;font-weight:700;letter-spacing:.08em;color:#c2452d;margin-bottom:.8rem;text-transform:uppercase}

  /* ---------- page head (sub-pages) ---------- */
  .team-head{padding-top:var(--offset)}
  .page-head{padding:clamp(9rem,14vw,18rem) 0 clamp(3rem,5vw,6rem)}
  .page-head__t{font-weight:500;letter-spacing:-.02em;max-width:var(--col-8);margin-top:clamp(1.5rem,2vw,3rem)}
  .page-head__sub{margin-top:clamp(2rem,3vw,3.5rem);max-width:var(--col-5);color:#222}

  /* ======================================================================
     n.001 THE PROBLEM — four large artboards, two per row. Each lies flat
     and two-dimensional, rotates into an isometric stack of four labelled
     sheets, makes its decisions in the open, and lays back down resolved.

     Every sheet in every artboard carries different content, and no two
     artboards share a construction.

     10s cycle:  0-12% flat · 12-40% rotate open · 40-62% decisions
                 62-84% rotate closed · 84-100% flat, resolved
     ====================================================================== */
  .prob{padding:clamp(5rem,8vw,11rem) 0}
  .prob__top{margin-bottom:clamp(3.5rem,5vw,6rem)}
  .prob__intro{max-width:var(--col-6)}
  @media(min-width:768px){ .prob__head{white-space:nowrap} }
  .prob__grid{display:grid;gap:clamp(2.5rem,3vw,var(--gutter));grid-template-columns:1fr}
  /* on one column, each graphic needs clear air from the next pair */
  @media(max-width:767.8px){ .prob__grid{gap:clamp(6rem,15vw,9rem)} }
  @media(min-width:768px){.prob__grid{grid-template-columns:repeat(2,1fr)}}
  .prob__card{container-type:inline-size;display:flex;flex-direction:column;
    gap:clamp(1.6rem,1.8vw,2.2rem)}
  .prob__card:nth-child(1){--t:0s;--pane:#f2eefc}
  .prob__card:nth-child(2){--t:-2.5s;--pane:#ebf1fd}
  .prob__card:nth-child(3){--t:-5s;--pane:#e8f5fb}
  .prob__card:nth-child(4){--t:-7.5s;--pane:#e9f6f3}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase}

  /* ---- stage ---- */
  .prob__demo{position:relative;aspect-ratio:4/3;border-radius:var(--radius-s);background:var(--pane,#f1f0f3);
    overflow:hidden;display:block;perspective:2400px;perspective-origin:50% 44%}

  /* the fanned stack needs vertical room; a 4:3 panel clips it once the grid
     drops to one or two columns, so the panel gets taller and the stack opens
     a little less far */
  .prob__demo{--lift:108px;--sc:.5;--ty:23%}
  @media(max-width:1023.8px){ .prob__demo{aspect-ratio:1/1;--lift:94px;--sc:.56;--ty:14%} }
  @media(min-width:768px) and (max-width:1023.8px){ .prob__demo{--lift:62px;--sc:.5;--ty:12%} }
  @media(max-width:600px){    .prob__demo{aspect-ratio:4/5;--lift:94px;--sc:.62;--ty:18%} }
  .d3__stack{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;
    animation:tilt 10s cubic-bezier(.55,0,.15,1) infinite;animation-delay:var(--t,0s)}
  @keyframes tilt{
    0%,12%   {transform:translateY(0) rotateX(0deg) rotateZ(0deg) scale(1)}
    40%,62%  {transform:translateY(var(--ty,23%)) rotateX(47deg) rotateZ(-26deg) scale(var(--sc,.5))}
    84%,100% {transform:translateY(0) rotateX(0deg) rotateZ(0deg) scale(1)}
  }
  .d3__ly{position:absolute;inset:13% 11%;transform-style:preserve-3d;border-radius:.5rem;
    background-color:rgba(255,255,255,.985);border:1px solid rgba(0,0,0,.13);
    box-shadow:0 1rem 2rem -1.4rem rgba(0,0,0,.26);overflow:hidden;
    animation:lift 10s cubic-bezier(.55,0,.15,1) infinite,glass 10s ease infinite;
    animation-delay:calc(var(--t,0s) + var(--i)*.06s),var(--t,0s)}
  @keyframes glass{
    0%,14%   {background-color:rgba(255,255,255,.985)}
    40%,62%  {background-color:rgba(255,255,255,.40)}
    84%,100% {background-color:rgba(255,255,255,.985)}
  }
  @keyframes lift{
    0%,12%   {transform:translate3d(0,0,0)}
    40%,62%  {transform:translate3d(0,0,calc(var(--i)*var(--lift,108px)))}
    84%,100% {transform:translate3d(0,0,0)}
  }
  .d3__ly--top{display:flex;flex-direction:column;justify-content:center;
    padding:clamp(2.6rem,7.6cqw,7.6rem) clamp(1.6rem,4.6cqw,4.6rem) clamp(1.6rem,4.6cqw,4.6rem)}

  .d3__chip{position:absolute;z-index:3;left:3.5%;top:calc(28% - var(--i)*8.5%);white-space:nowrap;
    font-size:clamp(.68rem,1.02cqw,1.02rem);background:var(--c-dark);color:var(--c-light);
    border-radius:.25rem;padding:.4em .7em}
  .d3__hand{position:absolute;z-index:4;width:1.1cqw;height:1.1cqw;min-width:6px;min-height:6px;border-radius:50%}
  .d3__hand--a{left:-.55cqw;top:-.55cqw;background:var(--c-dark)}
  .d3__hand--b{right:-.55cqw;bottom:-.55cqw;background:var(--c-light);box-shadow:inset 0 0 0 2px var(--c-dark)}

  /* ---- decisions ---- */
  .d3__dec{position:absolute;inset:13% 11%;pointer-events:none;opacity:0;
    animation:lift 10s cubic-bezier(.55,0,.15,1) infinite,decWin 10s ease infinite;
    animation-delay:calc(var(--t,0s) + var(--i)*.06s),var(--t,0s)}
  @keyframes decWin{0%,30%{opacity:0} 40%,60%{opacity:1} 70%,100%{opacity:0}}
  .d3__dec i{position:absolute;left:var(--x);top:var(--y);width:1cqw;height:1cqw;min-width:6px;min-height:6px;
    transform:translate(-50%,-50%);animation:blink .62s steps(2,jump-none) infinite;
    animation-delay:calc(var(--k)*.11s)}
  .d3__dec i:before,.d3__dec i:after{content:"";position:absolute;background:var(--c-dark);opacity:.6}
  .d3__dec i:before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}
  .d3__dec i:after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}
  @keyframes blink{0%,45%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
                   46%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .d3__dec i:nth-child(3n):before,.d3__dec i:nth-child(3n):after{background:#2f8f4e;opacity:1}

  /* ---- paired copy ---- */
  .swap{display:grid}
  .swap > *{grid-area:1/1}
  .raw{animation:fadeRaw 10s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--t,0s)}
  .alt{animation:fadeAlt 10s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--t,0s);opacity:0}
  @keyframes fadeRaw{0%,74%{opacity:1} 78%,97%{opacity:0} 100%{opacity:1}}
  @keyframes fadeAlt{0%,74%{opacity:0} 78%,97%{opacity:1} 100%{opacity:0}}

  /* ======================= per-layer constructions ======================= */
  .lay{position:absolute;inset:0}
  /* horizontal rules — a baseline bed */
  .lay-rules{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 7.5%)}
  /* a real artboard grid, both axes */
  .lay-grid{background-image:linear-gradient(to right,rgba(0,0,0,.14) 1px,transparent 1px),
                            linear-gradient(to bottom,rgba(0,0,0,.14) 1px,transparent 1px);
    background-size:calc(100%/7) calc(100%/6);background-position:center}
  /* type blocks: rectangles standing in for lines of setting */
  .lay-blocks{display:flex;flex-direction:column;justify-content:center;gap:5.5%;padding:0 11%}
  .lay-blocks span{border-radius:2px;background:rgba(0,0,0,.34);height:8%;width:var(--w,100%)}
  .lay-blocks span.lead{height:17%;background:rgba(0,0,0,.62)}
  /* the measuring pass: dimension lines with ticks and read-outs */
  .lay-measure{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;
    font-size:clamp(.72rem,1.55cqw,1.55rem)}
  .mz{position:absolute;background:rgba(0,0,0,.78)}
  .mz b{position:absolute;font-size:1em;letter-spacing:.06em;color:rgba(0,0,0,.82);
    background:rgba(255,255,255,.92);padding:0 .35em;border-radius:2px}
  .mz--h{left:var(--l);right:calc(100% - var(--r));top:var(--y);height:1px}
  .mz--h:before,.mz--h:after{content:"";position:absolute;top:-4.5px;width:1px;height:10px;background:inherit}
  .mz--h:before{left:0} .mz--h:after{right:0}
  .mz--h b{left:50%;top:-1.5em;transform:translateX(-50%)}
  .mz--v{top:var(--t);bottom:calc(100% - var(--b));left:var(--x);width:1px}
  .mz--v:before,.mz--v:after{content:"";position:absolute;left:-4.5px;height:1px;width:10px;background:inherit}
  .mz--v:before{top:0} .mz--v:after{bottom:0}
  .mz--v b{left:1.1em;top:50%;transform:translateY(-50%)}
  /* vertical column bands */
  .lay-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:1.6%;padding:6% 5%}
  .lay-cols span{background:color-mix(in oklab,var(--c-secondary) 88%,transparent);border-radius:2px}
  /* dashed margin frame */
  .lay-frame{inset:9% 8%;border:1px dashed rgba(0,0,0,.5);border-radius:3px}
  /* kerning ticks with x-height and cap-height guides */
  .lay-ticks{display:flex;align-items:stretch;gap:3.2%;padding:12% 8%}
  .lay-ticks span{flex:1;background:rgba(0,0,0,.14);border-left:1px solid rgba(0,0,0,.5)}
  .lay-guide{position:absolute;left:6%;right:6%;height:1px;background:var(--c-accent)}
  .lay-guide--x{top:52%} .lay-guide--cap{top:30%} .lay-guide--base{top:70%}
  .lay-vline{position:absolute;top:8%;bottom:8%;left:9%;width:1px;background:var(--c-accent)}
  /* solid blocks standing in for the visual mass of the words */
  .lay-mass{display:flex;flex-direction:column;justify-content:center;gap:7%;padding:0 9%}
  .lay-mass span{height:15%;border-radius:3px;background:rgba(0,0,0,.72);width:var(--w)}
  .lay-mass span.light{background:rgba(0,0,0,.3);height:9%}
  /* ghosted size ladder of words */
  .lay-ghost{display:flex;flex-direction:column;justify-content:center;gap:4%;padding:0 8%;
    font-weight:600;color:rgba(0,0,0,.26);letter-spacing:-.02em}
  /* a ladder of decreasing bars */
  .lay-ladder{display:flex;flex-direction:column;justify-content:center;gap:5%;padding:0 9%}
  .lay-ladder span{height:4.5%;background:rgba(0,0,0,.42);border-radius:2px;width:var(--w)}
  /* weight swatches */
  .lay-weights{display:flex;flex-direction:column;justify-content:center;gap:6%;padding:0 9%}
  .lay-weights span{height:9%;border-radius:2px;background:rgba(0,0,0,var(--o))}
  .lay-weights{--boost:1}
  /* numbered reading order */
  .lay-order{display:flex;flex-direction:column;justify-content:center;gap:9%;padding:0 9%}
  .lay-order span{display:flex;align-items:center;gap:3%;font-weight:700;color:rgba(0,0,0,.6)}
  .lay-order b{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;
    border:1px solid rgba(0,0,0,.35);font-weight:600}
    .lay-order i{flex:1;height:2px;background:rgba(0,0,0,.28);border-radius:2px}
  /* funnel */
  .lay-funnel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;padding:0 10%}
  .lay-funnel span{height:13%;border-radius:3px;width:var(--w);
    background:color-mix(in oklab,var(--c-brand) 92%,transparent)}
  /* audience scatter */
  .lay-scatter span{position:absolute;left:var(--x);top:var(--y);width:1.6cqw;height:1.6cqw;
    min-width:6px;min-height:6px;border-radius:50%;background:rgba(0,0,0,.42);transform:translate(-50%,-50%)}
  /* candidate offers: each part of the offer is colour-coded and keeps being
     moved around the artboard until one arrangement is chosen.
       lime = the claim · slate = the body · lilac = the proof · black = the ask */
  .lay-offer{position:absolute;inset:11% 10%}
  .lay-offer span{position:absolute;border-radius:3px;
    animation-duration:10s;animation-timing-function:steps(1,end);animation-iteration-count:infinite;
    animation-delay:calc(var(--t,0s) + var(--o,0)*-1.3s)}
  .o-head {background:var(--c-accent);animation-name:shHead}
  .o-body {background:color-mix(in oklab,var(--c-brand) 88%,transparent);animation-name:shBody}
  .o-proof{background:color-mix(in oklab,var(--c-secondary) 88%,transparent);animation-name:shProof}
  .o-cta  {background:var(--c-dark);animation-name:shCta}
  @keyframes shHead{
    0%,12%  {left:0;top:4%;width:72%;height:20%}
    25%{left:0;top:40%;width:86%;height:24%}
    38%{left:30%;top:0;width:70%;height:22%}
    51%{left:0;top:20%;width:58%;height:34%}
    64%{left:0;top:0;width:92%;height:18%}
    72%{left:12%;top:30%;width:74%;height:26%}
    78%,100%{left:0;top:4%;width:88%;height:22%}
  }
  @keyframes shBody{
    0%,12%  {left:0;top:30%;width:92%;height:10%}
    25%{left:0;top:8%;width:64%;height:12%}
    38%{left:0;top:28%;width:62%;height:14%}
    51%{left:62%;top:20%;width:38%;height:30%}
    64%{left:0;top:24%;width:70%;height:12%}
    72%{left:12%;top:62%;width:80%;height:10%}
    78%,100%{left:0;top:32%;width:76%;height:12%}
  }
  @keyframes shProof{
    0%,12%  {left:0;top:46%;width:64%;height:10%}
    25%{left:0;top:72%;width:50%;height:12%}
    38%{left:66%;top:28%;width:34%;height:26%}
    51%{left:0;top:60%;width:56%;height:10%}
    64%{left:0;top:42%;width:46%;height:10%}
    72%{left:12%;top:14%;width:60%;height:10%}
    78%,100%{left:0;top:50%;width:62%;height:10%}
  }
  @keyframes shCta{
    0%,12%  {left:0;top:68%;width:36%;height:16%}
    25%{left:60%;top:72%;width:40%;height:14%}
    38%{left:0;top:62%;width:44%;height:16%}
    51%{left:0;top:0;width:30%;height:14%}
    64%{left:54%;top:62%;width:40%;height:16%}
    72%{left:12%;top:78%;width:52%;height:14%}
    78%,100%{left:0;top:70%;width:40%;height:16%}
  }
  /* the selector hops between candidates, fast, then locks onto one */
  .d3__optwin{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;
    animation:optWin 10s ease infinite;animation-delay:var(--t,0s)}
  @keyframes optWin{0%,28%{opacity:0} 33%,47%{opacity:1} 50%,100%{opacity:0}}
  .d3__ring{position:absolute;inset:0;border:2px solid var(--c-dark);border-radius:.5rem;
    animation:ringFlash .36s steps(1,end) infinite;animation-delay:calc(var(--o)*.12s)}
  @keyframes ringFlash{0%,32%{opacity:1} 33%,100%{opacity:0}}
  .d3__ly--rej{animation:lift 10s cubic-bezier(.55,0,.15,1) infinite,glass 10s ease infinite,
    rejectOut 10s ease infinite;
    animation-delay:calc(var(--t,0s) + var(--i)*.06s),var(--t,0s),var(--t,0s)}
  @keyframes rejectOut{0%,50%{opacity:1} 57%,88%{opacity:.1} 94%,100%{opacity:1}}
  .d3__ly--dim{animation:lift 10s cubic-bezier(.55,0,.15,1) infinite,glass 10s ease infinite,
    dimOut 10s ease infinite;
    animation-delay:calc(var(--t,0s) + var(--i)*.06s),var(--t,0s),var(--t,0s)}
  @keyframes dimOut{0%,50%{opacity:1} 57%,88%{opacity:.42} 94%,100%{opacity:1}}
  .d3__ly--sel:after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
    border:2px solid var(--c-accent);border-radius:.5rem;opacity:0;
    animation:selRing 10s ease infinite;animation-delay:var(--t,0s)}
  @keyframes selRing{0%,48%{opacity:0} 53%,88%{opacity:1} 94%,100%{opacity:0}}
  /* proof chips */
  .lay-proof{display:flex;flex-wrap:wrap;align-content:center;gap:4%;padding:0 9%}
  .lay-proof span{background:rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.26);border-radius:100px;
    padding:.5em 1em;font-weight:600;color:rgba(0,0,0,.66)}
  .lay-cq{font-size:clamp(.66rem,1.32cqw,1.32rem)}


  /* ---- 01 typography: the live setting ---- */
  .d-type__h{font-weight:600;font-size:clamp(1.1rem,4cqw,4rem);
    animation:typeSet 10s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--t,0s)}
  @keyframes typeSet{
    0%,12%  {letter-spacing:.2em;word-spacing:.5em;line-height:2}
    19%{letter-spacing:.07em;word-spacing:.22em;line-height:1.45}
    26%{letter-spacing:.15em;word-spacing:.38em;line-height:1.75}
    33%{letter-spacing:.01em;word-spacing:.1em;line-height:1.18}
    40%{letter-spacing:.11em;word-spacing:.3em;line-height:1.6}
    47%{letter-spacing:-.005em;word-spacing:.06em;line-height:1.1}
    54%{letter-spacing:.08em;word-spacing:.2em;line-height:1.4}
    61%{letter-spacing:.03em;word-spacing:.12em;line-height:1.22}
    68%{letter-spacing:.12em;word-spacing:.26em;line-height:1.55}
    74%{letter-spacing:.015em;word-spacing:.08em;line-height:1.14}
    78%,100%{letter-spacing:-.025em;word-spacing:normal;line-height:1.02}
  }
  .d-type__q{margin-top:.8em;opacity:.5;font-size:clamp(.74rem,2cqw,2rem)}

  /* ---- 02 layout: alternative compositions being weighed ----
     Each sheet is a different arrangement of the same material. The point is
     the choosing, not the correcting: unequal weights, deliberate negative
     space, balance that does not come from an even grid. */
  .comp{position:absolute;inset:9% 8%;display:grid;grid-template-columns:repeat(6,1fr);
    grid-template-rows:repeat(4,1fr);gap:3.5%}
  .comp i{border-radius:2px;display:block;background:color-mix(in oklab,var(--c-brand) 16%,transparent);
    border:1.5px solid rgba(0,0,0,.34)}
  /* the chosen composition is free-positioned so its blocks can slide to new
     places and sizes while the balance is worked out, then settle at the lock.
     Smooth easing here on purpose: Layout glides, Strategy snaps. */
  .d3__ly--top .comp{display:block}
  .d3__ly--top .comp i{position:absolute;background:var(--c-brand);border-color:transparent;
    animation-duration:10s;animation-timing-function:cubic-bezier(.5,0,.2,1);
    animation-iteration-count:infinite;animation-delay:var(--t,0s)}
  .d3__ly--top .comp i:nth-of-type(2){background:var(--c-accent)}
  .d3__ly--top .comp i:nth-of-type(4){background:var(--c-secondary)}
  .d3__ly--top .comp i:nth-of-type(5){background:color-mix(in oklab,var(--c-brand) 62%,transparent)}
  .d3__ly--top .comp i:nth-of-type(1){animation-name:slide1}
  .d3__ly--top .comp i:nth-of-type(2){animation-name:slide2}
  .d3__ly--top .comp i:nth-of-type(3){animation-name:slide3}
  .d3__ly--top .comp i:nth-of-type(4){animation-name:slide4}
  .d3__ly--top .comp i:nth-of-type(5){animation-name:slide5}
  .d3__ly--top .comp i:nth-of-type(6){animation-name:slide6}
  @keyframes slide1{
    0%,12%{left:0;top:0;width:48%;height:47%}      24%{left:0;top:24%;width:62%;height:52%}
    36%{left:26%;top:0;width:48%;height:40%}       48%{left:0;top:0;width:36%;height:62%}
    60%{left:0;top:30%;width:55%;height:46%}       72%{left:8%;top:8%;width:50%;height:50%}
    78%,100%{left:0;top:0;width:48%;height:47%}
  }
  @keyframes slide2{
    0%,12%{left:52%;top:0;width:48%;height:22%}    24%{left:0;top:0;width:40%;height:20%}
    36%{left:52%;top:44%;width:48%;height:24%}     48%{left:38%;top:0;width:62%;height:18%}
    60%{left:57%;top:0;width:43%;height:30%}       72%{left:0;top:62%;width:46%;height:20%}
    78%,100%{left:52%;top:0;width:48%;height:22%}
  }
  @keyframes slide3{
    0%,12%{left:52%;top:26%;width:31%;height:47%}  24%{left:64%;top:24%;width:36%;height:40%}
    36%{left:0;top:44%;width:48%;height:30%}       48%{left:38%;top:22%;width:38%;height:44%}
    60%{left:0;top:0;width:54%;height:26%}         72%{left:60%;top:30%;width:40%;height:44%}
    78%,100%{left:52%;top:26%;width:31%;height:47%}
  }
  @keyframes slide4{
    0%,12%{left:87%;top:26%;width:13%;height:47%}  24%{left:0;top:80%;width:30%;height:20%}
    36%{left:84%;top:0;width:16%;height:40%}       48%{left:78%;top:22%;width:22%;height:44%}
    60%{left:56%;top:32%;width:18%;height:40%}     72%{left:88%;top:40%;width:12%;height:50%}
    78%,100%{left:87%;top:26%;width:13%;height:47%}
  }
  @keyframes slide5{
    0%,12%{left:0;top:51%;width:48%;height:49%}    24%{left:34%;top:66%;width:40%;height:34%}
    36%{left:0;top:78%;width:48%;height:22%}       48%{left:0;top:68%;width:34%;height:32%}
    60%{left:58%;top:62%;width:42%;height:38%}     72%{left:0;top:32%;width:38%;height:26%}
    78%,100%{left:0;top:51%;width:48%;height:49%}
  }
  @keyframes slide6{
    0%,12%{left:52%;top:77%;width:48%;height:23%}  24%{left:76%;top:0;width:24%;height:20%}
    36%{left:52%;top:72%;width:30%;height:28%}     48%{left:38%;top:70%;width:62%;height:30%}
    60%{left:0;top:80%;width:54%;height:20%}       72%{left:62%;top:62%;width:38%;height:36%}
    78%,100%{left:52%;top:77%;width:48%;height:23%}
  }
  /* thirds, the guides a composition gets judged against */
  .comp-guides{position:absolute;inset:9% 8%;pointer-events:none;
    background-image:linear-gradient(to right,rgba(0,0,0,.16) 1px,transparent 1px),
                     linear-gradient(to bottom,rgba(0,0,0,.16) 1px,transparent 1px);
    background-size:calc(100%/3) calc(100%/3)}
  /* each option carries its own accent so no two planes read alike */
  .comp--a i:nth-of-type(2){background:color-mix(in oklab,var(--c-accent) 62%,transparent)}
  .comp--a i:nth-of-type(5){background:color-mix(in oklab,var(--c-accent) 28%,transparent)}
  .comp--b i:nth-of-type(1){background:color-mix(in oklab,var(--c-secondary) 58%,transparent)}
  .comp--b i:nth-of-type(4){background:color-mix(in oklab,var(--c-secondary) 30%,transparent)}
  .comp--b i:nth-of-type(6){background:color-mix(in oklab,var(--c-secondary) 20%,transparent)}
  .comp--c i:nth-of-type(3){background:color-mix(in oklab,var(--c-placeholder) 75%,transparent)}
  .comp--c i:nth-of-type(5){background:color-mix(in oklab,var(--c-placeholder) 45%,transparent)}
  /* option A — weight left, wide top band */
  .comp--a i:nth-of-type(1){grid-area:1/1/3/4}
  .comp--a i:nth-of-type(2){grid-area:1/4/2/7}
  .comp--a i:nth-of-type(3){grid-area:2/4/4/6}
  .comp--a i:nth-of-type(4){grid-area:2/6/4/7}
  .comp--a i:nth-of-type(5){grid-area:3/1/5/4}
  .comp--a i:nth-of-type(6){grid-area:4/4/5/7}
  /* option B — tall left column, mass in the middle */
  .comp--b i:nth-of-type(1){grid-area:1/1/4/3}
  .comp--b i:nth-of-type(2){grid-area:1/3/3/6}
  .comp--b i:nth-of-type(3){grid-area:1/6/2/7}
  .comp--b i:nth-of-type(4){grid-area:2/6/4/7}
  .comp--b i:nth-of-type(5){grid-area:3/3/4/6}
  .comp--b i:nth-of-type(6){grid-area:4/1/5/7}
  /* option C — the even, obvious one */
  .comp--c i:nth-of-type(1){grid-area:1/1/3/3}
  .comp--c i:nth-of-type(2){grid-area:1/3/3/5}
  .comp--c i:nth-of-type(3){grid-area:1/5/3/7}
  .comp--c i:nth-of-type(4){grid-area:3/1/5/3}
  .comp--c i:nth-of-type(5){grid-area:3/3/5/5}
  .comp--c i:nth-of-type(6){grid-area:3/5/5/7}
  /* the balance read on the chosen composition */
  .comp-axis{position:absolute;top:7%;bottom:7%;left:50%;width:1px;background:var(--c-dark);opacity:.5}
  .comp-axis:before,.comp-axis:after{content:"";position:absolute;left:-3.5px;width:8px;height:1px;background:var(--c-dark)}
  .comp-axis:before{top:0} .comp-axis:after{bottom:0}
  .comp-w{position:absolute;left:var(--x);top:var(--y);width:var(--s,1.5cqw);height:var(--s,1.5cqw);
    min-width:7px;min-height:7px;border-radius:50%;border:1.5px solid var(--c-dark);opacity:.6;
    transform:translate(-50%,-50%)}

  /* ---- 03 hierarchy: the copy ---- */
  .d-hier p{font-weight:600;font-size:clamp(.78rem,2.25cqw,2.25rem);line-height:1.5;opacity:.85;
    animation-duration:10s;animation-timing-function:steps(1,end);
    animation-iteration-count:infinite;animation-delay:var(--t,0s)}
  .d-hier p:nth-of-type(1){animation-name:hier1}
  .d-hier p:nth-of-type(2){animation-name:hier2}
  .d-hier p:nth-of-type(3){animation-name:hier3}
  @keyframes hier1{
    0%,12%  {font-size:clamp(.78rem,2.25cqw,2.25rem);line-height:1.5;letter-spacing:0;opacity:.85;margin-bottom:0}
    22%{font-size:clamp(1.1rem,4cqw,4rem);line-height:1.04;letter-spacing:-.025em;opacity:1;margin-bottom:.4em}
    34%{font-size:clamp(.78rem,2.25cqw,2.25rem);line-height:1.5;letter-spacing:0;opacity:.85;margin-bottom:0}
    46%{font-size:clamp(1.1rem,4cqw,4rem);line-height:1.04;letter-spacing:-.025em;opacity:1;margin-bottom:.4em}
    58%{font-size:clamp(.78rem,2.25cqw,2.25rem);line-height:1.5;letter-spacing:0;opacity:.85;margin-bottom:0}
    70%{font-size:clamp(1.1rem,4cqw,4rem);line-height:1.04;letter-spacing:-.025em;opacity:1;margin-bottom:.4em}
    78%,100% {font-size:clamp(1.1rem,4cqw,4rem);line-height:1.04;letter-spacing:-.025em;opacity:1;margin-bottom:.4em}
  }
  @keyframes hier2{
    0%,12%  {font-size:clamp(.78rem,2.25cqw,2.25rem);font-weight:600;line-height:1.5;opacity:.85;margin-bottom:0}
    22%{font-size:clamp(.72rem,1.95cqw,1.95rem);font-weight:400;line-height:1.4;opacity:.7;margin-bottom:.8em}
    34%{font-size:clamp(.78rem,2.25cqw,2.25rem);font-weight:600;line-height:1.5;opacity:.85;margin-bottom:0}
    46%{font-size:clamp(.72rem,1.95cqw,1.95rem);font-weight:400;line-height:1.4;opacity:.7;margin-bottom:.8em}
    58%{font-size:clamp(.78rem,2.25cqw,2.25rem);font-weight:600;line-height:1.5;opacity:.85;margin-bottom:0}
    70%{font-size:clamp(.72rem,1.95cqw,1.95rem);font-weight:400;line-height:1.4;opacity:.7;margin-bottom:.8em}
    78%,100% {font-size:clamp(.72rem,1.95cqw,1.95rem);font-weight:400;line-height:1.4;opacity:.7;margin-bottom:.8em}
  }
  @keyframes hier3{
    0%,12%  {font-size:clamp(.78rem,2.25cqw,2.25rem);font-weight:600;letter-spacing:0;opacity:.85;text-transform:none}
    22%{font-size:clamp(.66rem,1.7cqw,1.7rem);font-weight:700;letter-spacing:.1em;opacity:1;text-transform:uppercase}
    34%{font-size:clamp(.78rem,2.25cqw,2.25rem);font-weight:600;letter-spacing:0;opacity:.85;text-transform:none}
    46%{font-size:clamp(.66rem,1.7cqw,1.7rem);font-weight:700;letter-spacing:.1em;opacity:1;text-transform:uppercase}
    58%{font-size:clamp(.78rem,2.25cqw,2.25rem);font-weight:600;letter-spacing:0;opacity:.85;text-transform:none}
    70%{font-size:clamp(.66rem,1.7cqw,1.7rem);font-weight:700;letter-spacing:.1em;opacity:1;text-transform:uppercase}
    78%,100% {font-size:clamp(.66rem,1.7cqw,1.7rem);font-weight:700;letter-spacing:.1em;opacity:1;text-transform:uppercase}
  }

  /* the live ad keeps rewriting itself: seven candidate readings, the last
     of which is the one it locks to */
  .cycle{display:grid}
  .cycle > span{grid-area:1/1;opacity:0;animation-duration:10s;animation-timing-function:steps(1,end);
    animation-iteration-count:infinite;animation-delay:var(--t,0s)}
  .cycle > span:nth-child(1){animation-name:cyc1}
  .cycle > span:nth-child(2){animation-name:cyc2}
  .cycle > span:nth-child(3){animation-name:cyc3}
  .cycle > span:nth-child(4){animation-name:cyc4}
  .cycle > span:nth-child(5){animation-name:cyc5}
  .cycle > span:nth-child(6){animation-name:cyc6}
  .cycle > span:nth-child(7){animation-name:cyc7}
  @keyframes cyc1{0%,26%{opacity:1} 27%,100%{opacity:0}}
  @keyframes cyc2{0%,26%{opacity:0} 27%,36%{opacity:1} 37%,100%{opacity:0}}
  @keyframes cyc3{0%,36%{opacity:0} 37%,46%{opacity:1} 47%,100%{opacity:0}}
  @keyframes cyc4{0%,46%{opacity:0} 47%,56%{opacity:1} 57%,100%{opacity:0}}
  @keyframes cyc5{0%,56%{opacity:0} 57%,66%{opacity:1} 67%,100%{opacity:0}}
  @keyframes cyc6{0%,66%{opacity:0} 67%,77%{opacity:1} 78%,100%{opacity:0}}
  @keyframes cyc7{0%,77%{opacity:0} 78%,100%{opacity:1}}

  /* ---- 04 creative strategy: the ad ---- */
  .d-ad{display:flex;flex-direction:column;gap:.6em}
  .d-ad__t{font-weight:600;font-size:clamp(.9rem,2.95cqw,2.95rem);line-height:1.15;letter-spacing:-.015em}
  .d-ad__b{font-size:clamp(.72rem,1.85cqw,1.85rem);line-height:1.4;opacity:.65}
  .d-ad__cta{margin-top:.8em;border-radius:100px;padding:.7em 1.6em;align-self:flex-start;
    font-size:clamp(.7rem,1.7cqw,1.7rem);font-weight:600;background:rgba(0,0,0,.1);
    animation:ctaFill 10s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--t,0s)}
  @keyframes ctaFill{
    0%,74%  {background:rgba(0,0,0,.1);opacity:.6}
    78%,97% {background:var(--c-accent);opacity:1}
    100%    {background:rgba(0,0,0,.1);opacity:.6}
  }

  .prob__label{font-weight:600;letter-spacing:-.01em}
  .prob__note{color:#333;font-size:clamp(1.4rem,1.3rem + .26vw,1.7rem);line-height:1.5;max-width:52ch}

  /* motion off: hold the flat resolved state */
  @media(prefers-reduced-motion:reduce){
    .d3__stack,.d3__ly,.d3__dec,.raw,.alt,.d-type__h,.d-hier p,.d-ad__cta,
    .lay-offer span,.d3__ring,.d3__optwin{animation:none}
    .d3__stack,.d3__ly{transform:none}
    .d3__dec{opacity:0}
    .raw{opacity:0} .alt{opacity:1}
    .d-type__h{letter-spacing:-.025em;word-spacing:normal;line-height:1.02}
    .d-hier p:nth-of-type(1){font-size:clamp(1.1rem,4cqw,4rem);line-height:1.04;letter-spacing:-.025em;opacity:1;margin-bottom:.4em}
    .d-hier p:nth-of-type(2){font-size:clamp(.72rem,1.95cqw,1.95rem);font-weight:400;opacity:.7;margin-bottom:.8em}
    .d-hier p:nth-of-type(3){font-size:clamp(.66rem,1.7cqw,1.7rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
    .d-ad__cta{background:var(--c-accent);opacity:1}
    /* with motion off, hold the final reading of the cycling ad */
    .cycle > span{animation:none;opacity:0}
    .cycle > span:last-child{opacity:1}
    /* and park the sliding composition at its locked positions */
    .d3__ly--top .comp i{animation:none}
    .d3__ly--top .comp i:nth-of-type(1){left:0;top:0;width:48%;height:47%}
    .d3__ly--top .comp i:nth-of-type(2){left:52%;top:0;width:48%;height:22%}
    .d3__ly--top .comp i:nth-of-type(3){left:52%;top:26%;width:31%;height:47%}
    .d3__ly--top .comp i:nth-of-type(4){left:87%;top:26%;width:13%;height:47%}
    .d3__ly--top .comp i:nth-of-type(5){left:0;top:51%;width:48%;height:49%}
    .d3__ly--top .comp i:nth-of-type(6){left:52%;top:77%;width:48%;height:23%}
    .o-head{left:0;top:4%;width:88%;height:22%}
    .o-body{left:0;top:32%;width:76%;height:12%}
    .o-proof{left:0;top:50%;width:62%;height:10%}
    .o-cta{left:0;top:70%;width:40%;height:16%}
  }

  /* ---------- n.002 the technology ---------- */
  /* the five technologies are an accordion: the page stays scannable and the
     detail is there for whoever wants it */
  .acc--tech{max-width:none;margin:0}
  .acc--tech .acc__item{border-bottom:1px solid var(--c-dark)}
  .acc--tech .acc__item:first-child{border-top:1px solid var(--c-dark)}
  .acc--tech .acc__head{display:grid;grid-template-columns:var(--col-1) minmax(0,1fr) auto;
    gap:var(--gutter);align-items:baseline;text-align:left;
    padding:clamp(2.2rem,2.8vw,3.4rem) var(--gutter) clamp(2.2rem,2.8vw,3.4rem) 0}
  @media(max-width:767.8px){
    .acc--tech .acc__head{grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem;padding-right:0}
  }
  .acc--tech .acc__head:hover .acc__t{opacity:.6}
  .acc--tech .acc__no{font-weight:600;opacity:.45}
  .acc--tech .acc__t{font-weight:600;letter-spacing:-.02em;transition:opacity .3s}
  .acc__ico{position:relative;width:1.5rem;height:1.5rem;align-self:center;flex:none}
  .acc__ico:before,.acc__ico:after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;
    background:var(--c-dark);transform:translateY(-50%);transition:transform .45s cubic-bezier(.5,0,0,1)}
  .acc__ico:after{transform:translateY(-50%) rotate(90deg)}
  .acc__item.open .acc__ico:after{transform:translateY(-50%) rotate(0deg)}
  /* panel copy aligns under the title and keeps a real margin off the right edge */
  .acc--tech .acc__panel__in{max-width:none;margin:0;text-align:left;
    padding:0 calc(var(--col-1) + var(--gutter)) clamp(2.6rem,3.4vw,4.2rem)
            calc(var(--col-1) + var(--gutter))}
  @media(max-width:767.8px){
    .acc--tech .acc__panel__in{padding-left:0;padding-right:0}
  }
  .acc--tech .acc__panel__in p{max-width:min(var(--col-6),68ch);color:#222}
  .tech__proof{margin-top:clamp(1.2rem,1.6vw,1.8rem);display:flex;gap:.6em;align-items:baseline;font-weight:600;letter-spacing:-.01em}
  .tech__proof:before{content:"";flex:none;width:.42em;height:.42em;transform:translateY(-.08em);border-radius:50%;background:var(--c-accent)}

  /* ---------- n.003 the standard ---------- */
  .std__head,.std__row{display:flex;flex-direction:column;gap:.8rem;padding:clamp(2.2rem,3vw,3.4rem) 0;border-top:1px solid var(--c-dark)}
  .std__row:last-child{border-bottom:1px solid var(--c-dark)}
  @media(min-width:768px){
    .std__head,.std__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr) minmax(0,1.3fr);
      gap:var(--gutter);align-items:baseline}
  }
  .std__head{font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.5;padding-bottom:1.4rem}
  @media(max-width:767.8px){.std__head{display:none}}
  .std__dim{font-weight:600;letter-spacing:-.015em}
  .std__def{color:#222}
  .std__proof{display:flex;gap:.6em;align-items:baseline;font-weight:600;letter-spacing:-.01em}
  .std__proof:before{content:"";flex:none;width:.42em;height:.42em;transform:translateY(-.08em);border-radius:50%;background:var(--c-accent)}

  /* ---------- n.004 experiments (homepage cards) ---------- */
  .xgrid{display:grid;gap:clamp(3rem,4vw,var(--gutter));grid-template-columns:1fr}
  @media(min-width:768px){.xgrid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1280px){.xgrid{grid-template-columns:repeat(4,1fr)}}
  .xcard{display:flex;flex-direction:column;gap:clamp(1.4rem,1.8vw,2rem);color:inherit}
  .xcard__media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--c-placeholder);
    aspect-ratio:720/850;transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s cubic-bezier(.19,1,.22,1)}
  .xcard:hover .xcard__media{transform:translateY(-.6rem);box-shadow:0 1.2rem 2.6rem -1.6rem rgba(0,0,0,.18)}
  .xcard__media video{width:100%;height:100%;object-fit:cover;display:block}
  .xcard__no{font-weight:600;opacity:.45}
  .xcard__name{font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:.2em}
  .xcard__lens{color:#222;margin-top:clamp(.8rem,1vw,1.2rem)}

  /* ---------- team page ---------- */
  .bio-links{display:flex;flex-wrap:wrap;gap:var(--gutter);margin-top:clamp(1.8rem,2.2vw,2.6rem);font-weight:600}
  .founder__role{margin-top:clamp(1.2rem,1.6vw,1.8rem);color:#333}

  /* ---------- mobile refinements for v2 blocks ---------- */
  @media(max-width:767.8px){
    .tech__b,.std__def{max-width:none}
  }

  /* ---------- brand mark for pages without the hero ---------- */
  .brandbar{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:clamp(2.5rem,4vw,4.5rem)}
  .brandbar .wm{font-family:"Necosmic",var(--ff);font-weight:400;text-transform:uppercase;
    font-size:clamp(2.8rem,3.6vw,4.6rem);line-height:.8;letter-spacing:.01em}
  .brandbar .sub{font-weight:700;text-transform:uppercase;font-size:clamp(1.2rem,1.3vw,1.5rem);letter-spacing:.14em}

  /* ---------- inline links in body copy read as links (underline wipes on hover) ---------- */
  .lead .under:after,.page-head__sub .under:after{transform:scaleX(1);transform-origin:left}
  .lead .under:hover:after,.page-head__sub .under:hover:after{transform:scaleX(0);transform-origin:right}
  /* placeholder label takes its own line inside flex rows */
  .is-tbd:before{flex-basis:100%}

  /* ---------- nav: four items must fit a phone without overflowing ---------- */
  @media(max-width:767.8px){
    .nav{padding:1rem .6rem}
    .nav__btn{padding:0 1.2rem}
  }

  /* ---------- founder extended bios ---------- */
  .founder__role{max-width:min(var(--col-5),68ch)}
  .founder__role p + p{margin-top:1em}
  .founder__awards{display:flex;gap:.6em;align-items:baseline;font-weight:600;letter-spacing:-.01em;
    max-width:min(var(--col-5),68ch);margin-top:clamp(1.4rem,1.8vw,2rem)}
  .founder__awards:before{content:"";flex:none;width:.42em;height:.42em;transform:translateY(-.08em);
    border-radius:50%;background:var(--c-accent)}

  /* On a phone you see one artboard at a time, so the flat hold at either end
     of the cycle drags. Shorten the whole loop there — proportions stay, the
     dead time roughly halves. The fast blink/ring sub-loops are left alone. */
  @media(max-width:767.8px){
    .d3__stack,.d3__ly,.d3__ly--sel,.d3__ly--rej,.d3__ly--dim,.d3__dec,
    .d3__ly--sel:after,.d3__optwin,
    .raw,.alt,.d-type__h,.d-hier p,.d-ad__cta,
    .cycle > span,.lay-offer span,.d3__ly--top .comp i{animation-duration:6.5s}
  }

  /* ======================================================================
     V3 COMPONENTS — taste layer harness, example output
     ====================================================================== */

  /* ---------- n.002 the harness: [ Dessert ] bolted onto everything below ---------- */
  .layer{padding-bottom:clamp(2rem,4vw,5rem)}
  .harness{background:var(--c-light);border-radius:var(--radius);
    padding:clamp(4rem,7vw,10rem) clamp(2rem,4vw,6rem) clamp(2rem,4vw,6rem)}
  .harness__core{display:flex;align-items:center;justify-content:center;gap:clamp(1.4rem,2.4vw,4rem);
    font-size:clamp(5rem,2rem + 8vw,16rem);line-height:1}
  .harness__br{font-weight:200;transform:translateY(-.08em)}
  .harness__mark{height:.62em;width:auto}
  .harness__tag{text-align:center;margin-top:clamp(1.6rem,2vw,2.6rem);font-size:clamp(1rem,.9rem + .3vw,1.4rem);opacity:.6}
  /* the layer: one stem drops from [ Dessert ], fans out to every company
     that generates ads, and folds back into one output. Each logo cell draws
     its own tick above and below, so on phones (3 x 2) the ticks of the two
     rows join into continuous lanes. Bars span column centre to centre.
     One 5s cycle: pulse down the stem, bar lights outward, pulses down the
     ticks, logos darken, pulses down again, bar folds in, pulse exits. */
  .harness{--rule:rgba(0,0,0,.18);--tk:clamp(2.4rem,3.6vw,4.8rem);--tl:5s}
  .tl{margin-top:clamp(1.6rem,2vw,2.6rem)}
  .tl__stem{position:relative;width:1px;height:var(--tk);margin:0 auto;background:var(--rule)}
  .tl__bar{position:relative;height:1px;background:var(--rule);margin:0 calc(100%/12)}
  .tl__bar i{position:absolute;inset:-1px 0;background:var(--c-accent);transform:scaleX(0);opacity:0}
  .tl__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0}
  .tl__co{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--tk) 0}
  .tl__co:before,.tl__co:after{content:"";position:absolute;left:50%;width:1px;height:var(--tk);background:var(--rule)}
  .tl__co:before{top:0}
  .tl__co:after{bottom:0}
  .tl__logo{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(3.4rem,4.4vw,6rem)}
  .tl__logo img{display:block;width:var(--w);height:auto;max-height:100%;object-fit:contain}
  /* the output: the ten real ads from n.003 as one small ad set, grouped
     by funnel job in the same colours as the funnel card */
  .tl__set{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(1rem,1.6vw,2.4rem)}
  .tl__grp{display:flex;flex-direction:column;align-items:center;gap:.8rem}
  .tl__ads{display:flex;gap:clamp(.4rem,.5vw,.8rem);padding-bottom:.8rem;border-bottom:3px solid var(--fc)}
  .tl__ads img{display:block;width:clamp(3.6rem,4.2vw,6.4rem);aspect-ratio:9/16;object-fit:cover;border-radius:.4rem;
    box-shadow:0 0 0 1px rgba(0,0,0,.08)}
  .tl__grp .mono{font-size:clamp(1rem,.9rem + .3vw,1.3rem);opacity:.6}
  .tl__out{text-align:center;margin-top:clamp(1.4rem,1.8vw,2.4rem);font-size:clamp(1rem,.9rem + .3vw,1.4rem);opacity:.6}
  @media(max-width:767.8px){ .tl__ads img{width:10.5vw} }
  .tl__p{position:absolute;left:50%;width:.7rem;height:.7rem;margin:-.35rem 0 0 -.35rem;border-radius:50%;
    background:var(--c-accent);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 .8rem var(--c-accent);opacity:0;top:0}
  .tl__p--out{top:auto;bottom:var(--tk);margin-top:0;margin-bottom:-.35rem}
  @media(max-width:767.8px){
    .harness{--tk:2.6rem}
    .tl__bar{margin:0 calc(100%/6)}
    .tl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .tl__logo{height:3.4rem}
    .tl__logo img{width:calc(var(--w)*1.25)}
  }
  @media(prefers-reduced-motion:no-preference){
    .tl__stem .tl__p{animation:tlStemIn var(--tl) linear infinite}
    .tl__stem--out .tl__p{animation-name:tlStemOut}
    .tl__bar i{animation:tlBarIn var(--tl) ease-out infinite}
    .tl__bar--out i{animation-name:tlBarOut}
    .tl__p--in{animation:tlTickIn var(--tl) linear infinite}
    .tl__p--out{animation:tlTickOut var(--tl) linear infinite}
    .tl__logo img{animation:tlLogo var(--tl) ease infinite}
    .tl__ads img{animation:tlAd var(--tl) ease infinite;animation-delay:calc(var(--i)*60ms)}
  }
  @keyframes tlStemIn{0%{top:0;opacity:0}3%{opacity:1}17%{top:100%;opacity:1}20%,100%{top:100%;opacity:0}}
  @keyframes tlBarIn{0%,16%{transform:scaleX(0);opacity:1}28%{transform:scaleX(1);opacity:1}44%,100%{transform:scaleX(1);opacity:0}}
  @keyframes tlTickIn{0%,27%{top:0;opacity:0}29%{opacity:1}42%{top:var(--tk);opacity:1}45%,100%{top:var(--tk);opacity:0}}
  @keyframes tlLogo{0%,40%,66%,100%{filter:none}47%,58%{filter:brightness(.3)}}
  @keyframes tlTickOut{0%,56%{bottom:var(--tk);opacity:0}58%{opacity:1}70%{bottom:0;opacity:1}72%,100%{bottom:0;opacity:0}}
  @keyframes tlBarOut{0%,68%{transform:scaleX(1);opacity:0}70%{opacity:1;transform:scaleX(1)}82%{transform:scaleX(0);opacity:1}83%,100%{transform:scaleX(0);opacity:0}}
  @keyframes tlAd{0%,88%,100%{transform:none}93%{transform:translateY(-.5rem)}}
  @keyframes tlStemOut{0%,80%{top:0;opacity:0}82%{opacity:1}96%{top:100%;opacity:1}99%,100%{top:100%;opacity:0}}

  /* ---------- n.003 example output: funnel rows + the brief ---------- */
  .out{padding-bottom:clamp(6rem,9vw,12rem)}
  .out__in{display:flex;flex-direction:column;gap:clamp(4rem,5vw,6rem)}
  @media(min-width:1024px){.out__in{flex-direction:row;align-items:flex-start;gap:var(--col-1)}}
  .out__rows{display:flex;flex-direction:column;gap:clamp(1.2rem,1.4vw,2rem);flex:1}
  .out__row{display:grid;grid-template-columns:1fr;gap:1rem}
  @media(min-width:768px){.out__row{grid-template-columns:var(--col-1) 1fr;gap:var(--gutter);align-items:center}}
  .out__lbl{font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
  .out__lbl,.out__jobs dt{font-family:var(--ff)}
  .out__lbl b,.out__jobs dt span{display:block;width:fit-content;background:var(--c-accent);color:var(--c-dark);font-weight:600;padding:.25em .6em;border-radius:.4em;margin-bottom:.4em}
  @media(max-width:767.8px){.out__lbl b{display:inline-block;margin:0 .4em 0 0}}
  .out__ads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,.8vw,1.2rem)}
  .out__ads img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius-s);background:var(--c-placeholder)}
  .out__brief{width:100%}
  @media(min-width:1024px){.out__brief{width:var(--col-3);position:sticky;top:clamp(3rem,4vw,6rem)}}
  .out__k{font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:.8rem}
  .out__v{font-weight:500;letter-spacing:-.015em;margin-bottom:clamp(2.4rem,3vw,3.6rem)}
  .out__jobs > div{display:grid;grid-template-columns:7em 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--c-dark)}
  .out__jobs > div:last-child{border-bottom:1px solid var(--c-dark)}
  .out__jobs dt span{margin:0}
  .out__jobs dt{color:var(--c-dark);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  .out__jobs dd{color:#222}

  /* ---------- credentials strip (homepage why-us, team page) ---------- */
  .stats{display:grid;grid-template-columns:1fr;gap:0 var(--gutter)}
  @media(min-width:768px){.stats{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.stats{grid-template-columns:repeat(4,1fr)}}
  .stats__i{border-top:1px solid var(--c-dark);padding:clamp(2rem,2.6vw,3rem) 0 clamp(2.4rem,3vw,3.6rem)}
  .stats__n{font-weight:600;letter-spacing:-.03em;line-height:1}
  .stats__l{margin-top:clamp(1rem,1.2vw,1.4rem);color:#222;max-width:28ch}

  /* ---------- video spacer with a centered headline (n.002 taste layer) ---------- */
  /* this footage runs bright, so the type is dark and a soft light wash sits
     behind the middle of the frame to hold it */
  .vhead .pillcard__bg:after{content:"";position:absolute;inset:0;
    background:radial-gradient(60% 45% at 50% 52%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
  .vhead__t{margin:auto;max-width:var(--col-8);text-align:center;font-weight:600;letter-spacing:-.03em;color:var(--c-dark);
    padding-bottom:clamp(4rem,8vw,10rem)}
  .vhead .s-head{border-color:var(--c-dark)}
  /* darker footage: light type over a soft dark wash */
  .vhead--dark .pillcard__bg:after{background:radial-gradient(60% 45% at 50% 52%,rgba(0,0,0,.42),rgba(0,0,0,0) 72%)}
  .vhead--dark .vhead__t{color:var(--c-light);text-shadow:0 .08em .6em rgba(0,0,0,.28)}
  .vhead--dark .s-head{border-color:var(--c-light)}

  /* ---- creative strategy: cycling candidate personas for one product, each
     scored, locking onto the best fit and its angle (same 10s clock and
     cyc1-7 steps as the other cycling copy) ---- */
  .d-per{display:flex;flex-direction:column;gap:.7em}
  .d-per__k{font-size:clamp(.6rem,1.3cqw,1.3rem);opacity:.5}
  .d-per__p{font-weight:600;font-size:clamp(1rem,3.4cqw,3.4rem);line-height:1.1;letter-spacing:-.02em;min-height:2.2em}
  .d-per__row{display:flex;align-items:center;gap:.8em;font-size:clamp(.66rem,1.5cqw,1.5rem)}
  .d-per__bar{flex:1;height:.55em;border-radius:1em;background:rgba(0,0,0,.08);overflow:hidden}
  .d-per__bar i{display:block;height:100%;border-radius:inherit;background:rgba(0,0,0,.55);
    animation:perBar 10s steps(1,end) infinite;animation-delay:var(--t,0s)}
  @keyframes perBar{
    0%,26%{width:41%} 27%,36%{width:72%} 37%,46%{width:68%} 47%,56%{width:57%}
    57%,66%{width:63%} 67%,77%{width:86%} 78%,100%{width:94%;background:var(--c-accent)}
  }
  .d-per__s{white-space:nowrap;min-width:4.6em;text-align:right}
  .d-per__a{font-size:clamp(.74rem,1.9cqw,1.9rem);font-style:italic;opacity:0}
  @media(prefers-reduced-motion:reduce){
    .d-per__bar i{animation:none;width:94%;background:var(--c-accent)}
  }
  @media(max-width:767.8px){ .d-per__bar i{animation-duration:6.5s} }

  /* ---------- contact as a video spacer: headline and the two pills centered together ---------- */
  .contact--video{padding:clamp(3rem,7vw,9rem) 0 clamp(4rem,6vw,8rem)}
  .vhead__mid{margin:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(3rem,5vw,6rem);
    padding-bottom:clamp(3rem,6vw,8rem)}
  .vhead__mid .vhead__t{margin:0;padding:0}
  @media(max-width:767.8px){ .vhead__mid .vhead__t{font-size:2.6rem} }
  .vhead__mid .pills{margin:0}


  /* ---- full-funnel campaigns: each stage of the campaign lands in turn,
     then the whole set is stamped. Rows dim while the stack opens and
     return one by one on the same 10s clock. ---- */
  .lay-tiles{display:flex;align-items:center;justify-content:center;gap:4%;padding:10% 8%}
  .lay-tiles span{position:relative;flex:0 0 14%;aspect-ratio:9/16;border-radius:3px;border:1px solid rgba(0,0,0,.18);overflow:hidden}
  .lay-tiles--top span{background:color-mix(in oklab,var(--c-secondary) 55%,#fff)}
  .lay-tiles--mid span{background:color-mix(in oklab,var(--c-brand) 60%,#fff)}
  .lay-tiles--bot span{background:#fff}
  .lay-tiles span:before{content:"";position:absolute;left:14%;right:14%;top:12%;height:12%;border-radius:2px;background:rgba(0,0,0,.35)}
  .lay-tiles--bot span:after{content:"";position:absolute;left:14%;right:30%;bottom:10%;height:10%;border-radius:20px;background:var(--c-accent)}
  .d-fun{display:flex;flex-direction:column;gap:.55em;font-size:clamp(.62rem,1.55cqw,1.55rem)}
  .d-fun__r{display:grid;grid-template-columns:5.6em minmax(0,1fr) auto;gap:.9em;align-items:center;
    padding:.55em .8em;border:1px solid rgba(0,0,0,.14);border-radius:.4em;
    animation-duration:10s;animation-timing-function:steps(1,end);animation-iteration-count:infinite;animation-delay:var(--t,0s)}
  .d-fun__r > .mono{color:#b8692a;font-size:.85em}
  .d-fun__r b{display:block;font-weight:600;font-size:1.35em;letter-spacing:-.015em;line-height:1.15}
  .d-fun__r p{opacity:.6;line-height:1.3;margin-top:.15em}
  .d-fun__r em{font-style:normal;opacity:.55}
  .d-fun__r:nth-child(1){animation-name:funR1}
  .d-fun__r:nth-child(2){animation-name:funR2}
  .d-fun__r:nth-child(3){animation-name:funR3}
  @keyframes funR1{0%,12%{opacity:1} 13%,29%{opacity:.12} 30%,100%{opacity:1}}
  @keyframes funR2{0%,12%{opacity:1} 13%,43%{opacity:.12} 44%,100%{opacity:1}}
  @keyframes funR3{0%,12%{opacity:1} 13%,57%{opacity:.12} 58%,100%{opacity:1}}
  .d-fun__total{align-self:flex-start;margin-top:.3em;padding:.5em .9em;border-radius:100px;background:var(--c-accent);font-size:.9em}

  /* ---- brand and product accuracy: an ad checked line by line against the
     brand kit and the real pack. The label starts wrong, fails, is redrawn,
     and passes. ---- */
  .lay-kit{display:flex;flex-direction:column;justify-content:center;gap:12%;padding:0 12%}
  .kit-wm{width:46%;height:14%;border-radius:2px;background:rgba(0,0,0,.7)}
  .kit-sw{display:flex;gap:6%}
  .kit-sw i{width:12%;aspect-ratio:1;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.15)}
  .lay-pack{display:flex;align-items:center;justify-content:center;gap:10%;padding:8% 10%}
  .pack-lines{flex:1;display:flex;flex-direction:column;gap:14%}
  .pack-lines i{height:6px;width:var(--w);border-radius:2px;background:rgba(0,0,0,.25)}
  .d-bot{position:relative;display:block;width:18%;aspect-ratio:1/1.9;border-radius:18% 18% 14% 14%/10% 10% 8% 8%;
    background:linear-gradient(180deg,color-mix(in oklab,var(--c-secondary) 55%,#fff),var(--c-secondary));margin-top:9%}
  .d-bot .cap{position:absolute;left:28%;right:28%;bottom:100%;height:22%;border-radius:30% 30% 6% 6%;background:var(--c-light);border:1px solid rgba(0,0,0,.12)}
  .d-bot .lbl{position:absolute;left:14%;right:14%;top:38%;height:30%;border-radius:2px;background:var(--c-light);border:1px solid rgba(0,0,0,.1)}
  .d-acc{display:grid;grid-template-columns:38% 1fr;gap:8%;align-items:center;height:100%}
  .d-acc__ad{position:relative;aspect-ratio:9/12;border-radius:.4rem;background:color-mix(in oklab,var(--c-placeholder) 45%,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
  .d-acc__wm{position:absolute;top:9%;left:12%;width:44%;height:5%;border-radius:2px;background:rgba(0,0,0,.7)}
  .d-bot--ad{width:34%;margin-top:6%}
  .d-bot--ad .lbl{animation:lblFix 10s steps(1,end) infinite;animation-delay:var(--t,0s)}
  @keyframes lblFix{0%,12%{background:var(--c-light);transform:none} 13%,59%{background:var(--c-brand);transform:rotate(-9deg) translateY(12%)} 60%,100%{background:var(--c-light);transform:none}}
  .d-acc__offer{position:absolute;bottom:8%;right:8%;padding:.35em .7em;border-radius:20px;background:var(--c-accent);font-size:clamp(.5rem,1.1cqw,1.1rem)}
  .d-acc__list{display:flex;flex-direction:column;font-size:clamp(.66rem,1.7cqw,1.7rem)}
  .d-acc__list li{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.45em 0;border-bottom:1px solid rgba(0,0,0,.12);font-weight:600}
  .ck{display:grid;font-style:normal;justify-items:end}
  .ck b{grid-area:1/1;white-space:nowrap;animation-duration:10s;animation-timing-function:steps(1,end);animation-iteration-count:infinite;animation-delay:var(--t,0s)}
  .ck .p{opacity:.35}
  .ck .ok{color:var(--c-dark);background:var(--c-accent);border-radius:1em;padding:0 .45em}
  .ck .no{color:var(--c-light);background:var(--c-dark);border-radius:1em;padding:.05em .55em;font-size:.8em}
  .ck1 .ok{animation-name:ok1} .ck1 .p{animation-name:pd1}
  .ck2 .ok{animation-name:ok2} .ck2 .p{animation-name:pd2}
  .ck4 .ok{animation-name:ok4} .ck4 .p{animation-name:pd4}
  .ck5 .ok{animation-name:ok5} .ck5 .p{animation-name:pd5}
  .ck3 .p{animation-name:pd3} .ck3 .no{animation-name:no3} .ck3 .ok{animation-name:ok3}
  @keyframes ok1{0%,12%{opacity:1} 13%,29%{opacity:0} 30%,100%{opacity:1}}
  @keyframes pd1{0%,12%{opacity:0} 13%,29%{opacity:1} 30%,100%{opacity:0}}
  @keyframes ok2{0%,12%{opacity:1} 13%,35%{opacity:0} 36%,100%{opacity:1}}
  @keyframes pd2{0%,12%{opacity:0} 13%,35%{opacity:1} 36%,100%{opacity:0}}
  @keyframes ok4{0%,12%{opacity:1} 13%,65%{opacity:0} 66%,100%{opacity:1}}
  @keyframes pd4{0%,12%{opacity:0} 13%,65%{opacity:1} 66%,100%{opacity:0}}
  @keyframes ok5{0%,12%{opacity:1} 13%,71%{opacity:0} 72%,100%{opacity:1}}
  @keyframes pd5{0%,12%{opacity:0} 13%,71%{opacity:1} 72%,100%{opacity:0}}
  @keyframes pd3{0%,12%{opacity:0} 13%,43%{opacity:1} 44%,100%{opacity:0}}
  @keyframes no3{0%,43%{opacity:0} 44%,59%{opacity:1} 60%,100%{opacity:0}}
  @keyframes ok3{0%,12%{opacity:1} 13%,59%{opacity:0} 60%,100%{opacity:1}}

  @media(prefers-reduced-motion:reduce){
    .d-fun__r,.ck b,.d-bot--ad .lbl{animation:none}
    .ck .p,.ck .no{opacity:0}
  }
  @media(max-width:767.8px){
    .d-fun__r,.ck b,.d-bot--ad .lbl{animation-duration:6.5s}
  }
  /* the card content rides the tilted sheet as one flat plane, so its own
     animated parts (checks, rows, label) can't drift apart in 3D */
  .d-acc,.d-fun,.d-per{transform-style:flat;transform:translateZ(0)}

  /* ---- creative strategy, the sheets underneath: raw data being read,
     buyers pulling into clusters, and personas forming from them ---- */
  .lay-data{display:flex;flex-direction:column;padding:12% 8% 8% 22%;gap:6%}
  .dat-src{display:flex;gap:.5em;align-items:baseline;font-size:.8em;opacity:.6;white-space:nowrap}
  .dat-src b{font-weight:700;opacity:1;margin-left:.6em}
  .dat-src b:first-child{margin-left:0}
  .dat-bars{flex:1;display:flex;align-items:flex-end;gap:3%;border-bottom:1px solid rgba(0,0,0,.3)}
  .dat-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:color-mix(in oklab,var(--c-brand) 75%,#fff);
    animation:datBar 2.4s ease-in-out infinite alternate;animation-delay:var(--d)}
  .dat-bars i:nth-child(4n){background:color-mix(in oklab,var(--c-secondary) 80%,#fff)}
  @keyframes datBar{from{height:var(--h)} to{height:calc(var(--h)*.45)}}
  .dat-line{position:absolute;left:22%;right:8%;top:30%;height:26%;width:70%;overflow:visible}
  .dat-line polyline{fill:none;stroke:var(--c-dark);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.6}
  .dat-scan{position:absolute;top:22%;bottom:8%;left:22%;width:2px;background:var(--c-dark);box-shadow:0 0 0 2px var(--c-accent),0 0 10px var(--c-accent);
    animation:datScan 2.6s linear infinite}
  @keyframes datScan{from{left:22%} to{left:92%}}

  .lay-clus .dt{position:absolute;width:1.5cqw;height:1.5cqw;min-width:5px;min-height:5px;border-radius:50%;
    transform:translate(-50%,-50%);background:rgba(0,0,0,.4);
    animation:clus 10s cubic-bezier(.55,0,.15,1) infinite;animation-delay:var(--t,0s)}
  @keyframes clus{
    0%,14%{left:var(--x0);top:var(--y0);background:rgba(0,0,0,.4)}
    34%,80%{left:var(--x1);top:var(--y1);background:var(--cc)}
    96%,100%{left:var(--x0);top:var(--y0);background:rgba(0,0,0,.4)}
  }
  .dt--a,.ring--a{--cc:var(--c-secondary)} .dt--b,.ring--b{--cc:var(--c-brand)} .dt--c,.ring--c{--cc:var(--c-accent)}
  .ring{position:absolute;left:var(--x);top:var(--y);width:24%;aspect-ratio:1.3;transform:translate(-50%,-50%);
    border:1.5px dashed rgba(0,0,0,.4);border-radius:50%;opacity:0;
    animation:ringIn 10s ease infinite;animation-delay:var(--t,0s)}
  .ring em{position:absolute;top:-.4em;right:-.2em;font-style:normal;font-size:clamp(.6rem,1.1cqw,1.1rem);
    color:var(--c-dark);background:var(--cc);border-radius:3px;padding:.1em .4em}
  @keyframes ringIn{0%,30%{opacity:0} 38%,80%{opacity:1} 90%,100%{opacity:0}}

  .lay-pcards{display:flex;align-items:center;justify-content:center;gap:4%;padding:14% 7% 8% 18%}
  .pc{flex:1;display:flex;flex-direction:column;gap:.5em;padding:5% 5% 6%;border:1px solid rgba(0,0,0,.16);border-radius:4px;
    background:#fff;font-size:clamp(.5rem,1cqw,1rem);
    animation:pcIn 10s cubic-bezier(.19,1,.22,1) infinite;animation-delay:calc(var(--t,0s) + var(--n)*.5s)}
  @keyframes pcIn{0%,16%{opacity:0;transform:translateY(20%)} 26%,86%{opacity:1;transform:none} 94%,100%{opacity:0;transform:translateY(20%)}}
  .pc__av{width:2.6em;height:2.6em;border-radius:50%;background:var(--cc)}
  .pc__av--a{--cc:var(--c-secondary)} .pc__av--b{--cc:var(--c-brand)} .pc__av--c{--cc:var(--c-accent)}
  .pc__l{height:.8em;width:var(--w);border-radius:2px;background:rgba(0,0,0,.55)}
  .pc__l--s{height:.6em;background:rgba(0,0,0,.22)}
  .pc__fit{height:.5em;border-radius:1em;background:rgba(0,0,0,.08);overflow:hidden;margin-top:.3em}
  .pc__fit u{display:block;height:100%;width:var(--f);background:rgba(0,0,0,.5)}
  .pc:first-child .pc__fit u{background:var(--c-accent)}

  .d3__ly .lay-data,.d3__ly .lay-clus,.d3__ly .lay-pcards{transform-style:flat}
  @media(prefers-reduced-motion:reduce){
    .dat-bars i,.dat-scan,.lay-clus .dt,.ring,.pc{animation:none}
    .lay-clus .dt{left:var(--x1);top:var(--y1);background:var(--cc)}
    .ring,.pc{opacity:1}
    .dat-scan{display:none}
  }
  @media(max-width:767.8px){ .lay-clus .dt,.ring,.pc{animation-duration:6.5s} }

  /* funnel stages share one colour code across the sheets and the top card:
     lilac = top, slate = mid, lime = bottom */
  .lay-tiles--bot span{background:color-mix(in oklab,var(--c-accent) 40%,#fff)}
  .d-fun__r:nth-child(1){--fc:var(--c-secondary)}
  .d-fun__r:nth-child(2){--fc:var(--c-brand)}
  .d-fun__r:nth-child(3){--fc:var(--c-accent)}
  .d-fun__r{background:color-mix(in oklab,var(--fc) 24%,#fff);border-color:transparent;border-left:.4em solid var(--fc)}
  .d-fun__r > .mono{color:var(--c-dark)}

  /* ---------- [ Dessert ] lockup filled with the taste-layer footage ----------
     The spacer above plays the same clip, so the video carries straight into
     the mark. */
  .lockup{position:relative;width:min(64%,14rem + 16vw);margin:0 auto;aspect-ratio:2720/626}
  .lockup__fill{position:absolute;inset:0;width:100%;height:100%;
    -webkit-mask:url(logos/dessert-lockup.png) center/contain no-repeat;mask:url(logos/dessert-lockup.png) center/contain no-repeat}
  .lockup__fill{object-fit:cover;filter:saturate(1.8) contrast(1.2) brightness(.84)}
  .is-file .lockup__fill{display:none}
  .is-file .lockup{background:url(logos/dessert-lockup.png) center/contain no-repeat}

  .stats__n{font-variant-numeric:tabular-nums}
  .vhead__sub{margin-top:calc(clamp(3rem,5vw,6rem)*-.55);font-size:clamp(1.1rem,.95rem + .45vw,1.6rem);text-align:center}
  .vhead--dark .vhead__sub{color:var(--c-light);text-shadow:0 .1em .5em rgba(0,0,0,.3)}
  @media(max-width:767.8px){ .vhead__sub{font-size:1rem;letter-spacing:.06em;white-space:nowrap} }

  /* ======================================================================
     V4 — evals (homepage teaser + evals.html) and the three offers.
     Dessert is the only highlighted series; the human ceiling is outlined.
     ====================================================================== */
  .bench,.work{padding:clamp(6rem,9vw,12rem) 0 clamp(2rem,4vw,5rem)}
  .bench__tiles{list-style:none;margin:clamp(3rem,5vw,6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;background:color-mix(in oklab,var(--c-accent) 72%,var(--c-dark));border-radius:var(--radius);overflow:hidden}
  .bench__tile{background:var(--c-accent);padding:clamp(1.8rem,2.4vw,3.2rem);display:flex;flex-direction:column;gap:1rem;min-height:clamp(18rem,22vw,30rem)}
  .bench__n{font-size:clamp(3rem,2rem + 3vw,6.4rem);font-weight:500;line-height:1;letter-spacing:-.03em}
  .bench__k,.offer__k,.offer__tag,.ev-chart__t,.ev-legend,.ev-list,.ev-spec__i .mono,.ev-rules > .mono,.ev-tile .mono{font-size:clamp(1rem,.9rem + .3vw,1.3rem)}
  .bench__q{margin-top:auto;font-size:clamp(1.6rem,1.3rem + .6vw,2.4rem);line-height:1.25;letter-spacing:-.01em}
  .bench__foot{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:clamp(1.6rem,2vw,2.6rem)}
  .status{display:inline-flex;align-items:center;gap:.7em}
  .status:before{content:"";flex:none;width:.75em;height:.75em;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
  @media(prefers-reduced-motion:no-preference){ .status:before{animation:statusPulse 2.4s ease-in-out infinite} }
  @keyframes statusPulse{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 0 0 rgba(190,255,139,.9)}60%{box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 0 .6em rgba(190,255,139,0)}}
  @media(max-width:767.8px){ .bench__tiles{grid-template-columns:minmax(0,1fr)} .bench__tile{min-height:0} .bench__q{margin-top:.6rem} }
  @media(min-width:768px) and (max-width:1100px){ .bench__tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }

  .offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.4vw,2rem);margin-top:clamp(3rem,5vw,6rem)}
  .offer{background:var(--c-light);border-radius:var(--radius);padding:clamp(2rem,2.6vw,3.6rem);display:flex;flex-direction:column;gap:1.4rem;min-height:clamp(24rem,28vw,38rem)}
  .offer__t{font-size:clamp(3rem,2rem + 2.6vw,6rem);font-weight:500;line-height:1;letter-spacing:-.03em;margin-top:clamp(1rem,2vw,3rem)}
  .offer__d{font-size:clamp(1.5rem,1.3rem + .35vw,2rem);line-height:1.4;color:#333}
  .offer__tag{margin-top:auto;padding-top:1.4rem;border-top:1px solid rgba(0,0,0,.14);opacity:.7}
  @media(max-width:767.8px){ .offers{grid-template-columns:minmax(0,1fr)} .offer{min-height:0} }

  /* ---------- evals.html ---------- */
  .ev-top{margin-top:clamp(3rem,4.5vw,6rem)}
  .ev-sec{padding:clamp(5rem,8vw,11rem) 0 0}
  .ev-sec__head{max-width:var(--col-8);margin-bottom:clamp(3rem,4.5vw,6rem)}
  .ev-sec__head h2{font-weight:500}
  .ev-prose{max-width:var(--col-8);margin-top:clamp(3rem,4.5vw,6rem)}
  .ev-cites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.4vw,2rem)}
  .ev-cite{margin:0;background:var(--c-light);border-radius:var(--radius);padding:clamp(2rem,2.6vw,3.6rem);display:flex;flex-direction:column;gap:2rem}
  .ev-cite blockquote{margin:0;font-size:clamp(1.8rem,1.4rem + .8vw,2.8rem);line-height:1.25;letter-spacing:-.015em}
  .ev-cite figcaption{margin-top:auto;font-size:clamp(1rem,.9rem + .3vw,1.3rem);opacity:.7}
  .ev-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.14);border-radius:var(--radius);overflow:hidden}
  .ev-spec--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ev-spec__i{background:var(--c-light);padding:clamp(1.8rem,2.2vw,3rem);display:flex;flex-direction:column;gap:1.2rem}
  .ev-spec__i p{font-size:clamp(1.5rem,1.3rem + .35vw,2rem);line-height:1.4}
  .ev-rules{margin-top:clamp(2rem,3vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:2rem;align-items:start}
  .ev-rules ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 3rem}
  .ev-rules li{font-size:clamp(1.5rem,1.3rem + .35vw,2rem);line-height:1.35;padding-left:1.6em;position:relative}
  .ev-rules li:before{content:"";position:absolute;left:0;top:.5em;width:.6em;height:.6em;border-radius:50%;border:1.5px solid currentColor}
  .ev-codes li:before{border-radius:.15em}

  .ev-result{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(2rem,4vw,6rem);align-items:start}
  .ev-result--full{display:block}
  .ev-result__chart,.ev-result--full{background:var(--c-light);border-radius:var(--radius);padding:clamp(2rem,2.6vw,3.6rem)}
  .ev-chart__t{display:flex;justify-content:space-between;gap:1.6rem;margin-bottom:clamp(2rem,2.6vw,3.2rem);opacity:.8}
  .ev-pend{flex:none;padding:.2em .7em;border-radius:2em;background:var(--c-bg)}
  .ev-bars{display:flex;flex-direction:column;gap:clamp(1.2rem,1.4vw,1.8rem)}
  .ev-bar{display:grid;grid-template-columns:minmax(9rem,1.2fr) minmax(0,3fr) 4.4rem;align-items:center;gap:1.6rem}
  .ev-bar__k{font-size:clamp(1.3rem,1.15rem + .3vw,1.7rem);line-height:1.2}
  .ev-bar__t{height:1.2rem;border-radius:0 .4rem .4rem 0;background:rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(0,0,0,.35)}
  .ev-bar__t i{display:block;height:100%;width:0;border-radius:0 .4rem .4rem 0;background:rgba(0,0,0,.26);transition:width 1.4s cubic-bezier(.19,1,.22,1) .25s}
  .is-in .ev-bar__t i{width:var(--v)}
  .ev-bar.is-us .ev-bar__t i{background:var(--c-dark)}
  .ev-bar.is-ceil .ev-bar__t i{background:repeating-linear-gradient(135deg,rgba(0,0,0,.16) 0 .3rem,transparent .3rem .7rem);box-shadow:inset 0 0 0 1.5px var(--c-dark)}
  @media(prefers-reduced-motion:reduce){ .ev-bar__t i{transition:none} }
  .ev-bar.is-us{margin:0 calc(clamp(1rem,1.2vw,1.6rem)*-1);padding:clamp(.8rem,1vw,1.2rem) clamp(1rem,1.2vw,1.6rem);border-radius:var(--radius-s);background:color-mix(in oklab,var(--c-accent) 45%,transparent)}
  .ev-bar.is-us .ev-bar__t{background:rgba(0,0,0,.06)}
  .ev-result__chart .ev-pend{background:var(--c-accent)}
  .ev-bar.is-us .ev-bar__k{font-weight:600}
  .ev-bar.is-us .ev-bar__k:before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.5em;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 1px rgba(0,0,0,.2);vertical-align:.02em}
  .ev-bar.is-us .ev-bar__v{font-weight:600;opacity:1}
  .ev-bar__v{text-align:right;font-size:clamp(1.2rem,1rem + .3vw,1.5rem);opacity:.75}
  .ev-tiles{display:flex;flex-direction:column;gap:1px;background:rgba(0,0,0,.14);border-radius:var(--radius);overflow:hidden}
  .ev-tile{background:var(--c-light);padding:clamp(1.6rem,2vw,2.6rem);display:flex;flex-direction:column;gap:.8rem}
  .ev-tile__n{font-size:clamp(3rem,2rem + 2.4vw,5.4rem);font-weight:500;line-height:1;letter-spacing:-.03em}
  .ev-tile__n small{font-size:.4em;letter-spacing:0;opacity:.55}
  .ev-side{display:flex;flex-direction:column;gap:2rem}
  .ev-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.14)}
  .ev-list li{padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.14);line-height:1.4}

  .ev-grid__scroll{overflow-x:auto}
  .ev-grid{width:100%;border-collapse:collapse;min-width:56rem;font-size:clamp(1.3rem,1.15rem + .3vw,1.7rem)}
  .ev-grid th,.ev-grid td{padding:1.2rem .8rem;border-bottom:1px solid rgba(0,0,0,.1);text-align:center;font-weight:400}
  .ev-grid thead th{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75em;letter-spacing:.04em;opacity:.7}
  .ev-grid th[scope=row],.ev-grid thead th:first-child{text-align:left}
  .ev-grid tr.is-us th,.ev-grid tr.is-us .ev-grid__v{font-weight:600}
  .ev-grid tr.is-us > *{background:rgba(190,255,139,.35)}
  .ev-grid__v{display:inline-block;min-width:2.2em;margin-left:.6em;text-align:left;font-size:.85em}
  .ev-dot{display:inline-block;width:1.4rem;height:1.4rem;border-radius:50%;border:1.5px dashed rgba(0,0,0,.3);vertical-align:middle}
  .ev-dot.is-solved{border:0;background:var(--c-dark)}
  .ev-dot.is-partial{border:1.5px solid var(--c-dark);background:linear-gradient(90deg,var(--c-dark) 50%,transparent 50%)}
  .ev-dot.is-unsolved{border:1.5px solid var(--c-dark)}
  .ev-legend{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;margin-top:2rem;opacity:.8}
  .ev-legend span{display:inline-flex;align-items:center;gap:.6em}
  .ev-legend .ev-dot{width:1.1rem;height:1.1rem}

  .ev-scatter{position:relative;aspect-ratio:16/8;border-left:1px solid rgba(0,0,0,.35);border-bottom:1px solid rgba(0,0,0,.35);margin:0 0 2.4rem 2.4rem;
    background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:25% 25%}
  .ev-scatter__y{position:absolute;left:-2.4rem;top:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;font-size:1.1rem;opacity:.6}
  .ev-scatter__x{position:absolute;left:50%;bottom:-2.4rem;transform:translateX(-50%);font-size:1.1rem;opacity:.6}
  .ev-scatter svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .ev-scatter circle{fill:rgba(0,0,0,.24);vector-effect:non-scaling-stroke}
  .ev-scatter circle.is-us{fill:var(--c-dark);stroke:var(--c-light);stroke-width:1.5}
  .ev-fit{stroke:var(--c-dark);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
  .ev-sw{display:inline-block;width:1rem;height:1rem;border-radius:50%;background:rgba(0,0,0,.24)}
  .ev-sw.is-us{background:var(--c-dark)}
  .ev-sw--fit{width:1.8rem;height:0;border-radius:0;background:none;border-top:1.5px dashed var(--c-dark)}

  .ev-set{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(.6rem,.8vw,1.2rem)}
  .ev-set figure{margin:0;display:flex;flex-direction:column;gap:.8rem}
  .ev-set img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:.5rem}
  .ev-verdict{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(.9rem,.8rem + .2vw,1.15rem);white-space:nowrap}
  .ev-verdict:before{content:"";flex:none;width:.7em;height:.7em;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
  .ev-verdict.is-fix{opacity:.65}
  .ev-verdict.is-fix:before{background:none;box-shadow:inset 0 0 0 1.5px var(--c-dark)}
  .ev-set figure:has(.is-fix) img{opacity:.55}

  @media(max-width:767.8px){
    .ev-cites,.ev-spec,.ev-spec--3{grid-template-columns:minmax(0,1fr)}
    .ev-set{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:1.6rem}
    .ev-verdict__d{display:none}
    .ev-rules,.ev-rules ul,.ev-result{grid-template-columns:minmax(0,1fr)}
    .ev-bar{grid-template-columns:minmax(0,1fr) 3.6rem;gap:.6rem 1rem}
    .ev-bar__k{grid-column:1/-1}
    .ev-chart__t{flex-direction:column;align-items:flex-start;gap:.8rem}
  }
  @media(min-width:768px) and (max-width:1100px){ .ev-spec{grid-template-columns:repeat(2,minmax(0,1fr))} .ev-set{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:1.6rem} }