/* Leading Edge Site — Home page sliders. */

/* Fade sliders: slides stack in one grid cell; only the active one shows. */
.le-fade{display:grid !important}
.le-fade>.le-fade__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.le-fade>.le-fade__slide.is-active{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
#le-why-photos.le-fade>.le-fade__slide img{animation:none}
#le-why-photos.le-fade>.le-fade__slide.is-active img{animation:le-kenburns 9s ease-out both}
@keyframes le-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.le-fade>.le-fade__slide{transition:none}#le-why-photos.le-fade>.le-fade__slide.is-active img{animation:none}}

/* Hero visual: blue hexagon behind each slide's photos; stays inside the visual column so the H1 sits on white. */
#le-hero-visual>*{background:url(/wp-content/uploads/2025/02/blue-hex-2.png) left center/contain no-repeat}
@media (min-width:1025px){#le-hero-visual{padding:0 !important}#le-hero-visual>*{padding:0 !important;background-size:auto 100%;background-position:left center}}
@media (max-width:1024px){#le-hero-visual>*{background-position:center center}}

/* Hero dots. */
.le-dots{display:flex;gap:10px;align-items:center;margin-top:8px;grid-area:auto}
body button.le-dots__dot{width:12px;height:12px;min-width:0;padding:0;margin:0;border:2px solid #D05D27 !important;border-radius:50%;background:transparent !important;cursor:pointer;box-shadow:none !important;transition:background-color .2s ease,width .2s ease}
body button.le-dots__dot[aria-current="true"]{background:#D05D27 !important;width:28px;border-radius:8px}
body button.le-dots__dot:focus-visible{outline:2px solid #48484A;outline-offset:3px}
.le-dots__label,.le-dots__bar{display:none}
body button.le-dots__pause{width:30px;height:30px;min-width:0;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0 0 0 6px;border:1.5px solid #B9BDC3 !important;border-radius:50%;background:transparent !important;color:#54595F !important;cursor:pointer;box-shadow:none !important;transition:border-color .2s ease,color .2s ease}
body button.le-dots__pause:hover,body button.le-dots__pause:focus-visible{border-color:#D05D27 !important;color:#D05D27 !important}
body button.le-dots__pause:focus-visible{outline:2px solid #48484A;outline-offset:3px}
.le-dots__pause .le-dots__icon-play,.le-dots__pause.is-paused .le-dots__icon-pause{display:none}
.le-dots__pause.is-paused .le-dots__icon-play{display:block}

/* Desktop: the dots become named industry tabs with a progress bar. */
@media (min-width:1025px){
.le-dots--tabs{gap:6px 26px;flex-wrap:wrap;align-items:flex-end;margin-top:4px}
body .le-dots--tabs button.le-dots__dot,body .le-dots--tabs button.le-dots__dot[aria-current="true"]{width:auto;height:auto;padding:0 0 12px;border:0 !important;border-radius:0;background:transparent !important;position:relative;font-family:avenir,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#8A8E94 !important;transition:color .2s ease}
body .le-dots--tabs button.le-dots__dot[aria-current="true"],body .le-dots--tabs button.le-dots__dot:hover{color:#48484A !important}
.le-dots--tabs .le-dots__label{display:block;white-space:nowrap}
.le-dots--tabs .le-dots__bar{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:#E3E6EA;border-radius:2px;overflow:hidden}
.le-dots--tabs .le-dots__fill{display:block;height:100%;width:100%;background:#D05D27;transform:scaleX(0);transform-origin:left center;transition:transform .1s linear}
.le-dots--tabs [aria-current="true"] .le-dots__bar{background:#F2D6C8}
body .le-dots--tabs button.le-dots__pause{align-self:center;margin-bottom:8px}
}
@media (min-width:1025px) and (max-width:1600px){body .le-dots--tabs button.le-dots__dot,body .le-dots--tabs button.le-dots__dot[aria-current="true"]{font-size:.8rem;letter-spacing:.01em;text-transform:none}.le-dots--tabs{gap:6px 12px}}
@media (prefers-reduced-motion:reduce){.le-dots__fill{transition:none}}

/* Testimonials track. */
.le-track{display:flex !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.le-track::-webkit-scrollbar{display:none}
.le-track>*{scroll-snap-align:start;flex-shrink:0}
.le-track:focus-visible{outline:2px solid #D05D27;outline-offset:6px}
.le-track__nav{display:flex;justify-content:center;gap:12px;margin-top:28px}
body button.le-track__btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:1.5px solid #D05D27 !important;border-radius:50%;background:#fff !important;color:#D05D27 !important;cursor:pointer;box-shadow:none !important;transition:background-color .2s ease,color .2s ease}
body button.le-track__btn:hover:not(:disabled),body button.le-track__btn:focus-visible{background:#D05D27 !important;color:#fff !important}
body button.le-track__btn:disabled{opacity:.35;cursor:default}

/* Client logos marquee. */
.le-marquee{display:flex !important;flex-wrap:nowrap !important;overflow:hidden !important;justify-content:flex-start !important;gap:0 !important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.le-marquee__inner{display:flex;flex:0 0 auto;align-items:center;gap:64px;padding-right:64px;animation:le-marquee 40s linear infinite}
.le-marquee:hover .le-marquee__inner{animation-play-state:paused}
.le-marquee.is-static .le-marquee__inner{animation:none}
.le-marquee.is-static{flex-wrap:wrap !important;justify-content:center !important;-webkit-mask-image:none;mask-image:none}
.le-marquee.is-static .le-marquee__inner[aria-hidden="true"]{display:none}
@keyframes le-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:767px){.le-marquee__inner{gap:40px;padding-right:40px;animation-duration:28s}}

/* Before the slider script runs, show only the first slide (prevents a flash of stacked slides on load). */
#le-hero-text:not(.le-fade)>*:not(:first-child),#le-hero-visual:not(.le-fade)>*:not(:first-child),#le-why-photos:not(.le-fade)>*:not(:first-child){display:none}

/* Hero background pattern. */
#le-hero{background:#fff url(/wp-content/uploads/2025/02/sign.svg) center center/cover no-repeat}

/* Hero motion: industry photo slides in from the right edge, product drops in after it, caption rises last. */
@keyframes le-in-right{from{transform:translateX(55%);opacity:0}to{transform:none;opacity:1}}
@keyframes le-drop{0%{transform:translateY(-140px);opacity:0}70%{transform:translateY(8px);opacity:1}100%{transform:none;opacity:1}}
@keyframes le-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
#le-hero-visual .le-fade__slide .le-hv-main,#le-hero-visual .le-fade__slide .le-hv-sec,#le-hero-visual .le-fade__slide .le-hv-caption{opacity:0}
#le-hero-visual .le-fade__slide.is-active .le-hv-main{animation:le-in-right 1s cubic-bezier(.2,.75,.2,1) both}
#le-hero-visual .le-fade__slide.is-active .le-hv-sec{animation:le-drop .8s cubic-bezier(.3,.8,.4,1) .7s both}
#le-hero-visual .le-fade__slide.is-active .le-hv-caption{animation:le-rise .6s ease 1.25s both}
#le-hero-text .le-fade__slide.is-active>*{animation:le-rise .6s ease both}
#le-hero-text .le-fade__slide.is-active>*:nth-child(2){animation-delay:.08s}
#le-hero-text .le-fade__slide.is-active>*:nth-child(3){animation-delay:.16s}
#le-hero-text .le-fade__slide.is-active>*:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){#le-hero-visual .le-fade__slide .le-hv-main,#le-hero-visual .le-fade__slide .le-hv-sec,#le-hero-visual .le-fade__slide .le-hv-caption{opacity:1;animation:none !important}#le-hero-text .le-fade__slide.is-active>*{animation:none}}

/* Homepage: transparent header floating over the hero (no background, no shadow). */
body.home [data-elementor-type="header"]{position:fixed;left:0;right:0;width:100%;z-index:999}
body.home [data-elementor-type="header"] .elementor-element-489581a{background:transparent !important;box-shadow:none !important}
body.home #le-hero{padding-top:68px !important;min-height:max(680px,100vh) !important}
@media (max-width:1024px){body.home #le-hero{padding-top:108px !important;min-height:0 !important}}
@media (max-width:767px){body.home #le-hero{padding-top:92px !important}}

/* Hero: partial blue hexagon on the left edge at the bottom, turned so its point faces the text column. */
#le-hero{position:relative;isolation:isolate}
#le-hero::before{content:"" !important;position:absolute !important;inset:auto auto -48px calc(6% - 502px) !important;width:560px !important;height:416px !important;display:block !important;mix-blend-mode:normal !important;transform:rotate(90deg) !important;background:url(/wp-content/uploads/2025/02/blue-hex-2.png) center/contain no-repeat !important;opacity:.85 !important;z-index:-1 !important;pointer-events:none}
@media (max-width:1024px){#le-hero::before{inset:auto auto -34px calc(6% - 324px) !important;width:360px !important;height:268px !important}}
@media (max-width:767px){#le-hero::before{display:none !important}}

/* Scroll-in reveal (added by home.js only for elements below the first screen). */
.le-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.le-reveal.is-in{opacity:1;transform:none}

/* Why Choose Us photos: dots + pause sit on the photo. */
#le-why-photos .le-dots{position:absolute;left:24px;bottom:22px;z-index:3;margin:0;padding:8px 12px;border-radius:30px;background:rgba(30,30,32,.45);backdrop-filter:blur(4px)}
#le-why-photos button.le-dots__dot{border-color:#fff !important}
#le-why-photos button.le-dots__dot[aria-current="true"]{background:#fff !important}
#le-why-photos button.le-dots__pause{width:26px;height:26px;border-color:rgba(255,255,255,.8) !important;color:#fff !important}
#le-why-photos button.le-dots__pause:hover,#le-why-photos button.le-dots__pause:focus-visible{border-color:#fff !important;color:#fff !important;background:rgba(255,255,255,.15) !important}
