/* Velocity industry pages layer (vi-). Sits on the LIVE homepage stylesheet (dm-base + vh- layer, hosted, scoped to
   .vh-page) and uses its tokens only. Every class is prefixed vi-. The build scopes this file to .vh-page. */

/* ---------- hero: copy left, the sector's own case studies playing right ---------- */
.vh-page .vi-hero{padding:clamp(28px,4vw,56px) 0 var(--dm-sec-pad)}
.vh-page .vi-hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,4.5vw,80px);align-items:center}
.vh-page .vi-crumb{display:flex;align-items:center;gap:8px;margin-bottom:22px;font:500 14px/1 var(--dm-body);color:var(--dm-n5)}
.vh-page .vi-crumb a{color:var(--dm-n5);text-decoration:none}
.vh-page .vi-crumb a:hover{color:var(--dm-acc-text)}
.vh-page .vi-crumb .dm-ic{width:14px;height:14px}
.vh-page .vi-crumb span{color:var(--dm-ink)}
.vh-page .vi-hero h1{font-size:clamp(34px,3.6vw,56px);font-weight:500;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.vh-page .vi-hero h1 em{display:block;font-style:normal;color:var(--dm-acc)}
.vh-page .vi-hero .dm-lede{margin-top:22px;font-size:19px;max-width:600px}
.vh-page .vi-hero .dm-actions{margin-top:30px;gap:28px}
.vh-page .vi-facts{display:grid;grid-template-columns:repeat(3,max-content);gap:clamp(28px,3.4vw,56px);margin-top:clamp(32px,4vw,48px);padding-top:26px;border-top:1px solid var(--dm-n2)}
.vh-page .vi-facts b{display:block;font:400 clamp(28px,2.4vw,36px)/1 var(--dm-disp);letter-spacing:-.03em;color:var(--dm-ink);white-space:nowrap}
.vh-page .vi-facts b .vh-sx{color:var(--dm-acc)}
.vh-page .vi-facts li>span{display:block;margin-top:8px;font-size:14.5px;line-height:1.35;color:var(--dm-n7);max-width:190px}

/* the proof window: real case studies for this sector, one in the spotlight at a time */
.vh-page .vi-proof{background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-win);overflow:hidden}
.vh-page .vi-proof .dm-chrome{border-radius:var(--dm-r-card) var(--dm-r-card) 0 0;background:#fff}
.vh-page .vi-proof .crumb{font-size:13px;color:var(--dm-n5)}
.vh-page .vi-proof .crumb b{color:var(--dm-ink);font-weight:600}
.vh-page .vi-spot{display:grid;padding:26px 28px 24px;border-bottom:1px solid var(--dm-n2)}
/* every item sits in the same cell, so the box is as tall as the tallest; the outgoing one leaves before the next arrives */
.vh-page .vi-spot-i{grid-area:1/1;position:relative;opacity:0;translate:0 8px;transition:opacity .22s var(--dm-ease),translate .22s var(--dm-ease);pointer-events:none}
.vh-page .vi-spot-i.on{opacity:1;translate:0 0;pointer-events:auto;transition-duration:.4s;transition-delay:.12s}
.vh-page .vi-spot-ch p{font:400 clamp(22px,2vw,28px)/1.25 var(--dm-disp);letter-spacing:-.015em;color:var(--dm-ink);max-width:520px}
.vh-page .vi-spot-i b{display:block;font:400 clamp(52px,5vw,76px)/1 var(--dm-disp);letter-spacing:-.04em;color:var(--dm-ink)}
.vh-page .vi-spot-i b .vh-sx{color:var(--dm-acc)}
.vh-page .vi-spot-i em{display:block;margin-top:14px;font:600 12px/1 var(--dm-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vi-spot-i p{margin-top:12px;font-size:16px;line-height:1.45;color:var(--dm-ink);max-width:460px}
.vh-page .vi-spot-i .dm-link{position:absolute;right:0;bottom:2px;font-size:14px}
.vh-page .vi-rows{padding:10px 12px 12px}
.vh-page .vi-rows a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 10px;border-radius:var(--dm-r-row);text-decoration:none}   /* no colour transition: a fading purple passes through lavender */
.vh-page .vi-rows a+a{margin-top:2px}
.vh-page .vi-rows i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:600 12.5px/1 var(--dm-disp);font-style:normal;color:var(--dm-ink);background:#fff;box-shadow:inset 0 0 0 1px var(--dm-n3)}
.vh-page .vi-rows span{min-width:0}
.vh-page .vi-rows span b{display:block;font:600 14.5px/1.3 var(--dm-body);color:var(--dm-ink)}
.vh-page .vi-rows span small{display:block;margin-top:2px;font-size:12.5px;color:var(--dm-n5)}
.vh-page .vi-rows .dm-pill{min-width:58px;justify-content:center}
.vh-page .vi-rows a.on{background:var(--dm-acc);box-shadow:var(--dm-lift)}
.vh-page .vi-rows a.on :is(b,small){color:#fff}
.vh-page .vi-rows a.on i{background:#fff;color:var(--dm-acc-text);box-shadow:none}
.vh-page .vi-rows a.on .dm-pill{background:#fff;color:var(--dm-acc-text);box-shadow:none}
@media (hover:hover){.vh-page .vi-rows a:not(.on):hover{box-shadow:inset 0 0 0 1.5px var(--dm-acc)}}

/* ---------- section heads shared by every block ---------- */
.vh-page .vi-head{max-width:820px;margin-bottom:var(--dm-head-gap)}
.vh-page .vi-head h2 em{display:block;font-style:normal;color:var(--dm-acc)}
.vh-page .vi-head .dm-lede{max-width:680px}
.vh-page .vi-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:var(--dm-head-gap)}
.vh-page .vi-head-row .vi-head{margin-bottom:0}

/* ---------- card grids ---------- */
.vh-page .vi-grid{display:grid;gap:var(--vh-gap,20px)}
.vh-page .vi-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vh-page .vi-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vh-page .vi-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vh-page .vi-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);padding:26px 26px 28px;transition:translate var(--dm-med) var(--dm-ease),box-shadow var(--dm-med),border-color var(--dm-med),background var(--dm-med)}
.vh-page .vi-card .dm-tile{margin-bottom:22px}
.vh-page .vi-card .dm-tile svg{width:19px;height:19px}
.vh-page .vi-card h3{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--dm-ink)}
.vh-page .vi-card p+p{margin-top:8px}
.vh-page .vi-card p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--dm-n7)}
@media (hover:hover){
  .vh-page .vi-card.ring:hover{border-color:var(--dm-acc);box-shadow:var(--dm-ring);translate:0 -3px}
  .vh-page .vi-card.fill:hover{background:var(--dm-acc);border-color:var(--dm-acc);box-shadow:var(--dm-lift)}
  .vh-page .vi-card.fill:hover :is(h3,p,li,b,em,small,span){color:#fff}
  .vh-page .vi-card.fill:hover .dm-tile{background:#fff;color:var(--dm-acc)}
  .vh-page .vi-card.fill:hover ul li{border-color:rgba(255,255,255,.35)}
}
/* what each capability includes: hairline rows, no ticks */
.vh-page .vi-card ul{margin-top:auto;padding-top:20px}
.vh-page .vi-card ul li{padding:10px 0;border-top:1px solid var(--dm-n2);font:500 14.5px/1.35 var(--dm-body);color:var(--dm-ink)}

/* outcome cards: the measure as a display word with its direction */
.vh-page .vi-mark{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.vh-page .vi-mark .dm-tile{margin:0}
.vh-page .vi-mark b{font:400 30px/1 var(--dm-disp);letter-spacing:-.03em;color:var(--dm-ink)}

/* ---------- practices: heading left, the four moves as a step list right ---------- */
.vh-page .vi-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.vh-page .vi-split .vi-head{position:sticky;top:120px;margin-bottom:0}
.vh-page .vi-steps.vh-vt{margin-top:0}
.vh-page .vi-steps.vh-vt::before,.vh-page .vi-steps.vh-vt::after{top:34px;bottom:34px}
.vh-page .vi-steps.vh-vt li{align-items:start;padding:14px 0}
.vh-page .vi-steps .n{font:500 17px/1 var(--dm-disp)}
.vh-page .vi-steps .x b{font:500 20px/1.3 var(--dm-disp);letter-spacing:-.01em;padding-top:8px}
.vh-page .vi-steps .x span{margin-top:8px;font-size:16px;line-height:1.6;color:var(--dm-n7)}

/* ---------- case studies ---------- */
.vh-page .vi-cs{color:inherit;text-decoration:none}
.vh-page .vi-cs b{display:block;font:400 clamp(44px,4vw,60px)/1 var(--dm-disp);letter-spacing:-.04em;color:var(--dm-ink)}
.vh-page .vi-cs b .vh-sx{color:var(--dm-acc)}
.vh-page .vi-cs em{display:block;margin-top:14px;font:600 12px/1.3 var(--dm-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vi-cs h3{margin-top:22px;padding-top:18px;border-top:1px solid var(--dm-n2);font:500 17px/1.4 var(--dm-body);color:var(--dm-ink)}
.vh-page .vi-cs .vi-cs-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto;padding-top:22px}
.vh-page .vi-cs .dm-link{font-size:14px}
@media (hover:hover){.vh-page .vi-cs:hover .dm-link{color:var(--dm-acc-text)}.vh-page .vi-cs:hover .dm-link .dm-ic{translate:3px 0}}

/* ---------- logos (sector rows reuse the homepage grid) ---------- */
.vh-page .vi-logos{padding:0 0 var(--dm-sec-pad)}
.vh-page .vi-logo-sets{display:grid;grid-template-columns:auto auto 1px auto minmax(0,1fr);gap:28px clamp(24px,3vw,44px);align-items:center;padding:28px 0;border-top:1px solid var(--dm-n2);border-bottom:1px solid var(--dm-n2)}
.vh-page .vi-logo-sets p{font:500 15px/1.4 var(--dm-body);color:var(--dm-ink);max-width:150px}
.vh-page .vi-logo-sets>i{align-self:stretch;background:var(--dm-n2)}
.vh-page .vi-logo-sets ul{display:flex;align-items:center;gap:clamp(28px,4vw,64px);flex-wrap:wrap}
.vh-page .vi-logo-sets img{height:var(--h);width:auto;max-width:none}

/* ---------- playbook: the real document, fanned ---------- */
.vh-page .vi-pb{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(28px,4vw,56px);background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);transition:border-color var(--dm-med),box-shadow var(--dm-med)}
@media (hover:hover){.vh-page .vi-pb:hover{border-color:var(--dm-acc);box-shadow:var(--dm-ring)}}
.vh-page .vi-pb h2 em{display:block;font-style:normal;color:var(--dm-acc)}
.vh-page .vi-pb .dm-lede{max-width:560px}
.vh-page .vi-pb-meta{display:flex;gap:28px;margin-top:22px}
.vh-page .vi-pb-meta b{display:block;font:400 34px/1 var(--dm-disp);letter-spacing:-.03em;color:var(--dm-ink)}
.vh-page .vi-pb-meta span{display:block;margin-top:6px;font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vi-ch{columns:2;column-gap:28px;margin-top:26px}
.vh-page .vi-ch li{break-inside:avoid;display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;padding:7px 0;font-size:14.5px;line-height:1.4;color:var(--dm-ink)}
.vh-page .vi-ch li i{font:500 14px/1.4 var(--dm-disp);font-style:normal;color:var(--dm-acc)}
.vh-page .vi-pb .dm-actions{margin-top:28px}
.vh-page .vi-pb small{display:block;margin-top:14px;font-size:13.5px;color:var(--dm-n5)}
.vh-page .vi-fan{position:relative;height:clamp(360px,34vw,500px)}
.vh-page .vi-fan figure{position:absolute;top:50%;left:50%;width:58%;aspect-ratio:595/842;margin:0;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(11,10,58,.08),0 24px 48px -20px rgba(40,20,110,.38);transition:transform .6s var(--dm-ease)}
.vh-page .vi-fan img{width:100%;height:100%;object-fit:cover;display:block}
.vh-page .vi-fan .p1{transform:translate(-50%,-50%) translate(-34%,4%) rotate(-7deg);z-index:1}
.vh-page .vi-fan .p2{transform:translate(-50%,-50%) translate(30%,2%) rotate(6deg);z-index:2}
.vh-page .vi-fan .p3{transform:translate(-50%,-50%) translate(-4%,-2%) rotate(-1deg);z-index:3}
@media (hover:hover){
  .vh-page .vi-pb:hover .vi-fan .p1{transform:translate(-50%,-50%) translate(-46%,6%) rotate(-10deg)}
  .vh-page .vi-pb:hover .vi-fan .p2{transform:translate(-50%,-50%) translate(42%,3%) rotate(9deg)}
  .vh-page .vi-pb:hover .vi-fan .p3{transform:translate(-50%,-50%) translate(-4%,-5%) rotate(0deg)}
}

/* ---------- who it is for: lined rows that flip purple ---------- */
.vh-page .vi-who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.vh-page .vi-who .vi-head{margin-bottom:0}
.vh-page .vi-list>li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;align-items:start;padding:22px 14px;border-bottom:1px solid var(--dm-n2);border-radius:0;transition:background var(--dm-med),box-shadow var(--dm-med),border-radius var(--dm-med)}
.vh-page .vi-list>li:first-child{border-top:1px solid var(--dm-n2)}
.vh-page .vi-list .dm-tile svg{width:19px;height:19px}
.vh-page .vi-list>li>div>b{display:block;font:500 20px/1.3 var(--dm-disp);letter-spacing:-.01em;color:var(--dm-ink)}
.vh-page .vi-sub{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px}
.vh-page .vi-sub li{font:500 14.5px/1.4 var(--dm-body);color:var(--dm-ink)}
.vh-page .vi-sub li+li{padding-left:18px;border-left:1px solid var(--dm-n3)}
@media (hover:hover){.vh-page .vi-list>li:hover .vi-sub li{color:#fff;border-color:rgba(255,255,255,.4)}}
.vh-page .vi-list>li>div>span{display:block;margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--dm-n7)}
@media (hover:hover){
  .vh-page .vi-list>li:hover{background:var(--dm-acc);border-radius:var(--dm-r-row);box-shadow:var(--dm-lift);border-color:transparent}
  .vh-page .vi-list>li:hover :is(b,span){color:#fff}
  .vh-page .vi-list>li:hover .dm-tile{background:#fff;color:var(--dm-acc)}
}

/* ---------- compare: three alternatives ---------- */
.vh-page .vi-vs{font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text);margin-bottom:14px}

/* ---------- go deeper: link rows in two columns ---------- */
.vh-page .vi-links-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.vh-page .vi-links-g>a:last-child:nth-child(odd){grid-column:1/-1}   /* no hole: an odd last row runs full width */
.vh-page .vi-links h3{margin:0 0 10px;font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vi-links h3:not(:first-child){margin-top:40px}
.vh-page .vi-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 12px;border-bottom:1px solid var(--dm-n2);text-decoration:none;transition:background var(--dm-med),box-shadow var(--dm-med),border-radius var(--dm-med)}
.vh-page .vi-links a b{display:block;font:500 17px/1.35 var(--dm-body);color:var(--dm-ink)}
.vh-page .vi-links a small{display:block;margin-top:5px;font-size:14px;line-height:1.45;color:var(--dm-n7)}
.vh-page .vi-links a .dm-ic{color:var(--dm-acc)}
@media (hover:hover){
  .vh-page .vi-links a:hover{background:var(--dm-acc);border-radius:var(--dm-r-row);box-shadow:var(--dm-lift);border-color:transparent}
  .vh-page .vi-links a:hover :is(b,small,.dm-ic){color:#fff}
}

/* ---------- closing card reuses .vh-dmc; this layout has no figures ---------- */
.vh-page .vi-close.vh-dmc{grid-template-columns:minmax(0,1fr) auto;margin-top:0}
.vh-page .vi-close h2{font-size:clamp(28px,2.8vw,40px);font-weight:400;letter-spacing:-.024em;line-height:1.12}
.vh-page .vi-close h2 em{display:block;font-style:normal;color:var(--dm-acc)}
.vh-page .vi-close p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--dm-n7);max-width:640px}

/* ---------- listing page: the index of sectors ---------- */
.vh-page .vi-ix-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.vh-page .vi-ix-bar .dm-seg{margin:0}
.vh-page .vi-ix-count{font:500 15px/1 var(--dm-body);color:var(--dm-ink)}
.vh-page .vi-ix{border-top:1px solid var(--dm-n2)}
.vh-page .vi-ix a{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr) 24px;gap:24px;align-items:center;padding:24px 16px;border-bottom:1px solid var(--dm-n2);text-decoration:none;transition:background var(--dm-med),box-shadow var(--dm-med),border-radius var(--dm-med)}
.vh-page .vi-ix a[hidden]{display:none}
.vh-page .vi-ix .vi-n{font:400 22px/1 var(--dm-disp);color:var(--dm-acc)}
.vh-page .vi-ix h3{font:400 clamp(22px,1.9vw,28px)/1.15 var(--dm-disp);letter-spacing:-.02em;color:var(--dm-ink)}
.vh-page .vi-ix p{font-size:15px;line-height:1.5;color:var(--dm-n7)}
.vh-page .vi-ix .vi-ev b{display:block;font:400 26px/1 var(--dm-disp);letter-spacing:-.03em;color:var(--dm-ink)}
.vh-page .vi-ix .vi-ev b .vh-sx{color:var(--dm-acc)}
.vh-page .vi-ix .vi-ev small{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--dm-n7)}
.vh-page .vi-ix .vi-ev.pb b{font:500 15px/1.3 var(--dm-body);letter-spacing:0}
.vh-page .vi-ix .dm-ic{color:var(--dm-acc)}
@media (hover:hover){
  .vh-page .vi-ix a:hover{background:var(--dm-acc);border-radius:var(--dm-r-row);box-shadow:var(--dm-lift);border-color:transparent}
  .vh-page .vi-ix a:hover :is(.vi-n,h3,p,b,small,.vh-sx,.dm-ic){color:#fff}
}

/* ---------- breakpoints ---------- */
@media (max-width:1100px){
  .vh-page .vi-hero-in{grid-template-columns:minmax(0,1fr)}
  .vh-page .vi-proof{max-width:720px}
  .vh-page .vi-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vh-page .vi-grid.c3:not(.k3){grid-template-columns:repeat(2,minmax(0,1fr))}
  .vh-page .vi-ix a{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 20px}
  .vh-page .vi-ix a p{display:none}
  .vh-page .vi-pb{grid-template-columns:minmax(0,1fr)}
  /* stacked: the fan gets its own clipped stage, so pages never spill over the note or out of the card */
  .vh-page .vi-fan{max-width:560px;width:100%;height:420px;margin:0 auto;overflow:clip}
  .vh-page .vi-fan figure{width:44%}
}
@media (max-width:900px){
  .vh-page .vi-split,.vh-page .vi-who{grid-template-columns:minmax(0,1fr)}
  .vh-page .vi-split .vi-head{position:static;margin-bottom:var(--dm-head-gap)}
  .vh-page .vi-who .vi-head{margin-bottom:var(--dm-head-gap)}
  .vh-page .vi-links-g{grid-template-columns:minmax(0,1fr)}
  .vh-page .vi-close.vh-dmc{grid-template-columns:minmax(0,1fr)}
  .vh-page .vi-logo-sets{grid-template-columns:minmax(0,1fr);gap:16px}
  .vh-page .vi-logo-sets>i{display:none}
  .vh-page .vi-grid.k3{grid-template-columns:minmax(0,1fr)}
  .vh-page .vi-logo-sets p{max-width:none}
}
@media (max-width:760px){
  .vh-page .vi-grid.c4,.vh-page .vi-grid.c3,.vh-page .vi-grid.c3:not(.k3),.vh-page .vi-grid.c2{grid-template-columns:minmax(0,1fr)}   /* :not() outranks the tablet rule, so it is named here too */
  .vh-page .vi-sub{display:block}
  .vh-page .vi-sub li,.vh-page .vi-sub li+li{padding:6px 0 0;border-left:0}
  .vh-page .vi-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .vh-page .vi-facts b{font-size:24px}
  .vh-page .vi-facts li>span{font-size:13px}
  .vh-page .vi-hero .dm-lede{font-size:17px;text-wrap:pretty}
  .vh-page .vi-head .dm-lede{text-wrap:pretty}
  .vh-page .vi-spot{padding:20px 18px}
    .vh-page .vi-spot-i .dm-link{position:static;margin-top:14px}
  .vh-page .vi-rows{padding:8px}
  .vh-page .vi-rows a{grid-template-columns:26px minmax(0,1fr) auto;gap:10px;padding:8px}
  .vh-page .vi-rows i{width:26px;height:26px}
  .vh-page .vi-ch{columns:1}
  .vh-page .vi-fan{height:360px}
  .vh-page .vi-fan figure{width:52%}
  .vh-page .vi-ix-bar .dm-seg{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .vh-page .vi-ix a{grid-template-columns:36px minmax(0,1fr) 18px;gap:14px;padding:18px 6px}
  .vh-page .vi-ix .vi-ev{grid-column:2;grid-row:2}
  .vh-page .vi-ix .vi-n{font-size:18px}
  .vh-page .vi-logo-sets ul{gap:24px 32px}
  .vh-page .vi-logo-sets img{height:calc(var(--h) * .7)}
}

/* unit suffixes (Mn, Bn, B+, "of 11") sit smaller than the numeral, as on the homepage numbers card */
.vh-page .vh-unit{font-size:.6em;letter-spacing:-.01em;margin-left:.04em}
.vh-page .vi-spot-ch .vh-unit{font-size:.42em;letter-spacing:0}

/* Options board for the Financial Services page (round 2). vo- prefix. Scoped to .vh-page by the build. */

/* ---------- review chrome: which section, which option ---------- */
.vh-page .vo-sec-h{padding:56px 0 8px;border-top:1px solid var(--dm-n2)}
.vh-page .vo-sec-h:first-child{border-top:0}
.vh-page .vo-sec-h b{display:block;font:500 28px/1.2 var(--dm-disp);letter-spacing:-.02em;color:var(--dm-ink)}
.vh-page .vo-sec-h p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--dm-n7);max-width:900px}
.vh-page .vo-opt{display:flex;align-items:center;gap:12px;margin:34px 0 0;padding:12px 16px;border:1px solid var(--dm-n2);border-radius:12px;background:#fff}
.vh-page .vo-opt i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--dm-ink);color:#fff;font:600 15px/1 var(--dm-disp);font-style:normal}
.vh-page .vo-opt span{font:600 15px/1.35 var(--dm-body);color:var(--dm-ink)}
.vh-page .vo-opt small{display:block;font:400 14px/1.4 var(--dm-body);color:var(--dm-n7)}
.vh-page .vo-frame{margin-top:14px;border:1px solid var(--dm-n2);border-radius:16px;overflow:hidden;background:#fff}
.vh-page .vo-frame>.vh-sec,.vh-page .vo-frame>section{padding:clamp(40px,4.2vw,60px) 0}
.vh-page .vo-frame>.vh-sec.alt,.vh-page .vo-frame>section.alt{background-color:var(--dm-alt)}

/* ---------- shared short-copy type ---------- */
.vh-page .vo-h2{font:400 clamp(28px,3vw,42px)/1.08 var(--dm-disp);letter-spacing:-.024em;color:var(--dm-ink);max-width:760px}
.vh-page .vo-h2 em{display:block;font-style:normal;color:var(--dm-acc)}
.vh-page .vo-head{margin-bottom:36px}
.vh-page .vo-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}

/* ================= 1. HERO ================= */
.vh-page .vo-h1{font:500 clamp(32px,2.95vw,44px)/1.1 var(--dm-disp);letter-spacing:-.025em;color:var(--dm-ink)}
.vh-page .vo-h1 em{display:block;font-style:normal;color:var(--dm-acc)}
@media (min-width:1101px){.vh-page .vo-h1 .l1{white-space:nowrap}}
.vh-page .vo-lede{margin-top:20px;font-size:19px;line-height:1.5;color:var(--dm-n5);max-width:520px}
.vh-page .vo-hero .dm-actions{margin-top:30px;gap:28px}
/* 1A: two columns that share top and bottom edges; the window fills its column */
.vh-page .vo-1a{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:stretch}
/* the copy column sets the height; the window takes exactly that height, so tops and bottoms meet */
.vh-page .vo-1a{align-items:center}
.vh-page .vo-1a .vo-copy{display:flex;flex-direction:column}
.vh-page .vo-1a .vi-spot{padding:20px 24px 18px}
.vh-page .vo-1a .vi-spot-i b{font-size:52px}
.vh-page .vo-1a .vi-proof{display:flex;flex-direction:column}
.vh-page .vo-1a .vi-proof .vi-rows{padding:8px 12px 10px}
/* 1B: centred copy, the real playbook laid out underneath */
.vh-page .vo-1b{text-align:center}
.vh-page .vo-1b .vo-lede{margin-left:auto;margin-right:auto}
.vh-page .vo-1b .dm-actions{justify-content:center}
.vh-page .vo-pages{position:relative;height:clamp(260px,26vw,360px);margin-top:44px;overflow:clip}
.vh-page .vo-pages figure{position:absolute;top:34px;width:clamp(200px,22vw,300px);aspect-ratio:595/842;margin:0;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(11,10,58,.08),0 30px 60px -24px rgba(40,20,110,.4);transition:translate .6s var(--dm-ease)}
.vh-page .vo-pages img{width:100%;height:100%;object-fit:cover;display:block}
.vh-page .vo-pages .q1{left:50%;translate:-170% 0;rotate:-6deg}
.vh-page .vo-pages .q2{left:50%;translate:-50% -26px;z-index:2}
.vh-page .vo-pages .q3{left:50%;translate:70% 0;rotate:6deg}
@media (hover:hover){.vh-page .vo-1b:hover .vo-pages .q2{translate:-50% -34px}.vh-page .vo-1b:hover .vo-pages .q1{translate:-180% -10px}.vh-page .vo-1b:hover .vo-pages .q3{translate:80% -10px}}
/* 1C: pick who you are, the promise answers */
.vh-page .vo-1c{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:stretch}
.vh-page .vo-1c .vo-copy{display:flex;flex-direction:column;justify-content:center}
.vh-page .vo-pick{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-win);overflow:hidden}
.vh-page .vo-pick .dm-chrome{background:#fff}
.vh-page .vo-pick .crumb{font-size:13px;color:var(--dm-n5)}
.vh-page .vo-pick .crumb b{color:var(--dm-ink);font-weight:600}
.vh-page .vo-pick-b{flex:1;display:flex;flex-direction:column;gap:18px;padding:24px 26px 26px}
.vh-page .vo-pick-l{font:600 14px/1 var(--dm-body);color:var(--dm-ink)}
.vh-page .vo-pick .dm-seg{max-width:100%;align-self:flex-start}
/* every tab visible: they share the row and wrap to a second one rather than scroll out of sight (the homepage control scrolls) */
.vh-page .vo-pick .dm-seg{flex-wrap:wrap;overflow:visible;border-radius:23px;align-self:stretch}
.vh-page .vo-pick .dm-seg button{flex:1 1 auto;justify-content:center;padding:0 11px}
.vh-page .vo-pick-p{display:none;flex:1;flex-direction:column;gap:16px}
.vh-page .vo-pick-p.on{display:flex}
.vh-page .vo-pick-p b{font:400 26px/1.2 var(--dm-disp);letter-spacing:-.015em;color:var(--dm-ink)}
.vh-page .vo-pick-p ul{display:grid;gap:10px;margin-top:auto}
.vh-page .vo-pick-p li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;font:500 15.5px/1.35 var(--dm-body);color:var(--dm-ink)}

/* ================= 2. MARKET ================= */
/* 2A: four cards side by side, title + one line */
.vh-page .vo-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vh-page .vo-four.vo-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vh-page .vo-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);padding:24px 22px 26px;transition:translate var(--dm-med) var(--dm-ease),box-shadow var(--dm-med),border-color var(--dm-med),background var(--dm-med)}
.vh-page .vo-card .dm-tile{margin-bottom:34px}
.vh-page .vo-card h3{font:500 20px/1.25 var(--dm-disp);letter-spacing:-.01em;color:var(--dm-ink)}
.vh-page .vo-card p{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--dm-n7)}
@media (hover:hover){
  .vh-page .vo-card.fill:hover{background:var(--dm-acc);border-color:var(--dm-acc);box-shadow:var(--dm-lift)}
  .vh-page .vo-card.fill:hover :is(h3,p,small,b,em,span,li){color:#fff}
  .vh-page .vo-card.fill:hover .dm-tile{background:#fff;color:var(--dm-acc)}
  .vh-page .vo-card.ring:hover{border-color:var(--dm-acc);box-shadow:var(--dm-ring);translate:0 -3px}
}
/* 2B: four panels in one row; the one in hand widens and says one more line */
.vh-page .vo-acc{display:flex;gap:14px;height:340px}
.vh-page .vo-acc>div{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:26px 24px;border-radius:var(--dm-r-card);background:#fff;border:1px solid var(--dm-line);box-shadow:var(--dm-sh-card);transition:flex-grow .5s var(--dm-ease),background .3s,border-color .3s;overflow:hidden;cursor:default}
.vh-page .vo-acc>div.on{flex-grow:2.2;background:var(--dm-acc);border-color:var(--dm-acc);box-shadow:var(--dm-lift)}
.vh-page .vo-acc .n{font:400 56px/1 var(--dm-disp);letter-spacing:-.04em;color:var(--dm-acc)}
.vh-page .vo-acc h3{font:500 21px/1.22 var(--dm-disp);letter-spacing:-.01em;color:var(--dm-ink);max-width:300px}
.vh-page .vo-acc p{margin-top:10px;font-size:15.5px;line-height:1.5;color:#fff;max-width:340px;opacity:0;translate:0 8px;transition:opacity .3s,translate .3s;height:0}
.vh-page .vo-acc>div.on :is(.n,h3){color:#fff}
.vh-page .vo-acc>div.on p{opacity:1;translate:0 0;height:auto;transition-delay:.18s}

/* ================= 3. PRACTICES ================= */
/* 3A: four moves, each with its hard part */
/* moves share rows across the four cards, so titles, lines and the hard-part rule line up */
.vh-page .vo-four.vo-moves{grid-template-rows:auto auto 1fr auto}
.vh-page .vo-moves>.vo-move{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.vh-page .vo-moves .vo-move .dm-tile{margin-bottom:28px}
.vh-page .vo-move .vo-hp{margin-top:22px;padding-top:16px;border-top:1px solid var(--dm-n2)}
.vh-page .vo-move p{margin-bottom:0}
.vh-page .vo-hp small{display:block;font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vo-hp span{display:block;margin-top:8px;font:500 15px/1.45 var(--dm-body);color:var(--dm-ink)}
@media (hover:hover){.vh-page .vo-card.fill.vo-move:hover .vo-hp{border-color:rgba(255,255,255,.4)}}
/* 3B: the moves as a player: rows left, the move in hand right */
.vh-page .vo-play{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:stretch}
.vh-page .vo-tabs{display:flex;flex-direction:column;gap:6px}
.vh-page .vo-tabs button{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid var(--dm-line);border-radius:var(--dm-r-row);background:#fff;font:500 17px/1.3 var(--dm-body);color:var(--dm-ink);text-align:left;cursor:pointer;transition:background var(--dm-med),box-shadow var(--dm-med)}
.vh-page .vo-tabs button i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px var(--dm-n3);font:500 15px/1 var(--dm-disp);font-style:normal;color:var(--dm-ink)}
.vh-page .vo-tabs button[aria-selected=true]{background:var(--dm-acc);border-color:var(--dm-acc);color:#fff;box-shadow:var(--dm-lift)}
.vh-page .vo-tabs button[aria-selected=true] i{box-shadow:none;color:var(--dm-acc-text)}
@media (hover:hover){.vh-page .vo-tabs button:not([aria-selected=true]):hover{box-shadow:inset 0 0 0 1.5px var(--dm-acc)}}
.vh-page .vo-stage{position:relative;display:grid;background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card)}
.vh-page .vo-stage>div{grid-area:1/1;display:flex;flex-direction:column;gap:22px;padding:30px 32px;opacity:0;translate:0 8px;transition:opacity .25s,translate .25s;pointer-events:none}
.vh-page .vo-stage>div.on{opacity:1;translate:0 0;pointer-events:auto;transition-delay:.12s}
.vh-page .vo-stage .k{font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vo-stage .v{margin-top:8px;font:400 24px/1.3 var(--dm-disp);letter-spacing:-.012em;color:var(--dm-ink)}
.vh-page .vo-stage .w{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

/* ================= 4. CAPABILITIES ================= */
/* 4A: a bento of six, each with the three things it ships, ticking on as the card arrives */
.vh-page .vo-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.vh-page .vo-bento>.vo-card{grid-column:span 2}
.vh-page .vo-bento>.vo-card.w3{grid-column:span 3}
.vh-page .vo-bento>.vo-card.w6{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:40px;align-items:center}
.vh-page .vo-bento>.vo-card.w6 .vo-ship{grid-column:2;grid-row:1/span 3;margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.vh-page .vo-ship{margin-top:22px;display:grid;gap:8px}
.vh-page .vo-ship li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--dm-n2);border-radius:10px;font:500 14.5px/1.3 var(--dm-body);color:var(--dm-ink);background:#fff}
.vh-page .vo-ship li em{flex:none;font:700 12px/1 var(--dm-body);font-style:normal;color:#fff;background:var(--dm-acc);border-radius:7px;padding:5px 8px;opacity:0;transition:opacity .3s}
.vh-page .vo-bento.on .vo-ship li em{opacity:1}
.vh-page .vo-bento.on .vo-ship li:nth-child(2) em{transition-delay:.25s}
.vh-page .vo-bento.on .vo-ship li:nth-child(3) em{transition-delay:.5s}
@media (hover:hover){.vh-page .vo-card.fill:hover .vo-ship li{background:#fff;border-color:#fff;color:var(--dm-ink)}.vh-page .vo-card.fill:hover .vo-ship li em{background:var(--dm-acc);color:#fff}}
/* 4B: pick a capability, see what it ships */
.vh-page .vo-cap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:stretch}
.vh-page .vo-cap .vo-tabs button{font-size:16.5px;padding:13px 16px}
.vh-page .vo-cap .vo-stage>div{gap:24px;justify-content:center}
.vh-page .vo-cap .vo-stage h3{font:500 30px/1.15 var(--dm-disp);letter-spacing:-.02em;color:var(--dm-ink)}
.vh-page .vo-cap .vo-stage .v{font-size:22px}
.vh-page .vo-cap .vo-ship{margin-top:0}

/* ================= 5. OUTCOMES ================= */
/* 5A: the stats-breaker card from the homepage, outcomes as directions */
.vh-page .vo-out{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(26px,3.4vw,40px);background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);transition:border-color var(--dm-med),box-shadow var(--dm-med)}
@media (hover:hover){.vh-page .vo-out:hover{border-color:var(--dm-acc);box-shadow:var(--dm-ring)}}
.vh-page .vo-out-h h3{font:500 24px/1.25 var(--dm-disp);letter-spacing:-.015em;color:var(--dm-ink)}
.vh-page .vo-out-h p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--dm-n7)}
.vh-page .vo-out li{width:max-content}
.vh-page .vo-out li b{display:flex;align-items:center;gap:8px;font:400 clamp(28px,2.6vw,38px)/1 var(--dm-disp);letter-spacing:-.03em;color:var(--dm-ink)}
.vh-page .vo-out li b svg{width:26px;height:26px;color:var(--dm-acc);stroke-width:2}
.vh-page .vo-out li span{display:block;margin-top:10px;font-size:14.5px;line-height:1.35;color:var(--dm-n7)}
/* 5B: the outcomes as the stages a client walks through */
.vh-page .vo-path{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:34px}
.vh-page .vo-path::before,.vh-page .vo-path::after{content:"";position:absolute;top:43px;left:9px;right:calc(25% - 11px);height:2px;border-radius:2px}
.vh-page .vo-path::before{background:var(--dm-n2)}
.vh-page .vo-path::after{background:var(--dm-acc);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--dm-ease)}
.vh-page .vo-path.on::after{transform:scaleX(1)}
.vh-page .vo-path li{position:relative}
.vh-page .vo-path li>i{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--dm-n3);position:relative;z-index:1;transition:background .3s,box-shadow .3s}
.vh-page .vo-path.on li>i{background:var(--dm-acc);box-shadow:0 0 0 6px #fff}
.vh-page .vo-path.on li:nth-child(2)>i{transition-delay:.45s}.vh-page .vo-path.on li:nth-child(3)>i{transition-delay:.9s}.vh-page .vo-path.on li:nth-child(4)>i{transition-delay:1.35s}
.vh-page .vo-path small{display:block;margin-top:24px;font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vo-path b{display:block;margin-top:10px;font:400 26px/1.15 var(--dm-disp);letter-spacing:-.02em;color:var(--dm-ink)}
.vh-page .vo-path span{display:block;margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--dm-n7);max-width:260px}

/* ================= 6. COMPARE ================= */
/* 6A: the comparison board, our column solid purple with a light running round it */
.vh-page .vo-board{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr)) minmax(0,1.15fr);background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card)}
.vh-page .vo-board>div{padding:18px 20px;border-top:1px solid var(--dm-n2);font:500 15px/1.4 var(--dm-body);color:var(--dm-ink);display:flex;align-items:center}
.vh-page .vo-board>.hd{border-top:0;font:600 15px/1.3 var(--dm-body);padding-top:22px;padding-bottom:22px}
.vh-page .vo-board>.rl{font-weight:600;color:var(--dm-n7)}
.vh-page .vo-board>.us{background:var(--dm-acc);color:#fff;font-weight:600;border-top-color:rgba(255,255,255,.22)}
.vh-page .vo-board>.us.hd{border-radius:var(--dm-r-card) var(--dm-r-card) 0 0;margin-top:-12px;padding-top:34px;font-size:17px}
.vh-page .vo-board>.us.last{border-radius:0 0 var(--dm-r-card) var(--dm-r-card);margin-bottom:-12px;padding-bottom:30px}
.vh-page .vo-board>.no{color:var(--dm-n7)}
.vh-page .vo-board .dm-ic{width:18px;height:18px;margin-right:8px;stroke-width:2}
.vh-page .vo-lap{position:absolute;pointer-events:none;border-radius:var(--dm-r-card);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--dm-acc),0 20px 50px -18px rgba(148,49,255,.65);opacity:.9}
/* 6B: three statements; the reason opens on hover */
.vh-page .vo-say .vo-card{min-height:250px;justify-content:space-between}
.vh-page .vo-say .vo-card small{font:600 12px/1 var(--dm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vo-say .vo-card h3{font:400 28px/1.15 var(--dm-disp);letter-spacing:-.02em;margin-top:18px}
/* the reason opens with grid rows 0fr to 1fr (no height animation) */
.vh-page .vo-say .vo-card>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .45s var(--dm-ease)}
.vh-page .vo-say .vo-card p{min-height:0;overflow:hidden;opacity:0;transition:opacity .3s}
@media (hover:hover){.vh-page .vo-say .vo-card:hover>div{grid-template-rows:auto 1fr}.vh-page .vo-say .vo-card:hover p{opacity:1}}
@media (hover:none){.vh-page .vo-say .vo-card>div{grid-template-rows:auto 1fr}.vh-page .vo-say .vo-card p{opacity:1}}

/* ================= 7. WHO ================= */
/* 7A: three audience cards with a small picture of the job (homepage pattern) */
.vh-page .vo-aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vh-page .vo-aud .vo-card{padding:0;overflow:hidden}
.vh-page .vo-art{padding:20px 22px 22px;border-bottom:1px solid var(--dm-n2);background:#fff;display:flex;flex-direction:column;gap:10px;justify-content:center}
.vh-page .vo-art .vo-tag{margin-bottom:4px}
.vh-page .vo-aud .vo-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.vh-page .vo-aud .vo-body p{margin-top:8px}
.vh-page .vo-aud .dm-link{margin-top:auto;padding-top:20px}
.vh-page .vo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--dm-n2);border-radius:10px;font:500 14px/1.2 var(--dm-body);color:var(--dm-ink);background:#fff}
.vh-page .vo-row em{font:700 12px/1 var(--dm-body);font-style:normal;color:#fff;background:var(--dm-acc);border-radius:7px;padding:5px 8px}
.vh-page .vo-row em.o{background:#fff;color:var(--dm-acc-text);box-shadow:inset 0 0 0 1.5px var(--dm-acc)}
.vh-page .vo-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--dm-ink);color:#fff;font:700 12px/1 var(--dm-body);align-self:flex-start}
@media (hover:hover){.vh-page .vo-aud .vo-card:hover .vo-art{background:#fff}.vh-page .vo-aud .vo-card:hover .dm-link{color:var(--dm-acc-text)}}
/* 7B: a statement per audience, picked with the segmented control */
.vh-page .vo-who2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:center}
.vh-page .vo-who2 .vo-pick{box-shadow:var(--dm-sh-card)}

/* ---------- breakpoints ---------- */
@media (max-width:1100px){
  .vh-page .vo-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vh-page .vo-1a,.vh-page .vo-1c,.vh-page .vo-play,.vh-page .vo-cap,.vh-page .vo-who2{grid-template-columns:minmax(0,1fr)}
  .vh-page .vo-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vh-page .vo-bento>.vo-card,.vh-page .vo-bento>.vo-card.w3{grid-column:span 1}
  .vh-page .vo-bento>.vo-card.w6{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}
  .vh-page .vo-bento>.vo-card.w6 .vo-ship{grid-column:1;grid-row:auto;margin-top:22px;grid-template-columns:minmax(0,1fr)}
  .vh-page .vo-moves>.vo-move{display:flex;grid-row:auto}
  .vh-page .vo-four.vo-moves{grid-template-rows:none}
  .vh-page .vo-h1 .l1{white-space:normal}
  .vh-page .vo-out{flex-wrap:wrap}
  .vh-page .vo-acc{flex-direction:column;height:auto}
  .vh-page .vo-acc>div,.vh-page .vo-acc>div.on{flex:none;min-height:0}
  .vh-page .vo-acc p{opacity:1;height:auto;color:var(--dm-n7)}
  .vh-page .vo-acc>div.on p{color:#fff}
  .vh-page .vo-board{grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .vh-page .vo-four,.vh-page .vo-four.vo-3,.vh-page .vo-bento,.vh-page .vo-aud,.vh-page .vo-path{grid-template-columns:minmax(0,1fr)}
  .vh-page .vo-path::before,.vh-page .vo-path::after{display:none}
  .vh-page .vo-board{display:block;overflow:visible}
  .vh-page .vo-board>div{display:none}
  .vh-page .vo-board-m{display:grid!important}
  .vh-page .vo-pages figure{width:46%}
  .vh-page .vo-pages .q1{translate:-140% 0}.vh-page .vo-pages .q3{translate:40% 0}
  .vh-page .vo-out li{width:auto}
}
.vh-page .vo-board-m{display:none;gap:10px}
.vh-page .vo-board-m>div{padding:16px 18px;border:1px solid var(--dm-n2);border-radius:12px;background:#fff}
.vh-page .vo-board-m>div b{display:block;font:600 15px/1.3 var(--dm-body);color:var(--dm-ink)}
.vh-page .vo-board-m>div span{display:block;margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--dm-n7)}
.vh-page .vo-board-m>div.us{background:var(--dm-acc);border-color:var(--dm-acc)}
.vh-page .vo-board-m>div.us :is(b,span){color:#fff}

/* 1A window: the chapter in hand, an 11-step strip, one link. Stretches to the copy's height. */
.vh-page .vo-1a{align-items:stretch}
.vh-page .vo-chap{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-win);overflow:hidden}
.vh-page .vo-chap .dm-chrome{background:#fff}
.vh-page .vo-chap .crumb{font-size:13px;color:var(--dm-n5)}
.vh-page .vo-chap .crumb b{color:var(--dm-ink);font-weight:600}
.vh-page .vo-ch-b{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:24px 28px 22px}
.vh-page .vo-ch-s{display:grid}
.vh-page .vo-ch-i{grid-area:1/1;opacity:0;translate:0 8px;transition:opacity .22s var(--dm-ease),translate .22s var(--dm-ease)}
.vh-page .vo-ch-i.on{opacity:1;translate:0 0;transition-duration:.4s;transition-delay:.12s}
.vh-page .vo-ch-i b{display:block;font:400 52px/1 var(--dm-disp);letter-spacing:-.04em;color:var(--dm-ink)}
.vh-page .vo-ch-i b .vh-unit{font-size:.42em;letter-spacing:0;color:var(--dm-acc)}
.vh-page .vo-ch-i p{margin-top:12px;font:400 22px/1.25 var(--dm-disp);letter-spacing:-.012em;color:var(--dm-ink)}
.vh-page .vo-segs{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px}
.vh-page .vo-segs i{height:6px;border-radius:3px;background:var(--dm-n2);transition:background .3s}
.vh-page .vo-segs i.on,.vh-page .vo-segs i.done{background:var(--dm-acc)}
.vh-page .vo-ch-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--dm-n2);font:500 14.5px/1.3 var(--dm-body);color:var(--dm-ink)}
.vh-page .vo-ch-f .dm-link{white-space:nowrap;flex:none}

/* Round 3: the stitched FinTech page. Sits on vi.css + vo.css. Small live product mocks (vm-) explain each point the
   way the homepage service tiles do, so the copy can be one line. Scoped to .vh-page by the build. */

/* smaller hero title, one-line sub (his note: still too big, still too much sub text) */
.vh-page .vo-h1{font-size:clamp(30px,2.75vw,40px)}
.vh-page .vo-lede{font-size:18px;max-width:440px}
.vh-page .vo-1c{align-items:center}

/* ---------- a mini panel, the shared frame for every mock ---------- */
.vh-page .vm{position:relative;background:#fff;border:1px solid var(--dm-n2);border-radius:14px;padding:14px;box-shadow:0 1px 2px rgba(11,10,58,.04)}
.vh-page .vm-l{font:600 11.5px/1 var(--dm-body);letter-spacing:.06em;text-transform:uppercase;color:var(--dm-n7)}
.vh-page .vm-k{font:400 30px/1 var(--dm-disp);letter-spacing:-.03em;color:var(--dm-ink)}
.vh-page .vm-k .vh-sx{color:var(--dm-acc)}

/* bars that fill when their block is in view (.on) */
.vh-page .vm-bars{display:grid;gap:9px;margin-top:12px}
.vh-page .vm-bar{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;gap:10px;align-items:center;font:500 13px/1.2 var(--dm-body);color:var(--dm-ink)}
.vh-page .vm-bar span{height:10px;border-radius:5px;background:var(--dm-n1);overflow:hidden}
.vh-page .vm-bar span i{display:block;height:100%;width:100%;border-radius:5px;background:var(--dm-acc);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--dm-ease)}
.vh-page .vm-bar b{font:600 13px/1 var(--dm-body);color:var(--dm-ink);text-align:right}
.vh-page .on .vm-bar span i{transform:scaleX(var(--w))}
.vh-page .on .vm-bar:nth-child(2) span i{transition-delay:.25s}.vh-page .on .vm-bar:nth-child(3) span i{transition-delay:.5s}

/* hero picker: the funnel replays for each audience */
.vh-page .vo-pick-p .vm{margin-top:4px}
.vh-page .vo-pick-p .vm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* 2B panels: the open one shows a tiny proof line */
.vh-page .vo-acc .vm-proof{display:flex;align-items:center;gap:8px;margin-top:14px;opacity:0;transition:opacity .3s}
.vh-page .vo-acc>div.on .vm-proof{opacity:1;transition-delay:.3s}
.vh-page .vm-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:#fff;color:var(--dm-acc-text);font:700 12px/1 var(--dm-body)}

/* 3A: a mock on top of each move card */
.vh-page .vo-moves .vm{margin-bottom:22px;min-height:132px;display:flex;flex-direction:column;justify-content:center}
.vh-page .vm-article{display:grid;gap:8px}
.vh-page .vm-article b{font:600 14px/1.3 var(--dm-body);color:var(--dm-ink)}
.vh-page .vm-article .ln{height:7px;border-radius:4px;background:var(--dm-n2)}
.vh-page .vm-article .ln.s{width:70%}
.vh-page .vm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 13px/1.2 var(--dm-body);color:var(--dm-ink)}
.vh-page .vm-pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;background:var(--dm-acc);color:#fff;font:700 12px/1 var(--dm-body);white-space:nowrap}
.vh-page .vm-pill.o{background:#fff;color:var(--dm-acc-text);box-shadow:inset 0 0 0 1.5px var(--dm-acc)}
.vh-page .vm-serp{display:grid;gap:7px}
.vh-page .vm-q{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--dm-n3);border-radius:999px;font:500 12.5px/1 var(--dm-body);color:var(--dm-ink);white-space:nowrap;overflow:hidden}
.vh-page .vm-q svg{width:14px;height:14px;flex:none;color:var(--dm-n7)}
.vh-page .vm-res{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;font:500 13px/1.2 var(--dm-body);color:var(--dm-ink)}
.vh-page .vm-res i{display:grid;place-items:center;height:24px;border-radius:7px;background:var(--dm-acc);color:#fff;font:600 13px/1 var(--dm-disp);font-style:normal}
.vh-page .vm-segs{display:flex;flex-wrap:wrap;gap:6px}
.vh-page .vm-segs span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--dm-n3);font:600 12.5px/1 var(--dm-body);color:var(--dm-ink);transition:background .3s,color .3s,box-shadow .3s}
.vh-page .vm-segs span.hit{background:var(--dm-acc);color:#fff;box-shadow:none}
/* inside a filled (hovered) card, every mock turns solid white so nothing blends */
@media (hover:hover){
  .vh-page .vo-card.fill:hover .vm{border-color:#fff}
  .vh-page .vo-card.fill:hover .vm :is(b,.vm-row,.vm-res,.vm-bar,.vm-q,.vm-segs span){color:var(--dm-ink)}
  .vh-page .vo-card.fill:hover .vm .vm-l{color:var(--dm-n7)}
  .vh-page .vo-card.fill:hover .vm .vm-segs span.hit,.vh-page .vo-card.fill:hover .vm .vm-pill:not(.o),.vh-page .vo-card.fill:hover .vm .vm-res i{color:#fff}
}

/* case studies: purple pills (his note), numbers count up on arrival */
.vh-page .vi-cs .dm-pill,.vh-page .vi-cs1 .dm-pill{background:var(--dm-acc);color:#fff;box-shadow:none}
@media (hover:hover){.vh-page .vi-cs:hover .dm-pill{background:var(--dm-acc);color:#fff}}

/* 5B: stage figures under the dots */
.vh-page .vo-path .vm{margin-top:16px;max-width:260px}

/* phone */
@media (max-width:760px){
  .vh-page .vm-bar{grid-template-columns:80px minmax(0,1fr) 40px}
  .vh-page .vo-moves .vm{min-height:0}
}

/* hero band: same top/bottom air as v2's hero, without inheriting its larger h1 */
.vh-page .vr-hero{padding:clamp(28px,4vw,56px) 0 var(--dm-sec-pad)}
/* fewer words: link rows are titles only; the closing card is heading + button */
.vh-page #deeper .vi-links a small{display:none}
.vh-page #next .vi-close p{display:none}

/* ===== round 4 ===== */
/* hero: a two-line lede and the FinTech logos fill the left column; the right speaks at body size */
.vh-page .vo-lede{max-width:520px}
.vh-page .vr-trust{margin-top:34px;padding-top:22px;border-top:1px solid var(--dm-n2)}
.vh-page .vr-trust span{display:block;font:500 13.5px/1.3 var(--dm-body);color:var(--dm-n7)}
.vh-page .vr-trust ul{display:flex;align-items:center;flex-wrap:wrap;gap:14px 30px;margin-top:14px}
.vh-page .vr-trust img{height:calc(var(--h) * .72);width:auto;max-width:none}
.vh-page .vo-pick-p>b{font:500 18px/1.35 var(--dm-disp);letter-spacing:-.01em}
.vh-page .vo-pick-p .vm-bar b{font:600 13px/1 var(--dm-body);letter-spacing:0}
.vh-page .vo-pick-b{gap:14px;padding:20px 22px 22px}
.vh-page .vm-f6{gap:7px;grid-template-columns:max-content minmax(48px,1fr) 40px;column-gap:12px}
.vh-page .vm-f6 .vm-bar{grid-column:1/-1;grid-template-columns:subgrid;font-size:13px;white-space:nowrap}
.vh-page .vm-f6 .vm-bar span{height:8px}
.vh-page .on .vm-f6 .vm-bar:nth-child(4) span i{transition-delay:.75s}.vh-page .on .vm-f6 .vm-bar:nth-child(5) span i{transition-delay:1s}.vh-page .on .vm-f6 .vm-bar:nth-child(6) span i{transition-delay:1.25s}
.vh-page .vo-pick-p .vm-bars{margin-top:10px}

/* market panels: shorter; closed = a large outlined numeral, open = it shrinks to a solid label and the line appears */
.vh-page .vr-acc{height:236px}
.vh-page .vr-acc>div{padding:22px 22px 22px}
.vh-page .vr-acc .n{display:block;font:500 120px/.8 var(--dm-disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--dm-acc);transform-origin:0 0;transition:transform .5s var(--dm-ease),color .3s}
.vh-page .vr-acc>div.on .n{transform:scale(.36);color:#fff;-webkit-text-stroke:0}
.vh-page .vr-acc h3{font-size:19px}
.vh-page .vr-acc p{font-size:15px}
@media (max-width:1100px){.vh-page .vr-acc{height:auto}.vh-page .vr-acc .n{font-size:64px}.vh-page .vr-acc>div.on .n{transform:none}.vh-page .vr-acc>div{gap:14px}}

/* capability cards: a small live picture of the job instead of a checklist */
.vh-page .vr-bento .vo-card{gap:0}
.vh-page .vr-viz{margin-top:auto;padding:12px 14px}
.vh-page .vr-bento .vo-card p{margin-bottom:18px}
.vh-page .vr-ai .vm-q{height:auto;padding:8px 12px;white-space:normal;border-radius:12px;line-height:1.3}
.vh-page .vr-ans{display:grid;gap:7px;margin-top:10px}
.vh-page .vr-ans .ln{height:7px;border-radius:4px;background:var(--dm-n2)}
.vh-page .vr-ans .ln.s{width:62%}
.vh-page .vr-cite{font:500 13.5px/1.4 var(--dm-body);color:var(--dm-ink);opacity:0;translate:0 6px;transition:opacity .4s .5s,translate .4s .5s}
.vh-page .vr-cite b{color:var(--dm-acc-text)}
.vh-page .vr-cite i{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border-radius:5px;background:var(--dm-acc);color:#fff;font:700 11px/1 var(--dm-body);font-style:normal;vertical-align:1px}
.vh-page .vr-ai.on .vr-cite{opacity:1;translate:0 0}
.vh-page .vr-cac .vm-bar{grid-template-columns:120px minmax(0,1fr) 30px}
.vh-page .vr-cac .vm-bar.best b{color:var(--dm-acc-text)}
.vh-page .vr-steps{display:grid;gap:7px;grid-template-columns:max-content minmax(0,1fr)}
.vh-page .vr-steps>div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;gap:10px;align-items:center;padding:7px 9px;border:1px solid var(--dm-n2);border-radius:10px;font:500 13.5px/1.2 var(--dm-body);color:var(--dm-ink);transition:background .3s,color .3s,border-color .3s}
.vh-page .vr-steps i{display:grid;place-items:center;height:22px;min-width:34px;padding:0 7px;white-space:nowrap;border-radius:6px;box-shadow:inset 0 0 0 1px var(--dm-n3);font:600 11.5px/1 var(--dm-body);font-style:normal;color:var(--dm-ink);transition:background .3s,color .3s,box-shadow .3s}
.vh-page .vr-steps.on>div i{background:var(--dm-acc);color:#fff;box-shadow:none}
.vh-page .vr-steps.on>div:nth-child(2) i{transition-delay:.5s}.vh-page .vr-steps.on>div:nth-child(3) i{transition-delay:1s}
.vh-page .vr-spark{display:block;width:100%;height:50px;margin-top:8px}
.vh-page .vr-spark path{fill:none;stroke:var(--dm-acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.4s var(--dm-ease)}
.vh-page .vr-viz.on .vr-spark path{stroke-dashoffset:0}
.vh-page .vr-tree{display:grid;justify-items:center;gap:10px}
.vh-page .vr-tree>div{display:flex;gap:8px}
.vh-page .vr-tree i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dm-n3);transition:background .3s,box-shadow .3s}
.vh-page .vr-tree.on i{background:var(--dm-acc);box-shadow:none}
.vh-page .vr-tree.on .vr-t2 i{transition-delay:.45s}.vh-page .vr-tree.on .vr-t3 i{transition-delay:.9s}
.vh-page .vr-mix .vr-stack{display:flex;gap:4px;height:14px;margin-top:12px;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--dm-ease)}
.vh-page .vr-mix.on .vr-stack{clip-path:inset(0 0 0 0)}
.vh-page .vr-mix .vr-stack i{flex:var(--w) 1 0;border-radius:4px}
.vh-page .vr-mix .vr-stack i:nth-child(1){background:var(--dm-acc)}.vh-page .vr-mix .vr-stack i:nth-child(2){background:var(--dm-ink)}
.vh-page .vr-mix .vr-stack i:nth-child(3){background:#fff;box-shadow:inset 0 0 0 1.5px var(--dm-acc)}.vh-page .vr-mix .vr-stack i:nth-child(4){background:#fff;box-shadow:inset 0 0 0 1.5px var(--dm-n3)}
.vh-page .vr-mix ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.vh-page .vr-mix li{display:flex;align-items:center;gap:7px;font:500 13px/1 var(--dm-body);color:var(--dm-ink)}
.vh-page .vr-mix li span{width:10px;height:10px;border-radius:3px}
.vh-page .vr-mix .k1{background:var(--dm-acc)}.vh-page .vr-mix .k2{background:var(--dm-ink)}.vh-page .vr-mix .k3{box-shadow:inset 0 0 0 1.5px var(--dm-acc)}.vh-page .vr-mix .k4{box-shadow:inset 0 0 0 1.5px var(--dm-n3)}
.vh-page .vr-bento>.vo-card.w6{align-items:center}
.vh-page .vr-bento>.vo-card.w6 .vr-viz{grid-column:2;grid-row:1;margin-top:0}
/* hovered (purple) card: the picture stays a white panel with dark content */
@media (hover:hover){
  .vh-page .vo-card.fill:hover .vr-viz :is(.vr-cite,.vr-steps>div,.vr-mix li,.vm-q){color:var(--dm-ink)}
  .vh-page .vo-card.fill:hover .vr-cite b{color:var(--dm-acc-text)}
  .vh-page .vo-card.fill:hover .vr-viz .vm-k{color:var(--dm-ink)}
  .vh-page .vo-card.fill:hover .vr-steps i{color:#fff}
}

/* case studies: one type family for the title, the project as a quiet line */
.vh-page .vi-cs h3{font:500 18px/1.3 var(--dm-disp);letter-spacing:-.01em}
.vh-page .vi-cs h3 small{display:block;margin-top:5px;font:400 14px/1.4 var(--dm-body);color:var(--dm-n7)}
@media (hover:hover){.vh-page .vi-cs:hover h3 small{color:var(--dm-n7)}}

/* comparison: three columns */
.vh-page .vr-board{grid-template-columns:minmax(0,.9fr) repeat(2,minmax(0,1fr)) minmax(0,1.15fr)}
.vh-page .vr-board>.us{font-weight:600}
@media (max-width:1100px){.vh-page .vr-board{grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.vh-page .vr-trust ul{gap:12px 22px}.vh-page .vm-f6{grid-template-columns:max-content minmax(40px,1fr) 36px;column-gap:10px}.vh-page .vr-bento>.vo-card.w6 .vr-viz{grid-column:1;grid-row:auto;margin-top:12px}}

/* ===== round 5: ONE section-heading style for the whole page (it was 42 / 48 / 40px by section) ===== */
/* hero 40px > every section heading 36px > card titles 20px; tracking is the same -0.024em everywhere */
.vh-page main section h2,.vh-page main section .vo-h2{font-size:clamp(28px,2.5vw,36px)!important;font-weight:400!important;line-height:1.1!important;letter-spacing:-.024em!important}
.vh-page main .vi-close h2{font-size:clamp(26px,2.2vw,32px)!important}
.vh-page .vo-h1{letter-spacing:-.024em}
/* market numerals: solid, not outlined; the open one turns white */
.vh-page .vr-acc .n{color:var(--dm-acc);-webkit-text-stroke:0}
.vh-page .vr-acc>div.on .n{color:#fff}

/* ===== round 6: closing card. Heading + button on one row, the three things the call gives you across the width ===== */
.vh-page .vr-close{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h a" "f f";align-items:center;gap:0 32px;padding:clamp(28px,3.4vw,44px);background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);transition:border-color var(--dm-med),box-shadow var(--dm-med)}
@media (hover:hover){.vh-page .vr-close:hover{border-color:var(--dm-acc);box-shadow:var(--dm-ring)}}
.vh-page .vr-close-h{grid-area:h}
.vh-page .vr-close-a{grid-area:a}
.vh-page main .vr-close h2{font-size:clamp(24px,2.2vw,32px)!important;line-height:1.15!important}
.vh-page .vr-close h2 em{display:block;font-style:normal;color:var(--dm-acc)}
.vh-page .vr-close-h p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--dm-n7)}
.vh-page .vr-close-f{grid-area:f;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px;padding-top:26px;border-top:1px solid var(--dm-n2)}
.vh-page .vr-close-f li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center}
.vh-page .vr-close-f .dm-tile{grid-row:1/3}
.vh-page .vr-close-f b{font:600 16px/1.3 var(--dm-body);color:var(--dm-ink)}
.vh-page .vr-close-f li>span:last-child{font-size:14.5px;line-height:1.35;color:var(--dm-n7)}
@media (max-width:760px){.vh-page .vr-close{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "f" "a"}.vh-page .vr-close-f{grid-template-columns:minmax(0,1fr);gap:14px;margin:22px 0 24px;padding-top:20px}.vh-page .vr-close-a .dm-btn{width:100%}}

/* ===== round 7: FAQ on this page's scale (it carried the homepage's: 19px questions in 76px rows, 30px numerals,
   22px group labels on 46px tiles; the rest of the page runs 20px titles / 15.5px text) ===== */
@media (min-width:761px){
  .vh-page main .vh-qa .dm-faq-q{grid-template-columns:56px minmax(0,1fr) 20px;min-height:56px;padding:13px 20px;font-size:16.5px}
  .vh-page main .vh-qa .dm-faq-a p{padding:4px 20px 20px 92px;font-size:15.5px;line-height:1.65;max-width:860px}
}
.vh-page main .vh-qa-n{font-size:20px;font-weight:400}
.vh-page main .vh-qa-g+.vh-qa-g{margin-top:36px}
.vh-page main .vh-qa-gl{gap:12px;padding:0 0 12px 20px}
.vh-page main .vh-qa-gl .dm-tile{width:36px;height:36px;border-radius:10px}
.vh-page main .vh-qa-gl .dm-tile .dm-ic{width:18px;height:18px}
.vh-page main .vh-qa-gl b{font:500 18px/1.25 var(--dm-disp);letter-spacing:-.01em}

/* ===== listings round 3 (22 Oct, option B approved): each tile = name, who it is for, and one small notification of
   the moment that sector or service is won. The notification slides in when the tile arrives (position and opacity only)
   and its tick fills; the tile fills purple on hover and the notification replays. Industries: 19 tiles + a purple
   "Don't see your sector?" tile = 20, no hole at 4 / 2 / 1 columns. Services: one row per group, tiles share the row.
   Tiles in a row share their rows (subgrid) so the notifications sit level. ===== */
.vh-page .vx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (min-width:641px){.vh-page .vx-grid>.vx-t,.vh-page .vx-gt>.vx-t{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}.vh-page .vx-gt{grid-template-rows:auto auto}}
.vh-page .vx-t{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);color:var(--dm-ink);text-decoration:none;transition:background-color .28s var(--dm-ease),border-color .28s var(--dm-ease),box-shadow .28s var(--dm-ease),transform .28s var(--dm-ease)}
.vh-page .vx-h{display:flex;align-items:flex-start;gap:12px}
.vh-page .vx-h h3{flex:1;margin:0;font:500 19px/1.25 var(--dm-disp);letter-spacing:-.012em;color:inherit}
.vh-page .vx-h>.dm-ic{flex:none;width:18px;height:18px;margin-top:3px;color:var(--dm-acc);transition:transform .28s var(--dm-ease),color .28s var(--dm-ease)}
.vh-page .vx-top{display:block}
.vh-page .vx-l{display:block;margin:6px 0 20px;font:400 15px/1.45 var(--dm-body);color:var(--dm-n7)}
.vh-page .vx-m{align-self:end;display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--dm-line);border-radius:14px;box-shadow:var(--dm-sh-obj);transition:transform .6s var(--dm-ease),opacity .6s var(--dm-ease);transition-delay:var(--d,0ms)}
.vh-page .vx-k{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--dm-acc);color:#fff;box-shadow:inset 0 0 0 1.5px var(--dm-acc);transition:background-color .3s var(--dm-ease),color .3s var(--dm-ease);transition-delay:calc(var(--d,0ms) + 420ms)}
.vh-page .vx-k .dm-ic{width:16px;height:16px;stroke-width:2.4}
.vh-page .vx-m b{display:block;font:600 14.5px/1.3 var(--dm-body);color:var(--dm-ink)}
.vh-page .vx-m small{display:block;margin-top:1px;font:400 13px/1.35 var(--dm-body);color:var(--dm-n5)}
/* before arrival (script running): the notification waits below, its tick outlined */
.vh-page .vx-js .vx-t:not(.on) .vx-m{opacity:0;transform:translateY(14px);transition-duration:0s;transition-delay:0s}
.vh-page .vx-js .vx-t:not(.on) .vx-k{background:#fff;color:var(--dm-acc);transition-duration:0s;transition-delay:0s}
@media (hover:hover){
  .vh-page .vx-t:hover{background:var(--dm-acc);border-color:var(--dm-acc);box-shadow:var(--dm-lift);transform:translateY(-3px);color:#fff}
  .vh-page .vx-t:hover .vx-l{color:#fff}
  .vh-page .vx-t:hover .vx-h>.dm-ic{color:#fff;transform:translateX(4px)}
  .vh-page .vx-t:hover .vx-m{border-color:#fff;animation:vxIn .6s var(--dm-ease) both}
}
@keyframes vxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the ask tile closes the grid: solid purple, points at this page's form */
.vh-page .vx-t.vx-ask{background:var(--dm-acc);border-color:var(--dm-acc);color:#fff;justify-content:space-between}
.vh-page .vx-ask h3{font:500 19px/1.25 var(--dm-disp);letter-spacing:-.012em;margin:0}
.vh-page .vx-ask p{margin:6px 0 0;font:400 15px/1.45 var(--dm-body);color:#fff}
.vh-page .vx-ask .dm-link{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--dm-body);color:#fff}
.vh-page .vx-ask .dm-link .dm-ic{width:16px;height:16px;transition:transform .28s var(--dm-ease)}
@media (hover:hover){.vh-page .vx-t.vx-ask:hover{background:var(--dm-acc-hover);border-color:var(--dm-acc-hover)}.vh-page .vx-ask:hover .dm-link .dm-ic{transform:translateX(4px)}}
/* services: one row per group, label above, tiles share the row */
.vh-page .vx-rows{display:grid;gap:40px}
.vh-page .vx-gr{display:grid;gap:16px}
.vh-page .vx-gl{display:flex;align-items:center;gap:12px}
.vh-page .vx-gl>span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.vh-page .vx-gl b{font:500 20px/1.25 var(--dm-disp);letter-spacing:-.012em;color:var(--dm-ink)}
.vh-page .vx-gl small{font:400 15px/1.45 var(--dm-body);color:var(--dm-n7)}
.vh-page .vx-gt{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
@media (max-width:1100px){
  .vh-page .vx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vh-page .vx-gt{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vh-page .vx-gt>.vx-t:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:640px){
  .vh-page .vx-grid,.vh-page .vx-gt{grid-template-columns:minmax(0,1fr);gap:10px}
  .vh-page .vx-t{padding:18px}
  .vh-page .vx-h h3,.vh-page .vx-ask h3{font-size:17.5px}
  .vh-page .vx-l{margin:4px 0 14px;font-size:14.5px}
  .vh-page .vx-m{align-self:stretch}
  .vh-page .vx-ask{gap:12px}
}
/* the closing form on inner pages: its heading carries the page's own words; keep it on the page's h2 scale */
.vh-page main #talk .dm-cta h2{font-size:clamp(28px,2.5vw,36px);font-weight:400;letter-spacing:-.024em;line-height:1.12}
/* the site's own head code sets *{appearance:none}, which erased the consent tick box (also on the live homepage) */
.vh-page .dm-check input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto}
.vh-page .vx-ask>.dm-link{grid-row:2;align-self:end}

/* round 4: chart header - label left, number right, never run together */
.vh-page .vr-viz .vm-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.vh-page .vr-viz .vm-head .vm-l{min-width:0}
.vh-page .vr-viz .vm-head .vm-k{flex:none}

/* round 4: capability cards - icon beside the title, three included items, chart after a fixed gap.
   The chart follows the list after a fixed gap and its box takes up the rest of the card, so no card has a dead band. */
.vh-page .vr-bento>.vo-card.vc{min-height:0;justify-content:flex-start;padding:24px 24px 24px}
.vh-page .vc-h{display:flex;align-items:center;gap:14px}
.vh-page .vc-h .dm-tile{margin:0;flex:none}
.vh-page .vr-bento .vc-h h3{margin:0}
.vh-page .vr-bento .vo-card.vc p{margin:12px 0 0}
.vh-page .vc-inc{display:grid;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.vh-page .vc-inc li{display:flex;gap:10px;align-items:flex-start;font:400 15px/1.45 var(--dm-body);color:var(--dm-ink)}
.vh-page .vc-inc .dm-ic{flex:none;width:15px;height:15px;margin-top:4px;color:var(--dm-acc)}
.vh-page .vo-card.vc>.vr-viz{margin-top:20px;flex:1 0 auto}
.vh-page .vo-card.vc>.vr-viz:not(.vr-steps){display:flex;flex-direction:column;justify-content:center}
.vh-page .vo-card.vc>.vr-viz.vr-steps{align-content:center}
.vh-page .vo-card.fill.vc:hover .vc-inc .dm-ic{color:#fff}
.vh-page .vr-bento>.vo-card.w6.vc{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:48px;align-items:center}
.vh-page .vr-bento>.vo-card.w6.vc>.vc-t .vc-inc{margin-bottom:0}
@media (max-width:760px){.vh-page .vr-bento>.vo-card.w6.vc{grid-template-columns:1fr}.vh-page .vr-bento>.vo-card.w6.vc .vr-viz{margin-top:20px}}

/* round 4: who cards - the target row names the target in words, no pill */
.vh-page .vo-row.vo-goal{border-color:var(--dm-acc)}
.vh-page .vo-goal span{color:var(--dm-n7);font-weight:500;flex:none}
.vh-page .vo-goal b{font:600 14px/1.3 var(--dm-body);color:var(--dm-acc-text);text-align:right}

/* round 4: mix legend in even columns, so no single item sits alone on a second line */
.vh-page .vr-mix ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px 14px}

/* round 4b (Davinci gate) */
/* who cards: a pill only for a figure; a word value is plain text */
.vh-page .vo-row .vo-v{flex:none;font:600 13.5px/1.2 var(--dm-body);color:var(--dm-ink);text-align:right}
/* capability cards: each card is a subgrid of its row, so title, line, list and chart share tracks and the charts line up */
@media (min-width:761px){
  .vh-page .vr-bento>.vo-card.vc:not(.w6){display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .vh-page .vr-bento>.vo-card.vc:not(.w6)>.vr-viz{align-self:stretch}
}
/* two-column widths: card 5 would sit alone, so it and card 6 run full width, text left and chart right */
@media (min-width:761px) and (max-width:1100px){
  .vh-page .vr-bento>.vo-card.vc:nth-child(5),.vh-page .vr-bento>.vo-card.vc.w6{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:none;column-gap:40px;row-gap:0;align-items:center}
  .vh-page .vr-bento>.vo-card.vc:nth-child(5)>:not(.vr-viz),.vh-page .vr-bento>.vo-card.vc.w6>.vc-t{grid-column:1}
  .vh-page .vr-bento>.vo-card.vc:nth-child(5)>.vr-viz,.vh-page .vr-bento>.vo-card.vc.w6>.vr-viz{grid-column:2;grid-row:1/span 4;margin-top:0;align-self:center}
}
/* listing "Don't see your sector?" card: white title on purple (navy failed AA) */
.vh-page .vx-ask h3{color:#fff}
/* industries listing hero: the case-study window fills the column when the hero stacks */
.vh-page .vo-hero .vi-proof{max-width:none;width:100%}
/* four-item legends in two even columns */
.vh-page .vr-mix ul:has(>li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
/* services listing: a group of three stays three across down to the phone layout, no stretched lone card */
@media (min-width:1025px) and (max-width:1100px){.vh-page .vx-gt:has(>.vx-t:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.vh-page .vx-gt:has(>.vx-t:nth-child(3):last-child)>.vx-t:last-child{grid-column:auto}}
/* notifications in one row: same height, so their tops line up even when one wraps to two lines */
@media (min-width:641px){.vh-page .vx-grid>.vx-t>.vx-m,.vh-page .vx-gt>.vx-t>.vx-m{align-self:stretch}}
/* round 4c (Davinci re-run): Who cards line up across a row; one-line section headings get room; a seam where two bands share a colour */
.vh-page .vo-row{min-height:42px}
@media (min-width:641px){.vh-page .vo-aud{grid-template-rows:auto auto}.vh-page .vo-aud>.vo-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}}
.vh-page .vo-h2{max-width:1040px}
.vh-page .vh-merge{margin-top:clamp(64px,7vw,104px)}
/* one result: a single wide case-study card, number left, client + summary right */
.vh-page .vi-cs1{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:48px;align-items:center;padding:40px 44px;color:inherit;text-decoration:none}
.vh-page .vi-cs1-n b{display:block;font:400 clamp(64px,7vw,104px)/.95 var(--dm-disp);letter-spacing:-.045em;color:var(--dm-ink)}
.vh-page .vi-cs1-n b .vh-sx{color:var(--dm-acc)}
.vh-page .vi-cs1-n em{display:block;margin-top:16px;font:600 12.5px/1.3 var(--dm-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vi-cs1-t{border-left:1px solid var(--dm-n2);padding-left:44px}
.vh-page .vi-cs1 h3{font:500 20px/1.3 var(--dm-disp);letter-spacing:-.01em;color:var(--dm-ink)}
.vh-page .vi-cs1 h3 small{display:block;margin-top:4px;font:400 15px/1.4 var(--dm-body);color:var(--dm-n7)}
.vh-page .vi-cs1 p{margin-top:12px;font:400 16.5px/1.55 var(--dm-body);color:var(--dm-n7)}
.vh-page .vi-cs1 .vi-cs-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:22px}
@media (max-width:760px){.vh-page .vi-cs1{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 24px}.vh-page .vi-cs1-t{border-left:0;padding-left:0;border-top:1px solid var(--dm-n2);padding-top:20px}}
/* round 5 (22 Oct): the full-width capability card's chart fills its half of the card, rows spaced and sized up */
@media (min-width:761px){
  .vh-page .vr-bento>.vo-card.vc.w6{align-items:stretch}
  .vh-page .vr-bento>.vo-card.vc.w6>.vc-t{align-self:center}
  .vh-page .vr-bento>.vo-card.vc.w6>.vr-viz{align-self:stretch;padding:24px 28px}
  .vh-page .vr-bento>.vo-card.vc.w6>.vr-viz:not(.vr-steps){display:flex;flex-direction:column;justify-content:center}
  .vh-page .vr-bento>.vo-card.vc.w6 .vm-bars{gap:16px;margin-top:18px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vm-bar{grid-template-columns:128px minmax(0,1fr) 52px;font-size:14.5px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vm-bar b{font-size:14.5px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vm-bar span{height:12px;border-radius:6px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-steps{gap:12px;align-content:center}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-steps>div{padding:11px 14px;font-size:14.5px}
}
/* step titles sit clearly below the section heading */
.vh-page .vo-path b{font:500 20px/1.25 var(--dm-disp);letter-spacing:-.01em}
/* industries hero: the homepage's own proof numbers fill the copy column */
.vh-page .vr-hn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px 0 0;padding:28px 0 0;list-style:none;border-top:1px solid var(--dm-n2);max-width:560px}
.vh-page .vr-hn b{display:block;font:400 clamp(30px,3vw,40px)/1 var(--dm-disp);letter-spacing:-.035em;color:var(--dm-ink)}
.vh-page .vr-hn b .vh-sx{color:var(--dm-acc)}
.vh-page .vr-hn em{display:block;margin-top:12px;font:600 12px/1 var(--dm-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--dm-acc-text)}
.vh-page .vr-hn li>span{display:block;margin-top:7px;font-size:14.5px;line-height:1.35;color:var(--dm-n7)}
@media (max-width:640px){.vh-page .vr-hn{gap:16px}.vh-page .vr-hn b{font-size:28px}.vh-page .vr-hn li>span{font-size:13.5px}}
/* service pages: CTA breaker, the homepage's .vh-dmc box with words left and the button right */
.vh-page .vh-brk{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(24px,3.2vw,36px) clamp(24px,3.4vw,40px);background:#fff;border:1px solid var(--dm-line);border-radius:var(--dm-r-card);box-shadow:var(--dm-sh-card);transition:border-color var(--dm-med),box-shadow var(--dm-med)}
@media (hover:hover){.vh-page .vh-brk:hover{border-color:var(--dm-acc);box-shadow:var(--dm-ring)}}
.vh-page .vh-brk h3{font:500 24px/1.25 var(--dm-disp);letter-spacing:-.015em;color:var(--dm-ink)}
.vh-page .vh-brk p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--dm-n7)}
@media (max-width:640px){.vh-page .vh-brk{grid-template-columns:minmax(0,1fr)}.vh-page .vh-brk .dm-btn{justify-self:start}}
.vh-page .vr-hn .vh-unit{font-size:.6em;letter-spacing:-.01em;margin-left:.04em}
/* round 5: in the full-width card the mix and AI charts scale up to use the box */
@media (min-width:761px){
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-mix .vr-stack{height:26px;gap:6px;margin-top:18px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-mix .vr-stack i{border-radius:6px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-mix ul{margin-top:20px;row-gap:12px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-mix li{font-size:15px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-ai .vm-q{padding:14px 16px;font-size:15px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-ans{gap:10px;margin-top:16px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-ans .ln{height:10px;border-radius:5px}
  .vh-page .vr-bento>.vo-card.vc.w6 .vr-cite{font-size:15px;margin-top:4px}
}


.vh-page .vs-route{display:grid;gap:0;padding:4px 16px}
.vh-page .vs-route a{display:flex;align-items:center;gap:12px;padding:12px 0;text-decoration:none;color:var(--dm-ink)}
.vh-page .vs-route a+a{border-top:1px solid var(--dm-line)}
.vh-page .vs-route a>span{flex:1;display:grid;gap:2px}.vh-page .vs-route b{font:600 15px/1.3 var(--dm-body)}.vh-page .vs-route small{font:400 13.5px/1.4 var(--dm-body);color:var(--dm-n7)}
.vh-page .vs-route a .dm-ic{color:var(--dm-acc);transition:transform .25s var(--dm-ease)}.vh-page .vs-route a:hover .dm-ic{transform:translateX(4px)}