:root{
    --bmp-ink:#08080A;
    --bmp-panel:#111114;
    --bmp-line:#26241F;
    --bmp-line-2:#3A362D;
    --bmp-white:#FFFFFF;
    --bmp-muted:#A5A196;
    --bmp-muted-2:#8A857A;
    --bmp-gold-1:#F4D07A;
    --bmp-gold-2:#C8952F;
    --bmp-gold-line:#7E5C1D;
    --bmp-display:"Montserrat","Segoe UI",Helvetica,Arial,sans-serif;
    --bmp-body:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;
    --bmp-wrap:1220px;
    --bmp-gut:clamp(20px,4vw,52px);
    --bmp-sect:clamp(72px,9vw,140px);
    --bmp-ease:cubic-bezier(.16,1,.3,1);
    --bmp-ox:62%; --bmp-oy:54%; --bmp-rs:1;
    --bmp-slash:repeating-linear-gradient(102deg,
      rgba(200,149,47,.55) 0 1px, transparent 1px 7px);
  }
  .bmp-home,.bmp-home *{box-sizing:border-box}
  html{scrollbar-color:var(--bmp-gold-line) var(--bmp-ink)}
  body.bmp-home{
    margin:0;background:var(--bmp-ink);color:var(--bmp-white);
    font-family:var(--bmp-body);font-size:16px;line-height:1.65;
    caret-color:var(--bmp-gold-1);-webkit-font-smoothing:antialiased;
  }
  .bmp-home ::selection{background:var(--bmp-gold-2);color:#0A0A0A}
  .bmp-home :focus-visible{outline:2px solid var(--bmp-gold-1);outline-offset:3px}
  .bmp-home a{color:var(--bmp-gold-1);text-underline-offset:4px}
  .bmp-wrap{max-width:var(--bmp-wrap);margin:0 auto;padding:0 var(--bmp-gut)}

  .bmp-home h2{font-family:var(--bmp-display);font-weight:800;
     font-size:clamp(28px,4.4vw,54px);line-height:1.04;letter-spacing:.02em;
     text-transform:uppercase;margin:0 0 20px;text-wrap:balance}
  .bmp-home h3{font-family:var(--bmp-display);font-weight:700;font-size:14px;letter-spacing:.18em;
     text-transform:uppercase;margin:0 0 10px;color:var(--bmp-white)}
  .bmp-home p{margin:0 0 16px;color:var(--bmp-muted);max-width:68ch}
  .bmp-lede{font-size:clamp(16px,1.5vw,19px);color:var(--bmp-muted)}

  /* ── station ident ───────────────────────────────────────────── */
  .bmp-ident{position:absolute;inset:0 auto auto 0;z-index:6;width:100%;
    padding:22px var(--bmp-gut) 0;display:flex;align-items:flex-start;
    justify-content:space-between;gap:24px;pointer-events:none}
  .bmp-ident > *{pointer-events:auto}
  .bmp-lock{font-family:var(--bmp-display);font-weight:800;font-size:21px;letter-spacing:.2em;
    display:block;line-height:1;color:var(--bmp-white);text-decoration:none}
  .bmp-lock i{font-style:normal;color:var(--bmp-gold-1)}
  .bmp-lock img{display:block;height:44px;width:auto}
  .bmp-navlinks{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .bmp-home .bmp-navlist{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
    justify-content:flex-end;list-style:none;margin:0;padding:0}
  .bmp-navlink{font-family:var(--bmp-display);font-weight:700;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--bmp-muted);text-decoration:none;
    padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
  .bmp-navlink:hover{color:var(--bmp-white);border-bottom-color:var(--bmp-gold-2)}
  .bmp-navlink:focus-visible{color:var(--bmp-white);outline:2px solid var(--bmp-gold-2);
    outline-offset:4px}
  .bmp-burger{display:none}
  
  /* ── the field ───────────────────────────────────────────────── */
  .bmp-field{position:relative;min-height:min(96vh,880px);overflow:hidden;
    border-bottom:1px solid var(--bmp-line);isolation:isolate}
  /* the brand slash, ruled at full strength, closes the field and each section */
  .bmp-field::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:12px;background:var(--bmp-slash);pointer-events:none;z-index:7}
  .bmp-grid-layer,.bmp-sweep-layer,.bmp-arc-layer{position:absolute;inset:0;z-index:1}
  .bmp-grid-layer{
    background-image:
      linear-gradient(to right,rgba(126,92,29,.22) 1px,transparent 1px),
      linear-gradient(to bottom,rgba(126,92,29,.16) 1px,transparent 1px);
    background-size:76px 76px;
    mask-image:radial-gradient(78% 78% at var(--bmp-ox) var(--bmp-oy),#000 20%,transparent 82%);
    -webkit-mask-image:radial-gradient(78% 78% at var(--bmp-ox) var(--bmp-oy),#000 20%,transparent 82%);
  }
  .bmp-arc-layer{display:grid;place-items:center;z-index:1}
  .bmp-arc{position:absolute;border:1px solid rgba(126,92,29,.34);border-radius:50%;
    left:var(--bmp-ox);top:var(--bmp-oy);translate:-50% -50%;scale:var(--bmp-rs)}
  .bmp-arc.bmp-a{width:min(34vw,340px);aspect-ratio:1}
  .bmp-arc.bmp-b{width:min(56vw,560px);aspect-ratio:1;border-color:rgba(126,92,29,.24)}
  .bmp-arc.bmp-c{width:min(80vw,800px);aspect-ratio:1;border-color:rgba(126,92,29,.15)}

  .bmp-sweep{position:absolute;left:var(--bmp-ox);top:var(--bmp-oy);width:min(80vw,800px);aspect-ratio:1;
    translate:-50% -50%;border-radius:50%;
    background:conic-gradient(from 0deg,
      rgba(244,208,122,.30) 0deg,
      rgba(244,208,122,.10) 12deg,
      rgba(244,208,122,0) 46deg,
      rgba(244,208,122,0) 360deg);
    mask-image:radial-gradient(circle,#000 30%,transparent 72%);
    -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%);
    animation:sweep 24s linear infinite;transform-origin:50% 50%}
  @keyframes sweep{to{rotate:360deg}}

  .bmp-marks{position:absolute;left:var(--bmp-ox);top:var(--bmp-oy);width:0;height:0;z-index:3}
  .bmp-mark{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
    padding:0;border:0;background:none;cursor:pointer;
    transform:rotate(var(--bmp-a)) translateY(calc(-1 * var(--bmp-r) * var(--bmp-rs))) rotate(calc(-1 * var(--bmp-a)))}
  .bmp-mark span{position:absolute;inset:12px;border-radius:50%;
    background:var(--bmp-muted-2);transition:background .6s var(--bmp-ease)}
  .bmp-mark::after{content:"";position:absolute;inset:2px;border-radius:50%;
    border:1px solid var(--bmp-gold-1);opacity:0;scale:.5;
    transition:opacity .9s var(--bmp-ease),scale .9s var(--bmp-ease)}
  .bmp-mark.bmp-lit span{background:var(--bmp-gold-1);box-shadow:0 0 14px 2px rgba(244,208,122,.55)}
  .bmp-mark.bmp-lit::after{opacity:.85;scale:1}
  .bmp-mark:hover span{background:var(--bmp-gold-2)}

  .bmp-field-inner{position:relative;z-index:4;display:grid;pointer-events:none;
    grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(24px,4vw,56px);
    align-items:center;min-height:min(96vh,880px);padding:132px 0 120px}
  /* The headline is three lines and only ever three lines. Sized against the
     viewport it fitted at desktop and broke "GET DISCOVERED." across two lines
     on a phone, which turns a three-beat statement into a five-line paragraph.
     It is now sized against its own column, so the longest line fills the
     measure at every width and none of them can wrap. The vw clamp stays first
     as the fallback for anything without container queries. */
  .bmp-hero-copy{container-type:inline-size}
  .bmp-home h1{font-family:var(--bmp-display);font-weight:800;margin:0 0 26px;
    font-size:clamp(30px,7.6vw,92px);line-height:.98;letter-spacing:.01em;
    text-transform:uppercase}
  .bmp-home h1{font-size:min(9.2cqi,92px)}
  .bmp-home h1 span{display:block;white-space:nowrap}
  .bmp-home h1 .bmp-lit{color:var(--bmp-gold-1)}
  .bmp-hero-copy,.bmp-resolved{pointer-events:auto}
  .bmp-hero-copy .bmp-lede{max-width:44ch;margin:0 0 30px}

  /* resolved feature */
  .bmp-resolved{border:1px solid var(--bmp-line-2);background:var(--bmp-panel);
    padding:0;position:relative;box-shadow:inset 0 0 0 1px rgba(126,92,29,.18)}
  .bmp-resolved .bmp-frame{aspect-ratio:4/5;position:relative;overflow:hidden;
    background:linear-gradient(168deg,#1A1A1E,#0C0C0F 70%);
    border-bottom:1px solid var(--bmp-line-2);display:grid;place-items:center}
  .bmp-resolved .bmp-frame::before{content:"";position:absolute;inset:0;
    background:var(--bmp-slash);opacity:.28}
  .bmp-resolved .bmp-play{width:56px;height:56px;position:relative;z-index:1;opacity:.8}
  .bmp-resolved .bmp-stamp{position:absolute;left:0;bottom:0;z-index:2;
    padding:7px 12px;background:var(--bmp-ink);
    border-top:1px solid var(--bmp-line-2);border-right:1px solid var(--bmp-line-2);
    font-family:var(--bmp-display);font-weight:700;font-size:9px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--bmp-muted-2)}
  .bmp-resolved .bmp-meta{padding:18px 20px 20px}
  .bmp-resolved .bmp-cat{font-family:var(--bmp-display);font-weight:700;font-size:10px;
    letter-spacing:.26em;text-transform:uppercase;color:var(--bmp-gold-2);display:block;margin-bottom:8px}
  .bmp-resolved .bmp-ttl{font-family:var(--bmp-display);font-weight:700;font-size:17px;
    line-height:1.25;display:block;margin-bottom:6px}
  .bmp-resolved .bmp-place{font-size:13px;color:var(--bmp-muted-2);display:block}
  .bmp-resolved .bmp-fade{transition:opacity .5s var(--bmp-ease)}
  .bmp-resolved.bmp-swapping .bmp-fade{opacity:0}

  /* ── The floating enquiry control ────────────────────────────────
     One route to the form, always on screen, never in the way. It lived
     inside the hero as an absolutely positioned corner plate, which left it
     stranded in a field of empty space and gone the moment you scrolled past
     the first viewport — on a 6,500px page that is a call to action available
     for 8% of it.

     Three states, and the change of state is the design: over the hero it is
     the full ghost plate with the gold slash edge, matching the field it sits
     on. Once the hero is behind you it contracts to a solid gold mark — small,
     but inverted, so it gains weight as it loses size and never becomes a
     smudge in the corner. Pointer or keyboard brings the words back. And while
     the enquiry form itself is on screen it stands down completely, because a
     button that scrolls you to what you are already reading is noise.
     ──────────────────────────────────────────────────────────────── */
  .bmp-plate{position:fixed;right:var(--bmp-gut);bottom:30px;z-index:30;
    display:inline-flex;align-items:center;gap:12px;
    box-sizing:border-box;height:54px;padding:0 22px 0 36px;text-decoration:none;
    font-family:var(--bmp-display);font-weight:800;font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--bmp-gold-1);
    background:#0A0A0C;border:1px solid rgba(200,149,47,.8);
    overflow:hidden;
    transition:border-color .25s var(--bmp-ease),background .25s var(--bmp-ease),
      color .25s var(--bmp-ease),width .45s var(--bmp-ease),padding .45s var(--bmp-ease),
      border-radius .45s var(--bmp-ease),opacity .3s var(--bmp-ease),
      transform .45s var(--bmp-ease),box-shadow .3s var(--bmp-ease)}
  .bmp-plate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;
    background:var(--bmp-slash);transition:opacity .3s var(--bmp-ease)}
  .bmp-plate:hover,.bmp-plate:focus-visible{border-color:var(--bmp-gold-1);background:#100E0A;color:#F4D07A}
  .bmp-plate-mark{flex:none;display:grid;place-items:center;width:16px;height:16px}
  .bmp-plate-mark svg{width:14px;height:14px}
  /* The label is what collapses; the mark is what stays. Animating max-width
     rather than removing the node keeps the same element clickable throughout,
     so a press that starts mid-transition still lands. */
  .bmp-plate-t{white-space:nowrap;max-width:14em;opacity:1;
    transition:max-width .45s var(--bmp-ease),opacity .25s var(--bmp-ease)}

  /* contracted: a gold mark, 54px square — comfortably above the 44px floor */
  .bmp-plate.is-mini{width:54px;padding:0;justify-content:center;border-radius:50%;
    color:#0A0A0A;border-color:transparent;
    background:linear-gradient(180deg,var(--bmp-gold-1),var(--bmp-gold-2));
    box-shadow:0 10px 30px rgba(0,0,0,.55)}
  .bmp-plate.is-mini::before{opacity:0}
  .bmp-plate.is-mini .bmp-plate-t{max-width:0;opacity:0}
  .bmp-plate.is-mini .bmp-plate-mark{width:20px;height:20px}
  .bmp-plate.is-mini .bmp-plate-mark svg{width:18px;height:18px}
  /* and it says its own name again the moment you reach for it */
  .bmp-plate.is-mini:hover,.bmp-plate.is-mini:focus-visible{
    width:auto;border-radius:999px;padding:0 24px 0 20px;color:#0A0A0A}
  .bmp-plate.is-mini:hover .bmp-plate-t,
  .bmp-plate.is-mini:focus-visible .bmp-plate-t{max-width:14em;opacity:1}

  /* standing down over the form it points at */
  .bmp-plate.is-gone{opacity:0;transform:translateY(14px) scale(.92);pointer-events:none}

  /* ── shared ──────────────────────────────────────────────────── */
  .bmp-home section{padding:var(--bmp-sect) 0}
  .bmp-rule-top{border-top:1px solid var(--bmp-line)}
  .bmp-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
    font-family:var(--bmp-display);font-weight:800;font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;padding:15px 26px;border:1px solid var(--bmp-gold-1);
    transition:background .25s var(--bmp-ease),color .25s var(--bmp-ease),transform .25s var(--bmp-ease)}
  /* Spelled out as a.bmp-btn-gold as well as the bare class because
     .bmp-home a{color:gold} is 0,1,1 and quietly outranked this 0,1,0 rule:
     every anchor styled as the primary button was rendering gold text on a
     gold gradient, about 1.05:1. The <button> in the form was unaffected,
     which is why it read correctly and the two CTAs did not. */
  .bmp-btn-gold,
  .bmp-home a.bmp-btn-gold,
  .bmp-page a.bmp-btn-gold,
  .bmp-oc a.bmp-btn-gold{color:#0A0A0A;background:linear-gradient(180deg,var(--bmp-gold-1),var(--bmp-gold-2))}
  .bmp-btn-gold:hover{transform:translateY(-2px)}
  .bmp-btn-ghost{color:var(--bmp-gold-1);background:none;border-color:var(--bmp-gold-line)}
  .bmp-btn-ghost:hover{border-color:var(--bmp-gold-1);background:rgba(244,208,122,.07)}
  .bmp-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(24px,5vw,72px);align-items:start}

  /* feature band */
  /* Every feature visible at once. This was a horizontal scroller, which put
     the proof of the whole section — the work BMP has published — behind a
     gesture most visitors never make. On a page whose job is to be looked at,
     content you have to drag into view is content that does not count. It
     wraps instead, and the section simply gets taller. */
  .bmp-band{display:grid;grid-template-columns:1fr;gap:2px;margin-top:38px}
  @media (min-width:560px){ .bmp-band{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:900px){ .bmp-band{grid-template-columns:repeat(4,1fr)} }
  .bmp-band-foot{display:flex;align-items:baseline;justify-content:space-between;
    gap:20px;margin-top:14px;flex-wrap:wrap}
  .bmp-band-foot .bmp-note{margin:0}
  /* Buttons inherit white-space:nowrap, which a horizontal scroller hid — the
     cells there were as wide as their content needed. In a wrapping grid the
     column is ~220px and five of the eight titles ran straight out of it. */
  .bmp-band .bmp-cell{background:var(--bmp-panel);white-space:normal;
    text-align:left;font:inherit;color:var(--bmp-white);cursor:pointer;
    border:1px solid var(--bmp-line);position:relative;
    aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;
    padding:18px;transition:border-color .3s var(--bmp-ease),background .3s var(--bmp-ease)}
  .bmp-band .bmp-cell::before{content:"";position:absolute;inset:0;
    background:linear-gradient(170deg,rgba(244,208,122,.06),transparent 55%);
    opacity:0;transition:opacity .3s var(--bmp-ease)}
  .bmp-band .bmp-cell:hover{border-color:var(--bmp-gold-line);background:#15151A}
  .bmp-band .bmp-cell:hover::before{opacity:1}
  .bmp-band .bmp-tag{font-family:var(--bmp-display);font-weight:700;font-size:9px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--bmp-gold-2);position:relative}
  .bmp-band .bmp-ttl{font-family:var(--bmp-display);font-weight:700;font-size:15px;line-height:1.3;
    margin-top:8px;position:relative;overflow-wrap:anywhere;text-wrap:pretty}
  .bmp-band .bmp-pl{font-size:12px;color:var(--bmp-muted-2);margin-top:4px;position:relative}
  .bmp-note{font-size:13px;color:var(--bmp-muted-2);margin-top:18px;font-style:normal}

  /* what qualifies — the names alone.
     The descriptions that used to sit beside each one were the single biggest
     block of text on the page, and every one of them restated its own heading.
     A photograph two sections down does that job better than a sentence. */
  .bmp-names{list-style:none;margin:44px 0 0;padding:0;
    border-top:1px solid var(--bmp-line)}
  .bmp-names li{font-family:var(--bmp-display);font-weight:800;
    font-size:clamp(16px,2.4vw,26px);line-height:1.15;letter-spacing:.04em;
    text-transform:uppercase;color:var(--bmp-white);
    padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--bmp-line);
    transition:color .25s var(--bmp-ease)}
  .bmp-names li:hover{color:var(--bmp-gold-1)}

  /* two routes */
  .bmp-routes{display:grid;grid-template-columns:1.25fr .95fr;gap:2px;margin-top:40px}
  .bmp-route{background:var(--bmp-panel);border:1px solid var(--bmp-line);padding:clamp(24px,3vw,40px);
    border-top:2px solid var(--bmp-gold-line)}
  .bmp-route p{margin-bottom:0}

  /* the door through to the filming side */
  .bmp-crosslink{display:flex;flex-wrap:wrap;align-items:flex-end;
    justify-content:space-between;gap:clamp(20px,4vw,60px)}
  .bmp-crosslink h2{margin-bottom:12px}
  .bmp-crosslink p{margin:0}

  /* enquiry */
  #bmp-enquire .bmp-panel{border:1px solid var(--bmp-line-2);background:var(--bmp-panel);
    padding:clamp(26px,4vw,52px);border-top:2px solid var(--bmp-gold-2)}
  .bmp-home form{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
  .bmp-home label{display:flex;flex-direction:column;gap:8px;font-family:var(--bmp-display);
    font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--bmp-muted-2)}
  .bmp-home label.bmp-full{grid-column:1/-1}
  .bmp-home input,.bmp-home select,.bmp-home textarea{font-family:var(--bmp-body);font-size:15px;color:var(--bmp-white);
    background:#0C0C0F;border:1px solid var(--bmp-line-2);padding:13px 14px;
    letter-spacing:normal;text-transform:none;font-weight:400;
    transition:border-color .2s var(--bmp-ease)}
  .bmp-home input::placeholder,.bmp-home textarea::placeholder{color:#807B72}
  .bmp-home input:hover,.bmp-home select:hover,.bmp-home textarea:hover{border-color:var(--bmp-gold-line)}
  .bmp-home textarea{min-height:118px;resize:vertical}
  .bmp-home form .bmp-full:last-child{display:flex;align-items:center;gap:16px}
  #bmp-sent{font-size:13px;color:var(--bmp-gold-1);opacity:0;transition:opacity .3s var(--bmp-ease)}
  #bmp-sent.bmp-on{opacity:1}

  /* closing */
  .bmp-closing{text-align:center;padding:clamp(84px,10vw,150px) 0;
    background:radial-gradient(110% 130% at 50% 0%,rgba(200,149,47,.11),transparent 62%);
    border-top:1px solid var(--bmp-line)}
  .bmp-closing h2{font-size:clamp(32px,6.4vw,76px);margin-bottom:22px}
  .bmp-closing h2 .bmp-lit{color:var(--bmp-gold-1)}
  .bmp-closing p{margin:0 auto 32px;max-width:54ch}
  .bmp-closing .bmp-tagline{display:block;margin-top:30px;font-family:var(--bmp-display);
    font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--bmp-muted-2)}

  .bmp-home footer{border-top:1px solid var(--bmp-line);padding:34px 0}
  .bmp-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    align-items:center;font-size:12px;color:var(--bmp-muted-2)}
  .bmp-foot .bmp-lock{font-size:15px}
  .bmp-foot .bmp-lock img{height:26px}
  /* Padded and inline-block: as bare inline text these were 14px tall, which
     is a thumb-sized miss on a phone. The rule under the word moves from a
     border to the underline itself so the padding does not push it away from
     the text it belongs to. */
  .bmp-foot-links a{display:inline-block;padding:11px 2px;
    color:var(--bmp-muted);text-decoration:underline;
    text-decoration-color:var(--bmp-line-2);text-decoration-thickness:1px;
    text-underline-offset:4px;
    transition:color .2s var(--bmp-ease),text-decoration-color .2s var(--bmp-ease)}
  .bmp-foot-links a:hover,.bmp-foot-links a:focus-visible{color:var(--bmp-gold-1);
    text-decoration-color:var(--bmp-gold-2)}
  .bmp-foot-links em{display:block;margin-top:7px;font-style:normal;
    font-size:11px;color:var(--bmp-muted-2)}

  @media (max-width:960px){
    :root{--bmp-ox:88%; --bmp-oy:80%; --bmp-rs:.5}
    /* Fixed at every width now, so this only trims it for a small screen. */
    .bmp-plate{bottom:20px;height:48px;font-size:11px;padding:0 18px 0 32px}
    .bmp-plate.is-mini{width:48px;padding:0}
    .bmp-field-inner{grid-template-columns:1fr;padding:206px 0 132px;gap:38px}
    .bmp-resolved{max-width:22rem}
    .bmp-grid-layer,.bmp-arc-layer,.bmp-sweep{opacity:.55}
    .bmp-routes,.bmp-split{grid-template-columns:1fr}
    .bmp-home form{grid-template-columns:1fr 1fr}
    /* Without JavaScript the links stay on the page, stacked under the lockup. */
    .bmp-ident{flex-direction:column;align-items:flex-start;gap:14px}
    .bmp-lock img{height:36px}
    .bmp-navlinks{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 20px}
    .bmp-home .bmp-navlist{flex-wrap:wrap;justify-content:flex-start;gap:12px 20px}
    .bmp-navlink{font-size:10px;letter-spacing:.16em}

    /* ── the mobile menu ─────────────────────────────────────────
       Everything below is scoped to .bmp-js, so the collapse only happens
       once nav.js is there to reopen it. */
    .bmp-js .bmp-ident{flex-direction:row;align-items:center;gap:16px}

    .bmp-js .bmp-burger{position:relative;z-index:42;display:flex;flex-direction:column;
      justify-content:center;gap:5px;width:44px;height:44px;flex:0 0 auto;
      padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .bmp-burger .bmp-bar{display:block;width:24px;height:2px;margin:0 auto;
      background:var(--bmp-white);transition:transform .25s,opacity .15s}
    .bmp-burger:focus-visible{outline:2px solid var(--bmp-gold-2);outline-offset:2px}
    .bmp-burger[aria-expanded="true"] .bmp-bar:nth-of-type(1){transform:translateY(7px) rotate(45deg)}
    .bmp-burger[aria-expanded="true"] .bmp-bar:nth-of-type(2){opacity:0}
    .bmp-burger[aria-expanded="true"] .bmp-bar:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)}

    /* The panel is fixed rather than absolute: on the homepage the ident sits
       inside the radar field, and an absolute panel would be clipped by it. */
    .bmp-js .bmp-navlinks{position:fixed;inset:0;z-index:41;
      display:flex;flex-direction:column;align-items:stretch;justify-content:center;
      gap:0;margin:0;padding:0 var(--bmp-gut);background:var(--bmp-ink);
      opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .25s ease,transform .25s ease,visibility .25s}
    .bmp-js .bmp-navlinks.bmp-open{opacity:1;visibility:visible;transform:none}
    .bmp-js .bmp-navlinks .bmp-navlist{flex-direction:column;align-items:stretch;
      flex-wrap:nowrap;justify-content:center;gap:0;width:100%}
    .bmp-js .bmp-navlinks .bmp-navlink{display:block;width:100%;
      font-size:15px;letter-spacing:.18em;color:var(--bmp-white);
      padding:20px 0;border-bottom:1px solid var(--bmp-line)}
    .bmp-js .bmp-navlinks li:last-child .bmp-navlink,
    .bmp-js .bmp-navlinks .bmp-navlink:last-child{border-bottom:0}
    .bmp-js.bmp-nav-open,
    .bmp-js.bmp-nav-open body{overflow:hidden}
  }
  @media (max-width:600px){
    .bmp-home form{grid-template-columns:1fr}
    .bmp-row{grid-template-columns:1fr;gap:6px}
    .bmp-plate{right:var(--bmp-gut);left:auto;bottom:22px}
  }
  @media (prefers-reduced-motion:reduce){
    /* the plate's collapse is covered by the blanket rule below; it only needs
       its displaced state neutralised so it disappears without sliding */
    .bmp-plate.is-gone{transform:none}
    .bmp-js .bmp-navlinks,.bmp-burger .bmp-bar{transition:none}
    .bmp-home *,.bmp-home *::before,.bmp-home *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important}
    .bmp-sweep{display:none}
  }

.bmp-home #bmp-sent.bmp-on{opacity:1}
.bmp-home #bmp-sent.bmp-bad{color:#F0A79A}

/* ── menu items that open ─────────────────────────────────────────
   Videos is one item with parts to it rather than seven flat links.
   Both behaviours hang off .bmp-has-sub, which nav.js sets on the
   parent alongside the toggle it injects: without JavaScript the
   sub-menu is simply always visible, which is a longer menu but a
   working one.

   Unscoped, unlike most of this file, because the ident is on every
   page and the homepage and inner-page scopes must not drift.
   ───────────────────────────────────────────────────────────────── */

  .bmp-navlist .sub-menu{list-style:none;margin:0;padding:0}
  .bmp-navlist .menu-item-has-children{position:relative}

  /* The disclosure arrow. A button rather than a second link: it changes
     what is on screen, it does not go anywhere, and the parent keeps its
     own href so "Videos" still leads to the videos. */
  .bmp-navsub-toggle{
    display:none;padding:0;background:none;border:0;cursor:pointer;
    color:var(--bmp-muted);line-height:0;-webkit-tap-highlight-color:transparent;
    transition:color .2s,transform .25s var(--bmp-ease);
  }
  .bmp-navsub-toggle svg{width:9px;height:9px;display:block}
  .bmp-navsub-toggle:hover{color:var(--bmp-gold-1)}
  .bmp-navsub-toggle:focus-visible{outline:2px solid var(--bmp-gold-2);outline-offset:3px}
  .bmp-navsub-toggle[aria-expanded="true"]{transform:rotate(180deg);color:var(--bmp-gold-1)}
  .bmp-js .bmp-navsub-toggle{display:inline-block}

  @media (min-width:961px){
    .bmp-js .bmp-navlist .bmp-has-sub{display:flex;align-items:center;gap:7px}

    /* Panelled and lifted clear of the field. Left-aligned to its parent
       rather than centred: the parent is the anchor the eye is already on. */
    .bmp-js .bmp-navlist .sub-menu{
      position:absolute;top:100%;left:0;z-index:44;min-width:212px;
      margin-top:14px;padding:6px 0;
      background:var(--bmp-panel);border:1px solid var(--bmp-line);
      opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .2s ease,transform .2s ease,visibility .2s;
    }
    /* The gap between the parent and the panel would drop a hover halfway
       across it, so it is bridged rather than left as a hole. */
    .bmp-js .bmp-navlist .menu-item-has-children::after{
      content:"";position:absolute;top:100%;left:0;width:100%;height:16px}

    .bmp-js .bmp-navlist .menu-item-has-children:hover > .sub-menu,
    .bmp-js .bmp-navlist .menu-item-has-children:focus-within > .sub-menu,
    .bmp-js .bmp-navlist .menu-item-has-children.bmp-sub-open > .sub-menu{
      opacity:1;visibility:visible;transform:none}

    .bmp-js .bmp-navlist .sub-menu .bmp-navlink{
      display:block;padding:11px 20px;border-bottom:0;
      font-size:10px;letter-spacing:.16em;color:var(--bmp-muted)}
    .bmp-js .bmp-navlist .sub-menu .bmp-navlink:hover{
      color:var(--bmp-white);background:var(--bmp-ink)}
  }

  @media (max-width:960px){
    /* An accordion inside the full-screen panel, exactly as the reference
       Lloyd sent works: the parent stays tappable, the arrow opens the
       children under it, and the black ground sets them apart from the
       top level without moving them off screen. */
    .bmp-js .bmp-navlinks .bmp-has-sub{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      border-bottom:1px solid var(--bmp-line)}
    .bmp-js .bmp-navlinks .bmp-has-sub .bmp-navlink{
      flex:1 1 auto;border-bottom:0}
    .bmp-js .bmp-navlinks .bmp-navsub-toggle{flex:0 0 auto;padding:20px 4px 20px 16px}
    .bmp-js .bmp-navlinks .bmp-navsub-toggle svg{width:12px;height:12px}

    .bmp-js .bmp-navlinks .sub-menu{display:none;background:#000;
      border-bottom:1px solid var(--bmp-line)}
    .bmp-js .bmp-navlinks .menu-item-has-children.bmp-sub-open > .sub-menu{display:block}
    .bmp-js .bmp-navlinks .sub-menu .bmp-navlink{
      padding:15px 0 15px 20px;font-size:12px;letter-spacing:.14em;
      color:var(--bmp-muted);border-bottom:0}
    .bmp-js .bmp-navlinks .sub-menu li:not(:last-child) .bmp-navlink{
      border-bottom:1px solid var(--bmp-line)}
    /* Gold caret, so a child reads as a child before it is read at all. */
    .bmp-js .bmp-navlinks .sub-menu .bmp-navlink::before{
      content:"\25B8";color:var(--bmp-gold-2);margin-right:10px}

    /* The panel centres its contents, which is right for five links and
       wrong for thirteen. Once a section is open it scrolls instead. */
    .bmp-js .bmp-navlinks{justify-content:flex-start;
      padding-top:104px;padding-bottom:40px;overflow-y:auto}
  }