/* ============================================================================
   DESIGN PARITY — the pieces of final.html that were still missing.

   Ported blocks, in the order the design declares them (see DESIGN_MAP.md):
     · scrolling colour system (data-bgcolor)   final.html 4099
     · trust & metrics band                     final.html 2321
     · aurora section                           final.html 476
     · testimonials                             final.html 629
     · product filter & search                  final.html 2417
     · social FAB                               final.html 1222
     · specs dialog                             final.html 1335
     · cookie consent                           final.html 2836

   Mobile-first throughout: phone is the base, 768px and 1200px add to it.
   ============================================================================ */


/* --- The scrolling colour system ------------------------------------------
   In the design the page itself carries the colour and every section is
   transparent, so scrolling from one to the next cross-fades the whole page
   rather than butting two blocks of colour together.

   `bm-bg` is set by an inline script in the head, before first paint, so a
   section is only made transparent once something is driving the colour. */

html.bm-bg body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

html.bm-bg .bm-section,
html.bm-bg .bm-section--sunken { background: transparent; }

/* A section with white text keeps its own dark background and does not trust
   the page colour to arrive.

   It used to be transparent like the rest. On the tabbed pages the panels are
   hidden at load, so ScrollTrigger measured them at zero height, the colour
   never advanced past white, and the RFQ form rendered white-on-white with
   the aurora's crimson blobs washing over it.

   Light sections can stay transparent: if the page colour is wrong they are
   still dark text on a light background, which is legible either way. A dark
   section has no such fallback, so it carries its own. */
html.bm-bg .bm-section--brand { background: var(--surface-brand); }


/* --- Trust & metrics ------------------------------------------------------ */

.bm-credibility { padding-block: var(--section-y); }

.bm-credibility__shell {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin-inline: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: var(--sp-6) var(--gutter);
  box-shadow: 0 20px 45px rgba(15, 30, 54, 0.08);
}

.bm-credibility__badgeline {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.bm-credibility__marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
}

.bm-credibility__marks span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--raw-slate-700);
}
.bm-credibility__marks i { color: var(--action); }

.bm-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }

.bm-metric { position: relative; text-align: center; padding-inline: var(--sp-4); }

.bm-metric__value {
  display: block;
  font-weight: 800;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  color: var(--text-brand);
  margin-bottom: var(--sp-1);
}

.bm-metric__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .bm-credibility__shell { padding: var(--sp-7) var(--sp-6); }
  .bm-metrics { grid-template-columns: repeat(4, 1fr); }
  .bm-metric:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 8px; bottom: 8px; right: calc(var(--sp-4) * -0.5);
    width: 1px;
    background: var(--border-soft);
  }
}


/* --- Aurora section ------------------------------------------------------- */

.bm-aurora-section {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--section-y) var(--gutter);
  text-align: center;
  isolation: isolate;
}

.bm-aurora-section .bm-aurora-section__content { position: relative; z-index: 3; }

.bm-aurora-section__title {
  margin: 0;
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.bm-aurora-section__subtitle {
  margin-top: var(--sp-4);
  font-size: var(--step-1);
  opacity: 0.72;
}


/* --- Testimonials --------------------------------------------------------- */

.bm-quotes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); }

.bm-quote {
  position: relative;
  width: min(100%, 320px);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

/* The two skewed panels behind the card: one solid, one blurred into a glow.
   On hover they straighten and spread, which is the whole effect. */
.bm-quote::before,
.bm-quote::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}
.bm-quote::after { filter: blur(30px); }

.bm-quote:nth-child(1)::before, .bm-quote:nth-child(1)::after { background: linear-gradient(315deg, var(--raw-navy-700), var(--raw-navy-900)); }
.bm-quote:nth-child(2)::before, .bm-quote:nth-child(2)::after { background: linear-gradient(315deg, var(--raw-red-600), var(--raw-red-500)); }
.bm-quote:nth-child(3)::before, .bm-quote:nth-child(3)::after { background: linear-gradient(315deg, var(--raw-slate-700), var(--raw-navy-800)); }

/* The floating glass squares. */
.bm-quote__glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.bm-quote__glass::before,
.bm-quote__glass::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  opacity: 0;
  animation: bm-float-square 2s ease-in-out infinite;
}
.bm-quote__glass::before { top: 0; left: 0; transition: 0.1s; }
.bm-quote__glass::after  { bottom: 0; right: 0; transition: 0.5s; animation-delay: -1s; }

@keyframes bm-float-square {
  0%, 100% { transform: translateY(10px); }
  50%      { transform: translate(-10px); }
}

.bm-quote__content {
  position: relative;
  z-index: 1;
  padding: var(--sp-5) var(--sp-6);
  background: rgba(15, 30, 54, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-inverse);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  color: var(--text-inverse);
  transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s;
}

.bm-quote__mark {
  display: block;
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--raw-red-500);
  margin-bottom: var(--sp-3);
  opacity: 0.85;
}

.bm-quote__content h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); color: var(--text-inverse); }
.bm-quote__role { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-inverse-mut); letter-spacing: 0.06em; }
.bm-quote__text { margin-top: var(--sp-3); color: var(--text-inverse-mut); }

/* Touch devices get the open state on focus/active, as the design does. */
.bm-quote:hover::before, .bm-quote:hover::after,
.bm-quote:focus-within::before, .bm-quote:focus-within::after {
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 40px);
}
.bm-quote:hover .bm-quote__glass::before,
.bm-quote:focus-within .bm-quote__glass::before { top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1; }
.bm-quote:hover .bm-quote__glass::after,
.bm-quote:focus-within .bm-quote__glass::after { bottom: -50px; right: 50px; width: 100px; height: 100px; opacity: 1; }
.bm-quote:hover .bm-quote__content,
.bm-quote:focus-within .bm-quote__content {
  background: rgba(15, 30, 54, 0.85);
  border-color: var(--action);
  box-shadow: 0 0 0.5em 0 rgba(211, 47, 47, 0.55), 0 5px 15px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .bm-quote__glass::before, .bm-quote__glass::after { animation: none; }
}


/* --- Product filter & search ---------------------------------------------- */

.bm-filter {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 30, 54, 0.06);
}

.bm-filter__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.bm-chip {
  cursor: pointer;
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--raw-slate-700);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.5em 1em;
  min-height: 40px;
  border-radius: 999px;
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.bm-chip:hover { border-color: var(--action); color: var(--action); }
.bm-chip.is-active { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-inverse); }

.bm-filter__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 240px;
  max-width: 320px;
  min-height: 40px;
  padding: 0.4em 1em;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.bm-filter__search i { color: var(--text-muted); }
.bm-filter__search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--step-0);
  color: var(--text);
}

.bm-filter__empty {
  display: none;
  text-align: center;
  color: var(--text-muted);
  margin-inline: auto;
  max-width: 420px;
}
.bm-filter__empty.is-shown { display: block; }


/* --- Social FAB ----------------------------------------------------------- */

/* Hidden on a phone: the fixed action bar already carries Call, WhatsApp and
   Request a Quote, so the FAB repeated all three and stacked on top of the
   back-to-top button. It returns at 768px where there is no action bar. */
.bm-fab { display: none; }

@media (min-width: 768px) {
  .bm-fab { display: flex; }
}

.bm-fab {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--actionbar-h) + var(--sp-3));
  z-index: 70;
  /* No `display` here: it is none above and flex at 768px. Re-declaring it
     in this later block re-showed the FAB on every phone. */
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
}

.bm-fab__toggle {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-brand);
  border: 2px solid var(--surface-brand);
  color: var(--text-inverse);
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(15, 30, 54, 0.35);
  transition: 0.35s cubic-bezier(0.175, 0.885, 0, 1);
}
.bm-fab__toggle i { transition: 0.4s var(--ease); }

.bm-fab:hover .bm-fab__toggle,
.bm-fab.is-open .bm-fab__toggle {
  background: var(--action);
  border-color: var(--action);
  box-shadow: 0 10px 26px rgba(211, 47, 47, 0.5);
}
.bm-fab:hover .bm-fab__toggle i,
.bm-fab.is-open .bm-fab__toggle i { transform: rotate(90deg); }

.bm-fab__list { display: flex; flex-direction: column; gap: 12px; pointer-events: none; }

.bm-fab__list li {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.35s var(--ease), transform 0.4s cubic-bezier(0.175, 0.885, 0, 1);
  pointer-events: none;
}
.bm-fab__list li:nth-child(1) { transition-delay: 0.18s; }
.bm-fab__list li:nth-child(2) { transition-delay: 0.13s; }
.bm-fab__list li:nth-child(3) { transition-delay: 0.08s; }

.bm-fab:hover .bm-fab__list li,
.bm-fab.is-open .bm-fab__list li { opacity: 1; transform: translateX(0); pointer-events: auto; }

.bm-fab__list a {
  position: relative;
  overflow: hidden;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--surface-raised);
  color: var(--text-brand);
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(15, 30, 54, 0.22);
  transition: box-shadow var(--speed-slow) var(--ease), border-color var(--speed-slow) var(--ease);
}
.bm-fab__list a i { position: relative; z-index: 3; transition: 0.5s var(--ease); }
.bm-fab__list a::before {
  content: '';
  position: absolute;
  top: 100%; left: 0;
  width: 100%; height: 100%;
  transition: 0.4s var(--ease);
  z-index: 2;
}
.bm-fab__list a:hover::before { top: 0; }
.bm-fab__list a:hover i { color: var(--text-inverse); transform: rotateY(360deg); }
.bm-fab__list li:nth-child(1) a::before { background: #25D366; }
.bm-fab__list li:nth-child(2) a::before { background: var(--raw-navy-800); }
.bm-fab__list li:nth-child(3) a::before { background: var(--action); }

@media (min-width: 768px) {
  /* One column in the corner, reading bottom-up: back-to-top, the FAB
     toggle, then the FAB's items when it opens. They were previously offset
     from each other both sideways and vertically — back-to-top was still
     reserving room for the mobile action bar, which is not there at this
     width. */
  .bm-totop { right: var(--sp-6); bottom: var(--sp-6); }
  .bm-fab   { right: var(--sp-6); bottom: calc(var(--sp-6) + 44px + var(--sp-3)); }
}

/* --- What each FAB button actually is ------------------------------------
   Three anonymous circles told a visitor nothing — least of all the phone
   number. The label slides out on hover with the real destination in it. */

.bm-fab__list li { position: relative; }

.bm-fab__list li::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + var(--sp-3));
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-brand);
  border: 1px solid var(--border-inverse);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}

@media (hover: hover) {
  .bm-fab__list li:hover::after,
  .bm-fab__list li:focus-within::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}


/* --- Specs dialog --------------------------------------------------------- */

@keyframes bm-dlg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-dlg-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bm-dlg-enter    { from { translate: 0 -30px; } to { translate: 0 0; } }
@keyframes bm-dlg-exit     { from { translate: 0 0; } to { translate: 0 30px; } }

.bm-dialog {
  /* The global `* { margin: 0 }` in bm.css beats the browser's own
     `dialog:modal { margin: auto }`, which is what centres a modal. Without
     this the dialog sits in the top-left corner of the viewport. */
  margin: auto;
  max-height: calc(100dvh - 2 * var(--sp-5));
  overflow: auto;
  width: min(92vw, 560px);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-2);
  animation: bm-dlg-exit 0.3s forwards var(--ease), bm-dlg-fade-out 0.3s forwards var(--ease);
}
.bm-dialog[open] { animation: bm-dlg-enter 0.3s var(--ease), bm-dlg-fade-in 0.3s forwards var(--ease); }
.bm-dialog::backdrop { background: rgba(15, 30, 54, 0.6); animation: bm-dlg-fade-out 0.3s forwards var(--ease); }
.bm-dialog[open]::backdrop { animation: bm-dlg-fade-in 0.3s forwards var(--ease); }

.bm-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.bm-dialog__head h3 { font-size: var(--step-2); color: var(--text-brand); }
.bm-dialog__close { font-size: 1.1rem; color: var(--text-muted); min-width: 44px; min-height: 44px; }
.bm-dialog__close:hover { color: var(--action); }

.bm-dialog__body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.bm-dialog__row { display: flex; justify-content: space-between; gap: var(--sp-4); border-bottom: 1px dashed var(--border-soft); padding-bottom: var(--sp-2); }
.bm-dialog__row dt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bm-dialog__row dd { font-weight: 700; text-align: right; }
.bm-dialog__foot { padding: 0 var(--sp-5) var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  .bm-dialog, .bm-dialog[open], .bm-dialog::backdrop, .bm-dialog[open]::backdrop { animation: none; }
}


/* --- Cookie consent ------------------------------------------------------- */

.bm-cookie {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--actionbar-h) + var(--sp-3));
  z-index: 80;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-brand);
  color: var(--raw-slate-200);
  border: 1px solid var(--border-inverse);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(15, 30, 54, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease);
}
.bm-cookie.is-shown { opacity: 1; pointer-events: auto; transform: translateY(0); }

.bm-cookie p { flex: 1 1 260px; font-size: var(--step--1); line-height: 1.6; }
.bm-cookie__actions { display: flex; gap: 0.6rem; flex-shrink: 0; }

.bm-cookie button {
  border: 0;
  border-radius: 8px;
  padding: 0.55em 1.1em;
  min-height: 40px;
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color var(--speed) var(--ease);
}
.bm-cookie__decline { background: transparent; border: 1px solid var(--border-inverse); color: var(--raw-slate-200); }
.bm-cookie__decline:hover { background: rgba(255, 255, 255, 0.08); }
.bm-cookie__accept { background: var(--action); color: var(--on-action); }
.bm-cookie__accept:hover { background: var(--action-hover); }

@media (min-width: 768px) {
  .bm-cookie { bottom: var(--sp-5); }
}


/* ============================================================================
   PAGE HEAD

   The compact band that opens About, Contact and Gallery. The homepage keeps
   its slider; these pages need something that states where you are in one
   screenful and then gets out of the way.
   ============================================================================ */

.bm-pagehead {
  position: relative;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
  background: var(--surface-brand);
  color: var(--text-inverse);
  overflow: hidden;
  isolation: isolate;
}

.bm-pagehead__inner { max-width: var(--measure); margin-inline: auto; position: relative; z-index: 2; }

.bm-pagehead__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-mut);
}
.bm-pagehead__crumbs a:hover { color: var(--raw-red-500); }
.bm-pagehead__crumbs span[aria-current] { color: var(--raw-red-500); }

.bm-pagehead h1 {
  font-size: var(--step-4);
  color: var(--text-inverse);
  max-width: 18ch;
}

.bm-pagehead__lead {
  margin-top: var(--sp-4);
  font-size: var(--step-1);
  color: var(--text-inverse-mut);
  max-width: 54ch;
}

@media (min-width: 768px) {
  .bm-pagehead { padding: var(--sp-8) var(--sp-6) var(--sp-7); }
}


/* ============================================================================
   GALLERY GRID

   Two columns on a phone so a whole row is visible without scrolling, three
   from 768px. Each tile is a button: it opens the lightbox.
   ============================================================================ */

.bm-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

.bm-shot {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
  cursor: zoom-in;
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.bm-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--speed-slow) var(--ease); }

.bm-shot__caption {
  display: block;
  padding: var(--sp-3);
  text-align: left;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-muted);
}

.bm-shot__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-brand);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .bm-shot:hover { border-color: var(--action); box-shadow: 0 20px 24px -18px rgba(15, 30, 54, 0.45); transform: translateY(-0.25em); }
  .bm-shot:hover img { transform: scale(1.04); }
}

@media (min-width: 768px) {
  .bm-shots { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}


/* ============================================================================
   LIGHTBOX — the specs dialog, carrying an image instead of a table
   ============================================================================ */

.bm-lightbox {
  width: min(96vw, 1000px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-brand);
  color: var(--text-inverse);
  animation: bm-dlg-exit 0.3s forwards var(--ease), bm-dlg-fade-out 0.3s forwards var(--ease);
}
.bm-lightbox { margin: auto; }   /* same reason as .bm-dialog above */
.bm-lightbox[open] { animation: bm-dlg-enter 0.3s var(--ease), bm-dlg-fade-in 0.3s forwards var(--ease); }
.bm-lightbox::backdrop { background: rgba(6, 12, 22, 0.86); animation: bm-dlg-fade-out 0.3s forwards var(--ease); }
.bm-lightbox[open]::backdrop { animation: bm-dlg-fade-in 0.3s forwards var(--ease); }

.bm-lightbox__figure { margin: 0; }
.bm-lightbox__figure img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: #000;
}

.bm-lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--border-inverse);
}

.bm-lightbox__caption { flex: 1 1 auto; font-size: var(--step--1); color: var(--text-inverse-mut); min-width: 0; }
.bm-lightbox__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-inverse-mut); }

.bm-lightbox button {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-inverse);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-inverse);
  transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.bm-lightbox button:hover { background: var(--action); border-color: var(--action); }
.bm-lightbox button[disabled] { opacity: 0.3; pointer-events: none; }

.bm-lightbox__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
}


/* ============================================================================
   CONTACT — address block and map
   ============================================================================ */

.bm-contact-split { display: grid; gap: var(--sp-5); }

.bm-contact-details address {
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

.bm-contact-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--step-0);
}
.bm-contact-facts dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bm-contact-facts dd { font-weight: 700; margin: 0; }
.bm-contact-facts a:hover { color: var(--action); }

.bm-contact-map {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
}
.bm-contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(240px, 45vw, 420px);
  border: 0;
}

@media (min-width: 768px) {
  .bm-contact-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-7); align-items: start; }
}


/* The note under the RFQ button — it says what the button actually does. */
.bm-form__handoff {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-inverse-mut);
}


/* Long-form copy, for the About page. */
.bm-prose { max-width: 68ch; display: grid; gap: var(--sp-4); }
.bm-prose p { font-size: var(--step-1); line-height: var(--leading-body); color: var(--text-muted); }
.bm-prose p:first-child { color: var(--text); }


/* ============================================================================
   MOULD DETAIL — images beside a specification table
   ============================================================================ */

.bm-mould { display: grid; gap: var(--sp-6); }

.bm-mould__shots { display: grid; gap: var(--sp-3); }
.bm-mould__shots .bm-shot { cursor: zoom-in; }
.bm-mould__shots .bm-shot img { aspect-ratio: 4 / 3; }

.bm-spectable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.bm-spectable tr + tr { border-top: 1px solid var(--border-soft); }
.bm-spectable th,
.bm-spectable td { padding: var(--sp-3) var(--sp-4); text-align: left; }
.bm-spectable th {
  width: 40%;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-sunken);
}
.bm-spectable td { font-weight: 700; color: var(--text); }
.bm-spectable a { color: var(--action); text-decoration: underline; }

.bm-mould__body { font-size: var(--step-1); color: var(--text-muted); margin-bottom: var(--sp-5); }

.bm-mould__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.bm-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bm-mould__note { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--text-muted); }

/* Card titles are links on the catalogue pages. */
.bm-card__title a:hover { color: var(--action); }

@media (min-width: 768px) {
  .bm-mould { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
  .bm-mould__shots { grid-template-columns: 1fr; }
}


/* --- Process strengths: what each process is actually good at ------------- */

.bm-strengths { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }

.bm-strengths li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}
.bm-strengths li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--action);
}

.bm-strengths--head { max-width: 60ch; margin-top: var(--sp-5); }
.bm-strengths--head li { color: var(--text-inverse-mut); }

.bm-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--sp-2);
}

.bm-pagehead__also {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--raw-red-500);
  margin-top: var(--sp-2);
}


/* --- Pull-quote: the "what it means for you" line on a topic page -------- */

.bm-pullquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--action);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.bm-pullquote__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action);
}
.bm-pullquote p { font-size: var(--step-1); color: var(--text); }

/* Industry pills are links on a mould page. */
a.bm-meta-pill { transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease); }
a.bm-meta-pill:hover { border-color: var(--action); color: var(--action); }


/* ============================================================================
   MENU — phone first, then tablet, then desktop.

   Phone      a button opens a full-height panel under the header
   768px      the panel is gone; four items sit in the bar
   1200px     Gallery and About join them, because there is room

   The panel is a sibling of the header, not a child, so it can fill the
   viewport below it without fighting the sticky positioning.
   ============================================================================ */

/* --- The button ----------------------------------------------------------- */

.bm-burger {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-right: calc(var(--sp-2) * -1);
  border-radius: var(--radius);
  color: var(--text-inverse);
}

/* Three bars from one element: the middle is the box, the other two are its
   pseudo-elements. On open the outer two rotate into a cross and the middle
   fades — so it is one animated element rather than three to keep in step. */
.bm-burger__bars,
.bm-burger__bars::before,
.bm-burger__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--speed-slow) var(--ease),
              opacity var(--speed) var(--ease);
}
.bm-burger__bars { position: relative; }
.bm-burger__bars::before,
.bm-burger__bars::after { content: ''; position: absolute; left: 0; }
.bm-burger__bars::before { top: -6px; }
.bm-burger__bars::after  { top: 6px; }

.bm-burger[aria-expanded="true"] { color: var(--raw-red-500); }
.bm-burger[aria-expanded="true"] .bm-burger__bars { background: transparent; }
.bm-burger[aria-expanded="true"] .bm-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.bm-burger[aria-expanded="true"] .bm-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* --- The panel ------------------------------------------------------------ */

.bm-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 45;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-brand);
  color: var(--text-inverse);
  /* Animated in by the class below; `hidden` still wins while it is closed. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease);
}
.bm-menu[hidden] { display: none; }
.bm-menu.is-open { opacity: 1; transform: translateY(0); }

.bm-menu__inner {
  padding: var(--sp-4) var(--gutter) calc(var(--actionbar-h) + var(--sp-6));
  max-width: var(--measure);
  margin-inline: auto;
}

/* --- Groups --------------------------------------------------------------- */

.bm-menu__group { border-bottom: 1px solid var(--border-inverse); }

.bm-menu__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--text-inverse);
  cursor: pointer;
  list-style: none;
}
.bm-menu__group summary::-webkit-details-marker { display: none; }

.bm-menu__group summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius);
  color: var(--raw-red-500);
  font-weight: 700;
}
.bm-menu__group[open] summary::after { content: '\2013'; }

.bm-menu__group ul { padding-bottom: var(--sp-4); display: grid; gap: var(--sp-1); }

.bm-menu__group a,
.bm-menu__flat a {
  display: block;
  /* 44px minimum, because this is the one navigation a thumb has. */
  min-height: 44px;
  padding: var(--sp-2) 0;
  font-size: var(--step-0);
  color: var(--text-inverse-mut);
  transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}
.bm-menu__group a:hover,
.bm-menu__flat a:hover { color: var(--raw-red-500); padding-left: var(--sp-2); }

.bm-menu__flat { padding-block: var(--sp-3); }
.bm-menu__flat a { font-size: var(--step-1); font-weight: 800; color: var(--text-inverse); }

.bm-menu__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }

/* The page behind the panel must not scroll under it. */
html.bm-menu-open, html.bm-menu-open body { overflow: hidden; }


/* --- Tablet: the bar takes over ------------------------------------------- */

@media (min-width: 768px) {
  .bm-burger { display: none; }
  .bm-menu { display: none !important; }
  html.bm-menu-open, html.bm-menu-open body { overflow: visible; }

  /* Gallery and About stay out of the bar until there is room for them. */
  .bm-nav .is-wide { display: none; }

  .bm-nav a.is-current { color: var(--raw-red-500); }
  .bm-nav a.is-current::after {
    content: '';
    display: block;
    height: 2px;
    margin-top: 4px;
    background: var(--action);
  }
}

@media (min-width: 1200px) {
  .bm-nav .is-wide { display: inline-block; }
}


/* ============================================================================
   PAGEHEAD — centred, with an optional photograph behind it.

   Height grows at 1200px only. A taller hero on a phone just pushes the
   content below the fold, so phone and tablet keep the padding they had.
   ============================================================================ */

.bm-pagehead { text-align: center; isolation: isolate; }

.bm-pagehead__inner { max-width: 60rem; }

.bm-pagehead__crumbs { justify-content: center; }

.bm-pagehead h1,
.bm-pagehead__lead { margin-inline: auto; }

/* --- The photograph ------------------------------------------------------- */

.bm-pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Strong enough that white type stays legible over any part of a workshop
   photograph, whatever happens to be in the frame. */
.bm-pagehead__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 30, 54, 0.74) 0%, rgba(15, 30, 54, 0.90) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(15, 30, 54, 0.35), rgba(15, 30, 54, 0.85) 70%);
}

/* --- Strengths, centred --------------------------------------------------
   A bulleted list with a left dash reads badly centred, so in the hero the
   same data becomes inline pills. */

.bm-pagehead .bm-strengths--head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  max-width: none;
}
.bm-pagehead .bm-strengths--head li {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-inverse);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
}
.bm-pagehead .bm-strengths--head li::before { display: none; }

@media (min-width: 1200px) {
  .bm-pagehead {
    display: grid;
    align-content: center;
    min-height: max(26rem, 58svh);
  }
}


/* ============================================================================
   SUB-NAV — sideways movement inside a section
   ============================================================================ */

.bm-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--surface-brand-2);
  border-bottom: 1px solid var(--border-inverse);
}

.bm-subnav__inner {
  display: flex;
  gap: var(--sp-2);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--sp-2) var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.bm-subnav__inner::-webkit-scrollbar { display: none; }

.bm-subnav__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-inverse-mut);
  transition: color var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.bm-subnav__item:hover { color: var(--text-inverse); border-color: var(--border-inverse); }
.bm-subnav__item.is-current {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}

@media (min-width: 768px) {
  .bm-subnav__inner { justify-content: center; flex-wrap: wrap; overflow-x: visible; }
}


/* ============================================================================
   MARQUEE — the client names, in two moving layers.

   The track holds the list twice and slides exactly half its own width, so
   the second copy lands where the first began: no seam, no JavaScript, and
   only `transform` animates, which stays off the main thread.
   ============================================================================ */

.bm-marquees { display: grid; gap: var(--sp-3); margin-block: var(--sp-6); }

.bm-marquees__label {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bm-marquee {
  --bm-marquee-s: 45s;
  position: relative;
  overflow: hidden;
  /* Full bleed: the section's container stops at the gutter, this does not.
     Safe because <html> clips the x-axis. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-block: var(--sp-2);

  /* Fades the names in and out at the edges instead of cutting them off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bm-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-6);
  padding: 0;
  margin: 0;
  list-style: none;
  animation: bm-marquee var(--bm-marquee-s) linear infinite;
  will-change: transform;
}

.bm-marquee--reverse .bm-marquee__track { animation-direction: reverse; }

@keyframes bm-marquee {
  from { transform: translateX(0); }
  /* Half, because the list is rendered twice. */
  to   { transform: translateX(-50%); }
}

.bm-marquee__track li {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step-1);
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-brand);
  opacity: 0.75;
  transition: opacity var(--speed) var(--ease), color var(--speed) var(--ease);
}

/* A dot between names, so it reads as a list rather than a run-on sentence. */
.bm-marquee__track li::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--action);
  opacity: 0.5;
}

@media (hover: hover) {
  /* Stops so a name can actually be read. */
  .bm-marquee:hover .bm-marquee__track { animation-play-state: paused; }
  .bm-marquee__track li:hover { opacity: 1; color: var(--action); }
}

/* On navy sections — the industry pages — the names invert. */
.bm-section--brand .bm-marquee__track li { color: var(--text-inverse); }

/* Never animate indefinitely for someone who asked for less motion. The row
   becomes an ordinary scrollable strip instead, and the duplicate half is
   dropped so nothing is announced twice. */
@media (prefers-reduced-motion: reduce) {
  .bm-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .bm-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .bm-marquee__track li[aria-hidden="true"] { display: none; }
}


/* --- Gallery tile: the photograph, not the paragraph ---------------------- */

.bm-shot__caption { display: none; }

/* The caption arrives on hover instead of sitting under every tile. It is
   aria-hidden because the same words are already the image's alt text. */
.bm-shot__hover {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.4;
  text-align: left;
  color: var(--text-inverse);
  background: linear-gradient(180deg, transparent, rgba(15, 30, 54, 0.92) 45%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease);
}

@media (hover: hover) {
  .bm-shot:hover .bm-shot__hover { opacity: 1; transform: translateY(0); }
}

/* No hover on a phone, so the tile is the picture and the lightbox carries
   the words. */
@media (hover: none) {
  .bm-shot__hover { display: none; }
}


/* --- Breadcrumbs, below the hero ------------------------------------------ */

.bm-crumbs { border-bottom: 1px solid var(--border-soft); }

.bm-crumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bm-crumbs a:hover { color: var(--action); }
.bm-crumbs [aria-current] { color: var(--action); }


/* ============================================================================
   TABS — the catalogue, one page per axis
   ============================================================================ */

.bm-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--surface-brand-2);
  border-bottom: 1px solid var(--border-inverse);
}

.bm-tabs__strip {
  display: flex;
  gap: var(--sp-2);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--sp-2) var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.bm-tabs__strip::-webkit-scrollbar { display: none; }

.bm-tabs__tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-inverse-mut);
  cursor: pointer;
  transition: color var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.bm-tabs__tab:hover { color: var(--text-inverse); border-color: var(--border-inverse); }

.bm-tabs__tab[aria-selected="true"] {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}

/* How many moulds are behind the tab. An em dash means none yet. */
.bm-tabs__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
}
.bm-tabs__tab[aria-selected="true"] .bm-tabs__count { background: rgba(0, 0, 0, 0.22); }

/* The panel carries its own colour rather than trusting the page to be
   painted underneath it.

   It had none, so it showed whatever the scroll-colour system had last set —
   and on a tabbed page the panels are hidden at load, so that colour often
   never advanced past the navy hero. Dark text on dark navy, unreadable. The
   same failure as the RFQ form, and the same rule applies: legibility must
   not depend on JavaScript having run. */
.bm-panel {
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--text);
}
.bm-panel--alt { background: var(--surface-sunken); }

/* The breadcrumb strip sits between two coloured blocks and had the same
   problem. */
.bm-crumbs { background: var(--surface); color: var(--text-muted); }
.bm-panel[hidden] { display: none; }

.bm-panel__empty {
  max-width: 52ch;
  font-size: var(--step-1);
  color: var(--text-muted);
}
.bm-panel__empty a { color: var(--action); text-decoration: underline; }

.bm-panel__label {
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bm-panel__clients {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text);
}

@media (min-width: 768px) {
  .bm-tabs__strip { justify-content: center; flex-wrap: wrap; overflow-x: visible; }
  .bm-panel__clients { grid-template-columns: repeat(2, 1fr); }
}


/* <picture> is an inline wrapper the old bare <img> never had, so it has to
   pass the layout through rather than sit in the middle of it. */
picture { display: contents; }


/* Credit line for generated imagery, so a visitor is told rather than left
   to work it out. */
.bm-pagehead__credit {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-3);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-mut);
}


/* Each category tab shows its own photograph. */
.bm-panel__figure { margin: 0 0 var(--sp-5); }
.bm-panel__figure img {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.bm-panel__figure figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* The line that replaced the upload box. */
.bm-form__hint {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px dashed var(--border-inverse);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-inverse-mut);
}
.bm-form__hint i { color: var(--raw-red-500); margin-top: 0.2em; }
.bm-form__hint strong { color: var(--text-inverse); }

/* Both district controls share the field, so the hidden one takes no space. */
.bm-field [hidden] { display: none; }


/* ============================================================================
   LOGO — the BM mark on its own white plate, beside the words.

   The supplied artwork has a baked-in white background, so it sits on a small
   rounded plate rather than being knocked out. On the navy header that reads
   as a deliberate chip instead of a stray white rectangle.

   The words were removed at the owner's request now that the mark exists.
   The company name still reaches assistive technology and search through the
   link's aria-label, the page <title>, the footer address and the
   LocalBusiness schema — so it is absent from the header only, not the page.
   ============================================================================ */

.bm-logo { display: inline-flex; align-items: center; gap: var(--sp-3); }

.bm-logo__mark {
  display: block;
  flex: 0 0 auto;
  padding: 5px 7px;
  background: #FFFFFF;
  border-radius: var(--radius);
  line-height: 0;
}
.bm-logo__mark img { height: 30px; width: auto; display: block; }

@media (min-width: 768px) {
  .bm-logo__mark img { height: 34px; }
}

.bm-footer .bm-logo__mark img { height: 38px; }




/* ============================================================================
   RFQ — the reference form's structure, tightened for desktop.

   Three bugs fixed here, and all three were costing height:

   · `.bm-field` was a stretching grid, so a field beside a taller one grew,
     its `.bm-input` wrapper grew with it, and the icon pinned to that
     wrapper's centre ended up below the input it belonged to. That is the
     stray question mark and the floating layers icon. `align-content: start`
     stops the stretch.

   · Every card is a `<label>`, so the label rule was uppercasing and
     mono-spacing the card text — which is why "CuBe Inserts" read
     "CUBE INSERTS" and titles wrapped to three lines. The rule is scoped to
     `.bm-field__label` now, so it cannot reach them.

   · `.bm-rfq__step > .bm-field` outranked `.bm-field--third`, so the three
     spec fields never made one row. Both use the child selector now.
   ============================================================================ */

.bm-rfq {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--gutter);
  background: var(--surface-raised);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15, 30, 54, 0.18);
}

.bm-rfq__errors {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-left: 4px solid var(--action);
  border-radius: 10px;
  color: #7F1D1D;
  font-size: 0.9rem;
}
.bm-rfq__errors p { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.bm-rfq__errors ul { margin: 0; padding-left: 1.4em; }
.bm-rfq__errors li { margin: 2px 0; }

.bm-rfq__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}
.bm-rfq__step:first-of-type { border-top: 0; padding-top: 0; }

.bm-rfq__legend { display: flex; align-items: center; gap: var(--sp-4); padding: 0; }
.bm-rfq__legend strong { display: block; font-size: var(--step-1); color: var(--text-brand); }
.bm-rfq__legend small  { display: block; font-size: var(--step--1); color: var(--text-muted); }

.bm-rfq__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--step--1);
}


/* --- Fields --------------------------------------------------------------- */

.bm-rfq .bm-field { align-content: start; gap: var(--sp-2); }

/* Quieter than before: a label should be findable, not compete with the
   value typed next to it. */
.bm-rfq .bm-field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bm-rfq b { color: var(--action); }

.bm-input { position: relative; display: block; align-self: start; }

.bm-input > i {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: var(--raw-slate-500);
  pointer-events: none;
  z-index: 1;
}

.bm-rfq .bm-input input,
.bm-rfq .bm-input select,
.bm-rfq .bm-field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.bm-rfq .bm-field textarea { padding-left: var(--sp-3); min-height: 96px; }

.bm-rfq .bm-input input::placeholder,
.bm-rfq .bm-field textarea::placeholder { color: var(--raw-slate-500); }

.bm-rfq .bm-input input:focus,
.bm-rfq .bm-input select:focus,
.bm-rfq .bm-field textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-tint);
}
.bm-rfq .bm-input:focus-within > i { color: var(--action); }


/* --- Cards ---------------------------------------------------------------
   Every rule here is scoped to `.bm-rfq`. The homepage chooser uses the same
   `.bm-choice` class names, and this file loads after bm.css — so unscoped,
   the watermark below replaced the chooser's icon chip and escaped its card.
   --- ---------------------------------------- */

.bm-rfq .bm-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

.bm-rfq .bm-choice { cursor: pointer; }
.bm-rfq .bm-choice input { position: absolute; opacity: 0; pointer-events: none; }

/* The icon is a watermark, not a column.

   As a column it took roughly 40% of the card, which is why "Lubricant &
   Industrial" broke over three lines while "Dairy" sat on one. Behind the
   text, every label gets the full width and the row height is set by the
   longest label rather than by the squeeze. */
.bm-rfq .bm-choice__box {
  position: relative;
  display: block;
  min-height: 46px;
  height: 100%;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  overflow: hidden;
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}

/* The selected edge: quicker to scan than a full outline when five sit in a
   row, and it leaves the border free to carry focus. */
.bm-rfq .bm-choice__box::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--action);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed) var(--ease);
}

.bm-rfq .bm-choice__icon {
  position: absolute;
  right: -0.15em;
  bottom: -0.2em;
  z-index: 0;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--raw-slate-500);
  opacity: 0.3;
  pointer-events: none;
  transition: color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.bm-rfq .bm-choice__title {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.bm-rfq .bm-choice__note {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 1px;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--raw-slate-500);
  line-height: 1.25;
}

.bm-rfq .bm-choice input:checked + .bm-choice__box { border-color: var(--action); background: var(--action-tint); }
.bm-rfq .bm-choice input:checked + .bm-choice__box::before { transform: scaleX(1); }
.bm-rfq .bm-choice input:checked + .bm-choice__box .bm-choice__icon { color: var(--action); opacity: 0.3; }
.bm-rfq .bm-choice input:focus-visible + .bm-choice__box { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (hover: hover) {
  .bm-rfq .bm-choice:hover .bm-choice__box { border-color: var(--action); }
  .bm-rfq .bm-choice:hover .bm-choice__icon { color: var(--action); }
}


/* --- Close band ----------------------------------------------------------- */

.bm-rfq__close {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}
.bm-rfq__close h3 {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step-1); color: var(--text-brand); margin-bottom: var(--sp-2);
}
.bm-rfq__close h3 i { color: var(--action); }
.bm-rfq__close p { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }
.bm-rfq__close .bm-btn { justify-self: stretch; gap: var(--sp-3); }

.bm-rfq .bm-form__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-2);
  color: var(--text-muted);
}
.bm-rfq .bm-form__note i { color: var(--action); }
.bm-rfq .bm-form__note a { color: var(--text-brand); font-weight: 700; }


@media (min-width: 768px) {
  .bm-rfq { padding: var(--sp-6) var(--sp-7); gap: var(--sp-5); }

  /* Six columns: a field takes a half (3) or a third (2) of the row. Both
     rules use the child selector, so neither can outrank the other. */
  .bm-rfq__step { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
  .bm-rfq__step > .bm-field { grid-column: span 3; }
  .bm-rfq__step > .bm-field--third { grid-column: span 2; }
  .bm-rfq__step > .bm-field--wide { grid-column: 1 / -1; }
  .bm-rfq__legend { grid-column: 1 / -1; }

  /* Five industries on one row, four materials on the next. */
  .bm-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bm-choices--rich { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .bm-rfq__close { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .bm-rfq__close .bm-btn { justify-self: end; }
}


/* ============================================================================
   SPLIT — a photograph beside a short passage.

   Same two-column shape as the mould detail pages rather than a new pattern.
   ============================================================================ */

.bm-split { display: grid; gap: var(--sp-5); align-items: center; }

.bm-split__media { margin: 0; }
.bm-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.bm-split__text { display: grid; gap: var(--sp-4); }
.bm-split__text p { font-size: var(--step-1); line-height: var(--leading-body); color: var(--text-muted); }
.bm-split__text p:first-child { color: var(--text); }

@media (min-width: 768px) {
  .bm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-7); }
}


/* The honeypot: present for a script, invisible and unreachable for a person.
   Not display:none — some bots skip hidden fields, and this one should be
   tempting. */
.bm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.bm-field__hint { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); }
.bm-rfq .bm-input input[type="file"] { padding-block: var(--sp-2); }


/* --- Client logos ---------------------------------------------------------
   Only rendered when a logo has actually been uploaded, so the section is
   names-only until then rather than a row of empty boxes. */

.bm-logowall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-6);
}
.bm-logowall li {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.bm-logowall img { max-height: 44px; width: auto; object-fit: contain; }

@media (min-width: 768px) { .bm-logowall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bm-logowall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* --- Header mark: a round badge -------------------------------------------
   The wordmark is 221x96; inside a circle it would squash or leave white
   crescents either side, so the square mark is used instead. Both come from
   whatever logo the owner uploaded in the admin.
   -------------------------------------------------------------------------- */

.bm-logo__badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.bm-logo__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .bm-logo__badge { width: 60px; height: 60px; }
}