/* 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 ---------- */
  /* The rise uses the independent translate/scale properties, so `transform` stays free for the hover lift.
     (When both used `transform`, the .in-view rule outranked :hover and revealed cards never lifted.) The
     stagger delay applies to the entrance only; hover feedback starts at once. */
  .js-ready .motion-reveal {
    translate: 0 26px;
    scale: .985;
    transition:
      opacity 560ms ease var(--motion-delay, 0ms),
      translate 680ms var(--mp-ease) var(--motion-delay, 0ms),
      scale 680ms var(--mp-ease) var(--motion-delay, 0ms),
      transform 320ms var(--mp-ease),
      box-shadow 320ms ease,
      border-color 320ms ease;
  }
  .js-ready .motion-reveal.in-view { translate: none; scale: 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 820ms var(--mp-ease), transform 1100ms 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 3;
    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; }

/* ---------- Feedback, page transitions and disclosure ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Press feedback: buttons and link cards dip while held (fast), then ease back on release. */
  .button:active, .mp-filter button:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
  main a:is(.service-card, .service-index-card, .resource-card, .value-card, .article-related-card):active {
    transform: translateY(-3px) scale(.99);
    transition-duration: 90ms;
  }

  /* Moving between pages: the old page fades out quickly and the new one settles in. The header is its own
     snapshot with no animation, so it stays put instead of flashing. Browsers without cross-document view
     transitions simply navigate as before. */
  @view-transition { navigation: auto; }
  .topbar { view-transition-name: mp-header; }
  ::view-transition-group(mp-header),
  ::view-transition-old(mp-header),
  ::view-transition-new(mp-header) { animation: none; }
  ::view-transition-old(root) { animation: mp-page-out 150ms ease-in both; }
  ::view-transition-new(root) { animation: mp-page-in 300ms var(--mp-ease) both; }

  /* Insights filter: guide cards glide to their new places (motion-plus.js names them for the transition). */
  ::view-transition-group(*.mp-guide) { animation-duration: 380ms; animation-timing-function: var(--mp-ease); }

  /* Status messages under the contact forms arrive instead of popping in. */
  .form-status:is(.is-success, .is-error, .is-ready) { animation: mp-fade-up 360ms var(--mp-ease) both; }
}

/* FAQ answers open and close smoothly instead of snapping. Needs ::details-content and interpolate-size;
   other browsers keep the instant toggle. */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    main details { interpolate-size: allow-keywords; }
    main details::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size 320ms var(--mp-ease), opacity 220ms ease, content-visibility 320ms allow-discrete;
    }
    main details[open]::details-content { block-size: auto; opacity: 1; }
  }
}

@keyframes mp-page-out { to { opacity: 0; } }
@keyframes mp-page-in { from { opacity: 0; transform: translateY(10px); } }