/* ==========================================================================
   BPoint sitewide — header, nav, mobile drawer, footer
   Ported from the wireframe; depends on the tokens in home.css.
   Scoped to .bp-sitewide so nothing leaks into Flatsome's own markup.
   ========================================================================== */

/* Hide Flatsome's header/footer wherever ours is active */
.bp-sitewide-active #header,
.bp-sitewide-active .header-wrapper,
.bp-sitewide-active #top-bar { display: none !important; }

.bp-sitewide {
  /* Re-declare the tokens: these render outside .bp-home */
  --navy: #0a1f3c;
  --ink: #071629;
  --blue: #41556b;
  --blue-bright: #94a7bc;
  --blue-600: #2f4256;
  --blue-soft: #e7ecf1;
  --paper: #f6f8fb;
  --paper-2: #eef2f7;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --slate-2: #64748b;
  --slate-3: #94a3b8;
  --ink-text: #0f1f33;
  --gold: #e8c87a;
  --display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --r: 10px;
  --r-lg: 16px;
  --maxw: 1250px;
  --shadow-sm: 0 1px 2px rgba(8, 20, 40, .06), 0 1px 3px rgba(8, 20, 40, .08);
  --shadow-lg: 0 30px 60px -20px rgba(8, 20, 40, .35);

  font-family: var(--body);
  color: var(--ink-text);
  line-height: 1.65;
}

.bp-sitewide *, .bp-sitewide *::before, .bp-sitewide *::after { box-sizing: border-box; }
.bp-sitewide a { color: inherit; text-decoration: none; }
.bp-sitewide ul { margin: 0; padding: 0; list-style: none; }
.bp-sitewide img { max-width: 100%; display: block; }
.bp-sitewide button { font-family: inherit; cursor: pointer; border: none; background: none; }

.bp-sitewide .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 15px; width: 100%; }

.bp-sitewide [data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -.125em;
}
.bp-sitewide [data-icon] > svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; }

/* ---------- Buttons (sitewide copy of the home page button system) ---------- */
.bp-sitewide .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--r);
  transition: .18s ease;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.bp-sitewide .btn [data-icon] { width: 16px; height: 16px; }
.bp-sitewide .btn-primary { background: var(--blue); color: #fff; }
.bp-sitewide .btn-primary:hover { background: var(--blue-600); color: #fff; }
.bp-sitewide .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.bp-sitewide .btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* All buttons share one size. .btn-lg / .btn-sm are kept so existing
   markup keeps working, but they no longer change the size. */
.bp-sitewide .btn-lg,
.bp-sitewide .btn-sm { padding: 14px 26px; font-size: 16px; }

/* ---------- Utility bar ---------- */
.bp-sitewide .util {
  background: var(--ink);
  color: #c7d3e6;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.bp-sitewide .util .wrap { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.bp-sitewide .util-left { display: flex; align-items: center; gap: 22px; }
.bp-sitewide .util-item { display: flex; align-items: center; gap: 7px; color: #9fb0c9; }
.bp-sitewide .util-item [data-icon] { width: 14px; height: 14px; color: var(--blue-bright); }
.bp-sitewide .util-right { display: flex; align-items: center; gap: 18px; }
.bp-sitewide .util a.tel { color: #fff; font-weight: 600; font-family: var(--display); letter-spacing: .02em; }
.bp-sitewide .util .stars { color: var(--gold); letter-spacing: 1px; }
@media (max-width: 880px) { .bp-sitewide .util { display: none; } }

/* ---------- Header ---------- */
/* Sticky header.
   Flatsome sets html{overflow-x:hidden}, which silently disables
   position:sticky in every descendant. overflow-x:clip prevents the same
   horizontal scroll without creating a scroll container, so sticky works.
   (Cannot be scoped to .bp-sitewide-active: that class is on <body>, and
   <html> is its ancestor — the rule has to target <html> directly.)
   Second: a sticky element only travels within its parent's box, and the
   header wrapper ends right after the header. display:contents removes the
   wrapper's box (so .site-head's layout parent becomes #wrapper) while
   keeping the class in the DOM, so every `.bp-sitewide .x` selector still
   matches. The drawer is position:fixed so it is unaffected. */
html { overflow-x: clip; }

/* Anchor landing offset.
   The header is sticky and 74px tall, so an anchored section would otherwise
   scroll to sit underneath it. scroll-padding-top also covers arrivals the
   JS cannot intercept — following /home-new/#faq from another page, a
   bookmarked hash, or a browser back/forward restore. */
html { scroll-padding-top: 90px; }

@media (max-width: 1080px) {
  html { scroll-padding-top: 74px; }
}

.bp-sitewide--head { display: contents; }

.bp-sitewide .site-head {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bp-sitewide .site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.bp-sitewide .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bp-sitewide .bp-logo { height: 38px; width: auto; display: block; }
.bp-sitewide .bp-logo-inv { filter: brightness(0) invert(1); height: 32px; }
.bp-sitewide .brand .word { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .04em; color: var(--navy); }

/* ---------- Nav ---------- */
.bp-sitewide .nav .nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* .navitem is an <li>: strip Flatsome's list chrome so it lays out as a
   plain flex child. */
.bp-sitewide .navitem {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
.bp-sitewide .navitem::before,
.bp-sitewide .navitem::marker { content: none; }
.bp-sitewide .navitem > a {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-text);
  padding: 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .15s;
  text-transform: uppercase;
}
/* Hover: subtle wash. */
.bp-sitewide .navitem:hover > a { color: var(--blue); background: var(--paper); }

/* Current page: must be clearly distinguishable from the other five items,
   so it gets weight, the navy ink colour and an underline rule rather than
   the near-white --paper background, which reads as no change at all. */
.bp-sitewide .navitem.is-current > a {
  color: var(--navy);
  /* Nav is 600 per the type scale; the current item is distinguished by
     colour rather than a heavier weight. */
  font-weight: 600;
  background: transparent;
}
.bp-sitewide .navitem.is-current:hover > a { background: var(--paper); }
.bp-sitewide .navitem .chev { width: 13px; height: 13px; opacity: .5; transition: .2s; }
.bp-sitewide .navitem:hover .chev { transform: rotate(180deg); }

.bp-sitewide .mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  min-width: 460px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  z-index: 70;
}
.bp-sitewide .navitem:hover .mega,
.bp-sitewide .navitem:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.bp-sitewide .mega a { display: flex; gap: 11px; padding: 11px 12px; border-radius: 9px; align-items: flex-start; transition: .14s; }
.bp-sitewide .mega a:hover { background: var(--paper); }
/* Every mega item renders a .mi-ico box (empty when no icon matched), so
   labels stay on the same baseline across the grid. */
.bp-sitewide .mega a > span:not(.mi-ico) { flex: 1; min-width: 0; }

.bp-sitewide .mega .mi-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--blue);
}
.bp-sitewide .mega .mi-ico > svg { width: 18px; height: 18px; }
/* Placeholder box for items with no matching icon: holds the space so the
   labels line up, without drawing an empty grey square. */
.bp-sitewide .mega .mi-ico--empty { background: transparent; }
.bp-sitewide .mega .mt { font-weight: 600; font-size: 13.5px; color: var(--navy); display: block; margin-top: 0;}
.bp-sitewide .mega .md { font-size: 12px; color: var(--slate-2); line-height: 1.4; }

/* ---------- Header CTA ---------- */
.bp-sitewide .head-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Header CTA uses the shared button size (see .btn above). */
.bp-sitewide .head-cta .btn { padding: 14px 26px; font-size: 16px; }
.bp-sitewide .menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  /* Flatsome sets min-height:2.5em, line-height:2.4em, padding:0 1.2em and
     margin-right:1em on every <button>. Reset all of it so the hit area is
     a true 44x44 square. */
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: inherit;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
}
.bp-sitewide .menu-toggle [data-icon] { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .bp-sitewide .nav { display: none; }
  .bp-sitewide .menu-toggle { display: inline-flex; }
}

/* ---------- Mobile drawer ---------- */
.bp-sitewide .m-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--navy);
  color: #fff;
  padding: 24px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.bp-sitewide .m-drawer[hidden] { display: flex; }
.bp-sitewide .m-drawer.open { transform: none; }
.bp-sitewide .m-drawer .md-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.bp-sitewide .m-drawer .md-close {
  width: 44px;
  height: 44px;
  /* Same Flatsome button reset as .menu-toggle above. */
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: inherit;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.bp-sitewide .m-drawer .md-close [data-icon] { width: 22px; height: 22px; }
.bp-sitewide .m-drawer .md-list,
.bp-sitewide .m-drawer .md-list ul { list-style: none; margin: 0; padding: 0; }
.bp-sitewide .m-drawer .md-list li { margin: 0; padding: 0; list-style: none; border: 0; }
.bp-sitewide .m-drawer .md-list li::before,
.bp-sitewide .m-drawer .md-list li::marker { content: none; }

/* Top-level row: link + expand toggle sit side by side */
.bp-sitewide .m-drawer .md-list > li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.bp-sitewide .m-drawer .md-list > li > a {
  font-size: 17px;
  color: #fff;
  padding: 14px 0;
  display: block;
  border: 0;
}

/* The row wrapper added by sitewide.js for items with children */
.bp-sitewide .m-drawer .md-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-sitewide .m-drawer .md-row > a { flex: 1; padding: 10px 0; font-weight: 400;}
.bp-sitewide .m-drawer .md-expand {
  width: 35px;
  height: 35px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: inherit;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  transition: .2s;
}
.bp-sitewide .m-drawer .md-expand svg {
  width: 16px;
  height: 16px;
}
.bp-sitewide .m-drawer .md-expand > [data-icon] { width: 16px; height: 16px; transition: transform .25s ease; }
.bp-sitewide .m-drawer .md-expand[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.bp-sitewide .m-drawer .md-expand[aria-expanded="true"] > [data-icon] { transform: rotate(180deg); }

/* Collapsed by default; JS toggles .is-open */
.bp-sitewide .m-drawer .md-list .sub-menu {
  display: none;
  padding: 0 0 8px;
}
.bp-sitewide .m-drawer .md-list .sub-menu.is-open { display: block; }
.bp-sitewide .m-drawer .md-list .sub-menu a {
  font-size: 14.5px;
  padding: 10px 0 10px 16px;
  color: #cdd9ee;
  display: block;
  border: 0;
}
.bp-sitewide .m-drawer .md-list .sub-menu a:hover { color: #fff; }

/* Current page in the drawer, using WP's own classes. */
.bp-sitewide .m-drawer .md-list > li.current-menu-item > a,
.bp-sitewide .m-drawer .md-list > li.current-menu-item > .md-row > a,
.bp-sitewide .m-drawer .md-list > li.current-menu-parent > .md-row > a,
.bp-sitewide .m-drawer .md-list > li.current-menu-ancestor > .md-row > a {
  color: var(--blue-bright);
  font-weight: 600;
}
.bp-sitewide .m-drawer .md-list .sub-menu li.current-menu-item > a {
  color: var(--blue-bright);
  font-weight: 600;
}
.bp-sitewide .m-drawer .md-cta { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }

body.bp-drawer-open { overflow: hidden; }

/* ---------- Footer ---------- */
.bp-sitewide.site-foot { background: var(--ink); color: #90a2bd; font-size: 14px; }
.bp-sitewide .foot-top { padding: 64px 0 40px; }
.bp-sitewide .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.bp-sitewide .foot-grid h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: .02em;
}
.bp-sitewide .foot-grid a { color: #9fb0c9; display: block; padding: 6px 0; transition: .14s; }
.bp-sitewide .foot-grid a:hover { color: var(--blue-bright); }
.bp-sitewide .foot-col .widget-title { display: none; }

/* Footer menus come from nav-menu widgets, so they arrive as real lists.
   Strip Flatsome's list chrome (bullets, indents, dividers, borders). */
.bp-sitewide .foot-col .widget,
.bp-sitewide .foot-col .widget_nav_menu { margin: 0; padding: 0; border: 0; }
.bp-sitewide .foot-col ul,
.bp-sitewide .foot-col ul.menu,
.bp-sitewide .foot-col ul.foot-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.bp-sitewide .foot-col li,
.bp-sitewide .foot-col ul.menu > li,
.bp-sitewide .foot-col ul.foot-menu > li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  display: block;
}
.bp-sitewide .foot-col li::before,
.bp-sitewide .foot-col li::marker { content: none; }
.bp-sitewide .foot-col li > a { border: 0; }
/* Nested menus indent rather than nest visually */
.bp-sitewide .foot-col .sub-menu { padding-left: 12px; }

.bp-sitewide .foot-brand p { margin-top: 16px; max-width: 340px; line-height: 1.6; color: #90a2bd; }
.bp-sitewide .foot-nap { margin-top: 22px; display: grid; gap: 10px; }
.bp-sitewide .foot-nap div { display: flex; gap: 10px; align-items: flex-start; }
.bp-sitewide .foot-nap [data-icon] { width: 16px; height: 16px; color: var(--blue-bright); flex-shrink: 0; margin-top: 4px; }
.bp-sitewide .foot-nap a { display: inline; padding: 0; }
.bp-sitewide .foot-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.bp-sitewide .foot-badge {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 9px 13px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: #cdd9ee;
}

.bp-sitewide .foot-bot {
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: #7e8ea8;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 15px 15px;
}
/* Legal links are a real <ul>, so strip list chrome like the other menus. */
.bp-sitewide .foot-legal-list {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-sitewide .foot-legal-list li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.bp-sitewide .foot-legal-list li::before,
.bp-sitewide .foot-legal-list li::marker { content: none; }
.bp-sitewide .foot-bot a { color: #9fb0c9; transition: .14s; }
.bp-sitewide .foot-bot a:hover { color: var(--blue-bright); }

@media (max-width: 880px) { .bp-sitewide .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .bp-sitewide .foot-grid { grid-template-columns: 1fr; } }


.hidden {
  display: none !important;
}
/* ==========================================================================
   Footer: Popular Searches
   Ported from the live site's .kk-footer block. Hidden until the toggle in
   the bottom bar is pressed.
   ========================================================================== */

.bp-sitewide .popular-searches[hidden] { display: none; }

.bp-sitewide .kk-footer-container {
  display: block;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.bp-sitewide .kk-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  max-width: var(--maxw);
  padding: 34px 15px;
  width: 100%;
}

.bp-sitewide .kk-footer + .kk-footer {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.bp-sitewide .kk-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}

.bp-sitewide .kk-footer li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.bp-sitewide .kk-footer li::before,
.bp-sitewide .kk-footer li::marker { content: none; }

.bp-sitewide .kk-footer a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #9fb0c9;
  transition: color .2s ease;
}
.bp-sitewide .kk-footer a:hover {
  color: var(--blue-bright);
  text-decoration: underline;
}

/* Toggle button in the bottom bar — looks like the legal links beside it */
.bp-sitewide .foot-link-btn {
  font: inherit;
  color: #9fb0c9;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  transition: color .14s ease;
  text-transform: capitalize;
  display: block !important;
}
.bp-sitewide .foot-link-btn:hover { color: var(--blue-bright); }

/* Without JS the toggle cannot do anything, so hide it. */
.no-js .bp-sitewide .foot-popular-toggle { display: none; }

@media (max-width: 799px) {
  .bp-sitewide .kk-footer {
    display: block;
    padding: 24px 15px 0;
    text-align: center;
  }
  .bp-sitewide .kk-footer + .kk-footer { padding-top: 0; }
}

#content > p {
  margin: 0;
}

/* ==========================================================================
   Sitewide typography — IBM Plex Sans
   Applies to pages outside the custom templates (blog, suburbs, Flatsome
   UX Builder pages) so the whole site shares one typeface. Weight roles:
     400 body · 600 nav, buttons, eyebrows, labels · 700 headings + card titles
   Flatsome prints its Customizer font-family inline in <head>, which loads
   before this file, so these rules win on order at equal specificity.
   ========================================================================== */

body,
button,
input,
select,
optgroup,
textarea {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.entry-title,
.widget-title,
.section-title {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

/* Navigation, buttons and form labels */
.nav > li > a,
.nav-dropdown > li > a,
.mobile-sidebar .nav > li > a,
.button,
button,
input[type="submit"],
input[type="button"],
label,
.gfield_label {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

/* Flatsome's alt font is used for accents; keep it in the same family. */
.alt-font {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* Body copy stays 400 even inside headings-adjacent wrappers. */
p, li, dd, dt, td, th, blockquote {
  font-weight: 400;
}