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


/* ================= DATA PLATFORMS & MLOPS (this page's own) ================= */

/* ---------- this page's hero, as on Mobile Apps: 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 "From experiment" 7.90em, B "Models that hold up" 9.21em,
   C "working after launch" 9.43em, D "Machine learning," 8.20em, E "in steady hands" 7.16em. 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,
   D and E run from 52px to 58px and B and C 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.dp-hero h1.dp-h-a{font-size:min(56px,calc((100vw - 44px) / 8.6))}
.v9-hero.dp-hero h1.dp-h-b{font-size:min(56px,calc((100vw - 44px) / 10))}
.v9-hero.dp-hero h1.dp-h-c{font-size:min(56px,calc((100vw - 44px) / 10.25))}
.v9-hero.dp-hero h1.dp-h-d{font-size:min(56px,calc((100vw - 44px) / 8.9))}
.v9-hero.dp-hero h1.dp-h-e{font-size:min(56px,calc((100vw - 44px) / 7.8))}
@media (min-width:821px){.v9.dp-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.dp-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.dp-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.dp-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.dp-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.dp-hero h1.dp-h-a,.v9-hero.dp-hero h1.dp-h-d,.v9-hero.dp-hero h1.dp-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.dp-hero h1.dp-h-b,.v9-hero.dp-hero h1.dp-h-c{font-size:clamp(48px,4vw,54px)}
.v9-hero.dp-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.dp-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1480 (the platform frame, the track and the Live card, with the hand), 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 white margin), so the words in the drawing are as large as they can be */
.dp-hero .v9-illo{aspect-ratio:1920/1480}
@media (max-width:560px){.dp-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.dp-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.dp-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.dp-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}

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

/* ---------- when a good pilot stalls: the copy, and the questions that show what's missing as the page's map. Each question is
   one link to the section that answers it, in page order (#data, #testing, #release, #monitoring, #ongoing), its arrow pointing
   down to "answered below" and stepping 4px down on hover and focus. No rows, rules, icons or ticks: ink type with the family's
   tint underline. Every link is at least 44px tall. Side by side from 1024px, the questions below the copy under that. Every
   section with an anchor stops 24px below the top of the window ---------- */
.v9-sec[id]{scroll-margin-top:24px}
.dp-stall{border-top:1px solid #E4DFD9}
.dp-stall-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 88px;align-items:center}
.dp-stall-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dp-stall-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dp-q-k{margin:0 0 10px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .dp-q-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.v9 .dp-q-list li{margin:0;padding:0}
.v9 .dp-q-list a{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding:8px 0;font-weight:700;font-size:22px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-decoration:none}
.dp-q-l{text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:6px;text-wrap:pretty;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.dp-q-a{flex:none;display:inline-block;color:#d33d5c;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .dp-q-list a:hover{color:#232834}.dp-q-list a:hover .dp-q-l{text-decoration-color:#232834}.dp-q-list a:hover .dp-q-a{transform:translateY(4px)}}
.dp-q-list a:focus-visible .dp-q-a{transform:translateY(4px)}
.v9 .dp-q-list a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.dp-q-l,.dp-q-a{transition:none}}
@media (max-width:1023px){.dp-stall-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.v9 .dp-stall-copy p,.v9 .dp-q-k{font-size:17px}}

/* ---------- two kinds of model, one discipline: the heading and its line, then two bone cards side by side, Models you train and
   Models you build on, resting on one wider band below both, Either way, which carries the section's coral: a white band with a
   coral outline and its heading in coral. Static, so it reads with no interaction. The band's sentence names the practices the
   rest of the page explains, in ink and a little larger. On phones the cards stack, with Either way below both ---------- */
.dp-kinds{border-top:1px solid #E4DFD9}
.dp-kinds-head .v9-h2{text-wrap:balance}
.v9 .dp-kinds-head .v9-sub{max-width:720px}
.v9 .dp-kinds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.v9 .dp-kind{margin:0;padding:36px 36px 40px;border-radius:20px;background:#F1EEEA}
.v9 .dp-kind h3{margin:0 0 10px;font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .dp-kind p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dp-kind.k-either{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 36px;align-items:baseline;padding:30px 36px;border:1.75px solid #FA5478;background:#fff}
.v9 .dp-kind.k-either h3{margin:0;color:#d33d5c}
.v9 .dp-kind.k-either p{max-width:680px;font-size:20px;line-height:1.5;color:#232834}
@media (max-width:820px){.v9 .dp-kind.k-either{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.v9 .dp-kinds-grid{grid-template-columns:minmax(0,1fr)}.v9 .dp-kind{padding:26px 24px 28px}.v9 .dp-kind.k-either{padding:24px}}

/* ---------- 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 ---------- */
.dp-review [data-unconfirmed]{display:block!important;position:relative}
.dp-review [data-unconfirmed]::before{content:attr(data-unconfirmed);display:block;width:fit-content;max-width:100%;margin:0 0 12px;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}
.dp-review .v9-sec[data-unconfirmed]::before{margin:-48px auto 32px}
.dp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- data your models can learn from: the heading and its line, then one result traced back beside the four practices.
   The drawing is a single result card ("Arrives Thursday", white with an ink outline), the model version that made it (bone,
   with its version tag) and the three things recorded for that training run: the data, the code and the settings, each a white
   card. Thin tint hairlines join them, measured by the page's logic. When the drawing is half in view, a short soft coral line
   (the page's second and last) runs once from the result back along each branch and is gone; each input's port warms to coral
   and holds. It runs backwards from one result, never sources flowing forward into a store. The inputs sit in a row when the
   drawing is 460px wide or more, and stack on a spine down their left below that, so on phones it reads top to bottom with the
   trail still joining each part. Side by side from 1100px. Labels checked by people stays hidden until labelling is
   confirmed ---------- */
.dp-data{border-top:1px solid #E4DFD9}
.dp-data-head .v9-h2{text-wrap:balance}
.v9 .dp-data-head .v9-sub{max-width:720px}
.dp-data-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:start}
.dp-tr{margin:0;container-type:inline-size}
.dp-tr-d{position:relative;display:grid;gap:44px}
.v9 svg.dp-tr-lines{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.v9 .dp-tr-lines path.j{fill:none;stroke:#C2C5CC;stroke-width:1.75;stroke-linecap:round}
.v9 .dp-tr-lines path.f{fill:none;stroke:#FA5478;stroke-opacity:0;stroke-width:4;stroke-linecap:round;stroke-dasharray:14 140;stroke-dashoffset:14}
.v9 .dp-tr.go .dp-tr-lines path.f{animation:dpTrFlow 1.9s cubic-bezier(.65,0,.35,1) .25s 1 both}
@keyframes dpTrFlow{0%{stroke-dashoffset:14;stroke-opacity:0}12%{stroke-opacity:.6}85%{stroke-opacity:.6}100%{stroke-dashoffset:-100;stroke-opacity:0}}
/* each input's port: a dot on the card's edge where its branch lands, above the card (on its left edge when stacked, its top
   edge in a row) */
.v9 .dp-tr-in li::before{content:"";position:absolute;z-index:2;left:-7px;top:50%;width:12px;height:12px;margin-top:-7.75px;border:1.75px solid #232834;border-radius:50%;background:#fff}
.v9 .dp-tr.go .dp-tr-in li::before{border-color:#C43A5C;background:#FA5478;transition:background-color .4s cubic-bezier(.65,0,.35,1) 1.95s,border-color .4s cubic-bezier(.65,0,.35,1) 1.95s}
.dp-tr-res,.dp-tr-mod,.v9 .dp-tr-in li{position:relative;z-index:1;display:grid;gap:4px;align-content:start;border-radius:20px}
.dp-tr-res{padding:22px 26px 24px;border:1.75px solid #232834;background:#fff}
.dp-tr-mod{padding:20px 26px 22px;background:#F1EEEA}
.dp-tr-k{font-weight:700;font-size:14px;line-height:1.4;color:#4f5565}
.dp-tr-res b{font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.02em;color:#232834}
.dp-tr-mod b{font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:#232834}
.dp-tr-s{font-weight:500;font-size:16px;line-height:1.45;color:#4f5565;text-wrap:pretty}
.dp-tr-v{justify-self:start;margin-top:6px;padding:3px 12px;border:1.5px solid #232834;border-radius:999px;background:#fff;font-weight:500;font-size:15px;line-height:1.4;color:#232834}
.v9 .dp-tr-in{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 0 44px;padding:0;list-style:none}
.v9 .dp-tr-in li{margin:0;padding:16px 18px 18px;border:1.75px solid #232834;background:#fff}
.dp-tr-in b{font-weight:700;font-size:18px;line-height:1.3;color:#232834}
@container (min-width:460px){.v9 .dp-tr-in{grid-template-columns:repeat(3,minmax(0,1fr));margin-left:0}.v9 .dp-tr-in li::before{left:50%;top:-7px;margin:0 0 0 -7.75px}}
@media (prefers-reduced-motion:reduce){.v9 .dp-tr-lines path.f{display:none}.v9 .dp-tr-in li::before{border-color:#C43A5C;background:#FA5478}.v9 .dp-tr.go .dp-tr-in li::before{transition:none}}
.v9 .dp-data-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;margin:0;padding:0;list-style:none}
.v9 .dp-data-list li{margin:0;padding:0;scroll-margin-top:24px}
.v9 .dp-data-list h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .dp-data-list p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dp-data-more{margin-top:40px}
@media (max-width:1099px){.dp-data-grid{grid-template-columns:minmax(0,1fr)}.dp-tr{max-width:640px}}
@media (max-width:640px){.v9 .dp-data-list{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){.dp-tr-res{padding:18px 20px 20px}.dp-tr-mod{padding:16px 20px 18px}.v9 .dp-tr-in li{padding:14px 16px 16px}}

/* ---------- tested before every release: one release check beside the copy (the check on the left from 1024px, for the page's
   rhythm; above the copy below that). A white card in the family's ink line: its title and the status of the check, then the
   new version's result against the live one on the same four generic cases, in words, never scores. Two cases are tagged
   Matters. When the card is well in view the results appear row by row, Same, Better, Same, then Worse in coral on a case that
   matters, and the status changes once, from Checking to Waiting for review, its dot warming. It holds; with reduced motion it
   shows the finished check. The status pill keeps the width of its longer word, so nothing shifts ---------- */
.dp-test{border-top:1px solid #E4DFD9}
.dp-test-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.dp-test-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dp-test-copy p{margin:0 0 8px;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dp-rc{margin:0}
.dp-rc-d{border:1.75px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.dp-rc-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 20px;padding:24px 28px 20px;border-bottom:1px solid #E4DFD9}
.dp-rc-t{display:grid;gap:4px;min-width:0}
.dp-rc-t b{font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:#232834}
.dp-rc-t span{font-weight:500;font-size:16px;line-height:1.45;color:#4f5565;text-wrap:pretty}
.dp-rc-st{flex:none;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px 0 14px;border:1.5px solid #C2C5CC;border-radius:999px;background:#fff;font-weight:700;font-size:15px;line-height:1;color:#232834;white-space:nowrap;transition:background-color .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.dp-rc-st i{flex:none;width:10px;height:10px;border-radius:50%;background:#C2C5CC;transition:background-color .4s cubic-bezier(.65,0,.35,1)}
.dp-rc-w{display:grid}
.dp-rc-w>span{grid-area:1/1;transition:opacity .35s cubic-bezier(.65,0,.35,1)}
.dp-rc-w .s2{opacity:0}
.dp-rc-cols{display:flex;justify-content:space-between;gap:16px;padding:16px 28px 4px;font-weight:700;font-size:14px;line-height:1.4;color:#4f5565}
.v9 .dp-rc-rows{margin:0;padding:0 28px 8px;list-style:none}
.v9 .dp-rc-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;min-height:60px;margin:0;padding:12px 0;border-top:1px solid #E4DFD9}
.v9 .dp-rc-rows li:first-child{border-top:0}
.dp-rc-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:500;font-size:17px;line-height:1.4;color:#232834}
.dp-rc-c em{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1.5px solid #C2C5CC;border-radius:999px;font-style:normal;font-weight:700;font-size:14px;line-height:1;color:#4f5565}
.dp-rc-r{min-width:64px;text-align:right;font-weight:700;font-size:17px;line-height:1.4;color:#4f5565;opacity:0;transform:translateY(4px);transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.dp-rc-r.k-up{color:#232834}
.dp-rc-r.k-down{color:#d33d5c}
.dp-rc.go .dp-rc-r{opacity:1;transform:none}
.dp-rc.go li:nth-child(1) .dp-rc-r{transition-delay:.35s}
.dp-rc.go li:nth-child(2) .dp-rc-r{transition-delay:.85s}
.dp-rc.go li:nth-child(3) .dp-rc-r{transition-delay:1.35s}
.dp-rc.go li:nth-child(4) .dp-rc-r{transition-delay:1.85s}
.dp-rc.go .dp-rc-st{border-color:#FA5478;background:#FDE0E6;transition-delay:2.35s}
.dp-rc.go .dp-rc-st i{background:#FA5478;transition-delay:2.35s}
.dp-rc.go .dp-rc-w .s1{opacity:0;transition-delay:2.35s}
.dp-rc.go .dp-rc-w .s2{opacity:1;transition-delay:2.5s}
@media (prefers-reduced-motion:reduce){
.dp-rc-r,.dp-rc-st,.dp-rc-st i,.dp-rc-w>span{transition:none!important}
.dp-rc-r{opacity:1;transform:none}
.dp-rc-st{border-color:#FA5478;background:#FDE0E6}.dp-rc-st i{background:#FA5478}
.dp-rc-w .s1{opacity:0}.dp-rc-w .s2{opacity:1}
}
@media (max-width:1023px){.dp-test-grid{grid-template-columns:minmax(0,1fr)}.dp-rc{max-width:640px}}
@media (max-width:560px){.dp-rc-hd{padding:20px 20px 18px}.dp-rc-cols{padding:14px 20px 4px}.v9 .dp-rc-rows{padding:0 20px 6px}.v9 .dp-rc-rows li{gap:12px;min-height:56px}}

/* ---------- released safely, reversed quickly: the copy, and one request with two answers, still. The request on a bone card;
   beneath it the live version's answer (white, ink outline, its Sent tag in ink) beside the new version's, running alongside
   it (white, a dashed tint outline, grey type), marked Not sent and Different from the live answer. Beneath both, under a
   hairline, the way back: Go back to the last version, a label (not a button), with the section's one coral part, its return
   arrow. Not a release widening through stages or gates. The two answers sit side by side when the drawing is 520px wide or
   more, and stack, live first, below that. Copy on the left from 1024px, the drawing below it under that ---------- */
.dp-rel{border-top:1px solid #E4DFD9}
.dp-rel-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 80px;align-items:center}
.dp-rel-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dp-rel-copy p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dp-ans{margin:0;container-type:inline-size}
.dp-ans-d{display:grid;gap:16px}
.dp-ans-k{font-weight:700;font-size:14px;line-height:1.4;color:#4f5565}
.dp-ans-q{display:grid;gap:4px;justify-self:start;max-width:100%;padding:18px 24px 20px;border-radius:20px;background:#F1EEEA}
.dp-ans-q b{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.dp-ans-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:520px){.dp-ans-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dp-ans-a{display:grid;gap:6px;align-content:start;justify-items:start;padding:22px 24px 24px;border-radius:20px;background:#fff}
.dp-ans-a b{font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.015em}
.dp-ans-a.k-live{border:1.75px solid #232834}
.dp-ans-a.k-live b{color:#232834}
.dp-ans-a.k-new{border:1.75px dashed #C2C5CC}
.dp-ans-a.k-new b,.dp-ans-a.k-new .dp-ans-k{color:#6B7180}
.dp-ans-tag{display:inline-flex;align-items:center;height:28px;margin-top:6px;padding:0 12px;border-radius:999px;font-weight:700;font-size:14px;line-height:1}
.k-live .dp-ans-tag{background:#232834;color:#fff}
.k-new .dp-ans-tag{border:1.5px solid #C2C5CC;color:#4f5565}
.dp-ans-cmp{font-weight:500;font-size:16px;line-height:1.45;color:#4f5565}
.dp-ans-back{display:flex;align-items:center;gap:12px;padding:18px 4px 2px;border-top:1px solid #E4DFD9}
.dp-ans-back b{font-weight:700;font-size:18px;line-height:1.35;color:#232834}
.v9 svg.dp-ans-ic{flex:none;width:28px;height:28px;stroke:#FA5478;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1023px){.dp-rel-grid{grid-template-columns:minmax(0,1fr)}.dp-ans{max-width:640px}}
@media (max-width:560px){.dp-ans-q{padding:16px 20px 18px}.dp-ans-a{padding:18px 20px 20px}}

/* ---------- watched once it's live: the four checks in one row, each with its own drawing (tools/dp-icons-scene.js), its name
   and one line; under the row, one line on who hears first. No hairlines between or around the checks. Four across from 1024px,
   two from 561px, one on phones. Each check is its drawing's hover host: pointing at it plays the drawing's one movement (mouse
   and trackpad only). The coral parts arrive once, in turn, with their checks ---------- */
.dp-mon{border-top:1px solid #E4DFD9}
.dp-mon .v9-h2{margin:0 0 48px;text-wrap:balance}
.v9 .dp-mon-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px;margin:0;padding:0;list-style:none}
.v9 .dp-mon-list li{display:grid;align-content:start;gap:10px;margin:0;padding:0}
.v9 .dp-mon-list .hp-oic.cb-ic-box{grid-row:auto;width:56px;height:56px;margin:0 0 12px}
.dp-mon-list .cb-ic{--d:.3s}
.dp-mon-list li:nth-child(2) .cb-ic{--d:.4s}
.dp-mon-list li:nth-child(3) .cb-ic{--d:.5s}
.dp-mon-list li:nth-child(4) .cb-ic{--d:.6s}
.v9 .dp-mon-list h3{margin:0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .dp-mon-list p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dp-mon-own{margin:56px 0 0;max-width:720px;font-weight:500;font-size:20px;line-height:1.5;color:#232834;text-wrap:pretty}
@media (max-width:1023px){.v9 .dp-mon-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}}
@media (max-width:560px){.v9 .dp-mon-list{grid-template-columns:minmax(0,1fr);gap:36px}.dp-mon .v9-h2{margin-bottom:36px}.v9 .dp-mon-own{margin-top:44px}}

/* ---------- our work: three projects, each with its screen, its name and sector (concepts tagged Concept), its line and the
   split between model and person: What the model does, then Who decides, as two labelled rows under one hairline. Three
   across from 1024px; from 700px each project is a row, its screen on the left; stacked on phones. Screens hold their 16:9
   space and fade in once loaded ---------- */
.dp-work{border-top:1px solid #E4DFD9}
.dp-work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 56px;margin-bottom:44px}
.dp-work-head .v9-h2{margin:0}
.v9 .dp-work-head .v9-sub{margin:0;max-width:440px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dp-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin:0;padding:0;list-style:none}
.v9 .dp-case{display:grid;align-content:start;gap:14px;margin:0;padding:0}
.dp-shot{position:relative;aspect-ratio:16/9;margin-bottom:6px;overflow:hidden;border-radius:14px;background:#232834}
.dp-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}
.dp-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)}
.dp-shot img.on{opacity:1}
.dp-case-id{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.v9 .dp-case-id h3{margin:0;width:100%;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em}
.v9 .dp-case-id h3 a{display:inline-block;padding:9px 0;margin:-3px 0;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:5px}
@media (hover:hover){.v9 .dp-case-id h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .dp-case-id h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.dp-case-s{font-weight:500;font-size:15px;line-height:1.4;color:#4f5565}
.dp-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1.5px solid #C2C5CC;border-radius:999px;font-weight:700;font-size:14px;line-height:1;color:#4f5565}
.v9 .dp-case-l{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dp-split{display:grid;gap:12px;margin:4px 0 0;padding:16px 0 0;border-top:1px solid #E4DFD9}
.v9 .dp-split div{display:grid;gap:2px}
.v9 .dp-split dt{font-weight:700;font-size:14px;line-height:1.4;color:#4f5565}
.v9 .dp-split dd{margin:0;font-weight:500;font-size:17px;line-height:1.5;color:#232834;text-wrap:pretty}
.dp-work-more{margin-top:44px}
@media (prefers-reduced-motion:reduce){.dp-shot img{transition:none}}
@media (min-width:700px) and (max-width:1023px){.v9 .dp-cases{grid-template-columns:minmax(0,1fr);gap:44px}.v9 .dp-case{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:32px}.dp-case .dp-shot{grid-row:1/5;grid-column:1;margin:0}.dp-case>*:not(.dp-shot){grid-column:2}}
@media (max-width:699px){.v9 .dp-cases{grid-template-columns:minmax(0,1fr);gap:44px}}
@media (max-width:560px){.dp-work-head{margin-bottom:32px}.dp-shot{border-radius:12px}.dp-work-more{margin-top:36px}}

/* ---------- kept accurate as things change: the page's one bone band and its quietest section, the text and its links with
   no drawing (the hero already shows retraining). The message on the left; beside it, under a hairline, the ways of working
   and their link. Side by side from 1024px, the ways below the message under that. The notebook line waits on confirmation */
.dp-on{background:#F1EEEA}
.dp-on+.em-cta{border-top:0}
.dp-on-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px 88px;align-items:end}
.dp-on-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dp-on-copy p{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dp-on-copy p+p{margin-top:16px}
.dp-on-way{display:grid;justify-items:start;gap:10px;padding-top:20px;border-top:1px solid rgba(35,40,52,.14)}
.v9 .dp-on-way p{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#232834;text-wrap:pretty}
@media (max-width:1023px){.dp-on-grid{grid-template-columns:minmax(0,1fr);gap:36px}.dp-on-way{max-width:640px}}


/* ================= 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 .dp-go,.ai-clients-head .v9-sub,.dp-clients-head .v9-sub,.v9 .dp-stall-copy p,.v9 .dp-q-k,.v9 .dp-kind p,.dp-tr-in b,.v9 .dp-data-list p,.v9 .dp-test-copy p,.dp-rc-c,.dp-rc-r,.v9 .dp-rel-copy p,.dp-ans-back b,.v9 .dp-mon-list p,.v9 .dp-work-head .v9-sub,.v9 .dp-case-l,.v9 .dp-split dd,.v9 .dp-on-copy p,.v9 .dp-on-way p{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .dp-kind.k-either p,.dp-ans-q b,.v9 .dp-mon-own{font-size:17px}
.v9-hero.dp-hero h1.dp-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.6)));line-height:1.12}
.v9-hero.dp-hero h1.dp-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 10)));line-height:1.12}
.v9-hero.dp-hero h1.dp-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 10.25)));line-height:1.12}
.v9-hero.dp-hero h1.dp-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.9)));line-height:1.12}
.v9-hero.dp-hero h1.dp-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.8)));line-height:1.12}
.v9 .dp-q-list a,.v9 .dp-kind h3,.dp-tr-mod b,.dp-rc-t b,.dp-ans-a b,.v9 .dp-mon-list h3,.v9 .dp-case-id h3{font-size:20px}
.dp-tr-res b{font-size:24px}
.v9 .dp-data-list h3{font-size:18px}
}