/* ==============================================================
   SOA / WERK — SITEWIDE GLOBAL OVERRIDES
   --------------------------------------------------------------
   Single source of truth for two things:
     1. DIVI CONTAINER BREAKOUT
        Neutralizes Divi's section / row / column / code-module
        padding + max-width constraints for any premium page-body
        install that uses the #soa-[pagename]-v1wp wrapper pattern.
     2. WERK CANONICAL HEADER
        Overrides the Divi Theme Builder header so logo, nav,
        and CTA render to the approved WERK spec sitewide.

   INSTALL PATH: enqueued by functions.php at priority 20 against
   wp_enqueue_scripts so it loads AFTER parent and child style.css.

   LAST VERIFIED AGAINST:
     • /outputs/soa-homepage-v1-wp.html (header canonical spec)
     • /outputs/soa-rachel-media-kit-v1-wp.html (breakout spec)
   ============================================================== */


/* ============================================================
   1. WERK BRAND TOKENS
   Declared once here so every override reads from the same map.
   ============================================================ */
:root {
  --werk-canvas-light:   #FFFFFF;
  --werk-canvas-warm:    #FAF7FF;
  --werk-signal-orange:  #F97304;
  --werk-deeper-orange:  #D44206;
  --werk-anchor-navy:    #023D67;
  --werk-plum-deep:      #1C0A33;
  --werk-plum:           #2E1450;
  --werk-lavender:       #C79CEE;
  --werk-divider-light:  rgba(0, 15, 34, 0.08);
  --werk-body-face:      "Poppins", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --werk-display-face:   "Roboto", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --werk-container-max:  1200px;
  --soa-visible-hero-offset: 88px;
  --soa-visible-hero-offset-mobile: 76px;
}

html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}


/* ============================================================
   2. DIVI CONTAINER BREAKOUT
   Applies to every page whose body is wrapped in an element
   with an id of the form soa-*-v1wp (e.g. #soa-rachel-v1wp,
   #soa-joshua-v1wp, #soa-youmanize-v1wp). Any page saved via
   the Divi Visual Builder + Code Module wrapper pattern gets
   this breakout for free.

   Specificity note:
   Divi's Visual-Builder-generated rules land at (0, 2, 3, 0)
   with !important. The selectors below land at (0, 2, 4, 2)
   or higher so they win the cascade.
   ============================================================ */

/* Neutralize Divi wrapper padding + max-width for any page that
   has a [id^="soa-"][id$="-v1wp"] wrapper inside it. */
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"]),
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"]) .et_pb_row,
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"]) .et_pb_column,
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"]) .et_pb_module.et_pb_code,
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"]) .et_pb_code_inner,
html body #main-content .et_builder_inner_content:has([id^="soa-"][id$="-v1wp"]) {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
  justify-content: unset !important;
  background: transparent !important;
}

/* Kill Divi section ::before / ::after pseudo-spacers for any
   section that contains an soa-*-v1wp wrapper. */
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"])::before,
html body #page-container #et-boc .et_pb_section:has([id^="soa-"][id$="-v1wp"])::after {
  display: none !important;
  content: none !important;
}

/* Full-viewport breakout for the wrapper itself. */
html body [id^="soa-"][id$="-v1wp"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  font-family: var(--werk-body-face) !important;
  font-size: clamp(18px, 1.08vw, 21px) !important;
  font-weight: 400 !important;
  color: var(--werk-plum) !important;
  background: var(--werk-canvas-light) !important;
  line-height: 1.65 !important;
}

/* Production launch scale guard: after the old staging WPCode layer was
   removed, several page bodies fell back to a too-small 16px baseline. Keep
   the approved editorial feel without touching the Divi header/nav. */
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] p,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] li,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .section-subtitle,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .section-copy,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .card-copy,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .article-excerpt,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .hero-subhead,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .hero-lead {
  font-size: clamp(20px, 1.32vw, 24px) !important;
  line-height: 1.65 !important;
}

html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] h2,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .section-title,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .stream-title {
  font-size: clamp(38px, 3.1vw, 52px) !important;
  line-height: 1.18 !important;
}

html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] h3,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .card-title,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .article-title,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .founder-name {
  font-size: clamp(24px, 1.9vw, 34px) !important;
  line-height: 1.28 !important;
}

html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .btn,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .cta,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .btn-primary,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .gform_button {
  font-size: clamp(17px, 1.05vw, 20px) !important;
}

html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .eyebrow,
html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .section-eyebrow {
  font-size: clamp(13px, 0.78vw, 16px) !important;
}

/* Keep Code Module hero sections inside the first visible viewport.
   The sticky Divi header is in normal flow at the top of the page, so a
   100vh hero actually pushes its bottom below the fold. These rules give
   every v1 page a shared "viewport minus header" hero budget while still
   letting page-specific source CSS own the visual composition. */
@media (min-width: 981px) {
  html body #page-container #et-boc [id^="soa-"][id$="-v1wp"] .hero {
    min-height: min(620px, calc(100svh - var(--soa-visible-hero-offset))) !important;
  }

  html body #page-container #et-boc #soa-homepage-v1wp .hero,
  html body #page-container #et-boc #soa-homepage-v1wp .hero-content {
    min-height: calc(100svh - var(--soa-visible-hero-offset)) !important;
    max-height: calc(100svh - var(--soa-visible-hero-offset)) !important;
  }

  html body.admin-bar #page-container #et-boc #soa-homepage-v1wp .hero,
  html body.admin-bar #page-container #et-boc #soa-homepage-v1wp .hero-content {
    min-height: calc(100svh - 120px) !important;
    max-height: calc(100svh - 120px) !important;
  }
}

@media (max-width: 980px) {
  html body #page-container #et-boc #soa-homepage-v1wp .hero,
  html body #page-container #et-boc #soa-homepage-v1wp .hero-content {
    min-height: calc(100svh - var(--soa-visible-hero-offset-mobile)) !important;
    max-height: calc(100svh - var(--soa-visible-hero-offset-mobile)) !important;
  }
}

/* Production fallback for the homepage hero image. The image also lives in
   the Code Module, but keeping it here prevents cache/order issues from
   dropping the hero back to the warm dark fallback state. */
html body #page-container #et-boc #soa-homepage-v1wp .hero {
  background-image: url("https://standoutauthority.com/wp-content/uploads/2026/04/Gemini_Generated_Image_uhne42uhne42uhne.jpeg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-color: #3a2f28 !important;
}

@media (min-width: 1601px) {
  html body #page-container #et-boc #soa-homepage-v1wp .hero {
    background-position: center 14% !important;
  }
}

/* Mobile hero image recovery.
   The page-level hero CSS intentionally uses a soft editorial veil on desktop,
   but on narrow iPhone viewports that veil can read as an empty white panel.
   These rules create a visible photo band first, then let the conversion copy
   sit below it where it remains legible and tappable. */
@media (max-width: 768px) {
  html body #page-container #et-boc #soa-offer-page-v1wp .hero,
  html body #page-container #et-boc #soa-results-v1wp .hero,
  html body #page-container #et-boc #soa-authority-insights-v1wp .hero,
  html body #page-container #et-boc #soa-our-story-v1wp .hero,
  html body #page-container #et-boc #soa-our-method-v1wp .hero,
  html body #page-container #et-boc #soa-media-v1wp .hero,
  html body #page-container #et-boc #soa-brand-launchpad-v1wp .hero,
  html body #page-container #et-boc #soa-training-v1wp .hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    max-height: none !important;
    padding-top: clamp(280px, 64vw, 360px) !important;
    background-repeat: no-repeat !important;
    background-color: #FAF9F5 !important;
    background-size: 100% clamp(280px, 64vw, 360px), 100% clamp(280px, 64vw, 360px) !important;
  }

  html body #page-container #et-boc #soa-offer-page-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.08) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/03/Gemini_Generated_Image_kpa4wjkpa4wjkpa4-scaled.jpeg") !important;
    background-position: 31% top, 31% top !important;
  }

  html body #page-container #et-boc #soa-results-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.08) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/04/Rachel-Lee-Q1_1.23.26_322-scaled.jpg") !important;
    background-position: 55% top, 55% top !important;
  }

  html body #page-container #et-boc #soa-authority-insights-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.1) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/04/Rachel-Lee-Q1_1.23.26_320-scaled.jpg") !important;
    background-position: 58% top, 58% top !important;
  }

  html body #page-container #et-boc #soa-our-story-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.1) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/03/Gemini_Generated_Image_o22efzo22efzo22e-1.jpeg") !important;
    background-position: 48% top, 48% top !important;
  }

  html body #page-container #et-boc #soa-our-method-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.1) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/03/Rachel-Lee-Q1_1.23.26_6-scaled.jpg") !important;
    background-position: 58% top, 58% top !important;
  }

  html body #page-container #et-boc #soa-media-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.08) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/03/Rachel-Lee-Q1_1.23.26_722-scaled.jpg") !important;
    background-position: 45% top, 45% top !important;
  }

  html body #page-container #et-boc #soa-brand-launchpad-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.1) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/04/Rachel-Lee-Q1_1.23.26_335-scaled.jpg") !important;
    background-position: 56% top, 56% top !important;
  }

  html body #page-container #et-boc #soa-training-v1wp .hero {
    background-image:
      linear-gradient(to bottom, rgba(250, 249, 245, 0) 0%, rgba(250, 249, 245, 0.08) 58%, rgba(250, 249, 245, 1) 100%),
      url("https://standoutauthority.com/wp-content/uploads/2026/04/Rachel-Lee-Q1_1.23.26_326-scaled.jpg") !important;
    background-position: 47% top, 47% top !important;
  }
}

/* Inherit Poppins baseline into descendants so Divi's Raleway
   cascade doesn't leak into premium page bodies. */
html body [id^="soa-"][id$="-v1wp"] p,
html body [id^="soa-"][id$="-v1wp"] li,
html body [id^="soa-"][id$="-v1wp"] span,
html body [id^="soa-"][id$="-v1wp"] a,
html body [id^="soa-"][id$="-v1wp"] label,
html body [id^="soa-"][id$="-v1wp"] div,
html body [id^="soa-"][id$="-v1wp"] button,
html body [id^="soa-"][id$="-v1wp"] input,
html body [id^="soa-"][id$="-v1wp"] textarea,
html body [id^="soa-"][id$="-v1wp"] select {
  font-family: var(--werk-body-face);
}

/* Display heading baseline: Roboto 700 plum. Page-body CSS can
   override per-section (hero hx, closing lines, etc.). */
html body [id^="soa-"][id$="-v1wp"] h1,
html body [id^="soa-"][id$="-v1wp"] h2,
html body [id^="soa-"][id$="-v1wp"] h3,
html body [id^="soa-"][id$="-v1wp"] h4,
html body [id^="soa-"][id$="-v1wp"] h5 {
  font-family: var(--werk-display-face) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  font-style: normal !important;
  color: var(--werk-plum) !important;
}

/* Gravity Forms inherits Poppins inside premium wrappers. */
html body [id^="soa-"][id$="-v1wp"] .form-card,
html body [id^="soa-"][id$="-v1wp"] .gform_wrapper,
html body [id^="soa-"][id$="-v1wp"] .gform_wrapper input[type=text],
html body [id^="soa-"][id$="-v1wp"] .gform_wrapper input[type=email],
html body [id^="soa-"][id$="-v1wp"] .gform_wrapper textarea,
html body [id^="soa-"][id$="-v1wp"] .gform_wrapper select {
  font-family: var(--werk-body-face) !important;
}


/* ============================================================
   3. WERK CANONICAL HEADER
   Replaces the default Divi Theme Builder header styling
   sitewide. Matches the header in soa-homepage-v1-wp.html
   so every page renders the same approved top bar.
   ============================================================ */

/* Sticky white header shell */
html body .et-l--header,
html body header.et-l--header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--werk-canvas-light) !important;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

html body.admin-bar .et-l--header,
html body.admin-bar header.et-l--header {
  top: 0 !important;
}

@media screen and (max-width: 782px) {
  html body.admin-bar .et-l--header,
  html body.admin-bar header.et-l--header {
    top: 0 !important;
  }
}

html body.admin-bar .et-l--header + div,
html body.admin-bar header.et-l--header + div {
  margin-top: 32px !important;
}

@media screen and (max-width: 782px) {
  html body.admin-bar .et-l--header + div,
  html body.admin-bar header.et-l--header + div {
    margin-top: 46px !important;
  }
}

html body.admin-bar #page-container #et-boc #soa-homepage-v1wp#soa-homepage-v1wp .hero-content {
  padding-top: 36px !important;
}

/* Reset Divi's own section/row/column padding inside the header
   so the inner flex row controls layout. */
html body .et-l--header .et_pb_section,
html body .et-l--header .et_pb_column {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

html body .et-l--header .et_pb_section,
html body .et-l--header .et_pb_menu,
html body .et-l--header .et_pb_menu_inner_container,
html body .et-l--header .et_pb_menu__wrap {
  min-height: 64px !important;
  height: 64px !important;
}
html body .et-l--header .et_pb_row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  max-width: 1328px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* Logo sizing — real SVG from media library */
html body .et-l--header .et_pb_image img,
html body .et-l--header img[src*="StandOut-Authority-Logo"] {
  height: 48px !important;
  width: auto !important;
  display: block !important;
}

/* Nav list — Divi Menu Module output */
html body .et-l--header nav,
html body .et-l--header .et_pb_menu__menu > nav,
html body .et-l--header .et_pb_menu_inner_container {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
html body .et-l--header nav > ul,
html body .et-l--header .et_pb_menu__menu ul,
html body .et-l--header ul.nav {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .et-l--header .et_pb_menu__wrap,
html body .et-l--header .et_pb_menu__menu {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* Nav anchor typography
   Specificity ESCALATED to TWO IDs (#page-container #et-boc).
   Required because legacy Divi Theme Options Custom CSS on
   this site carries rules like
     #page-container #et-boc .et_pb_menu__menu nav > ul > li > a
       { font-size: clamp(18px,1.5vw,36px) !important;
         font-weight: 700 !important; }
   at specificity (2,1,4). Our selectors below land at
   (2,2,5)+ so they always win on font-size / weight. */
html body #page-container #et-boc .et-l--header nav > ul > li > a,
html body #page-container #et-boc .et-l--header .et_pb_menu_inner_container nav > ul > li > a,
html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li > a,
html body #page-container #et-boc .et-l--header ul.nav > li > a,
html body #page-container #et-boc .et-l--header #top-menu > li > a,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] nav > ul > li > a,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li > a {
  font-family: var(--werk-body-face) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--werk-anchor-navy) !important;
  text-decoration: none !important;
  padding: 0 !important;
  transition: color 160ms ease !important;
  text-transform: none !important;
  opacity: 1 !important;
}
html body #page-container #et-boc .et-l--header nav > ul > li > a:hover,
html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li > a:hover,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li > a:hover {
  color: var(--werk-signal-orange) !important;
  opacity: 1 !important;
}

html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children > a,
html body #page-container #et-boc .et-l--header .et_pb_menu_inner_container nav > ul > li.menu-item-has-children > a,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li.menu-item-has-children > a,
html body #page-container #et-boc .et-l--header #menu-primary-menu#menu-primary-menu > li.menu-item-has-children > a,
html body #page-container #et-boc .et-l--header #menu-primary-menu > li.menu-item-has-children > a,
html body #page-container #et-boc .et-l--header .menu-item-has-children > a:first-child,
html body #page-container #et-boc .et-l--header li.menu-item-has-children > a:first-child {
  display: inline-block !important;
  padding-right: 18px !important;
}

html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children > a::after,
html body #page-container #et-boc .et-l--header .et_pb_menu_inner_container nav > ul > li.menu-item-has-children > a::after,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li.menu-item-has-children > a::after,
html body #page-container #et-boc .et-l--header #menu-primary-menu#menu-primary-menu > li.menu-item-has-children > a::after,
html body #page-container #et-boc .et-l--header #menu-primary-menu > li.menu-item-has-children > a::after,
html body #page-container #et-boc .et-l--header .menu-item-has-children > a:first-child::after,
html body #page-container #et-boc .et-l--header li.menu-item-has-children > a:first-child::after {
  top: 50% !important;
  left: calc(100% + 6px) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}

/* "Let's Talk" primary CTA — orange pill.
   IMPORTANT: we target the menu item for page_id=105 by its
   exact Divi-generated class .et_pb_menu_page_id-105 instead
   of a substring match on href. The old a[href*="page_id=105"]
   selector incorrectly matched page_id=10558 (YOUmanize) and
   painted it as a CTA. Using the exact LI class eliminates
   that false positive.
   Specificity escalated to TWO IDs + 3 classes + 5 elements
   = (2,3,5) so it wins over both the legacy 2-ID rule AND
   the nav rule above. */
html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.et_pb_menu_page_id-105 > a,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li.et_pb_menu_page_id-105 > a,
html body #page-container #et-boc .et-l--header a.header-cta,
html body #page-container #et-boc .et-l--header a.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--werk-signal-orange) !important;
  background-color: var(--werk-signal-orange) !important;
  color: #FFFFFF !important;
  font-family: var(--werk-body-face) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 160ms ease, transform 120ms ease !important;
}
html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.et_pb_menu_page_id-105 > a:hover,
html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li.et_pb_menu_page_id-105 > a:hover,
html body #page-container #et-boc .et-l--header a.header-cta:hover,
html body #page-container #et-boc .et-l--header a.btn-primary:hover {
  background: var(--werk-deeper-orange) !important;
  background-color: var(--werk-deeper-orange) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

@media (min-width: 981px) {
  html body .et-l--header .et_pb_menu .et_pb_menu__menu,
  html body .et-l--header .et_pb_menu .et_pb_menu__logo-wrap + .et_pb_menu__menu {
    display: flex !important;
  }

  html body .et-l--header .et_pb_menu .et_mobile_nav_menu {
    display: none !important;
  }

  html body .et-l--header .et_pb_row {
    max-width: 1336px !important;
    padding: 0 18px !important;
  }
  html body .et-l--header .et_pb_image img,
  html body .et-l--header img[src*="StandOut-Authority-Logo"] {
    height: 44px !important;
  }
  html body .et-l--header nav > ul,
  html body .et-l--header .et_pb_menu__menu ul,
  html body .et-l--header ul.nav {
    gap: 18px !important;
  }
  html body #page-container #et-boc .et-l--header nav > ul > li > a,
  html body #page-container #et-boc .et-l--header .et_pb_menu_inner_container nav > ul > li > a,
  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li > a,
  html body #page-container #et-boc .et-l--header ul.nav > li > a,
  html body #page-container #et-boc .et-l--header #top-menu > li > a,
  html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] nav > ul > li > a,
  html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li > a {
    font-size: 18px !important;
  }
  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.et_pb_menu_page_id-105 > a,
  html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li.et_pb_menu_page_id-105 > a,
  html body #page-container #et-boc .et-l--header a.header-cta,
  html body #page-container #et-boc .et-l--header a.btn-primary {
    font-size: 18px !important;
    padding: 10px 18px !important;
  }

  /* Divi desktop dropdown reset. Without this, submenu children can inherit
     the horizontal flex row from the top nav and render sideways over heroes. */
  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children {
    position: relative !important;
  }

  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children > ul.sub-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border-top: 3px solid var(--werk-signal-orange) !important;
    box-shadow: 0 16px 34px rgba(2, 61, 103, 0.16) !important;
    z-index: 99999 !important;
    gap: 0 !important;
    flex-direction: column !important;
  }

  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu,
  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children.et-show-dropdown > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children:nth-last-child(-n+3) > ul.sub-menu {
    left: auto !important;
    right: 0 !important;
  }

  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 22px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
    color: var(--werk-anchor-navy) !important;
  }
}

/* Progressive desktop/tablet behavior: keep the full nav at normal size,
   but remove search before the CTA can wrap into the hero. */
@media (max-width: 1440px) and (min-width: 981px) {
  html body .et-l--header .et_pb_menu__search-button,
  html body .et-l--header .et_pb_menu__search-container,
  html body .et-l--header .et_pb_menu__icon.et_pb_menu__search-button,
  html body .et-l--header .et_search_outer,
  html body .et-l--header .et_pb_search,
  html body .et-l--header .et_pb_menu__wrap .et_pb_menu__search-button {
    display: none !important;
  }

  html body .et-l--header .et_pb_row {
    max-width: 1280px !important;
  }
}

/* Desktop header scale alignment.
   Production had fallen into a compact 64px header with a 44px logo, while the
   approved Dev visual uses a more premium, breathable top bar. Keep the full
   desktop nav, but restore that larger header presence at laptop+ widths. */
@media (min-width: 1181px) {
  html body .et-l--header,
  html body header.et-l--header,
  html body .et-l--header .et_pb_section,
  html body .et-l--header .et_pb_menu,
  html body .et-l--header .et_pb_menu_inner_container,
  html body .et-l--header .et_pb_menu__wrap {
    min-height: 104px !important;
    height: 104px !important;
  }

  html body .et-l--header .et_pb_row {
    height: 104px !important;
    max-width: 1480px !important;
    padding: 0 36px !important;
  }

  html body .et-l--header .et_pb_image img,
  html body .et-l--header img[src*="StandOut-Authority-Logo"] {
    height: 64px !important;
    width: auto !important;
  }

  html body .et-l--header nav > ul,
  html body .et-l--header .et_pb_menu__menu ul,
  html body .et-l--header ul.nav {
    gap: 24px !important;
  }

  html body #page-container #et-boc .et-l--header nav > ul > li > a,
  html body #page-container #et-boc .et-l--header .et_pb_menu_inner_container nav > ul > li > a,
  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li > a,
  html body #page-container #et-boc .et-l--header ul.nav > li > a,
  html body #page-container #et-boc .et-l--header #top-menu > li > a,
  html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] nav > ul > li > a,
  html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li > a {
    font-size: 19px !important;
  }

  html body #page-container #et-boc .et-l--header .et_pb_menu__menu nav > ul > li.et_pb_menu_page_id-105 > a,
  html body #page-container #et-boc .et-l--header [class*="et_pb_menu_"] ul.nav > li.et_pb_menu_page_id-105 > a,
  html body #page-container #et-boc .et-l--header a.header-cta,
  html body #page-container #et-boc .et-l--header a.btn-primary {
    font-size: 19px !important;
    padding: 13px 24px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  html body .et-l--header,
  html body header.et-l--header,
  html body .et-l--header .et_pb_section,
  html body .et-l--header .et_pb_menu,
  html body .et-l--header .et_pb_menu_inner_container,
  html body .et-l--header .et_pb_menu__wrap {
    min-height: 96px !important;
    height: 96px !important;
  }

  html body .et-l--header .et_pb_row {
    height: 96px !important;
    padding: 0 24px !important;
  }

  html body .et-l--header .et_pb_image img,
  html body .et-l--header img[src*="StandOut-Authority-Logo"] {
    height: 56px !important;
  }

  html body .et-l--header nav > ul,
  html body .et-l--header .et_pb_menu__menu ul,
  html body .et-l--header ul.nav {
    gap: 18px !important;
  }
}

/* Collapse behavior — switch before the CTA/search can wrap into the hero.
   Divi's default 980px breakpoint leaves a narrow tablet-width dead zone. */
@media (max-width: 1180px) {
  html body .et-l--header .et_pb_menu .et_pb_menu__menu,
  html body .et-l--header .et_pb_menu .et_pb_menu__logo-wrap + .et_pb_menu__menu {
    display: none !important;
  }
  html body .et-l--header .et_pb_menu .et_mobile_nav_menu {
    display: block !important;
  }
  html body .et-l--header .et_pb_menu .et_mobile_menu {
    display: none !important;
  }
  html body .et-l--header .et_mobile_menu,
  html body .et-l--header .et_pb_menu .et_mobile_menu,
  html body #page-container #et-boc .et-l--header .et_mobile_menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 20px !important;
    left: auto !important;
    width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
    background: #FFFFFF !important;
    padding: 8px 0 !important;
  }
  html body .et-l--header .mobile_nav.opened .et_mobile_menu,
  html body .et-l--header .et_pb_menu .mobile_nav.opened .et_mobile_menu,
  html body #page-container #et-boc .et-l--header .mobile_nav.opened .et_mobile_menu {
    display: block !important;
  }
  html body .et-l--header .et_mobile_menu li a {
    padding: 12px 20px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  html body #page-container #et-boc .et-l--header .et_mobile_menu li a {
    padding: 12px 20px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  html body .et-l--header .et_mobile_menu .sub-menu li a {
    padding-left: 36px !important;
    font-size: 14px !important;
  }
  html body #page-container #et-boc .et-l--header .et_mobile_menu .sub-menu li a {
    padding-left: 36px !important;
    font-size: 14px !important;
  }
  html body .et-l--header .et_pb_row {
    height: 64px !important;
    padding: 0 16px !important;
  }
  html body .et-l--header .et_pb_image img,
  html body .et-l--header img[src*="StandOut-Authority-Logo"] {
    height: 40px !important;
  }
}


/* ============================================================
   4. FOOTNOTES
   ============================================================
   :has() selectors require evergreen browser support. All
   modern Chromium, Safari, and Firefox ship it. Legacy IE
   is not in scope for WERK builds.

   If a new premium page uses a different wrapper id pattern,
   either adopt the soa-*-v1wp convention OR extend the
   selector chain in section 2 above.
   ============================================================ */