/* UI/UX & Product Design, built from Web & App Development (page-web-development-v2.css), itself built on the homepage:
   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 (ux-*) 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 Build something new route and, inside it, its UI/UX & Product Design 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 */
.ux-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 .ux-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}
.ux-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)}
.ux-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ux-go:hover{color:#232834}.ux-go:hover .ux-go-l{text-decoration-color:#232834}.ux-go:hover .ux-go-a{transform:translateX(3px)}}
.v9 .ux-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ux-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 */
.ux-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.ux-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.ux-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){.ux-clients-head{margin-bottom:32px}}
@media (max-width:560px){.ux-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)}
}


/* ================= UI/UX & PRODUCT DESIGN (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 longer line, measured in Sailec Bold at -.03em (the woff2 measured on a canvas): A "and built that way" 8.15em,
   B "Product design" 7.06em, C "Design that carries" 8.71em with the marker that ends it, D "people who use it" 8.10em,
   E "people who build it" 8.83em, F "Design that holds up" 9.48em. Up to 1100px the size follows the viewport, so the longer
   line takes 93% of the column at most (--d is its width over .93), 56px at the largest. From 1101px, where the copy column
   is 560px, it runs from 52px to 58px (F, the longest, from 50px to 54px): 92% of the column at most ---------- */
.v9-hero.ux-hero h1{--d:8.8;font-size:min(56px,calc((100vw - 44px) / var(--d)))}
.v9-hero.ux-hero h1.ux-h-b{--d:7.6}
.v9-hero.ux-hero h1.ux-h-c{--d:9.4}
.v9-hero.ux-hero h1.ux-h-d{--d:8.75}
.v9-hero.ux-hero h1.ux-h-e{--d:9.5}
.v9-hero.ux-hero h1.ux-h-f{--d:10.2}
/* the hero form, as CLAUDE.md sets it: from 821px the field is 262px and the button 172px (as wide as "Book a call" and its
   arrow), from 561px to 820px the field fills the row (560px at most) beside the same button, and below that they stack at
   the full width. The button keeps its width while sending, so nothing shifts */
@media (min-width:821px){.v9.ux-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.ux-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.ux-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.ux-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.ux-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.ux-hero h1{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.ux-hero h1.ux-h-f{font-size:clamp(50px,4.1vw,54px)}
.v9-hero.ux-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin (6%, well inside the gutter at every width) but not into the
   column gap, so the full 48px stays between the copy and the drawing */
.ux-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 */
.ux-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view: 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.ux-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.ux-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.ux-hero{padding:28px 0 48px}}

/* ---------- every state, not only the ideal one. One bookings list, shown in each state a real product spends its time in:
   first use, loading, filled, long content, no results and error. From 1101px the text sits on the left and the list on the
   right; below that they stack. Six toggle buttons (aria-pressed) pick the state, three to a row from 561px and two on
   phones, each 44px tall. The six views share one grid cell, and so do their notes, so the panel is as tall as its tallest
   state at every width and nothing below it moves. The incoming view eases in (opacity and 4px) once the outgoing one has
   gone, so two never show at once. While it loads, the family's short soft coral line flows under the search field along a
   grey track and is gone; with reduced motion it rests. The list's own buttons are part of the sample, not controls ---------- */
.ux-st{border-top:1px solid #E4DFD9}
.ux-st-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ux-st-copy .v9-h2{max-width:560px;text-wrap:balance}
.v9 .ux-st-copy p{margin:18px 0 0;max-width:600px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .ux-st-copy p + p{margin-top:14px}
.ux-st-demo{min-width:0;max-width:760px}
@media (min-width:1101px){
.ux-st-grid{grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:72px;align-items:start}
.ux-st-copy{padding-top:4px}
.ux-st-demo{max-width:none}
}
.ux-st-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.v9 .ux-st-b{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;min-width:0;height:44px;margin:0;padding:0 10px;border:1px solid #C2C5CC;border-radius:12px;background:#fff;color:#232834;font-family:inherit;font-weight:500;font-size:15px;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;transition:background-color .2s cubic-bezier(.65,0,.35,1),border-color .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ux-st-b:hover{border-color:#232834}}
.v9 .ux-st-b:active{background:#F1EEEA}
.v9 .ux-st-b[aria-pressed="true"]{background:#232834;border-color:#232834;color:#fff;cursor:default}
.v9 .ux-st-b:focus-visible{outline:2px solid #232834;outline-offset:3px}
.ux-st-panel{padding:22px 24px 24px;border:1px solid #E4DFD9;border-radius:20px;background:#fff;box-shadow:0 24px 48px -36px rgba(35,40,52,.32)}
.ux-st-views,.ux-st-notes{display:grid}
.ux-st-view,.ux-st-note{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;transform:translateY(4px)}
.ux-st-view.on,.ux-st-note.on{visibility:visible;opacity:1;transform:none;transition:opacity .28s cubic-bezier(.65,0,.35,1),transform .28s cubic-bezier(.65,0,.35,1)}
.ux-st-view{display:flex;flex-direction:column}
.ux-st-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;margin:0 0 16px}
.v9 .ux-st-h{font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.ux-st-new{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid #C2C5CC;border-radius:18px;font-weight:700;font-size:14px;line-height:1;color:#232834}
.ux-st-field{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;padding:0 16px;border:1px solid #C2C5CC;border-radius:12px;font-size:16px;line-height:1.2;color:#232834}
.ux-st-ph{color:#6b7180}
.ux-st-clear{font-size:14px;color:#4f5565;text-decoration:underline;text-decoration-color:#C2C5CC;text-underline-offset:4px}
.ux-st-flow{position:absolute;left:0;right:0;top:calc(100% + 4px);height:3px;border-radius:2px;background:#E4DFD9;overflow:hidden}
.ux-st-flow::after{content:"";position:absolute;top:0;bottom:0;left:0;width:26%;border-radius:2px;background:#FA5478;opacity:.7;transform:translateX(-100%)}
.ux-st-view.on .ux-st-flow::after{animation:uxStFlow 1.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes uxStFlow{from{transform:translateX(-100%)}to{transform:translateX(385%)}}
.ux-st-list{margin:8px 0 0}
.ux-st-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:0 16px;padding:14px 0;border-top:1px solid #E4DFD9;font-size:17px;line-height:1.35}
.ux-st-row:first-child{border-top:0}
.ux-st-day{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:#F1EEEA;font-weight:700;font-size:15px;line-height:1;color:#232834}
.ux-st-main{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;min-width:0}
.ux-st-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-width:0;font-weight:700;font-size:17px;line-height:1.35;color:#232834}
.ux-st-m{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:1.45;color:#4f5565}
.ux-st-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:14px;background:#E4DFD9;font-weight:500;font-size:14px;line-height:1;color:#232834;white-space:nowrap}
.ux-st-chip.wait{background:#fff;box-shadow:inset 0 0 0 1px #C2C5CC;color:#3a3f4b}
.ux-st-sk .ux-st-chip{width:96px;background:#F1EEEA}
.ux-st-ln{display:block;height:12px;margin:6px 0 5px;border-radius:6px;background:#F1EEEA}
.ux-st-ln.s{width:36%;height:10px;margin:6px 0}
.ux-st-sk:nth-child(1) .ux-st-ln:first-child{width:58%}
.ux-st-sk:nth-child(2) .ux-st-ln:first-child{width:44%}
.ux-st-sk:nth-child(3) .ux-st-ln:first-child{width:52%}
.ux-st-sk:nth-child(4) .ux-st-ln:first-child{width:40%}
.ux-st-msg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 8px 20px;text-align:center}
.v9 .ux-st-mt{font-weight:700;font-size:20px;line-height:1.3;color:#232834;text-align:center;text-wrap:balance}
.v9 .ux-st-mx{max-width:380px;font-size:16px;line-height:1.55;color:#4f5565;text-align:center;text-wrap:pretty}
.ux-st-u{font-weight:700;color:#232834;text-decoration:underline;text-decoration-color:#232834;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ux-st-fb{display:inline-flex;align-items:center;height:44px;margin-top:8px;padding:0 22px;border-radius:22px;background:#232834;font-weight:700;font-size:15px;line-height:1;color:#fff}
.ux-st-fb.o{background:#fff;box-shadow:inset 0 0 0 1.5px #232834;color:#232834}
.ux-st-notes{margin:18px 0 0}
.v9 .ux-st-note{font-size:17px;line-height:1.55;color:#4f5565}
.v9 .ux-st-note b{font-weight:700;color:#232834}
.ux-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:560px){
.ux-st-sw{grid-template-columns:repeat(2,minmax(0,1fr))}
.v9 .ux-st-b{font-size:16px}
.v9 .ux-st-copy p{font-size:17px}
.ux-st-panel{padding:18px 16px 16px}
.v9 .ux-st-h{font-size:18px}
.ux-st-row{grid-template-columns:44px minmax(0,1fr);align-items:start;gap:0 14px}
.ux-st-day{width:44px;height:44px;border-radius:10px;font-size:14px}
.ux-st-chip{grid-column:2;justify-self:start;margin-top:8px}
.ux-st-m{font-size:16px}
.ux-st-ln.s{margin:7px 0 6px}
.ux-st-msg{padding:24px 4px 16px}
}
@media (prefers-reduced-motion:reduce){
.ux-st-view,.ux-st-note,.ux-st-view.on,.ux-st-note.on{transform:none;transition:none}
.v9 .ux-st-b{transition:none}
.ux-st-view.on .ux-st-flow::after{animation:none;transform:translateX(140%)}
}

/* ---------- what we design: a plain two-column list of what we do and what you get. Each service is a row with its own anchor:
   its name and what it involves on the left, what the client receives from it on the right, under the two column heads and
   their ink rule. The rows ease in one by one as they reach the screen. Up to 820px each row stacks, and a small "You get"
   label, read out at every width, marks the part the client receives. No count is given anywhere ---------- */
.ux-do{border-top:1px solid #E4DFD9}
.ux-do-heads,.ux-do-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 64px}
.ux-do-heads{padding:0 0 14px;border-bottom:1.5px solid #232834;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ux-do-row{padding:30px 0 32px;border-bottom:1px solid #E4DFD9;scroll-margin-top:32px}
.v9 .ux-do-h{font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .ux-do-p{margin:8px 0 0;max-width:560px;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .ux-do-get{padding-top:1px;font-size:18px;line-height:1.55;color:#232834}
.ux-do-yg{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ux-do-gt{display:block}
.ux-do-gt::first-letter{text-transform:uppercase}
@media (max-width:820px){
.ux-do-heads{display:none}
.ux-do-list{border-top:1.5px solid #232834}
.ux-do-row{grid-template-columns:minmax(0,1fr);padding:26px 0 28px}
.v9 .ux-do-get{margin-top:16px}
.ux-do-yg{position:static;display:block;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
}
@media (max-width:560px){.v9 .ux-do-h{font-size:20px}.v9 .ux-do-get{font-size:17px}}

/* ---------- from research to release: who takes part at each stage. From 961px it is a small matrix: the four stages run down
   the page in the order they happen, each with its title and text in a wide reading column, and the four groups of people run
   across as narrow columns under their names: a filled mark where a group takes part, an empty ring where it doesn't. The
   marks follow the copy word for word. The engineers' column, the section's one coral part, sits on a blush band and is marked
   from the first stage to the last. The marks arrive once, stage by stage, as the matrix reaches the screen. Up to 960px each
   stage is a block of its own, two to a row and one on phones, listing only who takes part ---------- */
.ux-rr{border-top:1px solid #E4DFD9}
.v9 .ux-rr-h{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .ux-rr-p{margin:8px 0 0;max-width:600px;font-size:17px;line-height:1.6;color:#4f5565}
.ux-rr-i{font-size:16px;line-height:1.3;color:#232834}
.ux-rr-mk{flex:none;display:block;width:14px;height:14px;border-radius:50%;background:#232834;opacity:0;transform:scale(.7);transition:opacity .5s cubic-bezier(.2,.7,.2,1) .25s,transform .5s cubic-bezier(.2,.7,.2,1) .25s}
.ux-rr-eng .ux-rr-mk{background:#FA5478;box-shadow:inset 0 0 0 1.5px #C43A5C}
.ux-rr-no .ux-rr-mk{background:#fff;box-shadow:inset 0 0 0 1.5px #C2C5CC}
.v9-rv.in .ux-rr-mk{opacity:1;transform:none}
.ux-rr-stage.c1 .ux-rr-mk{transition-delay:.4s}
.ux-rr-stage.c2 .ux-rr-mk{transition-delay:.55s}
.ux-rr-stage.c3 .ux-rr-mk{transition-delay:.7s}
.ux-rr-lb,.ux-rr-wl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (min-width:961px){
.ux-rr-grid{border-bottom:1px solid #E4DFD9}
.ux-rr-lanes,.ux-rr-stage{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,124px)}
.ux-rr-lanes{align-items:end}
.ux-rr-lanes span{display:block;padding:0 6px 14px;font-size:14px;line-height:1.35;text-align:center;color:#4f5565}
.ux-rr-lanes span.eng{padding-top:14px;border-radius:12px 12px 0 0;background:#FDE0E6;font-weight:700;color:#232834;white-space:nowrap}
.ux-rr-stage{border-top:1px solid #E4DFD9}
.ux-rr-head{padding:26px 40px 28px 0}
.ux-rr-who{grid-column:2/-1;display:grid;grid-template-columns:repeat(4,124px)}
.ux-rr-i{display:flex;align-items:center;justify-content:center}
.ux-rr-eng{background:#FDE0E6}
.ux-rr-stage:last-child .ux-rr-eng{border-radius:0 0 12px 12px}
.ux-rr-mk{width:16px;height:16px}
}
@media (max-width:960px){
.ux-rr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.ux-rr-lanes{display:none}
.ux-rr-stage{padding:28px 0 30px;border-top:1px solid #E4DFD9}
.ux-rr-wl{position:static;display:block;width:auto;height:auto;margin:18px 0 10px;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ux-rr-who{display:flex;flex-wrap:wrap;gap:8px}
.ux-rr-i{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px 0 12px;border:1px solid #E4DFD9;border-radius:18px}
.ux-rr-i.ux-rr-eng{background:#FDE0E6;border-color:#FDE0E6}
.ux-rr-no{display:none}
.ux-rr-mk{width:10px;height:10px}
.ux-rr-lb{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none}
}
@media (max-width:560px){.ux-rr-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ux-rr-mk{opacity:1;transform:none;transition:none}}

/* ---------- a design system your engineers will use: the page's one bone band. Beside the copy, a sample of the documentation a
   design system comes with: a few of this page's own foundations, each with its name, its value and where it is used, on a
   white sheet. Every value is the one this page really uses. Nothing in it is interactive. From 1101px the copy and the sheet
   sit side by side; below that they stack, and on phones each value moves under its name ---------- */
.ux-ds{background:#F1EEEA}
.ux-ds-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1101px){.ux-ds-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}}
.ux-ds-copy .v9-h2{max-width:560px;text-wrap:balance}
.v9 .ux-ds-lead{margin:18px 0 0;max-width:560px;font-size:18px;line-height:1.6;color:#4f5565}
.ux-ds-list{display:grid;gap:12px;margin:26px 0 0;max-width:560px}
.v9 .ux-ds-list li{position:relative;padding-left:22px;font-size:17px;line-height:1.55;color:#232834}
.ux-ds-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:#232834}
.v9 .ux-ds-have{margin:28px 0 0;max-width:560px;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .ux-ds-have b{font-weight:700;color:#232834}
.ux-ds-sheet{margin:0;min-width:0;max-width:760px}
@media (min-width:1101px){.ux-ds-sheet{max-width:none}}
.ux-ds-doc{padding:26px 28px 12px;border-radius:20px;background:#fff;box-shadow:0 24px 48px -36px rgba(35,40,52,.28)}
.v9 .ux-ds-title{font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.v9 .ux-ds-group{margin:24px 0 2px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ux-ds-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"pv nm vl" "pv us us";align-items:center;gap:4px 16px;padding:14px 0;border-top:1px solid #E4DFD9}
.ux-ds-rows .ux-ds-row:first-child{border-top:0}
.ux-ds-pv{grid-area:pv;align-self:start;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;line-height:1;color:#232834}
.ux-ds-pv.ink{background:#232834}
.ux-ds-pv.coral{background:#FA5478}
.ux-ds-pv.ctext{background:#D33D5C}
.ux-ds-pv.bone{background:#F1EEEA;box-shadow:inset 0 0 0 1px #E4DFD9}
.ux-ds-pv.aa{background:#F1EEEA;font-size:18px}
.ux-ds-pv.aa.b{font-weight:700}
.ux-ds-pv.aa.m{font-weight:500}
.ux-ds-pv.sp{border-radius:0;background:#F1EEEA;box-shadow:inset 0 1.5px 0 #232834,inset 0 -1.5px 0 #232834}
.ux-ds-pv.rd{border:1.5px solid #232834;border-radius:12px;background:#fff}
.ux-ds-pv.tg{border:1.5px dashed #232834;border-radius:8px;background:#fff}
.ux-ds-nm{grid-area:nm;justify-self:start;max-width:100%;padding:3px 8px;border-radius:6px;background:#F1EEEA;font-weight:500;font-size:15px;line-height:1.35;color:#232834;overflow-wrap:anywhere}
.ux-ds-vl{grid-area:vl;font-weight:500;font-size:15px;line-height:1.35;color:#232834;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ux-ds-us{grid-area:us;font-size:15px;line-height:1.5;color:#4f5565}
.v9 .ux-ds-cap{margin:14px 0 0;font-size:15px;line-height:1.5;color:#4f5565}
@media (max-width:560px){
.v9 .ux-ds-lead{font-size:17px}
.ux-ds-doc{padding:20px 18px 8px}
.ux-ds-row{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"pv nm" "pv vl" "pv us";gap:4px 14px}
.ux-ds-pv{width:36px;height:36px}
.ux-ds-vl{text-align:left;font-size:16px}
.ux-ds-us{font-size:16px}
.v9 .ux-ds-cap{font-size:16px}
}

/* ---------- designing products that use AI: the quietest section. Beside the copy, one small example of an AI answer in a
   product (not a chat window): the question, the answer, where it came from (its three sources as overlapping icon circles), and a way to a person or
   to correct it. It is a still sample; its buttons are part of the drawing, not controls. From 1101px the answer sits on the
   left and the copy on the right; below that the copy comes first ---------- */
.ux-ai-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1101px){
.ux-ai-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"card copy";gap:72px;align-items:center}
.ux-ai-copy{grid-area:copy}
.ux-ai-fig{grid-area:card}
}
.ux-ai-copy .v9-h2{max-width:560px;text-wrap:balance}
.v9 .ux-ai-copy p{margin:18px 0 0;max-width:600px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .ux-ai-copy p + p{margin-top:14px}
.ux-ai-links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:22px}
.v9 .ux-ai-links .ux-go{margin-top:0}
.ux-ai-fig{margin:0;width:100%;max-width:460px}
.ux-ai-card{padding:22px 24px 24px;border:1px solid #E4DFD9;border-radius:20px;background:#fff;box-shadow:0 24px 48px -36px rgba(35,40,52,.32)}
.ux-ai-lbl{display:block;margin:0 0 6px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .ux-ai-q{font-size:17px;line-height:1.5;color:#232834}
.ux-ai-ans{margin-top:18px;padding-top:18px;border-top:1px solid #E4DFD9}
.v9 .ux-ai-t{font-size:17px;line-height:1.55;color:#232834}
.ux-ai-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ux-ai-b{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px 0 15px;border-radius:20px;background:#232834;font-weight:700;font-size:15px;line-height:1;color:#fff}
.ux-ai-b.o{background:#fff;box-shadow:inset 0 0 0 1.5px #232834;color:#232834}
.ux-ai-card svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ux-ai-b svg{width:16px;height:16px}
.v9 .ux-ai-src{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 14px 10px 10px;border-radius:14px;background:#F1EEEA}
.ux-ai-stack{flex:none;display:flex;isolation:isolate}
.ux-ai-si{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 2px #F1EEEA}
.ux-ai-si + .ux-ai-si{margin-left:-16px}
.ux-ai-si svg{width:16px;height:16px}
.ux-ai-si.i1{z-index:3;background:#232834;color:#fff}
.ux-ai-si.i2{z-index:2;background:#FA5478;color:#232834}
.ux-ai-si.i3{z-index:1;background:#fff;color:#232834;box-shadow:0 0 0 2px #F1EEEA,inset 0 0 0 1px #E4DFD9}
.ux-ai-srct{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ux-ai-srcn{font-weight:700;font-size:15px;line-height:1.35;color:#232834}
.ux-ai-srcl{font-size:15px;line-height:1.4;color:#4f5565}
/* the card is a sample: its caption says so, so "Ask a person" is never read as a way to reach us */
.v9 .ux-ai-cap{margin:14px 0 0;font-size:15px;line-height:1.5;color:#4f5565}
@media (max-width:560px){
.v9 .ux-ai-copy p{font-size:17px}
.ux-ai-card{padding:18px 16px}
.ux-ai-srcn,.ux-ai-srcl,.v9 .ux-ai-cap{font-size:16px}
.ux-ai-b{flex:1 1 auto;justify-content:center;font-size:16px}
}

/* ---------- our work: three projects, each shown by the design decision it's known for. The portfolio's screens are visuals
   made for the Our Work page, not the delivered products, so they are not used here, and nothing is said about which design
   work was ours until that is confirmed. Each project gives its sector, its name (linked to its case study), the decision in
   one sentence and its line from the portfolio, word for word. The link to the whole portfolio sits beside the heading.
   Three columns from 1101px, one below that ---------- */
.ux-ow{border-top:1px solid #E4DFD9}
.ux-ow-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin-bottom:44px}
.ux-ow-top .v9-h2{margin:0}
.v9 .ux-ow-top .ux-go{margin-top:0}
.ux-ow-list{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1101px){.ux-ow-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}}
@media (min-width:700px) and (max-width:1100px){.ux-ow-top,.ux-ow-list{max-width:720px}}
.v9 .ux-ow-sec{font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .ux-ow-h{margin:10px 0 0;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.015em;color:#232834}
.v9 .ux-ow-a{display:inline-block;padding:8px 0;margin:-8px 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 .ux-ow-a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .ux-ow-a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.v9 .ux-ow-lbl{margin:22px 0 6px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .ux-ow-dec{font-weight:700;font-size:20px;line-height:1.4;color:#232834;text-wrap:pretty}
.v9 .ux-ow-line{margin:12px 0 0;font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:560px){.v9 .ux-ow-h{font-size:22px}.v9 .ux-ow-dec{font-size:19px}}
@media (prefers-reduced-motion:reduce){.v9 .ux-ow-a{transition:none}}

/* ---------- working with your team: text and its links, no drawing. The first sentence is set large, with the three ways of
   working in bold, then the two practical questions (how to engage, and who builds it) sit under a hairline with their links.
   The handover line stays hidden until it is confirmed. From 1101px the heading sits on the left ---------- */
.ux-wk{border-top:1px solid #E4DFD9}
.ux-wk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1101px){.ux-wk-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px;align-items:start}}
.ux-wk .v9-h2{text-wrap:balance}
.v9 .ux-wk-big{max-width:880px;font-weight:500;font-size:clamp(24px,2.5vw,34px);line-height:1.38;letter-spacing:-.015em;color:#3a3f4b;text-wrap:pretty}
.v9 .ux-wk-big b{font-weight:700;color:#232834}
.v9 .ux-wk-own{max-width:720px;margin:22px 0 0;font-size:18px;line-height:1.6;color:#4f5565}
.ux-wk-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px;max-width:880px;margin-top:40px;padding-top:28px;border-top:1px solid #E4DFD9}
.v9 .ux-wk-item p{font-size:17px;line-height:1.6;color:#4f5565}
/* each item is a column with its link at the foot, so the two links share one line when the texts wrap differently */
.ux-wk-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.v9 .ux-wk-item .ux-go{margin-top:auto}
@media (max-width:700px){.ux-wk-more{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px;padding-top:24px}}

/* ---------- tap areas and the legacy menu. 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 design it better: the closing email form, centred, sized and behaving as on the sister pages. Nothing
   follows it: urgent help is reached from the header, the menu and the footer ---------- */
.ux-cta .v9-h2{text-wrap:balance}
.ux-cta .v9-sub{text-wrap:pretty}