/* Site enhancements: mobile hero fix, go-to-top, hamburger morph, popup menu redesign */

/* ---------- 1. Mobile hero fix (homepage only, elementor-432) ---------- */
@media (max-width: 767px) {
  .elementor-432 .elementor-element.elementor-element-64e67d8b {
    --min-height: 100vh !important;
  }
  @supports (min-height: 100svh) {
    .elementor-432 .elementor-element.elementor-element-64e67d8b {
      --min-height: 100svh !important;
    }
  }

  .elementor-432 .elementor-element.elementor-element-7abfcb9a:not(.elementor-motion-effects-element-type-background),
  .elementor-432 .elementor-element.elementor-element-7abfcb9a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: cover !important;
  }

  .elementor-432 .elementor-element.elementor-element-3ced15a2 {
    --justify-content: center !important;
  }
}

/* ---------- 2. Go-to-top circular progress button ---------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--e-global-color-primary, #202323);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 900;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Override the theme's generic button:focus/button:hover{background-color:#c36} default,
   which otherwise persists as a red background after a click leaves the button focused. */
.back-to-top:focus,
.back-to-top:hover {
  background: #fff !important;
  color: var(--e-global-color-primary, #202323) !important;
}
.back-to-top svg {
  position: absolute;
}
.back-to-top-track {
  stroke: #e5e5e5;
}
.back-to-top-progress {
  stroke: var(--e-global-color-primary, #202323);
  transition: stroke-dashoffset .1s linear;
}
.back-to-top-arrow {
  position: absolute;
}
/* Keep the go-to-top button out of the way while the full-screen menu is open */
body.menu-open .back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* ---------- 3. Hamburger <-> X icon ---------- */
/* One size in every state — hero, pinned pill and open panel. The pill used to
   shrink the icon to fit its padding, which made the icon read as smaller once
   it gained a background; the padding is tightened instead (see below) so the
   drawn glyph is identical with and without the black pill. */
.jkit-hamburger-menu .hamburger-icon {
  position: relative;
  /* block, not inline-block: as an inline box it sat on the text baseline and
     added ~7px of descender space below the glyph, making the pill taller than
     its padding implied and pushing the icon off-center inside it. */
  display: block;
  width: 30px;
  height: 20px;
}
/* Two WebKit-on-iOS behaviours, both only reachable once the button is pinned
   (position:fixed), which is why the bare icon over the hero never showed them:
   a fixed element's hit area lags its painted position until scrolling settles,
   so the first tap after a scroll lands behind the button; and without an
   explicit touch-action the engine holds the tap back while it waits to see
   whether a double-tap zoom is coming. Promoting the button to its own
   compositing layer keeps its hit area in sync, and manipulation opts out of
   the double-tap wait. */
.jkit-hamburger-menu {
  touch-action: manipulation;
}
.jkit-hamburger-menu .hamburger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
/* Positioned proportionally, not at fixed pixel offsets: the icon is resized
   between the hero/scrolled/open states, and fixed offsets kept the 8px gaps
   while the box shrank, so the bars read as a different icon at each size.
   The 2px bar thickness is deliberately NOT scaled — it matches the
   stroke-width:2 used by every other icon on the site. */
.hamburger-bar-top { top: 0; }
.hamburger-bar-mid { top: calc(50% - 1px); }
.hamburger-bar-bottom { top: calc(100% - 2px); }

/* Hero (default) state: bare icon, no background, brand-black, sized near the logo */
body:not(.scrolled) .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  color: var(--e-global-color-primary, #202323);
}
/* Neutralize the theme's generic button:focus/button:hover color takeover
   (background-color:#c36 in one rule, var(--e-global-color-secondary) in
   another) which otherwise flashes red/green once the button retains focus
   after a click — most visible now that it's a large, fixed, always-onscreen
   element rather than a small transient pill. */
body:not(.scrolled) .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu:focus,
body:not(.scrolled) .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu:hover {
  background: none !important;
  color: var(--e-global-color-primary, #202323) !important;
}

/* Scrolled state: the header itself is sticky (see section 3b), so the button
   travels with it and stays in normal flow. It previously floated on its own
   as position:fixed at top:16px, which sat inside the strip iOS reserves for
   re-showing a collapsed URL bar — the first tap there restored the browser
   chrome instead of reaching the button, which is the "twitch, then it works
   on the second tap" that only ever happened once scrolled. */
body.scrolled .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu {
  background: none !important;
  border: none !important;
  width: auto !important;
  padding: 0 !important;
  color: var(--e-global-color-primary, #202323);
}
/* The header's inner container is position:relative with z-index:99, so it
   opens a stacking context and every z-index above is resolved *inside* it —
   the button's 100001 competes as 99 against the August promo overlay's 99999.
   The pinned hamburger was therefore drawn under that overlay and, since the
   overlay closes on backdrop click, the first tap only dismissed the promo
   (releasing the scroll it held, which read as the page jumping) and a second
   tap was needed to open the menu. Lift the container itself past the overlay;
   the values inside it are already ordered correctly. Scoped to the states
   where the hamburger is pinned, so normal page stacking is untouched.

   body.promo-visible covers the case this first missed: back at the top of the
   page the .scrolled class is gone, so the container dropped to 99 again and
   the overlay recaptured the tap — which is what "scroll down, scroll back up,
   tap the menu" hits. The class is set from JS rather than :has() so it does
   not depend on selector support. */
body.scrolled .elementor-670 .elementor-element.elementor-element-34e86e79,
body.menu-open .elementor-670 .elementor-element.elementor-element-34e86e79,
body.promo-visible .elementor-670 .elementor-element.elementor-element-34e86e79 {
  z-index: 100000 !important;
}
body.scrolled .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu:focus,
body.scrolled .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu:hover {
  background: none !important;
  color: var(--e-global-color-primary, #202323) !important;
}

/* ---------- 3b. Sticky header (the 4nerd pattern) ----------
   Transparent over the hero, solid once scrolled, so the logo and the menu
   button ride along with the page instead of the button floating on its own.
   Scoped to the drawer breakpoints; the desktop header is left alone. */
@media (max-width: 1024px) {
  header.elementor-location-header {
    position: sticky !important;
    top: 0;
    z-index: 100000;
  }
  .elementor-670 .elementor-element.elementor-element-34e86e79 {
    /* The bar ships with padding-bottom:0, which was invisible while it was
       transparent and left the logo sitting on the edge once it gained a
       background. Matching the top padding also pushes the button further from
       the top edge, which is where the browser reclaims taps to restore a
       collapsed URL bar. */
    --padding-bottom: 20px;
    transition: background-color .25s ease, box-shadow .25s ease;
  }
  body.scrolled .elementor-670 .elementor-element.elementor-element-34e86e79 {
    background-color: #fff !important;
    box-shadow: 0 1px 12px rgba(32, 35, 35, .10);
  }
  /* The drawer covers the viewport, so the bar behind it should not show. */
  body.menu-open .elementor-670 .elementor-element.elementor-element-34e86e79 {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Open (X) state */
.jkit-hamburger-menu.is-open .hamburger-bar-top {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
.jkit-hamburger-menu.is-open .hamburger-bar-mid {
  opacity: 0;
}
.jkit-hamburger-menu.is-open .hamburger-bar-bottom {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .jkit-hamburger-menu .hamburger-bar {
    transition: none;
  }
}

/* =====================================================================
   4. Popup menu — full-screen overlay (pattern ported from 4nerd.com.br,
      recolored to our white/brand palette, our own typography kept)

   Scope note: .jkit-menu-wrapper doubles as BOTH the desktop horizontal
   nav row AND the mobile/tablet drawer. Elementor swaps between them via
   a data-elementor-device-mode attribute on <body> whose thresholds are
   mobile <=767 and tablet <=1024 — i.e. exactly the range this media
   query covers. Scoping the whole block in one @media keeps the desktop
   nav untouched without repeating three body[...] selectors per rule.
   ===================================================================== */
@media (max-width: 1024px) {

  /* ---- Panel: full-viewport, opacity fade (no slide) ---- */
  .jkit-menu-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background-color: #fff !important;
    max-width: none !important;
    width: 100% !important;
    left: 0 !important;
    top: 0;
    /* 100% of a fixed element resolves against the *large* viewport on iOS, so
       the bottom of the drawer -- the social strip -- can sit under the browser
       chrome. dvh tracks the visible viewport instead; the 100% above stays as
       the fallback for anything that does not support it. */
    height: 100% !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    box-shadow: none !important;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility .3s !important;
    /* Must clear the promo overlay's 99999 too, or the panel opens behind it
       and the menu appears not to have opened at all. */
    z-index: 100000 !important;
  }
  .jkit-menu-wrapper.active {
    opacity: 1;
    visibility: visible;
  }

  /* Accent sweep across the top edge on open (4nerd's yellow stripe, in our green) */
  .jkit-menu-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--e-global-color-secondary, #0368B4);
    transition: width .5s cubic-bezier(.4, 0, .2, 1) .05s;
    z-index: 2;
  }
  body.menu-open .jkit-menu-wrapper::before {
    width: 100%;
  }

  /* ---- Explicit vertical order (source order is social, CTA, nav, topbar) ---- */
  .jkit-menu-wrapper .jkit-nav-identity-panel { order: 1; flex: 0 0 auto; }
  .jkit-menu-wrapper .jkit-menu-container     { order: 2; flex: 1 1 auto; min-height: 0; }
  .jkit-menu-wrapper .jkit-menu-social        { order: 3; flex: 0 0 auto; }

  /* ---- Topbar: logo left, close right ---- */
  .jkit-menu-wrapper .jkit-nav-identity-panel {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 13px 24px !important;
    border-bottom: 1px solid rgba(32, 35, 35, .08);
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .3s ease .08s, transform .3s ease .08s;
  }
  body.menu-open .jkit-menu-wrapper .jkit-nav-identity-panel {
    opacity: 1;
    transform: translateY(0);
  }
  .jkit-menu-wrapper .jkit-nav-site-title {
    margin: 0 !important;
    line-height: 0;
  }
  /* The bundled CSS gives the logo anchor `margin:10px 0 0 15px` + `padding:5px`,
     which pushed it ~20px right of the nav items below it. Zero it out so the
     logo's left edge lines up with the menu labels. */
  .jkit-menu-wrapper .jkit-nav-identity-panel .jkit-nav-site-title .jkit-nav-logo {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 0;
  }
  .jkit-menu-wrapper .jkit-nav-logo-mark {
    width: 40px;
    height: 40px;
  }
  /* The panel's own × is replaced by the hamburger itself, which stays on top
     of the panel and morphs bars->X in place (see the .menu-open rule below). */
  .jkit-menu-wrapper .jkit-close-menu {
    display: none !important;
  }

  /* ---- Nav area: the only scrollable region ---- */
  .jkit-menu-wrapper .jkit-menu-container {
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Keeps a scroll that runs past the end of this list from being handed to
       the page behind it, which is what the body lock used to prevent. */
    overscroll-behavior: contain;
    padding: 8px 0;

    /* With a group expanded the list is taller than this box on every phone we
       support -- 531px of content in 437px at 390x664 -- so the last item was
       being sliced through the middle of its text with nothing to say the list
       scrolled. It just read as broken. Fading the clipped edge turns that cut
       into the usual "there is more below" signal. The two lengths are driven
       by classes the scroll handler in site-enhancements.js keeps in sync, so
       the fade is gone at both ends of the travel and the last row arrives at
       full opacity. */
    --rj-fade-top: 0px;
    --rj-fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 var(--rj-fade-top),
      #000 calc(100% - var(--rj-fade-bottom)), transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0, #000 var(--rj-fade-top),
      #000 calc(100% - var(--rj-fade-bottom)), transparent 100%);
    scroll-padding-block: 8px;
  }
  .jkit-menu-wrapper .jkit-menu-container.rj-more-below { --rj-fade-bottom: 24px; }
  .jkit-menu-wrapper .jkit-menu-container.rj-more-above { --rj-fade-top: 20px; }
  /* The bundled CSS makes the <ul> itself `height:100%; overflow-y:auto`, which
     turned it into a second, broken scroller — its content spilled out behind
     the CTA/social instead of scrolling. Let the container be the only scroller. */
  .jkit-menu-wrapper > .jkit-menu-container > .jkit-menu {
    height: auto !important;
    overflow: visible !important;
  }

  /* ---- Top-level items ---- */
  .jkit-menu-wrapper .jkit-menu > li {
    border-bottom: 1px solid rgba(32, 35, 35, .06);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .32s ease, transform .32s ease;
  }
  body.menu-open .jkit-menu-wrapper .jkit-menu > li {
    opacity: 1;
    transform: translateX(0);
  }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(1) { transition-delay: .10s; }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(2) { transition-delay: .14s; }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(3) { transition-delay: .18s; }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(4) { transition-delay: .22s; }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(5) { transition-delay: .26s; }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(6) { transition-delay: .30s; }
  .jkit-menu-wrapper .jkit-menu > li:nth-child(7) { transition-delay: .34s; }

  /* The bundled CSS forces `display:block!important; width:auto` on these
     anchors at a specificity we can't beat without an absurd selector, so
     the chevron is positioned absolutely rather than laid out with flex. */
  .jkit-menu-wrapper > .jkit-menu-container > .jkit-menu > li > a {
    position: relative;
    margin: 0 !important;
    /* 11px keeps the row at 45px, just over the 44px minimum tap target, and
       buys back 28px of list across the seven items. */
    padding: 11px 48px 11px 24px !important;
    font-size: clamp(18px, 4.8vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--e-global-color-primary, #202323) !important;
    background: none !important;
  }
  /* Arrows are drawn as masked SVG rather than Unicode glyphs (›, ⌄, ↗), which
     came from unrelated glyph families and so never matched each other in
     weight or size. All three below share the site's existing arrow spec —
     24x24 box, stroke-width 2, round caps and joins — and take their color
     from currentColor via the mask. */
  .jkit-menu-wrapper > .jkit-menu-container > .jkit-menu > li > a::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-color: currentColor;
    opacity: .35;
    transition: transform .3s ease;
  }
  /* chevron right */
  .jkit-menu-wrapper > .jkit-menu-container > .jkit-menu > li:not(.menu-item-has-children) > a::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* chevron down — same family as the one above, just rotated 90deg in the path */
  .jkit-menu-wrapper > .jkit-menu-container > .jkit-menu > li.menu-item-has-children > a::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* Rotate the chevron while its own submenu is expanded. The widget's JS
     toggles .dropdown-open on the <ul>, not on the <li>/<a>, so :has() is
     what links the two; where unsupported the chevron simply stays put. */
  .jkit-menu-wrapper .jkit-menu > li.menu-item-has-children:has(> .sub-menu.dropdown-open) > a::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* ---- Submenu: real accordion, collapsed by default ----
     The bundled CSS ships display:none + a 5s max-height transition and
     ~20-40px paddings, which is what made this look broken and slow.
     Keep it displayed and animate max-height/opacity instead so the
     open/close actually eases. */
  .jkit-menu-wrapper .jkit-menu li .sub-menu {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    /* !important throughout: the bundled rules that set max-height:2500px and
       visibility carry a much higher specificity (body[data-elementor-device-mode]
       .jeg-elementor-kit.jkit-nav-menu.break-point-tablet ...), and without this
       the collapsed submenu still reserved ~160px of dead space in the panel. */
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: visible !important;
    overflow: hidden !important;
    background: rgba(32, 35, 35, .025) !important;
    box-shadow: none !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease,
                padding .35s cubic-bezier(.4, 0, .2, 1) !important;
  }
  .jkit-menu-wrapper .jkit-menu li .sub-menu.dropdown-open {
    max-height: 420px !important;
    opacity: 1 !important;
    padding: 2px 0 !important;
  }
  .jkit-menu-wrapper .jkit-menu .sub-menu li {
    border-bottom: none;
    opacity: 1;
    transform: none;
  }
  .jkit-menu-wrapper .jkit-menu .sub-menu li > a {
    position: relative;
    margin: 0 !important;
    padding: 10px 48px 10px 40px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: rgba(32, 35, 35, .82) !important;
    background: none !important;
  }
  /* Reuses the exact path the site's own buttons use for their up-right arrow
     ("Schedule a FREE Trial"), so the drawer matches the rest of the site. */
  .jkit-menu-wrapper .jkit-menu .sub-menu li > a::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-color: currentColor;
    opacity: .35;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .jkit-menu-wrapper .jkit-menu .sub-menu li > a svg {
    fill: var(--e-global-color-primary, #202323) !important;
  }

  /* ---- Social strip: pinned to the bottom edge ---- */
  .jkit-menu-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(32, 35, 35, .08);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease .42s, transform .3s ease .42s;
  }
  body.menu-open .jkit-menu-social {
    opacity: 1;
    transform: translateY(0);
  }
  .jkit-menu-social a {
    font-size: 14px;
    font-weight: 500;
    color: rgba(32, 35, 35, .6) !important;
    text-decoration: none;
    transition: color .2s ease;
  }
  .jkit-menu-social a:hover {
    color: var(--e-global-color-primary, #202323) !important;
  }

  /* The hamburger IS the close button: rather than hiding it behind the panel
     and showing a separate ×, it stays above the panel and morphs bars->X in
     place. Its own click handler already toggles both ways.

     The header has to be fixed while the drawer is open. Sticky needs a
     scrollport to stick to, and the scroll lock puts overflow:hidden on the
     root, which takes that away — the bar then falls back to its natural place
     in the document, hundreds of pixels above the viewport, taking the close
     button off-screen with it. */
  body.menu-open header.elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }
  /* The drawer draws its own logo in the same corner, so the header's would
     sit on top of it. */
  body.menu-open .elementor-670 .elementor-element.elementor-element-29c7ca8f {
    opacity: 0;
    pointer-events: none;
  }
  body.menu-open .elementor-670 .elementor-element.elementor-element-511e1bb4 .jeg-elementor-kit.jkit-nav-menu .jkit-hamburger-menu {
    position: relative;
    z-index: 100002; /* above the open panel, which is above the promo overlay */
    width: auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--e-global-color-primary, #202323) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .jkit-menu-wrapper .jkit-nav-identity-panel,
    .jkit-menu-wrapper .jkit-menu > li,
    .jkit-menu-social {
      transition: none;
      opacity: 1;
      transform: none;
    }
    .jkit-menu-wrapper::before {
      transition: none;
    }
  }
}

/* Drawer-only markup; keep it out of the desktop nav row. The drilldown
   panels are built once and live in the DOM at every width, so without this
   they render as visible 830x148 blocks inside the desktop header. */
@media (min-width: 1025px) {
  .jkit-menu-social,
  .rj-drill-panel {
    display: none !important;
  }
}

/* Backdrop + body scroll lock */
.jkit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
  z-index: 999;
}
body.menu-open .jkit-overlay {
  opacity: 1;
  visibility: visible;
}

/* ---------- 7. Stroke-drawn icons must not be filled ---------- */
/* The theme ships `.elementor-element svg{fill:currentColor}`, and a CSS
   declaration beats the fill="none" presentation attribute on the element, so
   every icon drawn as an open stroked path was being flood-filled as well as
   stroked. A checkmark came out as a solid wedge; the up-right arrows in the
   trial buttons were filled triangles. 69 of the 71 inline icons across the
   site were affected — all of them inherited from the icon-font removal.
   `:not([fill])` leaves any child that declares its own fill alone. */
.elementor-element svg[fill="none"],
.elementor-element svg[fill="none"] :not([fill]) {
  fill: none;
}

/* =====================================================================
   8. Desktop mega menu (Programs, About)

   Ported from the boran-jiujitsu header: a promo card on the left, then
   photo-led link columns. Rather than adding a second copy of the links
   in a parallel <div>, this restyles the existing <ul class="sub-menu">
   into the panel — the thumbnail, the one-line description and the
   column label are extra markup inside the SAME <li>, hidden again below
   1025px so the drawer accordion in section 4 keeps the plain text list
   it was built against.
   ===================================================================== */
@media (min-width: 1025px) {

  /* The panel spans the header's content box, so it is anchored to that box
     rather than centred on an ancestor: Elementor makes every widget wrapper
     position:relative, so the panel used to resolve against the nav widget --
     which is not centred on the content -- and drifted up to 41px left of true
     as the viewport narrowed. Making the content box the containing block and
     pinning left/right to it needs no viewport maths, so a scrollbar cannot
     throw it off either.

     !important on the item because `.jeg-elementor-kit.jkit-nav-menu
     .jkit-menu-wrapper .jkit-menu li{position:relative}` in the kit bundle
     outranks any selector that can be written from here. */
  .jkit-menu > li.rj-has-mega {
    position: static !important;
  }

  header .e-con-inner {
    position: relative;
  }

  header .e-con-inner .elementor-widget-jkit_nav_menu {
    position: static !important;
  }

  /* Beats `.elementor-670 ... li.menu-item-has-children .sub-menu`, which
     sets min-width:250px and a 16px inline padding on the plain dropdown. */
  .jkit-menu li.rj-has-mega > .sub-menu {
    --rj-mega-gap: 14px;

    left: 0 !important;
    right: 0 !important;
    width: auto;
    transform: translateY(-8px);
    min-width: 0 !important;
    margin: var(--rj-mega-gap) 0 0 !important;
    padding: 26px !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 24px 60px rgba(32, 35, 35, .16);
    transition: opacity .28s ease, visibility .28s ease, transform .28s ease;

    display: grid;
    grid-template-columns: .95fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: 6px 34px;
    align-items: start;
  }

  .jkit-menu li.rj-has-mega:hover > .sub-menu {
    transform: translateY(0);
  }

  /* Invisible bridge across --rj-mega-gap. Without it the pointer crosses
     dead space on the way down from the trigger, the item stops being
     hovered, and the panel closes before it can be reached. */
  .jkit-menu li.rj-has-mega > .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--rj-mega-gap) * -1);
    height: var(--rj-mega-gap);
  }

  /* ---- Promo card: a real photo with the copy laid over it ---- */
  .jkit-menu li.rj-has-mega > .sub-menu > li.rj-mega-promo {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
  }

  .rj-mega-promo > a {
    position: relative;
    display: flex !important;
    align-items: flex-end;
    height: 100%;
    min-height: 15rem;
    padding: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: #202323 !important;
    isolation: isolate;
  }

  .rj-mega-promo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .45s ease;
  }

  /* Weighted to the bottom so the copy always has a dark base under it. */
  .rj-mega-promo > a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      rgba(32, 35, 35, .10) 0%,
      rgba(32, 35, 35, .58) 42%,
      rgba(32, 35, 35, .95) 100%);
  }

  .rj-mega-promo > a:hover .rj-mega-promo-img {
    transform: scale(1.05);
  }

  .rj-mega-promo-body {
    display: flex;
    flex-direction: column;
    padding: 22px;
    color: #fff;
  }

  /* White, not brand blue: the blue is 2.8:1 against the dark scrim. */
  .rj-mega-promo-eyebrow {
    display: block;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .rj-mega-promo-title {
    font-family: "Urbanist", sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.24;
    margin-bottom: 7px;
  }

  .rj-mega-promo-text {
    font-family: "Figtree", sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 14px;
  }

  .rj-mega-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Urbanist", sans-serif;
    font-size: 14px;
    font-weight: 700;
  }

  .rj-mega-promo-cta svg {
    transition: transform .25s ease;
  }

  .rj-mega-promo > a:hover .rj-mega-promo-cta svg {
    transform: translateX(4px);
  }

  /* The kit sets `.jkit-menu li{display:flex}`. Left alone, the column-label
     ::before becomes a flex sibling *beside* the link rather than a block
     above it, and steals a share of the column's width. */
  .jkit-menu li.rj-has-mega > .sub-menu > li {
    display: block !important;
  }

  /* ---- Column label, drawn above the first item of each column ---- */
  .jkit-menu li.rj-has-mega > .sub-menu > li[data-rj-group]::before {
    content: attr(data-rj-group);
    display: block;
    padding: 2px 12px 8px;
    font-family: "Urbanist", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(32, 35, 35, .55);
  }

  /* ---- Link rows ---- */
  .jkit-menu li.rj-has-mega > .sub-menu > li:not(.rj-mega-promo) > a {
    display: flex !important;
    align-items: center;
    gap: 13px;
    padding: 9px 12px !important;
    border-radius: 10px;
    background: transparent !important;
    transition: background-color .2s ease;
  }

  .jkit-menu li.rj-has-mega > .sub-menu > li:not(.rj-mega-promo) > a:hover,
  .jkit-menu li.rj-has-mega > .sub-menu > li.current-menu-item > a {
    background: rgba(32, 35, 35, .05) !important;
  }

  .rj-mega-thumb {
    flex: none;
    width: 96px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(32, 35, 35, .06);
    transition: transform .3s ease;
  }

  .jkit-menu li.rj-has-mega > .sub-menu > li > a:hover .rj-mega-thumb {
    transform: scale(1.07);
  }

  .rj-mega-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .rj-mega-title {
    font-family: "Urbanist", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--e-global-color-primary, #202323);
    transition: color .2s ease;
  }

  .jkit-menu li.rj-has-mega > .sub-menu > li > a:hover .rj-mega-title,
  .jkit-menu li.rj-has-mega > .sub-menu > li.current-menu-item .rj-mega-title {
    color: var(--e-global-color-secondary, #0368B4);
  }

  .rj-mega-desc {
    font-family: "Figtree", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.42;
    color: rgba(32, 35, 35, .62);
  }

  /* Narrow desktops: drop the promo card, keep both link columns. */
  @media (max-width: 1180px) {
    .jkit-menu li.rj-has-mega > .sub-menu {
      grid-template-columns: 1fr 1fr;
      gap: 6px 24px;
    }
    .jkit-menu li.rj-has-mega > .sub-menu > li.rj-mega-promo {
      display: none !important;
    }
  }
}

/* Below the desktop breakpoint the drawer accordion from section 4 takes
   over, and it was built against a plain text list — so the panel-only
   markup folds away and the title span goes back to being just the label. */
@media (max-width: 1024px) {
  .rj-mega-promo,
  .rj-mega-thumb,
  .rj-mega-desc {
    display: none !important;
  }
  .rj-mega-text {
    display: contents;
  }
  .jkit-menu li.rj-has-mega > .sub-menu > li[data-rj-group]::before {
    content: none;
  }
}

/* The kit sets `.sub-menu li>a svg{fill:var(--e-global-color-primary)}` at a
   specificity no selector here can reach, which flood-fills the promo card's
   stroked arrow into a solid wedge — the same bug section 7 fixes site-wide. */
.jkit-menu li.rj-has-mega .sub-menu svg {
  fill: none !important;
}

/* =====================================================================
   9. Shared furniture for the hand-built pages
      (Instructors, Your First Class, FAQ)

   These pages carry no Elementor element IDs of their own, so none of the
   per-element rules in the kit bundle reach them. Everything they need is
   declared here against the site's own scale: Urbanist 46/32/28 headings,
   Figtree body, #202323 ink, an 1400px shell.
   ===================================================================== */
.rj-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
}

.rj-page-hero {
  padding: 70px 0 0;
}

.rj-eyebrow {
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(32, 35, 35, .55);
  margin: 0 0 14px;
}

.rj-h1 {
  font-family: "Urbanist", sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: #202323;
  margin: 0 0 22px;
  max-width: 16ch;
}

/* Same hand-drawn underline the animated-text widget draws elsewhere on the
   site; `jkit-animated-dash` is defined in the kit bundle. */
.rj-mark {
  position: relative;
  display: inline-block;
}

.rj-mark svg {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rj-mark path {
  fill: none;
  stroke: var(--e-global-color-secondary, #0368B4);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  animation: jkit-animated-dash 5s ease infinite;
}

/* The double-underline variant sits a touch higher so both strokes clear
   the descenders. */
.rj-mark--double svg { top: 86%; }

/* Second stroke trails the first, the way the kit's own double underline does. */
.rj-mark path:nth-of-type(2) { animation-delay: .3s; }

.rj-lede {
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(32, 35, 35, .78);
  margin: 0;
  max-width: 62ch;
}

.rj-h2 {
  font-family: "Urbanist", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #202323;
  margin: 0 0 18px;
}

.rj-h3 {
  font-family: "Urbanist", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #202323;
  margin: 0 0 10px;
}

.rj-body p {
  font-family: "Figtree", sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(32, 35, 35, .82);
  margin: 0 0 18px;
}

.rj-body p:last-child {
  margin-bottom: 0;
}

/* Closing CTA band, matching the dark card the Fundamentals page ends on. */
.rj-cta-band {
  padding: 90px 0 80px;
}

.rj-cta-band-inner {
  background: #202323;
  border-radius: 8px;
  padding: 56px 50px;
  text-align: center;
}

.rj-cta-band h2 {
  font-family: "Urbanist", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 14px;
}

.rj-cta-band p {
  font-family: "Figtree", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
  margin: 0 auto 28px;
  max-width: 56ch;
}

.rj-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #202323 !important;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 17px 22px;
  border-radius: 8px;
  border: 1px solid #202323;
  text-decoration: none !important;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* White-on-blue, not #202323-on-blue: dark ink on #0368B4 is 2.8:1. */
.rj-btn:hover {
  background: var(--e-global-color-secondary, #0368B4);
  border-color: #02528F;
  color: #fff !important;
}

.rj-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (max-width: 1024px) {
  .rj-shell { padding: 0 24px; }
  .rj-page-hero { padding: 50px 0 0; }
  .rj-h1 { font-size: 38px; max-width: none; }
  .rj-h2 { font-size: 32px; line-height: 1.225; }
  .rj-h3 { font-size: 21px; }
  .rj-cta-band { padding: 70px 0 80px; }
  .rj-cta-band-inner { padding: 44px 30px; }
  .rj-cta-band h2 { font-size: 30px; }
}

@media (max-width: 767px) {
  .rj-shell { padding: 0 20px; }
  .rj-h1 { font-size: 31px; }
  .rj-h2 { font-size: 28px; }
  .rj-lede { font-size: 16.5px; }
  .rj-cta-band-inner { padding: 36px 22px; }
  .rj-cta-band h2 { font-size: 26px; }
}

/* ---------- 10. Instructors ---------- */
.rj-bios {
  padding: 80px 0 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.rj-bio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  align-items: start;
}

/* Second bio mirrors the first so the two portraits don't stack in one column.
   The track sizes are mirrored as well as the order: with `order` alone the
   figure lands in the 7fr track and renders wider than the first portrait. */
.rj-bio--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.rj-bio--flip .rj-bio-figure { order: 2; }

.rj-bio-figure {
  margin: 0;
  position: sticky;
  top: 100px;
}

.rj-bio-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(32, 35, 35, .06);
}

.rj-bio-creds {
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--e-global-color-secondary, #0368B4);
  margin: 0 0 8px;
}

.rj-bio-name {
  font-family: "Urbanist", sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #202323;
  margin: 0 0 22px;
}

.rj-titles-wrap {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(32, 35, 35, .12);
}

.rj-titles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.rj-titles-label {
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(32, 35, 35, .5);
  margin: 0 0 16px;
}

.rj-titles li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: "Figtree", sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(32, 35, 35, .82);
}

.rj-titles li svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--e-global-color-secondary, #0368B4);
}

@media (max-width: 1024px) {
  .rj-bios { padding: 56px 0 0; gap: 72px; }
  .rj-bio { grid-template-columns: 1fr; gap: 28px; }
  .rj-bio--flip .rj-bio-figure { order: 0; }
  .rj-bio-figure { position: static; max-width: 380px; }
  .rj-bio-name { font-size: 32px; }
}

/* Portraits stay 4:5 on a phone, matching desktop. An earlier pass cropped
   them to 4:3 so the name below would share the screen with the photo, but a
   headshot wants the portrait ratio -- the scroll to reach the name costs less
   than the crop did.

   Both sources are already 4:5 (800x1000 and 900x1125), so cover crops nothing
   here and the whole frame shows. No object-position: at this ratio it would
   have no effect, and leaving one in suggests a crop that is not happening. */
@media (max-width: 767px) {
  .rj-bio-figure { max-width: none; }

  .rj-bio-portrait {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 11. Your First Class ---------- */
.rj-section {
  padding: 80px 0 0;
}

.rj-wear {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.rj-wear-card {
  border: 1px solid rgba(32, 35, 35, .14);
  border-radius: 10px;
  padding: 24px 26px;
}

.rj-wear-card h3 {
  font-family: "Urbanist", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #202323;
  margin: 0 0 8px;
}

.rj-wear-card p {
  font-family: "Figtree", sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(32, 35, 35, .78);
  margin: 0;
}

/* The two "don't bring" rules read as rules, not as options — flat row,
   no card, so they don't compete with the Gi / No-Gi pair above. */
.rj-wear-rules {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 18px 26px;
  border-radius: 10px;
  background: rgba(32, 35, 35, .045);
}

.rj-wear-rules span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(32, 35, 35, .8);
}

.rj-wear-rules svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--e-global-color-secondary, #0368B4);
}

.rj-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  counter-reset: rj-step;
  display: grid;
  gap: 4px;
}

.rj-step {
  counter-increment: rj-step;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 26px;
  padding: 30px 0;
  border-top: 1px solid rgba(32, 35, 35, .12);
}

.rj-step:last-child {
  border-bottom: 1px solid rgba(32, 35, 35, .12);
}

.rj-step::before {
  content: counter(rj-step, decimal-leading-zero);
  font-family: "Urbanist", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--e-global-color-secondary, #0368B4);
}

/* The shell runs to 1400px, which would set these paragraphs ~150 characters
   to the line. Cap them at a readable measure instead. */
.rj-step .rj-body,
.rj-note {
  max-width: 74ch;
}

.rj-step-meta {
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(32, 35, 35, .5);
  margin: 0 0 6px;
}

.rj-note {
  margin-top: 60px;
  border-left: 3px solid var(--e-global-color-secondary, #0368B4);
  padding: 6px 0 6px 28px;
}

@media (max-width: 1024px) {
  .rj-section { padding: 56px 0 0; }
  .rj-wear { grid-template-columns: 1fr; }
  .rj-step { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
  .rj-step::before { font-size: 30px; }
  .rj-note { margin-top: 44px; padding-left: 20px; }
}

/* ---------- 12. FAQ ---------- */
/* A single reading column, so the whole page — hero included — runs in a
   narrower shell rather than leaving 500px of dead space beside the list. */
.rj-shell--narrow {
  max-width: 1000px;
}

.rj-faq {
  padding: 60px 0 0;
}

.rj-faq-group + .rj-faq-group {
  margin-top: 54px;
}

.rj-faq-group > h2 {
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary, #0368B4);
  margin: 0 0 6px;
}

/* <details> rather than scripted panels: it is keyboard- and
   screen-reader-native, and Chrome expands a closed one to reach a
   find-in-page match, which a div-based accordion swallows. */
.rj-faq-item {
  border-bottom: 1px solid rgba(32, 35, 35, .13);
}

.rj-faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Urbanist", sans-serif;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #202323;
  transition: color .2s ease;
}

.rj-faq-item > summary::-webkit-details-marker {
  display: none;
}

.rj-faq-item > summary:hover {
  color: var(--e-global-color-secondary, #0368B4);
}

.rj-faq-item > summary:focus-visible {
  outline: 2px solid var(--e-global-color-secondary, #0368B4);
  outline-offset: 3px;
  border-radius: 4px;
}

.rj-faq-item > summary svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--e-global-color-secondary, #0368B4);
  transition: transform .25s ease;
}

.rj-faq-item[open] > summary svg {
  transform: rotate(180deg);
}

.rj-faq-answer {
  padding: 0 0 26px;
  max-width: 68ch;
}

.rj-faq-answer p {
  font-family: "Figtree", sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(32, 35, 35, .82);
  margin: 0 0 16px;
}

.rj-faq-answer p:last-child {
  margin-bottom: 0;
}

.rj-faq-answer a {
  color: var(--e-global-color-secondary, #0368B4);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1024px) {
  .rj-faq { padding: 44px 0 0; }
  .rj-faq-group + .rj-faq-group { margin-top: 42px; }
  .rj-faq-item > summary { font-size: 17.5px; padding: 19px 0; gap: 16px; }
}

/* ---------- 13. "Any Questions?" -> FAQ card ----------
   Sits in the empty space under the heading on the Kids and Functional
   Strength pages, between the heading and the contact details, so the
   question the section asks has an answer to point at. */
.rj-faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 30px;
  padding: 22px 24px;
  max-width: 460px;
  border: 1px solid rgba(32, 35, 35, .16);
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color .25s ease, background-color .25s ease;
}

.rj-faq-cta:hover {
  border-color: var(--e-global-color-secondary, #0368B4);
  background: rgba(3, 104, 180, .04);
}

.rj-faq-cta-title {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--e-global-color-primary, #202323);
  margin-bottom: 5px;
  transition: color .25s ease;
}

.rj-faq-cta:hover .rj-faq-cta-title {
  color: var(--e-global-color-secondary, #0368B4);
}

.rj-faq-cta-desc {
  display: block;
  font-family: "Figtree", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(32, 35, 35, .68);
}

.rj-faq-cta svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--e-global-color-secondary, #0368B4);
  transition: transform .25s ease;
}

.rj-faq-cta:hover svg {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .rj-faq-cta { max-width: none; padding: 18px 20px; }
  .rj-faq-cta-title { font-size: 17px; }
}


/* ---------- 14. Functional Strength CTA arrow ----------
   These buttons invert on hover (near-black -> pale pink). The arrow is drawn
   by a stroke pinned white on the element itself, so on the pale background it
   vanished; and the kit fills the open path, which closes it into a wedge.
   Tying both to the label's own colour makes the arrow follow the button
   through the inversion. */
.elementor-1922 .jeg-elementor-kit.jkit-button .jkit-button-wrapper svg {
  fill: none !important;
}

.elementor-1922 .jeg-elementor-kit.jkit-button .jkit-button-wrapper svg path {
  stroke: currentColor;
}

/* Private Lessons runs on its own purple accent -- tick icons and button
   hovers both use it -- so the hand-drawn underline on that page matches the
   page rather than the site-wide blue. */
.elementor-1786 .rj-mark path {
  stroke: var(--e-global-color-c419a6c, #9195F6);
}

/* =====================================================================
   15. Drawer drilldown (mobile/tablet)

   Replaces the accordion below 1025px. The accordion grew the list
   downward, so with a group open it ran 40-145px past the bottom of the
   scroller depending on the phone and the last item was cut. Here each
   level is its own panel: the root is 7 rows, a group is 4 plus a back
   row, and neither fills the box on any phone we support -- nothing
   scrolls, nothing is cut.

   Everything is scoped under .rj-drill, which site-enhancements.js only
   adds once it has actually built the panels. With JS off, none of this
   applies and the accordion in section 4 still works.

   The panels are built from clones of the existing .sub-menu markup
   rather than by moving it. The same <ul> feeds the desktop mega menu,
   and a transformed ancestor would become the containing block for
   anything absolutely positioned inside it -- so moving the real nodes
   would mean moving them back at 1025px. Clones keep the desktop DOM
   untouched at every width.
   ===================================================================== */
@media (max-width: 1024px) {

  .jkit-menu-container.rj-drill {
    position: relative;
    /* Each panel is its own scroller now, so the container must not be one
       too -- otherwise a panel taller than the box scrolls both of them. */
    overflow: hidden !important;
    padding: 0 !important;
    /* The fade moves onto the panels, which are the scrollers now. */
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* A safety net, not a normal state. Sized as it is, no level overflows on
     any phone measured -- but a very short viewport or a bumped system font
     size could still push one over, and this keeps that a soft fade rather
     than a row sliced through its text. Same classes, same handler as the
     accordion's. */
  .jkit-menu-container.rj-drill > .jkit-menu,
  .jkit-menu-container.rj-drill .rj-drill-panel {
    --rj-fade-top: 0px;
    --rj-fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 var(--rj-fade-top),
      #000 calc(100% - var(--rj-fade-bottom)), transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0, #000 var(--rj-fade-top),
      #000 calc(100% - var(--rj-fade-bottom)), transparent 100%);
  }
  .jkit-menu-container.rj-drill .rj-more-below { --rj-fade-bottom: 24px; }
  .jkit-menu-container.rj-drill .rj-more-above { --rj-fade-top: 20px; }

  .jkit-menu-container.rj-drill > .jkit-menu,
  .jkit-menu-container.rj-drill .rj-drill-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 !important;
    background: #fff;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility .34s;
  }

  /* The root trails rather than matching the incoming panel 1:1 -- the
     shallower travel reads as the level behind, not a second sheet. */
  .jkit-menu-container.rj-drill > .jkit-menu { transform: translateX(0); }
  .jkit-menu-container.rj-drill[data-rj-open] > .jkit-menu {
    transform: translateX(-32%);
    visibility: hidden;
  }

  .jkit-menu-container.rj-drill .rj-drill-panel {
    transform: translateX(100%);
    /* visibility, not display: it keeps the panel out of the tab order while
       it is off-stage without costing the transition. */
    visibility: hidden;
  }
  .jkit-menu-container.rj-drill .rj-drill-panel.is-active {
    transform: translateX(0);
    visibility: visible;
  }

  /* The widget sets `position:inherit` on these, so making the <ul> absolute
     above silently made every <li> absolute too and stacked all seven rows on
     the same 52px line. Summed row heights still measured correctly, which is
     what made it look fine until it was actually rendered. */
  .jkit-menu-container.rj-drill > .jkit-menu > li,
  .jkit-menu-container.rj-drill .rj-drill-list > li {
    position: relative !important;
  }

  /* The real submenu is the clone's source; it must never render here. */
  .jkit-menu-container.rj-drill .jkit-menu li .sub-menu {
    display: none !important;
  }

  /* A parent opens a panel now, so it takes the same right chevron as a
     plain link instead of the accordion's down chevron. */
  .jkit-menu-container.rj-drill > .jkit-menu > li.menu-item-has-children > a::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: translateY(-50%);
  }

  /* The drawer's Schedule a FREE Trial button came out -- it duplicated this
     row's destination -- and on a phone the header's own trial button measures
     0x0, so without this the one row the site exists to be clicked looks
     exactly like Pricing. Colour is the whole treatment: same row, same
     height, same spacing, just the one that reads as different. 5.76:1 on
     white, so it clears AA and, at this size, AAA. */
  .jkit-menu-container.rj-drill > .jkit-menu > li.menu-item-1724 > a {
    color: var(--e-global-color-secondary, #0368B4) !important;
  }
  .jkit-menu-container.rj-drill > .jkit-menu > li.menu-item-1724 > a::after {
    opacity: .8;
  }

  /* ---- Panel contents ---- */
  .rj-drill-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .rj-drill-list > li {
    border-bottom: 1px solid rgba(32, 35, 35, .06);
  }

  /* Rows in a panel are the same object as rows in the root, so they share
     one spec -- see the type scale below. */
  /* One spec for every row in the drawer, at either level -- a menu row is a
     menu row, so the panel must not read as a different kind of list.

     Both values are capped by the root panel on the shortest phone, not by
     the group panels: seven rows into a 436px box on a 375x553 SE. vw and
     not vh because on iOS vh resolves against the *large* viewport, so it
     reads as ~13% more height than the drawer actually gets. */
  .jkit-menu-container.rj-drill {
    --rj-row-fs:  clamp(21px, 6.2vw, 29px);
    --rj-row-pad: clamp(13px, 3.6vw, 20px);
  }

  .jkit-menu-wrapper > .jkit-menu-container.rj-drill > .jkit-menu > li > a,
  .rj-drill-panel .rj-drill-link,
  .rj-drill-back {
    font-size: var(--rj-row-fs) !important;
    padding-top: var(--rj-row-pad) !important;
    padding-bottom: var(--rj-row-pad) !important;
  }

  .rj-drill-panel .rj-drill-link,
  .rj-drill-back {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: var(--rj-row-pad) 48px var(--rj-row-pad) 24px;
    font-family: var(--e-global-typography-primary-font-family, "Urbanist"), sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--e-global-color-primary, #202323);
  }

  .rj-drill-panel .rj-drill-link::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-color: currentColor;
    opacity: .35;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Titled with the parent's own name rather than a bare "Back", which is the
     iOS convention and the thing that keeps a pushed level from feeling like
     a level you have got lost in. */
  .rj-drill-back {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(32, 35, 35, .1);
    /* Blue label, not just a blue chevron: the back row and the four rows under
       it were the same ink at the same size, so the row that leaves the level
       read as the first item in it. Colour is what separates them. */
    color: var(--e-global-color-secondary, #0368B4) !important;
  }
  .rj-drill-back::before {
    content: '';
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: var(--e-global-color-secondary, #0368B4);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .rj-drill-panel .rj-drill-link:focus-visible,
  .rj-drill-back:focus-visible {
    outline: 2px solid var(--e-global-color-secondary, #0368B4);
    outline-offset: -3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .jkit-menu-container.rj-drill > .jkit-menu,
    .jkit-menu-container.rj-drill .rj-drill-panel {
      transition: none;
    }
  }
}

/* =====================================================================
   16. Button hover contrast on the blue

   These nine buttons fill with --e-global-color-secondary on hover and
   take their hover label from --e-global-color-primary. That paired fine
   while secondary was the old #6CC964 -- dark ink on a light green -- but
   the rebrand made secondary #0368B4, and #202323 on it measures 2.75:1,
   well under the 4.5:1 AA needs. White on the same blue is 5.76:1.

   The last five were found by hovering all 81 buttons on the site in a
   headless browser and measuring the settled colours -- settled being the
   point, since these fades run 350ms and a reading taken part-way through
   reports a passing mid-tone that never actually sits still on screen.
   Those five were the only remaining failures anywhere, and all five fail
   at exactly 2.75:1, so this one rule now covers every instance:

     22ae4c9b  home, "Learn More"
     d598aa1   academy, "Schedule a FREE Trial"
     39b22c5a  academy, "Schedule a FREE Trial"
     ad115a6   pricing, "Contact Us Now"
     5abda30   pricing, "Contact Us Now"

   Scoped to the nine rather than to .jkit-button-wrapper:hover generally,
   because the buttons that fill with a *light* colour on hover need the
   ink they already have -- a blanket rule would break those instead, and
   section 18 exists precisely to give those the opposite treatment.

   The arrow is drawn as an open stroked path, so the kit's fill closes it
   into a wedge; tying fill to none and the stroke to currentColor makes it
   follow the label through the inversion, the same treatment section 14
   gives the Functional Strength CTA.
   ===================================================================== */
.elementor-element-3dc3455  .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-325c8ee7 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-44f4060a .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-2cc6b341 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-22ae4c9b .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-d598aa1 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-39b22c5a .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-ad115a6 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-5abda30 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover {
  color: #fff !important;
}

.elementor-element-3dc3455  .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-325c8ee7 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-44f4060a .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-2cc6b341 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-22ae4c9b .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-d598aa1 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-39b22c5a .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-ad115a6 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-5abda30 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg {
  fill: none !important;
}

.elementor-element-3dc3455  .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-325c8ee7 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-44f4060a .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-2cc6b341 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-22ae4c9b .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-d598aa1 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-39b22c5a .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-ad115a6 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-5abda30 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path {
  stroke: currentColor !important;
  fill: none !important;
}

/* =====================================================================
   17. Drawer: no latched hover on touch

   A touch device has no hover, so a tap latches :hover on whatever was
   tapped and holds it until something else is tapped. In the drawer that
   showed up two ways, both of them during the moment between tapping a
   row and the next page arriving:

   - The back row is a <button>, and the theme ships a global
     `button:focus, button:hover { background-color:#c36; color:#fff }`.
     Tapping it turned the row magenta. That rule is wrong here at any
     width -- a mouse on a tablet hits it too -- so it is neutralised
     outright rather than only for touch.

   - Panel links take the theme's generic a:hover, which swaps label,
     chevron and rule to the accent blue. Fine with a mouse, wrong when a
     tap makes it stick.

   Hover styling is kept for pointers that actually hover, and taps get a
   real press state instead: a brief tint that tracks the finger and
   leaves nothing behind.
   ===================================================================== */
@media (max-width: 1024px) {

  /* The theme's #c36 button treatment, off. All four states are listed
     because the base rule and the hover rule both have to lose. */
  .rj-drill-back,
  .rj-drill-back:hover,
  .rj-drill-back:focus,
  .rj-drill-back:active {
    background-color: transparent !important;
    color: var(--e-global-color-secondary, #0368B4) !important;
    text-decoration: none !important;
    border-bottom-color: rgba(32, 35, 35, .1) !important;
  }

  /* The grey-blue flash the browser paints over a tapped link. The press
     state below replaces it, and unlike it, matches the rest of the site. */
  .jkit-menu-wrapper .jkit-menu a,
  .jkit-menu-wrapper .jkit-menu button,
  .rj-drill-panel .rj-drill-link,
  .rj-drill-back {
    -webkit-tap-highlight-color: transparent;
  }

  /* Press feedback, on every pointer type: it is the tap acknowledgement on
     a phone and a harmless click flash with a mouse. */
  .jkit-menu-container.rj-drill > .jkit-menu > li > a:active,
  .rj-drill-panel .rj-drill-link:active,
  .rj-drill-back:active {
    background-color: rgba(3, 104, 180, .07) !important;
  }
}

/* Only pointers that genuinely hover keep the hover styling. Everything
   here is a neutralisation of a theme rule, so it has to name the property
   the theme changes rather than simply not setting it. */
@media (max-width: 1024px) and (hover: none) {
  .rj-drill-panel .rj-drill-link:hover {
    color: var(--e-global-color-primary, #202323) !important;
    border-bottom-color: transparent !important;
    text-decoration: none !important;
  }
  .rj-drill-panel .rj-drill-link:hover::after {
    background-color: currentColor !important;
  }
  .jkit-menu-container.rj-drill > .jkit-menu > li > a:hover {
    color: var(--e-global-color-primary, #202323) !important;
    text-decoration: none !important;
  }
  /* Free Trial keeps its accent through the tap. */
  .jkit-menu-container.rj-drill > .jkit-menu > li.menu-item-1724 > a:hover {
    color: var(--e-global-color-secondary, #0368B4) !important;
  }
}

/* =====================================================================
   18. Two remaining button contrast failures

   Both fill with a mid-tone on hover and both had a light label on it,
   which is the worst of both worlds -- too light to read against the
   fill, too dark to read as white. Measured on the fills themselves:

     Kids, #1AA9D5 cyan    white 2.73:1   ink 5.79:1
     Private Lessons,
     #9195F6 purple        white 2.68:1   ink 5.91:1

   So the fix on both is the site's ink, not white -- white fails on
   these two the same way it succeeds on the darker #0368B4 in section 16.
   The fills are untouched; each page keeps its own accent.

   Each page repeats its CTA four times with a different element id per
   instance, so all eight are listed. Not scoped to the pages as a whole:
   other buttons on both pages fill with a dark colour on hover and need
   the white label they already have -- a page-wide rule would break those
   to fix these.
   ===================================================================== */
.elementor-element-35ddda4 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-6fbc22fc .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-9070a2d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-86cfd8d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-16d9762 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-e4b11ce .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-db43fcd .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover,
.elementor-element-abec99d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover {
  color: var(--e-global-color-primary, #202323) !important;
}

.elementor-element-35ddda4 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-6fbc22fc .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-9070a2d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-86cfd8d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-16d9762 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-e4b11ce .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-db43fcd .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg,
.elementor-element-abec99d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg {
  fill: none !important;
}

.elementor-element-35ddda4 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-6fbc22fc .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-9070a2d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-86cfd8d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-16d9762 .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-e4b11ce .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-db43fcd .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path,
.elementor-element-abec99d .jeg-elementor-kit.jkit-button .jkit-button-wrapper:hover svg path {
  stroke: currentColor !important;
  fill: none !important;
}

/* =====================================================================
   19. Fixed-width containers that overflow below desktop

   Elementor writes an explicit pixel width on these containers for the
   desktop layout and never overrides it further down, so below that width
   they push the document wider than the viewport and the whole page scrolls
   sideways. Measured before this block:

     Kids     435px over at 390,  342px at 768,  86px at 1024
     Pricing  116px over at 768
     Every page  19px over at 768 (the header CTA, handled below)

   max-width rather than width, so nothing that already fits is stretched.
   ===================================================================== */
@media (max-width: 1024px) {
  /* Named ids were whack-a-mole -- fixing four surfaced four more on the
     same page. The shared pattern is an Elementor container pinned as a
     flex item with a pixel basis written for desktop and never overridden
     below it, e.g. `flex: 0 0 690px` inside a 350px parent.

     flex-shrink rather than flex-basis: letting the item shrink is enough
     to bring it inside the viewport, and it leaves the desktop proportions
     of anything that already fits untouched, which forcing basis:auto
     would not. max-width carries the same specificity as the theme rule it
     has to beat, hence body + the doubled class. */
  body .elementor-element.e-con,
  body .e-con > .e-con-inner,
  body .elementor-element.elementor-widget {
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
  /* The header keeps its trial button from 768px up, where the drawer is
     still in use. At 768 exactly it is 19px too wide for the bar, which is
     what put a sideways scroll on every page of the site. Trimming its
     padding and label size buys back more than the 19px without dropping
     the only call to action the header has at that width.

     The same cap goes on every button, not just the header's: a fixed-width
     CTA in a narrower column is the same bug in a different place, and it
     was still costing the Kids page 14px at 768. */
  .jeg-elementor-kit.jkit-button .jkit-button-wrapper {
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  header .jeg-elementor-kit.jkit-button .jkit-button-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
  }
}

/* The back-to-top button is fixed to the right edge; its own offset pushed
   it past the viewport on Kids, which was one more contributor there. */
@media (max-width: 1024px) {
  #back-to-top,
  .back-to-top {
    right: 16px !important;
    max-width: calc(100vw - 32px);
  }
}

/* Grid tracks written in pixels for the desktop layout. The Kids page has
   `grid-template-columns: 500px 550px` -- 1070px of track inside a 688px
   container at 768px wide -- which put the second column's left edge at
   x=560 and dragged the whole document out to 1110px. That single grid was
   what made the page scroll sideways on tablet.

   auto-fit with a percentage floor rather than a flat single column: the
   two-up layout survives wherever there is room for it and folds to one
   only when there isn't, so tablet keeps the design and nothing overflows.
   Three grids on the site are multi-column below 1025px and all three want
   this behaviour. */
@media (max-width: 1024px) {
  body .elementor-element.e-con.e-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  }
}

/* The same fixed-width container problem exists between the tablet
   breakpoint and the desktop design width: on Kids a 763px container sits
   at x=618, so from about 1100px down to 1025px the page runs 201px wide.
   Only the width cap is extended up here -- the grid rule above stays at
   1024, because the two-column desktop layouts are correct at these widths
   and only need to stop overflowing. */
@media (min-width: 1025px) and (max-width: 1439px) {
  body .elementor-element.e-con,
  body .e-con > .e-con-inner {
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
}

/* A bare URL in the privacy policy -- instagram.com/rafajiujitsu.windsor --
   is one unbreakable word, so at 320px it ran 42px past the viewport and
   took the page with it. break-word rather than anywhere: it only breaks a
   word that would otherwise overflow, and unlike anywhere it does not feed
   back into min-content sizing, so no flex or grid track changes size
   because of it. */
body {
  overflow-wrap: break-word;
}

/* =====================================================================
   20. Schedule grid: no scrollbars of its own

   Section 19 used to give .rafa-sched-wrap `overflow-x: auto` at 1025 and
   up, so the grid would scroll inside its own box rather than push the
   page sideways between 1025 and roughly 1180 -- its base tracks, 180px
   plus six of at least 150px plus gaps, need about 1116px, and the
   wrapper there is narrower than that.

   That traded one bug for two. `overflow-x: auto` computes overflow-y to
   auto as well, and every cell carries a .rafa-sched-tip positioned 8px
   *below* it, so the box measured 100px more scrollHeight than
   clientHeight at every width and a vertical scrollbar sat inside the
   grid permanently -- 843 against 742 at 1520, 922 against 821 at 1100.
   The SAT tooltip overhangs the right edge the same way, so a horizontal
   bar came with it.

   A scroll container was the wrong tool. Letting the day columns shrink
   below 150px makes the grid fit unaided from 1025 up, so the wrapper
   goes back to overflowing visibly and neither bar is drawn. At 1025 the
   columns land near 130px, which is the width they already had at 1024
   under the page's own rule, so nothing changes shape across the break.

   Higher specificity than the page's own `.rafa-sched-grid`, because that
   rule is inline on the page and therefore later in source than this
   file; a media query adds no specificity of its own.
   ===================================================================== */
@media (min-width: 1025px) {
  .rafa-sched-wrap > .rafa-sched-grid {
    grid-template-columns: 180px repeat(6, minmax(0, 1fr));
  }
}

/* With nothing clipping it any more, the SAT tooltip is free to overhang
   the shell and take the page sideways with it -- centred on a 130px
   column it reaches 40px past the right edge at 1025, against 16px of
   shell padding. Anchoring the last column's card to the cell's right
   edge keeps all 210px of it inside. Same treatment the page already
   gives the phone list, arrow included.

   Grid children run seven per row -- a time label then six days -- so the
   SAT cell is every seventh. */
@media (min-width: 1025px) {
  .rafa-sched-grid > .rafa-sched-cell:nth-child(7n) .rafa-sched-tip {
    left: auto;
    right: 0;
    transform: translate(0, -4px);
  }

  .rafa-sched-grid > .rafa-sched-cell:nth-child(7n):hover .rafa-sched-tip,
  .rafa-sched-grid > .rafa-sched-cell:nth-child(7n):focus-visible .rafa-sched-tip {
    transform: translate(0, 0);
  }

  .rafa-sched-grid > .rafa-sched-cell:nth-child(7n) .rafa-sched-tip::after {
    left: auto;
    right: 16px;
    transform: none;
  }
}

/* Between 768 and 1024 the grid is genuinely wider than the viewport --
   it carries `min-width: 940px` there -- so the wrapper stays a scroll
   container and the tooltips still force the phantom vertical bar.

   The last row's cards flip above their cell instead of below it, which
   puts every tooltip inside the box, and overflow-y is then pinned hidden
   so no vertical bar can be drawn whatever else lands in there. The first
   row is untouched: its card opens downward, into the grid.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .rafa-sched-wrap {
    overflow-y: hidden;
  }

  .rafa-sched-grid > .rafa-sched-cell:nth-last-child(-n+6) .rafa-sched-tip {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
  }

  .rafa-sched-grid > .rafa-sched-cell:nth-last-child(-n+6):hover .rafa-sched-tip,
  .rafa-sched-grid > .rafa-sched-cell:nth-last-child(-n+6):focus-visible .rafa-sched-tip {
    transform: translate(-50%, 0);
  }

  .rafa-sched-grid > .rafa-sched-cell:nth-last-child(-n+6) .rafa-sched-tip::after {
    top: 100%;
    bottom: auto;
    border-bottom-color: transparent;
    border-top-color: #202323;
  }
}

/* =====================================================================
   21. Schedule: the closing card stops landing on the grid

   The dark "Ready to Join Our Academy?" card is pulled up over the
   section above it by a negative margin, and Elementor sets that margin
   per breakpoint: 200px down on desktop, -240px at 1024 and below, 0
   again at 767 and below.

   The pull is safe everywhere it was designed for, because those sections
   end in whitespace. The schedule section does not -- .rafa-sched-wrap
   ends flush with the container -- so between 768 and 1024, where the
   -240px applies and the grid has not yet switched to the phone list, the
   card was dragged 240px up and painted its heading and body text behind
   the last three rows of the grid. Measured at 820: the section ends at
   1439 and the card's contents started at 1199.

   Only the tablet band is corrected; the desktop and phone values are the
   design's own and both clear the grid. Matching the rule's specificity
   is enough to win -- this file loads after the bundle it came from.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-1006 .elementor-element.elementor-element-57b84ecd {
    --margin-top: 60px;
  }
}

/* =====================================================================
   22. Private Lessons: benefits strip and the two-coach rates

   Both sections come from the printed Private Lessons flyer, which the
   page had never carried: the four things a private buys you, and the
   fact that there are now two coaches at two different rates -- Rafa at
   $120 an hour for adults and kids at any level, Haley at $60 for women
   and young students.

   The page runs on the purple accent (#9195F6, see section 14), not the
   site blue, so every rule here reads --e-global-color-c419a6c. Ink on
   that purple measures 5.91:1 and white only 2.68:1 -- section 18 has the
   working -- so the filled CTA takes ink, not white, the same way the
   page's other buttons do.

   Portraits are the instructors page's own files at their native 4:5, so
   `cover` crops nothing at that ratio and no object-position is needed.
   ===================================================================== */
.rj-pl-benefits {
  padding: 64px 0 8px;
}

.rj-pl-benefits-lead {
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(32, 35, 35, .72);
  margin: 0 0 30px;
}

.rj-pl-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Dividers between the four, the way the flyer sets them -- drawn on the
   item rather than as separate elements so the last one simply has none. */
.rj-pl-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 0 18px;
  border-right: 1px solid rgba(32, 35, 35, .12);
}

.rj-pl-benefit:last-child {
  border-right: 0;
}

.rj-pl-benefit-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  fill: none;
  stroke: var(--e-global-color-c419a6c, #9195F6);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rj-pl-benefit-label {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #202323;
}

.rj-pl-coaches {
  padding: 90px 0 10px;
}

.rj-pl-coaches-title {
  font-family: "Urbanist", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #202323;
  margin: 0 0 18px;
}

.rj-pl-coaches-lede {
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(32, 35, 35, .78);
  margin: 0 0 44px;
  max-width: 62ch;
}

.rj-pl-coach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
}

.rj-pl-coach {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(32, 35, 35, .14);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 100%;
}

.rj-pl-coach-figure {
  margin: 0;
}

.rj-pl-coach-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(32, 35, 35, .06);
}

.rj-pl-coach-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 28px 30px;
}

.rj-pl-coach-eyebrow {
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(32, 35, 35, .72);
  margin: 0 0 4px;
}

.rj-pl-coach-name {
  font-family: "Urbanist", sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #202323;
  margin: 0 0 10px;
}

/* The flyer's inverted strap under each name. */
.rj-pl-coach-tag {
  align-self: flex-start;
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #202323;
  background: rgba(145, 149, 246, .28);
  border-radius: 4px;
  padding: 6px 11px;
  margin: 0 0 14px;
}

.rj-pl-coach-creds {
  font-family: "Figtree", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(32, 35, 35, .7);
  margin: 0 0 22px;
}

.rj-pl-rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(32, 35, 35, .12);
  border-bottom: 1px solid rgba(32, 35, 35, .12);
  padding: 20px 0;
  margin: 0 0 22px;
}

.rj-pl-rate + .rj-pl-rate {
  border-left: 1px solid rgba(32, 35, 35, .12);
  padding-left: 20px;
}

.rj-pl-rate-label {
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(32, 35, 35, .72);
  margin: 0 0 6px;
}

.rj-pl-rate-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rj-pl-rate-amount {
  font-family: "Urbanist", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #202323;
}

.rj-pl-rate-unit {
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(32, 35, 35, .72);
}

.rj-pl-rate-note {
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  /* Not the page accent itself: #9195F6 on the card is 2.56:1. This is
     that hue taken down until it clears AA at 13px -- 5.64:1. It was a
     `filter: brightness()` on the accent first, which rendered about
     right but is invisible to every contrast check, computed style
     included, so the number is written down instead. */
  color: #575BB4;
  margin: 6px 0 0;
}

.rj-pl-coach-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}

.rj-pl-coach-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: "Figtree", sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(32, 35, 35, .82);
}

.rj-pl-coach-list li svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  fill: none;
  stroke: var(--e-global-color-c419a6c, #9195F6);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rj-pl-coach-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #202323;
  color: #fff !important;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 22px;
  border-radius: 8px;
  border: 1px solid #202323;
  text-decoration: none !important;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* Ink on the purple, not white: 5.91:1 against 2.68:1 (section 18). */
.rj-pl-coach-cta:hover,
.rj-pl-coach-cta:focus-visible {
  background: var(--e-global-color-c419a6c, #9195F6);
  border-color: var(--e-global-color-c419a6c, #9195F6);
  color: #202323 !important;
}

.rj-pl-coach-cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
}

.rj-pl-coaches-note {
  font-family: "Figtree", sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(32, 35, 35, .7);
  margin: 30px 0 0;
}

.rj-pl-coaches-note a {
  color: #202323;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1024px) {
  .rj-pl-benefits { padding: 48px 0 4px; }
  .rj-pl-benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }

  /* Two per row now, so the divider belongs on the odd column only. */
  .rj-pl-benefit { border-right: 0; padding: 0 8px; }
  .rj-pl-benefit:nth-child(odd) { border-right: 1px solid rgba(32, 35, 35, .12); }

  .rj-pl-coaches { padding: 64px 0 6px; }
  .rj-pl-coaches-title { font-size: 32px; }
  .rj-pl-coaches-lede { font-size: 16.5px; margin-bottom: 32px; }
  .rj-pl-coach-grid { gap: 24px; }
  .rj-pl-coach-body { padding: 24px 22px 26px; }
  .rj-pl-coach-name { font-size: 32px; }
  .rj-pl-rate-amount { font-size: 29px; }
}

@media (max-width: 767px) {
  .rj-pl-coach-grid { grid-template-columns: 1fr; }
  .rj-pl-benefit-label { font-size: 14px; }
  .rj-pl-coach-cta { align-self: stretch; justify-content: center; }
}

/* =====================================================================
   23. One weight for every button

   Hovering nothing and simply reading the settled type on all 83 buttons
   turned up three groups where there should be one:

     700  Figtree 15px   72   every jkit button -- the site's own style
     500  Roboto  16px    6   the pricing tables
     400  Figtree 16px    5   .rj-btn and .rj-pl-coach-cta
     400  Urbanist 14px   1   the contact page's newsletter Submit

   The 400s are a cascade loss, not a decision. Both custom classes already
   ask for `font-family: Figtree; font-size: 15px; font-weight: 700`, but
   they style <a> elements and the kit ships

       .elementor-kit-627 a { font-family: ...; font-size: ...; font-weight: ... }

   at (0,1,1), which outranks a single class at (0,1,0). Padding and
   background got through because the kit sets neither; the three font
   properties did not. So the buttons rendered at the body's 400/16px while
   the rule that was supposed to shape them sat there looking correct.

   `body a.rj-btn` is (0,1,2) and beats it outright rather than relying on
   this file loading last. Same reason section 10 scopes two deep.
   ===================================================================== */
body a.rj-btn,
body a.rj-pl-coach-cta {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

/* The pricing tables take --e-global-typography-accent, which is Roboto
   500 -- a family and a weight that appear nowhere else on a button. The
   per-element Elementor rule that applies it is

       .elementor-1167 .elementor-element.elementor-element-<id> .elementor-price-table__button

   at (0,4,0), and a class count beats any number of type selectors, so
   three classes plus `body` would still lose. Four classes plus `body` is
   (0,4,1) and wins. Named by the button's own classes rather than by the
   six element ids, so a seventh plan inherits it.

   Size and padding come along with the weight: at Roboto 16px in a 15px
   Figtree set, matching only the weight would leave them looking like a
   different button that happens to be equally bold. */
body .elementor-price-table__footer .elementor-price-table__button.elementor-button.elementor-size-md {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

/* The contact page's newsletter Submit is an <input> carrying a style
   attribute, which sets family, size and colour but never a weight -- so
   it inherited 400. Weight only: the attribute wins on everything it does
   declare, and this is the one property it leaves open. */
body input[name="ma_submit"] {
  font-weight: 700;
}

/* =====================================================================
   24. Eased wheel scrolling

   The stylesheet half of the Lenis setup in site-enhancements.js. Every
   class here is put on <html> by Lenis itself, so none of it applies
   until eased scrolling has actually started -- a phone, or a visitor who
   asked for reduced motion, never gets any of it.

   Note which class each rule hangs off. `lenis` is persistent, set for as
   long as the instance is running. `lenis-smooth` is not: in 1.3 it is
   only present while a scroll animation is actually in flight, so it is
   the wrong hook for anything that needs to hold steady between scrolls.
   The upstream stylesheet still hangs its rules off it, which is why
   these do not match it line for line.

   The upstream `[data-lenis-prevent]` rule has no counterpart here
   either: nested scrollers are detected per gesture by the
   allowNestedScroll option rather than marked by hand, and the two boxes
   that scroll on their own -- the drawer list and its drill panels --
   already carry `overscroll-behavior: contain` from sections 5 and 15.

   The iframe rule from that stylesheet is deliberately left out. It sets
   `pointer-events: none` on every iframe so the wheel is never captured
   by one, and it would make the YouTube embeds on the home and schedule
   pages unclickable. Scrolling over the video falls back to native --
   a far smaller price than a video that cannot be played.
   ===================================================================== */

/* Lenis measures the document, so <html> and <body> have to be free to be
   as tall as their content rather than inheriting a viewport height. */
html.lenis,
html.lenis body {
  height: auto;
}

/* WordPress ships `html { scroll-behavior: smooth }`, and Lenis writes its
   animated position with `scrollTo({ behavior: "instant" })`, so the two do
   not actually collide today. This is here so they cannot start to: any
   native smooth scroll of the document while Lenis owns the scroll would
   have both animating the same number from different directions.

   Nothing is lost by turning it off. The two document-level smooth scrolls
   the site has are both routed back through Lenis in the JS -- anchors by
   its `anchors` option, the back-to-top button by hand -- and this targets
   <html>, so scrollers nested inside the page keep their own behaviour. */
html.lenis {
  scroll-behavior: auto !important;
}

/* Set for as long as Lenis is stopped, which here means while the drawer
   is open -- where the JS already pins <html> and <body> as well. */
.lenis.lenis-stopped {
  overflow: hidden;
}

/* =====================================================================
   25. "Starting at" on the two private-lesson plans

   Both private plans now have two rates behind them -- Rafa at $120 an
   hour, Haley at $60 -- and the pricing table has one figure per card.
   Rather than split each card in two, each leads with the lower number
   and says so.

   .elementor-price-table__price is a centred flex row with wrap, and the
   widget's own period line already takes its own row by carrying
   `width: 100%`. This does the same to land above the figure rather than
   beside it, which is also why it is the first child.

   No dark-card variant: each row of plans inverts its middle card, but
   the two cards this lands on are both the light kind. Measured on them
   at 7.13:1.
   ===================================================================== */
.rj-price-from {
  width: 100%;
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(32, 35, 35, .72);
  margin-bottom: 10px;
}