@font-face{
  font-family:"Hero Mono";
  src:url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style:normal;font-weight:300 800;font-display:swap;
}
@media(min-width:901px){
  .cinematic-hero-page{--hero-mono:"Hero Mono","Portfolio CJK",monospace}
  .home-page #home.hero.cinematic-active{
    height:100svh;min-height:640px;max-height:none;
    color:#fff;background:#000;overflow:hidden;
    font-family:var(--hero-mono);isolation:isolate;
  }
  #home.cinematic-active>:is(.hero-frame,.hero-top,.hero-content,.hero-bottom){display:none}
  #home.cinematic-active .light-field{z-index:0}
  #home.cinematic-active.has-logo-scroll>.hero-cinematic-content{opacity:var(--hero-copy-opacity,1)}
  #home.cinematic-active::after{
    content:"";position:absolute;inset:auto 0 0;height:60%;z-index:5;
    background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.3),transparent);
    pointer-events:none;
  }
  #home.cinematic-active.has-logo-scroll::after{opacity:var(--hero-copy-opacity,1)}
  #home.cinematic-active .hero-cinematic-content{
    position:relative;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;
    height:100%;width:100%;padding:128px 80px 80px;
  }
  #home .hero-cinematic-content[hidden]{display:none}
  .hero-cinematic-label{
    margin:0 0 48px;color:rgba(255,255,255,.5);
    font:300 12px/16px var(--hero-mono);letter-spacing:.3em;text-transform:uppercase;
  }
  .hero-cinematic-columns{display:flex;align-items:flex-end;justify-content:space-between;gap:80px}
  .hero-cinematic-left{flex-shrink:0}
  #home #hero-cinematic-title{
    margin:0;max-width:680px;color:#fff;
    font:600 96px/.95 var(--hero-mono);letter-spacing:-.06em;text-wrap:balance;
  }
  #home #hero-cinematic-title>span{color:inherit}
  .hero-cinematic-comma{display:inline-block;margin-left:8px;font-size:.4em;letter-spacing:0;line-height:1}
  .hero-cinematic-stop{
    display:inline-block;width:10px;height:10px;margin-left:8px;
    border:2px solid currentColor;border-radius:50%;vertical-align:.04em;
  }
  .hero-cinematic-meta{
    display:flex;align-items:center;gap:24px;margin:24px 0 0;
    color:rgba(255,255,255,.4);font:300 12px/16px var(--hero-mono);
    letter-spacing:.1em;text-transform:uppercase;
  }
  .hero-cinematic-meta>i{display:inline-block;width:32px;height:1px;background:rgba(255,255,255,.2);flex:none}
  .hero-cinematic-right{display:flex;flex-direction:column;gap:32px;width:448px;max-width:40%}
  .hero-cinematic-description{
    margin:0;color:rgba(255,255,255,.6);font:300 14px/24px var(--hero-mono);text-wrap:pretty;
  }
  .hero-cinematic-disciplines{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
  .hero-cinematic-disciplines>div{display:flex;flex-direction:column;gap:4px}
  .hero-cinematic-value{color:#fff;font:700 30px/36px var(--hero-mono);letter-spacing:-.05em}
  .hero-cinematic-caption{color:rgba(255,255,255,.4);font:300 12px/16px var(--hero-mono);letter-spacing:.1em}
  .cinematic-active [data-cinematic-reveal]{
    animation:hero-cinematic-rise 800ms cubic-bezier(.16,1,.3,1) both;
    animation-play-state:paused;
  }
  .cinematic-active [data-cinematic-reveal="label"]{animation-name:hero-cinematic-fade;animation-duration:1s;animation-delay:.4s}
  .cinematic-active [data-cinematic-reveal="title"]{animation-duration:1s;animation-delay:.6s}
  .cinematic-active [data-cinematic-reveal="meta"]{animation-delay:1s}
  .cinematic-active [data-cinematic-reveal="description"]{animation-delay:1.1s}
  .cinematic-active [data-cinematic-reveal^="stat-"]{animation-duration:700ms}
  .cinematic-active [data-cinematic-reveal="stat-1"]{animation-delay:1.3s}
  .cinematic-active [data-cinematic-reveal="stat-2"]{animation-delay:1.45s}
  .cinematic-active [data-cinematic-reveal="stat-3"]{animation-delay:1.6s}
  .cinematic-active .hero-cinematic-meta>i{
    animation:hero-cinematic-line 1s cubic-bezier(.16,1,.3,1) .9s both;
    animation-play-state:paused;
  }
  .cinematic-entered:not(.cinematic-paused) [data-cinematic-reveal],
  .cinematic-entered:not(.cinematic-paused) .hero-cinematic-meta>i{animation-play-state:running}
  #home.cinematic-paused .hero-video{animation-play-state:paused}
  #home.cinematic-settled :is([data-cinematic-reveal],.hero-cinematic-meta>i,.hero-video){
    animation:none;opacity:1;transform:none;clip-path:none;
  }
  .cinematic-hero-page>.header{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    height:80px;padding-inline:80px;z-index:50;
    --ink:#fff;--muted:rgba(255,255,255,.7);
    background:rgba(0,0,0,.4);border-color:transparent;box-shadow:none;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:background-color 300ms cubic-bezier(.16,1,.3,1),backdrop-filter 300ms cubic-bezier(.16,1,.3,1);
  }
  .cinematic-hero-page>.header.header-has-scrolled{
    background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .cinematic-hero-page>.header>.wordmark{justify-self:start}
  .cinematic-hero-page>.header>.wordmark::before{background:#fff}
  .cinematic-hero-page>.header .wordmark>.name{font-family:var(--hero-mono);color:#fff}
  .cinematic-hero-page>.header>nav{
    justify-self:end;gap:32px;font:300 12px/16px var(--hero-mono);
    letter-spacing:.2em;text-transform:uppercase;
  }
  .cinematic-hero-page>.header>nav>a{color:rgba(255,255,255,.7)}
  .cinematic-hero-page>.header>nav>a:is(:hover,:focus-visible){color:#fff}
  .cinematic-hero-page>.header a:focus-visible{outline:2px solid #fff;outline-offset:4px}
  @keyframes hero-cinematic-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  @keyframes hero-cinematic-fade{from{opacity:0}to{opacity:1}}
  @keyframes hero-cinematic-line{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
}
@media(min-width:901px) and (max-width:1100px){
  #home.cinematic-active .hero-cinematic-content{padding-inline:64px;padding-bottom:64px}
  #home #hero-cinematic-title{font-size:80px}
  .hero-cinematic-columns{gap:48px}
  .hero-cinematic-right{max-width:44%}
  .hero-cinematic-disciplines{gap:24px}
  .hero-cinematic-value{font-size:24px;line-height:32px}
  .cinematic-hero-page>.header{padding-inline:64px;gap:32px}
  .cinematic-hero-page>.header>nav{gap:24px}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){
  #home.cinematic-active :is([data-cinematic-reveal],.hero-cinematic-meta>i,.hero-video){animation:none;opacity:1;transform:none;clip-path:none}
}