/*  CRITICAL: HubSpot sets root font-size to 10px, breaking rem units  */
:root {
  font-size: 16px !important;
}

/* Counteract :root 16px on HubSpot nav elements that used 10px root */
.site-header .hs-menu-wrapper a,
.site-header .hs-menu-wrapper li,
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li,
.hs-menu-wrapper .hs-menu-children-wrapper a,
.hs-menu-wrapper .hs-menu-children-wrapper li {
  font-size: 15px !important;
}

/* psmj-scope.css
   Scoped overrides to isolate React app from HubSpot global CSS.
   2026-05-07 */

/*  HubSpot wrapper width strip  */
/* Strip width constraints on HubSpot content wrappers */
.body-container-wrapper,
.page-center,
.content-wrapper,
.hs-page-width-normal,
.hs_cos_wrapper_widget,
.hs_cos_wrapper_type_custom_widget {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  overflow: visible !important;
}
/* HubSpot page-level wrappers only - NOT site-header internals */
.body-container-wrapper > .row-fluid,
.body-container-wrapper .row-fluid-wrapper > .row-fluid,
.widget-span.hs_cos_wrapper_type_custom_widget {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  overflow: visible !important;
}

/*  Root container  */
#root {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip;
  position: relative;
}

/*  Box model  */
#root *, #root *::before, #root *::after {
  box-sizing: border-box;
}

/*  Typography resets  */
#root h1, #root h2, #root h3,
#root h4, #root h5, #root h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
}

#root p { margin: 0; padding: 0; }

/*  Links  */
#root a {
  color: inherit;
  text-decoration: inherit;
  background-color: transparent;
}

/*  Button base reset (no background override  let app CSS handle it)  */
#root button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  text-transform: none;
}

/*  Images  */
#root img, #root svg {
  display: block;
  max-width: 100%;
}

/*  Lists  */
#root ul, #root ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*  Brand color re-assertions  
   These are inside Tailwind @layer utilities so they lose to
   HubSpot's unlayered CSS. Re-assert them here as unlayered
   #root-scoped rules so they win on specificity.             */

/* Background colors */
#root .bg-brand-red  { background-color: var(--brand-red)  !important; }
#root .bg-brand-navy { background-color: var(--brand-navy) !important; }
#root .bg-brand-blue { background-color: var(--brand-blue) !important; }

#root .bg-background { background-color: var(--background) !important; }
#root .bg-card       { background-color: var(--card)       !important; }
#root .bg-primary    { background-color: var(--primary)    !important; }
#root .bg-secondary  { background-color: var(--secondary)  !important; }
#root .bg-muted      { background-color: var(--muted)      !important; }
#root .bg-accent     { background-color: var(--accent)     !important; }
#root .bg-destructive { background-color: var(--destructive) !important; }

/* Text colors */
#root .text-brand-red              { color: var(--brand-red)              !important; }
#root .text-brand-navy             { color: var(--brand-navy)             !important; }
#root .text-brand-blue             { color: var(--brand-blue)             !important; }
#root .text-brand-navy-foreground  { color: var(--brand-navy-foreground)  !important; }
#root .text-foreground             { color: var(--foreground)             !important; }
#root .text-muted-foreground       { color: var(--muted-foreground)       !important; }
#root .text-primary-foreground     { color: var(--primary-foreground)     !important; }
#root .text-secondary-foreground   { color: var(--secondary-foreground)   !important; }
#root .text-card-foreground        { color: var(--card-foreground)        !important; }
#root .text-white                  { color: #ffffff                       !important; }

/* Border colors */
#root .border-brand-navy     { border-color: var(--brand-navy) !important; }
#root .border-brand-red      { border-color: var(--brand-red)  !important; }
#root .border-border         { border-color: var(--border)     !important; }

/* Opacity variants for brand colors */
#root .bg-brand-red\/10  { background-color: color-mix(in oklab, var(--brand-red)  10%, transparent) !important; }
#root .bg-brand-navy\/10 { background-color: color-mix(in oklab, var(--brand-navy) 10%, transparent) !important; }
#root .bg-brand-blue\/10 { background-color: color-mix(in oklab, var(--brand-blue) 10%, transparent) !important; }
#root .text-brand-navy-foreground\/80 { color: color-mix(in oklab, var(--brand-navy-foreground) 80%, transparent) !important; }
#root .text-brand-navy\/10 { color: color-mix(in oklab, var(--brand-navy) 10%, transparent) !important; }

/*  Fixed/sticky elements must escape overflow:hidden wrappers  */
#root [style*="position: fixed"],
#root [style*="position:fixed"] {
  position: fixed !important;
}

/*  Critical: HubSpot is forcing tiny font-size & dark color on <a>  */

/* HubSpot sets a base font-size that scales down everything.
   Re-assert correct base font-size on #root */
#root {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Force correct text color on ALL links inside #root */
#root a {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Force foreground colors on brand-colored buttons/links */
#root a.bg-brand-red,
#root button.bg-brand-red {
  color: var(--brand-red-foreground) !important;
  font-size: 16px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  line-height: 1.5 !important;
}

#root a.bg-brand-navy,
#root button.bg-brand-navy {
  color: var(--brand-navy-foreground) !important;
  font-size: 16px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  line-height: 1.5 !important;
}

/* text-brand-red-foreground & text-white explicit override */
#root .text-brand-red-foreground { color: var(--brand-red-foreground) !important; }
#root .text-white { color: #ffffff !important; }

/* Tailwind spacing: HubSpot is halving --spacing. Force correct value */
#root {
  --spacing: 0.25rem !important;
}

/* Padding utility overrides for common button sizes */
#root .px-4  { padding-inline: 16px !important; }
#root .px-6  { padding-inline: 24px !important; }
#root .px-8  { padding-inline: 32px !important; }
#root .px-10 { padding-inline: 40px !important; }
#root .py-2  { padding-block: 8px !important; }
#root .py-3  { padding-block: 12px !important; }
#root .py-4  { padding-block: 16px !important; }

/* Border radius */
#root .rounded-md  { border-radius: 6px !important; }
#root .rounded-lg  { border-radius: 8px !important; }
#root .rounded-xl  { border-radius: 12px !important; }
#root .rounded-2xl { border-radius: 16px !important; }
#root .rounded-full { border-radius: 9999px !important; }

/* Font sizes */
#root .text-sm   { font-size: 14px !important; line-height: 20px !important; }
#root .text-base { font-size: 16px !important;     line-height: 24px !important; }
#root .text-lg   { font-size: 18px !important; line-height: 28px !important; }
#root .text-xl   { font-size: 20px !important;  line-height: 28px !important; }
#root .text-2xl  { font-size: 24px !important;   line-height: 32px !important; }
#root .text-3xl  { font-size: 30px !important; line-height: 36px !important; }
#root .text-4xl  { font-size: 36px !important;  line-height: 40px !important; }
#root .text-5xl  { font-size: 48px !important;     line-height: 1 !important; }

/*  Sticky bar: force text div visible at all viewport widths  */
#root .hidden.sm\:block {
  display: block !important;
}

/*  Sticky bar: ensure transform transition works correctly  */
#root .translate-y-full {
  transform: translateY(100%) !important;
}
#root .translate-y-0 {
  transform: translateY(0) !important;
}

/*  Sticky bar: ensure it renders above HubSpot elements  */
#root .fixed.bottom-0 {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/*  Flex layout fixes for sticky bar inner container  */
#root .flex {
  display: flex !important;
}
#root .items-center {
  align-items: center !important;
}
#root .justify-between {
  justify-content: space-between !important;
}

/*  React app header: force visibility above HubSpot header  */
#root header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9998 !important;
  width: 100% !important;
  display: block !important;
  height: auto !important;
  min-height: 64px !important;
}

/*  Responsive display helpers  */
#root .hidden { display: none !important; }
#root .block  { display: block !important; }
#root .inline-flex { display: inline-flex !important; }

/* sm: breakpoint overrides (min-width: 640px) */
@media (min-width: 640px) {
  #root .sm\:block  { display: block !important; }
  #root .sm\:hidden { display: none !important; }
  #root .sm\:flex   { display: flex !important; }
  #root .sm\:inline-flex { display: inline-flex !important; }
}

/*  Sticky bar inner container: fix max-width and font sizes  */
#root .fixed.bottom-0 .mx-auto {
  max-width: 1280px !important;
  width: 100% !important;
  padding-inline: 16px !important;
}

@media (min-width: 640px) {
  #root .fixed.bottom-0 .mx-auto { padding-inline: 24px !important; }
}
@media (min-width: 1024px) {
  #root .fixed.bottom-0 .mx-auto { padding-inline: 32px !important; }
}

#root .fixed.bottom-0 p {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}

#root .fixed.bottom-0 .text-sm {
  font-size: 14px !important;
  line-height: 20px !important;
}

#root .fixed.bottom-0 .text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

/*  React header inner container width fix  */
#root header .mx-auto {
  max-width: 1280px !important;
  width: 100% !important;
}

/*  General mx-auto max-width containers  */
#root .max-w-7xl {
  max-width: 1280px !important;
}
#root .max-w-3xl {
  max-width: 768px !important;
}
#root .max-w-2xl {
  max-width: 672px !important;
}
#root .max-w-lg {
  max-width: 512px !important;
}

/*  HubSpot .hidden class sets visibility:hidden globally 
   Target specifically elements using hidden as responsive prefix
   e.g. "hidden sm:block" or "hidden md:flex"                   */

/* Elements that are hidden by default but shown at breakpoints */
#root [class*="hidden"][class*="sm:block"],
#root [class*="hidden"][class*="md:block"],
#root [class*="hidden"][class*="lg:block"],
#root [class*="hidden"][class*="sm:flex"],
#root [class*="hidden"][class*="md:flex"],
#root [class*="hidden"][class*="lg:flex"],
#root [class*="hidden"][class*="sm:inline-flex"],
#root [class*="hidden"][class*="md:inline-flex"] {
  visibility: visible !important;
}

/* At sm+ breakpoints, these should be visible */
@media (min-width: 640px) {
  #root [class*="hidden"][class*="sm:block"] {
    display: block !important;
    visibility: visible !important;
  }
  #root [class*="hidden"][class*="sm:flex"] {
    display: flex !important;
    visibility: visible !important;
  }
  #root [class*="hidden"][class*="sm:inline-flex"] {
    display: inline-flex !important;
    visibility: visible !important;
  }
}

@media (min-width: 768px) {
  #root [class*="hidden"][class*="md:flex"] {
    display: flex !important;
    visibility: visible !important;
  }
  #root [class*="hidden"][class*="md:block"] {
    display: block !important;
    visibility: visible !important;
  }
}

@media (min-width: 1024px) {
  #root [class*="hidden"][class*="lg:flex"] {
    display: flex !important;
    visibility: visible !important;
  }
  #root [class*="hidden"][class*="lg:block"] {
    display: block !important;
    visibility: visible !important;
  }
}

/* 
   ROUND 4 FIXES  2026-05-07
    */

/*  1. Font: force Inter over HubSpot's Lato  */
#root {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* Use :is() to boost specificity over HubSpot's element+class rules */
:is(#root) h1,
:is(#root) h2,
:is(#root) h3,
:is(#root) h4,
:is(#root) h5,
:is(#root) h6,
:is(#root) p,
:is(#root) span,
:is(#root) a,
:is(#root) li,
:is(#root) div {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* Font weights  use attribute selector for maximum specificity */
:is(#root) h1,
:is(#root) [class*="font-bold"]:is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700 !important;
}
:is(#root) h2 { font-weight: 700 !important; }
:is(#root) h3 { font-weight: 600 !important; }

/* Tailwind weight utilities */
:is(#root) .font-extrabold { font-weight: 800 !important; }
:is(#root) .font-bold      { font-weight: 700 !important; }
:is(#root) .font-semibold  { font-weight: 600 !important; }
:is(#root) .font-medium    { font-weight: 500 !important; }
:is(#root) .font-normal    { font-weight: 400 !important; }

/* Letter spacing */
:is(#root) h1 { font-size: 52px !important; font-weight: 700 !important; line-height: 65px !important; letter-spacing: -1.3px !important; }
:is(#root) h2 { font-size: 36px !important; font-weight: 700 !important; line-height: 40px !important; letter-spacing: -0.9px !important; }
:is(#root) h3 { letter-spacing: normal !important; line-height: 1.3 !important; }
:is(#root) .tracking-tight  { letter-spacing: -0.025em !important; }
:is(#root) .tracking-normal { letter-spacing: 0 !important; }

/* Subtitle spacing  mt-4 = 16px */
:is(#root) h2 + p,
:is(#root) h3 + p {
  margin-top: 16px !important;
}
:is(#root) .mt-4  { margin-top: 16px !important; }
:is(#root) .mt-2  { margin-top: 8px !important; }
:is(#root) .mt-6  { margin-top: 24px !important; }
:is(#root) .mt-8  { margin-top: 32px !important; }
:is(#root) .mt-12 { margin-top: 48px !important; }
:is(#root) .mt-16 { margin-top: 64px !important; }

/*  2. Header: hide React app header entirely 
   HubSpot's template already provides a header + secondary nav.
   The React header would create a duplicate/double bar.        */
/* #root header display:none removed - header restored */

/*  2b. Hide HubSpot page title bar (h1 grey strip)  */
.title-background,
.padding20tb,
[class*="title-background"],
[class*="page-title-wrapper"] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/*  2c. Collapse the white padding60tb wrapper gap  */
.padding60tb {
  padding-top: 0 !important;
}

/*  2d. Hide secondary nav ONLY  not the red header nav 
   The red header nav lives inside .site-header-contain.
   The secondary white bar nav lives inside .padding60tb.
   Only hide the secondary one.                                 */
.padding60tb /* Secondary nav hide removed  the main nav is inside site-header-contain
   and there is only one .main-navigation element. Hiding it kills the top nav.
   We rely on hiding .padding60tb and .title-background to clean up the layout. */

/*  3. Sticky bar: remove border-top  */
:is(#root) .fixed.bottom-0 {
  border-top: none !important;
  border-top-width: 0 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

/*  4. Solution box paragraph: force full-width centering  */
:is(#root) .bg-brand-navy {
  text-align: center !important;
}
:is(#root) .bg-brand-navy .mx-auto {
  margin-inline: auto !important;
}
/* max-w-2xl inside navy box must be respected - do NOT override to 100% */

/*  5. Final navy section padding  */
:is(#root) section.bg-brand-navy {
  padding-bottom: 96px !important;
}

@media (min-width: 640px) {
  :is(#root) section.bg-brand-navy {
    padding-bottom: 112px !important;
  }
}

/*  Margin-top utilities (HubSpot resets all to 0)  */
:is(#root) .mt-1  { margin-top: 4px !important; }
:is(#root) .mt-2  { margin-top: 8px !important; }
:is(#root) .mt-3  { margin-top: 12px !important; }
:is(#root) .mt-4  { margin-top: 16px !important; }
:is(#root) .mt-5  { margin-top: 20px !important; }
:is(#root) .mt-6  { margin-top: 24px !important; }
:is(#root) .mt-8  { margin-top: 32px !important; }
:is(#root) .mt-10 { margin-top: 40px !important; }
:is(#root) .mt-12 { margin-top: 48px !important; }
:is(#root) .mt-16 { margin-top: 64px !important; }

/* Hero subtitle specifically */
:is(#root) h1 + p,
:is(#root) .hero-sub,
:is(#root) [class*="mt-5"] { margin-top: 20px !important; }

/*  Fix HubSpot header logo being crushed to 15px max-width  */
.site-branding,
[class*="site-branding"] {
  max-width: none !important;
  width: auto !important;
  min-width: 150px !important;
}

.site-branding img,
[class*="site-branding"] img {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
}

/*  Fix HubSpot header layout: logo + nav side by side  */

/* The logo and nav are siblings inside .row-fluid inside .site-header-contain.
   Apply flexbox to .row-fluid so logo and nav sit side by side.             */
.site-header-contain,
.site-header-contain .row-fluid-wrapper,
.site-header-contain .row-fluid {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 80px !important;
}

.site-header-contain .row-fluid {
  justify-content: space-between !important;
  padding-inline: 20px !important;
  flex-wrap: nowrap !important;
}

/* Logo: shrink to content width */
.site-branding {
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.site-branding img {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  display: block !important;
}

/* Nav: take remaining space */
.main-navigation.main-nav {
  flex: 0 1 auto !important;
  margin-left: auto !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}
.main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal {
  display: block !important;
  text-align: right !important;
}
.main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul {
  display: inline-flex !important;
  width: auto !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
  float: none !important;
  display: inline-flex !important;
}

/* -- Fix nav links right-alignment in HubSpot header -- */
.main-navigation .hs-menu-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
}

.main-navigation .hs-menu-wrapper > ul {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}


.main-navigation.main-nav {
  flex: 0 1 auto !important;
  margin-left: auto !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}
.main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal {
  display: block !important;
  text-align: right !important;
}
.main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul {
  display: inline-flex !important;
  width: auto !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ====================================================================
   RESPONSIVE TYPOGRAPHY: Re-assert sm/lg breakpoint text sizes
   (Tailwind responsive utilities inside @layer lose to HubSpot CSS)
   ==================================================================== */

/* h1: text-4xl base, sm:text-5xl, lg:text-[3.25rem] */
#root .text-4xl { font-size: 36px !important; line-height: 40px !important; }
@media (min-width: 640px) {
  #root .sm\:text-5xl { font-size: 48px !important; line-height: 60px !important; }
}
@media (min-width: 1024px) {
  #root .lg\:text-\[3\.25rem\] { font-size: 52px !important; line-height: 57.2px !important; }
}

/* h2: text-3xl base, sm:text-4xl */
#root .text-3xl { font-size: 30px !important; line-height: 36px !important; }
@media (min-width: 640px) {
  #root .sm\:text-4xl { font-size: 36px !important; line-height: 40px !important; }
}

/* Hero subtitle: text-lg */
#root .text-lg { font-size: 18px !important; line-height: 28px !important; }

/* leading-tight on h1 */
#root .leading-tight { line-height: 1.25 !important; }


/* Hero/section CTA buttons (larger size) - exclude header */
#root main a.bg-brand-red,
#root main button.bg-brand-red,
#root section a.bg-brand-red,
#root section button.bg-brand-red,
#root .fixed a.bg-brand-red {
  color: var(--brand-red-foreground) !important;
  font-size: 1rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  min-height: 2.5rem !important;
  line-height: 1.5 !important;
}

/* Header CTA button (smaller default size) */
#root header a.bg-brand-red,
#root header button.bg-brand-red {
  color: var(--brand-red-foreground) !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  line-height: 20px !important;
  height: 36px !important;
}
/* Fix: "Vetted. Unbiased. Comprehensive." subtitle wrapping
   Slight max-width increase to match Lovable 2-line wrap at 1300px */
#root .section-hd,
#root .mx-auto.max-w-2xl.text-center {
  max-width: 780px !important;
}

/* Fix: nav dropdowns appearing above instead of below for last items */
.hs-menu-wrapper .hs-menu-children-wrapper {
  z-index: 9000 !important;
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
}

/* Remove margin above "Microsoft Excel" subtitle in pricing card */
#root h3 + p.text-sm.text-muted-foreground {
  margin-top: 0 !important;
}

/* Strikethrough for discounted pricing */
#root .line-through {
  text-decoration: line-through !important;
}

/* ===================================================================== */
/* Hero image: scale to 80% and shrink container with it  2026-05-12   */
/* ===================================================================== */

/* Scale the image container (max-w-[25.92rem]) down to 80% */
#root .max-w-\[25\.92rem\] {
  max-width: 22.74rem !important; /* 25.92rem * 0.8 */
  width: 22.74rem !important;
}

/* Shrink the flex parent so it wraps tightly around the smaller image */
#root .relative.flex.justify-center {
  width: fit-content !important;
  margin-inline: auto !important;
}

/* ===================================================================== */
/* Mobile nav: prevent Advisory Services (and all submenus) expanding   */
/* by default on mobile (max-width: 768px).  2026-05-12                 */
/*                                                                       */
/* Root cause: HubSpot's own CSS sets display:flex !important and        */
/* visibility:visible on .no-flyouts submenus unconditionally.           */
/* The mobile menu also switches to hs-menu-flow-vertical + no-flyouts,  */
/* which makes every submenu open. We override at higher specificity.   */
/* ===================================================================== */

@media (max-width: 768px) {
  /* Counter .hs-menu-flow-vertical.no-flyouts making all submenus visible */
  .site-header .hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
    display: none !important;
    visibility: hidden !important;
  }

  /* Counter display:flex !important on horizontal flow (may apply on mobile too) */
  .site-header .main-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > ul.hs-menu-children-wrapper {
    display: none !important;
    visibility: hidden !important;
  }

  /* Allow JS-toggled open state to override if HubSpot adds a class */
  .site-header .hs-menu-wrapper .hs-menu-children-wrapper.open,
  .site-header .hs-menu-wrapper .hs-menu-children-wrapper.is-open,
  .site-header .hs-menu-wrapper .hs-menu-children-wrapper.active {
    display: block !important;
    visibility: visible !important;
  }
}

/* ===================================================================== */
/* Nav: .top-navigation uses 1.4rem, which at :root 16px = 22.4px.       */
/* Pin to 14px to match correct HubSpot pages. 2026-05-12               */
/* ===================================================================== */

.site-header .top-navigation {
  font-size: 14px !important;
}