@media (prefers-reduced-motion: no-preference){


@property --i{syntax:'<integer>';inherits:false;initial-value:0}
@property --n{syntax:'<integer>';inherits:true;initial-value:1}
@property --num{syntax:'<integer>';inherits:false;initial-value:0}
@property --pct{syntax:'<integer>';inherits:false;initial-value:0}
@property --deg{syntax:'<angle>';inherits:false;initial-value:0deg}

@supports (animation-timeline: view()){




.m-blur-in .k-ch{
  animation:m-blur .9s cubic-bezier(.33,1,.68,1) both;
  animation-delay:calc(min(var(--i,0) * .025s, .7s));
}
@keyframes m-blur{
  from{opacity:0;transform:translateY(20px);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.m-spin-in{animation:m-spin .4s cubic-bezier(.33,1,.68,1) both}
@keyframes m-spin{from{transform:rotate(360deg)}to{transform:rotate(0)}}


.m-swoop > *{
  animation:m-swoop cubic-bezier(.215,.61,.355,1) both;
  animation-timeline:view(block auto 8%);
  animation-range:
    cover calc(min(var(--i,0), 7) * 110px)
    cover calc(500px + min(var(--i,0), 7) * 110px);
}
@keyframes m-swoop{
  from{opacity:0;transform:translateY(64px) scale(.96)}
  to{opacity:1;transform:none}
}


.m-count > .m-count-v{visibility:hidden}
.m-count::after{
  content:counter(m-n) var(--m-suffix, "");
  counter-reset:m-n var(--num);
  position:absolute;inset:0;
  animation:m-count linear both;
  animation-timeline:view(block auto 15%);
  animation-range:cover 0px cover 620px;
}
@keyframes m-count{ from{--num:0} to{--num:var(--m-to,100)} }


.m-cards > *{
  animation:m-card-up cubic-bezier(.33,1,.68,1) both;
  animation-timeline:view(block auto 12%);
  animation-range:
    cover calc(var(--i,0) * 105px)
    cover calc(480px + var(--i,0) * 105px);
}
@keyframes m-card-up{ from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:none} }


.m-rows > .m-row > .k-track{animation:m-run 34s linear infinite}
.m-rows > .m-row:nth-child(even) > .k-track{animation-direction:reverse}
.m-rows > .m-row:nth-child(3n) > .k-track{animation-duration:44s}
.m-rows:hover > .m-row > .k-track{animation-play-state:paused}
@keyframes m-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}


.m-vrun > .k-track{animation:m-vrun 26s linear infinite}
.m-vrun:hover > .k-track{animation-play-state:paused}
@keyframes m-vrun{from{transform:translateY(0)}to{transform:translateY(-50%)}}



.m-fill .k-w{
  color:var(--c-text-muted);
  animation:m-fill linear both;
  animation-timeline:view(block auto 8%);
  animation-range:
    cover calc((var(--i,0) / var(--n,1)) * 300px)
    cover calc(180px + (var(--i,0) / var(--n,1)) * 300px);
}
@keyframes m-fill{ from{color:var(--c-text-muted)} to{color:var(--c-text)} }


.m-par{
  animation:m-par linear both;
  animation-timeline:view();
  animation-range:cover 0% cover 100%;
}
@keyframes m-par{
  from{transform:translateY(calc(var(--m-par,-60px) * -1))}
  to{transform:translateY(var(--m-par,-60px))}
}


.m-draw path,.m-draw line,.m-draw polyline{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:m-draw linear both;
  animation-timeline:view(block auto 12%);
  animation-range:cover calc(var(--i,0) * 90px) cover calc(560px + var(--i,0) * 90px);
}
@keyframes m-draw{ to{stroke-dashoffset:0} }


.m-close .m-cloud{
  animation:m-cloud-l cubic-bezier(.33,1,.68,1) both;
  animation-timeline:view();
  animation-range:cover 0% cover 55%;
}
.m-close .m-cloud--r{animation-name:m-cloud-r}
@keyframes m-cloud-l{ from{transform:translateX(-75%)} to{transform:none} }
@keyframes m-cloud-r{ from{transform:translateX(75%)}  to{transform:none} }
.m-close .m-mark{
  animation:m-blur cubic-bezier(.33,1,.68,1) both;
  animation-timeline:view();
  animation-range:cover 30% cover 60%;
}


.m-bars > *{
  animation:m-bar cubic-bezier(.33,1,.68,1) both;
  animation-timeline:view(block auto 15%);
  animation-range:cover calc(var(--i,0) * 60px) cover calc(var(--m-bar,420px) + var(--i,0) * 60px);
}
.m-bars > :nth-child(2){--m-bar:300px}
.m-bars > :nth-child(3){--m-bar:380px}
.m-bars > :nth-child(4){--m-bar:500px}
.m-bars > :nth-child(5){--m-bar:500px}
@keyframes m-bar{ from{transform:scaleX(0)} to{transform:scaleX(1)} }


.m-chart .m-dot{
  animation:m-dot cubic-bezier(.33,1,.68,1) both;
  animation-timeline:view(block auto 20%);
  animation-range:
    cover calc(var(--i,0) * 40px + var(--j,0) * 24px)
    cover calc(300px + var(--i,0) * 40px + var(--j,0) * 24px);
}
@keyframes m-dot{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }


.m-scatter .m-dot{transition:transform .5s cubic-bezier(.33,1,.68,1),background .5s}
.m-scatter:hover .m-dot{
  background:color-mix(in oklab,var(--c-accent) 55%,transparent);
  transform:translate(calc((var(--i,0) - 3) * 2px), calc((var(--j,0) - 6) * 2px))}


.m-cycle > ul{animation:m-cycle calc(var(--n,4) * 2.2s) steps(var(--n,4)) infinite}
@keyframes m-cycle{ to{transform:translateY(calc(-100% * var(--n,4) / (var(--n,4) + 0))) } }


.m-hover img{transition:transform .7s cubic-bezier(.33,1,.68,1)}
.m-hover:hover img,.m-hover:focus-within img{transform:scale(1.07)}
.m-hover .m-swap > *{transition:transform .45s cubic-bezier(.33,1,.68,1),opacity .45s}
.m-hover .m-swap > :nth-child(2){transform:translateY(-120%);opacity:0}
.m-hover:hover .m-swap > :nth-child(1),
.m-hover:focus-within .m-swap > :nth-child(1){transform:translateY(120%);opacity:0}
.m-hover:hover .m-swap > :nth-child(2),
.m-hover:focus-within .m-swap > :nth-child(2){transform:none;opacity:1}


.m-fan > *{transition:transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .5s;
  transform:rotate(0) translate(0,0)}
.m-fan:hover > *,.m-fan:focus-within > *{
  transform:rotate(calc((var(--i,0) - 1) * 9deg))
            translate(calc((var(--i,0) - 1) * 34px), calc(var(--i,0) * -10px));
  box-shadow:0 14px 34px -14px rgb(0 0 0 / .35)}


.m-ring > .m-orbit{animation:m-orbit 42s linear infinite}
.m-ring .m-sat{animation:m-unspin 42s linear infinite}
@keyframes m-orbit{to{transform:rotate(360deg)}}
@keyframes m-unspin{to{transform:
  rotate(calc(360deg / var(--n,8) * var(--i,0)))
  translateY(calc(min(210px, 40vw) * -1))
  rotate(calc(360deg / var(--n,8) * var(--i,0) * -1 - 360deg))}}


.m-async > *{
  animation:m-swoop cubic-bezier(.215,.61,.355,1) both;
  animation-timeline:view(block auto 8%);
  animation-range:
    cover calc(var(--m-ord,0) * 130px)
    cover calc(480px + var(--m-ord,0) * 130px);
}
.m-async > :nth-child(3n+1){--m-ord:0}
.m-async > :nth-child(3n+2){--m-ord:1}
.m-async > :nth-child(3n+3){--m-ord:2}
.m-async > :nth-child(6n+4){--m-ord:1}
.m-async > :nth-child(6n+5){--m-ord:0}
.m-async > :nth-child(6n+6){--m-ord:2}





.m-zoom{
  animation:m-zoom cubic-bezier(.215,.61,.355,1) both;
  animation-timeline:view(block auto 8%);
  animation-range:cover 0px cover 540px;
}
@keyframes m-zoom{
  from{opacity:0;transform:scale(1.12);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}


.m-ripple .k-ch{transition:transform .3s cubic-bezier(.33,1,.68,1);
  transition-delay:calc(var(--i,0) * .012s)}
.m-ripple:hover .k-ch,.m-ripple:focus-visible .k-ch{transform:translateY(-2px)}


.m-arrows > *{
  animation:m-arrow cubic-bezier(.33,1,.68,1) both;
  animation-timeline:view(block auto 15%);
  animation-range:cover calc(var(--i,0) * 80px) cover calc(420px + var(--i,0) * 80px);
}
.m-arrows--left > *{--m-x:-16px}
@keyframes m-arrow{ from{opacity:0;transform:translateX(var(--m-x,16px))} to{opacity:1;transform:none} }



:root{timeline-scope:--k-fold}
[data-sec="hero"]{view-timeline-name:--k-fold;view-timeline-axis:block}
.k-callbar{
  animation:m-callbar cubic-bezier(.33,1,.68,1) both;
  animation-timeline:--k-fold;
  animation-range:exit 0% exit 100%;
}
@keyframes m-callbar{
  from{opacity:0;transform:translateY(100%)}
  to{opacity:1;transform:none}
}



.m-ground{
  animation:m-ground linear both;
  animation-timeline:view();
  animation-range:cover 0px cover 420px;
}
@keyframes m-ground{
  from{background-color:var(--c-surface);border-block-color:transparent}
  to{background-color:var(--c-surface-raised);border-block-color:var(--c-border)}
}

[data-surface] .m-ground,.m-ground[data-surface]{animation-name:none}



.k-pin-step{
  animation:m-step cubic-bezier(.215,.61,.355,1) both;
  animation-timeline:view(block auto 12%);
  animation-range:cover 0px cover 420px;
}
@keyframes m-step{
  from{opacity:.25;transform:translateY(26px)}
  to{opacity:1;transform:none}
}



@media (min-width:900px){
  .k-hband-track{
    animation:m-hband linear both;
    animation-timeline:view();
    animation-range:contain 0% contain 100%;
  }
  @keyframes m-hband{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-100% + 100cqw))}
  }
}



.m-ul{
  text-decoration:none;
  background-image:linear-gradient(currentColor 0 0);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .32s cubic-bezier(.33,1,.68,1);
}
.m-ul:hover,.m-ul:focus-visible{background-size:100% 1px}


:is(.k-head nav a:not([aria-current]),.k-cols a,.k-go){
  text-decoration:none;
  background-image:linear-gradient(currentColor 0 0);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .32s cubic-bezier(.33,1,.68,1),color .2s;
}
:is(.k-head nav a:not([aria-current]),.k-cols a,.k-go):hover,
:is(.k-head nav a:not([aria-current]),.k-cols a):focus-visible,
:is(a.k-card,.k-work,.k-tile):hover .k-go,
:is(a.k-card,.k-work,.k-tile):focus-within .k-go{background-size:100% 1px}


.m-lift{transition:transform .34s cubic-bezier(.33,1,.68,1),box-shadow .34s}
.m-lift:hover,.m-lift:focus-within{
  transform:translateY(-4px);
  box-shadow:0 14px 34px -16px color-mix(in oklab,var(--c-text) 46%,transparent);
}

:is(a.k-card,.k-work,.k-tile,.k-post){
  transition:transform .34s cubic-bezier(.33,1,.68,1),box-shadow .34s,background .2s}
:is(a.k-card,.k-work,.k-tile,.k-post):hover,
:is(a.k-card,.k-work,.k-tile,.k-post):focus-within{
  transform:translateY(-4px);
  box-shadow:0 14px 34px -16px color-mix(in oklab,var(--c-text) 46%,transparent);
}


.k-tile-alt{transition:opacity .45s cubic-bezier(.33,1,.68,1)}

} 
} 





.m-gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-bottom:10px;overscroll-behavior-x:contain}
.m-gallery > *{scroll-snap-align:center;flex:0 0 min(420px,78vw);margin:0}
.m-gallery img{width:100%;height:auto;border-radius:12px;display:block}



.m-rows{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.m-rows > .m-row{overflow:clip;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.m-rows > .m-row > .k-track{display:flex;gap:34px;width:max-content}
.m-vrun{overflow:clip;height:var(--m-vh,320px);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.m-vrun > .k-track{display:grid;gap:14px}


.m-chart{display:flex;align-items:flex-end;gap:10px}
.m-chart .m-col{display:grid;gap:6px;align-content:end}
.m-chart .m-dot{width:12px;height:12px;border-radius:50%;background:var(--c-accent)}
.m-scatter{display:grid;grid-auto-flow:column;gap:14px}
.m-scatter .m-col{display:grid;gap:14px}
.m-scatter .m-dot{width:10px;height:10px;border-radius:50%;
  background:color-mix(in oklab,var(--c-text) 18%,transparent)}


.k-tile-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none}
.m-hover:hover .k-tile-alt,.m-hover:focus-within .k-tile-alt{opacity:1}




.m-cycle{display:inline-block;overflow:clip;vertical-align:bottom;
  height:1.15em;position:relative}
.m-cycle > ul{display:grid;margin:0;padding:0;list-style:none}
.m-cycle > ul > li{height:1.15em;line-height:1.15em;color:var(--c-accent-text)}
.m-hover{position:relative;overflow:clip}
.m-hover .m-swap{position:relative;display:grid;overflow:clip}
.m-hover .m-swap > *{grid-area:1/1}
.m-fan{position:relative;display:grid;place-items:center;min-height:120px}
.m-fan > *{grid-area:1/1}
.m-ring{position:relative;aspect-ratio:1;width:min(420px,80vw);margin-inline:auto}
.m-ring > .m-orbit{position:absolute;inset:0}
.m-ring .m-sat{position:absolute;top:50%;left:50%;
  transform:
    rotate(calc(360deg / var(--n,8) * var(--i,0)))
    translateY(calc(min(210px, 40vw) * -1))
    rotate(calc(360deg / var(--n,8) * var(--i,0) * -1))}
.m-ring .m-hub{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.m-close{position:relative;overflow:clip}
.m-hold{position:sticky;top:var(--m-hold-top,120px)}
.m-cards > *{overflow:clip}
.m-bars > *{transform-origin:0 50%}
.m-count{position:relative}


@media (prefers-reduced-motion: reduce){
  .m-rows > .m-row,.m-vrun{mask-image:none;height:auto;overflow:visible}
  .m-rows > .m-row > .k-track > [aria-hidden="true"],
  .m-vrun > .k-track > [aria-hidden="true"]{display:none}
  .m-rows > .m-row > .k-track{flex-wrap:wrap;width:auto}
}


@media (hover: none), (pointer: coarse){
  
  .m-ul,:is(.k-head nav a:not([aria-current]),.k-cols a,.k-go){
    background-size:100% 1px;transition:none}
  .m-lift,:is(a.k-card,.k-work,.k-tile,.k-post){transition:transform .12s ease-out}
  .m-lift:hover,:is(a.k-card,.k-work,.k-tile,.k-post):hover{transform:none;box-shadow:none}
  .m-lift:active,:is(a.k-card,.k-work,.k-tile,.k-post):active{transform:translateY(1px)}
  
  .m-hover:hover .k-tile-alt{opacity:0}
  .m-hover img{transition:none}
  .m-hover:hover img{transform:none}
  .m-fan:hover > *{transform:none;box-shadow:none}
  .m-ripple:hover .k-ch{transform:none}
  .m-scatter:hover .m-dot{transform:none;background:color-mix(in oklab,var(--c-text) 18%,transparent)}
}
@media (max-width:767px){
  .m-vrun > .k-track{animation:none}
  .m-vrun{height:auto;mask-image:none}
  .m-vrun > .k-track > [aria-hidden="true"]{display:none}
  .m-ring > .m-orbit,.m-ring .m-sat{animation:none}
  .m-cycle > ul{animation:none}
  
  .m-cycle{height:auto}
  .m-cycle > ul > li:not(:first-child){display:none}
}


.m-ground{border-block:1px solid transparent}





.m-foot > *{
  animation:m-foot cubic-bezier(.215,.61,.355,1) both;
  animation-timeline:view(block auto 0%);
  animation-range:
    cover calc(min(var(--i,0), 3) * 40px)
    cover calc(160px + min(var(--i,0), 3) * 40px);
}
@keyframes m-foot{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}