/* Our Work v2, built on Web & App Development (page-web-development-v2.css): its shell, header strip, base, buttons, email
   form, reveal, text links, 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
   (ow-*) 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}}

/* ---------- 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%}}
/* the hero swaps files by laying the next over the last: each pass has its own box, stacked in one place */
@media (min-width:1101px){
.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 .ow-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}
.ow-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)}
.ow-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ow-go:hover{color:#232834}.ow-go:hover .ow-go-l{text-decoration-color:#232834}.ow-go:hover .ow-go-a{transform:translateX(3px)}}
.v9 .ow-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ow-go-a{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 */
.ow-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.ow-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.ow-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){.ow-clients-head{margin-bottom:32px}}
@media (max-width:560px){.ow-clients-head .v9-sub{font-size:17px}}

/* ---------- let's do it better: the closing email form, centred, sized and behaving as on every page. Nothing follows it:
   urgent help is reached from the header, the menu and the footer ---------- */
.ow-cta .v9-h2{text-wrap:balance}
.ow-cta .v9-sub{text-wrap:pretty}

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


/* ================= OUR WORK (this page's own) ================= */

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

/* ---------- the opening: compact and without an image, so the filter and the first projects share the first screen. The
   eyebrow and the two-line headline on the left; the lead beside it from 1024px, sitting on the headline's last line.
   Each headline option carries its own --fit (its longer line's width in em, measured in Sailec Bold, plus 2%), so it keeps
   two lines at every width, with room left for a classic scrollbar ---------- */
.v9.ow-open{background:#fff;padding:clamp(28px,5vh,56px) 0 40px}
.ow-open-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px 64px;align-items:end}
.v9.ow-open h1{margin:0;font-weight:700;font-size:clamp(46px,4.3vw,60px);line-height:1.08;letter-spacing:-.03em;color:#232834}
.ow-h1-l{display:block}
.v9.ow-open .v9-lead{margin:0;max-width:480px;padding-bottom:5px;font-size:18px;line-height:1.65;color:#3a3f4b;text-wrap:pretty}
.v9.ow-open .v9-lead b{font-weight:700;color:#232834}
@media (max-width:1023px){.ow-open-grid{grid-template-columns:minmax(0,1fr)}.v9.ow-open h1{font-size:min(56px,calc((100vw - 96px) / var(--fit,9.6)))}.v9.ow-open .v9-lead{max-width:620px;padding:0}}
@media (max-width:820px){.v9.ow-open h1{font-size:min(52px,calc((100vw - 60px) / var(--fit,9.6)))}}
@media (max-width:560px){.v9.ow-open{padding:24px 0 32px}.v9.ow-open .v9-lead{font-size:17px}}

/* ---------- the projects: every one, two to a row under a hairline from the opening, each screen first at one shared 16:9 ---------- */
.v9.ow-work{padding:0 0 104px}
.v9 .ow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 48px;align-items:start;margin:0;padding:40px 0 0;border-top:1px solid #E4DFD9;list-style:none}
.ow-card{margin:0;min-width:0}
.ow-card[hidden]{display:none}
.ow-hd{position:relative}
.ow-shot{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#F1EEEA}
.ow-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}
.ow-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)}
.ow-shot img.on{opacity:1}
/* review only: a project left out, shown by the olderWork tweak */
.ow-flag{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;background:#fff;box-shadow:inset 0 0 0 1.5px #232834;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#232834;pointer-events:none}
.v9 .ow-name{margin:22px 0 6px;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.02em;color:#232834;text-wrap:balance;transition:color .2s cubic-bezier(.65,0,.35,1)}
/* the sector and its dot hold together, so a long list of types wraps after the dot, never before it */
.v9 .ow-meta{margin:0 0 12px;font-size:15px;line-height:1.5;color:#4f5565}
.ow-sw{white-space:nowrap}
.ow-sector{font-weight:700;color:#232834}
/* concept work (not delivered to a client) says so, quietly, at the end of its meta line */
.v9 .ow-tag{display:inline-flex;align-items:center;height:24px;margin-left:10px;padding:0 10px;border-radius:12px;box-shadow:inset 0 0 0 1.5px #E4DFD9;font-weight:700;font-size:11.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#4f5565;vertical-align:1px;white-space:nowrap}
.ow-dot{display:inline-block;position:relative;top:-1px;width:3px;height:3px;margin:0 6px 0 10px;border-radius:50%;background:#8E939E;vertical-align:middle}
.v9 .ow-line{margin:0;max-width:560px;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
/* the case study button: its tap area stretches over the screen and the words above it, so the whole project opens it. The
   plus turns to a minus as it opens */
.v9 .ow-cs-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:12px 0 0;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:16px;line-height:1.3;color:#232834;cursor:pointer}
.ow-cs-btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.ow-cs-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)}
.ow-cs-btn[aria-expanded="true"] .ow-cs-l.o,.ow-cs-btn[aria-expanded="false"] .ow-cs-l.c{display:none}
.ow-cs-i{position:relative;flex:none;width:12px;height:12px}
.ow-cs-i::before,.ow-cs-i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;border-radius:1px;background:currentColor;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.ow-cs-i::after{transform:rotate(90deg)}
.ow-cs-btn[aria-expanded="true"] .ow-cs-i::after{transform:rotate(0deg)}
@media (hover:hover){.ow-hd:hover .ow-name{color:#d33d5c}.ow-hd:hover .ow-cs-l{text-decoration-color:#232834}}
.v9 .ow-cs-btn:focus-visible{outline:0}
.ow-cs-btn:focus-visible::after{outline:2px solid #232834;outline-offset:8px}
.ow-hd:has(.ow-cs-btn:focus-visible) .ow-name{color:#d33d5c}
/* the case study opens under its project by easing its height, and closes the same way; one is open at a time */
.ow-cs{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.65,0,.35,1),visibility 0s linear .5s}
.ow-cs.open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.65,0,.35,1),visibility 0s}
.ow-cs-in{min-height:0;overflow:hidden}
.ow-cs-body{display:grid;gap:18px;margin-top:16px;padding-top:22px;border-top:1px solid #E4DFD9}
.v9 .ow-cs h3{margin:0 0 6px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.v9 .ow-cs p{margin:0;max-width:560px;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .ow-cs .ow-go{margin-top:0}
/* the button that opens the full design reads as the case study's other text links */
.v9 button.ow-go{-webkit-appearance:none;appearance:none;justify-self:start;margin:0;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:17px;line-height:1.3;color:#232834;text-align:left;cursor:pointer}
.v9 button.ow-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}

/* ---------- the full design: a quiet full-screen sheet over the page, the desktop page at full length, then the phones ---------- */
.ow-view{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#232834;overflow-y:auto;overscroll-behavior:contain}
.ow-view::backdrop{background:#fff}
.ow-view[open]{animation:owViewIn .35s cubic-bezier(.65,0,.35,1)}
@keyframes owViewIn{from{opacity:0}to{opacity:1}}
.ow-view-hd{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;background:#fff;border-bottom:1px solid #E4DFD9}
.ow-view-h{margin:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.ow-view-meta{margin:2px 0 0;font-size:15px;line-height:1.45;color:#4f5565}
.ow-view-x{position:relative;flex:none;width:44px;height:44px;margin:0;padding:0;border:1.5px solid #E4DFD9;border-radius:50%;background:#fff;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1)}
.ow-view-x span::before,.ow-view-x span::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:1px;background:#232834;transform:rotate(45deg)}
.ow-view-x span::after{transform:rotate(-45deg)}
@media (hover:hover){.ow-view-x:hover{border-color:#232834}}
.ow-view-x:focus-visible{outline:2px solid #232834;outline-offset:2px}
.ow-view-body{display:grid;gap:56px;max-width:1168px;margin:0 auto;padding:40px 24px 88px}
.ow-view-fig{display:grid;gap:14px;width:100%;margin:0}
.ow-view-fig.d{max-width:880px;justify-self:center}
.ow-view-fig figcaption{font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c}
.ow-view-shot{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#F1EEEA}
.ow-view-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}
.ow-view-shot.d{aspect-ratio:9/16}
.ow-view-shot.m{aspect-ratio:16/9}
.ow-view-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)}
.ow-view-shot img.on{opacity:1}
@media (max-width:560px){.ow-view-hd{padding:10px 16px}#seo .ow-view .ow-view-h{font-size:18px}.ow-view-body{gap:40px;padding:24px 16px 64px}.ow-view-shot{border-radius:12px}}
/* the site's older heading and paragraph styles (margins, the coral rule under headings, their fonts) stop at the sheet */
#seo .ow-view .ow-view-h,#seo .ow-view .ow-view-meta,#seo .ow-view figcaption{position:static;margin:0;padding:0;border:0;background:none;font-family:Sailec,Helvetica,Arial,sans-serif;text-transform:none;text-align:left}
#seo .ow-view .ow-view-h{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
#seo .ow-view .ow-view-meta{margin-top:2px;font-weight:500;font-size:15px;line-height:1.45;letter-spacing:0;color:#4f5565}
#seo .ow-view figcaption{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c}
#seo .ow-view .ow-view-h::before,#seo .ow-view .ow-view-h::after,#seo .ow-view .ow-view-meta::before,#seo .ow-view .ow-view-meta::after,#seo .ow-view figcaption::before,#seo .ow-view figcaption::after{content:none;display:none}
@media (max-width:560px){#seo .ow-view .ow-view-h{font-size:18px}}
@media (prefers-reduced-motion:reduce){.ow-view[open]{animation:none}.ow-view-shot img{transition:none}}
/* Show more: the next projects appear below the last, so nothing above moves; the family's button in its outline form */
.ow-more{display:flex;justify-content:center;margin:64px 0 0}
.v9 button.v9-btn.v9-btn-ghost{color:#232834}
@media (max-width:1023px){.v9 .ow-grid{gap:56px 32px}.v9 .ow-name{font-size:22px}}
@media (max-width:699px){.v9 .ow-grid{grid-template-columns:minmax(0,1fr);gap:48px}}
@media (max-width:560px){.ow-shot{border-radius:12px}.v9 .ow-name{margin-top:18px;font-size:21px}.v9 .ow-meta{font-size:16px}.v9 .ow-line,.v9 .ow-cs p{font-size:16px}.ow-more{margin-top:48px}.v9.ow-work{padding-bottom:88px}.v9 .ow-grid{padding-top:32px}}
@media (prefers-reduced-motion:reduce){.ow-shot img,.ow-cs,.ow-cs.open,.ow-cs-i::before,.ow-cs-i::after,.v9 .ow-name{transition:none}}

/* ================= 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 .ow-go,.ai-clients-head .v9-sub,.ow-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,#seo .ow-view .ow-view-h{font-size:17px}
.v9.ow-open h1{font-size:min(34px,min(52px,calc((100vw - 60px) / var(--fit,9.6))));line-height:1.12}
.v9 .ow-name,.ow-view-h{font-size:18px}
}