/* Platform 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 (pe-*) 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 (this page has no tile there), 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}
body.v9-page #wb_menu .rt[aria-current="page"] b::after,body.v9-page #wb_menu .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 */
.pe-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 .pe-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}
.pe-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)}
.pe-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .pe-go:hover{color:#232834}.pe-go:hover .pe-go-l{text-decoration-color:#232834}.pe-go:hover .pe-go-a{transform:translateX(3px)}}
.v9 .pe-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.pe-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 */
.pe-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.pe-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.pe-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){.pe-clients-head{margin-bottom:32px}}
@media (max-width:560px){.pe-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)}
}

/* ================= PLATFORM ENGINEERING (this page's own) ================= */

/* ---------- this page's hero, as on Data Platforms & MLOps: 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: A "teams want to use" 8.32em, B "your teams
   build on" 9.02em, C "more building" 6.43em, D "for every team" 6.59em, E "your teams are" 6.72em. Up to 1100px the size
   follows the viewport, so that line takes 92% of the column at most, 56px at the largest; from 1101px, where the copy column
   is 560px, A, C, D and E run from 52px to 58px and B from 48px to 54px, which keeps the longer line within 509px (91%). 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.pe-hero h1.pe-h-a{font-size:min(56px,calc((100vw - 44px) / 9.05))}
.v9-hero.pe-hero h1.pe-h-b{font-size:min(56px,calc((100vw - 44px) / 9.8))}
.v9-hero.pe-hero h1.pe-h-c{font-size:min(56px,calc((100vw - 44px) / 7))}
.v9-hero.pe-hero h1.pe-h-d{font-size:min(56px,calc((100vw - 44px) / 7.15))}
.v9-hero.pe-hero h1.pe-h-e{font-size:min(56px,calc((100vw - 44px) / 7.3))}
@media (min-width:821px){.v9.pe-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.pe-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.pe-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.pe-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.pe-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.pe-hero h1.pe-h-a,.v9-hero.pe-hero h1.pe-h-c,.v9-hero.pe-hero h1.pe-h-d,.v9-hero.pe-hero h1.pe-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.pe-hero h1.pe-h-b{font-size:clamp(48px,4vw,54px)}
.v9-hero.pe-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.pe-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1200, and the box keeps that shape reserved from the first paint. On phones it sits below the
   form and runs to the window's edges (the canvas carries its own margin, so the tablet and the Services card are never
   cropped), so the words in the drawing are as large as they can be */
.pe-hero .v9-illo{aspect-ratio:1920/1200}
@media (max-width:560px){.pe-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px}}
/* the landing view, as on the sister pages: 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.pe-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.pe-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.pe-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as on the sister pages. The logos in the header and footer are widened to 44px
   tap areas with padding cancelled by margin, so nothing moves. The site's old hidden menu is held to no width until its
   script marks it loaded, so it can't cause sideways scroll ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ---------- anchors: a section with an anchor stops 24px below the top of the window ---------- */
.v9-sec[id]{scroll-margin-top:24px}

/* ---------- when every team builds its own way: the copy, then one question and the answers it gets, drawn as an internal
   search. The question sits in the search field, in ink; the three answers are its results, in grey and in quotation marks, each
   tagged with where it was found, so the reader sees one question with three answers from three places and none of them the
   one to trust. A white card in the family's line (ink outline, radius 20, a warm shade for depth); the field is bone and the
   results are divided by shade hairlines, so it reads as a search, not the hero's Services card of white rows on bone. No coral:
   the problem stays grey, and the coral arrives with the platform. The results settle in turn, once, as the section is revealed.
   Copy on the left and the search on the right from 1101px; the search under the copy below that. Not Data Platforms'
   questions that link down the page: nothing here is a link ---------- */
.pe-own{border-top:1px solid #E4DFD9}
.pe-own .v9-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 88px;align-items:center}
.pe-own-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .pe-own-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .pe-own-k{margin:0 0 16px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565}
.pe-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pe-srch{position:relative;margin:0 10px 10px 0;padding:22px 24px 6px;background:#fff;border:1.75px solid #232834;border-radius:20px;box-shadow:10px 10px 0 #E4DFD9}
.v9 .pe-srch-f{margin:0 0 4px;padding:15px 20px;border-radius:14px;background:#F1EEEA;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .pe-srch-r{margin:0;padding:0;list-style:none}
.v9 .pe-srch-r li{display:grid;justify-items:start;gap:10px;margin:0;padding:20px 4px 22px 12px;border-top:1px solid #E4DFD9}
.v9 .pe-srch-r li:first-child{border-top:0}
.v9 .pe-srch-a{display:block;font-weight:500;font-size:20px;line-height:1.4;color:#4f5565;text-indent:-.38em;text-wrap:balance}
.v9 .pe-srch-t{display:inline-block;padding:3px 12px;border-radius:999px;background:#F1EEEA;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.pe-srch-r li{opacity:0;transform:translateY(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.pe-srch-r li:nth-child(1){transition-delay:.35s}
.pe-srch-r li:nth-child(2){transition-delay:.6s}
.pe-srch-r li:nth-child(3){transition-delay:.85s}
.v9-rv.in .pe-srch-r li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pe-srch-r li{opacity:1;transform:none;transition:none}}
@media (max-width:1100px){.pe-own .v9-wrap{grid-template-columns:minmax(0,1fr)}.pe-own-q{max-width:640px}.v9 .pe-own-copy p{max-width:720px}}
@media (max-width:560px){.pe-srch{margin-right:6px;padding:14px 14px 2px;box-shadow:6px 6px 0 #E4DFD9}.v9 .pe-srch-f{padding:12px 14px}.v9 .pe-srch-r li{padding:16px 2px 18px 10px}}

/* ---------- review only: with showUnconfirmed on in Tweaks (or ?review in the address), everything hidden until it is confirmed
   is shown, each part with a note of what it waits on. Off by default, so the page shows only what is confirmed ---------- */
.pe-review [data-review]{display:block!important}
.pe-review [data-unconfirmed]{display:block!important;position:relative}
.pe-review [data-unconfirmed]::before{content:attr(data-unconfirmed);display:block;width:fit-content;max-width:100%;margin:0 0 16px;padding:5px 14px;border-radius:999px;background:#FDE0E6;font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:#232834;text-align:left}

/* ---------- a product for your engineers: the copy, then the items in a grid of three across from 1101px, two below that and one on phones,
   divided by tint hairlines. The lines run on each item's right and lower edges and are clipped at the grid's outer edge, so
   only the lines between items show, and the grid runs into the side space by its own padding, so the first column lines up
   with the copy. Each item is its icon's hover host: its icon's one coral part fits its meaning and arrives once with the
   section; pointing at the item plays the icon's hover Lottie once and holds, leaving plays it back (mouse and trackpad, from
   821px). Every item waits on a confirmation, so each is hidden, and so is the grid while all of them are; the link to Cloud,
   DevOps & Security follows. Not Data Platforms' row of four checks with no lines, Voice Agents' centred four, Mobile Apps'
   two-column list or Web & App Development's index ---------- */
.pe-plat{border-top:1px solid #E4DFD9}
.pe-plat-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .pe-plat-copy p{margin:0;max-width:720px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.pe-items{--pg:40px;margin:16px calc(-1 * var(--pg)) 0;overflow:hidden}
.v9 .pe-items-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -1px -1px 0;padding:0;list-style:none}
.v9 .pe-items-in li{margin:0;padding:40px var(--pg) 44px;box-shadow:1px 0 0 #C2C5CC,0 1px 0 #C2C5CC}
.v9 .pe-items-in li.pe-last{box-shadow:0 1px 0 #C2C5CC}
.v9 .pe-items .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 0 22px}
.v9 .pe-items h3{margin:0 0 10px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .pe-items p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.pe-items-in li .cb-ic{--d:.25s}
.pe-items-in li:nth-child(2) .cb-ic{--d:.33s}
.pe-items-in li:nth-child(3) .cb-ic{--d:.41s}
.pe-items-in li:nth-child(4) .cb-ic{--d:.49s}
.pe-items-in li:nth-child(5) .cb-ic{--d:.57s}
.pe-items-in li:nth-child(6) .cb-ic{--d:.65s}
/* until an item is confirmed the section is its copy and its link, so the copy carries its own quiet device: the clause the
   headline promises, "it succeeds only if teams choose to use it", in ink on the hero's blush marker, which sweeps in once,
   line by line, as the section is revealed. Ink on blush, not coral, so body-size text keeps its contrast (12.6:1) */
.pe-mark{color:#232834;background-image:linear-gradient(#FDE0E6,#FDE0E6);background-repeat:no-repeat;background-position:0 .2em;background-size:0% calc(100% - .28em);padding:0 .14em;margin:0 -.1em;border-radius:.12em;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .45s}
.v9-rv.in .pe-mark{background-size:100% calc(100% - .28em)}
@media (prefers-reduced-motion:reduce){.pe-mark{transition:none;background-size:100% calc(100% - .28em)}}
.pe-plat-more{margin-top:28px}
@media (max-width:1100px){.pe-items{--pg:32px}.v9 .pe-items-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.pe-items{--pg:22px}}
@media (max-width:560px){.v9 .pe-items-in{grid-template-columns:minmax(0,1fr)}.v9 .pe-items-in li{padding:32px var(--pg) 36px}.v9 .pe-items .cb-ic-box{margin-bottom:18px}}

/* ---------- start with the journey teams repeat most: the copy and its link to the blog post, and a quiet two-by-two in words.
   Across, how often teams repeat a journey; up, how slow it is today; ink axes on the left and below, tint hairlines between the
   quarters, and no figures. Four example journeys sit one to a quarter, at its outer corner. When the drawing is well in view
   the one that is both frequent and slow, Get a change into test, warms coral (in white type, as asked: 3.2:1), once, and holds; with
   reduced motion it is warm from the start. The drawing on the left from 1101px, for the page's rhythm, under the copy below
   that. On phones the quarters would be too narrow for the names, so it becomes a short list, the chosen journey first, each
   with its two words. Not UI/UX's table of stages against people, and not the blog post's table or code example. The "in your
   own accounts" line waits on ownership: hidden, and shown with a blush mark in review mode ---------- */
.pe-review span[data-unconfirmed]{display:inline!important;background:#FDE0E6;border-radius:4px}
.pe-review span[data-unconfirmed]::before{content:none}
.pe-first{border-top:1px solid #E4DFD9}
.pe-first .v9-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:center}
.pe-first-copy{order:2}
.pe-first-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .pe-first-copy p{margin:0 0 10px;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.pe-quad{order:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:14px;margin:0}
.v9 .pe-quad p{margin:0}
.v9 .pe-quad-ty{grid-column:2;grid-row:1;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.v9 .pe-quad-yl{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;padding:10px 0;font-weight:500;font-size:16px;line-height:1.4;color:#4f5565;text-align:right}
.v9 .pe-quad-plot{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:3/2;margin:0;padding:0;list-style:none;border-left:1.75px solid #232834;border-bottom:1.75px solid #232834;background:linear-gradient(#C2C5CC,#C2C5CC) 50% 0/1px 100% no-repeat,linear-gradient(#C2C5CC,#C2C5CC) 0 50%/100% 1px no-repeat}
.v9 .pe-quad-plot li{display:flex;min-width:0;margin:0;padding:14px}
.v9 .pe-quad-plot .q-tl{grid-area:1/1;align-items:flex-start;justify-content:flex-start}
.v9 .pe-quad-plot .q-tr{grid-area:1/2;align-items:flex-start;justify-content:flex-end}
.v9 .pe-quad-plot .q-bl{grid-area:2/1;align-items:flex-end;justify-content:flex-start}
.v9 .pe-quad-plot .q-br{grid-area:2/2;align-items:flex-end;justify-content:flex-end}
.v9 .pe-jn{display:block;max-width:100%;padding:10px 16px;border:1.5px solid #232834;border-radius:14px;background:#fff;font-weight:500;font-size:17px;line-height:1.35;color:#232834;text-wrap:balance;transition:background-color .7s cubic-bezier(.65,0,.35,1) .35s,border-color .7s cubic-bezier(.65,0,.35,1) .35s,color .7s cubic-bezier(.65,0,.35,1) .35s}
.pe-quad.go .q-first .pe-jn{background:#FA5478;border-color:#C43A5C;color:#fff}
@media (prefers-reduced-motion:reduce){.pe-quad .q-first .pe-jn{background:#FA5478;border-color:#C43A5C;color:#fff;transition:none}}
.pe-jt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v9 .pe-quad-x{grid-column:2;grid-row:3;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:500;font-size:16px;line-height:1.4;color:#4f5565}
.pe-quad-x b{font-weight:700;color:#232834;text-align:center}
@media (max-width:1100px){.pe-first .v9-wrap{grid-template-columns:minmax(0,1fr)}.pe-first-copy,.pe-quad{order:0}.pe-quad{width:100%;max-width:640px}.v9 .pe-first-copy p{max-width:720px}}
@media (max-width:560px){
.pe-quad{display:block}
.v9 .pe-quad-ty,.v9 .pe-quad-yl,.v9 .pe-quad-x{display:none}
.v9 .pe-quad-plot{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px;aspect-ratio:auto;border:0;background:none}
.v9 .pe-quad-plot li,.v9 .pe-quad-plot .q-tl,.v9 .pe-quad-plot .q-tr,.v9 .pe-quad-plot .q-bl,.v9 .pe-quad-plot .q-br{grid-area:auto;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 10px;padding:0}
.v9 .pe-quad-plot .q-first{order:-1}
.pe-jt{position:static;display:flex;gap:6px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
.pe-jt span{padding:2px 10px;border-radius:999px;background:#F1EEEA;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
}

/* ---------- measured by the teams who use it: the copy, and speed and stability read together. Two small bone cards in the
   family's line (ink outline, radius 20), Speed and Stability, each with its measure in the copy's words, joined by one ink line
   marked "Read together", the section's one coral part; the other measures beneath them, one line each between tint hairlines.
   No figures and no charts. The line draws across once as the section is revealed, then its words appear. On phones the cards
   stack and the line joins them downwards. The section stays white, so it doesn't echo Cloud's two points in a bone band or
   Data Platforms' two cards on a band. Every measure waits on "measuring the platform", so the whole section is hidden, and
   shown with its note in review mode ---------- */
.pe-review .v9-sec[data-unconfirmed]::before{margin:-48px auto 32px}
.pe-meas-sec{border-top:1px solid #E4DFD9}
.pe-meas-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .pe-meas-copy p{margin:0;max-width:720px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.pe-meas{margin-top:56px;max-width:1040px}
.pe-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,180px) minmax(0,1fr);align-items:stretch}
.pe-mc{display:grid;align-content:start;gap:12px;padding:28px 30px 32px;background:#F1EEEA;border:1.75px solid #232834;border-radius:20px}
.v9 .pe-mc-k{font-weight:700;font-size:16px;line-height:1.4;color:#4f5565}
.v9 .pe-mc p{margin:0;font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.02em;color:#232834;text-wrap:balance}
.pe-join{position:relative}
.pe-join::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.75px;margin-top:-.875px;background:#232834;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.65,0,.35,1) .3s}
.v9-rv.in .pe-join::before{transform:none}
.v9 .pe-join-l{position:absolute;left:0;right:0;bottom:calc(50% + 12px);font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c;text-align:center;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1) 1.1s}
.v9-rv.in .pe-join-l{opacity:1}
@media (prefers-reduced-motion:reduce){.pe-join::before{transform:none;transition:none}.v9 .pe-join-l{opacity:1;transition:none}}
.v9 .pe-mo{margin:32px 0 0;padding:0;list-style:none;max-width:720px}
.v9 .pe-mo li{margin:0;padding:16px 0;border-top:1px solid #C2C5CC;font-weight:500;font-size:19px;line-height:1.45;color:#232834;text-wrap:balance}
.v9 .pe-mo li:last-child{border-bottom:1px solid #C2C5CC}
@media (max-width:820px){.pe-meas{margin-top:44px}}
@media (max-width:640px){
.pe-pair{grid-template-columns:minmax(0,1fr)}
.pe-join{height:68px}
.pe-join::before{left:36px;right:auto;top:0;bottom:0;width:1.75px;height:auto;margin:0;transform:scaleY(0);transform-origin:50% 0}
.v9 .pe-join-l{left:58px;right:auto;bottom:auto;top:50%;transform:translateY(-50%);text-align:left}
.pe-mc{padding:22px 22px 24px}
}

/* ---------- looked after like a product: the copy, the platform's roadmap and the engagement line. Three columns, Asked for,
   Next and Live, each a list of plain white rows (tint outline, radius 12), not the hero's template cards or its Services
   card. A grey track runs from the request in Asked for to its place in Live, under the columns (down their left side on
   phones), drawn from the page's own measurements. When the roadmap is well in view, the Bookings team's request leaves Asked
   for, the page's second and last soft coral line carries it along the track and is gone, the request lands at the foot of
   Live and its outline warms to dark coral, and then the oldest item in Live turns grey and reads Retired: once, in turn, one
   change at a time, and it holds. Every row's place is held from the first paint, so nothing below moves. With reduced motion
   it shows the finished roadmap. Generic requests, no dates. Not Cloud's rhythm of routine work, Workflow's status board,
   which the reader drives, or Legacy's routing table. The whole section waits on running the platform as a product, and
   running it after launch or handing it over, so it is hidden, and shown with its note in review mode ---------- */
.pe-on{border-top:1px solid #E4DFD9}
.pe-on-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .pe-on-copy p,.v9 .pe-on-way p{margin:0;max-width:720px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.pe-road{position:relative;max-width:1040px;margin:56px 0 0;padding:0 0 64px}
.pe-road-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pe-road-svg path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pe-road-svg .tk{stroke:#E4DFD9}
.pe-road-svg .ln{stroke:#FA5478;stroke-opacity:.55;stroke-dasharray:0 100000;transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1) .7s}
.pe-road-cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.v9 .pe-rc-h{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.v9 .pe-rc ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.v9 .pe-rc li{display:grid;justify-items:start;gap:8px;margin:0;padding:14px 16px 15px;background:#fff;border:1.5px solid #C2C5CC;border-radius:12px;font-weight:500;font-size:18px;line-height:1.4;color:#232834;text-wrap:balance}
.v9 .pe-rt,.v9 .pe-rr{display:inline-block;padding:2px 10px;border-radius:999px;background:#F1EEEA;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.v9 .pe-rr{background:#fff;box-shadow:inset 0 0 0 1px #C2C5CC;opacity:0}
.v9 .pe-road .r-move{transition:opacity .5s cubic-bezier(.65,0,.35,1) .3s}
.v9 .pe-road.go .r-move{opacity:0}
.v9 .pe-road .r-land{opacity:0;transition:opacity .5s cubic-bezier(.2,.7,.2,1) 2.15s,border-color .6s cubic-bezier(.65,0,.35,1) 2.55s}
.v9 .pe-road.go .r-land{opacity:1;border-color:#C43A5C}
.v9 .pe-road .r-old{transition:background-color .6s cubic-bezier(.65,0,.35,1) 3.2s,color .6s cubic-bezier(.65,0,.35,1) 3.2s}
.v9 .pe-road.go .r-old{background:#F1EEEA;color:#4f5565}
.v9 .pe-road .r-old .pe-rr{transition:opacity .5s cubic-bezier(.65,0,.35,1) 3.4s}
.v9 .pe-road.go .r-old .pe-rr{opacity:1}
@media (prefers-reduced-motion:reduce){
.pe-road-svg .ln{display:none}
.v9 .pe-road .r-move{opacity:0;transition:none}
.v9 .pe-road .r-land{opacity:1;border-color:#C43A5C;transition:none}
.v9 .pe-road .r-old{background:#F1EEEA;color:#4f5565;transition:none}
.v9 .pe-road .r-old .pe-rr{opacity:1;transition:none}
}
.v9 .pe-on-way p{margin:0 0 10px}
@media (max-width:820px){.pe-road{margin-top:44px}}
@media (max-width:640px){.pe-road{padding:0 0 40px 26px}.pe-road-cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- let's build it better: the closing email form, centred, sized and behaving as the hero's at every width, with
   nothing after it ---------- */
.pe-cta .v9-h2{text-wrap:balance}
.pe-cta .v9-sub{text-wrap:pretty}


/* ================= THE PHONE TYPE SCALE: written 2 October 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .pe-go,.ai-clients-head .v9-sub,.pe-clients-head .v9-sub,.v9 .pe-own-copy p,.v9 .pe-own-k,.v9 .pe-plat-copy p,.v9 .pe-items p,.v9 .pe-first-copy p,.v9 .pe-jn,.v9 .pe-meas-copy p,.v9 .pe-on-copy p,.v9 .pe-on-way p,.v9 .pe-rc li{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .pe-srch-a,.v9 .pe-mo li{font-size:17px}
.v9-hero.pe-hero h1.pe-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.05)));line-height:1.12}
.v9-hero.pe-hero h1.pe-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.8)));line-height:1.12}
.v9-hero.pe-hero h1.pe-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 7)));line-height:1.12}
.v9-hero.pe-hero h1.pe-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.15)));line-height:1.12}
.v9-hero.pe-hero h1.pe-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.3)));line-height:1.12}
.v9 .pe-srch-f,.v9 .pe-items h3,.v9 .pe-mc p{font-size:20px}
}