.elementor-kit-5{--e-global-color-primary:#F3F5FA;--e-global-color-secondary:#8B7BFF;--e-global-color-text:#AEB6C9;--e-global-color-accent:#6C5CE7;--e-global-color-fbcanvas:#0B0D14;--e-global-color-fbcanvas2:#0E111A;--e-global-color-fbsurf:#141824;--e-global-color-fbsurf2:#1B2030;--e-global-color-fbmuted:#7B849B;--e-global-color-fbcyan:#46D8F5;--e-global-color-fbgradmid:#A33BC9;--e-global-color-fbgradend:#D6004A;--e-global-color-fbdev:#E3A73C;--e-global-color-fblive:#4ADE80;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-letter-spacing:-1.2px;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-weight:600;background-color:#0B0D14;color:#AEB6C9;font-family:"Inter", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#8B7BFF;}.elementor-kit-5 a:hover{color:#A99CFF;}.elementor-kit-5 h1{font-family:"Inter", Sans-serif;font-size:62px;font-weight:800;line-height:1.08em;letter-spacing:-1.7px;}.elementor-kit-5 h2{font-family:"Inter", Sans-serif;font-size:42px;font-weight:800;line-height:1.1em;letter-spacing:-1.2px;}.elementor-kit-5 h3{font-family:"Inter", Sans-serif;font-size:21px;font-weight:800;line-height:1.25em;letter-spacing:-0.4px;}.elementor-kit-5 h4{font-family:"Inter", Sans-serif;font-size:16px;font-weight:700;line-height:1.3em;letter-spacing:-0.2px;}.elementor-kit-5 h5{font-family:"Inter", Sans-serif;font-size:14px;font-weight:700;line-height:1.35em;letter-spacing:0px;}.elementor-kit-5 h6{font-family:"Inter", Sans-serif;font-size:12px;font-weight:700;line-height:1.4em;letter-spacing:0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5 h1{font-size:51px;}.elementor-kit-5 h2{font-size:34px;}.elementor-kit-5 h3{font-size:17px;}.elementor-kit-5 h4{font-size:13px;}.elementor-kit-5 h5{font-size:11px;}.elementor-kit-5 h6{font-size:10px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5 h1{font-size:34px;}.elementor-kit-5 h2{font-size:28px;}.elementor-kit-5 h3{font-size:19px;}.elementor-kit-5 h4{font-size:16px;}.elementor-kit-5 h5{font-size:14px;}.elementor-kit-5 h6{font-size:12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --e-gv-1152979:#0B0D14; --e-gv-21c581b:Inter; --e-gv-e0b75ca:rgba(255, 255, 255, 0.085); --Canvas:#10131C; --Surface:#1C2130; --Border:rgba(255, 255, 255, 0.10); --Accent:#8B7BFF; --Cyan:#46D8F5; --e-gv-d613dd2:#123456; --e-gv-aec210c:#123456; --e-gv-c244b08:#123456; --e-gv-f61eaa0:#123456; --Canvas-Alt:#161A26; --Surface-Raised:#242A3B; --Border-Strong:rgba(255, 255, 255, 0.19); --Text-Heading:#F3F5FA; --Text-Body:#B7BECF; --Text-Muted:#8A93A8; --Accent-Deep:#6C5CE7; --Accent-Soft:rgba(139, 123, 255, 0.13); --Cyan-Soft:rgba(70, 216, 245, 0.12); --Gradient-Mid:#A33BC9; --Gradient-End:#D6004A; --Status-Dev:#E3A73C; --Status-Live:#4ADE80; --Font-Sans:Inter; --Font-Mono:JetBrains Mono; }
/* Start custom CSS *//* ---------------------------------------------------------------
   FB Software Solutions — global overrides
   Targets the same class names shown in the Class Manager and uses the
   same variables, so it stays in step with the design system.
   Only put things here that the V4 style panel cannot express.
   --------------------------------------------------------------- */

/* 1. Elementor gives every container width:100% via .e-con.
      Pills and chips must hug their text instead. */
.elementor .fb-status,
.elementor .fb-ph {
  width: fit-content;
}

/* 2. Elementor rewrites fill="none" to fill="currentColor" when an SVG is
      uploaded, which turns line icons into solid blobs. Restore stroke-only. */
.elementor .fb-icon svg,
.elementor .fb-check-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
}
.elementor .fb-icon svg *,
.elementor .fb-check-icon svg * {
  fill: none;
  stroke: currentColor;
}

/* 3. Section eyebrows carry a short leading rule. */
.elementor .fb-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-inline-end: 9px;
  vertical-align: middle;
  background: currentColor;
  opacity: .55;
}


/* 4. The last row in a tier list has no separator. :last-child cannot be
      expressed in the V4 style panel. */
.elementor .fb-tier-item:last-child {
  border-block-end-width: 0;
}

/* 5. Panel chrome dots must stay circular — .e-con stretches them. */
.elementor .fb-dot-grey {
  width: 9px !important;
  min-width: 9px;
  flex: 0 0 9px;
}


/* ===========================================================================
   HEADER — sticky, blurred, with an active-page indicator.
   The nav is Elementor's classic nav-menu widget so the menu stays editable
   under Appearance, Menus. Everything here restyles it rather than replacing it.
   =========================================================================== */

/* 6. Stick to the top. Transparent over the hero, translucent once scrolled. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
  border-block-end: 1px solid transparent;
  transition: background-color .22s ease, border-color .22s ease, backdrop-filter .22s ease;
}
body.fb-scrolled .elementor-location-header {
  background: rgba(11, 13, 20, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end-color: var(--Border, rgba(255,255,255,.085));
}
body.fb-scrolled .elementor-location-header .e-con {
  padding-block: 10px;
}
/* Keep the admin bar from covering it while logged in. */
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .elementor-location-header { top: 46px; } }

/* 7. Nav items: quieter default, clear hover, gradient underline when active. */
.elementor-nav-menu .elementor-item {
  position: relative;
  padding: 9px 13px;
  border-radius: 8px;
  font-weight: 500;
  transition: color .16s ease, background-color .16s ease;
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus-visible {
  background: rgba(255, 255, 255, .045);
  color: var(--Text-Heading, #F3F5FA);
}
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--Text-Heading, #F3F5FA);
  background: transparent;
}
.elementor-nav-menu .elementor-item.elementor-item-active::after {
  content: "";
  position: absolute;
  inset-inline: 13px;
  inset-block-end: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(120deg, var(--Accent-Deep,#6C5CE7), var(--Gradient-End,#D6004A));
}

/* 8. Mobile: turn the dropdown into a full-height drawer with real touch targets. */
@media (max-width: 1024px) {
  .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    height: calc(100dvh - 100%);
    background: var(--Canvas, #0B0D14);
    overflow-y: auto;
    border: 0;
  }
  .elementor-nav-menu--dropdown .elementor-item {
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 650;
    border-radius: 0;
    border-block-end: 1px solid var(--Border, rgba(255,255,255,.085));
    color: var(--Text-Heading, #F3F5FA);
  }
  .elementor-nav-menu--dropdown .elementor-sub-item {
    font-size: 15.5px;
    font-weight: 500;
    padding-inline-start: 36px;
    color: var(--Text-Body, #AEB6C9);
  }
  .elementor-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--Border-Strong, rgba(255,255,255,.16));
    color: var(--Text-Heading, #F3F5FA);
  }
}


/* 9. The header container carries its own solid fill, which was painting over
      the translucent blur above. The wrapper owns the background instead. */
.elementor-location-header .e-con {
  background-color: transparent;
}


/* 10. The header's HTML widget holds only the scroll script. Scripts still run
       when hidden, so take it out of the layout — it was leaving a gap on mobile. */
.elementor-location-header .elementor-widget-html {
  display: none;
}

/* 11. Mobile and tablet bar: logo left, controls right, comfortable targets. */
@media (max-width: 1024px) {
  .elementor-location-header .e-con {
    padding-inline: 18px;
    gap: 12px;
  }
  /* push the toggle and CTA to the right of the logo */
  .elementor-location-header .elementor-widget-nav-menu { margin-inline-start: auto; }
  /* the site logo is tiny at this size */
  .elementor-location-header .elementor-widget-theme-site-logo img { max-width: 148px; }
  /* a full-width purple slab is too heavy on a phone */
  .elementor-location-header .elementor-widget-button .elementor-button {
    padding: 9px 14px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .elementor-location-header .elementor-widget-theme-site-logo img { max-width: 124px; }
  .elementor-location-header .elementor-widget-button .elementor-button {
    padding: 8px 12px;
    font-size: 12.5px;
  }
}

/* 12. Drawer polish: close the gap under the bar and stop the page scrolling
       behind the open menu. */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background: rgba(139, 123, 255, .10);
  }
  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::after { display: none; }
}




/* 13. Membership lives in the drawer on small screens, and stays a button on
       desktop. The menu item carries the class fb-menu-cta, set in Appearance,
       Menus, so it can be hidden where the real button already exists. */
@media (min-width: 1025px) {
  /* Elementor sets display:flex on menu items, so this needs to outrank it. */
  .elementor-nav-menu li.fb-menu-cta { display: none !important; }
}
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown .fb-menu-cta { margin: 14px 16px 22px; }
  .elementor-nav-menu--dropdown .fb-menu-cta .elementor-item {
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(120deg, var(--Accent-Deep,#6C5CE7), #A33BC9 55%, var(--Gradient-End,#D6004A));
    color: #fff;
    font-size: 16px;
    padding: 15px 18px;
  }
  .elementor-nav-menu--dropdown .fb-menu-cta .elementor-item:hover { color: #fff; opacity: .93; }
}

/* 14. The compact bar carries its own logo sizing. */
@media (max-width: 1024px) {
  .fb-hdr-mobile .elementor-widget-theme-site-logo img { max-width: 168px; }
  .fb-hdr-mobile .elementor-menu-toggle {
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--Border-Strong, rgba(255,255,255,.16));
    display: flex; align-items: center; justify-content: center;
  }
}
@media (max-width: 480px) {
  .fb-hdr-mobile .elementor-widget-theme-site-logo img { max-width: 140px; }
}


/* 14. Two bars, one per viewport. fb-hdr-desktop and fb-hdr-mobile handle the
       swap; these rules tidy what sits inside each.
       Membership is a real menu item, so it can be a button on desktop and a
       full-width CTA at the end of the drawer on mobile. */

/* Desktop: the Membership button covers it, so hide the duplicate nav link. */
.fb-hdr-desktop .elementor-nav-menu--main .elementor-item[href*="/membership"] {
  display: none;
}
.fb-hdr-desktop .elementor-widget-nav-menu { margin-inline-start: auto; }
.fb-hdr-desktop .elementor-widget-button { margin-inline-start: 4px; }

/* Mobile bar: logo left, toggle hard right. Nothing else competes for space. */
.fb-hdr-mobile .elementor-widget-nav-menu { margin-inline-start: auto; }
.fb-hdr-mobile .elementor-widget-theme-site-logo img { max-width: 168px; }



/* 15. Centre the header bars. max-width is set on the classes; auto side
       margins cannot be expressed in the V4 dimensions control. */
.elementor-location-header .fb-hdr-desktop,
.elementor-location-header .fb-hdr-mobile {
  margin-inline: auto;
}


/* 16. Header CTA. The widget's own styles give it a flat purple fill and the
       mono face; the design calls for the brand gradient in Inter, matching
       every other primary button on the site. */
.elementor-location-header .elementor-widget-button .elementor-button {
  background: linear-gradient(120deg,
    var(--Accent-Deep, #6C5CE7),
    var(--Gradient-Mid, #A33BC9) 55%,
    var(--Gradient-End, #D6004A));
  background-color: transparent;
  font-family: var(--Font-Sans, Inter), sans-serif;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  padding: 11px 20px;
  border-radius: 9px;
  border: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.elementor-location-header .elementor-widget-button .elementor-button:hover,
.elementor-location-header .elementor-widget-button .elementor-button:focus-visible {
  color: #fff;
  opacity: .92;
}
.elementor-location-header .elementor-widget-button .elementor-button-text {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}


/* 17. Drawer footer. Membership and Sign in are pinned to the bottom of the
       open drawer rather than scrolling with the links, so they stay under the
       thumb. Hidden entirely when the drawer is closed. */
@media (max-width: 1024px) {
  body.fb-drawer-open .fb-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1000;
    padding: 16px;
    background: var(--Canvas, #0B0D14);
    border-block-start: 1px solid var(--Border, rgba(255,255,255,.085));
  }
  /* leave room so the last link is never hidden behind the footer */
  body.fb-drawer-open .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    padding-block-end: 150px;
  }
  /* stop the page behind the drawer from scrolling */
  body.fb-drawer-open { overflow: hidden; }
}


/* 18. Shrink on scroll. The outer container keeps Elementor's default 10px,
       so the two bars carry the height and the transition. */
.elementor-location-header .fb-hdr-desktop,
.elementor-location-header .fb-hdr-mobile {
  transition: padding-block .22s ease;
}
body.fb-scrolled .elementor-location-header .fb-hdr-desktop { padding-block: 9px; }
body.fb-scrolled .elementor-location-header .fb-hdr-mobile { padding-block: 7px; }
.elementor-location-header .elementor-widget-theme-site-logo img {
  transition: max-width .22s ease;
}
body.fb-scrolled .elementor-location-header .elementor-widget-theme-site-logo img {
  max-width: 132px;
}


/* 19. Scrollbars. The browser default is a bright grey slab that reads as a
       mistake on a dark page, and it appears in the player panel, the code
       blocks and the page itself. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 123, 255, .55) transparent;
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(139, 123, 255, .45);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 123, 255, .75);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}


/* 20. Status pills must never wrap. The V4 class schema silently drops
       white-space and flex-shrink, so they have to be set here. */
.elementor .fb-status {
  white-space: nowrap;
  flex-shrink: 0;
}
.elementor .fb-status-name {
  flex: 1 1 auto;
  min-width: 0;
}


/* 21. Contact Form 7 ships unstyled, which on a dark page means white slabs.
       Matched to the account and login forms so every input on the site
       behaves the same way. */
.wpcf7 p { margin: 0 0 16px; }
.wpcf7 label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--Text-Heading, #F3F5FA);
}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--Border-Strong, rgba(255,255,255,.19));
  background: var(--Canvas, #10131C);
  color: var(--Text-Heading, #F3F5FA);
  font: 15px/1.5 var(--Font-Sans, Inter), sans-serif;
}
.wpcf7 textarea { resize: vertical; min-height: 150px; }
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: 0;
  border-color: var(--Accent, #8B7BFF);
  box-shadow: 0 0 0 3px rgba(139,123,255,.18);
}
.wpcf7 ::placeholder { color: var(--Text-Muted, #8A93A8); }

/* the consent tick reads as a sentence, not a form field */
.wpcf7 .wpcf7-acceptance label,
.wpcf7 .wpcf7-checkbox label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--Text-Body, #B7BECF);
  background: var(--Canvas-Alt, #161A26);
  border: 1px solid var(--Border, rgba(255,255,255,.10));
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.wpcf7 input[type=checkbox] {
  inline-size: 17px;
  block-size: 17px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--Accent, #8B7BFF);
  cursor: pointer;
}
.wpcf7 .wpcf7-list-item { margin: 0; }

.wpcf7 input[type=submit] {
  background: linear-gradient(120deg, var(--Accent-Deep, #6C5CE7),
    var(--Gradient-Mid, #A33BC9) 55%, var(--Gradient-End, #D6004A));
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 13px 24px;
  font: 650 14.5px var(--Font-Sans, Inter), sans-serif;
  cursor: pointer;
  transition: opacity .16s ease;
}
.wpcf7 input[type=submit]:hover { opacity: .93; }

/* messages */
.wpcf7 .wpcf7-not-valid-tip { color: #F87171; font-size: 12.5px; margin-top: 5px; }
.wpcf7 .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  border-width: 1px;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.10);
  color: var(--Status-Live, #4ADE80);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: rgba(248,113,113,.4);
  background: rgba(248,113,113,.10);
  color: #F87171;
}


/* 22. Homepage hero — aurora. Two blurred colour fields drifting behind the
       text. Pure CSS: nothing to load, nothing to break, and it still shows
       with JavaScript disabled. Applied here rather than in the editor, so
       page 143 is never re-saved. */
body.home .elementor .fb-section:first-of-type {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.home .elementor .fb-section:first-of-type::before,
body.home .elementor .fb-section:first-of-type::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
body.home .elementor .fb-section:first-of-type::before {
  inline-size: 620px;
  block-size: 520px;
  inset-block-start: -210px;
  inset-inline-start: 6%;
  background: radial-gradient(closest-side, rgba(108, 92, 231, .34), transparent 70%);
  animation: fb-drift-a 22s ease-in-out infinite alternate;
}
body.home .elementor .fb-section:first-of-type::after {
  inline-size: 520px;
  block-size: 460px;
  inset-block-start: -130px;
  inset-inline-end: 4%;
  background: radial-gradient(closest-side, rgba(214, 0, 74, .20), transparent 70%);
  animation: fb-drift-b 28s ease-in-out infinite alternate;
}
@keyframes fb-drift-a { to { transform: translate(120px, 60px) scale(1.15); } }
@keyframes fb-drift-b { to { transform: translate(-90px, 90px) scale(1.10); } }

/* Smaller and still on a phone — the drift is decoration, not information. */
@media (max-width: 900px) {
  body.home .elementor .fb-section:first-of-type::before,
  body.home .elementor .fb-section:first-of-type::after {
    animation: none;
    filter: blur(54px);
  }
  body.home .elementor .fb-section:first-of-type::before {
    inline-size: 380px; block-size: 320px; inset-block-start: -150px;
  }
  body.home .elementor .fb-section:first-of-type::after {
    inline-size: 320px; block-size: 280px; inset-block-start: -100px;
  }
}

/* Anyone who asked their system for less motion gets the colour, not the drift. */
@media (prefers-reduced-motion: reduce) {
  body.home .elementor .fb-section:first-of-type::before,
  body.home .elementor .fb-section:first-of-type::after {
    animation: none;
  }
}


/* 23. The Projects dropdown. Each child carries a description and a status
       chip — the chip is the point: somebody knows Serra is unfinished before
       they click it. Markup comes from the fb-mi classes set in Appearance → Menus. */
@media (min-width: 1025px) {
  .fb-hdr-desktop .elementor-nav-menu--main li.fb-has-rich { position: relative; }

  .fb-hdr-desktop .elementor-nav-menu--main li.fb-has-rich ul.sub-menu {
    inline-size: 460px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid var(--Border-Strong, rgba(255,255,255,.19));
    background: var(--Canvas-Alt, #161A26);
    box-shadow: 0 26px 60px rgba(0,0,0,.55);
    overflow: hidden;
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  /* the bridge: lets the pointer cross the gap without the menu closing */
  .fb-hdr-desktop .elementor-nav-menu--main li.fb-has-rich > ul.sub-menu::before {
    content: "";
    position: absolute;
    inset-block-start: -14px;
    inset-inline: 0;
    block-size: 14px;
  }

  .fb-hdr-desktop li.fb-has-rich ul.sub-menu a.elementor-sub-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 15px 18px;
    border-block-end: 1px solid var(--Border, rgba(255,255,255,.10));
    white-space: normal;
  }
  .fb-hdr-desktop li.fb-has-rich ul.sub-menu li:last-child a.elementor-sub-item {
    border-block-end: 0;
  }
  .fb-hdr-desktop li.fb-has-rich ul.sub-menu a.elementor-sub-item:hover {
    background: rgba(139, 123, 255, .09);
  }

  .fb-mi-b { display: block; min-inline-size: 0; }
  .fb-mi-t {
    display: block;
    color: var(--Text-Heading, #F3F5FA);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
  }
  .fb-mi-d {
    display: block;
    margin-block-start: 3px;
    color: var(--Text-Muted, #8A93A8);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 400;
  }
  .fb-mi-chip {
    align-self: center;
    flex: none;
    white-space: nowrap;
    font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 9.5px;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
  }
  .fb-mi-live-chip  { color: var(--Status-Live, #4ADE80); border: 1px solid rgba(74,222,128,.34); }
  .fb-mi-dev-chip   { color: var(--Status-Dev, #E3A73C);  border: 1px solid rgba(227,167,60,.36); }
  .fb-mi-alpha-chip { color: var(--Cyan, #46D8F5);        border: 1px solid rgba(70,216,245,.32); }

  /* the tail row reads as a footer, not another project */
  .fb-hdr-desktop li.fb-has-rich ul.sub-menu li.fb-mi-all a.elementor-sub-item {
    background: var(--Surface, #1C2130);
    font-weight: 650;
    font-size: 13.5px;
    color: var(--Text-Heading, #F3F5FA);
  }
  .fb-hdr-desktop li.fb-has-rich ul.sub-menu li.fb-mi-all a.elementor-sub-item:hover {
    background: rgba(139, 123, 255, .12);
  }

  /* open on keyboard focus, not only on hover */
  .fb-hdr-desktop li.fb-has-rich:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}


/* 24. Two corrections to the dropdown.
       Elementor positions the panel from the left, so inset-inline-end alone
       left it drifting toward the logo. And the menu's own typography is mono,
       which every child inherited — right for a nav label, wrong for a sentence. */
@media (min-width: 1025px) {
  .fb-hdr-desktop .elementor-nav-menu--main li.fb-has-rich > ul.sub-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
    inset-block-start: calc(100% + 14px);
  }

  .fb-mi-t,
  .fb-mi-d,
  .fb-hdr-desktop li.fb-has-rich ul.sub-menu li.fb-mi-all a.elementor-sub-item {
    font-family: var(--Font-Sans, Inter), -apple-system, sans-serif;
    text-transform: none;
  }
  .fb-mi-t { font-size: 14.5px; letter-spacing: -.012em; }
  .fb-mi-d { font-size: 12.5px; letter-spacing: 0; }

  /* the chip stays mono — that is the one place it belongs */
  .fb-mi-chip { font-family: var(--Font-Mono, ui-monospace, Menlo, Consolas, monospace); }
}


/* 25. Elementor opens submenus with SmartMenus, which toggles display rather
       than opacity — so the earlier focus rule did nothing, and if the script
       does not fire the panel never appears at all. CSS hover and focus now
       open it on their own, with the script as a bonus rather than a
       dependency. */
@media (min-width: 1025px) {
  .fb-hdr-desktop li.fb-has-rich > ul.sub-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .fb-hdr-desktop li.fb-has-rich:hover > ul.sub-menu,
  .fb-hdr-desktop li.fb-has-rich:focus-within > ul.sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* The bridge belongs on the parent — the panel clips its own overflow. */
  .fb-hdr-desktop li.fb-has-rich {
    padding-block-end: 14px;
    margin-block-end: -14px;
  }
}


/* 26. Legal pages are long-form reading, not landing pages. The display
       headings are far too large for a document, and the paragraphs need room
       between them. Scoped by page id so nothing else is affected. */
body.page-id-678 .fb-wrap,
body.page-id-681 .fb-wrap,
body.page-id-682 .fb-wrap,
body.page-id-683 .fb-wrap {
  max-width: 820px;
}
body.page-id-678 .fb-section h2,
body.page-id-681 .fb-section h2,
body.page-id-682 .fb-section h2,
body.page-id-683 .fb-section h2 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-block: 42px 12px;
}
body.page-id-678 .fb-section h3,
body.page-id-681 .fb-section h3,
body.page-id-682 .fb-section h3,
body.page-id-683 .fb-section h3 {
  font-size: 1.03rem;
  line-height: 1.3;
  margin-block: 26px 6px;
  color: var(--Text-Heading, #F3F5FA);
}
body.page-id-678 .fb-lede,
body.page-id-681 .fb-lede,
body.page-id-682 .fb-lede,
body.page-id-683 .fb-lede {
  font-size: 15.5px;
  line-height: 1.72;
  margin-block-end: 14px;
  max-width: 74ch;
}
/* the first heading in a section should not push away from the section top */
body.page-id-678 .fb-section h2:first-child,
body.page-id-681 .fb-section h2:first-child,
body.page-id-682 .fb-section h2:first-child,
body.page-id-683 .fb-section h2:first-child {
  margin-block-start: 0;
}
body.page-id-678 .fb-quote,
body.page-id-681 .fb-quote,
body.page-id-682 .fb-quote,
body.page-id-683 .fb-quote {
  font-size: 15.5px;
  line-height: 1.7;
  margin-block: 22px;
}
/* the hero on a legal page can be quieter too */
body.page-id-678 h1,
body.page-id-681 h1,
body.page-id-682 h1,
body.page-id-683 h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
}/* End custom CSS */