/* Landing page with the heart opening (tools/lpx.py, _h/lpx.js). Everything is scoped to html.lx-on, which is only set
   when the browser can draw 3D: without it the page is the ordinary landing page. */

/* ---- 1. the home page's sections, seen through windows in this page ----
   One copy of the heart page runs in a frame fixed behind this page's sections (lpx.js). A window (.lx-hole) is an empty
   stretch as tall as the heart page sections it shows; this page's own sections are solid and pass over the frame. */
html.lx-on #lx-fr { position: fixed; z-index: 1; left: var(--lx-left, 0px); right: 0; top: var(--lx-top, 0px); background: #000;
  height: calc(100vh - var(--lx-top, 0px)); height: calc(100lvh - var(--lx-top, 0px)); }
html.lx-on #lx-fr.is-off { visibility: hidden; }
html.lx-on #lx-fr iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
html.lx-touch #lx-fr, html.lx-touch #lx-fr iframe { pointer-events: none; }                   /* touch: the page scrolls, taps are forwarded (lpx.js) */
html:not(.lx-on) .lx-hole:not(#lx-open) { display: none; }
html.lx-on .lx-hole { position: relative; height: 100vh; }
html.lx-on #lx-open { height: 500vh; }                                   /* until the frame has been measured */
html.lx-on main > section, html.lx-on main ~ footer { position: relative; z-index: 2; background-color: #0a0a0a !important; }
html.lx-on section.lx-quotes:not(#_) .logos { display: none !important; }      /* the home page's brands are shown just above */

/* the hero: same words, same type; it stays over the heart for the first screen and lets the pointer through to it everywhere but its links */
html.lx-on #lx-open > section { position: sticky; top: var(--lx-top, 0px); z-index: 2; box-sizing: border-box; margin: 0; border: 0 !important; background: none !important;
  height: calc(100vh - var(--lx-top, 0px)); height: calc(100svh - var(--lx-top, 0px));
  overflow: visible; pointer-events: none; display: flex; align-items: center; padding-top: 0; padding-bottom: clamp(56px, 9vh, 110px); will-change: opacity, transform; }
html.lx-on #lx-open > section > .wrap { width: 100%; }
html.lx-on #lx-open > section a, html.lx-on #lx-open > section button { pointer-events: auto; }
html.lx-on #lx-open .mm-dev { display: none !important; }              /* the device mock-up gives its place to the heart */
/* a soft shade behind the words so they read over the fluid colours and the heart's glints */
html.lx-on #lx-open > section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .38) 38%, rgba(0, 0, 0, 0) 64%); }
/* tablets: the logo sits under the top bar, so the words start below it */
@media (min-width: 641px) and (max-width: 1199px) { html.lx-on #lx-open > section { align-items: flex-start; padding-top: clamp(76px, 11vh, 120px) !important; } }
@media (max-width: 899px) {
  html.lx-on #lx-open > section { align-items: flex-start; padding-top: clamp(20px, 5vh, 44px); }
  html.lx-on #lx-open > section::before { background: linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .44) 46%, rgba(0, 0, 0, 0) 70%); }
}
/* phones: the Standard | Interactive switch sits above the Start a project bar, not on it */
/* (the switch itself keeps clear of the Start a project bar since studio-switch-v18) */
/* and it steps aside while the visitor reads down, returning on the way up and at the ends (lpx.js), as on the home page */
/* (since studio-switch-v19 the bottom-right control is a.mmrm.is-float) */
.mmrm.is-float { transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1) !important; }
html.lx-sw-hide .mmrm.is-float:not(#_):not(#_):not(#_) { opacity: 0 !important; pointer-events: none !important; transform: translateY(14px) !important; }
/* what happens next, bottom left of the opening */
.lx-hint { position: absolute; left: var(--gutter, 24px); bottom: clamp(18px, 4vh, 36px); margin: 0; font: 700 11px/1 avantt, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.lx-hint span { position: relative; padding-left: 16px; color: #fff; }
.lx-hint span::before { content: ""; position: absolute; left: 2px; top: -1px; width: 1px; height: 12px; background: currentColor; animation: lx-nudge 1.6s ease-in-out infinite; }
.lx-hint i { font-style: normal; }
@media (max-width: 640px) { .lx-hint i { display: none; } .lx-hint { bottom: 30px; } }
@keyframes lx-nudge { 0%, 100% { transform: translateY(-3px); opacity: .3; } 50% { transform: translateY(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lx-hint span::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { html.lx-on #lx-open > section { transform: none !important; } }

/* the Full Video player (lpx.js): the whole screen, above the top bar and the switch */
#hx-reel { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; touch-action: none; }
#hx-reel.is-on { opacity: 1; }
#hx-reel video { display: block; width: 100%; max-width: min(100%, calc(100vh * 16 / 9)); max-height: 100%; background: #000; }
#hx-reel button { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(20, 20, 20, .72); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
#hx-reel button span { position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
#hx-reel button span + span { transform: rotate(-45deg); }
html.hx-reel-on { overflow: hidden !important; }

/* ---- 2. the Work book in place of the project cards ---- */
#lx-book .wk-hero, #lx-book .wk-list { display: none !important; }      /* the book's source text, read from /work/; never shown here */
html.lx-book-on #lx-book { display: block; }
html.lx-book-on section:has(> #lx-book) { padding: 0 !important; border: 0 !important; }
/* the cards the book replaces stay in the page for search engines and screen readers */
html.lx-book-on section:has(> #lx-book) > .wrap { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html.lx-book-on .wkb-head h2 { margin: 0 0 14px !important; font: 700 clamp(30px, 3.5vw, 54px)/1.02 avantt, system-ui, sans-serif !important; letter-spacing: -.035em !important; text-transform: none !important; color: #fff3e2 !important; max-width: 12ch; }
.lx-skip { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.lx-skip a { font: 700 12px/1 avantt, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 243, 226, .78) !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 243, 226, .4); padding-bottom: 4px; }
.lx-skip a:hover, .lx-skip a:focus-visible { color: #fff !important; border-color: #fff; }

/* ---- 3. a cleaner page, in step with the home page sections it now sits between (Danny, 14 Nov 2026) ----
   Nothing here removes words from the page: headings that only repeat the section above are hidden from view, not from the HTML. */
.lx-vh, html.lx-on #lx-open .eyebrow, html.lx-on section.lx-banner:not(#_) h2, html.lx-on section.lx-quotes:not(#_) h2, html.lx-on section.lx-quotes:not(#_) .intro {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* the hero: the same words, quieter: a smaller headline, one solid button and a text link */
html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_) { font-size: clamp(34px, 4.7vw, 84px) !important; line-height: .94 !important; margin-bottom: .42em !important; }
@media (min-width: 700px) { html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_) { font-size: clamp(40px, 4.9vw, 88px) !important; line-height: .92 !important; } }
html.lx-on #lx-open .lead { max-width: 30em; }
html.lx-on #lx-open .btns .btn-ghost { border: 0 !important; background: none !important; padding-left: 6px !important; padding-right: 6px !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* more air between the page's own sections */
html.lx-on main > section { padding-top: clamp(64px, 9vw, 140px) !important; padding-bottom: clamp(64px, 9vw, 140px) !important; }
html.lx-on main > section.enquire { padding-top: clamp(48px, 6vw, 90px) !important; }
/* the service links: one row under "Our Services" */
html.lx-on section.lx-banner:not(#_) { padding-top: clamp(26px, 3vw, 44px) !important; padding-bottom: clamp(26px, 3vw, 44px) !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; }
html.lx-on section.lx-banner:not(#_) ol { display: flex !important; flex-wrap: wrap; gap: 10px 30px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: none; }
html.lx-on section.lx-banner:not(#_) li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; width: auto !important; flex: 0 0 auto; }
html.lx-on section.lx-banner:not(#_) li::before, html.lx-on section.lx-banner:not(#_) li::after { content: none !important; }
html.lx-on section.lx-banner:not(#_) li a { display: inline-flex !important; align-items: baseline; gap: 7px; padding: 6px 0 !important; border: 0 !important; background: none !important; min-height: 0 !important;
  font: 500 15px/1.3 avantt, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, .72) !important; text-decoration: none !important; transition: color .25s ease; }
html.lx-on section.lx-banner:not(#_) li a:hover, html.lx-on section.lx-banner:not(#_) li a:focus-visible { color: #fff !important; }
html.lx-on section.lx-banner:not(#_) .mm-help-n { display: none !important; }
html.lx-on section.lx-banner:not(#_) .mm-help-t { font: inherit !important; color: inherit !important; }
html.lx-on section.lx-banner:not(#_) .mm-help-a { font-size: 12px !important; color: #ef5143 !important; opacity: 1 !important; transform: none !important; position: static !important; }
/* client quotes: lines, not boxes */
html.lx-on section.lx-quotes:not(#_) .quotes { margin-top: 0 !important; gap: clamp(28px, 4vw, 64px) !important; }
html.lx-on section.lx-quotes:not(#_) .quote { background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 0 !important; box-shadow: none !important; padding: 26px 0 0 !important; }
html.lx-on section.lx-quotes:not(#_) .quote p { font-size: clamp(17px, 1.35vw, 21px) !important; line-height: 1.5 !important; }
/* how it works: four steps in a row, words only */
html.lx-on section.mm-proc:not(#_) .mm-proc-img { display: none !important; }
html.lx-on section.mm-proc:not(#_) .mm-proc-big { font-size: clamp(30px, 4.4vw, 76px) !important; }
/* questions: lines, not boxes */
html.lx-on section.lx-faq:not(#_) .faq details { background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
html.lx-on section.lx-faq:not(#_) .faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18) !important; }
html.lx-on section.lx-faq:not(#_) .faq summary { padding-left: 0 !important; padding-right: 0 !important; }
html.lx-on section.lx-faq:not(#_) .faq .faq-a { padding-left: 0 !important; padding-right: 0 !important; }
/* the folded sections */
html.lx-on main > section.lx-more { padding-top: 0 !important; padding-bottom: clamp(40px, 5vw, 80px) !important; }
.lx-more > .wrap > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18);
  font: 700 12px/1 avantt, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.lx-more > .wrap > details > summary::-webkit-details-marker { display: none; }
.lx-more > .wrap > details > summary:hover { color: #fff; }
.lx-more > .wrap > details > summary i { width: 10px; height: 10px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-3px); transition: transform .3s ease; flex: none; margin-right: 4px; }
.lx-more > .wrap > details[open] > summary i { transform: rotate(-135deg) translateY(-3px); }
.lx-more details > section { padding: clamp(36px, 5vw, 72px) 0 !important; border: 0 !important; background: none !important; }
.lx-more details > section > .wrap { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
/* the form: the hand section above is its opening, so the side keeps only the call options */
/* (the call, email and studio lines beside the form are shown again: Danny) */

/* ---- 4. one voice for the type (Danny, 14 Nov 2026): the home page sections are set in thin Helvetica Neue, and the page's
   own heavy headings beside them looked mismatched. The page's headings and reading text now use the home page's own
   font files. The headline stays in capitals, only lighter. Small labels and buttons keep their look. ---- */
@font-face { font-family: 'lxHelv'; src: url('/heart/fonts/HelveticaNeueCyr-Roman.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'lxHelvL'; src: url('/heart/fonts/HelveticaNeueCyr-Light.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* The Helvetica files have no arrow of their own, so an iPhone drew its blue emoji arrow in this text (14 Nov 2026, Danny). The
   arrow is taken from the site's own font, the one the menu and buttons already use, so it is right from the first paint. */
@font-face { font-family: 'lxHelv'; src: url('/_next/static/media/570bdcfc936308af-s.p.woff2') format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+2197; }
@font-face { font-family: 'lxHelvL'; src: url('/_next/static/media/570bdcfc936308af-s.p.woff2') format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+2197; }
html.lx-on main h1:not(#_), html.lx-on main h1 span:not(#_), html.lx-on main h2:not(#_), html.lx-on main h3:not(#_), html.lx-on main .mm-proc-big:not(#_), html.lx-on main .mm-proc-big span:not(#_),
html.lx-on main .faq-q:not(#_), html.lx-on main .wkb-head h2:not(#_):not(#_) {
  font-family: 'lxHelv', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: 400 !important; letter-spacing: -.015em !important; }
html.lx-on main h2:not(#_), html.lx-on main h3:not(#_) { text-transform: none !important; }
html.lx-on main h2:not(#_) { font-size: clamp(30px, 3.6vw, 60px) !important; line-height: 1.06 !important; }
/* no capitals (Danny, 14 Nov 2026): the headline and the four big words read as written, like the home page */
html.lx-on main h1:not(#_), html.lx-on main h1 span:not(#_), html.lx-on main .mm-proc-big:not(#_), html.lx-on main .mm-proc-big span:not(#_) { text-transform: none !important; }
html.lx-on main p:not(.eyebrow):not(.mm-proc-n):not(.lx-skip):not(.mm-proc-big):not(.wkb-sub):not(.mm-hero-note), html.lx-on main li, html.lx-on main blockquote p, html.lx-on main .faq-a {
  font-family: 'lxHelvL', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; }
html.lx-on section.lx-banner:not(#_) li a:not(#_) { font-family: 'lxHelvL', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: 400 !important; font-size: 16px !important; }
html.lx-on #lx-open .lead { font-size: clamp(17px, 1.35vw, 21px) !important; line-height: 1.5 !important; }

/* ---- 5. lx-centre: the page's own sections sit in a centred column, as the home page sections do (Danny, 14 Nov 2026).
   Not the hero (its words sit beside the heart) and not the book. ---- */
html.lx-on main > section:not(:has(> #lx-book)) > .wrap { max-width: min(1120px, 100%) !important; margin-left: auto !important; margin-right: auto !important; }


/* ---- 6. lx-scale: the home page's own type sizes (measured on the heart page, 14 Nov 2026; Danny: "get that feel like I want
   from the index page"). The home page uses fixed sizes, not sizes that grow with the window, and slightly open spacing:
   headline 72/72, statements 54 and 45, labels 18, reading text 16/24 Light; phones 30/32, 32 and 30, 16. ---- */
html.lx-on main h1:not(#_):not(#_), html.lx-on main h1 span:not(#_):not(#_), html.lx-on main h2:not(#_):not(#_), html.lx-on main h3:not(#_):not(#_), html.lx-on main .mm-proc-big:not(#_):not(#_), html.lx-on main .mm-proc-big span:not(#_):not(#_), html.lx-on main .faq-q:not(#_):not(#_) { letter-spacing: .02em !important; }
html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_):not(#_) { font-size: 72px !important; line-height: 1 !important; }
html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_) { margin-bottom: 30px !important; }
html.lx-on #lx-open .lead:not(#_) { font-size: 17px !important; line-height: 26px !important; max-width: 31em; color: rgba(255, 255, 255, .86) !important; }
html.lx-on main h2:not(#_):not(#_) { font-size: 45px !important; line-height: 49px !important; }
html.lx-on main .mm-proc-big:not(#_):not(#_), html.lx-on main .mm-proc-big span:not(#_):not(#_) { font-size: 54px !important; line-height: 1 !important; }
/* "How it works" is a label over the four words, like "Our Services:" on the home page */
html.lx-on main h2.mm-proc-k:not(#_):not(#_) { font-size: 18px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, .7) !important; margin-bottom: 14px !important; }
html.lx-on main h3:not(#_):not(#_) { font-size: 22px !important; line-height: 1.25 !important; }
html.lx-on main p:not(.eyebrow):not(.mm-proc-n):not(.lx-skip):not(.mm-proc-big):not(.wkb-sub):not(.wkb-lead):not(.mm-hero-note):not(.lead):not(#_), html.lx-on main li:not(#_), html.lx-on main .faq-a:not(#_) { font-size: 16px !important; line-height: 24px !important; }
html.lx-on section.lx-quotes:not(#_) .quote p:not(#_):not(#_) { font-size: 18px !important; line-height: 28px !important; }
html.lx-on main .faq-q:not(#_):not(#_) { font-size: 18px !important; line-height: 1.35 !important; }
html.lx-on main .intro:not(#_):not(#_) { color: rgba(255, 255, 255, .7) !important; margin-top: 14px !important; }
@media (max-width: 1199px) {
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_):not(#_) { font-size: 56px !important; }
  html.lx-on main h2:not(#_):not(#_) { font-size: 38px !important; line-height: 42px !important; }
  html.lx-on main .mm-proc-big:not(#_):not(#_), html.lx-on main .mm-proc-big span:not(#_):not(#_) { font-size: 44px !important; }
}
@media (max-width: 699px) {
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_):not(#_) { font-size: 34px !important; line-height: 36px !important; }
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_) { margin-bottom: 18px !important; }
  html.lx-on #lx-open .lead:not(#_) { font-size: 16px !important; line-height: 24px !important; }
  html.lx-on main h2:not(#_):not(#_) { font-size: 30px !important; line-height: 33px !important; }
  html.lx-on main h2.mm-proc-k:not(#_):not(#_) { font-size: 16px !important; }
  html.lx-on main .mm-proc-big:not(#_):not(#_), html.lx-on main .mm-proc-big span:not(#_):not(#_) { font-size: 32px !important; }
  html.lx-on main h3:not(#_):not(#_) { font-size: 20px !important; }
  html.lx-on section.lx-quotes:not(#_) .quote p:not(#_):not(#_) { font-size: 16px !important; line-height: 25px !important; }
}
/* the scroll line under the hero is back (Danny), in the home page's own quiet style */
.lx-hint { font: 400 16px/1 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, .55) !important; }
.lx-hint span { color: #fff !important; }

/* ---- 7. lx-pass7 (Danny, 14 Nov 2026) ---- */
/* no flash on load: the text is white from the first paint (the site-wide script used to turn it from cream to white a moment later) */
html.lx-on main { --sand: #fff; --cream: #fff; --warm-sand: #fff; --peach-cream: #fff; }
/* no red accents in the type: the second half of the headline, the alternate big words, step numbers, bullets, link arrows */
html.lx-on main .mm-proc-big .c:not(#_):not(#_) { color: #fff !important; }
html.lx-on main .mm-proc-n:not(#_) { color: rgba(255, 255, 255, .5) !important; }
/* gaps: less empty space between the page's own sections */
html.lx-on main > section { padding-top: clamp(52px, 5.4vw, 92px) !important; padding-bottom: clamp(52px, 5.4vw, 92px) !important; }
html.lx-on main > section.enquire { padding-top: clamp(40px, 4vw, 64px) !important; }
/* "More about how we work": one line above it, not two touching */
html.lx-on main > section.lx-more { border-top: 0 !important; padding-top: 0 !important; padding-bottom: clamp(36px, 4vw, 64px) !important; }
html.lx-on section.lx-faq:not(#_) { padding-bottom: clamp(28px, 3vw, 48px) !important; }
/* the service links: a banner drifting left */
html.lx-on section.lx-banner:not(#_) > .wrap { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
html.lx-on section.lx-banner:not(#_) ol { justify-content: center; }
html.lx-on section.lx-banner:not(#_) ol.lx-run { flex-wrap: nowrap !important; justify-content: flex-start; width: max-content; gap: 0 !important; animation: lx-drift 60s linear infinite; will-change: transform; }
html.lx-on section.lx-banner:not(#_) ol.lx-run li { padding-right: 54px !important; }
html.lx-on section.lx-banner:not(#_) ol.lx-run li a:not(#_) { font-size: 18px !important; white-space: nowrap; }
html.lx-on section.lx-banner:not(#_) ol.lx-run:hover, html.lx-on section.lx-banner:not(#_) ol.lx-run:focus-within { animation-play-state: paused; }
@keyframes lx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% / var(--lx-n, 3)), 0, 0); } }
/* the contact lines beside the form: label small and firm, the detail in the heading font */
html.lx-on #enquire .contact-list li:not(#_) { font-family: 'lxHelv', 'Helvetica Neue', Arial, sans-serif !important; }
html.lx-on #enquire .contact-list .cl-k:not(#_) { font: 700 12px/1.2 avantt, system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, .6) !important; }
html.lx-on #enquire .contact-list a:not(#_) { font-family: 'lxHelv', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.4 !important; letter-spacing: .01em !important; }
.lx-hint { display: none !important; }

/* ---- 8. lx-pass8 (Danny, 14 Nov 2026) ---- */
/* red where it matters: "Built to Grow", the banner arrows, the list dots, the contact underlines (the page's own red) */
html.lx-on #lx-open h1 .h1b:not(#_):not(#_) { color: #ef5143 !important; }
html.lx-on section.lx-banner:not(#_) .mm-help-a:not(#_) { color: #ef5143 !important; }
/* "More about how we work" is the last line of the questions list; what it opens is the page's earlier sections, set plainly */
html.lx-on .lx-more-body section { padding: 28px 0 8px !important; border: 0 !important; background: none !important; position: static !important; }
html.lx-on .lx-more-body section > .wrap { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; margin: 0 !important; }
html.lx-on .lx-more-body h2:not(#_):not(#_) { font-size: 26px !important; line-height: 1.2 !important; }
html.lx-on .lx-more-body .eyebrow { display: none !important; }
/* the book's title and links in the page's colours: white type, red detail */
html.lx-book-on .wkb-head h2:not(#_):not(#_):not(#_) { color: #fff !important; max-width: 14ch; }
html.lx-book-on .wkb-lead:not(#_) { font: 400 17px/26px 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; color: rgba(255, 255, 255, .86) !important; }
html.lx-book-on .wkb-sub:not(#_) { font: 400 14px/22px 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; color: rgba(255, 255, 255, .5) !important; }
html.lx-book-on .lx-skip a:not(#_) { font: 400 16px/1.2 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; border-bottom: 1px solid #ef5143 !important; padding-bottom: 5px !important; }
html.lx-book-on .wkb-open b:not(#_) { font: 400 22px/1 'lxHelv', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: .01em !important; color: #fff !important; }
html.lx-book-on .wkb-open i:not(#_) { font: 400 14px/1 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; border-bottom: 1px solid #ef5143 !important; }
html.lx-book-on .wkb-count:not(#_) { font-family: 'lxHelv', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 400 !important; }
/* the long empty stretch after the book closes: the next section comes up over the closing desk */
#lx-book .wk { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
#lx-book .wk > :not(.wkb):not(:has(.wkb)), #lx-book .wk section:not(.wkb):not(:has(.wkb)) { display: none !important; }      /* nothing of the Work page but the book itself (its other blocks left 780px of empty space under the book) */
/* (no overlap: the next section sliding over the closed book looked like the book was cut off. The book's scroll length is trimmed instead, so it closes just as it lets go.) */
html.lx-book-on #lx-book .wkb:not(#_) { height: calc(100vh * (0.62 + var(--wkb-flips, 11) * 0.42)) !important; height: calc(100svh * (0.62 + var(--wkb-flips, 11) * 0.42)) !important; }

/* ---- 9. lx-pass9 (Danny, 14 Nov 2026) ---- */
/* "Book a 20-min call": no underline (it left a stray pixel line under the arrow), and it stays white under the pointer
   (the button style turned the words dark on hover, which on this dark page made them vanish) */
html.lx-on #lx-open .btns .btn-ghost:not(#_), html.lx-on #lx-open .btns .btn-ghost:not(#_) * { text-decoration: none !important; }
html.lx-on #lx-open .btns .btn-ghost:not(#_):hover, html.lx-on #lx-open .btns .btn-ghost:not(#_):focus-visible { background: none !important; color: #fff !important; opacity: .72; }
html.lx-on #lx-open .btns .btn-ghost:not(#_) { transition: opacity .25s ease !important; }
/* the banner's arrows: drawn, not a text character, so they are crisp at any size */
html.lx-on section.lx-banner:not(#_) .mm-help-a:not(#_):not(#_) { font-size: 0 !important; width: 11px; height: 11px; flex: none; align-self: center; margin-left: 4px; background: #ef5143;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html.lx-on section.lx-banner:not(#_) ol.lx-run li a:not(#_) { align-items: center !important; }
/* fewer, fainter lines where the banner meets the quotes */
html.lx-on section.lx-banner:not(#_) { border-bottom-color: rgba(255, 255, 255, .06) !important; border-top-color: rgba(255, 255, 255, .06) !important; }
html.lx-on section.lx-quotes:not(#_) .quote:not(#_) { border-top-color: rgba(255, 255, 255, .09) !important; }
html.lx-on section.lx-quotes:not(#_) { padding-top: clamp(64px, 6.4vw, 110px) !important; }
/* red full stops and red step numbers */
html.lx-on main .mm-proc-big .lx-dot { color: #ef5143 !important; font-style: normal; }
html.lx-on main .mm-proc-n:not(#_):not(#_) { color: #ef5143 !important; }
/* the questions sit in the middle of the page */
html.lx-on section.lx-faq:not(#_) > .wrap:not(#_) { max-width: min(940px, 100%) !important; }
html.lx-on section.lx-faq:not(#_) .faq { max-width: none !important; width: 100% !important; }
/* the banner runs the full width of the page */
html.lx-on main > section.lx-banner:not(#_):not(#_) > .wrap:not(#_) { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; }
html.lx-on section.lx-banner:not(#_) .mm-help-a:not(#_):not(#_) { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; position: static !important; }

/* ---- 10. lx-pass10 (Danny, 14 Nov 2026) ---- */
/* the lead: each sentence starts its own line on wide screens, and lines break evenly */
html.lx-on #lx-open .lead:not(#_) { max-width: 34em !important; text-wrap: pretty; }
@media (min-width: 900px) { html.lx-on #lx-open .lead .lx-s { display: block; text-wrap: balance; } }
/* the small rule before "Projects from": fainter */
html.lx-on #lx-open .mm-hero-note::before { opacity: .35 !important; }
html.lx-on #lx-open .mm-hero-note { border-color: rgba(255, 255, 255, .12) !important; }

/* ---- 11. lx-pass11 (Danny, 14 Nov 2026) ---- */
.lx-jump { position: fixed; inset: 0; z-index: 2147482000; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lx-jump.is-on { opacity: 1; }
/* the video player's close button: a white ring, also when it has focus (it used the site's orange focus ring) */
#hx-reel button { border: 1.5px solid rgba(255, 255, 255, .9) !important; outline: none !important; box-shadow: none !important; }
#hx-reel button:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }

/* ---- 12. lx-pass12 (Danny, 14 Nov 2026) ---- */
/* the logo is white on this page, not cream */
html.lx-on a[class*="styles_mmLogo__"] { filter: brightness(0) invert(1) !important; }
/* the questions: every row the same height, the words centred on the plus */
html.lx-on section.lx-faq:not(#_) .faq details:not(#_) { padding: 0 !important; }
html.lx-on section.lx-faq:not(#_) .faq summary:not(#_) { display: flex !important; align-items: center !important; justify-content: space-between; gap: 20px; min-height: 0 !important; height: auto !important; padding: 24px 0 !important; margin: 0 !important; }
html.lx-on section.lx-faq:not(#_) .faq .faq-q:not(#_) { margin: 0 !important; padding: 0 !important; }
html.lx-on section.lx-faq:not(#_) .faq .faq-ic:not(#_) { position: relative !important; flex: none; margin: 0 !important; }   /* relative: its two bars are placed inside it (static sent them to the row's corner) */
html.lx-on section.lx-faq:not(#_) .faq .faq-a:not(#_) { padding-bottom: 22px !important; }
/* the video player: the picture fades in once it is playing, so opening never flashes black or a still */
#hx-reel video { transition: opacity .35s ease; }
#hx-reel { transition: opacity .35s ease !important; }
/* the book: a skip control that stays all the way through, bottom right */
.lx-skip2 { position: absolute; right: clamp(20px, 3.2vw, 56px); bottom: clamp(84px, 11vh, 110px); z-index: 3; font: 400 15px/1.2 'lxHelvL', 'Helvetica Neue', Arial, sans-serif; color: rgba(255, 255, 255, .85) !important; text-decoration: none !important; border-bottom: 1px solid #ef5143; padding-bottom: 5px; }
.lx-skip2:hover, .lx-skip2:focus-visible { color: #fff !important; }
.lx-skip2 { transition: opacity .3s ease; }
.lx-skip2.is-done { opacity: 0 !important; pointer-events: none !important; }      /* once the last project has been turned there is nothing left to skip */
/* the book on narrow windows and phones: the label sits above the Start a project bar, the "move up and down" tip (a mouse tip) is not shown, the skip control moves to the top */
@media (max-width: 899px) {
  html.lx-book-on .wkb-foot:not(#_) { bottom: 78px !important; }
  html.lx-book-on .wkb-pan-tip:not(#_), html.lx-book-on .wkb-pan:not(#_) { display: none !important; }
  .lx-skip2 { bottom: auto; top: 64px; right: 16px; font-size: 14px; }
  html.lx-book-on .wkb-open b:not(#_) { font-size: 19px !important; }
}

/* ---- 13. lx-pass13 (14 Nov 2026): the recipe on every service page ----
   The banner on the sub-pages is their "Related services" row (a div.rels of a.rel links), styled like the one on /websites/. */
html.lx-on section.lx-banner:not(#_) .rels { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; }
html.lx-on section.lx-banner:not(#_) .rels.lx-run { flex-wrap: nowrap !important; justify-content: flex-start; width: max-content; gap: 0 !important; animation: lx-drift 60s linear infinite; will-change: transform; }
html.lx-on section.lx-banner:not(#_) .rels.lx-run:hover, html.lx-on section.lx-banner:not(#_) .rels.lx-run:focus-within { animation-play-state: paused; }
html.lx-on section.lx-banner:not(#_) .rels a.rel:not(#_) { display: inline-flex !important; align-items: center !important; gap: 11px; flex: 0 0 auto; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 6px 54px 6px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font: 400 18px/1.3 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; color: rgba(255, 255, 255, .72) !important; text-decoration: none !important; transition: color .25s ease; }
html.lx-on section.lx-banner:not(#_) .rels a.rel:not(#_):hover, html.lx-on section.lx-banner:not(#_) .rels a.rel:not(#_):focus-visible { color: #fff !important; }
html.lx-on section.lx-banner:not(#_) .rels a.rel > span.mm-arr:not(#_), html.lx-on section.lx-banner:not(#_) .rels a.rel > span[aria-hidden="true"]:not(.mm-roll):not(#_) { display: block !important; overflow: hidden; font-size: 0 !important; width: 11px; height: 11px; flex: none; background: #ef5143; transform: none !important; opacity: 1 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the showreel is a button: the pointer is a hand over it (set on the frame's page by lpx.js) */
/* the banner's links are simply there (the page's rise-in animation never ran for the copies, which left them invisible) */
html.lx-on section.lx-banner:not(#_) .lx-run > *, html.lx-on section.lx-banner:not(#_) .lx-run a { opacity: 1 !important; transform: none !important; visibility: visible !important; animation: none !important; transition: color .25s ease !important; clip-path: none !important; }
html.lx-on section.lx-banner:not(#_) ol.lx-run { animation-timing-function: linear !important; }
/* inside a banner link: the words once (the site's hover "roll" keeps a second copy), no second arrow */
html.lx-on section.lx-banner:not(#_) .rels a.rel .mm-roll { display: inline !important; overflow: visible !important; height: auto !important; }
html.lx-on section.lx-banner:not(#_) .rels a.rel .mm-roll > span { display: inline !important; position: static !important; transform: none !important; }
html.lx-on section.lx-banner:not(#_) .rels a.rel .mm-roll > span[aria-hidden="true"], html.lx-on section.lx-banner:not(#_) .rels a.rel .mm-arr > span { display: none !important; }
/* short windows (a laptop with a tall toolbar, a window that is not full height): the hero steps down so the headline,
   lead, buttons and price line all stay on the first screen, whatever the length of the page's headline */
@media (min-width: 700px) and (max-height: 760px) {
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_):not(#_) { font-size: 52px !important; line-height: 1 !important; }
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_) { margin-bottom: 20px !important; }
  html.lx-on #lx-open > section { padding-bottom: 24px !important; }
  html.lx-on #lx-open .mm-hero-note { margin-top: 16px !important; }
}
@media (min-width: 700px) and (max-height: 620px) {
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_):not(#_) { font-size: 40px !important; }
  html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_) { margin-bottom: 14px !important; }
  html.lx-on #lx-open .lead:not(#_) { font-size: 15px !important; line-height: 22px !important; }
  html.lx-on #lx-open .btns { margin-top: 16px !important; }
  html.lx-on #lx-open .btns .btn { padding-top: 12px !important; padding-bottom: 12px !important; min-height: 0 !important; }
  html.lx-on #lx-open .mm-hero-note { margin-top: 10px !important; }
}
@media (min-width: 641px) and (max-width: 1199px) and (max-height: 700px) { html.lx-on #lx-open > section { padding-top: 78px !important; } }
@media (min-width: 641px) and (max-width: 1199px) and (max-height: 500px) { html.lx-on #lx-open .lead:not(#_) { font-size: 14px !important; line-height: 20px !important; } html.lx-on #lx-open .btns { margin-top: 12px !important; } }
@media (min-width: 700px) and (max-height: 500px) { html.lx-on #lx-open.lx-hole section h1:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1a:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .h1b:not(#_):not(#_):not(#_), html.lx-on #lx-open.lx-hole section h1 .mm-lp:not(#_):not(#_):not(#_) { font-size: 32px !important; } html.lx-on #lx-open .mm-hero-note { display: none !important; } }

/* ---- 14. lx-pass14 (14 Nov 2026): the lighter modes ---- */
/* guides keep their sections inside <article class="prose">: the same solid-section and centred-column rules apply there */
html.lx-on main > article > section { position: relative; z-index: 2; background-color: #0a0a0a !important; padding-top: clamp(44px, 4.6vw, 80px) !important; padding-bottom: clamp(44px, 4.6vw, 80px) !important; }
html.lx-on main > article > section > .wrap { max-width: min(1120px, 100%) !important; margin-left: auto !important; margin-right: auto !important; }
html.lx-on main > article > .lx-hole > section > .wrap { max-width: none !important; margin: 0 !important; }
/* a lite page's hero is one screen: the page's own next section follows straight after */
html.lx-lite #lx-open { height: 100vh; height: 100svh; }
/* plain pages have no frame: nothing needs covering, the site's own background heart stays visible */
html.lx-plain main > section, html.lx-plain main > article > section { background-color: transparent !important; z-index: auto; }
html.lx-on main h1:not(#_):not(#_):not(#_), html.lx-on main h1 span:not(#_):not(#_):not(#_) { font-size: 72px !important; line-height: 1 !important; text-transform: none !important; }
html.lx-plain main .lead:not(#_) { font-size: 17px !important; line-height: 26px !important; max-width: 34em; }
@media (max-width: 1199px) { html.lx-on main h1:not(#_):not(#_):not(#_), html.lx-on main h1 span:not(#_):not(#_):not(#_) { font-size: 56px !important; } }
@media (max-width: 699px) { html.lx-on main h1:not(#_):not(#_):not(#_), html.lx-on main h1 span:not(#_):not(#_):not(#_) { font-size: 34px !important; line-height: 36px !important; } }
/* the rescue pages' price line and the guides' cards keep their own weight, in the page's fonts */
html.lx-on main .mm-rs-price span { font-family: 'lxHelvL', 'Helvetica Neue', Arial, sans-serif !important; font-weight: 400 !important; }
html.lx-plain main h1:not(#_):not(#_) { color: #fff !important; }
/* phones: the top bar already has "3D room", so the floating copy is not shown (it sat on the text and the Start a project bar) */
@media (max-width: 899px) { html .mmrm.is-float:not(#_):not(#_) { display: none !important; } }

/* phones (14 Nov 2026, Danny): the price line sat across the heart. It is now one quiet line at the bottom left of the first
   screen, under the heart; the headline, lead and buttons keep their place (the space the line took is kept under them). */
@media (max-width: 599px) {
  html.lx-on #lx-open .mm-hero-note:not(#_) { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0 !important; max-width: none !important; font-size: 13px !important; line-height: 18px !important; text-align: center; }   /* centred under the heart (Danny, 14 Nov 2026) */
  html.lx-on #lx-open .mm-hero-note:not(#_)::before { display: none !important; }
  html.lx-on #lx-open .mm-hero-note:not(#_) .mm-hn-sep { display: inline !important; }
  html.lx-on #lx-open .mm-hero-note:not(#_) .mm-hn2 { display: inline !important; padding-left: 0 !important; }
  html.lx-on #lx-open > section > .wrap:has(.mm-hero-note) { position: static !important; padding-bottom: 76px; }
}

/* ===== pure black everywhere (14 Nov 2026, Danny: "check all backgrounds are black, some look light black, fix the header
   too"). The page, its sections, the footer and the bar were three slightly different near-blacks (#0a0a0a, #050505, #050404)
   beside the heart page's true black. Cards and form fields keep their own lift. The book sits on plain black with the heart
   paperweight, no desk (lpx.js sets MM_BOOK_BLACK), and fades into the sections around it. ===== */
html.lx-on:not(#_) body, html.lx-plain:not(#_) body { background: #000 !important; }
html.lx-on main > section:not(#_), html.lx-plain main > section:not(#_), html.lx-on main ~ footer:not(#_), html.lx-on footer.mm-info-foot:not(#_), html.lx-plain footer.mm-info-foot:not(#_) { background-color: #000 !important; }
html.lx-on main section.mm-fade:not(#_), html.lx-plain main section.mm-fade:not(#_) { background-color: #000 !important; }      /* the guides' sections sit inside their article */
html.lx-on header[class*="styles_header__"]:not(#_), html.lx-plain header[class*="styles_header__"]:not(#_) { background-color: #000 !important; }
#lx-book .wkb:not(#_), #lx-book .wkb-stage:not(#_) { background: #000 !important; }
#lx-book .wkb-vig { display: none !important; }
/* the links banner: the same hairline above and below (the next section's own top line sat on the banner's lower one and made it brighter) */
html.lx-on section.lx-banner:not(#_):not(#_) { border-top: 1px solid rgba(255, 255, 255, .1) !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; }
html.lx-on section.lx-banner + section:not(#_):not(#_) { border-top: 0 !important; }

/* the book heading as on the home page (Danny, 14 Nov 2026: "why is the home page header better? its bigger?... more like the
   home page layout for the book"): the same size as there (it was a step smaller here) and on one line where it fits, instead
   of being squeezed to 14 characters a line. Longer titles still wrap, at about 24 characters. */
html.lx-book-on .wkb-head h2:not(#_):not(#_):not(#_):not(#_) { font-size: clamp(30px, 3.6vw, 60px) !important; line-height: 1.06 !important; letter-spacing: -.015em !important; margin: 0 0 14px !important; max-width: none !important; }
@media (min-width: 900px) { html.lx-book-on .wkb-head h2:not(#_):not(#_):not(#_):not(#_) { width: max-content !important; max-width: min(24ch, 70vw) !important; } }