/* ============================================================================
   VACHAL — Elementor paste-in stylesheet
   Paste this ENTIRE file into Elementor → Site Settings → Custom CSS.
   It provides the brand tokens, all keyframes, and helper classes so you can
   reproduce every animation by adding a CSS Class (Advanced → CSS Classes) to
   any Elementor element. See ELEMENTOR-GUIDE.md for which class goes where.
   ============================================================================ */

:root {
  /* Brand */
  --vd-black:  #05070a;
  --vd-white:  #ffffff;
  --vd-steel:  #36516b;   /* THE brand blue */
  /* Steel ramp */
  --steel-950:#0a1019; --steel-900:#0f1822; --steel-800:#16222e; --steel-700:#1f3142;
  --steel-600:#2a4257; --steel-500:#36516b; --steel-400:#4a6c8c; --steel-300:#6e93b3;
  --steel-200:#9bbcd6; --steel-100:#c9dcea;
  /* Accent (= brand blue; lighter tint for text legibility on dark) */
  --signal: #36516b;
  --signal-bright: #6e93b3;
  /* Neutrals */
  --ink-1:#0b0f15; --ink-2:#11161e; --ink-3:#1a212b; --ink-4:#283340;
  --ink-6:#5a6776; --ink-7:#8793a1; --ink-8:#b6c0cc; --ink-10:#f3f6fa;
  /* Semantic */
  --surface-canvas:#05070a; --surface-card:#11161e;
  --text-strong:#f3f6fa; --text-body:#b6c0cc; --text-muted:#8793a1; --text-faint:#5a6776;
  --border-subtle:rgba(155,188,214,0.16);
  --border-strong:rgba(155,188,214,0.42);
  --border-signal:rgba(74,108,140,0.60);
  --brand-subtle:rgba(54,81,107,0.18);
  /* Effects */
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --glow-signal:0 0 0 1px rgba(54,81,107,0.6), 0 0 24px rgba(54,81,107,0.5);
  --glow-steel:0 0 0 1px rgba(74,108,140,0.5), 0 0 28px rgba(54,81,107,0.45);
  --shadow-md:0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.55);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --grid-line:rgba(155,188,214,0.05);
  /* Fonts */
  --font-display:'Space Grotesk',sans-serif;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---- Keyframes ------------------------------------------------------------ */
@keyframes vd-grid-drift { from { background-position: 0 0; } to { background-position: 32px 32px; } }
@keyframes vd-pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(54,81,107,0.55); } 50% { box-shadow: 0 0 0 6px rgba(54,81,107,0); } }
@keyframes vd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vd-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes vd-radar { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes vd-bar-rise { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } }
@keyframes vd-scan { 0% { transform: translateY(-120%); } 100% { transform: translateY(420%); } }
@keyframes vd-sheen { 0% { background-position: -180% 0; } 100% { background-position: 280% 0; } }
@keyframes vd-gear { to { transform: rotate(360deg); } }
@keyframes vd-gauge { 0% { transform: rotate(-78deg); } 50% { transform: rotate(54deg); } 100% { transform: rotate(-78deg); } }
@keyframes vd-type { from { width: 0; } to { width: 100%; } }
@keyframes vd-reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---- Background motif helpers --------------------------------------------- */
.vd-grid-bg {
  background-color: var(--surface-canvas);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: vd-grid-drift 8s linear infinite;
}
.vd-glow-bg {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(54,81,107,0.35), transparent 70%),
    var(--surface-canvas);
}

/* ---- Animation utility classes (add via Advanced → CSS Classes) ---------- */
.vd-reveal     { animation: vd-reveal 0.7s var(--ease-out) both; }
.vd-float      { animation: vd-float 5s var(--ease-inout) infinite; }
.vd-pulse-dot  { animation: vd-pulse-dot 2s ease-out infinite; }
.vd-scan       { animation: vd-scan 2.4s var(--ease-inout) infinite; }
.vd-gear       { animation: vd-gear 9s linear infinite; }
.vd-gear--rev  { animation: vd-gear 6s linear infinite reverse; }
.vd-bar-rise   { transform-origin: bottom; animation: vd-bar-rise 1.1s var(--ease-out) both; }
.vd-radar      { animation: vd-radar 2.6s ease-out infinite; }
.vd-gauge      { transform-origin: bottom center; animation: vd-gauge 2.8s var(--ease-inout) infinite; }
.vd-blink      { animation: vd-blink 1s step-end infinite; }

/* Stagger helpers — add alongside .vd-reveal for sequenced entrances */
.vd-delay-1 { animation-delay: 0.08s; }
.vd-delay-2 { animation-delay: 0.16s; }
.vd-delay-3 { animation-delay: 0.24s; }

/* ---- Eyebrow / mono label utility ---------------------------------------- */
.vd-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-bright);
}

/* ---- Header: scrolled state (pair with Elementor Sticky) ----------------- */
.vd-header               { background: transparent; border-bottom: 1px solid transparent; transition: all .25s var(--ease-out); }
.vd-header.elementor-sticky--effects {
  background: rgba(5,7,10,0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border-subtle);
}

/* ---- Card hover lift (add to Loop Grid / Image Box items) ---------------- */
.vd-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.vd-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-signal);
  box-shadow: var(--glow-signal);
}
.vd-zoom { overflow: hidden; }
.vd-zoom img { transition: transform .5s var(--ease-out); }
.vd-zoom:hover img { transform: scale(1.08); }

/* ---- Reduced motion: never animate ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vd-grid-bg, .vd-reveal, .vd-float, .vd-pulse-dot, .vd-scan, .vd-gear,
  .vd-gear--rev, .vd-bar-rise, .vd-radar, .vd-gauge, .vd-blink,
  .vd-card, .vd-zoom img {
    animation: none !important;
    transition: none !important;
  }
}

/* hero video fill */
.vd-hero-video{height:100%;width:100%}
.vd-hero-video .elementor-widget-container,.vd-hero-video .e-hosted-video,.vd-hero-video .elementor-wrapper,.vd-hero-video .elementor-fit-aspect-ratio{height:100%!important}
.vd-hero-video video{width:100%;height:100%;object-fit:cover;display:block}







/*VDH-START*/
/*VDHOFFSET-START*/
#page{padding-top:72px}
.admin-bar .vdh{top:32px}
@media(max-width:782px){.admin-bar .vdh{top:46px}}
@media(max-width:480px){#page{padding-top:64px}}
/*VDHOFFSET-END*/
.vdh{--c-bg:#05070A;--c-card:#11161E;--c-line:rgba(155,188,214,.14);--c-line2:rgba(74,108,140,.55);--c-tx:#F3F6FA;--c-body:#B6C0CC;--c-acc:#6E93B3;--f-disp:"Space Grotesk",system-ui,sans-serif;--f-mono:"IBM Plex Mono",monospace;--f-body:"IBM Plex Sans",system-ui,sans-serif}
.vdh *{box-sizing:border-box}
.vdh{position:fixed;top:0;left:0;right:0;width:100%;z-index:9000;border-bottom:1px solid var(--c-line);font-family:var(--f-body)}
.vdh-bar{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(5,7,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vdh-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.vdh-logo-img{width:38px;height:38px;border-radius:50%;display:block;flex:0 0 auto;background:#11161E center/cover no-repeat;background-image:url(https://vachaldesigstg.wpenginepowered.com/wp-content/uploads/2026/06/VD20Circle20Icon204-2.webp)}
.vdh-logo-tx{display:flex;flex-direction:column;line-height:1}
.vdh-logo-name{font-family:var(--f-disp);font-weight:700;font-size:20px;letter-spacing:.06em;color:#fff}
.vdh-logo-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:2px}
.vdh-nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.vdh-nav>li{position:relative}
.vdh-link{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:8px;color:#F3F6FA;text-decoration:none;font-size:15px;font-weight:500;line-height:1;transition:color .15s,background .15s;cursor:pointer}
.vdh-link:hover{color:#fff;background:rgba(110,147,179,.10)}
.vdh-caret{width:9px;height:9px;transition:transform .2s;opacity:.7}
.vdh-nav>li:hover .vdh-caret{transform:rotate(180deg)}
.vdh-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;background:#36516B;color:#fff;text-decoration:none;font-family:var(--f-mono);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;transition:background .15s}
.vdh-cta:hover{background:#41607f}
.vdh .vdh-cta,.vdh .vdh-cta:hover,.vdh .vdh-cta:focus,.vdh .vdh-cta:visited,.vdh .vdh-d-cta,.vdh .vdh-d-cta:hover,.vdh .vdh-d-cta:visited{color:#fff !important}
.vdh-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:min(680px,calc(100vw - 32px));background:var(--c-card);border:1px solid var(--c-line2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s;z-index:9100}
.vdh-nav>li:hover>.vdh-mega,.vdh-nav>li:focus-within>.vdh-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(6px)}
.vdh-mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.vdh-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vdh-mega-item{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:background .14s,border-color .14s}
.vdh-mega-item:hover{background:#16222e;border-color:var(--c-line)}
.vdh-mega-ic{flex:0 0 auto;width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:rgba(110,147,179,.12);border:1px solid var(--c-line2);color:var(--c-acc)}
.vdh-mega-ic svg{width:18px;height:18px}
.vdh-mega-tx{font-family:var(--f-disp);font-weight:600;font-size:15px;color:var(--c-tx);line-height:1.2}
.vdh-burger{display:none;flex:0 0 auto;width:46px;height:46px;border:1px solid var(--c-line);border-radius:10px;background:transparent;cursor:pointer;align-items:center;justify-content:center;position:relative}
.vdh-burger span,.vdh-burger span::before,.vdh-burger span::after{display:block;width:22px;height:2px;background:var(--c-tx);border-radius:2px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s;content:""}
.vdh-burger span{position:relative}
.vdh-burger span::before,.vdh-burger span::after{position:absolute;left:0}
.vdh-burger span::before{top:-7px}
.vdh-burger span::after{top:7px}
.vdh-close{display:none}
.vdh-drawer{display:none}
@media(max-width:1024px){
.vdh-nav,.vdh-bar>.vdh-cta{display:none}
.vdh-burger{display:inline-flex}
.vdh-drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;padding-top:72px;background:linear-gradient(180deg,#05070A 0%,#0a1019 100%);overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .32s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility .32s;z-index:8990}
.vdh-drawer:target{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.vdh-drawer:target~.vdh-bar{background:rgba(5,7,10,.96)}
.vdh-drawer:target~.vdh-bar .vdh-burger span{background:transparent}
.vdh-drawer:target~.vdh-bar .vdh-burger span::before{top:0;transform:rotate(45deg)}
.vdh-drawer:target~.vdh-bar .vdh-burger span::after{top:0;transform:rotate(-45deg)}
.vdh-d-inner{padding:18px 22px 60px;display:flex;flex-direction:column;gap:2px;max-width:560px;margin:0 auto;width:100%}
.vdh-d-link,.vdh-d-head,.vdh-m-sub,.vdh-d-cta{opacity:0;transform:translateY(14px)}
.vdh-drawer:target .vdh-d-link,.vdh-drawer:target .vdh-d-head,.vdh-drawer:target .vdh-m-sub,.vdh-drawer:target .vdh-d-cta{animation:vdhItem .5s cubic-bezier(.16,1,.3,1) forwards}
.vdh-drawer:target .vdh-d-inner>*:nth-child(1){animation-delay:.06s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(2){animation-delay:.10s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(3){animation-delay:.14s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(4){animation-delay:.18s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(5){animation-delay:.22s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(6){animation-delay:.26s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(7){animation-delay:.30s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(8){animation-delay:.34s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(9){animation-delay:.38s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(10){animation-delay:.42s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(11){animation-delay:.46s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(12){animation-delay:.50s}
.vdh-drawer:target .vdh-d-inner>*:nth-child(13){animation-delay:.54s}
@keyframes vdhItem{to{opacity:1;transform:translateY(0)}}
.vdh-d-link{display:flex;align-items:center;padding:17px 8px;border-bottom:1px solid var(--c-line);color:var(--c-tx);text-decoration:none;font-family:var(--f-disp);font-weight:600;font-size:19px}
.vdh-d-head{padding:20px 8px 8px;color:var(--c-acc);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vdh-m-sub{display:flex;align-items:center;gap:13px;padding:15px 8px;color:var(--c-body);text-decoration:none;font-size:16px;border-bottom:1px solid var(--c-line);transition:color .15s,padding-left .15s}
.vdh-m-sub svg{width:19px;height:19px;color:var(--c-acc);flex:0 0 auto}
.vdh-m-sub:hover,.vdh-m-sub:active{color:#fff;padding-left:14px}
.vdh-d-cta{margin-top:22px;display:inline-flex;align-items:center;justify-content:center;padding:16px;border-radius:10px;background:#36516B;color:#fff;text-decoration:none;font-family:var(--f-mono);font-size:14px;text-transform:uppercase;letter-spacing:.05em}
}
@media(max-width:480px){.vdh-bar{padding:0 16px}.vdh-logo-name{font-size:18px}}
@media(prefers-reduced-motion:reduce){.vdh-drawer,.vdh-drawer *{transition:none !important;animation:none !important}}
@media(max-width:1024px){
.vdh-d-backdrop{position:fixed;inset:0;z-index:-1;display:block}
.vdh-close{position:absolute;top:13px;right:16px;width:46px;height:46px;border:1px solid var(--c-line);border-radius:10px;background:transparent;display:none;align-items:center;justify-content:center;text-decoration:none;color:var(--c-tx);font-size:28px;line-height:1;z-index:9001}
.vdh-drawer:target~.vdh-bar .vdh-burger{opacity:0;pointer-events:none}
.vdh-drawer:target~.vdh-bar .vdh-close{display:inline-flex}
}

.vdh .vdh-link,.vdh .vdh-link:hover,.vdh .vdh-link:focus,.vdh .vdh-link:visited{color:#ffffff !important}
.vdh .vdh-caret{color:#ffffff !important;opacity:1}
.vdh .vdh-mega-tx{color:#ffffff !important}
.vdh .vdh-mega-ic,.vdh .vdh-mega-ic svg{color:#ffffff !important}
.vdh .vdh-d-link,.vdh .vdh-d-link:hover,.vdh .vdh-d-link:visited{color:#ffffff !important}
.vdh .vdh-d-head{color:#ffffff !important}
.vdh .vdh-m-sub,.vdh .vdh-m-sub:hover,.vdh .vdh-m-sub:visited{color:#ffffff !important}
.vdh .vdh-m-sub svg{color:#ffffff !important}
.vdh .vdh-logo-name,.vdh .vdh-logo-sub{color:#ffffff !important}
.vdh .vdh-burger span,.vdh .vdh-burger span::before,.vdh .vdh-burger span::after{background:#ffffff !important}
.vdh .vdh-close{color:#ffffff !important}

.vdh .vdh-burger{border-color:rgba(255,255,255,.6) !important}
.vdh .vdh-burger span,.vdh .vdh-burger span::before,.vdh .vdh-burger span::after{background-color:#ffffff !important;color:#ffffff !important}
.vdh .vdh-close,.vdh .vdh-close:hover,.vdh .vdh-close:visited,.vdh .vdh-close:focus{color:#ffffff !important;border-color:rgba(255,255,255,.6) !important}

.vdh-d-logo{display:none}
@media(max-width:1024px){
.vdh-d-logo{display:flex;align-items:center;gap:12px;text-decoration:none;padding:6px 8px 22px;margin-bottom:10px;border-bottom:1px solid var(--c-line)}
.vdh-d-logo .vdh-logo-img{width:42px;height:42px}
.vdh-d-logo .vdh-logo-name{color:#fff !important;font-size:21px}
.vdh-d-logo .vdh-logo-sub{color:#fff !important}
.vdh-drawer:target .vdh-d-inner>*:nth-child(14){animation-delay:.58s}
}

.vdh .vdh-close{position:fixed;top:13px;right:16px;width:46px;height:46px;border:1px solid rgba(255,255,255,.6);border-radius:10px;background:transparent;display:none;align-items:center;justify-content:center;text-decoration:none;color:#fff !important;font-size:30px;line-height:1;z-index:9999}
@media(max-width:1024px){
.vdh-drawer:target .vdh-close{display:inline-flex}
.vdh-drawer:target~.vdh-bar .vdh-burger{opacity:0;pointer-events:none}
}

@media(max-width:1024px){
.vdh-drawer{padding-top:0 !important;justify-content:flex-start}
.vdh-d-inner{padding:28px 28px 64px !important;max-width:620px;gap:0 !important}
.vdh-d-logo{padding:4px 0 20px !important;margin-bottom:14px !important}
.vdh-d-logo .vdh-logo-img{width:46px;height:46px}
.vdh-d-logo .vdh-logo-name{font-size:22px}
.vdh-d-link{padding:18px 4px !important;font-size:20px}
.vdh-d-head{padding:22px 4px 6px !important}
.vdh-m-sub{padding:15px 4px !important}
.vdh-m-sub:hover,.vdh-m-sub:active{padding-left:12px !important}
.vdh-d-cta{margin-top:26px !important;padding:17px !important;font-size:15px}
.vdh-close{top:18px !important;right:24px !important}
}
/*VDH-END*/