@property --float-y{syntax:"<length>";inherits:false;initial-value:0px}
@property --spot-x{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --spot-y{syntax:"<percentage>";inherits:true;initial-value:42%}

:root{
  --viewport-height:100dvh;
  --spot-x:50%;
  --spot-y:42%;
  --spot-alpha:.62;
  --motion-distance:2.25rem;
}

html{
  overflow-x:clip;
  overscroll-behavior-x:none;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  text-wrap:pretty;
}

main,
section,
article,
header,
footer,
nav,
.hero-stage,
.hero-copy,
.section-shell,
.page-shell,
.tools-panel,
.capability-panel,
.work-row,
.contact-stage__content{
  min-width:0;
}

img,
video,
canvas,
svg{
  height:auto;
}

.hero-stage,
.contact-stage,
.contact-stage__content{
  min-height:var(--viewport-height,100dvh);
}

.site-header{
  padding-top:max(.7rem,env(safe-area-inset-top));
}

.js .intro-screen{
  min-height:var(--viewport-height,100dvh);
  isolation:isolate;
  overflow:clip;
  touch-action:none;
  contain:layout paint style;
}

.intro-screen__noise,
.intro-screen__spot{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.intro-screen__noise{
  z-index:-1;
  opacity:.18;
  background-image:url("noise.svg");
  background-size:220px 220px;
  mix-blend-mode:soft-light;
  animation:noiseDrift .55s steps(2,end) infinite;
}

.intro-screen__spot{
  z-index:-2;
  inset:-30%;
  background:radial-gradient(circle at 50% 50%,rgba(55,218,55,.22),rgba(55,218,55,.045) 24%,transparent 58%);
  animation:introAura 3.8s ease-in-out infinite alternate;
}

.intro-screen__stage{
  position:relative;
  display:grid;
  place-items:center;
  width:min(94vw,76rem);
  height:min(82dvh,48rem);
  min-height:28rem;
  padding:clamp(1rem,4vw,3rem);
}

.intro-screen__label{
  position:absolute;
  top:max(1rem,env(safe-area-inset-top));
  left:max(1rem,env(safe-area-inset-left));
  margin:0;
  color:var(--paper-muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.intro-screen__hint{
  position:absolute;
  left:50%;
  bottom:max(1.25rem,env(safe-area-inset-bottom));
  margin:0;
  color:var(--paper-muted);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transform:translateX(-50%);
  white-space:nowrap;
}

.intro-screen__grid{
  position:relative;
  z-index:2;
  width:min(88vw,67rem);
  pointer-events:none;
}

.intro-token{
  --drag-x:0px;
  --drag-y:0px;
  --float-y:0px;
  --token-rotate:0deg;
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:clamp(4rem,13vw,8.4rem);
  aspect-ratio:1;
  border:1px solid rgba(230,230,230,.28);
  border-radius:clamp(1rem,3vw,2rem);
  background:rgba(22,22,22,.78);
  box-shadow:0 1.4rem 4rem rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08);
  color:var(--paper);
  font-size:clamp(1rem,3.4vw,2.2rem);
  font-weight:800;
  line-height:1;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  touch-action:none;
  backdrop-filter:blur(1rem);
  transform:translate3d(calc(var(--drag-x) + 0px),calc(var(--drag-y) + var(--float-y)),0) rotate(var(--token-rotate));
  will-change:transform;
}

.intro-token:active,
.intro-token.is-dragging{
  cursor:grabbing;
  border-color:var(--accent);
  box-shadow:0 1.8rem 5rem rgba(0,0,0,.42),0 0 2.6rem rgba(55,218,55,.18);
}

.intro-token img{
  width:58%;
  aspect-ratio:1;
  object-fit:contain;
  pointer-events:none;
}

.intro-token--one{top:12%;left:5%;--token-rotate:-8deg;animation:tokenFloatA 3.9s ease-in-out infinite alternate}
.intro-token--two{top:7%;right:7%;--token-rotate:7deg;animation:tokenFloatB 4.6s ease-in-out infinite alternate}
.intro-token--three{bottom:13%;left:13%;--token-rotate:5deg;animation:tokenFloatB 4.2s .3s ease-in-out infinite alternate}
.intro-token--four{right:9%;bottom:10%;--token-rotate:-6deg;animation:tokenFloatA 4.9s .15s ease-in-out infinite alternate}

.intro-screen__progress{
  position:absolute;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(4.6rem,calc(env(safe-area-inset-bottom) + 4rem));
  width:min(12rem,42vw);
  height:2px;
  overflow:hidden;
  background:rgba(230,230,230,.18);
}

.intro-screen__progress::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  animation:introProgress 2.35s linear forwards;
}

.hero-stage::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle clamp(10rem,32vw,31rem) at var(--spot-x) var(--spot-y),rgba(55,218,55,.24) 0,rgba(55,218,55,.08) 28%,transparent 68%);
  mix-blend-mode:screen;
  opacity:.82;
  transform:translateZ(0);
  will-change:background;
}

.hero-stage:not(.has-live-spotlight)::before{
  animation:spotlightIdle 5.6s ease-in-out infinite alternate;
}

.hero-media::after{
  z-index:4;
  background-image:url("noise.svg");
  background-size:240px 240px;
  opacity:.15;
  mix-blend-mode:soft-light;
  animation:noiseDrift .65s steps(2,end) infinite;
}

.hero-picture--shift,
.hero-picture--grain{
  will-change:transform,clip-path,opacity;
}

.hero-story.is-glitching .hero-picture--shift{
  animation:mobileRgbShift .72s steps(1,end) both!important;
}

.hero-story.is-glitching .hero-picture--grain{
  animation:mobileGrainSlice .72s steps(1,end) both!important;
}

.fx-media{
  position:relative;
  isolation:isolate;
  overflow:clip;
  border-radius:inherit;
  background:var(--ink-soft);
}

.fx-media>img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.fx-media__clone,
.fx-media::after{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.fx-media__clone{
  z-index:2;
  opacity:0;
  mix-blend-mode:screen;
  filter:saturate(1.55) contrast(1.08) hue-rotate(68deg);
  transform:translate3d(0,0,0) scale(1.015);
}

.fx-media::after{
  content:"";
  z-index:3;
  background-image:url("noise.svg");
  background-size:210px 210px;
  opacity:.1;
  mix-blend-mode:overlay;
}

.fx-media.is-glitching .fx-media__clone{
  animation:mediaRgbShift .64s steps(1,end) both;
}

.motion-touch .tool-chip.is-motion-active,
.motion-touch .capability-card.is-motion-active,
.motion-touch .metric.is-motion-active,
.motion-touch .surface-card.is-motion-active,
.motion-touch .evolution-grid article.is-motion-active{
  border-color:rgba(55,218,55,.72);
  box-shadow:0 1.5rem 3.8rem rgba(0,0,0,.18),0 0 0 1px rgba(55,218,55,.12);
}

.motion-touch .tool-chip.is-motion-active{
  color:var(--ink);
  background:var(--accent);
  transform:translate3d(0,-.3rem,0) scale(1.035);
}

.motion-touch .work-row.is-motion-active::after{
  transform:scaleX(1);
}

.motion-touch .work-row.is-motion-active>span{
  color:var(--accent);
}

.motion-touch .work-row.is-motion-active>div{
  transform:translate3d(.35rem,0,0);
}

.js.motion-ready [data-reveal],
.js.motion-ready .motion-reveal{
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0);
  filter:blur(.35rem);
  transition:opacity .72s var(--ease-out),transform .9s var(--ease-out),filter .72s var(--ease-out);
}

.js.motion-ready [data-reveal].is-visible,
.js.motion-ready .motion-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.js.motion-ready [data-reveal].is-above-fold{
  opacity:1;
  transform:none;
  filter:none;
}

@keyframes tokenFloatA{from{--float-y:-.35rem}to{--float-y:.55rem}}
@keyframes tokenFloatB{from{--float-y:.5rem}to{--float-y:-.45rem}}
@keyframes introProgress{to{transform:scaleX(1)}}
@keyframes introAura{from{transform:translate3d(-2%,1%,0) scale(.96)}to{transform:translate3d(3%,-2%,0) scale(1.05)}}
@keyframes noiseDrift{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-1.5%,1%,0)}50%{transform:translate3d(1%,-1.5%,0)}75%{transform:translate3d(1.5%,1%,0)}100%{transform:translate3d(-1%,0,0)}}
@keyframes spotlightIdle{0%{--spot-x:38%;--spot-y:38%;opacity:.58}50%{--spot-x:58%;--spot-y:48%;opacity:.86}100%{--spot-x:46%;--spot-y:60%;opacity:.66}}
@keyframes mobileRgbShift{
  0%,100%{opacity:.2;clip-path:polygon(0 25%,100% 17%,100% 43%,0 50%);transform:translate3d(0,0,0)}
  15%{opacity:.62;clip-path:polygon(0 5%,100% 14%,100% 26%,0 18%);transform:translate3d(.7rem,-.1rem,0)}
  28%{opacity:.34;clip-path:polygon(0 59%,100% 48%,100% 69%,0 82%);transform:translate3d(-.65rem,.08rem,0)}
  42%{opacity:.52;clip-path:polygon(0 34%,100% 29%,100% 37%,0 46%);transform:translate3d(.4rem,0,0)}
  64%{opacity:.25;clip-path:polygon(0 72%,100% 63%,100% 79%,0 90%);transform:translate3d(-.25rem,0,0)}
}
@keyframes mobileGrainSlice{
  0%,100%{opacity:.1;clip-path:polygon(0 58%,100% 46%,100% 76%,0 88%)}
  18%{opacity:.34;clip-path:polygon(0 12%,100% 7%,100% 19%,0 27%)}
  36%{opacity:.18;clip-path:polygon(0 41%,100% 34%,100% 49%,0 59%)}
  58%{opacity:.31;clip-path:polygon(0 76%,100% 68%,100% 84%,0 94%)}
}
@keyframes mediaRgbShift{
  0%,100%{opacity:0;clip-path:inset(0 0 0 0);transform:translate3d(0,0,0) scale(1.015)}
  14%{opacity:.56;clip-path:inset(8% 0 68% 0);transform:translate3d(.55rem,0,0) scale(1.02)}
  28%{opacity:.38;clip-path:inset(58% 0 18% 0);transform:translate3d(-.5rem,0,0) scale(1.02)}
  46%{opacity:.5;clip-path:inset(31% 0 47% 0);transform:translate3d(.32rem,0,0) scale(1.02)}
  66%{opacity:.3;clip-path:inset(74% 0 8% 0);transform:translate3d(-.25rem,0,0) scale(1.02)}
}

@media (max-width:47.99rem){
  :root{--motion-distance:1.45rem}
  .hero-story,
  .js .hero-story{min-height:155svh}
  .hero-copy{
    width:min(100% - 1.5rem,40rem);
    padding-top:calc(var(--header-height) + 2rem);
    padding-bottom:max(1.5rem,calc(env(safe-area-inset-bottom) + 1rem));
  }
  .hero-copy h1{
    max-width:15ch;
    font-size:clamp(2.35rem,11.5vw,4.35rem);
    line-height:.89;
    letter-spacing:-.068em;
    overflow-wrap:break-word;
  }
  .hero-copy__secondary{font-size:clamp(1rem,5vw,1.35rem)}
  .hero-copy__body{font-size:.94rem;line-height:1.45}
  .hero-stage::before{
    background:radial-gradient(circle min(78vw,24rem) at var(--spot-x) var(--spot-y),rgba(55,218,55,.22),rgba(55,218,55,.08) 35%,transparent 72%);
    opacity:.74;
  }
  .intro-screen__stage{height:var(--viewport-height,100dvh);min-height:0}
  .intro-screen__grid{font-size:clamp(3.25rem,18vw,6.8rem)}
  .intro-token{width:clamp(3.8rem,20vw,5.8rem);border-radius:1.1rem}
  .intro-token--one{top:17%;left:2%}
  .intro-token--two{top:12%;right:1%}
  .intro-token--three{bottom:17%;left:7%}
  .intro-token--four{right:5%;bottom:13%}
  .section-shell,.page-shell{width:min(100% - 1.5rem,88rem)}
  .section-heading h2,.tools-panel__heading h2,.capability-panel__intro h2{
    max-width:18ch;
    font-size:clamp(2.1rem,10vw,3.5rem);
    line-height:.95;
  }
  .manifesto-section h2,.contact-stage h2{
    max-width:15ch;
    font-size:clamp(2.4rem,12vw,4.1rem);
    line-height:.89;
  }
  .metric__value{font-size:clamp(3.2rem,16vw,5.3rem)}
  .work-row h2,.work-row h3{font-size:clamp(1.55rem,8vw,2.75rem);line-height:1}
  .work-row>div>p:last-child{font-size:.84rem}
  .capability-card{min-height:16rem;padding:1.2rem}
  .contact-stage__links a{overflow-wrap:anywhere;word-break:break-word}
}

@media (max-width:22.5rem){
  :root{--container:min(100% - 1rem,88rem);--container-wide:min(100% - 1rem,104rem)}
  .section-shell,.page-shell{width:calc(100% - 1rem)}
  .site-header{padding-inline:max(.65rem,env(safe-area-inset-left)) max(.65rem,env(safe-area-inset-right))}
  .hero-copy{width:calc(100% - 1rem)}
  .hero-copy h1{font-size:clamp(2rem,11vw,2.7rem)}
  .work-row{grid-template-columns:1.3rem minmax(0,1fr)}
}

@media (hover:hover) and (pointer:fine){
  .fx-media:hover .fx-media__clone,
  .fx-media:focus-within .fx-media__clone{
    animation:mediaRgbShift .64s steps(1,end) both;
  }
}

@media (prefers-reduced-motion:reduce){
  html:not(.motion-forced) .intro-screen__noise,
  html:not(.motion-forced) .intro-screen__spot,
  html:not(.motion-forced) .intro-token,
  html:not(.motion-forced) .intro-screen__progress::after,
  html:not(.motion-forced) .hero-stage::before,
  html:not(.motion-forced) .hero-media::after,
  html:not(.motion-forced) .fx-media__clone,
  html:not(.motion-forced) .fx-media::after{
    animation:none!important;
  }
  html:not(.motion-forced) .hero-stage::before{opacity:.28}
  .js.motion-ready:not(.motion-forced) [data-reveal],
  .js.motion-ready:not(.motion-forced) .motion-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

html.motion-forced .intro-screen__noise,
html.motion-forced .intro-screen__spot,
html.motion-forced .intro-token,
html.motion-forced .intro-screen__progress::after,
html.motion-forced .hero-stage::before,
html.motion-forced .hero-media::after{
  animation-play-state:running!important;
}

@media (forced-colors:active){
  .hero-stage::before,.intro-screen__noise,.intro-screen__spot,.fx-media::after{display:none}
  .intro-token{border:2px solid CanvasText;background:Canvas}
}

body.is-leaving main,body.is-leaving .site-footer{opacity:0;transform:translate3d(0,.65rem,0);transition:opacity .2s ease,transform .2s ease}
.arrow-link.is-pressed .roll>span:first-child,.primary-button.is-pressed .roll>span:first-child{transform:translate3d(0,-115%,0)}
.arrow-link.is-pressed .roll>span:last-child,.primary-button.is-pressed .roll>span:last-child{transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){html:not(.motion-forced) body.is-leaving main,html:not(.motion-forced) body.is-leaving .site-footer{transform:none;transition:none}}
.fx-media.article-cover{display:block}
.fx-media--article-cover>img{width:100%;height:auto;max-height:70svh;object-fit:cover}
.fx-media.card-image{display:block}
.fx-media--card-image>img{width:100%;height:100%;object-fit:cover}
.fx-media--rich{max-width:100%;margin-block:2.5rem}
.fx-media--rich>img{width:100%;height:auto;margin:0}

.js .intro-screen{
  touch-action:manipulation;
}
.intro-screen__stage{
  width:100%;
  height:var(--viewport-height,100dvh);
  min-height:0;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
}
.intro-screen__progress{
  left:50%;
  right:auto;
  bottom:max(4.75rem,calc(env(safe-area-inset-bottom) + 4.25rem));
  width:min(15rem,54vw);
  transform:translateX(-50%);
}
.intro-screen__progress::after{
  animation-duration:2.85s;
}
.intro-screen button{
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
}
@media (max-width:47.99rem){
  .intro-screen__stage{height:var(--viewport-height,100dvh)}
}
@media (forced-colors:active){
  .intro-screen__door--left img{filter:none}
}