/* Data Engineering, built from Web & App Development v2 (page-web-development-v2.css), the starting point CLAUDE.md names:
   its shell, header strip, hero base, buttons, email form, reveal, hover icons, client wall and responsive rules are carried
   over unchanged, with its page classes renamed de-*. 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 (de-*) 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 and, inside it, its Data Engineering tile, in coral with the menu's own small dot */
body.v9-page #wbm .rt[aria-current="page"] b,body.v9-page #wbm .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wbm .rt[aria-current="page"] b::after,body.v9-page #wbm .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 */
.de-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 .de-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}
.de-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)}
.de-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .de-go:hover{color:#232834}.de-go:hover .de-go-l{text-decoration-color:#232834}.de-go:hover .de-go-a{transform:translateX(3px)}}
.v9 .de-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.de-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 */
.de-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.de-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.de-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){.de-clients-head{margin-bottom:32px}}
@media (max-width:560px){.de-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 ENGINEERING (this page's own) ================= */

/* ---------- this page's hero. The eyebrow, then a headline that holds two lines at every width. Each option is sized from
   its own longer line, measured in Sailec Bold at -.03em (A "Data your business" 8.68em; B "in good order" 6.20em;
   C "Figures your teams" 8.68em; D "One clear picture" 7.96em; E "clear decisions" 6.88em): up to 1100px it is set from the
   viewport, so the longer line takes 91% of the column at most, 56px at the largest; from 1101px, where the copy column is
   560px, it runs from 52px to 58px (A and C 503px at the most, 90% of the column). 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.de-hero h1.de-h-a,.v9-hero.de-hero h1.de-h-c{font-size:min(56px,calc((100vw - 44px) / 9.6))}
.v9-hero.de-hero h1.de-h-b{font-size:min(56px,calc((100vw - 44px) / 6.9))}
.v9-hero.de-hero h1.de-h-d{font-size:min(56px,calc((100vw - 44px) / 8.8))}
.v9-hero.de-hero h1.de-h-e{font-size:min(56px,calc((100vw - 44px) / 7.6))}
@media (min-width:821px){.v9.de-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.de-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.de-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.de-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.de-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.de-hero h1.de-h-a,.v9-hero.de-hero h1.de-h-b,.v9-hero.de-hero h1.de-h-c,.v9-hero.de-hero h1.de-h-d,.v9-hero.de-hero h1.de-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.de-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.de-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1480, and the box keeps that shape reserved while it loads */
.de-hero .v9-illo{aspect-ratio:1920/1480}
/* 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.de-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.de-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.de-hero{padding:28px 0 48px}}

/* ---------- when the numbers start the meeting: the copy, and one calendar invite for the monthly review. Its agenda shows the
   cost in the reader's own time, with no figures: the first item took the hour, and the decision it pushed out is the one
   coral part. Its tag warms once from a quiet tint to coral as the invite arrives; with reduced motion it is simply coral.
   Side by side from 1024px; below that the invite sits under the copy, and on phones each tag drops under its item ---------- */
.de-meet{border-top:1px solid #E4DFD9}
.de-meet-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:center}
.de-meet-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .de-meet-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .de-meet-copy p + p{margin-top:16px}
.de-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.de-inv{position:relative;margin:0;border:1px solid #E4DFD9;border-radius:20px;background:#fff;overflow:hidden}
.de-inv-hd{display:grid;gap:6px;padding:24px 28px 22px;background:#F1EEEA}
.de-inv-k{display:block;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.de-inv-t{display:block;margin-top:2px;font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.02em;color:#232834}
.de-inv-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:16px;line-height:1.5;color:#4f5565}
.de-inv-m span + span::before{content:'';display:inline-block;width:4px;height:4px;margin:0 10px;border-radius:50%;background:#C2C5CC;vertical-align:middle}
.de-inv-bd{padding:22px 28px 10px}
.v9 .de-inv-ag{display:grid;margin:8px 0 0;padding:0;list-style:none}
.v9 .de-inv-ag li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;margin:0;padding:18px 0;border-top:1px solid #E4DFD9}
.v9 .de-inv-ag li:first-child{border-top:0}
.de-inv-i{font-weight:500;font-size:17px;line-height:1.45;color:#232834;text-wrap:pretty}
.k-next .de-inv-i{color:#4f5565}
.de-inv-tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 14px;box-sizing:border-box;border:1.5px solid transparent;border-radius:17px;font-weight:700;font-size:16px;line-height:1.3;white-space:nowrap}
.de-inv-tag.k-hour{background:#F1EEEA;color:#232834}
.de-inv-tag.k-moved{background:#fff;border-color:#C2C5CC;color:#4f5565;transition:border-color .5s cubic-bezier(.65,0,.35,1) .9s,color .5s cubic-bezier(.65,0,.35,1) .9s}
.de-inv-tag.k-moved::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#C2C5CC;transition:background-color .5s cubic-bezier(.65,0,.35,1) .9s}
.de-inv.in .de-inv-tag.k-moved{border-color:#FA5478;color:#d33d5c}
.de-inv.in .de-inv-tag.k-moved::before{background:#FA5478}
@media (prefers-reduced-motion:reduce){.de-inv-tag.k-moved{border-color:#FA5478;color:#d33d5c;transition:none}.de-inv-tag.k-moved::before{background:#FA5478;transition:none}}
@media (max-width:1023px){.de-meet-grid{grid-template-columns:minmax(0,1fr)}.de-inv{max-width:560px}}
@media (max-width:560px){
.v9 .de-meet-copy p{font-size:17px}
.de-inv-hd{padding:20px 20px 18px}.de-inv-bd{padding:18px 20px 6px}
.de-inv-t{font-size:23px}
.de-inv-k{font-size:13px;letter-spacing:.16em}
.v9 .de-inv-ag li{grid-template-columns:minmax(0,1fr);padding:16px 0}
}

/* ---------- start from the decisions, not the data: one business question on a bone card, and beneath it the data its answer
   needs as tags. Three are held in the business's systems (white, ink outline); one lives only in a spreadsheet, the section's
   one coral part: its tag has a dashed coral edge and its note warms once as the figure arrives. The question sits on the left
   and the copy on the right, the other way round from the section above. The tags wrap onto new lines and never scroll; with
   reduced motion the note is simply coral. Side by side from 1024px; below that the copy comes first ---------- */
.de-start{border-top:1px solid #E4DFD9}
.de-start-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 88px;align-items:center}
.de-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .de-start-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .de-start-copy p + p{margin-top:16px}
.de-q{position:relative;display:grid;margin:0}
.de-q-k{display:block;margin:0 0 12px;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.de-q-card{position:relative;z-index:1;padding:26px 28px 28px;border:1.5px solid #232834;border-radius:20px;background:#F1EEEA}
.v9 .de-q-t{margin:0;max-width:22ch;font-weight:700;font-size:26px;line-height:1.3;letter-spacing:-.02em;color:#232834;text-wrap:balance}
.de-q-needs{position:relative;padding:34px 0 0 28px}
.de-q-needs::before{content:'';position:absolute;left:48px;top:0;width:1.5px;height:26px;background:#C2C5CC}
.v9 .de-q-tags{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:0;padding:0;list-style:none}
.v9 .de-q-tags li{display:grid;justify-items:start;gap:8px;margin:0}
.de-q-tag{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;box-sizing:border-box;border:1.5px solid #232834;border-radius:12px;background:#fff;font-weight:500;font-size:17px;line-height:1.3;color:#232834;white-space:nowrap}
.k-gap .de-q-tag{border:1.5px dashed #FA5478}
.de-q-note{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;line-height:1.35;color:#4f5565;white-space:nowrap;transition:color .5s cubic-bezier(.65,0,.35,1) .8s}
.de-q-note::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#C2C5CC;transition:background-color .5s cubic-bezier(.65,0,.35,1) .8s}
.de-q.in .de-q-note{color:#d33d5c}
.de-q.in .de-q-note::before{background:#FA5478}
@media (prefers-reduced-motion:reduce){.de-q-note{color:#d33d5c;transition:none}.de-q-note::before{background:#FA5478;transition:none}}
@media (max-width:1023px){.de-start-grid{grid-template-columns:minmax(0,1fr)}.de-start-copy{order:-1}.de-q{max-width:560px}}
@media (max-width:560px){
.v9 .de-start-copy p{font-size:17px}
.de-q-card{padding:22px 20px 24px}
.v9 .de-q-t{font-size:22px}
.de-q-needs{padding:30px 0 0 0}
.de-q-needs::before{left:20px;height:22px}
.de-q-k{font-size:13px;letter-spacing:.16em}
.de-q-tag{font-size:16px;white-space:normal}
}

/* ---------- your data in one place: the heading and its line, then one customer's record as the store keeps it: four dated
   versions fanned like cards, from when they joined to today, each with the field that changed in bold. The older versions recede
   up and to the left on bone; today's sits in front, white with an ink edge, the one a business system keeps. A small coral tab,
   "End of last quarter", marks the version a quarterly report reads: the section's one coral part, settling in once as the
   drawing arrives. Then the four practices in a row, and the line that points live updates to Systems & API Integration.
   The fan runs from 900px; below that the versions stack down the page in date order, the tab still on its card ---------- */
.de-one{border-top:1px solid #E4DFD9}
.de-one-head{max-width:760px;margin:0 0 44px}
.de-one-head .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .de-one-head p{margin:0;max-width:680px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.de-ver{margin:0 0 64px;max-width:1080px}
.de-ver-k{display:block;margin:0;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.v9 .de-ver-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:84px 0 0;list-style:none}
.v9 .de-ver-list li{position:relative;display:grid;gap:14px;align-content:start;margin:0 -28px 0 0;padding:22px 50px 24px 24px;border:1.5px solid #E4DFD9;border-radius:20px;background:#F1EEEA}
.v9 .de-ver-list .v1{z-index:1;transform:translateY(-48px)}
.v9 .de-ver-list .v2{z-index:2;transform:translateY(-32px)}
.v9 .de-ver-list .v3{z-index:3;transform:translateY(-16px)}
.v9 .de-ver-list .v4{z-index:4;margin-right:0;padding-right:24px;border-color:#232834;background:#fff}
.de-ver-w{font-weight:700;font-size:17px;line-height:1.35;color:#232834}
.v9 .de-ver-f{display:grid;gap:8px;margin:0}
.v9 .de-ver-f div{display:grid;gap:0}
.v9 .de-ver-f dt{margin:0;font-weight:500;font-size:14px;line-height:1.4;color:#4f5565}
.v9 .de-ver-f dd{margin:0;font-weight:500;font-size:17px;line-height:1.4;color:#232834}
.v9 .de-ver-f .k-ch dd{font-weight:700}
.de-ver-tab{position:absolute;left:18px;top:-17px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;box-sizing:border-box;border:1.5px solid #FA5478;border-radius:16px;background:#fff;font-weight:700;font-size:15px;line-height:1;color:#d33d5c;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .5s cubic-bezier(.65,0,.35,1) .8s,transform .6s cubic-bezier(.65,0,.35,1) .8s}
.de-ver-tab::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#FA5478}
.de-ver.in .de-ver-tab{opacity:1;transform:none}
.v9 .de-ver-n{margin:22px 0 0;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
@media (prefers-reduced-motion:reduce){.de-ver-tab{opacity:1;transform:none;transition:none}}
.v9 .de-one-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 40px;margin:0;padding:0;list-style:none}
.v9 .de-one-items li{margin:0;padding:20px 0 0;border-top:1px solid #E4DFD9;scroll-margin-top:32px}
.v9 .de-one-items h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .de-one-items p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .de-one-si{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:44px 0 0;font-weight:500;font-size:17px;line-height:1.5;color:#4f5565}
.v9 .de-one-si .de-go{margin-top:0}
@media (max-width:1023px){.v9 .de-one-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}}
@media (max-width:899px){
.de-ver{max-width:560px}
.v9 .de-ver-list{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 0 0}
.v9 .de-ver-list li,.v9 .de-ver-list .v1,.v9 .de-ver-list .v2,.v9 .de-ver-list .v3,.v9 .de-ver-list .v4{transform:none;margin-right:0;padding:20px 22px 22px}
.v9 .de-ver-list .v3{margin-top:14px}
.v9 .de-ver-f{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:599px){.v9 .de-one-items{grid-template-columns:minmax(0,1fr);gap:26px}}
@media (max-width:560px){.v9 .de-one-head p{font-size:17px}.v9 .de-ver-f dt{font-size:16px}.de-ver-tab{font-size:16px}}

/* ---------- one meaning for every figure: the heading and its line, then one definition set as a dictionary entry on white,
   beside the three practices. The term in large type with its kind ("measure") after it, as a dictionary gives a word's part
   of speech; then its one sense, the rule in plain words, the section's one coral part, which types in once, letter by
   letter, when the entry is well in view; then its owner and the reports that use it. Between an ink rule above and a shade
   rule below, with no card. Every letter is in place from the start (only its opacity changes), so nothing reflows as it
   types; with reduced motion the rule is simply there. Side by side from 1024px; below that the entry comes first ---------- */
.de-def-sec{border-top:1px solid #E4DFD9}
.de-def-head{max-width:760px;margin:0 0 48px}
.de-def-head .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .de-def-head p{margin:0;max-width:680px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.de-def-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 88px;align-items:start}
.de-def{margin:0}
.de-def-in{display:grid;gap:22px;padding:30px 0 32px;border-top:1.5px solid #232834;border-bottom:1px solid #E4DFD9}
.v9 .de-def-hw{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0}
.de-def-term{font-weight:700;font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-.035em;color:#232834}
.de-def-pos{font-weight:500;font-size:18px;line-height:1.3;color:#4f5565}
.v9 .de-def-rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline;margin:0}
.de-def-n{font-weight:700;font-size:18px;line-height:1.4;color:#4f5565}
.de-def-txt{font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.35;letter-spacing:-.015em;color:#d33d5c}
.de-def-txt span{white-space:pre-wrap;opacity:0;transition:opacity .08s linear calc(var(--k) * 42ms + 300ms)}
.de-def.go .de-def-txt span{opacity:1}
@media (prefers-reduced-motion:reduce){.de-def-txt span{opacity:1;transition:none}}
.v9 .de-def-meta{display:grid;gap:10px;margin:4px 0 0}
.v9 .de-def-meta div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 16px;align-items:baseline}
.v9 .de-def-meta dt{margin:0;font-weight:700;font-size:16px;line-height:1.5;color:#4f5565}
.v9 .de-def-meta dd{margin:0;font-weight:500;font-size:17px;line-height:1.5;color:#232834}
.v9 .de-def-items{display:grid;margin:0;padding:0;list-style:none}
.v9 .de-def-items li{margin:0;padding:22px 0;border-top:1px solid #E4DFD9;scroll-margin-top:32px}
.v9 .de-def-items li:first-child{padding-top:0;border-top:0}
.v9 .de-def-items h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .de-def-items p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.de-def-more{margin-top:6px}
@media (max-width:1023px){.de-def-grid{grid-template-columns:minmax(0,1fr)}.de-def{max-width:640px}.de-def-side{max-width:640px}}
@media (max-width:560px){.v9 .de-def-head p{font-size:17px}.de-def-in{gap:18px;padding:24px 0 26px}.v9 .de-def-meta div{grid-template-columns:minmax(0,1fr);gap:0}}

/* ---------- reports people can use: the heading and its line, one small report and its "Where this comes from" panel, and the
   four practices. The report's figures are drawn as small bar charts, never numbers. The page's one interactive section:
   each figure is a button, and choosing it opens its panel (its definition, its sources, the checks it passed and when it last
   updated). With nothing chosen the first figure's panel shows, so the section reads without any interaction. The panels are
   stacked in one place, so the section holds its height and nothing below it moves; the choice is announced to screen readers.
   When the report is well in view, the page's second and last soft coral line runs once down the panel's grey track, from
   the figure to its sources, and is gone; the sources' mark warms to coral as it arrives and holds. With reduced motion the
   line doesn't run and the mark is simply coral. Side by side from 1024px; below that the panel opens inside the report,
   straight under its figure ---------- */
.de-rep-sec{border-top:1px solid #E4DFD9}
.de-rep-head{max-width:760px;margin:0 0 40px}
.de-rep-head .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .de-rep-head p{margin:0;max-width:680px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.de-rep-wrap{margin:0 0 64px;max-width:1120px}
.v9 .de-rep-hint{margin:0 0 14px;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.de-rep{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:repeat(4,auto);column-gap:32px}
.de-rep::before{content:'';grid-column:1;grid-row:1/5;border:1.5px solid #232834;border-radius:20px;background:#fff}
.de-rep > *{position:relative;z-index:1}
.de-rep-hd{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:24px 26px 12px}
.de-rep-hd b{font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.de-rep-hd span{font-weight:500;font-size:16px;line-height:1.4;color:#4f5565}
.de-rep-f{grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;margin:0 16px 10px;padding:14px 18px;box-sizing:border-box;border:1.5px solid #E4DFD9;border-radius:14px;background:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s cubic-bezier(.65,0,.35,1),background-color .25s cubic-bezier(.65,0,.35,1)}
.de-rep .f0{grid-row:2}.de-rep .f1{grid-row:3}.de-rep .f2{grid-row:4;margin-bottom:18px}
.de-rep-f[aria-pressed="true"]{border-color:#232834;background:#F1EEEA}
@media (hover:hover){.de-rep-f:hover{border-color:#232834}}
.de-rep-f:focus-visible{outline:2px solid #232834;outline-offset:3px}
.de-rep-fl{font-weight:700;font-size:18px;line-height:1.35;color:#232834}
.de-rep-bars{flex:none;display:flex;align-items:flex-end;gap:5px;height:40px}
.de-rep-bars i{display:block;width:10px;border-radius:3px 3px 1px 1px;background:#C2C5CC}
.de-rep-f[aria-pressed="true"] .de-rep-bars i{background:#232834}
.de-rep-panel{grid-column:2;grid-row:1/5;align-self:center;display:grid;padding:26px 28px 28px;border-radius:20px;background:#F1EEEA}
.de-rep-p{grid-area:1/1;display:grid;align-content:start;gap:16px;visibility:hidden;opacity:0}
.de-rep-p.on{visibility:visible;opacity:1;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.de-rep-pk{display:block;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.de-rep-path{position:relative;display:grid;gap:16px;padding-left:30px}
.de-rep-trk{position:absolute;left:0;top:13px;bottom:13px;width:18px;overflow:hidden}
.de-rep-trk::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:#C2C5CC}
.de-rep-flow{position:absolute;left:7px;top:-56px;width:4px;height:56px;border-radius:2px;background:#FA5478;opacity:0}
.de-rep.go .de-rep-p.on .de-rep-flow{animation:deRepFlow 1.5s cubic-bezier(.65,0,.35,1) .35s 1 both}
@keyframes deRepFlow{0%{top:-56px;opacity:0}15%{opacity:.6}85%{opacity:.6}100%{top:100%;opacity:0}}
.de-rep-dot{position:absolute;left:-30px;top:5px;box-sizing:border-box;width:18px;height:18px;border:2px solid #232834;border-radius:50%;background:#232834}
.k-src .de-rep-dot{top:3px;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1) 1.75s,border-color .4s cubic-bezier(.65,0,.35,1) 1.75s}
.de-rep.go .k-src .de-rep-dot{border-color:#C43A5C;background:#FA5478}
@media (prefers-reduced-motion:reduce){.de-rep-flow{display:none}.k-src .de-rep-dot{border-color:#C43A5C;background:#FA5478;transition:none}.de-rep-p.on{transition:none}}
.de-rep-pt{position:relative;display:block;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.de-rep-row{position:relative;display:grid;gap:4px}
.de-rep-rk{font-weight:700;font-size:15px;line-height:1.4;color:#4f5565}
.de-rep-rv{font-weight:500;font-size:17px;line-height:1.5;color:#232834;text-wrap:pretty}
.de-rep-tags{display:flex;flex-wrap:wrap;gap:8px}
.de-rep-tags span{display:inline-flex;align-items:center;min-height:34px;padding:4px 13px;box-sizing:border-box;border:1.5px solid #232834;border-radius:10px;background:#fff;font-weight:500;font-size:16px;line-height:1.3;color:#232834}
.de-rep-chk{display:grid;gap:6px}
.de-rep-chk span{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:16px;line-height:1.45;color:#232834}
.de-rep-chk span::before{content:'';flex:none;width:9px;height:5px;margin:6px 2px 0 1px;border-left:2px solid #232834;border-bottom:2px solid #232834;transform:rotate(-45deg)}
.v9 .de-rep-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 64px;max-width:1120px;margin:0;padding:0;list-style:none}
.v9 .de-rep-items li{margin:0;scroll-margin-top:32px}
.v9 .de-rep-items li::before{content:'';display:block;width:32px;height:2px;margin:0 0 16px;background:#232834}
.v9 .de-rep-items h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .de-rep-items p{margin:0;max-width:480px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){
.de-rep-wrap{max-width:640px}
.de-rep{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:0}
.de-rep::before{grid-row:1/-1}
.de-rep-hd,.de-rep-f,.de-rep-panel{grid-column:1}
.de-rep-panel{align-self:start;margin:0 16px 10px;padding:22px 20px 24px;border-radius:14px}
.de-rep .f2{margin-bottom:10px}
.de-rep{margin-bottom:8px}
.de-rep::before{margin-bottom:-8px}
.de-rep.s0 .f0{grid-row:2}.de-rep.s0 .de-rep-panel{grid-row:3}.de-rep.s0 .f1{grid-row:4}.de-rep.s0 .f2{grid-row:5}
.de-rep.s1 .f0{grid-row:2}.de-rep.s1 .f1{grid-row:3}.de-rep.s1 .de-rep-panel{grid-row:4}.de-rep.s1 .f2{grid-row:5}
.de-rep.s2 .f0{grid-row:2}.de-rep.s2 .f1{grid-row:3}.de-rep.s2 .f2{grid-row:4}.de-rep.s2 .de-rep-panel{grid-row:5}
}
@media (max-width:599px){.v9 .de-rep-items{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){.v9 .de-rep-head p{font-size:17px}.de-rep-hd{padding:20px 18px 10px}.de-rep-f{margin:0 12px 10px;padding:12px 14px}.de-rep-panel{margin:0 12px 10px;padding:20px 16px 22px}.de-rep-bars{gap:4px}.de-rep-bars i{width:8px}.de-rep-rk{font-size:16px}.de-rep-pk{font-size:13px;letter-spacing:.16em}}

/* ---------- what AI needs from your data: the page's one bone band and its quietest section, with no drawing. The heading on
   the left, the copy and its two links on the right (inline text links, not rows: link rows on bone are Web & App
   Development's). The sentence on preparing documents and records stays hidden until that service is confirmed; review mode
   shows it underlined. Side by side from 1024px ---------- */
.de-ai-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 88px;align-items:start}
.de-ai-h{margin:0;text-wrap:balance}
.v9 .de-ai-copy p{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.v9 .de-ai-copy p + p{margin-top:16px}
.de-ai-links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:14px}
.v9 .de-ai-links .de-go{margin-top:0}
@media (max-width:1023px){.de-ai-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.v9 .de-ai-copy p{font-size:17px}}

/* ---------- our work: the projects you confirm as our data work, as a plain index with no screens (the Our Work screens are
   design visuals, and data work rarely shows on a screen). Each row: the name, linked to its case study, and its sector; then
   its one line from work-projects.js, word for word, and what we did with its data, in your words. Concepts are never shown.
   The section shows once a project is listed in the page's WORK list. One column below 900px ---------- */
.de-work{border-top:1px solid #E4DFD9}
.de-work-h{margin:0 0 36px}
.v9 .de-cases{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid #E4DFD9}
.v9 .de-case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px 64px;margin:0;padding:30px 0 32px;border-bottom:1px solid #E4DFD9}
.de-case-id{display:grid;gap:4px;align-content:start}
.v9 .de-case-id h3{margin:0;font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.02em}
.v9 .de-case-id h3 a{display:inline-block;padding:10px 0;margin:-10px 0;color:#232834;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .de-case-id h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .de-case-id h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.de-case-s{font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.de-case-tx{display:grid;gap:14px}
.v9 .de-case-l{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.v9 .de-case-o{display:grid;gap:2px;margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#232834}
.v9 .de-case-o b{font-weight:700;font-size:15px;line-height:1.5;color:#4f5565}
.de-work-more{margin-top:28px}
@media (max-width:899px){.v9 .de-case{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.v9 .de-case{padding:24px 0 26px}.v9 .de-case-id h3{font-size:21px}.v9 .de-case-l{font-size:17px}.v9 .de-case-o b{font-size:16px}}

/* ---------- kept reliable as things change: the text and its link, with no drawing (the hero already shows the routine load).
   The heading and the paragraph on running or handing over the platform on the left; on the right, set off by a hairline, the
   ways of working and the link to compare them. Stacked below 1024px, the hairline then above ---------- */
.de-after{border-top:1px solid #E4DFD9}
.de-after .v9-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 88px;align-items:center}
.de-after-run{margin:0}
.de-after-run .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .de-after-run p{margin:0;max-width:700px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.de-after-ways{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
.v9 .de-after-ways p{margin:0;max-width:640px;font-weight:500;font-size:20px;line-height:1.5;color:#3a3f4b;text-wrap:pretty}
.v9 .de-after-ways .de-go{margin-top:0}
.de-after-ways{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:6px 0 6px 40px;border-left:1px solid #E4DFD9}
@media (max-width:1023px){.de-after .v9-wrap{grid-template-columns:minmax(0,1fr)}.de-after-run{max-width:760px}.de-after-ways{padding:28px 0 0;border-left:0;border-top:1px solid #E4DFD9;max-width:760px}}
@media (max-width:560px){.v9 .de-after-run p{font-size:17px}.v9 .de-after-ways p{font-size:18px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them. The logos in the header and footer are widened to 44px
   tap areas with padding cancelled by margin, so nothing moves. The site's old hidden menu 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 connect it better: the closing email form, centred, sized and behaving as the hero's at every width, with
   nothing after it ---------- */
.de-cta .v9-h2{text-wrap:balance}
.de-cta .v9-sub{text-wrap:pretty}