/* What we believe v2, built from Web & App Development v2 (page-web-development-v2.css), the starting point CLAUDE.md names:
   its shell, header strip, hero base, buttons, reveal, closing email form and responsive rules are carried over unchanged.
   The hero form, its drawing and loader, the hover icons, the client wall and the service sections are left out: this is a
   company page. 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 (wy-*) 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 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%}}

/* ---------- 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:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

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


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


/* ================= WHAT WE BELIEVE (this page's own) ================= */

/* ---------- the opening: the eyebrow, a two-line headline with one marked word, and the lead. No form, link or animation
   beyond the marker. Centred from 821px, over the line down the centre; up to 820px it aligns left, over the line at the
   content's left edge. The headline holds two lines at every width: each option is sized from its longer line, measured in
   Sailec Bold at -.03em (A "to do it better" 6.30em; B "everything we build" 9.04em; C "with honest decisions" 10.05em;
   D "The principles" 6.59em; E "What guides" 5.90em). Up to 820px the longer line takes 90% of the column at most, 52px at
   the largest; from 821px it runs from 52px to 58px (C, the longest, 583px at most), well inside the centred column ---------- */
.v9-hero.wy-hero{padding:clamp(40px,7vh,88px) 0 40px}
.wy-open{display:flex;flex-direction:column;align-items:center}
.v9 .wy-open .v9-eyebrow{margin:0 0 14px;text-align:center}
.v9-hero.wy-hero h1{margin:0 0 22px;font-size:clamp(52px,4.4vw,58px);text-align:center}
.v9-hero.wy-hero .v9-lead{max-width:600px;margin:0;text-align:center;text-wrap:balance}
@media (max-width:820px){
.wy-open{align-items:flex-start}
.v9 .wy-open .v9-eyebrow,.v9-hero.wy-hero h1,.v9-hero.wy-hero .v9-lead{text-align:left}
.v9-hero.wy-hero .v9-lead{text-wrap:pretty}
.v9-hero.wy-hero h1.wy-h-a{font-size:min(52px,calc((100vw - 44px) / 7))}
.v9-hero.wy-hero h1.wy-h-b{font-size:min(52px,calc((100vw - 44px) / 10.1))}
.v9-hero.wy-hero h1.wy-h-c{font-size:min(52px,calc((100vw - 44px) / 11.2))}
.v9-hero.wy-hero h1.wy-h-d{font-size:min(52px,calc((100vw - 44px) / 7.4))}
.v9-hero.wy-hero h1.wy-h-e{font-size:min(52px,calc((100vw - 44px) / 6.6))}
.v9-hero.wy-hero{padding:32px 0 28px}
}
@media (max-width:560px){.v9-hero.wy-hero .v9-lead{font-size:17px}}

/* ---------- the values: one line down the page with a stop for each value. From 821px the line runs down the centre and the
   values sit on alternating sides, starting on the left as on the current page; up to 820px it runs down the content's left
   edge with every value to its right. Each title is level with its stop: the stop's centre sits on the middle of the
   title's first line (var(--tlh) / 2 down). The line is drawn in pieces, one from each stop to the next (the value's height
   plus the gap) and one from just under the lead to the first stop, so it follows the page's height at every width and ends
   at the last stop. Each text block is as wide as its text, 440px at most, sits var(--off) from the line on either side and
   is left-aligned. Every value holds its space from the first paint: only opacity and transform change ---------- */
.wy-values{padding:0 0 120px;overflow-x:clip}
.v9 .wy-list{--tfs:30px;--tlh:38px;--gap:64px;--lead:64px;--off:clamp(40px,5vw,72px);--x:50%;position:relative;display:grid;gap:var(--gap);margin:0;padding:var(--lead) 0 0}
.v9 .wy-v{position:relative;margin:0}
.v9 .wy-v h2{font-weight:700;font-size:var(--tfs);line-height:var(--tlh);letter-spacing:-.02em;color:#232834;text-wrap:balance}
.v9 .wy-v p{margin:10px 0 0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
/* the stop: a white disc with an ink outline; once reached, a coral disc with a dark-coral edge fades in over it and holds */
.wy-stop{position:absolute;z-index:2;left:calc(var(--x) - 8px);top:calc(var(--tlh) / 2 - 8px);box-sizing:border-box;width:16px;height:16px;border:2px solid #232834;border-radius:50%;background:#fff}
.wy-stop::after{content:"";position:absolute;inset:-2px;box-sizing:border-box;border:2px solid #C43A5C;border-radius:50%;background:#FA5478;opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.wy-v.on .wy-stop::after{opacity:1}
/* the track: a 2px tint line. Each piece clips its own flow, a short soft coral line that runs down it once, under the stops,
   and is gone: it moves by transform alone, from just above the piece to just below it (the AI Chatbots technique, turned
   to run down). It runs at about 320px a second, under a second each (--fd is set as it starts) */
.wy-seg{position:absolute;z-index:1;left:calc(var(--x) - 4px);top:calc(var(--tlh) / 2);width:8px;height:calc(100% + var(--gap));overflow:hidden;pointer-events:none}
.wy-seg::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:#C2C5CC}
.wy-seg.wy-in{top:calc(var(--lead) * -1);height:calc(var(--lead) + var(--tlh) / 2)}
.wy-seg.wy-in::before{border-radius:1px 1px 0 0}
.wy-flow{position:absolute;inset:0;transform:translateY(-100%)}
.wy-flow i{position:absolute;left:2px;bottom:0;width:4px;height:72px;border-radius:2px;background:rgba(250,84,120,.55)}
.wy-seg.run .wy-flow{animation:wyFlow var(--fd,.8s) linear 1 both}
.wy-seg.spent .wy-flow{display:none}
@keyframes wyFlow{from{transform:translateY(-100%)}to{transform:translateY(72px)}}
/* the text: armed from the first paint, as .v9-rv is, so nothing flashes from shown to hidden. It eases in once, 16px from
   its own side, as its stop turns coral; values already above the screen are shown finished at once (.now) */
.wy-tx{width:fit-content;max-width:440px;opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.wy-v:nth-child(odd) .wy-tx{margin:0 calc(50% + var(--off)) 0 auto;transform:translateX(-16px)}
.wy-v:nth-child(even) .wy-tx{margin:0 auto 0 calc(50% + var(--off));transform:translateX(16px)}
.wy-v.on:nth-child(n) .wy-tx{opacity:1;transform:none}
.wy-v.now .wy-tx,.wy-v.now .wy-stop::after{transition:none}
/* an even rhythm: from 821px every value but the last holds at least a one-line title and three lines of text, so a shorter
   one doesn't pull its neighbours closer */
@media (min-width:821px){.v9 .wy-v:not(:last-child){min-height:calc(var(--tlh) + 10px + 4.8 * 18px)}}
@media (min-width:821px) and (max-width:1100px){.v9 .wy-list{--tfs:26px;--tlh:34px;--gap:56px;--lead:56px}}
@media (max-width:820px){
.v9 .wy-list{--tfs:24px;--tlh:32px;--gap:44px;--lead:40px;--x:8px}
.wy-v:nth-child(odd) .wy-tx,.wy-v:nth-child(even) .wy-tx{width:auto;max-width:600px;margin:0 0 0 36px;transform:translateX(16px)}
.v9 .wy-v p{margin-top:8px;font-size:17px}
.wy-values{padding-bottom:88px}
}
/* reduced motion: every stop is coral, no flow runs and the text sits in place */
@media (prefers-reduced-motion:reduce){
.v9 .wy-v:nth-child(n) .wy-tx{opacity:1;transform:none;transition:none}
.wy-stop::after{opacity:1;transition:none}
.wy-flow{display:none}
}

/* ---------- let's do it better together: the closing email form, centred, sized and behaving as on the sister pages, with
   nothing after it ---------- */
.wy-cta .v9-h2{text-wrap:balance}
.wy-cta .v9-sub{text-wrap:pretty}

/* ================= 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 .wy-v p{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.wy-hero h1{font-size:min(34px,clamp(52px,4.4vw,58px));line-height:1.12}
.v9-hero.wy-hero h1.wy-h-a{font-size:min(34px,min(52px,calc((100vw - 44px) / 7)));line-height:1.12}
.v9-hero.wy-hero h1.wy-h-b{font-size:min(34px,min(52px,calc((100vw - 44px) / 10.1)));line-height:1.12}
.v9-hero.wy-hero h1.wy-h-d{font-size:min(34px,min(52px,calc((100vw - 44px) / 7.4)));line-height:1.12}
.v9-hero.wy-hero h1.wy-h-e{font-size:min(34px,min(52px,calc((100vw - 44px) / 6.6)));line-height:1.12}
.v9 .wy-v h2{font-size:min(26px,var(--tfs))}
}