*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
body{font-family:Poppins,system-ui,-apple-system,sans-serif;color:#1e1942;background:#fff;line-height:1.6;
font-size:16px;-webkit-font-smoothing:antialiased}
.w{max-width:560px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-weight:800;line-height:1.16;letter-spacing:-.4px}
.kick{color:#d81b60;font-weight:600;font-size:13px;letter-spacing:.02em;margin-bottom:6px}
.mark{color:#f04d92}

/* header: white bar, logo + navy phone pill (as on the landers) */
.hdr{background:#fff;display:flex;align-items:center;justify-content:space-between;
padding:12px 20px;position:relative;z-index:5}
/* NB: neither of these may be scoped to .hdr — the footer uses the same lockup.
   Scoping the `small` here is what rendered "evolveTherapeutic Fostering"; scoping
   the parent (the same bug, missed the first time) silently dropped the footer
   wordmark to 13px/400, i.e. body text. Both are unscoped now; the footer only
   restates the two colours it needs on a dark ground. */
.logo{font-size:27px;font-weight:800;color:#f04d92;letter-spacing:-.5px;line-height:1}
.logo small{display:block;font-size:8.5px;letter-spacing:.14em;color:#1e1942;
text-transform:uppercase;font-weight:600;margin-top:2px}
.foot .logo{color:#ff9ec9}
.foot .logo small{color:#cbb8f2}
.hcall{background:#1e1942;color:#fff;font-size:13.5px;font-weight:600;
text-decoration:none;padding:11px 16px;border-radius:999px;white-space:nowrap}

/* the one CTA: pink gradient pill with an inset white ring + glow */
.cta{display:block;width:100%;background:linear-gradient(120deg,#d81b60,#c9175a);
color:#fff;text-align:center;font-family:inherit;font-weight:800;font-size:17px;
letter-spacing:.3px;padding:20px 12px;border-radius:999px;border:none;cursor:pointer;
box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.85),0 10px 30px rgba(216,27,96,.35)}
.cta.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.6px rgba(203,184,242,.7)}
.cta.lav{background:#cbb8f2;color:#1e1942;box-shadow:none}

/* scoop hero: photo with a quarter-ellipse scooped into the navy band */
.heroimg{position:relative;line-height:0}
.heroimg img{width:100%;height:340px;object-fit:cover;object-position:center 30%;display:block}
.scoop{position:absolute;left:0;bottom:-1px;width:100%;height:64px;background:radial-gradient(ellipse 75% 100% at 18% 100%,#1e1942 99.4%,rgba(30,25,66,0) 100%)} /* scoop drawn as a gradient, no clip-path: clipped layers lagged on scroll, 13 Sep 2026 */
.heroband{background:#1e1942;color:#fff;padding:6px 0 42px}
.heroband h1{font-size:clamp(36px,9.6vw,46px);line-height:1.1}
.heroband p{font-size:17px;color:#d9d3f2;margin:12px 0 22px;max-width:430px}

/* money transparency card */
.moneycard{background:#1e1942;color:#fff;border-radius:22px;padding:26px 24px;
box-shadow:0 18px 50px rgba(30,25,66,.25)}
.moneycard .fig{font-size:40px;font-weight:800;color:#ff9ec9;letter-spacing:-1px;line-height:1.08}
.moneycard .lbl{font-size:17px;font-weight:600;margin:2px 0 10px}
.moneycard p{font-size:14.5px;color:#d9d3f2;line-height:1.55}
.moneycard .writ{margin-top:16px;padding-top:14px;border-top:1px solid rgba(203,184,242,.28);
font-size:14.5px;color:#fff}

/* numbered chip spine on purple */
.spine{background:#3d2a6e;color:#fff;padding:40px 0 44px}
.spine h2{color:#fff}
.spine .sub{color:#cbb8f2;font-size:15.5px;margin:4px 0 26px}
.item{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.chipn{flex:none;width:52px;height:52px;border-radius:14px;display:flex;
align-items:center;justify-content:center;font-size:24px;font-weight:800}
.item b{display:block;font-size:16px;text-transform:uppercase;letter-spacing:.3px;
line-height:1.25;margin-bottom:3px}
.item p{font-size:14.5px;color:#e5defc;line-height:1.5}

/* white tab-step cards (pink foot) */
.tabcard{width:104px;height:126px;background:#fff;border-radius:14px;
box-shadow:0 10px 26px rgba(30,25,66,.14);position:relative;display:flex;
align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}
.tabcard span{font-size:44px;font-weight:800;color:#1e1942;margin-top:-16px}
.tabcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:#f04d92}
.stepcard b{font-size:18px;font-weight:800}
.stepcard p{font-size:15px;color:#5a5f78;margin-top:4px}

/* editorial pull quote */
.quote{background:#faf8ff;padding:46px 0 40px;text-align:center}
.quote .qm{font-size:120px;font-weight:800;color:#e3daf6;line-height:.4;
display:block;margin-bottom:16px}
.quote blockquote{font-size:22px;font-weight:600;line-height:1.45;letter-spacing:-.2px;
max-width:460px;margin:0 auto}
.quote .att{margin-top:16px;font-size:14px}
.quote .att b{display:block}
.quote .att span{color:#5a5f78}

/* proof row + ofsted badge */
.proof{padding:28px 0;display:flex;gap:16px;align-items:center;justify-content:center;
flex-wrap:wrap}
.ofsted{background:#1e1942;color:#fff;font-weight:800;font-size:14px;padding:10px 16px;border-radius:8px}
.stat{font-size:14.5px;color:#5a5f78;max-width:260px}
.stat b{color:#1e1942;font-size:22px;font-weight:800}

/* multi-colour swatch divider */
.swatch{display:flex;height:14px}
.swatch div{flex:1}

/* ===== scroll-reveal =====
   Content is visible by default. The `js` class is set by an inline script in
   <head>, so the hidden state only ever applies when JS is running — if the script
   fails the page is simply static, never blank. Reduced-motion wins over both. */
.js .rv{opacity:0;transform:translateY(28px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--d,0ms);will-change:opacity,transform} /* scroll-reveal ON, bold preview variant, 14 Sep 2026 */
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .js .rv,.js .rv.in{opacity:1 !important;transform:none !important;transition:none !important}
}

/* dark footer */
.foot{background:#14102b;color:#b9b3d6;font-size:13px;padding:30px 0 36px}
.foot a{color:#ff9ec9}
.foot .flinks{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0}

/* desktop navigation — the live site and every competitor runs a full nav plus a
   distinct enquire CTA; the first cut of these directions shipped a 2-link header,
   which is why they read as landing pages rather than a homepage. Hidden below 900px
   (mobile keeps the compact logo + phone bar). */
.nav{display:none}
.hdr .hactions{display:flex;align-items:center;gap:10px}
.henq{background:linear-gradient(120deg,#d81b60,#c9175a);color:#fff;font-size:13.5px;
font-weight:800;padding:11px 18px;border-radius:999px;white-space:nowrap;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}

/* Below 1180 the inline nav doesn't fit, so it becomes a disclosure panel. CSS-only
   (a hidden checkbox) so it can't break with JS off. Without this the six nav
   destinations were unreachable on every phone, tablet and sub-1180 laptop. */
.navtog{position:absolute;opacity:0;pointer-events:none}
.navbtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
font-size:14px;font-weight:800;color:#1e1942;padding:11px 14px;border-radius:999px;
box-shadow:inset 0 0 0 1.6px rgba(30,25,66,.22);white-space:nowrap;min-height:44px}
.navbtn .bars{display:inline-block;width:16px;height:2px;background:#1e1942;
position:relative}
.navbtn .bars::before,.navbtn .bars::after{content:"";position:absolute;left:0;
width:16px;height:2px;background:#1e1942}
.navbtn .bars::before{top:-5px} .navbtn .bars::after{top:5px}
.navpanel{display:none;width:100%;background:#fff;padding:6px 20px 18px;
border-top:1px solid rgba(30,25,66,.1)}
.navpanel a{display:block;padding:14px 2px;font-size:16px;font-weight:600;
color:#1e1942;border-bottom:1px solid rgba(30,25,66,.08)}
.navtog:checked ~ .navpanel{display:block}
.navtog:focus-visible ~ .hactions .navbtn{outline:3px solid #d81b60;outline-offset:2px}
.hdr{flex-wrap:wrap}

@media(min-width:1180px){
 .navbtn,.navpanel{display:none !important}
 .nav{display:flex;align-items:center;gap:16px;margin-left:auto;margin-right:16px}
 .nav a{font-size:14px;font-weight:600;color:#1e1942;white-space:nowrap}
 .nav a:hover{color:#d81b60}
}
/* the phone pill is the first thing to go — the number is in the footer and on
   every CTA path, and it costs ~150px of header width */
.hcall{display:none}
@media(min-width:1440px){
 .hcall{display:inline-block}
 .nav{gap:22px;margin-right:22px}
 .nav a{font-size:15px}
}

@media(min-width:900px){
 /* 1250px content inside a 1440px viewport = 95px gutters. Measured category
    consensus: Fostering People, Fosterplus and (within 10px) Barnardo's all land
    here, and the card maths resolve exactly — 4-up (1250-3*30)/4 = 290px,
    3-up (1250-2*30)/3 = 396.7px. See EVOLVE-DESIGN-SPEC.md section 1. */
 /* 1250px content capped, with a 48px minimum gutter that never collapses.
    The previous `max-width:1290px;padding:0 20px` was full-bleed below 1290, so at
    1280 and 1366 — the two commonest laptop widths — content ran 20px from the
    viewport edge. At 1440 this still yields the target 95px gutter. */
 .w{width:min(1250px,calc(100% - 96px));max-width:none;margin:0 auto;padding:0}
 body{font-size:17px}
 .hdr{padding:18px 24px}
 .heroband h1{font-size:58px}
 .heroband p{font-size:20px;max-width:640px}
}

/* ===== BOLD: full-width colour-blocked bands ===== */
.b{padding:52px 0}
.bnavy{background:#1e1942;color:#fff}
.bpurple{background:#3d2a6e;color:#fff}
/* Pink band deepened. The old light stop (#f04d92) put every piece of small white
   text on it between 3.03:1 and 3.94:1 — all failing AA. #c2185b -> #d81b60 measures
   5.87:1 and 4.95:1 and still reads unmistakably pink. */
.bpink{background:linear-gradient(135deg,#c2185b 0%,#d81b60 100%);color:#fff}
.bpaper{background:#faf8ff;color:#1e1942}
.bnavy .kick,.bpurple .kick{color:#cbb8f2}
.bpink .kick{color:#ffe6f0}

.big{font-weight:800;font-size:clamp(40px,11.5vw,64px);line-height:1.02;letter-spacing:-1.4px}
.big2{font-weight:800;font-size:clamp(28px,8vw,40px);line-height:1.08;letter-spacing:-.6px}
/* The missing mid-scale step. Fosterplus jumps 45 to 22 (2.05x) and its card
   headings are either a shout or a whisper; C had the same hole between 54 and 18. */
.big3{font-weight:800;font-size:clamp(22px,5.4vw,32px);line-height:1.18;letter-spacing:-.3px}

/* four-card intent router, straddling the hero band.
   Fosterplus pulls this row up with a negative margin so it sits partly in the hero
   colour and partly in the band below — that single rule is what makes their hero
   read as composed rather than stacked. */
.router{background:#faf8ff;padding-bottom:52px}
.router .w{display:grid;grid-template-columns:1fr;gap:18px;margin-top:-64px;
position:relative;z-index:3}
.rcard{background:#fff;border-radius:20px 20px 0 20px;padding:26px 24px 22px;
box-shadow:0 12px 16px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.03)}
.rcard b{display:block;font-size:19px;font-weight:800;line-height:1.2;color:#1e1942;
margin-bottom:8px}
.rcard p{font-size:14.5px;color:#5a5f78;line-height:1.5;margin-bottom:14px}
.rcard .rgo{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;
color:#d81b60}

/* bold photographic hero: cinematic full-bleed + navy scrim, text to the floor */
/* min-height, not height: at 390px the hero content is 128px taller than a fixed
   560px box, so the headline was being clipped off the top and running under the
   white header at 1.00:1 contrast. */
.bhero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
min-height:560px;background:#1e1942}
.bhero .ph{position:absolute;inset:0}
.bhero .ph img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
/* Two-axis scrim. A vertical gradient alone couldn't rescue the pink accent word
   over the bright sunset sky (measured 1.91:1 against a 3:1 floor). The second,
   horizontal layer darkens the left side where the copy sits and fades out by 68%,
   so the photograph stays open on the right where nothing is set over it. */
.bhero .scrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(90deg,rgba(30,25,66,.93) 0%,rgba(30,25,66,.80) 42%,
rgba(30,25,66,.10) 68%,rgba(30,25,66,0) 100%),
linear-gradient(180deg,rgba(30,25,66,.45) 0%,rgba(30,25,66,.62) 48%,
rgba(30,25,66,.95) 100%)}
.bhero .hero-in{position:relative;z-index:2;padding-top:56px;padding-bottom:40px}
.bhero .kick{color:#ffd7ea}
.bhero h1{color:#fff;margin-bottom:14px}
/* Full-chroma pink over the photograph measured 1.23:1 at its worst, with 48% of
   the accent word below the 3:1 large-text floor. The light tint clears it. */
.bhero h1 .mark{color:#ff9ec9}
.bhero .hsub{font-size:18px;color:#fff;max-width:30ch;margin-bottom:24px}
/* Below 900 the copy spans the full width, so the left-weighted horizontal layer
   above buys nothing — the accent word came out at 2.80:1 against a 3:1 floor.
   Mobile gets a stronger vertical-only scrim instead. */
@media(max-width:899px){
 .bhero .scrim{background:linear-gradient(180deg,rgba(30,25,66,.74) 0%,
 rgba(30,25,66,.88) 45%,rgba(30,25,66,.97) 100%)}
}
.bhero .doors .cta{margin-bottom:12px}
.bhero .htrust{margin-top:20px;font-size:13px;color:#cdc3ee}

/* stat rail — proof up front, oversized figures.
   Three NUMERIC stats only, centred. The fourth cell used to be "FOSTival", a word
   masquerading as a statistic at a different size; it broke the row's logic and is
   now a chip underneath instead. */
.statrail .grid{display:grid;grid-template-columns:1fr;gap:30px 18px;margin-top:26px;
text-align:center}
.statc{min-width:0}
.statc .fig{display:block;font-weight:800;font-size:clamp(40px,13vw,72px);line-height:1;
letter-spacing:-1.5px;color:#fff}
/* #ffe1ef measured 4.19-4.49:1 on the pink band — under AA at 13.5px. */
.statc .lbl{display:block;margin-top:8px;font-size:13.5px;font-weight:600;color:#fff;line-height:1.35}
.statrail .extra{margin-top:30px;text-align:center}
.statrail .extra span{display:inline-block;font-size:14px;font-weight:600;color:#fff;
padding:9px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* money band (paper) — dark card: big numeral, then descriptor, then caption.
   The figure is a single unwrappable token, so it can never break across lines. */
.money .moneycard{margin-top:22px}
.mfig .num{display:block;font-weight:800;font-size:clamp(60px,17vw,96px);line-height:.95;
letter-spacing:-2.5px;color:#ff9ec9;white-space:nowrap}
.mfig .per{display:block;font-size:20px;font-weight:600;color:#fff;margin-top:6px}
.mfig .cap{display:block;font-size:14px;color:#cbb8f2;margin-top:4px}
.money .moneycard p{font-size:16px;color:#d9d3f2;line-height:1.6;margin-top:22px}

/* journey band (navy) — recolour the step text so it reads on dark */
.journey .jsub{color:#d9d3f2;font-size:16px;margin:6px 0 4px;max-width:42ch}
.journey .jsteps{margin-top:26px}
/* At 390px the three steps ran together — step 1's paragraph and step 2's card
   both sat at the same y, with more space inside a step than between them. */
.journey .stepcard{margin-bottom:36px}
.journey .stepcard:last-child{margin-bottom:0}
.journey .stepcard b{color:#fff}
.journey .stepcard p{color:#cfc8ea}

/* transfer band (pink) */
.transfer p{font-size:17px;max-width:44ch;margin:12px 0 24px}

/* independent band (purple) — copy + bounded photo (never full-bleed) */
.indep h2{margin-bottom:20px}   /* headline was sitting flush on the paragraph */
.indep p{color:#e5defc;margin-bottom:14px;font-size:16px;max-width:62ch}
.indep .proofrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.indep .istat{font-size:14px;color:#e5defc;max-width:34ch}
.indep .istat b{color:#fff;font-size:20px;font-weight:800}
.indep .indep-photo{margin-top:26px;max-width:440px;border-radius:20px;overflow:hidden;
box-shadow:0 18px 46px rgba(0,0,0,.32)}
.indep .indep-photo img{width:100%;height:100%;object-fit:cover}

/* independent band: the Ofsted pill and the 85% stat used to be vertically centred
   against a 3-line paragraph, so they read as unrelated debris. Top-align both and
   give the stat its own line. */
.indep .proofrow{align-items:flex-start}
.indep .istat b{display:block;line-height:1.1;margin-bottom:2px}

/* founders' message (paper) — client-supplied copy, to-do #17.
   Two columns: the pull-quote holds the left, the message runs down the right. */
.founders .fpull{font-size:26px;font-weight:800;line-height:1.28;letter-spacing:-.4px;
color:#3d2a6e;border-left:4px solid #f04d92;padding-left:22px;margin:20px 0 26px}
.founders p{font-size:16.5px;color:#5a5f78;line-height:1.65;margin-bottom:14px;max-width:62ch}
.founders .fatt{margin-top:22px;font-size:15px;color:#1e1942}
.founders .fatt b{display:block;font-weight:800}
.founders .fatt span{color:#5a5f78;font-size:14px}
.founders .fmore{display:inline-block;margin-top:18px;font-size:15px;font-weight:800;
color:#d81b60}

/* close band (navy) */
.close2{text-align:center}
.close2 .areastrip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.close2 .achip{font-size:13px;font-weight:600;color:#efe9ff;padding:7px 14px;border-radius:999px;
box-shadow:inset 0 0 0 1.4px rgba(203,184,242,.5)}
.close2 h1{color:#fff}
.close2 p{color:#d9d3f2;max-width:32ch;margin:12px auto 22px}
.close2 .cta{max-width:420px;margin:0 auto 12px}

@media(min-width:900px){
 /* Blue Sky's rhythm rule, copied verbatim: one gap between every band, never
    doubled. 120px is the category norm; C was running 88. */
 .b{padding:120px 0}
 .quote{padding:120px 0}   /* was 46/40 — the one band breaking the rhythm */
 .quote blockquote{font-size:30px;max-width:660px;line-height:1.38}
 .router .w{grid-template-columns:repeat(4,1fr);gap:30px;margin-top:-100px}
 .router{padding-bottom:120px}
 .rcard{padding:30px 28px 26px;min-height:248px;display:flex;flex-direction:column}
 .rcard p{flex:1;margin-bottom:18px}
 .big{font-size:clamp(58px,7vw,86px)}
 .big2{font-size:clamp(34px,4.4vw,54px)}
 .bhero{height:660px}
 .bhero .hero-in{padding-bottom:64px}
 .bhero .hsub{font-size:22px;max-width:34ch}
 .bhero .doors{display:flex;gap:16px;max-width:640px}
 .bhero .doors .cta{flex:1;margin-bottom:0}
 .statrail .grid{grid-template-columns:repeat(3,1fr);gap:30px}
 .statc .fig{font-size:clamp(52px,5vw,84px)}

 /* Money card, two columns with fixed floors. The numeral block gets exactly the
    width it needs; the copy gets a real measure. Baselines aligned at the top so
    the numeral and the first line of copy start together. */
 /* The band keeps the page spine (content x 95->1345 at 1440); the CARD is what's
    capped. Narrowing `.w` here indented the whole band 125px off every other band. */
 .money .moneycard{display:grid;grid-template-columns:minmax(300px,auto) minmax(360px,1fr);
 column-gap:64px;align-items:start;padding:52px 56px;max-width:1040px}
 .money .writ{max-width:65ch}
 .mfig{grid-row:1;grid-column:1}
 /* copy sits optically centred against the numeral block, not pinned to its top */
 .money .moneycard p{grid-row:1;grid-column:2;margin-top:0;max-width:none;
 align-self:center}
 .money .moneycard .writ{grid-row:2;grid-column:1/3;margin-top:36px}
 .journey .jsteps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:34px}
 .journey .stepcard{margin-bottom:0}
 .spine .w{display:grid;grid-template-columns:repeat(3,1fr);column-gap:34px;row-gap:38px}
 .spine h2,.spine .sub{grid-column:1/-1;text-align:center}
 .spine .item{flex-direction:column;gap:14px;margin-bottom:0}
 /* Titles run to one or two lines ("Therapeutic support without the waiting" wraps),
    which pushed that cell's body ~22px below its neighbours. Reserve two lines so
    every body in a row starts on the same baseline. */
 .spine .item b{min-height:2.5em}
 .transfer .cta{display:inline-block;width:auto;min-width:300px}
 .founders .w{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(420px,1.15fr);
 column-gap:64px;align-items:start}
 .founders .fhead{grid-column:1}
 .founders .fbody{grid-column:2}
 .founders .fpull{margin-top:24px;font-size:30px}
 .close2 p{max-width:46ch}
 .close2 .ctarow{display:flex;gap:16px;justify-content:center;max-width:720px;margin:0 auto}
 .close2 .ctarow .cta{flex:1;margin:0;max-width:none}
 .indep .w{display:grid;grid-template-columns:1.15fr .85fr;column-gap:48px;align-items:center}
 .indep .indep-photo{margin-top:0}
 .transfer .w{max-width:820px;text-align:center}
 .transfer p{margin-left:auto;margin-right:auto}
 .transfer .cta{max-width:420px;margin-left:auto;margin-right:auto}
}

/* inline enquiry form — replaces the live site's popup-only form */
.efwrap{background:#1e1942;color:#fff;border-radius:22px;padding:28px 24px;
margin:30px auto;max-width:820px;box-shadow:0 18px 50px rgba(30,25,66,.22)}
.efwrap h2{color:#fff;font-size:clamp(22px,5vw,28px);margin-bottom:8px}
/* ⚠ The navy card's text colours are marked important. This card renders inside page
   context it can't predict (`.prose p`, `.paper .prose p`, mirrored-page stylesheets) and
   has lost the cascade to two of them already — the blurb rendered body-copy grey on navy
   and was near-invisible. Same defence as chrome.css uses for the header pills. */
.efwrap .efblurb{color:#d9d3f2 !important;font-size:15.5px;margin-bottom:20px;
line-height:1.55}
.ef label{display:block;font-size:13.5px;font-weight:600;color:#e5defc;margin-bottom:14px}
.ef input,.ef select,.ef textarea{display:block;width:100%;margin-top:6px;font-family:inherit;
font-size:16px;color:#1e1942;background:#fff;border:0;border-radius:12px;padding:13px 14px;
box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);min-height:48px}
.ef textarea{min-height:96px;resize:vertical}
.ef input:focus-visible,.ef select:focus-visible,.ef textarea:focus-visible{outline:3px solid #f04d92;
outline-offset:2px}
.ef .efhoney{position:absolute;left:-9999px;width:1px;height:1px;min-height:0;padding:0}
.ef .efcheck{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:14px;
color:#d9d3f2;line-height:1.5;margin:4px 0 20px}
.ef .efcheck input{width:22px;height:22px;min-height:22px;margin:0;flex:none}
.ef .efcheck span{flex:1}
.ef button{margin-top:2px}
.efwrap .efnote{font-size:13.5px;color:#cbb8f2 !important;margin-top:14px;line-height:1.5}
.efwrap .efnote a{color:#ff9ec9 !important;font-weight:800}
.efmsg{margin-top:12px;font-size:15px;font-weight:600;min-height:0}
.efmsg.ok{color:#b8f2c8} .efmsg.bad{color:#ffb0c8}
.ef label.invalid input,.ef label.invalid select,.ef label.invalid textarea{
box-shadow:inset 0 0 0 2px #ff7aa5}
@media(min-width:760px){
 .efwrap{padding:36px 34px}
 .efrow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
}

/* preview-only banner: a reviewer must never mistake this for the live site */
.prevbar{background:#14102b;color:#ffd7ea;font-size:12.5px;font-weight:600;
text-align:center;padding:8px 14px;letter-spacing:.02em}

/* ==========================================================================
   VARIANT A — homepage continuity

   TWO axes, and only two. Everything sits on the container edge (x=95 at 1440)
   or on one right-hand column (x=780). That second axis is produced by a single
   geometry used everywhere — a 1fr/1fr grid with a 120px gutter — so the band
   intro, a photograph, a quote, a card column and the enquiry form all line up
   with each other down the whole page. Boxed components carry their padding on
   the TEXT, not the box, so a card's copy starts on the axis rather than 28px
   inside it (this is what the earlier pages got wrong: four left edges).

   ONE band rhythm: 64px mobile / 112px desktop, never doubled.
   ========================================================================== */
:root{--hdrh:78px;--gut:120px}
[id]{scroll-margin-top:calc(var(--hdrh) + 14px)}

/* the 560px mobile column is too mean between 640 and 900 (tablets, split
   windows) — widen it there without touching the desktop grid */
@media(min-width:640px) and (max-width:899px){
 .w{max-width:none;width:min(720px,calc(100% - 64px));padding:0}
}

body{overflow-x:hidden}
.vb{padding:64px 0}
@media(min-width:900px){.vb{padding:112px 0}}
/* every band carries a whisper of vertical depth rather than a flat fill — the
   same treatment the approved homepage gives its pink band, and it stops a
   1250px colour field reading as dead space beside a two-column layout */
.bnavy{background:linear-gradient(180deg,#231d4e 0%,#1a1539 100%)}
.bpurple{background:linear-gradient(180deg,#443078 0%,#372563 100%)}
.bpaper{background:linear-gradient(180deg,#fdfcff 0%,#f5f1ff 100%)}
.bwhite{background:linear-gradient(180deg,#ffffff 0%,#fbf9ff 100%);color:#1e1942}
.bwhite .kick{color:#d81b60}

/* ---- type ------------------------------------------------------------- */
.vb h2{max-width:22ch;text-wrap:balance}
.vintro{max-width:64ch;font-size:16.5px;line-height:1.68;color:#5a5f78;margin-top:20px}
.vintro+.vintro{margin-top:14px}
@media(min-width:900px){.vintro{font-size:17.5px;margin-top:22px}}
.bnavy .vintro,.bpink .vintro{color:#d9d3f2}
.bpurple .vintro{color:#e5defc}
.bpink .vintro{color:#fff}
.bhero .kick,.vb .kick{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
font-weight:600;margin-bottom:10px}

/* ---- band head: heading left, intro right ---------------------------- */
.vhead{display:grid;gap:0}
.vhead .vh-r .vintro:first-child{margin-top:18px}
@media(min-width:1000px){
 /* centred, not top-aligned: a short heading beside a long intro (or the
    reverse) then reads as one composed row instead of an L-shaped void */
 .vhead{grid-template-columns:1fr 1fr;column-gap:var(--gut);align-items:center}
 .vhead .vh-r .vintro:first-child{margin-top:0}
}
.vhead+.vsplit,.vhead+.vchips,.vhead+.moneycard,.vhead+.faqlist,
.vfeats+.vsplit{margin-top:36px}
@media(min-width:1000px){
 .vhead+.vsplit,.vhead+.vchips,.vhead+.moneycard,.vhead+.faqlist,
 .vfeats+.vsplit{margin-top:40px}
}

/* ---- split: text left, device right ---------------------------------- */
.vsplit{display:grid;gap:40px}
.vsplit .vs-r,.vsplit .vs-l{min-width:0}
@media(min-width:1000px){
 .vsplit{grid-template-columns:1fr 1fr;column-gap:var(--gut)}
 .vsplit.va-center{align-items:center}
 .vsplit.va-start{align-items:start}
}
.vsplit .vs-l>.vintro:first-child{margin-top:0}

/* ---- photography: always in a composed frame ------------------------- */
.vfig{margin:0}
.vfig .vfig-m{border-radius:22px;overflow:hidden;background:#efeaff;
box-shadow:0 22px 54px rgba(30,25,66,.24)}
.vfig img{width:100%;height:100%;object-fit:cover;display:block}
.vfig figcaption{margin-top:14px;font-size:13.5px;color:#5a5f78;line-height:1.5}
.bnavy .vfig figcaption,.bpurple .vfig figcaption{color:#cbb8f2}

/* ---- hero: c_bold's .bhero, resized for interior pages ---------------
   The band padding lives on the SECTION (matching the page's band rhythm);
   .hero-in only holds the copy. --pw caps the photograph at its own natural
   width so nothing is ever upscaled — the masked left edge dissolves it into
   the navy, so a 1200px shot still reads as a full-bleed hero at 1440. */
.bhero{min-height:452px;padding:94px 0 34px}
/* the crop is a variable, not an inline style, so a hero can be re-pointed at a
   different focal point on mobile — where the frame is portrait and a landscape
   photo loses most of its width, the desktop focal point is often not the one
   that keeps a face in shot */
.bhero .ph img{object-position:var(--op,center 62%)}
@media(max-width:899px){.bhero.hkitchen{--op:72% 34%}}
/* a soft copy panel behind the headline block: the two-axis scrim keeps the
   photograph open on the right, this holds the type end of it well clear of
   whatever the picture is doing underneath */
/* ⚠ vertical only — `padding:0` here also wipes .w's 22px mobile side gutter
   and runs the whole hero to the screen edge */
.bhero .hero-in{padding-top:0;padding-bottom:0;
background:linear-gradient(90deg,rgba(20,16,43,.15) 0%,rgba(20,16,43,.09) 52%,
rgba(20,16,43,0) 92%)}
.bhero h1{max-width:20ch;text-wrap:balance;margin-bottom:14px}
.bhero .hsub{font-size:17px;color:#efeafd;max-width:40ch;margin-bottom:22px}
.bhero .doors{display:grid;gap:11px}
.bhero .hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.bhero .hchips span{font-size:12.5px;font-weight:600;color:#fff;padding:8px 15px;
border-radius:999px;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.5);
background:rgba(20,16,43,.32)}
.bhero.hasrouter{padding:38px 0 90px}
.bhero.compact{min-height:400px}
@media(min-width:900px){
 .bhero{height:600px;min-height:0;padding:160px 0 64px}
 .bhero .hero-in{background:linear-gradient(90deg,rgba(20,16,43,.30) 0%,
 rgba(20,16,43,.18) 46%,rgba(20,16,43,0) 82%)}
 .bhero .ph{left:auto;right:0;width:min(100%,var(--pw,100%));
 -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 18%);
 mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 18%)}
 .bhero .hsub{font-size:21px;max-width:60ch;margin-bottom:30px}
 .bhero .doors{display:flex;gap:16px;max-width:none}
 .bhero .doors .cta{flex:0 1 322px;margin-bottom:0}
 .bhero .hchips{gap:10px;margin-top:28px}
 .bhero .hchips span{font-size:13.5px;padding:9px 18px}
 .bhero.hasrouter{height:640px;padding:74px 0 150px}
 .bhero.compact{height:500px;padding:160px 0 64px}
}

/* ---- CTAs ------------------------------------------------------------- */
.ctarow{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.ctarow .cta{width:auto;flex:0 1 auto;min-width:min(100%,290px);padding:18px 32px;
display:inline-block}
.cta{transition:transform .15s ease,box-shadow .15s ease}
.cta:active{transform:scale(.975)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:3px solid #d81b60;outline-offset:3px;border-radius:6px}
.bnavy a:focus-visible,.bpurple a:focus-visible,.bpink a:focus-visible,
.bhero a:focus-visible,.foot a:focus-visible{outline-color:#ffd7ea}
/* ⚠ NOT inline-flex. As a flex row the arrow is a sibling of the whole text run, so
   when the label wraps, align-items centres the glyph across BOTH lines and strands it
   at the far right of the block, hundreds of px from the last word. inline-block keeps
   the link one box whose text wraps normally, and `.nb` welds the final word to the
   arrow so they always break as one unit. */
.tlink{display:inline-block;font-size:15.5px;font-weight:800;line-height:1.45;
color:#d81b60;margin-top:24px;padding:12px 0}
.nb{white-space:nowrap}
.tlink .ar,.rgo .ar{display:inline-block;margin-left:7px;transition:transform .25s ease}
.tlink:hover .ar{transform:translateX(4px)}
.bnavy .tlink,.bpurple .tlink{color:#ff9ec9}
.bpink .tlink{color:#fff}
@media(prefers-reduced-motion:reduce){.cta,.tlink .ar{transition:none}}
/* the lav secondary is designed for dark grounds; on paper/white it becomes a
   navy outline so the pink gradient stays the only primary */
.bpaper .cta.lav,.bwhite .cta.lav{background:transparent;color:#1e1942;
box-shadow:inset 0 0 0 2px rgba(30,25,66,.3)}
.bpaper .cta.lav:hover,.bwhite .cta.lav:hover{box-shadow:inset 0 0 0 2px #1e1942}

/* ---- callout band: line left, one button right ----------------------- */
.vcallout .w{display:grid;gap:28px}
.vcallout h2{max-width:20ch}
.vcallout .vintro{margin-top:18px;max-width:54ch}
@media(min-width:1000px){
 .vcallout .w{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gut);
 align-items:center}
 .vcallout .ctarow{margin-top:0}
}
/* the same move used to close a band that ends on a line of copy + a CTA */
.vendrow{display:grid;gap:24px;margin-top:52px;padding-top:44px;
border-top:1px solid rgba(255,255,255,.3)}
.vendrow p{margin:0;font-size:16.5px;line-height:1.65;max-width:60ch}
.vendrow .ctarow{margin-top:0}
.bpaper .vendrow,.bwhite .vendrow{border-top-color:rgba(30,25,66,.14)}
@media(min-width:1000px){
 .vendrow{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gut);
 align-items:center}
}

/* ---- generic card grid ------------------------------------------------
   Horizontal padding sits on the card's TEXT, never on the card box, so the
   copy in the first column starts exactly on the page axis. */
.vcards{display:grid;gap:20px;margin-top:36px;grid-auto-rows:1fr}
@media(min-width:700px){.vcards{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(min-width:1000px){
 .vcards{grid-template-columns:repeat(2,1fr);column-gap:var(--gut);row-gap:30px;
 margin-top:40px}
 .vcards.c3{grid-template-columns:repeat(3,1fr);column-gap:var(--gut)}
 .vcards.c4{grid-template-columns:repeat(4,1fr);column-gap:30px}
}
.vcard{background:#fff;border-radius:20px 20px 0 20px;padding:26px 0;
display:flex;flex-direction:column;
box-shadow:0 12px 16px rgba(30,25,66,.09),0 4px 6px -2px rgba(30,25,66,.04)}
.vcard h3{font-size:19px;font-weight:800;line-height:1.24;color:#1e1942;
margin-bottom:9px;padding:0 26px}
.vcard p{font-size:15.5px;color:#5a5f78;line-height:1.6;margin:0;padding:0 26px}
.bnavy .vcard,.bpurple .vcard{background:rgba(255,255,255,.07);
box-shadow:inset 0 0 0 1.5px rgba(203,184,242,.34)}
.bnavy .vcard h3,.bpurple .vcard h3{color:#fff}
.bnavy .vcard p{color:#d9d3f2}
.bpurple .vcard p{color:#e5defc}
@media (hover:hover) and (pointer:fine){
 .vcard,.rcard{transition:transform .25s ease,box-shadow .25s ease}
 .vcard:hover,.rcard:hover{transform:translateY(-5px)}
 .bwhite .vcard:hover,.bpaper .vcard:hover,.rcard:hover{
  box-shadow:0 22px 44px rgba(30,25,66,.17)}
}
@media(prefers-reduced-motion:reduce){.vcard,.rcard{transition:none !important}
 .vcard:hover,.rcard:hover{transform:none !important}}

/* ---- tick / numbered feature list ------------------------------------ */
.vfeats{display:grid;gap:26px 44px;margin-top:36px;list-style:none;padding:0;
grid-auto-rows:1fr}
@media(min-width:760px){.vfeats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
 .vfeats{margin-top:40px;column-gap:var(--gut);row-gap:32px}
}
.vfeat{position:relative}
.vfeat h3{font-size:17.5px;font-weight:800;line-height:1.3;letter-spacing:-.2px;
color:#1e1942;margin-bottom:6px;padding-left:44px}
.vfeat p{font-size:15.5px;line-height:1.6;color:#5a5f78;margin:0;padding-left:44px}
.vfeat .vmark{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
background:#f04d92;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:#fff}
.vfeat .vmark svg{width:13px;height:13px}
.bnavy .vfeat h3,.bpurple .vfeat h3,.bpink .vfeat h3{color:#fff}
.bnavy .vfeat p{color:#d9d3f2}
.bpurple .vfeat p{color:#e5defc}
.bpink .vfeat p{color:#fff}
.bpink .vfeat .vmark{background:#fff;color:#c2185b}

/* ---- stat rail (pink or navy) ---------------------------------------- */
.statrail .grid{text-align:left;margin-top:36px;gap:34px 24px}
@media(min-width:1000px){.statrail .grid{margin-top:40px;gap:30px 40px}}
.statc .lbl{max-width:26ch;margin-top:10px;font-size:14.5px}
.statrail .extra{text-align:left;margin-top:38px}
.bnavy .statc .fig{color:#ff9ec9}
.bnavy .statc .lbl{color:#fff}
.bnavy .statrail .extra span{color:#efe9ff;box-shadow:inset 0 0 0 1.4px rgba(203,184,242,.55)}
.cu{font-variant-numeric:tabular-nums}
/* single stat presented as a card (a lone figure floating on a band reads thin) */
.vstatcard{background:#1e1942;color:#fff;border-radius:22px;padding:36px 32px;
box-shadow:0 22px 54px rgba(30,25,66,.24)}
.vstatcard .fig{display:block;font-weight:800;font-size:clamp(56px,8vw,84px);line-height:1;
letter-spacing:-2px;color:#ff9ec9}
.vstatcard .lbl{display:block;margin-top:16px;font-size:16px;color:#d9d3f2;line-height:1.6}
@media(min-width:1000px){.vstatcard{padding:44px 40px}}

/* ---- chips ------------------------------------------------------------ */
.vchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.vchip{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;
color:#1e1942;box-shadow:inset 0 0 0 1.5px rgba(30,25,66,.18)}
.bnavy .vchip,.bpurple .vchip{color:#efe9ff;box-shadow:inset 0 0 0 1.4px rgba(203,184,242,.5)}
.bpink .vchip{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* ---- editorial pull-quote -------------------------------------------- */
.vquote{margin:0}
.vquote .qm{display:block;font-size:92px;font-weight:800;color:#e3daf6;line-height:.66;
margin-bottom:14px}
.vquote blockquote{font-size:21px;font-weight:800;line-height:1.38;letter-spacing:-.3px;
color:#3d2a6e;border-left:4px solid #f04d92;padding-left:24px;max-width:30ch}
.vquote cite{display:block;font-style:normal;margin-top:20px;padding-left:28px;
font-size:14.5px;font-weight:800;color:#1e1942}
.vquote cite span{display:block;font-weight:400;color:#5a5f78;font-size:13.5px;margin-top:2px}
@media(min-width:900px){
 .vquote blockquote{font-size:27px;max-width:26ch}
 .vquote .qm{font-size:104px}
}
.bnavy .vquote blockquote,.bpurple .vquote blockquote{color:#fff}
.bnavy .vquote .qm,.bpurple .vquote .qm{color:rgba(203,184,242,.42)}
.bnavy .vquote cite,.bpurple .vquote cite{color:#fff}
.bnavy .vquote cite span,.bpurple .vquote cite span{color:#cbb8f2}

/* ---- quote cards ------------------------------------------------------ */
.vqcards{display:grid;gap:20px;margin-top:36px;grid-auto-rows:1fr}
@media(min-width:760px){.vqcards{grid-template-columns:repeat(3,1fr);gap:26px}
 .vqcards.q2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vqcards{margin-top:40px}
 .w>.vqcards.q2{column-gap:var(--gut)}}
.vqcard{background:#fff;border-radius:20px 20px 0 20px;padding:26px 0;
display:flex;flex-direction:column;
box-shadow:0 12px 16px rgba(30,25,66,.09),0 4px 6px -2px rgba(30,25,66,.04)}
.vqcard .qm{display:block;font-size:48px;font-weight:800;color:#f7b9d4;line-height:.75;
margin-bottom:12px;padding:0 26px}
.vqcard blockquote{font-size:15.5px;line-height:1.62;color:#41465f;flex:1;
font-weight:400;padding:0 26px}
.vqcard cite{font-style:normal;display:block;margin-top:18px;font-size:13.5px;
font-weight:800;color:#d81b60;padding:0 26px}
.vqcard cite span{display:block;font-weight:400;color:#5a5f78;margin-top:2px}
.bpurple .vqcard,.bnavy .vqcard{background:rgba(255,255,255,.07);
box-shadow:inset 0 0 0 1.5px rgba(203,184,242,.34)}
.bpurple .vqcard blockquote,.bnavy .vqcard blockquote{color:#e5defc}
.bpurple .vqcard cite,.bnavy .vqcard cite{color:#ff9ec9}
.bpurple .vqcard cite span,.bnavy .vqcard cite span{color:#cbb8f2}
.bpurple .vqcard .qm,.bnavy .vqcard .qm{color:rgba(203,184,242,.5)}

/* ---- router cards straddling the hero (c_bold .router, 3-up) ---------- */
.vrouter{background:linear-gradient(180deg,#faf8ff 0%,#f5f1ff 100%);padding:64px 0}
.vrouter .w{display:grid;grid-template-columns:1fr;gap:18px;margin-top:-120px;
position:relative;z-index:3;grid-auto-rows:1fr}
.rcard{padding:26px 0}
.rcard h3{display:block;font-size:19px;font-weight:800;line-height:1.22;color:#1e1942;
margin-bottom:9px;padding:0 28px}
.rcard p{font-size:15px;color:#5a5f78;line-height:1.55;margin-bottom:16px;padding:0 28px}
.rcard .rgo{display:inline-block;font-size:14.5px;font-weight:800;line-height:1.5;
color:#d81b60;min-height:24px;margin:0 28px}
.rcard:hover .rgo .ar{transform:translateX(4px)}
@media(min-width:900px){
 .vrouter{padding:112px 0}
 .vrouter .w{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:-216px}
 .rcard{padding:30px 0 28px;min-height:230px;display:flex;flex-direction:column}
 .rcard p{flex:1}
}

/* ---- team ------------------------------------------------------------- */
/* tracks capped at 250px: the smallest source headshot is 250 wide and a
   portrait must never be upscaled */
/* ---- team --------------------------------------------------------------
   Four FOUND photographs with three different backdrops: two studio white,
   one studio grey, and one lit against solid black (there is no matching
   headshot for Malcolm — it is on the client's missing-asset list). Tinting
   can't reconcile a white backdrop with a black one: every tonal operation is
   monotone in luminosity, so light stays light and dark stays dark. So the
   backdrop is KNOCKED OUT instead of tinted. On one shared purple field:
   `multiply` erases a white backdrop (white × anything = anything) and
   `screen` erases a black one (black + anything = anything). All four land on
   the identical field, the name plate is reversed out over the same scrim on
   every tile, and the set reads as one deliberate treatment.
   Tracks are capped at 250px: the smallest source is 250 wide and a portrait
   is never upscaled. */
.vpeople{display:grid;grid-template-columns:repeat(2,minmax(0,250px));gap:30px 16px;
justify-content:space-between;margin-top:36px;grid-auto-rows:1fr}
@media(min-width:1000px){.vpeople{grid-template-columns:repeat(4,minmax(0,250px));
margin-top:40px}}
.vperson{display:flex;flex-direction:column}
.vperson .pm{position:relative;aspect-ratio:4/5;background:#3d2a6e;overflow:hidden;
border-radius:20px 20px 0 20px;isolation:isolate;
box-shadow:0 12px 16px rgba(30,25,66,.14),0 4px 6px -2px rgba(30,25,66,.06)}
.vperson img{width:100%;height:100%;object-fit:cover;display:block;filter:none;mix-blend-mode:normal} /* natural-colour portraits, 13 Sep 2026: Henry did not want the purple duotone */
.vperson .pm.onblack img{filter:none;mix-blend-mode:normal}
.vperson .pm::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(30,25,66,0) 42%,rgba(30,25,66,.34) 64%,
rgba(30,25,66,.95) 100%)}
.vperson .pm::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
z-index:4;background:#f04d92}
.vperson .pcap{position:absolute;left:20px;right:16px;bottom:17px;z-index:3}
.vperson h3{font-size:18px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:3px}
.vperson .role{display:block;font-size:11.5px;font-weight:800;color:#ff9ec9;
letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
/* bios run from two lines to six. Without a card box terminating under the short
   ones, the difference reads as caption copy rather than an unfinished panel. */
.vperson p{font-size:14px;color:#5a5f78;line-height:1.55;margin:16px 0 0}

/* ---- money card ------------------------------------------------------- */
.vmoney .moneycard{margin-top:36px;max-width:none;padding:30px 26px}
.vmoney .mfig .num{display:block;font-weight:800;font-size:clamp(58px,16vw,92px);
line-height:.95;letter-spacing:-2.5px;color:#ff9ec9;white-space:nowrap}
.vmoney .mfig .per{display:block;font-size:19px;font-weight:600;color:#fff;margin-top:8px}
.vmoney .mfig .cap{display:block;font-size:15px;color:#cbb8f2;margin-top:8px;max-width:30ch;
line-height:1.5}
.vmoney .mlist{list-style:none;display:grid;gap:12px;margin-top:26px}
.vmoney .mlist li{position:relative;padding-left:30px;font-size:15.5px;color:#d9d3f2;
line-height:1.55}
.vmoney .mlist li::before{content:"";position:absolute;left:0;top:.32em;width:18px;height:18px;
border-radius:50%;background:#f04d92}
.vmoney .mlist li::after{content:"";position:absolute;left:6.4px;top:.52em;width:5px;height:8px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vmoney .writ{margin-top:24px;padding-top:20px;border-top:1px solid rgba(203,184,242,.28);
font-size:15px;color:#fff;line-height:1.6}
@media(min-width:1000px){
 /* a 120px inner gutter puts the list on the page's second axis whatever the
    card padding is (the maths cancels) */
 .vmoney .moneycard{display:grid;grid-template-columns:1fr 1fr;
 column-gap:var(--gut);align-items:start;padding:52px 56px;margin-top:40px}
 .vmoney .mfig{grid-row:1;grid-column:1}
 .vmoney .mlist{grid-row:1;grid-column:2;margin-top:6px}
 .vmoney .writ{grid-row:2;grid-column:1/3;margin-top:38px}
}

/* ---- journey: tab-step cards on navy ---------------------------------- */
.vsteps{display:grid;gap:34px 24px;margin-top:36px;grid-auto-rows:1fr}
@media(min-width:700px){.vsteps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.vsteps{grid-template-columns:repeat(5,1fr);gap:0 22px;margin-top:40px}}
.vstep .tabcard{width:86px;height:104px;margin-bottom:16px}
.vstep .tabcard span{font-size:38px;margin-top:-13px}
.vstep h3{font-size:18px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:7px}
.vstep p{font-size:14.5px;color:#cfc8ea;line-height:1.55;margin:0}

/* ---- FAQ accordion ---------------------------------------------------- */
.faqlist{border-top:1px solid rgba(30,25,66,.14)}
.faqi{border-bottom:1px solid rgba(30,25,66,.14)}
.faqh{margin:0;font-size:inherit;letter-spacing:0}
.faqq{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;
background:none;border:none;text-align:left;font-family:inherit;font-size:16.5px;
font-weight:800;line-height:1.4;letter-spacing:-.1px;color:#1e1942;padding:20px 2px;
cursor:pointer;min-height:46px}
.faqq .chev{flex:none;transition:transform .3s ease;color:#d81b60}
.faqi.open .faqq .chev{transform:rotate(180deg)}
.js .faqa{display:grid;grid-template-rows:0fr;
transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1)}
.js .faqa>div{overflow:hidden;min-height:0}
.js .faqi.open .faqa{grid-template-rows:1fr}
.faqa p{font-size:15.5px;line-height:1.68;color:#5a5f78;padding:0 2px 22px;
max-width:64ch;margin:0}
@media(prefers-reduced-motion:reduce){.js .faqa{transition:none}}
@media(min-width:900px){.faqq{font-size:17.5px}}
@media(min-width:1000px){.vfaq .vs-l{position:sticky;top:96px}}

/* ---- contact routes --------------------------------------------------- */
.vroutes{display:grid;gap:20px;margin-top:36px;grid-auto-rows:1fr}
@media(min-width:760px){.vroutes{grid-template-columns:repeat(3,1fr);gap:26px}}
@media(min-width:1000px){.vroutes{margin-top:40px;gap:30px}}
.vroute{background:#fff;border-radius:20px 20px 0 20px;padding:28px 0;
display:flex;flex-direction:column;
box-shadow:0 12px 16px rgba(30,25,66,.09),0 4px 6px -2px rgba(30,25,66,.04)}
.vroute h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#d81b60;margin-bottom:10px;padding:0 26px}
.vroute .big-l{display:flex;align-items:center;min-height:46px;font-size:23px;
font-weight:800;color:#1e1942;letter-spacing:-.4px;line-height:1.2;margin-bottom:10px;
padding:0 26px}
.vroute .big-l.sm{font-size:17px;letter-spacing:-.3px;line-height:1.35;
overflow-wrap:break-word}
.vroute p{font-size:15px;color:#5a5f78;line-height:1.6;margin:0;padding:0 26px}
@media(min-width:1000px){.vroute .big-l{font-size:25px}}

/* ---- enquiry band: copy left on the page axis, form card right -------- */
.vform .efwrap{margin:0;max-width:none;border-radius:24px}
.vform .fphone{display:block;margin-top:26px;font-size:15.5px;color:#5a5f78}
.vform .fphone a{font-weight:800;color:#d81b60;display:inline-block;padding:13px 0}
.efwrap .efnote a{display:inline-block;padding:13px 0}
.vform .vfeats{margin-top:34px;gap:22px}
@media(min-width:1000px){
 /* the form card is ~740px tall and the copy column is ~440px: top-aligned, that
    left 300px of nothing under the copy was the worst dead field on every page.
    Stretch the column and float the phone line to its foot instead, so the column
    ends level with the form and the gap becomes composed space inside it. */
 .vform .vsplit{align-items:stretch}
 .vform .vsplit .vs-l{display:flex;flex-direction:column}
 .vform .vfeats{grid-template-columns:1fr;gap:22px;margin-top:36px}
 .vform .fphone{margin-top:auto;padding-top:30px}
}

/* ---- mobile sticky CTA ------------------------------------------------
   hidden with opacity, never with a transform: the bar has to stay pinned to
   the bottom edge so it is measurable, and so it can't half-appear mid-slide */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;
box-shadow:0 -8px 24px rgba(30,25,66,.16);
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease}
.stickycta.show{opacity:1;visibility:visible;pointer-events:auto}
.stickycta .cta{padding:16px 12px;font-size:16px}
@media(min-width:900px){.stickycta{display:none}}
@media(prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* ---- swatch divider ---------------------------------------------------
   The five-colour strip is the brand's own divider (the approved homepage runs
   it twice), so it stays — but as five hard-edged blocks it reads as a stray
   UI element rather than a rule, and its navy cell dies into the navy band it
   sits under. Same five colours, cross-faded into one another and shorter, so
   it reads as deliberate punctuation at the band seam. */
.swatch{height:9px;background:linear-gradient(90deg,#1e1942 0%,#3d2a6e 24%,
#f04d92 50%,#cbb8f2 74%,#d81b60 100%)}
.swatch div{display:none}

/* ---- motion ----------------------------------------------------------- */
.js .rv.rv-img{opacity:0;transform:scale(1.03);
transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.js .rv.rv-img.in{opacity:1;transform:none}
.js .hero-rv{opacity:0;transform:translateY(16px);
animation:heroUp .55s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes heroUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .js .hero-rv{animation:none;opacity:1;transform:none}
 .js .rv.rv-img,.js .rv.rv-img.in{opacity:1 !important;transform:none !important}
}

/* ---- footer / chrome tidy --------------------------------------------- */
.foot{padding:46px 0 52px}
/* the shared footer's 13px links are 20px tall — under the 44px tap target.
   Padding only; the lockup and colours stay exactly as the homepage has them. */
.foot .flinks{margin:8px 0 6px;gap:0 20px}
.foot .flinks a{display:inline-block;padding:15px 0;line-height:1.2}
.foot a[href^="tel"],.foot a[href^="mailto"]{display:inline-block;padding:13px 0}
.hdr .logo{padding:5px 0}
.hdr .henq{padding:13px 18px}
.navbtn{min-height:46px}