/* AI-Assisted Engineering, built from Web & App Development v2 (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 (ae-*) follow the shared ones. Built one section at a time, the hero first */

@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. The menu stays
   as it is for now; markMenu() marks its Put AI to work route, in coral with the menu's own small dot */
body.v9-page #wb_menu .rt[aria-current="page"] b,body.v9-page #wb_menu .tile[aria-current="page"] b{color:#FA5478}

/* ---------- 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: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}
/* the hero swaps files by laying the next over the last: each pass has its own box, stacked in one place */
.ae-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{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}}

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


/* ================= AI-ASSISTED ENGINEERING (this page's own) ================= */

/* ---------- this page's hero, as on MCP & Agent Integration: 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 on the woff2 itself (October 9, 2026): A "that earn
   their place" 9.16em, B "rolled out with care" 8.85em, C "AI in your engineering," 10.30em, D "Coding agents," 7.06em and E
   "that fit how you work" 9.61em. Up to 1100px the size follows the viewport, so that line takes 91% of the column at most, 56px
   at the largest; from 1101px, where the copy column is 560px, A runs from 46px to 52px (476px at most), B from 48px to 54px
   (478px), C from 42px to 46px (474px), D from 52px to 60px (424px) and E from 44px to 50px (480px). 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 ---------- */
/* fixed line heights keep the hero still as Sailec swaps in (1.48 is Sailec's own normal) */
.v9-hero.ae-hero .v9-eyebrow{line-height:1.48}
.v9-hero.ae-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.ae-hero h1.ae-h-a{font-size:min(56px,calc((100vw - 44px) / 10.02))}
.v9-hero.ae-hero h1.ae-h-b{font-size:min(56px,calc((100vw - 44px) / 9.68))}
.v9-hero.ae-hero h1.ae-h-c{font-size:min(56px,calc((100vw - 44px) / 11.27))}
.v9-hero.ae-hero h1.ae-h-d{font-size:min(56px,calc((100vw - 44px) / 7.73))}
.v9-hero.ae-hero h1.ae-h-e{font-size:min(56px,calc((100vw - 44px) / 10.51))}
@media (min-width:821px){.v9.ae-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.ae-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.ae-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.ae-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.ae-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.ae-hero h1.ae-h-a{font-size:clamp(46px,3.8vw,52px)}
.v9-hero.ae-hero h1.ae-h-b{font-size:clamp(48px,4vw,54px)}
.v9-hero.ae-hero h1.ae-h-c{font-size:clamp(42px,3.4vw,46px)}
.v9-hero.ae-hero h1.ae-h-d{font-size:clamp(52px,4.4vw,60px)}
.v9-hero.ae-hero h1.ae-h-e{font-size:clamp(44px,3.6vw,50px)}
.v9-hero.ae-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.ae-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's box keeps its shape reserved from the first paint (1600 x 1320, the job board's own). At 560px and below it
   sits below the form, runs to the window's edges and shows the phone version (1600 x 1786), whose words are 1.3 times larger */
.ae-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.ae-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1600/1786}}
/* 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.ae-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.ae-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.ae-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them. 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}

/* ---------- the closing: the email form, centred, sized and behaving as the hero's at every width. Nothing follows it: urgent
   help is reached from the header, the menu and the footer ---------- */
.ae-cta .v9-h2{text-wrap:balance}
.ae-cta .v9-sub{text-wrap:pretty}

/* ---------- Easy to start, harder to measure (#problem): the copy beside two of the family's bone cards. As they come into view
   the team's settings switch the coding assistant on, once; beside them the question's answer stays open, and "Needs a baseline"
   follows once the switch is on. The switch is ink and the tag is the view's one coral part. With reduced motion both show their
   finished state from the start. Side by side from 1024px; below, the figure follows the copy; up to 560px the cards stack ---------- */
.ae-prob{border-top:1px solid #E4DFD9}
.ae-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.ae-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ae-prob-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ae-prob-copy p + p{margin-top:16px}
.ae-sw{margin:0}
.ae-sw-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:600px;margin:0 0 0 auto;pointer-events:none;-webkit-user-select:none;user-select:none}
.ae-sw-card{display:grid;align-content:start;gap:16px;padding:20px 20px 22px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA}
.v9 .ae-sw-k{margin:0;padding:0 0 14px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:16px;line-height:1.35;color:#232834;text-wrap:balance}
.ae-sw-row{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:66px;padding:12px 14px 12px 16px;border:1.75px solid #232834;border-radius:14px;background:#fff}
.ae-sw-row.open{justify-content:flex-start;border-style:dashed;border-color:#C2C5CC}
.v9 .ae-sw-n{font-weight:500;font-size:16px;line-height:1.35;color:#232834}
.ae-sw-tg{flex:none;display:flex;align-items:center;gap:10px}
.ae-sw-st{display:grid;font-weight:500;font-size:16px;line-height:1;color:#232834}
.ae-sw-st > span{grid-area:1/1;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.ae-sw-st .on{opacity:0}
.ae-sw-tr{position:relative;box-sizing:border-box;width:58px;height:34px;border:1.75px solid #232834;border-radius:17px;background:#fff;transition:background-color .5s cubic-bezier(.65,0,.35,1)}
.ae-sw-tr i{position:absolute;left:4px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#C2C5CC;transition:transform .5s cubic-bezier(.65,0,.35,1),background-color .5s cubic-bezier(.65,0,.35,1)}
.ae-sw-tag{display:inline-flex;align-items:center;box-sizing:border-box;height:36px;padding:0 14px;border:1.75px solid #C43A5C;border-radius:18px;background:#fff;font-weight:500;font-size:16px;line-height:1;color:#d33d5c;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .5s cubic-bezier(.65,0,.35,1)}
.ae-sw.in .ae-sw-tr{background-color:#232834;transition-delay:.7s}
.ae-sw.in .ae-sw-tr i{transform:translateX(24px);background-color:#fff;transition-delay:.7s}
.ae-sw.in .ae-sw-st .off{opacity:0;transition-delay:.7s}
.ae-sw.in .ae-sw-st .on{opacity:1;transition-delay:.95s}
.ae-sw.in .ae-sw-tag{opacity:1;transform:none;transition-delay:1.6s}
@media (prefers-reduced-motion:reduce){
.ae-sw *{transition:none!important}
.ae-sw .ae-sw-tr{background-color:#232834}
.ae-sw .ae-sw-tr i{transform:translateX(24px);background-color:#fff}
.ae-sw .ae-sw-st .off{opacity:0}
.ae-sw .ae-sw-st .on,.ae-sw .ae-sw-tag{opacity:1;transform:none}
}
@media (max-width:1023px){.ae-prob-grid{grid-template-columns:minmax(0,1fr)}.ae-sw-art{margin:0}}
@media (max-width:560px){.ae-sw-art{grid-template-columns:minmax(0,1fr);gap:12px}.ae-sw-card{padding:18px 18px 20px}}

/* ---------- What we set up with your team (#scope): the items in a grid, each with its own icon and hover Lottie (tools/ae-icons-scene.js),
   then the three hand-off lines. Static; each icon's coral part settles in with the reveal. Four across from 1101px, two to 600px,
   then one. The hand-off links are the page's text links: #d33d5c, underlined on hover and focus ---------- */
.ae-scope{border-top:1px solid #E4DFD9}
.ae-scope-head{max-width:720px;margin:0 0 48px}
.ae-scope-head .v9-h2{margin:0 0 16px;text-wrap:balance}
.v9 .ae-scope-sub{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.ae-set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 36px;margin:0 0 52px;padding:0;list-style:none}
.v9 .ae-set > li{margin:0;padding:0;min-width:0;--d:0s}
.v9 .ae-set > li:nth-child(4n+2){--d:.06s}.v9 .ae-set > li:nth-child(4n+3){--d:.12s}.v9 .ae-set > li:nth-child(4n){--d:.18s}
.ae-set .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 0 16px -4px}
.v9 .ae-set h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .ae-set p{margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.cb-ic .ck{stroke:#fff}
.v9 svg.cb-ic .cs{stroke:#FA5478;stroke-width:2px}
.ae-more{display:grid;margin:0;padding:24px 0 0;border-top:1px solid #C2C5CC;list-style:none}
.v9 .ae-more li{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;min-height:44px;margin:0;padding:0;font-weight:500;font-size:17px;line-height:1.4;color:#4f5565}
.v9 .ae-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#d33d5c;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
.v9 .ae-more a:hover,.v9 .ae-more a:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 .ae-more a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:1100px){.ae-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
@media (max-width:599px){.ae-scope-head{margin-bottom:36px}.ae-set{grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:40px}.ae-set .cb-ic-box{width:56px;height:56px;margin-bottom:12px}.v9 .ae-more li{display:block;padding:10px 0 0}.v9 .ae-more li span{display:block}}

/* ---------- Measure the work, not the feeling (#measure): the page's one bone band and its one interaction. Two buttons above one
   card choose a view; both views stay in the card's text, so it reads fully without them and find in page reaches every row. The
   chosen view comes forward as a white panel with an ink outline; the other rests on the card's bone. Only colors change, so the
   card holds its height; the change is announced politely, and with reduced motion it happens at once. Up to 560px the buttons
   and the views stack, full width ---------- */
.ae-meas-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.ae-meas-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ae-meas-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ae-meas-copy .ae-meas-more{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;margin-top:18px;font-size:17px;line-height:1.4}
.v9 .ae-qa-more a,.v9 .ae-lim-more a,.v9 .ae-meas-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#d33d5c;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
.v9 .ae-qa-more a:hover,.v9 .ae-qa-more a:focus-visible,.v9 .ae-lim-more a:hover,.v9 .ae-lim-more a:focus-visible,.v9 .ae-meas-more a:hover,.v9 .ae-meas-more a:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 .ae-qa-more a:focus-visible,.v9 .ae-lim-more a:focus-visible,.v9 .ae-meas-more a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
.ae-ms{display:grid;gap:14px;max-width:620px;margin:0 0 0 auto}
.ae-ms-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v9 .ae-ms-b{box-sizing:border-box;min-height:48px;padding:10px 16px;border:1.75px solid #232834;border-radius:24px;background:#fff;font-family:inherit;font-weight:700;font-size:16px;line-height:1.25;color:#232834;cursor:pointer;transition:background-color .3s cubic-bezier(.65,0,.35,1),color .3s cubic-bezier(.65,0,.35,1)}
.v9 .ae-ms-b[aria-pressed="true"]{background:#232834;color:#fff;cursor:default}
.v9 .ae-ms-b:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (hover:hover){.v9 .ae-ms-b[aria-pressed="false"]:hover{background:#F1EEEA}}
.ae-ms-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA}
.ae-ms-v{display:grid;align-content:start;box-sizing:border-box;padding:16px 20px 20px;border:1.75px solid transparent;border-radius:14px;transition:background-color .35s cubic-bezier(.65,0,.35,1),border-color .35s cubic-bezier(.65,0,.35,1)}
.ae-ms-v.on{background:#fff;border-color:#232834}
.ae-ms-rows{margin:0 0 16px;padding:0;list-style:none}
.v9 .ae-ms-rows li{display:flex;align-items:center;gap:12px;min-height:52px;margin:0;padding:8px 0;border-bottom:1px solid #C2C5CC;font-weight:500;font-size:17px;line-height:1.35;color:#4f5565;transition:color .35s cubic-bezier(.65,0,.35,1)}
.ae-ms-rows li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#C2C5CC;transition:background-color .35s cubic-bezier(.65,0,.35,1)}
.v9 .ae-ms-v.on .ae-ms-rows li{color:#232834}
.ae-ms-v.on .ae-ms-rows li::before{background:#232834}
.v9 .ae-ms-l{margin:0;font-weight:700;font-size:16px;line-height:1.45;color:#4f5565;text-wrap:balance;transition:color .35s cubic-bezier(.65,0,.35,1)}
.v9 .ae-ms-v.on .ae-ms-l{color:#232834}
.ae-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.v9 .ae-ms-b,.ae-ms-v,.v9 .ae-ms-rows li,.ae-ms-rows li::before,.v9 .ae-ms-l{transition:none}}
@media (max-width:1023px){.ae-meas-grid{grid-template-columns:minmax(0,1fr)}.ae-ms{margin:0}}
@media (max-width:560px){.ae-ms-btns,.ae-ms-card{grid-template-columns:minmax(0,1fr)}.ae-ms-btns{gap:10px}}

/* ---------- A person reads every change (#review): the drawing first, then the copy. One long change (grey bars on bone), too long
   to read, splits once into three short ones as it comes into view, and each takes its owner's avatar. It plays once and holds;
   with reduced motion it shows split from the start. Below 1024px the copy comes first ---------- */
.ae-rev{border-top:1px solid #E4DFD9}
.ae-rev-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.ae-rev-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ae-rev-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.ae-split{display:grid;gap:18px;max-width:440px;margin:0}
.ae-split-art{display:grid;gap:16px;pointer-events:none}
.ae-split-c{position:relative;display:grid;gap:10px;box-sizing:border-box;padding:18px 70px 18px 20px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA}
.ae-split-c i{display:block;height:10px;border-radius:5px;background:#C2C5CC}
.ae-split-c.c1 i:nth-of-type(1){width:70%}.ae-split-c.c1 i:nth-of-type(2){width:92%}.ae-split-c.c1 i:nth-of-type(3){width:84%}.ae-split-c.c1 i:nth-of-type(4){width:58%}
.ae-split-c.c2 i:nth-of-type(1){width:88%}.ae-split-c.c2 i:nth-of-type(2){width:64%}.ae-split-c.c2 i:nth-of-type(3){width:94%}.ae-split-c.c2 i:nth-of-type(4){width:72%}
.ae-split-c.c3 i:nth-of-type(1){width:80%}.ae-split-c.c3 i:nth-of-type(2){width:96%}.ae-split-c.c3 i:nth-of-type(3){width:60%}.ae-split-c.c3 i:nth-of-type(4){width:76%}
.ae-split-av{position:absolute;right:18px;top:50%;box-sizing:border-box;width:36px;height:36px;margin-top:-18px;border:1.75px solid #232834;border-radius:50%;background:#fff}
.ae-split-av svg{display:block;width:100%;height:100%}
.ae-split-av svg *{fill:#E4DFD9;stroke:#232834;stroke-width:1.4px;stroke-linejoin:round}
.v9 .ae-split-k{margin:0;font-weight:500;font-size:16px;line-height:1.45;color:#4f5565;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
.ae-split-c{transition:transform .6s cubic-bezier(.65,0,.35,1) 1s,border-radius .6s cubic-bezier(.65,0,.35,1) 1s,border-color .3s cubic-bezier(.65,0,.35,1) 1.1s}
.ae-split:not(.in) .c1{border-bottom-color:transparent;border-radius:20px 20px 0 0;transform:translateY(16px)}
.ae-split:not(.in) .c2{border-top-color:transparent;border-bottom-color:transparent;border-radius:0}
.ae-split:not(.in) .c3{border-top-color:transparent;border-radius:0 0 20px 20px;transform:translateY(-16px)}
.ae-split-av{transition:opacity .4s cubic-bezier(.65,0,.35,1) 1.7s,transform .4s cubic-bezier(.65,0,.35,1) 1.7s}
.ae-split .c2 .ae-split-av{transition-delay:1.85s}.ae-split .c3 .ae-split-av{transition-delay:2s}
.ae-split:not(.in) .ae-split-av{opacity:0;transform:scale(.9)}
}
@media (max-width:1023px){.ae-rev-grid{grid-template-columns:minmax(0,1fr)}.ae-rev-copy{order:-1}}
@media (max-width:560px){.ae-split-c{padding:16px 64px 16px 18px}}

/* ---------- Clear limits for agents (#limits): the copy beside one agent's work order, a job card with a tear-off stub: the job on
   the stub, "Can" (ink ticks) and "Can't" (a plain ink dash, nothing alarming) on the body, and one coral margin note joined to it
   by a short coral line. Static. Up to 560px the stub sits on top and the two lists stack ---------- */
.ae-lim{border-top:1px solid #E4DFD9}
.ae-lim-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.ae-lim-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ae-lim-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ae-lim-copy .ae-lim-more{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;margin-top:18px;font-size:17px;line-height:1.4}
.ae-tk{display:grid;max-width:600px;margin:0 0 0 auto}
.ae-tk-card{display:grid;grid-template-columns:minmax(150px,2fr) minmax(0,5fr);border:1.75px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.ae-tk-stub{display:grid;align-content:start;gap:8px;padding:22px 20px;background:#F1EEEA;border-right:1.75px dashed #232834}
.v9 .ae-tk-k{margin:0;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .ae-tk-job{margin:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.ae-tk-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:22px 22px 24px}
.v9 .ae-tk-h{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.ae-tk-col ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.v9 .ae-tk-col li{display:flex;align-items:flex-start;gap:10px;margin:0;font-weight:500;font-size:16px;line-height:1.4;color:#232834}
.ae-tk-col li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;background:center/20px 20px no-repeat}
.ae-tk-col li.y::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23232834'/%3E%3Cpath d='M5.6 10.2l2.9 2.9 5.9-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ae-tk-col li.n::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.1' fill='%23fff' stroke='%23232834' stroke-width='1.75'/%3E%3Cpath d='M6 10h8' stroke='%23232834' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.v9 .ae-tk-note{position:relative;justify-self:end;margin:0;padding:22px 0 0;font-weight:700;font-size:17px;line-height:1.4;color:#d33d5c;text-align:right;text-wrap:balance}
.ae-tk-note::before{content:"";position:absolute;right:32px;top:0;width:1.75px;height:16px;background:#C43A5C}
@media (max-width:1023px){.ae-lim-grid{grid-template-columns:minmax(0,1fr)}.ae-tk{margin:0}}
@media (max-width:560px){.ae-tk-card{grid-template-columns:minmax(0,1fr)}.ae-tk-stub{border-right:0;border-bottom:1.75px dashed #232834;padding:18px}.ae-tk-body{grid-template-columns:minmax(0,1fr);padding:18px 18px 20px}}

/* ---------- Start with one team (#start): a signpost beside the copy. Three arms, none chosen: "Widen it" points on, "Adjust it"
   points back, "Stop" is a plain board that points nowhere. The post stands on its base, "Against the baseline", the view's one
   coral part (blush with a dark-coral edge). Static. Below 1024px the copy comes first ---------- */
.ae-start{border-top:1px solid #E4DFD9}
.ae-start-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.ae-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .ae-start-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.ae-post{position:relative;display:grid;gap:14px;width:100%;max-width:440px;padding:26px 0 0;pointer-events:none}
.ae-post-pole{position:absolute;left:50%;top:0;bottom:40px;width:16px;margin-left:-8px;box-sizing:border-box;border:1.75px solid #232834;border-bottom:0;border-radius:8px 8px 0 0;background:#E4DFD9}
.ae-post-arm{position:relative;display:flex;width:max-content;height:52px}
.ae-post-arm.r{margin-left:calc(50% - 14px)}
.ae-post-arm.l{flex-direction:row-reverse;margin-left:auto;margin-right:calc(50% - 14px)}
.ae-post-arm.s{justify-self:center}
.v9 .ae-post-arm .b{display:flex;align-items:center;box-sizing:border-box;height:52px;padding:0 16px 0 22px;border:1.75px solid #232834;border-right:0;border-radius:10px 0 0 10px;background:#F1EEEA;font-weight:700;font-size:18px;line-height:1;color:#232834;white-space:nowrap}
.v9 .ae-post-arm.l .b{padding:0 22px 0 16px;border-left:0;border-right:1.75px solid #232834;border-radius:0 10px 10px 0}
.v9 .ae-post-arm.s .b{padding:0 26px;border:1.75px solid #232834;border-radius:10px}
.ae-post-arm .t{display:block;flex:none;width:26px;height:52px;margin-left:-1px;overflow:visible}
.ae-post-arm.l .t{margin:0 -1px 0 0;transform:scaleX(-1)}
.ae-post-arm .t path{fill:#F1EEEA;stroke:#232834;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.v9 .ae-post-base{position:relative;justify-self:center;display:flex;align-items:center;box-sizing:border-box;min-height:44px;margin-top:40px;padding:8px 22px;border:1.75px solid #C43A5C;border-radius:10px;background:#FDE0E6;font-weight:700;font-size:16px;line-height:1.3;color:#232834;text-align:center}
@media (max-width:1023px){.ae-start-grid{grid-template-columns:minmax(0,1fr)}.ae-start-copy{order:-1}}

/* ---------- Questions worth asking (#questions): answer first. Each question is set small; the first words of its answer are set
   large and bold, the rest beneath at body size. Every answer is open, in the page's text, so find in page reaches it. The heading
   sits beside the answers from 1024px, above them below ---------- */
.ae-qa{border-top:1px solid #E4DFD9}
.ae-qa-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 80px;align-items:start}
.v9 .ae-qa-h{margin:0;text-wrap:balance}
.ae-qa-list{display:grid}
.ae-qa-i{padding:30px 0 32px;border-top:1px solid #C2C5CC}
.ae-qa-i:first-child{padding-top:6px;border-top:0}
.ae-qa-i:last-child{padding-bottom:0}
.v9 .ae-qa-q{margin:0 0 14px;font-weight:700;font-size:16px;line-height:1.45;letter-spacing:0;color:#4f5565;text-wrap:balance}
.v9 .ae-qa-a{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ae-qa-a strong{display:block;margin:0 0 10px;font-weight:700;font-size:30px;line-height:1.22;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .ae-qa-more{display:flex;margin:10px 0 0;font-size:17px;line-height:1.4}
@media (max-width:1023px){.ae-qa-grid{grid-template-columns:minmax(0,1fr);gap:32px}}




/* ================= THE PHONE TYPE SCALE: written October 10, 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger. To be run again as each section is added ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .ae-go,.ai-clients-head .v9-sub,.ae-clients-head .v9-sub,.v9 .ae-prob-copy p,.v9 .ae-scope-sub,.v9 .ae-set p,.v9 .ae-more li,.v9 .ae-meas-copy p,.v9 .ae-meas-copy .ae-meas-more,.v9 .ae-ms-rows li,.v9 .ae-rev-copy p,.v9 .ae-lim-copy p,.v9 .ae-lim-copy .ae-lim-more,.v9 .ae-tk-note,.v9 .ae-start-copy p,.v9 .ae-post-arm .b,.v9 .ae-qa-a,.v9 .ae-qa-more{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .ae-tk-job{font-size:17px}
.v9-hero.ae-hero h1.ae-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 10.02)));line-height:1.12}
.v9-hero.ae-hero h1.ae-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.68)));line-height:1.12}
.v9-hero.ae-hero h1.ae-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.73)));line-height:1.12}
.v9 .ae-set h3{font-size:18px}
.v9 .ae-qa-a strong{font-size:26px}
}