/* Web & App Development v2, built on the homepage (page-index-v2.css): its shell, header strip, hero base, buttons, email
   form, reveal, hover icons, client wall and responsive rules are carried over unchanged. Header and footer are the site's
   own (page-seo-1/2.css, site-header.css, site-footer.css); everything here scopes to .v9 or body.v9-page. Page-specific
   rules (wd-*) follow the shared ones. */

@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- page shell: white header strip, then the page ---------- */
body.v9-page .top-wrap{background-color:#fff;background-image:none}
body.v9-page .top-wrap-inner{background:none;min-height:0;padding-bottom:0}
body.v9-page .top-wrap::after,body.v9-page .top-wrap::before{display:none}
body.v9-page .content-area{padding:0}
body.v9-page .logo-white{display:none}
body.v9-page .logo-dark{display:block}
body.v9-page .menu_trigger{color:#232834}
body.v9-page .slicknav_icon-bar{background-color:#232834}
body.v9-page .header-wide{margin-bottom:0;padding-bottom:0}
body.v9-page .header{margin-bottom:0;padding-top:14px;padding-bottom:14px}
/* the site's menu button is 33px wide: its tap area is widened to 44px towards the page, with nothing moving */
body.v9-page .menu_trigger::after{content:"";position:absolute;top:-3px;bottom:-3px;left:-11px;right:0}
/* header, right side, as the reference reads: a quiet help link, then the icons (the menu's search and the menu), then the
   call button last, at the edge. The logo side is the site's own, set smaller. The row runs the full width of the window,
   and is a flex line centred on the logo; the menu's injected search button (.wbm_search) and the menu button drop their
   float offsets here. The link goes under 700px and the button under 521px, where the hero's form sits just below */
body.v9-page .header .logo{width:118px;max-width:none}
@media (max-width:765px){body.v9-page .header .logo{width:108px}}
body.v9-page .header{display:flex;align-items:center;max-width:none}
@media (min-width:1025px){body.v9-page .header{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:1280px){body.v9-page .header{padding-left:56px!important;padding-right:56px!important}}
body.v9-page .header::after,body.v9-page .header-right::after{display:none}
body.v9-page .header-right{float:none;display:flex;align-items:center;gap:6px;margin-left:auto;padding:0}
body.v9-page .hp-hd{order:1;display:flex;align-items:center;gap:14px;margin-right:14px}
body.v9-page .hp-hd-sep{display:block;width:1px;height:14px;background:#C2C5CC}
body.v9-page .hp-hd-l{display:inline-flex;align-items:center;min-height:44px;font-family:'Sailec',sans-serif;font-weight:500;font-size:13.5px;line-height:1.2;color:#4f5565;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s cubic-bezier(.65,0,.35,1),text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .hp-hd-l:hover,body.v9-page .hp-hd-l:focus-visible{color:#232834;text-decoration-color:#232834}
/* the menu's injected search is not shown in this header: search stays inside the menu itself */
body.v9-page .header .wbm_search{display:none}
body.v9-page .wbm_search{order:2;float:none;width:44px;height:44px;margin:0;color:#4f5565;transition:color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .wbm_search svg{top:50%;width:20px;height:20px;transform:translate(-50%,-50%);stroke-width:1.9}
body.v9-page .wbm_search:hover{color:#232834}
body.v9-page .hp-hd-cta{order:4;height:40px;margin-left:18px;padding:0 16px 0 20px;gap:4px;font-family:'Sailec',sans-serif;font-size:14.5px}
body.v9-page a.hp-hd-cta,body.v9-page a.hp-hd-cta:hover,body.v9-page a.hp-hd-cta:visited{color:#fff;text-decoration:none}
body.v9-page .hp-hd-cta::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
body.v9-page .hp-hd-cta svg.arr{display:block;flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){body.v9-page .hp-hd-cta:hover svg.arr{transform:translateX(2px)}}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
/* the menu's three bars are drawn a little smaller here, scaled about their own centre so they stay level with the row */
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l:focus-visible,body.v9-page .wbm_search:focus-visible,body.v9-page .hp-hd-cta:focus-visible,body.v9-page .menu_trigger:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (max-width:699px){body.v9-page .hp-hd{display:none}}
@media (max-width:520px){body.v9-page .hp-hd-cta{display:none}}
@media (prefers-reduced-motion:reduce){body.v9-page .hp-hd-cta svg.arr{transition:none}}
/* the dark menu marks the current page by file name only in its page list, which doesn't include this page: markMenu() marks
   its Build something new route and, inside it, its Web & App Development 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:none}
.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 */
.wd-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{align-self:stretch;width:100%;max-width:534px;margin-left:auto;margin-right:auto;text-align:left}
@media (max-width:820px){.em-cta .em-status{max-width:560px}}
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)}
.em-email .v9-hero-email.bad{border-color:#d33d5c}
.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 .wd-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}
.wd-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)}
.wd-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .wd-go:hover{color:#232834}.wd-go:hover .wd-go-l{text-decoration-color:#232834}.wd-go:hover .wd-go-a{transform:translateX(3px)}}
.v9 .wd-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.wd-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 */
.wd-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.wd-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.wd-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){.wd-clients-head{margin-bottom:32px}}
@media (max-width:560px){.wd-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)}
}


/* ================= WEB & APP DEVELOPMENT (this page's own) ================= */

/* ---------- this page's hero. The eyebrow, then a headline that holds two lines at every width: "Websites and apps" is
   the longer line (8.75em in Sailec Bold at -.03em; "you can build on" is 7.5em), so each size keeps it inside the copy
   column with room to spare: up to 1100px it is set from the viewport (the line takes 93% of the column at most, 56px at
   the largest), and from 1101px, where the copy column is 560px, it runs from 52px to 58px (507px, 91% of the column).
   The field and the button are the same width at every size, as in the closing form (the hero's "Book a call" needs far
   less than its half; the closing form's "Book a 20-minute call" and its arrow need 235px), so the pair shares one row
   from 561px and stacks below that ---------- */
.v9-hero.wd-hero h1{font-size:min(56px,calc((100vw - 44px) / 9.4))}
/* the hero's button is sized exactly as the homepage's: only as wide as its label ("Book a call" and its arrow, 169px), a
   fixed 172px, so it keeps that width while sending and nothing shifts; the field keeps its width. On phones the pair still
   stacks at full width, as on the homepage */
@media (min-width:821px){.v9.wd-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.wd-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.wd-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.wd-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.wd-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.wd-hero h1{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.wd-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin (6%, well inside the gutter at every width) but not into the
   column gap, so the full 48px stays between the copy and the drawing */
.wd-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 */
.wd-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view: the hero sits a little lower than the sister pages' so the first screen feels settled. On desktop its
   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.wd-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.wd-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.wd-hero{padding:28px 0 48px}}

/* ---------- what we build: a contents page. The types of work in two columns that read down, each name with its icon hung
   in the margin and its own anchor (#websites and on): no cards, rows or rails. Pointing at an entry plays its icon's hover
   Lottie. One column below 900px ---------- */
.wd-build{border-top:1px solid #E4DFD9}
.wd-build-head{max-width:720px;margin:0 0 52px}
.wd-build-head .v9-h2{text-wrap:balance}
.v9 .wd-ix{margin:0;padding:0;list-style:none;columns:2;column-gap:88px}
.v9 .wd-ix li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:24px;align-content:start;break-inside:avoid;margin:0;padding:0 0 44px;scroll-margin-top:32px}
.v9 .wd-ix .hp-oic.cb-ic-box{grid-row:1/3;width:56px;height:56px;margin:-13px 0 0}
.v9 .wd-ix h3{grid-column:2;margin:0 0 8px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .wd-ix p{grid-column:2;margin:0;max-width:440px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:899px){.v9 .wd-ix{columns:1}.v9 .wd-ix p{max-width:560px}}
@media (max-width:560px){.v9 .wd-ix li{grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding:0 0 36px}.v9 .wd-ix .hp-oic.cb-ic-box{width:48px;height:48px;margin-top:-11px}.v9 .wd-ix h3{font-size:20px}}

/* ---------- design and engineering, side by side: the copy, and one quiet still drawing from its words. The same button as
   a design (left) and as code (right); its three values, colour, shape and label, sit on shared rows and are joined across
   the gap, the same words on both sides. One grid holds both panes, so each value lines up with its line of code at every
   width. Side by side from 1024px, stacked below ---------- */
.wd-side{border-top:1px solid #E4DFD9}
.wd-side-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 72px;align-items:center}
.wd-side-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .wd-side-copy p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .wd-side-copy p + p{margin-top:16px}
@media (max-width:1023px){.wd-side-grid{grid-template-columns:minmax(0,1fr)}.wd-dc{max-width:640px}}
@media (max-width:560px){.v9 .wd-side-copy p{font-size:17px}}
.wd-dc{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);grid-template-rows:repeat(6,auto);margin:0}
.wd-dc > *{position:relative;z-index:1}
.wd-dc .wd-dc-pane{z-index:0;grid-row:1/-1;border-radius:20px}
.wd-dc-pane.d{grid-column:1;border:1px solid #E4DFD9;background:#fff}
.wd-dc-pane.c{grid-column:3;background:#232834}
.wd-dc-h{grid-row:1;padding:22px 24px 0;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase}
.wd-dc-h.d{grid-column:1;color:#4f5565}
.wd-dc-h.c{grid-column:3;color:#C2C5CC}
.wd-dc-btn{grid-column:1;grid-row:2;padding:22px 24px 14px}
.wd-dc-btn span{display:inline-flex;align-items:center;height:50px;padding:0 28px;border-radius:999px;background:#FA5478;font-weight:700;font-size:19px;letter-spacing:-.01em;color:#fff}
.wd-dc .r2{grid-row:2}.wd-dc .r3{grid-row:3}.wd-dc .r4{grid-row:4}.wd-dc .r5{grid-row:5}.wd-dc .r6{grid-row:6}
.wd-dc-v{grid-column:1;align-self:center;display:flex;align-items:center;gap:12px;padding:8px 24px;font-weight:500;font-size:16px;line-height:1.5;color:#232834}
.wd-dc-g{flex:none;display:block;width:18px;height:18px}
.wd-dc-g.sw{border-radius:50%;background:#FA5478}
.wd-dc-g.rd{box-sizing:border-box;width:16px;height:16px;margin:2px 0 0 2px;border-top:2px solid #232834;border-left:2px solid #232834;border-top-left-radius:16px}
.wd-dc-g.aa{width:18px;height:auto;font-weight:700;font-size:13px;line-height:1;letter-spacing:-.02em;color:#4f5565}
.wd-dc-code{grid-column:3;align-self:center;padding:3px 24px;font-weight:500;font-size:16px;line-height:1.5;color:#C2C5CC;white-space:nowrap}
.wd-dc-code b{font-weight:500;color:#F1EEEA}
.wd-dc-code.in{padding-left:44px}
.wd-dc-code.r2{align-self:end;padding-bottom:6px}
.wd-dc-code.r6{padding:6px 24px 24px}
.wd-dc-end{grid-column:1;grid-row:6}
/* each shared value is joined across the gap: a tint hairline between two small open dots on the panes' edges */
.wd-dc-j{grid-column:2;align-self:center;height:1px;background:#C2C5CC}
.wd-dc-j::before,.wd-dc-j::after{content:'';position:absolute;top:-4px;box-sizing:border-box;width:9px;height:9px;border:2px solid #232834;border-radius:50%;background:#fff}
.wd-dc-j::before{left:-5px}.wd-dc-j::after{right:-5px}
@media (max-width:560px){
.wd-dc{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
.wd-dc-h,.wd-dc-btn,.wd-dc-v,.wd-dc-code,.wd-dc-code.in{padding-left:14px;padding-right:14px}
.wd-dc-h{padding-top:18px}.wd-dc-btn{padding-top:18px}.wd-dc-code.r6{padding:6px 14px 20px}
.wd-dc-btn span{height:46px;padding:0 22px}
.wd-dc-v{gap:9px;font-size:15px}.wd-dc-code{font-size:15px}
}

/* ---------- built to run in production: an annotated product. One quiet product window, drawn in the page's icon language
   (ink outline over white, bone and shade for depth, tint for text), sitting on the layers behind it. Each practice is pinned
   where it lives: 1 the structure beneath, 2 the release pipeline, 3 sign-in and permissions, 4 the page itself (a focus
   ring, an image's alt text). The pins are the section's one coral, with white numbers, and match the list beside it. Pins
   keep their size at every width. Picture and list side by side from 1024px; the list runs two across from 600px to 1023px.
   "Yours to keep" stays hidden until the contracts are confirmed ---------- */
.wd-prod{border-top:1px solid #E4DFD9}
.wd-prod-head .v9-h2{text-wrap:balance}
.wd-prod-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.wd-prod-fig{position:relative;margin:0;aspect-ratio:640/440}
.wd-prod-fig svg{display:block;width:100%;height:100%;overflow:visible}
.wd-prod-fig svg *{vector-effect:non-scaling-stroke;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.wd-prod-fig .o{fill:none;stroke:#232834}
.wd-prod-fig .w{fill:#fff;stroke:#232834}
.wd-prod-fig .wn{fill:#fff;stroke:none}
.wd-prod-fig .b{fill:#F1EEEA;stroke:#232834}
.wd-prod-fig .bn{fill:#F1EEEA;stroke:none}
.wd-prod-fig .s{fill:#E4DFD9;stroke:#232834}
.wd-prod-fig .t{fill:#C2C5CC;stroke:none}
.wd-prod-fig .i{fill:#232834;stroke:none}
.wd-prod-fig .r{fill:none;stroke:#E4DFD9}
.wd-prod-fig .ws{fill:#fff;stroke:#E4DFD9}
.wd-prod-fig .tl{fill:none;stroke:#C2C5CC}
.wd-pin,.wd-num{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:26px;height:26px;border-radius:50%;background:#FA5478;font-weight:700;font-size:13px;line-height:1;color:#fff}
.wd-pin{position:absolute;margin:-13px 0 0 -13px;box-shadow:0 0 0 3px #fff}
.v9 .wd-prod-list{display:grid;gap:30px;margin:0;padding:0;list-style:none}
.v9 .wd-prod-list li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:18px;align-content:start;margin:0}
.wd-num{grid-row:1/3;margin-top:1px}
.v9 .wd-prod-list h3{grid-column:2;margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .wd-prod-list p{grid-column:2;margin:0;max-width:460px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.wd-prod-grid{grid-template-columns:minmax(0,1fr)}.wd-prod-fig{max-width:720px}.v9 .wd-prod-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}}
@media (max-width:599px){.v9 .wd-prod-list{grid-template-columns:minmax(0,1fr);gap:26px}.wd-pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:12px}}

/* ---------- AI where it earns its place: the page's one bone band and its quietest section. The paragraph, and the three AI
   pages as text-only rows between tint hairlines (tint, as #E4DFD9 barely shows on bone); each row is one link the full
   width of its column, at least 64px tall, whose arrow steps forward on hover. The paragraph on AI in our own engineering
   stays hidden until it is confirmed. Side by side from 1024px ---------- */
.wd-ai-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px 88px;align-items:center}
.wd-ai-copy .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .wd-ai-copy p{margin:0;max-width:620px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .wd-ai-copy p + p{margin-top:16px}
.v9 .wd-ai-links{margin:0;padding:0;list-style:none;border-top:1px solid #C2C5CC}
.v9 .wd-ai-links li{margin:0;border-bottom:1px solid #C2C5CC}
.v9 .wd-ai-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-decoration:none}
.wd-ai-a{flex:none;display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .wd-ai-links a:hover{color:#232834}.wd-ai-links a:hover .wd-ai-a{transform:translateX(4px)}}
.v9 .wd-ai-links a:focus-visible{outline:2px solid #232834;outline-offset:-2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.wd-ai-a{transition:none}}
@media (max-width:1023px){.wd-ai-grid{grid-template-columns:minmax(0,1fr)}.v9 .wd-ai-links{max-width:620px}}
@media (max-width:560px){.v9 .wd-ai-copy p{font-size:17px}.v9 .wd-ai-links a{min-height:60px;font-size:19px}}

/* ---------- our work: one project per row, larger than on the homepage. Each screenshot is cropped to the software from the
   project's board, without distortion, and served near the size shown (480 or 832px wide, art/web-development/wd-work-*);
   its box keeps the crop's shape while it loads, and it fades in once. From 900px the rows alternate sides ---------- */
.wd-work{border-top:1px solid #E4DFD9}
.v9 .wd-work-list{display:grid;gap:80px;margin:0;padding:0;list-style:none}
.wd-case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:center;margin:0}
.wd-case:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.wd-case:nth-child(even) .wd-shot{order:2}
.wd-shot{position:relative;aspect-ratio:832/462;overflow:hidden;border-radius:16px;background:#F1EEEA}
.wd-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(35,40,52,.12);pointer-events:none}
.wd-shot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1)}
.wd-shot img.on{opacity:1}
.v9 .wd-case h3{margin:0 0 10px;font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.v9 .wd-case h3 a{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 .wd-case h3 a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .wd-case h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.v9 .wd-case p{margin:0;max-width:460px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.wd-work-more{margin-top:48px}
@media (max-width:899px){.v9 .wd-work-list{gap:56px}.wd-case,.wd-case:nth-child(even){grid-template-columns:minmax(0,1fr);gap:22px;max-width:640px}.wd-case:nth-child(even) .wd-shot{order:0}.v9 .wd-case p{max-width:none}}
@media (max-width:560px){.v9 .wd-work-list{gap:44px}.wd-shot{border-radius:12px}.v9 .wd-case h3{font-size:22px}.v9 .wd-case p{font-size:17px}.wd-work-more{margin-top:36px}}
@media (prefers-reduced-motion:reduce){.wd-shot img{transition:none}}

/* ---------- from first release to long-term support: the copy, and a short release history that carries on past launch.
   Each entry hangs on a grey rail: a dot, a tag and one line. As it arrives, the page's second and last soft coral line
   runs down the rail once, under the dots, and is gone; when it reaches the next release, that dot warms to coral and
   holds. With reduced motion the line doesn't run and the dot is simply coral. Every dot sits on its entry's first line
   (13px down), and the rail runs from the first dot to the last ---------- */
.wd-life{border-top:1px solid #E4DFD9}
.wd-life-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:center}
.wd-life-copy .v9-h2{margin:0 0 20px;text-wrap:balance}
.v9 .wd-life-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .wd-life-copy p + p{margin-top:16px}
/* the line to Support & Maintenance (7 October 2026): the page's link look (ink, a tint underline that darkens on hover), set
   inline in its sentence, with a 44px tap area that doesn't move the text */
.v9 .wd-life-more a{display:inline-block;padding:8px 0;margin:-8px 0;font-weight:700;color:#232834;white-space:nowrap;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)}
@media (hover:hover){.v9 .wd-life-more a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .wd-life-more a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px;text-decoration-color:#232834}
.wd-log{position:relative;--g:26px}
.v9 .wd-log ol{display:grid;gap:var(--g);margin:0;padding:0;list-style:none}
.v9 .wd-log li{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:14px;align-items:start;margin:0;padding:0 0 0 40px}
.wd-log li:not(:last-child)::before{content:'';position:absolute;left:11px;top:13px;width:2px;height:calc(100% + var(--g));background:#E4DFD9}
.wd-log-dot{position:absolute;z-index:2;left:4px;top:5px;box-sizing:border-box;width:16px;height:16px;border:2px solid #232834;border-radius:50%;background:#fff}
.k-launch .wd-log-dot{background:#232834}
.k-next .wd-log-dot{border-color:#C2C5CC}
.wd-log-tag{justify-self:start;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;background:#F1EEEA;font-weight:700;font-size:14px;line-height:1;color:#232834}
.k-next .wd-log-tag{box-sizing:border-box;border:1px solid #C2C5CC;background:#fff;color:#4f5565}
.wd-log-t{font-weight:500;font-size:17px;line-height:26px;color:#232834;text-wrap:pretty}
.k-next .wd-log-t{color:#4f5565}
.wd-log-track{position:absolute;z-index:1;left:0;top:13px;bottom:13px;width:24px;overflow:hidden;pointer-events:none}
.wd-log-flow{position:absolute;left:10px;top:-72px;width:4px;height:72px;border-radius:2px;background:#FA5478;opacity:0}
.wd-log.in .wd-log-flow{animation:wdLogFlow 1.8s cubic-bezier(.65,0,.35,1) .35s 1 both}
@keyframes wdLogFlow{0%{top:-72px;opacity:0}15%{opacity:.6}85%{opacity:.6}100%{top:100%;opacity:0}}
.wd-log.in .k-next .wd-log-dot{border-color:#C43A5C;background:#FA5478;transition:background-color .4s cubic-bezier(.65,0,.35,1) 1.85s,border-color .4s cubic-bezier(.65,0,.35,1) 1.85s}
@media (prefers-reduced-motion:reduce){.wd-log-flow{display:none}.wd-log.in .k-next .wd-log-dot{transition:none}}
@media (max-width:1023px){.wd-life-grid{grid-template-columns:minmax(0,1fr)}.wd-log{max-width:560px}}
@media (max-width:560px){.v9 .wd-life-copy p{font-size:17px}.wd-log{--g:22px}.v9 .wd-log li{grid-template-columns:84px minmax(0,1fr);column-gap:12px;padding-left:34px}.wd-log-tag{font-size:13px;padding:0 10px}.wd-log-t{font-size:16px}}

/* ---------- tap areas and the legacy menu, this page only. The logos in the header and footer and the project names 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}
.v9 .wd-case h3 a{display:inline-block;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 build it better: the closing email form, centred, sized and behaving as the hero's at every width. The
   way to reach us when something is broken sits under it as one quiet line with its link ---------- */
.wd-cta .v9-h2{text-wrap:balance}
.wd-cta .v9-sub{text-wrap:pretty}
.wd-cta-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 10px;margin:4px 0 0;font-size:17px;line-height:1.6;color:#4f5565;text-align:center}
.v9 .wd-cta-alt .wd-go{margin-top:0}

/* ================= THE PHONE TYPE SCALE: synced 2 October 2026 from the homepage, by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .wd-go,.ai-clients-head .v9-sub,.wd-clients-head .v9-sub,.v9 .wd-ix p,.v9 .wd-side-copy p,.v9 .wd-prod-list p,.v9 .wd-ai-copy p,.v9 .wd-case p,.v9 .wd-life-copy p,.wd-cta-alt{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .wd-ai-links a{font-size:17px}
.v9-hero.wd-hero h1{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.4)));line-height:1.12}
.v9 .wd-ix h3,.v9 .wd-prod-list h3{font-size:18px}
.v9 .wd-case h3{font-size:20px}
}