/* The Our Work menu, on every public page (the Engine page carries it in its own compact header, .hnav).
   Desktop: Our Work stays a link to the wall. A pointer resting on it, or the small caret button, opens the three pages
   beneath it: Growth, Scale and Agility. Phone: the three pages sit indented under Our Work in the menu.
   The page you are on lights its own line and the Our Work link above it (work-menu.js). */
.wm{position:relative;display:inline-flex;align-items:center;gap:0}
.wm>a{display:inline-flex;align-items:center}
.wm-b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -10px -8px -4px;padding:0;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;opacity:.72;transition:opacity .15s,color .15s}
.wm-b svg{width:12px;height:12px;display:block;transition:transform .2s}
.wm:hover .wm-b,.wm.open .wm-b,.wm-b:focus-visible{opacity:1;color:#FF6A1A}
.wm.open .wm-b svg{transform:rotate(180deg)}
.wm-p{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;z-index:70}
/* the bridge: the pointer can travel from the link down to the list without the list closing */
.wm-p::before{content:"";position:absolute;left:0;right:0;top:0;height:14px}
.wm-l{min-width:238px;padding:8px 0;background:rgba(14,14,14,.98);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.wm:hover .wm-p,.wm.open .wm-p{display:block}
.wm .wm-l a{display:block;padding:10px 18px;font-size:.86rem;font-weight:600;line-height:1.25;color:rgba(245,244,242,.84);white-space:nowrap}
.wm .wm-l a span{display:block;margin-top:2px;font-size:.72rem;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(245,244,242,.56)}
.wm .wm-l a:hover,.wm .wm-l a:focus-visible{color:#FF6A1A;background:rgba(255,106,26,.08)}
.wm .wm-l a.on{color:#FF6A1A}
.wm>a.on{color:#FF6A1A}
@media(max-width:1079px){.wm{display:none}}
/* Phone menu. With the three extra lines the list can be taller than a short phone screen, and it is a fixed box, so
   it scrolls within itself rather than cutting Let's talk off below the fold. */
.mnav{max-height:calc(100vh - 64px);max-height:calc(100svh - 64px);overflow-y:auto;overscroll-behavior:contain}
.mnav .wm-sub{display:flex;flex-direction:column;margin:0 0 6px;padding:0 0 0 16px;border-left:2px solid rgba(255,106,26,.5)}
.mnav .wm-sub a{display:block;padding:11px 0;font-size:.96rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)}
.mnav .wm-sub a:last-child{border-bottom:0}
.mnav .wm-sub a span{display:inline;margin-left:8px;font-size:.82rem;font-weight:400;color:rgba(245,244,242,.56)}
.mnav .wm-sub a.on{color:#FF6A1A}
/* The home page and the method pages force every nav link's colour at id strength (#bh .nav a ... !important), so the
   lit state is said at the same strength. */
#bh .nav .wm>a.on,#bh .nav .wm-l a.on,#bh .mnav .wm-sub a.on,#bh .mnav a.on{color:#FF6A1A!important}
#bh .nav .wm-l a:hover,#bh .nav .wm-l a:focus-visible,#bh .nav .wm>a:hover{color:#FF6A1A!important}
/* With scripts off the caret is inert, so the list also opens while focus is inside the menu. With scripts on
   (html.wm-js) the script's open state and Escape govern it. */
html:not(.wm-js) .wm:focus-within .wm-p{display:block}
#bh .nav .wm-l a span{color:rgba(245,244,242,.56)!important}
#bh .mnav .wm-sub a span{color:rgba(245,244,242,.56)!important}