/* ITeVia FX: the few effects Elementor has no control for. Colours mirror the Kit globals. */

/* reveal on scroll: add the CSS class "fx" (and optionally fx-d1..fx-d4 for a delay) under Advanced */
.itv-js .fx{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.itv-js .fx.in{opacity:1;transform:none}
.fx-d1{transition-delay:.1s}.fx-d2{transition-delay:.2s}.fx-d3{transition-delay:.3s}.fx-d4{transition-delay:.4s}
.elementor-editor-active .fx,.elementor-editor-preview .fx{opacity:1!important;transform:none!important}

/* animated gradient text: wrap words in <span class="grad-text"> inside a Heading */
.grad-text{background:linear-gradient(90deg,#FFFFFF 0%,#9DBDFF 30%,#6B92DE 50%,#9DBDFF 70%,#FFFFFF 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:itv-sheen 9s linear infinite}
@keyframes itv-sheen{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* soft drifting glow behind a container: class "itv-glow"; position with --glow-x / --glow-y, strength with --glow-a */
/* uses ::after because Elementor draws container background overlays with ::before; don't combine with itv-diag */
.itv-glow{overflow:hidden}
.itv-glow::after{content:"";position:absolute;width:900px;height:900px;left:var(--glow-x,-260px);top:var(--glow-y,-380px);border-radius:50%;background:radial-gradient(circle,rgba(60,97,173,var(--glow-a,.45)) 0%,rgba(60,97,173,0) 65%);filter:blur(24px);pointer-events:none;z-index:1;animation:itv-drift 20s ease-in-out infinite alternate}
.itv-glow>.e-con-inner>.elementor-element{position:relative;z-index:2}
@keyframes itv-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(140px,90px,0) scale(1.18)}}

/* faint diagonal drafting lines: class "itv-diag" */
.itv-diag{position:relative}
.itv-diag::after{z-index:0;content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(135deg,rgba(157,189,255,.045) 0 1px,transparent 1px 30px),repeating-linear-gradient(45deg,rgba(157,189,255,.02) 0 1px,transparent 1px 90px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%)}
.itv-diag>.e-con-inner,.itv-diag>.elementor-element{position:relative;z-index:1}

/* hero scrim over a background video: class "itv-hero-scrim" on the hero container.
   Same two gradients as the static site: darker on the left for the text, then fading into the page colour at the bottom.
   It replaces the container's Background Overlay (Elementor's overlay allows only one gradient). */
.itv-hero-scrim::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1!important;background-color:transparent!important;background-image:linear-gradient(90deg,rgba(7,12,28,.92) 0%,rgba(7,12,28,.74) 45%,rgba(7,12,28,.42) 100%),linear-gradient(180deg,rgba(7,12,28,.38) 0%,rgba(7,12,28,.88) 62%,#070C1C 100%)!important}
.itv-hero-scrim--center::before{background-image:radial-gradient(900px 600px at 50% 40%,rgba(60,97,173,.28) 0%,rgba(7,12,28,.72) 70%),linear-gradient(180deg,rgba(7,12,28,.35) 0%,rgba(7,12,28,.85) 75%,#070C1C 100%)!important}
.itv-hero-scrim .elementor-background-video-container{z-index:0}
.itv-hero-scrim>.e-con-inner>.elementor-element{position:relative;z-index:2}

/* secondary (glass) button: class "itv-btn-secondary" on a Button */
.itv-btn-secondary .elementor-button{background:rgba(157,189,255,.06)!important;background-image:none!important;color:#fff!important;border:1px solid rgba(157,189,255,.36)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.itv-btn-secondary .elementor-button:hover{background:rgba(157,189,255,.16)!important}

/* frosted panel: class "itv-glass" */
.itv-glass{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

/* header: transparent over the hero, solid after 24px of scroll */
.itv-header{position:fixed!important;top:0;left:0;right:0;z-index:50;transition:background-color .35s ease,box-shadow .35s ease}
.admin-bar .itv-header{top:32px}
@media (max-width:782px){.admin-bar .itv-header{top:46px}}
.itv-header[data-scrolled="true"]{background-color:rgba(7,12,28,.82);box-shadow:0 1px 0 rgba(157,189,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.elementor-editor-active .itv-header{position:relative!important}

@media (prefers-reduced-motion:reduce){.itv-js .fx{opacity:1;transform:none;transition:none}.grad-text,.itv-glow::after{animation:none}}

/* ---- page components (classes set in Elementor > Advanced > CSS Classes) ---- */
.itv-crumbs a{color:inherit;text-decoration:none}.itv-crumbs a:hover{color:#9DBDFF}.itv-crumb-current{color:#9DBDFF}
.itv-scope{padding-left:18px;border-left:2px solid #3C61AD}
.itv-scope-label,.itv-deliv-label{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#9DBDFF}
.itv-deliv-label{color:#93A4CE;margin-right:12px}
.itv-marquee{overflow:hidden;border-top:1px solid rgba(157,189,255,.16);border-bottom:1px solid rgba(157,189,255,.16);padding:22px 0}
.itv-marquee-track{display:flex;gap:28px;align-items:center;width:max-content;animation:itv-marquee 40s linear infinite;font-family:Michroma,Inter,sans-serif;font-size:clamp(1.25rem,2vw,1.75rem);color:rgba(255,255,255,.85);white-space:nowrap}
.itv-marquee-track i{width:8px;height:8px;border-radius:50%;background:#3C61AD;display:inline-block}
@keyframes itv-marquee{to{transform:translateX(-50%)}}
.itv-case-media{flex:1 1 0;min-width:280px}.itv-case-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.itv-mosaic .elementor-widget-image img{width:100%;object-fit:cover;border-radius:14px;display:block}
.itv-mosaic-wide img{aspect-ratio:16/10}.itv-mosaic-sq{flex:1 1 0;min-width:0}.itv-mosaic-sq img{aspect-ratio:1/1}
@media (prefers-reduced-motion:reduce){.itv-marquee-track{animation:none}}

/* ---- header and footer ---- */
.itv-brand-name .elementor-heading-title{white-space:nowrap;font-size:1.125rem}
.itv-brand-sub{color:#9DBDFF}
.itv-brand-mark img{display:block}
.itv-footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.itv-footer-links a,#site-footer a{color:inherit;text-decoration:none}.itv-footer-links a:hover,#site-footer a:hover{color:#9DBDFF}
.itv-nav .elementor-nav-menu--dropdown{border:1px solid rgba(157,189,255,.16);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(2,5,15,.6)}
.itv-nav .elementor-nav-menu .sub-menu{min-width:300px!important}
@media (max-width:1024px){.itv-brand{width:auto!important}}
/* up to 900px the menu collapses to the burger (nav widget dropdown = tablet, re-expanded 901-1024 below): brand | CTA | burger */
@media (max-width:900px){.itv-header .e-con,.itv-header .e-con-inner{flex-wrap:nowrap!important}.itv-header .itv-nav{order:3;width:auto!important;flex:0 0 auto}.itv-header-cta{margin-left:auto}}
@media (max-width:767px){.itv-header .itv-header-cta .elementor-button{padding:12px 20px!important;font-size:14px!important;white-space:nowrap}.itv-header .itv-brand .elementor-heading-title{white-space:normal;font-size:1rem;line-height:1.15}.itv-header .itv-brand-sub{display:block}}

.itv-header .itv-header-cta .elementor-button{white-space:nowrap}
@media (min-width:901px){.itv-header .itv-nav{flex:1 1 auto;min-width:0}}
@media (max-width:1100px) and (min-width:901px){.itv-nav .elementor-nav-menu--main .elementor-item{padding-left:12px!important;padding-right:12px!important}.itv-nav .elementor-nav-menu--main>.elementor-nav-menu>li>.elementor-item{white-space:nowrap}}
@media (min-width:901px){.itv-nav .elementor-nav-menu--main>.elementor-nav-menu{flex-wrap:nowrap}}
/* 901-1024px: the full menu still fits, so undo the tablet burger there */
@media (min-width:901px) and (max-width:1024px){.itv-nav .elementor-menu-toggle{display:none!important}.itv-nav .elementor-nav-menu--main{display:block!important}.itv-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown{display:none!important}}