/* clean-fx.css: the layers for clean-fx.js (30 Oct 2026). Every layer sits inside its element's own box, over its content,
   with pointer-events off, so nothing on the page moves. Transforms and clip-path only. */
.cfx-sprites{position:absolute;width:0;height:0;overflow:hidden}
.cfx-host{position:relative}
.cfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:3;contain:strict}
.cfx-haze{position:absolute;inset:0;background-color:rgba(236,242,248,.5);
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 0 .7px,transparent 1.2px),radial-gradient(circle,rgba(205,220,235,.4) 0 .9px,transparent 1.5px);
  background-size:9px 8px,13px 11px;background-position:0 0,4px 5px}
.cfx-haze-soft{background-color:rgba(236,242,248,.35)}
.cfx-haze-none{background:none!important}
:root[data-theme="skyline"] .cfx-haze{background-color:rgba(170,190,215,.2);background-image:radial-gradient(circle,rgba(220,232,245,.16) 0 .7px,transparent 1.2px),radial-gradient(circle,rgba(190,210,230,.12) 0 .9px,transparent 1.5px)}
.has-sky:not(.bar-slim) .mast .cfx-haze{background-color:rgba(220,232,245,.28)}
.cfx-tool{position:absolute;left:0;top:0;will-change:transform;transform:translateX(-300%)}
.cfx-tool svg{position:absolute;display:block;overflow:visible;filter:drop-shadow(-3px 5px 4px rgba(0,0,0,.28))}
.cfx-beads{position:absolute;top:2%;bottom:2%;width:5px;background:radial-gradient(circle at 50% 50%,rgba(210,232,250,.75) 0 1.6px,transparent 2.1px) 0 0/5px 7px repeat-y}
.cfx-glint{position:absolute;top:-12%;bottom:-12%;left:0;will-change:transform;transform:translateX(-300%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.72) 50%,rgba(255,255,255,0))}
.cfx-trail{position:absolute;inset:0}
.cfx-wet{background:linear-gradient(180deg,rgba(255,255,255,0) 10%,rgba(214,236,252,.32) 50%,rgba(255,255,255,0) 90%)}
.cfx-stripes{background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 25%,rgba(1,26,65,.06) 25% 50%)}
.cfx-dust{background-image:radial-gradient(circle,rgba(150,160,170,.45) 0 .9px,transparent 1.4px);background-size:9px 8px}
.cfx-mist{position:absolute;inset:0;display:block}
.cfx-mist svg{display:block;width:100%;height:100%}
.cfx-check{position:absolute;right:6px;top:6px;width:16px;height:16px}
.cfx-still::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 70%)}
/* the proposal form: the card keeps its height; the thank-you is revealed in place */
.cfx-handled{position:relative;overflow:hidden}
.noc-form .form-done.cfx-done{position:absolute;inset:0;margin:0;max-width:none;width:auto;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;background:var(--panel,#fff);font-size:19px;font-weight:600;line-height:1.45;color:var(--ink,#011A41)}
.noc-form .form-done.cfx-done[hidden]{display:none}
/* the glint replaces the old hover polish on the service cards */
.cfx-on a.svc::after{display:none}
@media (prefers-reduced-motion: reduce){.cfx-tool,.cfx-glint,.cfx-haze,.cfx-trail,.cfx-mist,.cfx-check{display:none}}