:root{ --bp-green:#ACD04D; --bp-blue:#2E368F; --bp-ink:#1a1c2e; }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:100px; }
  body{ margin:0; font-family:'Poppins',sans-serif; color:#1a1c2e; background:#fff; -webkit-font-smoothing:antialiased; }
  a{ color:#2E368F; text-decoration:none; }
  a:hover{ color:#677f2a; }
  img{ max-width:100%; }
  ::selection{ background:#ACD04D; color:#20242e; }
  .bp-underline{ background-image:linear-gradient(#ACD04D,#ACD04D); background-size:0% 3px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .35s ease; }
  .bp-nav-link:hover{ color:#2E368F; }
  .bp-nav-link:hover .bp-underline,.bp-nav-link:hover.bp-underline{ background-size:100% 3px; }
  .bp-business-hours{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:#fff; opacity:.9; white-space:nowrap; }
  .bp-business-hours i{ color:#ACD04D; }
  .bp-footer-grid .bp-nav-link:hover{ color:#ACD04D; }
  .bp-footer-credits{ display:flex; flex-direction:column; gap:7px; }
  .bp-footer-heart{ color:#f28b82; margin:0 3px; }
  .bp-footer-location{ display:inline-flex; align-items:center; gap:7px; color:inherit; }
  .bp-footer-place{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
  .bp-footer-tagline{ color:#8f94b4; }
  .bp-footer-accessibility{ margin:20px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:12.5px; color:#8f94b4; line-height:1.5; }
  .bp-footer-accessibility i{ margin-right:7px; color:#ACD04D; }
  /* manual motion switch — border is .40 alpha, not .22, so the control's own
     boundary clears 3:1 on the footer (1.4.11); .22 measured 1.96:1 */
  .bp-footer-motion{ margin-top:14px; text-align:center; }
  .bp-motion-toggle{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border:1px solid rgba(255,255,255,.40); border-radius:50rem; background:none; color:#c8ccdd; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .bp-motion-toggle:hover{ border-color:#ACD04D; color:#fff; }
  .bp-motion-toggle i{ font-size:17px; line-height:1; margin:0; }
  .bp-motion-toggle[aria-pressed="true"]{ border-color:#ACD04D; color:#fff; }
  .bp-motion-toggle[aria-pressed="true"] i{ color:#ACD04D; }
  .bp-btn{ transition:transform .18s ease, box-shadow .25s ease; }
  .bp-btn:hover{ color:#20242e; transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(172,208,77,1); }
  .bp-wa{ transition:transform .18s ease, box-shadow .25s ease; }
  .bp-wa:hover{ color:#0b0e26; transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(37,211,102,1); }
  .bp-whatsapp-float{ position:fixed; right:24px; bottom:24px; z-index:80; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; font-size:27px; box-shadow:0 14px 34px -10px rgba(37,211,102,.9); transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease; }
  .bp-whatsapp-float:hover{ color:#fff; transform:translateY(-3px) scale(1.04); box-shadow:0 18px 38px -10px rgba(37,211,102,1); }
  .bp-whatsapp-float.is-hidden{ opacity:0; transform:translateY(14px) scale(.92); pointer-events:none; }
  .bp-topstack{ position:sticky; top:0; z-index:60; }
  /* thin compact nav that slides in after scrolling past the header on mobile */
  .bp-sticky-nav{ position:fixed; top:0; left:0; right:0; z-index:70; background:rgba(255,255,255,.6); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.55); box-shadow:0 10px 30px -16px rgba(20,26,70,.5); transform:translateY(-102%); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; }
  .bp-sticky-nav.bp-show{ transform:translateY(0); visibility:visible; transition:transform .3s ease, visibility 0s linear 0s; }
  @media (min-width:768px){ .bp-sticky-nav{ display:none !important; } }
  @media (max-width:767px){ .bp-topstack{ position:static; } }
  /* hero eyebrow: underlined lead-in above the headline (no pill) */
  .bp-hero-eyebrow{ display:inline-block; margin:0 0 14px; padding-bottom:9px; border-bottom:3px solid #ACD04D; color:#dbe9b0; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
  @media (max-width:560px){ .bp-hero-eyebrow{ margin-bottom:11px; padding-bottom:7px; border-bottom-width:2px; font-size:11.5px; letter-spacing:.05em; } }
  .bp-prose h2{ font-size:28px; font-weight:800; color:#171a2b; margin:36px 0 14px; letter-spacing:-.02em; }
  .bp-prose h3{ font-size:20px; font-weight:700; color:#1c2033; margin:28px 0 10px; }
  .bp-prose p{ font-size:17px; line-height:1.75; color:#4a4f66; margin:0 0 16px; }
  .bp-prose ul{ margin:0 0 20px; padding-left:22px; color:#4a4f66; font-size:16.5px; line-height:1.7; }
  .bp-prose li{ margin-bottom:8px; }
  .bp-growth-note{ margin:30px 0 34px; padding:26px 28px; border:1px solid #dce9b8; border-left:4px solid #ACD04D; border-radius:18px; background:linear-gradient(135deg,#f1f6e3,#fafcf5); }
  .bp-prose .bp-growth-note h2{ margin:6px 0 10px; font-size:23px; }
  .bp-prose .bp-growth-note p{ margin:0 0 10px; font-size:15.5px; }
  .bp-growth-note-label{ color:#5e791c; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .bp-prose .bp-growth-note strong{ color:#2E368F; }
  .bp-rel{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 2px; color:#2E368F; font-weight:600; font-size:14.5px; border-bottom:1px solid #f0f2f6; }
  .bp-rel:last-of-type{ border-bottom:none; }
  .bp-rel i{ font-size:11px; color:#677f2a; transition:transform .2s ease; }
  .bp-rel:hover i{ transform:translateX(4px); }
  @media (max-width:860px){
    .bp-desktop-nav{ display:none !important; }
    .bp-hamburger{ display:inline-flex !important; }
    .bp-hide-sm{ display:none !important; }
    .bp-section-pad{ padding-left:22px !important; padding-right:22px !important; }
    .bp-footer-grid{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
    .bp-hero-h1{ font-size:34px !important; }
    main h2{ font-size:26px !important; }
    .bp-header-cta{ font-size:13px !important; padding:9px 15px !important; gap:6px !important; white-space:nowrap !important; box-shadow:0 6px 16px -8px rgba(172,208,77,.8) !important; }
    .bp-header-cta i{ display:none !important; }
  }
  @media (max-width:900px){
    .bp-landing-grid{ grid-template-columns:1fr !important; }
    .bp-landing-aside{ position:static !important; }
  }
  @media (max-width:560px){
    .bp-section-pad{ padding-left:16px !important; padding-right:16px !important; }
    .bp-footer-grid{ grid-template-columns:1fr !important; }
    .bp-footer-place{ align-items:flex-start; }
    .bp-whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; font-size:25px; }
    .bp-hero-h1{ font-size:28px !important; }
  }
/* Shared extracted landing-page layout utilities */
.u-page-13b9f6e9{color:#2E368F; width:18px;}
.u-page-145eabd5{font-size:18.5px; line-height:1.6; color:#c9cde3; max-width:58ch; margin:0 0 28px; font-weight:300;}
.u-page-1a93d187{color:#2E368F; font-weight:600; font-size:15px;}
.u-page-1cd276cf{margin:0 8px; opacity:.5;}
.u-page-1f2de121{background:#ACD04D; color:#20242e; font-weight:700; font-size:15px; padding:11px 22px; border-radius:50rem; display:inline-flex; align-items:center; gap:9px; box-shadow:0 8px 22px -8px rgba(172,208,77,.85);}
.u-page-1f914279{margin-left:auto; display:flex; align-items:center; gap:14px;}
.u-page-2038c69e{background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-bottom:1px solid #eef0f5;}
.u-page-260b9d60{font-size:13px; color:#9fa4c4; margin-bottom:22px;}
.u-page-2ece2e11{font-size:14.5px; line-height:1.6; color:#5b6076; margin:0 0 12px;}
.u-page-38c53de1{height:52px; width:auto;}
.u-page-3d1843fc{max-width:1100px; margin:0 auto; padding:0 40px;}
.u-page-3e21bba3{max-width:1280px; margin:0 auto; padding:12px 40px; display:flex; align-items:center; gap:30px;}
.u-page-4224b68a{display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:#8f94b4;}
.u-page-463e35d4{position:sticky; top:110px;}
.u-page-4f1925a8{font-size:18px;}
.u-page-5385bc70{margin-top:36px; background:linear-gradient(100deg,#2E368F,#3a44b0); border-radius:20px; padding:28px 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;}
.u-page-59166ba9{display:flex; align-items:center;}
.u-page-645096db{color:#20242e;}
.u-page-65254cdf{border:1px solid #ebedf3; border-radius:20px; padding:12px 24px 10px; background:#fff; box-shadow:0 18px 40px -30px rgba(20,26,70,.35); margin-bottom:20px;}
.u-page-6906387d{color:#ACD04D; width:18px;}
.u-page-6c37c006{font-size:15px; color:#cdd2ee;}
.u-page-70981ef4{max-width:1280px; margin:0 auto; padding:9px 40px; display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;}
.u-page-714a50e5{color:#fff; display:inline-flex; align-items:center; gap:7px;}
.u-page-7876ea64{font-size:14.5px; line-height:1.6; max-width:34ch; margin:0 0 22px; color:#8f94b4;}
.u-page-7a879a76{background:linear-gradient(105deg,#0e1230 0%,#141a46 55%,#1a2258 100%); color:#fff; padding:72px 0 64px;}
.u-page-836a02cc{border:1px solid #ebedf3; border-radius:20px; padding:24px; background:#fff; box-shadow:0 18px 40px -30px rgba(20,26,70,.35);}
.u-page-85832e85{display:flex; flex-direction:column; gap:12px; font-size:14.5px;}
.u-page-887712da{font-size:22px; font-weight:800; color:#fff; margin-bottom:4px;}
.u-page-8c4cc38d{background:#ACD04D; color:#20242e; font-weight:700; font-size:16px; padding:14px 26px; border-radius:50rem; display:inline-flex; align-items:center; gap:10px;}
.u-page-8d2d7ddb{background:#ACD04D; color:#20242e; font-weight:700; font-size:15px; padding:13px 24px; border-radius:50rem; display:inline-flex; align-items:center; gap:9px;}
.u-page-913faebc{max-width:1100px; margin:0 auto; padding:64px 40px 80px;}
.u-page-92d750e7{font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#677f2a; margin:0 0 14px; font-weight:700;}
.u-page-93a4fd24{display:inline-flex; align-items:center; gap:11px; background:#25D366; color:#0b0e26; font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:50rem;}
.u-page-9efd4fbe{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#677f2a; margin:12px 0 4px; font-weight:700;}
.u-page-9fba240c{color:#a7abc7;}
.u-page-a096f1dc{display:flex; flex-direction:column;}
.u-page-b1896050{display:none; align-items:center; justify-content:center; width:44px; height:44px; border:none; background:#f3f5f9; border-radius:12px; cursor:pointer; color:#20242e; font-size:18px;}
.u-page-b35633dc{border-top:1px solid rgba(255,255,255,.08); margin-top:44px; padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13px; color:#757a98;}
.u-page-bd6f51b1{background:#0b0e26; color:#a7abc7; padding:64px 0 30px;}
.u-page-bd90d77e{display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:start;}
.u-page-bdc8ab4d{display:flex; align-items:center; gap:30px; margin-left:14px; font-weight:500; font-size:15px; color:#20242e;}
.u-page-c0d69369{text-transform:uppercase; font-size:12.5px; letter-spacing:.1em; color:#fff; font-weight:700; margin:0 0 18px;}
.u-page-c3d04c86{display:grid; grid-template-columns:1.4fr 0.8fr 1.9fr 1fr; gap:40px;}
.bp-footer-sol{display:block; column-count:2; column-gap:28px;}
.bp-footer-sol .bp-nav-link{display:block; margin:0 0 12px; break-inside:avoid;}
@media (max-width:560px){ .bp-footer-sol{ column-count:1; } }
.u-page-cbe85e3f{height:64px; width:auto; margin-bottom:20px;}
.u-page-cc50b072{background:#2E368F; color:#fff; font-size:13.5px;}
.u-page-cc50b072 .bp-nav-link:hover{ color:#ACD04D; }
@media (max-width:900px){ .bp-business-hours{ margin-left:0; } }
.u-page-d2978b7c{font-size:48px; line-height:1.08; font-weight:800; margin:0 0 18px; letter-spacing:-.02em; max-width:18ch;}
.u-page-db7496f0{color:#ACD04D;}
.u-page-dbe1a6ce{max-width:1220px; margin:0 auto; padding:0 40px;}
.u-page-f29c0951{width:100%; border-radius:20px; margin-bottom:28px; aspect-ratio:16/9; object-fit:cover; box-shadow:0 24px 50px -28px rgba(20,26,70,.45);}
.u-page-f9eec3a8{font-size:14.5px; line-height:1.6; color:#5b6076; margin:0;}
.u-page-3d8c7026{max-width:1280px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; gap:12px;}
.u-page-83458ffd{height:36px; width:auto;}
.u-page-ed22ddaa{margin-left:auto; background:#ACD04D; color:#20242e; font-weight:700; font-size:13px; padding:9px 16px; border-radius:50rem; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; box-shadow:0 8px 18px -8px rgba(172,208,77,.85);}
.u-page-f0837376{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:#f3f5f9; border-radius:10px; cursor:pointer; color:#20242e; font-size:17px;}

/* ---- mobile nav bottom sheet ----
   Slides up from the bottom edge so the links land under the thumb on phones.
   Lives outside .bp-topstack / .bp-sticky-nav (both create containing blocks
   for fixed children) and is shared by the header and sticky burgers. */
.bp-sheet-scrim{ position:fixed; inset:0; z-index:88; background:rgba(11,14,38,.5); opacity:0; visibility:hidden; touch-action:none; transition:opacity .32s ease, visibility 0s linear .32s; }
.bp-sheet-scrim.bp-sheet-open{ opacity:1; visibility:visible; transition:opacity .32s ease, visibility 0s linear 0s; }
.bp-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; flex-direction:column;
  padding:0 20px calc(20px + env(safe-area-inset-bottom,0px)); max-height:78vh; overflow-y:auto; overscroll-behavior:contain;
  background:#fff; border-radius:26px 26px 0 0; box-shadow:0 -22px 60px -18px rgba(20,26,70,.55);
  transform:translateY(101%); visibility:hidden;
  transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear .42s; }
.bp-sheet.bp-sheet-open{ transform:translateY(0); visibility:visible; transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s; }
/* grab handle doubles as a wide close target at the top of the sheet */
.bp-sheet-grip{ display:block; width:100%; padding:14px 0 16px; border:none; background:none; cursor:pointer; }
.bp-sheet-grip span{ display:block; width:44px; height:5px; margin:0 auto; border-radius:99px; background:#8795b5; transition:background .2s ease; }
.bp-sheet-grip:active span{ background:#c2c7d6; }
.bp-snav{ display:block; padding:15px 6px; color:#20242e; font-size:16.5px; font-weight:500; border-bottom:1px solid #f2f3f7; opacity:0; transform:translateY(16px); transition:opacity .3s ease, transform .3s ease; }
.bp-snav:last-of-type{ color:#2E368F; font-weight:600; border-bottom:none; }
/* links stagger in behind the sheet so it reads as one motion */
.bp-sheet.bp-sheet-open .bp-snav{ opacity:1; transform:none; }
.bp-sheet.bp-sheet-open .bp-snav:nth-of-type(1){ transition-delay:.10s; }
.bp-sheet.bp-sheet-open .bp-snav:nth-of-type(2){ transition-delay:.14s; }
.bp-sheet.bp-sheet-open .bp-snav:nth-of-type(3){ transition-delay:.18s; }
.bp-sheet.bp-sheet-open .bp-snav:nth-of-type(4){ transition-delay:.22s; }
.bp-sheet.bp-sheet-open .bp-snav:nth-of-type(5){ transition-delay:.26s; }
html.bp-sheet-lock,html.bp-sheet-lock body{ overflow:hidden; }
@media (min-width:861px){ .bp-sheet,.bp-sheet-scrim{ display:none; } }
@media (prefers-reduced-motion:reduce){ .bp-sheet,.bp-sheet-scrim,.bp-snav{ transition-duration:.01s !important; transition-delay:0s !important; } }

/* ---- accessibility primitives ----
   --bp-focus flips to the brand green inside dark sections so the ring always
   clears 3:1 against whatever it sits on (1.4.11); everywhere else it is the
   brand blue at 10.3:1 on white. */
:root{ --bp-focus:#2E368F; }
:focus-visible{ outline:3px solid var(--bp-focus); outline-offset:2px; }
/* the skip-link target is focused programmatically, not operated — a ring
   around the whole page would be noise */
#bp-main:focus{ outline:none; }

.bp-skip{ position:fixed; left:10px; top:-120px; z-index:200;
  padding:12px 20px; border-radius:0 0 12px 12px;
  background:#fff; color:#2E368F; font-weight:700; font-size:15px;
  box-shadow:0 12px 30px -12px rgba(20,26,70,.65); transition:top .18s ease; }
.bp-skip:focus{ top:0; color:#2E368F; }

/* visually hidden, still announced */
.bp-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* dark grounds: swap the focus ring to green so it stays visible */
.u-page-7a879a76,.u-page-5385bc70,.u-page-bd6f51b1,.u-page-cc50b072,.bp-nf-band{ --bp-focus:#ACD04D; }
/* inline prose links carry only a 1.27:1 colour difference from the body text,
   so they need a non-colour cue as well (1.4.1) */
.bp-prose p a,.bp-prose li a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.bp-prose p a:hover,.bp-prose li a:hover{ text-decoration-thickness:2px; }

/* ============================================================
   Search-first recovery page (404) and search results.
   Two full-bleed bands: flat brand blue carrying the message and the search
   field, then white carrying the category chips.

   Three colours in the design handoff are deliberately NOT used, because they
   fail WCAG 2.1 AA and this site claims AA conformance:
     - placeholder #8b8b8b on white is 3.41:1 (1.4.3 needs 4.5) -> #6c757d, 4.69:1
     - chip border rgba(46,54,143,.22) is 1.48:1 (1.4.11 needs 3) -> .60, 3.45:1
     - focus ring #d6e8a6 on white is 1.32:1 (1.4.11 needs 3) -> the site's own
       --bp-focus system, which is 10.29:1 on white and 5.82:1 on the blue band
   Everything else matches the handoff as specified.
   ============================================================ */

/* ---- blue band ---- */
.bp-nf-band{ position:relative; background:#2E368F; padding:56px 0 52px; }
/* The two lights below have to be clipped to the band; the suggestion dropdown
   under the search field must not be, and it is far taller than the padding it
   hangs into. So the clip lives on this layer rather than on the band. */
.bp-nf-band-glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bp-nf-band-slim{ padding:40px 0 36px; }
/* horizontal padding matches the site container, not the handoff's 64px, so the
   band's content lines up with the navbar and footer above and below it */
.bp-nf-band-inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 40px; text-align:center; }

/* Two soft lights drifting behind the band. Purely decorative: pseudo-elements
   carry no text, sit behind the content and are never announced. Both stop
   under prefers-reduced-motion, and the band still reads as flat brand blue
   with them switched off. */
.bp-nf-band-glow::before,.bp-nf-band-glow::after{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; }
.bp-nf-band-glow::before{ top:-270px; left:-170px; background:radial-gradient(circle,rgba(172,208,77,.17),rgba(172,208,77,0) 68%); animation:bp-drift-a 26s ease-in-out infinite alternate; }
.bp-nf-band-glow::after{ bottom:-300px; right:-190px; background:radial-gradient(circle,rgba(255,255,255,.11),rgba(255,255,255,0) 68%); animation:bp-drift-b 33s ease-in-out infinite alternate; }
@keyframes bp-drift-a{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(96px,58px,0); } }
@keyframes bp-drift-b{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-74px,-52px,0); } }

/* A slow halo off the medallion, pulling the eye to the search metaphor. */
.bp-nf-medallion::after{ content:""; position:absolute; inset:-9px; border-radius:50rem; border:1px solid rgba(172,208,77,.45); animation:bp-halo 3.4s ease-out infinite; }
@keyframes bp-halo{ 0%{ transform:scale(.88); opacity:.75; } 70%{ transform:scale(1.28); opacity:0; } 100%{ transform:scale(1.28); opacity:0; } }

/* Entrance: finite, well under the 5s that would make it "moving content". */
@keyframes bp-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.bp-nf-band .bp-nf-medallion,.bp-nf-band .bp-nf-title,.bp-nf-band .bp-nf-sub,.bp-nf-band .bp-nf-did,.bp-nf-band .bp-search{ animation:bp-rise .5s cubic-bezier(.4,0,.2,1) both; }
.bp-nf-band .bp-nf-title{ animation-delay:.07s; }
.bp-nf-band .bp-nf-sub{ animation-delay:.14s; }
.bp-nf-band .bp-nf-did{ animation-delay:.2s; }
.bp-nf-band .bp-search{ animation-delay:.26s; }
.bp-nf-medallion{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50rem; background:rgba(255,255,255,.10); margin-bottom:22px; }
.bp-nf-medallion i{ font-size:22px; color:#ACD04D; }

/* Typographic headline: a light, quieter first line set against a heavy second
   line, with the promise picked out in brand green. The size ratio does the
   work, so it still reads as one sentence at any width. */
.bp-nf-title{ margin:0 0 12px; font-size:44px; line-height:1.06; color:#fff; text-wrap:balance; }
/* Lowercased in CSS, not in the markup, so the heading's accessible name keeps
   its natural capitalisation. Medium weight gives it presence without competing
   with the 800 below it — the contrast now rides on case, size and colour. */
.bp-nf-title-lead{ display:block; font-size:.46em; font-weight:500; line-height:1.3; letter-spacing:.04em; text-transform:lowercase; color:rgba(255,255,255,.72); margin-bottom:.42em; }
.bp-nf-title-main{ display:block; font-weight:800; letter-spacing:-.025em; }
.bp-nf-title-accent{ color:#ACD04D; }
/* the results page reuses the band but wants a plain, quiet heading */
.bp-nf-title-sm{ font-size:24px; font-weight:600; line-height:1.2; margin-bottom:18px; }
.bp-nf-sub{ margin:0 auto 26px; max-width:460px; font-size:16px; line-height:1.5; color:rgba(255,255,255,.75); }
/* near-miss guess from the URL resolver; green on blue is 5.82:1 and the
   underline carries the meaning without relying on colour (1.4.1) */
.bp-nf-did{ margin:0 auto 18px; font-size:15px; color:rgba(255,255,255,.85); }
.bp-nf-did a{ color:#ACD04D; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.bp-nf-did a:hover{ color:#c7e07a; text-decoration-thickness:2px; }

/* ---- search control ---- */
.bp-search{ position:relative; max-width:520px; margin:0 auto; }
.bp-search-row{ display:flex; gap:10px; }
.bp-search-field{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; padding:0 18px; height:48px; background:#fff; border:1px solid #fff; border-radius:50rem; }
/* the ring goes on the pill, not the bare input, so it traces the control the
   user actually sees */
.bp-search-field:focus-within{ outline:3px solid var(--bp-focus); outline-offset:2px; }
.bp-search-input:focus,.bp-search-input:focus-visible{ outline:none; }
.bp-search-icon{ font-size:15px; color:#6c757d; flex:none; }
.bp-search-input{ flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:15px; color:#20242e; }
.bp-search-input::placeholder{ color:#6c757d; opacity:1; }
.bp-search-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 24px; border:none; border-radius:50rem; background:#ACD04D; color:#212529; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.bp-search-btn i{ font-size:13px; transition:transform 150ms cubic-bezier(.4,0,.2,1); }
.bp-search-btn:hover i{ transform:translateX(3px); }
.bp-search-plain .bp-search-field{ border-color:#e9ecef; }

/* ---- suggestion dropdown ---- */
/* These two variants render the same grouped results the navbar panel does —
   the difference is only that theirs floats under the field. So the card is the
   results wrapper, not the listbox: the zero-match line, the skeleton, the rows
   and the see-all footer all sit inside one card. */
.bp-search-list{ margin:0; padding:0; list-style:none; text-align:left; }
.bp-search-list[hidden]{ display:none; }
.bp-search-band .bp-search-results,.bp-search-plain .bp-search-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40; padding:6px; text-align:left; background:#fff; border:1px solid #e9ecef; border-radius:16px; box-shadow:0 22px 50px -24px rgba(20,26,70,.55); }
/* the rows scroll, not the card, so the zero-match line above them and the
   see-all row below stay in view — the same split the panel uses */
.bp-search-band .bp-search-list,.bp-search-plain .bp-search-list{ max-height:min(46vh,300px); overflow-y:auto; }
.bp-search-band .bp-search-zero,.bp-search-plain .bp-search-zero{ padding:10px 12px 4px; }

/* ---- white section ---- */
.bp-nf-browse{ background:#fff; padding:40px 0 56px; }
.bp-nf-browse-inner{ max-width:1100px; margin:0 auto; padding:0 40px; text-align:center; }
.bp-nf-overline{ display:flex; align-items:center; gap:14px; margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#2E368F; }
.bp-nf-rule{ flex:1; height:1px; background:#e9ecef; }
.bp-nf-overline-sm{ display:none; }

/* ---- category chips ---- */
.bp-nf-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0; padding:0; list-style:none; }
.bp-nf-chip{ display:inline-block; padding:9px 18px; border:1px solid rgba(46,54,143,.60); border-radius:50rem; background:#fff; font-size:15px; font-weight:500; color:#2E368F; transition:background 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1); }
.bp-nf-chip:hover{ background:#ACD04D; border-color:#ACD04D; color:#212529; }
.bp-nf-chip-all{ background:#2E368F; border-color:#2E368F; color:#fff; }
.bp-nf-chip-all-li{ display:none; }

/* ---- results, intent and empty states ---- */
.bp-nf-results{ display:grid; gap:12px; margin:0 0 36px; padding:0; list-style:none; text-align:left; }
.bp-nf-result{ display:block; padding:16px 20px; border:1px solid #e9ecef; border-radius:18px; background:#fff; box-shadow:0 18px 40px -30px rgba(20,26,70,.35); transition:border-color 150ms cubic-bezier(.4,0,.2,1), transform 150ms cubic-bezier(.4,0,.2,1); }
.bp-nf-result:hover{ border-color:#ACD04D; transform:translateY(-2px); }
.bp-nf-result-label{ display:block; font-size:17px; font-weight:600; color:#2E368F; }
.bp-nf-result-blurb{ display:block; margin-top:4px; font-size:14.5px; line-height:1.6; color:#5b6076; }
.bp-nf-intent{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 24px; padding:16px 22px; border:1px solid #dce9b8; border-left:4px solid #ACD04D; border-radius:18px; background:linear-gradient(135deg,#f1f6e3,#fafcf5); font-size:16px; color:#4a4f66; }
.bp-nf-intent i{ color:#5e791c; }
.bp-nf-intent a{ font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.bp-nf-empty{ margin:0 0 36px; font-size:16.5px; line-height:1.6; color:#4a4f66; }
.bp-nf-empty a{ font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }

/* ---- single breakpoint, per the handoff ---- */
@media (max-width:767px){
  .bp-nf-band{ padding:38px 0 32px; }
  .bp-nf-band-slim{ padding:30px 0 26px; }
  .bp-nf-band-inner,.bp-nf-browse-inner{ padding-left:20px; padding-right:20px; }
  .bp-nf-medallion{ width:52px; height:52px; margin-bottom:18px; }
  .bp-nf-medallion i{ font-size:20px; }
  .bp-nf-title{ font-size:30px; line-height:1.1; margin-bottom:10px; }
  .bp-nf-title-lead{ font-size:.5em; letter-spacing:.03em; }
  .bp-nf-title-sm{ font-size:20px; line-height:1.25; }
  .bp-nf-band-glow::before,.bp-nf-band-glow::after{ width:340px; height:340px; }
  .bp-nf-sub{ font-size:15px; margin-bottom:20px; }
  .bp-search-row{ flex-direction:column; }
  .bp-search-btn{ width:100%; }
  /* the button sits between field and list on mobile, so drop the list below it */
  .bp-nf-browse{ padding:28px 0 32px; }
  .bp-nf-overline{ gap:12px; margin-bottom:16px; font-size:11px; }
  .bp-nf-overline-lg{ display:none; }
  .bp-nf-overline-sm{ display:inline; }
  .bp-nf-chips{ gap:8px; }
  .bp-nf-chip{ padding:11px 16px; font-size:14px; }   /* >=44px tap target */
  .bp-nf-chip-wide{ display:none; }
  .bp-nf-chip-all-li{ display:inline-block; }
}

@media (prefers-reduced-motion:reduce){
  .bp-nf-chip,.bp-nf-result,.bp-search-btn i{ transition:none; }
  .bp-nf-result:hover{ transform:none; }
  .bp-search-btn:hover i{ transform:none; }
  /* every moving part stops, and nothing is left mid-animation or invisible */
  .bp-nf-band-glow::before,.bp-nf-band-glow::after,.bp-nf-medallion::after{ animation:none; }
  .bp-nf-medallion::after{ opacity:0; }
  .bp-nf-band .bp-nf-medallion,.bp-nf-band .bp-nf-title,.bp-nf-band .bp-nf-sub,.bp-nf-band .bp-nf-did,.bp-nf-band .bp-search{ animation:none; opacity:1; transform:none; }
}
/* The footer switch reaches the same end state as the media query above. The
   global rule in head.php collapses every duration, which lands bp-rise on its
   fill-mode end state (visible); the halo has no fill mode, so it needs saying. */
html.bp-no-motion .bp-nf-medallion::after{ opacity:0; }

/* ═══════════════ NAVBAR SEARCH ═══════════════
   Trigger in the header row, full-bleed panel under it on desktop, full-screen
   overlay on phones. Self-contained on purpose: index.css carries no search
   rules of its own, so everything the panel and overlay need is stated here and
   the same block drops into both stylesheets unchanged. The hero field on the
   404 keeps its own rules above and is untouched by any selector below. */

/* ---- trigger ---- */
/* An <a href="search.html"> until search.js upgrades it, so it still goes
   somewhere with JS off. 44px high: WCAG 2.5.5 target size. */
.bp-search-trigger{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 17px; border:1px solid rgba(46,54,143,.55); border-radius:50rem; background:#fff; color:#2E368F; font-family:inherit; font-size:15px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; transition:background 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1); }
.bp-search-trigger i{ font-size:14px; }
.bp-search-trigger:hover{ border-color:#2E368F; background:#f5f7fd; color:#2E368F; }
.bp-search-trigger[aria-expanded="true"]{ border-color:#2E368F; background:#eef2fb; }
/* icon-only: drops the label and the side padding, but keeps the base pill
   radius so it matches the CTA beside it and the labelled trigger above 1080 */
.bp-search-trigger-icon{ width:44px; padding:0; font-size:16px; }
/* the sticky bar's margin-left:auto moves from the CTA onto the trigger so the
   three targets group to the right; the u-page utilities stay unedited */
.bp-sticky-nav .bp-search-trigger{ margin-left:auto; }
.bp-sticky-nav .bp-btn{ margin-left:0; height:44px; padding:0 13px; font-size:12.5px; }
.bp-sticky-nav .bp-btn i{ display:none; }
/* the u-page/u-home utility gives it a 10px radius; the sticky bar wants the
   same pill as the trigger and the CTA either side of it */
.bp-sticky-nav .bp-sticky-burger{ width:44px; height:44px; border-radius:50rem; }

/* ---- scrim ---- */
/* Below .bp-topstack's z-index:60 so the open panel stays lit above it, and
   above every page section. The nav sheet's scrim sits at 88 and would cover
   the panel, so search gets its own. */
.bp-search-scrim{ position:fixed; inset:0; z-index:55; background:rgba(11,14,38,.5); opacity:0; visibility:hidden; touch-action:none; transition:opacity 220ms ease, visibility 0s linear 220ms; }
.bp-search-scrim.bp-search-open{ opacity:1; visibility:visible; transition:opacity 220ms ease, visibility 0s linear 0s; }

/* ---- desktop panel ---- */
/* Fixed to the viewport, not anchored to .bp-topstack. That wrapper is
   position:sticky but never actually sticks here, so a panel hung off it sat at
   the top of the document and vanished as soon as the page was scrolled.
   js/search.js sets `top` from the header's live bottom edge on open, so the
   panel still reads as a strip under the header when the header is on screen
   and pins to the top of the viewport when it is not. visibility:hidden keeps a
   closed panel out of the tab order. */
.bp-search-panel{ position:fixed; top:0; left:0; right:0; z-index:65; background:#fff; border-bottom:1px solid #eef0f5; box-shadow:0 22px 50px -24px rgba(20,26,70,.45); padding:24px 0 26px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity 180ms cubic-bezier(.4,0,.2,1), transform 180ms cubic-bezier(.4,0,.2,1), visibility 0s linear 180ms; }
.bp-search-panel.bp-search-open{ opacity:1; visibility:visible; transform:none; transition:opacity 180ms cubic-bezier(.4,0,.2,1), transform 180ms cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; }
/* same 1280/40px box as the header row, so the field's left edge lines up with
   the logo rather than floating in the middle of the strip */
.bp-search-panel-inner{ max-width:1280px; margin:0 auto; padding:0 40px; }
.bp-search-panel.bp-search-has-list{ padding-bottom:20px; }

/* ---- panel + overlay form ---- */
.bp-search-panel-form,.bp-search-overlay-form{ position:relative; max-width:none; margin:0; display:flex; flex-direction:column; gap:16px; }
.bp-search-panel-form .bp-search-row,.bp-search-overlay-form .bp-search-row{ display:flex; align-items:center; gap:12px; }
.bp-search-panel-form .bp-search-field{ flex:1; display:flex; align-items:center; gap:12px; min-width:0; padding:0 20px; height:52px; background:#fff; border:1px solid #e9ecef; border-radius:50rem; }
.bp-search-panel-form .bp-search-input{ flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:16px; color:#20242e; }
/* 4.69:1 — the 404 rejected #8b8b8b at 3.41:1 and this must not reintroduce it */
.bp-search-panel-form .bp-search-input::placeholder,.bp-search-overlay-form .bp-search-input::placeholder{ color:#6c757d; opacity:1; }
.bp-search-panel-form .bp-search-input:focus,.bp-search-overlay-form .bp-search-input:focus{ outline:none; }
/* the ring traces the pill the user sees, not the bare input (1.4.11) */
.bp-search-panel-form .bp-search-field:focus-within,.bp-search-overlay-form .bp-search-field:focus-within{ outline:3px solid var(--bp-focus); outline-offset:2px; }
.bp-search-panel-form .bp-search-btn{ flex:none; height:52px; padding:0 26px; }
.bp-search-spin{ flex:none; font-size:14px; color:#2E368F; }
.bp-search-spin[hidden],.bp-search-clear[hidden],.bp-search-seeall[hidden],.bp-search-zero[hidden],.bp-search-skeleton[hidden]{ display:none; }
.bp-search-clear{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:none; border-radius:50%; background:#f1f3f8; color:#5b6076; font-size:12px; cursor:pointer; }
.bp-search-clear:hover{ background:#e4e7ef; color:#3d4257; }
.bp-search-close{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:6px; padding:0; border:1px solid #e4e7ef; border-radius:50rem; background:#fff; color:#3d4257; font-size:16px; cursor:pointer; }
.bp-search-close:hover{ border-color:#c9cfe0; background:#f5f7fd; }

/* index.css carries no search rules of its own, so the navbar variants restate
   the parts landing.css defines for the 404 field. Without these the home page
   rendered the submit as a raw UA button and the listbox with disc bullets. */
.bp-search-panel-form .bp-search-btn,.bp-search-overlay-form .bp-search-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; border-radius:50rem; background:#ACD04D; color:#212529; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.bp-search-panel-form .bp-search-btn i,.bp-search-overlay-form .bp-search-btn i{ font-size:13px; transition:transform 150ms cubic-bezier(.4,0,.2,1); }
.bp-search-panel-form .bp-search-btn:hover i,.bp-search-overlay-form .bp-search-btn:hover i{ transform:translateX(3px); }
.bp-search-panel-form .bp-search-icon,.bp-search-overlay-form .bp-search-icon{ flex:none; font-size:15px; color:#6c757d; }

/* ---- help line ---- */
.bp-search-help{ margin:0; font-size:14.5px; line-height:1.6; color:#5b6076; }
.bp-search-help > i{ color:#5e791c; margin-right:8px; }
.bp-search-help b{ color:#2E368F; font-weight:600; }
/* the phone overlay gives this line a full-width row of its own under the
   field, so it reads as a caption to that field only when it is centred */
.bp-search-overlay-form .bp-search-help{ font-size:12.5px; text-align:center; }
.bp-search-overlay-form .bp-search-help > i{ margin-right:6px; }
.bp-search-panel-form .bp-search-help-sm,.bp-search-overlay-form .bp-search-help-lg{ display:none; }

/* ---- results scaffold ---- */
.bp-search-results{ display:flex; flex-direction:column; }
.bp-search-results[hidden]{ display:none; }
/* the quote row is an option too, so arrowing onto it must be visible; the
   focus-ring treatment reads on the gradient where a fill would not */
.bp-search-askus[aria-selected="true"]{ outline:3px solid var(--bp-focus); outline-offset:2px; }
.bp-search-zero{ margin:0; padding:2px 4px; font-size:14.5px; line-height:1.55; color:#4a4f66; }
.bp-search-zero b{ color:#20242e; }
/* the band and plain forms scroll their rows inside the floating card; here the
   panel scrolls them against the viewport instead */
.bp-search-panel-form .bp-search-list{ max-height:min(52vh,420px); overflow-y:auto; }

/* ---- group header ---- */
.bp-sg{ display:block; }
.bp-sg-head{ display:flex; align-items:center; gap:12px; padding:6px 4px 8px; }
.bp-sg-label{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#2E368F; }
.bp-sg-rule{ flex:1; height:1px; background:#eef0f5; }
.bp-sg-count{ font-size:12px; color:#6c757d; }

/* ---- suggestion rows ---- */
.bp-search-results .bp-search-option{ display:flex; align-items:center; gap:14px; padding:12px 16px; margin-bottom:2px; border-radius:14px; color:#20242e; transition:background 150ms cubic-bezier(.4,0,.2,1); }
.bp-search-option-icon{ flex:none; width:18px; font-size:14px; color:#8b90a8; text-align:center; }
.bp-search-option-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bp-search-results .bp-search-option-label{ font-size:15.5px; font-weight:600; color:#2E368F; }
/* the matched Luganda term rides on the label — the proof the search speaks
   local is visible without reading a sentence */
.bp-search-option-term{ font-weight:500; color:#5e791c; }
.bp-search-results .bp-search-option-blurb{ margin-top:0; font-size:13px; line-height:1.45; color:#5b6076; }
.bp-search-option-hint{ display:none; margin-left:auto; flex:none; font-size:12px; font-weight:600; color:#5e791c; white-space:nowrap; }
.bp-search-option-hint i{ transform:rotate(90deg); margin-left:4px; }
.bp-search-results .bp-search-option:hover{ background:#f5f7fd; }
.bp-search-results .bp-search-option[aria-selected="true"]{ background:#e6f1ca; }
.bp-search-results .bp-search-option[aria-selected="true"] .bp-search-option-icon{ color:#5e791c; }
.bp-search-results .bp-search-option[aria-selected="true"] .bp-search-option-blurb{ color:#4a4f66; }
.bp-search-results .bp-search-option[aria-selected="true"] .bp-search-option-hint{ display:inline-flex; align-items:center; }

/* The design's #5e791c accent measures 4.21:1 on the active row's #e6f1ca —
   below AA for text, and this site documents its own substitutions rather than
   shipping a failing value. It darkens one step on that row only: 5.20:1, same
   hue, and #5e791c is kept everywhere it passes (4.97:1 on white). */
.bp-search-results .bp-search-option[aria-selected="true"] .bp-search-option-term,
.bp-search-results .bp-search-option[aria-selected="true"] .bp-search-option-hint{ color:#516a18; }

/* ---- see-all footer ---- */
.bp-search-seeall{ display:flex; align-items:center; gap:10px; margin-top:8px; padding:14px 16px; border-top:1px solid #eef0f5; font-size:14.5px; font-weight:700; color:#2E368F; }
.bp-search-seeall i{ font-size:12px; transition:transform 150ms cubic-bezier(.4,0,.2,1); }
.bp-search-seeall:hover i{ transform:translateX(3px); }

/* ---- zero-match quote row ---- */
/* Same treatment as .bp-nf-intent and .bp-growth-note. Zero matches only — it
   must never sit under a good result set. */
.bp-search-askus{ display:flex; align-items:center; gap:14px; padding:16px 20px; border:1px solid #dce9b8; border-left:4px solid #ACD04D; border-radius:16px; background:linear-gradient(135deg,#f1f6e3,#fafcf5); }
.bp-search-askus > i:first-child{ flex:none; font-size:16px; color:#5e791c; }
.bp-search-askus-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bp-search-askus-title{ font-size:15.5px; font-weight:700; color:#2E368F; }
.bp-search-askus-sub{ font-size:13px; line-height:1.45; color:#4a4f66; }
.bp-search-askus-go{ margin-left:auto; flex:none; font-size:13px; color:#5e791c; transition:transform 150ms cubic-bezier(.4,0,.2,1); }
.bp-search-askus:hover .bp-search-askus-go{ transform:translateX(3px); }

/* ---- loading skeleton ---- */
/* Shown only after 250ms of a pending fetch, so a fast answer never flashes it. */
@keyframes bp-search-shimmer{ 0%{ background-position:-320px 0; } 100%{ background-position:320px 0; } }
.bp-search-skeleton{ display:flex; flex-direction:column; gap:10px; }
.bp-sk-row{ display:flex; flex-direction:column; gap:7px; padding:12px 16px; }
.bp-sk-title{ height:13px; border-radius:6px; background:linear-gradient(90deg,#eef0f5 0%,#f7f8fb 40%,#eef0f5 80%); background-size:320px 100%; animation:bp-search-shimmer 1.2s linear infinite; }
.bp-sk-blurb{ height:10px; border-radius:6px; background:#f1f3f8; }
.bp-sk-row:nth-child(1) .bp-sk-title{ width:38%; }
.bp-sk-row:nth-child(2) .bp-sk-title{ width:30%; animation-delay:.15s; }
.bp-sk-row:nth-child(3) .bp-sk-title{ width:34%; animation-delay:.3s; }
.bp-sk-row:nth-child(1) .bp-sk-blurb{ width:72%; }
.bp-sk-row:nth-child(2) .bp-sk-blurb{ width:60%; }
.bp-sk-row:nth-child(3) .bp-sk-blurb{ width:66%; }

/* ---- phone overlay ---- */
/* Outside .bp-topstack and .bp-sticky-nav — both use backdrop-filter/transform
   and would trap a position:fixed child, the same constraint as the nav sheet. */
.bp-search-overlay{ position:fixed; inset:0; z-index:95; display:flex; flex-direction:column; background:#fff; box-shadow:0 -22px 60px -18px rgba(20,26,70,.55); transform:translateY(100%); visibility:hidden; transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear .42s; }
.bp-search-overlay.bp-search-open{ transform:translateY(0); visibility:visible; transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s; }
.bp-search-overlay-top{ flex:none; display:flex; align-items:center; gap:10px; padding:12px 14px 10px; border-bottom:1px solid #f2f3f7; }
.bp-search-overlay-logo{ height:30px; width:auto; }
.bp-search-overlay-title{ font-size:14px; font-weight:700; color:#2E368F; }
.bp-search-overlay-close{ margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #e4e7ef; border-radius:12px; background:#fff; color:#20242e; font-size:17px; cursor:pointer; }
.bp-search-overlay-form{ flex:1; min-height:0; gap:10px; padding:14px 14px 0; }
.bp-search-overlay-form .bp-search-field{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; padding:0 16px; height:50px; background:#fff; border:1px solid #e9ecef; border-radius:50rem; }
.bp-search-overlay-form .bp-search-input{ flex:1; min-width:0; border:none; background:none; font-family:inherit; font-size:15.5px; color:#20242e; }
/* only the list scrolls; the see-all row stays pinned above the keyboard */
.bp-search-overlay-form .bp-search-results{ flex:1; min-height:0; margin:0 -6px; padding:8px 8px 0; overflow-y:auto; }
.bp-search-overlay-form .bp-search-seeall{ margin:8px -6px 0; padding:14px 16px; font-size:13.5px; }
.bp-search-overlay-form .bp-sg-head{ padding:8px 8px 6px; }
.bp-search-overlay-form .bp-sg-label{ font-size:11px; }
/* the prototype's phone frame carries no count on the header — the rule runs
   to the edge instead, so the label keeps its room at 390px */
.bp-search-overlay-form .bp-sg-count{ display:none; }
.bp-search-overlay-form .bp-search-option{ padding:11px 12px; gap:12px; }
.bp-search-overlay-form .bp-search-option-icon{ width:16px; font-size:13px; }
.bp-search-overlay-form .bp-search-option-label{ font-size:14.5px; }
/* one line on a phone rather than a three-line wrap */
.bp-search-overlay-form .bp-search-option-blurb{ font-size:12px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bp-search-overlay-form .bp-search-option-hint{ display:none !important; }

/* ---- breakpoints ---- */
/* Search is the first thing to shrink: the label goes, the target does not. */
@media (max-width:1080px){
  .bp-search-trigger-label{ display:none; }
  .bp-search-trigger{ width:44px; padding:0; }
}
/* Below 860 the desktop nav is already a burger; search becomes the overlay. */
@media (max-width:860px){
  .bp-search-panel{ display:none; }
  .bp-search-panel-inner{ padding-left:22px; padding-right:22px; }
}
@media (min-width:861px){
  .bp-search-overlay{ display:none; }
}
@media (max-width:560px){
  .bp-search-panel-inner{ padding-left:16px; padding-right:16px; }
  /* the stacked row on the 404 must not reach the overlay, which has no submit */
  .bp-search-overlay-form .bp-search-row{ flex-direction:row; }
}
@media (max-width:360px){
  .bp-sticky-nav .bp-section-pad{ padding-left:14px !important; padding-right:14px !important; }
}

/* ---- reduced motion ---- */
/* Both the media query and the footer's manual switch land on the same end
   state: present, opaque, in position — never mid-animation. */
@media (prefers-reduced-motion:reduce){
  .bp-search-panel,.bp-search-overlay,.bp-search-scrim,.bp-search-trigger,.bp-search-results .bp-search-option{ transition:none !important; }
  .bp-search-panel{ transform:none; }
  .bp-search-overlay{ transform:translateY(100%); }
  .bp-search-overlay.bp-search-open{ transform:translateY(0); }
  .bp-sk-title{ animation:none; background:#f1f3f8; }
  .bp-search-seeall:hover i,.bp-search-askus:hover .bp-search-askus-go{ transform:none; }
}
html.bp-no-motion .bp-search-panel{ transform:none; }
html.bp-no-motion .bp-sk-title{ animation:none; background:#f1f3f8; }