/* impulssum site CSS. Extracted verbatim from prototype v9.12.12 (second <style> block),
   with the review-layer block removed. Do not hand-edit selectors without checking the prototype. */
/* ===================== BRAND TOKENS — impulssum Brand Guidelines, Feb 2026 ===================== */
:root{
  /* MARC: one dark blue on the whole site. --navy-deep and --navy-800 were #0D2440 and
     #10304F; both now resolve to the brand blue, so nothing on any page is darker than it. */
  --navy:#163E67; --navy-deep:#163E67; --navy-800:#163E67;
  --orange:#F9896B; --orange-deep:#E4643D;
  --info:#4F86B5; --success:#3FA06F; --warning:#F0C84B; --error:#D64545; --purple:#6B5B95;
  --n900:#171717; --n700:#404040; --n500:#737373; --n300:#D4D4D4; --n200:#E5E5E5;
  --n100:#F5F5F5; --n50:#FAFAFA; --white:#fff;
  --wrap:1200px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:2px;
  --hair:linear-gradient(90deg,var(--navy),var(--orange));
  /* ONE TYPE SCALE. Two sizes carry the whole site: --fs-title for every heading that is not
     the hero at the top of a page, --fs-body for every piece of running text, whatever block it
     sits in. --fs-num is the one extra size a card may use, the KPI numeral, and it is set to the
     same value as the title so no third size actually enters the system. The mono labels keep
     their own small sizes, and chart and diagram internals are out of scope. */
  --fs-body:1.05rem;
  --fs-title:clamp(1.6rem,2.6vw,2rem);
  --fs-num:clamp(1.6rem,2.6vw,2rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--n900);background:var(--white);font-size:var(--fs-body);line-height:1.6;overflow-x:hidden}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:44em}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:800;letter-spacing:-.034em}
h2{font-size:var(--fs-title);line-height:1.18}
h3{font-size:var(--fs-body);line-height:1.32}
h4{font-size:var(--fs-body);line-height:1.32}
h5{font-size:var(--fs-body);line-height:1.32}
p{margin-bottom:1em} p:last-child{margin-bottom:0}
/* ONE SECTION RHYTHM, on your comment. Sections used to run 88px top and bottom while the symptom
   block ran 52px through section.tight, so the page breathed unevenly and the big blocks read as
   padded out. 52px is now the default, which is what .tight already was, so .tight changes nothing
   and is kept only so the markup does not have to be touched. Heroes are untouched: they carry their
   own padding, either the 66/58 on .hero or an inline value on the product and industry pages. */
section{padding:52px 0;position:relative}
section.tight{padding:52px 0}
.bg-n100{background:var(--n100)}
.bg-n50{background:var(--n50)}
.bg-navy{background:var(--navy);color:#D6E2EE}
.bg-ink{background:var(--navy-deep);color:#C9D9E7}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4,.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}
/* fine technical grid — neutral, so the 80–90% neutral rule holds */
.tex{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(22,62,103,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(22,62,103,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(110% 70% at 50% 0%,#000 20%,transparent 75%)}
.bg-navy .tex,.bg-ink .tex{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.wrap{position:relative;z-index:2}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500;
  /* was var(--info) #4F86B5, which measured 3.88:1 on white and 3.56:1 on the light grey band, both under
     the 4.5:1 a label this small needs. #2A5A88 is the palette blue already used in the diagrams and
     measures 7.2:1 on white and 6.6:1 on grey, still clearly lighter than a heading. */
  color:#2A5A88;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--hair);flex:0 0 auto}
.eyebrow.c{justify-content:center}
/* MARC: the "Trusted by..." label on the homepage loses the little rule in front of it and is set
   at .72rem, the largest mono size the homepage already uses (the attribution under the quote). */
#home--trust .eyebrow::before{display:none}
#home--trust .eyebrow{font-size:.72rem}
.bg-navy .eyebrow,.bg-ink .eyebrow{color:var(--orange)}
.bg-navy .eyebrow::before,.bg-ink .eyebrow::before{background:var(--orange)}
.lead{font-size:var(--fs-body);line-height:1.6;color:var(--n700)}
.bg-navy .lead,.bg-ink .lead{color:#B9CCDD}
.sm{font-size:var(--fs-body)}.xs{font-size:.86rem}.mut{color:var(--n500)}
.bg-navy .mut,.bg-ink .mut{color:#8FA8BF}
/* HEADING BLOCKS RUN THE FULL WIDTH, on request: they were capped at 36em, which left the heading
   and the line under it in the left half of a wide screen while the content below ran the full width. */
.sec-head{max-width:none;margin-bottom:44px}
.sec-head.narrowhead{max-width:36em}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.klabel{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#2C5478;display:block;margin-bottom:10px}
/* MARC: every column label of this kind is set exactly like the h2 beside it &mdash; same family, same size
   token, same colour, same tracking &mdash; but in regular weight, so the heading still leads the block. On
   request, one weight for all of them. Only this pair of columns: the same class carries much longer labels
   elsewhere that still want the small label treatment. */
.klabel.klabel-lg{font-family:var(--display);font-size:var(--fs-title);font-weight:400;color:var(--navy);
  letter-spacing:-.025em;line-height:1.18;text-transform:none;margin-bottom:14px}
.bg-navy .klabel.klabel-lg,.bg-ink .klabel.klabel-lg{font-size:var(--fs-title);letter-spacing:-.025em}
/* MARC: the for-you pair keeps the orange; the situation/want pair is the heading blue. */
.klabel.klabel-lg.klabel-orange{color:var(--orange-deep)}
/* IS and NOT are underlined on request; at this size the default underline sits on the baseline, so it
   is pushed down and thinned to match the weight of the type */
.klabel.klabel-lg u{text-decoration-thickness:1px;text-underline-offset:.16em}
/* on a dark band these take the heading white, like the h2 beside them */
.bg-navy .klabel.klabel-lg,.bg-ink .klabel.klabel-lg,
.bg-navy .klabel.klabel-lg.klabel-orange,.bg-ink .klabel.klabel-lg.klabel-orange{color:#fff}
.bg-navy .klabel,.bg-ink .klabel,.bg-navy .klabel{color:#EAF2FA;font-size:.8rem;letter-spacing:.09em}
/* on navy the old label blue sat at about 3.4:1 against the band, under the 4.5:1 minimum;
   this is near 12:1 and a size up. */
.bignum{font-family:var(--display);font-weight:800;font-size:var(--fs-num);color:var(--navy);letter-spacing:-.04em;line-height:1}
.bignum.acc{color:var(--orange-deep)}
.bg-navy .bignum,.bg-ink .bignum{color:var(--orange)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);font-weight:600;
  font-size:var(--fs-body);padding:15px 26px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:.18s ease;text-align:center}
.btn-primary{background:var(--orange);color:#2A1005;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{filter:brightness(1.18);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--n300)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.bg-navy .btn-ghost,.bg-ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.bg-navy .btn-ghost:hover,.bg-ink .btn-ghost:hover{border-color:#fff}
.nav .btn{white-space:nowrap}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn-full{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.micro{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--n500);margin-top:18px;line-height:1.65}
.bg-navy .micro,.bg-ink .micro{color:#8FA8BF}
.micro b{color:var(--navy);font-weight:600}
.bg-navy .micro b,.bg-ink .micro b{color:#fff}

/* ===== scroll progress ===== */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--hair);z-index:120;width:0;transition:width .08s linear}

/* ===== header + mega menu ===== */
header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--n200);transition:box-shadow .2s}
header.stuck{box-shadow:0 10px 30px -22px rgba(13,36,64,.55)}
.nav{display:flex;align-items:center;gap:22px;height:76px}
.logo{display:flex;align-items:center;cursor:pointer;flex:0 0 auto}
.logo img{height:31px;width:auto}
.logo .fallback{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--navy);letter-spacing:-.035em}
.nav-links{display:flex;gap:2px;margin-left:auto;font-size:.92rem;font-weight:500;align-items:center}
.nav-links>a,.nav-item>button{color:var(--navy);padding:8px 10px;white-space:nowrap;cursor:pointer;background:none;border:none;
  font-family:var(--body);font-size:.94rem;font-weight:500;display:inline-flex;align-items:center;gap:6px;
  border-bottom:2px solid transparent;transition:.15s}
.nav-links>a:hover,.nav-item>button:hover{border-bottom-color:var(--orange)}
.nav-links>a.on{border-bottom-color:var(--orange)}
/* THE WIDE MENU IS CENTRED ON THE PAGE, THE NARROW ONES UNDER THEIR OWN BUTTON. .mega is positioned
   absolutely with left:50% and a -50% shift; with the nav item static that 50% resolves against the page
   column, which is what the 880px What we do panel wants. Once Industries, Insights and About us shrank
   to fit their lists, the same rule left them sitting in the middle of the page instead of under the
   button that opened them. Giving the item that holds a one-column menu its own positioning context
   makes the same 50% resolve against the button. A browser without :has() falls back to the old
   page-centred behaviour rather than breaking. */
/* every dropdown is anchored to its own button, so each one opens flush under the label it belongs to.
   The wide What we do panel used to be positioned against the header instead, which opened it 20px
   lower than the others and left a dead strip the pointer had to cross: the menu closed on the way
   down to the links. The panel is kept inside the viewport by the width clamp and the shift below. */
.nav-item{position:relative}
/* between the mobile breakpoint and about 1080px the What we do button sits close enough to the left
   edge that an 880px panel centred on it would hang off screen, so the panel narrows there */
@media(min-width:1041px) and (max-width:1090px){.mega:not(.one){width:min(760px,calc(100vw - 48px))}}
.nav-item>button::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:.18s}
.nav-item.open>button::after{transform:rotate(-135deg) translateY(-2px)}
.nav-item.open>button{border-bottom-color:var(--orange)}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(880px,calc(100vw - 48px));border-top:none;background:#fff;border:1px solid var(--n200);
  box-shadow:0 30px 70px -40px rgba(13,36,64,.6);padding:26px;display:none;grid-template-columns:repeat(3,1fr);gap:22px}
.nav-item.open .mega{display:grid}
.mega .mcol{border:1px solid var(--n200);border-top:2px solid var(--orange);padding:14px 16px 12px}
.mega .mlever{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy);padding:0 0 8px;
  border-bottom:1px solid var(--n200)!important;letter-spacing:-.01em}
.mega .mlever:hover{color:var(--orange-deep)}
.mega .msubs{padding-left:14px;border-left:2px solid var(--n200);margin:10px 0 0}
.mega .msub{font-size:.85rem;padding:4px 0}
.mega h5{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1rem;margin-bottom:4px;cursor:pointer}
.mega h5:hover{color:var(--orange-deep)}
.mega .mdesc{font-size:.82rem;color:var(--n500);margin-bottom:12px;line-height:1.45}
.mega a{display:block;font-size:.86rem;color:var(--n700);padding:5px 0;cursor:pointer;border-bottom:1px solid transparent}
.mega a:hover{color:var(--navy);border-bottom-color:var(--n200)}
.mega .foot{grid-column:1/-1;border-top:1px solid var(--n200);padding-top:16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
/* THE ONE-COLUMN DROPDOWNS FIT THEIR LIST, on your comment. Two things were widening them: they
   inherited the three-column grid of the What we do menu, so the single list sat in the first third
   and the other two thirds were empty, and a 330px floor kept the box wide even when the longest
   item was shorter than that. The box is now max-content with one column, and the outer padding is
   14px rather than 26px, since each list already sits in its own bordered panel. */
.mega.one{width:max-content;min-width:0;max-width:min(560px,calc(100vw - 48px));
  grid-template-columns:minmax(0,1fr);padding:14px}
.mega.one a{white-space:nowrap}
.mega.one .foot{display:none}
.mega .foot .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.nav-tel{white-space:nowrap;font-family:var(--mono);font-size:.8rem;color:var(--navy);white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--n300);border-radius:var(--r);
  padding:9px 14px;font-family:var(--display);font-weight:600;cursor:pointer;color:var(--navy)}

/* ===== hero ===== */
.hero{background:var(--n100);border-bottom:1px solid var(--n200);padding:66px 0 58px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:52px;align-items:center}
.hero h1 em{font-style:normal;color:var(--orange-deep)}
.hero-sub{font-size:var(--fs-body);color:var(--n700);margin-top:20px;max-width:32em}
/* a hero on the brand blue: the band itself, the rule under it and the sub-line, since the headings
   already turn white on a dark band */
.hero.bg-navy,.hero.bg-ink{background:var(--navy);border-bottom-color:rgba(255,255,255,.14)}
.hero.bg-navy .hero-sub,.hero.bg-ink .hero-sub{color:#B9CCDD}
.ticker{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--n200);
  padding:7px 14px 7px 8px;margin-bottom:20px;font-size:.85rem;color:var(--navy);cursor:pointer;transition:.16s}
.ticker:hover{border-color:var(--orange)}
.ticker em{font-style:normal;background:var(--orange);color:#2A1005;font-family:var(--mono);font-weight:600;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px}
.herocta{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--n300);max-width:26em}
.herocta button{background:none;border:none;padding:0;cursor:pointer;font-family:var(--display);
  font-weight:600;font-size:.92rem;color:var(--orange-deep);transition:.14s}
.herocta button:hover{color:var(--orange)}
.heroviews{display:flex;gap:8px;margin-top:22px}
.heroviews button{width:30px;height:3px;padding:0;border:none;background:var(--n300);cursor:pointer;
  transition:background .25s;position:relative}
.heroviews button::after{content:"";position:absolute;inset:-9px -3px}
.heroviews button[aria-selected="true"]{background:var(--orange)}
.heroviews button:hover{background:var(--navy)}
.scrollcue{display:flex;align-items:center;gap:10px;margin-top:34px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--n500)}
.scrollcue i{width:1px;height:26px;background:linear-gradient(180deg,var(--navy),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:translateY(-3px)}50%{opacity:1;transform:translateY(3px)}}

/* ===== EBITDA bridge ===== */
.bridge-card{background:#fff;border:1px solid var(--n200);padding:26px 26px 20px;box-shadow:0 26px 64px -42px rgba(13,36,64,.55)}
.bridge-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px solid var(--n200);
  padding-bottom:13px;flex-wrap:wrap}
.bridge-head .t{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1.02rem;letter-spacing:-.02em}
.bridge-head .s{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--n500);text-transform:uppercase}
.plot{display:grid;grid-template-columns:34px 1fr;gap:8px;margin-top:24px}
.yaxis{position:relative;height:236px;font-family:var(--mono);font-size:.64rem;color:var(--n500)}
.yaxis span{position:absolute;right:0;transform:translateY(50%)}
.plotarea{position:relative;height:236px}
.gridline{position:absolute;left:0;right:0;height:1px;background:var(--n200)}
.gridline.base{background:none;border-top:1px dashed var(--navy);opacity:.3;height:0}
.cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.col{position:relative;height:100%}
.bar{position:absolute;left:0;right:0;height:0;cursor:pointer;
  transition:height .8s cubic-bezier(.22,.9,.3,1),bottom .8s cubic-bezier(.22,.9,.3,1),background .2s,opacity .3s}
.bar.tot{background:var(--navy)}
.bar.step{background:var(--orange)}
.bar.step:hover{background:var(--orange-deep)}
.bar.off{background:var(--n300)!important}
.bar.dim{opacity:.28}
.bar.step.grey{background:var(--n300)}
.bar.step.grey:hover{background:var(--n300)}
.leadnote{border-left:2px solid var(--n300);padding-left:14px;margin:18px 0 20px;color:var(--n700);font-size:.98rem;
  line-height:1.55;min-height:2.9em;transition:border-color .2s}
.leadnote.on{border-left-color:var(--orange)}
.leadnote b{color:var(--navy);font-family:var(--display)}
.leadnote .go{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--orange);cursor:pointer;font-weight:600}
.chipcap{position:absolute;left:8px;top:6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--navy);color:#fff;padding:5px 10px;white-space:nowrap;z-index:6;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.5)}
.bar.focus{box-shadow:0 0 0 3px rgba(228,100,61,.28)}
.vlabel{position:absolute;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.72rem;font-weight:600;
  color:var(--navy);opacity:0;transition:opacity .45s ease .5s}
.live .vlabel{opacity:1}
.vlabel.off{color:var(--n500);text-decoration:line-through}
.xaxis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-left:42px;margin-top:10px;
  border-top:1px solid var(--n300);padding-top:11px}
.xaxis div{font-family:var(--mono);font-size:.62rem;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;color:var(--n500);text-align:center;transition:.2s}
.xaxis b{display:block;color:var(--navy);font-weight:600;font-size:.66rem}
.xaxis div.act b{color:var(--orange-deep)}
.toggles{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--n200);align-items:center}
.toggles .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);margin-right:2px}
.tg{font-family:var(--body);font-size:.84rem;font-weight:500;border:1px solid var(--n300);background:#fff;padding:7px 13px;
  border-radius:var(--r);cursor:pointer;color:var(--navy);transition:.15s;display:inline-flex;gap:7px;align-items:center}
.tg .dot{width:9px;height:9px;background:var(--orange);flex:0 0 auto}
.tg[aria-pressed="false"]{color:var(--n500);border-color:var(--n200)}
.tg[aria-pressed="false"] .dot{background:var(--n300)}
.tg:hover{border-color:var(--navy)}
.bridge-foot{font-family:var(--mono);font-size:.68rem;color:var(--n500);margin-top:12px;line-height:1.55}

/* ===== trusted-by band ===== */
.trust{padding:56px 0 60px;border-bottom:1px solid var(--n200);overflow:hidden}
.trust-top{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px;text-align:center}
.trust-top .n{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,2.9rem);color:var(--navy);letter-spacing:-.04em;line-height:1}
.trust-top .n em{font-style:normal;color:var(--orange)}
.trust-top .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);margin-top:10px}
/* ---------- industry hero: the client's own photograph, graded ---------- */
.indshot{margin:0;position:relative;padding:0 0 16px 16px}
.indshot::before{content:'';position:absolute;left:0;bottom:0;top:34px;right:64px;background:var(--navy);opacity:.09;border-radius:3px}
.indshot::after{content:'';position:absolute;left:0;bottom:0;width:96px;height:4px;background:var(--orange);z-index:2}
.indshot img{position:relative;display:block;width:100%;height:auto;z-index:1;border-radius:3px;
  box-shadow:0 18px 40px -22px rgba(11,34,58,.55)}
@media(max-width:700px){.indshot{padding:0 0 14px 10px}.indshot::before{right:40px;top:22px}}
/* ---------- industry hero: the floating frame. Every part of it is CSS, so it rescales, follows a
   brand colour change and stays sharp on a retina screen. The image file is the photograph alone:
   no white border, no shadow, no rounded corner baked into the bitmap.
   The mat is what lifts a dark photograph off the light grey hero. The shadow is four layers on
   purpose, one tight contact shadow plus three progressively wider ones, because a single blurred
   shadow reads as a sticker. The plate behind is two fading hairlines rather than a bordered box:
   a closed rectangle leaves hard corners poking past the mat at the top left and bottom right, and
   those corners kill the floating effect, so no corner is drawn at all. ---------- */
.indshot.photo{margin:0;position:relative;padding:0 0 18px 18px}
.indshot.photo::before{content:'';position:absolute;left:0;bottom:0;right:18px;top:18px;
  border:0;border-radius:0;opacity:1;z-index:0;
  background:
    linear-gradient(180deg,rgba(22,62,103,0) 0%,rgba(22,62,103,.20) 38%,rgba(22,62,103,.20) 100%) left top/1px 100% no-repeat,
    linear-gradient(90deg,rgba(22,62,103,.20) 0%,rgba(22,62,103,.20) 62%,rgba(22,62,103,0) 100%) left bottom/100% 1px no-repeat}
.indshot.photo::after{content:'';position:absolute;left:0;bottom:0;width:96px;height:4px;
  background:var(--orange);z-index:3}
.indshot.photo .mat{position:relative;z-index:1;background:#fff;padding:11px;border-radius:4px;
  box-shadow:0 1px 2px rgba(11,34,58,.10),0 10px 22px -12px rgba(11,34,58,.28),
             0 34px 56px -32px rgba(11,34,58,.48),0 64px 90px -66px rgba(11,34,58,.38)}
.indshot.photo .mat img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:none}
@media(max-width:700px){
  .indshot.photo{padding:0 0 12px 12px}
  .indshot.photo::before{right:12px;top:12px}
  .indshot.photo .mat{padding:8px}
}
/* THREE RESETS SO THE BLOCK ABOVE IS ACTUALLY SELF-CONTAINED. A second, older .indshot rule further
   down this sheet gives every .indshot a white background, a hairline border and display:none below
   900px. Left alone it would draw a bordered box around the whole frame and hide all five heroes on
   a tablet. These three lines undo it for .photo only; the old rule still governs any other use. */
.indshot.photo{background:none;border:0}
@media(max-width:900px){.indshot.photo{display:block}}
/* ---------- industry hero panel: the sector's drivers, drawn ---------- */
/* customer case: picture beside the text, one column on a phone */
.casegrid{grid-template-columns:.72fr 1.6fr;gap:40px;align-items:center}
@media(max-width:900px){.casegrid{grid-template-columns:1fr!important;gap:26px}.casegrid>*{min-width:0!important;max-width:100%}}
/* every redrawn diagram scrolls sideways inside its own card rather than widening the page */
@media(max-width:900px){
  .dg{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:16px 14px;min-width:0}
  .grid>div,.pget>div{min-width:0}
  .dg>*{min-width:min(680px,100%)}
  .casegrid>.rv,.casegrid>div{min-width:0;max-width:100%}
  .casegrid .dg{max-width:100%}
  .dg .lfw,.dg .mfx,.dg .capcards,.dg .roi,.dg .ringwrap,.dg .ucw,.dg .vbcards,.dg .vbmap{min-width:0}
  .ccchart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ccchart .ccbody{min-width:600px}
  .wfx{overflow-x:auto}
  .wfx .wfxbody{min-width:560px}
}
.vsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vtile.vhide{display:none}
.idr{background:#fff;border:1px solid var(--n200);padding:24px 22px 20px}
.idrk{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:14px}
.idrh{margin:8px 0 18px;font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.3;color:var(--navy)}
.idrflow{display:flex;flex-direction:column;gap:0}
.idrn{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;padding:11px 0}
.idrn+.idrn{border-top:1px solid var(--n200)}
.idrn i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--n100);
  color:var(--navy);font-family:var(--display);font-weight:700;font-size:.92rem;font-style:normal}
.idrn.lead i{background:var(--orange);color:#fff}
.idrn b{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);line-height:1.25;display:block}
.idrn span{display:block;font-size:.84rem;color:var(--n600,#5A6B7C);line-height:1.4;margin-top:2px}
.idrfig{margin-top:16px;padding-top:14px;border-top:2px solid var(--navy);display:flex;align-items:baseline;gap:10px}
.idrfig b{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--orange);line-height:1;white-space:nowrap}
.idrfig span{font-size:.82rem;color:var(--n600,#5A6B7C);line-height:1.35}
.idrnote{margin:12px 0 0;font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;color:var(--n500)}
@media(max-width:860px){.idr{padding:20px 16px 16px}}
/* industry proof block: a static logo row and this sector's quotes, no marquee */
/* one moving row at the homepage plate size; it pauses when the pointer is on it */
.indband{padding:24px 0;position:relative;overflow:hidden;content-visibility:auto;background:#fff}
.indband .mrow{display:flex;flex-wrap:nowrap;width:max-content;gap:0;animation:none;will-change:transform}
.indband .lg{min-width:0;padding:10px var(--lgpad,42px);flex:none}
@media(max-width:700px){.indband .lg{padding:10px 26px}}
.iq{margin:0;background:#fff;border:1px solid var(--n200);border-top:3px solid var(--orange);padding:20px 20px 18px}
.iq blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:var(--fs-body);line-height:1.5;color:var(--navy)}
.iq figcaption{margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--n500)}
.iq figcaption b{color:var(--navy);font-weight:700}
.marquee{content-visibility:auto;contain-intrinsic-size:auto 120px;position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrow{display:flex;gap:10px;width:max-content;animation:slide 260s linear infinite}
.mrow.rev{animation-direction:reverse;animation-duration:320s;margin-top:10px}
@keyframes slide{to{transform:translateX(-50%)}}
/* MARC: logos only. No plate, no border, no background, no company name. */
.lg{border:none;background:none;padding:10px 18px;font-family:var(--display);font-weight:600;
  font-size:.95rem;color:var(--n500);white-space:nowrap;transition:.18s;letter-spacing:-.01em}
.lg{display:flex;align-items:center;justify-content:center;gap:10px;min-width:120px;padding:10px 20px}
/* ALWAYS IN COLOUR, and nothing happens on hover: no greyscale, no fade, no scale, and the band
   does not pause. On request. */
.lg .lgimg{flex:0 0 auto;height:32px;width:auto;max-width:164px;object-fit:contain}
.lg .mark{flex:0 0 auto;min-width:40px;height:32px;padding:0 6px;background:none;border:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--n300);letter-spacing:.06em}
.lg .wm{display:none}

.tquotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--n200)}
/* boxed, so each quote reads as its own thing and matches the carousel cards on Results */
.tq{margin:0;background:#fff;border:1px solid var(--n200);border-left:3px solid var(--orange);
  padding:22px 24px;display:flex;flex-direction:column}
.tq p{font-family:var(--display);font-weight:500;font-size:1rem;color:var(--navy);line-height:1.45;letter-spacing:-.01em;margin:0;flex:1}
.tq cite{display:block;font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n500);margin-top:14px;padding-top:12px;border-top:1px solid var(--n200)}
@media(max-width:900px){.tquotes{grid-template-columns:1fr;gap:20px}}
.lg.pe .mark{font-style:italic}

/* ===== sticky scrollytelling levers ===== */
.scrolly{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start}
.sticky-col{position:sticky;top:120px}
.panel{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid var(--n200)}
.panel:first-child{border-top:none}
.panel .op{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--n300);line-height:.8;margin-bottom:14px;display:block}
.panel h3{font-size:var(--fs-title);margin-bottom:18px;max-width:27ch;line-height:1.2}
.panel .prob{border-left:3px solid var(--n300);padding-left:18px;margin-bottom:20px}
.panel .prob .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--error);display:block;margin-bottom:6px}
.panel .prob p{color:var(--n700);font-size:var(--fs-body)}
.panel .fix .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:6px}
.panel .fix{border-left:2px solid var(--n300);padding-left:18px;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.chip{border:1px solid var(--n300);padding:6px 12px;font-size:var(--fs-body);color:var(--navy);border-radius:var(--r);transition:.16s;cursor:pointer}
.chip:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.panel .pf{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--n200);padding-top:14px}
.panel .pf .n{font-family:var(--display);font-weight:800;font-size:var(--fs-num);color:var(--navy);letter-spacing:-.035em}
.panel .pf .t{font-size:.84rem;color:var(--n500)}
.panel .more{margin-top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-deep);cursor:pointer;border-bottom:1px solid var(--orange);align-self:flex-start}
.stepdots{display:flex;gap:6px;margin-bottom:22px}
.stepdots i{width:26px;height:3px;background:var(--n300);transition:.25s}
.stepdots i.on{background:var(--orange)}

/* ===== cards ===== */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--n200);padding:26px;border-radius:var(--r)}
/* ===== BOOKING PAGE ===== */
/* THE FRAME'S HEIGHT IS ONE NUMBER. Microsoft Bookings sizes itself and cannot tell this page how
   tall it is, because it is a different origin. So the frame is given a height tall enough for the
   tallest step of the flow, the details form, or Bookings grows a second scrollbar inside ours.
   Change --bookh and the frame changes at every width it is set for. */
:root{--bookh:1180px}
.bookcol{max-width:44em}
.bookcard{background:#fff;border:1px solid var(--n200);border-radius:var(--r);overflow:hidden}
.bookframe{height:var(--bookh);width:100%}
.bookframe iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:980px){:root{--bookh:1320px}}
@media(max-width:560px){:root{--bookh:1500px}}
.card.n{background:var(--n50)}
.hov{transition:.2s}
.hov:hover{border-color:var(--navy);box-shadow:0 22px 48px -36px rgba(13,36,64,.6);transform:translateY(-3px)}
.bg-navy .card,.bg-ink .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#C9D9E7}

/* ===== proof strip ===== */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16)}
.stat{background:var(--navy-deep);padding:32px 22px}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.5rem);color:var(--orange);letter-spacing:-.035em;line-height:1}
.stat .l{font-size:.84rem;color:#9FB4CA;margin-top:9px;line-height:1.4}

/* ===== expert quote ===== */
.expert{display:grid;grid-template-columns:200px 1fr;gap:38px;align-items:center}
.expertband{border-top:1px solid var(--n200);border-bottom:1px solid var(--n200)}
.expert-sm{padding-top:52px;padding-bottom:52px}
.expert-sm .expert{grid-template-columns:132px 1fr;gap:34px}
.expert-sm .expert blockquote{line-height:1.38}
.expert-sm .expert cite{font-size:.72rem;margin-top:16px}
/* the quote keeps the page gutter, so its first column starts on the same line as every
   other block; the orange rule sits in the gutter rather than pushing the content across. */
.expertband .expert{position:relative}
.expertband .expert::before{content:'';position:absolute;left:7px;top:2px;bottom:2px;width:3px;background:var(--orange)}
@media(max-width:820px){.expertband .expert::before{left:4px}}
.expert .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.expert .ph[data-ini]::after{content:attr(data-ini);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.expert .ph{position:relative;overflow:hidden;aspect-ratio:1;background:var(--n100);border:1px solid var(--n200);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--navy)}
.bg-ink .expert .ph,.bg-navy .expert .ph{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--orange)}
.expert blockquote{font-family:var(--display);font-weight:600;font-size:var(--fs-title);line-height:1.28;
  color:var(--navy);letter-spacing:-.022em}
.bg-ink .expert blockquote,.bg-navy .expert blockquote{color:#fff}
.expert cite{display:block;font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n500);margin-top:20px}
.bg-ink .expert cite,.bg-navy .expert cite{color:#8FA8BF}
.quote{border-left:3px solid var(--orange);padding:4px 0 4px 22px}
.quote p{font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--navy);line-height:1.4;letter-spacing:-.015em}
.quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);margin-top:12px}
.bg-ink .quote p,.bg-navy .quote p{color:#fff}
.bg-ink .quote cite,.bg-navy .quote cite{color:#8FA8BF}

/* ===== data chart ===== */
.wkbars{display:grid;gap:12px;margin-top:18px}
.wkrow{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center}
.wk-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.wkbar{display:flex;height:36px;overflow:hidden}
.wkbar i{display:flex;align-items:center;justify-content:center;font-style:normal;transition:width .6s ease}
.wkbar i b{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:#fff;white-space:nowrap}
.wfall{display:grid;gap:10px;margin-top:18px}
.wfrow{display:grid;grid-template-columns:96px 1fr 44px;gap:12px;align-items:center}
.wf-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--n500)}
.wftrack{position:relative;height:26px;background:var(--n100);border-bottom:1px solid var(--n200)}
.wftrack i{position:absolute;top:0;bottom:0;background:var(--navy);opacity:.42;display:block}
.wftrack i.wf-on{background:var(--orange);opacity:1}
.wftrack i.wf-sum{background:var(--navy);opacity:1}
.wf-v{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--navy);text-align:right}
.wftrack i.wf-base{background:var(--navy);opacity:1}
.wfempty .wf-ghost{background:repeating-linear-gradient(135deg,rgba(249,137,107,.22) 0 6px,transparent 6px 12px);
  border:1px dashed var(--orange);opacity:1}
.wfempty .wf-outline{background:none}
.qhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.qhead .klabel{margin-bottom:0}
.qleg{display:flex;gap:14px;flex-wrap:wrap}
.qleg span{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--n500);white-space:nowrap}
.qleg i{width:10px;height:10px;display:block;background:var(--navy);opacity:.34}
.qleg i.qon{background:var(--orange);opacity:1}
.qplot{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:7px;align-items:end;
  height:124px;margin-top:26px;border-bottom:1px solid var(--n300)}
.qplot>i{display:block;position:relative;background:var(--navy);opacity:.34}
.qplot>i.qon{background:var(--orange);opacity:1}
.qplot>i b{position:absolute;left:-4px;right:-4px;top:-16px;text-align:center;font-weight:400;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.01em;color:var(--n500)}
.qplot>i.qon b{color:var(--orange-deep)}
.qsplit{position:absolute;left:50%;top:-22px;bottom:0;border-left:1px dashed var(--navy);opacity:.6;pointer-events:none}
.qaxis{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:7px}
.qaxis span{font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;color:var(--n500);text-align:center}
.qsum{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;margin-top:18px;
  padding-top:15px;border-top:1px solid var(--n200)}
.qsum b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--navy);letter-spacing:-.022em}
.qsum span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n500);margin-top:5px;line-height:1.55}
.qsum .qup{text-align:center;padding:0 6px}
.qsum .qup b{color:var(--orange)}
.qsum .qup span{color:var(--orange-deep)}
.qsum .qaf{text-align:right}
.amap{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:20px;align-items:start;margin-top:26px}
.amap-h{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n500);margin-bottom:10px;display:block}
.amap-col{display:grid;gap:8px}
.amap-i{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--n200);border-left:3px solid var(--navy);padding:9px 12px}
.amap-i em{font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--n500)}
.amap-i b{font-weight:600;font-size:.84rem;color:var(--navy);letter-spacing:-.008em;line-height:1.35}
.amap-core{background:var(--navy);padding:26px 20px;text-align:center}
.amap-core strong{display:block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:1.2rem;letter-spacing:-.02em}
.amap-core span{display:block;color:rgba(255,255,255,.84);font-size:.85rem;margin-top:10px;line-height:1.5}
@media(max-width:860px){.amap{grid-template-columns:1fr}}
.ibrow{margin-top:20px}
.ib-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.ib-h span{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--n500)}
.ib-h b{font-family:var(--display);font-weight:800;font-size:var(--fs-body);color:var(--navy)}
.ibtrack{display:flex;height:32px;background:var(--n100)}
.ibtrack i{display:flex;align-items:center;justify-content:center;font-style:normal;min-width:0}
.ibtrack i b{font-family:var(--mono);font-size:.6rem;font-weight:400;color:#fff}
.ib1{background:var(--navy)}
.ib2{background:#2F5C86}
.ib3{background:#5C82A8}
.ib4{background:#9BB3CB}
.ibtrack i.ib4 b{color:var(--navy)}
.ibgap{background:repeating-linear-gradient(135deg,rgba(249,137,107,.32) 0 6px,transparent 6px 12px);
  border:1px dashed var(--orange)}
.ibtrack i.ibgap b{color:var(--orange-deep)}
.ibleg{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.ibleg span{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.ibleg i{width:11px;height:11px;display:block}
.vfig{margin:0;position:relative;background:var(--navy);border:1px solid var(--n200)}
.vfig img{display:block;width:100%;height:auto}
a.vfig{display:block;text-decoration:none;color:inherit}
a.vfig:hover .vplay{background:var(--orange)}
.vplay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;pointer-events:none}
.vplay::after{content:"";margin-left:5px;width:0;height:0;border-top:13px solid transparent;
  border-bottom:13px solid transparent;border-left:21px solid rgba(255,255,255,.95)}
.vfig figcaption{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--n500);background:#fff;padding:10px 12px;border-top:1px solid var(--n200);line-height:1.5}
@media(max-width:560px){.vplay{width:56px;height:56px}
  .vplay::after{border-top-width:10px;border-bottom-width:10px;border-left-width:16px}}
.steps2{max-width:64em}
.steps2 li{font-size:1.14rem;line-height:1.62;padding-left:26px;margin-bottom:4px}
.steps2 li::before{top:.74em;width:10px;height:2px}
.bg-ink .steps2 li,.bg-navy .steps2 li{color:#DCE7F1}
.ccchart{background:#fff;border:1px solid var(--n200);padding:24px 22px 20px}
.cctitle{margin:0 0 4px;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--navy);letter-spacing:-.01em}
.ccsub{margin:0 0 6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.ccdelta{position:relative;height:56px;margin-top:6px}
.ccdelta .ccbox{position:absolute;left:50%;top:0;transform:translateX(-50%);border:1px dashed var(--orange);
  padding:5px 12px;text-align:center;background:#fff;z-index:2}
.ccdelta .ccbox b{display:block;font-family:var(--display);font-weight:800;font-size:.92rem;color:var(--navy);line-height:1.35}
.ccdelta .ccarrow{position:absolute;left:25%;right:25%;top:17px;height:22px;border:1px solid var(--navy);
  border-bottom:none;border-top:1px solid var(--navy)}
.ccdelta .ccarrow::before,.ccdelta .ccarrow::after{content:"";position:absolute;bottom:-6px;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--navy)}
.ccdelta .ccarrow::before{left:-4px}
.ccdelta .ccarrow::after{right:-4px}
.ccbrackets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.ccbrackets div{border-top:1px solid var(--n300);border-left:1px solid var(--n300);border-right:1px solid var(--n300);
  padding:7px 6px 8px;text-align:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--navy);line-height:1.6}
.ccbrackets b{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:0}
.ccplot{position:relative;display:grid;grid-template-columns:30px 1fr 34px;gap:6px;margin-top:30px}
.ccax{position:relative;height:200px}
.ccax span{position:absolute;right:0;transform:translateY(-50%);font-family:var(--mono);font-size:.55rem;color:var(--n500)}
.ccax.r span{left:0;right:auto}
.ccarea{position:relative;height:200px;border-bottom:1px solid var(--n300)}
.ccgrid{position:absolute;inset:0;pointer-events:none}
.ccgrid i{position:absolute;left:0;right:0;border-top:1px dashed var(--n200)}
.ccbars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr)}
.ccbar{position:relative;justify-self:center;width:62%;height:100%}
.ccbar i{position:absolute;left:0;right:0;display:block}
.ccarr{bottom:0;background:#5975B8}
.ccprj{background:#9DB1CF}
.ccbar .ccv{position:absolute;left:-10px;right:-10px;margin-bottom:3px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:.62rem;color:var(--navy)}
.ccsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ccsvg polyline{fill:none;stroke:var(--navy);stroke-width:3}
.ccsvg circle{fill:var(--navy)}
.wfx{background:#fff;border:1px solid var(--n200)}
.wfxhead{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:.78rem;
  padding:7px 14px;letter-spacing:-.01em}
.wfxbody{padding:14px 14px 12px}
.wfxt{margin:0 0 2px;font-family:var(--display);font-weight:600;font-size:.76rem;color:var(--navy)}
.wfxt span{display:block;font-family:var(--mono);font-weight:400;font-size:.52rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--n500);margin-top:2px}
.wfxplot{position:relative;display:grid;grid-template-columns:repeat(7,1fr);height:104px;
  border-bottom:1px solid var(--n300);margin-top:16px}
.wfxc{position:relative;height:100%}
.wfxc i{position:absolute;left:19%;right:19%;display:block}
.wfxseg{background:#9DB1CF}
.wfxtot{background:#5975B8}
.wfxdif{background:#C30C3E;left:31%!important;right:31%!important}
.wfxc b{position:absolute;left:50%;text-align:center;font-family:var(--mono);
  font-size:.56rem;font-weight:700;line-height:1.5;white-space:nowrap}
.wfxn{color:var(--navy);margin-bottom:3px;transform:translateX(-50%)}
.wfxb{background:var(--navy);color:#fff;padding:1px 9px;transform:translate(-50%,50%)}
.wfxd{background:#fff;border:1px solid #C30C3E;color:#C30C3E;padding:0 7px;transform:translate(-50%,50%)}
.wfxax{display:grid;grid-template-columns:repeat(7,1fr);margin-top:6px}
.wfxax span{text-align:center;font-family:var(--mono);font-size:.5rem;letter-spacing:.03em;color:var(--n500)}
.wfxbody .wfxt+.wfxplot+.wfxax+.wfxt{margin-top:22px}
@media(max-width:560px){.wfxax span{font-size:.42rem}.wfxc b{font-size:.5rem}}
.pflow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:22px}
.pflow::before{content:"";position:absolute;left:19px;right:19px;top:19px;height:1px;background:rgba(249,137,107,.5)}
.pstep{position:relative;padding-right:18px}
.pstep em{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--navy-deep);border:1px solid var(--orange);color:var(--orange);
  font-family:var(--mono);font-style:normal;font-size:.62rem;z-index:1}
.pstep p{margin:15px 0 0;font-size:.86rem;color:#C9D9E7;line-height:1.55}
@media(max-width:860px){.pflow{grid-template-columns:1fr 1fr;gap:26px 0}.pflow::before{display:none}}
@media(max-width:520px){.pflow{grid-template-columns:1fr}}
.ccpt{position:absolute;width:9px;height:9px;background:var(--navy);border-radius:50%;
  transform:translate(-50%,-50%);z-index:4}
.ccpt b{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-family:var(--mono);
  font-size:.55rem;font-weight:700;color:var(--navy);background:#fff;padding:0 3px;white-space:nowrap}
.ccmark{position:absolute;left:37.5%;top:-8px;bottom:0;border-left:1px dashed var(--orange);z-index:3}
.ccmarkl{position:absolute;left:37.5%;top:-26px;transform:translateX(-50%);background:#fff;border:1px dashed var(--n300);
  padding:3px 7px;font-family:var(--mono);font-size:.52rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);white-space:nowrap;z-index:3}
.ccx{display:grid;grid-template-columns:repeat(8,1fr);margin:6px 40px 0 36px}
.ccx span{text-align:center;font-family:var(--mono);font-size:.56rem;font-weight:700;color:var(--navy)}
.ccyears{display:grid;grid-template-columns:2fr 4fr 2fr;margin:4px 40px 0 36px;border-top:1px solid var(--n200)}
.ccyears span{text-align:center;padding-top:5px;font-family:var(--display);font-weight:800;font-size:.72rem;color:var(--n500)}
.ccyears span+span{border-left:1px solid var(--n200)}
.ccbody{display:grid;grid-template-columns:1fr 128px;gap:16px;align-items:stretch}
.ccright{display:flex;flex-direction:column;justify-content:space-between;padding-top:64px;padding-bottom:28px}
@media(max-width:700px){.ccbody{grid-template-columns:1fr}
  .ccright{padding:0;flex-direction:column-reverse;gap:12px}}
.cclegend{display:flex;flex-direction:column;gap:9px}
.cclegend span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.54rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--n500);white-space:nowrap}
.cclegend i{width:11px;height:11px;display:block}
.cclegend i.ln{height:3px;width:16px;background:var(--navy)}
.ccroi{position:relative;background:#FDE7DE;padding:12px 12px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:.72rem;line-height:1.45;color:var(--navy)}
.ccroi::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:0;height:0;
  border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:9px solid #FDE7DE}
@media(max-width:620px){.ccbar .ccv{font-size:.52rem}.ccmarkl{font-size:.46rem}}
.mwf{display:grid;gap:9px;margin-top:20px}
.mwfrow{display:grid;grid-template-columns:136px 1fr 46px;gap:12px;align-items:center}
.mwf-l{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);line-height:1.4}
.mwftrack{position:relative;height:26px;background:var(--n100);border-bottom:1px solid var(--n200)}
.mwftrack i{position:absolute;top:0;bottom:0;display:block;background:var(--navy)}
.mwftrack i.st{background:var(--orange);border-left:1px solid #fff}
.mwf-v{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--navy);text-align:right}
.mwfrow.step .mwf-l{color:var(--navy);font-weight:600}
.mwfrow.tot{margin-top:5px;padding-top:11px;border-top:1px solid var(--n200)}
.mwfrow.tot .mwf-v{color:var(--orange)}
.mwftrack i.lt{background:var(--orange);opacity:.34;border:1px dashed var(--orange)}
.mwf.wide .mwfrow{grid-template-columns:152px 1fr 60px}
.mwf-v.lt{font-family:var(--mono);font-size:.54rem;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:var(--n500);text-align:right;white-space:nowrap}
.mwfrow.tot .mwftrack i{background:var(--navy)}
.mwfdelta{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px}
.mwfdelta b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--orange);letter-spacing:-.022em}
.mwfdelta span{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-deep)}
@media(max-width:520px){.mwfrow{grid-template-columns:104px 1fr 40px;gap:9px}.mwf-l{font-size:.55rem}}
@media(max-width:560px){.qsum{grid-template-columns:1fr;gap:10px}
  .qsum .qup,.qsum .qaf{text-align:left;padding:0}
  .qsum .qup{border-top:1px solid var(--n200);border-bottom:1px solid var(--n200);padding:10px 0}}
.wf-v.ts{color:var(--orange-deep)}
.wf-v.on{color:var(--orange)}
.wftot{margin-top:4px;padding-top:10px;border-top:1px solid var(--n200)}
.wkbar{position:relative}
.wkgap{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.8);
  border-right:1px dashed rgba(255,255,255,.8);pointer-events:none}
.wkarrow{position:relative;height:22px}
.wka-line{position:absolute;top:9px;height:1px;background:var(--orange)}
.wka-line::before,.wka-line::after{content:"";position:absolute;top:-3px;width:0;height:0;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.wka-line::before{left:0;border-right:5px solid var(--orange)}
.wka-line::after{right:0;border-left:5px solid var(--orange)}
.wkarrow b{position:absolute;top:1px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
@media(max-width:560px){.wkarrow b{font-size:.56rem}}
.wklegend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.wklegend span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--n700)}
.wklegend i{width:12px;height:12px;flex:0 0 auto;display:block}
.wk-a{background:var(--error)}
.wk-s{background:var(--navy)}
.dchart{background:#fff;border:1px solid var(--n200);padding:26px}
.dbars{display:flex;align-items:flex-end;gap:3px;height:180px;border-bottom:1px solid var(--n300)}
.dbar{flex:1;background:var(--info);opacity:.45;position:relative;transition:height .8s cubic-bezier(.22,.9,.3,1)}
.dbar.hi{background:var(--navy);opacity:1}
.dbar.lo{background:var(--error);opacity:1}
.dbar .tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--navy-deep);color:#fff;
  font-family:var(--mono);font-size:.68rem;padding:5px 8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.14s;z-index:5}
.dbar:hover .tip{opacity:1}
.daxis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--n500);margin-top:9px}
.dnote{display:flex;gap:10px;margin-top:16px;padding-top:15px;border-top:1px solid var(--n200);font-size:var(--fs-body);color:var(--n700)}
.dnote i{width:10px;height:10px;background:var(--error);flex:0 0 auto;margin-top:7px}

/* ===== method ===== */
.method{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:34px}
.mstep{padding:22px 20px;border-left:1px solid rgba(255,255,255,.18)}
.mstep:first-child{border-left:none;padding-left:0}
.mstep .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--orange);display:block;margin-bottom:11px}
.mstep h4{color:#fff;margin-bottom:6px}
.mstep p{font-size:var(--fs-body);color:#9FB4CA}

/* ===== people, problems, faq ===== */
.person .ph{position:relative;overflow:hidden;aspect-ratio:1;background:var(--n100);border:1px solid var(--n200);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--navy);margin-bottom:12px;transition:.2s}
.person:hover .ph{border-color:var(--orange)}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:.25s}
.person:hover .ph img{filter:grayscale(0)}
.person .ph[data-ini]::after{content:attr(data-ini);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mv .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);
  display:block;margin-bottom:10px}
.mv .big{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.35;color:var(--navy);letter-spacing:-.02em;
  border-left:2px solid var(--n300);padding-left:20px}
/* ===== THE TEAM CAROUSEL ===== */
/* The row of six became a carousel of three. The card width is set from the carousel's own width by
   JS (--pcw) so three, two or one fit with the same 16px gap as the viewport narrows, and the arrows
   are the ones from the quotes on Results, class for class. The grid rules below are kept because
   .team-grid is what the cards used to sit in; nothing uses that class now. */
.teamcar{position:relative;overflow:hidden;margin-top:26px}
.teamrow{display:flex;gap:16px;width:max-content;align-items:stretch}
.teamrow.stepped{will-change:transform}
.teamrow .person2{flex:0 0 var(--pcw,360px);display:flex;flex-direction:column;grid-row:auto}
.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
/* ONE ROW OF SIX, with every description starting on the same line. The cards share the grid's
   rows, so photo, name, role and text each line up across all six. One role, Visiting Power BI
   Developer, needs two lines at this card width, so the role row is two lines tall for everyone;
   the line-height and the margins around it are pulled in tight so that costs as little space as
   possible. Shortening that one title to Power BI Developer would take the row to one line and
   close the last of it. */
.person2{background:#fff;border:1px solid var(--n200);padding:14px;transition:.16s}
/* EVERY DESCRIPTION STARTS ON THE SAME LINE, on request. The roles are not the same length:
   Visiting Power BI Developer takes two lines where Fractional CCO takes one, which pushed that
   card&rsquo;s paragraph down and left the row ragged. The cards now share the grid&rsquo;s rows, so
   photo, name, role and text each line up across all six whatever the wrapping. A browser without
   subgrid falls back to the reserved two lines below, which gets the same result for these six. */
.person2{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;row-gap:0}
.person2 b{line-height:1.22}
.person2 small{margin-top:4px}
.person2 .sm{margin-top:8px}
.person2 .pphoto{margin-bottom:11px}
@supports(grid-template-rows:subgrid){
  .team-grid{grid-auto-rows:auto}
  .person2{grid-row:span 4;grid-template-rows:subgrid}
}
.person2:hover{border-color:var(--orange)}
.pphoto{aspect-ratio:1;background:var(--n100);margin-bottom:14px;overflow:hidden;position:relative}
.pphoto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:.25s}
.person2:hover .pphoto img{filter:grayscale(0)}
.pphoto.fallback::after{content:attr(data-ini);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--n500)}
.person2 b{font-family:var(--display);color:var(--navy);display:block;font-size:var(--fs-body)}
.person2 small{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:0;line-height:1.22}
.person2 .pers{color:var(--navy);font-style:italic;margin-top:8px}
.person2 .lnk{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n500);border-bottom:1px solid var(--n300);cursor:pointer}
.person2 .lnk:hover{color:var(--navy);border-bottom-color:var(--orange)}

/* THE ROLE KEEPS ITS ORIGINAL SIZE, TRACKING AND COLOUR, on request. At six across that means
   "Visiting Power BI Developer" takes two lines, and because the six descriptions start level the
   role row is two lines tall for all of them; about 13px sits under the five short titles. The
   padding is 12px rather than 14 to give the label as much width as the card allows. */
@media(min-width:1181px){.person2{padding:12px}}
@media(max-width:1180px){.team-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.mv .big{font-size:1.15rem}}
/* the five team cards held names and roles at .9rem before the type pass; at the one body size a
   two-column grid no longer fits a phone without the page scrolling sideways, so below 520px they
   stack. */
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
.person b{font-family:var(--display);color:var(--navy);display:block;font-size:1rem}
.person small{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.probs{border:1px solid var(--n200);background:#fff}
.prow{padding:22px 26px;border-bottom:1px solid var(--n200)}
.prow:last-child{border-bottom:none}
.prow b{font-family:var(--display);color:var(--navy);font-size:var(--fs-body);display:block;margin-bottom:3px}
.prow span{color:var(--n700);font-size:var(--fs-body)}
details{border-bottom:1px solid var(--n200);padding:18px 0}
details summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--navy);font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';color:var(--orange-deep);font-weight:700;font-size:1.3rem;line-height:1}
details[open] summary::after{content:'–'}
details p{margin-top:12px;font-size:var(--fs-body);color:var(--n700)}
.bg-ink details,.bg-navy details{border-bottom-color:rgba(255,255,255,.18)}
.bg-ink details summary,.bg-navy details summary{color:#fff}
.bg-ink details summary::after,.bg-navy details summary::after{color:var(--orange)}
.bg-ink details p,.bg-navy details p{color:#B9CCDD}
.scan-cards{display:grid;gap:12px}
.scan-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);padding:20px 22px;display:flex;
  align-items:center;gap:16px;transition:.2s;cursor:pointer}
.scan-card:hover{background:rgba(255,255,255,.12);border-color:var(--orange)}
.scan-card .k{font-family:var(--display);font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:-.02em}
.scan-card .d{font-size:.85rem;color:#9FB4CA;margin-top:2px}
.scan-card.all{background:rgba(249,137,107,.14);border-color:var(--orange)}
.scanpanel{background:#fff;padding:28px}
.sp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--n200);padding-bottom:14px;margin-bottom:18px}
.sp-head b{font-family:var(--display);font-size:1.1rem;color:var(--navy)}
.sp-head span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.sp-main{display:block;width:100%;text-align:left;background:var(--orange);border:none;cursor:pointer;padding:18px 20px;
  font-family:var(--body);transition:.15s}
.sp-main:hover{background:var(--orange-deep)}
.sp-main .t{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--navy-deep);letter-spacing:-.02em}
.sp-main .d{display:block;font-size:var(--fs-body);color:rgba(13,36,64,.72);margin-top:3px}
.sp-or{font-size:var(--fs-body);color:var(--n500);margin:20px 0 10px}
.sp-one{display:flex;gap:8px;flex-wrap:wrap}
.sp-one button{flex:1;min-width:110px;border:1px solid var(--n300);background:#fff;padding:11px 14px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--navy);transition:.15s;border-radius:var(--r)}
.sp-one button:hover{border-color:var(--orange);color:var(--orange-deep)}
.nextstep{border-top:1px solid var(--n300);margin-top:26px;padding-top:20px}
.nextstep .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);
  display:block;margin-bottom:8px}
.nextstep .actions{margin-top:14px}
.inline-link.light{color:#fff;border-bottom-color:rgba(255,255,255,.45);font-weight:500}
.inline-link.light:hover{border-bottom-color:var(--orange)}
.learnmore{font-size:var(--fs-body);color:#9FB4CA;margin-top:6px;line-height:1.9}
.learnmore a{color:#fff;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.learnmore a:hover{border-bottom-color:var(--orange)}
.learnmore span{padding:0 8px;color:rgba(255,255,255,.35)}
.inline-link{color:var(--orange-deep);cursor:pointer;border-bottom:1px solid var(--orange);font-weight:600}
.ind{border-top:1px solid var(--n200);padding:30px 0;display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:start}
.ind:last-child{border-bottom:1px solid var(--n200)}
.ind h3{font-size:var(--fs-body);margin-bottom:8px}
.ind h3.indlink{cursor:pointer;transition:.15s}
.ind h3.indlink:hover{color:var(--orange-deep)}
.social{margin-top:20px;border-top:1px solid var(--n200);padding-top:16px}
.social .k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n500);margin-bottom:10px}
.social a{display:inline-block;margin-right:10px;border:1px solid var(--n300);padding:7px 14px;font-size:var(--fs-body);
  color:var(--navy);transition:.15s;border-radius:var(--r)}
.social a:hover{border-color:var(--orange);color:var(--orange-deep)}
.newsbar{background:var(--navy);color:#D6E2EE;padding:22px 26px;margin-top:34px;display:flex;gap:26px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.newsbar .nb-txt b{font-family:var(--display);color:#fff;font-size:var(--fs-body);display:block;margin-bottom:3px}
.newsbar .nb-txt span{font-size:var(--fs-body);display:block;max-width:56ch}
.nb-form{display:flex;gap:8px;flex-wrap:wrap}
.nb-form input{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;padding:11px 14px;
  font-family:var(--body);font-size:.95rem;min-width:230px;outline:none;border-radius:var(--r)}
.nb-form input::placeholder{color:#8FA7BE}
.nb-form input:focus{border-color:var(--orange)}
.nb-done{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0}
@media(max-width:680px){.newsbar{flex-direction:column;align-items:stretch}.nb-form input{min-width:0;flex:1}}
.fixes{display:grid;gap:0;border-top:1px solid var(--n200);max-width:62em}
.fixcompact{padding-top:34px;padding-bottom:34px}
.fixcompact .fixes{grid-template-columns:1fr 1fr;column-gap:30px;max-width:none;border-top:none}
@media(max-width:860px){.fixcompact .fixes{grid-template-columns:1fr}}
.fixcompact .fixes .fixrow{border-top:1px solid var(--n200);border-bottom:none}
/* a closing rule under the last row of each column, so every row is framed top and bottom by a line
   that runs the full width of the row */
.fixcompact .fixes .fixrow:nth-last-child(-n+2){border-bottom:1px solid var(--n200)}
@media(max-width:860px){.fixcompact .fixes .fixrow:nth-last-child(-n+2){border-bottom:none}
  .fixcompact .fixes .fixrow:last-child{border-bottom:1px solid var(--n200)}}
.fixcompact .fixes .fixrow summary{padding:29px 10px 29px 12px}
.fixcompact .fixrow .q b{font-size:var(--fs-body);line-height:1.3}
.fixcompact .fixrow .q .sub{font-size:var(--fs-body);margin-top:0}
.fixcompact .fixbody{padding:2px 12px 12px}
.fixcompact .fixbody p{font-size:var(--fs-body);margin-bottom:8px}
.fixcompact .fixbody .chips{margin-bottom:0}
.fixrow{border-bottom:1px solid var(--n200);padding:0}
.fixes .fixrow summary{padding:33px 14px 33px 16px}
.fixrow summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 14px 13px 16px;transition:background .15s;border-left:2px solid transparent}
.fixrow summary:hover{background:var(--n50);border-left-color:var(--n300)}
.fixrow[open] summary{background:var(--n50);border-left-color:var(--orange)}
.fixrow summary::-webkit-details-marker{display:none}
.fixrow summary::after{content:none!important;display:none!important}
.fixrow{padding:0}
.fixrow summary .mark{margin-left:auto}
.fixrow summary:hover .q b{color:var(--orange-deep)}
/* the sentence span was picking up the generic .q rule further down this sheet, which gave it 20px of
   padding and a bottom rule the width of the TEXT rather than the width of the row. That is the stray
   short line under each sentence. The padding moves to the summary so the rows keep their height. */
.fixrow .q{display:block;padding:0;border-bottom:none}
.fixrow .q b{font-family:var(--display);font-weight:600;color:var(--navy);font-size:var(--fs-body);letter-spacing:-.012em;display:block;line-height:1.35}
.fixrow .q .sub{display:block;color:var(--n500);font-size:var(--fs-body);margin-top:2px}
.fixrow .mark{flex:0 0 20px;height:20px;border:1px solid var(--n300);position:relative;transition:.15s;border-radius:1px}
.fixrow .mark::before,.fixrow .mark::after{content:'';position:absolute;background:var(--navy);transition:.2s}
/* the two bars are centred with a transform rather than with hand-counted offsets. The box is
   border-box, so its 20px includes the 1px borders and the bars were resolving against an 18px
   padding box: the crossbars each missed the centre by a pixel, which is the crooked plus. */
.fixrow .mark::before{left:4px;right:4px;top:50%;height:2px;transform:translateY(-50%)}
.fixrow .mark::after{top:4px;bottom:4px;left:50%;width:2px;transform:translateX(-50%)}
.fixrow[open] .mark{background:var(--orange);border-color:var(--orange)}
.fixrow[open] .mark::after{transform:translateX(-50%) scaleY(0)}
.fixrow[open] .q b{color:var(--orange-deep)}
.fixbody{padding:2px 16px 20px;max-width:62em;background:var(--n50);border-left:2px solid var(--orange)}
.fixbody p{color:var(--n700);font-size:.96rem;line-height:1.58;margin-bottom:12px}
.fixbody .k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n500);margin-bottom:6px}
.fixbody .chips{margin-bottom:0}
.contact-sec .cl-left{padding-top:28px}
/* THE LINE ABOVE THE FORM IS BLUE AND BOLD, on your comment. It is one class used by the form on every
   page that carries it, so this is the same everywhere the form appears. The brand navy on the white
   form card is 10.9:1. */
.formlead{margin:0 0 18px;font-size:var(--fs-body);line-height:1.55;color:var(--navy);font-weight:700}
/* Contact page only: the closing block is the form, nothing beside it */
#page-contact .contact-sec .cl-left{display:none}
#page-contact .contact-sec .wrap{display:block}
#page-contact .contact-sec .contact-form{padding:34px}
@media(max-width:860px){.contact-sec .cl-left{padding-top:0}}
.cl-faq{border-bottom:1px solid var(--n300);padding-bottom:8px;margin-bottom:28px}
.cl-faq h2{margin-bottom:6px}
.cl-faq details{border-bottom:1px solid var(--n200)}
.cl-faq details:last-of-type{border-bottom:none}
.cl-faq>div{margin-top:6px!important}
.cl-details{display:grid;grid-template-columns:1fr;gap:14px;border-top:1px solid var(--n300);margin-top:26px;padding-top:20px}
.cl-details span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:6px}
.cl-details b{font-family:var(--body);font-weight:400;font-size:var(--fs-body);color:var(--n700);line-height:1.6}
.cl-details a{color:var(--navy);border-bottom:1px solid var(--n300)}
.cl-details a:hover{border-bottom-color:var(--orange)}
.brief{display:grid;gap:12px;margin-top:14px}
.brief>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-bottom:1px solid var(--n200);padding-bottom:10px}
.brief>div:last-child{border-bottom:none;padding-bottom:0}
.brief span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500)}
.brief b{font-family:var(--display);color:var(--navy);font-size:.98rem;text-align:right}
.bg-navy .chip,.bg-ink .chip{border-color:rgba(255,255,255,.28);color:#fff}
.bg-navy .chip:hover,.bg-ink .chip:hover{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.crumb .cl{cursor:pointer;border-bottom:1px solid var(--n300)}
.crumb .cl:hover{color:var(--navy);border-bottom-color:var(--orange)}
.ifilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;border-bottom:1px solid var(--n200);padding-bottom:16px}
.ifilter button{border:1px solid var(--n300);background:#fff;padding:8px 15px;font-family:var(--body);font-size:.9rem;
  color:var(--n700);cursor:pointer;border-radius:var(--r);transition:.15s}
.ifilter button:hover{border-color:var(--navy);color:var(--navy)}
.ifilter button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* the All view runs as one grid so the last group continues the row above it */
#tab-ins.allview{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
#tab-ins.allview>.subbar{grid-column:1 / -1}
#tab-ins.allview .icat,#tab-ins.allview .igrid{display:contents}
@media(max-width:900px){#tab-ins.allview{grid-template-columns:1fr 1fr}}
@media(max-width:620px){#tab-ins.allview{grid-template-columns:1fr}}

.icard{background:#fff;border:1px solid var(--n200);padding:0 0 18px;display:block;transition:.16s;overflow:hidden}
.icard:hover{border-color:var(--orange)}
.icard .klabel{padding:0 18px;display:block;margin-top:16px}
.icard h4{padding:0 18px;margin:6px 0 0;font-size:1.05rem;line-height:1.3}
.icard p{padding:0 18px;margin-top:8px}
.icard .ithumb{display:block;position:relative;aspect-ratio:16/9;background:var(--navy-deep);overflow:hidden}
.icard .ithumb img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:.25s}
.icard:hover .ithumb img{opacity:1;transform:scale(1.03)}
.icard .ithumb .play2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.icard .ithumb .play2::after{content:'';position:absolute;left:18px;top:14px;border:solid transparent;
  border-width:8px 0 8px 13px;border-left-color:var(--navy)}
.icard .ithumb.noimg{background:var(--navy)}
.icard ul.plan{list-style:none;padding:0 18px;margin:10px 0 0}
.icard ul.plan li{font-size:var(--fs-body);color:var(--n700);padding:7px 0;border-top:1px solid var(--n200);line-height:1.4}
.icard .tag{display:inline-block;margin:12px 18px 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n500);border:1px dashed var(--n300);padding:4px 8px}
.icard.hide,.vrow.hide{display:none}
.defbody .ytfacade{margin:18px 0}
.defbody .related{border-top:1px solid var(--n200);padding-top:14px}
.defbody .transcript{border-top:1px solid var(--n200);border-bottom:0;padding:14px 0 0;margin-top:6px}
.defbody .transcript summary{font-size:.95rem}
@media(max-width:900px){.igrid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.igrid{grid-template-columns:1fr}}
.legal h2{margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--n200)}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal p{font-size:var(--fs-body);color:var(--n700);margin-bottom:12px}
.legal p.intro{font-size:var(--fs-body);color:var(--navy);font-family:var(--display);font-weight:500;line-height:1.5}
.ltable{width:100%;border-collapse:collapse;margin:18px 0;font-size:var(--fs-body)}
.ltable th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n500);border-bottom:1px solid var(--n300);padding:0 12px 8px 0;font-weight:600}
.ltable td{border-bottom:1px solid var(--n200);padding:11px 12px 11px 0;vertical-align:top;color:var(--n700);line-height:1.5}
.ltable td b{color:var(--navy);font-family:var(--display)}
@media(max-width:680px){.ltable,.ltable tbody,.ltable tr,.ltable td{display:block;width:100%}.ltable thead{display:none}
  .ltable tr{border-bottom:1px solid var(--n300);padding-bottom:10px;margin-bottom:10px}.ltable td{border:none;padding:2px 0}}
.ind .lev{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);
  display:block;margin-bottom:10px}
.ind .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:5px}
.ind .b{margin-bottom:16px}
@media(max-width:900px){.ind{grid-template-columns:1fr;gap:18px}}
.scan-card .arrow{margin-left:auto;color:var(--orange);font-family:var(--mono);font-size:1.2rem}
.narrow article h2,.wrap.narrow > h2,.narrow > article > h2{margin-top:30px;margin-bottom:8px;line-height:1.25}
.narrow article p,.wrap.narrow > p{max-width:46em}
.fnd{border-top:1px solid var(--n200);padding:18px 0}
.fnd h3{font-size:var(--fs-body);margin-bottom:8px}
.fnd p{color:var(--n700);max-width:46em}
.methodbox{background:var(--n100);border-left:3px solid var(--navy);padding:18px 20px;margin:22px 0}
.methodbox .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);display:block;margin-bottom:6px}
.methodbox p{margin:0;font-size:var(--fs-body);color:var(--n700)}
.chartfig{margin:26px 0;border:1px solid var(--n200);padding:20px}
.chartfig figcaption{font-family:var(--display);font-weight:600;color:var(--navy);margin-bottom:14px}
.barrow{display:grid;grid-template-columns:130px 1fr 90px;gap:12px;align-items:center;margin-bottom:8px;font-size:.9rem}
.barrow .bt{background:var(--n200);height:14px;display:block}
.barrow .bt i{display:block;height:14px;background:var(--orange)}
.barrow .bv{font-family:var(--mono);font-size:.8rem;color:var(--navy);text-align:right}
.dtable{width:100%;border-collapse:collapse;margin:18px 0;font-size:var(--fs-body)}
.dtable caption{text-align:left;font-size:.8rem;color:var(--n500);margin-bottom:8px}
.dtable th,.dtable td{border-bottom:1px solid var(--n200);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.dtable thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);border-bottom:1px solid var(--n300)}
.dtable th[scope=row]{color:var(--navy);font-family:var(--display);font-weight:600;width:26%}
.pullq{border-left:3px solid var(--orange);padding:6px 0 6px 20px;margin:18px 0}
.pullq p{font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--navy);line-height:1.45;margin:0}
.pullq cite{display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);margin-top:10px}
.glist{list-style:none;display:grid;gap:0}
.glist li{border-top:1px solid var(--n200);padding:14px 0}
.glist li a{font-family:var(--display);font-weight:600;color:var(--navy);font-size:1.05rem;display:block}
.glist li a:hover{color:var(--orange-deep)}
.glist li span{display:block;color:var(--n500);font-size:.9rem;margin-top:4px}
.knows{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.knows li{border:1px solid var(--n300);padding:5px 11px;font-size:.86rem;color:var(--navy);border-radius:var(--r)}
.ytfacade{position:relative;aspect-ratio:16/9;background:var(--navy-deep);overflow:hidden;cursor:pointer;margin:20px 0}
.ytfacade img{width:100%;height:100%;object-fit:cover;opacity:.85}
.ytfacade button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  border:none;background:rgba(255,255,255,.94);font-size:1.5rem;color:var(--navy);cursor:pointer}
.ytfacade iframe{width:100%;height:100%;border:0;display:block}
/* THE VIDEO TILES ARE REAL LINKS NOW, on request: each one is an <a> to youtube.com/watch, opening in a
   new tab, so a tile can be right-clicked, middle-clicked, followed by a crawler and used when the embed is
   blocked. The old div-plus-button facade had no href at all. The button rules above stay for the facades
   elsewhere on the site; loadYT() is left in place and simply has nothing calling it on this page. */
a.ytfacade{display:block;text-decoration:none;color:inherit}
.ytfacade .ytplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  color:var(--navy);transition:background .16s,transform .16s}
a.ytfacade:hover .ytplay{background:var(--orange);color:#fff;
  transform:translate(-50%,-50%) scale(1.06)}
a.ytfacade:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.transcript{border-top:1px solid var(--n200);padding-top:14px}
.transcript summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--navy)}
.transcript .tbody{padding-top:12px;color:var(--n700);font-size:.95rem;max-width:46em}
.crumbnav{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);
  padding:14px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbnav a{color:var(--n500);border-bottom:1px solid transparent}
.crumbnav a:hover{color:var(--navy);border-bottom-color:var(--orange)}
.crumbnav [aria-current]{color:var(--navy)}
h1.qh1{font-size:clamp(1.9rem,3.5vw,2.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;
  margin-top:0;max-width:17em}
h1.qh1+p.answer{font-size:var(--fs-body);margin-top:16px;max-width:46em}
h2.q{font-size:1.15rem;color:var(--navy);font-weight:600;margin-top:20px;line-height:1.35;max-width:38em}
p.answer{font-size:var(--fs-body);color:var(--n700);margin-top:10px;line-height:1.6}
/* INDUSTRY HEROES: with the opening paragraph gone, the question leads the text block at
   eyebrow scale. It stays an h2 so search and assistants still read it as the page's question,
   and the answer under it steps up one size because it is now the only paragraph in the hero. */
h2.q.qlead{font-family:var(--mono);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--navy);margin-top:24px;line-height:1.55;max-width:32em}
h2.q.qlead+p.answer{margin-top:12px;font-size:var(--fs-body);max-width:30em;color:var(--n700);font-weight:400}
h2.q.qlead+p.answer b,h2.q.qlead+p.answer strong{font-weight:400;color:inherit}
@media(max-width:560px){h2.q.qlead{letter-spacing:.08em}}
p.answer b{color:var(--navy)}
.meta-line{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;margin:14px 0 0;font-size:.86rem;color:var(--n500)}
.meta-line .klabel{margin:0}
.meta-line a{color:var(--navy);border-bottom:1px solid var(--n300)}
.meta-line a:hover{border-bottom-color:var(--orange)}
.related{border-top:1px solid var(--n200);margin-top:34px;padding-top:22px}
.related .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);
  display:block;margin-bottom:12px}
.related ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 24px}
.related li{padding:6px 0;border-bottom:1px solid var(--n200)}
.related a{color:var(--navy);font-size:.94rem}
.related a:hover{color:var(--orange-deep)}
.skiplink{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skiplink:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--orange-deep);outline-offset:2px}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);margin-bottom:18px}
.crumb a{color:var(--info);cursor:pointer}

/* ===== scan tool ===== */
.lockcard{margin-top:18px;background:var(--n100);border:1px dashed var(--n300);padding:24px;display:flex;gap:20px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.lockcard b{display:block;font-family:var(--display);color:var(--navy);font-size:1.1rem;margin:6px 0 6px}
.lockcard p{max-width:46ch;margin:0}

/* ===== quick scan (one question per screen) ===== */
.scanshell{max-width:680px;margin:0 auto}
/* the scan panel keeps its own light palette on the navy band */
.bg-ink .scanshell,.bg-ink .scanscreen{color:var(--n700)}
.bg-ink .scanscreen h2,.bg-ink .scanscreen h3,.bg-ink .scanscreen .scanh{color:var(--navy)}
.bg-ink .scanscreen .lede,.bg-ink .scanscreen .note{color:#5A6B7C}
.bg-ink .scanscreen .klabel,.bg-ink .scanscreen .scaneyebrow{color:var(--n500)}
.bg-ink .pickcard{color:var(--n700)}
#page-scan .contact-sec{background-color:#fff}
.rail{display:flex;gap:4px;margin-bottom:22px;height:3px}
.rail span{flex:1;background:var(--n200);transition:background .25s}
.rail span.done{background:var(--orange-deep)}   /* MARC: a question you have answered turns orange. The deep
   tone, not #F9896B: at 3px on the white scan card the light orange is 2.4:1, under the 3:1 minimum for a graphic. */
.rail span.now{background:var(--info)}
.rail.hidden{visibility:hidden}
.scanscreen{display:none;background:#fff;border:1px solid var(--n200);padding:34px 30px}
.scanscreen.on{display:block;animation:sin .28s ease both}
@keyframes sin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scaneyebrow{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--info);margin-bottom:18px}
.scanh{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.25;margin-bottom:20px}
.scap{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n500);margin-bottom:16px}
.lede{color:var(--n700);font-size:1rem}
/* ===== section landing pages: What we do, Industries, Insights =====
   One card per destination, in the card language the rest of the site already uses: white card, navy
   rule on top that turns orange on hover, display-font name at body size, one line of the page's own
   copy underneath. Nothing here is new content. */
.hubgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
@media(max-width:900px){.hubgrid{grid-template-columns:1fr}}
.hubgrid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1040px){.hubgrid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hubgrid.g5{grid-template-columns:1fr}}
.hubcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--n200);
  border-top:2px solid var(--navy);padding:24px 24px 22px;transition:border-color .16s,box-shadow .16s,transform .16s}
a.hubcard{color:inherit;text-decoration:none}
.hubcard:hover{border-top-color:var(--orange);box-shadow:0 16px 36px -24px rgba(13,36,64,.65);transform:translateY(-2px)}
.hubname{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);
  line-height:1.3;display:block;margin-bottom:8px}
a.hubname{border-bottom:1px solid transparent}
.hubcard:hover .hubname{color:var(--orange-deep)}
.hubcard p{font-size:var(--fs-body);color:var(--n700);line-height:1.55;margin:0}
.hubcard .chips{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--n200)}
.hubgo{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-deep)}
/* the menu opens on hover on a pointer device and on keyboard focus, because the label itself is now a
   link to the section page rather than a toggle */
@media (hover:hover) and (pointer:fine){.nav-item:hover>.mega{display:grid}}
.nav-item:focus-within>.mega{display:grid}
/* CLICKING A GROUP LABEL NAVIGATES, so the panel must not stay open behind the page it just loaded.
   After the click the pointer is still over the button and the button still holds focus, so both the
   :hover and the :focus-within rule above would keep drawing it. navGo sets .nohover, which beats both,
   and clears it on mouseleave so hovering back in opens the menu again as normal. */
.nav-item.nohover>.mega{display:none!important}
footer h4 a{color:#fff;border-bottom:1px solid transparent}
footer h4 a:hover{border-bottom-color:var(--orange)}
.pickgrid{display:grid;gap:10px}
.pickcard{border:1px solid var(--n300);background:#fff;padding:16px 18px;text-align:left;cursor:pointer;
  font-family:var(--body);transition:.15s;display:block;width:100%}
.pickcard:hover{border-color:var(--orange)}
.pickcard b{display:block;font-family:var(--display);font-size:var(--fs-body);color:var(--navy);margin-bottom:3px}
.pickcard span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.pickcard em{display:block;font-style:normal;font-size:var(--fs-body);color:var(--n700);margin-top:8px;line-height:1.45}
.opts{display:flex;flex-direction:column;gap:8px}
.optbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--body);font-size:var(--fs-body);
  color:var(--n900);background:#fff;border:1px solid var(--n300);padding:14px 16px;cursor:pointer;transition:.15s}
.optbtn:hover{border-color:var(--info);background:var(--n50)}
.optbtn.picked{border-color:var(--navy);background:var(--navy);color:#fff}
.optbtn .key{font-family:var(--mono);font-size:.72rem;border:1px solid var(--n300);min-width:22px;height:22px;
  display:grid;place-items:center;flex:none;color:var(--n500)}
.optbtn.picked .key{color:#fff;border-color:rgba(255,255,255,.5)}
.backlink{background:none;border:none;font-family:var(--body);font-size:.88rem;color:var(--n500);cursor:pointer;
  padding:10px 0 0;display:block}
.backlink:hover{color:var(--navy);text-decoration:underline}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
.fields select{width:100%;border:1px solid var(--n300);padding:13px 14px;font-family:var(--body);font-size:1rem;
  color:var(--navy);background:#fff;border-radius:var(--r)}
.consent.full{display:flex;gap:10px;align-items:flex-start}
.err{color:var(--error);font-size:.86rem;min-height:18px;margin:10px 0 4px}
.verdict{border:1px solid var(--navy);padding:22px;margin-bottom:22px;background:linear-gradient(180deg,#F6F9FC,#fff)}
.verdict.warn{border-color:var(--orange);background:linear-gradient(180deg,#FFF6F2,#fff)}
.verdict .cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--info);margin-bottom:8px}
.verdict.warn .cap{color:var(--orange-deep)}
.verdict .big{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--navy)}
.verdict .sub{font-size:var(--fs-body);color:var(--n700);margin-top:10px;line-height:1.55}
.scoreline{display:flex;align-items:baseline;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.scoreline b{font-family:var(--mono);font-weight:600;font-size:2.1rem;color:var(--navy);line-height:1}
.scoreline i{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--n500)}
.scoreline u{text-decoration:none;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--navy)}
.legend{display:flex;gap:18px;margin:0 0 14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n500)}
.legend em{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.swatch{width:11px;height:11px;display:inline-block}
.area{margin-bottom:16px}
.area .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.area .nm{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--navy)}
.area .val{font-family:var(--mono);font-size:.74rem;color:var(--n500);flex:none}
.abar{display:flex;height:12px;background:var(--n100);overflow:hidden}
.abar .have{background:var(--navy);width:0;transition:width .9s cubic-bezier(.22,.7,.2,1)}
.abar .gap{background:var(--orange);width:0;transition:width .9s cubic-bezier(.22,.7,.2,1)}
.sdivider{height:1px;background:var(--n200);margin:26px 0}
.scanscreen h3{font-size:var(--fs-body);margin-bottom:6px}
.h3sub{font-size:.86rem;color:var(--n500);margin-bottom:14px}
ol.gaps{list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:g;margin:0}
ol.gaps li{display:flex;gap:12px;font-size:.96rem;color:var(--n700)}
ol.gaps li::before{counter-increment:g;content:counter(g);font-family:var(--mono);font-size:.72rem;color:var(--orange-deep);
  border:1px solid var(--orange);min-width:20px;height:20px;display:grid;place-items:center;flex:none;margin-top:2px}
.scanscreen .note{font-size:.84rem;color:var(--n500);margin-top:18px;line-height:1.5}
@media(max-width:680px){.scanscreen{padding:24px 18px}.fields{grid-template-columns:1fr}}

.scanpick{background:#fff;border:1px solid var(--n200);padding:24px 30px;margin-bottom:18px;scroll-margin-top:110px}
.scanpick>.k{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1.05rem;display:block;margin-bottom:14px}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pick{border:1px solid var(--n300);background:#fff;padding:14px;text-align:left;cursor:pointer;font-family:var(--body);
  transition:.15s;border-radius:var(--r)}
.pick:hover{border-color:var(--navy)}
.pick b{font-family:var(--display);color:var(--navy);display:block;font-size:1rem;margin-bottom:3px}
.pick span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.pick.all{grid-column:1/-1;border-color:var(--orange)}
.pick.two{grid-column:span 3}
.pick.two em{display:block;font-style:normal;font-size:.9rem;color:var(--n700);margin-top:8px;line-height:1.45}
.qprog{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.qbar{flex:1;height:4px;background:var(--n200)}
.qbar i{display:block;height:4px;background:var(--orange);transition:width .3s}
.qprog span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.qdim{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);
  margin:22px 0 -6px;padding-top:14px;border-top:1px solid var(--n200)}
@media(max-width:680px){.pick.two{grid-column:1/-1}}
.pick.on{border-color:var(--orange);background:#FFF7F4}
.pick.on b{color:var(--orange-deep)}
@media(max-width:680px){.picks{grid-template-columns:1fr}}
.scanbox{background:#fff;border:1px solid var(--n200);padding:30px;scroll-margin-top:110px;display:none}
.scanbox.on{display:block}
.contact-form textarea{width:100%;border:1px solid var(--n300);padding:13px 14px;font-family:var(--body);font-size:1rem;
  color:var(--navy);outline:none;border-radius:var(--r);min-height:96px;resize:vertical}
.contact-form textarea:focus{border-color:var(--navy)}
.q{padding:20px 0;border-bottom:1px solid var(--n200)}
.q:last-of-type{border-bottom:none}
.q p{font-family:var(--display);font-weight:600;color:var(--navy);margin-bottom:12px;font-size:1.02rem}
.q p.micro{font-family:var(--mono);font-weight:400;color:var(--n500);font-size:.72rem;line-height:1.5}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:1px solid var(--n300);background:#fff;padding:9px 15px;font-family:var(--body);font-size:.9rem;cursor:pointer;
  color:var(--n700);border-radius:var(--r);transition:.14s}
.opt:hover{border-color:var(--navy);color:var(--navy)}
.opt[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
.result{display:none;margin-top:26px;scroll-margin-top:110px}
.result.show{display:block}
.meter{display:grid;grid-template-columns:190px 1fr 104px;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--n200)}
.meter:last-child{border-bottom:none}
.meter .ml{font-family:var(--display);font-weight:600;color:var(--navy);font-size:.96rem}
.mtrack{height:12px;background:var(--n200)}
.mfill{height:12px;background:var(--navy);transition:width .6s ease}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border:1px solid;white-space:nowrap}

/* ===== modals ===== */
.modal{position:fixed;inset:0;z-index:140;background:rgba(13,36,64,.6);backdrop-filter:blur(6px);display:none;
  align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.mbox{background:#fff;max-width:640px;width:100%;position:relative;box-shadow:0 40px 100px -40px rgba(0,0,0,.7);
  max-height:88vh;overflow:auto}
.mbox .x{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);border:1px solid var(--n300);width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;color:var(--navy);cursor:pointer;padding:0;z-index:6}
.mbox .x:hover{background:#fff;border-color:var(--navy)}
.mhead{background:var(--navy-deep);color:#C9D9E7;padding:30px 34px;position:relative;overflow:hidden}
.mhead .tex{opacity:.9}
.mbody{padding:30px 34px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--n500);margin-bottom:6px}
.field input{width:100%;border:1px solid var(--n300);padding:13px 14px;font-family:var(--body);font-size:1rem;color:var(--navy);outline:none;border-radius:var(--r)}
.field input:focus{border-color:var(--navy)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--n500);margin:14px 0 18px}
.consent input{margin-top:4px;flex:0 0 auto}
.err{color:var(--error);font-size:.84rem;margin-top:-6px;margin-bottom:10px;display:none}
.err.show{display:block}
.leadout{background:var(--n50);border:1px solid var(--n200);padding:18px;font-family:var(--mono);font-size:.76rem;color:var(--n700);word-break:break-all;line-height:1.7}

/* video card */
.vidcard{position:relative;aspect-ratio:16/9;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.vidcard .tex{opacity:.8}
.play{width:62px;height:62px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
  box-shadow:0 0 0 0 rgba(249,137,107,.55);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 20px rgba(249,137,107,0)}100%{box-shadow:0 0 0 0 rgba(249,137,107,0)}}
.play::after{content:'';border-left:16px solid #2A1005;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}

/* ===== assistant ===== */
/* ===== footer ===== */
.flogo{width:150px;height:auto;display:block}
footer{background:var(--navy);color:#9FB4CA;padding:58px 0 28px;font-size:.9rem;position:relative;overflow:hidden}
footer h4{color:#fff;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:500}
footer a{color:#C9D9E7;display:block;padding:3px 0;cursor:pointer}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;gap:24px}
.fbot{border-top:1px solid rgba(255,255,255,.16);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em}

.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:#fff;border-top:1px solid var(--n200);
  padding:10px 14px;gap:10px;box-shadow:0 -8px 26px -18px rgba(13,36,64,.6)}
.mobile-bar .btn{flex:1}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.page{display:none}
.page.on{display:block}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}


@media(max-width:1040px){
  .hero-grid,.scrolly{grid-template-columns:1fr;gap:38px}
  .sticky-col{position:static;margin-bottom:8px;order:-1}
  .scrolly{display:flex;flex-direction:column}
  .panel{min-height:auto;padding:32px 0}
  .g3,.g4,.g5,.trust-top{grid-template-columns:repeat(2,1fr)}
  .method{grid-template-columns:repeat(2,1fr)}
  .mstep{border-left:none;border-top:1px solid rgba(255,255,255,.18);padding-left:0}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .expert{grid-template-columns:1fr;gap:24px}
  .expert .ph{width:120px}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--n200);
    flex-direction:column;padding:16px 24px;gap:4px;align-items:stretch;max-height:80vh;overflow:auto}
  .nav-links.open{display:flex}
  .burger{display:block}
  .nav-tel,.nav .btn{display:none}
  .mega{position:static;transform:none;width:auto;display:grid;box-shadow:none;border:none;padding:8px 0 12px;grid-template-columns:1fr}
  /* the one-column menus shrink to their list on a desk; inside the burger menu they run full width
     like the others, so the fit-to-content rule is handed back here. */
  .mega.one{width:auto;max-width:none;padding:8px 0 12px}
  .nav-item>button{width:100%;justify-content:space-between}
  section{padding:44px 0}
}
@media(max-width:680px){
  body{padding-bottom:68px}   /* the body size is the one token now; it does not shrink on phones */
  .g2,.g3,.g4,.g5,.method,.trust-top{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .mobile-bar{display:flex}
  .meter{grid-template-columns:1fr;gap:6px}
  .yaxis,.plotarea{height:200px}
  .xaxis div{font-size:.55rem}
  .actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}}

/* ===== v5.5 ===== */
.deflist{border-top:1px solid var(--n200)}
.defrow{border-bottom:1px solid var(--n200);padding:0}
.defrow>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:6px 18px;
  align-items:baseline;padding:15px 14px 15px 16px;border-left:2px solid transparent;transition:background .15s}
.defrow>summary::-webkit-details-marker{display:none}
.defrow>summary::after{content:none!important;display:none!important}
.defrow>summary:hover{background:var(--n50);border-left-color:var(--n300)}
.defrow[open]>summary{background:var(--n50);border-left-color:var(--navy)}
.defrow .dt{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1.04rem;letter-spacing:-.015em}
.defrow .dd{grid-column:1;font-size:.9rem;color:var(--n500);line-height:1.5}
.defrow .dmore{grid-row:1;grid-column:2;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n500);white-space:nowrap}
.defrow .dmore::before{content:'More info'}
.defrow[open] .dmore::before{content:'Close'}
.defrow[open] .dd{display:none}
.defbody{padding:4px 16px 26px 18px;max-width:56em}
.defbody h3{font-size:var(--fs-body);color:var(--navy);margin-bottom:8px}
.defbody h4{font-size:.95rem;color:var(--navy);margin:18px 0 6px}
.defbody p{font-size:.96rem;color:var(--n700);line-height:1.6;margin-top:8px}
.defbody .answer{color:var(--n900)}
/* calmer quick-scan palette: navy + neutrals, orange only on the button */
.scaneyebrow{color:var(--n500)}
.rail span.now{background:var(--n300)}
.abar .gap{background:var(--n300)}
.qbar i{background:var(--orange-deep)}
.qdim{color:var(--n500)}
ol.gaps li::before{color:var(--navy);border-color:var(--n300)}
.verdict{background:var(--n50);border-color:var(--n300)}
.verdict.warn{background:var(--n50);border-color:var(--n300)}
.verdict .cap,.verdict.warn .cap{color:var(--n500)}
.pick.on{border-color:var(--navy);background:var(--n50)}
.pick.on b{color:var(--navy)}
.pick.all{border-color:var(--n300)}
.optbtn:hover{border-color:var(--navy);background:var(--n50)}
.area.gate .nm::after{color:var(--n500)}
.scan-card.all{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}

/* ===== v5.6 — real assets ===== */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.figs{grid-template-columns:1fr}}
.fig{margin:0;background:#fff;border:1px solid var(--n200)}
.fig.wide,.vidfig.wide{grid-column:1/-1}
.figbtn{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;line-height:0}
.figbtn img{width:100%;height:auto;display:block}
/* the Sales PULSE dashboard screenshot, on the blue band */
.pulsepractice{grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
/* this was an inline style, which no media query could override, so the two columns stayed side by side on a
   phone and squeezed the panel to about 180px */
@media(max-width:860px){.pulsepractice{grid-template-columns:1fr;gap:26px}}
.dashfig{margin:0}
.dashfig .figbtn{background:none;border:1px solid rgba(255,255,255,.22)}
.fig figcaption{font-size:.86rem;color:var(--n700);line-height:1.5;padding:12px 16px 14px;border-top:1px solid var(--n200)}
.fig figcaption b{color:var(--navy);font-family:var(--display)}
.vidfig{margin:0;position:relative;background:var(--navy);border:1px solid var(--n200)}
.vidfig img{width:100%;height:auto;display:block}
.vidfig .vplay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;
  background:rgba(249,137,107,.94);display:grid;place-items:center;pointer-events:none}
.vidfig .vplay::after{content:'';border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vidfig figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);
  background:#fff;padding:11px 16px;border-top:1px solid var(--n200)}
.lbox{position:fixed;inset:0;background:rgba(10,20,32,.9);z-index:400;display:none;place-items:center;padding:34px}
.lbox.open{display:grid}
.lbox img{max-width:min(1400px,96vw);max-height:90vh;width:auto;height:auto;background:#fff}
.lbox .x{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}

.vidfig .vplay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:rgba(249,137,107,.94);border:0;display:grid;place-items:center;cursor:pointer;padding:0;transition:.16s}
.vidfig .vplay:hover{background:var(--orange);transform:translate(-50%,-50%) scale(1.06)}
.vidfig .vplay::after{content:'';border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.ytframe{position:relative;padding-top:56.25%}
.ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.pvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.pvgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pvgrid{grid-template-columns:1fr}}
.pvcard{margin:0;background:#fff;border:1px solid var(--n200);overflow:hidden;transition:.16s;display:flex;flex-direction:column}
.pvcard:hover{border-color:var(--orange)}
.pvcard .vidfig{border:0;margin:0;aspect-ratio:16/9;overflow:hidden}
.pvcard .vidfig img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pvcard .vplay{width:46px;height:46px}
.pvcard .vplay::after{border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.pvcard figcaption{padding:13px 16px 15px;border-top:1px solid var(--n200);margin-top:auto}
.pvcard figcaption b{display:block;font-family:var(--display);font-size:.98rem;color:var(--navy);line-height:1.3}
.pvcard figcaption span{display:block;margin-top:6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n500)}
.pvcard figcaption a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}

.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--n200);margin-bottom:30px;flex-wrap:wrap}
.tabbar button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 20px;
  font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--n500);cursor:pointer;transition:.16s}
.tabbar button:hover{color:var(--navy)}
.tabbar button.on{color:var(--navy);border-bottom-color:var(--orange)}
.tabpane{display:none}
.tabpane.on{display:block}
.subbar{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
#tab-ins>.subbar{border-bottom:1px solid var(--n200);padding-bottom:14px;margin-bottom:26px}
.subbar button{background:#fff;border:1px solid var(--n300);padding:8px 16px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--n500);cursor:pointer;transition:.16s;border-radius:var(--r)}
.subbar button:hover{border-color:var(--navy);color:var(--navy)}
.subbar button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gate-in{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
.gate-in li{position:relative;padding-left:16px;margin-bottom:6px;font-size:.86rem;color:#B9CCDD;line-height:1.45}
.gate-in li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--orange)}
.soundlike{margin-top:30px;border:1px solid var(--n200);border-left:3px solid var(--orange);
  background:#fff;padding:20px 24px;max-width:60em}
.soundlike .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-deep);display:block;margin-bottom:12px}
.soundlike ul{margin:0;padding-left:18px;columns:2;column-gap:34px}
@media(max-width:800px){.soundlike ul{columns:1}}
.soundlike li{margin-bottom:8px;font-size:.95rem;line-height:1.5;break-inside:avoid}
.soundlike .sl-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--n200);
  font-family:var(--display);font-weight:600;color:var(--navy);font-size:.95rem}
.fourbox{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:960px){.fourbox{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fourbox{grid-template-columns:1fr}}
.fbx{background:#fff;border:1px solid var(--n200);border-top:2px solid var(--navy);padding:18px 20px}
/* these three were mono 10.5px in orange, which is the least readable combination on the page */
/* these three were mono 10.5px in orange, which is the least readable combination on the page.
   The orange rule under them came off on request; the card already has a navy rule on top. */
.fbx .fbn{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
  color:var(--navy);display:block;margin-bottom:4px}
.fbx h4{margin:8px 0 8px;font-size:var(--fs-body);color:var(--navy)}
.fbx p{margin:0;font-size:.9rem;color:var(--n700);line-height:1.5}
.fourbox.fb5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1040px){.fourbox.fb5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.fourbox.fb5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fourbox.fb5{grid-template-columns:1fr}}
.fourbox.heads .fbx{padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;min-height:96px}
.fourbox.heads .fbx h4{margin:12px 0 0;font-size:var(--fs-body);line-height:1.25}
/* static numbered steps: the headings here are full sentences of different lengths, so they are
   top-aligned under the number rather than pushed to the foot of the card as on Grow volume */
.fourbox.stepcards .fbx{justify-content:flex-start}
.fourbox.stepcards .fbx h4{margin-top:10px}
.phases.heads .ph{padding:18px}
.phases.heads .ph span{margin-bottom:0}
.fourbox.fb4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.fourbox.fb4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fourbox.fb4{grid-template-columns:1fr}}
.fourbox.fb3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.fourbox.fb3{grid-template-columns:1fr}}
.fourbox .fbx>.blist{margin:10px 0 0;font-size:.96rem}
.fourbox .fbx>.blist li{margin-bottom:6px;line-height:1.45}
.fourbox .fbx>.chips{margin-top:14px}
.blist.tight li{margin-bottom:6px}
.scanpitch{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center}
@media(max-width:860px){.scanpitch{grid-template-columns:1fr}}
.bigline{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.1vw,1.5rem);
  color:var(--navy);line-height:1.35;letter-spacing:-.015em;max-width:24em;margin:0 0 8px;
  padding-left:16px;border-left:3px solid var(--orange)}
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:26px;
  border:1px solid var(--n200);background:#fff}
@media(max-width:900px){.phases{grid-template-columns:1fr}}
.phases .ph{padding:16px 18px;border-right:1px solid var(--n200)}
.phases .ph:last-child{border-right:0}
@media(max-width:900px){.phases .ph{border-right:0;border-bottom:1px solid var(--n200)}
  .phases .ph:last-child{border-bottom:0}}
.phases .ph span{font-family:var(--display);font-weight:700;color:var(--navy);display:block;
  font-size:.98rem;margin-bottom:6px}
.phases .ph p{margin:0;font-size:.86rem;color:var(--n700);line-height:1.5}
.resultsband h2{color:#fff}
.resultsband{padding-top:34px;padding-bottom:34px}
.resultsband .evgrid{grid-template-columns:repeat(6,1fr);gap:10px;margin-top:0}
.resultsband .evcard{padding:14px 12px 12px}
.resultsband .ev-n{font-size:var(--fs-num)}
.resultsband .ev-l{font-size:var(--fs-body);margin-top:4px;line-height:1.3}
.resultsband .ev-d{display:none}
#page-price .resultsband .ev-d,#page-volume .resultsband .ev-d,#page-cost .resultsband .ev-d{display:block}
#page-price .resultsband .evcard,#page-volume .resultsband .evcard,#page-cost .resultsband .evcard{padding:20px 20px 18px}
.resultsband .ev-go{margin-top:10px;font-size:.56rem}
@media(max-width:1080px){.resultsband .evgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.resultsband .evgrid{grid-template-columns:repeat(2,1fr)}}
/* ONE DARK BLUE, #163E67, on every page -- Marc. The two darker tints the prototype used (#0D2440 and #10304F) are gone, so nothing is darker than the brand blue anywhere. Two knock-ons you should look at: where two dark bands sat on top of each other they were told apart by tone, and are now separated by a hairline instead; and the scan block's navy-to-ink gradient is now flat, which is arguably better but is a change you did not ask for. Dark-on-dark buttons lighten on hover rather than darkening, for the same reason. */
.scanband{background:var(--navy);padding-top:44px;padding-bottom:44px}
section.bg-navy+section.bg-navy,section.bg-navy+section.bg-ink,
section.bg-ink+section.bg-navy,section.bg-ink+section.bg-ink{border-top:1px solid rgba(255,255,255,.14)}
.bg-navy+footer,.bg-ink+footer{border-top:1px solid rgba(255,255,255,.14)}
.scanband .lead{margin-top:10px!important}
.scanrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
@media(max-width:860px){.scanrow{grid-template-columns:1fr}}
.scanbox{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid transparent;padding:20px 20px 18px;transition:.18s;font:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.16),0 16px 30px -18px rgba(0,0,0,.55)}
.scanbox:hover{transform:translateY(-3px);border-color:var(--orange);
  box-shadow:0 2px 4px rgba(0,0,0,.20),0 26px 44px -20px rgba(0,0,0,.62)}
.scanbox:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.scanbox .sb-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.scanbox .sb-k em,.scanbox .sb-draft{font-style:normal;color:var(--orange-deep);border:1px solid var(--orange);
  padding:1px 5px;margin-left:8px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;vertical-align:middle}
.scanbox .sb-t{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);letter-spacing:-.01em}
.scanbox .sb-d{font-size:var(--fs-body);color:var(--n700);line-height:1.5}
/* START THE SCAN IS A BUTTON NOW, on request: the full width of the card, in the soft orange tint
   #FDD0C4 rather than the full brand orange, so it reads as the thing to press without shouting
   over the three lever cards above it. Navy type on the tint clears 8:1 contrast; the solid orange
   is kept for the hover state. The cards also sit on a soft shadow now, which is what lifts them
   off the navy band — they were flat white rectangles on dark and the eye slid past them. */
.scanbox .sb-d{margin-bottom:12px}
.scanbox .sb-go{margin-top:auto;display:block;width:100%;text-align:center;font-size:var(--fs-body);
  background:#FDD0C4;color:var(--navy);border-radius:2px;padding:11px 14px;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  transition:background .16s,color .16s}
.scanbox:hover .sb-go,.scanbox:focus-visible .sb-go{background:var(--orange);color:var(--navy)}
.resultshero .wrap>*{max-width:46em}
/* the carousel is wrapped in a .tq-shell by the script that steps it, so the shell rather than the
   carousel is what sits directly in the page column. Without it named here the 46em cap above
   applied to it, which left the carousel about two thirds of the column wide and room for two
   cards instead of three. */
.resultshero .wrap>.tmarquee,.resultshero .wrap>.tq-shell{max-width:none}
.resultshero h1{max-width:20em}
.cpoints{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.cpoint.wide{grid-column:1/-1}
@media(max-width:700px){.cpoint.wide{grid-column:auto}}
@media(max-width:760px){.cpoints{grid-template-columns:1fr}}
/* a long address or URL set the card's minimum width and pushed it 2px past a 320px screen. */
@media(max-width:380px){.cpoint,.cpoint>*{min-width:0}.cpoint span,.cpoint a{overflow-wrap:anywhere}}
.cpoint{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;border:1px solid var(--n200);
  background:#fff;padding:16px 18px;text-decoration:none;transition:.16s}
a.cpoint:hover{border-color:var(--navy);transform:translateX(2px)}
.cpoint .ic{width:34px;height:34px;border:1px solid var(--n200);background:var(--n100);display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.62rem;font-weight:600;color:var(--navy)}
.cpoint b{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);display:block}
.cpoint span{font-size:var(--fs-body);color:var(--n700);display:block;margin-top:2px}
.cpoint .go{font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:var(--orange-deep);margin-top:6px;display:block}
.sociallogos{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cpoint .sociallogos{display:flex;gap:10px;flex-wrap:wrap}
.cpoint .sociallogos a{flex:0 0 auto}
/* Sales PULSE: hero white, customer case on grey, so the opening two blocks separate */
#page-product .hero{background:#fff}
/* Sales PULSE alternates white / navy from the case block down. These are ID rules on purpose:
   the seam pass flips backgrounds so no two touching blocks match, and here the alternation is
   set by hand, so it has to win. */
/* Products page: the rhythm is hand-set on the sections themselves (see data-rhythm on
   the page), so the only rule left here is the cloned contact block, which has no class
   of its own to change. */
#page-product #product--contact{background-color:#fff}
/* on the industry pages the whole proof block is white, strip included, on request */
#page-ind-consumer #ind-consumer--proof{background-color:#fff}
#page-ind-services #ind-services--proof{background-color:#fff}
#page-ind-pe #ind-pe--proof{background-color:#fff}
#page-ind-tech #ind-tech--proof{background-color:#fff}
#page-ind-industry #ind-industry--proof{background-color:#fff}
/* the five industry pages close on white, as the live pages do */
#page-ind-consumer .contact-sec{background-color:#fff}
#page-ind-services .contact-sec{background-color:#fff}
#page-ind-pe .contact-sec{background-color:#fff}
#page-ind-tech .contact-sec{background-color:#fff}
#page-ind-industry .contact-sec{background-color:#fff}
/* the nine product pages run white, navy, white, navy, white, navy; the cloned
   contact block closes them on white. */
#page-p-coach .contact-sec{background-color:#fff}
#page-p-transformation .contact-sec{background-color:#fff}
#page-p-account .contact-sec{background-color:#fff}
#page-p-maturity .contact-sec{background-color:#fff}
#page-p-pricingscan .contact-sec{background-color:#fff}
#page-p-valuepricing .contact-sec{background-color:#fff}
#page-p-pricelist .contact-sec{background-color:#fff}
#page-p-priceincrease .contact-sec{background-color:#fff}
#page-p-automation .contact-sec{background-color:#fff}

/* ===== CUT COST OF SALES, NEW PRODUCT PAGES (1 October): target list creation and admin process
   automation. Drawn in the site's own diagram card (.dg) with the brand navy, the palette blue #2A5A88
   and orange for the one thing each picture is about. Every figure is from the agreed content plan. ===== */
#page-p-targetlist .contact-sec,#page-p-adminauto .contact-sec{background-color:#fff}
.dgfoot{margin:14px 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--n500);line-height:1.6}
.dgfoot b{color:var(--orange-deep);font-weight:600}
/* hero funnel, target list */
.tlf{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.tlf-row{display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:baseline}
.tlf-row span{font-size:.86rem;color:#2A2A2A;line-height:1.35}
.tlf-row b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--navy);white-space:nowrap}
.tlf-bar{grid-column:1/-1;height:24px;background:#F1F4F8}
.tlf-bar i{display:block;height:100%;background:#2A5A88}
.tlf-row.on .tlf-bar i{background:var(--orange)}
.tlf-row.on b{color:var(--orange-deep)}
/* case chart, cost per contact */
.cpc{display:grid;gap:12px;margin-top:6px}
.cpc-row{display:grid;grid-template-columns:118px 1fr 52px;gap:12px;align-items:center}
.cpc-row span{font-size:.84rem;color:#2A2A2A}
.cpc-bar{height:30px;background:#F1F4F8}
.cpc-bar i{display:block;height:100%;background:#2A5A88}
.cpc-row.on .cpc-bar i{background:var(--orange)}
.cpc-row b{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--navy);text-align:right}
.cpc-row.on b{color:var(--orange-deep)}
/* stat strip under a case chart */
.cstat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--n200)}
.cstat b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em;line-height:1}
.cstat div:first-child b{color:var(--orange-deep)}
.cstat span{display:block;margin-top:6px;font-size:.78rem;color:#4A4A4A;line-height:1.35}
/* practice cards, target list */
.tlcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.tlcard{border:1px solid var(--n200);border-top:3px solid var(--navy);padding:16px 16px 14px;background:#fff}
.tlrule{width:100%;border-collapse:collapse;font-size:.84rem}
.tlrule td{padding:7px 6px;border-bottom:1px solid var(--n200);color:#2A2A2A;vertical-align:top}
.tlrule td:last-child{text-align:right;font-family:var(--display);font-weight:700;color:var(--navy);white-space:nowrap}
.tlrule tr.tot td{border-bottom:none;border-top:2px solid var(--navy);font-weight:700;color:var(--navy)}
.tlrule tr.tot td:last-child{color:var(--orange-deep);font-size:1.05rem}
.tlcard .blist li{font-size:.9rem}
/* hero picture, admin automation: minutes per activity group, low to high */
.amr{display:grid;gap:12px;margin-top:4px}
.amr-row{display:grid;grid-template-columns:150px 1fr 64px;gap:12px;align-items:center}
.amr-row span{font-size:.84rem;color:#2A2A2A;line-height:1.3}
.amr-t{position:relative;height:22px;background:#F1F4F8}
.amr-t i{position:absolute;top:0;bottom:0;background:#2A5A88}
.amr-row.on .amr-t i{background:var(--orange)}
.amr-row b{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--navy);text-align:right;white-space:nowrap}
.amr-row.on b,.amr-row.on span{color:var(--orange-deep);font-weight:600}
.amr-ax{display:flex;justify-content:space-between;margin:0 76px 0 162px;font-family:var(--mono);font-size:.56rem;color:var(--n500)}
/* case chart, admin automation */
.nsb{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:end;height:170px;margin-top:20px;padding:0 10px;border-bottom:1px solid var(--n300)}
.nsb>div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.nsb i{display:block;width:62%;background:#2A5A88}
.nsb>div.on i{background:var(--orange)}
.nsb b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--navy);margin-bottom:6px}
.nsb>div.on b{color:var(--orange-deep)}
.nsb span{position:absolute;bottom:-22px;font-family:var(--mono);font-size:.6rem;color:var(--n500);white-space:nowrap}
.nsb+.cstat{margin-top:34px}
.casetext li{line-height:1.55}
.casetext li b{color:#fff}
/* practice diagram, admin automation: the weekly loop and what it sends */
.aaf{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.aaf>div{position:relative;background:#2A5A88;color:#fff;padding:16px 30px 16px 16px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.aaf>div:last-child{background:var(--navy)}
.aaf b{width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--navy);display:grid;place-items:center;font-size:.74rem;font-weight:700}
.aaf h5{margin:10px 0 6px;font-family:var(--display);font-size:1.02rem;font-weight:700;color:#fff}
.aaf span{display:block;font-size:.82rem;line-height:1.4;color:#DCE7F1}
.aao{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.aao>div{border:1px solid var(--n200);border-top:3px solid var(--orange);padding:12px 14px;background:#fff}
.aao h5{margin:0 0 4px;font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--navy)}
.aao span{font-size:.84rem;color:#4A4A4A;line-height:1.4}
/* admin automation, reframed 2 October: process rating in the hero, stacked case block */
.apm{display:grid;gap:10px}
.apm-row{display:grid;grid-template-columns:1fr 92px 62px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--n200)}
.apm-row:last-child{border-bottom:none}
.apm-row span{font-size:.8rem;color:#5A5A5A;line-height:1.35}
.apm-row span b{display:block;font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--navy)}
.apm-m{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-style:normal}
.apm-m em{display:block;height:12px;background:#E3E9F1}
.apm-m.m1 em:nth-child(-n+1),.apm-m.m2 em:nth-child(-n+2),.apm-m.m3 em:nth-child(-n+3){background:#2A5A88}
.apm-row.on .apm-m em{background:var(--orange)}
.apm-row strong{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);text-align:right}
.apm-row.on strong,.apm-row.on span b{color:var(--orange-deep)}
.casecols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
.casecols>div{border-top:2px solid var(--orange);padding-top:14px}
.casecols b{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:8px}
.casecols p{margin:0;color:#C9D9E7;line-height:1.6}
.dg.casewide{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center;padding:22px 24px}
.itc{display:grid;gap:14px}
.itc-row{display:grid;grid-template-columns:110px 1fr 84px;gap:12px;align-items:center}
.itc-row span{font-size:.86rem;color:#2A2A2A}
.itc-bar{height:30px;background:#F1F4F8}
.itc-bar i{display:block;height:100%;background:#2A5A88}
.itc-row.on .itc-bar i{background:var(--orange)}
.itc-row b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--navy);text-align:right;white-space:nowrap}
.itc-row b.tbc{color:var(--n500);font-weight:600;font-size:.9rem}
.cstat.cstat-v{grid-template-columns:1fr;margin-top:0;padding-top:0;border-top:none;border-left:1px solid var(--n200);padding-left:24px;gap:14px}
@media(max-width:860px){
  .casecols{grid-template-columns:1fr;gap:18px}
  .dg.casewide{grid-template-columns:1fr}
  .cstat.cstat-v{border-left:none;padding-left:0;border-top:1px solid var(--n200);padding-top:16px}
  .apm-row{grid-template-columns:1fr 70px 56px}
}
/* ===== automated outreach: the five-stage process (How it works) ===== */
.oaf{position:relative;padding:6px 4px 2px}
.oaf-band{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:22px}
.oaf-band span{position:relative;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding-bottom:10px;margin:0 14px}
.oaf-band span::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;border:2px solid currentColor;border-bottom:0}
.oaf-band .oaf-auto{grid-column:1/5;color:#2A5A88}
.oaf-band .oaf-sales{grid-column:5/6;color:var(--orange-deep)}
.oaf-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.oaf-flow::before{content:'';position:absolute;top:48px;left:10%;width:60%;border-top:2px dashed #9BB3CB}
.oaf-flow::after{content:'';position:absolute;top:47px;left:70%;width:20%;height:4px;background:var(--orange)}
.oaf-flow li{position:relative;z-index:1;text-align:center;padding:0 10px}
.oaf-ic{position:relative;width:96px;height:96px;margin:0 auto;border-radius:50%;background:#fff;
  border:1px solid var(--n200);display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(11,34,58,.08),0 14px 26px -16px rgba(11,34,58,.45)}
.oaf-ic::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px dashed #BFD0E1;background:var(--white);z-index:-1}
.oaf-ic img{display:block;max-width:64px;max-height:46px;width:auto;height:auto}
.oaf-ic.wide img{max-width:74px}
.oaf-ic.duo img{position:absolute;max-width:30px;max-height:30px}
.oaf-ic.duo img:first-child{left:14px;top:15px}
.oaf-ic.duo img:nth-child(2){right:12px;bottom:14px;max-width:38px;max-height:38px}
.oaf-n{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;background:var(--orange);
  color:var(--navy);font-family:var(--display);font-weight:800;font-size:.86rem;display:grid;place-items:center;
  box-shadow:0 0 0 3px #fff}
.oaf-hand .oaf-ic{background:var(--navy);border-color:var(--navy)}
.oaf-hand .oaf-ic::before{border-color:var(--orange)}
.oaf-hand .oaf-ic img{max-width:44px;max-height:44px}
.oaf-hand .oaf-n{background:#fff;color:var(--orange-deep);box-shadow:0 0 0 3px var(--orange)}
.oaf-flow h4{margin:22px 0 0;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);line-height:1.25}
.oaf-hand h4{color:var(--orange-deep)}
.oaf-flow p{margin:6px auto 0;max-width:15em;font-size:.86rem;line-height:1.45;color:var(--n700)}
.oaf-tag{display:none}
@media(max-width:900px){.dg .oaf{min-width:0}}
@media(max-width:760px){
  .oaf{padding:0}
  .oaf-band{display:none}
  .oaf-flow{grid-template-columns:1fr;gap:22px}
  .oaf-flow::before{top:36px;bottom:110px;left:36px;width:0;border-top:0;border-left:2px dashed #9BB3CB}
  .oaf-flow::after{top:auto;bottom:40px;left:35px;width:4px;height:70px}
  .oaf-flow li{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;text-align:left;padding:0}
  .oaf-ic{width:72px;height:72px}
  .oaf-ic::before{inset:-6px}
  .oaf-ic img{max-width:50px;max-height:36px}
  .oaf-ic.wide img{max-width:58px}
  .oaf-ic.duo img{max-width:22px;max-height:22px}
  .oaf-ic.duo img:first-child{left:11px;top:12px}
  .oaf-ic.duo img:nth-child(2){right:9px;bottom:10px;max-width:29px;max-height:29px}
  .oaf-hand .oaf-ic img{max-width:34px;max-height:34px}
  .oaf-n{width:24px;height:24px;font-size:.76rem;top:-5px;right:-5px}
  .oaf-flow h4{margin:0}
  .oaf-flow p{margin:3px 0 0;max-width:none}
  .oaf-tag{display:block;font-family:var(--mono);font-style:normal;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#2A5A88;margin-bottom:3px}
  .oaf-hand .oaf-tag{color:var(--orange-deep)}
}
.psym.pblue .card{border-top-color:var(--navy)}
.oaf-note{margin:12px 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
/* ===== sales maturity scan: the four-week process (How it works) ===== */
.smp{position:relative;padding:4px 2px 0}
.smp-time{display:grid;grid-template-columns:repeat(6,1fr);column-gap:10px;margin-bottom:20px}
.smp-wk,.smp-after{position:relative;height:22px;display:flex;align-items:center;justify-content:center}
.smp-wk{grid-column:1/6}
.smp-after{grid-column:6/7}
.smp-wk::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--navy)}
.smp-wk::after{content:'';position:absolute;left:0;right:0;top:50%;height:12px;margin-top:-6px;border-left:2px solid var(--navy);border-right:2px solid var(--navy)}
.smp-after::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--orange)}
.smp-time b{position:relative;z-index:1;background:#fff;padding:0 12px;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.smp-after b{color:var(--orange-deep);font-size:.6rem;letter-spacing:.1em;padding:0 6px}
.smp-ph{display:grid;grid-template-columns:repeat(6,1fr);column-gap:10px;margin-bottom:10px}
.smp-ph span{font-family:var(--display);font-weight:600;font-size:.92rem;color:#2A5A88;padding:0 0 7px 2px;border-bottom:1px solid #BFD0E1}
.smp-ph span:nth-child(1){grid-column:1/3}.smp-ph span:nth-child(2){grid-column:3/5}.smp-ph span:nth-child(3){grid-column:5/7}
.smp-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);column-gap:10px}
.smp-chev{position:relative;display:flex;align-items:center;gap:10px;height:64px;padding:0 22px 0 16px;background:var(--navy);color:#fff;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,12px 50%)}
.smp-flow li:first-child .smp-chev{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.smp-flow li:nth-child(n+2) .smp-chev{padding-left:24px}
.smp-flow li:nth-child(2) .smp-chev{background:#1D4A78}
.smp-flow li:nth-child(3) .smp-chev{background:#24578A}
.smp-flow li:nth-child(4) .smp-chev{background:#2A5A88}
.smp-flow li:nth-child(5) .smp-chev{background:#2F6597}
.smp-after-step .smp-chev{background:#FDE6DE!important;color:var(--navy)}
.smp-chev i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--navy);display:grid;place-items:center;
  font-style:normal;font-family:var(--display);font-weight:800;font-size:.78rem}
.smp-chev h4{margin:0;font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2;color:inherit;letter-spacing:-.01em}
.smp-flow p{margin:12px 4px 0 2px;font-size:.84rem;line-height:1.5;color:var(--n700)}
.smp-flow p b{color:var(--navy);font-weight:600}
.smp-tag{display:none}
.smp-wk em{display:none}
@media(max-width:900px){.dg .smp{min-width:0}}
@media(max-width:900px) and (min-width:761px){.smp-chev h4{font-size:.84rem}.smp-chev{padding-right:18px}.smp-chev i{display:none}}
@media(max-width:760px){
  .smp{padding:0}
  .smp-ph{display:none}
  .smp-time{grid-template-columns:1fr;margin-bottom:18px}
  .smp-after{display:none}
  .smp-wk{grid-column:1/-1;justify-content:flex-start}
  .smp-wk b{padding:0 10px 0 0}
  .smp-wk::after{border-left:0}
  .smp-wk::before,.smp-wk::after{display:none}
  .smp-wk{padding-bottom:12px;border-bottom:1px solid var(--n200);height:auto}
  .smp-wk em{display:inline;position:relative;z-index:1;font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
  .smp-flow{grid-template-columns:1fr;row-gap:0;position:relative}
  .smp-flow li{position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:14px;padding-bottom:20px}
  .smp-flow li::before{content:'';position:absolute;left:19px;top:30px;bottom:-2px;width:2px;background:var(--navy)}
  .smp-flow li:nth-child(5)::before{background:none;border-left:2px dashed var(--orange)}
  .smp-flow li:last-child::before{display:none}
  .smp-flow li:last-child{padding-bottom:0}
  .smp-chev,.smp-flow li:first-child .smp-chev,.smp-flow li:nth-child(n+2) .smp-chev{grid-row:1/3;clip-path:none;height:auto;padding:0;background:none!important;box-shadow:none!important;display:block;color:var(--navy)}
  .smp-chev i{width:40px;height:40px;font-size:.92rem;background:var(--navy);color:#fff}
  .smp-after-step .smp-chev i{background:#fff;color:var(--orange-deep);box-shadow:inset 0 0 0 2px var(--orange)}
  .smp-chev h4{display:none}
  .smp-body{grid-column:2;grid-row:1}
  .smp-tag{display:block;font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#2A5A88;margin:2px 0 2px}
  .smp-after-step .smp-tag{color:var(--orange-deep)}
  .smp-body h5{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);margin:0;line-height:1.25}
  .smp-flow p{margin:4px 0 0}
}
.smp-body h5{display:none}
@media(max-width:760px){.smp-body h5{display:block}}
/* READABILITY PASS ON THE INSIGHTS PAGES (v9.12.12). Measured against WCAG AA (4.5:1 for body-size text,
   3:1 for large text). On the blue article bands the sub-lines under each bullet were dark grey and the
   numbered sub-headings were the heading blue, so both sat on blue at about 1:1. They now take the light text
   colours every other dark band uses. The small grey labels and the orange "Read the article" links were
   just under the bar on white and are a shade darker. */
.bg-ink .artbody h3,.bg-navy .artbody h3{color:#fff}
.bg-ink .sub,.bg-navy .sub,.bg-ink .artbody .sub,.bg-navy .artbody .sub{color:#C9D9E7}
.cl-details span,.field label{color:#5E5E5E}
#page-insights .mut,#page-blog .mut,#page-videos .mut,#page-insights-hub .mut,#page-a-crm-value .mut,#page-a-crm-adoption .mut,#page-a-crm-compare .mut,#page-a-crm-salesforce .mut,#page-a-crm-dynamics .mut,#page-a-crm-hubspot .mut,#page-uc-steering .mut,#page-uc-acceptance .mut,#page-uc-innovation .mut,#page-uc-tech .mut,#page-pw-outbound .mut,#page-pw-whitepaper .mut{color:#5E5E5E}
#page-insights .subbar button:not(.on),#page-blog .subbar button:not(.on),#page-videos .subbar button:not(.on),#page-insights-hub .subbar button:not(.on),#page-a-crm-value .subbar button:not(.on),#page-a-crm-adoption .subbar button:not(.on),#page-a-crm-compare .subbar button:not(.on),#page-a-crm-salesforce .subbar button:not(.on),#page-a-crm-dynamics .subbar button:not(.on),#page-a-crm-hubspot .subbar button:not(.on),#page-uc-steering .subbar button:not(.on),#page-uc-acceptance .subbar button:not(.on),#page-uc-innovation .subbar button:not(.on),#page-uc-tech .subbar button:not(.on),#page-pw-outbound .subbar button:not(.on),#page-pw-whitepaper .subbar button:not(.on){color:#5E5E5E}
#page-insights .cta-go,#page-blog .cta-go,#page-videos .cta-go,#page-insights-hub .cta-go,#page-a-crm-value .cta-go,#page-a-crm-adoption .cta-go,#page-a-crm-compare .cta-go,#page-a-crm-salesforce .cta-go,#page-a-crm-dynamics .cta-go,#page-a-crm-hubspot .cta-go,#page-uc-steering .cta-go,#page-uc-acceptance .cta-go,#page-uc-innovation .cta-go,#page-uc-tech .cta-go,#page-pw-outbound .cta-go,#page-pw-whitepaper .cta-go,#page-insights .hubgo,#page-blog .hubgo,#page-videos .hubgo,#page-insights-hub .hubgo,#page-a-crm-value .hubgo,#page-a-crm-adoption .hubgo,#page-a-crm-compare .hubgo,#page-a-crm-salesforce .hubgo,#page-a-crm-dynamics .hubgo,#page-a-crm-hubspot .hubgo,#page-uc-steering .hubgo,#page-uc-acceptance .hubgo,#page-uc-innovation .hubgo,#page-uc-tech .hubgo,#page-pw-outbound .hubgo,#page-pw-whitepaper .hubgo{color:#A3411F}
/* automated outreach: the steps outside this page's scope step back */
.ucc.ucdim{opacity:.45}
a.ucc{text-decoration:none;cursor:pointer}
a.ucc:hover{background:var(--navy)}
@media(max-width:860px){
  .tlcards,.aao{grid-template-columns:1fr}
  .aaf{grid-template-columns:1fr;gap:16px}
  .aaf>div{padding:16px 16px 32px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),50% 100%,0 calc(100% - 16px))}
  .amr-row{grid-template-columns:110px 1fr 58px}
  .amr-ax{margin:0 70px 0 122px}
  .cstat{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .cstat b{font-size:1.2rem}
}
@media(max-width:520px){
  .cstat{grid-template-columns:1fr}
  .cpc-row{grid-template-columns:96px 1fr 46px}
}
/* THE LOGO BAND ON RESULTS IS ONE FLAT WHITE. Every section carries a faint seam gradient over its top
   130px, and this band is only about 200px tall, so the gradient covered the eyebrow and left a grey
   strip sitting above the white strip the logos run on. On this one band it is switched off. */
#page-results .trust{background-image:none}
/* results closes on white too. It used to get there by the seam rule, because the logo band above it
   was grey; the logo band is white now, so the flip no longer fires and the close is stated outright. */
#page-results .contact-sec{background-color:#fff}
.sociallogos a{display:flex;align-items:center;gap:8px;border:1px solid var(--n200);background:#fff;padding:8px 14px;
  font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:var(--navy);text-decoration:none;transition:.15s}
.sociallogos a:hover{border-color:var(--navy)}
.sociallogos svg{width:17px;height:17px;flex:0 0 auto}
.docgate{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:24px;align-items:start;
  border:1px solid var(--n200);border-top:3px solid var(--orange);background:#fff;padding:22px;margin:26px 0 0}
.docgate .dg-prev{position:relative;overflow:hidden;background:var(--n100);border:1px solid var(--n200);aspect-ratio:1/1.3}
.docgate .dg-prev img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.docgate .dg-prev .figbtn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.docgate .dg-fade{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 72%,#fff 100%)}
.docgate .dg-lock{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.docgate .dg-noprev{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;text-align:center}
.docgate .dg-noprev span{font-family:var(--mono);font-size:.66rem;color:var(--n500)}
.docgate h3{margin:8px 0 6px;font-size:1.18rem;color:var(--navy)}
.docgate ul.dg-in{list-style:none;padding:0;margin:14px 0 18px}
.docgate ul.dg-in li{position:relative;padding-left:18px;margin-bottom:7px;font-size:var(--fs-body);color:var(--n700)}
.docgate ul.dg-in li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--orange)}
.docgate .micro{margin-top:10px;color:var(--n500)}
@media(max-width:680px){.docgate{grid-template-columns:1fr}.docgate .dg-prev{max-width:200px;aspect-ratio:1/1.15}}
.callnote{background:var(--n100);border-left:3px solid var(--orange);padding:14px 18px;margin:18px 0 0;font-size:.95rem;color:var(--n700)}
.callnote b{color:var(--navy);font-family:var(--display)}
.oband{border:1px solid var(--n200);padding:16px 18px;margin-bottom:10px;background:#fff}
.oband.top{border-color:var(--navy);border-left:3px solid var(--orange)}
.oband .ob-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.oband .ob-nm{font-family:var(--display);font-weight:600;color:var(--navy)}
.oband .ob-band{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep)}
.oband .ob-tx{font-size:var(--fs-body);color:var(--n700);margin-top:6px}
.enab{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enab .en{border:1px solid var(--n200);background:var(--n100);padding:14px 16px}
.enab .en b{font-family:var(--display);color:var(--navy);display:block}
.enab .en em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);display:block;margin:3px 0 6px}
.enab .en span{font-size:.9rem;color:var(--n700)}
@media(max-width:640px){.enab{grid-template-columns:1fr}}
ol.acts{list-style:none;counter-reset:a;padding:0;margin:0}
ol.acts li{counter-increment:a;position:relative;padding:0 0 16px 40px;margin-bottom:16px;border-bottom:1px solid var(--n200)}
ol.acts li:last-child{border-bottom:0}
ol.acts li::before{content:counter(a);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--mono);font-size:.72rem;display:flex;align-items:center;justify-content:center}
ol.acts .th{font-family:var(--display);font-weight:600;color:var(--navy)}
ol.acts .mv{font-size:.84rem;color:var(--n500);margin:2px 0 5px}
ol.acts .td{color:var(--n700)}
ol.acts .tags{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
ol.acts .tags span{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--n300);padding:3px 8px;color:var(--n600)}
.fullcta{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:26px;padding:22px;border:1px dashed var(--n300);background:var(--n100)}
.fullcta b{font-family:var(--display);font-size:1.08rem;color:var(--navy);display:block}
.fullcta span{font-size:var(--fs-body);color:var(--n700);display:block;margin-top:4px;max-width:46em}
.phbanner{background:#FFF6F2;border:1px solid var(--orange);padding:12px 16px;margin:0 0 18px;font-size:.88rem;color:var(--n700)}
.phbanner b{color:var(--orange-deep);font-family:var(--display)}
.parthead{display:flex;align-items:baseline;gap:10px;margin:34px 0 12px;padding-top:22px;border-top:2px solid var(--navy)}
.parthead b{font-family:var(--display);font-size:1.15rem;color:var(--navy)}
.parthead em{font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.icat.hide{display:none}
.livepic{width:100%;height:auto;display:block;border-radius:3px}
.subpane{display:none}
.subpane.on{display:block}

/* video band */
.vband{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--n200);background:#fff;overflow:hidden}
@media(max-width:860px){.vband{grid-template-columns:1fr}}
.vband-media{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden;border:0;margin:0}
.vband-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.vband-txt{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.vband-txt h3{font-size:var(--fs-body);color:var(--navy);margin:10px 0 0;line-height:1.25}
.vband-txt p{margin-top:10px}
/* one-at-a-time deck viewer */
.deck{border:1px solid var(--n200);background:#fff}
.decktabs{display:flex;gap:0;border-bottom:1px solid var(--n200);overflow-x:auto}
.decktabs button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:14px 20px;font-family:var(--body);font-size:.94rem;color:var(--n500);cursor:pointer;white-space:nowrap;transition:.16s}
.decktabs button:hover{color:var(--navy);background:var(--n50)}
.decktabs button.on{color:var(--navy);border-bottom-color:var(--orange);font-weight:600}
.deckstage{margin:0;padding:26px 26px 0}
.deckstage .figbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0}
.deckstage img{width:100%;height:auto;display:block;transition:opacity .18s}
.deckstage figcaption{font-size:.92rem;color:var(--n700);padding:16px 2px 22px;line-height:1.55}

.caseband{display:grid;grid-template-columns:auto auto 1fr auto;gap:0 26px;align-items:center;padding:22px 28px;
  background:var(--navy);color:#fff;text-decoration:none;transition:.18s;border-left:3px solid var(--orange)}
.caseband:hover{filter:brightness(1.18)}
.cb-k{grid-row:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#9FB4CA}
.cb-n{grid-row:1;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--orange)}
.cb-t{grid-row:1;font-size:.95rem;color:#D8E3ED;line-height:1.45}
.cb-go{grid-row:1;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#fff}
@media(max-width:820px){.caseband{grid-template-columns:1fr;gap:8px}.caseband span{grid-row:auto}}

.blist{list-style:none;display:grid;gap:11px;margin:0}
.blist li{position:relative;padding-left:22px;font-size:var(--fs-body);color:var(--n700);line-height:1.62}
.blist li::before{content:'';position:absolute;left:0;top:.66em;width:8px;height:2px;background:var(--orange)}
.blist.big li{font-size:1.1rem;color:var(--navy);font-family:var(--display);font-weight:600}
.blist.light li{color:#D8E3ED;margin-top:0}
.blist.light{margin-top:20px}
/* in a two-column row the list is the column, not something under a heading, so it starts
   level with the paragraph beside it */
.grid.g2>div>.blist,.grid.g3>div>.blist{margin-top:0}
.fixbody .blist{margin-top:6px}

.vlist{display:grid;gap:26px}
.vcard{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--n200);background:#fff;overflow:hidden}
@media(max-width:900px){.vcard{grid-template-columns:1fr}}
.vcard-media{background:var(--navy)}
.vcard-media .ytfacade{margin:0;aspect-ratio:16/9;height:100%}
.vcard-txt{padding:26px 28px}
.vcard-txt h3{font-size:var(--fs-body);color:var(--navy);line-height:1.3;margin:0}
.vcard-txt p.sm{margin-top:10px;color:var(--n700);line-height:1.6}
.vcard-txt .transcript{margin-top:16px}
.postgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.postgrid{grid-template-columns:1fr}}
.postcard{background:#fff;border:1px solid var(--n200);padding:22px 24px;transition:.16s}
.postcard:hover{border-color:var(--orange)}
.postcard h3{font-size:var(--fs-body);color:var(--navy);line-height:1.35;margin:8px 0 0}
.postcard p{margin-top:10px}
.postcard .inline-link{display:inline-block;margin-top:14px}

/* ===== "What shapes revenue here" on the industry pages — equal-height cards on the brand
   blue. ONE ROW up to five cards; six or more wrap onto two rows (ceil(n/2) columns), driven by
   data-n on the grid. The band is .bg-navy, the one #163E67 used everywhere else, not a second
   blue, and the cards use the same translucent-white treatment every other card on a dark band
   has. On request. ===== */
.kpband{padding:46px 0 50px}
.kpgrid{display:grid;gap:14px;margin-top:20px;align-items:stretch;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.kpgrid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.kpgrid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpgrid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpgrid[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpgrid[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpgrid[data-n="7"],.kpgrid[data-n="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpgrid[data-n="9"],.kpgrid[data-n="10"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.kp{height:100%;display:flex;flex-direction:column;padding:18px 20px 20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-top:2px solid var(--orange)}
.kp-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--orange);display:block;margin-bottom:10px}
.kp p{font-family:var(--display);font-weight:600;font-size:.98rem;color:#fff;line-height:1.4;margin:0}
@media(max-width:1040px){.kpgrid,.kpgrid[data-n]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.kpgrid,.kpgrid[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.kpgrid,.kpgrid[data-n]{grid-template-columns:minmax(0,1fr)}}

.caselink{margin-top:14px;padding-top:12px;border-top:1px solid var(--n200)}
.caselink a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.caselink a:hover{color:var(--orange-deep)}

.blist.want li::before{background:var(--navy)}
/* THE OUTPUT LINE that closes a logic block: same size as the step list above it, with an orange
   bold label in front. It takes the colour of the band it sits on, so it matches the list above it:
   the ordinary body grey on white, white on the navy bands. The label uses the deeper orange on
   white, where the light orange would only reach about 2.3:1 against the page. */
.outline{margin:0;font-size:1.05rem;line-height:1.62;color:var(--n700)}
.outline b{color:var(--orange-deep);font-weight:700}
.bg-ink .outline,.bg-navy .outline{color:#fff}
.bg-ink .outline b,.bg-navy .outline b{color:var(--orange)}
.bg-ink .blist li,.bg-navy .blist li{color:#C9D9E7}
.bg-ink .blist.want li::before,.bg-navy .blist.want li::before{background:var(--orange)}
.bg-ink .blist li u,.bg-navy .blist li u{color:#fff}
/* THE BULLETS IN THE TWO DARK BANDS ON THE INDUSTRY PAGES carry the message of each section, so they
   are white and semibold rather than the muted blue this site uses for ordinary body text on a dark
   band. It covers "Typical commercial setup" and "What strong firms do differently" on all five
   industry pages, and nothing else: the lists in the hero and in "Where it goes wrong" sit on white,
   where white type would disappear. On request. */
[id^="page-ind-"] section.bg-ink .blist li{color:#fff;font-weight:600}
.bg-ink .klabel u,.bg-navy .klabel u{color:#fff}
.caseband .cb-k{font-size:.9rem;font-family:var(--display);font-weight:700;color:var(--orange);letter-spacing:0;text-transform:none}
.caseband{grid-template-columns:auto 1fr auto}

.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1000px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}}
.vtile{display:flex;flex-direction:column;border:1px solid var(--n200);background:#fff;overflow:hidden;transition:.16s}
.vtile:hover{border-color:var(--orange)}
.vtile-media .ytfacade{margin:0;aspect-ratio:16/9}
.vtile-txt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.vtile-txt h3{font-size:var(--fs-body);color:var(--navy);line-height:1.3;margin:0}
.vtile-txt p.sm{margin-top:9px;font-size:var(--fs-body);color:var(--n700);line-height:1.55}
.vtile-txt .micro{margin-top:auto;padding-top:12px}
.vtile-txt .transcript{margin-top:12px;padding-top:12px}
.vtile-txt .transcript summary{font-size:.88rem}
.evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:900px){.evgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.evgrid{grid-template-columns:1fr}}
.evcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--n200);padding:22px 24px 20px;
  text-decoration:none;transition:.16s;border-top:3px solid var(--orange)}
.evcard:hover{border-color:var(--orange);border-top-color:var(--orange);transform:translateY(-2px)}
.ev-n{font-family:var(--display);font-weight:800;font-size:var(--fs-num);letter-spacing:-.02em;color:var(--orange);line-height:1}
.ev-l{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);margin-top:6px}
.ev-d{font-size:var(--fs-body);color:var(--n700);line-height:1.5;margin-top:10px;flex:1}
.ev-go{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-top:16px}

.impline{margin:26px 0 0;padding:20px 24px;background:rgba(255,255,255,.07);
  border-left:3px solid var(--orange);font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.4;color:#fff;letter-spacing:-.012em;max-width:52em}
.calc{background:#fff;border:1px solid var(--n200);border-top:3px solid var(--orange);padding:24px}
.calc-in{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.calc-in label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n500)}
.calc-in input{width:100%;margin-top:6px;border:1px solid var(--n300);padding:9px 10px;border-radius:var(--r);
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy);outline:none}
.calc-in input:focus{border-color:var(--orange)}
.calc-bars{margin-top:20px;display:grid;gap:10px}
.cbar{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center}
.cbar .cb-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
.cbar i{display:block;height:20px;background:var(--n300);transition:width .35s ease}
.cbar i.on{background:var(--orange)}
.cbar b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--navy);min-width:4ch;text-align:right}
.calc-sum{margin:14px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--n700)}
.calc-foot{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--n200);font-size:.78rem;color:var(--n500);line-height:1.5}
@media(max-width:560px){.calc-in{grid-template-columns:1fr 1fr}}
.symlist{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
@media(max-width:860px){.symlist{columns:1}}
.symlist li{break-inside:avoid;position:relative;padding:9px 0 9px 18px;border-top:1px solid var(--n200);
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--navy);line-height:1.3}
.symlist li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:1px;background:var(--orange)}
.methodband .phases{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.methodband .phases .ph{border-right-color:rgba(255,255,255,.18)}
.methodband .phases .ph span{color:#fff}
/* the step boxes are white panels on the dark band, the same way the result cards are &mdash;
   a wash of white on navy was never going to separate from navy. */
.methodband .fourbox .fbx{background:#fff;border:1px solid #fff;border-top:3px solid var(--orange);
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.methodband .fourbox .fbx h4{color:var(--navy)}
.methodband .fourbox .fbx .fbn{color:var(--orange-deep)}
.methodband .fourbox.steps .fbp{color:var(--n700)}
.methodband .fourbox.steps .fbx::after{color:var(--orange-deep)}
.methodband .fourbox.steps .fbx:hover{box-shadow:0 12px 28px rgba(0,0,0,.26)}
.methodband .fourbox.steps .fbx.on{background:#fff;border-color:#fff}
/* THE QUOTE CAROUSEL IS STEPPED BY HAND NOW, on request: three quotes at a time, an arrow at each
   side, one quote per click, looping both ways, and no movement of its own. It used to run full
   width of the window as a slow marquee. Showing exactly three means it has to sit inside the page
   column instead of bleeding to 100vw, because three cards have to be measured against something.
   The card width is set from the carousel's own width by JS (--tcw), so three, two or one fit with
   the same 16px gap as the viewport narrows. */
.tmarquee{position:relative;overflow:hidden;margin-top:26px}
.trow{display:flex;gap:16px;width:max-content}
.trow.stepped{will-change:transform}
@keyframes tslide{to{transform:translateX(-50%)}}
.tq-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--n200);background:#fff;color:var(--navy);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;padding:0;
  box-shadow:0 2px 4px rgba(11,34,58,.10),0 10px 20px -10px rgba(11,34,58,.35);
  transition:background .16s,color .16s,border-color .16s}
.tq-nav:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.tq-nav:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.tq-shell{position:relative;padding:0 56px}
.tq-shell .tq-nav.prev{left:0}
.tq-shell .tq-nav.next{right:0}
.tq-shell.no-nav .tq-nav{display:none}
@media(max-width:600px){.tq-shell{padding:0 44px}.tq-nav{width:34px;height:34px}}
.tcard{flex:0 0 var(--tcw,520px);margin:0;background:#fff;border:1px solid var(--n200);
  border-left:3px solid var(--orange);padding:22px 24px;display:flex;flex-direction:column}
.tcard blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:var(--fs-body);line-height:1.5;
  color:var(--navy);letter-spacing:-.01em;flex:1}
.tcard figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--n200);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--n500)}
/* reduced motion keeps the carousel and the arrows; only the slide is instant */
@media(prefers-reduced-motion:reduce){.trow{transition:none!important}}
.fourbox.steps .fbx{cursor:pointer;width:100%;text-align:left;font:inherit;position:relative;
  justify-content:flex-start;min-height:0;padding-right:34px;
  transition:background .18s ease,transform .18s ease}
.fourbox.steps .fbx:hover{transform:translateY(-2px)}
.fourbox.steps .fbx::after{content:"+";position:absolute;top:14px;right:16px;font-family:var(--mono);
  font-size:.9rem;color:var(--orange);transition:transform .2s ease}
.fourbox.steps .fbx.on::after{content:"\2212"}
.fourbox.steps .fbp{margin:0;max-height:0;opacity:0;overflow:hidden;font-size:var(--fs-body);line-height:1.55;
  transition:max-height .28s ease,opacity .22s ease,margin .28s ease}
.fourbox.steps .fbx.on .fbp{max-height:18em;opacity:1;margin-top:10px}
/* homepage flow: grey hero, navy results, grey logos-and-quotes, white team quote, navy scans, grey answers.
   The logo strip sits in a white inset inside the grey band, so the two halves of that block read apart. */
#page-home .trust,#page-home .trust.seam-flip{background-color:var(--n100)}
.trust .marquee{background:#fff;border-top:1px solid var(--n200);border-bottom:1px solid var(--n200);padding:18px 0}
#page-home .expertband,#page-home .expertband.seam-flip{background-color:#fff}
.bg-tint,.bg-tint.seam-flip{background-color:#fff}
.bel .k{display:block;margin-bottom:10px}
#page-product .resultsband .evgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:34em}
#page-product .resultsband .ev-d{display:block}
#page-product .resultsband .evcard{padding:20px 20px 18px}
.plainblock .card.n p.sm,.plainblock .blist li,.plainblock p.sm.mut{font-size:1rem;line-height:1.55}
.plainblock .lead{font-size:var(--fs-body);line-height:1.6;font-weight:700;color:var(--navy)}
.bg-navy.plainblock .lead,.bg-ink.plainblock .lead{color:#B9CCDD}
/* About opening block: the two panels sit on the grey rather than as white cards on it &mdash;
   outline and a navy rule, no fill. */
/* Results: the quotes open on white, the seven cases sit on a band of the brand blue, the logo strip
   goes back to white, the closing block to grey. The case cards carry a real edge and an orange rule.
   THE BAND WAS NEUTRAL GREY and is blue again on request: Results had no blue on it at all, which left
   the one page a visitor is sent to for proof looking unlike the rest of the site. The cards stay white
   panels on the dark band, which is the treatment the lever pages settled on. */
#page-results .casesband,#page-results .casesband.seam-flip{background-color:var(--navy)}
#page-results .casesband .sec-head h2{color:#fff}
#page-results .casesband .sec-head .eyebrow{color:var(--orange)}
#page-results .casesband .sec-head .eyebrow::before{background:var(--orange)}
#page-results .resultshero,#page-results .resultshero.seam-flip{background-color:#fff}
#page-results .trust,#page-results .trust.seam-flip{background-color:#fff}
#page-results #caselist .card{border:1px solid var(--n300);border-top:3px solid var(--orange);
  box-shadow:0 1px 0 rgba(13,36,64,.04)}
#page-results #caselist .card:hover{border-color:var(--navy);box-shadow:0 12px 30px rgba(13,36,64,.10);
  transform:translateY(-3px)}
.beliefs.plain{gap:44px}
.beliefs.plain .bel{background:none;border:0;padding:20px 0 0;position:relative}
.beliefs.plain .bel::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--orange)}
.beliefs.plain .bel p{font-size:var(--fs-body)}
.beliefs.one{grid-template-columns:1fr;gap:16px;align-content:start}
.beliefs.one .bel{background:transparent;border:1px solid var(--n300);border-top:2px solid var(--navy);
  transition:border-color .2s ease,background .2s ease}
.beliefs.one .bel:hover{border-color:var(--navy);background:rgba(255,255,255,.55)}
/* VISION AND MISSION ARE BOLD, on your comment. They were the same family, size and weight as the
   sentence under them, so each panel read as one block of text with no label on it. Bold is the only
   change: same navy, same size, so the two panels still count as one type size in the section. */
.beliefs.one .bel .k{color:var(--navy);font-weight:700}
.statrow.compact{grid-template-columns:repeat(3,auto);justify-content:start;gap:34px;margin-top:30px;
  padding-top:18px;border-top:1px solid var(--n300)}
.statrow.compact .stat{background:none;border:0;padding:0}
.statrow.compact .stat:hover{transform:none;box-shadow:none}
.statrow.compact .stat-n{font-size:var(--fs-num)}
.statrow.compact .stat-l{margin-top:4px;font-size:.6rem}
@media(max-width:560px){.statrow.compact{gap:22px}}
.indshot{background:#fff;border:1px solid var(--n200);padding:10px;margin-bottom:16px}
.indshot img{width:100%;height:auto;display:block}
@media(max-width:900px){.indshot{display:none}}
.statband{padding-top:8px}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.statrow{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--n200);border-top:3px solid var(--navy);padding:26px 26px 24px;
  transition:transform .2s ease,box-shadow .2s ease}
.stat:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(13,36,64,.08)}
.stat-n{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:var(--fs-num);color:var(--orange)}
.stat-l{display:block;margin-top:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n500)}
.beliefs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.beliefs{grid-template-columns:1fr}}
.bel{background:#fff;border:1px solid var(--n200);border-top:3px solid var(--orange);padding:24px 26px}
.bel p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--n700)}
.bel p b{color:var(--navy)}
.bel.bel-blue{border-top-color:var(--navy)}
/* ABOUT AND CONTACT ON THE BRAND BLUE. Three blocks moved onto the navy band, so the few things in them
   that were drawn for a light background need the dark-band equivalents. The convictions are plain text
   with an orange rule rather than cards, so they take the pale blue this site uses for body text on navy
   and white for the lead clause; the contact cards are white panels and need nothing. Measured on the
   navy: body text 7.6:1, the lead clause and the labels 10.9:1, the social buttons 10.9:1. */
.bg-ink .bel p,.bg-navy .bel p{color:#C9D9E7}
.bg-ink .bel p b,.bg-navy .bel p b{color:#fff}
.bg-ink .social,.bg-navy .social{border-top-color:rgba(255,255,255,.20)}
.bg-ink .social .k,.bg-navy .social .k{color:#9FB6CC}
.bg-ink .social a,.bg-navy .social a{color:#fff;border-color:rgba(255,255,255,.34)}
.bg-ink .social a:hover,.bg-navy .social a:hover{border-color:var(--orange);color:var(--orange)}
/* the social buttons on About are .sociallogos chips, which are white panels and stay as they are, except
   that their white background has to survive the .social a rule above */
.bg-ink .sociallogos a,.bg-navy .sociallogos a{background:#fff;color:var(--navy);border-color:var(--n200)}
.bg-ink .sociallogos a:hover,.bg-navy .sociallogos a:hover{border-color:var(--orange);color:var(--orange-deep)}
/* the social strip on About is a band with nothing in it but a label and three buttons, so it does not
   need the full 52px of a section plus the rule and margin the strip carries when it is the tail of a
   block. Without this it is about 300px of navy for three buttons. */
#about--block{padding:40px 0}
#about--block .social{margin-top:0;padding-top:0;border-top:0}
.evcard.static{cursor:default;text-align:left}
.dsource{margin:10px 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--n500)}
.methodband .chartmsg{border-top-color:rgba(255,255,255,.22)}
.methodband .chartmsg h2.q{color:#fff}
.methodband .chartmsg p.answer{color:#B9CCDD}
.methodband .chartmsg p.answer b{color:#fff}
section.bg-white{background:#fff}
/* ---------- redrawn slide diagrams (product pages) ---------- */
.dg{background:#fff;border:1px solid var(--n200);padding:16px 15px;overflow:hidden;color:#2A2A2A}
/* these cards sit on navy blocks as well as white ones, so they set their own text colour
   rather than inheriting the pale one the navy band hands down. */
.dg *{box-sizing:border-box}
.dgt{margin:0 0 4px;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--navy);letter-spacing:-.01em}
.dgs{margin:0 0 14px;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.dgn{margin:12px 0 0;font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;color:var(--n500)}

/* three chevrons: impulssum -> sales managers -> sales teams */
.chev{display:flex;gap:3px}
.chev>div{flex:1;position:relative;padding:26px 14px 18px;text-align:center;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%)}
.chev>div+div{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%);margin-left:-14px}
.chev b{display:block;margin-top:10px;font-family:var(--display);font-weight:400;font-size:1.05rem;color:#163E67}
.chev svg{display:block;margin:0 auto;height:104px;width:auto}
.dg .chevimg{display:block;width:100%;height:auto}
.chev .c1{background:#F4F7FC}.chev .c2{background:#DCE6F5}.chev .c3{background:#B9CCE9}

/* four coaching cards with a coloured cap */
.capcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.capcard{background:#F2F2F2;padding-top:0;display:flex;flex-direction:column}
.capcard>i{display:block;height:8px}
.capcard>div{background:#fff;margin:10px;padding:14px 10px 16px;text-align:center;flex:1}
.capcard h5{margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:.92rem;color:#163E67;line-height:1.25}
.capcard hr{border:0;border-top:1px solid var(--n200);margin:10px 18px}
.capcard .dur{font-family:var(--display);font-weight:700;font-size:.92rem;color:#2A2A2A;line-height:1.25}
.capcard p{margin:8px 0 0;font-size:.82rem;line-height:1.4;color:#3A3A3A}
.capcard svg{display:block;margin:0 auto;height:32px;width:auto}

/* sales funnel + activities + impact: funnel beside a three-column grid */
.fun{display:flex;gap:14px;align-items:stretch}
.funl{flex:0 0 30%;display:flex;flex-direction:column}
.funtitle{font-family:var(--display);font-weight:700;font-size:1.02rem;color:#7F7F7F;margin-bottom:8px;line-height:1.2}
.fshape{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:34px}
.fshape i{display:block;width:100%;flex:1;clip-path:polygon(var(--a) 0,calc(100% - var(--a)) 0,calc(100% - var(--b)) 100%,var(--b) 100%)}
.fshape svg{height:44px;margin-top:4px;flex:none}
.funr{flex:1;display:grid;grid-template-columns:1.2fr 52px 1fr;column-gap:12px;align-items:stretch}
.funhead{background:#163E67;color:#fff;font-family:var(--display);font-weight:700;font-size:.85rem;padding:7px 12px;display:flex;align-items:center}
.funrow{border-bottom:1px solid #C9D3E6;padding:8px 4px;min-height:48px;display:flex;align-items:center;
  font-family:var(--display);font-weight:700;font-size:.87rem;color:#163E67;line-height:1.25}
.funrow.imp{font-weight:400;color:#2A2A2A;font-family:inherit}
.funnum{display:grid;place-items:center}
.funnum span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.02rem}

/* maturity framework: one grid, so the grey column shares the blue rows */
/* ===================== ONE SCALER FOR EVERY VISUAL THAT MUST KEEP ITS SHAPE =====================
   A diagram whose meaning is in where things sit cannot be reflowed on a phone: move the boxes and the
   picture says something else. So each of these is drawn at its own design width and scaled down to fit
   whatever the screen gives it, exactly as it is on a desktop, only smaller. data-dw is that design
   width, and it is not the width the thing happens to have on a desktop: it is the narrowest width at
   which the layout still holds, measured per visual, because scaling from the narrowest one keeps the
   type as large as it can be. Above data-dw the wrapper does nothing at all, so the desktop is byte for
   byte what it was. The wrapper takes the scaled height, so no empty strip is left underneath. */
/* the diagram card gives its children a 680px minimum so they can scroll sideways inside it; a scaled
   visual brings its own fit, so it opts out or the wrapper measures 680 and barely scales at all */
.vfit{width:100%;min-width:0;max-width:100%}
.vfit.on{overflow:hidden}
.vfit.on>*{transform-origin:top left}
/* swipe sideways instead of shrinking, for a chart whose labels sit too close to survive a scale */
.vfit.vscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.vfit.vscroll>*{min-width:720px}
/* A MEDIA QUERY KEYS OFF THE VIEWPORT, NOT THE ELEMENT, so the mobile rules would still reach inside
   the wrapper and reflow the very thing the wrapper exists to hold still. This puts the desktop layout
   back for anything inside it, and it is itself inside the same breakpoint so it can never touch a
   desktop: above 860px not one of these declarations exists. */
@media(max-width:600px){
  /* ROOM, STEP ONE: on a phone the diagram card gives up most of the page gutter and some of its own
     padding, so the drawing gets about 340px of a 375px screen instead of 295. A sixth more of
     everything, and the visual itself is not touched at all. Phones only: a tablet has room already. */
  .dg:has(.vfit){margin-left:-16px;margin-right:-16px;padding-left:10px;padding-right:10px;max-width:none;width:auto}
}
@media(max-width:860px){
  .vfit .mfx{grid-template-columns:repeat(3,1fr) 1.02fr}
  .vfit .mfband{grid-column:span 3}
  .vfit .mfband.g{grid-column:span 1}
  .vfit .rmap{grid-template-columns:92px repeat(3,1fr)}
  .vfit .sizing{grid-template-columns:2.6fr .8fr .6fr .45fr}
  .vfit .fun{flex-direction:row}
  .vfit .funl{flex:0 0 30%}
  .vfit .roi{grid-template-columns:1fr 1fr}
  .vfit .lfw{grid-template-columns:1.35fr 1fr}

  /* MORE ROOM FIRST, BIGGER TYPE ONLY WHERE IT COSTS NOTHING.
     A scaled visual shrinks its own type with it, so a 10px desktop caption lands near 5px on a phone.
     Two things fix that, in this order.
     1. Room. On a phone the diagram card gives up most of the page gutter and some of its own padding,
        so the drawing gets about 340px instead of 295. That is a sixth more of everything, and it
        touches the visual not at all: same drawing, just less margin around it.
     2. Type, but only in the visuals that can take it. Raising a label inside a fixed design width
        makes it wrap, and a wrapped label pushes rows apart and changes the drawing's proportions.
        Measured at 375px, the three chart-like visuals below absorb a rise with no reflow at all
        (the account chart grows not one pixel taller at +40%). The maturity roadmap, the two topic
        grids and the funnel start clipping at +8%, so their type is left exactly as designed and they
        rely on room alone. */
  .vfit.on .roilab span{font-size:.96rem}
  .vfit.on .roiplot .rb b{font-size:1.07rem}
  .vfit.on .roip .pct{font-size:1.12rem}
  .vfit.on .roibadge{font-size:1.07rem}
  .vfit.on .amb i span{font-size:.95rem}
  .vfit.on .amv{font-size:.98rem}
  .vfit.on .amax span{font-size:.98rem}
  .vfit.on .lfx span{font-size:.75rem}
  .vfit.on .dgs{font-size:.75rem}
  .vfit.on .lfy span{font-size:.78rem}
  .vfit.on .lfkey span{font-size:.86rem}
}
.mfx{display:grid;grid-template-columns:repeat(3,1fr) 1.02fr;gap:10px;align-items:stretch}
.mfband{background:#2F5496;color:#fff;text-align:center;font-family:var(--display);font-weight:700;
  font-size:.82rem;padding:6px;grid-column:span 3;display:flex;align-items:center;justify-content:center}
.mfband.g{background:#707070;grid-column:span 1}
.mfc{background:#EDF1F9;display:flex;flex-direction:column}
.mfc.g{background:#F0F0F0}
.mfch{display:flex;align-items:center;gap:8px;background:#2F5496;color:#fff;padding:5px 8px;min-height:34px}
.mfc.g .mfch{background:#707070;justify-content:center;text-align:center}
.mfch b{width:22px;height:22px;border-radius:50%;background:#163E67;display:grid;place-items:center;font-size:.72rem;flex:none}
.mfch span{font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.2}
.mfc ul{margin:0;padding:8px 10px 10px 22px;flex:1}
.mfc li{font-size:.78rem;line-height:1.4;color:#2A2A2A;margin-bottom:2px}

/* two ROI panels */
.roi{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.roip{text-align:center}
.roip h5{margin:0 0 2px;font-family:var(--display);font-weight:700;font-size:.92rem;color:#163E67}
.roip .pct{font-style:italic;font-size:.86rem;color:#3A3A3A;margin-bottom:10px}
.roiplot{display:flex;align-items:flex-end;justify-content:center;gap:34px;min-height:170px;position:relative;padding-top:42px}
.roiplot .rb{width:92px;text-align:center}
.roiplot .rb i{display:block;background:#70AD47}
.roiplot .rb.sm i{background:#4472C4}
.roiplot .rb b{display:block;font-size:.82rem;color:#2A2A2A;margin-bottom:4px;font-weight:400;white-space:nowrap}
.roibadge{position:absolute;top:0;left:50%;transform:translateX(-50%);border:1px solid #7F7F7F;border-radius:40px;
  padding:3px 12px;font-family:var(--display);font-weight:700;font-size:.82rem;color:#163E67;background:#fff}
.roilab{display:flex;justify-content:center;gap:34px;margin-top:6px}
.roilab span{width:92px;font-size:.74rem;color:#5A5A5A}
.roiside{font-style:italic;font-size:.82rem;color:#3A3A3A}

/* seven-step arrow */
.stepar{position:relative;background:#E9EDF7;padding:16px 46px 16px 16px;
  clip-path:polygon(0 0,calc(100% - 42px) 0,100% 50%,calc(100% - 42px) 100%,0 100%)}
.steparg{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:stretch}
/* THE TEXT SITS IN THE MIDDLE OF EACH BOX, on your comment. The boxes stretch to the tallest of the
   seven, so a one-line step used to hang at the top of a box sized for a three-line one. Centred both
   ways now. The top padding stays above 13px, which is how far the number badge reaches into the box,
   so the longest step still clears it. */
.steparg>div{background:#43619F;color:#fff;padding:20px 8px 16px;position:relative;text-align:center;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.78rem;line-height:1.28}
.steparg>div b{position:absolute;top:-13px;left:8px;width:26px;height:26px;border-radius:50%;background:#fff;
  border:1px solid #43619F;color:#163E67;display:grid;place-items:center;font-size:.76rem}
/* ACCOUNT MANAGEMENT BLUEPRINT: three bands with one continuous path.
   The slide's PowerPoint blues are replaced by this site's own navy and one lighter shade of it, and the
   grey track by the brand orange, so the picture reads as ours rather than as a pasted slide. The path is
   one line: it runs across the first band, curves down on the right into the second, runs back along it,
   curves down on the left into the third and ends in an arrow head at the trophy. The curves are the
   right-hand and left-hand borders of two boxes, so the whole thing stays responsive with no SVG overlay
   to keep in register. Geometry is driven by three custom properties: --amt is where the track sits
   inside a band, --amh is a band's height and --amg the gap between bands, so the loops can be sized
   from them. Band colours: white on the navy is 10.9:1, white on the lighter shade 7.2:1, and the orange
   track clears 3:1 on both, which is the floor for a graphic that carries meaning. */
.ammap{--am1:#163E67;--am2:#2A5A88;--amt:76px;--amh:170px;--amg:5px;
  display:flex;flex-direction:column;gap:var(--amg);position:relative;padding:0 72px}
.amrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.amrow>div{background:var(--am2);color:#fff;padding:18px 10px 16px;text-align:center;position:relative;
  min-height:var(--amh)}
.amrow.r1>div,.amrow>div.dark{background:var(--am1)}
/* the second band is read from right to left, so its four panels are placed in reverse while the markup
   keeps them in the order the process runs. On narrow screens the placement is dropped and the markup
   order is what shows. */
.amrow.r2>div{grid-row:1}
.amrow.r2>div:nth-child(1){grid-column:4}
.amrow.r2>div:nth-child(2){grid-column:3}
.amrow.r2>div:nth-child(3){grid-column:2}
.amrow.r2>div:nth-child(4){grid-column:1}
.amrow::after{content:'';position:absolute;left:0;right:0;top:var(--amt);height:8px;background:var(--orange);
  transform:translateY(-50%);z-index:1}
.amloop{position:absolute;box-sizing:border-box;border:8px solid var(--orange);width:50px;
  top:calc(var(--amt) - 4px);height:calc(var(--amh) + var(--amg) + 8px);z-index:1}
.amloop.rt{left:100%;border-left:0;border-radius:0 46px 46px 0}
.amloop.lt{right:100%;border-right:0;border-radius:46px 0 0 46px}
.amtip{position:absolute;left:100%;top:var(--amt);transform:translateY(-50%);width:0;height:0;
  border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:21px solid var(--orange);z-index:1}
.amflag,.amtro{position:absolute;top:var(--amt);width:36px;height:36px;z-index:2}
.amflag{right:100%;transform:translate(-13px,-50%)}
.amtro{left:100%;transform:translate(28px,-50%)}
.amic{display:block;width:32px;height:32px;margin:0 auto;color:#fff;opacity:.94;position:relative;z-index:2}
.amdot{position:absolute;left:50%;top:var(--amt);width:13px;height:13px;border-radius:50%;background:#fff;
  border:2.5px solid var(--orange);transform:translate(-50%,-50%);z-index:3}
.dgn .narrow{display:none}
.amrow b{position:relative;z-index:2;display:block;margin-top:46px;font-family:var(--display);font-weight:700;
  font-size:.87rem;line-height:1.25}
@media(max-width:1040px){
  .ammap{--amt:70px;--amh:156px;padding:0 60px}
  .amloop{width:40px;border-width:7px;border-radius:0 38px 38px 0}
  .amloop.lt{border-radius:38px 0 0 38px}
  .amrow::after{height:7px}
  .amic{width:28px;height:28px}
  .amrow b{margin-top:42px;font-size:.8rem}
  .amflag,.amtro{width:30px;height:30px}
}
/* BELOW 880px the serpentine cannot be drawn without the panels becoming too narrow to read, so the path
   is dropped and the twelve steps are shown as tiles in the order the process runs, which is the order
   they are written in the markup. */
@media(max-width:880px){
  .ammap{padding:0;--amh:0}
  .amrow{grid-template-columns:repeat(2,1fr);gap:4px}
  .amrow+.amrow{margin-top:0}
  .amrow>div{min-height:0;padding:14px 10px 14px}
  .amrow.r2>div:nth-child(1),.amrow.r2>div:nth-child(2),
  .amrow.r2>div:nth-child(3),.amrow.r2>div:nth-child(4){grid-column:auto;grid-row:auto}
  .dgn .wide{display:none}
  .dgn .narrow{display:inline}
  .amrow::after,.amloop,.amtip,.amflag,.amtro,.amdot{display:none}
  .amrow b{margin-top:10px;font-size:.82rem}
}

/* maturity roadmap grid */
.rmap{display:grid;grid-template-columns:92px repeat(3,1fr);gap:0}
.rmh{background:transparent}
.rmb{background:#F1876B;color:#fff;text-align:center;font-family:var(--display);font-weight:700;font-size:.78rem;padding:4px}
.rml{display:flex;align-items:center;justify-content:flex-end;padding:6px 8px;text-align:right;
  font-family:var(--display);font-weight:700;font-size:.74rem;color:#2A2A2A;line-height:1.15}
.rmc{display:flex;flex-wrap:wrap;gap:4px;align-content:center;padding:5px 6px;border-left:1px solid #fff;min-height:34px}
.rml.alt,.rmc.alt{background:#E7E7E7}
.rmc span{background:#163E67;color:#fff;border-radius:20px;padding:3px 10px;font-family:var(--display);
  font-weight:700;font-size:.68rem;white-space:nowrap}

/* pricing sizing table */
.sizing{display:grid;grid-template-columns:2.6fr .8fr .6fr .45fr;gap:4px}
.szh{background:#163E67;color:#fff;text-align:center;font-family:var(--display);font-weight:700;font-size:.7rem;padding:4px}
.szc{border:1px solid #163E67;padding:4px 7px}
.szc.mid{display:grid;place-items:center;text-align:center;font-size:.7rem;line-height:1.22}
.szc.big{font-family:var(--display);font-weight:700;font-size:.84rem;color:#163E67}
.szc b{font-family:var(--display);font-weight:700;font-size:.72rem;color:#163E67}
.szc ul{margin:3px 0 0;padding-left:15px}
.szc li{font-size:.61rem;line-height:1.26;color:#2A2A2A}
.pie{display:block;width:22px;height:22px;border-radius:50%;border:1px solid #163E67}

/* 360 ring + three cards */
.ringwrap{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:center}
.ringwrap>div:first-child,.ringwrap>.ring{padding:0 118px}
.ringwrap>.ring{margin:30px auto 46px;max-width:230px}
.ring{position:relative;width:100%;max-width:250px;aspect-ratio:1;margin:18px auto 34px;border-radius:50%;
  background:conic-gradient(#163E67 0 16.6%,#163E67 16.6% 33.3%,#163E67 33.3% 50%,#BDD0E9 50% 66.6%,#BDD0E9 66.6% 83.3%,#BDD0E9 83.3% 100%)}
.ring::before{content:'';position:absolute;inset:26%;border-radius:50%;background:#fff}
.ring::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#fff 0 1deg,transparent 1deg 60deg,#fff 60deg 61deg,transparent 61deg 120deg,#fff 120deg 121deg,transparent 121deg 180deg,#fff 180deg 181deg,transparent 181deg 240deg,#fff 240deg 241deg,transparent 241deg 300deg,#fff 300deg 301deg,transparent 301deg 360deg)}
.ringc{position:absolute;inset:32%;border-radius:50%;background:#F1876B;color:var(--navy);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.4rem;z-index:3}
.rlab{position:absolute;display:flex;align-items:center;gap:6px;font-size:.72rem;line-height:1.25;color:#2A2A2A;width:118px;z-index:3}
.rlab b{width:22px;height:22px;border-radius:50%;background:#163E67;color:#fff;display:grid;place-items:center;font-size:.7rem;flex:none}
.rlab.r4 b,.rlab.r5 b,.rlab.r6 b{background:#BDD0E9;color:#163E67}
/* EVERY NUMBER SITS ON ITS WEDGE'S CENTRE LINE, on your second comment. The first pass put the labels
   level with each wedge, which got them inside the right wedge but not on its line: snapping them to the
   left and right edges of the ring pulls a 30-degree label towards the horizontal, so 30 measured 53 and
   330 measured 302. They are now placed radially instead. The ring is six 60-degree wedges from twelve
   o'clock, so the centre lines are 30, 90, 150, 210, 270 and 330 degrees; each label carries the sine and
   cosine of its own angle and is pushed out along that line to --k past the edge of the ring, with the
   number itself, not the label box, landing on the line. The radius is half the ring, so this holds at
   every size the ring is drawn at. */
.rlab{--k:26px}
.rlab.r1{--sin:.5;--cos:.866}
.rlab.r2{--sin:1;--cos:0}
.rlab.r3{--sin:.5;--cos:-.866}
.rlab.r4{--sin:-.5;--cos:-.866}
.rlab.r5{--sin:-1;--cos:0}
.rlab.r6{--sin:-.5;--cos:.866}
.rlab.r1,.rlab.r2,.rlab.r3{
  left:calc(50% + 50%*var(--sin) + var(--k)*var(--sin) - 11px);
  top:calc(50% - 50%*var(--cos) - var(--k)*var(--cos));
  transform:translateY(-50%)}
.rlab.r4,.rlab.r5,.rlab.r6{
  left:calc(50% + 50%*var(--sin) + var(--k)*var(--sin) + 11px);
  top:calc(50% - 50%*var(--cos) - var(--k)*var(--cos));
  transform:translate(-100%,-50%);
  /* row-reverse puts the main start on the right, so flex-start is what holds the number against the
     right edge; flex-end let short labels like "Data for monitoring" drift inboard and pulled 330 to 321 */
  justify-content:flex-start;text-align:right;flex-direction:row-reverse}
.pcards{display:flex;flex-direction:column;gap:12px}
.pcard{display:grid;grid-template-columns:30px 150px 1fr;gap:10px;align-items:center}
.pcard>b{width:28px;height:28px;border-radius:50%;background:#163E67;color:#fff;display:grid;place-items:center;font-size:.8rem}
.pbox{background:#163E67;color:#fff;text-align:center;padding:14px 8px;font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.25}
.pcard ul{margin:0;padding-left:16px}
.pcard li{font-size:.8rem;line-height:1.4;color:#2A2A2A;margin-bottom:2px}
.pcard li::marker{color:#F1876B}
/* account management quarterly chart */
.amc{position:relative}
.amdelta{position:relative;height:40px;margin:0 16% 0 14%}
.amarrow{position:absolute;left:0;right:0;top:20px;height:1px;background:#2A2A2A}
.amarrow::before,.amarrow::after{content:'';position:absolute;top:0;width:1px;height:14px;background:#2A2A2A}
.amarrow::before{left:0}.amarrow::after{right:0}
.ambox{position:absolute;left:50%;top:0;transform:translateX(-50%);border:1px dashed #6FA14A;background:#fff;
  padding:3px 12px;text-align:center}
.ambox b{display:block;font-family:var(--display);font-weight:700;font-size:.86rem;color:#163E67;line-height:1.3}
.ambr{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:6px 0 14px;text-align:center}
.ambr>div{border-top:1px solid #BFBFBF;padding-top:6px;font-size:.78rem;color:#2A2A2A}
.ambr b{font-family:var(--display);font-weight:700;color:#163E67}
.amplot{display:flex;gap:8px;height:240px;margin-top:4px}
.amax{position:relative;width:34px;flex:none}
.amax span{position:absolute;right:0;transform:translateY(-50%);font-size:.7rem;color:#5A5A5A}
.amarea{position:relative;flex:1;border-left:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF}
.ambars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-around}
.amb{position:relative;width:7.6%;height:100%}
.amb i{position:absolute;left:0;right:0;display:grid;place-items:center}
.amprj{background:#9DB1CF}
.amarr{background:#4A66A8;bottom:0}
.amb i span{color:#fff;font-size:.68rem;font-weight:600}
.amv{position:absolute;left:-6px;right:-6px;text-align:center;font-size:.7rem;color:#2A2A2A;
  transform:translateY(-118%)}
.amsvg{position:absolute;inset:0;width:100%;height:100%}
.amsvg polyline{fill:none;stroke:#9A9A9A;stroke-width:1.6}
.ammark{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed #9A9A9A}
.ammarkl{position:absolute;left:50%;top:-2px;transform:translateX(-50%);background:#fff;border:1px solid #D9D9D9;
  padding:2px 8px;font-size:.66rem;color:#3A3A3A;text-align:center;line-height:1.2}
.amxw{display:flex;gap:8px}
.amxw>.sp{width:34px;flex:none}
.amx{flex:1;display:flex;justify-content:space-around;margin:4px 0 0}
.amx span{width:7.6%;text-align:center;font-family:var(--display);font-weight:700;font-size:.74rem;color:#2A2A2A}
.amleg{display:flex;gap:18px;justify-content:flex-end;margin-top:10px}
.amleg span{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#3A3A3A}
.amleg i{width:14px;height:10px;display:block}
.amleg i.ln{height:2px;background:#9A9A9A}

/* value based pricing: three cards + loop */
.vbcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vbc{background:#EDF1FA;border-left:6px solid #5B7FC7;padding:16px 14px;text-align:center}
.vbc h5{margin:0;font-family:var(--display);font-weight:700;font-size:.98rem;color:#3B62B0;line-height:1.25}
.vbc hr{border:0;border-top:1px solid #9BB0DC;margin:10px 26px}
.vbc p{margin:0;font-size:.82rem;line-height:1.45;color:#2A2A2A}
.vbloop{display:flex;align-items:center;gap:0;margin-top:14px}
.vbl,.vbr{flex:1;height:2px;background:#5B7FC7;position:relative}
.vbl::before{content:'';position:absolute;left:0;top:-14px;width:2px;height:14px;background:#5B7FC7}
.vbr::before{content:'';position:absolute;right:0;top:-14px;width:2px;height:14px;background:#5B7FC7}
.vbpill{background:#5B7FC7;color:#fff;border-radius:60px;padding:9px 26px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:.86rem;line-height:1.25}

/* four-stage timeline */
.vtl{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;position:relative;padding:8px 0;gap:0 14px}
.vtl::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:#5B7FC7;z-index:0}
.vtc{grid-row:2;padding-top:26px;text-align:center;position:relative}
.vtc.t{grid-row:1;padding:0 0 26px}
.vtc::after{content:'';position:absolute;left:50%;width:13px;height:13px;border-radius:50%;background:#5B7FC7;
  transform:translateX(-50%)}
.vtc::after{top:-7px}
.vtc.t::after{top:auto;bottom:-7px}
.vtc b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:#3B62B0}
.vtc p{margin:6px 0 0;font-size:.8rem;line-height:1.42;color:#3A3A3A}

/* top-down / goal / bottom-up */
.tdw{display:flex;flex-direction:column;align-items:center;gap:6px}
.td{width:100%;padding:16px 26px;color:#fff;text-align:center}
.td.t{background:#8AA3D4;clip-path:polygon(4% 0,96% 0,88% 100%,12% 100%)}
.td.b{background:#8AA3D4;clip-path:polygon(12% 0,88% 0,96% 100%,4% 100%)}
.td.g{background:#3B62B0;width:78%}
.td b{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem}
.td span{display:block;font-size:.95rem;margin-top:2px}
.td ul{margin:8px 0;padding-left:0;list-style:none;display:inline-block;text-align:left}
.td li{font-size:.9rem;line-height:1.5;position:relative;padding-left:16px}
.td li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:#fff}

/* your company / competition / customers */
.vbmap{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:0}
.vbleft{display:flex;flex-direction:column;gap:26px;padding-bottom:6px}
.vbstack{position:relative;height:215px}
.vbstack .vbx{position:absolute;width:82%}
.vbstack .s1{left:0;top:0}.vbstack .s2{left:8%;top:14px}.vbstack .s3{left:16%;top:28px}
.vbx{background:#163E67;border-radius:12px;padding:8px}
.vbx b{display:block;color:#fff;text-align:center;font-family:var(--display);font-weight:700;font-size:.9rem;margin-bottom:6px}
.vbx span{display:block;background:#2A6CBD;color:#fff;text-align:center;padding:7px 6px;font-size:.86rem;
  border-bottom:1px solid #163E67}
.vbx span:last-child{border-bottom:0}
.vbarrows svg{width:100%;height:190px}
.vbarrows .ar{fill:none;stroke:#163E67;stroke-width:3;marker-end:none}
.vbright{align-self:center}

/* lead funnel overview */
.lfo{display:flex;flex-direction:column;gap:12px}
.lfr p{margin:0 0 5px;display:flex;align-items:baseline;font-size:.84rem;color:#2A2A2A}
.lfr p span{flex:1}
.lfr p b{font-family:var(--display);font-weight:700;color:#163E67}
.lfr p em{font-style:normal;color:#8A8A8A;font-size:.78rem;margin-left:5px}
.lft{height:6px;border-radius:4px;background:#EDEDED;overflow:hidden}
.lft i{display:block;height:100%;border-radius:4px}

/* ELEVEN AUTOMATION USE CASES AROUND ONE ARROW, in our own colours.
   The slide's PowerPoint blue and pale blue number discs are replaced by the same two tones the account
   management blueprint uses, so the two redrawn slides read as one family: the brand navy for the arrow
   that carries the sentence, and one lighter shade of the same navy for the eleven cards. The number
   discs are the brand orange with navy figures, which is the one accent this site uses and which makes
   the sequence, not the cards, the thing the eye follows. White on the cards is 7.2:1, navy on the
   orange disc 4.6:1, and the sentence in the arrow takes the same pale blue the site uses for secondary
   text on navy, at 7.6:1. */
.ucw{display:grid;grid-template-columns:1fr 1.25fr .85fr;gap:12px;align-items:start}
.ucc{display:flex;align-items:center;gap:9px;background:#2A5A88;color:#fff;padding:9px 12px;margin-bottom:8px;
  border-left:3px solid var(--orange)}
.ucc b{width:22px;height:22px;border-radius:50%;background:var(--orange);color:var(--navy);display:grid;
  place-items:center;font-size:.7rem;font-weight:700;flex:none}
.ucc span{font-size:.88rem}
.ucarrow{background:var(--navy);color:#fff;text-align:center;padding:26px 30px 26px 18px;
  clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%)}
.ucarrow b{display:block;font-family:var(--display);font-weight:700;font-size:1.25rem}
.ucarrow i{display:block;margin-top:8px;font-size:.86rem;line-height:1.4;color:#C9D9E7}
.ucb{margin-top:12px}
.ucr{padding-top:4px}
/* lead funnel: the traced weekly chart beside the printed overview */
.lfw{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.lfl,.lfr2{background:#fff}
.lfchart{position:relative;padding-left:26px;height:210px;margin-top:6px}
.lfy{position:absolute;left:0;top:0;bottom:0;width:22px}
.lfy span{position:absolute;right:0;transform:translateY(50%);font-size:.6rem;color:#9A9A9A}
.lfchart svg{width:100%;height:100%;overflow:visible}
.lfchart svg path{fill:none;stroke-width:5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.lfgrid line{stroke:#EFEFEF;stroke-width:1;vector-effect:non-scaling-stroke}
.lfx{display:flex;margin:8px 0 0 26px}
.lfx span{flex:1;text-align:center;font-size:.58rem;line-height:1.3;color:#8A8A8A}
.lfkey{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0 26px}
.lfkey span{display:flex;align-items:center;gap:5px;font-size:.66rem;color:#4A4A4A}
.lfkey i{width:11px;height:11px;border-radius:3px;display:block}
@media(max-width:860px){
  .capcards,.roi{grid-template-columns:1fr 1fr}
  .mfx{grid-template-columns:1fr 1fr}
  .mfband,.mfband.g{grid-column:span 2}
  /* THE SEVEN STEPS KEEP THEIR DIRECTION. Two columns read as a 4+3 table, and dropping the clip-path
     turned the arrow into a plain rectangle, so the sequence stopped being a sequence. One column now,
     in order, with every point rotated a quarter turn to aim down the page instead of across it. */
  .steparg{grid-template-columns:1fr;gap:24px}
  .steparg>div{padding:42px 12px 26px;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px))}
  /* the number badge moves inside the box: a clip-path clips its own children, so a badge hanging
     13px above the box would be cut in half by the arrow shape. Same badge, same size, same colours. */
  .steparg>div b{top:10px;left:50%;transform:translateX(-50%)}
  .stepar{clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),50% 100%,0 calc(100% - 34px));padding:16px 16px 52px}
  .fun{flex-direction:column}
  .funl{flex:none}
  .sizing{grid-template-columns:1fr}
  .ringwrap{grid-template-columns:1fr}
  .pcard{grid-template-columns:26px 1fr}
  .pcard .pbox{grid-column:2}
  .pcard ul{grid-column:2}
  .vbcards{grid-template-columns:1fr}
  /* THE TIMELINE STANDS UP INSTEAD OF DISAPPEARING. It used to drop its spine and its four dots on a
     phone and become four unconnected paragraphs, which is not the same picture. Same four steps in the
     same order, same colours, same type: the line simply runs down the left and the dots sit on it. */
  .vtl{grid-template-columns:1fr;grid-template-rows:none;gap:0;padding:6px 0 6px 24px}
  .vtl::before{left:5px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .vtc,.vtc.t{grid-row:auto;grid-column:1!important;text-align:left;padding:11px 0 11px 14px}
  .vtc::after,.vtc.t::after{left:-24px;top:17px;bottom:auto;transform:none}
  .vbmap{grid-template-columns:1fr}
  .vbarrows{display:none}
  .ucw{grid-template-columns:1fr}
  .lfw{grid-template-columns:1fr}
  .ucarrow{clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);padding:22px 18px 42px}
  .rmap{grid-template-columns:80px 1fr}
  .chev{flex-direction:column}
  .chev>div,.chev>div+div{clip-path:none;margin-left:0}
}
/* two capability cards side by side still did not fit a 320px screen and lost 14px off the edge. */
@media(max-width:400px){.capcards{grid-template-columns:1fr}}
/* ---------- end redrawn slide diagrams ---------- */
/* ---------- insight detail pages ---------- */
.artgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:start}
.artpic{margin:0 0 4px;border:1px solid var(--n200);background:#fff;overflow:hidden;max-width:540px}
.artpic.plain{border:0;background:transparent;max-width:460px}
.artpic img,.artpic svg{display:block;width:100%;height:auto}
.artfig{margin:18px 0 20px;border:1px solid var(--n200);overflow:hidden;max-width:460px}
.artfig svg{display:block;width:100%;height:auto}
.artdate{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#2C5478;margin-top:12px}
.h1k{font-weight:400;color:var(--n600)}
.artbody{max-width:70ch;margin-left:0;margin-right:0}
section.artsec{padding:44px 0}
section.hero+section.artsec{padding-top:8px}
.artbody h2{font-size:var(--fs-title);margin:38px 0 14px;position:relative;padding-top:18px}
.artbody h2:first-child{margin-top:0}
.artbody h2::before{content:'';position:absolute;top:0;left:0;width:34px;height:3px;background:var(--orange)}
.artbody h3{font-size:var(--fs-body);margin:26px 0 10px;color:var(--navy);font-family:var(--display);font-weight:700}
.artbody p{margin:0 0 14px;font-size:var(--fs-body);line-height:1.68}
.artbody .blist,.artbody .plan,.artbody .ticks{margin:0 0 16px}
.artbody .blist li,.artbody .plan li,.artbody .ticks li{font-size:var(--fs-body);line-height:1.6}
.artbody .sub{display:block;font-weight:400;color:var(--n700)}
.ticks{list-style:none;display:grid;gap:8px;margin:0}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:'';position:absolute;left:0;top:.36em;width:13px;height:13px;border-radius:3px;
  background:var(--navy)}
.ticks li::after{content:'';position:absolute;left:4px;top:.55em;width:5px;height:2px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg)}
.plan{padding-left:20px;display:block}
.plan li{margin-bottom:8px}
.ctbl-wrap{overflow-x:auto;margin:20px 0 24px}
.ctbl{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-body)}
.ctbl th,.ctbl td{border:1px solid var(--n300);padding:10px 12px;text-align:left;vertical-align:top}
.ctbl thead th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700}
.ctbl tbody th{background:var(--n100);font-weight:700;color:var(--navy);width:22%}
.ctbl.adv tbody tr.hd th{text-align:center;font-family:var(--display)}
.ctbl.adv tbody tr.hd.good th{background:#E4F3E6;color:#1F6B34}
.ctbl.adv tbody tr.hd.bad th{background:#FBE7E2;color:#9A3419}
.ctbl.adv ul{margin:0;padding-left:16px}
.ctbl.adv li{margin-bottom:5px;line-height:1.45}
.csgrid{display:grid;grid-template-columns:.4fr 1fr;gap:44px;align-items:start}
.csgrid h2{margin:0}
.csgrid .lead{max-width:64ch}
.docget{margin-top:26px;max-width:30em}
.docget .sm{margin-bottom:16px}
.pwtext p{margin:0 0 14px;font-size:var(--fs-body);line-height:1.62}
.pwtext p:last-child{margin-bottom:0}
@media(max-width:900px){.artgrid{grid-template-columns:1fr;gap:26px}.csgrid{grid-template-columns:1fr;gap:16px}}
/* ---------- end insight detail pages ---------- */
.qlab{margin-top:30px;margin-bottom:-6px}
.qlab[hidden]{display:none}
.expertband{background:#fff}
/* a quote band asked to be navy stays navy: .expertband is declared after .bg-ink and
   would otherwise win on source order, leaving pale text on white. */
section.expertband.bg-ink,section.expertband.bg-navy{background:var(--navy-deep)}
.illus{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-deep);border:1px solid var(--orange);padding:1px 5px;margin-left:8px}
.chartmsg{margin-top:18px;padding-top:16px;border-top:1px solid var(--n200)}
.chartmsg h2.q{margin-top:0;font-size:1rem}
.chartmsg p.answer{font-size:var(--fs-body);margin-top:8px;line-height:1.55}
.evcard{font:inherit;text-align:left;cursor:pointer;width:100%}
.evcard:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.evhint{margin:18px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:#8FA8BF}
/* the three lever pages share one Results design; it sizes to however many cases each has.
   Scoped away from the homepage, whose six cards are a deliberate single row. */
#page-price .resultsband .evgrid,#page-volume .resultsband .evgrid,#page-cost .resultsband .evgrid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
/* Cut cost of sales has two cases, not four. Sized to a quarter of the row so the cards match
   Raise price card for card, and centred so the row does not read as two missing cards. */
@media(min-width:1041px){
  /* Cut cost of sales has three cases: they fill the row rather than sitting at quarter width in
     the middle of it. */
  #page-cost .resultsband .evgrid{grid-template-columns:repeat(3,1fr)}
  #page-about .resultsband .evgrid{
    grid-template-columns:repeat(3,minmax(0,calc(25% - 14px)));justify-content:center}}
@media(max-width:560px){#page-price .resultsband .evgrid,#page-volume .resultsband .evgrid,
  #page-cost .resultsband .evgrid{grid-template-columns:1fr}}
.cta-go{display:block;margin-top:14px;font-family:var(--display);font-weight:600;font-size:var(--fs-body);
  color:var(--orange-deep);transition:.14s}
.card:hover .cta-go,.icard:hover .cta-go,a.card:hover .cta-go{color:var(--orange)}
.icard .cta-go{padding:0 18px}
.postcard .cta-go,.evcard .cta-go{padding:0}

.caselink{margin-top:14px;padding-top:12px;border-top:1px solid var(--n200)}
.caselink a{font-family:var(--display);font-weight:600;font-size:var(--fs-body);letter-spacing:0;text-transform:none;
  color:var(--orange-deep)}
.caselink a:hover{color:var(--orange)}
.chip{color:var(--orange-deep)}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.related a{color:var(--navy)}
.related a:hover{color:var(--orange-deep)}
.cb-go{color:var(--orange)}

.ligrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.ligrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ligrid{grid-template-columns:1fr}}
.lipost{display:flex;flex-direction:column;border:1px solid var(--n200);background:#fff;overflow:hidden;transition:.16s}
.lipost:hover{border-color:var(--orange)}
/* SQUARE RATHER THAN 1.91/1, on your comment. The old shape was the link-preview ratio, which is
   what a shared article looks like; an actual LinkedIn post is taller than it is wide, so the tile
   now reserves something nearer the space the real embed will need. */
.lipost-tile{aspect-ratio:1/1;background:var(--navy);display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 20px;text-decoration:none;position:relative;overflow:hidden}
.lipost-tile::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 78% 22%,rgba(249,137,107,.30),transparent 58%)}
.li-mark{font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff;line-height:1;position:relative;z-index:1}
.li-cap{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#9FB4CA;position:relative;z-index:1}
.lipost-txt{padding:14px 20px 16px;display:flex;flex-direction:column;flex:1}
.lipost-txt .cta-go{margin-top:auto;padding-top:0}

.artthumb{display:block;aspect-ratio:16/9;background:var(--navy);overflow:hidden;position:relative}
.artthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}
.icard:hover .artthumb img{transform:scale(1.03)}
.artthumb.noimg::after{content:'';position:absolute;inset:0;background:var(--navy);
  background-image:radial-gradient(circle at 78% 24%,rgba(249,137,107,.34),transparent 58%)}
.icard .artthumb+.klabel{margin-top:16px}

/* ===== BLOCK SEAMS — no two touching sections share a background, and each section starts
   with a soft gradient off the one above it. ===== */
section{--seam:rgba(13,36,64,.055)}
section.bg-navy,section.bg-ink,section.scanband{--seam:rgba(255,255,255,.07)}
section+section{background-image:linear-gradient(180deg,var(--seam),transparent 130px)}
footer{background-image:linear-gradient(180deg,rgba(255,255,255,.07),transparent 130px)}
section.hero+section.bg-n100,
section.bg-n100+section.bg-n100,
section.bg-n50+section.bg-n50,
section.bg-n100+section.bg-n50,
section.bg-n50+section.bg-n100{background-color:#fff}
section.seam-flip{background-color:#fff}
section.bg-navy.seam-flip,section.bg-ink.seam-flip,section.scanband.seam-flip{background-color:var(--navy-deep)}
section.seam-flip.seam-flip2{background-color:var(--n100)}
section.bg-navy.seam-flip.seam-flip2,section.bg-ink.seam-flip.seam-flip2{background-color:var(--navy)}
section.seam-flip:not([class*="bg-"]):not(.trust){background-color:var(--n100)}
section.bg-n100.seam-flip,section.trust.seam-flip,section.hero.seam-flip{background-color:#fff}

/* ===== seam resolution, last word in the sheet so nothing overrides it =====
   Two light blocks that would touch: the second goes grey. Two dark blocks that would touch:
   they stay the one brand blue (Marc's rule) and get a hairline of light at the join instead. */
section.seam-flip.seam-flip2,
section.bg-n100.seam-flip.seam-flip2,
section.trust.seam-flip.seam-flip2,
section.hero.seam-flip.seam-flip2{background-color:var(--n100)}
section.bg-navy.seam-flip,section.bg-ink.seam-flip,section.scanband.seam-flip{
  background-color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}

/* ===== PRODUCT PAGES, FIVE-BLOCK STRUCTURE (Sales COACH, Pricing Opportunity Scan) ===== */
.pfilm{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--orange);padding-bottom:3px;transition:.15s}
.pfilm:hover{color:var(--orange-deep)}
.pfilm i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--navy);display:inline-grid;place-items:center;flex:none;position:relative}
.pfilm i::after{content:'';margin-left:2px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--navy)}
.pfilm:hover i{border-color:var(--orange-deep)}
.pfilm:hover i::after{border-left-color:var(--orange-deep)}
.pkpi{box-shadow:0 26px 64px -42px rgba(13,36,64,.55)}
.pkpi .mwf{margin-top:18px}
.pkpi .mwfrow{grid-template-columns:150px 1fr 46px}
.pkpi .micro{margin-top:14px}
.pkpi .ibleg{margin-top:12px}
.psym .card{padding:22px 24px 20px;border-top:3px solid var(--orange);display:flex;flex-direction:column;gap:10px}
.psym .psn{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--n500)}
.psym .card p{font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:var(--navy);line-height:1.4;letter-spacing:-.01em;margin:0}
.pget{grid-template-columns:1fr 1.45fr;gap:44px;align-items:start}
.capcards.two{grid-template-columns:1fr 1fr}
.capcards.two .capcard>div{padding-bottom:14px}
.pcards.short .pcard{grid-template-columns:30px 130px 1fr}
.pclose{margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.pclose p{margin:0;font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:#fff;max-width:30em}
@media(max-width:900px){.pget{grid-template-columns:1fr;gap:30px}.psym{grid-template-columns:1fr!important}.pclose{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.capcards.two{grid-template-columns:1fr}.pkpi .mwfrow{grid-template-columns:110px 1fr 40px}}
/* the 360 ring needs room on both sides for its six labels, so beside the What you get column it
   stacks: ring centred on top, the three step cards in a row underneath */
.pget .ringwrap{grid-template-columns:1fr;gap:10px}
.pget .ringwrap>.ring{margin:36px auto 56px;max-width:230px;padding:0}
.pget .ringwrap>div:first-child{padding:0 130px}
.pget .pcards.short{flex-direction:row;gap:12px;align-items:stretch}
.pget .pcards.short .pcard{display:block;flex:1;min-width:0}
.pget .pcards.short .pcard>b{margin-bottom:8px}
.pget .pcards.short .pbox{margin-bottom:8px}
@media(max-width:560px){.pget .pcards.short{flex-direction:column}.pget .ringwrap>div:first-child{padding:0 110px}}
/* THE RING HAS TO FIT ITS OWN LABELS ON A PHONE. Six labels need room on both sides, so the diagram
   is as wide as the ring plus twice the label, and at 230px with 118px labels that is 490px against the
   310px a phone column gives it: the left and right labels were cut off at the edge of the card. Below
   760px the whole diagram scales to fit instead, ring and labels together, so it stays a diagram rather
   than a cropped one. The three step cards underneath carry the same wording at full size. */
/* BETWEEN 870 AND 960 THE RING SAT BESIDE THE STEP CARDS in a column too narrow for its own labels,
   and "Price realisation and margin management" ran off the left edge of the card. The two columns now
   stack from 980px rather than 860px, which gives the ring the full width and the label room to sit. */
@media(max-width:980px){.ringwrap{grid-template-columns:1fr}}
@media(max-width:760px){
  /* the 118px side padding is what actually sets the ring's width, not max-width, so it has to go
     here or the circle stays 236px wide whatever the max-width says */
  .ringwrap>div.ring,.pget .ringwrap>div.ring{max-width:150px;padding:0;margin:26px auto 30px}
  .rlab{width:74px;font-size:.62rem;gap:4px;--k:8px}
  .rlab b{width:19px;height:19px;font-size:.62rem}
  /* the hub shrinks with the ring, so "6 steps" has to come down with it or it spills the circle */
  .ringwrap .ringc{font-size:.8rem;line-height:1.15;text-align:center;padding:2px}
  .rlab.r1,.rlab.r2,.rlab.r3{left:calc(50% + 50%*var(--sin) + var(--k)*var(--sin) - 9.5px)}
  .rlab.r4,.rlab.r5,.rlab.r6{left:calc(50% + 50%*var(--sin) + var(--k)*var(--sin) + 9.5px)}
}
/* ON THE NARROWEST PHONES the ring plus its two side labels came to 336px inside a 304px card, so the
   left and right labels ran under the card edge and lost their first characters. The ring gives up the
   difference: smaller circle, slightly narrower labels, same six wedges at the same six angles. */
@media(max-width:360px){
  .ringwrap>div.ring,.pget .ringwrap>div.ring{max-width:124px;margin:22px auto 26px}
  .rlab{width:66px;font-size:.58rem;--k:6px}
  .rlab b{width:17px;height:17px;font-size:.58rem}
  .ringwrap .ringc{font-size:.72rem}
}
.pkpi .wkbar i{overflow:hidden;min-width:0}
@media(max-width:700px){.pkpi .wkbar i b{display:none}}
.pget .ringwrap .ringc{font-size:1rem;line-height:1.1;text-align:center;padding:4px}
/* outcomes on the navy band, and the case row under them */
.pout .card{border-top:3px solid var(--orange);padding:22px 24px 20px;display:flex;flex-direction:column;gap:10px}
.pout .psn{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:#8FA8BF}
.pout .card p{font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:#fff;line-height:1.4;letter-spacing:-.01em;margin:0}
.pcase{margin-top:44px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18)}
.pcase .klabel{color:#EAF2FA}
.pcase h3{color:#fff}
/* numbered steps in How it works */
.pstep{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pstep li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.pstep li b{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.92rem}
.pstep li span{font-size:var(--fs-body);color:var(--n700);line-height:1.55;padding-top:4px}
.pget .dashfig .figbtn{display:block;width:100%;padding:0;border:1px solid var(--n200);background:#fff;cursor:zoom-in}
.pget .dashfig img{display:block;width:100%;height:auto}
.pget .tlcard{background:#fff;border:1px solid var(--n200);padding:20px}
@media(max-width:900px){.psym.g4{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.psym.g4{grid-template-columns:1fr!important}}
/* How it works, stacked: steps in a row, the wide diagram underneath */
.pget.stack{grid-template-columns:1fr;gap:30px}
.pstep.row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
/* THE TEXT SITS FLUSH UNDER ITS NUMBER, on your comment. The five steps are columns of one grid row,
   so every item stretches to the height of the longest. Each item is itself a two-row grid, and a grid
   with spare height shares that height between its rows by default, so the badge row grew and pushed
   the text down by a different amount in every column: 44px under the longest step, 57px under the
   other four. align-content:start packs both rows to the top, so the badge is 34px and the text starts
   at 44px in all of them. One rule, and it fixes the same list on all six pages that use it. */
.pstep.row li{grid-template-columns:1fr;gap:10px;align-content:start}
.pstep.row li span{padding-top:0}
/* big-figure hero card (one duration or count instead of a bar pair) */
.pbig{display:flex;align-items:baseline;gap:14px;margin-top:18px;flex-wrap:wrap}
.pbig b{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,2.8rem);color:var(--orange);letter-spacing:-.03em;line-height:1}
.pbig span{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);line-height:1.3;max-width:18em}
.pbigl{margin-top:16px;padding-top:14px;border-top:1px solid var(--n200)}
/* ===== VALUE BRIDGE (Price list & packaging hero) =====
   A waterfall, because the job is to break one change into the moves that caused it. Three roles, not
   three categories: navy for the two levels that start and end the bridge, orange for the three gains,
   and the site's own error red for the one loss, which is also the only bar with a minus sign in front
   of its number. Every bar carries its value in ink rather than in its own colour, so nothing is told
   by colour alone. Checked for colour blindness: the closest pair on the chart, the orange gains against
   the red loss, separates by 14.7 in deuteranopia and 14.3 in tritanopia, where 8 is the bar. */
.vwf{margin-top:14px}
.vwf-u{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);margin:0 0 6px}
.vwf svg{display:block;width:100%;height:auto;overflow:visible}
.vwf .vwf-v text{font-family:var(--display);font-weight:800;font-size:18px;fill:var(--navy);text-anchor:middle;letter-spacing:-.4px}
.vwf .vwf-p text{font-family:var(--mono);font-size:12px;fill:var(--n500);text-anchor:middle}
.vwf .vwf-c text{font-family:var(--mono);font-size:12px;fill:var(--n500);text-anchor:middle;letter-spacing:.3px}
.vwf .vwf-cs text{font-family:var(--mono);font-size:20px;fill:var(--n500);text-anchor:middle;letter-spacing:.3px}
.vwf .vwf-v text.vwf-tot{fill:var(--orange-deep)}
.vwf .vwf-p text.vwf-tot{fill:var(--orange-deep)}
.vwf .vwf-cs{display:none}
/* A PHONE GIVES THIS CHART ABOUT 290px, so the drawing scales to two fifths and the type goes with it:
   at the desktop sizes the step names land at five pixels. The numbers are drawn larger below 560px so
   they come back to about thirteen pixels once scaled, and the two-line step names swap for one short
   word each, which is all that fits in a column 48px wide. The bars, the values and the percentages are
   the same chart either way. */
@media(max-width:560px){
  /* the bigger type needs the headroom the viewBox carries above the tallest bar */
  .vwf .vwf-v text{font-size:25px}
  .vwf .vwf-p text{font-size:17px}
  .vwf .vwf-c{display:none}
  .vwf .vwf-cs{display:block}
  .vwf-stats span{min-height:2.7em}
}
.vwf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--n200)}
/* the three labels are not the same length, so without this the numbers sit at three different
   heights; pushing them to the foot of each tile lines them up whatever the label wraps to */
.vwf-stats div{min-width:0;display:flex;flex-direction:column}
.vwf-stats b{margin-top:auto}
.vwf-stats span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;color:var(--n500);line-height:1.35}
.vwf-stats b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-.02em;padding-top:5px}
@media(max-width:520px){.vwf-stats{grid-template-columns:1fr 1fr}.vwf-stats div:last-child{grid-column:span 2}}
.pbigl li{font-size:.98rem}
/* wide diagrams on the light band keep their white card */
.pget.stack .dg{background:#fff;border:1px solid var(--n200);padding:20px}
@media(max-width:700px){.pstep.row{grid-template-columns:1fr}.pstep.row li{grid-template-columns:34px 1fr}}