.elementor-12311 .elementor-element.elementor-element-9b544fd{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-603eb89 *//* ==========================================================================
   AXON ADHD — Header CSS  ·  COMPLETE FILE  (v14)
   PASTE INTO: Elementor ▸ Site Settings ▸ Custom CSS
   (Replace the ENTIRE existing header CSS with this — do not merge with
   the old v13 file.)

   NOTE: No changes were needed here for the "click label to open dropdown"
   fix — that was JS-only (see axon-header.html). This CSS file is
   unchanged from what you already have.

   WHAT CHANGED IN v14
   - The hamburger button was picking up a pink hover color from
     somewhere else on the site (most likely a theme/plugin default
     `button:hover` rule with a pink accent color, since .axon-burger is
     a real <button> element and any such rule loaded after this
     stylesheet — or matching with equal-or-higher specificity — can
     paint over the neutral grey hover this file already defines).
   - Fixed by making every interactive state of .axon-burger (hover,
     active, focus-visible) explicitly !important and scoped under the
     higher-specificity `.axon-header-wrap .axon-burger…` .elementor-12311 .elementor-element.elementor-element-603eb89, the
     same escalation technique already used elsewhere in this file (see
     the .axon-bar border comment above) for exactly this kind of
     external-CSS-wins problem. background/border-color/box-shadow/
     outline/color are all pinned to the original neutral charcoal
     values, and the three bar spans get an explicit background color on
     every state too, in case the pink was coming from a `color`/
     `currentColor` rule rather than a `background` one.
   - Nothing else about the hamburger changed — same size, same
     rounded-hover shape, same ×-morph animation, same focus ring shape.
     Nothing outside `.axon-burger` and its `span`s changed anywhere in
     this file.

   WHAT CHANGED IN v13 (still applies)
   - While the mobile menu is open, the normal header chrome is now
     hidden: the announcement bar is hidden entirely, and the pill bar
     (.axon-bar) loses its background/border/shadow/radius/blur and is
     pinned as a plain white bar at the very top — so all that's visible
     above the menu is the logo and the close (×) icon, matching the
     Scout reference. No HTML changed for this: the burger already
     morphs into an × in place, so hiding the bar's decoration is enough.
   - The mobile panel (.axon-collapse) background is solid white.
   - Link text, the chevron, the submenu card text, and the submenu
     card's left border are dark-on-white (matching how they looked
     before the v12 dark-theme experiment), since they sit on a white
     panel.
   - The CTA buttons (.btn-ghost / .btn-primary) have no mobile-specific
     color overrides — they fall back to their normal, original colors
     (white/outlined ghost button, blue primary button).
   - The panel's entry animation is a right-to-left slide
     (translateX(100%) → 0).

   WHAT CHANGED IN v12 (superseded)
   - Mobile drawer was a full-width panel with a dark navy gradient
     background and teal/white-outline buttons, matching an earlier
     Scout screenshot. Replaced in v13 by the white panel above.

   WHAT CHANGED IN v11 (superseded)
   - Mobile drawer background was made fully transparent so the hero
     photo showed through.

   WHAT CHANGED IN v10 (superseded)
   - Mobile drawer was narrowed to a 300px left-pinned drawer sliding in
     via translateX.

   WHAT CHANGED IN v9 (still applies)
   - .axon-bar now uses a white 1px border on the top, left, and right
     sides only (no bottom), replacing the v8 navy-tinted 4-side outline.
     This is a plain longhand border-top/left/right — there is no
     shorthand `border:` property anywhere on .axon-bar in this file, so
     nothing can silently reset it back to the old values. (Note: while
     the mobile menu is open, v13 removes this border entirely as part
     of flattening the bar into a plain white top row.)
   - .axon-bar.is-scrolled no longer overrides border-color. Only the
     shadow and glass still change on scroll, same as before.
   - Reminder: .axon-bar is still a 50px-radius pill. A 3-sided border on
     a fully rounded shape will look like a ring with a gap at the
     bottom, not a "squared-off" three-sided box. That's expected with
     this shape.

   WHAT CHANGED IN v8 (still applies, minus the border approach above)
   - The frosted ::before layer sits at inset:-1px so it runs under
     the border, rather than leaving a faint ring at the edge.

   WHAT CHANGED IN v7 (still applies)
   - The responsive bar uses the desktop treatment verbatim: same
     --bar-w (min(1340px, 100vw - 32px)), same centring margins, same 50px
     pill radius, same frosted ::before with backdrop-filter, same
     .is-scrolled behaviour, same 12px/16px inner padding.
   - Menu gutters follow from that: --gutter is 32px (the bar's 16px side
     gutter + its 16px inner padding) so menu items line up under the logo.
   - @supports fallback makes the bar near-opaque where backdrop-filter
     isn't available, since the glass now carries mobile too.

   WHAT CHANGED IN v6 (still applies)
   1. The tablet/mobile menu is a FULL-SCREEN panel: position:fixed,
      filling everything from the bottom of the bar to the bottom of the
      screen. Its top edge follows --axon-bar-h, measured by JS from the
      bar's real box (correct at any logo size, and with the WP admin bar
      in play). CTAs pin to the bottom of the screen.
   2. Logo enlarged on responsive: clamp(38px, 9vw, 48px).
   3. Because the panel is fixed, it's out of flow — it can never add
      height under the header. Three independent locks (visibility,
      pointer-events, and the `inert` attribute set from JS) keep the
      closed panel from swallowing clicks meant for the page beneath it.

   WHAT CHANGED IN v5 (still applies)
   - Nav/CTA spacing lives on the inner elements, not on the panel wrapper.
   - CTA buttons show at every size: in the bar on desktop, stacked inside
     the panel on tablet/mobile. The hamburger is the only size-specific
     control.

   WHAT CHANGED IN v4 (still applies)
   - Desktop (>1180px) untouched — same hover mega-menus, same sizing,
     same narrow-desktop clamp zone (1181–1439px).
   - The dropdown open/close bug fix: .elementor-12311 .elementor-element.elementor-element-603eb89s use the compound
     `.axon-header-wrap.nav-open …`, matching how JS adds `nav-open`
     directly to `.axon-header-wrap`.
   - ≤1180px block: simpler, de-duplicated rules, proper open/close
     animation, scrollable panel that can never exceed the viewport,
     tidy accordion CSS for submenus.
   - Hamburger icon: neutral charcoal (#1F2937), quiet rounded hover/
     active state, neutral focus ring — no brand color.
   - Self-contained body-scroll lock (`html.axon-menu-open`) driven from
     JS while the panel is open; small-phone breakpoint at ≤480px.

   STILL TRUE FROM v3 (kept deliberately):
   - The dropdown is never `position:fixed` and never spans the full
     viewport on desktop. Its closed state is a genuine 0px-tall CSS Grid
     row with pointer-events:none, so it can never sit invisibly on top
     of a form or button elsewhere on the page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@400&display=swap');

.axon-header-wrap{
  --brand:#2563EB; --brand-2:#3B82F6; --ink:#0F1B2E; --muted:#5B6B84;
  --burger-ink:#1F2937; /* neutral charcoal for the mobile toggle — deliberately not the brand/ink color */
  --header-h:78px; --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.47);
  --glass-strong:rgba(255,255,255,.85); --glass-brd:rgba(255,255,255,.66);
  --line:rgba(15,27,46,.07);
  --bar-w:min(1340px, 100vw - 32px);   /* capped at your 1340px content width */
  --panel-pad:22px; --grid-h:258px; --feat-w:320px;
  --panel-w:var(--bar-w);
  width:100%; font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.axon-header-wrap,.axon-header-wrap *,.axon-header-wrap *::before,.axon-header-wrap *::after{ box-sizing:border-box; }
.axon-header-wrap a{ text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
.axon-header-wrap button{ -webkit-tap-highlight-color:transparent; }
.axon-header-wrap ul{ list-style:none; margin:0; padding:0; }

.axon-bar{
  position:sticky; top:0; z-index:1000; isolation:isolate;
  width:var(--bar-w);
  margin-left:calc((100% - var(--bar-w)) / 2);
  margin-right:calc((100% - var(--bar-w)) / 2);
  box-shadow:0 8px 28px rgba(15,27,46,.06), inset 0 1px 0 rgba(255,255,255,.55);
  border-radius:50px;
  transition:box-shadow .28s var(--ease);
}
/* Border forced via a higher-specificity .elementor-12311 .elementor-element.elementor-element-603eb89 + !important. A bare
   `.axon-bar{ border:... }` (single class) is easy for theme/plugin CSS
   elsewhere on a live WordPress site to silently outrank and override —
   this compound .elementor-12311 .elementor-element.elementor-element-603eb89 + !important guarantees it wins regardless of
   what else is loaded. 2px white, all four sides, all breakpoints. */
.axon-header-wrap .axon-bar{
  border:1px solid #EEF0F2 !important;
}
.axon-bar::before{
  content:""; position:absolute; inset:-1px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  transition:background .28s var(--ease);
  border-radius:50px;
}
.axon-bar.is-scrolled{
  box-shadow:0 12px 34px rgba(15,27,46,.1), inset 0 1px 0 rgba(255,255,255,.72);
}
.axon-bar.is-scrolled::before{
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.66));
}
/* Fallback for browsers without backdrop-filter (older Firefox on Android,
   and anyone who's disabled it). Without the blur, .62 alpha over a busy
   hero makes the logo and toggle hard to read — so those browsers get a
   near-opaque bar instead. Everything else is identical. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .axon-bar::before{
    background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.92));
  }
}
.axon-inner{
  position:relative; margin:0; max-width:none; padding:12px 16px;
  display:flex; align-items:center; gap:32px;
}

.axon-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.axon-logo-img{ display:block; height:40px; width:133px; flex-shrink:0; }

/* Collapse wrapper: invisible to layout on desktop — nav + CTAs behave as
   if they were direct flex children of .axon-inner, exactly as before. */
.axon-collapse,
.axon-collapse-inner{ display:contents; }

.axon-nav{ display:flex; align-items:center; align-self:stretch; flex:1 1 auto; }
.axon-menu{ position:static; align-self:stretch; display:flex; align-items:stretch; gap:20px; margin:0 auto 0 0; }
.axon-item{ display:flex; align-items:center; }
/* NOTE: .axon-item is intentionally NOT position:relative. The desktop
   mega-panel (position:absolute; left:0; right:0; width:var(--panel-w))
   must anchor to .axon-inner (the full-width bar row) so it spans and
   aligns to the header's width. Making the <li> positioned would anchor
   the panel to the individual nav item and push it off-screen. */
.axon-link{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:6px;
  font-family:var(--font);
  font-size:16px; font-weight:500; color:#33405A; line-height:1.2;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.axon-link:hover{ color:var(--brand); background:rgba(37,99,235,.08); }
.axon-caret{ transition:transform .24s var(--ease); flex-shrink:0; }
.has-drop:hover .axon-caret,
.axon-item.is-open .axon-caret{ transform:rotate(180deg); }

.axon-actions{ display:flex; align-items:center; gap:16px; flex:0 0 auto; margin-left:auto; }
.axon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px; font-weight:400; line-height:1.25; white-space:nowrap;
  padding:12px 20px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.axon-header-wrap .btn-ghost{ color:var(--ink); background:#FFFFFF; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-color:rgba(15,27,46,.12); }
.axon-header-wrap .btn-ghost:hover{ background:#EFF6FF; border-color:rgba(15,27,46,.2); transform:translateY(-1px); }
.axon-header-wrap .btn-primary{ color:#fff; background:#256ACC; border-color:#256ACC; box-shadow:0 8px 20px rgba(37,99,235,.32); }
.axon-header-wrap .btn-primary:hover{ background:#1A56A8; transform:translateY(-1px); box-shadow:0 12px 26px rgba(37,99,235,.4); }
.axon-btn:active{ transform:translateY(0); }

/* ==========================================================================
   Hamburger toggle — hidden on desktop by default (display:none below is
   the one that matters; the ≤1180px block turns it on). Redesigned to be
   a plain, colorless, modern icon: neutral charcoal bars, a quiet rounded
   hover/active state, and a neutral focus ring — no brand color anywhere.
   ========================================================================== */
.axon-burger{
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  width:44px; height:44px; margin-left:auto;
  background:transparent; border:0; border-radius:10px;
  cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .18s var(--ease);
}
.axon-burger:hover{ background:rgba(17,24,39,.06); }
.axon-burger:active{ background:rgba(17,24,39,.1); }
.axon-burger:focus-visible{ outline:2px solid var(--burger-ink); outline-offset:2px; }
.axon-burger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--burger-ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
/* --- v14: kill an external pink hover -----------------------------------
   Something else on the site (very likely a theme/plugin default
   `button:hover` rule using a pink accent color) was winning over the
   plain rules above, since .axon-burger is a real <button>. This
   re-declares every interactive state at higher specificity
   (.axon-header-wrap .axon-burger…) with !important, so it can't be
   outranked regardless of what else loads — same escalation technique
   used for the .axon-bar border elsewhere in this file. Values are
   identical to the intended neutral-grey design above; only the
   specificity/!important changed. The span background is also pinned
   on every state in case the pink was a `color`/`currentColor` rule
   rather than a `background` one. */
.axon-header-wrap .axon-burger,
.axon-header-wrap .axon-burger:hover,
.axon-header-wrap .axon-burger:active,
.axon-header-wrap .axon-burger:focus{
  border-color:transparent !important;
  box-shadow:none !important;
  color:var(--burger-ink) !important;
}
.axon-header-wrap .axon-burger:hover{
  background:rgba(17,24,39,.06) !important;
}
.axon-header-wrap .axon-burger:active{
  background:rgba(17,24,39,.1) !important;
}
.axon-header-wrap .axon-burger:focus-visible{
  outline:2px solid var(--burger-ink) !important;
  outline-offset:2px !important;
}
.axon-header-wrap .axon-burger span,
.axon-header-wrap .axon-burger:hover span,
.axon-header-wrap .axon-burger:active span,
.axon-header-wrap .axon-burger:focus span{
  background:var(--burger-ink) !important;
}
/* Morph to × — fixed with the correct compound .elementor-12311 .elementor-element.elementor-element-603eb89 (see header note).
   Math: 5px gap + 2px bar height = 7px center-to-center offset. */
.axon-header-wrap.nav-open .axon-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.axon-header-wrap.nav-open .axon-burger span:nth-child(2){ opacity:0; }
.axon-header-wrap.nav-open .axon-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.axon-panel{
  position:absolute; top:100%; left:0; right:0; margin-inline:auto;
  width:var(--panel-w); max-width:calc(100vw - 24px);
  padding:var(--panel-pad); border-radius:20px;
  background:#ffffff;
  border:1px solid var(--glass-brd);
  box-shadow:0 24px 60px rgba(15,27,46,.16), inset 0 1px 0 rgba(255,255,255,.85);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px) scale(.99);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s var(--ease);
  z-index:80;
}
.axon-panel::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
.has-drop:hover > .axon-panel,
.has-drop:focus-within > .axon-panel,
.axon-item.is-open > .axon-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
}

.axon-glow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(160px 90px at 16% 0%, rgba(59,130,246,.12), transparent 70%), radial-gradient(160px 90px at 100% 100%, rgba(37,99,235,.08), transparent 70%); }

.axon-header-wrap .mega-grid{ position:relative; display:grid; grid-template-columns:1fr var(--feat-w); gap:26px; min-height:var(--grid-h); }
.axon-header-wrap .mega-left{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; grid-auto-flow:column; gap:6px 18px; align-content:start; }
.axon-header-wrap .mega-eyebrow{ grid-column:1 / -1; grid-row:1; margin:0 0 4px; padding:0 6px; font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }

.axon-card{ display:flex; align-items:flex-start; gap:13px; padding:10px 12px; border-radius:14px; transition:background .18s var(--ease); }
.axon-card:hover{ background:rgba(59,130,246,.08); }
.axon-header-wrap .card-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--brand); background:rgba(59,130,246,.12); box-shadow:inset 0 0 0 1px rgba(59,130,246,.1); transition:transform .18s var(--ease), background .18s var(--ease); }
.axon-card:hover .card-ic{ transform:scale(1.06); background:rgba(59,130,246,.2); }
.axon-header-wrap .card-tx{ display:flex; flex-direction:column; gap:2px; padding-top:1px; }
.axon-header-wrap .card-t{ font-family:var(--font); font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.axon-header-wrap .card-d{ font-family:var(--font); font-size:12.5px; font-weight:400; color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.axon-feature{ height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.75); box-shadow:0 12px 28px rgba(15,27,46,.1); }
.axon-header-wrap .feat-media{ flex:0 0 112px; height:112px; display:flex; align-items:center; justify-content:center; }
.axon-header-wrap .feat-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.axon-header-wrap .grad-a{ background:linear-gradient(135deg,#DBE8FF,#EAF2FF); }
.axon-header-wrap .grad-b{ background:linear-gradient(135deg,#3B82F6,#2563EB); }
.axon-header-wrap .grad-c{ background:linear-gradient(135deg,#38BDF8,#2563EB); }
.axon-header-wrap .grad-d{ background:linear-gradient(135deg,#4F46E5,#2563EB); }
.axon-header-wrap .feat-body{ flex:1; display:flex; flex-direction:column; padding:13px 15px 15px; }
.axon-header-wrap .feat-t{ margin:0 0 5px; font-family:var(--font); font-size:15px; font-weight:700; color:var(--ink); line-height:1.25; }
.axon-header-wrap .feat-d{ margin:0 0 12px; font-family:var(--font); font-size:12.5px; color:var(--muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.axon-header-wrap .feat-link{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--brand); }
.axon-header-wrap .feat-link svg{ transition:transform .18s var(--ease); }
.axon-header-wrap .feat-link:hover svg{ transform:translateX(4px); }

.axon-header-wrap a:focus-visible,.axon-header-wrap button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .axon-header-wrap *{ transition:none !important; animation:none !important; } }

/* Body-scroll lock while the mobile panel is open. Driven purely by a
   class on <html>, added/removed from JS in openMenu()/closeMenu(). Plain
   overflow:hidden only — no position:fixed trick — so it can't shift the
   rest of the page's layout or reintroduce the old drawer's click bug. */
html.axon-menu-open,
html.axon-menu-open body{ overflow:hidden; height:100%; }

@media (min-width:1181px){
  header:has(.axon-header-wrap),
  .site-header:has(.axon-header-wrap),
  .elementor-location-header:has(.axon-header-wrap),
  .elementor:has(.axon-header-wrap),
  .elementor-element:has(.axon-header-wrap),
  .e-con:has(.axon-header-wrap),
  .e-con-inner:has(.axon-header-wrap),
  .elementor-section:has(.axon-header-wrap),
  .elementor-container:has(.axon-header-wrap),
  .elementor-column:has(.axon-header-wrap),
  .elementor-widget-wrap:has(.axon-header-wrap),
  .elementor-widget-html:has(.axon-header-wrap),
  .elementor-widget-container:has(.axon-header-wrap){
    --padding-block-start:0px !important;
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .axon-header-wrap{ margin-top:0 !important; padding-top:0 !important; }
  .axon-header-wrap .axon-bar{ margin-top:0 !important; }
}

/* Between the hamburger breakpoint and your 1340px content width, the bar
   is narrower than 1340px (min(1340px, 100vw - 32px)) — these clamps keep
   nav/CTA spacing comfortable as it fills that range. */
@media (min-width:1181px) and (max-width:1439px){
  .axon-header-wrap .axon-inner{
    gap:clamp(10px, 2.2vw, 32px) !important;
    min-width:0 !important;
  }
  .axon-header-wrap .axon-nav{ min-width:0 !important; }
  .axon-header-wrap .axon-logo-img{
    width:clamp(104px, 9.24vw, 133px) !important;
    height:auto !important;
    max-width:none !important;
  }
  .axon-header-wrap .axon-menu{
    gap:20px !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
  }
  .axon-header-wrap .axon-link{
    padding:6px 12px !important;
    font-size:16px !important;
    white-space:nowrap !important;
  }
  .axon-header-wrap .axon-actions{
    gap:clamp(8px, 1vw, 16px) !important;
    flex:0 1 auto !important;   /* was 0 0 auto — allow the group to shrink so it can't overflow the bar */
    min-width:0 !important;
  }
  .axon-header-wrap .axon-btn{
    padding:12px clamp(12px, 1.3vw, 20px) !important;
    font-size:clamp(13px, 1.02vw, 16px) !important;
    min-width:0 !important;
  }
}

/* ==========================================================================
   ≤1180px — TABLET & PHONE
   ========================================================================== */
@media (max-width:1180px){
  .axon-header-wrap{ --gutter:32px; --bar-h:64px; }

  header:has(.axon-header-wrap),
  .site-header:has(.axon-header-wrap),
  .elementor-location-header:has(.axon-header-wrap),
  .elementor:has(.axon-header-wrap),
  .elementor-element:has(.axon-header-wrap),
  .e-con:has(.axon-header-wrap),
  .e-con-inner:has(.axon-header-wrap),
  .elementor-section:has(.axon-header-wrap),
  .elementor-container:has(.axon-header-wrap),
  .elementor-column:has(.axon-header-wrap),
  .elementor-widget-wrap:has(.axon-header-wrap),
  .elementor-widget-container:has(.axon-header-wrap){
    --padding-inline-start:0px !important;
    --padding-inline-end:0px !important;
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    filter:none !important;
    perspective:none !important;
  }

  .axon-header-wrap{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .axon-header-wrap .axon-bar{
    width:var(--bar-w) !important;
    max-width:none !important;
    margin-left:calc((100% - var(--bar-w)) / 2) !important;
    margin-right:calc((100% - var(--bar-w)) / 2) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .axon-header-wrap .axon-inner{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:12px 16px !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
  }

  .axon-header-wrap .axon-logo{ flex-shrink:0 !important; }
  .axon-header-wrap .axon-logo-img{
    height:clamp(38px, 9vw, 48px) !important;
    width:auto !important;
    max-width:none !important;
  }

  .axon-header-wrap .axon-burger{
    display:flex !important;
    flex-shrink:0 !important;
  }

  /* --- v13: HIDE THE NORMAL HEADER WHILE THE MENU IS OPEN ----------------
     Only the logo + close (×) icon should be visible at the top while
     the menu is open — no announcement bar, no pill shape, no border/
     shadow/blur behind them. This doesn't touch any HTML: the burger
     already morphs into an × in place, so flattening the bar down to a
     plain white strip (and hiding the banner above it) is all that's
     needed for it to read as "logo + × on a white background," exactly
     like the Scout reference. Closing the menu removes `nav-open` and
     everything below reverts to the normal sticky pill bar + banner. */
  .axon-header-wrap.nav-open .axon-announce{
    display:none !important;
  }
  .axon-header-wrap.nav-open .axon-bar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:#FFFFFF !important;
  }
  .axon-header-wrap.nav-open .axon-bar::before{
    display:none !important;
  }

  /* --- v13: FULL-WIDTH WHITE PANEL, SLIDES IN RIGHT → LEFT ---------------
     Full-width panel (left:0; right:0) like the Scout reference, with a
     solid white background, entering with a right-to-left slide
     (translateX(100%) → 0). */
  .axon-header-wrap .axon-collapse{
    display:block !important;
    position:fixed !important;
    top:var(--axon-bar-h, 68px) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    margin:0 !important;
    background:#FFFFFF !important;
    border:0 !important;
    box-shadow:none !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    opacity:0;
    visibility:hidden;
    pointer-events:none !important;
    transform:translateX(100%);
    transition:opacity .26s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
    z-index:990 !important;
  }
  .axon-header-wrap.nav-open .axon-collapse{
    opacity:1;
    visibility:visible;
    pointer-events:auto !important;
    transform:translateX(0);
    transition:opacity .26s var(--ease), transform .28s var(--ease), visibility 0s linear 0s;
  }

  .axon-header-wrap .axon-collapse-inner{
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    box-shadow:none !important;
  }

  /* --- v13: nav list dark-on-white text/chevron, tightened spacing, no
     dividers. */
  .axon-header-wrap .axon-nav{
    display:block !important;
    align-self:auto !important;
    padding:20px var(--gutter) 8px !important;
  }
  .axon-header-wrap .axon-menu{ display:block !important; margin:0 !important; padding:0 !important; }
  .axon-header-wrap .axon-item{ display:block !important; border-bottom:0 !important; }

  .axon-header-wrap .axon-link{
    display:flex !important;
    width:100% !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:14px 2px !important;
    border-radius:0 !important;
    font-size:17.5px !important;
    font-weight:600 !important;
    letter-spacing:-.01em !important;
    color:#0F1B2E !important;
    background:none !important;
  }
  .axon-header-wrap .axon-link:hover,
  .axon-header-wrap .axon-link:focus{ background:none !important; color:#2563EB !important; }
  .axon-header-wrap .axon-link:active{ background:rgba(37,99,235,.06) !important; }
  .axon-header-wrap .axon-caret{ color:var(--muted) !important; flex-shrink:0; }

  .axon-header-wrap .axon-panel{
    position:static !important;
    display:grid !important;
    grid-template-rows:0fr;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    transition:grid-template-rows .26s var(--ease) !important;
  }
  .axon-header-wrap .axon-item.is-open > .axon-panel{ grid-template-rows:1fr; }
  .axon-header-wrap .axon-panel > *{ overflow:hidden; min-height:0; }
  .axon-header-wrap .axon-panel::before{ display:none !important; }

  .axon-header-wrap .axon-glow,
  .axon-header-wrap .mega-right,
  .axon-header-wrap .mega-eyebrow,
  .axon-header-wrap .card-ic,
  .axon-header-wrap .card-d{ display:none !important; }
  .axon-header-wrap .mega-grid{ display:block !important; min-height:0 !important; gap:0 !important; }
  .axon-header-wrap .mega-left{ display:block !important; gap:0 !important; }

  .axon-header-wrap .axon-card{
    display:block !important;
    margin:0 0 0 2px !important;
    padding:11px 0 11px 16px !important;
    border-left:2px solid rgba(15,27,46,.12) !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
  }
  .axon-header-wrap .axon-card:hover{ background:none !important; }
  .axon-header-wrap .card-tx{ display:block !important; padding:0 !important; gap:0 !important; }
  .axon-header-wrap .card-t{
    font-size:15.5px !important;
    font-weight:500 !important;
    color:#4A5871 !important;
    line-height:1.4 !important;
  }

  /* --- v13: CTA buttons use the normal .btn-ghost / .btn-primary styles
     defined above (no mobile-specific color overrides). Only full-width
     pill sizing is applied here. */
  .axon-header-wrap .axon-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    margin:8px var(--gutter) 0 !important;
    padding:8px 0 calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    border-top:0 !important;
  }
  .axon-header-wrap .axon-btn{
    width:100% !important;
    padding:15px 18px !important;
    font-size:15.5px !important;
  }
}

@media (max-width:480px){
  .axon-header-wrap{ --gutter:28px; }
  .axon-header-wrap .axon-inner{ padding:11px 12px !important; }
  .axon-header-wrap .axon-logo-img{ height:36px !important; }
  .axon-header-wrap .axon-link{ font-size:17px !important; }
  .axon-header-wrap .axon-btn{ font-size:15px !important; padding:14px 16px !important; }
}


/* ==========================================================================
   ANNOUNCEMENT BAR — full-bleed banner with countdown + CTA, sitting ABOVE
   .axon-header-wrap.
   ========================================================================== */

html,body{ overflow-x:clip; }

.axon-announce{
  --ann-bg:#FFBD4B;
  --ann-ink:#141414;
  --ann-max:1340px;
  --ann-gap:12px;
  --ann-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:var(--ann-gap);
  background:var(--ann-bg);
  color:var(--ann-ink);
  font-family:var(--ann-font);
  -webkit-font-smoothing:antialiased;
}
.axon-announce,.axon-announce *,.axon-announce *::before,.axon-announce *::after{ box-sizing:border-box; }

.axon-announce-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px 14px;
  max-width:var(--ann-max);
  margin:0 auto;
  padding:9px 20px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.45;
  text-align:center;
}

.axon-announce-text{ text-wrap:balance; }
/* Explicit font-weight on the <strong>, rather than relying on the
   browser default, so a theme/plugin reset elsewhere on the site can't
   silently flatten it back to regular weight (same defensive pattern
   used for .axon-burger and .axon-bar above). */
.axon-announce-text strong{ font-weight:800; }

/* Small inline flag icon that sits before the banner copy. inline-block
   (not inline-flex) deliberately — flexbox trims the whitespace text
   node that follows this span, which would collapse the space before
   "We're". vertical-align keeps it lined up with the text baseline. */
.axon-announce-flag{
  display:inline-block;
  vertical-align:-2px;
  margin-right:6px;
}
.axon-announce-flag svg{ display:block; }

.axon-announce-link{
  color:var(--ann-ink) !important;
  font-weight:700;
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1);
}
.axon-announce-link:hover{ opacity:.72; }
.axon-announce-link:focus-visible{
  outline:2px solid var(--ann-ink);
  outline-offset:3px;
  border-radius:3px;
}

.axon-count{
  display:none;
  align-items:center;
  gap:5px;
  font-variant-numeric:tabular-nums;
}
.axon-count.is-live{ display:inline-flex; }
/* Dividers on each side of the counter so it reads as its own distinct
   segment between the intro text and the CTA link, rather than blending
   into either neighbour. Only rendered when the counter itself is live
   (:has is well supported in current evergreen browsers; if it's ever
   unsupported the dividers simply don't show, which fails safely). */
.axon-announce-inner:has(.axon-count.is-live) .axon-count::before,
.axon-announce-inner:has(.axon-count.is-live) .axon-count::after{
  content:"";
  display:inline-block;
  width:1px;
  height:14px;
  background:currentColor;
  opacity:.3;
  flex-shrink:0;
}
.axon-announce-inner:has(.axon-count.is-live) .axon-count::before{ margin-right:9px; }
.axon-announce-inner:has(.axon-count.is-live) .axon-count::after{ margin-left:9px; }
.axon-count-unit{
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  padding:2px 7px;
  border-radius:7px;
  background:rgba(255,255,255,.16);
  background:color-mix(in srgb, currentColor 15%, transparent);
  font-weight:700;
  font-size:13px;
  line-height:1.5;
}
.axon-count-unit i{
  font-style:normal;
  font-weight:600;
  font-size:10.5px;
  opacity:.75;
}
.axon-count.is-ended{
  padding:2px 10px;
  border-radius:7px;
  background:rgba(255,255,255,.16);
  background:color-mix(in srgb, currentColor 15%, transparent);
  font-weight:700;
  font-size:12.5px;
}

.axon-announce-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 15px;
  border-radius:999px;
  background:var(--ann-ink);
  color:var(--ann-bg) !important;
  font-weight:700;
  font-size:12.5px;
  line-height:1.5;
  white-space:nowrap;
  text-decoration:none !important;
  border:1px solid transparent;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s cubic-bezier(.22,.61,.36,1);
}
.axon-announce-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.axon-announce-btn:active{ transform:translateY(0); }
.axon-announce-btn:focus-visible{
  outline:2px solid var(--ann-ink);
  outline-offset:3px;
}

@media (max-width:1180px){
  .axon-announce{ --ann-gap:10px; }
  .axon-announce-inner{
    padding:10px 20px;
    font-size:13px;
    gap:6px 12px;
  }
  .axon-count{ gap:4px; }
  .axon-count-unit{ padding:2px 6px; font-size:12.5px; }
}

@media (max-width:560px){
  .axon-announce{ --ann-gap:8px; }
  .axon-announce-inner{
    flex-direction:column;
    gap:8px;
    padding:11px 16px 12px;
    font-size:12.5px;
    line-height:1.4;
  }
  .axon-announce-link{ text-underline-offset:2.5px; }
  .axon-count{ gap:5px; }
  .axon-count-unit{ padding:3px 8px; font-size:13px; }
  .axon-announce-btn{ padding:9px 20px; font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  .axon-announce *{ transition:none !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9b544fd */.elementor-12311 .elementor-element.elementor-element-9b544fd{
    position: fixed;
    top: px;
    left: 0;
    width: 100%;
    z-index: 9999;
}/* End custom CSS */