.elementor-13510 .elementor-element.elementor-element-53e7c31d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-13510 .elementor-element.elementor-element-546c0ab4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13510 .elementor-element.elementor-element-395b1dd6{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13510 .elementor-element.elementor-element-2844a80a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13510 .elementor-element.elementor-element-7bdf7f17{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13510 .elementor-element.elementor-element-15b7da88{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-13510 .elementor-element.elementor-element-546c0ab4{--content-width:1280px;}}/* Start custom CSS *//* ==========================================================================
   BP Header — Phase 1
   Lives in: Header template 13510 → Settings → Advanced → Custom CSS
   Scope: every rule is namespaced under .bp-header / .bp-mobile-panel.
          Nothing here can reach a legacy template.
   ========================================================================== */

/* --- Tokens -----------------------------------------------------------------
   Declared on the component root for Phase 1 so the header is self-contained.
   The Kit global colours now carry the same palette (DS finalization,
   2026-09-23); these local tokens stay so the header is self-contained.
   -------------------------------------------------------------------------- */
.bp-header,
.bp-mobile-panel {
  --bp-orange: #F7941D;
  --bp-orange-hover: #E07E0A;
  --bp-charcoal: #1A1A1A;
  --bp-body: #555555;
  --bp-white: #FFFFFF;
  --bp-surface: #FAFAFA;
  --bp-warm: #F6F4F0;
  --bp-border: #E8E8E8;
  --bp-radius: 2px;
  --bp-font-ui: "Inter", sans-serif;
  --bp-font-heading: "Manrope", sans-serif;
  --bp-header-h: 88px;
  --bp-header-h-sm: 72px;
  --bp-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- Shell ---------------------------------------------------------------- */
/* Fixed rather than Elementor Pro Sticky: the transparent-over-hero state
   needs the bar out of flow from the first paint, and Pro Sticky only leaves
   flow after the scroll threshold. See report §Decisions. */
.bp-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  min-height: var(--bp-header-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color .28s var(--bp-ease),
    border-color .28s var(--bp-ease),
    box-shadow .28s var(--bp-ease),
    min-height .28s var(--bp-ease);
}

/* Scrolled state — toggled by bp-header.js at 40px */
.bp-header.is-scrolled {
  background-color: var(--bp-white);
  border-bottom-color: var(--bp-border);
  box-shadow: 0 1px 3px rgba(26, 26, 26, .06);
}

.bp-header__inner {
  width: 100%;
}

/* --- Logo ----------------------------------------------------------------- */
/* Two logo states, one link, one <img>, one alt:
   - the <img> is the light (reversed) lockup, attachment 13538: correct at
     first paint over the dark hero, so the transparent state never waits on
     a background image;
   - the dark lockup (13508, bp-logo-beepec.png) is a background on the
     link's ::after and crossfades in when the bar turns white.
   13538 is framed 3.5:1 with its mark at the same position and size as
   13508's, so the two states line up exactly and the box never changes. */
.bp-header .bp-logo a {
  position: relative;
  display: inline-block;
}

.bp-header .bp-logo img {
  display: block;
  width: clamp(118px, 11vw, 150px);
  height: auto;
  aspect-ratio: 768 / 219;
  transition: opacity .28s var(--bp-ease);
}

.bp-header .bp-logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/wp-content/uploads/2026/09/bp-logo-beepec.png") left center / auto 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--bp-ease);
}

.bp-header.is-scrolled .bp-logo img,
.bp-header.bp-nav-open .bp-logo img {
  opacity: 0;
}

.bp-header.is-scrolled .bp-logo a::after,
.bp-header.bp-nav-open .bp-logo a::after {
  opacity: 1;
}

/* --- Desktop navigation --------------------------------------------------- */
.bp-header .bp-nav .elementor-nav-menu--main .elementor-item {
  font-family: var(--bp-font-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--bp-white);
  padding: 8px 0;
  fill: currentColor;
  transition: color .2s var(--bp-ease);
}

.bp-header.is-scrolled .bp-nav .elementor-nav-menu--main .elementor-item {
  color: var(--bp-charcoal);
}

/* Orange active state + hover, in both header states */
.bp-header .bp-nav .elementor-nav-menu--main .elementor-item:hover,
.bp-header .bp-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.bp-header.is-scrolled .bp-nav .elementor-nav-menu--main .elementor-item:hover,
.bp-header.is-scrolled .bp-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--bp-orange);
}

/* Elementor draws its own hover underline/background; we opted out via
   pointer:none, this just guarantees no residue. */
.bp-header .bp-nav .elementor-item:before,
.bp-header .bp-nav .elementor-item:after {
  display: none !important;
}

/* --- Place Order CTA ------------------------------------------------------ */
.bp-header .bp-cta .elementor-button,
.bp-mobile-panel .bp-cta-mobile .elementor-button {
  font-family: var(--bp-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--bp-charcoal);
  background-color: var(--bp-orange);
  border: 0;
  border-radius: var(--bp-radius);
  padding: 15px 22px;
  /* colour only — no movement on hover, per locked decision */
  transition: background-color .2s var(--bp-ease);
}

.bp-header .bp-cta .elementor-button:hover,
.bp-header .bp-cta .elementor-button:focus-visible,
.bp-mobile-panel .bp-cta-mobile .elementor-button:hover,
.bp-mobile-panel .bp-cta-mobile .elementor-button:focus-visible {
  background-color: var(--bp-orange-hover);
  color: var(--bp-charcoal);
  transform: none;
  box-shadow: none;
}

/* no arrow glyph */
.bp-header .bp-cta .elementor-button-icon,
.bp-mobile-panel .bp-cta-mobile .elementor-button-icon {
  display: none;
}

/* --- Focus visibility ----------------------------------------------------
   Astra paints a 1px dotted ring on :focus, which wins over a :focus-visible
   rule for mouse interaction. Clear it inside the header, then draw the
   Beepec ring. */
.bp-header :focus,
.bp-mobile-panel :focus {
  outline: none;
}

.bp-header a:focus-visible,
.bp-header button:focus-visible,
.bp-mobile-panel a:focus-visible,
.bp-mobile-panel button:focus-visible {
  outline: 2px solid var(--bp-orange);
  outline-offset: 3px;
  border-radius: var(--bp-radius);
}

/* On white, orange-on-white is weak for a focus ring — use charcoal */
.bp-header.is-scrolled a:focus-visible,
.bp-header.is-scrolled button:focus-visible,
.bp-mobile-panel a:focus-visible,
.bp-mobile-panel button:focus-visible {
  outline-color: var(--bp-charcoal);
}

/* Opening the overlay moves focus programmatically, which does not always
   match :focus-visible — so a plain :focus must be visible in there too. */
.bp-mobile-panel a:focus,
.bp-mobile-panel button:focus {
  outline: 2px solid var(--bp-charcoal);
  outline-offset: 3px;
  border-radius: var(--bp-radius);
}

/* --- Mobile toggle ------------------------------------------------------- */
.bp-header .bp-toggle {
  display: none;
}

/* scoped under .bp-header so it outranks the Kit's Theme Style button rules
   (.elementor-kit-3158 button / button:hover), which set colour and padding */
.bp-header .bp-toggle__btn,
.bp-header .bp-toggle__btn:hover,
.bp-header .bp-toggle__btn:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 16px is what the approved QA rendered (it came from the Kit until now);
     kept explicitly so the tap target stays ~46px */
  padding: 16px;
  margin: 0;
  /* the theme paints every <button> with its accent colour, and its .elementor-13510
     outranks a single class — hence !important on the reset only */
  background-color: transparent !important;
  background-image: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  color: var(--bp-white);
  font-family: var(--bp-font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 1;
  border-radius: var(--bp-radius);
}

.bp-header.is-scrolled .bp-toggle__btn,
.bp-header.bp-nav-open .bp-toggle__btn {
  color: var(--bp-charcoal);
}

.bp-toggle__bars {
  display: block;
  width: 22px;
  height: 14px;
  position: relative;
}

.bp-toggle__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform .24s var(--bp-ease), opacity .18s var(--bp-ease);
}

.bp-toggle__bars i:nth-child(1) { top: 2px; }
.bp-toggle__bars i:nth-child(2) { bottom: 2px; }

.bp-header.bp-nav-open .bp-toggle__bars i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.bp-header.bp-nav-open .bp-toggle__bars i:nth-child(2) {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- Mobile full-screen overlay ------------------------------------------ */
.bp-mobile-panel {
  display: none;
}

@media (max-width: 767px) {

  .bp-header {
    min-height: var(--bp-header-h-sm);
  }

  /* desktop nav out, toggle in */
  .bp-header .bp-header__nav { display: none; }
  .bp-header .bp-toggle { display: flex; }

  /* keep the bar legible above the overlay */
  .bp-header.bp-nav-open {
    background-color: var(--bp-white);
    border-bottom-color: transparent;
    box-shadow: none;
  }

  .bp-header.bp-nav-open .bp-header__inner {
    position: relative;
    z-index: 2;
  }

  /* full screen, solid white — no blur on mobile, solid fallback */
  .bp-header.bp-nav-open .bp-mobile-panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: calc(var(--bp-header-h-sm) + 20px) 24px 40px;
    background-color: var(--bp-white);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
  }

  .bp-mobile-panel .bp-nav-mobile .elementor-nav-menu--main .elementor-item {
    font-family: var(--bp-font-ui);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.25;
    color: var(--bp-charcoal);
    padding: 18px 0;
    border-bottom: 1px solid var(--bp-border);
  }

  .bp-mobile-panel .bp-nav-mobile .elementor-nav-menu--main .elementor-item:hover,
  .bp-mobile-panel .bp-nav-mobile .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--bp-orange);
  }

  .bp-mobile-panel .bp-cta-mobile {
    margin-top: 28px;
  }

  .bp-mobile-panel .bp-cta-mobile .elementor-button {
    width: 100%;
    justify-content: center;
    padding: 17px 22px;
    font-size: 16px;
  }

  /* CTA stays reachable in the bar, but not while the overlay is open */
  .bp-header.bp-nav-open .bp-cta { display: none; }

  /* At 390px the bar has ~327px of usable width, so the row is tightened:
     the toggle drops its visible label (the button keeps its aria-label),
     gaps shrink, and the CTA and logo step down a size. */
  .bp-toggle__label { display: none; }

  .bp-header .bp-header__inner > .e-con-inner,
  .bp-header .bp-header__inner {
    gap: 12px !important;
  }

  .bp-header .bp-header__actions {
    gap: 10px;
  }

  .bp-header .bp-cta .elementor-button {
    padding: 11px 14px;
    font-size: 13px;
  }

  .bp-header .bp-logo img {
    width: 112px;
  }
}

/* body scroll lock while the overlay is open */
body.bp-scroll-lock {
  overflow: hidden;
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bp-header,
  .bp-header *,
  .bp-header *::after,
  .bp-mobile-panel * {
    transition-duration: .01ms !important;
  }
}

/* --- Layout helpers (kept last so they win over Elementor container defaults) */
/* A *boxed* Elementor container renders an extra .e-con-inner wrapper, so the
   three header columns are grandchildren, not children. Both paths are covered
   so the rule survives a switch between boxed and full. */
.bp-header__inner > .e-con-inner > .e-con,
.bp-header__inner > .e-con {
  width: auto;
  flex: 0 0 auto;
}

/* The three columns must never wrap onto a second row. !important is needed
   because Elementor writes a per-element flex-wrap rule with higher
   specificity than any class .elementor-13510 we can author here. */
.bp-header .bp-header__inner,
.bp-header .bp-header__inner > .e-con-inner {
  flex-wrap: nowrap !important;
}

/* nav item rhythm (items live inside one widget, so container gap can't do it) */
.bp-header .bp-nav .elementor-nav-menu {
  flex-wrap: nowrap;
}

.bp-header .bp-nav .elementor-nav-menu > li + li {
  margin-inline-start: 28px;
}

.bp-header .bp-nav .elementor-nav-menu > li > .elementor-item {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .bp-mobile-panel .bp-nav-mobile .elementor-nav-menu > li + li {
    margin-inline-start: 0;
  }
}

/* --- WordPress admin bar offset (logged-in preview only) ------------------
   bp-header.js measures the bar and writes --bp-adminbar-h, because the bar
   wraps to two rows on sites with many admin-bar items. The literals below are
   the no-JS fallback. Real visitors have no admin bar, so this never applies. */
body.admin-bar .bp-header { top: var(--bp-adminbar-h, 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .bp-header { top: var(--bp-adminbar-h, 46px); }
}

/* below 600px WP un-fixes the admin bar, so the header returns to the top */
@media screen and (max-width: 600px) {
  body.admin-bar .bp-header { top: var(--bp-adminbar-h, 0px); }
}

/* BP Header — Resources disclosure (Phase 11.2, Stage B; in Header 13510 Custom CSS).
   An editorial navigation surface, not a SaaS mega-menu: one flat white object with the
   secondary architectural radius (24px), a warm intro column with the hexagon drafting line,
   and three typographic links. No icons, pills or gradients; one soft shadow because it floats
   over page content. */

/* the toggle keeps the nav item's own typography and colour states (.elementor-item) */
.bp-header .bp-nav .bp-res__toggle,
.bp-header .bp-nav .bp-res__toggle:hover,
.bp-header .bp-nav .bp-res__toggle:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  background: transparent !important;   /* Astra paints every <button> with its accent */
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  line-height: inherit;
}
.bp-header .bp-res__caret {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.bp-header .bp-res-item.is-open .bp-res__caret { transform: translateY(3px) rotate(225deg); }
.bp-header .bp-nav .elementor-nav-menu--main .bp-res-item { position: relative; }
.bp-header .bp-nav .elementor-nav-menu--main .bp-res-item.is-open > .bp-res__toggle { color: #F7941D; }

.bp-header .bp-res {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  width: min(760px, calc(100vw - 48px));
  overflow: hidden;
  transform: translateX(-50%);
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  box-shadow: 0 32px 64px -32px rgba(26, 26, 26, .22);
  text-align: left;
  white-space: normal;
}
.bp-header .bp-res[hidden] { display: none; }
.bp-header .bp-res::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; } /* hover bridge */
.bp-header .bp-res__intro { position: relative; overflow: hidden; padding: 32px; background: #F6F4F0; }
.bp-header .bp-res__eyebrow { margin: 0 0 12px; font: 500 12px/1.4 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #555555; }
.bp-header .bp-res__lede { position: relative; z-index: 1; margin: 0; max-width: 22ch; font: 700 22px/1.25 "Manrope", sans-serif; letter-spacing: -.01em; color: #1A1A1A; }
.bp-header .bp-res__geo { position: absolute; right: -40px; bottom: -36px; width: 200px; height: auto; }
.bp-header .bp-res__list { display: block; margin: 0; padding: 16px 32px; }
.bp-header .bp-res__row { display: block; margin: 0; border-top: 1px solid #E8E8E8; }
.bp-header .bp-res__row:first-child { border-top: 0; }
.bp-header .bp-nav .bp-res .bp-res__link { display: block; padding: 18px 0; line-height: normal; text-decoration: none; white-space: normal; border-radius: 2px; }
.bp-header .bp-res__title {
  display: block;
  font: 600 20px/1.25 "Manrope", sans-serif;
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
.bp-header .bp-res__desc { display: block; margin-top: 4px; font: 400 14px/1.5 "Inter", sans-serif; color: #555555; }
.bp-header .bp-res .bp-res__link:hover .bp-res__title,
.bp-header .bp-res .bp-res__link:focus-visible .bp-res__title { text-decoration-color: #F7941D; }
.bp-header .bp-res .bp-res__link:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }

/* ---------- mobile accordion (inside the full-screen overlay) ---------- */
.bp-mobile-panel .bp-nav-mobile .bp-res-acc__toggle,
.bp-mobile-panel .bp-nav-mobile .bp-res-acc__toggle:hover,
.bp-mobile-panel .bp-nav-mobile .bp-res-acc__toggle:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  background: transparent !important;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}
.bp-mobile-panel .bp-res-acc__toggle .bp-res__caret {
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 4px 0 0;
  border: 0;
  transform: none;
}
.bp-mobile-panel .bp-res-acc__toggle .bp-res__caret::before,
.bp-mobile-panel .bp-res-acc__toggle .bp-res__caret::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform .2s ease; }
.bp-mobile-panel .bp-res-acc__toggle .bp-res__caret::after { transform: rotate(90deg); }
.bp-mobile-panel .bp-res-acc-item.is-open .bp-res-acc__toggle .bp-res__caret::after { transform: rotate(0deg); }
.bp-mobile-panel .bp-res-acc { display: block; margin: 0; padding: 4px 0 14px 16px; border-bottom: 1px solid #E8E8E8; }
.bp-mobile-panel .bp-res-acc[hidden] { display: none; }
.bp-mobile-panel .bp-res-acc-item.is-open > .bp-res-acc__toggle { border-bottom-color: transparent; }
.bp-mobile-panel .bp-nav-mobile .bp-res-acc .bp-res-acc__link {
  display: block;
  padding: 12px 0;
  font: 500 19px/1.3 "Inter", sans-serif;
  color: #1A1A1A;
  text-decoration: none;
}
.bp-mobile-panel .bp-res-acc .bp-res-acc__link:hover { color: #F7941D; }

@media (prefers-reduced-motion: reduce) {
  .bp-header .bp-res__caret, .bp-header .bp-res__title,
  .bp-mobile-panel .bp-res-acc__toggle .bp-res__caret::before,
  .bp-mobile-panel .bp-res-acc__toggle .bp-res__caret::after { transition: none; }
}

/* ---------- BP-SVCMENU:START  Services disclosure (Phase 12.18) ----------
   Same panel as Resources; the list is "All services" on top, then the services as icon rows
   (Phosphor Icons, regular) in two columns, after phixer.net's Services menu. The panel opens
   from the item's left edge because Services is the first menu item. */
.bp-header .bp-res.bp-res--svc { left: 0; transform: none; width: min(780px, calc(100vw - 48px)); }
.bp-header .bp-res.bp-res--svc .bp-res__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-content: start; padding: 12px 28px 20px; }
.bp-header .bp-res.bp-res--svc .bp-res__row { border-top: 0; }
.bp-header .bp-res.bp-res--svc .bp-res__row--all { grid-column: 1 / -1; margin-bottom: 8px; border-bottom: 1px solid #E8E8E8; }
.bp-header .bp-nav .bp-res.bp-res--svc .bp-res__link { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.bp-header .bp-nav .bp-res.bp-res--svc .bp-res__row--all .bp-res__link { justify-content: space-between; padding: 16px 0; }
.bp-header .bp-res.bp-res--svc .bp-res__title { font-size: 16px; line-height: 1.3; }
.bp-header .bp-res.bp-res--svc .bp-res__row--all .bp-res__title { font-size: 20px; }
.bp-header .bp-res__ico,
.bp-mobile-panel .bp-res__ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid #E8E8E8; border-radius: 10px; background: #FFFFFF; color: #1A1A1A;
  transition: border-color .2s ease, background-color .2s ease;
}
.bp-header .bp-res__ico svg, .bp-mobile-panel .bp-res__ico svg { width: 18px; height: 18px; }
.bp-header .bp-res__arrow, .bp-mobile-panel .bp-res__arrow { display: inline-flex; color: #1A1A1A; }
.bp-header .bp-res__arrow svg, .bp-mobile-panel .bp-res__arrow svg { width: 18px; height: 18px; }
.bp-header .bp-res .bp-res__link:hover .bp-res__ico,
.bp-header .bp-res .bp-res__link:focus-visible .bp-res__ico { border-color: #F7941D; background: #FFF6EA; }

/* phone overlay */
.bp-mobile-panel .bp-nav-mobile .bp-res-acc .bp-res-acc__link.bp-res-acc__link--all {
  display: flex; align-items: center; justify-content: space-between; font-weight: 600;
}
.bp-mobile-panel .bp-nav-mobile .bp-res-acc .bp-res-acc__link.bp-res-acc__link--ico { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.bp-mobile-panel .bp-res-acc .bp-res-acc__link--ico:hover .bp-res__ico { border-color: #F7941D; }
.bp-mobile-panel .bp-res-acc--svc .bp-res__ico { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) { .bp-header .bp-res__ico, .bp-mobile-panel .bp-res__ico { transition: none; } }

/* Resources rows (Phase 12.19): icon + title + one line, compact so six rows fit comfortably */
.bp-header .bp-nav .bp-res.bp-res--res .bp-res__row--desc .bp-res__link { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.bp-header .bp-res.bp-res--res .bp-res__row--desc .bp-res__ico { margin-top: 2px; }
.bp-header .bp-res.bp-res--res .bp-res__txt { display: block; min-width: 0; }
.bp-header .bp-res.bp-res--res .bp-res__desc { margin-top: 2px; }
.bp-mobile-panel .bp-res-acc--res .bp-res__ico { width: 36px; height: 36px; }
/* ---------- BP-SVCMENU:END ---------- *//* End custom CSS */