/* ==========================================================================
   PROMAX ENHANCE LAYER  v1.0
   Non-destructive premium visual + motion layer.
   Loaded AFTER main.css so it overrides selectively. No DOM/structure changes.
   Brand tokens reused from theme: orange #EC4A05, charcoal #1C2127,
   gold #F8CE69, blue #155FFF, body-gray #5A6470, font 'Plus Jakarta Sans'.
   ========================================================================== */

:root {
  --px-orange: #EC4A05;
  --px-orange-2: #ff7a33;
  --px-orange-deep: #c23a02;
  --px-ink: #1C2127;
  --px-ink-2: #11151a;
  --px-gold: #F8CE69;
  --px-blue: #155FFF;
  --px-grad-fire: linear-gradient(120deg, #EC4A05 0%, #ff7a33 55%, #F8CE69 120%);
  --px-grad-ink: linear-gradient(135deg, #1C2127 0%, #2a313a 100%);
  --px-glow: 0 18px 50px -18px rgba(236, 74, 5, .55);
  --px-shadow-soft: 0 22px 60px -28px rgba(18, 21, 26, .45);
  --px-shadow-card: 0 10px 30px -12px rgba(18, 21, 26, .18);
  --px-ease: cubic-bezier(.22, 1, .36, 1);
  --px-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   0. Global polish
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

::selection { background: var(--px-orange); color: #fff; }

/* Nicer focus ring for keyboard users (accessibility, no visual change for mouse) */
a:focus-visible,
button:focus-visible,
.vl-btn3:focus-visible {
  outline: 2px solid var(--px-orange);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Custom scrollbar (desktop) */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--px-orange) #eef0f2; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: #eef0f2; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--px-orange), var(--px-orange-deep));
    border-radius: 20px; border: 2px solid #eef0f2;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--px-orange-deep); }
}

/* --------------------------------------------------------------------------
   1. Modern preloader
   -------------------------------------------------------------------------- */
.preloader {
  background: radial-gradient(120% 120% at 50% 0%, #232a32 0%, #1C2127 60%, #11151a 100%) !important;
}
.preloader .loader,
.preloader .loader::before,
.preloader .loader::after { border-radius: 50%; }
.preloader .loader {
  position: relative;
  width: 64px !important; height: 64px !important;
  border: 3px solid rgba(255,255,255,.10) !important;
  border-top-color: var(--px-orange) !important;
  border-right-color: var(--px-orange-2) !important;
  box-shadow: 0 0 38px -6px rgba(236,74,5,.6);
  animation: px-spin .9s linear infinite !important;
}
@keyframes px-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   2. Scroll progress ring — premium accent
   -------------------------------------------------------------------------- */
.progress-wrap { box-shadow: 0 8px 24px -8px rgba(18,21,26,.4) !important; }
.progress-wrap::after { color: var(--px-orange) !important; }
.progress-wrap svg.progress-circle path { stroke: var(--px-orange) !important; stroke-width: 4px; }

/* --------------------------------------------------------------------------
   3. Sticky header — glassmorphism on scroll
   -------------------------------------------------------------------------- */
#vl-header-sticky,
#vl-header-sticky .row-bg1 {
  transition: background-color .45s var(--px-ease), backdrop-filter .45s var(--px-ease),
              box-shadow .45s var(--px-ease), padding .45s var(--px-ease), border-radius .45s var(--px-ease);
}
/* Keep the header/nav above the hero slider (which sits at z-index 999) and
   above all page content — fixes nav being hidden behind hero / project cards. */
body > header { position: relative; z-index: 9990; }
#vl-header-sticky { z-index: 9991 !important; }
/* mobile menu: panel MUST sit above its overlay, or taps hit the overlay and
   just close the menu instead of following the link. */
.vl-offcanvas-overlay { z-index: 100000 !important; }
.vl-offcanvas { z-index: 100001 !important; }
/* The visible bar background lives on .row-bg1 (transparent over hero by design).
   Apply a glass panel there when scrolled. High specificity + !important to beat
   the theme's transparent-header rules. */
#vl-header-sticky.px-scrolled {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 999;
  animation: px-slide-down .55s var(--px-ease) both;
}
#vl-header-sticky.px-scrolled .row-bg1 {
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 12px 34px -18px rgba(18, 21, 26, .35) !important;
  border-bottom: 1px solid rgba(18, 21, 26, .06);
  border-radius: 0 0 14px 14px;
  padding-top: 10px !important; padding-bottom: 10px !important;
}
/* keep nav text dark & legible on the light glass bar */
#vl-header-sticky.px-scrolled .vl-main-menu nav > ul > li > a { color: var(--px-ink) !important; }
@keyframes px-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* nav link animated underline */
.vl-main-menu nav > ul > li > a {
  position: relative;
  transition: color .3s var(--px-ease);
}
.vl-main-menu nav > ul > li > a::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: var(--px-grad-fire);
  border-radius: 2px;
  transition: width .35s var(--px-ease);
}
.vl-main-menu nav > ul > li:hover > a::after { width: 100%; }
.vl-main-menu nav > ul > li:hover > a { color: var(--px-orange) !important; }

/* --------------------------------------------------------------------------
   4. Primary buttons — shine sweep + lift + glow
   -------------------------------------------------------------------------- */
.vl-btn3 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--px-ease-spring), box-shadow .35s var(--px-ease),
              background-color .35s var(--px-ease);
  z-index: 0;
}
.vl-btn3::before {            /* moving shine */
  content: "";
  position: absolute; top: 0; left: -130%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .65s var(--px-ease);
  z-index: 2; pointer-events: none;
}
.vl-btn3:hover {
  transform: translateY(-3px);
  box-shadow: var(--px-glow);
}
.vl-btn3:hover::before { left: 130%; }
.vl-btn3:active { transform: translateY(-1px) scale(.99); }

/* click ripple injected by JS */
.px-ripple {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.45);
  pointer-events: none; z-index: 3;
  animation: px-ripple .6s ease-out forwards;
}
@keyframes px-ripple { to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }

/* "readmore" inline links — animated arrow */
.readmore { transition: color .3s var(--px-ease); }
.readmore i { transition: transform .35s var(--px-ease-spring); }
.readmore:hover { color: var(--px-orange) !important; }
.readmore:hover i { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   5. Section titles — gradient sweep + animated accent
   -------------------------------------------------------------------------- */
.vl-section-subtitle {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700 !important; letter-spacing: .14em !important;
}
.vl-section-subtitle::before {
  content: "";
  width: 26px; height: 2px; border-radius: 2px;
  background: var(--px-grad-fire);
  display: inline-block;
  animation: px-pulse-line 2.4s var(--px-ease) infinite;
}
@keyframes px-pulse-line {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(1.6); opacity: .6; }
}
.vl-section-title { position: relative; }

/* --------------------------------------------------------------------------
   6. Hero — ken-burns, gradient overlay, kinetic content
   -------------------------------------------------------------------------- */
.hero3-slider-header {
  position: relative;
  overflow: hidden;
}
.hero3-slider-header::after {        /* cinematic gradient for text legibility */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,21,26,.30) 0%, rgba(18,21,26,.10) 35%, rgba(18,21,26,.62) 100%),
    radial-gradient(80% 60% at 18% 80%, rgba(236,74,5,.28), transparent 60%);
  z-index: 1; pointer-events: none;
}
.hero3-slider-header > * { position: relative; z-index: 2; }
/* slow zoom on the active slide background */
.slick-current .hero3-slider-header,
.hero3-slider-header {
  background-size: cover;
}
.slick-active .hero3-slider-header { animation: px-kenburns 14s ease-out both; }
@keyframes px-kenburns {
  from { background-size: 112%; }
  to   { background-size: 124%; }
}

/* hero orange CTA accent buttons keep readable on glass */
.hero3-heading .vl-btn3 { box-shadow: 0 14px 40px -16px rgba(236,74,5,.7); }

/* hero arrows — glassy round */
.testimonial-prev-arrow-h3, .testimonial-next-arrow-h3,
.hero3-arrow-slider .slick-arrow {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .35s var(--px-ease-spring), background-color .35s var(--px-ease), box-shadow .35s var(--px-ease);
}
.testimonial-prev-arrow-h3:hover, .testimonial-next-arrow-h3:hover {
  transform: scale(1.08);
  box-shadow: var(--px-glow);
}

/* --------------------------------------------------------------------------
   7. Cards — lift, glow, image zoom  (projects / services / counters / choose)
   -------------------------------------------------------------------------- */
.project-boxarea,
.counter-boxarea,
.main-content-boxarea,
.choose3 .choose-boxarea,
.service-boxarea,
.blog-boxarea {
  transition: transform .5s var(--px-ease), box-shadow .5s var(--px-ease);
  will-change: transform;
}
.project-boxarea:hover,
.counter-boxarea:hover,
.main-content-boxarea:hover,
.choose3 .choose-boxarea:hover,
.service-boxarea:hover,
.blog-boxarea:hover {
  transform: translateY(-10px);
  box-shadow: var(--px-shadow-soft);
}

/* project image zoom + reveal */
.project-boxarea .img1,
.blog-boxarea .img1 { overflow: hidden; border-radius: 14px; }
.project-boxarea .img1 img,
.blog-boxarea .img1 img {
  transition: transform .8s var(--px-ease);
  will-change: transform;
}
.project-boxarea:hover .img1 img,
.blog-boxarea:hover .img1 img { transform: scale(1.08); }

.project-boxarea .title { transition: color .3s var(--px-ease); }
.project-boxarea:hover .title { color: var(--px-orange) !important; }

/* counter cards — orange top accent on hover */
.counter-boxarea {
  position: relative;
  overflow: hidden;
}
.counter-boxarea::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--px-grad-fire);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--px-ease);
}
.counter-boxarea:hover::before { transform: scaleX(1); }

/* floating service / counter icons */
.counter-boxarea .icons,
.service3 .icons,
.choose3 .icons {
  transition: transform .5s var(--px-ease-spring);
}
.counter-boxarea:hover .icons,
.main-content-boxarea:hover .icons { transform: translateY(-6px) rotate(-4deg); }

/* --------------------------------------------------------------------------
   8. Service tabs — pill buttons polish
   -------------------------------------------------------------------------- */
.tabs-button .nav-link,
.service3 .nav-pills .nav-link {
  transition: transform .3s var(--px-ease-spring), background-color .3s var(--px-ease), color .3s var(--px-ease), box-shadow .3s var(--px-ease);
}
.tabs-button .nav-link:hover,
.service3 .nav-pills .nav-link:hover { transform: translateY(-2px); }
.tabs-button .nav-link.active,
.service3 .nav-pills .nav-link.active { box-shadow: var(--px-glow); }

/* --------------------------------------------------------------------------
   9. Accordion (about section) — smooth + accent
   -------------------------------------------------------------------------- */
.about-accordion-area .accordion-button,
.accordion-button { transition: color .3s var(--px-ease), background-color .3s var(--px-ease); }
.accordion-button:not(.collapsed) { color: var(--px-orange) !important; }

/* --------------------------------------------------------------------------
   10. Footer — depth + link motion
   -------------------------------------------------------------------------- */
/* Premium DARK footer. NOTE: the base theme footer is LIGHT (#F5F3F4) with
   dark text, so when we switch the surface to dark we MUST flip every piece of
   text to light or it becomes unreadable. */
.vl-footer3-section-area {
  position: relative;
  background-color: #161a1f !important;
  background-image: linear-gradient(135deg, #1C2127 0%, #2a313a 100%) !important;
}
.vl-footer3-section-area::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--px-grad-fire);
  opacity: .95; z-index: 2;
}
/* All footer text → light */
.vl-footer3-section-area,
.vl-footer3-section-area p,
.vl-footer3-section-area li,
.vl-footer3-section-area span,
.vl-footer3-section-area .f-heading,
.vl-footer3-section-area h1, .vl-footer3-section-area h2,
.vl-footer3-section-area h3, .vl-footer3-section-area h4,
.vl-footer3-section-area h5, .vl-footer3-section-area h6 {
  color: rgba(255, 255, 255, .78) !important;
}
.vl-footer3-section-area .f-heading,
.vl-footer3-section-area h1, .vl-footer3-section-area h2,
.vl-footer3-section-area h3, .vl-footer3-section-area h4 {
  color: #ffffff !important;
}
.vl-footer3-section-area a {
  color: rgba(255, 255, 255, .72) !important;
  transition: color .3s var(--px-ease), transform .3s var(--px-ease), padding-left .3s var(--px-ease);
  display: inline-block;
}
.vl-footer3-section-area a:hover { color: var(--px-orange) !important; }
.footer-widget-area li a:hover { padding-left: 6px; }
/* contact + social icons stay on-brand */
.vl-footer3-section-area .contact-links i,
.vl-footer3-section-area i.fa-solid,
.vl-footer3-section-area i.fa-brands { color: var(--px-orange) !important; }
/* copyright + form text */
.copyright-area, .copyright-area p, .copyright-area a { color: rgba(255,255,255,.6) !important; }
.footer-form-area input, .footer-form-area textarea {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.footer-form-area input::placeholder, .footer-form-area textarea::placeholder { color: rgba(255,255,255,.5) !important; }
/* divider lines on dark */
.vl-footer3-section-area hr,
.copyright-area { border-color: rgba(255,255,255,.12) !important; }

.social-links a {
  transition: transform .35s var(--px-ease-spring), background-color .3s var(--px-ease), box-shadow .3s var(--px-ease), color .3s var(--px-ease);
}
.social-links a:hover {
  transform: translateY(-4px) scale(1.06);
  background: var(--px-orange) !important;
  box-shadow: var(--px-glow);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   11. Scroll-reveal (JS adds .px-in when in view). Only affects opted-in
        elements so it never fights the theme's AOS attributes.
   -------------------------------------------------------------------------- */
.px-reveal { opacity: 0; transform: translateY(34px); }
.px-reveal.px-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--px-ease), transform .7s var(--px-ease);
}
.px-reveal.px-d1.px-in { transition-delay: .08s; }
.px-reveal.px-d2.px-in { transition-delay: .16s; }
.px-reveal.px-d3.px-in { transition-delay: .24s; }
.px-reveal.px-d4.px-in { transition-delay: .32s; }

/* --------------------------------------------------------------------------
   12. Floating WhatsApp / action button — gentle pulse
   -------------------------------------------------------------------------- */
a[href*="wa.me"], a[href*="whatsapp"], .whatsapp-float, .vl-whatsapp {
  transition: transform .35s var(--px-ease-spring), box-shadow .35s var(--px-ease);
}
a[href*="wa.me"]:hover, a[href*="whatsapp"]:hover, .whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px);
}

/* --------------------------------------------------------------------------
   13. Decorative ambient blobs behind light sections (very subtle)
   -------------------------------------------------------------------------- */
.about3, .service3, .project3, .choose3, .contact1, .testimonial3-section-area {
  position: relative;
}
.service3::before, .project3::before {
  content: "";
  position: absolute; pointer-events: none; z-index: 0;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,74,5,.07), transparent 68%);
  top: -120px; right: -120px;
  animation: px-float 12s ease-in-out infinite;
}
.choose3::before {
  content: "";
  position: absolute; pointer-events: none; z-index: 0;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(21,95,255,.06), transparent 68%);
  bottom: -120px; left: -120px;
  animation: px-float 14s ease-in-out infinite reverse;
}
.about3 > .container, .service3 > .container,
.project3 > .container, .choose3 > .container { position: relative; z-index: 1; }
@keyframes px-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 24px); }
}

/* --------------------------------------------------------------------------
   14. Images — soften corners site-wide for content imagery (non-structural)
   -------------------------------------------------------------------------- */
.about3 img, .choose3 img, .testimonial3-section-area img.testi-img {
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   15. Reduced motion — disable all non-essential animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .px-reveal { opacity: 1 !important; transform: none !important; }
  .slick-active .hero3-slider-header { animation: none !important; background-size: cover !important; }
}

/* ==========================================================================
   16. BOLD AT-REST PASS — make the redesign obvious on first paint (no
   scroll/hover needed). Pure styling, no DOM/structure change. High
   specificity + !important to win over the base theme.
   ========================================================================== */

/* 16.1  Primary buttons → molten-orange gradient pills with depth */
.vl-btn3 {
  background: linear-gradient(135deg, #ff8a3d 0%, #EC4A05 55%, #c23a02 100%) !important;
  border-radius: 50px !important;
  box-shadow: 0 12px 26px -10px rgba(236, 74, 5, .55) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}
/* secondary/outline hero button keeps its outline look but pills + glows */
.hero3-heading .vl-btn3[style*="transparent"] {
  background: rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 16.2  Section subtitle → glowing orange badge (very visible) */
.vl-section-subtitle {
  background: linear-gradient(135deg, rgba(236,74,5,.12), rgba(248,206,105,.16)) !important;
  color: var(--px-orange) !important;
  padding: 8px 16px 8px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(236,74,5,.22);
  box-shadow: 0 6px 18px -10px rgba(236,74,5,.5);
  font-size: 13px !important;
}

/* 16.3  Section titles → gradient underline accent at rest */
.heading3 .vl-section-title::after,
.about3 .vl-section-title::after,
.service3 .vl-section-title::after,
.project3 .vl-section-title::after,
.choose3 .vl-section-title::after,
.contact1 .vl-section-title::after,
.testimonial3-section-area .vl-section-title::after {
  content: "";
  display: block;
  width: 68px; height: 4px;
  margin-top: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EC4A05, #ff8a3d 60%, #F8CE69);
  box-shadow: 0 4px 14px -4px rgba(236,74,5,.6);
}
/* center the bar when its heading column is centered */
.text-center .vl-section-title::after,
.heading3.text-center .vl-section-title::after { margin-left: auto; margin-right: auto; }

/* 16.4  Cards get a real "card" look at rest: white surface, soft border,
   rounded corners, gentle shadow — instantly reads as modern. */
.project-boxarea,
.counter-boxarea,
.main-content-boxarea,
.choose3 .choose-boxarea {
  background: #ffffff;
  border: 1px solid rgba(18, 21, 26, .07);
  border-radius: 18px !important;
  box-shadow: var(--px-shadow-card);
}

/* 16.5  Counter / stat numbers → gradient fill (eye-catching) */
.counter-boxarea h2,
.counter-boxarea h2 .counter {
  background: linear-gradient(135deg, #EC4A05, #ff8a3d 70%, #F8CE69) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}

/* 16.6  Hero headings → punchier + always legible over imagery */
.hero3-heading h1, .hero3-heading h2, .hero3-heading h3 {
  text-shadow: 0 2px 28px rgba(0, 0, 0, .38);
}
.hero3-heading .vl-section-subtitle,
.hero3-heading h5 {
  /* keep hero eyebrow on a translucent dark badge for contrast */
  background: rgba(18,21,26,.32) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.25);
}

/* 16.7  Gentle alternating section tint for visual rhythm (very light) */
.service3, .testimonial3-section-area {
  background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
}
.choose3 {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}

/* 16.8  Read-more & inline links pick up brand orange at rest */
.readmore { color: var(--px-orange) !important; font-weight: 600; }

/* 16.9  Nav: brand-orange active/hover already set; make CTA in header pop */
.vl-hero-btn .vl-btn3 { box-shadow: 0 10px 24px -10px rgba(236,74,5,.6) !important; }

/* Keep the bold pass aligned with reduced-motion (no animation added above). */

/* ==========================================================================
   ANIMATED GOLD VIDEO LOGO (JS swaps the static logo img → looping video)
   ========================================================================== */
.px-logo-video {
  display: block;
  border-radius: 9px;
  object-fit: contain;
  vertical-align: middle;
  background: #000;
}
/* Fluid sizing — scales smoothly across desktop / tablet / mobile.
   Header: ~72px desktop → ~52px tablet → 50px mobile.
   Footer: ~100px desktop → 80px on smaller screens (footer has more room). */
.vl-logo .px-logo-video { height: clamp(50px, 5.2vw, 72px); width: clamp(50px, 5.2vw, 72px); }
.vl-offcanvas-logo .px-logo-video { height: 56px; width: 56px; }
.footer-logo-area .px-logo-video { height: clamp(80px, 8vw, 100px); width: clamp(80px, 8vw, 100px); }
/* the original logo chip is no longer needed once the video is in (img hidden) */
html.px-dark .vl-logo img[data-px-logo],
html.px-dark .vl-offcanvas-logo img[data-px-logo],
html.px-dark .footer-logo-area img[data-px-logo] { display: none !important; }

/* ==========================================================================
   SMOKE BANNER (WebGL) — intro section before the hero slider
   ========================================================================== */
.px-smoke-banner {
  position: relative; width: 100%;
  height: 78vh; min-height: 480px; max-height: 820px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 24%, #0a1018 0%, #06080f 62%, #03050a 100%);
  z-index: 1;
}
.px-smoke-canvas { position: absolute; inset: 0; display: block; }
/* fallback heading (no WebGL) — shown until the canvas paints */
.px-smoke-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 20px; pointer-events: none;
}
.px-smoke-fallback h2 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: clamp(30px, 6vw, 70px); color: #eafaff; letter-spacing: .5px;
  text-shadow: 0 0 26px rgba(34,211,238,.5);
}
.px-smoke-fallback p { color: #9fb0c2; margin-top: 10px; font-size: clamp(13px, 2vw, 18px); }
.px-smoke-banner.px-smoke-ready .px-smoke-fallback { display: none; }
/* soft fade into the hero below */
.px-smoke-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1;
  background: linear-gradient(180deg, transparent, #06080f);
  pointer-events: none;
}
/* gentle scroll cue */
.px-smoke-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.45); border-radius: 16px;
  pointer-events: none;
}
.px-smoke-cue::before {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 3px; background: #7fe9ff;
  animation: px-cue 1.6s ease-in-out infinite;
}
@keyframes px-cue { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,14px)} }
@media (prefers-reduced-motion: reduce) { .px-smoke-cue::before { animation: none; } }

/* ==========================================================================
   17. ANIMATED HERO — drifting light sheen, water-drop ripples, kinetic
   headline. Adds atmosphere over the roof imagery. Structure untouched
   (headline words are wrapped at runtime by JS, source HTML stays plain).
   ========================================================================== */
.hero3-arrow-slider { position: relative; }

/* 17.1  Slow drifting light + warm glow sweeping across the hero */
.hero3-slider-header::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 32%, rgba(255,255,255,.05) 46%,
                    rgba(236,74,5,.12) 50%, rgba(255,255,255,.04) 54%, transparent 68%);
  background-size: 260% 260%;
  mix-blend-mode: screen;
  animation: px-hero-sheen 11s ease-in-out infinite;
}
@keyframes px-hero-sheen {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* 17.2  Water-drop ripples (spawned by JS into the active slide) */
.px-drop {
  position: absolute; z-index: 1; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%) scale(0);
  animation: px-drop-ripple 2.3s ease-out forwards;
}
.px-drop::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
}
@keyframes px-drop-ripple {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  12%  { opacity: .75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5); border-color: rgba(255,255,255,0); }
}

/* 17.3  Kinetic headline — words rise + settle. Reveal is a pure CSS
   animation (auto-plays when JS inserts the spans), so it never depends on
   requestAnimationFrame timing. No-JS = plain visible headline (no spans). */
.hero3-heading .px-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
.hero3-heading .px-word.px-go {
  animation: px-word-rise .8s var(--px-ease) both;
}
@keyframes px-word-rise {
  from { opacity: 0; transform: translateY(30px) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero3-slider-header::before { animation: none !important; }
  .px-drop { display: none !important; }
  .hero3-heading .px-word { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ==========================================================================
   18. CLIENT LOGO MARQUEE  (JS-injected section, homepage)
   ========================================================================== */
.px-section { position: relative; }
.px-sec-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.px-sec-head .vl-section-subtitle { display: inline-flex; }
.px-sec-head h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 38px; line-height: 1.2; font-weight: 800; color: var(--px-ink);
  margin: 16px 0 0;
}
.px-sec-head h2::after {
  content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0;
  border-radius: 6px; background: linear-gradient(90deg, #EC4A05, #ff8a3d 60%, #F8CE69);
  box-shadow: 0 4px 14px -4px rgba(236,74,5,.6);
}

.px-marquee-section { padding: 72px 0; background: linear-gradient(180deg, #ffffff, #f5f7f9); overflow: hidden; }
.px-marquee {
  position: relative; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.px-marquee-track {
  display: flex; align-items: center; flex-shrink: 0;
  gap: 64px; padding-right: 64px;
  animation: px-marquee-scroll 42s linear infinite;
}
.px-marquee:hover .px-marquee-track { animation-play-state: paused; }
.px-marquee-track img {
  height: 50px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(100%); opacity: .62;
  transition: filter .4s var(--px-ease), opacity .4s var(--px-ease), transform .4s var(--px-ease-spring);
}
.px-marquee-track img:hover { filter: none; opacity: 1; transform: scale(1.08); }
@keyframes px-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   19. BEFORE / AFTER ROOF SLIDER  (JS-injected section, homepage)
   ========================================================================== */
.px-ba-section { padding: 84px 0; background: linear-gradient(180deg, #f5f7f9, #ffffff); }
.px-ba {
  position: relative; max-width: 940px; margin: 0 auto;
  border-radius: 22px; overflow: hidden; box-shadow: var(--px-shadow-soft);
  aspect-ratio: 16 / 9; cursor: ew-resize; user-select: none; touch-action: none;
  background: #1C2127;
}
.px-ba img { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.px-ba .px-ba-after-img { width: 100%; }
.px-ba-before {
  position: absolute; top: 0; left: 0; bottom: 0; width: 50%;
  overflow: hidden; will-change: width;
}
.px-ba-before .px-ba-before-img { width: var(--px-ba-w, 940px); max-width: none; }
.px-ba-label {
  position: absolute; bottom: 16px; z-index: 3;
  padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.px-ba-label-before { left: 16px; background: rgba(236,74,5,.85); }
.px-ba-label-after  { right: 16px; background: rgba(28,33,39,.7); }
.px-ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; z-index: 3;
  background: #fff; transform: translateX(-50%); box-shadow: 0 0 18px rgba(0,0,0,.35);
}
.px-ba-handle {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--px-grad-fire); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(236,74,5,.7), 0 0 0 6px rgba(255,255,255,.85);
  font-size: 18px; font-weight: 700;
}
.px-ba-handle::before { content: "‹ ›"; letter-spacing: -2px; }

/* ==========================================================================
   20. CINEMATIC SCROLL-REVEAL  (JS adds .px-reveal to content w/o data-aos)
   ========================================================================== */
.px-js .px-reveal { opacity: 0; transform: translateY(38px); }
.px-js .px-reveal.px-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--px-ease), transform .85s var(--px-ease);
}

@media (prefers-reduced-motion: reduce) {
  .px-marquee-track { animation: none !important; }
  .px-js .px-reveal { opacity: 1 !important; transform: none !important; }
}