/* ==========================================================================
   FinWisePoint — service-page layout overrides.
   Loaded AFTER the main styles.css, so every token, the header, footer,
   buttons, background system and reveal animations match the main site
   exactly. This file only adds the service-page-specific layout.
   Each service lives in its own folder (services/<slug>/index.html) and holds
   only content — edit one page in isolation, or this file to restyle them all.
   ========================================================================== */

/* ==========================================================================
   SERVICES MEGA-DROPDOWN — minimalist rounded panel, framed service tiles
   ========================================================================== */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.nav-dd-trigger:hover,
.nav-dd.is-open .nav-dd-trigger { color: var(--accent-soft); }
.nav-dd-caret { font-size: 0.55rem; transition: transform 0.32s var(--ease); }
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }

/* Viewport-centered, near-full-width panel. JS sets `top` under the header and
   toggles .is-open with a small hover-intent delay. */
.nav-dd-panel {
  position: fixed;
  top: 92px;
  left: 50%;
  width: min(88rem, 95vw);
  padding: 1.3rem;
  background: rgba(9, 19, 38, 0.97);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 44px 100px -34px rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(12px) scale(0.99);
  transform-origin: top center;
  transition:
    opacity 0.24s var(--ease),
    transform 0.32s var(--ease),
    visibility 0s linear 0.32s;
  z-index: 60;
}
.nav-dd.is-open .nav-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity 0.28s var(--ease),
    transform 0.38s var(--ease),
    visibility 0s;
}

/* Tiles: same height, content-based widths, centered across the wide panel */
.nav-dd-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.nav-dd-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.78rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.014);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.nav-dd-item:hover {
  border-color: var(--accent-soft);
  background: rgba(111, 155, 242, 0.1);
  transform: translateY(-1px);
}
.nav-dd-num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}
.nav-dd-item:hover .nav-dd-num { color: var(--accent-soft); }
.nav-dd-name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-strong);
  font-size: 0.98rem; /* uniform — same size for every service */
}
.nav-dd-item.is-current {
  border-color: var(--accent-soft);
  background: rgba(111, 155, 242, 0.12);
}
.nav-dd-item.is-current .nav-dd-num { color: var(--accent-soft); }
@media (max-width: 1080px) {
  .nav-dd-panel { width: 95vw; }
}

/* The subpage / standalone-page nav carries six items (three dropdowns plus the
   Why founder-led / Insights / Contact links). Keep each on one line and tighten
   the spacing. Below 1024px there is no room for all six beside the logo and CTA,
   so the nav collapses — the site has no separate mobile menu, and the logo
   (home) plus the Request-a-consultation button remain. The homepage keeps its
   own five-item scroll menu; it does not load this stylesheet. */
.site-nav a,
.nav-dd-trigger { white-space: nowrap; }
.site-header .site-nav { gap: clamp(1.05rem, 2vw, 2.6rem); }
@media (max-width: 1024px) {
  /* Subpages hide the (wider) desktop nav earlier than the homepage (1024 vs
     760), so the mobile burger + compact header must turn on at 1024 here too —
     otherwise 761-1024px would show no navigation at all. The drawer itself is
     built by script.js and shared across all pages. */
  .site-header, .site-header.scrolled { height: 80px; }
  .site-header .site-nav { display: none; }
  .site-header .header-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; position: relative; }
  .site-header .header-cta { display: none; }
  .site-header .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
  }
  /* Centered stacked logo, rebuilt from the two SVGs (see the styles.css note).
     url() here is relative to service.css in /services/, hence ../images/. */
  .site-header .wordmark { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-left: 0; }
  .site-header .wordmark-mark, .site-header .wordmark-text { display: none; }
  .site-header .wordmark::before, .site-header .wordmark::after {
    content: ""; display: block; background-repeat: no-repeat; filter: brightness(0) invert(1);
  }
  .site-header .wordmark::before {
    width: 90px; height: 34px;
    background-image: url(../images/logo-mark.svg);
    background-size: 178px 190px; background-position: 9px -76px;
  }
  .site-header .wordmark::after {
    width: 210px; height: 30px;
    background-image: url(../images/logo-text.svg);
    background-size: 300px 320px; background-position: -58px -132px;
  }
}

/* Entrance animation — pure CSS (no JS dependency, so the page is never blank) */
@media all { /* motion always on: ignores reduced-motion */
  .svc-hero .back-link,
  .svc-hero .eyebrow,
  .svc-hero-title,
  .svc-hero-lead,
  .svc-body-copy,
  .svc-cta-inner {
    animation: svc-rise 0.7s var(--ease) both;
  }
  .svc-hero .eyebrow { animation-delay: 0.06s; }
  .svc-hero-title { animation-delay: 0.12s; }
  .svc-hero-lead { animation-delay: 0.18s; }
}
@keyframes svc-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Dark hero band (sits over the shared background, clears the fixed header) */
.svc-hero {
  position: relative;
  z-index: 1;
  padding: clamp(8.5rem, 15vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.back-link span { display: inline-block; transition: transform 0.2s var(--ease); }
.back-link:hover { color: var(--accent-soft); }
.back-link:hover span { transform: translateX(-3px); }

.svc-hero-title {
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  max-width: 20ch;
}
.svc-hero-lead {
  margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch;
}

/* Simple white body (used by not-yet-expanded service pages) */
.svc-body { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.svc-body-copy {
  max-width: 70ch;
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--text);
}
.svc-body-copy p { margin: 0 0 1.4rem; }
.svc-body-copy p:last-child { margin-bottom: 0; }

/* ---- Rich long-form body (dark, white text) for fully written service pages ---- */
.svc-prose { max-width: 72ch; }
.svc-prose > p {
  margin: 0 0 1.5rem;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.8;
}
.svc-prose .lead-para {
  color: var(--text-strong);
  font-size: clamp(1.18rem, 2vw, 1.4rem);
  line-height: 1.68;
}
.svc-prose h2 {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--text-strong);
}
.svc-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.svc-list li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0 0 0.85rem;
  color: var(--text);
  font-size: 1.06rem;
  line-height: 1.62;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.svc-example {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: rgba(111, 155, 242, 0.07);
}
.svc-example-label {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.svc-example p {
  margin: 0;
  color: var(--text);
  font-size: 1.06rem;
  line-height: 1.72;
}
.svc-example p + p { margin-top: 0.9rem; }

/* Dark CTA band — matches the main contact section; btn-primary reads correctly here */
.svc-cta {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4.5rem, 9vw, 7rem);
}
.svc-cta-inner { max-width: 46rem; }
.svc-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text-strong);
}
.svc-cta p {
  margin: 1rem 0 1.9rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 52ch;
}

/* ==========================================================================
   RESPONSIVE: every service page uses a two-column "<prose> + <figure card>"
   layout via its own *-body-grid class. Each overrides .container's max-width
   and sets asymmetric margins, but .container also sets width:100% — and
   width:100% + non-auto margins overflows the viewport by the margin amount
   (growing with screen width, up to ~1034px on ultrawide). Resetting width to
   auto lets the margins define the box so it always fits. One rule, all grids.
   ========================================================================== */
.container[class*="-body-grid"] { width: auto; }

/* ==========================================================================
   KPI DASHBOARDS — sticky scroll-scrubbed Lottie inside the white body.
   The animation lives only in the white section, sticks while you scroll
   through it, and slides up out of view toward the dark hero. No frame.
   (markup only exists on the KPI page; these rules are inert elsewhere)
   ========================================================================== */
.kpi-body-grid {
  /* Matches the other service pages: 64ch prose column, card centred in 1fr. */
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.kpi-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;    /* center the animation within the right-hand area */
}
.kpi-lottie {
  width: min(100%, 880px);    /* +50% size, capped to the available space */
  aspect-ratio: 1600 / 1064;
  display: block;
  /* artwork sits right-of-centre in its frame; nudge left to optically centre it
     in the white area (background removed, so no white overlaps the text) */
  transform: translateX(-13%);
}
.kpi-lottie svg { display: block; }

@media (max-width: 1100px) {
  .kpi-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* stack the animation below the text; no sticky on small screens */
  .kpi-sticky { position: static; }
}

/* ==========================================================================
   FINANCIAL STRATEGY — scroll-scrubbed forecast line chart (native SVG).
   Mirrors the KPI layout (prose left, sticky figure right). The card chrome,
   metrics, axes and labels are always present — only the two data lines draw
   in and the badge/CTA reveal as you scroll, so the top of the page always
   shows a clean, populated chart (never a blank frame).
   ========================================================================== */
.fin-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.fin-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}

.fin-card {
  width: min(100%, 560px);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  /* brand blue leads; violet 2nd series + warm orange accent from the home cards */
  --fin-blue: #2f63d6;
  --fin-violet: #8c7bf0;
  --fin-accent: #e8965a;
}

.fin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.fin-eyebrow {
  display: block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.fin-title {
  margin: 0.32rem 0 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-strong);
}
.fin-tag {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.7rem; white-space: nowrap;
}

.fin-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.35rem 0 0.2rem; }
.fin-metric-label { display: block; font-family: var(--font-body); font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }
.fin-metric-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.3rem; }
.fin-metric-value {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.fin-badge {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700; color: #b5601f;
  background: rgba(232, 150, 90, 0.16); border-radius: 999px; padding: 0.2rem 0.5rem;
  transform-origin: left center;
}
.fin-delta { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; color: var(--fin-accent); }

.fin-chart { display: block; width: 100%; height: auto; margin: 0.9rem 0 0; overflow: visible; }
.fin-grid-line { stroke: var(--line); stroke-width: 1; }
.fin-axis-label { fill: var(--text-faint); font-size: 11px; font-family: var(--font-body); }
.fin-line-actual { fill: none; stroke: var(--fin-blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fin-line-proj   { fill: none; stroke: var(--fin-violet); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 7; }
.fin-dot { fill: #ffffff; stroke-width: 2.4; }
.fin-dot-actual { stroke: var(--fin-blue); }
.fin-dot-proj { stroke: var(--fin-violet); }

.fin-legend { display: flex; gap: 1.3rem; margin-top: 0.8rem; }
.fin-leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
.fin-leg i { width: 16px; height: 0; display: inline-block; border-top: 2.4px solid; }
.fin-leg-actual { border-top-color: var(--fin-blue); }
.fin-leg-proj { border-top-color: var(--fin-violet); border-top-style: dashed; }

.fin-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.fin-insight { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); }
.fin-cta { font-size: 0.82rem; font-weight: 600; color: var(--accent); }

@media (max-width: 1100px) {
  .fin-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fin-sticky { position: static; }
}

/* ==========================================================================
   BOOKKEEPING & ACCOUNTING — scroll-scrubbed stacked bar chart (native SVG).
   Same sticky layout. Card chrome, metrics, axes, legend are always present;
   the bars grow Mon -> Sun on scroll, so progress 0 is a clean empty plot.
   Brand blue leads the primary series, a violet second series + a warm orange
   accent are borrowed from the home-page Income / Savings cards.
   ========================================================================== */
.bar-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.bar-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}

.bar-card {
  width: min(100%, 560px);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
}

.bar-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-strong);
}
.bar-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }

.bar-metrics { display: flex; gap: clamp(2rem, 6vw, 3.4rem); margin: 1.3rem 0 0.2rem; }
.bar-metric-value {
  display: block;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bar-metric-cap {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem;
  font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted);
}
.bar-metric-cap .bar-delta { margin-left: 0.3rem; font-weight: 600; color: var(--bar-accent); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-d1 { background: #2f63d6; }
.dot-d2 { background: #a9b0f2; }

.bar-chart { display: block; width: 100%; height: auto; margin: 0.7rem 0 0; overflow: visible; }
.bar-grid-line { stroke: var(--line); stroke-width: 1; }
.bar-axis-label { fill: var(--text-faint); font-size: 11px; font-family: var(--font-body); }
.bar-rect-d1 { fill: url(#barGradD1); }
.bar-rect-d2 { fill: url(#barGradD2); }
.bar-avg-line { stroke: var(--bar-accent); stroke-width: 1.5; stroke-dasharray: 5 5; }
.bar-avg-label { fill: var(--bar-accent); font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }

.bar-legend { display: flex; justify-content: center; gap: 1.4rem; margin-top: 0.9rem; }
.bar-leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }

/* warm accent token, scoped so it never bleeds into the rest of the light theme */
.bar-card { --bar-accent: #e8965a; }

@media (max-width: 1100px) {
  .bar-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bar-sticky { position: static; }
}

/* ==========================================================================
   MONTHLY CLOSE — scroll-scrubbed donut chart (native SVG).
   Same sticky layout. Card chrome, centre total and legend are always present;
   the three arcs sweep in on scroll, so progress 0 is a clean empty ring.
   Same palette as the others: blue leads, violet 2nd, warm orange accent.
   ========================================================================== */
.donut-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.donut-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}

.donut-card {
  width: min(100%, 540px);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  --don-blue: #2f63d6;
  --don-violet: #8c7bf0;
  --don-accent: #e8965a;
}
.donut-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text-strong);
}
.donut-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }

.donut-chart { display: block; width: min(100%, 330px); height: auto; margin: 1.1rem auto 0; overflow: visible; }
.donut-track { fill: none; stroke: rgba(11, 26, 48, 0.07); stroke-width: 16; }
.donut-seg { fill: none; stroke-width: 16; stroke-linecap: round; }
.donut-seg-blue { stroke: var(--don-blue); }
.donut-seg-violet { stroke: var(--don-violet); }
.donut-seg-orange { stroke: var(--don-accent); }
.donut-center-label { fill: var(--text-muted); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; }
.donut-center-value { fill: var(--text-strong); font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }

.donut-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.2rem; }
.donut-leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.76rem; color: var(--text-muted); }
.donut-leg b { font-weight: 600; color: var(--text-strong); }

.dot-blue { background: #2f63d6; }
.dot-violet { background: #8c7bf0; }
.dot-orange { background: #e8965a; }

@media (max-width: 1100px) {
  .donut-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .donut-sticky { position: static; }
}

/* ==========================================================================
   FINANCIAL REPORTING — scroll-scrubbed KPI + trend card (native SVG).
   Same sticky layout. Header, two KPI tiles, gridlines and axes are always
   present; the trend line + area draw left-to-right on scroll, so progress 0
   is a clean empty plot. Same palette: blue line leads, violet highlight tile,
   warm orange accents (deltas + the trend's latest-point marker).
   ========================================================================== */
.rep-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.rep-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}

.rep-card {
  width: min(100%, 540px);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  --rep-blue: #2f63d6;
  --rep-violet: #6b5fd6;
  --rep-violet-line: #8c7bf0;
  --rep-accent: #e8965a;
}

.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rep-title { margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); line-height: 1.1; }
.rep-sub { display: block; margin-top: 0.2rem; font-weight: 500; font-size: 0.95rem; color: var(--text-faint); }
.rep-icon { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text-strong); font-size: 0.85rem; }

.rep-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 1.3rem 0 0; }
.rep-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; }
.rep-tile-label { font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.rep-tile-value { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.rep-pill { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.16rem 0.5rem; border-radius: 999px; background: rgba(232, 150, 90, 0.16); color: #b5601f; }
.rep-arrow { font-size: 0.78em; }
.rep-tile-accent { background: var(--rep-violet); border-color: var(--rep-violet); }
.rep-tile-accent .rep-tile-label { color: rgba(255, 255, 255, 0.78); }
.rep-tile-accent .rep-tile-value { color: #ffffff; }
.rep-pill-on-accent { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

.rep-chart { display: block; width: 100%; height: auto; margin: 1.2rem 0 0; overflow: visible; }
.rep-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.rep-axis-label { fill: var(--text-faint); font-size: 11px; font-family: var(--font-body); }
.rep-line { fill: none; stroke: var(--rep-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rep-dot { fill: #ffffff; stroke: var(--rep-accent); stroke-width: 2.4; }

/* secondary stats strip — three compact KPIs under the hero tiles */
.rep-stats { display: flex; margin-top: 0.7rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rep-stat { flex: 1; padding: 0.7rem 0.85rem; }
.rep-stat + .rep-stat { border-left: 1px solid var(--line); }
.rep-stat-label { display: block; font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.rep-stat-value { display: block; margin-top: 0.28rem; font-size: 1.02rem; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rep-stat-delta { font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; color: var(--rep-accent); margin-left: 0.32rem; }

/* comparison line + chart legend */
.rep-line-last { fill: none; stroke: var(--rep-violet-line); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.rep-legend { display: flex; gap: 1.3rem; margin-top: 0.7rem; }
.rep-leg { display: inline-flex; align-items: center; gap: 0.42rem; font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); }
.rep-leg i { width: 16px; height: 0; display: inline-block; border-top: 2.4px solid; }
.rep-leg-this { border-top-color: var(--rep-blue); }
.rep-leg-last { border-top-color: var(--rep-violet-line); border-top-style: dashed; }

/* footer link — small, subtle, right-aligned */
.rep-foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.rep-foot-link { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 1100px) {
  .rep-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .rep-sticky { position: static; }
}

/* ==========================================================================
   CASH FLOW MANAGEMENT — scroll-scrubbed waterfall (bridge) chart (native SVG).
   Opening balance bridges through inflows (violet) and outflows (orange) to the
   closing balance (blue). Bars, value labels and connectors build left-to-right
   on scroll; the header, summary and legend are always present, so progress 0
   is a clean empty plot.
   ========================================================================== */
.cf-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.cf-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}
.cf-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  --cf-blue: #2f63d6;
  --cf-in: #8c7bf0;
  --cf-out: #e8965a;
}
.cf-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.cf-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }

.cf-summary { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.25rem; }
.cf-sum { display: flex; flex-direction: column; gap: 0.18rem; }
.cf-sum-label { font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cf-sum-value { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.cf-sum-arrow { color: var(--text-faint); font-size: 1.05rem; }
.cf-badge { margin-left: auto; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; color: #b5601f; background: rgba(232, 150, 90, 0.16); border-radius: 999px; padding: 0.2rem 0.55rem; }

.cf-chart { display: block; width: 100%; height: auto; overflow: visible; }
.cf-grid-line { stroke: var(--line); stroke-width: 1; }
.cf-axis-label { fill: var(--text-faint); font-size: 11px; font-family: var(--font-body); }
.cf-conn { stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 4; }
.cf-bar-total { fill: var(--cf-blue); }
.cf-bar-in { fill: var(--cf-in); }
.cf-bar-out { fill: var(--cf-out); }
.cf-val { font-family: var(--font-body); font-size: 10px; font-weight: 600; text-anchor: middle; }
.cf-val-total { fill: var(--text-strong); }
.cf-val-in { fill: var(--cf-in); }
.cf-val-out { fill: var(--cf-out); }
.cf-cat { fill: var(--text-faint); font-size: 10px; font-family: var(--font-body); text-anchor: middle; }
.cf-legend { display: flex; justify-content: center; gap: 1.3rem; margin-top: 0.9rem; }
.cf-leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }

@media (max-width: 1100px) {
  .cf-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cf-sticky { position: static; }
}

/* ==========================================================================
   BUDGETING & FORECASTING — scroll-scrubbed bullet chart (native SVG).
   One row per line item: a light track, an actual bar (blue), the budget
   reference line (orange) and a forecast marker (violet diamond). The frame,
   budget line, labels and legend are always present; the actual bars grow and
   forecast markers pop on scroll, so progress 0 is a clean empty plot.
   Reuses the .cf-summary header row.
   ========================================================================== */
.bud-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.bud-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}
.bud-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  --bud-blue: #2f63d6;
  --bud-violet: #8c7bf0;
  --bud-budget: #e8965a;
}
.bud-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.bud-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }

.bud-chart { display: block; width: 100%; height: auto; overflow: visible; }
.bud-track { fill: rgba(11, 26, 48, 0.06); }
.bud-bar { fill: var(--bud-blue); }
.bud-budget-line { stroke: var(--bud-budget); stroke-width: 2; }
.bud-budget-tag { fill: var(--bud-budget); font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-anchor: middle; }
.bud-fc { fill: var(--bud-violet); }
.bud-cat { fill: var(--text-strong); font-family: var(--font-display); font-size: 12px; font-weight: 500; text-anchor: end; }
.bud-pct { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; text-anchor: start; font-variant-numeric: tabular-nums; }

.bud-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.9rem; }
.bud-leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
.bud-diamond { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; background: #8c7bf0; display: inline-block; flex: none; }
.bud-bud-swatch { width: 14px; height: 0; border-top: 2px solid #e8965a; display: inline-block; flex: none; }

@media (max-width: 1100px) {
  .bud-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bud-sticky { position: static; }
}

/* ==========================================================================
   FP&A SUPPORT — scroll-scrubbed radar (spider) chart (native SVG).
   Plan vs Actual across six drivers. The grid rings, spokes, axis labels and
   legend are always present; the two polygons expand from the centre on scroll
   (plan first, then actual) with orange data-point dots, so progress 0 is a
   clean empty radar frame. Reuses the .cf-summary header row.
   ========================================================================== */
.fp-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.fp-sticky {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: flex;
  justify-content: center;
}
.fp-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  --fp-blue: #2f63d6;
  --fp-violet: #8c7bf0;
  --fp-accent: #e8965a;
}
.fp-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.fp-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }

.fp-chart { display: block; width: min(100%, 408px); height: auto; overflow: visible; }
.fp-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.fp-spoke { stroke: var(--line); stroke-width: 1; }
.fp-plan { fill: none; stroke: var(--fp-violet); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.fp-actual { fill: rgba(47, 99, 214, 0.15); stroke: var(--fp-blue); stroke-width: 2.2; stroke-linejoin: round; }
.fp-dot { fill: var(--fp-accent); }
.fp-axis { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; }

.fp-legend { display: flex; justify-content: center; gap: 1.4rem; margin-top: 0.9rem; }
.fp-leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
.fp-sw-actual { width: 14px; height: 9px; background: rgba(47, 99, 214, 0.2); border: 1.5px solid #2f63d6; border-radius: 2px; display: inline-block; flex: none; }
.fp-sw-plan { width: 15px; height: 0; border-top: 2px dashed #8c7bf0; display: inline-block; flex: none; }

@media (max-width: 1100px) {
  .fp-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fp-sticky { position: static; }
}

/* ==========================================================================
   ACCOUNTS PAYABLE — scroll-scrubbed aging distribution bar (native SVG).
   One wide horizontal bar split into aging buckets (cool blue = current,
   warm orange = 60+). Header, total, empty track and breakdown rows are always
   present; the coloured segments fill left-to-right on scroll.
   ========================================================================== */
.ap-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.ap-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.ap-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
}
.ap-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.ap-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }
.ap-figure { margin-top: auto; margin-bottom: auto; }
.ap-total { display: flex; align-items: baseline; gap: 0.5rem; }
.ap-total-value { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 600; color: var(--text-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ap-total-label { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); }
.ap-chart { display: block; width: 100%; height: auto; overflow: visible; margin: 1.1rem 0 0; }
.ap-track { fill: rgba(11, 26, 48, 0.06); }
.ap-seg-cur { fill: #2f63d6; }
.ap-seg-30 { fill: #6b8eea; }
.ap-seg-60 { fill: #8c7bf0; }
.ap-seg-90 { fill: #e8965a; }
.ap-seg-val { fill: #ffffff; font-family: var(--font-body); font-size: 12px; font-weight: 600; text-anchor: middle; }
.ap-stats { display: flex; margin-top: 1rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ap-stat { flex: 1; padding: 0.7rem 0.85rem; }
.ap-stat + .ap-stat { border-left: 1px solid var(--line); }
.ap-stat-label { display: block; font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ap-stat-value { display: block; margin-top: 0.28rem; font-size: 1.02rem; font-weight: 600; color: var(--text-strong); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ap-breakdown { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ap-row { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 0.82rem; }
.ap-row-name { flex: 1; color: var(--text); }
.ap-row-val { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-row-pct { width: 3.2rem; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ap-dot-cur { background: #2f63d6; }
.ap-dot-30 { background: #6b8eea; }
.ap-dot-60 { background: #8c7bf0; }
.ap-dot-90 { background: #e8965a; }
@media (max-width: 1100px) { .ap-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .ap-sticky { position: static; } }

/* ==========================================================================
   ACCOUNTS RECEIVABLE — scroll-scrubbed collections funnel (native SVG).
   Invoiced -> Sent -> Followed up -> Collected, narrowing downward. Faint band
   outlines, stage labels and values are always present; the coloured bands fill
   top-to-bottom on scroll with orange drop-off labels in the gaps.
   ========================================================================== */
.ar-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.ar-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.ar-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
}
.ar-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.ar-sub { margin-left: 0.55rem; font-weight: 500; color: var(--text-faint); }
.ar-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ar-band-outline { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-linejoin: round; }
.ar-divider { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
.ar-band0 { fill: #2f63d6; }
.ar-band1 { fill: #4861da; }
.ar-band2 { fill: #5a5fd8; }
.ar-band3 { fill: #6b5fd6; }
.ar-label { fill: var(--text-strong); font-family: var(--font-display); font-size: 12px; font-weight: 500; text-anchor: end; }
.ar-inside { fill: #ffffff; font-family: var(--font-display); font-size: 12px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.ar-inside-pct { fill: rgba(255, 255, 255, 0.86); font-family: var(--font-body); font-size: 10px; text-anchor: middle; }
.ar-drop { fill: #b5601f; font-family: var(--font-body); font-size: 10px; font-weight: 600; text-anchor: start; }
.ar-drop-cap { fill: var(--text-faint); font-family: var(--font-body); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; text-anchor: start; }
@media (max-width: 1100px) { .ar-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .ar-sticky { position: static; } }

/* ==========================================================================
   PAYROLL SUPPORT — scroll-scrubbed grouped column chart (native SVG).
   Gross (blue) vs Net (violet) paired columns across the last 6 runs, with an
   orange average-net reference line. Header, summary, KPI strip, gridlines,
   labels and legend are always present; the paired columns grow on scroll.
   Reuses the .cf-summary header row and the .rep-stats KPI strip.
   ========================================================================== */
.pr-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.pr-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.pr-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  justify-content: center;
}
.pr-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pay-sub { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }
.pay-badge { flex: none; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.62rem; border-radius: 999px; background: rgba(232, 150, 90, 0.16); color: #b5601f; white-space: nowrap; }
.pay-summary { display: flex; gap: 2.2rem; margin: 1.15rem 0 1rem; }
.pay-sum { display: flex; flex-direction: column; gap: 0.18rem; }
.pay-sum-label { font-family: var(--font-body); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.pay-sum-value { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.pay-progress { margin-bottom: 1.1rem; }
.pay-progress-bar { height: 8px; border-radius: 999px; background: rgba(11, 26, 48, 0.08); overflow: hidden; }
.pay-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2f63d6, #8c7bf0); }
.pay-progress-label { display: block; margin-top: 0.45rem; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
.pay-progress-label b { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0; }
.pay-row + .pay-row { border-top: 1px solid var(--line); }
.pay-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--c, #2f63d6); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; flex: none; }
.pay-person { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pay-name { font-family: var(--font-display); font-size: 0.86rem; font-weight: 500; color: var(--text-strong); }
.pay-role { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); }
.pay-amount { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pay-state { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 76px; justify-content: flex-end; font-family: var(--font-body); font-size: 0.72rem; color: var(--text-muted); }
.pay-row.is-paid .pay-state { color: var(--text-strong); }
.pay-state-label::after { content: "Pending"; }
.pay-row.is-paid .pay-state-label::after { content: "Paid"; }
.pay-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 0.66rem; transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease); }
.pay-check::after { content: "\2713"; opacity: 0; transform: scale(0.6); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.pay-row.is-paid .pay-check { background: #2f63d6; border-color: #2f63d6; }
.pay-row.is-paid .pay-check::after { opacity: 1; transform: scale(1); }
.pay-more { margin-top: 0.8rem; text-align: center; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
@media (max-width: 1100px) { .pr-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .pr-sticky { position: static; } }

/* ==========================================================================
   TAX PREPARATION SUPPORT — scroll-scrubbed tax-return summary (HTML/CSS).
   A 1040-style statement (income -> deductions -> taxable -> tax -> credits ->
   withheld -> refund). Always fully populated; as you scroll it is reviewed
   line by line (each value sharpens from muted to strong and a check appears),
   then the refund result and "Ready to file" badge confirm.
   ========================================================================== */
.tax-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.tax-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.tax-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  justify-content: center;
}
.tax-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tax-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.tax-sub { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }
.tax-badge { flex: none; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.62rem; border-radius: 999px; background: rgba(232, 150, 90, 0.16); color: #b5601f; white-space: nowrap; }
.tax-statement { margin-top: 1.3rem; }
.tax-row { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.55rem 0; }
.tax-label { flex: 1; font-family: var(--font-body); font-size: 0.86rem; color: var(--text); }
.tax-value { font-family: var(--font-display); font-size: 0.94rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color 0.25s var(--ease); }
.tax-row.is-checked .tax-value { color: var(--text-strong); }
.tax-check { flex: none; width: 16px; text-align: center; color: #2f63d6; opacity: 0; transition: opacity 0.25s var(--ease); }
.tax-row.is-checked .tax-check { opacity: 1; }
.tax-row.is-sub { border-top: 2px solid rgba(140, 123, 240, 0.5); margin-top: 0.25rem; padding-top: 0.7rem; }
.tax-row.is-sub .tax-label { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.tax-row.is-sub .tax-value { font-size: 1.02rem; }
.tax-result { margin-top: 1.1rem; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; border-radius: 14px; background: rgba(47, 99, 214, 0.07); border-left: 3px solid var(--line-strong); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.tax-result.is-final { border-left-color: #2f63d6; background: rgba(47, 99, 214, 0.12); }
.tax-result-label { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); }
.tax-result-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease); }
.tax-result.is-final .tax-result-value { color: #2f63d6; }
.tax-foot { margin-top: 0.9rem; text-align: center; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
@media (max-width: 1100px) { .tax-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .tax-sticky { position: static; } }

/* ==========================================================================
   CONTROLLER SERVICES — scroll-scrubbed semicircle gauge (native SVG).
   A month-end "controls passed" dial that sweeps to 96% as you scroll, with a
   violet target tick, an orange needle-tip and a counting centre value. Header,
   KPI strip and footer are always present. Reuses the .rep-stats KPI strip.
   ========================================================================== */
.ctl-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.ctl-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.ctl-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
}
.ctl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ctl-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.ctl-sub { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }
.ctl-badge { flex: none; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.62rem; border-radius: 999px; background: rgba(232, 150, 90, 0.16); color: #b5601f; white-space: nowrap; }
.ctl-gauge { display: block; width: min(100%, 360px); height: auto; overflow: visible; }
.ctl-track { fill: none; stroke: rgba(11, 26, 48, 0.08); stroke-width: 16; stroke-linecap: round; }
.ctl-arc { fill: none; stroke: #2f63d6; stroke-width: 16; stroke-linecap: butt; }
.ctl-target { stroke: #8c7bf0; stroke-width: 3; stroke-linecap: round; }
.ctl-tip { fill: #e8965a; }
.ctl-center-val { fill: var(--text-strong); font-family: var(--font-display); font-size: 36px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.ctl-center-label { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; text-anchor: middle; letter-spacing: 0.04em; }
.ctl-foot { margin-top: 0.9rem; text-align: center; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
@media (max-width: 1100px) { .ctl-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .ctl-sticky { position: static; } }

/* ==========================================================================
   KPI DASHBOARDS — scroll-scrubbed composite dashboard (native SVG/HTML).
   Three KPI tiles with drawing sparklines + three goal-progress bars. Tiles,
   labels and values are always present; the sparklines draw and the goal bars
   fill on scroll, so progress 0 is a clean dashboard frame.
   (Replaces the original off-palette KPI.json Lottie.)
   ========================================================================== */
.kpid-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  justify-content: center;
}
.kpid-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kpid-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.kpid-sub { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }
.kpid-badge { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.62rem; border-radius: 999px; background: rgba(47, 99, 214, 0.1); color: #2f63d6; }
.kpid-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2f63d6; }
.kpid-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 1.3rem 0 1.2rem; }
.kpid-tile { border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem 0.85rem; display: flex; flex-direction: column; }
.kpid-tile-label { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.kpid-tile-value { margin-top: 0.32rem; font-size: 1.16rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kpid-tile-delta { margin-top: 0.12rem; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; }
.kpid-spark { width: 100%; height: auto; margin-top: 0.55rem; overflow: visible; }
.kpid-spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpid-goals { display: flex; flex-direction: column; gap: 0.75rem; }
.kpid-goal-top { display: flex; justify-content: space-between; margin-bottom: 0.32rem; font-family: var(--font-body); font-size: 0.78rem; }
.kpid-goal-name { color: var(--text); }
.kpid-goal-pct { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpid-goal-bar { height: 8px; border-radius: 999px; background: rgba(11, 26, 48, 0.08); overflow: hidden; }
.kpid-goal-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2f63d6, #8c7bf0); }

/* ==========================================================================
   PROCESS IMPROVEMENT — scroll-scrubbed process pipeline (native SVG).
   A before/after cycle time + a step pipeline whose connector "flows" left to
   right, lighting up each node (fill + check) as it passes. Header, summary,
   KPI strip and node labels are always present. Reuses .cf-summary + .rep-stats.
   ========================================================================== */
.proc-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.proc-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.proc-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  justify-content: center;
}
.proc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.proc-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.proc-sub { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }
.proc-badge { flex: none; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.62rem; border-radius: 999px; background: rgba(232, 150, 90, 0.16); color: #b5601f; white-space: nowrap; }
.proc-pipe { display: block; width: 100%; height: auto; overflow: visible; margin-top: 1.4rem; }
.proc-conn-track { stroke: rgba(11, 26, 48, 0.1); stroke-width: 3; }
.proc-conn-fill { stroke: #2f63d6; stroke-width: 3; stroke-linecap: round; }
.proc-node-track { fill: #ffffff; stroke: var(--line-strong); stroke-width: 2; }
.proc-node-fill { fill: #2f63d6; opacity: 0; }
.proc-node-check { fill: #ffffff; font-family: var(--font-body); font-size: 13px; font-weight: 700; text-anchor: middle; opacity: 0; }
.proc-node-label { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; text-anchor: middle; }
.proc-dur { fill: var(--text-strong); font-family: var(--font-display); font-size: 11px; font-weight: 600; text-anchor: middle; opacity: 0; font-variant-numeric: tabular-nums; }
.proc-auto-ring { fill: none; stroke: #8c7bf0; stroke-width: 2; stroke-dasharray: 3 3; opacity: 0; }
.proc-foot { margin-top: 0.8rem; text-align: center; font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); }
.proc-foot i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px dashed #8c7bf0; vertical-align: -1px; margin-right: 0.35rem; }
@media (max-width: 1100px) { .proc-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .proc-sticky { position: static; } }

/* ==========================================================================
   FOUNDER & GROWTH SUPPORT — scroll-scrubbed growth trajectory (native SVG).
   A bold rising curve (blue->violet) with a gradient area that draws left to
   right; milestone markers pop along the curve as it passes them, ending at the
   peak. Header + the headline metric are always present.
   ========================================================================== */
.grw-body-grid {
  max-width: none;
  margin-left: max(calc((100vw - var(--container)) / 2 + var(--gutter)), var(--gutter));
  margin-right: var(--gutter);
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.grw-sticky { position: sticky; top: clamp(96px, 14vh, 140px); display: flex; justify-content: center; }
.grw-card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(11, 26, 48, 0.05), 0 34px 70px -34px rgba(11, 26, 48, 0.34);
  font-family: var(--font-display);
  justify-content: center;
}
.grw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.grw-title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.grw-sub { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }
.grw-badge { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.62rem; border-radius: 999px; background: rgba(47, 99, 214, 0.1); color: #2f63d6; }
.grw-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2f63d6; }
.grw-metric { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.15rem 0 0.3rem; }
.grw-metric-value { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.grw-metric-label { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-muted); }
.grw-chart { display: block; width: 100%; height: auto; overflow: visible; margin-top: 0.4rem; }
.grw-line { fill: none; stroke: url(#grwLine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grw-ring { fill: #ffffff; stroke: var(--line-strong); stroke-width: 2; }
.grw-dot { stroke: #ffffff; stroke-width: 2.5; }
.grw-mlabel { fill: var(--text-strong); font-family: var(--font-display); font-size: 11px; font-weight: 600; text-anchor: middle; }
.grw-mval { fill: var(--text-muted); font-family: var(--font-body); font-size: 9.5px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.grw-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.grw-axis-label { fill: var(--text-faint); font-family: var(--font-body); font-size: 10px; text-anchor: end; }
@media (max-width: 1100px) { .grw-body-grid { grid-template-columns: 1fr; gap: 2.5rem; } .grw-sticky { position: static; } }

/* ==========================================================================
   SHARED CARD FOOTPRINT — every service animation card is the same size so
   they match page to page: identical width + min-height, with the chart/visual
   centred in the leftover space (header pinned top, legend/footer pinned bottom).
   ========================================================================== */
.fin-card, .bar-card, .donut-card, .rep-card, .cf-card, .bud-card, .fp-card, .ap-card, .ar-card, .pr-card, .tax-card, .ctl-card, .kpid-card, .proc-card, .grw-card {
  width: min(100%, 560px);
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.fin-chart, .bar-chart, .rep-chart, .cf-chart, .bud-chart, .ar-chart { margin-top: auto; margin-bottom: auto; }
.donut-chart, .fp-chart, .ctl-gauge { margin: auto; }

/* ==========================================================================
   PHONE TUNING (≤760px). service.css had no breakpoint below 1100px.
   ========================================================================== */
@media (max-width: 760px) {
  /* The animated chart cards carry a fixed 600px min-height; on a phone the
     short charts (donut, AP bar) become tall empty boxes. Let them hug content. */
  .fin-card, .bar-card, .donut-card, .rep-card, .cf-card, .bud-card, .fp-card,
  .ap-card, .ar-card, .pr-card, .tax-card, .ctl-card, .kpid-card, .proc-card, .grw-card { min-height: 0; }

  /* KPI dashboard: 3 columns at ~85px each crowds "$1.24M" + sparkline — stack them. */
  .kpid-tiles { grid-template-columns: 1fr; gap: 0.6rem; }

  /* Wide flex metric rows: shrink the large clamp gaps so two big numbers fit. */
  .bar-metrics { gap: 1.4rem; }
  .pay-summary { gap: 1.4rem; }

  /* Comfortable tap target for the only in-page nav affordance on these pages. */
  .back-link { min-height: 44px; display: inline-flex; align-items: center; }
}