/* All Services, built on Web & App Development (page-web-development-v2.css): its shell, header strip, hero base, buttons, email
   form, reveal, hover icons, client wall 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 (sv-*)
   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}}

/* ---------- 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 */
@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 .sv-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}
.sv-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)}
.sv-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .sv-go:hover{color:#232834}.sv-go:hover .sv-go-l{text-decoration-color:#232834}.sv-go:hover .sv-go-a{transform:translateX(3px)}}
.v9 .sv-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.sv-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 */
.sv-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.sv-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.sv-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){.sv-clients-head{margin-bottom:32px}}
@media (max-width:560px){.sv-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)}
}



/* ================= ALL SERVICES (this page's own) ================= */

/* ---------- hero: the title, the lead and a button, Explore services, down to the directory, on the left (56% of the grid), the drawing on the right
   in its reserved 1920 x 1300 box, the copy centred against it and 80px before the directory. From 1023px to 821px the drawing
   shrinks beside the copy; from 820px down it is left out and never loaded, so the search field shows on the first screen. The
   title holds one line from 1024px: "Software and AI services" measures 11.4em in Sailec Bold at -.03em, so its size follows the
   copy column and stays within 93% of it (about 55px at 1440px); the shorter options run at 56px. Below 1024px it may take two
   lines, and breaks only between "and" and "AI", so no line holds a single word ---------- */
.v9-hero.sv-hero{padding:16px 0 80px}
.v9-hero.sv-hero .v9-hero-grid{grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:48px;align-items:center}
.v9-hero.sv-hero h1{margin:0 0 20px;font-size:56px;white-space:nowrap}
.v9-hero.sv-hero h1.sv-h-a{font-size:min(56px,calc((min(100vw,1360px) - 160px) * .0457))}
@media (max-width:1279px){.v9-hero.sv-hero h1.sv-h-a{font-size:calc((100vw - 128px) * .0457)}}
.v9-hero.sv-hero .v9-lead{max-width:600px;margin:0 0 24px;font-size:20px;line-height:1.6}
.sv-hero .v9-illo{width:100%;max-width:none;margin:0;transform:none;aspect-ratio:1920/1300}
.sv-hero .v9-illo-art > div{position:absolute;inset:0}
.v9 .sv-book{padding:0 26px}
/* text links: coral, bold, underlined on hover and focus, with an arrow that steps forward */
.v9 .sv-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:#d33d5c;text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:5px}
.sv-link-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.v9 .sv-link:hover,.v9 .sv-link:focus-visible{color:#d33d5c;text-decoration-line:underline}
@media (hover:hover){.sv-link:hover .sv-link-a{transform:translateX(3px)}}
.v9 .sv-link:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.sv-link-a{transition:none}}
@media (max-width:1023px){.v9-hero.sv-hero h1,.v9-hero.sv-hero h1.sv-h-a{white-space:normal;font-size:clamp(36px,4.4vw,44px)}}
@media (max-width:820px){
.v9-hero.sv-hero{padding:28px 0 48px}
.v9-hero.sv-hero .v9-hero-grid{grid-template-columns:minmax(0,1fr)}
.sv-hero .v9-illo{display:none}
.v9-hero.sv-hero h1,.v9-hero.sv-hero h1.sv-h-a{font-size:40px}
}
@media (max-width:560px){.v9-hero.sv-hero .v9-lead{font-size:17px}}

/* ---------- the directory, in the reference's proportions: the categories in a 300px panel on the left, a 40px gap, then the
   search field, Good places to start and every category under its heading. Every item is in the page from the first paint;
   choosing a category or searching hides the others with the hidden attribute, and the results fade in over 150ms, without
   moving. The grid row is at least as tall as the panel and its box, so the footer doesn't jump. The panel scrolls with the
   page (sticky doesn't work inside the site's content area). From 1023px down the panel becomes a row of chips under the
   search field, and the box moves to the end of the results ---------- */
.v9.sv-dir{padding:0 0 104px}
.sv-dir-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
.sv-side,.sv-main{min-width:0}
.sv-cats{padding:20px 0;border:1px solid #E4DFD9;border-radius:20px;background:#fff}
.v9 .sv-cats-h{margin:0 0 10px;padding:0 24px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .sv-cat{position:relative;display:flex;align-items:center;width:100%;min-height:44px;margin:0;padding:10px 24px;border:0;border-radius:0;background:none;font:inherit;font-weight:500;font-size:17px;line-height:1.4;color:#232834;text-align:left;cursor:pointer;transition:none}
/* pointing at a category lays a light wash behind it, lighter than the chosen row's bone; the text stays ink */
@media (hover:hover){.v9 .sv-cat:hover{color:#232834;background:#F8F6F4}}
.v9 .sv-cat[aria-pressed="true"],.v9 .sv-cat[aria-pressed="true"]:hover{background:#F1EEEA;font-weight:700}
.v9 .sv-cat[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#FA5478}
.v9 .sv-cat:focus-visible{outline:2px solid #232834;outline-offset:-3px}
/* the box under the panel: on the page's one depth, a 6px blush step, the colour of the buttons' hover step and the Urgent help
   form's, as the featured cards */
.sv-box{display:flex;flex-direction:column;align-items:center;margin:32px 0 0;padding:28px;border:1px solid #232834;border-radius:20px;background:#fff;box-shadow:6px 6px 0 #FBC0CC;text-align:center}
.v9 .sv-box-h{margin:0 0 10px;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.02em;color:#232834;text-align:center;text-wrap:balance}
.v9 .sv-box p{margin:0 0 22px;font-size:17px;line-height:1.55;color:#3a3f4b;text-align:center;text-wrap:balance}
.sv-box-end{display:none}
/* category names: by service by default; with the categoryNames tweak on Goals, the menu's own words */
.sv-ng{display:none}
.sv-goals .sv-ns{display:none}
.sv-goals .sv-ng{display:inline}
/* the search field: 48px and fully rounded like the site's email field; in use, its outline turns ink, with no ring around it */
.sv-search{position:relative}
.v9 .sv-search-ic{position:absolute;left:18px;top:14px;width:20px;height:20px;color:#232834;stroke-width:1.9;pointer-events:none}
.v9 .sv-q{display:block;width:100%;height:48px;margin:0;padding:0 52px 0 48px;border:1px solid #C2C5CC;border-radius:24px;background:#fff;font:inherit;font-weight:500;font-size:16px;color:#232834;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.v9 .sv-q::placeholder{color:#6b7180;opacity:1}
.v9 .sv-q:focus{border-color:#232834;box-shadow:none}
.v9 .sv-q::-webkit-search-cancel-button,.v9 .sv-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.v9 .sv-clear{position:absolute;right:2px;top:2px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:#4f5565;cursor:pointer;transition:color .2s}
.v9 .sv-clear svg{width:14px;height:14px;stroke-width:2}
.v9 .sv-clear:hover{color:#232834}
.v9 .sv-clear:focus-visible{outline:2px solid #232834;outline-offset:-4px}
.sv-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sv-chips{display:none}
/* results: 40px below the search field; the blocks 64px apart, by the column's gap, so while searching the categories holding a
   name match can come first without the spacing changing */
.sv-res{display:flex;flex-direction:column;gap:64px;margin:40px 0 0}
.sv-res.sv-f0{animation:svFadeA .15s linear both}
.sv-res.sv-f1{animation:svFadeB .15s linear both}
@keyframes svFadeA{from{opacity:0}to{opacity:1}}
@keyframes svFadeB{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sv-res.sv-f0,.sv-res.sv-f1{animation:none}}
.sv-res > .sv-so{order:-1}
.v9 .sv-h2{margin:0;font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.02em;color:#232834;text-wrap:balance}
/* Good places to start: three cards sharing one height, each on the blush step */
.v9 .sv-feat .sv-h2{margin:0 0 20px}
.v9 .sv-feat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0 6px 6px 0}
.v9 .sv-feat-row > li{display:flex;min-width:0;margin:0}
.v9 .sv-card{display:flex;flex-direction:column;width:100%;padding:24px;border:1px solid #232834;border-radius:20px;background:#fff;box-shadow:6px 6px 0 #FBC0CC;color:#232834;text-decoration:none}
.sv-card-h{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.v9 .sv-card .cb-ic-box{flex:none;width:32px;height:32px;margin:0}
.v9 .sv-card h3{min-width:0;font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:#232834;transition:color .2s cubic-bezier(.65,0,.35,1)}
.v9 .sv-card p{margin:0;font-size:16px;line-height:1.5;color:#3a3f4b}
.sv-card-f{display:block;margin-top:auto;padding-top:16px;font-size:15px;line-height:1.4;color:#4f5565}
/* each category: its heading over a hairline, then its items three across */
.v9 .sv-sec-h{margin:0 0 28px;padding:0 0 16px;border-bottom:1px solid #E4DFD9}
.v9 .sv-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin:0;padding:0}
.v9 .sv-items > li{min-width:0;margin:0;scroll-margin-top:32px}
/* each card fills its row, so cards with and without a link share one height */
.v9 .sv-items > li:not([hidden]){display:flex;flex-direction:column}
.v9 .sv-items > li > .sv-item{flex:1 0 auto}
.v9 .sv-items > li.sv-nm{order:-1}
.v9 .sv-item{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:start;color:#232834;text-decoration:none;border-radius:12px}
.sv-disc{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #E4DFD9;border-radius:50%;background:#fff;transition:border-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .sv-disc .cb-ic-box{width:28px;height:28px;margin:0}
.v9 .sv-item h3{margin:0;padding-top:1px;font-weight:700;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:#232834;transition:color .2s cubic-bezier(.65,0,.35,1)}
.v9 .sv-item p{margin:4px 0 0;font-size:15px;line-height:1.5;color:#4f5565}
.sv-nw{white-space:nowrap}
.v9 svg.sv-arr{display:inline-block;width:16px;height:16px;margin-left:6px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.v9 .sv-card svg.sv-arr{width:18px;height:18px;margin-left:7px;vertical-align:-2px}
/* hover and keyboard focus: the arrow steps 4px and the disc's border darkens to a mid grey; the text keeps its colour
   and nothing lifts */
@media (hover:hover){
.v9 a.sv-item:hover,.v9 .sv-card:hover{color:#232834}
a.sv-item:hover .sv-arr,.sv-card:hover .sv-arr{transform:translateX(4px)}
a.sv-item:hover .sv-disc{border-color:#8A8F9B}
}
.v9 a.sv-item:focus-visible{outline:2px solid #232834;outline-offset:6px}
.v9 .sv-card:focus-visible{outline:2px solid #232834;outline-offset:4px}
a.sv-item:focus-visible .sv-arr,.sv-card:focus-visible .sv-arr{transform:translateX(4px)}
a.sv-item:focus-visible .sv-disc{border-color:#8A8F9B}
/* a service without a page: the same card, without the link, so no arrow and no change on hover */
.v9 .sv-plain{cursor:default}
/* a platform or technology: its owner's own icon in the disc (art/services/brands), in its own colours, and its type on one line above the name, in a box of one
   fixed height, so the name and line start at the same place in every card of a row. Quiet text, never a badge */
.v9 .sv-disc .sv-logo{display:block;width:28px;height:28px;object-fit:contain}
.v9 .sv-type{display:block;height:20px;margin:0 0 6px;font-weight:500;font-size:13px;line-height:20px;color:#4f5565;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sv-arr,.sv-disc,.v9 .sv-item h3,.v9 .sv-card h3{transition:none}}
/* the icons are drawn whole from the first paint: the directory stays still */
.sv-dir .cb-ic .a{opacity:1;transform:none;transition:none}
/* nothing matches */
.sv-empty{max-width:640px}
.v9 .sv-empty-t{margin:0 0 20px;font-size:18px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.sv-empty-t b{font-weight:700;color:#232834}
.sv-empty-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.v9 button.v9-btn.v9-btn-ghost{color:#232834}
/* review only: with showUnconfirmed on in Tweaks (or ?review in the address), the services not yet confirmed are shown, each
   with a note, and each card without a link gets a thin dashed outline */
.sv-review .sv-items > li[data-unconfirmed]:not([hidden]){display:flex!important}
.sv-review .sv-plain{outline:1px dashed #C2C5CC;outline-offset:6px}
.sv-review .sv-items > li[data-unconfirmed]::before{content:attr(data-unconfirmed);display:block;width:fit-content;max-width:100%;margin:0 0 12px;padding:4px 12px;border-radius:999px;background:#FDE0E6;font-weight:700;font-size:13px;line-height:1.4;color:#232834}
@media (max-width:1023px){
.sv-dir-grid{grid-template-columns:minmax(0,1fr)}
.sv-side{display:none}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.v9 .sv-chip{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 18px;border:1px solid #C2C5CC;border-radius:22px;background:#fff;font:inherit;font-weight:500;font-size:15px;line-height:1.2;color:#232834;cursor:pointer;transition:border-color .2s}
@media (hover:hover){.v9 .sv-chip:hover{color:#232834;background:#F8F6F4}.v9 .sv-chip[aria-pressed="true"]:hover{background:#F1EEEA}}
.v9 .sv-chip[aria-pressed="true"]{border-color:#232834;background:#F1EEEA}
.v9 .sv-chip:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9 .sv-chip[hidden]{display:none}
.sv-res{margin-top:36px}
.v9 .sv-feat-row{grid-template-columns:minmax(0,1fr);max-width:640px}
.v9 .sv-items{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-box-end{display:flex;max-width:520px;margin:64px 0 0}
}
/* from 1024px to 1279px the panel stays, but three across would leave each line under 200px wide: the featured cards stack and the
   items run two across, as from 1023px down */
@media (min-width:1024px) and (max-width:1279px){.v9 .sv-items{grid-template-columns:repeat(2,minmax(0,1fr))}.v9 .sv-feat-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.v9.sv-dir{padding-bottom:72px}}
@media (max-width:560px){.v9 .sv-items{grid-template-columns:minmax(0,1fr);gap:28px}.v9 .sv-item p,.sv-card-f{font-size:16px}.v9 .sv-card{padding:22px}}

/* ---------- work the way the project needs: a full-width bone band. On the left the eyebrow (ink, as small coral text is only about
   4:1 on bone), the headline at the site's h2 size, the line and the button; on the right the drawing, in its reserved 1920 x 1320
   box: a product in the coral frame, outlined three ways in turn. From 1023px down the drawing sits below the copy ---------- */
.sv-band{padding:96px 0}
.sv-band-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:center}
.v9 .sv-band-eb{color:#232834}
.sv-band-copy .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .sv-band-copy p{margin:0 0 32px;max-width:460px;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sv-band-illo{position:relative;width:100%;aspect-ratio:1920/1320}
.sv-band-art{position:absolute;inset:0}
.sv-band-art svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.sv-band + .ai-clients{border-top:0}
@media (max-width:1023px){.sv-band-grid{grid-template-columns:minmax(0,1fr)}.sv-band-illo{max-width:640px}}
@media (max-width:820px){.sv-band{padding:64px 0}}

/* ---------- tap areas and the legacy menu, as on the sister pages. 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 is held to no width until its script
   marks it loaded, 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 do it better: the closing email form, centred, with nothing after it ---------- */
.sv-cta .v9-h2{text-wrap:balance}
.sv-cta .v9-sub{text-wrap:pretty}

/* ================= THE PHONE TYPE SCALE: written 3 October 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .sv-go,.ai-clients-head .v9-sub,.sv-clients-head .v9-sub,.v9 .sv-cat,.v9 .sv-box p,.v9 .sv-empty-t,.v9 .sv-band-copy p{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .sv-item h3{font-size:17px}
.v9-hero.sv-hero h1,.v9-hero.sv-hero h1.sv-h-a{font-size:34px;line-height:1.12}
.v9 .sv-cats-h{font-size:18px}
.v9 .sv-box-h,.v9 .sv-card h3{font-size:20px}
.v9 .sv-h2{font-size:26px;line-height:1.18}
}