@keyframes tkg-ambient{to{translate:0 -6px}}@keyframes tkg-ring{to{translate:3px -3px}}
@keyframes eq-rotate{to{transform:rotate(360deg)}}
@keyframes eq-pulse{to{height:12%}}
/* Reveal only when the browser can observe the content. */
.reveal:not([data-motion]), .reveal:focus-within, .reveal:target{
 opacity:1;transform:none
}
.reveal[data-motion]{
 transition:opacity .55s ease, translate .7s cubic-bezier(.16,1,.3,1);
 transition-delay:var(--enter-delay,0ms);
 transform:none
}
.reveal[data-motion]:not(.visible):not(:focus-within):not(:target){translate:0 16px}
.reveal.visible{translate:0 0}
.hero-art-svg{translate:var(--art-x,0px) var(--art-y,0px);transition:translate .36s cubic-bezier(.16,1,.3,1)}
.service-detailed .accent{transform-origin:left;transition:transform .3s ease}
.service-detailed:focus-within .accent{transform:scaleX(1.25)}
.hero-art.motion-paused *, .eq-feature-art.motion-paused *{animation-play-state:paused!important}
.eq-bars i{transform-origin:center;animation-name:eq-scale}
@keyframes eq-scale{to{transform:scaleY(.28)}}
@media(hover:hover) and (pointer:fine){
 .service-detailed:hover .accent{transform:scaleX(1.25)}
 .heroactions .btn:hover,.contact-buttons .btn:hover{translate:0 -3px}
}
/* Separate the lighting, ribbons and individual windows so depth reads on touch devices as well. */
.hero-copy>*{animation:copy-enter .88s cubic-bezier(.16,1,.3,1) both}
.hero-copy h1{animation-delay:.12s}
.hero-copy .lead{animation-delay:.23s}
.hero-copy .heroactions{animation-delay:.32s}
@keyframes copy-enter{
  from{opacity:0;transform:translate3d(0,15px,0);clip-path:inset(0 0 22% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 -3px -5px)}
}
.hero-art{
  --px:0;
  --py:0;
  --scroll-depth:0;
}
.hero-art-svg{
  translate:none;
  transform:perspective(1000px) rotateX(calc(var(--py) * -7deg)) rotateY(calc(var(--px) * 8deg));
  overflow:visible;
}
.hero-art .floating-panels{animation:none}
.hero-art .ribbon-back,.hero-art .ribbon-front{
  transform:translate3d(calc(var(--px) * var(--ribbon-x)),
    calc(var(--py) * var(--ribbon-y) + var(--scroll-depth) * var(--ribbon-z)),0);
  transform-box:fill-box;
  transform-origin:center;
}
.hero-art .ribbon-back{
  --ribbon-x:11px;--ribbon-y:8px;--ribbon-z:10px;
  --loop-x:-22px;--loop-y:-16px;--loop-angle:-2.7deg;
  animation:ribbon-in 1s .08s both, layer-orbit 10.8s 1s linear infinite;
}
.hero-art .ribbon-front{
  --ribbon-x:43px;--ribbon-y:27px;--ribbon-z:43px;
  --loop-x:31px;--loop-y:-18px;--loop-angle:3.2deg;
  animation:ribbon-in 1s .27s both, layer-orbit 9.8s 1s linear infinite reverse;
}
@keyframes ribbon-in{
  from{opacity:0;clip-path:inset(0 90% 0 0)}
  to{opacity:1;clip-path:inset(-32px -35px)}
}
.art-panel{
  --loop-x:-26px;--loop-y:-27px;--loop-angle:-4deg;--depth:19px;--scroll-z:24px;
  transform-box:fill-box;transform-origin:center;
  transform:translate3d(calc(var(--px) * var(--depth)),
    calc(var(--py) * var(--depth) * .7 + var(--scroll-depth) * var(--scroll-z)),0);
  animation:panel-arrive .9s var(--arrival,.12s) cubic-bezier(.16,1,.3,1) both,
            layer-orbit var(--period,9.5s) var(--phase,-.5s) linear infinite;
}
.art-panel:nth-child(2){--arrival:.23s;--loop-x:27px;--loop-y:-38px;--loop-angle:3.7deg;--depth:32px;--scroll-z:38px;--period:10.7s;--phase:-1.8s}
.art-panel:nth-child(3){--arrival:.34s;--loop-x:34px;--loop-y:24px;--loop-angle:5.5deg;--depth:47px;--scroll-z:51px;--period:9s;--phase:-2.7s}
.art-panel:nth-child(4){--arrival:.43s;--loop-x:-26px;--loop-y:29px;--loop-angle:-6deg;--depth:56px;--scroll-z:63px;--period:7.8s;--phase:-.9s}
@keyframes panel-arrive{
  from{opacity:0;scale:.78}
  to{opacity:1;scale:1}
}
/* Eight points trace a closed path so each layer moves through the loop
   instead of easing to a stop at both ends. */
@keyframes layer-orbit{
  0%,100%{translate:0 var(--loop-y);rotate:0deg}
  12.5%{translate:calc(var(--loop-x) * .707) calc(var(--loop-y) * .707);rotate:calc(var(--loop-angle) * .707)}
  25%{translate:var(--loop-x) 0;rotate:var(--loop-angle)}
  37.5%{translate:calc(var(--loop-x) * .707) calc(var(--loop-y) * -.707);rotate:calc(var(--loop-angle) * .707)}
  50%{translate:0 calc(var(--loop-y) * -1);rotate:0deg}
  62.5%{translate:calc(var(--loop-x) * -.707) calc(var(--loop-y) * -.707);rotate:calc(var(--loop-angle) * -.707)}
  75%{translate:calc(var(--loop-x) * -1) 0;rotate:calc(var(--loop-angle) * -1)}
  87.5%{translate:calc(var(--loop-x) * -.707) calc(var(--loop-y) * .707);rotate:calc(var(--loop-angle) * -.707)}
}
.ribbon-glint{pointer-events:none}
.ribbon-glint path{stroke-dasharray:12 88;animation:metal-sweep 10.2s linear infinite}
.ribbon-glint path:nth-child(2){animation-delay:-5.1s}
@keyframes metal-sweep{from{stroke-dashoffset:0;opacity:.12}40%{opacity:.9}to{stroke-dashoffset:-100;opacity:.12}}
.art-panel rect:first-child{animation:window-light 9.9s ease-in-out infinite alternate}
.art-panel:nth-child(even) rect:first-child{animation-delay:-2.6s}
@keyframes window-light{from{stroke-opacity:.64}to{stroke-opacity:1}}
.btn-gold::after{
  position:absolute;content:"";inset:-25% auto -25% 0;width:31%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff8,transparent);
  transform:translate3d(-145%,0,0) skewX(-20deg);animation:gold-reflection 8s 1.2s ease-in-out infinite;
}
@keyframes gold-reflection{0%,68%{transform:translate3d(-145%,0,0) skewX(-20deg);opacity:0}74%{opacity:.7}93%,100%{transform:translate3d(425%,0,0) skewX(-20deg);opacity:0}}
.btn,.btn-icon,.service-symbol,.disclosure-icon,.header{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,translate .24s ease,rotate .24s ease}
.btn:active{translate:0 1px;scale:.98}
.quote-form :is(input,select,textarea),.contact-dialog :is(input,textarea){transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.quote-form :is(input,select,textarea):focus,.contact-dialog :is(input,textarea):focus{background:#20111c;box-shadow:0 0 15px #ffd45e22}
.quote-step:not([hidden]),.service-details[open] .details-content,.mobile-nav.open{animation:surface-enter .31s cubic-bezier(.16,1,.3,1) both}
@keyframes surface-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.contact-dialog[open]{animation:panel-open .33s cubic-bezier(.16,1,.3,1) both}
.contact-dialog.closing{animation:panel-close .19s ease-in both}
.contact-dialog[open]::backdrop{animation:backdrop-in .2s both}
@keyframes panel-open{from{opacity:0;transform:translate3d(0,16px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes panel-close{to{opacity:0;transform:translate3d(0,10px,0) scale(.99)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
.reveal[data-motion]:not(.visible):not(:focus-within):not(:target){transform:translate3d(0,10px,0) scale(.985)}
.reveal[data-motion]{transition:opacity .58s ease,translate .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){
 .btn.btn-gold:hover{translate:0 -3px;box-shadow:0 8px 25px #ffbf3c55}
 .btn.btn-contact:hover{translate:0 -2px;border-color:#ff86a8;box-shadow:0 0 18px #ff24565c}
 .btn:hover .btn-icon{rotate:18deg;translate:2px 0}
 .service.service-detailed:hover{transform:translate3d(0,-4px,0);box-shadow:0 14px 28px #0008,inset 0 1px #ff6c9055}
 .service:hover .service-symbol{rotate:-7deg;translate:0 -2px}
}
/* Keep separate trajectories at a slower pace on narrow screens. */
@media(max-width:750px){
 .art-panel:nth-child(1){--period:8.6s}
 .art-panel:nth-child(2){--period:9.9s}
 .art-panel:nth-child(3){--period:8.5s}
 .art-panel:nth-child(4){--period:7.4s}
 .hero-art .ribbon-back{animation-duration:1s,10.6s}
 .hero-art .ribbon-front{animation-duration:1s,9.4s}
 .ribbon-glint path{animation-duration:8s}
 .ribbon-glint path:nth-child(2){animation-delay:-4s}
}
/* A slow display still gets the layer motion; skip extra SVG repaints. */
@media(update:slow){
 .hero-art .ribbon-glint path,.art-panel rect:first-child{animation:none}
 .ribbon-glint{opacity:.45}
 .eq-bars i:nth-child(even){animation:none}
}
.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after,
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){
 .service.service-detailed::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(180px circle at var(--light-x,50%) var(--light-y,0%),#ff588326,transparent);
  transition:opacity .28s ease;
 }
 .service.service-detailed:hover::before{opacity:1}
}