/* Cloud, DevOps & Security, 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 text link renamed cd-go. 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 (cd-*) 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 Cloud, DevOps & Security 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}
@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 .cd-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}
.cd-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)}
.cd-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .cd-go:hover{color:#232834}.cd-go:hover .cd-go-l{text-decoration-color:#232834}.cd-go:hover .cd-go-a{transform:translateX(3px)}}
.v9 .cd-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.cd-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}}

/* ---------- 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)}
}


/* ================= CLOUD, DEVOPS & SECURITY (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 "steady systems" 7.12em; B "One trusted path" 7.84em; C "Software
   that runs" 8.47em; D "Routine releases," 7.83em; E "Steady in production," 9.89em): up to 1100px it is set from the
   viewport, so the longer line takes 92% of the column at most (56px at the largest); from 1101px, where the copy column is
   560px, A to D run from 52px to 58px (C, the longest of them, then takes 88% of the column) and E from 48px to 51px (90%).
   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.cd-hero h1.cd-h-a{font-size:min(56px,calc((100vw - 44px) / 7.8))}
.v9-hero.cd-hero h1.cd-h-b{font-size:min(56px,calc((100vw - 44px) / 8.6))}
.v9-hero.cd-hero h1.cd-h-c{font-size:min(56px,calc((100vw - 44px) / 9.3))}
.v9-hero.cd-hero h1.cd-h-d{font-size:min(56px,calc((100vw - 44px) / 8.6))}
.v9-hero.cd-hero h1.cd-h-e{font-size:min(56px,calc((100vw - 44px) / 10.8))}
@media (min-width:821px){.v9.cd-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.cd-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.cd-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.cd-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.cd-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.cd-hero h1.cd-h-a,.v9-hero.cd-hero h1.cd-h-b,.v9-hero.cd-hero h1.cd-h-c,.v9-hero.cd-hero h1.cd-h-d{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.cd-hero h1.cd-h-e{font-size:clamp(48px,4vw,51px)}
.v9-hero.cd-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.cd-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the hero swaps files by laying the next over the last: each pass has its own box, stacked in one place */
.cd-hero .v9-illo-art > div{position:absolute;inset:0}
/* the drawing's canvas is 1920 x 1480, and the box keeps that shape reserved while it loads */
.cd-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.cd-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.cd-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.cd-hero{padding:28px 0 48px}}

/* ---------- clients: the heading and its line sit centred over the wall; the heading is balanced so no line holds one word
   alone ---------- */
.cd-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.cd-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.cd-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){.cd-clients-head{margin-bottom:32px}}
@media (max-width:560px){.cd-clients-head .v9-sub{font-size:17px}}

/* ---------- when releasing feels like a risk: the heading on the left and the copy on the right, and below them one change's
   path to production drawn as a single bar in proportion, with no times or figures: the work in ink, the waits in a quiet
   hatched tint and, at the end, the release window they all wait for, the one coral part. Each part is a list item with its
   label, so it reads in order; the bar draws in once, part by part, as it arrives. From 901px it runs across the page; below
   that it runs down the page, each part as tall as its share with its label beside it, so no label is squeezed ---------- */
.cd-risk{border-top:1px solid #E4DFD9}
.cd-risk-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 72px;align-items:start;margin-bottom:56px}
.cd-risk-head .v9-h2{text-wrap:balance}
.v9 .cd-risk-copy p{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .cd-risk-copy p + p{margin-top:16px}
@media (max-width:1023px){.cd-risk-head{grid-template-columns:minmax(0,1fr);margin-bottom:44px}.cd-risk-head .v9-h2{max-width:640px}}
@media (max-width:560px){.v9 .cd-risk-copy p{font-size:17px}}
.cd-wait{margin:0}
.cd-wait-k{display:block;margin:0 0 18px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.cd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v9 .cd-wait-bar{display:grid;grid-template-columns:9fr 21fr 25fr 36fr 9fr;column-gap:4px;margin:0;padding:0;list-style:none}
.v9 .cd-wait-bar li{display:grid;grid-template-rows:28px auto;row-gap:14px;min-width:0;margin:0}
.cd-wait-seg{display:block;box-sizing:border-box;border-radius:4px;clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.65,0,.35,1)}
.cd-wait-bar li:first-child .cd-wait-seg{border-radius:14px 4px 4px 14px}
.cd-wait-bar li:last-child .cd-wait-seg{border-radius:4px 14px 14px 4px}
.k-work .cd-wait-seg{background:#232834}
.k-wait .cd-wait-seg{border:1.5px solid #C2C5CC;background:repeating-linear-gradient(135deg,#C2C5CC 0 1.5px,#fff 1.5px 9px)}
.k-rel .cd-wait-seg{border:1.5px solid #C43A5C;background:#FA5478}
.cd-wait-l{font-weight:500;font-size:16px;line-height:1.4;color:#232834;text-wrap:balance;padding-right:10px;opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1)}
.k-wait .cd-wait-l{color:#4f5565}
.cd-wait.in .cd-wait-seg{clip-path:inset(0)}
.cd-wait.in .cd-wait-l{opacity:1}
.cd-wait-bar li:nth-child(1) > *{transition-delay:.3s}
.cd-wait-bar li:nth-child(2) > *{transition-delay:.55s}
.cd-wait-bar li:nth-child(3) > *{transition-delay:.8s}
.cd-wait-bar li:nth-child(4) > *{transition-delay:1.05s}
.cd-wait-bar li:nth-child(5) > *{transition-delay:1.3s}
@media (max-width:900px){
.v9 .cd-wait-bar{grid-template-columns:minmax(0,1fr);grid-template-rows:9fr 21fr 25fr 36fr 9fr;row-gap:4px;height:620px;max-width:560px}
.v9 .cd-wait-bar li{grid-template-rows:none;grid-template-columns:28px minmax(0,1fr);column-gap:18px}
.cd-wait-seg{clip-path:inset(0 0 100% 0)}
.cd-wait-bar li:first-child .cd-wait-seg{border-radius:14px 14px 4px 4px}
.cd-wait-bar li:last-child .cd-wait-seg{border-radius:4px 4px 14px 14px}
.cd-wait-l{align-self:start;padding:3px 0 0}
}
@media (max-width:560px){.v9 .cd-wait-bar{height:560px}}
@media (prefers-reduced-motion:reduce){.cd-wait-seg,.cd-wait-l{clip-path:none;opacity:1;transition:none}}

/* ---------- releases that become routine: the heading and its line, then the four practices beside one release widening in
   three steps from a single point: your team, a few customers, everyone. Each step is held until its checks pass (a gate on the
   track at each step's end), and the way back runs beneath as a quiet dashed track. Once the drawing is well in view (45% of it
   on screen), the page's second and last soft coral line runs out once along the track, step by step: each step warms to blush
   as the line reaches it, each gate becomes the family's coral check while the line holds there, and the line is gone at the
   end; then it holds. With reduced motion it is simply shown passed. Practices on the left and the drawing on the right from
   1024px; the drawing first below that, and on phones it keeps its three steps across, in order, with 16px labels. The whole
   section, each practice and the drawing stay hidden until their services are confirmed; showUnconfirmed lays them out for
   review, tagged To confirm ---------- */
.cd-routine{border-top:1px solid #E4DFD9}
.cd-routine-head{max-width:760px}
.cd-routine-head .v9-h2{text-wrap:balance}
.cd-routine-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 72px;align-items:center}
.cd-routine-grid .cd-wide{grid-column:2;grid-row:1}
.cd-routine-grid .cd-items{grid-column:1;grid-row:1}
@media (max-width:1023px){.cd-routine-grid{grid-template-columns:minmax(0,1fr)}.cd-routine-grid .cd-wide,.cd-routine-grid .cd-items{grid-column:auto;grid-row:auto}.cd-wide{max-width:720px}}
.v9 .cd-items{display:grid;gap:28px;margin:0;padding:0;list-style:none}
.v9 .cd-items li{margin:0;scroll-margin-top:32px}
.v9 .cd-items h3{margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .cd-items p{margin:0;max-width:480px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (min-width:600px) and (max-width:1023px){.v9 .cd-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}}
@media (max-width:560px){.cd-routine-head .v9-sub{font-size:17px}.v9 .cd-items h3{font-size:19px}}
.cd-routine-more{margin-top:40px}
.cd-wide{position:relative;margin:0;--lb:44px;--band:220px;--h1:64px;--h2:136px;--h3:220px;--pt:20px}
.cd-wide-k{display:block;margin:0 0 18px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.cd-wide-fig{position:relative;display:grid;grid-template-columns:var(--pt) 26fr 32fr 42fr;grid-template-rows:var(--lb) var(--band) 76px}
.cd-wide-pt{grid-column:1;grid-row:2;align-self:center;position:relative;z-index:2;width:12px;height:12px;border-radius:50%;background:#232834}
.cd-wide-st{grid-row:2;align-self:center;position:relative;box-sizing:border-box;border:1.75px solid #232834;background:#fff;transition:background-color .6s cubic-bezier(.65,0,.35,1)}
.cd-wide-st.s1{grid-column:2;height:var(--h1);border-radius:10px 0 0 10px}
.cd-wide-st.s2{grid-column:3;height:var(--h2);margin-left:-1.75px;border-radius:12px 0 0 12px}
.cd-wide-st.s3{grid-column:4;height:var(--h3);margin-left:-1.75px;border-radius:14px 20px 20px 14px}
.cd-wide-l{position:absolute;left:12px;right:8px;bottom:calc(100% + 10px);font-weight:500;font-size:16px;line-height:1.35;color:#232834;text-wrap:balance}
.cd-wide-tk{position:absolute;z-index:1;left:6px;right:0;top:calc(var(--lb) + var(--band) / 2 - 1px);height:2px;background:#C2C5CC}
.cd-wide-fl{position:absolute;z-index:2;top:calc(var(--lb) + var(--band) / 2 - 2px);left:6px;width:56px;height:4px;border-radius:2px;background:#FA5478;opacity:0;pointer-events:none}
.cd-wide-g{position:absolute;z-index:3;top:calc(var(--lb) + var(--band) / 2);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:22px;height:22px;margin:-11px 0 0 -11px;border:1.75px solid #232834;border-radius:50%;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.cd-wide-g.g1{left:calc(var(--pt) + (100% - var(--pt)) * .26)}
.cd-wide-g.g2{left:calc(var(--pt) + (100% - var(--pt)) * .58)}
.v9 .cd-wide-g svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.cd-wide-back{grid-column:2/5;grid-row:3;position:relative;align-self:start;height:26px;margin:14px 0 0;box-sizing:border-box;border:1.75px dashed #C2C5CC;border-top:0;border-radius:0 0 16px 16px}
.cd-wide-bl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;padding:0 8px;font-weight:500;font-size:16px;line-height:1.35;color:#4f5565;white-space:nowrap}
.cd-wide.go .cd-wide-fl{animation:cdWideX 3.4s cubic-bezier(.65,0,.35,1) .3s 1 both,cdWideO 3.4s linear .3s 1 both}
@keyframes cdWideX{0%{left:6px}26%,38%{left:calc(var(--pt) + (100% - var(--pt)) * .26 - 68px)}64%,76%{left:calc(var(--pt) + (100% - var(--pt)) * .58 - 68px)}100%{left:calc(100% - 56px)}}
@keyframes cdWideO{0%{opacity:0}6%{opacity:.6}92%{opacity:.6}100%{opacity:0}}
.cd-wide.go .cd-wide-st{background:#FDE0E6}
.cd-wide.go .s1{transition-delay:.5s}
.cd-wide.go .s2{transition-delay:1.75s}
.cd-wide.go .s3{transition-delay:3s}
.cd-wide.go .cd-wide-g{background:#FA5478;border-color:#C43A5C}
.cd-wide.go .cd-wide-g svg{opacity:1}
.cd-wide.go .g1,.cd-wide.go .g1 svg{transition-delay:1.25s}
.cd-wide.go .g2,.cd-wide.go .g2 svg{transition-delay:2.5s}
@media (max-width:600px){.cd-wide{--lb:52px;--band:150px;--h1:44px;--h2:92px;--h3:150px;--pt:14px}.cd-wide-l{left:8px;right:4px}}
@media (prefers-reduced-motion:reduce){.cd-wide-fl{display:none}.cd-wide-st,.cd-wide-g,.v9 .cd-wide-g svg{transition:none!important}}
.v9.cd-routine.cd-review{display:block!important}
.cd-routine.cd-review .cd-wide[data-confirm],.cd-routine.cd-review .cd-items li[data-confirm]{display:block!important}
.cd-routine.cd-review .cd-routine-head .v9-h2::after,.cd-routine.cd-review .cd-items li[data-confirm] h3::after,.cd-routine.cd-review .cd-wide-k::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#4f5565;vertical-align:middle}

/* ---------- systems that stay reliable: the heading and its line, the four practices, and one alert as it arrives on a phone's
   lock screen, written the way a good one is: what's wrong, since when, what customers notice (the one coral part, on blush),
   who it was sent to, and the runbook to open. No charts. The phone keeps its lock-screen proportions (340 x 690 at most) and all
   its text is 16px or more; it is a drawing, so nothing in it is a control. The alert settles in once, from just above, as the
   phone arrives. Phone on the left and the copy on the right from 1024px; below that the heading, then the phone, then the
   practices. Hidden until its services are confirmed; showUnconfirmed lays it out for review, tagged To confirm ---------- */
.cd-rel{border-top:1px solid #E4DFD9}
.cd-rel-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"fig head" "fig items";gap:0 88px;align-items:center}
.cd-rel-head{grid-area:head;align-self:end;margin-bottom:40px}
.cd-rel-head .v9-h2{text-wrap:balance}
.cd-rel-fig{grid-area:fig;margin:0}
.cd-rel-items{grid-area:items;align-self:start}
@media (max-width:1023px){.cd-rel-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "items";row-gap:0}.cd-rel-fig{margin-bottom:48px}}
@media (max-width:560px){.cd-rel-head .v9-sub{font-size:17px}.cd-rel-head{margin-bottom:32px}.cd-rel-fig{margin-bottom:40px}}
.cd-phone{position:relative;box-sizing:border-box;width:min(340px,100%);aspect-ratio:340/690;margin:0 auto;padding:11px;border:1.75px solid #232834;border-radius:52px;background:#fff;box-shadow:10px 12px 0 0 #E4DFD9}
.cd-phone-scr{position:relative;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;height:100%;padding:16px 12px 0;border-radius:42px;background:#F1EEEA;overflow:hidden}
.cd-phone-isl{display:block;flex:none;width:92px;height:26px;border-radius:13px;background:#232834}
.cd-phone-t{display:block;margin-top:30px;font-weight:700;font-size:60px;line-height:1;letter-spacing:-.03em;color:#232834}
.cd-phone-d{display:block;margin-top:8px;font-weight:500;font-size:16px;line-height:1.4;color:#4f5565}
.cd-note{display:grid;gap:9px;box-sizing:border-box;width:100%;margin-top:26px;padding:14px 15px 15px;border:1.75px solid #232834;border-radius:22px;background:#fff;text-align:left;opacity:0;transform:translateY(-12px);transition:opacity .6s cubic-bezier(.65,0,.35,1) .45s,transform .8s cubic-bezier(.2,.7,.2,1) .45s}
.cd-rel-fig.in .cd-note{opacity:1;transform:none}
.cd-note-hd{display:flex;align-items:center;gap:9px;font-weight:500;font-size:16px;line-height:1.3;color:#4f5565}
.cd-note-ic{flex:none;box-sizing:border-box;width:24px;height:24px;border:1.75px solid #232834;border-radius:7px;background:#F1EEEA}
.cd-note-app{font-weight:700;color:#232834}
.cd-note-now{margin-left:auto}
.v9 .cd-note p{margin:0;font-weight:500;font-size:16px;line-height:1.4;color:#3a3f4b;text-wrap:pretty}
.v9 .cd-note .cd-note-t{font-weight:700;font-size:17px;line-height:1.35;color:#232834}
.v9 .cd-note .cd-note-s{color:#4f5565}
.v9 .cd-note .cd-note-c{display:grid;gap:2px;padding:9px 12px 10px;border-radius:12px;background:#FDE0E6;color:#232834}
.cd-note-c b{font-weight:700;color:#b5304f}
.cd-note-b{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;margin-top:3px;border:1.75px solid #232834;border-radius:22px;font-weight:700;font-size:16px;line-height:1;color:#232834}
.v9 .cd-note-b svg{width:14px;height:14px;stroke:#232834;stroke-width:2.4;fill:none}
.cd-phone-bar{position:absolute;bottom:9px;left:50%;width:112px;height:5px;margin-left:-56px;border-radius:3px;background:#232834}
@media (max-width:380px){.cd-phone{border-radius:46px;padding:9px}.cd-phone-scr{border-radius:37px;padding:14px 10px 0}.cd-phone-t{margin-top:22px;font-size:52px}.cd-note{margin-top:20px;padding:12px 13px 13px}}
@media (prefers-reduced-motion:reduce){.cd-note{opacity:1;transform:none;transition:none}}
.v9.cd-rel.cd-review{display:block!important}
.cd-rel.cd-review .cd-rel-fig[data-confirm],.cd-rel.cd-review .cd-items li[data-confirm]{display:block!important}
.cd-rel.cd-review .cd-rel-head .v9-h2::after,.cd-rel.cd-review .cd-items li[data-confirm] h3::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#4f5565;vertical-align:middle}

/* ---------- data that stays protected: the heading and its line on the left, an access review on the right from 1024px, and the
   five practices below it in three columns (two from 600px, one on phones). The review is a short list of people and services,
   each with what it can reach: no icons, no padlocks, no table of fields. Once it is well in view it runs once: the entry left
   behind by someone who has moved on is marked on blush with "No longer needed" (the one coral part), then it is removed, the
   list closes up, and the review reads Up to date; it never strikes anything through. With reduced motion it is shown done. On
   phones each entry stacks: who, then what it can reach. Hidden until its services are confirmed; showUnconfirmed lays it out
   for review, tagged To confirm ---------- */
.cd-prot{border-top:1px solid #E4DFD9}
.cd-prot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:start;margin-bottom:64px}
.cd-prot-head{margin:0}
.cd-prot-head .v9-h2{text-wrap:balance}
@media (max-width:1023px){.cd-prot-top{grid-template-columns:minmax(0,1fr);margin-bottom:52px}.cd-acc{max-width:640px}}
@media (max-width:560px){.cd-prot-head .v9-sub{font-size:17px}.cd-prot-top{gap:32px;margin-bottom:44px}}
.v9 .cd-prot-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px}
@media (max-width:1023px){.v9 .cd-prot-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}}
@media (max-width:599px){.v9 .cd-prot-items{grid-template-columns:minmax(0,1fr);gap:28px}}
.cd-acc{margin:0}
.cd-acc-card{box-sizing:border-box;border:1.75px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.cd-acc-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1.75px solid #232834;background:#F1EEEA}
.cd-acc-hd > b{font-weight:700;font-size:18px;line-height:1.3;color:#232834}
.cd-acc-st{display:grid;justify-items:end}
.cd-acc-st > span{grid-area:1/1;display:inline-flex;align-items:center;box-sizing:border-box;height:32px;padding:0 13px;border-radius:16px;font-weight:700;font-size:16px;line-height:1;white-space:nowrap;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.cd-acc-st .a{border:1.5px solid #C2C5CC;background:#fff;color:#4f5565}
.cd-acc-st .b{background:#232834;color:#fff;opacity:0}
.v9 .cd-acc-list{margin:0;padding:0;list-style:none}
.v9 .cd-acc-list li{display:grid;grid-template-rows:1fr;margin:0;border-top:1px solid #E4DFD9;transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1),opacity .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.v9 .cd-acc-list li:first-child{border-top:0}
.cd-acc-in{min-height:0;overflow:hidden}
.cd-acc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 20px;align-items:start;padding:16px 22px;transition:background-color .5s cubic-bezier(.65,0,.35,1)}
.cd-acc-who b{display:block;font-weight:700;font-size:17px;line-height:1.35;color:#232834}
.cd-acc-who > span{display:block;margin-top:2px;font-weight:500;font-size:16px;line-height:1.4;color:#4f5565}
.cd-acc-what{font-weight:500;font-size:17px;line-height:1.45;color:#232834;text-wrap:pretty}
.cd-acc-tag{grid-column:2;justify-self:start;display:inline-flex;align-items:center;box-sizing:border-box;height:32px;padding:0 13px;border:1.5px solid #C43A5C;border-radius:16px;background:#fff;font-weight:700;font-size:16px;line-height:1;color:#b5304f;white-space:nowrap;opacity:0;transition:opacity .4s cubic-bezier(.65,0,.35,1)}
.cd-acc.go .k-left .cd-acc-row{background:#FDE0E6;transition-delay:.4s}
.cd-acc.go .k-left .cd-acc-tag{opacity:1;transition-delay:.7s}
.v9 .cd-acc.go .cd-acc-list li.k-left{grid-template-rows:0fr;opacity:0;border-top-color:transparent;transition-delay:2.5s,2.3s,2.5s}
.cd-acc.go .cd-acc-st .a{opacity:0;transition-delay:3.2s}
.cd-acc.go .cd-acc-st .b{opacity:1;transition-delay:3.5s}
@media (max-width:560px){.cd-acc-hd{padding:14px 16px}.cd-acc-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 16px}.cd-acc-tag{grid-column:1;margin-top:6px}.cd-acc-what{font-size:16px}}
@media (prefers-reduced-motion:reduce){.v9 .cd-acc-list li,.cd-acc-row,.cd-acc-tag,.cd-acc-st > span{transition:none!important}}
.v9.cd-prot.cd-review{display:block!important}
.cd-prot.cd-review .cd-acc[data-confirm],.cd-prot.cd-review .cd-items li[data-confirm]{display:block!important}
.cd-prot.cd-review .cd-prot-head .v9-h2::after,.cd-prot.cd-review .cd-items li[data-confirm] h3::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#4f5565;vertical-align:middle}

/* ---------- start from where you are: the text, with its last line pulled out quietly beside it in larger type, aligned to the
   paragraph's end. No rule, card, list or marker: the line is the device. It is the paragraph's own last sentence, word for word
   and said once: from 1024px it sits in its own column to the right of the copy; below that it follows the paragraph, still a
   step larger ---------- */
.cd-start{border-top:1px solid #E4DFD9}
.cd-start-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto auto;gap:0 88px;align-items:end}
.v9 .cd-start-h{grid-column:1;grid-row:1;margin:0 0 22px;text-wrap:balance}
.v9 .cd-start-p{grid-column:1;grid-row:2;margin:0;max-width:620px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .cd-start-pull{grid-column:2;grid-row:1/3;margin:0 0 -4px;max-width:500px;font-weight:700;font-size:clamp(26px,2.4vw,32px);line-height:1.28;letter-spacing:-.02em;color:#232834;text-wrap:balance}
@media (max-width:1023px){.cd-start-grid{grid-template-columns:minmax(0,1fr)}.v9 .cd-start-pull{grid-column:1;grid-row:3;margin:28px 0 0;max-width:620px;font-size:24px}}
@media (max-width:560px){.v9 .cd-start-p{font-size:17px}.v9 .cd-start-pull{margin-top:24px;font-size:21px}}

/* ---------- AI, run with the same care: the page's one bone band and its quietest section. The heading, then its two points side
   by side from 1024px, each under a small icon from the homepage's set with its hover Lottie: agent for how AI features and
   agents are run, code for AI-written code taking the same checks, with AI Agents and AI Solutions side by side and the post on
   its own line, all as the family's text links. One column at a reading measure below 1024px. No drawing, no rows, no cards ---------- */
.cd-ai-copy{max-width:720px}
.cd-ai-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .cd-ai-copy p{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.cd-ai-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:36px 0}
.cd-ai-pt{min-width:0}
.v9 .cd-ai-pt .hp-oic.cb-ic-box{grid-row:auto;display:block;width:56px;height:56px;margin:0 0 14px -7px;--d:.2s}
.v9 .cd-ai-side .hp-oic.cb-ic-box{--d:.38s}
@media (min-width:1024px){.cd-ai-copy{max-width:none}.cd-ai-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 80px}.cd-ai-copy .v9-h2{margin-bottom:28px}}
.cd-ai-links{display:flex;flex-wrap:wrap;gap:0 36px;margin-top:22px}
.v9 .cd-ai-read{margin-top:4px}
@media (max-width:560px){.v9 .cd-ai-copy p{font-size:17px}.cd-ai-links{gap:0 28px}}

/* ---------- our work: built hidden and empty until you confirm projects. Each confirmed project is one row told by what we set
   up, run or secured: its name (linked to its case study on Our Work) and sector on the left; on the right a short ledger of
   what was ours, one line per verb (Set up, Runs, Secured) in your words, then its line from work-projects.js word for word.
   Rows between hairlines, with no cards or screens (none of the screens show this work). Stacked on phones. showUnconfirmed shows
   the heading tagged To confirm and a dashed layout specimen, hidden from screen readers ---------- */
.cd-work{border-top:1px solid #E4DFD9}
.cd-work-h{margin:0 0 32px}
.v9 .cd-cases{display:grid;margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.v9 .cd-case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px 64px;align-items:start;margin:0;padding:30px 0 32px;border-top:1px solid #E4DFD9}
.cd-case-id{display:grid;gap:4px}
.v9 .cd-case-id h3{margin:0;font-weight:700;font-size:23px;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.v9 .cd-case-id h3 a{display:inline-block;padding:8px 0;margin:-8px 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 .cd-case-id h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .cd-case-id h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.cd-case-s{font-weight:500;font-size:16px;line-height:1.4;color:#4f5565}
.v9 .cd-case-ours{display:grid;gap:8px;margin:0 0 14px}
.cd-case-o{display:grid;grid-template-columns:88px minmax(0,1fr);gap:2px 16px}
.v9 .cd-case-o dt{margin:0;font-weight:700;font-size:16px;line-height:1.6;color:#b5304f}
.v9 .cd-case-o dd{margin:0;font-weight:500;font-size:18px;line-height:1.5;color:#232834;text-wrap:pretty}
.v9 .cd-case-l{grid-column:2;margin:0;max-width:640px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.cd-case > .cd-case-ours{grid-column:2}
.cd-work-more{margin-top:32px}
@media (max-width:899px){.v9 .cd-case{grid-template-columns:minmax(0,1fr);gap:14px}.cd-case > .cd-case-ours,.v9 .cd-case-l{grid-column:1}}
@media (max-width:560px){.v9 .cd-case{padding:24px 0 26px}.v9 .cd-case-id h3{font-size:21px}.cd-case-o{grid-template-columns:minmax(0,1fr);gap:0}.v9 .cd-case-o dd{font-size:17px}}
.v9.cd-work.cd-review{display:block!important}
.cd-work.cd-review .cd-work-h::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#4f5565;vertical-align:middle}
.v9 .cd-case.cd-case-spec{position:relative;padding-left:20px;padding-right:20px;border:1.5px dashed #C2C5CC;border-radius:16px}
.cd-case-spec::before{content:"Layout specimen";position:absolute;right:20px;top:-11px;padding:0 8px;background:#fff;font-weight:700;font-size:11.5px;line-height:22px;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}

/* ---------- run with you, or handed over: the copy, beside one quiet drawing from its words: the regular rhythm, then the way of
   working with us under the homepage's person icon. Three tint hairlines, one each for
   patches and updates, access reviews and cost reviews, each with five ink marks at the same even spacing, set a third of a
   step apart, so the work is spread out rather than piled up. No dates and no frequencies: "regular" is shown, not promised.
   The one coral part is a Today line across them: the marks before it filled (done), the marks after it open (planned). As it
   arrives the marks appear once, left to right, then Today. The heading, the paragraph and the drawing describe running the
   platform afterwards or handing it over, still to confirm, so they are hidden and the section is one strip: the icon, the line
   and its link on one row from 900px, with less padding. "Respond when an alert needs a person" is hidden on its own until its
   hours are confirmed. Copy left and drawing
   right from 1024px; stacked below, with the drawing between the paragraph and the links. showUnconfirmed shows it all, tagged
   To confirm, with the alert phrase underlined ---------- */
.cd-after{border-top:1px solid #E4DFD9}
.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]){padding:56px 0}
.cd-after-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"run fig" "links fig";gap:0 88px;align-items:center}
.cd-after-run{grid-area:run;align-self:end}
.cd-after-links{grid-area:links;align-self:start}
.cd-after-run .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .cd-after-run p,.v9 .cd-after-links p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .cd-after-run{margin-bottom:16px}
.cd-after-way{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 22px;align-items:start}
.v9 .cd-after-way .hp-oic.cb-ic-box{grid-row:1/3;width:56px;height:56px;margin:-6px 0 0;--d:.2s}
.cd-after-way > p,.cd-after-way > .cd-go{grid-column:2}
.cd-rhy{grid-area:fig;margin:0}
@media (max-width:1023px){.cd-after-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"run" "fig" "links"}.v9 .cd-rhy{max-width:560px;margin:16px 0 40px}}
@media (max-width:820px){.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]){padding:44px 0}}
@media (max-width:560px){.v9 .cd-after-run p,.v9 .cd-after-links p{font-size:17px}.cd-after-way{grid-template-columns:minmax(0,1fr)}.v9 .cd-after-way .hp-oic.cb-ic-box{grid-row:auto;margin:0 0 12px -7px}.cd-after-way > p,.cd-after-way > .cd-go{grid-column:1}}
/* links only (the running copy and its drawing still to confirm): one strip across the page; from 900px the icon, the line and
   its link sit on one row, the link at the right */
.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]) .cd-after-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"links"}
@media (min-width:900px){
.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]) .cd-after-way{grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:0 24px}
.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]) .cd-after-way .hp-oic.cb-ic-box{grid-row:1;margin:0}
.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]) .cd-after-way > p{max-width:none;font-size:20px;line-height:1.5;color:#3a3f4b}
.v9.cd-after:not(.cd-review):has(.cd-after-run[style*="none"]) .cd-after-way > .cd-go{grid-column:3;margin-top:0}
}
.cd-rhy-k{display:block;margin:0 0 12px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.cd-rhy-fig{position:relative;padding-top:34px}
.cd-rhy-nl{position:absolute;top:0;left:60%;z-index:1;transform:translateX(-50%);font-weight:700;font-size:16px;line-height:24px;color:#d33d5c;white-space:nowrap}
.cd-rhy-now{position:absolute;top:28px;bottom:0;left:60%;z-index:1;width:2px;margin-left:-1px;border-radius:1px;background:#FA5478}
.v9 .cd-rhy-rows{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.v9 .cd-rhy-rows li{display:grid;gap:8px;margin:0}
.cd-rhy-l{font-weight:500;font-size:16px;line-height:1.4;color:#232834}
.cd-rhy-t{position:relative;display:block;height:22px}
.cd-rhy-t::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:#C2C5CC}
.cd-rhy .r1{--o:.1667;--r:0}.cd-rhy .r2{--o:.5;--r:1}.cd-rhy .r3{--o:.8333;--r:2}
.cd-rhy-t i:nth-child(1){--k:0}.cd-rhy-t i:nth-child(2){--k:1}.cd-rhy-t i:nth-child(3){--k:2}.cd-rhy-t i:nth-child(4){--k:3}.cd-rhy-t i:nth-child(5){--k:4}
.cd-rhy-t i{position:absolute;top:50%;left:calc((var(--k) + var(--o)) * 20%);z-index:2;display:block;box-sizing:border-box;width:12px;height:12px;border:1.75px solid #232834;border-radius:50%;background:#fff;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .4s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc((var(--k) * 3 + var(--r)) * 55ms + .15s)}
.cd-rhy-t i.d{background:#232834}
.cd-rhy.in .cd-rhy-t i{opacity:1;transform:translate(-50%,-50%)}
.cd-rhy-now,.cd-rhy-nl{opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1) 1.1s}
.cd-rhy.in .cd-rhy-now,.cd-rhy.in .cd-rhy-nl{opacity:1}
@media (max-width:400px){.cd-rhy-t i{width:10px;height:10px}}
@media (prefers-reduced-motion:reduce){.cd-rhy-t i,.cd-rhy-now,.cd-rhy-nl{opacity:1;transition:none}.cd-rhy-t i{transform:translate(-50%,-50%)}}
.cd-after.cd-review .cd-after-run[data-confirm]{display:block!important}
.cd-after.cd-review .cd-after-alert[data-confirm]{display:inline!important;text-decoration:underline dashed #C2C5CC 1.5px;text-underline-offset:5px}
.cd-after.cd-review .cd-rhy[data-confirm]{display:block!important}
.cd-after.cd-review .cd-after-run .v9-h2::after,.cd-after.cd-review .cd-rhy-k::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#4f5565;vertical-align:middle}

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

/* ---------- let's run it better: the closing email form, centred, with nothing after it ---------- */
.cd-cta .v9-h2{text-wrap:balance}
.cd-cta .v9-sub{text-wrap:pretty}