/* Motion and polish layer (Nov 2026). Loaded last on every page, so it refines site-motion.css without
   changing layout: only transform, opacity, clip-path, shadows and colours animate, which keeps CLS at 0.
   Everything here is skipped for visitors who ask for reduced motion. */

:root {
  --mp-red: #e44a4b;
  --mp-red-soft: rgba(228, 74, 75, .18);
  --mp-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Polish: one consistent keyboard focus ring across buttons, links and form fields. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--mp-red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Polish: the four "Our edge" stat cards broke words ("Workin g") when the panel was narrow; use 2 x 2 there. */
.feature-panel { container-type: inline-size; }
@container (max-width: 560px) {
  .feature-panel .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Scroll reveal: a clearer rise for cards and section content ---------- */
  .js-ready .motion-reveal {
    transform: translate3d(0, 34px, 0) scale(.985);
    transition:
      opacity 640ms ease var(--motion-delay, 0ms),
      transform 820ms var(--mp-ease) var(--motion-delay, 0ms);
  }
  .js-ready .motion-reveal.in-view { transform: none; }

  /* Section headings draw a short brand-red underline when they arrive. */
  main .section-head h2 { position: relative; }
  main .section-head h2::after {
    content: "";
    display: block;
    width: 3.2rem;
    height: 3px;
    margin-top: .7rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--mp-red), #ff8a8a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms var(--mp-ease) 260ms;
  }
  main .section-head.in-view h2::after,
  main .section-head:not(.motion-reveal) h2::after { transform: scaleX(1); }
  main .section-head[style*="center"] h2::after,
  main .text-center .section-head h2::after { margin-inline: auto; transform-origin: center; }

  /* Images below the hero uncover from the bottom and settle from a slight zoom. The clip sits on the image,
     not the observed wrapper, because IntersectionObserver treats a fully clipped target as not visible. */
  .js-ready .mp-media img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.08);
    transition: clip-path 1000ms var(--mp-ease), transform 1400ms var(--mp-ease);
  }
  .js-ready .mp-media.mp-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

  /* ---------- Hero entrance ---------- */
  /* The H1 stays fully opaque (it is the LCP element); it only rises slightly with a light sheen. */
  .mp-hero-ready :is(.home-slide-copy, .page-hero .hero-copy, .page-hero) h1 {
    animation: mp-rise 900ms var(--mp-ease) both;
  }
  .mp-hero-ready :is(.home-slide-copy, .page-hero) :is(.eyebrow, .lead, .hero-actions, .hero-proof, .breadcrumb) {
    animation: mp-fade-up 760ms var(--mp-ease) both;
  }
  .mp-hero-ready :is(.home-slide-copy, .page-hero) .eyebrow { animation-delay: 60ms; }
  .mp-hero-ready :is(.home-slide-copy, .page-hero) .lead { animation-delay: 220ms; }
  .mp-hero-ready :is(.home-slide-copy, .page-hero) .hero-actions { animation-delay: 340ms; }
  .mp-hero-ready :is(.home-slide-copy, .page-hero) .hero-proof { animation-delay: 460ms; }

  .mp-sheen {
    background-image: linear-gradient(100deg, currentColor 40%, #ffd3d3 50%, currentColor 60%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mp-sheen 2.4s ease 700ms 1 both;
  }

  /* Hero data tiles drift gently; each tile has its own rhythm. */
  .deal-orbit-scene .data-tile { animation: mp-float 6s ease-in-out infinite; }
  .deal-orbit-scene .tile-qoe { animation-delay: -1.2s; animation-duration: 7s; }
  .deal-orbit-scene .tile-cashflow { animation-delay: -2.6s; }
  .deal-orbit-scene .tile-nwc { animation-delay: -3.4s; animation-duration: 6.6s; }
  .deal-orbit-scene .tile-debt { animation-delay: -4.8s; animation-duration: 7.4s; }

  /* Primary call-to-action: a slow light sweep invites the click. */
  .hero-actions .button.primary { position: relative; overflow: hidden; isolation: isolate; }
  .hero-actions .button.primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: mp-cta-sweep 4.5s ease-in-out 1.6s infinite;
    pointer-events: none;
  }

  /* Eyebrow icons pulse once on arrival. */
  .eyebrow .icon { animation: mp-pop 700ms var(--mp-ease) 200ms both; }
}

/* ---------- Hover: cards, images and buttons (mouse users only) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main :is(.service-card, .service-context-card, .service-index-card, .service-dossier-card, .method-card, .value-card, .industry-card, .quote-card, .resource-card, .process-step) {
    position: relative;
    transition: transform 320ms var(--mp-ease), box-shadow 320ms ease, border-color 320ms ease;
  }
  main :is(.service-card, .service-context-card, .service-index-card, .service-dossier-card, .method-card, .value-card, .industry-card, .quote-card, .resource-card, .process-step)::before {
    content: "";
    position: absolute;
    top: 0;
    right: 1.2rem;
    left: 1.2rem;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, var(--mp-red), #ff8a8a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms var(--mp-ease);
    pointer-events: none;
  }
  main :is(.service-card, .service-context-card, .service-index-card, .service-dossier-card, .method-card, .value-card, .industry-card, .quote-card, .resource-card, .process-step):hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(18, 13, 31, .16), 0 0 0 1px var(--mp-red-soft);
    border-color: rgba(228, 74, 75, .55);
  }
  main :is(.service-card, .service-context-card, .service-index-card, .service-dossier-card, .method-card, .value-card, .industry-card, .quote-card, .resource-card, .process-step):hover::before { transform: scaleX(1); }
  main :is(.service-card, .service-index-card, .method-card, .value-card, .resource-card, .process-step):hover .icon { animation: mp-wiggle 520ms var(--mp-ease); }

  .mp-media { overflow: hidden; }
  .js-ready .mp-media.mp-in:hover img { transform: scale(1.045); }

  .button { position: relative; overflow: hidden; isolation: isolate; }
  .button:hover { box-shadow: 0 12px 26px rgba(228, 74, 75, .28); }
  .button.secondary:hover, .button.light:hover { box-shadow: 0 12px 26px rgba(18, 13, 31, .18); }

  /* Text links inside content get an animated underline. */
  main p a:not(.button), main li a:not(.button) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 320ms var(--mp-ease);
  }
  main p a:not(.button):hover, main li a:not(.button):hover { background-size: 100% 1.5px; }
}

@keyframes mp-rise { from { transform: translate3d(0, 22px, 0); } to { transform: none; } }
@keyframes mp-fade-up { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes mp-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes mp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes mp-cta-sweep { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes mp-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
@keyframes mp-wiggle { 0%, 100% { transform: none; } 35% { transform: rotate(-10deg) scale(1.12); } 70% { transform: rotate(6deg); } }

/* ---------- Homepage hero slider: steady height and even tabs ---------- */
/* All slides share one grid cell, so the hero is always as tall as the tallest slide and the page no longer
   jumps when FDD / Audit / CFOA switch. Inactive slides stay hidden (visibility + aria-hidden) as before. */
.home-page .home-hero-slider > .container { display: grid !important; grid-template-columns: minmax(0, 1fr); align-content: center; }
.home-page .home-hero-slider > .container > .home-slide { display: block; grid-area: 1 / 1; }
.home-page .home-hero-slider > .container > .home-slider-controls { grid-area: 2 / 1; }
@media (max-width: 699px) {
  .home-page .home-hero-slider > .container { align-content: start; }
}
/* Tabs: equal width, number and label centred together, same height in every state. */
.home-page .home-slide-tab {
  grid-template-columns: auto auto !important;
  justify-content: center;
  align-items: baseline;
  column-gap: .5rem !important;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04);
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}
.home-page .home-slide-tab span { opacity: .7; }
.home-page .home-slide-tab.is-active span { opacity: 1; }
@media (max-width: 699px) {
  .home-page .home-slide-tab { grid-template-columns: 1fr !important; row-gap: .1rem; }
}

/* ---------- Process timelines: homepage "How we work" and the service pages' method steps ---------- */
/* A connected timeline instead of separate boxes. app.js fills the rail and marks the active step for any [data-process-track]. */
:is(.home-page .work-model-section .process-track, main .service-method-grid) {
  --node: 3.4rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2.4vw, 2rem) !important;
  padding-top: .5rem;
}
/* The rail runs through the centre of the four number nodes; app.js fills it as the section scrolls. */
:is(.home-page .work-model-section, main .service-method-grid) .process-progress-line {
  display: block !important;
  position: absolute;
  top: calc(.5rem + var(--node) / 2);
  left: 12.5%;
  right: 12.5%;
  width: auto;
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  transform: none;
  z-index: 0;
}
:is(.home-page .work-model-section, main .service-method-grid) .process-progress-line > span { transition: width 420ms cubic-bezier(.22, 1, .36, 1); }
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0 0 1.6rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center;
  backdrop-filter: none !important;
  transform: none !important;
}
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card)::before,
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card)::after,
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) .process-arrow { display: none !important; }
/* Number node on the rail. */
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) > span:first-child {
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 2px solid rgba(255, 133, 136, .55);
  border-radius: 50%;
  background: #17111f;
  color: #ff9a9c;
  font-size: .9rem;
  letter-spacing: .06em;
  box-shadow: 0 0 0 6px rgba(23, 17, 31, .9);
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1);
}
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card):is(.is-process-active, .is-process-past) > span:first-child {
  border-color: var(--mp-red);
  background: var(--mp-red);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(23, 17, 31, .9), 0 0 26px rgba(228, 74, 75, .65);
}
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card).is-process-active > span:first-child { transform: scale(1.12); }
/* Content sits on a soft glass panel under each node. */
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) > :is(svg, i) {
  width: 2.9rem !important;
  height: 2.9rem !important;
  margin: 1.4rem 0 0 !important;
  padding: .7rem;
  border-radius: 1rem;
  background: rgba(228, 74, 75, .12);
  color: #ff8a8c;
  box-sizing: border-box;
  transition: background-color 300ms ease, color 300ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1);
}
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) h3 { margin: 1rem 0 .55rem !important; text-align: center !important; }
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) p { max-width: 26ch; margin-inline: auto; text-align: center !important; }
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card):is(.is-process-active, :hover) > :is(svg, i) {
  background: var(--mp-red);
  color: #fff;
  transform: translateY(-3px);
}
:is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card):not(.is-process-active):not(.is-process-past) :is(h3, p) { opacity: .75; transition: opacity 400ms ease; }

/* Tablet and phone: the rail turns vertical on the left, content to its right. */
@media (max-width: 1180px) {
  :is(.home-page .work-model-section .process-track, main .service-method-grid) { grid-template-columns: minmax(0, 1fr) !important; gap: 1.6rem !important; padding-top: 0; }
  :is(.home-page .work-model-section, main .service-method-grid) .process-progress-line {
    top: calc(var(--node) / 2);
    bottom: calc(var(--node) / 2 + 1.6rem);
    left: calc(var(--node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  :is(.home-page .work-model-section, main .service-method-grid) .process-progress-line > span { width: 100%; height: var(--process-progress, 0%); transition: height 420ms cubic-bezier(.22, 1, .36, 1); }
  :is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) {
    display: grid !important;
    grid-template-columns: var(--node) auto minmax(0, 1fr);
    grid-template-areas: "node icon title" "node text text";
    column-gap: 1rem;
    align-items: center !important;
    padding: 0 !important;
    text-align: left;
  }
  :is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) > span:first-child { grid-area: node; align-self: start; }
  :is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) > :is(svg, i) { grid-area: icon; margin: 0 !important; width: 2.6rem !important; height: 2.6rem !important; padding: .6rem; }
  :is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) h3 { grid-area: title; margin: 0 !important; text-align: left !important; }
  :is(.home-page .work-model-section .process-step, main .service-method-grid > .method-card) p { grid-area: text; max-width: none; margin: .5rem 0 0; text-align: left !important; }
}

/* Service pages: three-step methods (Audit) use three columns, and method headings match the timeline scale. */
@media (min-width: 1181px) {
  main .service-method-grid.service-method-grid.service-method-grid:not(:has(> article:nth-of-type(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  main .service-method-grid:not(:has(> article:nth-of-type(4))) .process-progress-line { left: 16.667% !important; right: 16.667% !important; }
}
main .service-method-grid { display: grid !important; position: relative; }
main .service-method-grid > .method-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important; line-height: 1.2 !important; }
main .service-method-grid > .method-card { grid-template-rows: none !important; }

/* ---------- About: "A clear process" as a light-theme timeline ---------- */
.engagement-steps[data-process-track] { --node: 3.2rem; position: relative; gap: clamp(1rem, 3vw, 2.5rem) !important; }
.engagement-steps[data-process-track]::before,
.engagement-steps[data-process-track]::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: 16.667%;
  height: 2px;
  border-radius: 99px;
  z-index: 0;
}
.engagement-steps[data-process-track]::before { right: 16.667%; background: #e2e5ec; }
/* The red fill covers the whole rail and is uncovered with clip-path, because app.js sets --process-progress as a percentage. */
.engagement-steps[data-process-track]::after {
  right: 16.667%;
  background: linear-gradient(90deg, #ff8a8c, var(--mp-red));
  clip-path: inset(0 calc(100% - var(--process-progress, 0%)) 0 0);
  transition: clip-path 420ms cubic-bezier(.22, 1, .36, 1);
}
.engagement-steps[data-process-track] li {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 .5rem !important;
  border: 0 !important;
  background: none !important;
  text-align: center;
}
.engagement-steps[data-process-track] li > span {
  display: grid !important;
  place-items: center;
  justify-content: center !important;
  width: var(--node);
  height: var(--node);
  border: 2px solid rgba(228, 74, 75, .45);
  border-radius: 50%;
  background: #fff;
  color: var(--mp-red) !important;
  font-size: .9rem;
  box-shadow: 0 0 0 6px #fff;
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.engagement-steps[data-process-track] li:is(.is-process-active, .is-process-past) > span {
  border-color: var(--mp-red);
  background: var(--mp-red);
  color: #fff !important;
  box-shadow: 0 0 0 6px #fff, 0 8px 22px rgba(228, 74, 75, .4);
}
.engagement-steps[data-process-track] li.is-process-active > span { transform: scale(1.12); }
.engagement-steps[data-process-track] li > :is(svg, i) {
  width: 2.8rem !important;
  height: 2.8rem !important;
  margin-top: 1.3rem;
  padding: .65rem;
  border-radius: 1rem;
  background: rgba(228, 74, 75, .1);
  color: var(--mp-red);
  box-sizing: border-box;
  transition: background-color 300ms ease, color 300ms ease, transform 300ms ease;
}
.engagement-steps[data-process-track] li:is(.is-process-active, :hover) > :is(svg, i) { background: var(--mp-red); color: #fff; transform: translateY(-3px); }
.engagement-steps[data-process-track] h3 { margin: 1rem 0 .55rem !important; }
.engagement-steps[data-process-track] p { max-width: 30ch; margin-inline: auto !important; }
@media (max-width: 640px) {
  .engagement-steps[data-process-track] { gap: 1.6rem !important; }
  .engagement-steps[data-process-track]::before { top: calc(var(--node) / 2); bottom: 2rem; left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .engagement-steps[data-process-track]::after { top: calc(var(--node) / 2); bottom: 2rem; left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto; background: linear-gradient(180deg, #ff8a8c, var(--mp-red)); clip-path: inset(0 0 calc(100% - var(--process-progress, 0%)) 0); }
  .engagement-steps[data-process-track] li {
    display: grid;
    grid-template-columns: var(--node) auto minmax(0, 1fr);
    grid-template-areas: "node icon title" "node text text";
    column-gap: 1rem;
    align-items: center;
    text-align: left;
  }
  .engagement-steps[data-process-track] li > span { grid-area: node; align-self: start; }
  .engagement-steps[data-process-track] li > :is(svg, i) { grid-area: icon; margin: 0; }
  .engagement-steps[data-process-track] h3 { grid-area: title; margin: 0 !important; }
  .engagement-steps[data-process-track] p { grid-area: text; max-width: none; margin: .5rem 0 0 !important; }
}

/* ---------- Contact: the three response steps as a small connected stepper ---------- */
/* Keeps the existing three equal boxes; numbers become round nodes and a short red line joins the boxes. */
.contact-response-steps { gap: .9rem !important; }
.contact-response-steps > span { position: relative; justify-content: center; }
.contact-response-steps > span:not(:last-child)::after {
  content: "" !important;
  position: absolute;
  top: calc(50% - 1px);
  right: -.9rem;
  width: .9rem;
  height: 2px;
  margin: 0 !important;
  background: var(--mp-red);
}
.contact-response-steps > span > strong {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--mp-red);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
}
.contact-response-steps > span:first-child > strong { background: var(--mp-red); color: #fff; }
@media (max-width: 760px) {
  .contact-response-steps > span:not(:last-child)::after { top: auto; right: auto; bottom: -.9rem; left: calc(50% - 1px); width: 2px; height: .9rem; }
}

/* ---------- Guides: a reading experience that is easier to follow ---------- */
/* Reading progress bar (motion-plus.js adds it on guide pages only). */
.mp-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff8a8c, var(--mp-red));
  box-shadow: 0 0 10px rgba(228, 74, 75, .55);
  transform: scaleX(var(--mp-read, 0));
  transform-origin: left;
  pointer-events: none;
}
.mp-read-time { white-space: nowrap; }

/* Comfortable line length and rhythm. */
.article-reading-section .article-content { font-size: 1.06rem; line-height: 1.82; }
.article-reading-section .article-content > p { max-width: 70ch; }
.article-reading-section .article-content h2 { position: relative; scroll-margin-top: 7rem; padding-top: .35rem; }
/* The TOC used to stretch to the full article height, so position: sticky never engaged. */
.article-layout > .article-toc { align-self: start; }
/* body { overflow-x: hidden } turned body into a scroll container, which also stops sticky; clip keeps the
   horizontal guard without that side effect. */
body.insight-article-page { overflow-x: clip !important; overflow-y: visible !important; }
/* Copy-link button next to each section heading. */
.mp-anchor {
  margin-left: .55rem;
  padding: .15rem .35rem;
  border: 0;
  border-radius: .4rem;
  background: none;
  color: #c9ced6;
  font: inherit;
  font-size: .62em;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, color 200ms ease, background-color 200ms ease;
}
.article-content h2:hover .mp-anchor, .mp-anchor:focus-visible { opacity: 1; }
.mp-anchor:hover { color: var(--mp-red); background: rgba(228, 74, 75, .08); }
.mp-anchor.is-copied { opacity: 1; color: #1f9d63; }

/* Lists: guide bullets already render as tiles; key takeaways use plain red markers instead. */
.article-takeaways ul { display: block !important; list-style: none; padding-left: 0; }
.article-takeaways li { position: relative; margin: 0 !important; padding: .3rem 0 .3rem 1.6rem !important; border: 0 !important; background: none !important; }
.article-takeaways li + li { margin-top: .35rem !important; }
.article-takeaways li::before {
  content: "";
  position: absolute;
  top: .95em;
  left: .2rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--mp-red);
  box-shadow: 0 0 0 4px rgba(228, 74, 75, .12);
}
.article-reading-section .article-content ol { list-style: none; padding-left: 0; counter-reset: mp-step; }
.article-reading-section .article-content ol > li { position: relative; padding-left: 2.6rem; counter-increment: mp-step; }
.article-reading-section .article-content ol > li::before {
  content: counter(mp-step);
  position: absolute;
  top: .1em;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--mp-red);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}

/* Notes and practical tests read as callouts. */
.article-reading-section .article-note {
  position: relative;
  margin: 1.6rem 0;
  padding: 1.1rem 1.25rem 1.1rem 3.3rem;
  border: 1px solid rgba(228, 74, 75, .2);
  border-left: 4px solid var(--mp-red);
  border-radius: .9rem;
  background: linear-gradient(135deg, #fff6f5, #fff);
}
.article-reading-section .article-note::before {
  content: "!";
  position: absolute;
  top: 1.05rem;
  left: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--mp-red);
  color: #fff;
  font-weight: 900;
  font-size: .85rem;
}

/* Tables: rounded, zebra rows, readable headers. */
.article-reading-section .article-table-wrap { border: 1px solid #e4e7ee; border-radius: 1rem; overflow: auto; box-shadow: 0 10px 28px rgba(18, 13, 31, .06); }
.article-reading-section .article-content th { background: #17111f; color: #fff; font-size: .9rem; letter-spacing: .02em; }
.article-reading-section .article-content tbody tr:nth-child(even) td { background: #faf7f7; }
.article-reading-section .article-content tbody tr:hover td { background: #fff1f0; }

/* Key takeaways. */
.article-takeaways {
  margin: 1.6rem 0 2rem;
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid rgba(228, 74, 75, .22);
  border-radius: 1.1rem;
  background: linear-gradient(140deg, #fff, #fff5f4);
  box-shadow: 0 14px 34px rgba(228, 74, 75, .08);
}
.article-takeaways > strong { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; color: #17111f; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.article-takeaways > strong svg { width: 1.1rem; height: 1.1rem; color: var(--mp-red); }
.article-takeaways ul { margin: 0 !important; }
.article-takeaways li { color: #2d3a4b; }

/* FAQ accordion. */
.article-faq { display: grid; gap: .7rem; margin: 1rem 0 2rem; }
.article-faq details { border: 1px solid #e4e7ee; border-radius: .9rem; background: #fff; transition: border-color 250ms ease, box-shadow 250ms ease; }
.article-faq details[open] { border-color: rgba(228, 74, 75, .45); box-shadow: 0 12px 28px rgba(18, 13, 31, .07); }
.article-faq summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.15rem;
  color: #17111f;
  font-weight: 800;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(228, 74, 75, .1);
  color: var(--mp-red);
  font-weight: 800;
  transform: translateY(-50%);
  transition: transform 300ms var(--mp-ease), background-color 300ms ease, color 300ms ease;
}
.article-faq details[open] summary::after { background: var(--mp-red); color: #fff; transform: translateY(-50%) rotate(45deg); }
.article-faq details p { margin: 0 !important; padding: 0 1.15rem 1.1rem; }

/* Related guides. */
.article-related { margin: 2.6rem 0 2rem; }
.article-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.article-related-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem;
  border: 1px solid #e4e7ee;
  border-radius: 1rem;
  background: #fff;
  color: #17111f !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: transform 320ms var(--mp-ease), box-shadow 320ms ease, border-color 320ms ease;
}
.article-related-card > svg { width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: .7rem; background: rgba(228, 74, 75, .1); color: var(--mp-red); box-sizing: border-box; }
.article-related-card > span { margin-top: .4rem; color: var(--mp-red); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-related-card > strong { font-size: 1.05rem; line-height: 1.3; }
.article-related-card > em { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .5rem; color: #6b7686; font-size: .85rem; font-style: normal; }
.article-related-card > em svg { width: .95rem; height: .95rem; }
.article-related-card:hover { transform: translateY(-5px); border-color: rgba(228, 74, 75, .5); box-shadow: 0 16px 34px rgba(18, 13, 31, .1); }
@media (max-width: 760px) { .article-related > div { grid-template-columns: minmax(0, 1fr); } }

/* Table of contents: highlights the section being read. */
.article-toc a { position: relative; transition: color 200ms ease, padding-left 250ms var(--mp-ease); }
.article-toc a.is-current { padding-left: .8rem; color: var(--mp-red) !important; font-weight: 800; }
.article-toc a.is-current::before { content: ""; position: absolute; top: 50%; left: 0; width: .35rem; height: .35rem; border-radius: 50%; background: var(--mp-red); transform: translateY(-50%); }

/* ---------- Insights hub: topic filter ---------- */
.mp-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.mp-filter button {
  padding: .55rem 1rem;
  border: 1px solid rgba(23, 17, 31, .14);
  border-radius: 999px;
  background: #fff;
  color: #2d2a36;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.mp-filter button:hover { transform: translateY(-2px); border-color: var(--mp-red); }
.mp-filter button[aria-pressed="true"] { border-color: var(--mp-red); background: var(--mp-red); color: #fff; }
.mp-filter button span { margin-left: .35rem; opacity: .7; font-weight: 600; }
.insights-guide.mp-hidden { display: none !important; }