/* TrafficLDN motion + texture layer (same system as the homepage): cursor, grain, progress, reveals, kinetic h1 */
body.fx{cursor:none}
body.fx button,body.fx a{cursor:none}
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:9999;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .25s cubic-bezier(.16,1,.3,1),height .25s cubic-bezier(.16,1,.3,1)}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(201,169,110,0.4);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
.cursor.hover{width:0;height:0}
.cursor-ring.hover{width:60px;height:60px;border-color:var(--gold);background:rgba(201,169,110,0.06)}
@media (hover:none){body.fx,body.fx button,body.fx a{cursor:auto}.cursor,.cursor-ring{display:none}}
body.fx::after{content:"";position:fixed;inset:0;opacity:0.04;pointer-events:none;z-index:9990;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-progress{position:fixed;top:0;left:0;height:1px;width:0;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);z-index:50;box-shadow:0 0 10px rgba(201,169,110,0.6)}
.ambient{position:fixed;top:-200px;left:50%;transform:translateX(-50%);width:1000px;max-width:100vw;height:700px;background:radial-gradient(ellipse at center,rgba(201,169,110,0.06) 0%,transparent 60%);pointer-events:none;z-index:0}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,169,110,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,110,0.04) 1px,transparent 1px);background-size:80px 80px;-webkit-mask:radial-gradient(ellipse at 30% 40%,#000 0%,transparent 70%);mask:radial-gradient(ellipse at 30% 40%,#000 0%,transparent 70%);pointer-events:none}
.hero-orb{position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(201,169,110,0.18),transparent 60%);filter:blur(40px);pointer-events:none;mix-blend-mode:screen}
.hero-orb.o1{top:0;right:6%;animation:float1 14s ease-in-out infinite}
.hero-orb.o2{bottom:-10%;left:-4%;animation:float2 18s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(.95)}}
.svc-hero{overflow:hidden}
.svc-hero .container{position:relative;z-index:2}
/* kinetic headline: JS wraps words; without JS text simply shows */
h1.kinetic .word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em}
h1.kinetic .word>span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
h1.kinetic.in .word>span{transform:translateY(0)}
h1 em.gold-grad,h1 .gold-grad{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 50%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* reveals only hide content once JS has confirmed it is running */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
/* card sheen */
.rel-card,.step,.outcome{position:relative;overflow:hidden}
.rel-card::before,.outcome::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:translateX(-101%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.rel-card:hover::before,.outcome:hover::before{transform:translateX(101%)}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--gold-2);transform:translateX(-101%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary span,.btn-primary svg{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .js .reveal,h1.kinetic .word>span{opacity:1!important;transform:none!important;transition:none!important}
  .hero-orb,.gold-grad{animation:none!important}
}