/* Legacy Modernisation, built from Web & App Development (page-web-development-v2.css): its shell, header strip, hero base,
   buttons, email form, reveal, hover icons, client wall, text links and responsive rules are carried over unchanged. Header
   and footer are the site's own (page-seo-1/2.css, site-header.css, site-footer.css); everything here scopes to .v9 or
   body.v9-page. Page-specific rules (lm-*) follow the shared ones. */

@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- page shell: white header strip, then the page ---------- */
body.v9-page .top-wrap{background-color:#fff;background-image:none}
body.v9-page .top-wrap-inner{background:none;min-height:0;padding-bottom:0}
body.v9-page .top-wrap::after,body.v9-page .top-wrap::before{display:none}
body.v9-page .content-area{padding:0}
body.v9-page .logo-white{display:none}
body.v9-page .logo-dark{display:block}
body.v9-page .menu_trigger{color:#232834}
body.v9-page .slicknav_icon-bar{background-color:#232834}
body.v9-page .header-wide{margin-bottom:0;padding-bottom:0}
body.v9-page .header{margin-bottom:0;padding-top:14px;padding-bottom:14px}
/* the site's menu button is 33px wide: its tap area is widened to 44px towards the page, with nothing moving */
body.v9-page .menu_trigger::after{content:"";position:absolute;top:-3px;bottom:-3px;left:-11px;right:0}
/* header, right side, as the reference reads: a quiet help link, then the icons (the menu's search and the menu), then the
   call button last, at the edge. The logo side is the site's own, set smaller. The row runs the full width of the window,
   and is a flex line centred on the logo; the menu's injected search button (.wbm_search) and the menu button drop their
   float offsets here. The link goes under 700px and the button under 521px, where the hero's form sits just below */
body.v9-page .header .logo{width:118px;max-width:none}
@media (max-width:765px){body.v9-page .header .logo{width:108px}}
body.v9-page .header{display:flex;align-items:center;max-width:none}
@media (min-width:1025px){body.v9-page .header{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:1280px){body.v9-page .header{padding-left:56px!important;padding-right:56px!important}}
body.v9-page .header::after,body.v9-page .header-right::after{display:none}
body.v9-page .header-right{float:none;display:flex;align-items:center;gap:6px;margin-left:auto;padding:0}
body.v9-page .hp-hd{order:1;display:flex;align-items:center;gap:14px;margin-right:14px}
body.v9-page .hp-hd-sep{display:block;width:1px;height:14px;background:#C2C5CC}
body.v9-page .hp-hd-l{display:inline-flex;align-items:center;min-height:44px;font-family:'Sailec',sans-serif;font-weight:500;font-size:13.5px;line-height:1.2;color:#4f5565;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s cubic-bezier(.65,0,.35,1),text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .hp-hd-l:hover,body.v9-page .hp-hd-l:focus-visible{color:#232834;text-decoration-color:#232834}
/* the menu's injected search is not shown in this header: search stays inside the menu itself */
body.v9-page .header .wbm_search{display:none}
body.v9-page .wbm_search{order:2;float:none;width:44px;height:44px;margin:0;color:#4f5565;transition:color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .wbm_search svg{top:50%;width:20px;height:20px;transform:translate(-50%,-50%);stroke-width:1.9}
body.v9-page .wbm_search:hover{color:#232834}
body.v9-page .hp-hd-cta{order:4;height:40px;margin-left:18px;padding:0 16px 0 20px;gap:4px;font-family:'Sailec',sans-serif;font-size:14.5px}
body.v9-page a.hp-hd-cta,body.v9-page a.hp-hd-cta:hover,body.v9-page a.hp-hd-cta:visited{color:#fff;text-decoration:none}
body.v9-page .hp-hd-cta::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
body.v9-page .hp-hd-cta svg.arr{display:block;flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){body.v9-page .hp-hd-cta:hover svg.arr{transform:translateX(2px)}}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
/* the menu's three bars are drawn a little smaller here, scaled about their own centre so they stay level with the row */
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l:focus-visible,body.v9-page .wbm_search:focus-visible,body.v9-page .hp-hd-cta:focus-visible,body.v9-page .menu_trigger:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (max-width:699px){body.v9-page .hp-hd{display:none}}
@media (max-width:520px){body.v9-page .hp-hd-cta{display:none}}
@media (prefers-reduced-motion:reduce){body.v9-page .hp-hd-cta svg.arr{transition:none}}
/* the dark menu marks the current page by file name only in its page list, which doesn't include this page: markMenu() marks
   its Improve what you already run route and, inside it, its Legacy Modernisation tile, in coral with the menu's own small dot */
body.v9-page #wbm .rt[aria-current="page"] b,body.v9-page #wbm .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wbm .rt[aria-current="page"] b::after,body.v9-page #wbm .tile[aria-current="page"] b::after{content:'';display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:#FA5478;vertical-align:middle}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500;color:#232834;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.v9 *{box-sizing:border-box}
.v9 :where(h1,h2,h3,p,ul,ol,li){margin:0;padding:0;background:none;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;text-align:left;font-weight:inherit}
.v9 :where(ul,ol,li){list-style:none}
.v9 :where(li)::marker{content:""}
.v9 a{color:inherit;text-decoration:none}
.v9 a:hover{color:#d33d5c}
.v9 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the page runs a little wider than the sister pages (1360px, not 1240px), but narrower than the header, which spans the
   window: from 1280px the side space is 56px, so on wider screens the content sits inset from the logo and the call button */
.v9-wrap{max-width:1360px;margin:0 auto;padding:0 40px;position:relative}
@media (min-width:1280px){.v9-wrap{padding:0 56px}}
.v9-eyebrow{display:block;font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c;margin:0 0 14px}
.v9-h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em}
.v9-sec{padding:88px 0}
.v9-bone{background:#F1EEEA}
.v9-head{margin-bottom:48px}
.v9-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}

/* ---------- reveal: sections ease in once as they reach the viewport ---------- */
.v9-rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.v9-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v9-rv{opacity:1;transform:none;transition:none}}

/* ---------- hero: copy on the left, the animation on the right ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.v9-hero h1{font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;margin:0 0 24px}
.v9-hero .v9-lead{font-size:18px;line-height:1.65;color:#3a3f4b;max-width:520px;margin:0 0 36px}
.v9-hero .v9-lead b{font-weight:700;color:#232834}
/* the one marked word: coral type on a blush marker that sweeps in once */
.v9-hl{position:relative;z-index:0;color:#d33d5c;white-space:nowrap}
.v9-hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.09em;top:.32em;bottom:.12em;background:#FDE0E6;border-radius:.06em .18em .08em .2em;transform:rotate(-1deg);transform-origin:left center;animation:v9Hl .9s cubic-bezier(.65,0,.35,1) .35s both}
@keyframes v9Hl{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.v9-hl::before{animation:none}}
.v9-hero-form{display:flex;flex-wrap:nowrap;gap:10px}
.v9-hero-email{flex:0 1 262px;width:262px;min-width:0;height:48px;padding:0 22px;border:1.5px solid #CFC9C1;border-radius:24px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
.v9-hero-email::placeholder{color:#6b7180}
.v9-hero-email:focus{border-color:#232834;box-shadow:0 0 0 4px rgba(250,84,120,.22)}
.v9-hero-go{flex:none;width:178px;height:48px;padding:0;border-radius:24px;font-family:inherit;font-size:16px}
@media (max-width:480px){.v9-hero-form{flex-wrap:wrap}.v9-hero-email,.v9-hero-go,.em-email{flex:1 1 100%;width:100%}}
.v9-illo{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1920/1805;pointer-events:none}
.v9-illo-art{position:absolute;inset:0}
.v9-illo-art svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
/* the hero swaps files by laying the next over the last: each pass has its own box, stacked in one place */
.lm-hero .v9-illo-art > div{position:absolute;inset:0}
@media (min-width:1101px){
.v9-illo{max-width:none;width:112%;margin:-24px -6% -4% -6%;transform:translateY(-7%)}
.v9-hero .v9-hero-grid{grid-template-columns:minmax(452px,5.2fr) minmax(0,6.8fr);gap:48px}
.v9-hero h1{font-size:clamp(44px,4.2vw,60px);margin-bottom:24px}
.v9-hero .v9-lead{max-width:480px}
}

/* ---------- buttons: a coral pill that lifts on hover onto a soft blush step ---------- */
.v9-btn{--btn-step:#FBC0CC;--btn-ease:cubic-bezier(.5,2.5,.7,.7);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:9999px;background:#FA5478;color:#fff;font-family:inherit;font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 0 0 0 var(--btn-step);transition-property:transform,translate,box-shadow;transition-duration:150ms;transition-timing-function:var(--btn-ease)}
.v9 a.v9-btn,.v9 a.v9-btn:hover,.v9 a.v9-btn:visited,.v9 button.v9-btn{color:#fff}
.v9-btn::before{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:transparent}
.v9 .v9-btn svg.arr{display:block;flex-shrink:0;width:14px;height:14px;margin-left:6px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
.v9-btn:hover{translate:0 -5px;box-shadow:0 5px 0 0 var(--btn-step)}
.v9-btn:hover::before{transform:scaleY(1.4)}
.v9 .v9-btn:hover svg.arr{transform:translateX(2px)}
}
.v9-btn:active{translate:0 -3px;box-shadow:0 3px 0 0 var(--btn-step)}
.v9-btn:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9-btn:disabled{pointer-events:none;opacity:.5}
.v9-btn.v9-btn-ghost{--btn-step:#E4DFD9;background:#fff;border-color:#232834}
.v9 a.v9-btn.v9-btn-ghost,.v9 a.v9-btn.v9-btn-ghost:hover,.v9 a.v9-btn.v9-btn-ghost:visited{color:#232834}
.v9-hero-go{padding:0;font-size:16px}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}
.em-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.em-center .v9-h2{text-align:center;max-width:760px}
.em-center .v9-sub{text-align:center;max-width:560px;margin:18px auto 34px;font-size:18px;line-height:1.6;color:#4f5565}
/* ---------- closing: the hero's email and call button, centred ---------- */
.em-cta{border-top:1px solid #E4DFD9;padding-bottom:104px}
.em-cta .v9-sub{margin-bottom:30px}
.em-cta .v9-hero-form{justify-content:center}
.em-cta .em-talk{justify-items:center}
.em-cta .em-status{text-align:center}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- email and call: a valid email shows a check in the field; on send the button narrows to a spinner,
   then the form fades away and a thank-you settles in its place ---------- */
.em-talk{display:grid}
.em-talk>*{grid-area:1/1}
.em-email{position:relative;flex:0 1 262px;width:262px;min-width:0}
.em-email .v9-hero-email{width:100%;padding-right:52px;transition:border-color .35s cubic-bezier(.65,0,.35,1)}
.em-email-check{position:absolute;top:50%;right:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#FDE0E6;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.v9 .em-email-check svg{width:15px;height:15px;stroke:#d33d5c;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.em-demo.sending .em-email-check,.em-talk.done .em-email-check{transform:scale(1)}
.em-demo.sending .v9-hero-email,.em-talk.done .v9-hero-email{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid ~ .em-email-check{transform:scale(1)}
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;margin-right:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
.em-demo .v9-btn{transition-property:transform,translate,box-shadow,background-color,width;transition-duration:150ms,150ms,150ms,.35s,.5s;transition-timing-function:var(--btn-ease),var(--btn-ease),var(--btn-ease),cubic-bezier(.65,0,.35,1),cubic-bezier(.65,0,.35,1)}
.em-demo.sending .v9-btn,.em-talk.done .v9-btn{width:100px;background:#FCA3B6}
.em-demo.sending .em-btn-lbl,.em-talk.done .em-btn-lbl{display:none}
.v9 .em-demo.sending .em-spin,.v9 .em-talk.done .em-spin{display:block}
.em-demo.sending .v9-btn:disabled{opacity:1}
.em-demo.sending .v9-btn:hover{translate:none;box-shadow:none}
@keyframes emSpin{to{transform:rotate(360deg)}}
.em-demo{transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1)}
.em-talk.done .em-demo{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s}
.em-talk-done{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;font-size:16px;line-height:1.5;color:#232834;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}
.em-talk.done .em-talk-done{opacity:1;visibility:visible;transform:none;transition:opacity .55s cubic-bezier(.65,0,.35,1) .3s,transform .65s cubic-bezier(.65,0,.35,1) .3s,visibility 0s}
.em-talk-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#FA5478}
.v9 .em-talk-ic svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none}
.em-status{min-height:22px;margin:12px 0 0;font-size:14px;line-height:1.5;color:#c62d4f}
@media (prefers-reduced-motion:reduce){.em-email-check,.em-demo,.em-talk.done .em-demo,.em-talk-done,.em-talk.done .em-talk-done{transition:none}.v9 .v9-btn .em-spin{animation-duration:2.4s}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
.v9-hero-grid{grid-template-columns:minmax(0,1fr)}
.v9-hero .v9-lead{max-width:620px}
}
@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

/* ---------- text links: ink with a tint underline that darkens on hover, and an arrow that steps forward ---------- */
.v9 .lm-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font-weight:700;font-size:17px;line-height:1.3;color:#232834;text-decoration:none}
.lm-go-l{text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.lm-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .lm-go:hover{color:#232834}.lm-go:hover .lm-go-l{text-decoration-color:#232834}.lm-go:hover .lm-go-a{transform:translateX(3px)}}
.v9 .lm-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.lm-go-a{transition:none}}

/* ---------- hover icons, as on the AI Chatbots page: ink outline over a white body, warm shade for depth, and one coral part
   that arrives once, in one direction, with its section. A hover Lottie sits exactly over each icon; its first frame is the
   icon, so the swap on first hover is invisible ---------- */
.cb-ic-box{grid-row:1/3;position:relative;display:block;width:72px;height:72px;margin:-6px 0 0 -4px}
.v9 svg.cb-ic{width:100%;height:100%;overflow:visible;fill:none;stroke:#232834;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.cb-ic-lt{position:absolute;inset:0;display:block;pointer-events:none;visibility:hidden}
.cb-ic-lt svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.cb-ic-box.lt-on .cb-ic-lt{visibility:visible}
.cb-ic-box.lt-on svg.cb-ic{visibility:hidden}
.cb-ic *{vector-effect:non-scaling-stroke}
.cb-ic .w{fill:#fff}
.cb-ic .s{fill:#E4DFD9;stroke:none}
.cb-ic .so{fill:#E4DFD9}
.cb-ic .tn{fill:#C2C5CC;stroke:none}
.cb-ic .wn{fill:#fff;stroke:none}
.cb-ic .c{fill:#FA5478;stroke:#C43A5C}
.cb-ic .dc{stroke:#C43A5C}
.cb-ic .ik{fill:#232834;stroke:none}
.cb-ic .tk{stroke:#C2C5CC}
.cb-ic .a{transform-box:fill-box;opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--d),opacity .5s cubic-bezier(.65,0,.35,1) var(--d)}
.v9-rv.in .cb-ic .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cb-ic .a{opacity:1;transform:none;transition:none}}

/* ---------- clients: a wall of twelve cells; one cell swaps its logo at a time (out, then in), the rest hold still ---------- */
.ai-clients{border-top:1px solid #E4DFD9}
.ai-clients-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;flex-wrap:wrap;margin-bottom:44px}
.ai-clients-head .v9-sub{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:#4f5565}
.ai-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #E4DFD9;border-left:1px solid #E4DFD9}
.ai-lg{position:relative;height:120px;border-right:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9;overflow:hidden}
.ai-lg img{position:absolute;inset:0;margin:auto;display:block;width:min(170px,90%);height:auto;filter:grayscale(1) opacity(.62);opacity:0;transition:opacity .9s cubic-bezier(.65,0,.35,1),filter .3s ease}
.ai-lg img.on{opacity:1}
@media (hover:hover){.ai-lg:hover img{filter:none}}
@media (max-width:820px){.ai-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.ai-lg{height:96px}.ai-clients-head{margin-bottom:32px}}
@media (prefers-reduced-motion:reduce){.ai-lg img{transition:none}}
/* this page's heading and line sit centred over the wall; the heading is balanced so no line holds one word alone */
.lm-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.lm-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.lm-clients-head .v9-sub{margin:0;max-width:520px;font-size:18px;line-height:1.6;color:#4f5565;text-align:center;text-wrap:balance}
@media (max-width:820px){.lm-clients-head{margin-bottom:32px}}
@media (max-width:560px){.lm-clients-head .v9-sub{font-size:17px}}

/* ---------- the email form from 821px up: the field and the button share one row at the same width and height, 262px
   each ("Book a 20-minute call" needs 255px). The button keeps that width while sending, so nothing shifts; a closing
   form centres the pair ---------- */
@media (min-width:821px){
.v9 .em-talk .v9-hero-form{display:grid;grid-template-columns:repeat(2,262px);gap:10px;justify-content:start}
.v9.em-cta .em-talk .v9-hero-form{justify-content:center}
.v9 .em-talk .v9-hero-form .em-email,.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%;min-width:0}
.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{padding:0 16px}
}
/* ---------- the email form on phones and small tablets: the field and the button are always the same size. Up to 560px
   they stack at the full width; from 561px to 820px they share one row in equal halves, 560px at most. The button keeps
   its size while sending, so the pair never shifts, and the closing form stays centred ---------- */
@media (max-width:820px){
.v9 .em-talk{justify-items:stretch}
.v9.em-cta .em-talk{width:100%;max-width:560px}
.v9.em-cta .em-talk-done{justify-content:center}
.v9 .em-talk .v9-hero-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:560px}
.v9 .em-talk .v9-hero-form .em-email,.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%;min-width:0}
.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{padding:0 16px}
}
@media (max-width:560px){
.v9 .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr)}
}


/* ================= LEGACY MODERNISATION (this page's own) ================= */

/* ---------- this page's hero. The eyebrow, then a headline that holds two lines at every width. Each option is sized from
   its own longer line, measured in Sailec Bold at -.03em (A "renewed with care" 8.46em; B "Modern foundations," 9.66em;
   C "modern foundations" 9.41em; D "without starting over" 9.57em; E "Keep what works," 8.12em): up to 1100px it is set
   from the viewport, so the longer line takes 92% of the column at most (56px at the largest); from 1101px, where the copy
   column is 560px, A and E run from 52px to 58px (A then takes 88% of the column) and B, C and D, the longest, from 48px
   to 53px or 54px (91% at most). The form is sized as CLAUDE.md sets it for heroes: "Book a call" at 172px beside a 262px
   field, stacked at full width on phones ---------- */
.v9-hero.lm-hero h1.lm-h-a{font-size:min(56px,calc((100vw - 44px) / 9.2))}
.v9-hero.lm-hero h1.lm-h-b{font-size:min(56px,calc((100vw - 44px) / 10.5))}
.v9-hero.lm-hero h1.lm-h-c{font-size:min(56px,calc((100vw - 44px) / 10.3))}
.v9-hero.lm-hero h1.lm-h-d{font-size:min(56px,calc((100vw - 44px) / 10.5))}
.v9-hero.lm-hero h1.lm-h-e{font-size:min(56px,calc((100vw - 44px) / 8.9))}
@media (min-width:821px){.v9.lm-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.lm-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.lm-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.lm-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.lm-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.lm-hero h1.lm-h-a,.v9-hero.lm-hero h1.lm-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.lm-hero h1.lm-h-b,.v9-hero.lm-hero h1.lm-h-d{font-size:clamp(48px,4vw,53px)}
.v9-hero.lm-hero h1.lm-h-c{font-size:clamp(48px,4vw,54px)}
.v9-hero.lm-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.lm-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1480, and the box keeps that shape reserved while it loads */
.lm-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view, as on the sister pages: on desktop the hero's top space follows the window's height, so the headline, form
   and drawing hold the middle of the first view and the client wall still shows below */
.v9-hero.lm-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.lm-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.lm-hero{padding:28px 0 48px}}

/* ---------- when software gets hard to change: the copy, and one change request with the parts it turns out to touch traced
   beneath it, each found through the one before: a staircase of cards on tint elbows, so the trace reads down and in. The
   request is a bone card with an ink outline; the parts are white cards with a tint outline. The monthly report nobody owns is
   the section's one coral part: once the trace has arrived, its outline and its tag warm to coral (the tag's #d33d5c on white
   holds 4.6:1). A still drawing: the cards ease in once, one after another, with the section. Side by side from 1024px, stacked
   below (the drawing 640px at most); up to 560px the staircase becomes one spine, so no card is squeezed. Each elbow drops from
   the card above at half an indent, inside its straight edge (the indent is at least twice the corner radius) ---------- */
.lm-hard{border-top:1px solid #E4DFD9}
.lm-hard-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;align-items:center}
.lm-hard-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .lm-hard-copy p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-hard-copy p + p{margin-top:16px}
.lm-trace{--i:clamp(40px,3.6vw,48px);--g:18px;--e:.35s;margin:0}
.lm-tr-req{position:relative;display:grid;gap:6px;padding:20px 24px 22px;border:1.5px solid #232834;border-radius:20px;background:#F1EEEA}
.lm-tr-k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.lm-tr-t{font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .lm-tr-list{display:grid;gap:var(--g);margin:var(--g) 0 0;padding:0;list-style:none}
.v9 .lm-tr-list li{--d:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px;margin:0 0 0 calc(var(--d) * var(--i));padding:15px 20px 16px;border:1.5px solid #C2C5CC;border-radius:16px;background:#fff;opacity:0;transform:translateY(6px);transition:opacity .6s cubic-bezier(.2,.7,.2,1) calc(var(--e) + var(--d) * .2s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--e) + var(--d) * .2s),border-color .5s cubic-bezier(.65,0,.35,1) calc(var(--e) + var(--d) * .2s + .7s)}
.v9 .lm-tr-list li:nth-child(2){--d:2}
.v9 .lm-tr-list li:nth-child(3){--d:3}
.v9 .lm-tr-list li:nth-child(4){--d:4}
.lm-trace.in .lm-tr-list li{opacity:1;transform:none}
.lm-tr-list li::before{content:"";position:absolute;left:calc(-1.5px - var(--i) / 2);top:calc(-1.5px - var(--g));width:calc(var(--i) / 2);height:calc(var(--g) + 30px);box-sizing:border-box;border-left:2px solid #C2C5CC;border-bottom:2px solid #C2C5CC;border-bottom-left-radius:12px}
.lm-tr-n{grid-column:1;font-weight:700;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:#232834}
.lm-tr-w{grid-column:1;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.lm-tr-tag{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1.5px solid #C2C5CC;border-radius:15px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#4f5565;white-space:nowrap;transition:color .5s cubic-bezier(.65,0,.35,1) calc(var(--e) + 1.5s),border-color .5s cubic-bezier(.65,0,.35,1) calc(var(--e) + 1.5s)}
.lm-trace.in .lm-tr-list li.k-owner{border-color:#FA5478}
.lm-trace.in .lm-tr-tag{border-color:#FA5478;color:#d33d5c}
@media (max-width:1023px){.lm-hard-grid{grid-template-columns:minmax(0,1fr)}.lm-trace{--i:44px;max-width:640px}}
@media (max-width:560px){
.v9 .lm-hard-copy p{font-size:17px}
.lm-trace{--i:36px;--g:14px}
.lm-tr-req{padding:16px 18px 18px;border-radius:16px}
.lm-tr-t{font-size:19px}
.v9 .lm-tr-list li,.v9 .lm-tr-list li:nth-child(n){margin-left:var(--i);grid-template-columns:minmax(0,1fr);padding:13px 16px 14px}
.lm-tr-list li:not(:last-child)::after{content:"";position:absolute;left:calc(-1.5px - var(--i) / 2);top:28px;bottom:calc(-1.5px - var(--g));border-left:2px solid #C2C5CC}
.lm-tr-n{font-size:17px}
.lm-tr-tag{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.v9 .lm-tr-list li,.lm-tr-tag{opacity:1;transform:none;transition:none}}

/* ---------- first, learn what it really does: one rule found in the code, read three ways in one card, one band above the
   next: the old code on ink, the rule in plain words (the section's one coral part: #d33d5c holds 4.6:1 on white, set at 22px
   bold), and the test that now keeps it, on bone, with its status. Code and test are set in Sailec, as on the sister pages; the
   code is neutral pseudo-code, with no recognisable language until the technologies are confirmed. The card arrives with the
   section, and only the status's check draws in, once. The drawing sits left of the copy from 1024px (the section above has it
   on the right), and follows the copy below that, 640px at most. Code lines wrap with a hanging indent rather than scroll, and
   stay at 15px or more. The copy's last sentence (taking over another supplier's system) stays hidden until it is confirmed ---------- */
.lm-learn{border-top:1px solid #E4DFD9}
.lm-learn-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.lm-learn-copy{grid-column:2;grid-row:1}
.lm-learn-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .lm-learn-copy p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-learn-copy p + p{margin-top:16px}
.lm-rule{grid-column:1;grid-row:1;max-width:620px;margin:0;border:1.5px solid #232834;border-radius:20px;overflow:hidden;background:#fff}
.lm-rule-b{display:grid;justify-items:start;gap:12px;padding:22px 26px 24px}
.lm-rule-k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.lm-rule-code{background:#232834}
.lm-rule-code .lm-rule-k{color:#C2C5CC}
.lm-rule-c{display:grid;gap:2px;font-weight:500;font-size:16px;line-height:1.6;color:#C2C5CC}
.lm-rule-c span{display:block;overflow-wrap:anywhere}
.lm-rule-c .l0{padding-left:1.5em;text-indent:-1.5em}
.lm-rule-c .l1{padding-left:3em;text-indent:-1.5em}
.lm-rule-c b{font-weight:500;color:#F1EEEA}
.v9 .lm-rule-s{margin:0;font-weight:700;font-size:22px;line-height:1.35;letter-spacing:-.015em;color:#d33d5c;text-wrap:balance}
.lm-rule-test{border-top:1.5px solid #232834;background:#F1EEEA}
.v9 .lm-rule-t{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.v9 .lm-rule-t li{margin:0;padding-left:3.9em;text-indent:-3.9em;font-weight:500;font-size:16px;line-height:1.55;color:#3a3f4b}
.lm-rule-t b{display:inline-block;width:3.9em;text-indent:0;font-weight:700;color:#232834}
.lm-rule-pass{display:inline-flex;align-items:center;gap:8px;margin-top:4px;height:30px;padding:0 12px 0 8px;border:1.5px solid #232834;border-radius:15px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#232834;white-space:nowrap}
.v9 .lm-rule-pass svg{flex:none;width:16px;height:16px;stroke:#232834;stroke-width:2.6;fill:none;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1) .9s}
.lm-rule.in .lm-rule-pass svg{stroke-dashoffset:0}
@media (max-width:1023px){.lm-learn-grid{grid-template-columns:minmax(0,1fr)}.lm-learn-copy,.lm-rule{grid-column:1;grid-row:auto}.lm-rule{max-width:640px}}
@media (max-width:560px){
.v9 .lm-learn-copy p{font-size:17px}
.lm-rule{border-radius:16px}
.lm-rule-b{padding:18px 18px 20px}
.lm-rule-c{font-size:15px}
.v9 .lm-rule-s{font-size:20px}
.v9 .lm-rule-t li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.v9 .lm-rule-pass svg{stroke-dashoffset:0;transition:none}}

/* ---------- the right move for each part: the page's one interactive section. The moves as a list, each its own anchor
   (#keep, #move, #improve, #replace, #product, #retire), beside one example system drawn as a plan: one ink boundary divided
   by tint walls into its parts, each part with the move it gets. With nothing chosen, every part shows its move, so the
   section reads without any interaction. Choosing a move (a toggle button: click, tap, or Enter and Space from the keyboard,
   with a visible focus ring) marks its parts in blush with a coral tag, and the other parts quieten to grey type that still
   holds 4.8:1; choosing it again clears the choice. Nothing moves or resizes, so the section holds its height, and the choice
   is announced to screen readers. A link to a move's anchor opens with that move chosen. The list and the plan sit side by side
   from 1180px; below that the plan comes first (760px at most) and the list follows, two across from 768px; up to 599px the
   plan becomes a list of parts, each with its move. No icons, so no hover Lotties. The moves aren't confirmed yet, so the
   section and every move stay hidden in place; the showUnconfirmed tweak lays them out for review, tagged To confirm ---------- */
.lm-moves{border-top:1px solid #E4DFD9}
.lm-moves-head{max-width:720px}
.lm-moves-head .v9-h2{text-wrap:balance}
.lm-moves-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.v9 .lm-mv-list{margin:0;padding:0;list-style:none;border-top:1px solid #E4DFD9}
.v9 .lm-mv-list li{position:relative;margin:0;padding:18px 0 20px 36px;border-bottom:1px solid #E4DFD9;scroll-margin-top:32px}
.v9 .lm-mv-list h3{margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.lm-mv-list button{appearance:none;display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.lm-mv-list button::after{content:"";position:absolute;inset:0;border-radius:6px}
.lm-mv-list button:focus-visible{outline:none}
.lm-mv-list button:focus-visible::after{outline:2px solid #232834;outline-offset:-2px}
.lm-mv-dot{position:absolute;left:2px;top:23px;box-sizing:border-box;width:18px;height:18px;border:2px solid #C2C5CC;border-radius:50%;background:#fff;transition:background-color .3s cubic-bezier(.65,0,.35,1),border-color .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.lm-mv-list li:hover .lm-mv-dot{border-color:#232834}}
.lm-mv-list li.on .lm-mv-dot{border-color:#C43A5C;background:#FA5478}
.v9 .lm-mv-list p{margin:0;max-width:520px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.lm-plan{order:-1;margin:0;max-width:760px}
.lm-plan-k{display:block;margin:0 0 12px;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.v9 .lm-plan-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.5px;margin:0;padding:0;list-style:none;border:1.5px solid #232834;border-radius:20px;overflow:hidden;background:#C2C5CC}
.v9 .lm-pp{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:132px;margin:0;padding:18px;background:#fff;transition:background-color .35s cubic-bezier(.65,0,.35,1)}
.v9 .lm-pp.w3{grid-column:span 3}
.lm-pp b{font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance;transition:color .35s cubic-bezier(.65,0,.35,1)}
.lm-pp-m{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;box-sizing:border-box;border:1.5px solid #F1EEEA;border-radius:15px;background:#F1EEEA;font-weight:700;font-size:14px;line-height:1.3;color:#3a3f4b;transition:color .35s cubic-bezier(.65,0,.35,1),background-color .35s cubic-bezier(.65,0,.35,1),border-color .35s cubic-bezier(.65,0,.35,1)}
.lm-plan-g.has-pick .lm-pp.off b{color:#6B7180}
.lm-plan-g.has-pick .lm-pp.off .lm-pp-m{border-color:#E4DFD9;background:#fff;color:#6B7180}
.v9 .lm-plan-g.has-pick .lm-pp.on{background:#FDE0E6}
.lm-plan-g.has-pick .lm-pp.on .lm-pp-m{border-color:#FA5478;background:#fff;color:#d33d5c}
.v9 .lm-moves-close{margin:44px 0 0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.lm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:768px) and (max-width:1179px){.v9 .lm-mv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1180px){.lm-moves-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}.lm-plan{order:0;max-width:none}}
@media (max-width:599px){
.v9 .lm-plan-g{grid-template-columns:minmax(0,1fr);border-radius:16px}
.v9 .lm-pp,.v9 .lm-pp.w3{grid-column:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:0;padding:14px 16px}
.v9 .lm-mv-list li{padding:16px 0 18px 32px}
.lm-mv-dot{top:20px}
.v9 .lm-mv-list h3{font-size:19px}
.v9 .lm-moves-close{margin-top:36px;font-size:17px}
.lm-moves-head .v9-sub{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.lm-mv-dot,.v9 .lm-pp,.lm-pp b,.lm-pp-m{transition:none}}
.v9.lm-moves.lm-review{display:block!important}
.v9.lm-moves.lm-review .lm-mv-list [data-confirm]{display:block!important}
.lm-moves.lm-review .lm-moves-head .v9-h2::after,.lm-moves.lm-review [data-confirm] .lm-mv-n::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.02em;color:#4f5565;vertical-align:middle}

/* ---------- piece by piece, with the old system running: the routing table, set as the layer in front would be configured
   for an orders system. A row per part: its name, where its requests go (Old or New, the current one filled: old in shade
   with a tint outline, new in white with an ink outline, as in the hero) and its status. The moved rows can move back.
   Once the table is well in view (startRoute()), the delivery dates row moves across once: the page's second and last soft
   coral line runs along its track from Old to New and is gone, its destination changes and "Can move back" takes the place of
   "Not moved yet"; then it holds. Both states hold their space, so the row never changes height. With reduced motion it is
   simply shown moved. The table sits beside the four points from 1180px; below that the table comes first (760px at most) and
   the points follow, two across from 768px. Up to 640px each row stacks: the part, where its requests go, then its status.
   "Old and new, compared" and the "Results match" chips offer a service still to be confirmed, so they stay hidden; the
   showUnconfirmed tweak shows them, tagged To confirm ---------- */
.lm-piece{border-top:1px solid #E4DFD9}
.lm-piece-head{max-width:760px}
.lm-piece-head .v9-h2{text-wrap:balance}
.lm-piece-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.lm-route{--sw:0s;margin:0;max-width:760px}
.lm-route.go{--sw:1.8s}
.lm-rt-k{display:block;margin:0 0 12px;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.lm-rt{border:1.5px solid #232834;border-radius:20px;overflow:hidden;background:#fff}
.lm-rt-h,.lm-rt-r{display:grid;grid-template-columns:minmax(0,1.1fr) 200px minmax(0,1fr);column-gap:20px;align-items:center;padding:0 22px}
.lm-rt-h{min-height:46px;border-bottom:1.5px solid #232834;background:#F1EEEA;font-weight:700;font-size:13px;line-height:1.3;color:#4f5565}
.lm-rt-r{min-height:68px;padding-top:12px;padding-bottom:12px}
.lm-rt-r + .lm-rt-r{border-top:1px solid #E4DFD9}
.lm-rt-p{font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.01em;color:#232834}
.lm-rt-to{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.lm-rt-o,.lm-rt-n{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:52px;padding:0 12px;box-sizing:border-box;border:1.5px solid #E4DFD9;border-radius:15px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#6B7180;transition:border-color .45s cubic-bezier(.65,0,.35,1) var(--sw),background-color .45s cubic-bezier(.65,0,.35,1) var(--sw),color .45s cubic-bezier(.65,0,.35,1) var(--sw)}
.k-old .lm-rt-o,.k-move .lm-rt-o{border-color:#C2C5CC;background:#E4DFD9;color:#232834}
.k-new .lm-rt-n,.lm-route.go .k-move .lm-rt-n{border-color:#232834;background:#fff;color:#232834}
.lm-route.go .k-move .lm-rt-o{border-color:#E4DFD9;background:#fff;color:#6B7180}
.lm-rt-tk{position:relative;height:10px;overflow:hidden}
.lm-rt-tk::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;border-radius:1px;background:#C2C5CC}
.lm-rt-fl{position:absolute;left:-45%;top:3px;width:45%;height:4px;border-radius:2px;background:#FA5478;opacity:0}
.lm-route.go .lm-rt-fl{animation:lmRtFlow 1.3s cubic-bezier(.65,0,.35,1) .6s 1 both}
@keyframes lmRtFlow{0%{left:-45%;opacity:0}15%{opacity:.6}85%{opacity:.6}100%{left:100%;opacity:0}}
.lm-rt-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lm-rt-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:14px;background:#F1EEEA;font-weight:700;font-size:13px;line-height:1;color:#232834;white-space:nowrap}
.lm-rt-no{font-weight:500;font-size:14px;line-height:1.4;color:#6B7180;white-space:nowrap}
.lm-rt-sw{display:inline-grid;align-items:center}
.lm-rt-sw > *{grid-area:1/1;justify-self:start}
.k-move .k-back{opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.lm-route.go .k-move .k-back{opacity:1;transition-delay:2.15s}
.k-move .lm-rt-no{transition:opacity .35s cubic-bezier(.65,0,.35,1)}
.lm-route.go .k-move .lm-rt-no{opacity:0;transition-delay:1.8s}
.v9 .lm-pts{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.v9 .lm-pts li{margin:0}
.v9 .lm-pts h3{margin:0 0 6px;font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .lm-pts p{margin:0;max-width:520px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-piece-pts .lm-go{margin-top:28px}
@media (min-width:768px) and (max-width:1179px){.v9 .lm-pts{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}}
@media (min-width:1180px){.lm-piece-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}.lm-route{max-width:none}}
@media (max-width:640px){
.lm-rt-h{display:none}
.lm-rt{border-radius:16px}
.lm-rt-h,.lm-rt-r{padding:0 16px}
.lm-rt-r{grid-template-columns:minmax(0,1fr);row-gap:10px;padding-top:14px;padding-bottom:16px}
.lm-rt-to{max-width:280px}
}
@media (max-width:560px){.lm-piece-head .v9-sub{font-size:17px}.v9 .lm-pts h3{font-size:18px}}
@media (prefers-reduced-motion:reduce){.lm-rt-fl{display:none}.lm-rt-o,.lm-rt-n,.k-move .k-back,.k-move .lm-rt-no{transition:none}}
.lm-piece.lm-review .lm-pts li[data-confirm]{display:block!important}
.lm-piece.lm-review .lm-rt-chip[data-confirm]{display:inline-flex!important;outline:1.5px dashed #C2C5CC;outline-offset:2px}
.lm-piece.lm-review .lm-pts li[data-confirm] h3::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.02em;color:#4f5565;vertical-align:middle}

/* ---------- ready for the day you switch: the copy and its points on the left; on the right a cutover run sheet for the same
   orders system as the routing table: the steps in order, each with when it happens (in days, never clock times) and who owns
   it, and the point of no return as the section's one coral part, a rule across the sheet with its tag (#d33d5c on white,
   4.6:1). Each point's name tags the row it belongs to, under the row's day, so the steps stay short. The sheet is set as a printed document (a tint outline and small
   corners, not an ink card), so it doesn't repeat the routing table above; it has no ticks and nothing completes in turn. A
   still drawing: it eases in with the section. Side by side from 1180px, stacked below (the sheet 760px at most); up to 640px
   each step stacks over its owner, and the rule keeps the sheet's full width. Rehearsed and Supported, with their rows, offer
   services still to be confirmed, so they stay hidden; the showUnconfirmed tweak shows them, tagged To confirm ---------- */
.lm-switch{border-top:1px solid #E4DFD9}
.lm-switch-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.lm-switch-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .lm-switch-copy > p{margin:0;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-sw-pts{display:grid;gap:22px;margin:32px 0 0;padding:0;list-style:none}
.v9 .lm-sw-pts li{margin:0}
.v9 .lm-sw-pts h3{margin:0 0 4px;font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.015em;color:#232834}
.v9 .lm-sw-pts p{margin:0;max-width:520px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.lm-rs{margin:0;max-width:760px;border:1.5px solid #C2C5CC;border-radius:10px;background:#fff}
.lm-rs-top{display:grid;gap:4px;padding:20px 24px 18px;border-bottom:1.5px solid #C2C5CC}
.lm-rs-k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.lm-rs-t{font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.015em;color:#232834}
.lm-rs-h,.v9 .lm-rs-list li{display:grid;grid-template-columns:124px minmax(0,1fr) 150px;column-gap:18px;align-items:baseline;padding:0 24px}
.lm-rs-h{padding-top:12px;padding-bottom:10px;border-bottom:1px solid #E4DFD9;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#6B7180}
.v9 .lm-rs-list{margin:0;padding:0;list-style:none}
.v9 .lm-rs-list li{margin:0;padding-top:14px;padding-bottom:15px;border-bottom:1px solid #E4DFD9}
.v9 .lm-rs-list li:last-child{border-bottom:0}
.lm-rs-w{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-weight:700;font-size:14px;line-height:1.55;color:#3a3f4b}
.lm-rs-s{font-weight:500;font-size:16px;line-height:1.5;color:#232834;text-wrap:pretty}
.lm-rs-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;background:#F1EEEA;font-weight:700;font-size:12.5px;line-height:1;letter-spacing:0;color:#3a3f4b;white-space:nowrap}
.lm-rs-o{font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.lm-rs-ol{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v9 .lm-rs-list li.lm-rs-pnr{position:relative;display:flex;align-items:center;min-height:48px;padding-top:0;padding-bottom:0}
.lm-rs-pnr::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#FA5478}
.lm-rs-pt{position:relative;display:inline-flex;align-items:center;height:28px;padding:0 12px;box-sizing:border-box;border:1.5px solid #FA5478;border-radius:14px;background:#fff;font-weight:700;font-size:13px;line-height:1;color:#d33d5c;white-space:nowrap}
@media (min-width:1180px){.lm-switch-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}.lm-rs{max-width:none}}
@media (max-width:640px){
.lm-rs-h{display:none}
.lm-rs-top{padding:16px 18px 14px}
.v9 .lm-rs-list li{grid-template-columns:minmax(0,1fr);row-gap:4px;padding:13px 18px 14px}
.v9 .lm-rs-list li.lm-rs-pnr{padding:0 18px}
.lm-rs-ol{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-weight:700;color:#3a3f4b}
.lm-rs-w{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;letter-spacing:.04em}
.lm-rs-o{font-size:16px}
}
@media (max-width:560px){.v9 .lm-switch-copy > p{font-size:17px}.v9 .lm-sw-pts h3{font-size:18px}}
.lm-switch.lm-review .lm-sw-pts li[data-confirm]{display:block!important}
.lm-switch.lm-review .lm-rs-list li[data-confirm]{display:grid!important}
.lm-switch.lm-review .lm-sw-pts li[data-confirm] h3::after,.lm-switch.lm-review .lm-rs-list li[data-confirm] .lm-rs-w::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.02em;color:#4f5565;vertical-align:middle}
.lm-switch.lm-review .lm-rs-list li[data-confirm] .lm-rs-w::after{margin-left:0;outline:1.5px dashed #C2C5CC}

/* ---------- where AI helps, and where people decide: the page's one bone band and its quietest section. The heading on the
   left and the copy on the right from 1024px, in equal columns so the heading holds two lines (stacked below), with its links as the family's text links: the two services in
   one wrapping line, the article on its own line under them. No rows, cards or drawing (Web & App Development's AI band uses
   link rows). Body text is #4f5565 on bone (6.5:1). Using AI tools on old code, with engineers reviewing everything they
   produce, isn't confirmed yet, so the whole section stays hidden in place; the showUnconfirmed tweak lays it out for review,
   tagged To confirm ---------- */
.lm-ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 72px;align-items:start}
.lm-ai-h{margin:0;text-wrap:balance}
.v9 .lm-ai-copy p{margin:0;max-width:620px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-ai-copy p + p{margin-top:16px}
.lm-ai-links{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:22px}
.v9 .lm-ai-links .lm-go{margin-top:0}
.v9 .lm-ai-read{margin-top:2px}
@media (max-width:1023px){.lm-ai-grid{grid-template-columns:minmax(0,1fr)}.lm-ai-h{max-width:640px}}
@media (max-width:560px){.v9 .lm-ai-copy p{font-size:17px}.lm-ai-links{gap:0 24px}}
.v9.lm-ai.lm-review{display:block!important}
.lm-ai.lm-review .lm-ai-h::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#fff;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.02em;color:#4f5565;vertical-align:middle}

/* ---------- our work: each project told by what was modernised, part by part, in the page's own words for the moves. One
   project per block, stacked in one column: its name (linked to its case study on Our Work) and sector, then each part it
   changed as a bone tag, the move over the part, then its one-line description from work-projects.js word for word. No screens
   (they are design visuals, not the delivered products), and concepts never appear. Not a two-column register of sentences
   (Systems & API Integration) nor one decision per project (UI/UX). Projects are added only as you confirm them, so the section
   stays hidden in place; the showUnconfirmed tweak lays it out with a layout specimen, tagged To confirm ---------- */
.lm-work{border-top:1px solid #E4DFD9}
.lm-work-h{margin:0 0 40px}
.v9 .lm-cases{display:grid;gap:20px;max-width:920px;margin:0;padding:0;list-style:none}
.v9 .lm-case{display:grid;gap:16px;margin:0;padding:26px 28px 28px;border:1.5px solid #E4DFD9;border-radius:20px;background:#fff}
.lm-case-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.v9 .lm-case-id h3{margin:0;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.02em}
.v9 .lm-case-id h3 a{display:inline-block;padding:9px 0;margin:-9px 0;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .lm-case-id h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .lm-case-id h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.lm-case-s{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.v9 .lm-case-parts{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.v9 .lm-case-parts li{display:grid;gap:2px;margin:0;padding:10px 14px 11px;border-radius:12px;background:#F1EEEA}
.lm-case-mv{font-weight:700;font-size:13px;line-height:1.35;color:#4f5565}
.lm-case-pt{font-weight:500;font-size:16px;line-height:1.4;color:#232834}
.v9 .lm-case-l{margin:0;max-width:680px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-work-more{margin-top:32px}
@media (max-width:560px){.v9 .lm-case{padding:20px 18px 22px;border-radius:16px}.v9 .lm-case-id h3{font-size:21px}.v9 .lm-case-parts li{flex:1 1 100%}}
.v9.lm-work.lm-review{display:block!important}
.lm-work.lm-review .lm-work-h::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.02em;color:#4f5565;vertical-align:middle}
.v9 .lm-case.lm-case-spec{position:relative;border-style:dashed;border-color:#C2C5CC}
.lm-case-spec::before{content:"Layout specimen";position:absolute;right:20px;top:-11px;padding:0 8px;background:#fff;font-weight:700;font-size:11.5px;line-height:22px;letter-spacing:.14em;text-transform:uppercase;color:#6B7180}

/* ---------- so it doesn't become legacy again: the copy and its link, beside one quiet drawing from its words: what the team
   is handed at the end. One folder for the same orders system as the routing table and the run sheet, with a divider for each
   thing it is left with (tests, deployment, monitoring and documentation, in the copy's order), each divider's tab set a
   step lower and further along, so every label reads. The folder's front is a bone card with an ink outline (radius 20);
   its "For your team" tag is the section's one coral part (#d33d5c on white, 4.6:1). The dividers settle into the folder
   once, one after another, with the section, drifting about 6px; then it holds. Not a release history or a provider's notice.
   The drawing sits left of the copy from 1024px and follows it below, 560px at most; on phones the tabs narrow so all four
   stay inside the folder. The copy's last sentence of its first paragraph (looking after the system afterwards) stays hidden
   until that service is confirmed; the showUnconfirmed tweak shows it, outlined ---------- */
.lm-again{border-top:1px solid #E4DFD9}
.lm-again-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.lm-again-copy{grid-column:2;grid-row:1}
.lm-again-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .lm-again-copy p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .lm-again-copy p + p{margin-top:16px}
.lm-hand{--st:44px;--th:36px;--tw:142px;--in:14px;--ti:18px;grid-column:1;grid-row:1;width:100%;max-width:560px;margin:0}
.lm-hd{display:grid;padding-top:var(--th)}
.lm-hd > *{grid-area:1/1}
.lm-hd-sh{position:relative;margin:0 var(--in) 28px;box-sizing:border-box;border:1.5px solid #232834;border-radius:14px;background:#fff;opacity:0;transform:translateY(-6px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.lm-hd-sh:nth-child(2){margin-top:var(--st);transition-delay:.15s}
.lm-hd-sh:nth-child(3){margin-top:calc(2 * var(--st));transition-delay:.3s}
.lm-hd-sh:nth-child(4){margin-top:calc(3 * var(--st));transition-delay:.45s}
.lm-hand.in .lm-hd-sh{opacity:1;transform:none}
.lm-hd-tab{position:absolute;bottom:100%;left:var(--ti);display:flex;align-items:center;justify-content:center;width:var(--tw);height:var(--th);box-sizing:border-box;border:1.5px solid #232834;border-bottom:0;border-radius:10px 10px 0 0;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#232834;white-space:nowrap}
.lm-hd-sh:nth-child(2) .lm-hd-tab{left:calc(var(--ti) + (100% - 2 * var(--ti) - var(--tw)) / 3)}
.lm-hd-sh:nth-child(3) .lm-hd-tab{left:calc(var(--ti) + 2 * (100% - 2 * var(--ti) - var(--tw)) / 3)}
.lm-hd-sh:nth-child(4) .lm-hd-tab{left:calc(100% - var(--ti) - var(--tw))}
.lm-hd-front{position:relative;margin-top:calc(4 * var(--st));display:grid;justify-items:start;align-content:start;gap:6px;min-height:150px;padding:24px 26px 26px;box-sizing:border-box;border:1.5px solid #232834;border-radius:20px;background:#F1EEEA}
.lm-hd-k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.lm-hd-t{font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.02em;color:#232834}
.lm-hd-for{display:inline-flex;align-items:center;height:30px;margin-top:14px;padding:0 12px;box-sizing:border-box;border:1.5px solid #FA5478;border-radius:15px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#d33d5c;white-space:nowrap}
@media (max-width:1023px){.lm-again-grid{grid-template-columns:minmax(0,1fr)}.lm-again-copy,.lm-hand{grid-column:1;grid-row:auto}}
@media (max-width:560px){
.v9 .lm-again-copy p{font-size:17px}
.lm-hand{--st:40px;--th:32px;--tw:116px;--in:10px;--ti:10px}
.lm-hd-tab{font-size:13px;border-radius:9px 9px 0 0}
.lm-hd-front{min-height:132px;padding:18px 18px 20px;border-radius:16px}
.lm-hd-sh{border-radius:12px;margin-bottom:24px}
.lm-hd-t{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.lm-hd-sh{opacity:1;transform:none;transition:none}}
.lm-again.lm-review .lm-again-opt{display:inline!important;outline:1.5px dashed #C2C5CC;outline-offset:2px}

/* ---------- tap areas and the legacy menu, this page only. The logos in the header and footer are widened to 44px tap areas
   with padding cancelled by margin, so nothing moves. The site's old hidden menu sits off to the side until its script marks
   it loaded; until then it is held to no width, so it can't cause sideways scroll ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ---------- let's build it better: the closing email form, centred, sized and behaving as the hero's at every width. Nothing
   follows it: the header strip's Urgent help? already reaches the urgent help page from every page ---------- */
.lm-cta .v9-h2{text-wrap:balance}
.lm-cta .v9-sub{text-wrap:pretty}