/* Homepage v2, built on the Workflow Automation page: its shell, 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);
   everything here scopes to .v9 or body.v9-page. Page-specific rules (hp-*) 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}}
/* Home is marked in the dark menu's page list by markMenu(); the menu styles its current page itself */

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

/* ---------- this page's hero. The headline holds two lines at every width: "We build software" is the longer line
   (8.41em in Sailec Bold at -.03em; "that thinks" is 4.92em), so each size keeps it inside the copy column with room to
   spare: up to 1100px it is set from the viewport (the line takes 93% of the column at most, 60px at the largest), and
   from 1101px, where the copy column is 560px, it grows to 62px (521px). The eyebrow's tracking eases a little below
   390px so it holds one line on the smallest phones ---------- */
.v9-hero.hp-hero h1{font-size:min(60px,calc((100vw - 44px) / 9))}
@media (max-width:389px){.hp-hero .v9-eyebrow{letter-spacing:.15em}}
@media (max-width:560px){.v9-hero.hp-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.hp-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.hp-hero h1{font-size:clamp(50px,4.4vw,62px)}
.v9-hero.hp-hero .v9-lead{max-width:520px}
/* the drawing fills its canvas edge to edge, so it is enlarged a little into the page margin (6%, well inside the gutter at
   every width) but not into the column gap, so the full 48px stays between the copy and the product window */
.hp-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the product window is wider than it is tall: its canvas is 1920 x 1480, and the box keeps that shape reserved while it loads */
.hp-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view: with the eyebrow gone and the header slimmer, the hero sits lower so the first screen feels settled.
   On desktop its top space follows the window's height (about 58px on a 720px-tall laptop, 72px at 900, 86px at 1080),
   so the headline, form and product window hold the middle of the first view and the next section still shows below */
.v9-hero.hp-hero{padding:48px 0 64px}
@media (min-width:1101px){.v9-hero.hp-hero{padding:clamp(40px,8vh,96px) 0 72px}}
@media (max-width:560px){.v9-hero.hp-hero{padding:32px 0 48px}}

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

/* ---------- what are you looking to do: the page's fork. One hairline leaves the question and branches three ways, each branch
   landing on its path's icon: the menu's three route pictures, drawn for white (tools/hp-icons-scene.js). From 1100px the paths
   stand in three columns under one bar, their rows aligned; below that they stack, and the fork becomes a trunk down the left
   with a branch to each. The lines are drawn once in tint and hold, arriving with their paths. Each path is one target: pointing
   anywhere on it plays its icon and readies its link ---------- */
.hp-fork .v9-h2{margin:0;max-width:760px;text-wrap:balance}
.hp-paths{position:relative;display:grid;margin:0;padding:0;list-style:none}
.hp-path{position:relative;margin:0;padding:0}
.hp-path::before,.hp-path::after{content:"";position:absolute;box-sizing:border-box;pointer-events:none}
.hp-path h3{margin:0 0 10px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.hp-path p{margin:0 0 12px;max-width:640px;font-size:17px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.v9 .hp-path .hp-go{align-self:end;justify-self:start;margin-top:0}
.hp-path .hp-go::after{content:"";position:absolute;inset:0}
.hp-path .cb-ic{--d:.3s}.hp-path:nth-child(2) .cb-ic{--d:.38s}.hp-path:nth-child(3) .cb-ic{--d:.46s}
.hp-path.v9-rv:nth-child(2){transition-delay:.08s}.hp-path.v9-rv:nth-child(3){transition-delay:.16s}
@media (hover:hover){.hp-path:hover .hp-go-l{text-decoration-color:#232834}.hp-path:hover .hp-go-a{transform:translateX(3px)}}
@media (min-width:1100px){
.hp-fork{--g:56px}
.hp-paths{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:var(--g);margin-top:16px;padding-top:72px}
.hp-path{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.hp-path .cb-ic-box{grid-row:1;margin:0 0 18px -4px}
.hp-path:first-child::before{top:-72px;left:31px;width:1px;height:72px;background:#C2C5CC}
.hp-path:nth-child(2)::before,.hp-path:nth-child(3)::before{top:-40px;height:40px;border-top:1px solid #C2C5CC;border-right:1px solid #C2C5CC;border-top-right-radius:16px}
.hp-path:nth-child(2)::before{left:calc(32px - 100% - var(--g));width:calc(100% + var(--g))}
.hp-path:nth-child(3)::before{left:calc(16px - 100% - var(--g));width:calc(100% + var(--g) + 16px)}
}
@media (min-width:1100px) and (max-width:1239px){.hp-fork{--g:40px}}
@media (max-width:1099px){
.hp-paths{grid-template-columns:minmax(0,1fr);row-gap:44px;margin-top:12px;padding:44px 0 0 32px}
.hp-path{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-items:start}
.hp-path .cb-ic-box{grid-row:1/4;grid-column:1;width:64px;height:64px;margin:-6px 0 0 -4px}
.hp-path > h3,.hp-path > p,.hp-path > .hp-go{grid-column:2}
.hp-path::before{left:-21px;top:-44px;bottom:0;width:1px;background:#C2C5CC}
.hp-path::after{left:-20px;top:26px;width:16px;height:1px;background:#C2C5CC}
.hp-path:last-child::before{bottom:auto;height:58px}
.hp-path:last-child::after{left:-21px;top:14px;width:17px;height:13px;background:none;border-left:1px solid #C2C5CC;border-bottom:1px solid #C2C5CC;border-bottom-left-radius:12px}
}
/* phones: the title sits beside its icon, and the paragraph and link take the full width under them, so every link holds
   one line */
@media (max-width:560px){
.hp-path{column-gap:14px;align-items:center}
.hp-path .cb-ic-box{grid-row:1}
.hp-path > h3{margin:0;font-size:20px}
.hp-path > p,.hp-path > .hp-go{grid-column:1/-1}
.hp-path > p{margin:14px 0 12px}
}
/* the quiet line under the paths, with its own link; not a fourth path */
.hp-fork-not{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 40px;margin:72px 0 0;padding:28px 0 0;border-top:1px solid #E4DFD9;font-size:17px;line-height:1.65;color:#4f5565}
.hp-fork-not > span{flex:1 1 420px;max-width:700px;text-wrap:pretty}
.hp-fork-not b{font-weight:500;color:#232834}
.v9 .hp-fork-not .hp-go{flex:none;margin-top:0}
@media (max-width:1099px){.hp-fork-not{margin-top:52px}}
@media (prefers-reduced-motion:reduce){.hp-path.v9-rv{transition-delay:0s}}

/* ---------- our work: three real screens, cropped from each portfolio board to the software itself, the same size side by
   side from 900px and one above the other below it. The screens are 832px wide at most (the boards are 1000px), so three
   across is the largest they stay sharp on high-density screens. Each keeps its 16:9 space while it loads; its source is set
   from the page's logic as the section nears the screen, and it fades in once. The whole card is the link ---------- */
.hp-work-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.hp-work-head .v9-h2{margin:0}
.hp-work-lead{margin:0;max-width:620px;font-size:19px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.hp-work-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr;gap:0 40px;margin:0;padding:0;list-style:none}
.hp-case{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;margin:0;padding:0}
.hp-shot{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#F1EEEA}
.hp-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(35,40,52,.12);pointer-events:none}
.hp-shot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1)}
.hp-shot img.on{opacity:1}
.hp-case h3{margin:22px 0 8px;font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.v9 .hp-case h3 a{color:#232834;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.hp-case h3 a::after{content:"";position:absolute;inset:0;border-radius:16px}
.v9 .hp-case h3 a:focus-visible{outline:none}
.hp-case h3 a:focus-visible::after{outline:2px solid #232834;outline-offset:6px}
.hp-case p{margin:0;font-size:17px;line-height:1.65;color:#4f5565;text-wrap:pretty}
@media (hover:hover){.hp-case:hover h3 a{text-decoration-color:#C2C5CC}}
.hp-case.v9-rv:nth-child(2){transition-delay:.08s}.hp-case.v9-rv:nth-child(3){transition-delay:.16s}
.v9 .hp-work-more{margin-top:44px}
@media (max-width:899px){.hp-work-head{margin-bottom:36px}.hp-work-list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:44px}.hp-case{display:flex;flex-direction:column;max-width:560px}.v9 .hp-work-more{margin-top:36px}}
@media (max-width:560px){.hp-work-lead{font-size:17px}.hp-case h3{margin-top:18px;font-size:20px}}
@media (prefers-reduced-motion:reduce){.hp-shot img{transition:none}.hp-case.v9-rv{transition-delay:0s}}

/* ---------- it's all connected: the circle, as on the live homepage and redrawn in this page's style. Nine services sit on
   one ring round a centre; choosing one opens it: the centre says what it is and links to its page, and the ring shows the
   services it connects with, each reached by one short soft coral line along its spoke (the page's second flowing line).
   One view at a time: the old view eases out before the new one eases in, with no bounce. Positions come from each node's
   angle (--a) on the ring. From 1100px the copy sits on the left and the circle on the right; below that they stack, and
   under 700px the same views become tiles under the centre's text ---------- */
.hp-sys-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.hp-sys-head .v9-h2{margin:0;text-align:center}
.hp-sys-lead{margin:0;max-width:600px;text-align:center;font-size:19px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.hp-sys-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 56px;max-width:980px;margin:48px auto 0}
.hp-sys-body p{margin:0;max-width:640px;font-size:17px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.hp-orbit-wrap{width:100%;max-width:880px;margin:44px auto 0}
.hp-orbit{position:relative;container-type:inline-size;aspect-ratio:1/1;margin:0}
.hp-ring{position:absolute;inset:12%;transition:opacity .4s cubic-bezier(.65,0,.35,1)}
/* the opening: the ring draws itself once, clockwise from the top, led by one short soft coral line that is gone at the end */
.hp-ring svg{display:block;width:100%;height:100%;overflow:visible;rotate:-90deg}
.hp-ring circle{fill:none;vector-effect:non-scaling-stroke}
.hp-ring .trk{stroke:#E4DFD9;stroke-width:1.5px;stroke-dasharray:100 100;stroke-dashoffset:100}
.hp-ring .tr{stroke:#FA5478;stroke-width:3px;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:6;opacity:0}
.hp-orbit.is-drawn .hp-ring .trk{animation:hpRing 1.3s cubic-bezier(.65,0,.35,1) .3s both}
.hp-orbit.is-drawn .hp-ring .tr{animation:hpTrace 1.3s cubic-bezier(.65,0,.35,1) .3s both}
@keyframes hpRing{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes hpTrace{0%{stroke-dashoffset:6;opacity:1}86%{opacity:1}100%{stroke-dashoffset:-94;opacity:0}}
.hp-orbit.lay-open .hp-ring{opacity:.55}
/* spokes, as in the first version: a warm track from the centre to each service that eases in as its node lands, carrying one
   short soft coral line out once, and it is gone */
.hp-edge{position:absolute;z-index:0;height:2px;margin-top:-1px;overflow:hidden;border-radius:1px;background:#E4DFD9;transform-origin:0 50%;opacity:0;transition:opacity .4s cubic-bezier(.65,0,.35,1) var(--d)}
.hp-orbit.is-in .hp-edge{opacity:1}
.hp-orbit.is-out .hp-edge{opacity:0;transition-duration:.2s;transition-delay:0s}
.hp-edge i{position:absolute;top:0;left:-44px;width:44px;height:100%;border-radius:1px;background:#FA5478}
.hp-orbit.is-in .hp-edge i{animation:hpEdge .9s cubic-bezier(.65,0,.35,1) var(--d) both}
@keyframes hpEdge{from{left:-44px}to{left:100%}}
.hp-orbit .hp-oic{border-radius:50%;background:#fff}
.hp-orbit .hp-nl{padding:2px 6px;border-radius:6px;background:#fff}
.hp-spk{position:absolute;left:50%;top:50%;width:calc(22.5cqw - 40px);height:2px;margin-top:-1px;overflow:hidden;background:#E4DFD9;transform-origin:0 50%;transform:rotate(var(--a)) translateX(calc(15.5cqw + 6px));opacity:0;transition:opacity .4s cubic-bezier(.65,0,.35,1)}
.hp-spk i{position:absolute;top:0;left:-44px;width:44px;height:100%;border-radius:1px;background:#FA5478}
.hp-orbit.is-in .hp-spk{opacity:1}
.hp-orbit.is-in .hp-spk i{animation:hpSpk .9s cubic-bezier(.65,0,.35,1) calc(var(--k) * 70ms + 80ms) both}
@keyframes hpSpk{from{left:-44px}to{left:100%}}
.hp-core{position:absolute;left:50%;top:50%;z-index:2;transition:scale .5s cubic-bezier(.2,.7,.2,1),opacity .5s cubic-bezier(.65,0,.35,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:31%;aspect-ratio:1/1;padding:24px;border:1.5px solid #232834;border-radius:50%;background:#fff;text-align:center;transform:translate(-50%,-50%)}
.hp-core > *{opacity:0;transition:opacity .35s cubic-bezier(.65,0,.35,1) .1s}
.hp-orbit.is-in .hp-core > *,.hp-orbit.is-pulse .hp-core > *{opacity:1}
@media (min-width:700px){.hp-orbit.is-pre.is-home .hp-core{scale:.94;opacity:0}}
.hp-core-t{margin:0;text-align:center;font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.hp-core-d{margin:0;text-align:center;font-size:15.5px;line-height:1.45;color:#4f5565;text-wrap:balance}
.v9 .hp-core-go{min-height:40px;margin-top:0;font-size:15px}
.hp-back{position:absolute;left:0;top:0;z-index:3;display:inline-flex;white-space:nowrap;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid #232834;border-radius:22px;background:#fff;font:inherit;font-weight:700;font-size:15px;color:#232834;cursor:pointer;opacity:0;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.hp-orbit.is-in .hp-back{opacity:1}
.hp-back:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (hover:hover){.hp-back:hover{background:#F1EEEA}}
.hp-nodes{margin:0;padding:0;list-style:none}
.hp-node{position:absolute;left:calc(50% + 38% * cos(var(--a)));top:calc(50% + 38% * sin(var(--a)));z-index:1;width:150px;margin:-28px 0 0 -75px;opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1),left .8s cubic-bezier(.2,.7,.2,1),top .8s cubic-bezier(.2,.7,.2,1)}
.hp-orbit.is-in .hp-node{opacity:1;transition-delay:calc(var(--k) * 90ms + 60ms)}
/* before it opens, the nodes wait at the centre; the centre settles in, then the nodes open out clockwise */
@media (min-width:700px){.hp-orbit.is-pre .hp-node,.hp-orbit.is-pulse .hp-node{left:50% !important;top:50% !important;transition:none}}
.hp-orbit.is-out .hp-node{opacity:0;transition-duration:.22s;transition-delay:0s}
.hp-orbit .n9.k0{--a:-90deg;--k:0}.hp-orbit .n9.k1{--a:-50deg;--k:1}.hp-orbit .n9.k2{--a:-10deg;--k:2}.hp-orbit .n9.k3{--a:30deg;--k:3}.hp-orbit .n9.k4{--a:70deg;--k:4}.hp-orbit .n9.k5{--a:110deg;--k:5}.hp-orbit .n9.k6{--a:150deg;--k:6}.hp-orbit .n9.k7{--a:190deg;--k:7}.hp-orbit .n9.k8{--a:230deg;--k:8}
.hp-orbit .n4.k0{--a:-135deg;--k:0}.hp-orbit .n4.k1{--a:-45deg;--k:1}.hp-orbit .n4.k2{--a:45deg;--k:2}.hp-orbit .n4.k3{--a:135deg;--k:3}
.hp-orbit .n7.k0{--a:-90deg;--k:0}.hp-orbit .n7.k1{--a:-38.57deg;--k:1}.hp-orbit .n7.k2{--a:12.86deg;--k:2}.hp-orbit .n7.k3{--a:64.29deg;--k:3}.hp-orbit .n7.k4{--a:115.71deg;--k:4}.hp-orbit .n7.k5{--a:167.14deg;--k:5}.hp-orbit .n7.k6{--a:218.57deg;--k:6}
/* a connected service, one step away: it opens in turn, so it carries an arrow */
.hp-node.is-link .hp-nl::after{content:" \2192";font-weight:500}
/* each icon's coral part warms once its node has landed, and holds */
.hp-orbit-wrap.v9-rv.in .hp-orbit .cb-ic .a{opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1) 0s}
.hp-orbit-wrap.v9-rv.in .hp-orbit.is-in .cb-ic .a{opacity:1;transition-delay:calc(var(--k) * 90ms + 700ms)}
.hp-nb{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin:0;padding:0;border:0;border-radius:12px;background:none;font:inherit;color:#232834;text-align:center}
button.hp-nb{cursor:pointer}
button.hp-nb:focus-visible{outline:2px solid #232834;outline-offset:6px}
.hp-oic.cb-ic-box{grid-row:auto;flex:none;width:56px;height:56px;margin:0}
.cb-ic .wk{stroke:#fff}
.hp-nl{font-weight:700;font-size:15.5px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
@media (hover:hover){button.hp-nb:hover .hp-nl{text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:5px}}
@media (max-width:899px){.hp-orbit-wrap{margin-top:36px}.hp-sys-body{grid-template-columns:minmax(0,1fr);margin-top:36px}}
@media (max-width:1099px) and (min-width:700px){.hp-node{width:132px;margin-left:-66px}.hp-nl{font-size:14.5px}.hp-core-t{font-size:20px}.hp-core-d{font-size:14.5px}}
@media (max-width:699px){
.hp-orbit{container-type:normal;aspect-ratio:auto;display:flex;flex-direction:column;gap:14px}
.hp-ring,.hp-spk,.hp-edge{display:none}
.hp-back{position:relative;align-self:flex-start}
.hp-core{position:relative;left:auto;top:auto;width:auto;aspect-ratio:auto;align-items:flex-start;padding:20px;border:1px solid #E4DFD9;border-radius:18px;text-align:left;transform:none}
.hp-core-t{font-size:20px;text-align:left}
.hp-core-d{font-size:16px;text-align:left;text-wrap:pretty}
.hp-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hp-orbit.is-open .hp-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-node.is-link .hp-nb{border-color:#C2C5CC}
.hp-sys-head{align-items:flex-start;text-align:left}.hp-sys-head .v9-h2,.hp-sys-lead{text-align:left}
.hp-node{position:relative;left:auto !important;top:auto !important;display:flex;width:auto;margin:0}
.hp-nb{box-sizing:border-box;flex:1 1 auto;min-height:112px;padding:14px 8px 12px;border:1px solid #E4DFD9;border-radius:16px;justify-content:flex-start}
.hp-oic.cb-ic-box{width:48px;height:48px}
.hp-nl{font-size:14.5px}
}
@media (max-width:560px){.hp-sys-lead{font-size:17px}}
@media (prefers-reduced-motion:reduce){.hp-orbit *{transition:none !important;animation:none !important}.hp-orbit.is-pre .hp-core{scale:1;opacity:1}.hp-ring .trk{stroke-dashoffset:0}.hp-ring .tr{display:none}}

/* ---------- from the first conversation to working software: the four stages beside a project plan drawn as software. A
   line marking today moves across the plan's timeline and each stage changes once as it arrives: planned (a light outline),
   under way (ink, its warm fill growing with the line), done (full, with a fine ink tick inside the first two). Design and engineering run side by side in short stages,
   each ending in a review (the diamonds fill); the launch milestone is the one coral part and warms; improvements then ship
   one after another (the dots) and the line holds inside that last bar: the work carries on. The window plays only while on screen, eases back and begins again; with reduced motion it
   shows the finished plan ---------- */
.hp-plan .v9-h2{margin:0;max-width:760px;text-wrap:balance}
.hp-plan-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:start;margin-top:44px}
.hp-plan-rows{margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.hp-pr{margin:0;padding:22px 0 24px;border-top:1px solid #E4DFD9}
.hp-pr h3{margin:0 0 8px;font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.hp-pr p{margin:0;font-size:17px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.hp-pr.v9-rv:nth-child(2){transition-delay:.06s}.hp-pr.v9-rv:nth-child(3){transition-delay:.12s}.hp-pr.v9-rv:nth-child(4){transition-delay:.18s}
.hp-road{--lc:160px;align-self:center;margin:0;border:1.5px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.hp-rd-bar{display:flex;align-items:center;gap:7px;height:46px;padding:0 18px;background:#F1EEEA;border-bottom:1px solid #E4DFD9}
.hp-rd-bar i{width:10px;height:10px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%;background:#fff}
.hp-rd-bar b{margin-left:10px;font-weight:700;font-size:15px;color:#232834}
.hp-rd-body{position:relative;padding:44px 0 16px}
.hp-rd-grid{position:absolute;top:38px;bottom:16px;left:var(--lc);right:48px;background:repeating-linear-gradient(90deg,#EDE9E4 0 1px,transparent 1px 20%)}
.hp-rd-row{position:relative;display:grid;grid-template-columns:var(--lc) minmax(0,1fr);align-items:center;min-height:84px;padding-right:48px;border-top:1px solid #F1EEEA}
.hp-rd-row.tall{min-height:120px}
.hp-rd-l{padding:0 14px 0 22px;font-weight:700;font-size:15px;line-height:1.25;color:#232834}
.hp-rd-t{position:relative;align-self:stretch}
.hp-rb{position:absolute;top:50%;height:14px;margin-top:-7px;box-sizing:border-box;overflow:hidden;border:1.25px solid #D6D1CA;border-radius:7px;background:#fff}
.hp-rb::before{content:"";position:absolute;inset:0;background:#E4DFD9;transform-origin:0 50%;scale:0 1}
.hp-rb.b1{left:0;width:18%}.hp-rb.b2{left:13%;width:18%}.hp-rb.b4{left:79%;right:0}
.hp-rb.sm{height:10px;margin-top:0;border-radius:5px}
.hp-rb.d1{left:30%;width:13%}.hp-rb.d2{left:45%;width:13%}.hp-rb.d3{left:60%;width:11%}
.hp-rb.e1{left:32%;width:12%}.hp-rb.e2{left:46%;width:13%}.hp-rb.e3{left:61%;width:11%}
.hp-rb.d1,.hp-rb.d2,.hp-rb.d3{top:38px}.hp-rb.e1,.hp-rb.e2,.hp-rb.e3{top:70px}
.hp-rb s{position:absolute;z-index:1;right:7px;top:50%;width:10px;height:10px;margin-top:-5px;opacity:0}
.hp-rb s::after{content:"";position:absolute;left:3.2px;top:0;width:3.4px;height:7px;border:solid #232834;border-width:0 1.6px 1.6px 0;rotate:40deg}
.hp-rd-ln{position:absolute;right:71%;padding-right:10px;font-weight:500;font-size:12.5px;line-height:14px;color:#4f5565;white-space:nowrap}
.hp-rd-ln.d{top:36px}.hp-rd-ln.e{top:68px}
.hp-rr{position:absolute;top:54px;width:11px;height:11px;margin-left:-5.5px;box-sizing:border-box;border:1.25px solid #D6D1CA;background:#fff;rotate:45deg}
.hp-rr.r1{left:44.5%}.hp-rr.r2{left:59.5%}.hp-rr.r3{left:72%}
.hp-rm{position:absolute;top:50%;left:75.5%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;box-sizing:border-box;border:1.25px solid #D6D1CA;background:#fff;rotate:45deg}
.hp-rp{position:absolute;z-index:1;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#232834;opacity:0}
.hp-rp.p1{left:85%}.hp-rp.p2{left:91%}.hp-rp.p3{left:97%}
.hp-rd-now{position:absolute;top:30px;bottom:16px;left:var(--lc);right:48px;pointer-events:none}
.hp-rd-now i{position:absolute;top:0;bottom:0;left:0;width:0;border-left:1.5px solid #232834;opacity:0}
@keyframes hpO_b1{0%{border-color:#D6D1CA}5.9%{border-color:#D6D1CA}8.5%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_b1{0%{scale:0 1;opacity:1}6%{scale:0 1;opacity:1}20.4%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_b2{0%{border-color:#D6D1CA}16.3%{border-color:#D6D1CA}18.9%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_b2{0%{scale:0 1;opacity:1}16.4%{scale:0 1;opacity:1}30.8%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_d1{0%{border-color:#D6D1CA}29.9%{border-color:#D6D1CA}32.5%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_d1{0%{scale:0 1;opacity:1}30%{scale:0 1;opacity:1}40.4%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_d2{0%{border-color:#D6D1CA}41.9%{border-color:#D6D1CA}44.5%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_d2{0%{scale:0 1;opacity:1}42%{scale:0 1;opacity:1}52.4%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_d3{0%{border-color:#D6D1CA}53.9%{border-color:#D6D1CA}56.5%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_d3{0%{scale:0 1;opacity:1}54%{scale:0 1;opacity:1}62.8%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_e1{0%{border-color:#D6D1CA}31.5%{border-color:#D6D1CA}34.1%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_e1{0%{scale:0 1;opacity:1}31.6%{scale:0 1;opacity:1}41.2%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_e2{0%{border-color:#D6D1CA}42.7%{border-color:#D6D1CA}45.3%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_e2{0%{scale:0 1;opacity:1}42.8%{scale:0 1;opacity:1}53.2%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_e3{0%{border-color:#D6D1CA}54.7%{border-color:#D6D1CA}57.3%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_e3{0%{scale:0 1;opacity:1}54.8%{scale:0 1;opacity:1}63.6%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpO_b4{0%{border-color:#D6D1CA}69.1%{border-color:#D6D1CA}71.7%{border-color:#232834}90%{border-color:#232834}96%{border-color:#D6D1CA}100%{border-color:#D6D1CA}}
@keyframes hpF_b4{0%{scale:0 1;opacity:1}69.2%{scale:0 1;opacity:1}86%{scale:1 1;opacity:1}90%{scale:1 1;opacity:1}96%{scale:1 1;opacity:0}100%{scale:0 1;opacity:0}}
@keyframes hpC1{0%{opacity:0}20.3%{opacity:0}23.4%{opacity:1}90%{opacity:1}96%{opacity:0}100%{opacity:0}}
@keyframes hpC2{0%{opacity:0}30.7%{opacity:0}33.8%{opacity:1}90%{opacity:1}96%{opacity:0}100%{opacity:0}}
@keyframes hpR1{0%{border-color:#D6D1CA;background-color:#fff}41.5%{border-color:#D6D1CA;background-color:#fff}44.1%{border-color:#232834;background-color:#232834}90%{border-color:#232834;background-color:#232834}96%{border-color:#D6D1CA;background-color:#fff}100%{border-color:#D6D1CA;background-color:#fff}}
@keyframes hpR2{0%{border-color:#D6D1CA;background-color:#fff}53.5%{border-color:#D6D1CA;background-color:#fff}56.1%{border-color:#232834;background-color:#232834}90%{border-color:#232834;background-color:#232834}96%{border-color:#D6D1CA;background-color:#fff}100%{border-color:#D6D1CA;background-color:#fff}}
@keyframes hpR3{0%{border-color:#D6D1CA;background-color:#fff}63.5%{border-color:#D6D1CA;background-color:#fff}66.1%{border-color:#232834;background-color:#232834}90%{border-color:#232834;background-color:#232834}96%{border-color:#D6D1CA;background-color:#fff}100%{border-color:#D6D1CA;background-color:#fff}}
@keyframes hpM{0%{border-color:#D6D1CA;background-color:#fff}66.3%{border-color:#D6D1CA;background-color:#fff}70.4%{border-color:#C43A5C;background-color:#FA5478}90%{border-color:#C43A5C;background-color:#FA5478}96%{border-color:#D6D1CA;background-color:#fff}100%{border-color:#D6D1CA;background-color:#fff}}
@keyframes hpP1{0%{opacity:0;scale:.4}73.9%{opacity:0;scale:.4}76.5%{opacity:1;scale:1}90%{opacity:1;scale:1}96%{opacity:0;scale:.4}100%{opacity:0;scale:.4}}
@keyframes hpP2{0%{opacity:0;scale:.4}78.7%{opacity:0;scale:.4}81.3%{opacity:1;scale:1}90%{opacity:1;scale:1}96%{opacity:0;scale:.4}100%{opacity:0;scale:.4}}
@keyframes hpP3{0%{opacity:0;scale:.4}83.5%{opacity:0;scale:.4}86.1%{opacity:1;scale:1}90%{opacity:1;scale:1}96%{opacity:0;scale:.4}100%{opacity:0;scale:.4}}
@keyframes hpNow{0%{left:0%;opacity:0}3%{left:0%;opacity:0}6%{left:0%;opacity:1}86%{left:100%;opacity:1}90%{left:100%;opacity:0}100%{left:100%;opacity:0}}
.hp-road .hp-rb.b1{animation:hpO_b1 9s linear infinite paused}
.hp-road .hp-rb.b1::before{animation:hpF_b1 9s linear infinite paused}
.hp-road .hp-rb.b2{animation:hpO_b2 9s linear infinite paused}
.hp-road .hp-rb.b2::before{animation:hpF_b2 9s linear infinite paused}
.hp-road .hp-rb.d1{animation:hpO_d1 9s linear infinite paused}
.hp-road .hp-rb.d1::before{animation:hpF_d1 9s linear infinite paused}
.hp-road .hp-rb.d2{animation:hpO_d2 9s linear infinite paused}
.hp-road .hp-rb.d2::before{animation:hpF_d2 9s linear infinite paused}
.hp-road .hp-rb.d3{animation:hpO_d3 9s linear infinite paused}
.hp-road .hp-rb.d3::before{animation:hpF_d3 9s linear infinite paused}
.hp-road .hp-rb.e1{animation:hpO_e1 9s linear infinite paused}
.hp-road .hp-rb.e1::before{animation:hpF_e1 9s linear infinite paused}
.hp-road .hp-rb.e2{animation:hpO_e2 9s linear infinite paused}
.hp-road .hp-rb.e2::before{animation:hpF_e2 9s linear infinite paused}
.hp-road .hp-rb.e3{animation:hpO_e3 9s linear infinite paused}
.hp-road .hp-rb.e3::before{animation:hpF_e3 9s linear infinite paused}
.hp-road .hp-rb.b4{animation:hpO_b4 9s linear infinite paused}
.hp-road .hp-rb.b4::before{animation:hpF_b4 9s linear infinite paused}
.hp-road .hp-rb.b1 s{animation:hpC1 9s linear infinite paused}
.hp-road .hp-rb.b2 s{animation:hpC2 9s linear infinite paused}
.hp-road .hp-rr.r1{animation:hpR1 9s linear infinite paused}
.hp-road .hp-rr.r2{animation:hpR2 9s linear infinite paused}
.hp-road .hp-rr.r3{animation:hpR3 9s linear infinite paused}
.hp-road .hp-rm{animation:hpM 9s linear infinite paused}
.hp-road .hp-rp.p1{animation:hpP1 9s linear infinite paused}
.hp-road .hp-rp.p2{animation:hpP2 9s linear infinite paused}
.hp-road .hp-rp.p3{animation:hpP3 9s linear infinite paused}
.hp-road .hp-rd-now i{animation:hpNow 9s linear infinite paused}
.hp-road.is-play .hp-rb,.hp-road.is-play .hp-rb::before,.hp-road.is-play .hp-rb s,.hp-road.is-play .hp-rr,.hp-road.is-play .hp-rm,.hp-road.is-play .hp-rp,.hp-road.is-play .hp-rd-now i{animation-play-state:running}
@media (max-width:999px){.hp-plan-grid{grid-template-columns:minmax(0,1fr)}.hp-road{order:-1}}
@media (max-width:560px){.hp-road{--lc:96px}.hp-rd-row{min-height:66px}.hp-rd-row.tall{min-height:108px}.hp-rd-l{padding:0 8px 0 14px;font-size:12.5px}.hp-rd-ln{display:none}.hp-pr h3{font-size:20px}.hp-rd-row,.hp-rd-grid,.hp-rd-now{padding-right:0}.hp-rd-row{padding-right:34px}.hp-rd-grid,.hp-rd-now{right:34px}}
@media (prefers-reduced-motion:reduce){.hp-road.hp-road *,.hp-road.hp-road *::before{animation-play-state:paused !important;animation-delay:-8.1s !important}.hp-rd-now{display:none}.hp-pr.v9-rv{transition-delay:0s}}

/* ---------- help what you build perform: the page's quietest section, after the engineering, and its one bone band. The three
   questions of its first paragraph are pulled out beside the words, each with an icon from the circle's set (search, to be
   found; a book, to understand; the chevron, for the next step) and its hover Lottie. Nothing else moves ---------- */
.hp-grow .v9-wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head qs" "p1 qs" "p2 qs" "go qs";column-gap:72px;align-items:start}
.hp-grow .v9-h2{grid-area:head;margin:0 0 18px;max-width:560px;text-wrap:balance}
.hp-grow-p1{grid-area:p1}.hp-grow-p2{grid-area:p2}
.hp-grow p{margin:0 0 14px;max-width:560px;font-size:17px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.v9 .hp-grow-go{grid-area:go;justify-self:start;margin-top:4px}
.hp-qs{grid-area:qs;align-self:center;display:flex;flex-direction:column;gap:24px;margin:0;padding:0;list-style:none}
.hp-q{display:flex;align-items:center;gap:18px;margin:0}
.hp-q .hp-oic.cb-ic-box{width:52px;height:52px;margin:0}
.hp-grow .hp-q p{margin:0;max-width:none;font-weight:500;font-size:21px;line-height:1.35;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.hp-q.v9-rv:nth-child(2){transition-delay:.08s}.hp-q.v9-rv:nth-child(3){transition-delay:.16s}
@media (max-width:899px){.hp-grow .v9-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "p1" "qs" "p2" "go"}.hp-qs{margin:8px 0 26px;gap:16px}}
@media (max-width:560px){.hp-grow .hp-q p{font-size:19px}.hp-q .hp-oic.cb-ic-box{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.hp-q.v9-rv{transition-delay:0s}}

/* ---------- ready when you are: the closing email form, centred, sized and behaving as the hero's at every width. The way to
   write instead sits under it as one quiet line with its link. After the bone band above, this section needs no top rule ---------- */
.v9.em-cta.hp-cta{border-top:0}
.hp-cta .v9-h2{text-wrap:balance}
.hp-cta .v9-sub{text-wrap:pretty}
.hp-cta-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 10px;margin:4px 0 0;font-size:17px;line-height:1.6;color:#4f5565;text-align:center}
.v9 .hp-cta-alt .hp-go{margin-top:0}

/* ---------- 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}
}
/* the hero's button is only as wide as its label ("Book a call" and its arrow, 169px): a fixed 172px, so it keeps that width
   while sending and nothing shifts; the field keeps its width. On phones the pair still stacks at full width */
@media (min-width:821px){.v9.hp-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.hp-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.hp-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){
.v9 .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the story: four slides in one card, one view at a time. The reader moves through them with the arrows, the
   dots, a swipe or the arrow keys; nothing advances by itself. Each slide's drawing plays once, the first time it is shown
   (after the section has come into view), and holds: its parts ease in with a short drift and its one coral part warms.
   The drawings are boxes in the page's drawing language that scale with their box (container units); their labels never
   drop below 10.5px. The card keeps the height of its tallest slide, so nothing jumps between slides ---------- */
.hp-story{position:relative}
.hp-st-view{overflow:hidden;border:1px solid #E4DFD9;border-radius:28px;background:#FFFFFF;touch-action:pan-y}
.hp-st-track{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.hp-story.at-1 .hp-st-track{transform:translateX(-100%)}.hp-story.at-2 .hp-st-track{transform:translateX(-200%)}.hp-story.at-3 .hp-st-track{transform:translateX(-300%)}
.hp-sl{flex:0 0 100%;box-sizing:border-box;min-width:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:32px 56px;padding:64px}
.hp-sl-copy{display:flex;flex-direction:column;gap:16px;max-width:480px}
/* the sentence that carries a slide sits on the blush marker, which sweeps in once, the first time its slide is shown, and holds */
.v9 .hp-sl-h{margin:0;font-weight:700;font-size:40px;line-height:1.12;letter-spacing:-.02em;color:#232834;text-wrap:balance}
.hp-mk{color:#232834;background-image:linear-gradient(#FDE0E6,#FDE0E6);background-repeat:no-repeat;background-position:0 88%;background-size:0% 60%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .14em;margin:0 -.14em;transition:background-size .9s cubic-bezier(.65,0,.35,1) .45s}
.hp-story-wrap.in .seen-0 .k0 .hp-mk,.hp-story-wrap.in .seen-1 .k1 .hp-mk,.hp-story-wrap.in .seen-2 .k2 .hp-mk,.hp-story-wrap.in .seen-3 .k3 .hp-mk{background-size:100% 60%}
@media (prefers-reduced-motion:reduce){.hp-mk{transition:none;background-size:100% 60%}}
.v9 .hp-sl-copy p{margin:0;font-size:18px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.v9 .hp-sl-copy .hp-sl-lead{font-weight:700;font-size:19px;line-height:1.5;color:#232834}
.hp-st-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
.hp-st-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:1.5px solid #232834;border-radius:50%;background:#FFFFFF;color:#232834;cursor:pointer;transition:background .25s cubic-bezier(.65,0,.35,1),border-color .25s cubic-bezier(.65,0,.35,1),color .25s cubic-bezier(.65,0,.35,1)}
.hp-st-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-st-btn[aria-disabled="true"]{border-color:#C2C5CC;color:#C2C5CC;cursor:default}
.hp-st-btn:focus-visible,.hp-st-dot:focus-visible{outline:2px solid #232834;outline-offset:2px}
@media (hover:hover){.hp-st-btn:not([aria-disabled="true"]):hover{background:#F1EEEA}.hp-st-dot:not(.on):hover i{background:#8E939E}}
.hp-st-dots{display:flex}
.hp-st-dot{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:none;cursor:pointer}
.hp-st-dot i{display:block;width:10px;height:10px;border-radius:5px;background:#C2C5CC;transition:width .35s cubic-bezier(.65,0,.35,1),background .35s cubic-bezier(.65,0,.35,1)}
.hp-st-dot.on i{width:26px;background:#232834}
.hp-st-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1099px){.hp-sl{padding:48px;gap:32px 40px}.v9 .hp-sl-h{font-size:34px}}
@media (max-width:899px){.hp-sl{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;padding:40px 40px 36px;gap:28px}.hp-sl-copy{max-width:620px}}
@media (max-width:560px){.hp-st-view{border-radius:20px}.hp-sl{padding:28px 22px 24px;gap:24px}.v9 .hp-sl-h{font-size:28px}.v9 .hp-sl-copy p,.v9 .hp-sl-copy .hp-sl-lead{font-size:17px}}
.hp-art{position:relative;width:100%;aspect-ratio:16/11;container-type:inline-size}
.hp-art .p{position:absolute;box-sizing:border-box;margin:0}
.hp-art .win{border:1.5px solid #232834;border-radius:2.6cqw;background:#FFFFFF;overflow:hidden}
.hp-art .win > b{display:flex;align-items:center;gap:1.1cqw;height:6cqw;padding:0 2.2cqw;background:#F1EEEA;border-bottom:1px solid #E4DFD9}
.hp-art .win > b i{display:block;width:1.6cqw;height:1.6cqw;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%;background:#FFFFFF}
.hp-art .ln{display:block;height:1.8cqw;border-radius:1cqw;background:#E4DFD9}
.hp-art .win .ln{position:absolute}
.hp-art .ln.d{background:#C2C5CC}
.hp-art .rl{height:1.5px;background:#C2C5CC}
.hp-art .rl.k,.hp-art .stem{background:#232834}
.hp-art .stem{width:1.5px;height:5cqw}
.hp-art .lb{font-weight:700;font-size:max(10.5px,2.4cqw);line-height:1.2;color:#232834;white-space:nowrap}
.hp-art .tg{display:inline-flex;align-items:center;gap:1.2cqw;padding:.9cqw 2cqw .9cqw 1.2cqw;border:1.5px solid #232834;border-radius:99px;background:#FFFFFF;font-weight:500;font-size:max(10.5px,2.3cqw);line-height:1.2;color:#232834;white-space:nowrap}
.hp-art .tg.q{padding:.9cqw 2cqw;border-color:#C2C5CC;color:#4f5565}
.hp-art .ok{position:relative;flex:none;display:block;width:max(12px,3cqw);height:max(12px,3cqw);border-radius:50%;background:#232834}
.hp-art .ok::after{content:"";position:absolute;left:36%;top:20%;width:22%;height:42%;border:solid #FFFFFF;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.hp-art .spk{display:block;width:5cqw;height:5cqw;overflow:visible}
.hp-art .spk path{fill:#E4DFD9;stroke:#C2C5CC;stroke-width:5;stroke-linejoin:round;transition:fill .5s cubic-bezier(.65,0,.35,1) var(--w,1.4s),stroke .5s cubic-bezier(.65,0,.35,1) var(--w,1.4s)}
.hp-art .x{opacity:0;translate:0 4px;transition:opacity .5s cubic-bezier(.65,0,.35,1) var(--d,.5s),translate .6s cubic-bezier(.2,.7,.2,1) var(--d,.5s)}
.hp-art .ty{transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.65,0,.35,1) var(--d,.5s)}
.hp-art .card{display:flex;align-items:center;gap:1.6cqw;height:10cqw;padding:0 2.4cqw;border:1.5px solid #232834;border-radius:2.2cqw;background:#FFFFFF}
.hp-art .sys,.hp-art .run{display:flex;flex-direction:column;gap:2.2cqw;padding:2.4cqw;border:1.5px solid #C2C5CC;border-radius:2.4cqw;background:#F1EEEA}
.hp-art .sys{width:28cqw;height:30cqw}.hp-art .run{width:24cqw;height:29cqw}
.hp-art .sys .lb,.hp-art .run .lb{color:#4f5565}
.hp-art .sys .ln:nth-child(3),.hp-art .run .ln:nth-child(3){width:72%}.hp-art .sys .ln:nth-child(4),.hp-art .run .ln:nth-child(4){width:86%}
.hp-art .doc{width:12cqw;height:15cqw;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2cqw;border:1.5px solid #232834;border-radius:1.4cqw 3.4cqw 1.4cqw 1.4cqw;background:#FFFFFF}
.hp-art .fold{position:absolute;right:-1.5px;top:-1.5px;width:4.4cqw;height:4.4cqw;border-radius:0 3.4cqw 0 1.4cqw;background:#E4DFD9;box-shadow:inset 0 0 0 1.5px #C2C5CC;transition:background .5s cubic-bezier(.65,0,.35,1) var(--w,1.3s),box-shadow .5s cubic-bezier(.65,0,.35,1) var(--w,1.3s)}
.hp-art .chg{width:22cqw;height:9cqw;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw;padding:0 2.2cqw;border:1.5px solid #232834;border-radius:1.8cqw;background:#FFFFFF}
.hp-art .chg .ln{height:1.6cqw;width:78%}.hp-art .chg .ln + .ln{width:52%}
.hp-art .gate{width:32cqw;height:45cqw;display:flex;flex-direction:column;justify-content:center;gap:3.6cqw;padding:0 2.6cqw;border:1.5px solid #232834;border-radius:2.6cqw;background:#FFFFFF}
.hp-art .row{display:flex;align-items:center;gap:1.6cqw}
.hp-art .st{flex:none;display:block;box-sizing:border-box;width:max(9px,2.2cqw);height:max(9px,2.2cqw);border:1.5px solid #C2C5CC;border-radius:50%;background:#FFFFFF;transition:background .5s cubic-bezier(.65,0,.35,1) var(--w,1.4s),border-color .5s cubic-bezier(.65,0,.35,1) var(--w,1.4s)}
.hp-art .tile{width:25cqw;height:16cqw;display:flex;align-items:center;justify-content:center;border:1.5px solid #232834;border-radius:2cqw;background:#FFFFFF}
.hp-art .tile .spk{position:absolute;right:1.4cqw;top:1.4cqw;width:4.4cqw;height:4.4cqw}
.hp-art .data{height:8cqw;display:flex;align-items:center;justify-content:center;border:1.5px solid #232834;border-radius:2cqw;background:#F1EEEA}
.hp-art .chips{display:flex;justify-content:center;gap:2cqw}
.hp-story-wrap.in .seen-0 .k0 .x,.hp-story-wrap.in .seen-1 .k1 .x,.hp-story-wrap.in .seen-2 .k2 .x,.hp-story-wrap.in .seen-3 .k3 .x{opacity:1;translate:0 0}
.hp-story-wrap.in .seen-0 .k0 .ty{transform:scaleX(1)}
.hp-story-wrap.in .seen-0 .k0 .spk path,.hp-story-wrap.in .seen-3 .k3 .spk path{fill:#FA5478;stroke:#C43A5C}
.hp-story-wrap.in .seen-1 .k1 .fold{background:#FA5478;box-shadow:inset 0 0 0 1.5px #C43A5C}
/* slide 3: every change passes the same four checks, which light in order, left to right in time; the checks are the slide's coral part */
.hp-story-wrap.in .seen-2 .k2 .st.c{background:#FA5478;border-color:#C43A5C}
@media (prefers-reduced-motion:reduce){.hp-st-track,.hp-st-dot i,.hp-art *{transition:none !important}.hp-art .x{opacity:1;translate:none}.hp-art .ty{transform:none}.hp-art .spk path{fill:#FA5478;stroke:#C43A5C}.hp-art .fold{background:#FA5478;box-shadow:inset 0 0 0 1.5px #C43A5C}.hp-art .st.c{background:#FA5478;border-color:#C43A5C}}

/* ---------- the story's stage: one blush card without a border. Two blush hairlines in the first panel's shapes, an arch
   over the top left and a cup under the bottom right. They draw in whenever a slide is shown, the top one from the left
   edge and the bottom one from the right edge, a beat later with a softer start; moving on fades them out first.
   The page fits each to the free space of all four slides (every line of text, the sparkles and every part of the
   drawings, with a clear margin), as large as it will go, so neither crosses a word or a drawing; where there is no room,
   as on narrow screens, it hides. Each slide carries the AI icon's two sparkles in its own place: after the first headline, in the
   open space between the systems in the second drawing, beside the pile of drafted changes in the third and after the
   fourth slide's lead line, never over a word or touching a part of a drawing. They stay on the
   line with their word and size with the type (or the drawing): each time a slide is shown its pair turns in, holds for a moment and fades away again (the page plays
   them), and the sparkle on the last drawing's Orders tile turns in as its slide arrives. On blush the
   marker deepens one step and the drawings' bone boxes turn white. With reduced motion everything shows finished ---------- */
.hp-st-view{position:relative;isolation:isolate;border:0;background:#FDE0E6}
.hp-st-track{position:relative;z-index:1}
.v9 svg.hp-st-arcs{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#FBC0CC;stroke-width:2;stroke-linecap:butt}
.hp-st-arcs path{stroke-dasharray:1 1}
.hp-st-arcs .a1{stroke-dashoffset:1}.hp-st-arcs .a2{stroke-dashoffset:-1}
.hp-st-view .hp-mk{background-image:linear-gradient(#FBC0CC,#FBC0CC)}
.hp-st-view .hp-art .sys,.hp-st-view .hp-art .run,.hp-st-view .hp-art .data{background:#FFFFFF}
.hp-sl-nw{white-space:nowrap}
.hp-sl-stars{position:relative;display:inline-block;width:1.2em;height:1.15em;margin-left:.2em;vertical-align:-.3em;rotate:12deg}
.v9 .hp-sl-stars svg{position:absolute;overflow:visible;opacity:0}
.hp-sl-stars.sm{font-size:1.35em;margin-left:.15em;vertical-align:-.34em}
.hp-art .hp-sl-stars.art{position:absolute;z-index:2;margin:0;font-size:5cqw;vertical-align:0}
.v9 .hp-sl-stars .sb{left:0;top:0;width:.9em;height:.9em}
.v9 .hp-sl-stars .ss{left:.75em;top:.7em;width:.45em;height:.45em}
.hp-sl-stars path{fill:#FFFFFF;stroke:#232834;stroke-width:1.75px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hp-sl-stars .b{stroke:none}.hp-sl-stars .s{fill:#E4DFD9;stroke:none}.hp-sl-stars .o{fill:none}
@media (prefers-reduced-motion:reduce){.hp-st-arcs .a1,.hp-st-arcs .a2{stroke-dashoffset:0}.v9 .hp-sl-stars svg{opacity:1}}

/* ================= THE PHONE TYPE SCALE (2 October 2026; the homepage first, for review) =================
   Up to 560px every size steps down one notch, so a phone screen holds more and each section reads at once:
   the hero headline 34px (it still never runs past the column on the narrowest phones), section headings 26px,
   the story's headlines and the footer's line 24px, small titles 18px, the questions 17px, the hero's lead 17px,
   and body text, subheads and text links 16px, the site's floor for body text on phones. Line heights open a little
   as the sizes come down. Buttons, form fields, footer links and the drawings' own labels keep their sizes */
@media (max-width:560px){
.v9-hero.hp-hero h1{font-size:min(34px,calc((100vw - 44px) / 9));line-height:1.12;margin-bottom:20px}
.v9-hero.hp-hero .v9-lead{font-size:17px;line-height:1.6;margin-bottom:28px}
.v9 .v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9 .hp-sl-h{font-size:24px;line-height:1.2}
.hp-pr h3,.hp-core-t{font-size:18px;line-height:1.3}
.hp-grow .hp-q p{font-size:17px;line-height:1.4}
.v9-head .v9-sub,.em-center .v9-sub,.hp-clients-head .v9-sub{font-size:16px;line-height:1.6}
.hp-sys-lead{font-size:16px;line-height:1.6}
.hp-pr p,.hp-grow p,.hp-sys-body p,.v9 .hp-sl-copy p,.v9 .hp-sl-copy .hp-sl-lead{font-size:16px;line-height:1.6}
.v9 .hp-go{font-size:16px}
}