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


/* ================= E-COMMERCE (this page's own) ================= */

/* ---------- this page's hero. The eyebrow, then a headline that holds two lines at every width. Each headline option is
   sized from its own longer line, measured in Sailec Bold at -.03em (B "Stores that stay calm" 9.61em; A "Commerce that
   holds up" 11.46em; C "the systems behind it" 9.82em; D "From the storefront" 8.95em; E "start to finish" 6.00em): up to
   1100px it is set from the viewport, so the longer line takes 93% of the column at most (56px at the largest); from
   1101px, where the copy column is 560px, each is capped where its longer line takes about 91% of the column. 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.ec-hero h1.ec-h-b{font-size:min(56px,calc((100vw - 44px) / 10.4))}
.v9-hero.ec-hero h1.ec-h-a{font-size:min(56px,calc((100vw - 44px) / 12.4))}
.v9-hero.ec-hero h1.ec-h-c{font-size:min(56px,calc((100vw - 44px) / 10.6))}
.v9-hero.ec-hero h1.ec-h-d{font-size:min(56px,calc((100vw - 44px) / 9.7))}
.v9-hero.ec-hero h1.ec-h-e{font-size:min(56px,calc((100vw - 44px) / 6.5))}
@media (min-width:821px){.v9.ec-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.ec-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.ec-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.ec-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.ec-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.ec-hero h1.ec-h-b{font-size:clamp(48px,4.2vw,53px)}
.v9-hero.ec-hero h1.ec-h-a{font-size:clamp(42px,3.6vw,44px)}
.v9-hero.ec-hero h1.ec-h-c{font-size:clamp(48px,4.1vw,52px)}
.v9-hero.ec-hero h1.ec-h-d{font-size:clamp(52px,4.4vw,56px)}
.v9-hero.ec-hero h1.ec-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.ec-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.ec-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the hero's canvas is 1920 x 1480, and the box keeps that shape reserved while it loads */
.ec-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view, as on Web & App Development: on desktop the hero's top space follows the window's height */
.v9-hero.ec-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.ec-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.ec-hero{padding:28px 0 48px}}

/* ---------- what happens after 'Place order': a cross-section of one order. The customer's steps sit on the surface, a
   hairline; the systems behind the order hang beneath it, each named on its dot. When the drawing is well on screen,
   'Place order' warms and the page's second and last soft coral line leaves it, drops below the surface, runs along the
   systems and rises to the confirmation, and is gone. Each system answers once as the line reaches it (its dot warms and
   its answer settles in), and the confirmation then says what happens next. Under each system, in grey, is the moment it
   handles when the order doesn't go to plan. The lines are drawn from the dots' measured centres, so they follow the
   layout at every width. From 1100px it reads left to right; below that it runs down the page, the surface a vertical
   line with the customer's side on its left. With reduced motion the line doesn't run and every answer shows ---------- */
.ec-after{border-top:1px solid #E4DFD9}
.ec-after-head{max-width:700px;margin:0 0 56px}
.ec-after-head .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .ec-after-head p{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ec-after-head p + p{margin-top:16px}
@media (max-width:560px){.v9 .ec-after-head p{font-size:17px}.ec-after-head{margin-bottom:44px}}
.ec-x{position:relative;display:grid;max-width:640px;margin:0}
.v9 svg.ec-x-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.v9 .ec-x-lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.v9 .ec-x-lines .g{stroke:#C2C5CC;stroke-width:1.5}
.v9 .ec-x-lines .t{stroke:#E4DFD9;stroke-width:2}
.v9 .ec-x-lines .f{stroke:#FA5478;stroke-width:4;opacity:0}
.ec-x-zone{position:relative;z-index:1;font-weight:700;font-size:11.5px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.ec-x-n{position:relative;z-index:1;display:flex;gap:12px;margin:0}
.ec-x-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ec-x-dot{flex:none;box-sizing:border-box;width:16px;height:16px;margin-top:3.5px;border:2px solid #232834;border-radius:50%;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.ec-x-n.on .ec-x-dot{border-color:#C43A5C;background:#FA5478}
.v9 .ec-x-n b{font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.01em;color:#232834}
.ec-x-a,.ec-x-e{font-weight:500;font-size:16px;line-height:1.45}
.ec-x-a{color:#232834;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.ec-x-n.on .ec-x-a{opacity:1;transform:none}
.ec-x-e{color:#4f5565}
@media (prefers-reduced-motion:reduce){.ec-x-dot,.ec-x-a{transition:none}}
/* down the page: the customer's side, right-aligned, on the surface's left; the systems on the right, the order's path
   crossing to them at 'Place order' and back at the confirmation */
.ec-x{grid-template-columns:minmax(112px,1fr) 16px 40px 16px minmax(0,1.55fr);row-gap:20px}
.ec-x-zone.see{grid-column:1;grid-row:1;padding-right:14px;text-align:right}
.ec-x-zone.behind{grid-column:3/6;grid-row:1;padding-left:14px}
.ec-x-n.up{grid-column:1/3;justify-content:flex-end;align-items:flex-start;text-align:right}
.ec-x-n.up .ec-x-tx{align-items:flex-end}
.ec-x-n.dn{grid-column:4/6;align-items:flex-start}
.ec-x-n.p1{grid-row:2}.ec-x-n.p2{grid-row:3}.ec-x-n.p3,.ec-x-n.s1{grid-row:4}.ec-x-n.s2{grid-row:5}.ec-x-n.s3{grid-row:6}.ec-x-n.s4{grid-row:7}.ec-x-n.p4,.ec-x-n.s5{grid-row:8}
/* left to right: the surface runs across the section, the customer's steps on it and the systems below, under their own
   column each; the section's two zones are named at the start of the surface, one above it and one below */
@media (min-width:1100px){
.ec-x{max-width:none;grid-template-columns:minmax(0,1.3fr) repeat(7,minmax(0,1fr));grid-template-rows:auto 96px auto;row-gap:0}
.ec-x-n{flex-direction:column;align-items:center;padding:0 6px;text-align:center}
.ec-x-dot{margin-top:0}
.ec-x-n.up{grid-row:1;justify-content:flex-end;align-items:center;text-align:center}
.ec-x-n.up .ec-x-tx,.ec-x-n.dn .ec-x-tx{align-items:center}
.ec-x-n.dn{grid-row:3;align-items:center}
.ec-x-n.p1{grid-column:2}.ec-x-n.p2{grid-column:3}.ec-x-n.p3,.ec-x-n.s1{grid-column:4}.ec-x-n.s2{grid-column:5}.ec-x-n.s3{grid-column:6}.ec-x-n.s4{grid-column:7}.ec-x-n.p4,.ec-x-n.s5{grid-column:8}
.ec-x-zone.see{grid-column:1;grid-row:1;align-self:end;padding:0 16px 24px 0;text-align:left}
.ec-x-zone.behind{grid-column:1;grid-row:2;align-self:start;padding:12px 16px 0 0}
/* the confirmation's one line holds on one line: the column beside it on the surface is empty */
.ec-x-n.p4 .ec-x-a{white-space:nowrap}
}

/* ---------- what we build: grouped by where each piece sits in the store, front to back. Each group is a band under a
   hairline, with a still drawing of its layer of the store in the margin and the group's name under it: the storefront (a
   product page), checkout (the form and its summary) and behind the scenes (the systems on a bone ground, joined at one
   hub). All three are the same plane on the same slant (tools/ec-layers.js), so down the margin they read as the store
   taken apart; each band's drawing, name and hairline step in a little further the deeper it sits, while the work itself
   stays on one aligned column. Each drawing's one coral part (the chosen option, Pay, the hub) arrives once with its band.
   Every entry has its own anchor; the services still to be confirmed, and the secure-fields sentence, stay hidden. Below
   900px the drawing sits beside the group's name, over its entries, with no steps ---------- */
.ec-wb{border-top:1px solid #E4DFD9}
.ec-wb-head .v9-h2{text-wrap:balance}
.ec-wb-band{--in:0px;position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px 48px;align-items:start;padding:32px 0 44px}
.ec-wb-band::before{content:"";position:absolute;top:0;left:var(--in);right:0;height:1px;background:#E4DFD9}
.ec-wb-band.b2{--in:40px}.ec-wb-band.b3{--in:80px}
.ec-wb-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-left:var(--in)}
.v9 svg.ec-wb-fig{display:block;width:min(232px,calc(100% + var(--in) - 80px));max-width:none;height:auto;aspect-ratio:294.33/173.2;overflow:visible}
.ec-wb-fig *{vector-effect:non-scaling-stroke;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.v9 .ec-wb-fig .o{fill:none;stroke:#232834}
.v9 .ec-wb-fig .w{fill:#fff;stroke:#232834}
.v9 .ec-wb-fig .wn{fill:#fff;stroke:none}
.v9 .ec-wb-fig .bn{fill:#F1EEEA;stroke:none}
.v9 .ec-wb-fig .b{fill:#F1EEEA;stroke:none}
.v9 .ec-wb-fig .sb{fill:#E4DFD9;stroke:#232834}
.v9 .ec-wb-fig .s{fill:#E4DFD9;stroke:none}
.v9 .ec-wb-fig .t{fill:#C2C5CC;stroke:none}
.v9 .ec-wb-fig .i{fill:#232834;stroke:none}
.v9 .ec-wb-fig .f{fill:#fff;stroke:#C2C5CC}
.v9 .ec-wb-fig .r{fill:none;stroke:#E4DFD9}
.v9 .ec-wb-fig .tl{fill:none;stroke:#C2C5CC}
.v9 .ec-wb-fig .c{fill:#FA5478;stroke:#C43A5C}
.ec-wb-fig .a{opacity:0;transform:translateY(-6px);transition:opacity .5s cubic-bezier(.65,0,.35,1) .45s,transform .8s cubic-bezier(.2,.7,.2,1) .45s}
.ec-wb-band.in .ec-wb-fig .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ec-wb-fig .a{opacity:1;transform:none;transition:none}}
.v9 .ec-wb-g{margin:0;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .ec-wb-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 40px;margin:0;padding:8px 0 0;list-style:none}
.v9 .ec-wb-items li{margin:0;scroll-margin-top:32px}
.v9 .ec-wb-items h3{margin:0 0 8px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .ec-wb-items p{margin:0;max-width:440px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:899px){
.ec-wb-band,.ec-wb-band.b2,.ec-wb-band.b3{--in:0px;grid-template-columns:minmax(0,1fr);padding:24px 0 34px}
.ec-wb-side{flex-direction:row;align-items:center;gap:18px}
.v9 svg.ec-wb-fig{width:150px;flex:none}
.v9 .ec-wb-items{padding-top:0}
.v9 .ec-wb-items p{max-width:560px}
}
@media (max-width:560px){.v9 svg.ec-wb-fig{width:128px}.v9 .ec-wb-items h3{font-size:20px}}

/* ---------- the right platform for your store: a scale. The options stand in order on one line, from the most standard to
   the most custom, each on its own stop, equal in size and weight, so the simplest reads as a real choice, not a formality.
   Under each stop a small bar shows how much of the store is the platform (tint) and how much is your own code (ink); the
   ink grows in once, left to right, as the scale arrives. The closing line sits under the scale. Below 900px the scale runs
   down the page, still from the most standard at the top to the most custom at the bottom ---------- */
.ec-pf{border-top:1px solid #E4DFD9}
.ec-pf-head{max-width:720px}
.ec-pf-head .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .ec-pf-head p{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.ec-pf-scale{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a b" "l l" "k k";row-gap:16px;margin:52px 0 0}
.ec-pf-end{font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ec-pf-end.a{grid-area:a}.ec-pf-end.b{grid-area:b;text-align:right}
.v9 .ec-pf-list{grid-area:l;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;margin:0;padding:0;list-style:none}
.ec-pf-list::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:#C2C5CC}
.v9 .ec-pf-list li{position:relative;display:flex;flex-direction:column;margin:0}
.ec-pf-dot{position:relative;z-index:1;box-sizing:border-box;width:16px;height:16px;border:2px solid #232834;border-radius:50%;background:#fff}
.ec-pf-bar{position:relative;display:block;width:100%;max-width:220px;height:8px;margin:26px 0 20px;border-radius:4px;background:#C2C5CC;overflow:hidden}
.ec-pf-bar i{position:absolute;top:0;right:0;bottom:0;width:var(--own);border-left:2px solid #fff;background:#232834;transform-origin:right center;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.ec-pf-scale.in .ec-pf-bar i{transform:none}
.o1{--own:12.5%}.o2{--own:37.5%}.o3{--own:62.5%}.o4{--own:87.5%}
.o2 .ec-pf-bar i{transition-delay:.12s}.o3 .ec-pf-bar i{transition-delay:.24s}.o4 .ec-pf-bar i{transition-delay:.36s}
.ec-pf-scale .o1 .ec-pf-bar i{transition-delay:0s}
.v9 .ec-pf-list h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .ec-pf-list p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ec-pf-key{grid-area:k;display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 0;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.ec-pf-key span{display:inline-flex;align-items:center;gap:10px}
.ec-pf-key i{display:block;width:22px;height:8px;border-radius:4px}
.ec-pf-key .k-p{background:#C2C5CC}.ec-pf-key .k-o{background:#232834}
.v9 .ec-pf-close{max-width:none;margin:40px 0 0;padding-top:24px;border-top:1px solid #E4DFD9;font-weight:500;font-size:19px;line-height:1.55;color:#232834;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.ec-pf-bar i{transform:none;transition:none}}
@media (max-width:1023px){
.ec-pf-scale{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "l" "b" "k";row-gap:18px;margin-top:40px}
.ec-pf-end.b{text-align:left}
.v9 .ec-pf-list{grid-template-columns:minmax(0,1fr);row-gap:34px;padding:6px 0}
.ec-pf-list::before{left:7px;right:auto;top:-8px;bottom:-8px;width:2px;height:auto}
.v9 .ec-pf-list li{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:20px}
.ec-pf-dot{grid-column:1;grid-row:1;margin-top:5px}
.v9 .ec-pf-list h3{grid-column:2;grid-row:1}
.ec-pf-bar{grid-column:2;grid-row:2;margin:4px 0 14px}
.v9 .ec-pf-list p{grid-column:2;grid-row:3;max-width:560px}
.v9 .ec-pf-key{margin-top:6px}
.v9 .ec-pf-close{margin-top:32px}
}
@media (max-width:560px){.v9 .ec-pf-head p{font-size:17px}.v9 .ec-pf-close{font-size:18px}}

/* ---------- ready for your busiest day: one drawn busy day. A quiet curve of activity, with no figures or axis values,
   rises from a quiet start to a peak and falls again; its body is bone under an ink line, on an ink baseline, and its one
   coral part is the peak, which arrives once with the drawing. Under the baseline the day's three phases are named. Each
   practice sits where it does its work: those tied to a moment under their phase (before the rise, at the peak: hidden
   until confirmed), and those that hold all day under a dimension line that spans the whole day, as wide as the curve.
   Below 900px the practices stack in one column under the same drawing, shorter ---------- */
.ec-day{border-top:1px solid #E4DFD9}
.ec-day-head .v9-h2{text-wrap:balance}
.ec-day-fig{margin:4px 0 0}
.ec-day-curve{position:relative;height:200px}
.v9 .ec-day-curve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ec-day-curve svg path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.v9 .ec-day-curve .ar{fill:#F1EEEA;stroke:none}
.v9 .ec-day-curve .ln{fill:none;stroke:#232834;stroke-width:1.75}
.v9 .ec-day-curve .bl{fill:none;stroke:#232834;stroke-width:1.5}
.ec-day-mk{position:absolute;z-index:1;box-sizing:border-box;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #232834;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff}
.ec-day-mk.k-test{left:30%;top:81%}
.ec-day-mk.k-peak{left:62%;top:12%;border-color:#C43A5C;background:#FA5478;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1) .6s}
.ec-day-fig.in .ec-day-mk.k-peak{opacity:1}
.ec-day-ph{display:grid;grid-template-columns:44fr 36fr 20fr;margin-top:14px}
.ec-day-ph span{position:relative;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ec-day-ph span:nth-child(2){text-align:center}
.ec-day-ph span:nth-child(3){text-align:right}
.ec-day-ph span:nth-child(2)::before,.ec-day-ph span:nth-child(3)::before{content:"";position:absolute;left:0;top:-14px;width:1.5px;height:9px;background:#232834}
.v9 .ec-day-timed{display:grid;grid-template-columns:44fr 36fr 20fr;gap:0 40px;margin:0;padding:0;list-style:none}
.v9 .ec-day-timed li{margin:0;padding-top:28px;max-width:420px}
.v9 .ec-day-timed .z1{grid-column:1}.v9 .ec-day-timed .z2{grid-column:2}
.ec-day-span{display:flex;align-items:center;gap:14px;margin:40px 0 0}
.ec-day-span i{position:relative;flex:1;height:1.5px;background:#C2C5CC}
.ec-day-span i:first-child::before,.ec-day-span i:last-child::after{content:"";position:absolute;top:-5px;width:1.5px;height:11px;background:#C2C5CC}
.ec-day-span i:first-child::before{left:0}.ec-day-span i:last-child::after{right:0}
.ec-day-span span{flex:none;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .ec-day-all{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 48px;margin:28px 0 0;padding:0;list-style:none}
.v9 .ec-day-all li{margin:0;scroll-margin-top:32px}
.v9 .ec-day-timed h3,.v9 .ec-day-all h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .ec-day-timed p,.v9 .ec-day-all p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.ec-day-mk.k-peak{opacity:1;transition:none}}
@media (max-width:899px){
.ec-day-curve{height:140px}
.v9 .ec-day-timed{grid-template-columns:minmax(0,1fr)}
.v9 .ec-day-timed .z1,.v9 .ec-day-timed .z2{grid-column:1}
.v9 .ec-day-all{grid-template-columns:minmax(0,1fr);gap:26px}
.v9 .ec-day-all p{max-width:560px}
.ec-day-span{margin-top:32px}
}
@media (max-width:560px){.ec-day-curve{height:112px}.ec-day-ph span{font-size:11px;letter-spacing:.14em}.ec-day-ph{grid-template-columns:40fr 40fr 20fr}.ec-day-mk.k-peak{left:62%}}

/* ---------- AI where it helps people buy: the page's one bone band, and its quietest section. The paragraph and its two
   quiet text links, beside one still sample from its own words: a product's details drafted by AI for the team to check.
   Two lines are checked, each initialled by the person who checked it; one is still a draft, the drawing's one coral part.
   No brands, prices or figures. Side by side from 1024px ---------- */
.ec-ai-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px 80px;align-items:center}
.ec-ai-copy .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .ec-ai-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ec-ai-copy .ec-ai-links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:14px}
.ec-ai-fig{justify-self:end;box-sizing:border-box;width:100%;max-width:460px;padding:22px 24px 10px;border:1.75px solid #232834;border-radius:20px;background:#fff}
.ec-ai-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #E4DFD9}
.ec-ai-top b{font-weight:700;font-size:15px;line-height:1.4;color:#232834}
.ec-ai-chip{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid #C2C5CC;border-radius:14px;font-weight:500;font-size:14px;line-height:1;color:#232834}
.ec-ai-prod{display:flex;align-items:center;gap:16px;padding:18px 0}
.ec-ai-pic{flex:none;position:relative;width:64px;height:64px;border-radius:12px;background:#F1EEEA}
.ec-ai-pic::after{content:"";position:absolute;inset:18px;border-radius:50%;background:#E4DFD9}
.ec-ai-name{display:flex;flex-direction:column;gap:9px}
.ec-ai-name b{font-weight:700;font-size:18px;line-height:1.3;color:#232834}
.ec-ai-name i{display:block;width:96px;height:8px;border-radius:4px;background:#E4DFD9}
.v9 .ec-ai-lines{margin:0;padding:0;list-style:none}
.v9 .ec-ai-lines li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;margin:0;padding:10px 0;border-top:1px solid #E4DFD9;font-weight:500;font-size:16px;line-height:1.45;color:#232834}
.v9 .ec-ai-lines li.dr{color:#4f5565}
.ec-ai-by{flex:none;display:flex;align-items:center;gap:8px}
.ec-ai-by i{display:block;box-sizing:border-box;width:7px;height:12px;margin:-4px 2px 0 0;border-right:2px solid #232834;border-bottom:2px solid #232834;transform:rotate(45deg)}
.ec-ai-by b{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#232834;font-weight:700;font-size:11.5px;letter-spacing:.04em;color:#fff}
.ec-ai-tag{flex:none;box-sizing:border-box;display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1.5px solid #FA5478;border-radius:13px;background:#fff;font-weight:700;font-size:13px;line-height:1;color:#d33d5c}
@media (max-width:1023px){.ec-ai-grid{grid-template-columns:minmax(0,1fr)}.ec-ai-fig{justify-self:start}}
@media (max-width:560px){.v9 .ec-ai-copy p{font-size:17px}.ec-ai-fig{padding:18px 18px 8px}}

/* ---------- our work: the three e-commerce projects, each told through one of its phone screens, since most shopping
   happens on phones. Each screen is cropped from the project's Our Work visual (a design visual, not a screenshot of the
   delivered product) and served near the size shown (art/e-commerce/ec-work-*, 300 and 600px wide); its box keeps the
   phone's shape while it loads and it fades in once. Under it, the sector, the name (a link to its case study on Our Work)
   and the project's line, word for word. Oreya is tagged Concept, as on Our Work. Three across from 900px; below that one
   project per row, the phone beside its words ---------- */
.ec-work{border-top:1px solid #E4DFD9}
.v9 .ec-work-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px;margin:0;padding:0;list-style:none}
.v9 .ec-case{display:flex;flex-direction:column;margin:0}
.ec-phone{box-sizing:border-box;width:100%;max-width:300px;padding:9px;border:1.75px solid #232834;border-radius:40px;background:#fff}
.ec-phone-scr{position:relative;aspect-ratio:300/638;overflow:hidden;border-radius:30px;background:#F1EEEA}
.ec-phone-scr::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(35,40,52,.08);pointer-events:none}
.ec-phone-scr img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1)}
.ec-phone-scr img.on{opacity:1}
.v9 .ec-case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:24px;margin:24px 0 8px;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ec-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;box-shadow:inset 0 0 0 1.5px #E4DFD9;font-weight:700;font-size:11.5px;line-height:1;letter-spacing:.06em;text-transform:none;color:#232834}
.v9 .ec-case h3{margin:0 0 10px;font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.v9 .ec-case h3 a{display:inline-block;padding:8px 0;margin:-8px 0;color:#232834;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ec-case h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .ec-case h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.v9 .ec-case-copy > p:last-child{margin:0;max-width:380px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.ec-work-more{margin-top:48px}
@media (prefers-reduced-motion:reduce){.ec-phone-scr img{transition:none}}
@media (max-width:899px){
.v9 .ec-work-list{grid-template-columns:minmax(0,1fr);gap:44px;max-width:640px}
.v9 .ec-case{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 32px;align-items:center}
.v9 .ec-case-meta{margin-top:0}
}
@media (max-width:560px){
.v9 .ec-case{grid-template-columns:132px minmax(0,1fr);gap:0 20px;align-items:start}
.ec-phone{padding:6px;border-radius:26px}.ec-phone-scr{border-radius:20px}
.v9 .ec-case h3{font-size:20px}
.ec-work-more{margin-top:36px}
}

/* ---------- after launch: the text and its links, with no drawing. The heading on the left, the words and the link to the
   engagement models beside it. The sentence offering to look after the store, and the growth line, stay hidden until they
   are confirmed. One column below 900px ---------- */
.ec-life{border-top:1px solid #E4DFD9}
.ec-life-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:20px 80px;align-items:start}
.ec-life-grid .v9-h2{margin:0;text-wrap:balance}
.v9 .ec-life-copy p{margin:0;max-width:620px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ec-life-copy p + p{margin-top:16px}
.v9 .ec-life-copy .ec-go{margin-top:12px}
.v9 .ec-life-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:20px}
.v9 .ec-life-more .ec-go{margin-top:0}
@media (max-width:899px){.ec-life-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.v9 .ec-life-copy p{font-size:17px}}

/* ---------- 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 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 build it better: the closing email form, centred. Nothing follows it: urgent
   help is reached from the header, the menu and the footer ---------- */
.ec-cta .v9-h2{text-wrap:balance}
.ec-cta .v9-sub{text-wrap:pretty}