/* DripFed Elementor pages: the original details that Elementor atomic widgets cannot express.
   Rolling button text, scroll cue, marquee drops, living CTA border, liquid footer, water backdrop,
   icon sizing, step form. Values are taken from the original home.css. */

body{overflow-x:clip}
/* ---------- smooth scroll: Lenis owns scrolling, so the theme's CSS smooth-scroll must stand down ---------- */
html,html.lenis{scroll-behavior:auto !important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ---------- performance: no live blur behind panels, and shadows that are cheap to repaint ---------- */
.elementor *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.elementor .df-split-media{box-shadow:0 24px 60px rgba(0,0,0,.5) !important}
.elementor .df-cta-pan,.elementor .df-cta-pan-fx{box-shadow:0 24px 70px rgba(0,0,0,.5)}

/* ---------- nav hides while scrolling down ---------- */
.nav{transition:transform .5s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s}
.nav.hide{transform:translateY(-110%)}
/* logged-in users: sit below the WordPress admin bar */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* ---------- rolling button text ---------- */
.df-roll{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:middle}
.df-roll>span{display:block;text-shadow:0 1.25em currentColor;transition:transform .55s cubic-bezier(.16,1,.3,1)}
a:hover .df-roll>span,button:hover .df-roll>span{transform:translateY(-1.25em)}
.df-arr{display:inline-block;margin-left:10px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
a:hover .df-arr{transform:translateX(6px)}

/* ---------- hero details ---------- */
@keyframes df-kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.14) translate(-1.5%,1.2%)}}
.df-kb{animation:df-kenburns 26s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes df-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.df-dot{display:inline-block;width:7px;height:7px;margin-right:14px;border-radius:50%;background:#15BEE4;box-shadow:0 0 12px #15BEE4;animation:df-pulse 2s infinite;vertical-align:middle}
.df-scroll-cue{position:absolute;bottom:30px;left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(234,240,255,.45);font:600 10px/1 Montserrat,sans-serif;letter-spacing:.4em;text-transform:uppercase;padding-left:.4em;pointer-events:none}
.df-scroll-cue i{width:1px;height:52px;background:linear-gradient(180deg,#BA75FF,transparent);position:relative;overflow:hidden}
.df-scroll-cue i::after{content:'';position:absolute;top:-12px;left:0;width:1px;height:12px;background:#fff;animation:df-dripscroll 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes df-dripscroll{0%{top:-12px}100%{top:60px}}
@media(max-width:1080px){.df-scroll-cue{display:none}}

/* ---------- marquee: a drop between each service ---------- */
.df-mqdrop{flex:0 0 auto;width:calc(var(--mqf,16px) * .55);height:calc(var(--mqf,16px) * .78);background:linear-gradient(160deg,#BA75FF,#8B3DFF);clip-path:polygon(50% 0,100% 62%,88% 92%,50% 100%,12% 92%,0 62%)}

/* ---------- icons ---------- */
.df-ico{display:inline-block;width:22px;height:22px;margin-right:14px;vertical-align:-6px;fill:none;stroke:var(--df-accent,#BA75FF);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.df-has-ico::before{display:none !important;content:none !important}
.df-badge .df-ico{width:18px;height:18px;margin-right:10px;vertical-align:-4px}
.df-chips-a p,.df-linkchips p,.df-linkchips a{display:inline-flex;align-items:center}
.df-chips-a .df-ico,.df-linkchips .df-ico{width:18px;height:18px;margin-right:12px;stroke:#BA75FF}
.df-cta-sec .df-list-a .df-ico,.df-cta-pan .df-list-a .df-ico{width:19px;height:19px;stroke:#15BEE4}
.df-cta-sec .df-contact-a .df-ico{width:18px;height:18px;stroke:currentColor;margin-right:10px}

/* ---------- footer template (editable in Elementor) ---------- */
.df-rail .df-ico{width:21px;height:21px;margin:0;stroke:#fff;stroke-width:1.8}
.df-foot-grid .df-ico{width:16px;height:16px;margin-right:9px;vertical-align:-3px;stroke:currentColor;stroke-width:1.7}
body:not(.home) .df-wordmark,body:not(.home) .foot-mark{display:none}
.df-wordmark.df-lw-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.foot-mark{margin-bottom:0}

/* ---------- CTA panel: living border ---------- */
@property --df-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes df-spinb{to{--df-ang:360deg}}
.df-cta-pan,.df-cta-pan-fx{position:relative;isolation:isolate;box-shadow:0 50px 140px rgba(0,0,0,.55)}
.df-cta-pan::before,.df-cta-pan-fx::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 90% at 85% 10%,rgba(21,190,228,.18),transparent 55%),radial-gradient(60% 80% at 10% 90%,rgba(226,79,216,.16),transparent 60%);pointer-events:none;z-index:-1}
.df-cta-pan::after,.df-cta-pan-fx::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--df-ang),rgba(186,117,255,.15),#15BEE4,rgba(186,117,255,.15) 30%,#E24FD8 55%,rgba(186,117,255,.15) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:df-spinb 9s linear infinite;animation-play-state:paused;pointer-events:none}
.df-cta-pan.df-in::after,.df-cta-pan-fx.df-in::after{animation-play-state:running}

/* ---------- liquid footer wordmark ---------- */
.foot-mark{position:relative;margin:4px auto 0;line-height:0;width:min(92%,880px)}
#liquidWord{display:none;width:100%;filter:url(#liquid) drop-shadow(0 0 18px rgba(186,117,255,.3))}
.foot-mark.lw-on #liquidWord{display:block}
.lw-fallback{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(48px,13vw,210px);line-height:.8;letter-spacing:-.04em;text-align:center;padding:.04em 0 .02em;background:linear-gradient(180deg,rgba(228,204,255,.55),rgba(186,117,255,.45) 55%,rgba(139,61,255,.35));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-mark.lw-on .lw-fallback{display:none}

/* ---------- three-step enquiry form (home) ---------- */
.msf-progress{position:relative;height:4px;background:rgba(255,255,255,.08);border-radius:100px;margin:4px 0 22px;width:100%}
.msf-progress .msf-bar{display:block;height:100%;width:33%;border-radius:100px;background:linear-gradient(90deg,#15BEE4,#BA75FF);transition:width .6s cubic-bezier(.16,1,.3,1)}
.msf-progress em{position:absolute;right:0;top:12px;font:normal 11px/1 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,240,255,.72)}
.msf-step{display:none;flex-direction:column;gap:14px;width:100%}
.msf-step.active{display:flex;animation:df-msfin .55s cubic-bezier(.16,1,.3,1)}
@keyframes df-msfin{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.msf-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:6px;width:100%}
.msf-back{background:none;border:1px solid rgba(186,117,255,.18);color:rgba(234,240,255,.72);border-radius:100px;padding:14px 26px;font:600 12px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}
.msf-back:hover{border-color:#BA75FF;color:#fff}
.msf-next{margin-left:auto;border:0;border-radius:100px;padding:17px 34px;font:700 13px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#8B3DFF,#BA75FF 60%,#E24FD8);box-shadow:0 12px 44px rgba(139,61,255,.45);cursor:pointer}
.msf-err{border-color:#ff6b8b !important;box-shadow:0 0 0 3px rgba(255,107,139,.15) !important}