/* =========================================
   MOBILE MENU (off-canvas)

   Two things are fixed here.

   1. The eight capability links under "Use
      cases" sit in a .sub-menu that Elementor
      hides with `.elementor-nav-menu ul
      {display:none}`. The chunk that adds the
      toggle to open it (nav-menu.<hash>,
      chunk 334) is missing from the static
      export, so on a phone those eight links
      were unreachable. The panel is full
      screen and had roughly 600px of empty
      space under three items, so the children
      are simply shown - indented under their
      parent - instead of reintroducing a
      control that depends on a script that is
      not there. The caret goes with it: there
      is nothing left to toggle.

   2. The panel shipped as flat #000 with #333
      rules. Every other dark surface on the
      site is now cut on the brand violet, so
      this was the last place still reading as
      neutral grey.
   ========================================= */

/* __content carries the panel background, but Elementor nests a full-size
   container inside it that paints its own #000 on top, so both have to be
   set. Matched on structure rather than the generated element id so it
   survives a re-export. */
.e-off-canvas .e-off-canvas__content,
.e-off-canvas .e-off-canvas__content > .elementor-element {
    background-color: #241046 !important;
}

/* ---- top level ---------------------------------------------- */
.e-off-canvas .elementor-nav-menu--dropdown li {
    border-color: rgba(196, 158, 255, .3) !important;
}

.e-off-canvas .elementor-nav-menu--dropdown a.elementor-item {
    color: #ECE7FF !important;
}

/* ---- children, now visible ---------------------------------- */
.e-off-canvas .elementor-nav-menu ul.sub-menu {
    display: block !important;
    padding: 2px 0 10px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, .18) !important;
}

.e-off-canvas .elementor-nav-menu ul.sub-menu li {
    border: 0 !important;
}

/* Sentence case and a lighter weight, so the children read as a
   list under the parent rather than nine peers shouting at once. */
.e-off-canvas .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
    display: block !important;
    padding: 11px 20px 11px 34px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(236, 231, 255, .7) !important;
    border-left: 1px solid rgba(196, 158, 255, .22) !important;
    margin-left: 20px !important;
    transition: color .16s ease, border-color .16s ease;
}

.e-off-canvas .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover,
.e-off-canvas .elementor-nav-menu ul.sub-menu a.elementor-sub-item:focus-visible {
    color: #ECE7FF !important;
    border-left-color: #9A5CFE !important;
}

/* Nothing toggles any more, so an indicator would be a lie. */
.e-off-canvas .dni-caret {
    display: none !important;
}

/* ---- tap targets -------------------------------------------- */
/* The hamburger renders at 32px and the close cross at 22px, both under
   the 44px minimum. Growing them with padding would shift the header, so
   the hit area is widened with a centred overlay instead - the icon keeps
   its drawn size and the layout does not move. */
a[href*="off_canvas"] {
    position: relative;
}

a[href*="off_canvas"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* =========================================
   SPLIT HEADLINE - REDUCED MOTION
   The hero headline is split into per-character
   spans that start at opacity 0 and only appear
   once a script adds .is-animated. Anyone who
   has asked their OS for less motion should not
   get a 48-step blur-and-slide, and should not
   depend on a script to read the headline.
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .split-h1 .char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* 40px rows were a hair under the minimum too. */
.e-off-canvas .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
}