.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:90;
  width:100%;
  height:2px;
  background:var(--copper);
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left center;
  pointer-events:none;
}

.site-header{view-transition-name:site-header;transition:height var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out)}
.site-header.is-compact{height:70px;background:rgb(255 239 204 / 88%);backdrop-filter:blur(14px)}
#main{view-transition-name:main-content}

[data-depth]{
  --rx:0deg;
  --ry:0deg;
  --depth-lift:0px;
  transform:perspective(900px) rotateX(clamp(-2deg,var(--rx),2deg)) rotateY(clamp(-2deg,var(--ry),2deg)) translateY(var(--depth-lift));
  transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out);
  will-change:transform;
}

[data-depth]:hover{--depth-lift:-6px;transform:perspective(900px) rotateX(clamp(-2deg,var(--rx),2deg)) rotateY(clamp(-2deg,var(--ry),2deg)) translateY(-6px);box-shadow:var(--shadow)}
.button{
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(105deg,transparent 0 38%,rgb(255 255 255 / 28%) 48%,transparent 58% 100%);
  background-position:100% 50%;
  background-size:250% 100%;
  transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),background-position 420ms var(--ease-out);
}

.button:hover{transform:translateY(-2px)}
.button:is(:hover,:focus-visible){background-position:0 50%}

.site-nav a{position:relative}
.site-nav a::after{
  position:absolute;
  right:0;
  bottom:-.45rem;
  left:0;
  height:1px;
  background:var(--copper);
  content:"";
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--motion-base) var(--ease-out);
}
.site-nav a:is(:hover,:focus-visible,[aria-current=page])::after{transform:scaleX(1)}
.site-nav .button::after{content:none}

:focus-visible{outline:3px solid var(--white);outline-offset:2px;box-shadow:0 0 0 6px var(--teal)}

.intervention-rail{
  position:relative;
  border-top:0;
}

.intervention-rail::before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:rgb(255 255 255 / 22%);
  content:"";
  transform:scaleX(1);
  transform-origin:left;
  transition:transform 680ms var(--ease-fluid);
}

.motion-ready .intervention-rail:not(.is-visible)::before{transform:scaleX(0)}
.intervention-rail.is-visible::before{transform:scaleX(1)}

.founder-photo{
  position:relative;
  overflow:hidden;
}

.founder-photo::after{
  position:absolute;
  inset:-20% -55%;
  background:linear-gradient(105deg,transparent 40%,rgb(255 255 255 / 30%) 50%,transparent 60%);
  content:"";
  pointer-events:none;
  transform:translateX(-70%);
  animation:none;
}

.founder-photo.is-visible::after{animation:founder-light-sweep 900ms var(--ease-fluid) 1 both}

@keyframes founder-light-sweep{
  from{transform:translateX(-70%)}
  to{transform:translateX(70%)}
}

.service-detail{position:relative}
.service-detail::before{
  position:absolute;
  top:-1px;
  right:-1px;
  left:-1px;
  height:2px;
  background:var(--copper);
  content:"";
  transform:scaleX(0);
  transition:transform 620ms var(--ease-fluid);
}
.service-detail:nth-child(odd)::before{transform-origin:left}
.service-detail:nth-child(even)::before{transform-origin:right}
.service-detail.is-visible::before{transform:scaleX(1)}
.motion-ready .service-detail[data-reveal]{transform:none}

.readiness-list{
  position:relative;
  padding-left:2rem;
}
.readiness-list::before{
  position:absolute;
  top:1.25rem;
  bottom:1.25rem;
  left:.45rem;
  width:1px;
  background:var(--copper);
  content:"";
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 720ms var(--ease-fluid);
}
.readiness-list.is-visible::before{transform:scaleY(1)}
.readiness-list li{position:relative}
.readiness-list li::before{
  position:absolute;
  top:1.45rem;
  left:-1.95rem;
  width:.7rem;
  height:.7rem;
  border:2px solid var(--copper);
  border-radius:50%;
  background:var(--paper);
  content:"";
  transform:scale(.35);
  transition:transform var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out);
}
.readiness-list.is-visible li::before{background:var(--copper);transform:scale(1)}

input,
select,
textarea{
  transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out);
}

:is(input,select,textarea):focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--teal);
}

.form-status{transition:opacity var(--motion-fast) var(--ease-out)}
.inquiry-form{transform:none!important}

.motion-ready [data-counter]{visibility:hidden}
.motion-ready [data-counter].is-counting,
.motion-ready [data-counter].is-complete{visibility:visible}

.motion-ready [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-distance));
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-slow) var(--ease-fluid);
}

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

.motion-ready [data-stagger] > [data-reveal]:nth-child(2){transition-delay:80ms}
.motion-ready [data-stagger] > [data-reveal]:nth-child(3){transition-delay:160ms}
.motion-ready [data-stagger] > [data-reveal]:nth-child(4){transition-delay:240ms}
.motion-ready [data-stagger] > [data-reveal]:nth-child(5){transition-delay:320ms}
.motion-ready [data-stagger] > [data-reveal]:nth-child(6){transition-delay:400ms}
.motion-ready [data-stagger] > [data-reveal]:nth-child(n+7){transition-delay:480ms}

.cinematic-surface{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.cinematic-surface > *{
  position:relative;
  z-index:1;
}

.cinematic-surface::before,
.cinematic-surface::after{
  position:absolute;
  z-index:0;
  width:min(52vw,700px);
  aspect-ratio:1;
  border-radius:50%;
  content:"";
  pointer-events:none;
  filter:blur(var(--atmosphere-blur));
  animation:atmosphere-drift 14s var(--ease-fluid) infinite alternate;
  animation-play-state:paused;
}

.cinematic-surface::before{
  top:-42%;
  right:-16%;
  background:radial-gradient(circle,rgb(18 98 94 / 24%) 0%,rgb(18 98 94 / 8%) 42%,transparent 72%);
}

.cinematic-surface::after{
  bottom:-54%;
  left:-12%;
  background:radial-gradient(circle,rgb(214 154 88 / 18%) 0%,rgb(214 154 88 / 6%) 40%,transparent 70%);
  animation-duration:18s;
  animation-direction:alternate-reverse;
}

.cinematic-surface.is-in-view::before,
.cinematic-surface.is-in-view::after{
  animation-play-state:running;
}

.document-hidden .cinematic-surface::before,
.document-hidden .cinematic-surface::after{
  animation-play-state:paused;
}

.motion-static .cinematic-surface::before,
.motion-static .cinematic-surface::after{
  animation:none;
}

@keyframes atmosphere-drift{
  from{transform:translate3d(-1.5%,0,0) scale(1)}
  to{transform:translate3d(1.5%,-1%,0) scale(1.025)}
}

@view-transition{navigation:auto}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(site-header),
::view-transition-new(site-header){animation:none}

::view-transition-old(main-content){animation:page-out 180ms var(--ease-out) both}
::view-transition-new(main-content){animation:page-in 260ms var(--ease-fluid) both}

@keyframes page-out{
  to{opacity:0;transform:translateY(-4px)}
}

@keyframes page-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce){
  .motion-ready [data-reveal],
  .motion-ready [data-reveal].is-visible{
    opacity:1;
    transform:none;
    transition:none;
  }

  .motion-ready [data-counter]{visibility:visible}

  .intervention-rail::before{
    transform:scaleX(1);
    transition:none;
  }

  .founder-photo.is-visible::after{animation:none}

  .service-detail::before{
    transform:scaleX(1);
    transition:none;
  }

  .readiness-list::before,
  .readiness-list li::before{
    transform:none;
    transition:none;
  }

  :is(input,select,textarea),
  .form-status{
    transition:none;
  }

  ::view-transition-old(main-content),
  ::view-transition-new(main-content){
    animation:none;
  }

  [data-depth],
  [data-depth]:hover,
  .button:hover{
    transform:none;
  }

  .button,
  .site-nav a::after{transition:none}

  .cinematic-surface::before,
  .cinematic-surface::after{
    animation:none;
  }

  .scroll-progress{display:none}
}

@media (max-width: 620px){
  .readiness-list{padding-left:1.75rem}
  .readiness-list::before{left:.35rem}
  .readiness-list li::before{left:-1.7rem}
}

@media (pointer: coarse), (max-width: 700px){
  .cinematic-surface::before,
  .cinematic-surface::after{
    animation:none;
  }

  [data-depth],
  [data-depth]:hover{
    transform:none;
  }
}