/* AI Services page (v2), in the Engagement Models page format. Header and footer are the site's own
   (page-seo-1/2.css) and are untouched; everything here scopes to .v9 or body.v9-page. */

@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:18px;padding-bottom:18px}

/* the dark menu's AI route is this page: coral with the menu's own small dot, as its current page links are */
body.v9-page #wbm .rt[aria-current="page"] b{color:#FA5478}
body.v9-page #wbm .rt[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}
.v9-wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative}
.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:none}
.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}
@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{align-self:stretch;width:100%;max-width:534px;margin-left:auto;margin-right:auto;text-align:left}
@media (max-width:820px){.em-cta .em-status{max-width:560px}}
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)}
.em-email .v9-hero-email.bad{border-color:#d33d5c}
.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}}

/* ---------- how we work: three steps in columns with hairlines. Icons are drawn in the illustration's language:
   ink outline over a white body, warm shade for depth, one coral part that arrives in its own way with the section ---------- */
.ai-steps{padding-top:72px}
.ai-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ai-pillars li{--d:calc(var(--i,0) * 160ms + 380ms);display:flex;flex-direction:column;gap:14px;padding:4px 40px;border-left:1px solid #E4DFD9}
.ai-pillars li:first-child{border-left:0;padding-left:0}
.ai-pillars li:last-child{padding-right:0}
.ai-pillars li:nth-child(2){--i:1}.ai-pillars li:nth-child(3){--i:2}
.ai-pillars b{display:block;font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em}
.ai-pillars p{font-size:16px;line-height:1.6;color:#4f5565;max-width:340px}
.v9 svg.ai-ic{flex:none;width:88px;height:88px;margin:0 0 6px -6px;overflow:visible;fill:none;stroke:#232834;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.ai-ic *{vector-effect:non-scaling-stroke}
.ai-ic .w{fill:#fff}
.ai-ic .s{fill:#E4DFD9;stroke:none}
.ai-ic .g{stroke:#C2C5CC;stroke-dasharray:4 5}
.ai-ic .c{fill:#FA5478;stroke:#C43A5C}
.ai-ic .dc{stroke:#C43A5C}
.ai-ic .a{transform-box:fill-box;opacity:0;transition:transform .75s cubic-bezier(.34,1.56,.64,1) var(--d),opacity .45s cubic-bezier(.65,0,.35,1) var(--d)}
.ai-ic-pin .a{transform-origin:50% 100%;transform:translateY(-12px)}
.ai-ic-gear .a{transform-origin:center;transform:rotate(-50deg) scale(.55)}
.ai-ic-bars .a{transform-origin:50% 100%;transform:scaleY(0);transition-timing-function:cubic-bezier(.2,.7,.2,1),cubic-bezier(.65,0,.35,1)}
.v9-rv.in .ai-ic .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ai-ic .a{opacity:1;transform:none;transition:none}}
@media (max-width:900px){
.ai-pillars{grid-template-columns:minmax(0,1fr)}
.ai-pillars li,.ai-pillars li:first-child,.ai-pillars li:last-child{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;row-gap:6px;align-items:start;padding:26px 0;border-left:0;border-top:1px solid #E4DFD9}
.ai-pillars li:first-child{border-top:0;padding-top:0}
.v9 svg.ai-ic{grid-row:1/3;width:64px;height:64px;margin:-4px 0 0 -4px}
.ai-pillars p{max-width:none}
}

/* ---------- model sections: the illustration on one side, the copy on the other ---------- */
.em-model{border-top:1px solid #E4DFD9}
.em-model-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.em-model.rev .em-model-fig{order:2}
.em-lottie{display:block;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1920/1360}
.em-lottie svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.em-model-body .v9-sub{margin:18px 0 28px;max-width:560px;font-size:17px;line-height:1.65;color:#4f5565}
.em-model-body .v9-h2{font-size:clamp(28px,2.8vw,38px)}
.em-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.em-checks li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px;line-height:1.4;color:#232834}
.em-ck{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#FA5478;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--k,0) * 70ms + 300ms)}
.v9-rv.in .em-ck{transform:scale(1)}
.em-checks li:nth-child(2){--k:1}.em-checks li:nth-child(3){--k:2}.em-checks li:nth-child(4){--k:3}
.v9 .em-ck svg{display:block;width:12px;height:12px;stroke:#fff;stroke-width:2.2;fill:none}
@media (max-width:640px){.em-checks{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.em-ck{transform:none;transition:none}}
@media (max-width:1100px){.em-model-grid{grid-template-columns:minmax(0,1fr);gap:40px}.em-model.rev .em-model-fig{order:0}}
/* what we build: the services as a plain two-column list with hairlines, no icons */
.ai-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-bottom:1px solid #E4DFD9}
.ai-svc li{padding:14px 0;border-top:1px solid #E4DFD9;font-weight:700;font-size:15px;line-height:1.4;color:#232834}
@media (max-width:640px){.ai-svc{grid-template-columns:minmax(0,1fr)}}

/* ---------- services map. On desktop it is one Lottie in the family's drawing: the AI at the centre, and a soft coral line
   out to each service in turn, which lifts once as its own part answers. The same services stay in the page as a list:
   that is what screen readers get, and small screens show it as cards under the AI mark ---------- */
.ai-hub-sec{border-top:1px solid #E4DFD9}
.ai-hub-sec .v9-head{margin-bottom:12px}
.ai-hub{position:relative;max-width:1160px;margin:0 auto;aspect-ratio:1160/640}
.ai-lottie{position:absolute;inset:0}
.ai-lottie svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.ai-hub .ai-hub-core{display:none}
.ai-hub-caps{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ai-k0{--k:0}.ai-k1{--k:1}.ai-k2{--k:2}.ai-k3{--k:3}.ai-k4{--k:4}.ai-k5{--k:5}
.v9 svg.ai-core{width:100%;height:100%}
.ai-core .d{fill:#FA5478;stroke:#C43A5C;stroke-width:3}
.ai-core .m{fill:#F1EEEA;stroke:#C43A5C;stroke-width:2.4}
.ai-node{--d:calc(var(--k) * 110ms + 400ms);display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:#F1EEEA;border:1.5px solid #232834;border-radius:20px}
.ai-node b{font-weight:700;font-size:15px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .ai-node svg.ai-ic{flex:none;width:52px;height:52px;margin:0}
.ai-ic .tn{fill:#C2C5CC;stroke:none}.ai-ic .wn{fill:#fff;stroke:none}.ai-ic .so{fill:#E4DFD9}.ai-ic .tk{stroke:#C2C5CC}.ai-ic .ik{fill:#232834;stroke:none}
.ai-ic-chat .a{transform-origin:center;transform:scale(.5)}
.ai-ic-flow .a{transform-origin:center;transform:translateX(-8px)}
.ai-ic-gauge .a{transform-box:view-box;transform-origin:48px 70px;transform:rotate(-70deg)}
.ai-ic-data .a{transform-origin:center;transform:translateY(-8px)}
.ai-ic-plug .a{transform-origin:center;transform:translateX(-10px)}
.ai-ic-lock .a{transform-origin:center;transform:translateY(-6px)}
@media (max-width:1100px){
.ai-hub{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:28px}
.ai-lottie{display:none}
.ai-hub .ai-hub-core{display:block;position:relative;width:116px;height:116px}
.ai-hub-caps{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:720px;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
}
@media (max-width:560px){.ai-hub-caps{grid-template-columns:minmax(0,1fr)}}

/* ---------- 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}}

/* ---------- 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}
}

/* ---------- the hero's "Book a call" button, sized exactly as the homepage's: only as wide as its label and arrow (169px), a
   fixed 172px, so it keeps that width while sending and nothing shifts. From 821px the field is 262px beside it; from 561px
   to 820px the field takes the rest of the row; up to 560px the pair stacks at full width. This page's hero form becomes the homepage's grid; its closing form follows the shared rules at the end of this file. ---------- */
.v9.v9-hero .em-talk .v9-hero-form{display:grid;grid-template-columns:262px auto;gap:10px;justify-content:start}
.v9.v9-hero .em-talk .v9-hero-form .em-email{width:100%;min-width:0}
.v9.v9-hero .em-talk .v9-hero-form .v9-hero-email{flex:none;width:100%;min-width:0}
.v9.v9-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{flex:none;width:172px;min-width:0;padding:0}
@media (max-width:820px){.v9.v9-hero .em-talk{width:100%;max-width:560px}.v9.v9-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto;width:100%;max-width:560px}}
@media (max-width:560px){.v9.v9-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr)}.v9.v9-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%}}

/* ================= SYNCED 2 OCTOBER 2026: the shared email form, copied as it is from page-web-development-v2.css ================= */
/* ---------- 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)}
}

/* ---------- tap areas and the legacy menu, as on every page: the header and footer logos get 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 ---------- */
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}

/* ================= THE PHONE TYPE SCALE: synced 2 October 2026 from the homepage, by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2,.em-model-body .v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.em-model-body .v9-sub,.ai-clients-head .v9-sub{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.ai-pillars b{font-size:17px}
}