/* ==========================================================================
   CPA Pilot — global styles
   Premium fintech / executive-consulting aesthetic
   ========================================================================== */

:root {
  /* ---- palette: ink, paper, brass -------------------------------------
     Brass is the one bold spend — hairlines, eyebrows and marks only.
     Interactive elements stay deep ink blue; verdigris carries "good". */
  --navy-950: #070c15;
  --navy-900: #0c1420;   /* primary dark ground */
  --navy-800: #14202f;
  --navy-700: #1e2d40;
  --ink: #101722;        /* body text */
  --slate: #4a5567;
  --slate-light: #737f94;
  --line: #e4e7ec;
  --bg: #ffffff;
  --bg-soft: #f4f5f8;
  --bg-softer: #eceff4;
  --blue: #1d3b6e;       /* interactive: deep ink blue, not electric */
  --blue-deep: #162c52;
  --cyan: #c8a253;       /* brass — accents on dark grounds */
  --teal: #2e7d6b;       /* verdigris — positive/confirmed states */
  --gold: #c8a253;
  --brass: #c8a253;
  --brass-deep: #a8823a;
  --brass-ink: #856527;  /* darkened for small text on light grounds (AA contrast) */
  --grad: linear-gradient(90deg, #c8a253 0%, #a8823a 100%);
  --grad-soft: linear-gradient(120deg, rgba(200,162,83,.10), rgba(29,59,110,.06));

  /* ---- type: serif authority, precise sans, ledger figures ---------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- motion: decisive, never bouncy ---------------------------------
     One language: things arrive in order, land exactly, and do not wobble.
     No springs and no overshoot - an overshoot is the visual language of an
     imprecise number, which is the one thing this practice cannot sell. */
  --ease-out: cubic-bezier(.22, .61, .36, 1);    /* decisive arrival */
  --ease-settle: cubic-bezier(.16, .84, .44, 1); /* longer travel, softer stop */
  --dur-micro: 140ms;   /* hover, press, focus */
  --dur-fast: 240ms;
  --dur-reveal: 520ms;  /* scroll reveal */
  --dur-draw: 1100ms;   /* the hero line drawing itself */
  --stagger: 60ms;      /* between siblings, capped at 5 */

  --radius: 10px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(16,23,34,.04), 0 8px 24px -14px rgba(16,23,34,.14);
  --shadow-pop: 0 20px 50px -22px rgba(12,20,32,.32);
  --container: 1180px;

  /* Declared once: the bundle turns this into a base64 data URI, and a
     second literal url() would embed the same image a second time. */
  --tex: url("../img/hero-texture.jpg");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.005em;   /* serif needs far less negative tracking than a grotesque */
  color: var(--ink);
  text-wrap: balance;
}
h3, h4 { font-weight: 600; }

/* Figures read as a ledger: one width per digit, everywhere numbers appear. */
.kpi .k-value, .kpi .k-delta, .price, .stat .s-value, .dash, .dash-chart,
.chip, .co, .step-num, .eyebrow, .m-role, .dash-badge, .popular-flag {
  font-variant-numeric: tabular-nums;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }

p { color: var(--slate); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 96px 0; }
section.tight { padding: 64px 0; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* The rule under the nav appears only once you have left the top of the
     page: the border is state, not decoration. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav.scrolled {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: 0;
  white-space: nowrap;
}
.brand .brand-mark { width: 32px; height: 32px; flex: none; }
.brand span em { font-style: normal; color: var(--blue); }

.nav-links {
  display: flex;
  /* 19px, not 26: an eighth link (Resources) pushed the row over 1180px and
     "AI Automation" wrapped onto two lines. */
  gap: 19px;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  color: var(--slate);
  white-space: nowrap;   /* a label must never break mid-phrase */
  font-size: .93rem;
  font-weight: 500;
  transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active { position: relative; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; border-radius: 2px; background: var(--grad);
}

.nav-cta { flex: none; }
.nav-links a.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--ink); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
/* A real press. Scale down, never up - the control yields to the finger. */
.btn:active { transform: translateY(0) scale(.985); transition-duration: 60ms; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(29,59,110,.7);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-800); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: #cdd6e6;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-light {
  background: #fff; color: var(--navy-900);
}
.btn-light:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 18px; font-size: .86rem; border-radius: 7px; }
.btn .arrow { transition: transform var(--dur-micro) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------- headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--brass);   /* ledger rule */
  /* THE SIGNATURE. An accountant rules a line before writing the total, so
     every rule on this site draws itself. Quiet, repeated ~30 times; the hero
     chart is the same gesture spent loud, once. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out) 120ms;
}
.eyebrow.ruled::before { transform: scaleX(1); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p.lede { margin-top: 16px; font-size: 1.08rem; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(200,162,83,.13), transparent 62%),
    radial-gradient(760px 440px at -6% 18%, rgba(29,59,110,.07), transparent 62%),
    var(--bg);
  padding: 100px 0 110px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
}
/* Page entrance. Keyframes, not JS-toggled classes: if scripting fails the
   animation simply runs to its filled end state, so copy can never be stranded
   invisible. Nothing here gates interaction - the CTA is clickable at 0ms. */
@keyframes cp-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-grid > div:first-child > * { animation: cp-enter var(--dur-reveal) var(--ease-out) both; }
.hero-grid > div:first-child > *:nth-child(1) { animation-delay: 40ms; }
.hero-grid > div:first-child > *:nth-child(2) { animation-delay: 100ms; }
.hero-grid > div:first-child > *:nth-child(3) { animation-delay: 160ms; }
.hero-grid > div:first-child > *:nth-child(4) { animation-delay: 220ms; }
.hero-grid > div:first-child > *:nth-child(5) { animation-delay: 280ms; }
/* The dashboard travels further and arrives later than the words it supports:
   sequence is the only depth cue here - no parallax, no floating. */
.dash-wrap { animation: cp-enter 720ms var(--ease-settle) 240ms both; }

.hero h1 { margin: 18px 0 22px; }
/* The emphasis is typographic, not a gradient: serif italic in deep ink blue. */
.hero h1 .grad-text {
  font-style: italic;
  color: var(--blue);
}
.hero .lede { font-size: 1.13rem; max-width: 560px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  color: var(--slate);
}
.hero-trust svg { width: 18px; height: 18px; flex: none; }

.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600;
  color: var(--blue-deep);
  background: rgba(29,59,110,.08);
  border: 1px solid rgba(29,59,110,.18);
  padding: 7px 14px; border-radius: 999px;
}
.hero-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(46,125,107,.15);
}

/* dashboard visual */
.dash-wrap { position: relative; }
.dash {
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
  padding: 22px;
  color: #d7e0f2;
}
.dash-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.dash-title { font-family: var(--font-mono); font-size: .68rem; font-weight: 400; letter-spacing: .16em; color: #97a5bc; }
.dash-badge {
  font-family: var(--font-mono);
  font-size: .64rem; font-weight: 500; letter-spacing: .14em;
  color: #8fd8c4; background: rgba(46,125,107,.18);
  border: 1px solid rgba(46,125,107,.45);
  padding: 4px 10px; border-radius: 999px;
}
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px 14px;
}
.kpi .k-label { font-family: var(--font-mono); font-size: .62rem; color: #8d9bb3; letter-spacing: .14em; text-transform: uppercase; }
.kpi .k-value { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 500; color: #fff; margin-top: 3px; letter-spacing: -.02em; }
.kpi .k-delta { font-family: var(--font-mono); font-size: .68rem; font-weight: 400; }
.k-delta.up { color: #7fd3ba; }
.k-delta.warn { color: #dcb15f; }
.dash-chart {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
}
/* Actuals accumulate left to right, today is marked, forecast extends past it.
   The animation states the chart's meaning instead of decorating it. */
@keyframes cp-draw { to { stroke-dashoffset: 0; } }
@keyframes cp-fade { to { opacity: 1; } }
@keyframes cp-mark { to { opacity: 1; transform: scale(1); } }

.c-area     { opacity: 0; animation: cp-fade 700ms var(--ease-out) 760ms forwards; }
.c-actual   { stroke-dasharray: 1; stroke-dashoffset: 1;
              animation: cp-draw var(--dur-draw) var(--ease-settle) 700ms forwards; }
.c-today    { opacity: 0; transform: scale(.4);
              transform-box: view-box; transform-origin: 398px 32px;
              animation: cp-mark 260ms var(--ease-out) 1760ms forwards; }
.c-forecast { opacity: 0; animation: cp-fade 520ms var(--ease-out) 1900ms forwards; }

.dash-chart .c-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: #8d9bb3; margin-bottom: 10px; display: flex; justify-content: space-between; }
.dash-foot {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.chip {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 400; letter-spacing: .04em;
  color: #b3bfd2;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
}
.chip .c-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

/* The floating hero cards and the two scrolling company marquees were removed
   in an earlier pass; their rules and keyframes go with them. Perpetual ambient
   motion is exactly the register this brand should avoid. */
.ic-teal { background: rgba(46,125,107,.12); color: var(--teal); }
.ic-blue { background: rgba(29,59,110,.1); color: var(--blue); }
.ic svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ dark bands */
.section-dark {
  background:
    radial-gradient(900px 420px at 82% 0%, rgba(200,162,83,.10), transparent 58%),
    var(--navy-900);
  color: #c8d4ea;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: #9fb0cc; }
.section-dark .eyebrow { color: var(--cyan); }

.co {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .84rem;
  letter-spacing: .01em;
  color: #dbe2ee;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,162,83,.22);
  padding: 11px 20px;
  border-radius: 6px;
  white-space: nowrap;
}
.disclaimer {
  font-size: .8rem;
  color: #7688a8;
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
  line-height: 1.6;
}
.disclaimer-light { color: var(--slate-light); }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;   /* clips the hover rule to the card's rounded top */
}
/* Hover speaks the signature language: a brass rule draws across the top edge. */
.card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--brass);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.card:hover::after, .card:focus-within::after { transform: scaleX(1); }
.card:hover, .card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(29,59,110,.35);
  box-shadow: 0 24px 48px -18px rgba(16,23,34,.18);
}
.card h3 { margin: 18px 0 10px; }
.card p { font-size: .95rem; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--grad-soft);
  border: 1px solid rgba(29,59,110,.15);
  display: grid; place-items: center;
  color: var(--blue);
}
.card-icon svg { width: 24px; height: 24px; }
.card .card-link {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.card .card-link { transition: gap var(--dur-micro) var(--ease-out); }
.card .card-link:hover { gap: 10px; }

.card-featured {
  background: var(--navy-900);
  border-color: rgba(29,59,110,.4);
  color: #c8d4ea;
}
.card-featured h3 { color: #fff; }
.card-featured p { color: #9fb0cc; }
.card-featured .tag-list li { color: #b9c6de; }
.card-featured .tag-list li::before { color: var(--cyan); }

/* checklist / feature tags */
.tag-list { list-style: none; margin-top: 14px; columns: 2; column-gap: 20px; }
.tag-list.single { columns: 1; }
.tag-list li {
  font-size: .87rem;
  color: var(--slate);
  padding: 4px 0 4px 22px;
  position: relative;
  break-inside: avoid;
}
.tag-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 4px;
  color: var(--teal);
  font-weight: 700;
  font-size: .82rem;
}

.check-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.check-grid li {
  position: relative; padding-left: 30px;
  font-size: .96rem; color: var(--slate); font-weight: 500;
}
.check-grid li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 6px;
  background: var(--grad-soft);
  border: 1px solid rgba(29,59,110,.25);
}
.check-grid li::after {
  content: "✓"; position: absolute; left: 4px; top: 1px;
  color: var(--blue); font-size: .74rem; font-weight: 800;
}

/* ---------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
/* The numbering is real: these four steps happen in this order. */
.step .step-num {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .16em;
  color: var(--brass-ink);
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.step .step-num::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--brass);
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: .9rem; }

/* -------------------------------------------------------------- pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 38px 32px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  position: relative;
}
.price-card.popular {
  background: var(--navy-900);
  border-color: rgba(29,59,110,.5);
  transform: scale(1.03);
  z-index: 1;
}
.price-card.popular h3, .price-card.popular .price { color: #fff; }
.price-card.popular p, .price-card.popular .price small { color: #9fb0cc; }
.price-card.popular .tag-list li { color: #b9c6de; }
.price-card.popular .tag-list li::before { color: var(--cyan); }
.popular-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--navy-900);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(200,162,83,.4);
}
.price-card h3 { font-size: 1.2rem; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.5rem; font-weight: 500;
  letter-spacing: -.01em;
  margin: 12px 0 2px;
  color: var(--ink);
}
.price-card .price small { font-size: .9rem; font-weight: 500; color: var(--slate-light); }
.price-card .price-sub { font-size: .82rem; color: var(--slate-light); margin-bottom: 20px; }
.price-card .tag-list { columns: 1; margin: 0 0 26px; }
.price-card .btn { margin-top: auto; }

/* ---------------------------------------------------------- flow diagram */
.flow {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
}
.flow-node {
  font-family: var(--font-display);
  font-weight: 600; font-size: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e2e9f7;
  padding: 12px 20px; border-radius: 12px;
}
.flow-node.hot {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(29,59,110,.6);
}
.flow-arrow { color: #5f7096; flex: none; }
.flow-arrow svg { width: 20px; height: 20px; }

/* before / after */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ba {
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid var(--line);
}
.ba-before { background: var(--bg-soft); }
.ba-after {
  background: var(--navy-900);
  border-color: rgba(29,59,110,.35);
}
.ba-after h4, .ba-after .ba-label { color: #fff; }
.ba-after p { color: #9fb0cc; }
.ba-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.ba-before .ba-label { color: var(--slate-light); }
.ba-after .ba-label { color: var(--cyan); }
.ba p { font-size: .95rem; }

/* ------------------------------------------------------------- industries */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ind {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: .95rem;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ind:hover { transform: translateY(-3px); border-color: rgba(29,59,110,.35); }
.ind .ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.ind small { display: block; font-weight: 400; font-size: .78rem; color: var(--slate-light); }

/* -------------------------------------------------------------- tools */
.tool-cat { margin-bottom: 44px; }
.tool-cat h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tool-cat h3 .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.tool-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.tool {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600; font-size: .92rem;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tool:hover { transform: translateY(-2px); border-color: rgba(29,59,110,.4); }
.tool svg { width: 18px; height: 18px; color: var(--blue); }

/* ----------------------------------------------------------------- team */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.member {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.member:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -18px rgba(16,23,34,.18); }
.member .photo {
  aspect-ratio: 4 / 3.4;
  background:
    radial-gradient(300px 200px at 70% 10%, rgba(29,59,110,.18), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  display: grid; place-items: center;
  color: #4c5f85;
}
.member .photo svg { width: 76px; height: 76px; }

/* Monogram placeholder. Used where no photograph exists yet - it is a mark,
   not a stand-in for a face, so nothing is implied about the person. Swap the
   whole .photo block for an <img> when a real headshot arrives. */
.member .photo.monogram {
  background:
    linear-gradient(160deg, rgba(29,59,110,.30), transparent 64%),
    var(--tex) right center / cover no-repeat,
    var(--navy-950);
}
.member .photo.monogram span {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--brass);
}
/* The same ruled line the eyebrows draw, at the scale of a bookplate. */
.member .photo.monogram span::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--brass);
  opacity: .7;
  margin: 0 auto 16px;
}
.member .m-body { padding: 24px; }
.member .m-role {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-ink);
}
.member h3 { margin: 6px 0 8px; font-size: 1.12rem; }
.member p { font-size: .88rem; }
.member .m-actions { display: flex; gap: 10px; margin-top: 18px; }
.m-actions a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 14px;
  color: var(--ink);
  transition: border-color .15s, color .15s;
}
.m-actions a:hover { border-color: var(--blue); color: var(--blue); }
.m-actions svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------------- form */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow-pop);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 7px; color: var(--ink);
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .94rem;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(29,59,110,.12);
}
.field textarea { min-height: 110px; resize: vertical; }
/* Flagged only after the field has been left, and stated as a hairline - no
   shake. The interface points at what needs fixing; it does not flinch. */
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #b4472f;
  box-shadow: 0 0 0 4px rgba(180,71,47,.10);
}
.form-note { font-size: .8rem; color: var(--slate-light); margin-top: 14px; }
/* Success opens by height so the panel is seen to arrive, rather than snapping
   into place under the button. grid-template-rows animates where height cannot. */
.form-success {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  padding: 0 18px;
  background: rgba(46,125,107,.09);
  border: 1px solid transparent;
  color: #0d7a6d;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 500;
  overflow: hidden;
  transition: grid-template-rows var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              margin-top var(--dur-fast) var(--ease-out),
              padding var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.form-success > * { min-height: 0; }
.form-success.show {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 18px;
  padding: 16px 18px;
  border-color: rgba(46,125,107,.35);
}

.contact-aside .aside-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.contact-aside h3 { font-size: 1.02rem; margin-bottom: 8px; }
.contact-aside p, .contact-aside a { font-size: .92rem; }
.contact-line { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.contact-line svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 3px; }

.placeholder-box {
  border: 1.5px dashed #b9c6de;
  border-radius: var(--radius-sm);
  padding: 22px;
  text-align: center;
  color: var(--slate-light);
  font-size: .85rem;
  background: #fbfcfe;
}

/* ------------------------------------------------------------- CTA band */
.cta-band {
  background:
    radial-gradient(800px 360px at 15% 0%, rgba(29,59,110,.25), transparent 55%),
    radial-gradient(700px 300px at 90% 100%, rgba(200,162,83,.18), transparent 55%),
    var(--navy-950);
  border-radius: 26px;
  padding: 72px 56px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: #9fb0cc; max-width: 620px; margin: 0 auto 32px; font-size: 1.05rem; }
.cta-band .hero-ctas { justify-content: center; margin-top: 0; }

/* --------------------------------------------------------------- footer */
footer {
  background: var(--navy-950);
  color: #8fa0bd;
  padding: 72px 0 36px;
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
footer .brand { color: #fff; margin-bottom: 16px; }
footer h4 {
  color: #fff; font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 16px;
}
footer ul { list-style: none; }
footer ul li { margin-bottom: 10px; }
footer a { color: #8fa0bd; transition: color .15s; }
footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: #62748f;
}
.footer-disclaimer {
  font-size: .76rem;
  color: #62748f;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 880px;
}

/* ---------------------------------------------------------- page header */
.page-hero {
  background:
    radial-gradient(900px 440px at 82% -20%, rgba(200,162,83,.11), transparent 58%),
    var(--navy-900);
  color: #fff;
  padding: 88px 0 76px;
  position: relative;
  isolation: isolate;   /* keeps the texture behind content without z-index on every child */
}
/* Engraved guilloche wash - the line-work of a share certificate or ledger.
   All nine interior heroes were the same flat navy block; this gives them
   depth without introducing photography, which would fight the typographic
   direction the rest of the site is built on.

   It sits on a pseudo-element so one opacity value tunes the whole thing, and
   it is pinned to the right because the source fades to clean navy on the left
   two thirds - which is exactly where the headline and lede sit. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tex) right center / cover no-repeat;
  opacity: .85;
  pointer-events: none;
}
/* Narrow viewports crop toward the busy right edge, which would put the densest
   part of the pattern directly under the headline. Text wins. */
@media (max-width: 860px) {
  .page-hero::before { opacity: .4; background-position: 130% center; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The wash fades in rather than snapping, matching the hero entrance. */
  .page-hero::before { animation: cp-fade 900ms var(--ease-out) 120ms both; }
}
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); margin: 16px 0 18px; }
.page-hero p { color: #9fb0cc; max-width: 680px; font-size: 1.1rem; }
.page-hero .eyebrow { color: var(--cyan); }
.page-hero .hero-ctas { margin-top: 30px; }

/* --------------------------------------------------------------- reveal */
/* 14px, not 22: long travel reads cheap, and the eye should register arrival
   rather than journey. Delay comes from --i, which main.js sets on siblings and
   caps at 5 so a wide grid never feels like a queue. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-d1 { --i: 1; }
.reveal-d2 { --i: 2; }
.reveal-d3 { --i: 3; }

/* ---------------------------------------------------------------- misc */
.soft { background: var(--bg-soft); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; }
.stat .s-value {
  font-family: var(--font-mono);
  font-size: 2.2rem; font-weight: 500;
  letter-spacing: -.03em;
  color: var(--blue);
}
.stat .s-label { font-size: .86rem; color: var(--slate-light); margin-top: 4px; }

.quote-strip {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
/* Matches the hero: emphasis is typographic, never a gradient fill. */
.quote-strip em { font-style: italic; color: var(--blue); }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .grid-3, .steps { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-4, .stat-row { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .price-card.popular { transform: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1180px) {
  .nav-links {
    display: none;
    position: absolute; top: 74px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 26px;
    gap: 18px;
    box-shadow: 0 24px 40px -20px rgba(16,23,34,.18);
  }
  .nav-links.open { display: flex; }
  .nav-links a.active::after { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links a.nav-cta-mobile { display: inline-flex; }
  .contact-grid, .grid-2, .ba-grid { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
}

@media (max-width: 620px) {
  .grid-3, .steps, .ind-grid, .grid-4, .team-grid, .stat-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .tag-list { columns: 1; }
  .check-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 56px 28px; }
  .form-card { padding: 28px 22px; }
}

/* ---- quality floor ------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Reduced motion is a calm experience, not a degraded one: everything is
   present and finished, including the chart and every ledger rule. */
@media (prefers-reduced-motion: reduce) {
  /* A marquee is motion for its own sake; under reduced motion it holds still
     and wraps instead, so every name stays readable rather than disappearing. */
  .marquee-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-run:nth-child(2) { display: none; }
  /* flex:none is what lets the running track stay one long line; held still
     it must be allowed to shrink, or long names clip past the fade edge. */
  .marquee-run { flex: initial; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-grid > div:first-child > *, .dash-wrap { animation: none !important; }
  .eyebrow::before { transform: scaleX(1) !important; transition: none !important; }
  .c-area, .c-today, .c-forecast { opacity: 1 !important; transform: none !important; }
  .c-actual { stroke-dashoffset: 0 !important; }
  .c-area, .c-actual, .c-today, .c-forecast { animation: none !important; }
  .card::after { transition: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.price-card.popular.in-view { transform: scale(1.03); }
@media (max-width: 1024px) { .price-card.popular.in-view { transform: none; } }

/* ---- skip link -------------------------------------------------------
   Off-canvas until focused, then it lands in the top-left corner. Not
   display:none - a hidden element cannot receive focus at all. */
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--blue); color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 8px; }

/* ---- FAQ -------------------------------------------------------------
   Native <details>: opens with no JS and is announced correctly by screen
   readers. The brass border on open is the same accent the cards use. */
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 12px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.faq details[open] { border-color: var(--brass); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); line-height: 1.45; }
.faq summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.faq p { margin-top: 10px; color: var(--muted); }

/* ---- marquee ---------------------------------------------------------
   Added 2026-09-17 at the owner's request. An earlier pass removed two
   marquees because perpetual ambient motion fights the "ruled and settled"
   direction - so this one is deliberately slow, pauses on hover and focus,
   and stops dead under reduced motion.

   CSS only. No rAF: it is frozen in background and embedded contexts. The
   track holds two identical runs and travels -50%, which is what makes the
   loop seamless; the second run is aria-hidden so names are not read twice. */
.marquee {
  position: relative;
  overflow: hidden;
  /* Fade the ends rather than cutting them - a hard edge reads as clipping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: cp-marquee 70s linear infinite;
}
.marquee-reverse { animation-direction: reverse; }
.marquee-run {
  display: flex;
  gap: 14px;
  padding-right: 14px;   /* seam spacing equal to the gap */
  flex: none;
}
/* Reading a name should not mean chasing it. :focus-within extends the same
   courtesy to keyboard users tabbing through. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee .co { white-space: nowrap; }

@keyframes cp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Refined homepage: finance clarity, restrained texture, distinct service paths. */
.hero { background: var(--navy-900) var(--tex) center/cover; padding:80px 0 88px; }
.hero h1 { color:#fff; font-size:clamp(2.8rem,4.7vw,4.4rem); line-height:1.08; }
.hero .lede { color:#d0d9e5; max-width:510px; }
.hero-pill { background:transparent; border-color:#526075; color:#e1e7ef; border-radius:4px; font-size:.8rem; }
.hero .btn-primary { background:#c8a253; color:#0c1420; border-color:#c8a253; box-shadow:none; }
.hero .btn-primary:hover { background:#e0bd77; border-color:#e0bd77; }
.hero .btn-ghost { color:#fff; border-color:#728095; background:transparent; }
.hero .btn-ghost:hover { background:#1e2d40; }
.hero-trust { color:#c4cedb; }
.hero-trust svg { stroke:#bfcdb9; }
.review-note { color:#c4cedb; font-size:.86rem; margin-top:16px; }
.dash { border:1px solid #43516a; box-shadow:0 24px 55px #0004; }
.dash-badge { color:#e2c78f; border-color:#7b6843; background:#c8a25315; }
.fit-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.fit-strip h2 { font-size:clamp(1.7rem,3vw,2.3rem); }
.fit-strip p { max-width:520px; margin:0; }
.support-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.support-option { padding:28px 0 8px; border-top:3px solid var(--brass); display:flex; flex-direction:column; }
.support-option h3 { font-size:1.9rem; margin-bottom:18px; }
.support-option p { margin-bottom:18px; }
.support-option .support-deliverable { font-size:.82rem; color:#586476; }
.support-option a { font-weight:600; margin-top:auto; padding:12px 0; text-decoration:underline; text-underline-offset:5px; }
.experience-summary h2 { color:#fff; }
.experience-summary p { color:#c4cedb; }
.experience-summary .btn { margin-top:18px; }
.experience-firms { font-family:var(--font-display); font-size:1.55rem; line-height:1.6; }
.experience-disclosure { font-size:.8rem; max-width:420px; margin:16px 0; }
.review-steps { padding-left:20px; color:var(--slate); }
.review-steps li { padding:0 0 14px 6px; }
.form-success a { text-decoration:underline; }
.download-gate { border:1px solid var(--line); border-radius:12px; padding:32px; width:min(480px,calc(100% - 32px)); margin:auto; color:var(--ink); box-shadow:var(--shadow-pop); }
.download-gate::backdrop { background:rgba(12,20,32,.65); }
.download-gate h2 { margin-bottom:16px; }
.download-gate label { display:block; margin:20px 0 8px; font-weight:600; }
.download-gate input { width:100%; padding:12px; border:1px solid #737f94; border-radius:6px; font:inherit; }
.footer-grid > div { min-width:0; overflow-wrap:anywhere; }
@media(max-width:480px) { .footer-grid { grid-template-columns:1fr; gap:28px; } }
:focus-visible { outline:3px solid #a8823a; outline-offset:4px; }
@media(max-width:768px) {
 .fit-grid,.support-grid { grid-template-columns:1fr; gap:24px; }
 .hero { padding:48px 0 56px; }
 .hero-grid { gap:36px; }
 .support-option { padding-top:22px; }
 .hero-ctas { gap:12px; }
 .hero-pill { font-size:.72rem; }
}

/* Decision brief: concrete reporting examples for business buyers. */
.decision-section { background:#f0f3f7; }
.decision-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; }
.decision-intro h3 { font-size:2rem; margin-bottom:18px; }
.decision-intro .tag-list { margin:20px 0; }
.decision-intro .btn { margin-top:18px; }
.decision-questions details { border-bottom:1px solid #b9c2d0; padding:20px 0; }
.decision-questions details:first-child { border-top:1px solid #b9c2d0; }
.decision-questions summary { font-size:1.2rem; font-weight:600; cursor:pointer; color:#162c52; }
.decision-questions p { margin-top:16px; max-width:62ch; }
@media(max-width:768px) { .decision-grid { grid-template-columns:1fr; gap:32px; } }