/* Hire pages: one stylesheet for every hire page (hire-<stack>-developers.dc.html), the one exception to a stylesheet per page.
   Built from Pricing (page-pricing.css, October 11, 2026), which carries Web & App Development v2's shared parts
   (page-web-development-v2.css) as Accessibility did, with the fixes from both audits. 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. Nothing here names a
   stack: each page's words, art and measured headline (--hi-em on its h1) live in its own markup. Shared rules first, then
   the family's own (hi-*). Built one section at a time, the hero first */

@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. The menu stays
   as it is for now, and Pricing has no route or tile in it, so markMenu() marks nothing; these rules stay with the shared call */
body.v9-page #wb_menu .rt[aria-current="page"] b,body.v9-page #wb_menu .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wb_menu .rt[aria-current="page"] b::after,body.v9-page #wb_menu .tile[aria-current="page"] b::after{content:'';display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:#FA5478;vertical-align:middle}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500;color:#232834;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.v9 *{box-sizing:border-box}
.v9 :where(h1,h2,h3,p,ul,ol,li){margin:0;padding:0;background:none;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;text-align:left;font-weight:inherit}
.v9 :where(ul,ol,li){list-style:none}
.v9 :where(li)::marker{content:""}
.v9 a{color:inherit;text-decoration:none}
.v9 a:hover{color:#d33d5c}
.v9 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the page runs a little wider than the sister pages (1360px, not 1240px), but narrower than the header, which spans the
   window: from 1280px the side space is 56px, so on wider screens the content sits inset from the logo and the call button */
.v9-wrap{max-width:1360px;margin:0 auto;padding:0 40px;position:relative}
@media (min-width:1280px){.v9-wrap{padding:0 56px}}
.v9-eyebrow{display:block;font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c;margin:0 0 14px}
.v9-h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em}
.v9-sec{padding:88px 0}
.v9-bone{background:#F1EEEA}
.v9-head{margin-bottom:48px}
.v9-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}

/* ---------- reveal: sections ease in once as they reach the viewport ---------- */
.v9-rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.v9-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v9-rv{opacity:1;transform:none;transition:none}}

/* ---------- hero: copy on the left, the animation on the right ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.v9-hero h1{font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;margin:0 0 24px}
.v9-hero .v9-lead{font-size:18px;line-height:1.65;color:#3a3f4b;max-width:520px;margin:0 0 36px}
.v9-hero .v9-lead b{font-weight:700;color:#232834}
/* the one marked word: coral type on a blush marker that sweeps in once */
.v9-hl{position:relative;z-index:0;color:#d33d5c;white-space:nowrap}
.v9-hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.09em;top:.32em;bottom:.12em;background:#FDE0E6;border-radius:.06em .18em .08em .2em;transform:rotate(-1deg);transform-origin:left center;animation:v9Hl .9s cubic-bezier(.65,0,.35,1) .35s both}
@keyframes v9Hl{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.v9-hl::before{animation:none}}
.v9-hero-form{display:flex;flex-wrap:nowrap;gap:10px}
.v9-hero-email{flex:0 1 262px;width:262px;min-width:0;height:48px;padding:0 22px;border:1.5px solid #CFC9C1;border-radius:24px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
.v9-hero-email::placeholder{color:#6b7180}
.v9-hero-email:focus{border-color:#232834;box-shadow: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 */
.hi-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 .hi-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}
.hi-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)}
.hi-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .hi-go:hover{color:#232834}.hi-go:hover .hi-go-l{text-decoration-color:#232834}.hi-go:hover .hi-go-a{transform:translateX(3px)}}
.v9 .hi-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.hi-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 */
.hi-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.hi-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.hi-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){.hi-clients-head{margin-bottom:32px}}
@media (max-width:560px){.hi-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)}
}



/* ================= HIRE PAGES (the family's own) ================= */

/* ---------- the hero: the eyebrow, then a headline that holds two lines at every width, for any stack. Each page sets --hi-em
   on its h1: the longer line's width in em, in Sailec Bold at -.03em, measured on the woff2 (tools: the method reproduces
   Pricing's figures to the third decimal). Up to 1100px the size follows the viewport, so that line takes 91% of the column at
   most, 56px at the largest; from 1101px, where the copy column is 560px, that line is 510px at most. WordPress: "Hire
   WordPress developers" 12.53em (12.74 with B's comma): 20.1px at 320, 25.2px at 390, 56px from 820 to 1100, 40.7px from
   1101. The form is sized as CLAUDE.md sets it for heroes: "Book a call" at 172px beside a 262px field ---------- */
.v9-hero.hi-hero .v9-eyebrow{line-height:1.48}
.v9-hero.hi-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.hi-hero h1{font-size:min(56px,calc((100vw - 44px) / (var(--hi-em,12.53) * 1.094)))}
@media (min-width:821px){.v9.hi-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.hi-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.hi-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.hi-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.hi-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.hi-hero h1{font-size:min(56px,calc(510px / var(--hi-em,12.53)))}
.v9-hero.hi-hero .v9-lead{max-width:520px}
.hi-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's box keeps its shape from the first paint: the open seat (art/hire/hi-<stack>-hero.json), 1600 x 1320. Up to 1100px
   it sits below the form; at 560px and below it runs to the window's edges, for the phone version (-p.json), 1100 x 1606 */
.hi-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.hi-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1100/1606}}
/* the landing view: on desktop the hero's top space follows the window's height */
.v9-hero.hi-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.hi-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.hi-hero{padding:28px 0 48px}}

/* ---------- How hiring works (#how): the four steps read as one sentence across the section, "You tell us. We introduce. You
   choose. They start.", each phrase set large over its step's title and line. An ordered list, with no numbers shown and no track.
   The phrases' full stops are the one coral part. Four columns from 1101px, two from 561px, one on phones. The phrase is sized so
   the longest, "We introduce." (6.5em in Sailec Bold at -.03em), holds one line in its column at every width ---------- */
.hi-how{border-top:1px solid #E4DFD9}
.hi-how .hi-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.hi-how .hi-step{min-width:0}
.hi-how .hi-say{margin:0 0 22px;font-weight:700;font-size:40px;line-height:1.08;letter-spacing:-.03em;color:#232834}
.hi-how .hi-dot{color:#d33d5c}
.hi-how .hi-step h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.hi-how .hi-line{max-width:34ch;font-size:17px;line-height:1.6;color:#4f5565}
@media (min-width:1101px) and (max-width:1279px){.hi-how .hi-say{font-size:min(40px,calc((100vw - 176px) / 26))}}
@media (max-width:1100px){.hi-how .hi-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}}
/* where a title can take two lines beside one that takes one, each keeps two lines' room, so the lines beneath start level */
@media (min-width:1101px),(min-width:561px) and (max-width:820px){.hi-how .hi-step h3{min-height:2.6em}}
@media (min-width:561px) and (max-width:820px){.hi-how .hi-say{font-size:34px}}
@media (max-width:560px){.hi-how .hi-steps{grid-template-columns:minmax(0,1fr);gap:36px}.hi-how .hi-say{margin-bottom:14px;font-size:24px;line-height:1.15}.hi-how .hi-step h3{font-size:18px}.hi-how .hi-line{font-size:16px}}

/* ---------- What they work on (#skills): the heading takes the grid's first cell, then one cell per kind of work, with its icon
   (drawn for the work, with its hover Lottie), its title and its line. Four columns from 1101px, two from 561px, one on phones.
   Static; on hover (mouse or trackpad, from 821px) each icon plays once and holds, and plays back on leave; the cells aren't links,
   so there's no focus to play them. WooCommerce takes its mark where it's named, with its owner's credit line under the grid ---------- */
.hi-skills{border-top:1px solid #E4DFD9}
.hi-skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 40px}
.hi-skill-head .v9-sub{margin:18px 0 0;max-width:300px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .hi-skill{display:grid;grid-template-rows:auto auto 1fr;align-content:start;min-width:0}
.hi-skill .cb-ic-box{grid-row:auto;margin:0 0 18px -6px}
.v9 .hi-skill h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .hi-skill h3 sup{font-size:.55em;font-weight:500;line-height:0;vertical-align:.8em;margin-left:1px}
.v9 .hi-skill p{max-width:32ch;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .hi-tm{margin:48px 0 0;font-size:16px;line-height:1.6;color:#4f5565}
/* the hand-off to the stack's own service page, under the grid, its link under its words when they don't fit one line; a credit
   line, where the page has one, follows it */
.v9 .hi-sk-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:48px 0 0;font-size:17px;line-height:1.6;color:#4f5565}
.hi-sk-more .hi-go{margin-top:0}
.v9 .hi-sk-more + .hi-tm{margin-top:24px}
@media (min-width:561px){.v9 .hi-skill h3{min-height:2.6em}}
@media (max-width:1100px){.hi-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}.hi-skill-head .v9-sub{max-width:420px}}
@media (max-width:560px){.hi-skill-grid{grid-template-columns:minmax(0,1fr);gap:36px}.hi-skill-head .v9-sub{font-size:16px}.v9 .hi-skill h3{font-size:18px}.v9 .hi-skill p{font-size:16px}.v9 .hi-tm{margin-top:36px}.v9 .hi-sk-more{margin-top:36px;font-size:16px}.v9 .hi-sk-more + .hi-tm{margin-top:20px}}

/* ---------- Ways to hire (#ways): the two ways side by side, split by one hairline and centred: one disc for one developer, a few
   overlapping for a small team (the hero's tint discs: no faces, and no count in the words), the way's name and its line. No tier
   cards and nothing marked "most popular". Stacked on phones, the hairline between them. Then the link to Engagement Models;
   Pricing's joins it once Pricing is live ---------- */
.hi-ways{border-top:1px solid #E4DFD9}
.v9 .hi-ways-h{margin:0 0 48px;text-align:center}
.hi-ways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;margin:0 auto}
.v9 .hi-way{display:flex;flex-direction:column;align-items:center;padding:8px 48px;text-align:center}
.v9 .hi-way + .hi-way{border-left:1px solid #E4DFD9}
.hi-discs{display:flex;justify-content:center;height:56px;margin:0 0 22px}
.hi-disc{flex:none;width:56px;height:56px;border-radius:50%;background:#C2C5CC;border:1.5px solid #232834;box-shadow:0 0 0 4px #fff}
.hi-disc + .hi-disc{margin-left:-14px}
/* the avatar icon: a white head and shoulders on the tint disc, cut by its edge; no face, name or photo */
.hi-disc{position:relative;overflow:hidden}
.v9 .hi-disc .hi-av{display:block;width:100%;height:100%;fill:#fff;stroke:none}
/* the illustrated people: drawn in the family's line (ink outline), each with its own hair, skin and top, no facial features, no names */
.v9 .hi-disc .hi-pp{display:block;width:100%;height:100%;stroke:#232834;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.v9 .hi-way h3{margin:0 0 8px;font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.02em;color:#232834;text-align:center}
.v9 .hi-way p{max-width:30ch;font-size:17px;line-height:1.6;color:#4f5565;text-align:center;text-wrap:balance}
.v9 .hi-ways-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px;margin:44px 0 0;font-size:17px;line-height:1.6;color:#4f5565;text-align:center}
.hi-ways-more .hi-go{margin-top:0}
/* the two links read as pairs, so each wraps whole: Pricing (live October 11, 2026), then Engagement Models */
.v9 .hi-ways-more{gap:0 32px}
.hi-pair{display:inline-flex;flex:0 0 auto;max-width:100%;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px}
@media (min-width:561px) and (max-width:820px){.v9 .hi-way{padding:8px 28px}.v9 .hi-way h3{font-size:24px}}
@media (max-width:560px){.v9 .hi-ways-h{margin-bottom:32px}.hi-ways-grid{grid-template-columns:minmax(0,1fr)}.v9 .hi-way{padding:28px 0}.v9 .hi-way:first-child{padding-top:0}.v9 .hi-way + .hi-way{border-left:0;border-top:1px solid #E4DFD9}.v9 .hi-way h3{font-size:20px}.v9 .hi-way p{font-size:16px}.v9 .hi-ways-more{margin-top:28px;font-size:16px}}

/* ---------- Working in your team (#working): the three lines as a plain list, each led by its words in bold, beside a static
   drawing of the client's access list in the family's line (a white card, ink outline, warm shade): the developer's tint disc and
   role, then what they can reach, each row ticked in ink or left open in tint. Hidden from screen readers; nothing in it is a
   control. Stacked below 1101px, the drawing under the list ---------- */
.hi-work{border-top:1px solid #E4DFD9}
.hi-work-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.hi-work .v9-head{margin-bottom:36px}
.v9 .hi-work-list{display:grid;gap:20px;max-width:560px}
.v9 .hi-work-list li{font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .hi-work-list b{font-weight:700;color:#232834}
.hi-access{justify-self:center;display:grid;gap:0;width:100%;max-width:440px;padding:10px 28px 14px;border:1.5px solid #232834;border-radius:20px;background:#fff;box-shadow:8px 10px 0 #E4DFD9}
.hi-acc-head{display:flex;align-items:center;gap:14px;padding:16px 0 18px;border-bottom:1.5px solid #E4DFD9}
.hi-acc-disc{flex:none;width:44px;height:44px;border-radius:50%;background:#C2C5CC;border:1.5px solid #232834;overflow:hidden}
/* the chosen developer from the hero and Ways to hire, drawn the same way */
.v9 .hi-acc-disc .hi-pp{display:block;width:100%;height:100%;stroke:#232834;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.hi-acc-t{font-weight:700;font-size:18px;line-height:1.3;color:#232834}
.hi-acc-row{display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid #E4DFD9}
.hi-acc-row:last-child{border-bottom:0}
.hi-acc-ic{flex:none;width:20px;height:20px;border-radius:6px;background:#E4DFD9;border:1.5px solid #232834}
.hi-acc-l{flex:1;min-width:0;font-size:17px;line-height:1.3;color:#232834}
.hi-acc-ok,.hi-acc-no{flex:none;position:relative;width:26px;height:26px;border-radius:50%}
.hi-acc-ok{background:#232834}
.hi-acc-ok::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.hi-acc-no{border:1.5px solid #C2C5CC}
.hi-acc-no::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:#C2C5CC}
.hi-acc-row:has(.hi-acc-no) .hi-acc-l{color:#4f5565}
@media (max-width:1100px){.hi-work-grid{grid-template-columns:minmax(0,1fr)}.hi-access{justify-self:start}}
@media (max-width:560px){.v9 .hi-work-list li{font-size:16px}.hi-work .v9-head{margin-bottom:28px}.hi-access{padding:6px 20px 10px;box-shadow:6px 8px 0 #E4DFD9}.hi-acc-t{font-size:17px}.hi-acc-l{font-size:16px}.hi-acc-row{min-height:54px}}

/* ---------- Tell us who you need (#hire): the page's one bone band and its main interaction. The form sits on the band itself,
   one page of real controls: the work as tick tiles (four across from 1101px, two from 561px, one on phones), the two choices as
   rows of equal segments (stacked rows on phones), then the time zone, the contact details three across, the note and Request
   developers. Not Pricing's sheet of tick rows, nor Engagement Models' steps. Tiles and segments are 52px or taller, with a focus
   ring on the control's own box; a ticked tile warms to blush with an ink tick, a chosen segment fills with ink. Error rows are
   there from the first paint, so nothing moves; the thank-you takes the form's place, which keeps its height ---------- */
.v9 .hi-sheet{position:relative}
.v9 .hi-form{display:grid;gap:36px;transition:opacity .45s cubic-bezier(.65,0,.35,1),visibility 0s}
.v9 .hi-fs{min-width:0;margin:0;padding:0;border:0}
.v9 .hi-lg{display:block;float:none;width:100%;margin:0 0 16px;padding:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.hi-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v9 .hi-tile{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1.5px solid #C2C5CC;border-radius:14px;background:#fff;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1)}
.hi-tile input,.hi-seg input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.hi-box{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid #232834;border-radius:6px;background:#fff}
.v9 .hi-box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;opacity:0}
.v9 .hi-tile-t{font-size:16px;line-height:1.35;color:#232834}
.v9 .hi-tile:has(input:checked){border-color:#232834;background:#FDE0E6}
.v9 .hi-tile:has(input:checked) .hi-box{background:#232834}
.v9 .hi-tile:has(input:checked) .hi-box svg{opacity:1}
.v9 .hi-tile:has(input:focus-visible){outline:2px solid #232834;outline-offset:3px}
@media (hover:hover){.v9 .hi-tile:hover{border-color:#232834}}
.hi-segs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:760px;border:1.5px solid #C2C5CC;border-radius:14px;background:#fff;overflow:hidden}
.hi-segs.hi-segs-3{max-width:600px}
.v9 .hi-seg{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 14px;border-left:1.5px solid #C2C5CC;font-size:16px;line-height:1.3;color:#232834;text-align:center;cursor:pointer;transition:background-color .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
.v9 .hi-seg:first-child{border-left:0}
.v9 .hi-seg:has(input:checked){background:#232834;color:#fff}
.v9 .hi-seg:has(input:focus-visible){box-shadow:inset 0 0 0 2px #232834,inset 0 0 0 4px #fff}
@media (hover:hover){.v9 .hi-seg:hover:not(:has(input:checked)){background:#F1EEEA}}
.v9 .hi-fl{display:grid;gap:8px;align-content:start;min-width:0}
.v9 .hi-lb{font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.v9 .hi-opt{margin-left:6px;font-weight:500;font-size:14px;color:#4f5565}
.v9 .hi-tx{width:100%;height:52px;margin:0;padding:0 16px;border:1.5px solid #C2C5CC;border-radius:12px;background:#fff;font:inherit;font-size:17px;color:#232834;transition:border-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .hi-tx:focus{outline:none;border-color:#232834;box-shadow:0 0 0 3px #F1EEEA,0 0 0 5px #232834}
.v9 .hi-tx.bad{border-color:#d33d5c}
.v9 .hi-ta{height:auto;min-height:128px;padding:14px 16px;line-height:1.5;resize:vertical}
.hi-tz{max-width:420px}
.hi-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}
.v9 .hi-err{min-height:22px;margin:8px 0 0;font-size:14px;line-height:1.5;color:#c62d4f}
.v9 .hi-fl .hi-err{margin-top:0}
.hi-end{display:grid;justify-items:start;gap:4px}
.v9 .hi-send{width:236px;padding:0}
.v9 .hi-send.sending{background:#FCA3B6}
.v9 .hi-send.sending:disabled{opacity:1}
.v9 .hi-send.sending:hover{translate:none;box-shadow:none}
.v9 .hi-send.sending .em-btn-lbl,.v9 .hi-send.sending .arr{display:none}
.v9 .hi-send.sending .em-spin{display:block;margin-right:0}
.v9 .hi-done{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;max-width:640px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1),visibility 0s .55s}
.v9 .hi-done:focus{outline:none}
.hi-done .em-talk-ic{grid-row:1/3;margin-top:2px}
.v9 .hi-done-h{font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.v9 .hi-done-p{margin-top:6px;font-size:17px;line-height:1.6;color:#4f5565}
.hi-sheet.done .hi-form{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s cubic-bezier(.65,0,.35,1),visibility 0s .45s}
.hi-sheet.done .hi-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}
@media (max-width:1100px){.hi-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.hi-three{grid-template-columns:minmax(0,1fr)}.hi-tz{max-width:none}}
@media (max-width:560px){
.hi-tiles{grid-template-columns:minmax(0,1fr)}
.v9 .hi-tile{min-height:56px}
.hi-segs,.hi-segs.hi-segs-3{grid-auto-flow:row;grid-auto-columns:auto;max-width:none}
.v9 .hi-seg{justify-content:flex-start;border-left:0;border-top:1.5px solid #C2C5CC;text-align:left}
.v9 .hi-seg:first-child{border-top:0}
.v9 .hi-lg{font-size:18px}
.hi-end{justify-items:stretch}
.v9 .hi-send{width:100%}
.v9 .hi-done-h{font-size:20px}
.v9 .hi-done-p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.v9 .hi-form,.v9 .hi-done,.hi-sheet.done .hi-form,.hi-sheet.done .hi-done,.v9 .hi-tile,.v9 .hi-seg,.v9 .hi-tx{transition:none}}

/* ---------- Questions worth asking (#questions): one row per question, the question at the left and its answer open at the right,
   hairlines between; every answer is in the page's text, with nothing to open. Stacked from 820px down. Not Pricing's newspaper
   columns. Only the confirmed questions: the rest wait for section 1's answers, and the whole-project question for WordPress
   Development to go live ---------- */
.hi-q-list{border-top:1px solid #E4DFD9}
.v9 .hi-q{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 64px;padding:32px 0;border-bottom:1px solid #E4DFD9}
.v9 .hi-q-h{font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .hi-q-a{max-width:62ch;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.hi-q-b{display:grid;justify-items:start;min-width:0}
@media (max-width:820px){.v9 .hi-q{grid-template-columns:minmax(0,1fr);padding:26px 0}}
@media (max-width:560px){.v9 .hi-q-h{font-size:20px}.v9 .hi-q-a{font-size:16px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them ---------- */
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}

/* ---------- the closing: the email form, centred, sized and behaving as the hero's. Nothing follows it ---------- */
.hi-cta .v9-h2{text-wrap:balance}
.hi-cta .v9-sub{text-wrap:pretty}

/* text for screen readers only */
.hi-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Accessibility's own audit (October 10, 2026): its fixes, carried here as on that page; on every page at go-live ---------- */
/* the coral button stays the site's coral, as on every other page (your call, October 10, 2026). The audit's finding stands:
   white on #FA5478 is 3.2:1, under the 4.5:1 its 14 to 16px label needs; to be decided for every page at once */
/* the focus rings the header logo and the footer's Cookie Preferences were missing */
body.v9-page .header-wide.wb-hd .header .logo:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:4px}
body.v9-page .wb-ft .wb-ft-cc:focus-visible{outline:2px solid #F1EEEA;outline-offset:3px;border-radius:3px}
/* the footer's links: 44px tap areas on touch widths, from an invisible band above and below, so nothing moves */
@media (max-width:1024px){body.v9-page .wb-ft .wb-ft-cols a,body.v9-page .wb-ft .wb-ft-bar a,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc{position:relative}body.v9-page .wb-ft .wb-ft-cols a::after,body.v9-page .wb-ft .wb-ft-bar a::after,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc::after{content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px}}
/* the thank-you takes focus when it replaces the form, so it's read out; it isn't a control, so it shows no ring */
.em-talk-done:focus{outline:none}
/* the hand-over audit (October 11, 2026). The header logo has no size of its own until its image loads, so the strip grew from
   14px to 45px and moved the hero (layout shift 0.008 at 390px, 0.016 at 1280px): its box is reserved from its file's shape,
   4393 x 1501. A shared part: the same rule belongs on every page at go-live */
body.v9-page .header-wide.wb-hd .logo img{aspect-ratio:4393/1501;height:auto}
/* and the cookie notice's mount: until Cookie Consent.dc.html arrives, the runtime holds its place with a 0 x 0 placeholder whose
   1px borders still make it 2px tall, above the header; when the notice mounts (fixed, out of the flow) the whole page moves up
   2px. Its borders are dropped, so it holds no height at all. A shared part too, for every page at go-live */
body.v9-page .sc-placeholder[title="Cookie Consent"]{border:0;background:none}
/* and the type: until Sailec arrives the fallback sets each line's text box from its own height, 115% of the size against Sailec's
   148% (ascent 108% and descent 40% in Bold, 107% and 36% in Medium, measured on the woff2 files), and runs narrower, so the hero's
   lines moved up to 6px, and the words after a change of weight sideways, when the font swapped. The fallback is Arial (on Mac and
   Windows alike) scaled to Sailec's average width (Bold 101.65%, Medium against Arial's regular 107.64%, measured on this page's
   own headings and lead) and given Sailec's heights (the overrides are scaled with it). With both weights preloaded in the page,
   the swap usually comes before the first paint anyway */
@font-face{font-family:'Sailec Fallback';font-weight:100 600;src:local('Arial'),local('ArialMT');size-adjust:107.64%;ascent-override:99.41%;descent-override:33.44%;line-gap-override:0%;
font-display: swap;
}
@font-face{font-family:'Sailec Fallback';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101.65%;ascent-override:106.25%;descent-override:39.35%;line-gap-override:0%;
font-display: swap;
}
.v9{font-family:Sailec,'Sailec Fallback',Helvetica,Arial,sans-serif}


/* ================= THE PHONE TYPE SCALE: written October 11, 2026 by tools/phone-type.js and run again October 12, 2026 with every section built. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger. The shared selectors' steps below are unchanged by the second run. Each hire section sets its own phone sizes in its block, to the same scale (titles 18 to 20px, body 16px, fields and buttons kept); the tool's second step for those (titles to 17px, fields to 16px) is left out on purpose ================= */
@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 .hi-go,.ai-clients-head .v9-sub,.hi-clients-head .v9-sub{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead{font-size:17px}
.v9-hero.hi-hero h1{font-size:min(34px,min(56px,calc((100vw - 44px) / (var(--hi-em,12.53) * 1.094))));line-height:1.12}
}