.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===================================================================
   Veraxton brand overrides. Managed by Claude Code (see CLAUDE.md).
   Edit here: Elementor > Site Settings > Custom CSS.
   Round 2 (2026-09-24): removed rules for sections that no longer exist
   (theme slider, ticker, theme About widgets); added phone/tablet header,
   focus rings, form fields, legal pages.
   =================================================================== */

/* Theme palette -> brand palette (Navy #0A1A33, Brand Blue #064FFB) */
body {
  --ax-prime-c:  #064FFB;
  --ax-prime-c2: #064FFB;
  --ax-prime-c3: #8DB4FF;
  --ax-prime-c4: #0A1A33;
  --ax-prime-c5: #0A1A33;
  --ax-color1:   #064FFB;
  --ax-color2:   #0A1A33;
  --ax-title-color:  #0A1A33;
  --ax-title-color2: #0A1A33;
  --as-clr-h-1:      #0A1A33;
}

/* Preloader removed: it delayed every page and loaded vendor-hosted art */
.preloader-wrap, #preloader { display: none !important; }

/* Theme pill buttons: mint fill lives on ::after; the arrow circle uses an inset shadow and outline */
.as-pr-btn-1::after { background-color: #064FFB !important; }
.as-pr-btn-1 .icon, .as-pr-btn-1 .icon::before, .as-pr-btn-1 .icon::after,
.as-pr-btn-1 .flaticon, .as-pr-btn-1 .flaticon::before, .as-pr-btn-1 .flaticon::after,
.as-contact-1-form-btn .icon, .as-contact-1-form-btn .icon::before, .as-contact-1-form-btn .icon::after,
.as-contact-1-form-btn .flaticon, .as-contact-1-form-btn .flaticon::before, .as-contact-1-form-btn .flaticon::after { color: #064FFB !important; border-color: #064FFB !important; }
.as-pr-btn-1 .icon, .as-contact-1-form-btn .icon { box-shadow: inset 0 0 5px 0 rgba(6,79,251,.9) !important; outline-color: #064FFB !important; }
.elementor-widget-axisory-contact .icon-elm { background-color: #064FFB !important; color: #FFFFFF !important; }
.elementor-widget-axisory-contact .icon-elm i { color: #FFFFFF !important; }

/* ---------- Header (Theme Builder: Veraxton Header) ---------- */
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  color: #D6E2FF !important; font-size: 15px !important; font-weight: 500 !important;
  padding-left: 15px !important; padding-right: 15px !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-item.highlighted { color: #FFFFFF !important; }
.elementor-location-header .elementor-nav-menu--main .elementor-item:after,
.elementor-location-header .elementor-nav-menu--main .elementor-item:before { background-color: #064FFB !important; }
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul,
.elementor-location-header .elementor-nav-menu--dropdown { background-color: #0F2A55 !important; }
.elementor-location-header .elementor-nav-menu--dropdown a,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul a { color: #E6EEFF !important; }
.elementor-location-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu ul a:hover { background-color: #064FFB !important; color: #FFFFFF !important; }
.elementor-location-header .elementor-menu-toggle { color: #FFFFFF !important; background-color: transparent !important; }
.elementor-location-header .elementor-menu-toggle svg { fill: #FFFFFF !important; }
/* Client Login and phone live at the bottom of the phone/tablet menu only (menu items with class vx-menu-mobile) */
.elementor-location-header .elementor-nav-menu--main .vx-menu-mobile { display: none !important; }
.elementor-location-header .elementor-nav-menu--dropdown .vx-menu-first { border-top: 1px solid rgba(141,180,255,.25); margin-top: 6px; }
.elementor-location-header .elementor-nav-menu--dropdown .vx-menu-phone > a { font-weight: 700 !important; color: #FFFFFF !important; }

/* ---------- Home: Services (theme widget) ---------- */
.elementor-widget-axisory-service .number span { color: #064FFB !important; }
.elementor-widget-axisory-service .nav-link.active .number span { color: #FFFFFF !important; }
.elementor-widget-axisory-service .arrow-btn,
.elementor-widget-axisory-service .nav-link.active .arrow-btn { background-color: #064FFB !important; color: #FFFFFF !important; }
.elementor-widget-axisory-service svg [fill="#10ECB0" i] { fill: #3B7BFF; }
.elementor-widget-axisory-service svg [stroke="#10ECB0" i] { stroke: #3B7BFF; }

/* ---------- Home: How We Work (theme widget). Brand Blue text on Navy fails contrast. ---------- */
.ax-workp-item .title-serial span { color: #8DB4FF !important; }

/* ---------- FAQ (theme widget) ---------- */
.ax-faq1-sec { background-color: #EEF3FF !important; position: relative; }
.elementor-widget-axisory-faq svg [fill="#10ECB0" i],
.elementor-widget-axisory-faq svg [fill="#3CEDB7" i] { fill: #064FFB; }
/* Badge: lettering ring rotates, center button stays still and is clickable (link added by snippet 3805) */
.ax-faq-circle { animation: none !important; }
.ax-faq-circle i { position: relative; display: inline-block; width: 120px; height: 120px; }
.ax-faq-circle img { display: block; width: 120px; height: 120px; animation: spin 14s linear infinite; }
.ax-faq-circle i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: #064FFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 18px rgba(6,79,251,.35); transition: transform .2s ease, background-color .2s ease;
}
.ax-faq-circle a { display: inline-block; cursor: pointer; }
.ax-faq-circle a:hover i::after, .ax-faq-circle a:focus-visible i::after { transform: scale(1.1); background-color: #0B45D6; }
#vx-contact-jump { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- Home: contact block (theme widget) ----------
   Theme: sticky at the bottom with min-height:100vh and 386px top padding (a curtain reveal). */
.e-con.ax-contact-sec { min-height: 0 !important; position: relative !important; }   /* no curtain: scrolls normally at every width */
.ax-contact-content { padding-top: 96px !important; padding-bottom: 36px !important; }
.ax-cont-text { top: 18px !important; }
/* Marquee: open letter and word spacing, and the Veraxton verified mark (media 3969) between repeats.
   Sizes are in em so they scale with the 46/40/32px breakpoints; set before the marquee script measures. */
.ax-cont-text h2 { font-size: 46px !important; letter-spacing: 2px !important; word-spacing: .32em !important; white-space: nowrap !important; }
.ax-cont-text h2::after { content: ""; display: inline-block; width: .95em; height: .95em; margin: 0 1.3em 0 1.1em; vertical-align: -.12em;
  background: url("https://veraxton.com/wp-content/uploads/2026/09/vx-check-A-dark.svg") center / contain no-repeat; }
/* Form panel: lighter blue with a soft border so it stands apart from the navy footer */
.ax-contact-form { padding: 24px 28px !important; background: linear-gradient(160deg, #1E4A96 0%, #163A78 100%) !important;
  border: 1px solid rgba(141,180,255,.4) !important; box-shadow: 0 22px 50px rgba(0,0,0,.35) !important; }
.elementor-location-footer { border-top: 1px solid rgba(141,180,255,.22); }
.ax-contact-form label { margin-bottom: 2px !important; }
.ax-contact-form input, .ax-contact-form select { height: 38px !important; }
.ax-contact-form input, .ax-contact-form select, .ax-contact-form textarea { margin-bottom: 12px !important; }
.ax-contact-form textarea { height: 64px !important; }
.ax-contact-form button { padding-top: 7px !important; padding-bottom: 7px !important; }
#ax-contact { scroll-margin-top: 120px; }

/* ---------- Contact forms (both) ---------- */
.ax-contact-form select {
  width: 100%; height: 40px; margin-bottom: 18px; padding: 0 28px 0 2px; font-size: 16px; color: #FFFFFF;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 4px center / 16px no-repeat;
  border: none; border-bottom: 1px solid rgba(255,255,255,.6); border-radius: 0; -webkit-appearance: none; appearance: none;
}
.ax-contact-form select option { color: #0A1A33; background: #FFFFFF; }
.as-contact-1-form select.as-contact-1-form-input {
  padding: 0 28px 0 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 4px center / 16px no-repeat;
  border-radius: 0; -webkit-appearance: none; appearance: none; color: #3E3E3F;
}
.vx-form-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.ax-contact-form .vx-form-note { color: #C9D6F5; }
.as-contact-1-form .vx-form-note { color: #4C5258; }

/* ---------- Inner-page banner chip: solid blue so it reads against navy ---------- */
section.e-con.e-atomic-element > span.e-paragraph-base,
section.e-con.e-atomic-element > .e-con > span.e-paragraph-base:first-child { background-color: #064FFB !important; color: #FFFFFF !important; font-weight: 600 !important; border-color: #064FFB !important; }

/* ---------- Keyboard focus: blue ring with a white gap, visible on light and dark ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .elementor-menu-toggle:focus-visible {
  outline: 3px solid #064FFB !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px #FFFFFF !important;
}

/* ---------- Legal pages (block editor content, class vx-legal) ---------- */
.vx-legal { max-width: 868px !important; margin: 0 auto !important; padding: 72px 24px 88px; color: #3E3E3F; font-size: 17px; line-height: 1.7; }
.vx-legal > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.vx-legal h1 { font-size: 44px; line-height: 1.15; font-weight: 600; color: #0A1A33; margin: 8px 0 12px; }
.vx-legal h2 { font-size: 24px; line-height: 1.3; font-weight: 600; color: #0A1A33; margin: 36px 0 10px; }
.vx-legal p, .vx-legal li { color: #3E3E3F; }
.vx-legal ul { padding-left: 22px; margin: 0 0 12px; }
.vx-legal li { margin: 6px 0; }
.vx-legal a { color: #064FFB; text-decoration: underline; text-underline-offset: 3px; }
.vx-legal .vx-legal-eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #064FFB; }
.vx-legal .vx-legal-updated { font-size: 15px; color: #4C5258; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
  /* Hamburger: Elementor shows it at <=1024px. Its icon-font glyph can fail to draw, so the bars are CSS. */
  .elementor-location-header .elementor-menu-toggle { width: 44px !important; height: 44px !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 8px !important; align-items: center; justify-content: center; }
  .elementor-location-header .elementor-menu-toggle i { display: none !important; }
  .elementor-location-header .elementor-menu-toggle::before { content: ""; display: block; width: 22px; height: 16px; background: linear-gradient(#FFF,#FFF) 0 0/100% 2px no-repeat, linear-gradient(#FFF,#FFF) 0 50%/100% 2px no-repeat, linear-gradient(#FFF,#FFF) 0 100%/100% 2px no-repeat; }
  .elementor-location-header .elementor-menu-toggle.elementor-active::before { background: none; content: "\2715"; color: #FFF; font-size: 20px; line-height: 1; width: auto; height: auto; }
  /* the open menu overlays the page instead of pushing the header taller */
  .elementor-location-header .elementor-widget-nav-menu { position: static !important; }
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: absolute !important; left: 0; right: 0; top: 100%; margin-top: 0 !important; z-index: 1001; max-height: calc(100vh - 64px); overflow-y: auto; box-shadow: 0 16px 30px rgba(5,14,34,.45); }
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item { font-size: 16px !important; padding: 14px 24px !important; }
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item { font-size: 16px !important; padding: 12px 24px 12px 38px !important; }
  /* contact block scrolls normally (no curtain) on touch screens */
  .e-con.ax-contact-sec { position: relative !important; }
}
@media (max-width: 767px) {
  /* compact sticky header */
  .elementor-location-header { position: sticky; top: 0; z-index: 1000; }
  .elementor-widget-axisory-service p, .elementor-widget-axisory-faq .bi-faq-text, .ax-workp-item p { font-size: 16px !important; }
  .ax-contact-content { padding-top: 76px !important; }
  .ax-contact-form { padding: 24px 20px !important; }
  .wpcf7 input, .wpcf7 select, .wpcf7 textarea { font-size: 16px !important; }
  .vx-form-note { font-size: 16px; }
  .vx-legal { padding: 48px 24px 64px; font-size: 16px; }
  .vx-legal h1 { font-size: 32px; }
  .vx-legal h2 { font-size: 22px; }
}
@media (min-width: 601px) and (max-width: 767px) {
  .admin-bar .elementor-location-header { top: 46px; }
}

/* ---------- Round 2 QA fixes (2026-09-24) ---------- */
@media (max-width: 1024px) {
  /* theme-widget section headings follow the atomic scale (38/32/28) */
  .elementor-widget-axisory-service h2, .elementor-widget-axisory-faq h2,
  .elementor-widget-axisory-work-step h2, .as-contact-1-area h2, .elementor-widget-axisory-contact .as-sec-title-1 { font-size: 32px !important; line-height: 1.15 !important; }
  .ax-cont-text h2 { font-size: 40px !important; }
  /* How We Work: the network art drifts behind the heading on narrow screens; plain navy instead */
  .ax-workp-sec { background-color: #0A1A33 !important; }
  .ax-workp-bg { display: none !important; }
  /* services: on tablets and phones the tab artwork (blue folder + image) stacked under the list and
     showed as empty blue boxes (the image was hidden, the folder was not). The list alone is enough. */
  .elementor-widget-axisory-service .as-services-1-wrap-right { display: none !important; }
  .elementor-widget-axisory-service .as-services-1-border { padding-top: 72px !important; }
  .elementor-widget-axisory-service .as-services-1-area { padding-bottom: 56px !important; }
}
@media (max-width: 767px) { .elementor-widget-axisory-service .as-services-1-area { padding-bottom: 48px !important; } }
/* Services, all widths (2026-09-24 late): the dashed frame ended ~150px (desktop) / ~90px (phone) below
   the last service, framing an empty white box. The frame now closes at the last service and the space
   before the Compliance Dashboard band is plain white, outside the frame. The theme's content div is empty here. */
.elementor-widget-axisory-service .as-services-1-border { padding-bottom: 0 !important; }
.elementor-widget-axisory-service .as-services-1-wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.elementor-widget-axisory-service .as-services-1-content { display: none !important; }
.elementor-widget-axisory-service .as-services-1-area { padding-bottom: 80px; }
@media (max-width: 767px) {
  .elementor-widget-axisory-service h2, .elementor-widget-axisory-faq h2,
  .elementor-widget-axisory-work-step h2, .as-contact-1-area h2, .elementor-widget-axisory-contact .as-sec-title-1 { font-size: 28px !important; }
  .ax-cont-text h2 { font-size: 32px !important; }
  /* footer links: the whole 44px row is the tap target */
  .elementor-location-footer p.e-paragraph-base { padding-block: 0 !important; }
  .elementor-location-footer a.e-paragraph-link-base { display: block; padding-block: 11px; }
  /* home form fields: 44px tall */
  .ax-contact-form input, .ax-contact-form select { height: 44px !important; }
}
@media (max-width: 1024px) {
  /* tablets use the hamburger (which carries Client Login and the phone), so the utility bar goes and the header sticks */
  .elementor-location-header .elementor-element-289456f3 { display: none !important; }
  .elementor-location-header { position: sticky; top: 0; z-index: 1000; }
  .elementor-location-footer p.e-paragraph-base { padding-block: 0 !important; }
  .elementor-location-footer a.e-paragraph-link-base { display: block; padding-block: 11px; }
  .ax-contact-form input, .ax-contact-form select { height: 44px !important; }
  .as-contact-1-area .link-elm, .elementor-widget-axisory-contact .link-elm { display: inline-block; padding-block: 8px; }
}
@media (min-width: 783px) and (max-width: 1024px) {
  .admin-bar .elementor-location-header { top: 32px; }
}
@media (max-width: 1024px) {
  .ax-faq1-sec .accordion-button { min-height: 48px; padding-block: 10px !important; }
}
/* ---------- Home hero: rotating messages, art crossfade, AI network canvas (2026-09-24) ----------
   Global classes vx-hero / vx-hero-slides / vx-hero-art mark the atomic hero; snippet 3805 (vxHeroFx)
   adds .vx-rot, .is-on, the controls and canvas.vx-net. Without the script: message 1 + image 1 only. */
.vx-hero > *:not(.vx-net) { position: relative; z-index: 1; }
/* "Verification field" (default since 2026-09-24 evening; ?vxhero=old shows the network): canvas.vx-field
   replaces the network, and the art card fades out as the particles take its place */
/* canvas.vx-field (0,2,1) must beat .vx-hero > *:not(.vx-net) (0,2,0); the controls rely on that rule's weight */
.vx-hero > canvas.vx-field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.vx-hero .vx-hero-art { transition: opacity 1s ease; }
.vx-hero.vx-field-on .vx-hero-art { opacity: 0; }
@media (max-width: 1024px) {
  /* tablets and phones: the art box (hidden before) is the field's stage under the buttons. Set here,
     not by the script, so the space exists from the first paint and nothing below the hero moves.
     Without the script it shows the first art image. */
  .vx-hero > .vx-hero-art { display: block !important; flex: 0 0 100% !important; width: 100% !important; max-width: none !important; height: 320px !important;
    margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
  .vx-hero > .vx-hero-art > img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
}
@media (max-width: 767px) { .vx-hero > .vx-hero-art { height: 240px !important; } }
.vx-net { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.62) 42%, #000 64%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.62) 42%, #000 64%); }
.vx-hero-art > img:not(:first-child) { position: absolute; top: 0; left: 0; }
.vx-hero-art > img { transition: opacity 1.2s ease, transform 8s ease-out; }
.vx-rot .vx-hero-art > img { opacity: 0 !important; transform: scale(1); }
.vx-rot .vx-hero-art > img.is-on { opacity: 1 !important; transform: scale(1.05); }
.vx-rot .vx-hero-slides { display: grid !important; }
.vx-rot .vx-hero-slides > * { grid-area: 1 / 1; align-self: center; display: flex !important; visibility: hidden; opacity: 0;
  transition: opacity .5s ease, visibility 0s linear .5s; }
.vx-rot .vx-hero-slides > .is-on { visibility: visible; opacity: 1; transition: opacity .5s ease, visibility 0s; }
.vx-rot .vx-hero-slides > * > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.vx-rot .vx-hero-slides > .is-on > * { opacity: 1; transform: none; transition: opacity .8s ease .15s, transform .8s cubic-bezier(.2,.7,.2,1) .15s; }
.vx-rot .vx-hero-slides > .is-on > :nth-child(2) { transition-delay: .35s; }
/* Pause/Play (no progress bars): bottom-right corner of the hero. Since 2026-09-24 evening it is
   invisible to mouse and touch (user asked), and appears only when a keyboard user tabs to it;
   screen readers still reach it. WCAG 2.2.2 (motion over 5s) is covered by this button, pause on
   hover/focus of the text, and the system "reduce motion" setting. */
.vx-hero > .vx-hero-ctrl { position: absolute; right: 20px; bottom: 16px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.vx-hero > .vx-hero-ctrl:focus-within { opacity: .85; pointer-events: auto; }
.vx-hero-ctrl button.vx-pause, .vx-vid-ctrl button.vx-pause, .vx-ah-ctrl button.vx-pause { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0;
  padding: 0; border-radius: 50%; border: 1px solid rgba(201,214,245,.4) !important; background: rgba(10,26,51,.35) !important; color: #FFFFFF !important;
  box-shadow: none !important; cursor: pointer; }
.vx-hero-ctrl button.vx-pause:hover, .vx-vid-ctrl button.vx-pause:hover { background: rgba(255,255,255,.12) !important; }
.vx-hero-ctrl button:focus-visible, .vx-vid-ctrl button:focus-visible { outline: 2px solid #8DB4FF !important; outline-offset: 2px; }
@media (hover: none) {
  .vx-hero > .vx-hero-ctrl, .vx-vidband > .vx-vid-ctrl { right: 8px; bottom: 8px; }
  .vx-hero-ctrl button.vx-pause, .vx-vid-ctrl button.vx-pause { width: 44px; height: 44px; }
}
@media (max-width: 1024px) {
  .vx-net { -webkit-mask-image: none; mask-image: none; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-rot .vx-hero-slides > *, .vx-rot .vx-hero-slides > * > *, .vx-hero-art > img { transition: none !important; transform: none !important; }
}
/* ---------- Scroll motion for atomic sections (snippet 3805, vxMotion) ---------- */
.vx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .06em .12em; margin-block: -.06em -.12em; }
.vx-wi { display: inline-block; }
@media (hover: hover) {
  .vx-card-ready { transition: transform .35s ease, box-shadow .35s ease; }
  .vx-card-ready:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10,26,51,.14); }
}

/* ---------- Home: brand-line ticker and Virtual City video band (2026-09-24 PM; snippet 3805 vxExtras) ---------- */
.vx-ticker { overflow: hidden; }
.vx-ticker-track { width: max-content; flex-wrap: nowrap !important; }
.vx-ticker-track.is-running { animation: vxTick var(--vx-tick-dur, 60s) linear infinite; will-change: transform; }
.vx-ticker:hover .vx-ticker-track { animation-play-state: paused; }
@keyframes vxTick { from { transform: translateX(0); } to { transform: translateX(var(--vx-tick-shift, -50%)); } }
.vx-vidband > .vx-vidband-media { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; max-width: none !important;
  aspect-ratio: auto !important; object-fit: cover; display: block; z-index: 0; }
/* 2026-09-24 late: user found the band too dark. The footage itself is dark (mean luma ~24/255) and
   the web encode lost some contrast, so the video is brightened with a filter and the navy overlay
   now darkens only the text side; the right half shows the city at full strength. */
.vx-vidband > .vx-vidband-media { filter: brightness(1.45) contrast(1.12) saturate(1.12); }
.vx-vidband::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,26,51,.86) 0%, rgba(10,26,51,.74) 30%, rgba(10,26,51,.35) 52%, rgba(10,26,51,0) 72%); }
.vx-vidband-content h2, .vx-vidband-content p { text-shadow: 0 1px 14px rgba(10,26,51,.6); }
.vx-vidband > .vx-vidband-content { position: relative; z-index: 2; }
/* video Pause/Play: same rule as the hero, keyboard focus only */
.vx-vidband > .vx-vid-ctrl { position: absolute; right: 20px; bottom: 16px; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.vx-vidband > .vx-vid-ctrl:focus-within { opacity: .85; pointer-events: auto; }
@media (min-width: 768px) and (max-width: 1024px) {
  /* tablets: the text runs to ~80% of the width, so the fade reaches further */
  .vx-vidband::before { background: linear-gradient(90deg, rgba(10,26,51,.86) 0%, rgba(10,26,51,.72) 50%, rgba(10,26,51,.42) 80%, rgba(10,26,51,.18) 100%); }
}
@media (max-width: 767px) { .vx-vidband::before { background: linear-gradient(180deg, rgba(10,26,51,.50) 0%, rgba(10,26,51,.62) 100%); } }
@media (prefers-reduced-motion: reduce) { .vx-ticker-track.is-running { animation: none; } }

/* ---------- About: "Verify it" card (2026-09-25; snippet 3805 vxVerify, source tools\about-fx.js) ----------
   Without the script both cards (.vx-verify-a advice, .vx-verify-b verified) show. With it (.vx-verify-js)
   card B is hidden and card A flips row by row: .vx-v-row.is-on, card .is-verified (navy), .is-stamped. */
.vx-verify-js .vx-verify-b { display: none !important; }
/* the waiting stamp is scaled up (invisible) and pokes past the page edge otherwise (32-44px sideways scroll) */
.vx-verify { overflow: hidden !important; }
.vx-verify-js .vx-verify-a { position: relative; overflow: visible; transition: border-color .6s ease, background-color .6s ease; }
.vx-verify-js .vx-verify-a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #0B3AA8 0%, #0F2A55 70%); opacity: 0; transition: opacity .6s ease; }
/* the real background turns navy too (not only the gradient layer), so contrast checkers and any
   browser that skips the layer still see white text on navy */
.vx-verify-js .vx-verify-a.is-verified { border-color: rgba(141,180,255,.35) !important; background-color: #0F2A55 !important; }
.vx-verify-js .vx-verify-a.is-verified::before { opacity: 1; }
.vx-verify-js .vx-verify-a > * { position: relative; z-index: 1; }
.vx-verify-js .vx-v-label { transition: color .4s ease; }
.vx-verify-js .vx-verify-a.is-verified .vx-v-label { color: #8DB4FF !important; }
.vx-verify-js .vx-v-row { display: grid !important; grid-template-columns: 26px 1fr; column-gap: 14px; align-items: start; }
.vx-verify-js .vx-v-row > .vx-v-old, .vx-verify-js .vx-v-row > .vx-v-new { grid-column: 2; grid-row: 1; margin: 0; transition: opacity .35s ease, transform .35s ease; }
.vx-verify-js .vx-v-new { font-size: 16px; line-height: 1.55; color: #FFFFFF; opacity: 0; transform: translateY(10px); }
.vx-verify-js .vx-v-row.is-on > .vx-v-old { opacity: 0; transform: translateY(-10px); }
.vx-verify-js .vx-v-row.is-on > .vx-v-new { opacity: 1; transform: none; }
.vx-v-mark { grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px dashed #9AA3B2; position: relative;
  transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.vx-v-mark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform .25s ease .1s; }
.vx-v-row.is-on .vx-v-mark { background-color: #064FFB; border: 2px solid #064FFB; border-radius: 50%; transform: scale(1.12); }
.vx-v-row.is-on .vx-v-mark::after { transform: rotate(45deg) scale(1); }
/* (0,3,0) so it beats ".vx-verify-js .vx-verify-a > *" (position: relative) above */
.vx-verify-js .vx-verify-a > .vx-v-stamp { position: absolute; top: -16px; right: -12px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border: 2px solid #8DB4FF; border-radius: 10px; background: #0A1A33; color: #FFFFFF; font-family: "Mona Sans", sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 10px 28px rgba(0,0,0,.35);
  opacity: 0; transform: rotate(-8deg) scale(1.5); transition: opacity .2s ease, transform .38s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.vx-v-stamp img { width: 26px; height: 26px; display: block; }
.vx-verify-js .vx-verify-a.is-stamped > .vx-v-stamp { opacity: 1; transform: rotate(-8deg) scale(1); }
.vx-v-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vx-v-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 8px; border: 2px solid #064FFB !important;
  background: #064FFB !important; color: #FFFFFF !important; font-family: "Mona Sans", sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; cursor: pointer; box-shadow: none !important; }
.vx-v-btn::before { content: ""; width: 7px; height: 12px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin: -3px 4px 0 2px; }
.vx-v-btn[aria-pressed="true"] { background: transparent !important; border-color: #FFFFFF !important; }
.vx-v-btn[aria-pressed="true"]::before { display: none; }
.vx-v-btn:hover { background: #0B45D6 !important; border-color: #0B45D6 !important; }
.vx-v-btn[aria-pressed="true"]:hover { background: #FFFFFF !important; color: #0A1A33 !important; border-color: #FFFFFF !important; }
.vx-v-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-width: 767px) {
  .vx-verify-js .vx-verify-a > .vx-v-stamp { top: -14px; right: -6px; font-size: 12px; letter-spacing: 1.5px; padding: 6px 11px 6px 8px; }
  .vx-v-stamp img { width: 22px; height: 22px; }
  .vx-v-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-verify-js .vx-verify-a, .vx-verify-js .vx-verify-a::before, .vx-verify-js .vx-v-row > *, .vx-v-mark, .vx-v-mark::after, .vx-v-stamp { transition: none !important; }
}
/* About: the "verax" name card keeps its local styles; nothing site-wide needed */

/* ---------- About banner "pages to proof" (2026-09-25; snippet 3805 vxAboutHero, source tools\about-hero.js) ----------
   Global class vx-about-hero on the banner (245693c2). canvas.vx-pages sits behind the text; the
   .elementor-kit-7s below are weighted so the canvas and the control never inherit the text rule. */
.vx-about-hero { position: relative; overflow: hidden; }
.vx-about-hero > :not(canvas):not(.vx-ah-ctrl) { position: relative; z-index: 1; }
.vx-about-hero > canvas.vx-pages { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.42) 36%, #000 62%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.42) 36%, #000 62%); }
@media (max-width: 1024px) {
  /* tablets/phones: the text spans the width, so pages stay faint behind it and show fully below it */
  .vx-about-hero > canvas.vx-pages { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.9) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.9) 100%); }
}
.vx-about-hero > .vx-ah-ctrl { position: absolute; right: 20px; bottom: 16px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.vx-about-hero > .vx-ah-ctrl:focus-within { opacity: .85; pointer-events: auto; }
@media (hover: none) { .vx-about-hero > .vx-ah-ctrl { right: 8px; bottom: 8px; } .vx-ah-ctrl button.vx-pause { width: 44px; height: 44px; } }/* End custom CSS */