@font-face{font-family:'EBG';src:url(/static/refresh/fonts/eb-garamond.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'EBG';src:url(/static/refresh/fonts/eb-garamond-italic.woff2) format('woff2');font-weight:400 800;font-style:italic;font-display:swap}

:root{
  --ink:#121618;
  --ink-2:#1B2124;
  --green:#10AE4D;
  --green-deep:#0A6B30;
  --green-lift:#1AC95C;
  --mist:#F3F6F4;
  --paper:#FFFFFF;
  /* The brand grey is #8D8D8D. As type it is 3.1:1 on mist and 3.3:1 on
     white, so it failed the 4.5:1 floor everywhere on the light side, on all
     thirty-three rules that read it. --slate is the type grey now, 5.6:1 on
     mist and 6.1:1 on white, and is relit to #9AA6A1 on the grounds that
     stayed dark. --slate-logo keeps the brand value for the mark itself. */
  --slate:#5C6461;
  --slate-logo:#8D8D8D;
  --rule:#DCE4DE;
  /* The black where it is a field rather than a letterform: the footer,
     the fallback behind a photographic banner, the hero stamp, the
     insights cards, the calculator result, the article deadline panel,
     and the fills a button takes on hover. #121618 read as too heavy
     against the light bands. Body text and the button label keep --ink,
     because near-black on the trademark green is 6.2:1 and a lighter
     label would fail. */
  --ground-dark:#39423F;
  --rule-dark:#2C3538;
  --edge:var(--rule);
  /* Deep green as a fill, for the one place it is a chip of type on
     white rather than a ground: never relit, because a relit fill would
     put white on lifted green at 2.2:1. */
  --green-field:#0A6B30;
  /* The trademark green with white type on it, on every ground. Senyo's
     instruction, 8 September 2026: no dark colour sits in the green. That
     combination is 2.9:1, under the 4.5:1 floor, and is a deliberate brand
     decision rather than an oversight. Hover inverts to neutral. */
  --btn-fill:var(--green);
  --btn-label:var(--paper);
  --btn-fill-h:var(--ground-dark);
  --btn-label-h:var(--paper);
  --tint:#EAF3EC;
  /* the two marks on the bottom rungs of the health check ladder, from
     the supplied design. Both are used as a 3px rule, never as type. */
  --warn:#C0871A;
  --alert:#A82D22;
  --wrap:1440px;
  --gut:clamp(20px,5vw,64px);
  --rail:clamp(0px,6vw,104px);
}

/* Three grounds stay dark: the footer, the stamp that sits on the hero
   photograph, and a banner carrying a photograph. Relighting the tokens
   here fixes every rule that reads them, in one place. */
.foot,.hero .stamp,.banner:has(img.bg),
.deadline,.result,.cat,.seg button.on,.f.on{
  --slate:#A8B4AF;
  --edge:#4E5854;
  --green-deep:var(--green-lift);
  --btn-fill-h:#FFFFFF;
  --btn-label-h:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'EBG',Garamond,'EB Garamond',Georgia,serif;
  font-size:19px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.018em;line-height:1.02}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- type roles (Garamond only, differentiated by weight, case, tracking) ---------- */
.display{font-size:clamp(2.9rem,6.4vw,5.4rem);font-weight:700;line-height:.98;letter-spacing:-.028em}
.title{font-size:clamp(2rem,3.9vw,3.05rem);font-weight:700;line-height:1.04;letter-spacing:-.024em}
.subtitle{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:600;line-height:1.16;letter-spacing:-.016em}
.lead{font-size:clamp(1.18rem,1.7vw,1.42rem);line-height:1.52;color:#3B4448;font-weight:400}
.eyebrow{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--green-deep)}
/* The name is kept because the markup uses it in 30 places. It reads the
   green token, which is deep on a light band and lifted on the panels
   that stayed dark, so one rule covers both. */
.eyebrow.on-dark{color:var(--green-deep)}
.meta{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)}
.figure{font-size:clamp(2.6rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}
.railed{padding-left:calc(var(--gut) + var(--rail))}
section{position:relative}
/* A flat dark band reads as heavy and dominant, and the brand is green and
   grey rather than black. Dark now survives only where a photograph needs
   type over it, and in the footer. */
.band{background:var(--mist);color:var(--ink)}
.band .lead{color:#3B4448}
.mist{background:var(--mist)}
/* 9vw gave 130px top and bottom at 1440, so two sections in a row put 260px
   of padding between their content before any margins. The closing banners
   already use 7.5vw capped at 104 and read correctly, so the section scale
   comes down to match them rather than each page working around it. */
.pad{padding:clamp(56px,7vw,104px) 0}
.pad-s{padding:clamp(40px,5vw,68px) 0}
hr.hair{border:0;border-top:1px solid var(--rule);margin:0}
.band hr.hair{border-color:var(--rule)}

/* section label hanging in the ledger margin */
.slabel{position:absolute;left:var(--gut);top:0;width:var(--rail);padding-right:22px;
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--slate);
  line-height:1.35}
.slabel::before{content:'';display:block;width:16px;height:1px;background:var(--green);margin-bottom:10px}


/* the fixed ledger rule: the page's spine */
#spine{position:fixed;top:0;bottom:0;left:max(20px,calc(50% - (var(--wrap)/2) + 20px));
  width:1px;background:rgba(128,140,134,.3);z-index:30;pointer-events:none}
#spine i{display:block;width:100%;background:var(--green);height:0;transition:height .12s linear}
@media (max-width:1100px){#spine{display:none}}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
.head-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:74px;display:flex;align-items:center;gap:30px}
.brand img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-size:.95rem;font-weight:600;letter-spacing:.005em;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:var(--green)}
.btn{display:inline-block;font-size:.9rem;font-weight:600;letter-spacing:.03em;padding:11px 22px;border:1px solid var(--ink);transition:.18s}
.btn-solid{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-label)}
.btn-solid:hover{border-color:var(--btn-fill-h);color:var(--btn-label-h)}
.btn-line:hover{background:var(--ground-dark);color:#fff;border-color:var(--ground-dark)}
.band .btn-line{border-color:var(--ink);color:var(--ink)}
.band .btn-line:hover{background:var(--ground-dark);color:#fff;border-color:var(--ground-dark)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);padding:9px 13px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
@media (max-width:920px){.nav{display:none}.burger{display:block}
  .nav.open{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--rule);
   flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gut) 22px}
  .nav.open a{padding:12px 0;width:100%;border-bottom:1px solid var(--rule)}
  .nav.open .btn{margin-top:14px}}

/* ---------- grids ---------- */
.g{display:grid;gap:clamp(20px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Top, not centre. A lead beside a three-line heading was being centred
   against it, which reads as floating rather than as a pair. Anything
   that wants centring or stretching says so at the point of use. */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,80px);align-items:start}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{border-top:1px solid var(--rule);padding-top:22px}
.card h2,
.card h3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
.card p{font-size:.98rem;line-height:1.55;color:#4B5457;margin-bottom:14px}
.card .go{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}
.card:hover .go{color:var(--green)}
.card:hover{border-top-color:var(--green)}
.band .card{border-top-color:var(--ink)}
.band .card p{color:#4B5457}
.band .card .go{color:var(--green-deep)}

/* A flex column with the action pinned to the foot. As a plain block the
   action sat wherever the description happened to end, so four cards with
   descriptions of 60, 130, 200 and 140 characters put their four links at
   four different heights. The grid already gives every card the height of
   the tallest, so pinning the action lines all four up. */
.door{display:flex;flex-direction:column;border:1px solid var(--rule);
  padding:30px 28px 26px;background:#fff;transition:.2s}
.door>.go{margin-top:auto;padding-top:18px}
.door:hover{border-color:var(--green);transform:translateY(-3px)}
.door .q{font-size:1.42rem;font-weight:700;letter-spacing:-.018em;line-height:1.14;margin-bottom:10px}
.door p{font-size:.95rem;color:#4B5457;line-height:1.5;margin-bottom:16px}

.router{border-top:1px solid var(--rule)}
.rrow{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) auto;gap:clamp(16px,3vw,42px);
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule);transition:.2s}
.rrow:hover{padding-left:14px;border-bottom-color:var(--green)}
.rq{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;letter-spacing:-.018em;line-height:1.12}
.rd{font-size:1rem;color:#4B5457;line-height:1.5}
.rrow .go{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);white-space:nowrap}
.rrow:hover .go{color:var(--green)}
@media (max-width:860px){.rrow{grid-template-columns:1fr;gap:8px;align-items:start}.rrow:hover{padding-left:0}}
.post{display:block}
.post .thumb{aspect-ratio:3/2;overflow:hidden;background:var(--tint);margin-bottom:16px}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post:hover .thumb img{transform:scale(1.04)}
.post h3{font-size:1.2rem;line-height:1.2;font-weight:700;margin:8px 0 8px}
.post:hover h3{color:var(--green-deep)}
.post p{font-size:.93rem;color:#565F62;line-height:1.5}
.tag{display:inline-block;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--green-deep);border:1px solid var(--rule);padding:4px 9px;background:var(--tint)}
.tag.news{color:#6A5A2A;background:#F6F2E6;border-color:#E7DFC9}

/* ---------- credential strip ---------- */
.creds{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.creds div{flex:1 1 190px;padding:22px 26px 20px;border-right:1px solid var(--edge)}
.creds div:last-child{border-right:0}
.creds b{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:#fff;margin-bottom:3px}
.creds span{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,6.5vw,92px) 0 clamp(40px,5vw,72px)}
.hero .frame{position:relative}
.hero .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.hero .frame::after{content:'';position:absolute;left:-1px;top:0;bottom:0;width:3px;background:var(--green)}
.hero .stamp{position:absolute;right:0;bottom:0;background:var(--ground-dark);color:#fff;padding:18px 22px;max-width:250px}
.hero .stamp b{display:block;font-size:1.02rem;font-weight:700;line-height:1.2;margin-bottom:4px}
.hero .stamp span{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--green-deep);font-weight:600}
.opinion{border-left:2px solid var(--green);padding:4px 0 4px 20px;margin:26px 0 30px;
  font-style:italic;font-size:1.06rem;color:#3B4448;line-height:1.5;max-width:34em}

/* ---------- stats ---------- */
.stat b{display:block}
.stat span{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:var(--slate);display:block;margin-top:8px}
.band .stat span{color:var(--slate)}

/* ---------- quote ---------- */
.quote{font-size:clamp(1.4rem,2.6vw,2.05rem);font-weight:400;font-style:italic;line-height:1.32;letter-spacing:-.014em;max-width:20em}
.quote-by{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--slate);margin-top:22px}

/* ---------- article ---------- */
.crumb{font-size:.78rem;letter-spacing:.06em;color:var(--slate);font-weight:600;margin-bottom:26px}
.crumb a:hover{color:var(--green-deep)}
.crumb span{padding:0 8px;color:#C3CCC7}
.article{max-width:none;display:grid;grid-template-columns:190px minmax(0,720px);gap:clamp(26px,4vw,58px);align-items:start}
@media (max-width:1000px){.article{grid-template-columns:1fr}}
.toc{position:sticky;top:104px;border-top:1px solid var(--rule);padding-top:18px}
.toc p{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--slate);margin-bottom:12px}
.toc a{display:block;font-size:.94rem;line-height:1.35;padding:7px 0 7px 13px;border-left:1px solid var(--rule);color:#4B5457}
.toc a:hover{border-left-color:var(--green);color:var(--ink)}
.prose h2{font-size:clamp(1.55rem,2.6vw,2rem);margin:2.1em 0 .55em;letter-spacing:-.02em;line-height:1.12;scroll-margin-top:100px}
.prose h3{font-size:1.22rem;margin:1.7em 0 .45em;font-weight:700}
.prose p,.prose li{font-size:1.13rem;line-height:1.68;color:#242C2F}
.prose ul,.prose ol{padding-left:1.15em;margin:0 0 1.3em}
.prose li{margin-bottom:.5em}
.prose strong{font-weight:700}
.takeaway{background:var(--tint);border-left:3px solid var(--green);padding:26px 28px;margin:0 0 34px}
.takeaway p{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--green-deep);margin-bottom:12px}
.takeaway li{font-size:1.02rem;line-height:1.5}
.takeaway ul{margin-bottom:0}
.pull{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:26px 0;margin:38px 0;
  font-size:1.4rem;font-style:italic;line-height:1.34;letter-spacing:-.012em}
.byline{display:flex;gap:16px;align-items:center;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:36px}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.byline b{display:block;font-size:1rem;font-weight:700}
.byline span{font-size:.82rem;color:var(--slate)}
.authorbox{display:flex;gap:22px;background:var(--mist);padding:28px;margin:46px 0 0;align-items:flex-start}
.authorbox img{width:88px;height:88px;object-fit:cover;flex:none}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:19px 0;font-size:1.1rem;font-weight:700;letter-spacing:-.012em;list-style:none;display:flex;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--green);font-weight:700;flex:none;width:14px}
.faq details[open] summary::before{content:'\2013'}
.faq div{padding:0 0 20px 28px;font-size:1.03rem;color:#3B4448;line-height:1.6;max-width:48em}

/* ---------- team ---------- */
.person img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .35s}
.person:hover img{transform:scale(1.02)}
.person b{display:block;margin-top:14px;font-size:1.08rem;font-weight:700}
.person span{font-size:.8rem;color:var(--slate);letter-spacing:.03em}

/* ---------- timeline ---------- */
.tl{border-left:1px solid var(--rule);padding-left:30px}
.tl li{list-style:none;position:relative;padding-bottom:30px}
.tl li::before{content:'';position:absolute;left:-35px;top:9px;width:9px;height:9px;background:var(--green);border-radius:50%}
.tl ul{padding:0;margin:0}
.tl b{font-size:1.15rem;font-weight:700;display:block}
.tl span{font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600}
.tl p{font-size:.96rem;color:#4B5457;margin:6px 0 0;line-height:1.5}

/* ---------- forms ---------- */
label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:var(--slate);margin-bottom:7px}
input,select,textarea{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--rule);background:#fff;color:var(--ink);margin-bottom:20px;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none}
/* The rule above is (0,1,1) and the global :focus-visible is (0,1,0), so
   outline:none was winning for every field even under keyboard focus, leaving
   a grey-to-green border as the only indicator. A keyboard user gets the ring
   back here; a mouse user still gets the quiet border change. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green);outline-offset:2px}
textarea{resize:vertical;min-height:130px}
select{-webkit-appearance:none;appearance:none;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,#4B5457 50%),linear-gradient(135deg,#4B5457 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 1px),calc(100% - 17px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ---------- footer ---------- */
.foot{background:var(--ground-dark);color:var(--slate);padding:clamp(56px,7vw,92px) 0 34px;font-size:.95rem}
.foot img.lg{height:30px;width:auto;margin-bottom:20px}
/* The footer columns moved from h4 to h3: at h4 they sat two levels below
   the page h2 above them, which put a heading-level jump on every page of
   the site. Both selectors are kept so nothing depends on the tag. */
.foot h3,
.foot h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.17em;color:#fff;font-weight:600;margin-bottom:16px}
.foot a{display:block;padding:5px 0;color:var(--slate)}
.foot a:hover{color:var(--green-lift)}
.foot .bot{border-top:1px solid var(--rule-dark);margin-top:52px;padding-top:22px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.82rem}

/* ---------- SEO annotation layer ---------- */
.seo{display:none;border:1px dashed var(--green);background:#F2FBF5;padding:16px 18px;margin:0 0 26px;font-size:.86rem;line-height:1.5;color:#1E3A28}
.seo b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--green-deep);margin-bottom:7px}
.seo code{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;background:#DDF1E4;padding:1px 5px}
body.seo-on .seo{display:block}
.f{font-size:.82rem;padding:9px 16px;border-color:var(--rule);color:#4B5457}
.f:hover{border-color:var(--ink);color:var(--ink)}
.f.on{background:var(--ground-dark);border-color:var(--ground-dark);color:#fff}
.seotoggle{background:none;border:1px solid var(--rule);font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:8px 13px;cursor:pointer;color:var(--slate)}
body.seo-on .f{font-size:.82rem;padding:9px 16px;border-color:var(--rule);color:#4B5457}
.f:hover{border-color:var(--ink);color:var(--ink)}
.f.on{background:var(--ground-dark);border-color:var(--ground-dark);color:#fff}
.seotoggle{border-color:var(--green);color:var(--green-deep);background:#F2FBF5}

/* ---------- view routing ---------- */
.view{display:none}
.view.active{display:block;animation:fade .32s ease both}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* The curve is the live site's own: cubic-bezier(.19,1,.22,1) over a second,
   which is easeOutExpo, quick off the mark and a long soft settle. Copying it
   keeps the refreshed pages feeling like the same firm's site rather than a
   different one. The travel is not copied: the live site slides elements in
   175px horizontally, which on this grid would fight the column alignment, so
   it is 22px vertically here and a 1.05 scale on photographs.

   --d is the stagger, set per element by motion.js and restarted at each
   section, so the last group on a long page is not still waiting. */
.js .reveal{opacity:0;will-change:opacity,transform}
.js .reveal.in{opacity:1;transform:none;will-change:auto;
  transition:opacity .9s cubic-bezier(.19,1,.22,1) var(--d,0s),
             transform .9s cubic-bezier(.19,1,.22,1) var(--d,0s)}
/* Direction by role rather than one fade for everything. A label comes in
   from the rail it sits in, the second column of a split from the right, a
   photograph scales down into place. --d staggers siblings. */
.js .r-up{transform:translateY(28px)}
.js .r-left{transform:translateX(-38px)}
.js .r-right{transform:translateX(38px)}
.js .r-zoom,.js .rz{transform:scale(1.06)}
/* A heading carries its motion in its own pieces, so the block itself stays
   put and visible: if the splitting ever failed, the heading would still be
   there to read. */
.js .r-rise,.js .r-letters{opacity:1}

/* Letter by letter, left to right. The word is one inline-block, so a line
   still breaks between words and never inside one, and white-space:pre keeps
   the spaces the split put back. --ld is the per-letter delay. */
.js .ls{display:inline-block;white-space:pre}
.js .lt{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .45s cubic-bezier(.19,1,.22,1) var(--ld,0s),
             transform .45s cubic-bezier(.19,1,.22,1) var(--ld,0s)}
.js .r-letters.in .lt{opacity:1;transform:none}

/* Figures that count themselves out: the ICAG category letters and their
   years, the maturity bands, the numeral on a practice, the timing on a
   process step. --pd is set per piece so they arrive one at a time. */
@keyframes popin{
  0%{opacity:0;transform:scale(.62)}
  62%{opacity:1;transform:scale(1.07)}
  100%{opacity:1;transform:scale(1)}}
.js .r-pop.in b,.js .r-pop.in span,.js .r-pop.in .n,.js .r-pop.in .when{
  animation:popin .55s cubic-bezier(.19,1,.22,1) both;animation-delay:var(--pd,0s)}
/* The step number is a CSS counter on a pseudo-element, so it cannot be given
   its own delay, but it can still arrive with its step. */
.js .step.in::before{animation:popin .5s cubic-bezier(.19,1,.22,1) both}

/* A word rising from behind its own line. The span is the mask and the i is
   what moves. The padding pair gives descenders somewhere to live: a tight
   mask shaves the tail off a g or a y. */
.js .wr{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.js .wr>i{display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .85s cubic-bezier(.19,1,.22,1) var(--wd,0s)}
.js .r-rise.in .wr>i{transform:none}

/* Sideways travel must not be able to put a scrollbar on the page. clip
   rather than hidden, so nothing turns into a scroll container. */
main{overflow-x:clip}

/* A photograph that scales in needs something to scale inside. */
.hfig,.figfill,.bandwide,.person,.person-card{overflow:hidden}
/* The band photograph is held slightly large so it has room to drift inside
   its frame without showing an edge. motion.js moves it. */
.bandfig .fullband img{transform:scale(1.06);will-change:transform}

/* ==========================================================================
   ELIXIR AUDITS - components added for the homepage, service pages and tools
   Appended to the shared stylesheet. All selectors are new; nothing here
   overrides the existing base.
   ========================================================================== */

/* ---------- full-bleed banner ---------- */
.banner{position:relative;background:var(--mist);color:var(--ink);overflow:hidden}
/* The banner photographs are duotones mapped to Ink, so the dark end of them
   is very nearly black: measured across the set, mean luminance runs from
   0.016 to 0.044. Dropping the whole image in brightness is the wrong lever,
   because the same rule has to serve the two bright photographs in the set,
   which measure 0.32 and 0.40 and would wash out.

   So the black is lifted rather than the image brightened. The ::before layer
   is the soft grey in screen blend mode, and screen leaves the light end of a
   photograph almost untouched while raising its black point to the grey: a
   black pixel becomes #39423F, a pixel at 90 per cent stays at 92. That is
   the "grey rather than black" instruction, and it works on every image in
   the set without knowing which are dark.

   The ::after layer is separate and does a different job. Type over a
   photograph was never measured until now, because the checker read the
   colour behind the image rather than the image: 46 pieces of type were
   under the floor, the worst at 1.0:1 on the About banner, where the
   photograph is bright. This gives the type its own field so its legibility
   no longer depends on which photograph is behind it, and fades out to the
   right so the photograph is still a photograph. */
.banner:has(img.bg){background:var(--ground-dark);color:#fff;isolation:isolate}
.banner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banner:has(img.bg)::after{content:'';position:absolute;inset:0;pointer-events:none}
/* As thin as it can be and still carry the type.

   Swept .80, .72, .64, .56, .48, .40 and .32 against 497 line boxes at five
   widths, with the alpha resolved per pixel column, and against two type
   schemes. With the pale greys and the pale green, .80 is the floor: .72
   costs twenty-seven. With every piece of banner type white, .72 is clean and
   .64 costs thirty-two. So .72 it is, and the type went white to pay for it.

   The right-hand end is the real gain. It was .48, then .10, and is .02 now,
   which is the photograph very nearly untouched everywhere nothing sits on
   it. The angle is 90deg so the gradient is exactly horizontal, which is what
   the measurement models. */
.banner:has(img.bg)::after{z-index:2;background:linear-gradient(90deg,
  rgba(51,59,57,.72) 0%, rgba(51,59,57,.70) 70%,
  rgba(51,59,57,.64) 78%, rgba(51,59,57,.22) 90%,
  rgba(51,59,57,.02) 100%)}
/* Below 980 a line of type spans the whole width, so there is no right-hand
   side to give back and the scrim is flat. */
@media (max-width:979px){
  .banner:has(img.bg)::after{background:rgba(51,59,57,.74)}}
.banner .in{position:relative;z-index:3}
/* Over a photograph at this scrim there is no headroom left for a tint of
   any kind, so every piece of banner type is white and the hierarchy is
   carried by size, weight and tracking instead of by colour. The green went
   #1AC95C, then #5FE08F, then #ADEFC7, and now white: each step bought a
   thinner scrim. The green is still on the banner, in the button. Put the
   scrim back to .80 and #ADEFC7 returns; to .88 and #5FE08F does. */
.banner:has(img.bg){--green-deep:#FFFFFF;--slate:#FFFFFF}
.banner:has(img.bg) .eyebrow{color:#fff}
.banner:has(img.bg) .lead{color:#fff}

/* ---------- trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.trust div{padding:20px 22px;border-right:1px solid var(--edge)}
.trust div:last-child{border-right:0}
.trust b{display:block;font-size:1.04rem;font-weight:700;color:var(--green-deep);letter-spacing:-.01em;margin-bottom:3px;line-height:1.2}
.trust span{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr}.trust div{border-bottom:1px solid var(--edge)}}
@media (max-width:480px){.trust{grid-template-columns:1fr}.trust div{border-right:0}}

/* ---------- client wordmarks ---------- */
.clients{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center}
.clients span{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;color:#9AA5A0}
.band .clients span{color:var(--slate)}

/* ---------- health check block ---------- */
/* Was an ink panel. It sits on a white section, so mist reads as a panel
   there; inside a section that is already mist it goes white instead, so
   it never disappears into its own ground. */
.hc{background:var(--mist);color:var(--ink);padding:clamp(28px,4vw,56px);
  border:1px solid var(--rule)}
:is(.band,.mist) .hc{background:var(--paper)}
.hc-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,58px);align-items:start}
@media (max-width:900px){.hc-grid{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--edge)}
.pillars div{padding:14px 16px;border-bottom:1px solid var(--edge);border-right:1px solid var(--edge);font-size:.95rem;font-weight:600}
.pillars div:nth-child(2n){border-right:0}
.pillars i{font-style:normal;color:var(--green-deep);font-size:.7rem;font-weight:700;letter-spacing:.12em;display:block;margin-bottom:4px}
@media (max-width:520px){.pillars{grid-template-columns:1fr}.pillars div{border-right:0}}
.maturity{display:flex;margin:24px 0 8px;border:1px solid var(--edge)}
.maturity span{flex:1;text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.08em;padding:11px 4px;color:var(--slate);border-right:1px solid var(--edge)}
.maturity span:last-child{border-right:0}
.maturity span.lit{background:var(--green);color:#fff}

/* ---------- deadline panel ---------- */
.dl{border-top:2px solid var(--ink)}
.dlrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(14px,2.4vw,30px);align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.dlrow b{font-size:1.03rem;font-weight:700;letter-spacing:-.012em;display:block}
.dlrow small{display:block;font-size:.85rem;color:var(--slate);margin-top:3px;line-height:1.4}
.dlrow .date{font-size:.94rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dlrow .in{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;background:var(--mist);color:var(--slate);white-space:nowrap}
.dlrow .in.soon{background:#F6EFD9;color:#7E5F12}
.dlrow .in.now{background:var(--green);color:#fff}
@media (max-width:640px){.dlrow{grid-template-columns:1fr auto}.dlrow .in{grid-column:2;justify-self:end}}

/* ---------- outcome router ---------- */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.outcomes a{padding:26px 24px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:.2s;background:#fff}
.outcomes a:hover{background:var(--tint)}
.outcomes b{display:block;font-size:1.2rem;font-weight:700;letter-spacing:-.018em;line-height:1.2;margin-bottom:9px}
.outcomes a:hover b{color:var(--green-deep)}
.outcomes p{font-size:.93rem;color:#4B5457;line-height:1.5;margin:0 0 14px}
.outcomes .go{font-size:.74rem}
@media (max-width:860px){.outcomes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.outcomes{grid-template-columns:1fr}}

/* ---------- specification list (service scope) ---------- */
.spec{border-top:2px solid var(--ink)}
.spec .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,34px);padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
.spec .n{font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--slate);padding-top:6px}
.spec h2,
.spec h3{font-size:1.28rem;font-weight:700;letter-spacing:-.016em;margin-bottom:8px;line-height:1.2}
.spec p{font-size:1rem;color:#3B4448;line-height:1.6;margin:0 0 10px;max-width:52em}
.spec .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.spec .tags span{font-size:.72rem;font-weight:600;letter-spacing:.06em;border:1px solid var(--rule);padding:4px 10px;color:#4B5457;background:var(--mist)}
@media (max-width:640px){.spec .row{grid-template-columns:1fr;gap:6px}}

/* ---------- process rail ---------- */
/* No top margin: it put the process column 8px below the heading column
   beside it, which is small but it is the kind of small that reads as
   nothing having been decided. */
.process{counter-reset:p;border-left:1px solid var(--rule);padding-left:clamp(22px,3vw,38px)}
.process .step{position:relative;padding-bottom:34px}
.process .step:last-child{padding-bottom:0}
.process .step::before{counter-increment:p;content:counter(p,decimal-leading-zero);position:absolute;
  left:calc(-1 * clamp(22px,3vw,38px) - 1px);transform:translateX(-50%);top:2px;
  background:#fff;color:var(--green-field);font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:2px 0;width:26px;text-align:center}
.process h3,
.process h4{font-size:1.12rem;font-weight:700;letter-spacing:-.014em;margin-bottom:6px}
.process p{font-size:.99rem;color:#4B5457;line-height:1.58;margin:0;max-width:48em}
.process .when{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--slate);font-weight:600;display:block;margin-top:8px}

/* ---------- engagement / fee panel ---------- */
.engage{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule)}
.engage div{padding:24px 26px;border-right:1px solid var(--rule)}
.engage div:last-child{border-right:0}
.engage p{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--slate);font-weight:600;margin-bottom:10px}
.engage b{display:block;font-size:1.28rem;font-weight:700;letter-spacing:-.018em;line-height:1.22;margin-bottom:8px}
.engage small{font-size:.94rem;color:#4B5457;line-height:1.5;display:block}
@media (max-width:820px){.engage{grid-template-columns:1fr}.engage div{border-right:0;border-bottom:1px solid var(--rule)}.engage div:last-child{border-bottom:0}}

/* ---------- checklist ---------- */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--rule);font-size:1.02rem;line-height:1.5}
/* A solid diamond, not an outlined square. The square with a border and a
   pale fill is how a browser draws an unchecked checkbox, so a list of a
   partner's areas of expertise read as six things waiting to be ticked.
   Filled so it cannot be taken for a control, rotated so it reads as a
   marker. 10px on the diagonal sits at about the weight of the type. */
.checklist li::before{content:'';position:absolute;left:1px;top:20px;
  width:10px;height:10px;background:var(--green);transform:rotate(45deg)}

/* ---------- sector grid ---------- */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sectors div{background:#fff;padding:20px 20px 18px}
.sectors b{display:block;font-size:1.04rem;font-weight:700;letter-spacing:-.012em;margin-bottom:6px}
.sectors p{font-size:.9rem;color:#565F62;line-height:1.45;margin:0}
@media (max-width:900px){.sectors{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sectors{grid-template-columns:1fr}}

/* ---------- tool cards ---------- */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)}
@media (max-width:820px){.tools{grid-template-columns:1fr}}
.tool{border:1px solid var(--rule);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;transition:.2s;background:#fff}
.tool:hover{border-color:var(--green)}
.tool .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--green-deep);margin-bottom:14px}
.tool h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.14;margin-bottom:12px}
.tool p{font-size:1rem;color:#3B4448;line-height:1.58;margin-bottom:18px}
/* The facts sit with the text; the ACTION is what gets pinned to the
   foot. Pinning the facts instead let two cards with differently
   wrapping facts put their buttons at different heights. */
.tool .facts{border-top:1px solid var(--rule);padding-top:14px;margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 22px}
.tool .facts span{font-size:.78rem;color:var(--slate);font-weight:600;letter-spacing:.03em}
.tool .cta{margin-top:auto;padding-top:18px}
.tool.soon{background:var(--mist)}
.tool.soon .k{color:#8A6A18}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:1rem}
.cmp caption{text-align:left;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);padding-bottom:12px}
.cmp th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#fff;background:var(--green);font-weight:600;padding:12px 16px}
.cmp td{padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.cmp tbody th{background:var(--mist);color:var(--ink);text-transform:none;letter-spacing:0;font-size:1rem;font-weight:700;width:30%}
.cmp tr:hover td{background:var(--mist)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{min-width:560px}

/* ---------- callout ---------- */
.callout{background:var(--tint);border-left:3px solid var(--green);padding:22px 26px;font-size:1.02rem;line-height:1.6;color:#25382C}
.callout b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--green-deep);margin-bottom:9px}
.callout.warn{background:#FBF6E9;border-left-color:#B08A2E;color:#4A3A16}
.callout.warn b{color:#8A6A18}

/* ---------- big figure rail ---------- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.figs div{padding:26px 24px;border-right:1px solid var(--rule)}
.figs div:last-child{border-right:0}
.figs b{display:block;font-size:clamp(2.1rem,4vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--green-deep)}
.figs p{font-size:.94rem;color:#4B5457;line-height:1.45;margin:12px 0 0}
@media (max-width:720px){.figs{grid-template-columns:1fr}.figs div{border-right:0;border-bottom:1px solid var(--rule)}}

/* ---------- sticky sub-nav for long service pages ---------- */
.subnav{position:sticky;top:74px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.subnav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;gap:26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.subnav a{font-size:.88rem;font-weight:600;padding:14px 0;white-space:nowrap;border-bottom:2px solid transparent;color:#4B5457}
.subnav a:hover{color:var(--ink);border-bottom-color:var(--green)}
h2[id],h3[id],section[id]{scroll-margin-top:132px}

/* ---------- related links ---------- */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media (max-width:800px){.rel{grid-template-columns:1fr}}
.rel a{border-top:1px solid var(--rule);padding-top:16px;display:block}
.rel a:hover{border-top-color:var(--green)}
.rel small{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--green-deep)}
.rel b{display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.015em;line-height:1.24;margin-top:8px}
.rel a:hover b{color:var(--green-deep)}

/* ---------- reasons grid ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.reasons div{background:#fff;padding:26px 24px 24px}
.reasons .t{display:flex;gap:12px;align-items:flex-start;margin-bottom:9px}
.reasons .t i{font-style:normal;color:var(--green-deep);font-weight:700;font-size:1.05rem;line-height:1.25;flex:none}
.reasons b{font-size:1.14rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.reasons p{font-size:.95rem;color:#4B5457;line-height:1.55;margin:0}
@media (max-width:900px){.reasons{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.reasons{grid-template-columns:1fr}}

/* ---------- buyer questions ---------- */
.qa{border-top:2px solid var(--ink)}
.qa .r{display:grid;grid-template-columns:minmax(0,20em) minmax(0,1fr);gap:clamp(18px,3vw,44px);
  padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
.qa .q{font-size:1.16rem;font-weight:700;letter-spacing:-.016em;line-height:1.3}
.qa .q span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--green-deep);font-weight:600;margin-bottom:8px}
.qa .a{font-size:1.01rem;color:#3B4448;line-height:1.62}
.qa .a a{color:var(--green-deep);border-bottom:1px solid rgba(16,174,77,.4)}
@media (max-width:720px){.qa .r{grid-template-columns:1fr;gap:8px}}

/* ---------- service pillar cards ---------- */
.pillar{border-top:2px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;height:100%;
  transition:border-top-color .2s}
.pillar:hover{border-top-color:var(--green)}
.pillar h3 a{color:inherit;display:block}
.pillar h3 a:hover{color:var(--green-deep)}
.pillar li a{color:#565F62}
.pillar li a:hover{color:var(--green-deep);border-bottom:1px solid rgba(16,174,77,.4)}
.pillar .n{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--green-deep);margin-bottom:10px}
.pillar h3{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;line-height:1.14;margin-bottom:10px}
.pillar p{font-size:.98rem;color:#4B5457;line-height:1.55;margin-bottom:16px}
.pillar ul{list-style:none;padding:0;margin:0 0 18px}
.pillar li{font-size:.92rem;color:#565F62;padding:5px 0 5px 15px;position:relative;line-height:1.4}
.pillar li::before{content:'';position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--green)}
.pillar .go{margin-top:auto}

/* ---------- topic chips ---------- */
.topics{display:flex;flex-wrap:wrap;gap:9px}
.topics a{font-size:.88rem;font-weight:600;border:1px solid var(--rule);padding:9px 16px;color:#4B5457;transition:.16s;background:#fff}
.topics a:hover{border-color:var(--green);color:var(--green-deep);background:var(--tint)}
.band .topics a{background:#fff;border-color:var(--rule);color:#4B5457}
.band .topics a:hover{border-color:var(--green);color:var(--green-deep);background:var(--tint)}

/* ---------- growth story ---------- */
.growth{display:grid;grid-template-columns:repeat(6,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.growth div{padding:20px 14px 18px;border-right:1px solid var(--rule);text-align:center}
.growth div:last-child{border-right:0}
.growth b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--slate)}
.growth div.now b{color:var(--green-deep);font-size:1.9rem}
.growth span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--slate);font-weight:600;margin-top:8px}
@media (max-width:760px){.growth{grid-template-columns:1fr 1fr 1fr}.growth div{border-bottom:1px solid var(--rule)}}

/* ---------- outcome pairs ---------- */
.outcome{border-top:1px solid var(--rule);padding:20px 0}
.outcome .cap{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--slate);margin-bottom:6px}
.outcome b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.014em;margin-bottom:6px}
.outcome p{font-size:.98rem;color:#4B5457;line-height:1.55;margin:0}

/* ---------- round portraits ---------- */
/* height:auto, or a width/height attribute on the img beats aspect-ratio and
   the circle renders as a tall oval. The attributes are wanted, so the box is
   reserved before the portrait loads and the page does not jump. */
.round{width:100%;max-width:190px;aspect-ratio:1;height:auto;object-fit:cover;border-radius:50%}
.pcard{text-align:left}
.pcard b{display:block;margin-top:16px;font-size:1.08rem;font-weight:700;letter-spacing:-.012em}
.pcard span{font-size:.82rem;color:var(--slate);letter-spacing:.03em;display:block;margin-top:2px}
.pcard p{font-size:.92rem;color:#565F62;line-height:1.5;margin:10px 0 0}

/* ---------- testimonial cards ---------- */
/* How many testimonials the CMS holds is not a design decision, so the grid
   has to survive a count that is not a multiple of the column count. Each
   card spans two of six columns: a lone trailing card centres and a trailing
   pair sits either side of centre, instead of one card hanging at the left
   rail with two empty cells beside it. */
@media (min-width:981px){
  .g3.tset{grid-template-columns:repeat(6,1fr)}
  .g3.tset>*{grid-column:span 2}
  .g3.tset>:last-child:nth-child(3n+1){grid-column:3/span 2}
  .g3.tset>:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}
@media (min-width:621px) and (max-width:980px){
  .g3.tset{grid-template-columns:repeat(4,1fr)}
  .g3.tset>*{grid-column:span 2}
  .g3.tset>:last-child:nth-child(odd){grid-column:2/span 2}
}
.tcard{border-top:2px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;height:100%}
.tcard .say{font-size:1.06rem;font-style:italic;line-height:1.5;color:#242C2F;margin:0 0 20px}
.tcard .who{display:flex;gap:14px;align-items:center;margin-top:auto}
.tcard .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.tcard .mono{width:52px;height:52px;border-radius:50%;background:var(--tint);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:var(--green-deep);flex:none}
.tcard .who b{display:block;font-size:.98rem;font-weight:700}
.tcard .who span{font-size:.85rem;color:var(--slate)}
.band .tcard{border-top-color:var(--ink)}
.band .tcard .say{color:#242C2F}
.band .tcard .who b{color:var(--ink)}
.band .tcard .mono{background:var(--tint);border-color:var(--rule);color:var(--green-deep)}

/* ---------- full partner cards ----------
   Two up and two below, portrait beside the text rather than above it. Four
   across was tried and gave each card too narrow a measure for the facts a
   reader actually wants: how long they have practised, what they qualified
   in, what they work on. */
.partners{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,52px)}
@media (max-width:900px){.partners{grid-template-columns:1fr}}
.pcard-full{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(18px,2.4vw,28px);
  border-top:2px solid var(--ink);padding-top:24px;align-items:stretch}
@media (max-width:560px){.pcard-full{grid-template-columns:1fr}}
/* The portrait sits at the top of a stretched row rather than growing with
   it, and the profile button is pushed to the foot of the body. Without that
   a partner with one fact row fewer than the one beside him ends his card
   higher, and the row of buttons goes ragged. */
.pcard-full .round{align-self:start;width:100%;max-width:132px;aspect-ratio:1;height:auto;
  border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--mist);
  border:1px solid var(--rule)}
.pbody{display:flex;flex-direction:column}
.pbody>.btn{margin-top:auto;align-self:flex-start}
.pbody b{display:block;font-size:1.28rem;font-weight:700;letter-spacing:-.018em;line-height:1.15}
.pbody span{display:block;font-size:.86rem;color:var(--slate);margin-top:3px}
.pbody>p{font-size:.98rem;color:#3B4448;line-height:1.6;margin:14px 0 0;max-width:40em}
.pfacts{margin:18px 0 20px;border-top:1px solid var(--rule)}
.pfacts div{padding:10px 0;border-bottom:1px solid var(--rule)}
.pfacts dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:var(--slate);margin-bottom:4px}
.pfacts dd{margin:0;font-size:.95rem;line-height:1.5;color:#3B4448}
.pfacts dd a{color:var(--green-deep);border-bottom:1px solid rgba(16,174,77,.4)}

/* ---------- reviewer credit block, shared by tools and the calculator ---------- */
.verified{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--rule);padding:18px 20px;background:var(--mist)}
.verified img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.verified p{margin:0;font-size:.92rem;line-height:1.5;color:#3B4448}
.verified p b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:4px}

/* ---------- file input, which uses the browser UI font unless told otherwise ---------- */
input[type=file]{padding:10px 12px;background:var(--mist);cursor:pointer}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  font-family:'EBG',Garamond,Georgia,serif;font-size:.9rem;font-weight:600;letter-spacing:.03em;
  padding:9px 16px;margin-right:14px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--ground-dark);color:#fff}

/* ---------- footer legal links sit on one line ---------- */
.foot .bot a{display:inline;padding:0}
.foot .bot span a+a{margin-left:0}
.foot .bot .legal a{display:inline;padding:0}
.foot .bot .legal{white-space:nowrap}

/* ---------- map placeholder ---------- */
.maprect{background:var(--mist);border:1px solid var(--rule);aspect-ratio:16/10;display:flex;
  align-items:center;justify-content:center;color:var(--slate);font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600}

/* ================= services page: alternating pillar blocks ================= */
.pblock{position:relative}
.pblock .pnum{font-size:clamp(3.4rem,7vw,6rem);font-weight:700;line-height:.8;letter-spacing:-.04em;
  color:#84918B;display:block;margin-bottom:-.12em}
.pblock .pneed{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  color:var(--green-deep);margin:22px 0 12px}
.pblock h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.026em;line-height:1.04;margin-bottom:18px}
.pblock .plead{font-size:clamp(1.1rem,1.7vw,1.34rem);line-height:1.5;color:#3B4448;max-width:30em}

.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,72px);align-items:start}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}}

.plist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,36px);border-top:1px solid var(--rule)}
@media (max-width:620px){.plist{grid-template-columns:1fr}}
.plist a,.plist span{display:block;padding:15px 0;border-bottom:1px solid var(--rule);font-size:1.02rem;
  font-weight:600;letter-spacing:-.008em;line-height:1.3;transition:.16s}
.plist a{position:relative;padding-left:20px}
.plist a::before{content:'';position:absolute;left:0;top:24px;width:9px;height:1px;background:var(--green);transition:.16s}
.plist a:hover{color:var(--green-deep);padding-left:26px}
.plist span{padding-left:20px;color:#565F62;font-weight:400}
.plist span::before{content:'';position:absolute}

.pfact{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);margin-top:30px}
.pfact div{padding:16px 18px 16px 0;border-right:1px solid var(--rule)}
.pfact div:last-child{border-right:0}
.pfact dt{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--slate);font-weight:600;margin-bottom:5px}
.pfact dd{margin:0;font-size:.98rem;font-weight:700;line-height:1.3}
@media (max-width:620px){.pfact{grid-template-columns:1fr}.pfact div{border-right:0;border-bottom:1px solid var(--rule)}}

/* how we work */
.hww{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hww div{background:#fff;padding:26px 24px 24px}
.hww b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.014em;margin-bottom:9px;line-height:1.25}
.hww p{font-size:.94rem;color:#4B5457;line-height:1.55;margin:0}
.hww i{font-style:normal;display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-deep);font-weight:600;margin-bottom:12px}
@media (max-width:940px){.hww{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hww{grid-template-columns:1fr}}

/* ── Floating WhatsApp button ────────────────────────────────────────────
   Carried over from the old site, where it was a JS-driven <button> with a
   remotely hosted PNG. WhatsApp's own green is used rather than the brand
   green because the button is recognised by its colour. */
.wa{position:fixed;right:20px;bottom:20px;z-index:999;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;background:#25D366;color:#fff;
  box-shadow:0 3px 10px rgba(18,22,24,.22);transition:transform .16s ease,box-shadow .16s ease}
.wa svg{width:26px;height:26px;display:block}
.wa:hover,.wa:focus-visible{transform:translateY(-2px);box-shadow:0 7px 20px rgba(18,22,24,.34)}
.wa:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:640px){.wa{right:14px;bottom:14px;width:44px;height:44px}
  .wa svg{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.wa{transition:none}.wa:hover{transform:none}}
@media print{.wa{display:none}}

/* ── Section labels ──────────────────────────────────────────────────────
   The rail is clamp(0px,6vw,104px). Below about 1200px that leaves under
   40px of usable width, so a two-word label wrapped out of the rail and
   overlapped the heading next to it. Above that width it stays in the rail;
   below it, it sits in normal flow above the heading. */
@media (max-width:1200px){
  .slabel{position:static;width:auto;padding-right:0;margin:0 0 14px}
  .railed{padding-left:var(--gut)}
}

/* ── Service pillars ─────────────────────────────────────────────────────
   The need-state eyebrow runs to one or two lines depending on its wording,
   which pushed each pillar's heading to a different baseline. A minimum
   height puts "Audit and Assurance", "Tax", "Advisory" and "Accounting and
   People" on the same line as each other. */
.pillar .n{display:block;min-height:3.2em}   /* two lines: some need-state
   labels wrap ("I need to stay compliant") and some do not, which put the
   four headings on different baselines */
@media (max-width:900px){.pillar .n{min-height:0}}

/* ── Partner row ─────────────────────────────────────────────────────────
   Matches the partner block published in the GIPA Act 1173 article, so the
   firm looks the same across the site and the articles. */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;
  margin:0;text-align:center}
.people .person{display:block;color:inherit}
.people .person img{width:104px;height:104px;border-radius:50%;object-fit:cover;
  margin:0 auto 16px;border:2px solid var(--green);padding:3px;background:#fff}
.people .person .nm{font-size:1.22rem;font-weight:700;line-height:1.2;margin:0 0 4px;
  letter-spacing:-.01em}
.people .person .rl{font-size:1rem;font-style:italic;color:var(--green-deep);
  font-weight:400;margin:0 0 12px;line-height:1.35;text-transform:none;letter-spacing:0}
.people .person .rule{width:34px;height:1px;background:var(--rule);margin:0 auto 12px}
.people .person .eml{margin:0;font-size:.94rem;line-height:1.4;word-break:break-word;
  color:#565F62}
.people .person .nm a{color:inherit;text-decoration:none}
.people .person:hover .nm a{color:var(--green-deep)}
.people .person:hover img{border-color:var(--green-deep)}
.people .person .eml a{color:inherit;border-bottom:1px solid var(--rule)}
.people .person .eml a:hover{border-bottom-color:var(--green)}
@media (max-width:900px){.people{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.people{grid-template-columns:1fr;gap:26px}
  .people .person img{width:92px;height:92px}}

/* A network affiliation is only worth stating if the reader can check it, so
   the credentials tile links to RSM's own site. */
.trust-link{color:inherit;border-bottom:1px solid rgba(26,201,92,.45);transition:border-color .15s}
.trust-link:hover,.trust-link:focus-visible{border-bottom-color:var(--green-lift)}

/* The reviewer's own photograph, as the live site shows it. .mono initials
   stay as the fallback for a quote entered without one. */
.tcard .who .face{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px}

/* ── Tables on small screens ─────────────────────────────────────────────
   Rate tables, deadline tables and the cookie table are wider than a phone.
   Without this the page itself scrolls sideways, which breaks every other
   section too. The table scrolls inside its own box instead. */
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:820px){main table{display:table}}
/* display:block alone lets the rows shrink to whatever is left, so a
   three-column table on a 320px phone squeezed to columns of about 100px and
   ran eleven lines to a cell: nothing overflowed, nothing scrolled, and it
   was unreadable. A floor on the row groups gives the box something to
   scroll, so the columns keep a sensible measure and the table moves under
   the finger instead. */
@media (max-width:819px){
  main table>thead,main table>tbody,main table>tfoot{display:table;width:100%;min-width:30em}
  main table td,main table th{white-space:normal}
}

/* An insight card keeps its image frame even when the post has no image, so a
   row of cards stays aligned instead of one riding up. The tint is the empty
   state, not a missing element. */
.post .thumb:empty{background:var(--tint)}

/* ---- Senyo's homepage review, 5 September 2026 ---- */
/* Hero crop moved right so the colleague on the left is in frame. */
.hero .frame img{object-position:34% 22%}
/* Contents rail marks the section being read (script in post_detail.html). */
.toc a.on{border-left-color:var(--green);color:var(--ink);font-weight:700}
/* Eight links plus a button no longer fit at 921px; fold to the menu earlier. */
@media (max-width:1000px){.nav{display:none}.burger{display:block}}
/* Five credential cells in the two-column tablet grid left the fifth alone;
   it now spans the row. */
@media (max-width:980px){.trust>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}}
/* The map box is now a link to Google Maps rather than a placeholder label. */
.maprect{text-decoration:none;color:var(--green-deep);font-weight:600}
.maprect:hover{background:var(--tint);border-color:var(--green)}
/* Leadership cards: a circular portrait, matching the partner block on the
   homepage and the GIPA article the photographs come from. Two of the four
   partner photographs are circular crops taken from that article, so a
   rectangular card put a circle on white beside a full-bleed rectangle. */


/* A02. The designed pages used to carry the column widths inline, which beat
   the breakpoint below and left phones reading a 119px strip. The inline
   styles are gone; this guards against one coming back with a paste. */
@media (max-width:1000px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track has a min-content minimum, so one
     long unbreakable string (an email address, a URL) makes the track wider
     than its container and the page scrolls sideways. */
  .article,.article[style]{grid-template-columns:minmax(0,1fr)!important}
  .article .toc{position:static;max-height:none}
  .article .toc a,.article .prose a{overflow-wrap:anywhere}
}
/* A <button> does not inherit the page font: browsers give it their own UI
   font unless told otherwise. The buttons that submit the contact, proposal
   and subscribe forms used to be <a> elements, which do inherit, so converting
   them into real controls quietly changed their typeface. */
button,input,select,textarea{font-family:inherit}
.btn{font-family:'EBG',Garamond,'EB Garamond',Georgia,serif}

/* "Tell me when it is ready" is a real form now, so the two cards that hold
   one are divs rather than links: a card cannot be an anchor and contain a
   field. They still have to look and size like the cards beside them. */
.tool.soon{display:flex;flex-direction:column}
.notify{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:31em}
.notify input{margin:0;flex:1 1 190px;min-width:0;padding:10px 13px;font-size:.95rem}
.notify button{flex:0 0 auto;white-space:nowrap}
.tool .notify{margin-top:auto}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the leadership page ----------
   One card, two sizes. The partners are larger and link to a written profile;
   everybody else is the same card at a smaller portrait. Nothing here renders
   a biography, so no card can be taller than its neighbour and the row cannot
   go ragged when one person has copy and another does not. */
.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.person-card{display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit}
.person-card img{width:100%;max-width:180px;aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;
  object-position:50% 22%;background:var(--mist);margin-bottom:18px;
  border:1px solid var(--rule);transition:border-color .18s}
.person-card b{font-size:1.16rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;
  margin-bottom:5px}
.person-card .role{font-size:.95rem;font-style:italic;color:var(--green-deep);line-height:1.35}
.person-card .go{margin-top:12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;color:var(--slate)}
a.person-card:hover img{border-color:var(--green)}
a.person-card:hover b{color:var(--green-deep)}
a.person-card:hover .go{color:var(--green-deep)}

.people-grid.small{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.people-grid.small .person-card img{max-width:132px;margin-bottom:14px}
.people-grid.small .person-card b{font-size:1.02rem}
.people-grid.small .person-card .role{font-size:.88rem}

@media (max-width:1000px){.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people-grid.small{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.people-grid,.people-grid.small{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .person-card img{max-width:130px}
  .people-grid.small .person-card img{max-width:110px}}

/* ---------- About, the v2 sections ----------
   The partner cards are defined once, further up under "full partner cards".
   Only the name link is extended here. */
.pbody b a{color:inherit;border-bottom:1px solid rgba(16,174,77,.4)}
.pbody b a:hover{color:var(--green-deep)}

/* A picture that runs the full width of its column, with its caption under
   the rule of the image rather than floating beside it. */
.figfull{margin:0}
/* height:auto is not optional here. The images carry width and height
   attributes so the browser reserves the right box before they load and the
   page does not jump; without height:auto the attribute wins and a 680x850
   portrait renders 300 wide by 850 tall. */
.figfull img{width:100%;height:auto;display:block}
.figfull figcaption{font-size:.84rem;color:var(--slate);margin-top:12px;letter-spacing:.02em}

/* Who we work with: six panels on a hairline grid, one border shared between
   neighbours rather than a border each. */
.mix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.mix div{background:#fff;padding:24px 22px;min-width:0}
.mix b{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.014em;margin-bottom:8px}
.mix p{font-size:.94rem;color:#4B5457;line-height:1.55;margin:0;overflow-wrap:break-word}
@media (max-width:900px){.mix{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mix{grid-template-columns:1fr}}

/* How an engagement runs. The numbers are counter-generated, so inserting or
   removing a step cannot leave the sequence wrong. */
.eng4{counter-reset:e;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.eng4 div{background:#fff;padding:26px 24px 24px;min-width:0}
.eng4 div::before{counter-increment:e;content:counter(e,decimal-leading-zero);display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;color:var(--green-deep);margin-bottom:14px}
.eng4 b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.015em;line-height:1.25;
  margin-bottom:9px}
.eng4 p{font-size:.94rem;color:#4B5457;line-height:1.55;margin:0;overflow-wrap:break-word}
@media (max-width:900px){.eng4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.eng4{grid-template-columns:1fr}}

/* A picture beside a block of cards, both starting at the same line. The
   picture takes a fixed column rather than half the row, so the cards keep a
   readable measure; below the split's own breakpoint it goes above them. */
.withfig{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(26px,3.4vw,48px);
  align-items:stretch}
/* The picture takes its height from the cards beside it rather than from its
   own proportions, so the two columns start and finish on the same lines.
   Absolute positioning is what keeps it out of the row's height calculation;
   left in normal flow it was 425 tall against a 336 block of cards and hung
   below them. It crops with object-fit rather than squashing. */
.withfig>.figfull{position:relative;min-height:260px}
.withfig>.figfull img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%}
@media (max-width:980px){
  .withfig{grid-template-columns:1fr}
  .withfig>.figfull{position:static;max-width:380px;min-height:0}
  .withfig>.figfull img{position:static;height:auto;object-fit:fill}}

/* Eight reasons rather than six wants four columns, or the last row sits
   two-thirds empty. Same tick, same hairline grid as the homepage. */
.reasons.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.reasons.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reasons.four{grid-template-columns:1fr}}

/* Selected engagements. The same four the homepage publishes, set out in the
   three parts the About page needs: what the client was facing, what we did,
   what came of it. Two up and two below, because a case wants a measure. */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,46px)}
.ecase{border-top:2px solid var(--ink);padding-top:22px;min-width:0}
.ecase .cap{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--green-deep);margin-bottom:8px}
.ecase b{display:block;font-size:1.16rem;font-weight:700;letter-spacing:-.016em;line-height:1.25}
.ecase .pfacts{margin:16px 0 0}
@media (max-width:860px){.cases{grid-template-columns:1fr}}

.val{background:#fff;padding:26px 24px 24px;min-width:0}
.val i{font-style:normal;display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-deep);font-weight:600;margin-bottom:12px}
.val b{display:block;font-size:1.14rem;font-weight:700;letter-spacing:-.016em;margin-bottom:10px}
.val p{font-size:.95rem;color:#4B5457;line-height:1.58;margin:0;overflow-wrap:break-word}

/* The classification chronology. Year and band are their own columns so both
   run straight down the page; on a narrow screen the band moves up beside
   the year rather than eating a third of the measure. */
.story{border-top:2px solid var(--ink)}
.story .srow{display:grid;grid-template-columns:5.5em 5.5em minmax(0,1fr);gap:clamp(16px,2.6vw,34px);
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.story .syr{font-size:1.06rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--slate)}
.story .scat{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:#84918B}
.story .srow.now .syr{color:var(--ink)}
.story .srow.now .scat{color:var(--green-deep);font-size:1.9rem}
.story .srow p{font-size:.98rem;color:#4B5457;line-height:1.55;margin:0;max-width:46em;
  overflow-wrap:break-word}
@media (max-width:620px){.story .srow{grid-template-columns:4.5em minmax(0,1fr)}
  .story .scat{grid-row:1;grid-column:2;font-size:1.2rem;margin-bottom:4px}
  .story .srow p{grid-column:1/-1}}

/* ---------- the team row ----------
   width and height on a portrait fight max-width:100%: the width gives way
   and the height does not, so a circle becomes an ellipse the moment the
   column is narrower than the declared size. aspect-ratio above removes that
   whole class of bug. The name box holds two lines on every card so the row
   keeps one baseline whether a name wraps or not. */
.tlead{max-width:46em;margin-bottom:clamp(30px,3.4vw,46px)}
.tlead .title{margin-bottom:16px}
.tlead .lead{max-width:34em;margin:0}
.person-card b{min-height:2.5em;display:flex;align-items:center;justify-content:center}
.tcta{margin-top:clamp(30px,3.4vw,44px)}
@media (max-width:560px){.person-card b{min-height:0;display:block}}

/* ---------- inline colours written for a dark ground ----------
   309 inline colours across the templates and the service and sector bodies
   were chosen to sit on near-black. On a light ground they are invisible.
   They are overridden here rather than rewritten in 33 database records: the
   content stays untouched, so there is nothing to migrate and nothing to
   reverse on production if this is ever rolled back.

   Overriding an inline style is the one thing !important is actually for.
   The selectors match on the declaration itself, so only the pale values are
   touched and any other inline colour is left alone. Scoped to light bands
   and to banners that carry no photograph: a banner with a photograph is
   still dark and its pale text is still correct there. */
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#A8B4AF" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#7E8C87" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#C9D6D0" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#E8EDEA" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#D2DBD7" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#C3D2CB" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#93A09B" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#8FA79A" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#8FA096" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#C9D1CD" i],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#D3DAD6" i]{color:#4B5457!important}

/* and the other way round: colours chosen for a light ground that are sitting
   on one of the dark ones. #7E8C87 is in this list because it used to sit on
   near-black at 5.2:1 and the softer ground took it to 3:1. #C3D2CB is 6.6:1
   on the soft ground and higher on the near-black one. */
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#4B5457" i],
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#3B4448" i],
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#4A5654" i],
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#4A524F" i],
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#7E8C87" i],
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#8FA79A" i],
:is(.foot, .hero .stamp, .deadline, .result, .cat, .banner:has(img.bg)) [style*="color:#A8B4AF" i]{
  color:#C3D2CB!important}

.banner:has(img.bg) [style*="color:#4B5457" i],
.banner:has(img.bg) [style*="color:#3B4448" i],
.banner:has(img.bg) [style*="color:#4A5654" i],
.banner:has(img.bg) [style*="color:#4A524F" i],
.banner:has(img.bg) [style*="color:#7E8C87" i],
.banner:has(img.bg) [style*="color:#8FA79A" i],
.banner:has(img.bg) [style*="color:#A8B4AF" i],
.banner:has(img.bg) [style*="color:#C9D6D0" i],
.banner:has(img.bg) [style*="color:#C3D2CB" i],
.banner:has(img.bg) [style*="color:#E4EBE7" i]{color:#fff!important}

/* white type on a light ground */
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="color:#fff" i]{color:var(--ink)!important}

/* rules drawn for a dark ground */
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="border-color:var(--rule-dark)"],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="border-bottom-color:var(--rule-dark)"],
:is(.band, .hc, .banner:not(:has(img.bg))) [style*="border-top:1px solid var(--rule-dark)"]{
  border-color:var(--rule)!important}

/* the subscribe field was a dark box on a dark band */
:is(.band, .hc, .banner:not(:has(img.bg))) input[style*="#1B2124" i]{
  background:#fff!important;border-color:var(--rule)!important;color:var(--ink)!important}

/* the crumb on a light banner */
.banner:not(:has(img.bg)) .crumb,
.banner:not(:has(img.bg)) .crumb a{color:var(--slate)!important}
.crumb span{color:var(--slate)!important}

/* ---------- a wider page, without wider prose ----------
   The column was 1240px, which used 65 per cent of a 1920 screen and left
   340px empty each side. It is 1440 now: 75 per cent, with 240px each side,
   which is the usual maximum for a firm of this kind. Paragraphs are
   unaffected because they cap their own measure in em, so the extra width
   goes to card grids and photographs, which is where it is useful, rather
   than to line length. The rail that carries the section labels is inside
   the column, so it widens with it and the labels stay beside their
   sections. */
.wrap.railed > .split > div > p.lead,
.wrap.railed > .split > div > p{max-width:min(100%,42em)}

/* ---------- measure ----------
   The wider column left four sets of paragraphs running to 104 characters a
   line, and one to 92, because they had no measure of their own and simply
   took the full width. Above about 75 characters the eye loses the start of
   the next line. min(100%,74ch) can only ever narrow a paragraph, so one
   sitting in a narrow grid cell or a centred person card is untouched: there
   the 100% branch wins and the centring holds. Paragraphs the design already
   gave a measure to keep it, because those selectors carry a class and are
   heavier than these. */
/* .meta is out: it is an uppercase letterspaced label, not prose, and a
   reading measure meant for paragraphs made the deadline note wrap three
   lines earlier than it needed to. */
main p:not([class]),
main p.lead{max-width:min(100%,74ch)}

/* ---------- insights teaser, card only ----------
   The homepage set carries no photograph, so each one has to hold itself
   together as a card rather than sit as a caption under an image: a white
   panel on the band, the category chip at the top, the title doing the work,
   and the byline pinned to the foot behind a hairline so three cards of
   different title lengths still line up along the bottom. The full set at
   /insights/ keeps its images, where a photograph earns its place. */
.post.plain{
  background:var(--paper);border:1px solid var(--rule);
  padding:22px clamp(18px,1.6vw,24px) 20px;
  display:flex;flex-direction:column;height:100%;transition:border-color .16s}
.post.plain:hover{border-color:var(--green)}
.post.plain .tag{align-self:flex-start;margin-bottom:0}
.post.plain h3{margin:14px 0 18px;font-size:clamp(1.1rem,1.35vw,1.28rem)}
.post.plain .byline-min{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.86rem;color:var(--slate);line-height:1.4}


/* ---------- homepage photography ----------
   Five photographs placed through the long unillustrated stretch of the
   homepage. Each carries width and height attributes so the page does not
   shift as they load, which means height:auto is not optional here: with a
   width attribute present and no height rule, the attribute wins and the
   picture is distorted. That has bitten this stylesheet twice. */
.hfig{margin:0}
.hfig img{width:100%;height:auto;display:block}

/* A column that ends with a photograph. The split row is align-items:stretch,
   so both columns take the height of the taller one, and the figure takes
   whatever is left in its column. The two columns therefore finish level,
   which is the whole difference between a photograph that looks placed and
   one that looks appended: the method figure used to run 385px past its
   neighbour and into the foot of the section.

   The image is absolutely positioned inside the figure rather than sized with
   height:100%, because a flex item's height here comes from the free space in
   the row and a percentage against it resolves inconsistently. */
.colfill{display:flex;flex-direction:column}
/* One class, two jobs. As a grid child on its own it stretches to the row's
   height, so a header photograph is exactly as deep as the heading block
   beside it. Inside a .colfill column it grows into whatever the column has
   left, so a photograph that closes a column ends level with its neighbour.
   The min-height stops either case collapsing to a sliver. */
.figfill{--figr:1.9;--figmax:460px;
  position:relative;flex:1 1 auto;align-self:stretch;
  min-height:clamp(210px,18vw,300px)}
.figfill picture{position:absolute;inset:0;display:block}
/* Above the stack the figure still fills its column, so the box ratio moves
   with the text beside it: measured 1.03 at 981px up to 1.94 at 1440. At the
   square end object-fit keeps only the middle 54% of the file's width, so the
   horizontal anchor is what matters. 53%, not 50%: she stands right of centre
   in the frame and the square crop should be centred on her, not on the wall.
   The vertical anchor barely bites now that the files are cut at 1.9. */
.figfill img{width:100%;height:100%;object-fit:cover;
  object-position:var(--figx,53%) var(--figy,42%)}

/* Below 980 the split is one column, so a figure that was filling a column
   has nothing to fill. It becomes a band of its own, deep enough to read as a
   photograph and shallow enough not to cost a whole screen of scrolling. */
@media (max-width:980px){
  /* A clamped height here was the worst crop on the page: at 900px wide it
     made the box 2.6:1 against a 1.9:1 file and took the top off the
     photograph. Stacked, the figure has no column to end level with, so
     there is nothing to trade for that: it takes the ratio of its own file
     and crops nothing. --figmax stops a portrait file becoming a full
     screen of scrolling on a tablet, and it does it by bounding the WIDTH,
     not the height: a max-height against a declared aspect-ratio just
     reintroduces the crop, which is how the portrait beside the CFO
     questions was losing the top of her head at tablet widths. Bounding
     the width keeps the file's true shape at every size. */
  .figfill{position:static;flex:none;height:auto;
    aspect-ratio:var(--figr);min-height:0;
    max-width:calc(var(--figmax) * var(--figr));margin-inline:auto}
  .figfill picture{position:static;display:block;height:100%}
}

/* The full-bleed band. No wrap, so it runs the whole width; a fixed height
   with object-fit keeps it a band rather than a 565px-tall block on a phone. */
.bandfig{padding:0;margin:0}
.bandfig .fullband{margin:0}
.bandfig .fullband img{width:100%;height:clamp(190px,26vw,420px);object-fit:cover;display:block}

/* A photograph that closes a section rather than a column. It takes the
   wrap's own content edges, which is the widest alignment the page has, so it
   reads as part of the structure instead of as something added to one side.
   Our story needed this: its two columns carry about the same amount of
   content, so putting the photograph in either one left the other with a
   void underneath. */
.bandwide{margin:44px 0 0}
/* The box takes the ratio of the file that is being served, so nothing is
   cropped twice. A clamped height was the fault before: it made the
   displayed ratio change with the viewport, so at some widths the band
   was wider than any file supplied and object-fit:cover took the top off
   the photograph, which is how a head got cut. object-fit stays as a
   no-op safety in case a file is ever swapped for one of another shape. */
.bandwide img{width:100%;height:auto;aspect-ratio:2.6/1;object-fit:cover}
@media (max-width:980px){.bandwide img{aspect-ratio:2/1}}


/* ---------- hover ----------
   About half the interactive things on the page had a transition and the rest
   had nothing, which reads as unfinished rather than as restraint. These are
   the ones that were missing, on one set of values: a hairline that takes the
   green, a 2px lift where the thing is a card, and 1.04 on a photograph.
   Everything here is inside :hover or :focus-visible, so nothing moves on a
   touch device that has no hover, and the reduced-motion rule at the top of
   this file turns all of it off. */
.sectors>div,.creds div,.trust div,.growth div,.dlrow,.rel a,.qa .q{
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.sectors>div:hover,.rel a:hover{background:var(--paper);border-color:var(--green)}
.card,.door,.tool,.post.plain,.outcomes a,.tcard,.person-card{
  transition:border-color .18s ease,transform .22s cubic-bezier(.19,1,.22,1),box-shadow .22s ease}
.card:hover,.door:hover,.tool:hover,.post.plain:hover,.outcomes a:hover,.person-card:hover{
  transform:translateY(-2px);box-shadow:0 6px 22px rgba(18,22,24,.07);border-color:var(--green)}
/* Photographs lift toward the reader a little. The frames clip, from the
   overflow rule above. */
.hfig img,.bandwide img,.figfill img,.person-card img,.person img{
  transition:transform .5s cubic-bezier(.19,1,.22,1)}
a:hover>.hfig img,a:hover .person img,.person-card:hover img,
.hfig:hover img,.bandwide:hover img{transform:scale(1.04)}
/* The green underline on an inline link thickens rather than appearing. The
   first version of this set background-size:0 and border-bottom:0, which
   animated nicely and removed the resting underline: a link in body copy has
   to be identifiable before anyone hovers it, and on a touch screen nobody
   ever does. The border stays; the gradient is a second, heavier line that
   draws in over it. */
.qa .a a,.pfacts dd a{background-image:linear-gradient(var(--green),var(--green));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size .28s cubic-bezier(.19,1,.22,1)}
.qa .a a:hover,.pfacts dd a:hover{background-size:100% 2px}
/* The nav marks where you are going before you get there. */
.nav a{position:relative}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.19,1,.22,1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
@media (max-width:900px){.nav a::after{display:none}}


/* ---------- shapes that expand ----------
   One device for the whole page rather than a different trick per component:
   a green rule that grows across the top edge of anything card-shaped, and a
   fill that wipes across a button. Both from the left, both on the same curve
   as the reveals, so hovering feels like part of the same system.

   The rule is an absolutely positioned ::after rather than a border, because
   a border would move the content by 2px on hover. Checked first that none of
   these selectors already used ::after: .process .step and .pillar li do, and
   neither is in this list. */
.card,.door,.tool,.post.plain,.pillar,.sectors>div,.outcomes a,.tcard,
.person-card,.dlrow,.arow,.rrow{position:relative}
.card::after,.door::after,.tool::after,.post.plain::after,.pillar::after,
.sectors>div::after,.outcomes a::after,.tcard::after,.person-card::after,
.dlrow::after,.arow::after,.rrow::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;pointer-events:none;
  transition:transform .38s cubic-bezier(.19,1,.22,1)}
.card:hover::after,.door:hover::after,.tool:hover::after,.post.plain:hover::after,
.pillar:hover::after,.sectors>div:hover::after,.outcomes a:hover::after,
.tcard:hover::after,.person-card:hover::after,.dlrow:hover::after,
.arow:hover::after,.rrow:hover::after,
.card:focus-within::after,.door:focus-visible::after,.tool:focus-within::after,
.post.plain:focus-visible::after,.outcomes a:focus-visible::after{transform:scaleX(1)}

/* The arrow moves before the page does. */
.go,.cgo{display:inline-block;transition:transform .3s cubic-bezier(.19,1,.22,1)}
.card:hover .go,.door:hover .go,.tool:hover .go,.post.plain:hover .go,
.pillar:hover .go,.rrow:hover .go,.arow:hover .go,.outcomes a:hover .go,
.cat:hover .cgo{transform:translateX(6px)}

/* A button fills from the left rather than switching colour in one step. The
   fill is a ::before behind the label, so the label never moves and never
   changes weight; isolation keeps the negative z-index inside the button. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;transform:scaleX(0);
  transform-origin:left;transition:transform .36s cubic-bezier(.19,1,.22,1)}
/* Only the solid button wipes. Its label is white before and after, so there
   is no moment where the type is on the wrong ground. The outline button's
   label goes from ink to white when the pointer lands, and with a fill still
   crossing, the half it has not reached yet is white on white for a third of
   a second. That one keeps the instant swap it always had. */
.btn-solid::before{background:var(--btn-fill-h)}
.btn-solid:hover::before,.btn-solid:focus-visible::before{transform:scaleX(1)}

/* A quiet lift on the things that are cards in their own right. */
.door,.tool,.post.plain,.person-card,.tcard{
  transition:border-color .18s ease,transform .28s cubic-bezier(.19,1,.22,1),box-shadow .28s ease}
.door:hover,.tool:hover,.post.plain:hover,.person-card:hover,.tcard:hover{
  transform:translateY(-3px);box-shadow:0 10px 30px rgba(18,22,24,.08)}


/* ---------- the Financial Health Check section ----------
   Built to the supplied design. The ground inverts against what was here
   before: a mist section carrying a white card, rather than a mist card on a
   white section, so the panel reads as an instrument sitting on the page.

   The panel is a flex column on a stretch row and the list inside it grows,
   which is what makes the panel's foot land level with the foot of the column
   beside it. That was the alignment fault in the old version, where the
   "designed and maintained" line sat in a sixth grid cell of its own.

   Greys come from --slate, not from the design file's #8D8D8D: that is 3.1:1
   on mist and this stylesheet fixed it once already. Buttons are the site's
   own .btn, not the design's second button system. */
.fhc{background:var(--mist)}
.fhc-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:0 clamp(40px,5.6vw,84px);align-items:stretch}
.fhc-lead{display:flex;flex-direction:column}

/* the dash before the eyebrow */
.eyebrow.dashed{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow.dashed::before{content:'';width:22px;height:3px;background:var(--green);
  display:block;flex:none}

.fhc-lede{margin:0 0 20px;font-size:clamp(1.16rem,1.5vw,1.34rem);line-height:1.4;
  font-weight:500;color:var(--ink);max-width:34ch}
.fhc-copy{margin:0 0 36px;font-size:1.03rem;line-height:1.62;color:#3D4548;max-width:52ch}
.fhc-cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 26px}
.fhc-meta{margin:0;color:var(--slate);line-height:1.7}
.fhc-meta span{white-space:nowrap}

.fhc-panel{background:var(--paper);border:1px solid rgba(18,22,24,.13);
  padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column}
.fhc-plabel{margin:0 0 4px;font-size:.72rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--slate)}
.fhc-pframe{margin:0 0 30px;font-size:.98rem;line-height:1.4;color:#3D4548;font-style:italic}

/* flex:1 on the list is what pushes the ladder and the foot to the bottom of
   the panel, so the panel ends level with the column beside it */
.fhc-areas{list-style:none;margin:0 0 34px;padding:0;flex:1 0 auto}
.fhc-areas li{display:flex;align-items:baseline;gap:16px;padding:15px 0;
  border-top:1px solid rgba(18,22,24,.07)}
.fhc-areas li:last-child{border-bottom:1px solid rgba(18,22,24,.07)}
.fhc-areas .n{flex:none;width:22px;font-size:.7rem;font-weight:600;letter-spacing:.09em;
  color:var(--slate)}
.fhc-areas .t{font-size:1.08rem;font-weight:500;line-height:1.25;color:var(--ink)}

.fhc-panel .fhc-plabel+.fhc-ladder{margin-top:14px}
.fhc-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.fhc-ladder .rung{padding:11px 4px 0;border-top:3px solid var(--tone);text-align:center}
.fhc-ladder .rung b{display:block;font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.2}
.fhc-ladder .r1{--tone:var(--alert)}
.fhc-ladder .r2{--tone:var(--warn)}
.fhc-ladder .r3{--tone:var(--green-deep)}
.fhc-ladder .r4{--tone:var(--green)}
.fhc-note{margin:0 0 26px;font-size:.88rem;line-height:1.5;color:var(--slate)}
.fhc-pfoot{margin:0;padding-top:20px;border-top:1px solid rgba(18,22,24,.07);
  font-size:.9rem;line-height:1.5;font-style:italic;color:var(--slate)}

@media (max-width:1000px){
  .fhc-grid{grid-template-columns:minmax(0,1fr);gap:52px 0}
  .fhc-lead .title{max-width:18ch}
}
@media (max-width:620px){
  .fhc-lead .title{max-width:none}
  .fhc-cta .btn{width:100%}
  .fhc-ladder{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
}


/* ---------- skip link ----------
   The first focusable thing in the document. Off-screen until focused rather
   than display:none, because a hidden element cannot be tabbed to, which is
   the one thing this has to do. */
.skip{position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:12px 18px;font-size:.86rem;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--ink);transition:top .16s cubic-bezier(.19,1,.22,1)}
.skip:focus{top:12px;outline:2px solid var(--green-lift);outline-offset:2px}

/* Which fields are required, said in words inside the label rather than with a
   bare asterisk. A screen reader reads it with the field name, and a sighted
   visitor does not have to hunt for a legend explaining the symbol. */
.req{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-left:8px;white-space:nowrap}

/* ---------- accuracy basis ----------
   What replaced the named reviewer beside the calculator's heading. It takes
   the same panel treatment as .verified so the page keeps one visual language
   for "here is why you can trust this number", and align-self:start stops it
   stretching down a column much taller than its own content. */
.basis{border:1px solid var(--rule);background:var(--mist);
  padding:20px 22px;align-self:start}
.blabel{margin:0 0 12px;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate)}
.basis ul{list-style:none;margin:0 0 16px;padding:0;
  border-top:1px solid var(--rule)}
.basis li{padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:.95rem;line-height:1.45;color:#3B4448}
.basis li b{color:var(--ink);font-weight:700}
.bnote{margin:0;font-size:.88rem;line-height:1.55;color:#4B5457}


/* ---------- the gap between sections ----------
   Each .pad carries a full pad top and bottom, so two in a row put twice that
   between their content: measured 322px on /about/ between "How we work" and
   "Evidence", 387px at the widest pair.

   Padding that faces a neighbour with its own ground is redundant, because
   that neighbour's coloured block already separates the two. And between two
   sections with no ground, one pad is enough. So a groundless section takes
   the reduced pad on any side facing a neighbour; a section WITH a ground
   keeps its full pad, because there the padding holds its own block open
   rather than separating anything from anything. */
:root{--pad-tight:clamp(30px,3.6vw,52px)}

/* following any section */
section + section.pad:not(.mist):not(.band):not(.banner):not(.hero),
section + section.pad-s:not(.mist):not(.band):not(.banner):not(.hero){
  padding-top:var(--pad-tight)}

/* preceding a section that brings its own ground */
section.pad:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.mist),
section.pad:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.band),
section.pad:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.banner),
section.pad:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.pad:not(.mist):not(.band):not(.banner)),
section.pad:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.pad-s:not(.mist):not(.band):not(.banner)),
section.pad-s:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.mist),
section.pad-s:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.band),
section.pad-s:not(.mist):not(.band):not(.banner):not(.hero):has(+ section.banner){
  padding-bottom:var(--pad-tight)}