/* Contact page (new, contact-v2): the site's own header and footer (page-seo-1/2.css) around one hero, with the copy, the
   form card and the other ways to reach us, then the client logos. The shell, base, buttons, reveal and send states are
   carried over unchanged from the Urgent help page, and its form styles are reused here as ct-*. White throughout.
   Everything scopes to .v9 or body.v9-page; page-specific rules (ct-*) 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, white throughout ---------- */
body.v9-page .top-wrap{background-color:transparent;background-image:none}
body.v9-page .main-wrap{background:#fff}
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 strip, as on Urgent help: the quiet links (Sign in, Urgent help?) then the menu. No Book a call button,
   since this is the page it leads to. The links go under 700px, as on the homepage ---------- */
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}
body.v9-page .header .wbm_search{display:none}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l: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}}

/* ---------- 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,dl,dt,dd){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}
.v9-wrap{max-width:1360px;margin:0 auto;padding:0 40px;position:relative}
@media (min-width:1280px){.v9-wrap{padding:0 56px}}

/* ---------- reveal: sections ease in once as they reach the viewport (never the hero or the form) ---------- */
.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 base ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero h1{font-weight:700;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}
/* 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}}

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

/* ---------- the family's send states: on send the button quietens to a spinner (#FCA3B6); the thank-you's coral check disc;
   the error line ---------- */
.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}
@keyframes emSpin{to{transform:rotate(360deg)}}
.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){.v9 .v9-btn .em-spin{animation-duration:2.4s}}

@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-hero{padding:20px 0 48px}
}

/* ================= CONTACT (this page's own) ================= */

/* ---------- hero: from 1100px, the copy on the left with what happens next and the other ways to reach us under it, and the
   form card on the right, level with the headline. Below 1100px one column: the copy, the form, then the rest (side by side
   from 700px), so the form is always the next thing after the lead ---------- */
.v9.ct-hero{padding:56px 0 96px;background:#fff}
.ct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"copy card" "aside card";grid-template-rows:auto 1fr;column-gap:clamp(48px,6vw,104px);align-items:start}
.ct-copy{grid-area:copy;min-width:0;padding-top:8px}
.ct-card{grid-area:card}
.ct-aside{grid-area:aside;min-width:0;margin-top:56px}
.v9-hero.ct-hero h1{font-size:clamp(40px,4.4vw,60px);text-wrap:balance}
.v9-hero.ct-hero .v9-lead{max-width:500px}
.v9 .ct-hero .v9-lead b{font-weight:700;color:#232834}
@media (max-width:1099px){
.ct-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "aside";grid-template-rows:none;row-gap:40px;max-width:800px}
.ct-copy{padding-top:0}
.ct-aside{margin-top:16px}
.v9-hero.ct-hero .v9-lead{max-width:640px}
}
@media (min-width:700px) and (max-width:1099px){.ct-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
@media (max-width:820px){.v9.ct-hero{padding:32px 0 72px}.ct-grid{row-gap:32px}}
@media (max-width:560px){.v9-hero.ct-hero .v9-lead{font-size:17px}}

/* ---------- the form card: the family's white card with a coral outline and a blush step, never hidden by the reveal. Name
   and Work email sit in a pair from 561px, level with each other even when one shows a message; one column on phones. A
   field shows its message only after a send attempt, or once it has been filled in and left ---------- */
.ct-card{position:relative;width:100%;padding:40px 40px 36px;border:1.5px solid #FA5478;border-radius:20px;background:#fff;outline:0;box-shadow:10px 10px 0 0 #FBC0CC}
.ct-card.ct-sizing{overflow:hidden;transition:height .55s cubic-bezier(.65,0,.35,1)}
@media (max-width:1279px){.ct-card{padding:36px 32px 32px}}
@media (max-width:560px){.ct-card{padding:28px 20px 24px;border-radius:16px;box-shadow:8px 8px 0 0 #FBC0CC}}

.ct-form{display:grid;gap:22px}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@supports (grid-template-rows:subgrid){
.ct-row{grid-template-rows:repeat(3,auto);row-gap:0}
.ct-row>.ct-f{grid-row:span 3;display:grid;grid-template-rows:subgrid}
.ct-row>.ct-f>label{grid-row:1}.ct-row>.ct-f>.ct-in{grid-row:2}.ct-row>.ct-f>.ct-err{grid-row:3}
}
@media (max-width:560px){.ct-row{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:22px}.ct-row>.ct-f{grid-row:auto;display:block}}
.ct-f{min-width:0}
.v9 .ct-f>label,.v9 .ct-lbl{display:block;margin:0 0 8px;font-weight:500;font-size:15px;line-height:1.35;color:#232834}
/* required fields carry a dark coral asterisk (the inputs say so to screen readers with aria-required) */
.ct-req{color:#d33d5c}
.ct-in{position:relative}
.ct-in input,.ct-in textarea{display:block;width:100%;margin:0;border:1px solid #8E939E;border-radius:12px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.4;color:#232834;-webkit-appearance:none;appearance:none;outline:0;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
.ct-in input{height:52px;padding:0 16px}
.ct-in textarea{min-height:142px;padding:14px 16px;resize:none;overflow-y:auto}
.v9 .ct-in input::placeholder,.v9 .ct-in textarea::placeholder{color:#6b7180;opacity:1}
.ct-in input:focus,.ct-in textarea:focus{border-color:#232834;box-shadow:0 0 0 1px #232834}
.ct-f.bad .ct-in input,.ct-f.bad .ct-in textarea{border-color:#d33d5c}
.ct-f.bad .ct-in input:focus,.ct-f.bad .ct-in textarea:focus{border-color:#d33d5c;box-shadow:0 0 0 1px #d33d5c}
.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}
/* a valid email: the family's small coral check in a blush disc, inside the field at its right */
.v9 .ct-in-ck input{padding-right:52px}
.ct-ck{position:absolute;top:50%;right:12px;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(.34,1.56,.64,1)}
.v9 .ct-ck svg{width:14px;height:14px;stroke:#d33d5c;stroke-width:2.6}
.ct-f.ok .ct-ck{transform:scale(1)}
/* while sending, the fields lock and quieten; nothing else moves */
.ct-form.sending .ct-in input,.ct-form.sending .ct-in textarea{color:#4f5565}
/* the honeypot: off screen, out of the tab order and hidden from screen readers */
.ct-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- What are you looking to do? A native dropdown in the fields' style, with the family's chevron: the homepage's
   three paths, then partnerships, jobs and anything else. Until one is chosen it shows Choose one in the placeholder grey ---------- */
.ct-in select{display:block;width:100%;height:52px;margin:0;padding:0 46px 0 16px;border:1px solid #8E939E;border-radius:12px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.4;color:#232834;-webkit-appearance:none;appearance:none;outline:0;cursor:pointer;text-overflow:ellipsis;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
.ct-in select.empty{color:#6b7180}
.ct-in select option{color:#232834}
.ct-in select:focus{border-color:#232834;box-shadow:0 0 0 1px #232834}
.ct-f.bad .ct-in select{border-color:#d33d5c}
.ct-f.bad .ct-in select:focus{border-color:#d33d5c;box-shadow:0 0 0 1px #d33d5c}
.v9 .ct-in select:disabled{opacity:1;cursor:default}
.ct-form.sending .ct-in select{color:#4f5565}
.v9 .ct-chev{position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;color:#232834;stroke-width:1.75}

/* ---------- Join our team: the CV field, a dashed drop area in the fields' style. 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 ---------- */
.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 .ct-hint{margin:8px 0 0;font-size:14.5px;line-height:1.4;color:#4f5565}
.v9 .ct-form.sending .ct-f>label.ct-file{cursor:default}
@media (prefers-reduced-motion:reduce){.v9 .ct-f>label.ct-file{transition:none}}

/* ---------- sending: the button keeps its size, its label gives way to the family's spinner and it quietens to #FCA3B6. The
   error line takes no space until it has something to say ---------- */
.ct-send{display:flex;flex-direction:column;align-items:flex-start;margin-top:6px}
.v9 .ct-go{height:52px;padding:0 30px;font-size:16px;transition-property:transform,translate,box-shadow,background-color;transition-duration:150ms,150ms,150ms,.35s;transition-timing-function:var(--btn-ease),var(--btn-ease),var(--btn-ease),cubic-bezier(.65,0,.35,1)}
.ct-form.sending .ct-go{background:#FCA3B6}
.ct-form.sending .ct-go:disabled{opacity:1}
.ct-form.sending .ct-go .em-btn-lbl,.ct-form.sending .ct-go svg.arr{visibility:hidden}
.v9 .ct-form.sending .ct-go .em-spin{display:block;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px}
.v9 .ct-send .em-status{margin:0;min-height:0}
.v9 .ct-send .em-status:not(:empty){margin-top:12px}
.v9 .ct-priv{margin-top:16px;font-size:12px;line-height:18px;color:#4f5565}
.v9 .ct-priv a,.v9 .ct-ways a{color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .ct-priv a{font-weight:700}
@media (hover:hover){.v9 .ct-priv a:hover,.v9 .ct-ways a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .ct-priv a:focus-visible,.v9 .ct-ways a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:560px){.v9 .ct-go{width:100%}}

/* ---------- after sending: the form fades out, the card settles to the confirmation's height (the view moves up to it first
   if it is above the screen), and the confirmation fades in beside the coral check disc ---------- */
.ct-stack{display:grid}
.ct-stack>*{grid-area:1/1;min-width:0}
.ct-main{transition:opacity .4s cubic-bezier(.65,0,.35,1)}
.ct-stack.out .ct-main{opacity:0;pointer-events:none}
.ct-stack.done .ct-main{display:none}
.ct-done{align-self:start;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1)}
.ct-stack.shown .ct-done{opacity:1;transform:none;pointer-events:auto}
.ct-done-in{display:flex;align-items:flex-start;gap:16px}
.ct-done .em-talk-ic{width:44px;height:44px}
.v9 .ct-done .em-talk-ic svg{width:18px;height:18px}
.v9 .ct-done-h{padding-top:8px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .ct-done-p{margin:6px 0 0;font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:560px){.v9 .ct-done-h{font-size:20px;padding-top:9px}.v9 .ct-done-p{font-size:16px}}

/* ---------- under the copy: what happens next (three short steps, each number in an ink ring), then the other ways to reach
   us as label and value rows. Each link is a 44px target ---------- */
.v9 .ct-h3{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.ct-steps{display:grid;gap:14px;margin-top:18px}
.v9 .ct-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;font-size:16.5px;line-height:1.6;color:#4f5565}
.ct-n{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-1px;border:1.5px solid #232834;border-radius:50%;background:#fff;color:#232834;font-weight:700;font-size:13px;line-height:1}
.ct-ways-w{margin-top:40px;padding-top:32px;border-top:1.5px solid #E4DFD9}
.ct-ways-w:first-child{margin-top:0;padding-top:0;border-top:0}
.ct-ways{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:24px;margin-top:8px}
.v9 .ct-ways dt{padding-top:10px;font-weight:500;font-size:15px;line-height:24px;color:#4f5565}
.v9 .ct-ways dd{margin:0;font-size:16.5px;line-height:24px;color:#232834}
.v9 .ct-ways dd a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:700px) and (max-width:1099px){.ct-ways-w{margin-top:0;padding-top:0;border-top:0}}
@media (max-width:420px){.ct-ways{grid-template-columns:minmax(0,1fr)}.v9 .ct-ways dt{padding-top:0}.v9 .ct-ways dd+dt{margin-top:12px}}

/* ---------- our offices, laid out as a row of cards: the heading on the page's centred axis, then one white card per office
   with its landmark drawn in the family's icon language (ink outline over a white body, warm shade for depth, one coral part
   that arrives with its card) and the place under it. Three a row from 768px, each up to 280px and centred; one column on
   phones ---------- */
.v9.ct-loc{padding:0 0 104px}
.v9 .ct-loc-h{font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.2;letter-spacing:-.025em;color:#232834;text-align:center;text-wrap:balance}
.ct-locs{display:grid;grid-template-columns:repeat(3,minmax(0,280px));justify-content:center;gap:20px;margin-top:40px}
.ct-lc{display:grid;justify-items:center;align-content:start;gap:14px;min-width:0;padding:28px 20px 26px;border:1.5px solid #E4DFD9;border-radius:20px;background:#fff}
.ct-lc.v9-rv:nth-child(2){transition-delay:.08s}
.ct-lc.v9-rv:nth-child(3){transition-delay:.16s}
.v9 .ct-lc-n{font-weight:500;font-size:18px;line-height:1.35;color:#232834;text-align:center;text-wrap:balance}
@media (max-width:820px){.v9.ct-loc{padding-bottom:80px}.ct-locs{margin-top:32px}}
@media (max-width:767px){.ct-locs{grid-template-columns:minmax(0,1fr);max-width:420px;margin-left:auto;margin-right:auto;gap:14px}}
/* the family's icons: ink outline over a white body, warm shade for depth, one coral part with a dark-coral edge */
.cb-ic-box{position:relative;display:block;flex:none;width:72px;height:72px}
.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 *{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 .c{fill:#FA5478;stroke:#C43A5C}
.cb-ic .dc{stroke:#C43A5C}
.cb-ic .a{opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1) var(--d,.35s)}
.v9-rv.in .cb-ic .a{opacity:1}
@media (prefers-reduced-motion:reduce){.cb-ic .a{opacity:1;transition:none}.ct-lc.v9-rv{transition-delay:0s}}

/* ---------- what our clients say: the heading on the page's centred axis, then three quotes as white cards in a row, each
   opening with a coral quote mark and signed at its foot (the cards share one height, so the names line up). The quotes are
   whole sentences from the clients' own words on the old Contact page. One a row below 900px ---------- */
.v9.ct-qs{padding:0 0 104px}
.v9 .ct-qs-h{font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.2;letter-spacing:-.025em;color:#232834;text-align:center;text-wrap:balance}
.ct-qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1200px;margin:40px auto 0}
.ct-q{display:flex;flex-direction:column;min-width:0;margin:0;padding:30px 30px 28px;border:1.5px solid #E4DFD9;border-radius:20px;background:#fff}
.ct-q.v9-rv:nth-child(2){transition-delay:.08s}
.ct-q.v9-rv:nth-child(3){transition-delay:.16s}
.ct-q-m{display:block;height:30px;font-weight:700;font-size:60px;line-height:1;color:#FA5478}
.v9 .ct-q blockquote{margin:14px 0 0;padding:0}
.v9 .ct-q blockquote p{font-size:18px;line-height:1.6;color:#232834}
.ct-q figcaption{margin-top:auto;padding-top:24px}
.v9 .ct-q-n{font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.v9 .ct-q-r{margin-top:2px;font-size:15px;line-height:1.45;color:#4f5565}
@media (max-width:1099px){.ct-q{padding:28px 24px 26px}.v9 .ct-q blockquote p{font-size:17px}}
@media (max-width:899px){.ct-qgrid{grid-template-columns:minmax(0,1fr);max-width:640px;gap:16px}}
@media (max-width:820px){.v9.ct-qs{padding-bottom:80px}.ct-qgrid{margin-top:32px}}
@media (prefers-reduced-motion:reduce){.ct-q.v9-rv{transition-delay:0s}}

/* ---------- the client logos: the homepage's line, then ten logos in two rows of five, in one flat grey and still. Each sits in
   a fixed box (the logo files share one 240 x 140 frame, cropped top and bottom), so nothing moves as they arrive; they load
   after the page has painted. Phones: three a row, nine logos ---------- */
.v9.ct-cl{padding:0 0 120px}
.ct-cl-in{max-width:900px;margin:0 auto;padding-top:56px;border-top:1.5px solid #E4DFD9}
.v9 .ct-cl-p{font-size:16px;line-height:24px;color:#4f5565;text-align:center;text-wrap:balance}
.ct-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 32px;margin-top:20px}
.ct-lg{position:relative;display:block;aspect-ratio:12/5;overflow:hidden}
.ct-lg img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:brightness(0) opacity(.4);opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1)}
.ct-lg img.on{opacity:1}
@media (max-width:820px){.v9.ct-cl{padding-bottom:88px}.ct-cl-in{padding-top:44px}.ct-wall{gap:4px 20px}}
@media (max-width:559px){.ct-cl-in{max-width:400px}.ct-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}.ct-lg:nth-child(n+10){display:none}}

@media (prefers-reduced-motion:reduce){.ct-in input,.ct-in textarea,.ct-ck,.ct-in select,.ct-main,.ct-done,.v9 .ct-go,.ct-lg img,.v9 .ct-priv a,.v9 .ct-ways a{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-hero .v9-lead{font-size:17px}
.v9-hero.ct-hero h1{font-size:min(34px,clamp(40px,4.4vw,60px));line-height:1.12}
.v9 .ct-done-h,.v9 .ct-h3{font-size:18px}
.v9 .ct-steps li,.v9 .ct-ways dd,.v9 .ct-lc-n,.v9 .ct-q blockquote p{font-size:16px}
}