/* Decorative motion layer. Content remains visible without JavaScript. */
.hero{position:relative;isolation:isolate}
.hero::before{content:'';position:absolute;z-index:-1;inset:10px 0 12px 35%;border-radius:45%;pointer-events:none;background:radial-gradient(ellipse at 60% 35%,#c8d9eb55,transparent 64%),radial-gradient(ellipse at 24% 75%,#dbe6ef66,transparent 58%)}
.service-card{transition:border-color .25s ease,box-shadow .3s ease,transform .3s ease}
.service-card:focus-within{border-color:#a7bacd;box-shadow:0 12px 36px #2033480b}
.service-card{position:relative;isolation:isolate}
.service-card::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle 260px at var(--glow-x,50%) var(--glow-y,35%),#a8c9e666 0%,#c4d9eb2b 45%,transparent 75%);transition:opacity .3s ease}
.service-card.is-pointer-lit::before,.service-card:focus-within::before,.service-card:active::before,.service-card.is-touch-active::before{opacity:1}
.button .icon,.category-arrow,.service-row>.icon{transition:transform .25s ease}

/* A soft diagonal light wave travels from the top-left to the bottom-right.
   The isolated layer stays under text, clips to rounded corners and ignores taps. */
.button{position:relative;isolation:isolate;overflow:hidden;--button-wave:#ffffff66}
.button-outline,.button-white{--button-wave:#5088b455}

.step-top::before{content:'';position:absolute;height:1px;left:55px;right:33px;background:#dde1e5}
.step-top::after{transform-origin:left center}
.step-top>span{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.is-step-visible .step-top>span{background:var(--brand-soft);border-color:#9eb3c8;color:var(--brand)}
.is-step-visible .step-top>.icon{color:var(--brand)}
.step{position:relative;isolation:isolate}
.step::before{content:'';position:absolute;inset:-12px -10px;z-index:-1;border-radius:14px;pointer-events:none;background:linear-gradient(135deg,#edf3f9,#f7f9fc);box-shadow:inset 0 0 0 1px #b8ccdf66;opacity:0;transition:opacity .25s ease}
.step h3,.step-top>.icon{transition:color .25s ease}
.step:is(:active,:focus-within,.is-touch-active)::before{opacity:1}
.step:is(:active,:focus-within,.is-touch-active) .step-top>span{background:var(--brand);border-color:var(--brand);color:white;box-shadow:0 0 0 5px #2e48630d}
.step:is(:active,:focus-within,.is-touch-active) .step-top::after{background:var(--brand)}
.step:is(:active,:focus-within,.is-touch-active) h3,.step:is(:active,:focus-within,.is-touch-active) .step-top>.icon{color:var(--brand)}

@media(prefers-reduced-motion:no-preference){
  .button:not(:disabled)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,transparent 16%,var(--button-wave) 46%,var(--button-wave) 54%,transparent 84%);transform:translate(-100%,-100%)}
  .button:not(:disabled):focus-visible::before{animation:motion-button-wave 1.4s cubic-bezier(.25,.1,.25,1) forwards}
  .hero::before{animation:motion-ambient 16s ease-in-out infinite alternate;animation-play-state:paused}
  .hero.is-ambient-active::before{animation-play-state:running}
  .step:nth-child(1){--step-delay:0ms}
  .step:nth-child(2){--step-delay:100ms}
  .step:nth-child(3){--step-delay:200ms}
  .step:nth-child(4){--step-delay:300ms}
  .is-step-visible .step-top::after{background:linear-gradient(90deg,var(--brand),#9bb5cf);animation:motion-route .8s var(--step-delay,0ms) cubic-bezier(.22,1,.36,1) backwards}
  .is-step-visible .step-top>span{animation:motion-step-ring .8s var(--step-delay,0ms) ease-out backwards}
  .modal[open]{animation:motion-dialog-in .28s cubic-bezier(.22,1,.36,1) backwards}
  .modal[open]::backdrop{animation:motion-backdrop-in .28s ease-out}
  .success-icon{animation:motion-success-in .45s cubic-bezier(.22,1,.36,1) backwards}
  .success-icon .icon{stroke-dasharray:24;animation:motion-check .5s .12s ease-out backwards}
  .success-state h2,.success-state p,.success-state .request-number{animation:motion-success-copy .45s .12s ease-out backwards}
}

@keyframes motion-button-wave{from{transform:translate(-100%,-100%)}to{transform:translate(100%,100%)}}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .button:not(:disabled):hover::before{animation:motion-button-wave 1.4s cubic-bezier(.25,.1,.25,1) forwards}
  .service-card:hover{transform:translateY(-5px);border-color:#b0bfce;box-shadow:0 18px 42px #20334810}
  .service-card:hover .category-arrow{transform:translate(3px,-3px)}
  .service-row:hover>.icon{transform:rotate(90deg)}
  .button:not(:disabled):hover .icon{transform:translateX(3px)}
  .button:not(:disabled):hover .icon:has(use[href="#i-up-right"]){transform:translate(2px,-2px)}
}

@media(hover:hover) and (pointer:fine){
  .step:hover::before{opacity:1}
  .step:hover .step-top>span{background:var(--brand);border-color:var(--brand);color:white;box-shadow:0 0 0 5px #2e48630d}
  .step:hover .step-top::after{background:var(--brand)}
  .step:hover h3,.step:hover .step-top>.icon{color:var(--brand)}
}

@keyframes motion-ambient{from{transform:translate(-16px,0) scale(.98);opacity:.65}to{transform:translate(0,12px) scale(1);opacity:1}}
@keyframes motion-route{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes motion-step-ring{from{box-shadow:0 0 0 0 #2e48632b}to{box-shadow:0 0 0 10px #2e486300}}
@keyframes motion-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes motion-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes motion-success-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes motion-check{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes motion-success-copy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .hero::before{inset:15% 0 0 15%;animation:none}
  .is-step-visible .step-top::after,.is-step-visible .step-top>span{--step-delay:0ms}
  .modal[open]{animation-duration:.2s}
}
@media(prefers-reduced-motion:reduce){
  .hero::before{animation:none;transform:none}
  .service-card,.button .icon,.category-arrow,.service-row>.icon,.step-top>span{transition:none}
  .modal[open],.modal[open]::backdrop,.success-icon,.success-icon .icon,.success-state h2,.success-state p,.success-state .request-number{animation:none}
}