*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--color-background-primary: #ffffff;
--color-background-secondary: #f5f5f5;
--color-background-tertiary: #ebebeb;
--color-border-secondary: #d0d0d0;
--color-border-tertiary: #e5e5e5;
--color-text-primary: #1a1a1a;
--color-text-secondary: #555555;
--color-text-tertiary: #999999;
--border-radius-md: 6px;
--border-radius-lg: 10px;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--bm-red: #c8102e;
--bm-red-dark: #a50d26;
--bm-green: #0f6e56;
--bm-amber: #ba7517;
}

.linkbox ul,
header ol,
header ul,
footer ol,
footer ul {
  list-style: none;
}

.menusearchlogo {
  float: left;
}

.floatLeft {
  float: left;
}
.menusearch {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
@media screen and (min-width: 1025px) {
  .searchbox-open {
    z-index: 13;
  }
}

.searchbox-open {
  border-color: #919191;
  z-index: 12;
  overflow: visible !important;
}
.searchinput {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 10px;
  width: 40%;
  overflow: visible;
  background: #fff;
  z-index: 2;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  -ms-transition: width 0.3s;
  -o-transition: width 0.3s;
  transition: width 0.3s;
  overflow: hidden;
}
.searchinput input {
  top: 0;
  right: 0;
  outline: 0;
  background: #fff;
  width: 100%;
  height: 50px;
  margin: 0;
  font-size: 22px;
  color: #000;
  border-radius: 0;
  border: none;
  background-color: #f7f7f7;
}
.searchbox-open input {
  border-color: #919191;
  padding: 0 10px 0 112px;
}
@media screen and (min-width: 1024px) {
  .searchinput input {
    padding: 0 10px 0 112px;
    border-color: #919191;
  }
}

.searchinput .products-fadeLoading {
  position: absolute;
  right: 48px;
  top: 12px;
}

@media screen and (min-width: 1024px) {
  .searchinput .products-fadeLoading {
    top: 12px !important;
    left: auto !important;
    right: 15px;
  }
}
@media screen and (min-width: 1024px) {
  .searchinput > div {
    left: 0 !important;
    top: 49px !important;
  }
}
.midcontainer,
img {
  max-width: 100%;
}

.searchtype {
  position: absolute;
  right: 10px;
  background: url(../images/search-arrow.png) center center / 30px 30px
    no-repeat;
  font-size: 0;
  top: 0;
  width: 40px;
  height: 50px;
  display: none;
  cursor: pointer;
  z-index: 11;
}
.selectsearchtype {
  position: absolute;
  left: 1px;
  top: 1px;
  font-size: 12px;
}
@media screen and (min-width: 1024px) {
  .searchinput > div.selectsearchtype {
    left: 1px !important;
    top: 1px !important;
  }
}

.dk_container {
  display: block;
  float: left;
  position: relative;
}
.dk_container a {
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
}
.dk_toggle {
  background-image: url(../images/selectboxarrow.png);
  background-repeat: no-repeat;
  background-position: right center;
  padding: 11px 30px 11px 10px;
  display: inline-block;
  position: relative;
  zoom: 1;
  line-height: 26px;
  width: 100px !important;
}
.menusearch a {
  vertical-align: top;
}

.dk_options {
  display: none;
  margin-top: 1px;
  position: absolute;
  right: -1px;
  width: 102px;
}
.dk_options_inner,
.dk_touch .dk_options {
  max-height: 250px;
}

.dk_options_inner {
  overflow: auto;
  position: relative;
  color: #333;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dk_option_current {
  background-color: #e0e0e0;
  color: #000;
}
.dk_options a {
  padding: 3px 10px 3px 15px;
  line-height: 26px;
}
.dk_option_current a,
.dk_options a:hover {
  background-color: #fff;
  color: #7b7a7a;
  text-decoration: none;
}

.dk_fouc select.default {
  position: absolute;
  top: -99999em;
  visibility: hidden;
}

.dk_open .dk_options,
.dk_options a,
.dk_options a:link,
.dk_options a:visited,
.logo a,
.logo img {
  display: block;
}

@media screen and (min-width: 0) and (max-width: 1470px) {
  .searchbox-open {
    left: 120px;
  }
}

@media screen and (min-width: 0) and (max-width: 1750px) {
  .searchbox-open {
    width: 45%;
  }
}

@media screen and (min-width: 0) and (max-width: 1290px) {
  .searchbox-open {
    width: 36%;
  }
}

@media screen and (min-width: 0) and (max-width: 1100px) {
  .searchbox-open {
    left: 145px;
  }
}

@media screen and (min-width: 0) and (max-width: 1023px) {
  .searchinput.searchbox-open {
    width: 100%;
    border-color: #91919100;
    top: 0;
    left: 0;
    padding-left: 0;
    background-color: transparent;
  }

  .menusearch {
    text-align: right;
  }
}


body { font-family: var(--font-sans); background: var(--color-background-tertiary); color: var(--color-text-primary); font-size: 14px; line-height: 1.5; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── INLINE SVG ICON SYSTEM ── */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-filled { fill: currentColor; stroke: none; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
.ic-spin { animation: ic-spin 0.9s linear infinite; }

/* ── NAV ── */
.bm-nav { background: var(--bm-red); padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; }
.bm-nav-logo { color: #fff; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.bm-nav-logo .ic { font-size: 22px; }
.bm-nav-links { display: flex; gap: 24px; align-items: center; }
.bm-nav-links a { color: rgba(255,255,255,0.85); font-size: 13px; text-decoration: none; }
.bm-nav-links a:hover { color: #fff; }
.bm-nav-right { display: flex; gap: 12px; align-items: center; }
.bm-nav-right a { color: rgba(255,255,255,0.85); font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 5px; }
.bm-nav-right .nav-btn { background: rgba(255,255,255,0.18); border-radius: var(--border-radius-md); padding: 5px 12px; color: #fff; }

/* ── PREVIEW NOTE ── */
.preview-note { background: #e8f5e9; border-bottom: 1px solid #a5d6a7; padding: 8px 32px; font-size: 12px; color: #2e5e34; display: flex; align-items: center; gap: 8px; }
.preview-note .ic { font-size: 15px; color: var(--bm-green); }

/* ── SEARCH BAR ── */
.bm-search-bar { background: var(--color-background-primary); border-bottom: 1px solid var(--color-border-tertiary); padding: 12px 32px; display: flex; gap: 10px; align-items: center; }
.bm-search-bar select, .bm-search-bar input { height: 38px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 0 12px; font-size: 14px; background: var(--color-background-primary); color: var(--color-text-primary); font-family: var(--font-sans); }
.bm-search-bar input { flex: 1; }
.bm-search-bar button { height: 38px; padding: 0 22px; background: var(--bm-red); color: #fff; border: none; border-radius: var(--border-radius-md); font-size: 14px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); }
.bm-search-bar button:hover { background: var(--bm-red-dark); }

/* ── BREADCRUMB ── */
.bm-breadcrumb { padding: 10px 32px; font-size: 12px; color: var(--color-text-secondary); }
.bm-breadcrumb a { color: var(--bm-red); text-decoration: none; }
.bm-breadcrumb a:hover { text-decoration: underline; }

/* ── MAIN GRID ── */
.bm-main { display: grid; grid-template-columns: 1fr 320px; gap: 0 20px; padding: 0 32px 40px; max-width: 1440px; margin: 0 auto; align-items: start; }
/* "Grow your enquiries" is a grid sibling of the two columns: it sits under the
 left column on desktop, and drops to the very end when the grid stacks on mobile. */
.bm-left  { grid-column: 1; grid-row: 1; }
.bm-right { grid-column: 2; grid-row: 1 / span 2; }
.grow-section { grid-column: 1; grid-row: 2; }

/* ── CARDS ── */
.bm-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 16px; overflow: hidden; }

/* ── HERO ── */
/* Card stacks vertically: a top row (logo + info) then a full-width trust strip */
.bm-hero { display: block; position: relative; }
.bm-hero-top { display: flex; align-items: stretch; }
/* Logo sits on the same white as the rest of the panel — no grey box, no hard divider.
 Handles square, landscape OR portrait logos via max-width / max-height. */
.bm-hero-logo {
flex-shrink: 0;
width: 210px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
}
.bm-hero-logo .logo-img {
max-width: 100%;
max-height: 128px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 10px;
border: 1px solid var(--color-border-tertiary);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.logo-fallback { width: 110px; height: 110px; border-radius: 12px; background: var(--color-background-secondary); border: 2px dashed var(--color-border-secondary); display: flex; align-items: center; justify-content: center;     flex-direction: column; gap: 6px; text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.logo-fallback .ic { font-size: 36px; color: var(--color-text-tertiary); }

.bm-hero-info { padding: 22px 22px 22px 4px; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bm-hero-info h1 { font-size: 22px; font-weight: 600; margin-bottom: 3px; }
.company-type { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: 10px; }
.address { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 6px; line-height: 1.6; font-style: normal; }
.company-reg { font-size: 12.5px; color: var(--color-text-tertiary); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 5px; }
.company-reg .ic { font-size: 14px; color: var(--bm-red); }

.bm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
/* Suggest-an-edit link in the hero top-right (mirrors the About section link) */
.hero-suggest { position: absolute; top: 14px; right: 16px; z-index: 5; font-size: 12px; font-weight: 700; color: var(--bm-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.hero-suggest:hover { text-decoration: underline; }
.hero-suggest .ic { font-size: 14px; stroke-width: 2.6; }
/* Live "Open now / Closed" status pill */
.open-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 14px; width: fit-content; }
.open-status.is-open { background: rgba(46,160,67,0.12); color: var(--bm-green); }
.open-status.is-closed { background: var(--color-background-secondary); color: var(--color-text-tertiary); }
.open-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.open-status.is-open .open-dot { background: var(--bm-green); box-shadow: 0 0 0 3px rgba(46,160,67,0.20); }
.open-status.is-closed .open-dot { background: var(--color-text-tertiary); }
.open-sub { font-weight: 500; opacity: 0.85; }
.btn { height: 36px; padding: 0 16px; border-radius: var(--border-radius-md); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-family: var(--font-sans); border: none; transition: opacity 0.15s; }
.btn:hover { opacity: 0.88; }
.btn-primary { background: var(--bm-red); color: #fff; }
.btn-green { background: var(--bm-green); color: #fff; }
.btn-outline { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-secondary); transition: border-color 0.15s, color 0.15s, background 0.15s; }
.btn-outline:hover { opacity: 1; border-color: var(--bm-red); color: var(--bm-red); background: rgba(200,16,46,0.06); }

/* Trust bar — full-width strip across the whole card; flex column keeps icon + label aligned */
.bm-trust { display: flex; border-top: 1px solid var(--color-border-tertiary); }
.trust-item {
flex: 1 1 0;
padding: 12px 8px;
font-size: 12px;
color: var(--color-text-secondary);
border-right: 1px solid var(--color-border-tertiary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: 5px;
line-height: 1.3;
}
.trust-item:last-child { border-right: none; }
.trust-item .ic { font-size: 20px; }
.trust-item.ok .ic { color: var(--bm-green); }
.trust-item.warn .ic { color: var(--bm-amber); }

/* ── SECTION TITLE ── */
.section-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); padding: 14px 18px; border-bottom: 1px solid var(--color-border-tertiary); display: flex; align-items: center; gap: 7px; }
.section-title > .ic { color: var(--bm-red); }
.section-title h2 { font-size: 14px; font-weight: 600; margin: 0; }
.suggest-link { font-size: 12px; color: var(--bm-red); text-decoration: none; margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* ── ABOUT ── */
.about-body { padding: 18px; }
.about-body p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; }

/* ── GALLERY (1–3 images, adaptive) ── */
.gallery-wrap { padding: 16px; }
.gallery-grid { display: grid; gap: 8px; }
/* All images sit in a single row */
.gallery-grid.count-1 { grid-template-columns: 1fr; }
.gallery-grid.count-2 { grid-template-columns: 1fr 1fr; }
.gallery-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-tile {
position: relative;
border-radius: var(--border-radius-md);
overflow: hidden;
background: var(--color-background-secondary);
aspect-ratio: 4 / 3;
display: flex; align-items: center; justify-content: center;
}
/* A lone image can run wider; rows of 2–3 stay tidy at 4:3 */
.gallery-grid.count-1 > .gallery-tile { aspect-ratio: 16 / 7; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile.add {
border: 1.5px dashed var(--color-border-secondary);
background: var(--color-background-primary);
cursor: pointer;
flex-direction: column;
gap: 6px;
color: var(--color-text-tertiary);
font-size: 12px;
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.gallery-tile.add:hover { border-color: var(--bm-red); color: var(--bm-red); }
.gallery-tile.add .ic { font-size: 24px; }
.gallery-caption { font-size: 12px; color: var(--color-text-tertiary); margin-top: 10px; text-align: center; }
/* Click-to-enlarge affordance */
.gallery-tile:not(.add) { cursor: zoom-in; }
.gallery-zoom-hint { position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; z-index: 2; pointer-events: none; }
.gallery-zoom-hint .ic { font-size: 16px; }
.gallery-tile:not(.add):hover .gallery-zoom-hint { opacity: 1; }
/* Lightbox overlay */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-close .ic { font-size: 24px; }
.lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* ── SERVICES ── */
.products-wrap { padding: 16px; }
.service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.service-item { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 12px 14px; text-decoration: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.service-item:hover { border-color: var(--bm-red); background: rgba(200,16,46,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.service-item span { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; }
.service-item:hover span { color: var(--bm-red); }

/* Completion statement shown when the profile reaches 100% */
.completion-done { margin-top: 4px; }
.completion-done-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.completion-done-header .ic { font-size: 18px; color: var(--bm-green); }
.completion-done-header span { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.completion-done-sub { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }

/* ── FAQ ── */
.faq-list { padding: 8px 18px 18px; }
.faq-item { border-bottom: 1px solid var(--color-border-tertiary); }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-size: 14px; font-weight: 600; color: var(--color-text-primary); padding: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
.faq-q .ic { color: var(--bm-red); font-size: 16px; }
.faq-a { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; padding: 0 0 14px 24px; }

/* ── EMPTY STATE ── */
.empty-state { padding: 32px 20px; text-align: center; }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-background-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.empty-icon .ic { font-size: 26px; color: var(--color-text-tertiary); }
.empty-title { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.empty-desc { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 14px; line-height: 1.5; max-width: 400px; margin-left: auto; margin-right: auto; }
.empty-cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; background: var(--bm-red); color: #fff; border-radius: var(--border-radius-md); font-size: 13px; text-decoration: none; cursor: pointer; border: none; font-family: var(--font-sans); font-weight: 600; }

/* ── SIDEBAR ── */
.sidebar-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 16px; overflow: hidden; }
.sidebar-title { font-size: 13px; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--color-border-tertiary); color: var(--color-text-primary); display: flex; align-items: center; gap: 6px; }
.sidebar-title .ic { color: var(--bm-red); }
.sidebar-title h2 { font-size: 13px; font-weight: 600; margin: 0; }
.sidebar-body { padding: 14px 16px; }

.contact-row { display: flex; align-items: center; gap: 6px; padding: 7px 0; font-size: 13px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-tertiary); }
.contact-row:last-child { border-bottom: none; }
.contact-row .ic { font-size: 13px; color: var(--bm-red); }
.contact-row a,.faq-a a { color: var(--bm-red); text-decoration: none; }
.contact-row a:hover,.faq-a a:hover { text-decoration: underline; }

.hours-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-secondary); padding: 5px 0; }
.hours-row .day { color: var(--color-text-primary); }
.hours-row .time { color: var(--bm-green); font-weight: 600; }
.hours-row .closed { color: var(--color-text-tertiary); }

.map-embed { position: relative; height: 180px; background: var(--color-background-secondary); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; }
.map-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-tertiary); font-size: 12px; text-align: center; padding: 14px; }
.map-fallback .ic { font-size: 24px; }
.map-actions { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.map-actions a { font-size: 12px; color: var(--bm-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.map-actions a:hover { text-decoration: underline; }

.payment-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.pay-badge { font-size: 12px; padding: 5px 12px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary); color: var(--color-text-secondary); display: flex; align-items: center; gap: 5px; }
.pay-badge .ic { font-size: 14px; color: var(--bm-red); }
.pay-terms { font-size: 12px; color: var(--color-text-tertiary); padding: 0 16px 12px; }

.social-icons { display: flex; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
.social-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border-secondary); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.social-icon:hover { border-color: var(--bm-red); color: var(--bm-red); }
.social-icon .ic { font-size: 17px; }

/* ── PROFILE + LOGIN ── */
.profile-login-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 16px; overflow: hidden; }
.completion-section { padding: 14px 16px; border-bottom: 1px solid var(--color-border-tertiary); }
.completion-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; display: flex; justify-content: space-between; }
.bar-track { height: 6px; background: var(--color-background-secondary); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.bar-fill { height: 100%; background: var(--bm-red); border-radius: 3px; }
.completion-items { display: flex; flex-direction: column; gap: 5px; }
.comp-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); }
.comp-item .ic { font-size: 14px; }
.comp-item.done .ic { color: var(--bm-green); }
.comp-item.todo .ic { color: var(--color-text-tertiary); }
.comp-item a { color: var(--bm-red); text-decoration: none; margin-left: auto; font-size: 11px; }
.comp-item a:hover { text-decoration: underline; }

.login-section { padding: 14px 16px; }
.login-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.login-header .ic { font-size: 18px; color: var(--bm-red); }
.login-header span { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.login-sub { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; line-height: 1.4; }
.btn-login { width: 100%; height: 38px; background: var(--bm-red); color: #fff; border: none; border-radius: var(--border-radius-md); font-size: 13px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; margin-bottom: 8px; font-family: var(--font-sans); transition: background 0.15s; }
.btn-login:hover { background: var(--bm-red-dark); }
.btn-register { width: 100%; height: 38px; background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-family: var(--font-sans); transition: border-color 0.15s, color 0.15s; }
.btn-register:hover { border-color: var(--bm-red); color: var(--bm-red); }
.login-footer { text-align: center; margin-top: 8px; }
.login-footer a { font-size: 12px; color: var(--bm-red); text-decoration: none; }

/* ── UPGRADE BANNER ── */
.upgrade-banner { background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 16px; margin-bottom: 16px; text-align: center; }
.upgrade-banner h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.upgrade-banner h3 .ic { color: var(--bm-red); }
.upgrade-banner p { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px; line-height: 1.5; }
.upgrade-banner a { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; background: var(--bm-red); color: #fff; border-radius: var(--border-radius-md); font-size: 12px; text-decoration: none; font-weight: 600; }

/* ── GROW / LEAD-ESTIMATOR SECTION ── */
.upgrade-body { padding: 22px 18px; }
.estimator-hook { text-align: center; }
.estimator-title { font-size: 19px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; line-height: 1.3; }
.estimator-desc { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.6; margin: 0 auto 18px; max-width: 580px; }
.estimator-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; }
.est-stat { display: flex; flex-direction: column; gap: 1px; }
.est-num { font-size: 22px; font-weight: 700; color: var(--bm-red); line-height: 1.1; }
.est-lbl { font-size: 10.5px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; }
.btn-estimator { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 30px; background: var(--bm-red); color: #fff; border-radius: var(--border-radius-md); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 10px rgba(200,16,46,0.30); transition: background 0.15s, transform 0.1s, box-shadow 0.15s; }
.btn-estimator:hover { background: var(--bm-red-dark); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(200,16,46,0.38); }
.btn-estimator .ic { font-size: 20px; }
.discovery-cta { text-align: center; border-top: 1px solid var(--color-border-tertiary); margin-top: 22px; padding-top: 20px; }
.btn-discovery { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; background: transparent; color: var(--bm-red); border: 1.5px solid var(--bm-red); border-radius: var(--border-radius-md); font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.15s, color 0.15s; }
.btn-discovery:hover { background: var(--bm-red); color: #fff; }
.btn-discovery .ic { font-size: 18px; }
.discovery-note { font-size: 12px; color: var(--color-text-tertiary); margin-top: 10px; }
.compare-link { color: var(--bm-red); text-decoration: none; font-weight: 600; white-space: nowrap; }
.compare-link:hover { text-decoration: underline; }

/* ── FOOTER ── */
.bm-footer { background: #1a1a1a; color: rgba(255,255,255,0.6); text-align: center; padding: 16px 32px; font-size: 12px; margin-top: 8px; }
.bm-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
.bm-main { grid-template-columns: 1fr; }
.bm-left, .bm-right, .grow-section { grid-column: auto; grid-row: auto; }
/* On mobile, drop the Profile strength card to the end of the sidebar so it sits directly above "Grow your enquiries" */
.bm-right { display: flex; flex-direction: column; }
.profile-login-card { order: 1; }
.bm-nav, .bm-search-bar, .bm-breadcrumb, .preview-note, .bm-main, .bm-footer { padding-left: 16px; padding-right: 16px; }
.bm-hero-top { flex-direction: column; }
.bm-hero-logo { width: 100%; padding: 18px 18px 6px; }
.bm-hero-logo .logo-img { max-height: 96px; }
.bm-hero-info { padding: 50px 18px 18px; justify-content: flex-start; }
.bm-trust { flex-wrap: wrap; }
.service-grid { grid-template-columns: repeat(2, 1fr); }
.bm-nav-links { display: none; }
}
@media (max-width: 340px) {
    .bm-hero-logo {
                padding: 45px 18px 6px;
    }

    .hero-suggest {
      left: 16px;
    }
}

@media (max-width: 680px) {
    .trust-item {
        flex: 1 1 33%;
        border: 1px solid var(--color-border-tertiary);
    }
}

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   :root {
     --color-background-primary: #ffffff;
     --color-background-secondary: #f5f5f5;
     --color-background-tertiary: #ebebeb;
     --color-border-secondary: #d0d0d0;
     --color-border-tertiary: #e5e5e5;
     --color-text-primary: #1a1a1a;
     --color-text-secondary: #555555;
     --color-text-tertiary: #999999;
     --border-radius-md: 6px;
     --border-radius-lg: 10px;
     --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     --bm-red: #c8102e;
     --bm-red-dark: #a50d26;
     --bm-green: #0f6e56;
     --bm-amber: #ba7517;
   }

   body { font-family: var(--font-sans); background: var(--color-background-tertiary); color: var(--color-text-primary); font-size: 14px; line-height: 1.5; }

   .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

   /* ── INLINE SVG ICON SYSTEM ── */
   .ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
   @keyframes ic-spin { to { transform: rotate(360deg); } }
   .ic-spin { animation: ic-spin 0.9s linear infinite; }

   /* ── NAV ── */
   .bm-nav { background: var(--bm-red); padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; }
   .bm-nav-logo { color: #fff; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; text-decoration: none; }
   .bm-nav-logo .ic { font-size: 22px; }
   .bm-nav-links { display: flex; gap: 24px; align-items: center; }
   .bm-nav-links a { color: rgba(255,255,255,0.85); font-size: 13px; text-decoration: none; }
   .bm-nav-links a:hover { color: #fff; }
   .bm-nav-right { display: flex; gap: 12px; align-items: center; }
   .bm-nav-right a { color: rgba(255,255,255,0.85); font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 5px; }
   .bm-nav-right .nav-btn { background: rgba(255,255,255,0.18); border-radius: var(--border-radius-md); padding: 5px 12px; color: #fff; }

   /* ── PREVIEW NOTE ── */
   .preview-note { background: #e8f5e9; border-bottom: 1px solid #a5d6a7; padding: 8px 32px; font-size: 12px; color: #2e5e34; display: flex; align-items: center; gap: 8px; }
   .preview-note .ic { font-size: 15px; color: var(--bm-green); }

   /* ── SEARCH BAR ── */
   .bm-search-bar { background: var(--color-background-primary); border-bottom: 1px solid var(--color-border-tertiary); padding: 12px 32px; display: flex; gap: 10px; align-items: center; }
   .bm-search-bar select, .bm-search-bar input { height: 38px; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); padding: 0 12px; font-size: 14px; background: var(--color-background-primary); color: var(--color-text-primary); font-family: var(--font-sans); }
   .bm-search-bar input { flex: 1; }
   .bm-search-bar button { height: 38px; padding: 0 22px; background: var(--bm-red); color: #fff; border: none; border-radius: var(--border-radius-md); font-size: 14px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); }
   .bm-search-bar button:hover { background: var(--bm-red-dark); }

   /* ── BREADCRUMB ── */
   .bm-breadcrumb { padding: 10px 32px; font-size: 12px; color: var(--color-text-secondary); }
   .bm-breadcrumb a { color: var(--bm-red); text-decoration: none; }
   .bm-breadcrumb a:hover { text-decoration: underline; }

   /* ── MAIN GRID ── */
   .bm-main { display: grid; grid-template-columns: 1fr 320px; gap: 0 20px; padding: 0 32px 40px; max-width: 1440px; margin: 0 auto; align-items: start; }
   /* "Grow your enquiries" is a grid sibling of the two columns: it sits under the
      left column on desktop, and drops to the very end when the grid stacks on mobile. */
   .bm-left  { grid-column: 1; grid-row: 1; }
   .bm-right { grid-column: 2; grid-row: 1 / span 2; }
   .grow-section { grid-column: 1; grid-row: 2; }

   /* ── CARDS ── */
   .bm-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 16px; overflow: hidden; }

   /* ── HERO ── */
   /* Card stacks vertically: a top row (logo + info) then a full-width trust strip */
   .bm-hero { display: block; position: relative; }
   .bm-hero-top { display: flex; align-items: stretch; }
   /* Logo sits on the same white as the rest of the panel — no grey box, no hard divider.
      Handles square, landscape OR portrait logos via max-width / max-height. */
   .bm-hero-logo {
     flex-shrink: 0;
     width: 210px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 22px;
   }
   .bm-hero-logo .logo-img {
     max-width: 100%;
     max-height: 128px;
     width: auto;
     height: auto;
     object-fit: contain;
     border-radius: 10px;
     border: 1px solid var(--color-border-tertiary);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
   }
   .logo-fallback { width: 110px; height: 110px; border-radius: 12px; background: var(--color-background-secondary); border: 2px dashed var(--color-border-secondary); display: flex; align-items: center; justify-content: center; }
   .logo-fallback .ic { font-size: 36px; color: var(--color-text-tertiary); }

   .bm-hero-info { padding: 22px 22px 22px 4px; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
   .bm-hero-info h1 { font-size: 22px; font-weight: 600; margin-bottom: 3px; }
   .company-type { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: 10px; }
   .address { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 6px; line-height: 1.6; font-style: normal; }
   .company-reg { font-size: 12.5px; color: var(--color-text-tertiary); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 5px; }
   .company-reg .ic { font-size: 14px; color: var(--bm-red); }

   .bm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
   /* Suggest-an-edit link in the hero top-right (mirrors the About section link) */
   .hero-suggest { position: absolute; top: 14px; right: 16px; z-index: 5; font-size: 12px; font-weight: 700; color: var(--bm-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
   .hero-suggest:hover { text-decoration: underline; }
   .hero-suggest .ic { font-size: 14px; stroke-width: 2.6; }
   /* Live "Open now / Closed" status pill */
   .open-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 14px; width: fit-content; }
   .open-status.is-open { background: rgba(46,160,67,0.12); color: var(--bm-green); }
   .open-status.is-closed { background: var(--color-background-secondary); color: var(--color-text-tertiary); }
   .open-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
   .open-status.is-open .open-dot { background: var(--bm-green); box-shadow: 0 0 0 3px rgba(46,160,67,0.20); }
   .open-status.is-closed .open-dot { background: var(--color-text-tertiary); }
   .open-sub { font-weight: 500; opacity: 0.85; }
   .btn { height: 36px; padding: 0 16px; border-radius: var(--border-radius-md); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-family: var(--font-sans); border: none; transition: opacity 0.15s; }
   .btn:hover { opacity: 0.88; }
   .btn-primary { background: var(--bm-red); color: #fff; }
   .btn-green { background: var(--bm-green); color: #fff; }
   .btn-outline { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-secondary); transition: border-color 0.15s, color 0.15s, background 0.15s; }
   .btn-outline:hover { opacity: 1; border-color: var(--bm-red); color: var(--bm-red); background: rgba(200,16,46,0.06); }

   /* Trust bar — full-width strip across the whole card; flex column keeps icon + label aligned */
   .bm-trust { display: flex; border-top: 1px solid var(--color-border-tertiary); }
   .trust-item {
     flex: 1 1 0;
     padding: 12px 8px;
     font-size: 12px;
     color: var(--color-text-secondary);
     border-right: 1px solid var(--color-border-tertiary);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     text-align: center;
     gap: 5px;
     line-height: 1.3;
   }
   .trust-item:last-child { border-right: none; }
   .trust-item .ic { font-size: 20px; }
   .trust-item.ok .ic { color: var(--bm-green); }
   .trust-item.warn .ic { color: var(--bm-amber); }

   /* ── SECTION TITLE ── */
   .section-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); padding: 14px 18px; border-bottom: 1px solid var(--color-border-tertiary); display: flex; align-items: center; gap: 7px; }
   .section-title > .ic { color: var(--bm-red); }
   .section-title h2 { font-size: 14px; font-weight: 600; margin: 0; }
   .suggest-link { font-size: 12px; color: var(--bm-red); text-decoration: none; margin-left: auto; display: flex; align-items: center; gap: 4px; }

   /* ── ABOUT ── */
   .about-body { padding: 18px; }
   .about-body p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; }

   /* ── GALLERY (1–3 images, adaptive) ── */
   .gallery-wrap { padding: 16px; }
   .gallery-grid { display: grid; gap: 8px; }
   /* All images sit in a single row */
   .gallery-grid.count-1 { grid-template-columns: 1fr; }
   .gallery-grid.count-2 { grid-template-columns: 1fr 1fr; }
   .gallery-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
   .gallery-tile {
     position: relative;
     border-radius: var(--border-radius-md);
     overflow: hidden;
     background: var(--color-background-secondary);
     aspect-ratio: 4 / 3;
     display: flex; align-items: center; justify-content: center;
   }
   /* A lone image can run wider; rows of 2–3 stay tidy at 4:3 */
   .gallery-grid.count-1 > .gallery-tile { aspect-ratio: 16 / 7; }
   .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
   .gallery-tile.add {
     border: 1.5px dashed var(--color-border-secondary);
     background: var(--color-background-primary);
     cursor: pointer;
     flex-direction: column;
     gap: 6px;
     color: var(--color-text-tertiary);
     font-size: 12px;
     text-decoration: none;
     transition: border-color 0.15s, color 0.15s;
   }
   .gallery-tile.add:hover { border-color: var(--bm-red); color: var(--bm-red); }
   .gallery-tile.add .ic { font-size: 24px; }
   .gallery-caption { font-size: 12px; color: var(--color-text-tertiary); margin-top: 10px; text-align: center; }
   /* Click-to-enlarge affordance */
   .gallery-tile:not(.add) { cursor: zoom-in; }
   .gallery-zoom-hint { position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; z-index: 2; pointer-events: none; }
   .gallery-zoom-hint .ic { font-size: 16px; }
   .gallery-tile:not(.add):hover .gallery-zoom-hint { opacity: 1; }
   /* Lightbox overlay */
   .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; padding: 24px; }
   .lightbox.open { display: flex; }
   .lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
   .lightbox-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
   .lightbox-close .ic { font-size: 24px; }
   .lightbox-close:hover { background: rgba(255,255,255,0.28); }

   /* ── SERVICES ── */
   .products-wrap { padding: 16px; }
   .service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
   .service-item { border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 14px 10px; text-align: center; text-decoration: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
   .service-item:hover { border-color: var(--bm-red); background: rgba(200,16,46,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
   .service-item .ic { font-size: 24px; color: var(--bm-red); margin-bottom: 6px; }
   .service-item span { font-size: 12px; color: var(--color-text-secondary); line-height: 1.3; display: block; }

   /* Completion statement shown when the profile reaches 100% */
   .completion-done { margin-top: 4px; }
   .completion-done-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
   .completion-done-header .ic { font-size: 18px; color: var(--bm-green); }
   .completion-done-header span { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
   .completion-done-sub { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }

   /* ── FAQ ── */
   .faq-list { padding: 8px 18px 18px; }
   .faq-item { border-bottom: 1px solid var(--color-border-tertiary); }
   .faq-item:last-child { border-bottom: none; }
   .faq-q { font-size: 14px; font-weight: 600; color: var(--color-text-primary); padding: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
   .faq-q .ic { color: var(--bm-red); font-size: 16px; }
   .faq-a { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; padding: 0 0 14px 24px; }

   /* ── EMPTY STATE ── */
   .empty-state { padding: 32px 20px; text-align: center; }
   .empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-background-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
   .empty-icon .ic { font-size: 26px; color: var(--color-text-tertiary); }
   .empty-title { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
   .empty-desc { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 14px; line-height: 1.5; max-width: 400px; margin-left: auto; margin-right: auto; }
   .empty-cta { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; background: var(--bm-red); color: #fff; border-radius: var(--border-radius-md); font-size: 13px; text-decoration: none; cursor: pointer; border: none; font-family: var(--font-sans); font-weight: 600; }
   .sidebar-empty { padding: 16px; font-size: 13px; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 8px; line-height: 1.4; }
   .sidebar-empty .ic { font-size: 18px; flex-shrink: 0; color: var(--color-text-tertiary); }
   .logo-fallback { flex-direction: column; gap: 6px; text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
   .logo-fallback span { font-size: 11px; color: var(--color-text-tertiary); text-align: center; line-height: 1.25; font-weight: 600; }
   .logo-fallback:hover { border-color: var(--bm-red); }
   .logo-fallback:hover .ic, .logo-fallback:hover span { color: var(--bm-red); }

   /* ── SIDEBAR ── */
   .sidebar-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 16px; overflow: hidden; }
   .sidebar-title { font-size: 13px; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--color-border-tertiary); color: var(--color-text-primary); display: flex; align-items: center; gap: 6px; }
   .sidebar-title .ic { color: var(--bm-red); }
   .sidebar-title h2 { font-size: 13px; font-weight: 600; margin: 0; }
   .sidebar-body { padding: 14px 16px; }

   .contact-row { display: flex; align-items: center; gap: 6px; padding: 7px 0; font-size: 13px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-tertiary); }
   .contact-row:last-child { border-bottom: none; }
   .contact-row .ic { font-size: 13px; color: var(--bm-red); }
   .contact-row a { color: var(--bm-red); text-decoration: none; }
   .contact-row a:hover { text-decoration: underline; }

   .hours-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-secondary); padding: 5px 0; }
   .hours-row .day { color: var(--color-text-primary); }
   .hours-row .time { color: var(--bm-green); font-weight: 600; }
   .hours-row .closed { color: var(--color-text-tertiary); }

   .map-embed { position: relative; height: 180px; background: var(--color-background-secondary); }
   .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; }
   .map-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-tertiary); font-size: 12px; text-align: center; padding: 14px; }
   .map-fallback .ic { font-size: 24px; }
   .map-actions { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
   .map-actions a { font-size: 12px; color: var(--bm-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
   .map-actions a:hover { text-decoration: underline; }

   .payment-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
   .pay-badge { font-size: 12px; padding: 5px 12px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary); color: var(--color-text-secondary); display: flex; align-items: center; gap: 5px; }
   .pay-badge .ic { font-size: 14px; color: var(--bm-red); }
   .pay-terms { font-size: 12px; color: var(--color-text-tertiary); padding: 0 16px 12px; }

   .social-icons { display: flex; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
   .social-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border-secondary); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
   .social-icon:hover { border-color: var(--bm-red); color: var(--bm-red); }
   .social-icon .ic { font-size: 17px; }

   /* ── PROFILE + LOGIN ── */
   .profile-login-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 16px; overflow: hidden; }
   .completion-section { padding: 14px 16px; border-bottom: 1px solid var(--color-border-tertiary); }
   .completion-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; display: flex; justify-content: space-between; }
   .bar-track { height: 6px; background: var(--color-background-secondary); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
   .bar-fill { height: 100%; background: var(--bm-red); border-radius: 3px; }
   .completion-items { display: flex; flex-direction: column; gap: 5px; }
   .comp-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); }
   .comp-item .ic { font-size: 14px; }
   .comp-item.done .ic { color: var(--bm-green); }
   .comp-item.todo .ic { color: var(--color-text-tertiary); }
   .comp-item a { color: var(--bm-red); text-decoration: none; margin-left: auto; font-size: 11px; }
   .comp-item a:hover { text-decoration: underline; }

   .login-section { padding: 14px 16px; }
   .login-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
   .login-header .ic { font-size: 18px; color: var(--bm-red); }
   .login-header span { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
   .login-sub { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; line-height: 1.4; }
   .btn-login { width: 100%; height: 38px; background: var(--bm-red); color: #fff; border: none; border-radius: var(--border-radius-md); font-size: 13px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; margin-bottom: 8px; font-family: var(--font-sans); transition: background 0.15s; }
   .btn-login:hover { background: var(--bm-red-dark); }
   .btn-register { width: 100%; height: 38px; background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-family: var(--font-sans); transition: border-color 0.15s, color 0.15s; }
   .btn-register:hover { border-color: var(--bm-red); color: var(--bm-red); }
   .login-footer { text-align: center; margin-top: 8px; }
   .login-footer a { font-size: 12px; color: var(--bm-red); text-decoration: none; }

   /* ── UPGRADE BANNER ── */
   .upgrade-banner { background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 16px; margin-bottom: 16px; text-align: center; }
   .upgrade-banner h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; }
   .upgrade-banner h3 .ic { color: var(--bm-red); }
   .upgrade-banner p { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px; line-height: 1.5; }
   .upgrade-banner a { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; background: var(--bm-red); color: #fff; border-radius: var(--border-radius-md); font-size: 12px; text-decoration: none; font-weight: 600; }

   /* ── GROW / LEAD-ESTIMATOR SECTION ── */
   .upgrade-body { padding: 22px 18px; }
   .estimator-hook { text-align: center; }
   .estimator-title { font-size: 19px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; line-height: 1.3; }
   .estimator-desc { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.6; margin: 0 auto 18px; max-width: 580px; }
   .estimator-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; }
   .est-stat { display: flex; flex-direction: column; gap: 1px; }
   .est-num { font-size: 22px; font-weight: 700; color: var(--bm-red); line-height: 1.1; }
   .est-lbl { font-size: 10.5px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; }
   .btn-estimator { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 30px; background: var(--bm-red); color: #fff; border-radius: var(--border-radius-md); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 3px 10px rgba(200,16,46,0.30); transition: background 0.15s, transform 0.1s, box-shadow 0.15s; }
   .btn-estimator:hover { background: var(--bm-red-dark); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(200,16,46,0.38); }
   .btn-estimator .ic { font-size: 20px; }
   .discovery-cta { text-align: center; border-top: 1px solid var(--color-border-tertiary); margin-top: 22px; padding-top: 20px; }
   .btn-discovery { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; background: transparent; color: var(--bm-red); border: 1.5px solid var(--bm-red); border-radius: var(--border-radius-md); font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.15s, color 0.15s; }
   .btn-discovery:hover { background: var(--bm-red); color: #fff; }
   .btn-discovery .ic { font-size: 18px; }
   .discovery-note { font-size: 12px; color: var(--color-text-tertiary); margin-top: 10px; }
   .compare-link { color: var(--bm-red); text-decoration: none; font-weight: 600; white-space: nowrap; }
   .compare-link:hover { text-decoration: underline; }

   /* ── FOOTER ── */
   .bm-footer { background: #1a1a1a; color: rgba(255,255,255,0.6); text-align: center; padding: 16px 32px; font-size: 12px; margin-top: 8px; }
   .bm-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }

   /* ── RESPONSIVE ── */
   @media (max-width: 960px) {
     .bm-main { grid-template-columns: 1fr; }
     .bm-left, .bm-right, .grow-section { grid-column: auto; grid-row: auto; }
     /* On mobile, drop the Profile strength card to the end of the sidebar so it sits directly above "Grow your enquiries" */
     .bm-right { display: flex; flex-direction: column; }
     .profile-login-card { order: 1; }
     .bm-nav, .bm-search-bar, .bm-breadcrumb, .preview-note, .bm-main, .bm-footer { padding-left: 16px; padding-right: 16px; }
     .bm-hero-top { flex-direction: column; }
     .bm-hero-logo { width: 100%; padding: 50px 18px 6px; }
     .bm-hero-logo .logo-img { max-height: 96px; }
     .bm-hero-info { padding: 14px 18px 18px; justify-content: flex-start; }
     .bm-trust { flex-wrap: wrap; }
     .service-grid { grid-template-columns: repeat(2, 1fr); }
     .bm-nav-links { display: none; }
   }

   @media (max-width: 580px) { .bm-hero-info h1 { display: none; } .bm-hero-info .company-type { display: none; } .bm-hero-logo { justify-content: left; gap: 20px; padding: 18px 18px 6px; } .bm-hero-title-mobile h1 { font-size: 22px; font-weight: 600; margin-bottom: 3px; } .hero-suggest { display: none; } }
  @media (min-width: 581px) { .bm-hero-title-mobile { display: none; } }