/* ============================================================================
   BISHNU MOULDS
   Mobile-first. Phone is the base; tablet and desktop are additions.

   Two breakpoints only:
     768px   tablet
     1200px  desktop

   There are no max-width queries in this file. If you find yourself wanting
   one, the base styles are wrong.

   Colour comes from the visiting card and from nowhere else. No component
   may contain a raw hex value — only semantic tokens. 60/30/10:
     60%  white + machine gray surfaces
     30%  industrial navy structure
     10%  machinery crimson, reserved for action
   ============================================================================ */

:root {

  /* --- Layer 1 · raw brand values, from the card -------------------------- */
  --raw-navy-900: #0F1E36;
  --raw-navy-800: #1B2E4B;
  --raw-navy-700: #24395A;

  --raw-red-600:  #D32F2F;
  --raw-red-500:  #E53935;
  --raw-red-050:  #FDECEC;

  --raw-slate-900: #0F172A;
  --raw-slate-700: #334155;
  --raw-slate-500: #64748B;
  --raw-slate-300: #CBD5E1;
  --raw-slate-200: #E2E8F0;
  --raw-slate-100: #F1F5F9;
  --raw-slate-050: #F8FAFC;
  --raw-white:     #FFFFFF;

  /* --- Layer 2 · semantic. Components use these, never the above. --------- */
  --surface:          var(--raw-white);
  --surface-sunken:   var(--raw-slate-100);
  --surface-raised:   var(--raw-white);
  --surface-brand:    var(--raw-navy-900);
  --surface-brand-2:  var(--raw-navy-800);

  --text:             var(--raw-slate-900);
  --text-muted:       var(--raw-slate-500);
  --text-inverse:     var(--raw-white);
  --text-inverse-mut: rgba(255, 255, 255, 0.72);
  --text-brand:       var(--raw-navy-900);

  --action:           var(--raw-red-600);
  --action-hover:     var(--raw-red-500);
  --action-tint:      var(--raw-red-050);
  --on-action:        var(--raw-white);

  --border:           var(--raw-slate-300);
  --border-soft:      var(--raw-slate-200);
  --border-inverse:   rgba(255, 255, 255, 0.16);

  --focus:            var(--raw-red-600);

  /* --- Type ---------------------------------------------------------------- */
  --font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid from 360px to 1200px, so tablet needs no type overrides. */
  --step--1: clamp(0.80rem, 0.77rem + 0.13vw, 0.875rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.18rem + 0.72vw, 1.80rem);
  --step-3:  clamp(1.65rem, 1.31rem + 1.45vw, 2.55rem);
  --step-4:  clamp(2.00rem, 1.38rem + 2.65vw, 3.50rem);

  --leading-tight: 1.15;
  --leading-body:  1.65;
  --tracking-wide: 0.16em;

  /* --- Space · one scale, used everywhere --------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Section rhythm grows with the viewport rather than by breakpoint. */
  --section-y:   clamp(3rem, 8vw, 6.5rem);
  --gutter:      clamp(1.15rem, 5vw, 2.5rem);
  --measure:     1200px;

  --radius:     4px;
  --radius-lg:  8px;

  --shadow-1: 0 1px 2px rgba(15, 30, 54, 0.06);
  --shadow-2: 0 8px 24px -12px rgba(15, 30, 54, 0.30);

  --speed:      180ms;
  --speed-slow: 420ms;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);

  /* Height of the fixed mobile action bar, so content can clear it. */
  --actionbar-h: 60px;
  --header-h:    58px;
}


/* ============================================================================
   RESET
   ============================================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));

  /* Sideways scroll is contained here, not on body.
     `clip` rather than `hidden`: hidden turns the element into a scroll
     container, which silently breaks position:sticky on the header and
     leaves the document itself still scrollable sideways. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No overflow-x here — see html above. Setting it on body makes body a
     scroll container and stops the header sticking. */
  /* Room for the fixed action bar; removed once it is hidden at 768px. */
  padding-bottom: var(--actionbar-h);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  line-height: var(--leading-tight);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--action);
  color: var(--on-action);
}


/* ============================================================================
   LAYOUT
   ============================================================================ */

.bm-container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Navy sections carry the structure of the page — 30% of the palette. */
.bm-section--brand {
  background: var(--surface-brand);
  color: var(--text-inverse);
}
.bm-section--brand h1,
.bm-section--brand h2,
.bm-section--brand h3 { color: var(--text-inverse); }
.bm-section--brand p  { color: var(--text-inverse-mut); }

.bm-section--sunken { background: var(--surface-sunken); }

/* Section heading block */
.bm-head { max-width: 46rem; margin-bottom: var(--sp-6); }

.bm-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action);
}
.bm-section--brand .bm-eyebrow { color: var(--raw-red-500); }

.bm-title { font-size: var(--step-3); color: var(--text-brand); }
.bm-section--brand .bm-title { color: var(--text-inverse); }

.bm-lead {
  margin-top: var(--sp-3);
  font-size: var(--step-1);
  color: var(--text-muted);
}
.bm-section--brand .bm-lead { color: var(--text-inverse-mut); }

/* One grid utility. Cards choose their own minimum and the grid does the rest,
   which removes the need for per-breakpoint column counts. */
.bm-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

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

@media (min-width: 1200px) {
  .bm-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bm-grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================================
   BUTTONS — crimson is the 10%, and only here
   ============================================================================ */

.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;              /* thumb-sized on phones */
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}

.bm-btn--primary {
  background: var(--action);
  color: var(--on-action);
}
.bm-btn--primary:hover { background: var(--action-hover); }

.bm-btn--secondary {
  background: var(--surface-brand);
  color: var(--text-inverse);
}
.bm-btn--secondary:hover { background: var(--surface-brand-2); }

/* currentColor, not a fixed navy.

   This button was navy text with a navy-scoped white override, and the
   override only reached `.bm-section--brand`. Every other dark surface — the
   hero copy panel, the mobile menu, the timeline — rendered navy on navy and
   the label vanished.

   Taking the surrounding text colour fixes all of them at once, and any dark
   panel added later inherits the fix instead of repeating the bug. */
.bm-btn--outline {
  color: currentColor;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}
.bm-btn--outline:hover { border-color: var(--action); color: var(--action); }
.bm-section--brand .bm-btn--outline:hover {
  border-color: var(--text-inverse);
}

/* Full width on phones — the default, not an override. */
.bm-btn { width: 100%; }
@media (min-width: 768px) { .bm-btn { width: auto; } }

.bm-btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 768px) {
  .bm-btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
}


/* ============================================================================
   HEADER — logo and one action on phones; navigation appears at 768px
   ============================================================================ */

.bm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--surface-brand);
  color: var(--text-inverse);
  border-bottom: 1px solid var(--border-inverse);
}

/* Three columns, the outer two equal: that is what puts the mark dead centre
   regardless of how wide either group of links happens to be. On a phone the
   same grid carries burger · logo · call. */
.bm-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
}

.bm-header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-5);
}

.bm-logo { justify-self: center; }
.bm-burger { justify-self: start; }

.bm-logo {
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-inverse);
  white-space: nowrap;
}
.bm-logo span { color: var(--action); }

.bm-nav { display: none; }
.bm-nav--left { justify-self: start; }

.bm-header__cta { display: none; }

/* Phone: a single compact call button beside the logo. */
.bm-header__call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-inverse);
}

@media (min-width: 768px) {
  :root { --header-h: 68px; }

  .bm-header__call { display: none; }

  .bm-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin-left: auto;
    margin-right: var(--sp-5);
  }
  .bm-nav a {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-inverse-mut);
    transition: color var(--speed) var(--ease);
  }
  .bm-nav a:hover { color: var(--text-inverse); }

  .bm-header__cta {
    display: inline-flex;
    width: auto;
    min-height: 42px;
    padding: var(--sp-2) var(--sp-4);
  }
}


/* ============================================================================
   MOBILE ACTION BAR — the funnel stays one thumb away at all times.
   Hidden from 768px, where the header CTA takes over.
   ============================================================================ */

.bm-actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  height: var(--actionbar-h);
  background: var(--surface-brand);
  border-top: 1px solid var(--border-inverse);
}

.bm-actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-inverse-mut);
}
.bm-actionbar a i { font-size: 1rem; }

.bm-actionbar a:last-child {
  background: var(--action);
  color: var(--on-action);
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bm-actionbar { display: none; }
}


/* ============================================================================
   FOOTER
   ============================================================================ */

.bm-footer {
  background: var(--surface-brand);
  color: var(--text-inverse-mut);
  padding-block: var(--sp-7) var(--sp-5);
}

/* Phone: the brand centred across the top, then the four blocks in two
   columns — Moulds beside Industries, Company beside Tool Room. The markup
   is already in that order, so the grid alone puts them there.

   Columns land at roughly 150px on a 360px screen, so the longer labels wrap
   to two lines. The tighter gap and the smaller link size below are what keep
   that from turning into a very tall footer. */
.bm-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  align-items: start;
}

.bm-footer__grid > :first-child {
  grid-column: 1 / -1;
  text-align: center;
}
.bm-footer__grid > :first-child p { margin-inline: auto; max-width: 42ch; }

.bm-footer h4 {
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse);
}

.bm-footer li + li { margin-top: var(--sp-2); }
.bm-footer a:hover { color: var(--text-inverse); }

.bm-footer address {
  font-style: normal;
  line-height: var(--leading-body);
}

.bm-footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-inverse);
  font-size: var(--step--1);
}

@media (min-width: 768px) {
  /* Same two columns from here, but the brand goes back to reading
     left-aligned now there is room for it. */
  .bm-footer__grid { gap: var(--sp-6) var(--sp-7); }
  .bm-footer__grid > :first-child { text-align: left; }
  .bm-footer__grid > :first-child p { margin-inline: 0; }
}
@media (min-width: 1200px) {
  .bm-footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)) 1.2fr; }
  .bm-footer__grid > :first-child { grid-column: auto; }
}


/* ============================================================================
   MOTION — functional only, and off when the visitor asks
   ============================================================================ */

.bm-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--speed-slow) var(--ease),
              transform var(--speed-slow) var(--ease);
}
.bm-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bm-reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   HERO — the editorial slider, kept.

   Three slides, each a visual panel above a copy panel, exactly as the
   reference design has it. Rebuilt on scroll-snap rather than Swiper: the
   swipe is the browser's own, it needs no JavaScript to work, and it costs
   nothing on a phone. The dots are progressive enhancement.

   Phone: panels stack inside the slide. From 768px they sit side by side.
   ============================================================================ */

.bm-hero {
  position: relative;
  background: var(--surface-brand);
  color: var(--text-inverse);
}

.bm-hero__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bm-hero__track::-webkit-scrollbar { display: none; }

.bm-hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--header-h) - var(--actionbar-h));
}

/* --- Visual panel: photograph, with the headline sitting on it ----------- */

.bm-hero__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  padding: var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

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

/* Navy wash — keeps the photograph inside the palette and makes the
   headline legible over any part of a busy workshop image. */
.bm-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(15, 30, 54, 0.30) 0%,
    rgba(15, 30, 54, 0.72) 55%,
    rgba(15, 30, 54, 0.94) 100%
  );
}

.bm-hero__kicker {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--raw-red-500);
}

.bm-hero__slide h1,
.bm-hero__slide h2 {
  font-size: var(--step-4);
  color: var(--text-inverse);
}
.bm-hero__slide h1 span,
.bm-hero__slide h2 span {
  display: block;
  color: var(--text-inverse-mut);
  font-weight: 600;
}

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

/* --- Copy panel --------------------------------------------------------- */

.bm-hero__copy {
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  background: var(--surface-brand-2);
}

.bm-hero__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(--raw-red-500);
}

.bm-hero__text {
  font-size: var(--step-0);
  color: var(--text-inverse-mut);
  max-width: 52ch;
}

.bm-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* --- Controls ----------------------------------------------------------- */

.bm-hero__dots {
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
}

.bm-hero__dot {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  transition: background-color var(--speed) var(--ease), width var(--speed) var(--ease);
}
.bm-hero__dot.is-active { background: var(--action); width: 44px; }

.bm-hero__hint {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-4);
  z-index: 2;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-mut);
}

@media (min-width: 768px) {
  .bm-hero__slide {
    grid-template-rows: none;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: calc(100svh - var(--header-h));
  }
  .bm-hero__visual { min-height: 0; padding: var(--sp-7) var(--sp-6); }
  .bm-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-7) var(--sp-6);
  }
  .bm-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .bm-hero__hint { display: none; }
}

@media (min-width: 1200px) {
  .bm-hero__visual { padding: var(--sp-8); }
  .bm-hero__copy   { padding: var(--sp-8); }
}

/* ============================================================================
   CHOOSER — the funnel entry, directly under the hero
   ============================================================================ */

.bm-chooser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Taller, with the icon behind the words as a watermark rather than in a
   chip beside them — the same treatment as the RFQ cards, so the two places a
   visitor picks a mould type look like the same control.

   The border is 2px: at 1px on a white card against a near-white section it
   was effectively invisible. */
.bm-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 118px;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
  overflow: hidden;
  background: var(--surface-raised);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.bm-choice:hover,
.bm-choice:focus-visible {
  border-color: var(--action);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.bm-choice:hover .bm-choice__icon,
.bm-choice:focus-visible .bm-choice__icon { color: var(--action); }

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

.bm-choice__text { position: relative; z-index: 1; min-width: 0; }

.bm-choice__title {
  display: block;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-brand);
}

.bm-choice__desc {
  display: block;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.bm-choice__arrow {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1;
  color: var(--border);
  transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.bm-choice:hover .bm-choice__arrow { color: var(--action); transform: translateX(3px); }

@media (min-width: 768px) {
  .bm-chooser__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (min-width: 1200px) {
  .bm-chooser__grid { grid-template-columns: repeat(4, 1fr); }
  /* The card is already a column and already tall; the old rule here reset
     min-height to 0, which cancelled the height at exactly the width where
     it was wanted. The arrow stays now that it is pinned out of the
     watermark's way. */
  .bm-choice { min-height: 132px; }
}


/* ============================================================================
   UTILITIES
   ============================================================================ */

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

/* ============================================================================
   TRUST STRIP — names scroll on a phone rather than wrapping to six rows
   ============================================================================ */

.bm-trust { padding-block: var(--sp-5); border-bottom: 1px solid var(--border-soft); }

.bm-trust__label {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.bm-trust__list {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);

  /* Full-bleed. The scroller breaks out of the container gutter so names can
     run to the screen edge and the next one peeks into view; the gutter is
     restored as padding so the first name still lines up with the label
     above it. Without this the list is clipped mid-gutter and reads as
     broken rather than scrollable. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.bm-trust__list::-webkit-scrollbar { display: none; }

.bm-trust__list li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-brand);
  white-space: nowrap;
  opacity: 0.75;
}

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

@media (min-width: 1200px) {
  .bm-trust__list {
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: visible;
    /* No longer a scroller, so give the gutter back. */
    margin-inline: 0;
    padding-inline: 0;
  }
}


/* ============================================================================
   CARD — one component, reused by capabilities, moulds, outputs,
   industries and machinery. Variants change content, not structure.
   ============================================================================ */

.bm-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-raised);
  /* 2px, as the design has it — it is what the crimson draws over on hover. */
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 13px 10px -7px rgba(15, 30, 54, 0.15);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.bm-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.bm-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunken);
  overflow: hidden;
}
.bm-card__media img { width: 100%; height: 100%; object-fit: cover; }

.bm-card__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-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bm-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1 1 auto;
}

.bm-card__title { font-size: var(--step-1); color: var(--text-brand); }

.bm-card__desc { font-size: var(--step--1); color: var(--text-muted); }

/* Specification rows — what an engineer scans for. */
.bm-card__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--step--1);
}
.bm-card__specs dt {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-size: 0.7rem;
  align-self: center;
}
.bm-card__specs dd { color: var(--text-brand); font-weight: 600; }

.bm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
}

.bm-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action);
}
.bm-card__cta:hover { gap: var(--sp-3); }

/* Compact variant — no image, used for materials and capability points. */
/* The design has a single card: an opaque panel with a 2px border. The flat
   variant only drops the shadow — it must keep a surface, or the glow ring
   behind it shows through and reads as a gradient background. */
.bm-card--flat { box-shadow: none; background: var(--surface-raised); }
.bm-card--flat .bm-card__body { padding: var(--sp-5); }

/* A watermark, like the RFQ cards and the homepage chooser — so every place
   on the site that offers a choice with an icon looks like the same control.

   It sits inside the body rather than bleeding past the card edge, because
   the card keeps `overflow: visible` for its border-draw and would not clip
   it. */
.bm-card__body { position: relative; }

.bm-card__icon {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 0;
  width: auto; height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--raw-slate-500);
  opacity: 0.3;
  pointer-events: none;
  transition: color var(--speed) var(--ease);
}

/* Everything written stays above it. */
.bm-card__title,
.bm-card__desc,
.bm-card__kicker,
.bm-card__specs,
.bm-card__foot { position: relative; z-index: 1; }

@media (hover: hover) {
  .bm-card:hover .bm-card__icon { color: var(--action); }
}


/* ============================================================================
   PROCESS — a numbered rail. It stays vertical at every width, because ten
   stages side by side is unreadable on any screen.
   ============================================================================ */

.bm-steps { display: grid; gap: 0; margin-top: var(--sp-5); }

.bm-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}

.bm-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 17px;
  width: 2px;
  height: calc(100% - 34px);
  background: var(--border-inverse);
}

.bm-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

.bm-step__title { font-size: var(--step-1); color: var(--text-inverse); }

.bm-step__desc {
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  color: var(--text-inverse-mut);
}

@media (min-width: 1200px) {
  .bm-steps { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
}


/* ============================================================================
   CLIENT WALL
   ============================================================================ */

.bm-clients { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }

.bm-clients__group h3 {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--sp-3);
}

.bm-clients__names { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }

.bm-clients__names li {
  padding: var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-brand);
}

@media (min-width: 768px) {
  .bm-clients { grid-template-columns: 1fr 1fr; }
  .bm-clients__names { grid-template-columns: 1fr 1fr; }
}


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

.bm-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.bm-gallery figure {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.bm-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--speed-slow) var(--ease);
}
.bm-gallery figure:hover img { transform: scale(1.04); }
.bm-gallery figure:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (min-width: 768px) {
  .bm-gallery { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
  .bm-gallery figure:first-child { grid-column: span 2; aspect-ratio: 1; }
}


/* ============================================================================
   FAQ — native disclosure, so it works before JavaScript does
   ============================================================================ */

.bm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding-block: var(--sp-4);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-brand);
  cursor: pointer;
  list-style: none;
}
.bm-faq summary::-webkit-details-marker { display: none; }

.bm-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--action);
  font-weight: 700;
}
.bm-faq details[open] summary::after { content: "\2013"; }

.bm-faq__answer {
  padding-bottom: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 62ch;
}


/* ============================================================================
   RFQ FORM
   ============================================================================ */

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

.bm-field { display: grid; gap: var(--sp-2); }

.bm-field label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-inverse);
}

.bm-field input,
.bm-field select,
.bm-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius);
  color: var(--text-inverse);
  font-size: var(--step-0);
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}
.bm-field textarea { min-height: 120px; resize: vertical; }

.bm-field input::placeholder,
.bm-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.bm-field input:focus,
.bm-field select:focus,
.bm-field textarea:focus {
  outline: none;
  border-color: var(--action);
  background: rgba(255, 255, 255, 0.1);
}

.bm-field select option { background: var(--surface-brand); color: var(--text-inverse); }

.bm-dropzone {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--border-inverse);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
}
.bm-dropzone:hover { border-color: var(--action); }
.bm-dropzone i { font-size: 1.4rem; color: var(--action); }
.bm-dropzone small { color: var(--text-inverse-mut); font-size: var(--step--1); }
.bm-dropzone input[type="file"] { display: none; }

.bm-form__note {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-inverse-mut);
}

@media (min-width: 768px) {
  .bm-form { grid-template-columns: 1fr 1fr; }
  .bm-field--wide { grid-column: 1 / -1; }
}


/* ============================================================================
   X-AXIS SAFETY
   Long unbroken strings — an email address, a GSTIN, a client name — are the
   usual cause of a page that scrolls sideways on a 320px screen.
   ============================================================================ */

address, .bm-form__note, .bm-clients__names li, .bm-footer a {
  overflow-wrap: break-word;
}

/* Grid and flex children default to min-width:auto, which lets long content
   push a track wider than its container. */
.bm-grid > *,
.bm-card__body,
.bm-step,
.bm-choice__text { min-width: 0; }

/* Tag used inline in a card body rather than pinned over an image. */
.bm-card__tag--inline {
  position: static;
  align-self: flex-start;
}

/* The full-bleed trust scroller pulls itself out of the container gutter.
   On a phone the container edge is the viewport edge, so that is what we
   want; from 1200px the container stops growing and the bleed would run
   past it. Clipping at the container gives both behaviours from one rule.
   `clip` pairs legally with visible on the other axis, so nothing here
   becomes a scroll container. */
.bm-trust .bm-container { overflow-x: clip; }

/* Belt and braces: no section may leak sideways, whatever lands in it later. */
.bm-section, .bm-hero { overflow-x: clip; }

/* ----------------------------------------------------------------------------
   HERO FRAME — the part that does not rotate.

   The slider tells you what we make; this tells you who we are and where.
   It was in the static hero and belongs above the fold whichever slide the
   visitor happens to land on.
   ---------------------------------------------------------------------------- */

.bm-hero__intro {
  padding: var(--sp-6) var(--gutter) var(--sp-5);
}

.bm-hero__eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--raw-red-500);
}

.bm-hero__intro h1 {
  font-size: var(--step-3);
  color: var(--text-inverse);
}
.bm-hero__intro h1 em {
  font-style: normal;
  color: var(--action);
}

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

/* Positioning context for the dots and the swipe hint, so they sit on the
   slider rather than over the facts strip below it. */
.bm-hero__stage { position: relative; }

.bm-hero__facts {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--gutter);
  border-top: 1px solid var(--border-inverse);
  font-size: var(--step--1);
  color: var(--text-inverse-mut);
}
.bm-hero__facts strong {
  color: var(--text-inverse);
  font-weight: 800;
}

@media (min-width: 768px) {
  .bm-hero__intro { padding: var(--sp-7) var(--sp-6) var(--sp-6); }
  .bm-hero__intro h1 { font-size: var(--step-4); }
  .bm-hero__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
  }
}

@media (min-width: 1200px) {
  .bm-hero__intro { padding: var(--sp-8) var(--sp-8) var(--sp-6); }
  .bm-hero__facts { padding: var(--sp-5) var(--sp-8); }
}

/* The slide no longer has to fill the viewport on its own — the frame above
   and the facts below take their share. Overriding here keeps the slider
   block itself untouched. */
.bm-hero__slide { min-height: clamp(22rem, 60svh, 34rem); }

@media (min-width: 768px) {
  .bm-hero__slide { min-height: clamp(24rem, 62svh, 38rem); }
}

/* ============================================================================
   CARD BORDER-DRAW — ported from the approved design (.card / .card-wrap).

   Two pseudo-elements draw a crimson frame on hover: ::before runs the
   horizontal pair out to full width, ::after runs the vertical pair down to
   full height, and they meet. The card lifts as they close.

   The original used the same technique in crimson over a spectrum glow; the
   frame is kept exactly and the glow dropped, so the effect is the design's
   and the only colour on screen is the card's.

   A phone never sees this — there is no hover — so it costs nothing where
   performance matters most.
   ============================================================================ */

.bm-card {
  position: relative;
  overflow: visible;
}

.bm-card__media {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.bm-card--flat .bm-card__media { border-radius: var(--radius-lg); }

.bm-card::before,
.bm-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  border-style: solid;
  border-color: var(--action);
  border-radius: var(--radius-lg);
  pointer-events: none;
  transition: width var(--speed-slow) var(--ease), height var(--speed-slow) var(--ease);
}

/* Horizontal pair: grows sideways. */
.bm-card::before { width: 0; height: 100%; border-width: 2px 0 2px 0; }

/* Vertical pair: grows downwards. */
.bm-card::after  { width: 100%; height: 0; border-width: 0 2px 0 2px; }

@media (hover: hover) {
  .bm-card:hover {
    border-color: var(--action);
    box-shadow: 0 30px 18px -8px rgba(15, 30, 54, 0.25);
    transform: translateY(-0.35em);
  }
  .bm-card:hover::before { width: 100%; }
  .bm-card:hover::after  { height: 100%; }
}

/* The draw is decoration: without motion the card simply takes the border. */
@media (prefers-reduced-motion: reduce) {
  .bm-card::before, .bm-card::after { transition: none; }
}

/* The rainbow, as a border and nothing else.

   It was drawn as a blurred rectangle behind the card and kept behind it with
   z-index:-1. That fails the moment anything gives the card a stacking
   context of its own — GSAP's reveal leaves an inline transform on it, which
   does exactly that, and the gradient then paints over the card face.

   So the ring is a ring by construction: the gradient fills the element, and
   a mask cuts the middle out, leaving only the 2px edge. No stacking context
   can turn that back into a fill. */
.bm-card__glow {
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 2px;
  background: linear-gradient(45deg,
    #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5,
    #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400% 400%;
  animation: bm-card-glow 20s linear infinite;

  /* Keep the padding edge, drop the middle. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed-slow) var(--ease);
}

@keyframes bm-card-glow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@media (hover: hover) {
  .bm-card:hover .bm-card__glow { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-card__glow { animation: none; }
}


/* ============================================================================
   SECTION EDGES

   With the page carrying the colour, two white sections meeting have nothing
   between them. A hairline at each boundary gives the eye the join back.
   ============================================================================ */

.bm-section { border-top: 1px solid var(--border-soft); }
.bm-section--brand { border-top-color: var(--border-inverse); }

/* Blocks that are white on a white page need their own edge — but an edge
   with nothing inside it just crushes the text against a line, so each one
   gets the room as well.

   The RFQ fields and the dropzone are NOT in this set: they sit on navy, so
   they were never white-on-white, and the blanket rule that once included
   them overrode their inverse border and turned the dashed dropzone solid. */

.bm-faq {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  border-top: 0;
}

.bm-faq details {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding-inline: var(--sp-5);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

/* The open question is the one being read, so it takes the accent. */
.bm-faq details[open] {
  border-color: var(--action);
  box-shadow: 0 10px 30px rgba(15, 30, 54, 0.07);
}

.bm-faq summary {
  padding-block: var(--sp-4);
  font-size: var(--step-1);
}

.bm-faq__answer {
  padding-block: 0 var(--sp-5);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-4);
}


/* Footer at phone width: two narrow columns, so the type steps down a little
   and the address stops fighting for room. Both revert at 768px. */
.bm-footer__grid h4 { font-size: var(--step--1); }
.bm-footer__grid ul a,
.bm-footer__grid address { font-size: var(--step--1); line-height: 1.7; }
.bm-footer__grid address { overflow-wrap: break-word; }

@media (min-width: 768px) {
  .bm-footer__grid ul a,
  .bm-footer__grid address { font-size: var(--step-0); }
}


/* --- Centred header: the two link groups appear at 768px ------------------ */

@media (min-width: 768px) {
  .bm-nav--left,
  .bm-nav--right {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    /* The margins the old right-aligned nav needed are gone; the grid places
       these now. */
    margin: 0;
  }
  .bm-nav--left { justify-content: flex-start; }
  .bm-nav--right { justify-content: flex-end; }
}