/* Join the team, built from Web & App Development (page-web-development-v2.css): its shell, header strip, hero base, buttons,
   reveal and responsive rules are carried over unchanged; the hero email form, the client wall and the service sections are
   left out. 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 (jt-*) 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: a quiet help link, then the menu, then the call button last, at the edge. The row runs the full width
   of the window and is a flex line centred on the logo. The links go under 700px and the button under 521px */
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}}

/* ---------- 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 1360px wide, as on Data Engineering; from 1280px the side space is 56px */
.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-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}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

/* ---------- tap areas and the legacy menu. 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}


/* ================= JOIN THE TEAM (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 "Do work you’re" 6.87em; B "Help us build" 5.97em; C "Build
   software" 6.66em; D "Good software," 7.12em; E "Do your best" 5.86em): up to 1100px it is set from the viewport, so the
   longer line takes 91% of the column at most, 56px at the largest; from 1101px, where the copy column is 560px, it runs
   from 52px to 58px, as on Data Engineering. The lead ends on its bold phrase; one button follows it, with no form and no
   second link ---------- */
.v9-hero.jt-hero h1.jt-h-a{font-size:min(56px,calc((100vw - 44px) / 7.6))}
.v9-hero.jt-hero h1.jt-h-b{font-size:min(56px,calc((100vw - 44px) / 6.6))}
.v9-hero.jt-hero h1.jt-h-c{font-size:min(56px,calc((100vw - 44px) / 7.4))}
.v9-hero.jt-hero h1.jt-h-d{font-size:min(56px,calc((100vw - 44px) / 7.9))}
.v9-hero.jt-hero h1.jt-h-e{font-size:min(56px,calc((100vw - 44px) / 6.5))}
.v9-hero.jt-hero .v9-lead{margin-bottom:34px}
.jt-hero-act{display:flex}
@media (max-width:560px){.v9-hero.jt-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.jt-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.jt-hero h1.jt-h-a,.v9-hero.jt-hero h1.jt-h-b,.v9-hero.jt-hero h1.jt-h-c,.v9-hero.jt-hero h1.jt-h-d,.v9-hero.jt-hero h1.jt-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.jt-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.jt-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 */
.jt-hero .v9-illo{aspect-ratio:1920/1480}
.jt-hero .v9-illo-art > div{position:absolute;inset:0}
/* the landing view: on desktop the hero's top space follows the window's height, so the headline and drawing hold the middle
   of the first view */
.v9-hero.jt-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.jt-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.jt-hero{padding:28px 0 48px}}
/* ---------- what the work is like: a ledger. Type only, with no icons, cards or numbers. Each statement is one row between 1px
   shade rules: from 821px its title sits on the left and its sentence on the right, their first lines on one baseline; up to
   820px the title sits above its sentence. Each row eases in once as it reaches the screen. Every statement is a promise, so
   a row shows only once it is confirmed ---------- */
.jt-work{border-top:1px solid #E4DFD9}
.jt-work .v9-h2{margin:0 0 40px;text-wrap:balance}
.v9 .jt-led{margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.v9 .jt-led-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:baseline;margin:0;padding:34px 0 36px;border-top:1px solid #E4DFD9}
.v9 .jt-led h3{margin:0;font-weight:700;font-size:28px;line-height:1.25;letter-spacing:-.02em;color:#232834;text-wrap:balance}
.v9 .jt-led p{margin:0;max-width:560px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.v9 .jt-led-row{column-gap:48px}}
@media (max-width:820px){.v9 .jt-led-row{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:26px 0 28px}.v9 .jt-led h3{font-size:22px}.jt-work .v9-h2{margin-bottom:28px}}
@media (max-width:560px){.v9 .jt-led h3{font-size:20px}.v9 .jt-led p{font-size:16px}}

/* ---------- open roles: a clean list beside its heading (heading on the left from 821px, as the ledger's titles sit). Each
   role is one row and one link to its own page, at least 64px tall: its title, then its discipline, where and type in a
   quiet line, and the button's chevron on the right. Pointing at a row dims its title slightly and moves the chevron 4px
   right, with no background, scaling or shadow. Rows sit between 1px shade rules. With no roles open, one row says so and
   links to the application form ---------- */
.jt-roles{border-top:1px solid #E4DFD9}
.jt-roles-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.jt-roles-grid .v9-h2{margin:0;text-wrap:balance}
.v9 .jt-role-list{margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.v9 .jt-role-list li{margin:0;border-top:1px solid #E4DFD9}
.v9 a.jt-role{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0;color:#232834;text-decoration:none}
.jt-role-txt{display:grid;gap:4px;min-width:0}
.jt-role-t{font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance;transition:color .25s cubic-bezier(.65,0,.35,1)}
.jt-role-m{font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.v9 svg.jt-role-a{flex:none;width:20px;height:20px;stroke:#232834;stroke-width:2.4;fill:none;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 a.jt-role:hover{color:#232834}.jt-role:hover .jt-role-t{color:#4f5565}.v9 .jt-role:hover svg.jt-role-a{transform:translateX(4px)}}
.v9 a.jt-role:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:4px}
.jt-role-grp + .jt-role-grp{margin-top:36px}
.v9 .jt-role-grp-h{margin:0 0 12px;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.v9 .jt-roles-none{padding:28px 0 22px;border-top:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9}
.v9 .jt-roles-none p{margin:0;max-width:560px;font-weight:500;font-size:20px;line-height:1.5;color:#232834;text-wrap:pretty}
/* text links: ink with a tint underline that darkens on hover, and an arrow that steps forward */
.v9 .jt-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}
.jt-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)}
.jt-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .jt-go:hover{color:#232834}.jt-go:hover .jt-go-l{text-decoration-color:#232834}.jt-go:hover .jt-go-a{transform:translateX(3px)}}
.v9 .jt-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.jt-role-t,.v9 svg.jt-role-a,.jt-go-a{transition:none}}
@media (max-width:1023px){.jt-roles-grid{column-gap:48px}}
@media (max-width:820px){.jt-roles-grid{grid-template-columns:minmax(0,1fr)}.jt-roles-grid .v9-h2{margin-bottom:28px}}
@media (max-width:560px){.v9 .jt-roles-none p{font-size:18px}.v9 .jt-go{font-size:16px}}

/* ---------- how we hire: status pills, read like an application's status. From 1101px one row of pills on a 2px tint track,
   each pill white with a 2px ink outline and its step name, its sentence under it. Up to 1100px the pills stack down the
   track on the left, each sentence beside its pill (below it, past the track, on phones). One ordered list; the track is
   decorative. Each step after the first carries the track to the next pill, from one pill's left end to the next, under
   both. As the row comes into view, a short soft coral line runs each piece of track in turn, emerging from under one pill
   and docking under the next, and is gone; each pill it reaches fades in a coral outline and a small coral check with a
   dark-coral edge, and keeps them. Opacity and transform only; it plays once (the logic adds .go, or .done when the row is
   already above the screen) ---------- */
.jt-hire{border-top:1px solid #E4DFD9}
.jt-hire-head .v9-h2{text-wrap:balance}
.v9 .jt-hire-list{--hop:.62s;--t0:.45s;--g:24px;position:relative;display:flex;gap:var(--g);margin:0;padding:12px 0 0;list-style:none;overflow-x:clip}
.v9 .jt-hire-list > li{position:relative;flex:1 1 0;margin:0}
.v9 .jt-pill{position:relative;z-index:2;display:inline-flex;align-items:center;box-sizing:border-box;height:42px;margin:0;padding:0 18px;border:0;border-radius:999px;background:#fff;font-weight:700;font-size:16px;line-height:1;letter-spacing:-.005em;color:#232834;white-space:nowrap}
/* the outline is two rings, ink and coral, so reaching a pill is a fade from one to the other, with no fringe left behind */
.jt-pill::before,.jt-pill::after{content:"";position:absolute;inset:0;border:2px solid #232834;border-radius:inherit;pointer-events:none}
.jt-pill::after{border-color:#FA5478;opacity:0}
.jt-pill-ck{position:absolute;top:-10px;right:-9px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:22px;height:22px;border:1.5px solid #C43A5C;border-radius:50%;background:#FA5478;box-shadow:0 0 0 2px #fff;opacity:0;transform:scale(.6)}
.v9 .jt-pill-ck svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v9 .jt-hire-list p{margin:18px 0 0;max-width:220px;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.jt-hire-seg{position:absolute;z-index:1;left:21px;top:17px;width:calc(100% + var(--g));height:8px;overflow:hidden;pointer-events:none}
.jt-hire-seg::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:#C2C5CC}
.jt-hire-flow{position:absolute;inset:0;opacity:0;transform:translateX(-100%)}
.jt-hire-flow::after{content:"";position:absolute;right:0;top:2px;width:56px;height:4px;border-radius:2px;background:#FA5478;opacity:.6}
.jt-hire-list.go .jt-pill::after{animation:jtOn .35s cubic-bezier(.65,0,.35,1) calc(var(--t0) + var(--i) * var(--hop)) both}
.jt-hire-list.go .jt-pill::before{animation:jtOff .35s cubic-bezier(.65,0,.35,1) calc(var(--t0) + var(--i) * var(--hop)) both}
.jt-hire-list.go .jt-pill-ck{animation:jtCk .4s cubic-bezier(.2,.7,.2,1) calc(var(--t0) + var(--i) * var(--hop) + .05s) both}
.jt-hire-list.go .jt-hire-flow{animation:jtFlowX .52s cubic-bezier(.65,0,.35,1) calc(var(--t0) + var(--i) * var(--hop) + .1s) both}
.jt-hire-list.done .jt-pill::after{opacity:1}
.jt-hire-list.done .jt-pill::before{opacity:0}
.jt-hire-list.done .jt-pill-ck{opacity:1;transform:none}
@keyframes jtOn{from{opacity:0}to{opacity:1}}
@keyframes jtOff{from{opacity:1}to{opacity:0}}
@keyframes jtCk{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes jtFlowX{0%{opacity:0;transform:translateX(-100%)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(56px)}}
@keyframes jtFlowY{0%{opacity:0;transform:translateY(-100%)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(56px)}}
@media (prefers-reduced-motion:reduce){.jt-hire-flow{display:none}.jt-hire-list .jt-pill::after{opacity:1;animation:none!important}.jt-hire-list .jt-pill::before{opacity:0;animation:none!important}.jt-hire-list .jt-pill-ck{opacity:1;transform:none;animation:none!important}}
/* up to 1100px: stacked down the track on the left, each sentence in a second column beside its pill */
@media (max-width:1100px){
.v9 .jt-hire-list{--g:28px;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:28px;row-gap:var(--g);padding-top:10px}
.v9 .jt-hire-list > li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:start}
.v9 .jt-pill{justify-self:start}
.v9 .jt-hire-list p{margin:0;padding-top:8px;max-width:520px}
.jt-hire-seg{left:17px;top:21px;width:8px;height:calc(100% + var(--g))}
.jt-hire-seg::before{left:3px;right:auto;top:0;bottom:0;width:2px;height:auto}
.jt-hire-flow{transform:translateY(-100%)}
.jt-hire-flow::after{left:2px;right:auto;top:auto;bottom:0;width:4px;height:56px}
.jt-hire-list.go .jt-hire-flow{animation-name:jtFlowY}
}
/* phones: the sentence sits under its pill, set past the track */
@media (max-width:560px){
.v9 .jt-hire-list{--g:24px;grid-template-columns:minmax(0,1fr)}
.v9 .jt-hire-list > li{grid-template-columns:minmax(0,1fr)}
.v9 .jt-hire-list p{padding:10px 0 0 44px}
}

/* ---------- what we offer and questions: the heading on the left from 821px, as in Open roles; each shows only once its list
   holds confirmed entries. What we offer is plain text in two columns, each item under a 1px shade rule: no icons or cards.
   Questions is one question per row between rules; each question is a button (at least 64px tall) that opens its answer on
   tap, its plus turning to a minus; the answer fades in. Plain answers, no links unless given ---------- */
.jt-offer,.jt-faq{border-top:1px solid #E4DFD9}
.jt-side-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.jt-side-grid > .v9-h2{margin:0;text-wrap:balance}
.v9 .jt-offer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin:0;padding:0;list-style:none}
.v9 .jt-offer-list li{margin:0;padding:22px 0 28px;border-top:1px solid #E4DFD9}
.v9 .jt-offer-list h3{margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .jt-offer-list p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .jt-faq-list{margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.v9 .jt-faq-list li{margin:0;border-top:1px solid #E4DFD9}
.v9 .jt-faq-q{margin:0;font:inherit}
.v9 .jt-faq-b{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:64px;margin:0;padding:16px 0;border:0;background:none;font-family:inherit;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-align:left;cursor:pointer}
.jt-faq-t{text-wrap:balance}
.jt-faq-ic{position:relative;flex:none;width:18px;height:18px}
.jt-faq-ic::before,.jt-faq-ic::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;border-radius:1px;background:#232834;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.jt-faq-ic::after{transform:rotate(90deg)}
.jt-faq-b[aria-expanded="true"] .jt-faq-ic::after{transform:rotate(0deg)}
@media (hover:hover){.jt-faq-b:hover .jt-faq-t{color:#4f5565}}
.v9 .jt-faq-b:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:4px}
.jt-faq-a{padding:0 48px 24px 0;animation:jtAns .35s cubic-bezier(.2,.7,.2,1) both}
.jt-faq-a[hidden]{display:none}
.v9 .jt-faq-a p{margin:0;max-width:600px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@keyframes jtAns{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jt-faq-ic::before,.jt-faq-ic::after{transition:none}.jt-faq-a{animation:none}}
@media (max-width:1023px){.jt-side-grid{column-gap:48px}}
@media (max-width:820px){.jt-side-grid{grid-template-columns:minmax(0,1fr)}.jt-side-grid > .v9-h2{margin-bottom:28px}}
@media (max-width:560px){.v9 .jt-offer-list{grid-template-columns:minmax(0,1fr)}.v9 .jt-offer-list h3,.v9 .jt-faq-b{font-size:18px}.v9 .jt-offer-list p,.v9 .jt-faq-a p{font-size:16px}.jt-faq-a{padding-right:0}}

/* ---------- apply: the closing line and its sentence centred, then the application form in a column up to 640px, fields
   left-aligned, with nothing after it. Contact's fields, set as this page's: labels always visible, 48px tall and fully
   rounded where single-line, errors under each field. Your name and Email address share a row from 821px. The CV field is
   Contact's drop zone as it is. Sending is Contact's: the button keeps its size and gives way to the spinner; then the form
   fades and the thank-you fades in beside a coral check disc ---------- */
.jt-apply{border-top:1px solid #E4DFD9;padding-bottom:104px}
.jt-apply-head{display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto 40px;text-align:center}
.jt-apply-head .v9-h2{text-align:center;text-wrap:balance}
.v9 .jt-apply-head .v9-sub{margin:18px 0 0;max-width:560px;font-size:18px;line-height:1.6;color:#4f5565;text-align:center;text-wrap:balance}
.jt-stack{display:grid;max-width:640px;margin:0 auto}
.jt-stack>*{grid-area:1/1;min-width:0}
.jt-main{transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.jt-stack.out .jt-main{opacity:0;pointer-events:none}
.jt-stack.done .jt-main{display:none}
.jt-done{justify-self:center;align-self:start;outline:0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1)}
.jt-stack.shown .jt-done{opacity:1;transform:none;pointer-events:auto}
.v9 .jt-done-in{display:flex;align-items:center;gap:16px;margin:0}
.em-talk-ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#FA5478}
.v9 .em-talk-ic svg{width:18px;height:18px;stroke:#fff;stroke-width:2.6;fill:none}
.jt-done-h{font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.jt-form{display:grid;gap:22px}
.jt-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@supports (grid-template-rows:subgrid){
.jt-row{grid-template-rows:repeat(3,auto);row-gap:0}
.jt-row>.jt-f{grid-row:span 3;display:grid;grid-template-rows:subgrid}
.jt-row>.jt-f>label{grid-row:1}.jt-row>.jt-f>.jt-in{grid-row:2}.jt-row>.jt-f>.ct-err{grid-row:3}
}
@media (max-width:820px){.jt-row{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:22px}.jt-row>.jt-f{grid-row:auto;display:block}}
.jt-f{min-width:0}
.v9 .jt-f>label,.v9 .ct-lbl{display:block;margin:0 0 8px;font-weight:500;font-size:15px;line-height:1.35;color:#232834}
.ct-req{color:#d33d5c}
.jt-opt{color:#4f5565}
.jt-in{position:relative}
.jt-in input,.jt-in textarea,.jt-in select{display:block;width:100%;margin:0;border:1px solid #8E939E;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.4;color:#232834;outline:0;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1)}
.jt-in input{height:48px;padding:0 20px;border-radius:24px}
.jt-in textarea{min-height:140px;padding:13px 20px;border-radius:20px;resize:vertical}
.jt-in select{height:48px;padding:0 46px 0 20px;border-radius:24px;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.jt-in select.empty{color:#6b7180}
.jt-in select option{color:#232834}
.v9 .jt-in select:disabled{opacity:1;cursor:default}
.v9 .jt-chev{position:absolute;right:18px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;color:#232834;stroke-width:1.75}
.jt-in input:focus,.jt-in textarea:focus,.jt-in select:focus{border-color:#232834;box-shadow:0 0 0 1px #232834}
.jt-f.bad .jt-in input,.jt-f.bad .jt-in textarea,.jt-f.bad .jt-in select{border-color:#d33d5c}
.jt-f.bad .jt-in input:focus,.jt-f.bad .jt-in textarea:focus,.jt-f.bad .jt-in select:focus{border-color:#d33d5c;box-shadow:0 0 0 1px #d33d5c}
.jt-form.sending .jt-in input,.jt-form.sending .jt-in textarea,.jt-form.sending .jt-in select{color:#4f5565}
/* Contact's messages, check, hint and honeypot, as they are; the check settles in without overshoot */
.v9 .ct-err{display:none;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:14.5px;line-height:1.4;color:#d33d5c}
.v9 .ct-err.on{display:flex}
.ct-err::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23d33d5c' stroke-width='1.5'/%3E%3Cpath d='M8 4.7v4' fill='none' stroke='%23d33d5c' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.1' r='.95' fill='%23d33d5c'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.v9 .jt-in-ck input{padding-right:52px}
.ct-ck{position:absolute;top:50%;right:10px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#FDE0E6;pointer-events:none;transform:scale(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.v9 .ct-ck svg{width:14px;height:14px;stroke:#d33d5c;stroke-width:2.6}
.jt-f.ok .ct-ck{transform:scale(1)}
.v9 .ct-hint{margin:8px 0 0;font-size:14.5px;line-height:1.4;color:#4f5565}
.ct-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Contact's CV field: a dashed drop area. The file input is hidden but still takes focus, so the area shows the focus ring.
   Dragging a file over it turns it blush; a chosen file shows its name with Change. Tapping it opens the file picker */
.v9 .ct-f>label.ct-file{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:12px 16px;border:1px dashed #8E939E;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1)}
.ct-file-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.v9 .ct-f>label.ct-file:focus-within{border-color:#232834;box-shadow:0 0 0 1px #232834}
@media (hover:hover){.v9 .ct-f>label.ct-file:hover{border-color:#232834}}
.v9 .ct-f>label.ct-file.over{border-color:#FA5478;background:#FDE0E6}
.v9 .ct-f>label.ct-file.has{border-style:solid}
.v9 .ct-f.bad>label.ct-file{border-color:#d33d5c}
.v9 .ct-file-ic{flex:none;width:24px;height:24px;color:#4f5565;stroke-width:1.5}
.v9 .ct-file.has .ct-file-ic{color:#d33d5c}
.ct-file-t{flex:1 1 auto;min-width:0;font-size:16px;line-height:1.4;color:#4f5565}
.ct-file.has .ct-file-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#232834}
.ct-file-b{flex:none;font-weight:700;font-size:15px;line-height:1;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px}
.v9 .jt-form.sending .ct-f>label.ct-file{cursor:default}
/* the button: 48px, no lift inside the form; while sending it keeps its size, its label gives way to the spinner and it
   quietens to #FCA3B6. Full width on phones */
.jt-send{display:flex;flex-direction:column;align-items:flex-start;margin-top:6px}
.v9 .jt-sub{height:48px;padding:0 30px;font-size:16px;transition-property:background-color;transition-duration:.35s;transition-timing-function:cubic-bezier(.65,0,.35,1)}
.v9 .jt-sub:hover,.v9 .jt-sub:active{translate:none;box-shadow:none}
.jt-form.sending .jt-sub{background:#FCA3B6}
.jt-form.sending .jt-sub:disabled{opacity:1}
.jt-form.sending .jt-sub .em-btn-lbl,.jt-form.sending .jt-sub svg.arr{visibility:hidden}
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
.v9 .jt-form.sending .jt-sub .em-spin{display:block;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px}
@keyframes emSpin{to{transform:rotate(360deg)}}
.v9 .jt-send .em-status{margin:0;min-height:0;font-size:14.5px;line-height:1.5;color:#c62d4f}
.v9 .jt-send .em-status:not(:empty){margin-top:12px}
@media (max-width:820px){.jt-apply{padding-bottom:80px}.jt-apply-head{margin-bottom:32px}}
@media (max-width:560px){.v9 .jt-sub{width:100%}.jt-done-h{font-size:20px}.v9 .jt-apply-head .v9-sub{font-size:17px}}

/* phones: the hero's h1 at 34px, or its own fit formula when that is smaller */
@media (max-width:560px){
.v9-hero.jt-hero h1.jt-h-a{font-size:min(34px,calc((100vw - 44px) / 7.6));line-height:1.12}
.v9-hero.jt-hero h1.jt-h-b{font-size:min(34px,calc((100vw - 44px) / 6.6));line-height:1.12}
.v9-hero.jt-hero h1.jt-h-c{font-size:min(34px,calc((100vw - 44px) / 7.4));line-height:1.12}
.v9-hero.jt-hero h1.jt-h-d{font-size:min(34px,calc((100vw - 44px) / 7.9));line-height:1.12}
.v9-hero.jt-hero h1.jt-h-e{font-size:min(34px,calc((100vw - 44px) / 6.5));line-height:1.12}
}

/* ================= THE PHONE TYPE SCALE: written 6 October 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.v9 .jt-roles-none p,.v9 .jt-apply-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,.v9 .jt-offer-list h3,.v9 .jt-faq-b{font-size:17px}
.v9 .jt-led h3,.jt-role-t,.jt-done-h{font-size:18px}
}