{"id":2816,"date":"2024-11-18T20:55:26","date_gmt":"2024-11-18T20:55:26","guid":{"rendered":"https:\/\/bespoke.eu.applyflow.com\/?page_id=2816"},"modified":"2026-08-05T11:45:14","modified_gmt":"2026-08-05T11:45:14","slug":"our-locations","status":"publish","type":"page","link":"https:\/\/www.bespokecareers.com\/our-locations\/","title":{"rendered":"Our locations"},"content":{"rendered":"\n\n\t<style>\n\/* ==========================================================================\n   BESPOKE CAREERS - CONTACT FORM + OFFICES\n   Everything is scoped under #bcf \/ #bof. The live site loads Bootstrap 4, the\n   Beaver Builder stylesheet and the theme's own CSS, all of which style bare\n   button\/input\/h1\/p\/ul selectors - so nothing here may rely on a global reset,\n   and every rule has to out-specify those with an ID prefix.\n   ========================================================================== *\/\n\/* F37 Ginger, from the theme's own CDN host (that host sends\n   access-control-allow-origin:*, www.bespokecareers.com does not). On the live\n   site the theme already loads these, so the browser serves them from cache. *\/\n@font-face{font-family:'F37 Ginger';font-style:normal;font-weight:300;font-display:swap;\n  src:url('https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/themes\/af-custom-child\/assets\/fonts\/f37ginger-light-webfont.ttf') format('truetype')}\n@font-face{font-family:'F37 Ginger';font-style:normal;font-weight:400;font-display:swap;\n  src:url('https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/themes\/af-custom-child\/assets\/fonts\/f37ginger-regular-webfont.ttf') format('truetype')}\n@font-face{font-family:'F37 Ginger';font-style:normal;font-weight:700;font-display:swap;\n  src:url('https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/themes\/af-custom-child\/assets\/fonts\/f37ginger-bold-webfont.ttf') format('truetype')}\n#bcf,#bof,#bofModal{\n  --lime:#97D422;\n  --orange:#FC5810;\n  --black:#0F0F0F;\n  --ink:#161616;\n  --white:#FFFFFF;\n  --muted:rgba(255,255,255,.45);\n  --line:rgba(255,255,255,.14);\n  --panel:44vw;\n  --ease:cubic-bezier(.16,1,.3,1);\n  \/* Height of the site's sticky header, measured at runtime. 0 until then, so\n     the section is never taller than the space it actually has. *\/\n  --head:0px;\n  \/* Height of the Back\/Next bar, measured at runtime so the team strip can sit\n     exactly on top of it whatever the button padding ends up being. *\/\n  --bar:62px;\n}\n\/* Scoped reset. Deliberately explicit rather than `#bcf *` shorthand for the\n   properties the theme is most likely to have opinions about. *\/\n#bcf,#bcf *,#bcf *::before,#bcf *::after,\n#bof,#bof *,#bof *::before,#bof *::after,\n#bofModal,#bofModal *,#bofModal *::before,#bofModal *::after{box-sizing:border-box}\n#bcf h1,#bcf h2,#bcf p,#bcf ul,#bcf li,#bcf figure,#bcf blockquote,#bcf label,\n#bof h2,#bof h3,#bof p,#bof ul,#bof li,\n#bofModal h3,#bofModal p{margin:0;padding:0;list-style:none;border:0}\n#bcf button,#bcf input,#bcf textarea,#bof button,#bofModal button{\n  font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;\n  margin:0;border-radius:0;-webkit-appearance:none;appearance:none;box-shadow:none;\n}\n#bcf button,#bof button,#bofModal button{background:none;border:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:normal;font-weight:400}\n#bcf a,#bof a,#bofModal a{text-decoration:none}\n#bcf [hidden],#bof [hidden]{display:none !important}   \/* any display rule outranks the attribute *\/\n\/* The full-bleed sections below span 100vw. On a page with a vertical scrollbar\n   that is a few px wider than the content box, so the page picks up a sliver of\n   horizontal scroll. overflow-x:hidden at the root cures it; it does not become a containing\n   block for the fixed mobile controls (only transforms do that). *\/\nhtml,body{overflow-x:hidden}\n\/* Full-bleed out of the theme's .container, which has side padding. *\/\n#bcf,#bof{\n  width:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);\n  font-family:'F37 Ginger',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\n  -webkit-font-smoothing:antialiased;\n}\n#bof{\n  --muted:rgba(15,15,15,.56);--line:rgba(15,15,15,.13);\n  --surface:#FFFFFF;--fg:#0F0F0F;\n  background:var(--surface);color:var(--fg);\n}\n\/* Light theme, scoped to the contact form only. The offices section (#bof) and\n   its modal stay dark; the photo panel's testimonial and the success overlay\n   keep white text because they sit over imagery. *\/\n#bcf{\n  --surface:#FFFFFF;--fg:#0F0F0F;\n  --muted:rgba(15,15,15,.56);--line:rgba(15,15,15,.13);\n  background:var(--surface);color:var(--fg);\n}\n\/* ---------- the form section ----------\n   A self-contained box, NOT a fixed viewport overlay: on WordPress there is a\n   header above and a footer below, and a fixed child would sit over both. *\/\n#bcf{\n  position:relative;overflow:hidden;isolation:isolate;\n  \/* Sized to the space under the site header, but free to GROW when a step is\n     taller than a short window - the overflow then flows into the page like\n     any section, instead of trapping a second scrollbar inside the block. *\/\n  min-height:calc(100vh - var(--head));\n  min-height:calc(100svh - var(--head));   \/* svh: no jump when mobile chrome hides *\/\n  max-height:none;\n}\n\/* ---------- photo panel ---------- *\/\n#bcf .bcf-gal{position:absolute;top:0;left:0;bottom:0;width:var(--panel);overflow:hidden;background:#000;z-index:2}\n\/* direct children only - the testimonial headshot also lives inside .bcf-gal *\/\n#bcf .bcf-gal > img{\n  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;\n  transition:opacity 1.1s var(--ease);will-change:opacity;\n}\n#bcf .bcf-gal > img.on{opacity:1}\n\/* the panel steps back as the form asks for more effort - see DIM[] in the script *\/\n#bcf .bcf-veil{position:absolute;inset:0;background:var(--black);opacity:0;transition:opacity .9s var(--ease);pointer-events:none}\n\/* grade: darken low, bleed the right edge into the form *\/\n#bcf .bcf-gal::after{\n  content:'';position:absolute;inset:0;pointer-events:none;\n  background:\n    linear-gradient(to bottom, rgba(15,15,15,.62) 0%, rgba(15,15,15,0) 20%),\n    linear-gradient(to right, rgba(15,15,15,.30) 0%, rgba(15,15,15,0) 34%, rgba(15,15,15,.92) 99%),\n    linear-gradient(to top, rgba(15,15,15,.88) 0%, rgba(15,15,15,0) 46%);\n}\n\/* ---------- \"rather just call us\" ----------\n   Some people arrive on a contact page wanting a phone number, not a form. It\n   sits directly under the three options as a plain line of text - a pill over\n   the photograph read as a button competing with the actual question. *\/\n#bcf .bcf-cta{\n  display:inline-flex;align-items:center;gap:.55rem;\n  margin-top:clamp(1.1rem,2.4vh,1.9rem);\n  font-size:.86rem;color:rgba(15,15,15,.55);\n  transition:color .25s var(--ease);\n}\n#bcf .bcf-cta b{\n  font-weight:400;color:rgba(15,15,15,.9);\n  border-bottom:1px solid rgba(15,15,15,.32);padding-bottom:1px;\n  transition:border-color .25s var(--ease);\n}\n#bcf .bcf-cta svg{color:var(--lime);transition:transform .3s var(--ease)}\n#bcf .bcf-cta:hover{color:rgba(15,15,15,.72)}\n#bcf .bcf-cta:hover b{border-bottom-color:var(--lime)}\n#bcf .bcf-cta:hover svg{transform:translateX(3px)}\n\/* ---------- testimonial on the photo ---------- *\/\n#bcf .bcf-quote{position:absolute;left:2.4rem;right:2.4rem;bottom:2.4rem;z-index:3;max-width:26rem;pointer-events:none}\n#bcf .bcf-quote-in{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}\n#bcf .bcf-quote-in.on{opacity:1;transform:none}\n#bcf .bcf-quote .bcf-rule{width:22px;height:2px;background:var(--lime);margin-bottom:1rem}\n#bcf .bcf-quote blockquote{font-size:clamp(.95rem,1.05vw,1.1rem);font-weight:300;line-height:1.5;color:rgba(255,255,255,.94);text-wrap:balance}\n#bcf .bcf-who{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem}\n#bcf .bcf-ava{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.22)}\n#bcf .bcf-quote cite{display:block;font-style:normal;font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.5)}\n#bcf .bcf-quote cite b{display:block;font-weight:400;color:rgba(255,255,255,.86)}\n\/* ---------- backdrop ---------- *\/\n#bcf .bcf-dots{display:none}\n#bcf .bcf-glow{\n  position:absolute;z-index:0;pointer-events:none;\n  width:44vw;height:44vw;right:-14vw;bottom:-20vw;border-radius:50%;\n  background:radial-gradient(circle, rgba(151,212,34,.14) 0%, rgba(151,212,34,0) 62%);\n}\n\/* ---------- stage ----------\n   Scrolls rather than clipping. Slides sit in normal flow (only the active one\n   is displayed) and the slider is centred with auto margins, which unlike\n   align-items:center still lets a tall step scroll instead of losing its top.\n   Bottom padding clears the nav bar and the pinned team strip. *\/\n#bcf .bcf-stage{\n  position:relative;z-index:5;margin-left:var(--panel);\n  min-height:calc(100svh - var(--head));\n  display:flex;\n  \/* Vertical padding scales with the window so a short laptop compacts the\n     step instead of scrolling it. 3.9rem min at the bottom still clears the\n     pinned team strip. *\/\n  padding:clamp(1.5rem,3.2vh,3rem) clamp(2.4rem,5vw,5rem) calc(var(--bar) + clamp(3.9rem,7vh,5.5rem));\n}\n#bcf .bcf-slider{position:relative;width:100%;max-width:560px;margin:auto}\n#bcf .bcf-slide{display:none}\n#bcf .bcf-slide.active{display:block}\n\/* An animation, not a transition: transitions do not run on an element that has\n   just come from display:none, so the entrance would be skipped entirely. *\/\n#bcf .bcf-reveal{opacity:0}\n#bcf .bcf-slide.active .bcf-reveal{animation:bcfIn .7s var(--ease) .08s both}\n#bcf .bcf-slide.active .bcf-reveal:nth-child(2){animation-delay:.16s}\n@keyframes bcfIn{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}\n#bcf h1{font-size:clamp(1.8rem,2.9vw,2.6rem);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}\n#bcf h1 em{font-style:normal;color:var(--lime)}\n#bcf .bcf-sub{margin-top:1rem;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:42ch;text-wrap:pretty}\n#bcf .bcf-head{margin-bottom:clamp(1.1rem,2.6vh,2.6rem)}\n\/* radio rows - open, no card, hairline dividers only *\/\n#bcf .bcf-options{display:flex;flex-direction:column;border-top:1px solid var(--line)}\n#bcf .bcf-opt{position:relative;display:block;cursor:pointer;border-bottom:1px solid var(--line);margin:0}\n#bcf .bcf-opt input{position:absolute;opacity:0;width:0;height:0}\n#bcf .bcf-opt-inner{display:flex;align-items:center;gap:1.5rem;background:transparent;padding:clamp(1.1rem,2.4vh,1.7rem) .4rem;transition:padding .4s var(--ease)}\n#bcf .bcf-opt:hover .bcf-opt-inner{padding-left:1.1rem}\n\/* One line-icon per route, drawn in currentColor so the selected state is just\n   a colour change to lime - no second asset, no repaint flash. *\/\n#bcf .bcf-ico{width:28px;height:28px;flex:none;color:rgba(15,15,15,.4);transition:color .3s var(--ease),transform .35s var(--ease)}\n#bcf .bcf-ico svg{width:100%;height:100%;display:block}\n#bcf .bcf-opt:hover .bcf-ico{color:rgba(15,15,15,.7)}\n#bcf .bcf-opt input:checked ~ .bcf-opt-inner .bcf-ico{color:var(--lime);transform:scale(1.08)}\n#bcf .bcf-opt-label{font-size:1.12rem;transition:color .3s var(--ease)}\n#bcf .bcf-opt-note{display:block;font-size:.8rem;color:var(--muted);margin-top:.3rem}\n#bcf .bcf-opt input:checked ~ .bcf-opt-inner .bcf-opt-label{color:var(--lime)}\n#bcf .bcf-opt input:focus-visible ~ .bcf-opt-inner .bcf-ico{outline:2px solid rgba(151,212,34,.55);outline-offset:5px;border-radius:8px}\n\/* fields *\/\n#bcf .bcf-field{margin-bottom:clamp(.8rem,1.9vh,1.9rem)}\n#bcf .bcf-field:last-child{margin-bottom:0}\n#bcf .bcf-field label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-weight:400}\n#bcf .bcf-field input,#bcf .bcf-field textarea{\n  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);\n  color:var(--fg);font-size:1.5rem;letter-spacing:-.01em;\n  padding:.35rem 0 .7rem;outline:none;transition:border-color .4s var(--ease);\n}\n#bcf .bcf-field textarea{resize:none;height:clamp(64px,10vh,132px);line-height:1.5;font-size:1.25rem}\n#bcf .bcf-field input::placeholder,#bcf .bcf-field textarea::placeholder{color:rgba(15,15,15,.4);font-size:1rem;letter-spacing:0}\n#bcf .bcf-field input:focus,#bcf .bcf-field textarea:focus{border-bottom-color:var(--lime)}\n#bcf .bcf-field input.err,#bcf .bcf-field textarea.err{border-bottom-color:var(--orange)}\n\/* Chrome paints autofilled fields with its own pale-blue box. There is no way to\n   set that background directly, so flood it with an inset shadow the colour of\n   the page and force the text colour on top. *\/\n#bcf .bcf-field input:-webkit-autofill,\n#bcf .bcf-field input:-webkit-autofill:hover,\n#bcf .bcf-field input:-webkit-autofill:focus,\n#bcf .bcf-field textarea:-webkit-autofill{\n  -webkit-text-fill-color:var(--fg);\n  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;\n  box-shadow:0 0 0 1000px var(--surface) inset;\n  caret-color:var(--fg);\n  transition:background-color 9999s ease-in-out 0s;\n}\n\/* The one field on step 3 that actually matters - bigger type and a visible\n   baseline so it reads as the question being answered, not a stray input. *\/\n#bcf .bcf-field.lead input{font-size:clamp(1.45rem,3vh,1.9rem);padding-bottom:.85rem;border-bottom-color:rgba(15,15,15,.25)}\n#bcf .bcf-field.lead input::placeholder{font-size:1.15rem}\n#bcf .bcf-opt-tag{text-transform:none;letter-spacing:0;color:rgba(15,15,15,.42);margin-left:.5rem}\n\/* Typo catcher on the email field. Silent unless the domain is a known misspell,\n   and always a suggestion rather than a correction - people do own odd domains. *\/\n#bcf .bcf-fix{margin-top:.7rem;font-size:.8rem;color:var(--muted)}\n#bcf .bcf-fix button{color:var(--lime);border-bottom:1px solid var(--lime);padding-bottom:1px}\n\/* One shared error line. It sits after the slides, so only the active step ever\n   shows it, and it announces itself to screen readers. *\/\n#bcf .bcf-alert{\n  margin-top:1.6rem;font-size:.85rem;line-height:1.5;color:var(--orange);\n  display:flex;gap:.6rem;align-items:flex-start;\n}\n#bcf .bcf-alert svg{flex:none;margin-top:.15rem}\n#bcf .bcf-alert a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}\n\/* ---------- location: type-ahead ----------\n   This was a two-tier chip picker (region, then city). It became a search box on\n   5 Aug 2026 to match the job brief on the homepage: fifteen chips could only\n   ever offer fifteen answers, and \"Clerkenwell\" or \"Ponsonby\" had to be typed\n   into an Other box that told us nothing about which desk should pick it up.\n   The list here resolves a suburb to a city, a city to a desk, and sends the\n   desk - so the routing rules in the backend match on the same ten buckets the\n   job brief already uses.\n   The old comment here warned that a dropdown on a vertically-centred step runs\n   off the bottom of the viewport. Still true, so the list caps its height and\n   flips above the input when there is more room up there (see placeFlip). *\/\n#bcf .bcf-place{position:relative}\n#bcf .bcf-place input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);\n  color:var(--fg);font-size:1.5rem;letter-spacing:-.01em;padding:.35rem 0 .7rem;outline:none;\n  transition:border-color .4s var(--ease)}\n#bcf .bcf-place input::placeholder{color:rgba(15,15,15,.4);font-size:1rem;letter-spacing:0}\n#bcf .bcf-place input:focus{border-bottom-color:var(--lime)}\n#bcf .bcf-place.err input{border-bottom-color:var(--orange)}\n#bcf .bcf-place-clear{position:absolute;right:0;top:.55rem;width:26px;height:26px;line-height:1;\n  background:transparent;border:0;color:var(--muted);font-size:1.25rem;cursor:pointer;outline:none;\n  transition:color .25s var(--ease)}\n#bcf .bcf-place-clear:hover{color:var(--fg)}\n#bcf .bcf-place-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;\n  padding:.4rem;list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;\n  box-shadow:0 18px 44px rgba(15,15,15,.13);max-height:min(46vh,300px);overflow-y:auto}\n\/* not enough room below on a short window: hang it off the top instead *\/\n#bcf .bcf-place-list.up{top:auto;bottom:calc(100% + 8px)}\n#bcf .bcf-place-list li{padding:.7rem .85rem;border-radius:11px;cursor:pointer;font-size:.95rem;\n  color:var(--fg);display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}\n#bcf .bcf-place-list li em{font-style:normal;font-size:.78rem;color:var(--muted);flex:none}\n#bcf .bcf-place-list li.bcf-other{display:block;color:rgba(15,15,15,.75)}\n#bcf .bcf-place-list li.bcf-other em{display:block;margin:.15rem 0 0;font-size:.76rem}\n#bcf .bcf-place-list li[aria-selected=\"true\"],\n#bcf .bcf-place-list li:hover{background:rgba(151,212,34,.18);color:var(--black)}\n\/* ---------- file upload ---------- *\/\n#bcf .bcf-drop{\n  border:1px dashed rgba(15,15,15,.22);background:rgba(15,15,15,.02);\n  padding:clamp(.85rem,1.9vh,1.5rem) 1.2rem;text-align:center;cursor:pointer;\n  transition:border-color .3s var(--ease),background .3s var(--ease);\n}\n#bcf .bcf-drop:hover,#bcf .bcf-drop.over{border-color:var(--lime);background:rgba(151,212,34,.06)}\n#bcf .bcf-drop.err{border-color:var(--orange)}\n#bcf .bcf-drop b{display:block;font-size:.9rem;font-weight:400;margin-bottom:.35rem}\n#bcf .bcf-drop b u{color:var(--lime);text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:1px}\n#bcf .bcf-drop small{font-size:.72rem;color:var(--muted)}\n#bcf .bcf-files{margin-top:.55rem;display:flex;flex-direction:column;gap:1px}\n#bcf .bcf-files li{display:flex;align-items:center;gap:.8rem;background:rgba(15,15,15,.05);padding:.55rem .9rem;font-size:.8rem}\n#bcf .bcf-files .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n#bcf .bcf-files .sz{color:var(--muted);font-size:.72rem;flex:none}\n#bcf .bcf-files .rm{color:var(--muted);font-size:1rem;line-height:1;padding:0 .2rem;flex:none;transition:color .3s}\n#bcf .bcf-files .rm:hover{color:var(--orange)}\n#bcf .bcf-meter{margin-top:.7rem;display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:var(--muted)}\n#bcf .bcf-meter.over{color:var(--orange)}\n\/* \"Add a message\" disclosure - keeps the optional half of the step out of sight\n   until someone asks for it, so the step reads as one question. *\/\n#bcf .bcf-more{\n  display:inline-flex;align-items:center;gap:.7rem;margin-top:.4rem;padding:.5rem 0;\n  font-size:.92rem;color:rgba(15,15,15,.6);transition:color .3s var(--ease);\n}\n#bcf .bcf-more:hover{color:var(--fg)}\n#bcf .bcf-more em{font-style:normal;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,15,15,.42)}\n#bcf .bcf-more-x{position:relative;width:17px;height:17px;flex:none;border:1px solid var(--line);border-radius:50%;transition:border-color .3s var(--ease),transform .4s var(--ease)}\n#bcf .bcf-more-x::before,#bcf .bcf-more-x::after{content:'';position:absolute;inset:50% 4px auto;height:1px;background:currentColor;transform:translateY(-50%);transition:opacity .3s var(--ease)}\n#bcf .bcf-more-x::after{transform:translateY(-50%) rotate(90deg)}\n#bcf .bcf-more:hover .bcf-more-x{border-color:var(--lime)}\n#bcf .bcf-more[aria-expanded=true] .bcf-more-x{transform:rotate(90deg);border-color:var(--lime)}\n#bcf .bcf-more[aria-expanded=true] .bcf-more-x::after{opacity:0}\n#bcf .bcf-or{display:flex;align-items:center;gap:1rem;margin:1.3rem 0}\n#bcf .bcf-or::before,#bcf .bcf-or::after{content:'';flex:1;height:1px;background:var(--line)}\n#bcf .bcf-or span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}\n#bcf .bcf-morepanel{margin-top:clamp(.8rem,1.5vh,1.6rem);animation:bcfUnfold .5s var(--ease) both}\n\/* The CV drop and LinkedIn stack full width wherever they live - the cramped\n   desktop two-column row is gone now the jobseeker route gives them a slide of\n   their own and the employer fold only ever shows the job description. *\/\n#bcf .bcf-duo{display:block}\n@media(min-width:901px){\n  #bcf .bcf-drop b{font-size:.86rem;margin-bottom:.2rem}\n  #bcf .bcf-drop small{font-size:.68rem}\n}\n\/* The per-file chips already say name + size, so the totals meter under them\n   was saying the same thing twice, in space the step cannot spare. *\/\n#bcf .bcf-meter{display:none !important}\n@keyframes bcfUnfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}\n\/* Strip naming the office that receives the enquiry. Pinned directly on top of\n   the Back\/Next bar, whose height is measured into --bar at runtime so the two\n   can never overlap if the button padding changes. Quiet by design - it is\n   reassurance, not an instruction. *\/\n#bcf .bcf-team{\n  position:absolute;left:var(--panel);right:0;bottom:var(--bar);z-index:5;\n  display:flex;align-items:center;gap:.85rem;padding:.75rem clamp(2.4rem,5vw,5rem);\n  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);\n  border-top:1px solid var(--line);animation:bcfTeam .5s var(--ease) both;\n}\n@keyframes bcfTeam{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}\n#bcf .bcf-faces{display:flex;flex:none}\n#bcf .bcf-faces img{height:38px;width:38px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid var(--surface);background:#222}\n\/* A single photo of more than one person is cropped wide - two faces inside a\n   38px circle are two smudges. It gets a rounded rectangle instead. *\/\n#bcf .bcf-faces img.pair{width:74px;border-radius:20px}\n#bcf .bcf-faces img + img{margin-left:-12px}\n#bcf .bcf-teamtxt{font-size:.82rem;line-height:1.45;color:rgba(15,15,15,.62)}\n#bcf .bcf-teamtxt b{color:var(--fg);font-weight:400}\n\/* ---------- controls ----------\n   Absolute inside the section, never fixed to the viewport: on WordPress a fixed\n   bar would float over the footer and everything else on the way down the page. *\/\n#bcf .bcf-controls{\n  position:absolute;bottom:0;right:0;left:var(--panel);z-index:6;\n  display:flex;align-items:stretch;justify-content:space-between;\n  border-top:1px solid var(--line);background:rgba(255,255,255,.86);\n  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);\n}\n\/* On phones the bar has to be fixed to stay under the thumb, which means it would\n   otherwise float over the offices section and the site footer all the way down\n   the page. It stands down as soon as the form scrolls out of view. *\/\n#bcf .bcf-controls,#bcf .bcf-team{transition:opacity .25s var(--ease),visibility .25s}\n#bcf.bcf-off .bcf-controls,#bcf.bcf-off .bcf-team{opacity:0;visibility:hidden;pointer-events:none}\n#bcf .bcf-btn{\n  display:flex;align-items:center;gap:.9rem;\n  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;\n  color:var(--fg);padding:1.4rem 2.2rem;transition:background .4s var(--ease),opacity .3s;\n}\n#bcf .bcf-btn:hover{background:rgba(15,15,15,.05)}\n#bcf .bcf-btn.next{background:var(--lime);color:var(--black)}\n#bcf .bcf-btn.next:hover{background:#a7e82c}\n#bcf .bcf-btn.hide{opacity:0;pointer-events:none}\n#bcf .bcf-btn[disabled]{opacity:.55;pointer-events:none}\n#bcf .bcf-btn .arw{transition:transform .4s var(--ease)}\n#bcf .bcf-btn.next:hover .arw{transform:translateX(5px)}\n#bcf .bcf-btn.prev:hover .arw{transform:translateX(-5px)}\n#bcf .bcf-counter{display:flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.1em;color:var(--muted);padding:0 2.2rem}\n#bcf .bcf-counter b{color:var(--lime);font-weight:500}\n#bcf .bcf-bar{position:absolute;top:-2px;left:0;height:2px;background:var(--lime);width:25%;transition:width .55s var(--ease)}\n\/* ---------- success ---------- *\/\n#bcf .bcf-done{\n  position:absolute;inset:0;z-index:30;background:var(--black);\n  display:flex;align-items:center;justify-content:center;text-align:center;\n  padding:2.4rem;opacity:0;visibility:hidden;transition:opacity .7s var(--ease);\n}\n#bcf .bcf-done.on{opacity:1;visibility:visible}\n#bcf .bcf-doneimg{position:absolute;inset:0;overflow:hidden}\n#bcf .bcf-doneimg img{width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:.55;transform:scale(1.05);transition:transform 12s linear}\n#bcf .bcf-done.on .bcf-doneimg img{transform:scale(1.16)}\n#bcf .bcf-doneimg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(15,15,15,.72) 0%, rgba(15,15,15,.9) 78%)}\n#bcf .bcf-donein{position:relative;z-index:2}\n#bcf .bcf-done h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:300;line-height:1.3;margin-bottom:1.2rem;color:var(--white)}\n#bcf .bcf-done p{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.7;max-width:44ch;margin:0 auto}\n#bcf .bcf-done a{color:var(--lime)}\n#bcf .bcf-tick{width:56px;height:56px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;margin:0 auto 2.2rem}\n@media(prefers-reduced-motion:reduce){\n  #bcf .bcf-slide.active .bcf-reveal,#bcf .bcf-morepanel,#bcf .bcf-team{animation:none;opacity:1}\n  #bcf .bcf-gal > img,#bcf .bcf-gal > img.on,#bcf .bcf-doneimg img{transition:opacity .3s;transform:none}\n  #bcf .bcf-done.on .bcf-doneimg img{transform:none}\n}\n\/* Short desktop windows (1366x768 laptops with browser chrome, half-height\n   windows). The padding clamps have already given everything they have, so this\n   tier tightens the type itself - nothing is hidden, everything just sits\n   closer, and the fully-expanded candidate step still fits without a scrollbar. *\/\n@media(min-width:901px) and (max-height:750px){\n  #bcf h1{font-size:clamp(1.5rem,2.4vw,2rem)}\n  #bcf .bcf-sub{margin-top:.6rem;font-size:.86rem;line-height:1.45}\n  #bcf .bcf-field label{margin-bottom:.35rem}\n  #bcf .bcf-field input{font-size:1.3rem;padding:.25rem 0 .5rem}\n  #bcf .bcf-field.lead input{font-size:1.4rem;padding-bottom:.6rem}\n  #bcf .bcf-field textarea{height:clamp(56px,9vh,132px);font-size:1.1rem}\n  #bcf .bcf-more{margin-top:.15rem;padding:.3rem 0}\n  #bcf .bcf-files li{padding:.42rem .8rem}\n}\n@media(max-width:900px){\n  #bcf{--panel:0px;height:auto;max-height:none;min-height:0}\n  \/* Photo and testimonial are cut on phones. They cost a large image download and\n     roughly a third of the screen, pushing the actual question below the fold -\n     on mobile the form is the whole job. *\/\n  #bcf .bcf-gal{display:none}\n  #bcf .bcf-dots{left:0}\n  #bcf .bcf-stage{height:auto;min-height:calc(100svh - var(--head));padding:3.5rem 1.5rem calc(var(--bar) + 5rem)}\n  #bcf .bcf-head{margin-bottom:2rem}\n  #bcf .bcf-field{margin-bottom:1.7rem}\n  #bcf .bcf-field textarea{height:120px}\n  #bcf .bcf-slider{max-width:none}\n  #bcf .bcf-btn,#bcf .bcf-counter{padding-left:1.4rem;padding-right:1.4rem}\n  #bcf h1{font-size:1.6rem}\n  #bcf .bcf-head{margin-bottom:2rem}\n  \/* With the section auto-height the bar can't be pinned to its bottom, so it\n     sticks to the bottom of the screen while the step is in view. *\/\n  #bcf .bcf-controls,#bcf .bcf-team{position:fixed}\n  #bcf .bcf-done{position:fixed}\n}\n@media(max-width:560px){\n  #bcf .bcf-field.lead input{font-size:1.5rem}\n  #bcf .bcf-field.lead input::placeholder{font-size:1rem}\n  #bcf .bcf-team{gap:.7rem;padding:.7rem 1.5rem}\n  #bcf .bcf-faces img{height:32px;width:32px}\n  #bcf .bcf-faces img.pair{width:62px;border-radius:16px}\n  #bcf .bcf-teamtxt{font-size:.76rem}\n}\n\/* ==========================================================================\n   OFFICES\n   Offices across the UK, US, Australia and New Zealand, so the useful question\n   is not \"where are you\" but \"can I call you right now\". Each card carries its\n   own clock.\n   ========================================================================== *\/\n#bof{padding:clamp(4.5rem,8vw,7.5rem) clamp(1.5rem,5vw,5rem);border-top:1px solid var(--line)}\n#bof .bof-in{max-width:1240px;margin:0 auto}\n#bof .bof-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem;margin-bottom:2.6rem}\n#bof h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}\n#bof h2 em{font-style:normal;color:var(--lime)}\n#bof .bof-lede{margin-top:.9rem;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:46ch}\n#bof .bof-filters{display:flex;flex-wrap:wrap;gap:.5rem}\n#bof .bof-f{\n  border:1px solid var(--line);border-radius:999px;color:var(--fg);font-size:.82rem;\n  padding:.55rem 1.1rem;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);\n}\n#bof .bof-f:hover{border-color:rgba(15,15,15,.42)}\n#bof .bof-f:focus-visible{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(151,212,34,.2)}\n#bof .bof-f.on{background:var(--lime);border-color:var(--lime);color:var(--black)}\n\/* Separate rounded cards, matching the card treatment used across the rest of\n   the site, rather than the hairline grid this section used to draw. *\/\n#bof .bof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;background:none}\n#bof .bof-card{\n  background:var(--surface);padding:0;\n  border:1px solid var(--line);border-radius:20px;overflow:hidden;\n  display:flex;flex-direction:column;\n  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);\n}\n#bof .bof-body{padding:1.15rem 1.6rem 1.5rem;display:flex;flex-direction:column;flex:1}\n#bof .bof-card:hover{background:#f6f6f4;transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,15,15,.10)}\n\/* Photo header with a dark scrim at the foot carrying the white city name and\n   clock. Given a real aspect ratio rather than a fixed 118px strip: five of the\n   office photographs are portrait (Texas, Atlanta and California are 960x1200),\n   and a short wide box cropped them to a letterbox slice with people's heads cut\n   off. 16\/10 keeps the crop gentle on portrait and landscape alike. *\/\n#bof .bof-hero{position:relative;aspect-ratio:16\/10;overflow:hidden;flex:none}\n#bof .bof-hero img{\n  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;\n  transition:transform .6s var(--ease);\n}\n#bof .bof-card:hover .bof-hero img{transform:scale(1.05)}\n#bof .bof-hero::after{\n  content:'';position:absolute;inset:0;\n  background:linear-gradient(to top, rgba(15,15,15,.82) 0%, rgba(15,15,15,.34) 46%, rgba(15,15,15,0) 82%);\n}\n#bof .bof-herotxt{position:absolute;left:1.6rem;right:1.5rem;bottom:.8rem;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}\n#bof .bof-hero .bof-clock{padding-bottom:.15rem}\n#bof .bof-city{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:#fff}\n#bof .bof-clock{display:flex;align-items:center;gap:.45rem;font-size:.74rem;color:rgba(255,255,255,.78);white-space:nowrap;font-variant-numeric:tabular-nums}\n\/* The clock face itself carries the open\/closed state - lime during local office\n   hours, muted outside them - so nothing has to say what the icon means. *\/\n#bof .bof-led{width:13px;height:13px;flex:none;color:rgba(255,255,255,.55)}\n#bof .bof-clock.open .bof-led{color:var(--lime)}\n#bof .bof-clock.open{color:rgba(255,255,255,.92)}\n#bof .bof-country{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:.2rem}\n\/* align-self, not just inline-block: the card is a flex column, so a link would\n   otherwise stretch the full card width and drag its underline out with it. *\/\n#bof .bof-tel{\n  font-size:1.06rem;color:var(--fg);letter-spacing:-.01em;\n  display:inline-block;align-self:flex-start;\n  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);\n}\n#bof .bof-tel:hover{border-bottom-color:var(--lime)}\n#bof .bof-mail{\n  font-size:.86rem;color:rgba(15,15,15,.8);margin-top:.5rem;word-break:break-word;\n  display:inline-block;align-self:flex-start;max-width:100%;\n  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);\n}\n#bof .bof-mail:hover{border-bottom-color:rgba(15,15,15,.45)}\n#bof .bof-addr{font-size:.82rem;line-height:1.6;color:var(--muted);margin-top:.9rem}\n#bof .bof-map{\n  margin-top:auto;padding-top:1.1rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;\n  color:rgba(15,15,15,.5);display:inline-flex;align-items:center;gap:.5rem;transition:color .25s var(--ease);\n}\n#bof .bof-map:hover{color:var(--lime)}\n#bof .bof-map svg{transition:transform .3s var(--ease)}\n#bof .bof-map:hover svg{transform:translateX(3px)}\n#bof .bof-note{margin-top:2.4rem;font-size:.78rem;color:rgba(15,15,15,.45)}\n\/* The whole card is clickable, but the phone and email inside it are real links,\n   so the button is a separate element rather than a wrapper. *\/\n#bof .bof-card{cursor:pointer}\n#bof .bof-more{\n  margin-top:auto;padding-top:1.1rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;\n  color:rgba(15,15,15,.5);display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;\n  transition:color .25s var(--ease);\n}\n#bof .bof-card:hover .bof-more,#bof .bof-more:focus-visible{color:var(--lime);outline:none}\n#bof .bof-more svg{transition:transform .3s var(--ease)}\n#bof .bof-card:hover .bof-more svg{transform:translateX(3px)}\n\/* ---------- expanded office ---------- *\/\n#bofModal{\n  position:fixed;inset:0;z-index:2147483004;display:flex;align-items:center;justify-content:center;\n  padding:24px;opacity:0;transition:opacity .3s var(--ease);\n  font-family:'F37 Ginger',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\n}\n#bofModal[hidden]{display:none !important}\n#bofModal.on{opacity:1}\n#bofModal{--muted:rgba(15,15,15,.56);--line:rgba(15,15,15,.13);--surface:#FFFFFF;--fg:#0F0F0F}\n#bofModal .bofm-back{position:absolute;inset:0;background:rgba(6,6,6,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}\n\/* Wide and short on purpose. The photo fills its column, so the dialog's shape\n   IS the crop: a landscape box loses a strip of ceiling and floor, where a tall\n   one would cut the people standing at either end out of a group shot. *\/\n#bofModal .bofm-in{\n  position:relative;width:min(1320px,96vw);height:min(82vh,620px);overflow:hidden;\n  background:var(--surface);border-radius:20px;\n  box-shadow:0 40px 120px rgba(0,0,0,.65);\n  transform:translateY(14px) scale(.985);transition:transform .4s var(--ease);\n}\n#bofModal.on .bofm-in{transform:none}\n#bofModal .bofm-x{\n  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;\n  background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);\n  color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;\n  transition:background .2s var(--ease),color .2s var(--ease);\n}\n#bofModal .bofm-x:hover,#bofModal .bofm-x:focus-visible{background:var(--lime);color:var(--black);outline:none}\n\/* Team on the left, the office itself on the right. *\/\n\/* #bofmContent is the wrapper the dialog is rebuilt into, and the grid's\n   height:100% resolves against IT - without a height here the percentage is\n   treated as auto and the whole thing grows past the dialog. *\/\n#bofModal #bofmContent{height:100%}\n\/* minmax(0,1fr), not auto: an auto row grows to the taller column, which pushed\n   the photo past the dialog height and turned a gentle crop into a severe one. *\/\n#bofModal .bofm-grid{display:grid;grid-template-columns:1.72fr 1fr;grid-template-rows:minmax(0,1fr);height:100%}\n#bofModal .bofm-photo{position:relative;background:var(--ink);border-right:1px solid var(--line);overflow:hidden;min-height:0}\n#bofModal .bofm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}\n#bofModal .bofm-side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}\n\/* The city name lives here rather than on the photograph: the pictures carry no\n   captions, and a heading over a group shot always lands on somebody's face. *\/\n#bofModal .bofm-head{\n  padding:1rem clamp(1.3rem,2.2vw,1.8rem) .85rem;border-bottom:1px solid var(--line);flex:none;\n  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;\n}\n\/* The offices with no street address have no map, so this becomes the top of the\n   panel and has to dodge the close button floating over that corner. *\/\n#bofModal .bofm-head:first-child{padding-right:3.6rem}\n#bofModal .bofm-city{font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--fg)}\n#bofModal .bofm-country{margin-top:.3rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,15,15,.5)}\n\/* Sized so the tallest panel - London, the only office with two named leads -\n   still fits without the second person's job title falling below the fold. *\/\n#bofModal .bofm-map{position:relative;background:var(--ink);height:148px;flex:none}\n#bofModal .bofm-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}\n\/* Only the detail rows scroll. The two buttons are pinned to the foot of the\n   panel, so nothing that matters is ever below a fold the user cannot see. *\/\n#bofModal .bofm-det{padding:.8rem clamp(1.3rem,2.2vw,1.8rem) 1rem;flex:1;min-height:0;overflow-y:auto}\n#bofModal .bofm-row{display:block;padding:.55rem 0;border-bottom:1px solid var(--line)}\n#bofModal .bofm-row:first-child{padding-top:0}\n#bofModal .bofm-row:last-child{border-bottom:0;padding-bottom:0}\n#bofModal .bofm-k{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,15,15,.5);margin-bottom:.35rem;line-height:1.45}\n#bofModal .bofm-v{font-size:.9rem;line-height:1.55;color:rgba(15,15,15,.85)}\n#bofModal a.bofm-v{border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}\n#bofModal a.bofm-v:hover{border-bottom-color:rgba(15,15,15,.45)}\n#bofModal .bofm-v.tel{font-size:1.08rem;color:var(--fg)}\n#bofModal a.bofm-v.tel:hover{border-bottom-color:var(--lime)}\n\/* Who actually picks up. Real names, roles and headshots off the live team page,\n   so a stale title here is a title the website is also showing. *\/\n#bofModal .bofm-people{display:flex;flex-direction:column;gap:.55rem}\n#bofModal .bofm-person{display:flex;align-items:center;gap:.7rem}\n#bofModal .bofm-face{\n  width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 18%;\n  flex:none;background:var(--ink);box-shadow:0 0 0 1px rgba(15,15,15,.12);\n}\n#bofModal .bofm-pname{font-size:.88rem;line-height:1.3;color:var(--fg)}\n#bofModal .bofm-prole{font-size:.72rem;line-height:1.35;color:var(--muted);margin-top:.1rem}\n#bofModal .bofm-base{color:rgba(15,15,15,.45)}\n#bofModal .bofm-hours{\n  display:flex;align-items:center;gap:.45rem;flex:none;white-space:nowrap;\n  font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.35rem;\n}\n#bofModal .bofm-hours .bof-led{width:14px;height:14px;flex:none;color:rgba(15,15,15,.4)}\n#bofModal .bofm-hours.open{color:rgba(15,15,15,.7)}\n#bofModal .bofm-hours.open .bof-led{color:var(--lime)}\n#bofModal .bofm-acts{\n  display:flex;flex-wrap:wrap;gap:.5rem;flex:none;\n  padding:.85rem clamp(1.3rem,2.2vw,1.8rem) 1rem;\n  border-top:1px solid var(--line);background:var(--surface);\n}\n#bofModal .bofm-btn{\n  display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.72rem 1.25rem;\n  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;\n  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);\n}\n#bofModal .bofm-btn.solid{background:var(--lime);color:var(--black)}\n#bofModal .bofm-btn.solid:hover{background:#a7e82c}\n#bofModal .bofm-btn.ghost{border:1px solid var(--line);color:var(--fg)}\n#bofModal .bofm-btn.ghost:hover{border-color:var(--lime);color:var(--lime)}\n\/* Four offices have no street address and so no map. Left at the full height the\n   panel was mostly void, so it takes a shorter dialog and centres what it does\n   have. All four are city or building photographs, which take the deeper crop\n   that shorter box implies without losing anything that matters. *\/\n#bofModal .bofm-in.no-map{height:min(74vh,486px)}\n#bofModal .no-map .bofm-det{display:flex;flex-direction:column;justify-content:center}\n#bofModal .no-map .bofm-people{gap:.8rem}\n@media(max-width:760px){\n  #bofModal{padding:0}\n  #bofModal .bofm-in,#bofModal .bofm-in.no-map{width:100vw;max-width:100vw;height:100dvh;border-radius:0;border:0;overflow-y:auto}\n  #bofModal .bofm-grid{grid-template-columns:1fr;height:auto}\n  #bofModal .bofm-photo{border-right:0;aspect-ratio:16\/10}\n  #bofModal .bofm-side{overflow:visible}\n  #bofModal .bofm-det{overflow:visible}\n  #bofModal .bofm-map{height:220px}\n}\nhtml.bof-lock,body.bof-lock{overflow:hidden !important}\n@media(max-width:560px){\n  #bof .bof-grid{grid-template-columns:1fr}\n  #bof .bof-body{padding:1.1rem 1.3rem 1.3rem}\n  #bof .bof-herotxt{left:1.3rem;right:1.3rem}\n}\n\/* ==========================================================================\n   \/our-locations\/ only. The block is built for the foot of the contact page,\n   where it follows a full-screen form; here it opens the page, so it needs the\n   air a hero has and a heading sized to carry a page rather than a section.\n   ========================================================================== *\/\n\/* The section sets its own generous top padding because on the contact page it\n   follows a full-screen form and needs the separation. Here it opens the page,\n   directly under the nav, so that padding stacked with a hero one and left up\n   to 232px of nothing above the heading. One modest value instead, and no\n   border-top: a rule immediately under the nav reads as a mistake. *\/\n#bof{--line:rgba(15,15,15,.13);padding-top:clamp(1.75rem,4vw,3.25rem);border-top:0}\n#bof h1{font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:1.02;letter-spacing:-.035em;\n  font-weight:700;color:var(--fg);max-width:16ch}\n#bof h1 em{font-style:normal;color:var(--lime)}\n#bof .bof-lede{margin-top:1.1rem;max-width:46ch;font-size:clamp(1rem,1.3vw,1.15rem)}\n@media(max-width:900px){ #bof h1{max-width:none} }\n<\/style>\n<section id=\"bof\" aria-labelledby=\"bofTitle\">\n        <h1 id=\"bofTitle\">Wherever you are, <em>we&#8217;re not far away.<\/em><\/h1>\n        <p>Offices across the UK, Australia, New Zealand and the US. Open one to meet the team and find your way in.<\/p>\n    <p>Office hours are roughly 9am to 5.30pm, Monday to Friday, local time.<\/p>\n<\/section>\n<!-- Expanded office. Built on open and emptied on close, so the map iframe is\n     only ever requested for the office someone actually asked to see. -->\n    <button type=\"button\" aria-label=\"Close\" data-bofm-close>&times;<\/button>\n\n","protected":false},"excerpt":{"rendered":"<p>Wherever you are, we&#8217;re not far away. Offices across the UK, Australia, New Zealand and the US. Open one to meet the team and find your way in. Office hours are roughly 9am to 5.30pm, Monday to Friday, local time. &times;<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":70,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","footnotes":""},"class_list":["post-2816","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/2816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/comments?post=2816"}],"version-history":[{"count":8,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/2816\/revisions"}],"predecessor-version":[{"id":14775,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/2816\/revisions\/14775"}],"wp:attachment":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/media?parent=2816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}