: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 ───────────────────────────────────────────────── */
  /* dvh as well as vh: on iOS the address bar hides as you scroll, vh changes
     with it, and a hero measured in vh resizes underneath the reader's finger.
     dvh tracks the bar so the height stays put. vh stays first for anything
     that has not got dvh.

     contain:paint because overflow:hidden alone is not enough on iOS: the sweep
     is a rotating composited layer, and Safari lets one escape its parent's clip
     and widen the page, which is what lets the whole thing be dragged sideways. */
  .bmp-field{position:relative;min-height:min(96vh,880px);min-height:min(96dvh,880px);
    overflow:hidden;contain:paint;
    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);min-height:min(96dvh,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)}

  /* The footer moved to chrome.css — it is on every page, and the rule
     that gave it its border and padding here was scoped to .bmp-home, so
     inner pages had a footer with no top rule and no space above it. */

  @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}

  /* Every top-level link is a block, so that all of them are measured the
     same way. Left inline, a plain link is laid out in the list item's line
     box — inherited from the body at 16px/1.65 — while the one item with a
     dropdown has its link blockified as a flex child of .bmp-has-sub and so
     takes its own 11px line-height plus its underline padding. The two boxes
     differ by six pixels and the item with the arrow rides visibly higher
     than its neighbours. Making them all blocks removes the difference at
     its source rather than nudging one item back down with a margin. */
  .bmp-navlist > li > .bmp-navlink{display:block}

  /* 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}
  }

/* ── filming package (template-parts/package.php) ──────────────────
   Used on the homepage and Book a Shoot, so it carries its own type rather
   than leaning on the homepage's scoped h3/p rules. */
.bmp-routes .bmp-route h3{margin:0 0 12px;font-family:var(--bmp-display);font-weight:800;
  font-size:clamp(17px,1.6vw,21px);letter-spacing:.06em;text-transform:uppercase;color:var(--bmp-white)}
.bmp-routes .bmp-route p{font-family:var(--bmp-body);font-size:16px;line-height:1.62;color:var(--bmp-muted)}
.bmp-pkg-price{margin:0 0 14px !important;font-family:var(--bmp-display) !important;font-weight:800;
  font-size:clamp(38px,5vw,60px) !important;line-height:1 !important;color:var(--bmp-gold-1) !important}
.bmp-pkg-price span{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bmp-muted-2);margin-left:6px}
.bmp-pkg-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--bmp-line)}
.bmp-pkg-list li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--bmp-line);
  font-family:var(--bmp-body);font-size:15px;line-height:1.5;color:var(--bmp-white)}
.bmp-pkg-list li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:10px;
  border:2px solid var(--bmp-gold-2);transform:rotate(45deg)}
.bmp-routes .bmp-pkg-cta{margin-top:26px}
@media (max-width:760px){.bmp-routes{grid-template-columns:1fr}}