// Axiom Analytics — production app
// Shared data for all three directions
const AXIOM_DATA = {
  schools: [
    "ABQ Collegiate",
    "Solare Collegiate",
    "Middle College High School",
    "Voz Collegiate",
    "Hozho Academy",
    "Red River Charter School",
    "Explore Academy — Las Cruces",
    "Monte Del Sol",
    "Explore Las Vegas",
    "North Valley Academy",
    "La Academia de Esperanza",
    "Sun Mountain Community School",
    "Turquoise Trail Charter School",
  ],
  stats: [
    { value: "15+", label: "Years as school business officials" },
    { value: "13", label: "Charter schools served" },
    { value: "100%", label: "Audit-ready, every cycle" },
  ],
  services: [
    {
      key: "accounting",
      title: "Accounting",
      blurb:
        "The general ledger, payroll, and procurement, run cleanly so audit season is uneventful.",
      items: [
        "GASB / GAAP alignment and allowable-cost discipline",
        "General ledger and accounting matrix management",
        "Purchasing & procurement-threshold controls",
        "AP — Check, ACH, P-Card",
        "Payroll processing (W/C, ERB, RHC, NMPSIA) and liability reconciliation",
        "Year-end closeout and audit-planning facilitation",
        "Compliant, school-specific fiscal policies",
      ],
    },
    {
      key: "modeling",
      title: "Financial Modeling & Budgeting",
      blurb:
        "Our proprietary models translate enrollment, staffing, and facility decisions into the runway your board needs to see.",
      items: [
        "Forecasting, cash-flow, YTD-vs-budget, and 3–5 year models",
        "Annual State (SEG) and Federal (Title I, II, etc.) budgets",
        "Facility strategy — securing, expanding, and modeling capital outlay",
        "Compensation modeling — salary scales, benefits, and retention planning across multi-year budgets",
        "Sustainability planning with school leader & GC",
        "YTD financial statements, board-ready",
        "Thought partner on state funding and cash-flow issues",
      ],
    },
    {
      key: "reporting",
      title: "Reporting",
      blurb:
        "Every required filing — federal, state, local — submitted on cycle, with the supporting work to defend it.",
      items: [
        "Reimbursement requests across all funds",
        "Quarterly and annual tax reports",
        "Payroll reports — complete and submitted",
        "All financial PED reports",
        "Grant reporting and ad-hoc financial reports",
        "Maximizing local, state, and federal funding access — capital outlay, lease assistance, appropriations",
      ],
    },
    {
      key: "governance",
      title: "Governing Council Engagement",
      blurb:
        "We sit at the table with you. Board-ready packets, finance-committee facilitation, and the trainings your council needs to govern well.",
      items: [
        "Attend GC meetings and present all financial information",
        "Monthly virtual finance-committee attendance",
        "Monthly financial reconciliations",
        "Best practices aligned with GFOA, ASBO standards",
        "Annual budget planning under PED & GC guidance",
        "3 hours of approved finance training for all GC members",
        "Advocate on financial matters on the school's behalf",
      ],
    },
  ],
  pillars: [
    {
      key: "expertise",
      label: "Expertise",
      title: "School business officials, not consultants.",
      blurb:
        "Our team has spent 15+ years inside New Mexico charter schools as SBOs, business managers, and CFOs. We know PED, OBMS, SEG, and the 50 small things that don't make it into a manual.",
    },
    {
      key: "partnership",
      label: "Partnership",
      title: "A long relationship, not a transaction.",
      blurb:
        "We partner with school leadership, governing councils, and state officials over years. Schools we serve don't get passed from manager to manager — they get individualized support and open lines of communication.",
    },
    {
      key: "advocacy",
      label: "Advocacy",
      title: "A voice for charter schools, where it counts.",
      blurb:
        "We advocate for the funding and resources charter schools deserve — with PED, the legislature, and the agencies in between. Our clients show up better-represented because we're already in the room.",
    },
  ],
  team: [
    {
      name: "Katie Rarick",
      role: "CEO, Founder",
      photo: "assets/team-3.avif",
      linkedin: "https://www.linkedin.com/in/rarick",
    },
    {
      name: "Josh Padilla",
      role: "Chief Financial Officer for Charter Schools",
      photo: "assets/team-4.avif",
      linkedin: "#",
    },
    {
      name: "Gowan Hays",
      role: "Chief Financial Officer for Charter Schools",
      photo: "assets/team-1.avif",
      linkedin: "https://www.linkedin.com/in/gowan-hays-80995b8b/",
    },
    {
      name: "Kari Moore",
      role: "Chief Operations Officer",
      photo: "assets/team-2.avif",
      linkedin: "https://www.linkedin.com/in/kari-moore-74a7b8338/",
    },
    {
      name: "Deb Anyaibe",
      role: "Executive Financial Strategist, Grants",
      photo: "assets/team-5.avif",
      linkedin: "https://www.linkedin.com/in/deborah-anyaibe-b3a9122bb/",
    },
  ],
  testimonial: {
    quote:
      "Red River Valley Charter School went from being passed around from business manager to business manager at another vendor group to receiving individualized support specific to the school's needs. Katie Rarick and Axiom are conscientious, well-informed, eager to assist, and they maintain open lines of communication with their schools.",
    attribution: "Red River Valley Charter School",
  },
  process: [
    {
      step: "01",
      title: "Diagnostic",
      blurb:
        "We review current books, contracts, and reporting cadence with you. You get a written assessment in week one.",
    },
    {
      step: "02",
      title: "Stand-up",
      blurb:
        "Chart of accounts cleaned, cash controls established, payroll and AP cycles formalized.",
    },
    {
      step: "03",
      title: "Forecast",
      blurb:
        "A financial model tied to your enrollment plan, staffing matrix, and facility costs.",
    },
    {
      step: "04",
      title: "Board cadence",
      blurb:
        "Monthly close, finance committee prep, and governing council reporting — on a calendar everyone can see.",
    },
    {
      step: "05",
      title: "Steady state",
      blurb:
        "Year after year, the financial story is already written, sourced, and defensible — ready whenever the board, PED, or anyone else asks.",
    },
  ],
};

// Logo lockup — uses the actual brand logo
function AxiomLogo({ height = 28, color, mono = false }) {
  if (mono) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 8, color: color || "currentColor" }}>
        <svg width={height} height={height} viewBox="0 0 32 32" fill="none">
          <path d="M16 4 C20 12, 26 14, 28 16 C26 18, 20 20, 16 28 C12 20, 6 18, 4 16 C6 14, 12 12, 16 4Z" fill="currentColor" opacity="0.85"/>
        </svg>
        <span style={{ fontWeight: 700, fontSize: height * 0.78, letterSpacing: "-0.02em", lineHeight: 1 }}>
          axiom<span style={{ fontWeight: 400, opacity: 0.7 }}> analytics</span>
        </span>
      </div>
    );
  }
  return (
    <img src="assets/axiom-logo.png" alt="Axiom Analytics" style={{ height, width: "auto", display: "block" }} />
  );
}



// Direction A.v2 — Institutional & data-forward, with board-confident voice + human/relationship layer
function DirectionAv2({ palette }) {
  const [navOpen, setNavOpen] = React.useState(false);
  const p = palette || {
    bg: "#fbfaf6",
    ink: "#0d2440",
    inkSoft: "#3d5170",
    sage: "#9bbf9a",
    sageDeep: "#5d8c5e",
    line: "rgba(13,36,64,0.10)",
    surface: "#ffffff",
    accent: "#0d2440",
  };

  const css = `
    .dirAv2 { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; color: ${p.ink}; background: ${p.bg}; width: 100%; max-width: 1440px; margin: 0 auto; }
    .dirAv2 html { scroll-behavior: smooth; }
    .dirAv2 .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .dirAv2 * { box-sizing: border-box; }
    .dirAv2 a { color: inherit; }

    /* NAV */
    .dirAv2 .nav { display:flex; align-items:center; justify-content:space-between; padding: 22px 56px; border-bottom: 1px solid ${p.line}; }
    .dirAv2 .nav-links { display:flex; gap: 32px; align-items:center; }
    .dirAv2 .nav-links a { color: ${p.ink}; text-decoration:none; font-size:14px; font-weight:500; opacity: 0.75; }
    .dirAv2 .nav-links a:hover { opacity: 1; }
    .dirAv2 .btn { display:inline-flex; align-items:center; gap:8px; padding: 11px 20px; border-radius: 999px; font-size:14px; font-weight:600; text-decoration:none; transition: all .2s; cursor:pointer; border:none; }
    .dirAv2 .btn-primary { background: ${p.ink}; color: ${p.bg}; }
    .dirAv2 .btn-primary:hover { background: #1a3458; }
    .dirAv2 .btn-ghost { background: transparent; color: ${p.ink}; border: 1px solid ${p.line}; }
    .dirAv2 .btn-ghost:hover { background: ${p.surface}; }

    /* HERO */
    .dirAv2 .hero { padding: 80px 56px 64px; display:grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; border-bottom: 1px solid ${p.line}; }    .dirAv2 .eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing: 0.12em; text-transform: uppercase; color: ${p.inkSoft}; margin-bottom: 24px; }
    .dirAv2 .eyebrow::before { content:""; width:24px; height:1px; background: ${p.sageDeep}; display:inline-block; }
    .dirAv2 .pulse { width:6px; height:6px; background: ${p.sageDeep}; border-radius:50%; box-shadow: 0 0 0 3px rgba(93,140,94,0.18); }
    .dirAv2 h1 { font-size: 76px; line-height: 1.0; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 28px; }
    .dirAv2 h1 em { font-style: normal; color: ${p.sageDeep}; font-weight: 500; }
    .dirAv2 .lede { font-size: 19px; line-height: 1.55; color: ${p.inkSoft}; max-width: 540px; margin-bottom: 36px; }
    .dirAv2 .hero-cta { display:flex; gap: 12px; align-items:center; margin-bottom: 32px; }
    .dirAv2 .hero-meta { display:flex; gap: 32px; font-size: 11px; color: ${p.inkSoft}; letter-spacing: 0.08em; text-transform: uppercase; }
    .dirAv2 .hero-meta strong { color: ${p.ink}; font-weight: 600; display:block; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 4px; text-transform: none; }

    /* TEAM COLLAGE — replaces dashboard in hero */
    .dirAv2 .collage { position: relative; height: 580px; }
    .dirAv2 .collage .ph { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 48px -20px rgba(13,36,64,0.28), 0 1px 0 rgba(13,36,64,0.05); background: ${p.surface}; border: 1px solid ${p.line}; }
    .dirAv2 .collage .ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92); }
    .dirAv2 .collage .ph.p1 { width: 232px; height: 290px; left: 0; top: 30px; transform: rotate(-3deg); z-index: 2; }
    .dirAv2 .collage .ph.p2 { width: 218px; height: 274px; left: 220px; top: 0; transform: rotate(2deg); z-index: 3; }
    .dirAv2 .collage .ph.p3 { width: 232px; height: 290px; left: 410px; top: 24px; transform: rotate(-2deg); z-index: 4; }
    .dirAv2 .collage .ph.p4 { width: 218px; height: 274px; left: 80px; top: 308px; transform: rotate(2.5deg); z-index: 5; }
    .dirAv2 .collage .ph.p5 { width: 232px; height: 290px; left: 308px; top: 296px; transform: rotate(-1.5deg); z-index: 6; }
    .dirAv2 .collage .badge { position: absolute; right: -24px; bottom: -64px; background: ${p.ink}; color: ${p.bg}; padding: 14px 18px; border-radius: 12px; font-size: 12px; line-height: 1.45; max-width: 220px; z-index: 10; transform: rotate(2deg); box-shadow: 0 16px 32px -16px rgba(13,36,64,0.4); }
    .dirAv2 .collage .badge strong { display:block; font-size: 13px; margin-bottom: 4px; }
    .dirAv2 .collage .badge .pulse { display:inline-block; width:6px; height:6px; background: ${p.sage}; border-radius: 50%; margin-right: 6px; vertical-align: middle; }


    /* MARQUEE */
    .dirAv2 .marquee { padding: 28px 56px; border-bottom: 1px solid ${p.line}; overflow: hidden; }
    .dirAv2 .marquee-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: ${p.inkSoft}; margin-bottom: 14px; }
    .dirAv2 .marquee-row { display:flex; gap: 36px; flex-wrap: wrap; }
    .dirAv2 .marquee-row span { font-size: 16px; font-weight: 500; color: ${p.ink}; opacity: 0.72; }

    /* PILLARS — three values: expertise / platform / partnership */
    .dirAv2 .pillars { padding: 96px 56px; border-bottom: 1px solid ${p.line}; }
    .dirAv2 .pillars-h { display:grid; grid-template-columns: 1fr 1.4fr; gap: 56px; margin-bottom: 56px; align-items: end; }
    .dirAv2 .pillars-h .lbl { font-size: 11px; letter-spacing: 0.12em; color: ${p.inkSoft}; text-transform: uppercase; margin-bottom: 18px; }
    .dirAv2 .pillars-h h2 { font-size: 48px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.05; margin: 0; }
    .dirAv2 .pillars-h p { font-size: 17px; color: ${p.inkSoft}; line-height: 1.6; margin: 0; max-width: 540px; }
    .dirAv2 .pillars-h em { font-style: normal; color: ${p.sageDeep}; }
    .dirAv2 .pgrid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid ${p.line}; }
    .dirAv2 .pillar { padding: 36px 32px 36px 0; border-right: 1px solid ${p.line}; position: relative; }
    .dirAv2 .pillar:last-child { border-right: none; padding-right: 0; }
    .dirAv2 .pillar:not(:first-child) { padding-left: 32px; }
    .dirAv2 .pillar::before { content:""; position: absolute; top: -1px; left: 0; width: 32px; height: 2px; background: ${p.sageDeep}; }
    .dirAv2 .pillar:not(:first-child)::before { left: 32px; }
    .dirAv2 .pillar .num { font-size: 11px; color: ${p.inkSoft}; letter-spacing: 0.1em; margin-bottom: 18px; }
    .dirAv2 .pillar .label { font-size: 13px; font-weight: 600; color: ${p.sageDeep}; margin-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
    .dirAv2 .pillar h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 14px; }
    .dirAv2 .pillar p { font-size: 15px; line-height: 1.6; color: ${p.inkSoft}; margin: 0; }

    /* STATS */
    .dirAv2 .stats { padding: 96px 56px; display:grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid ${p.line}; }
    .dirAv2 .stat { padding: 0 32px; border-left: 1px solid ${p.line}; }
    .dirAv2 .stat:first-child { border-left:none; padding-left: 0; }
    .dirAv2 .stat-v { font-size: 88px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; }
    .dirAv2 .stat-v sup { font-size: 32px; vertical-align: top; color: ${p.sageDeep}; margin-left: 4px; font-weight: 500; }
    .dirAv2 .stat-l { font-size: 14px; color: ${p.inkSoft}; line-height: 1.5; max-width: 280px; }

    /* SERVICES — accordion-style, one open by default */
    .dirAv2 .services { padding: 96px 56px; border-bottom: 1px solid ${p.line}; }
    .dirAv2 .section-head { display:grid; grid-template-columns: 1fr 1.4fr; gap: 56px; margin-bottom: 48px; align-items: end; }
    .dirAv2 .section-head .lbl { font-size: 11px; letter-spacing: 0.12em; color: ${p.inkSoft}; text-transform: uppercase; margin-bottom: 18px; }
    .dirAv2 .section-head h2 { font-size: 48px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.05; margin: 0; }
    .dirAv2 .section-head p { font-size: 16px; color: ${p.inkSoft}; line-height: 1.6; margin: 0; max-width: 520px; }
    .dirAv2 .svc-list { border-top: 1px solid ${p.line}; }
    .dirAv2 .svc { border-bottom: 1px solid ${p.line}; transition: background .2s; }
    .dirAv2 .svc:hover { background: ${p.surface}; }
    .dirAv2 .svc-head { display:grid; grid-template-columns: 80px 1fr 2fr 40px; gap: 32px; padding: 32px 24px 32px 0; align-items: start; cursor: pointer; }
    .dirAv2 .svc-num { font-size: 11px; color: ${p.inkSoft}; letter-spacing: 0.1em; padding-top: 6px; }
    .dirAv2 .svc-t { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
    .dirAv2 .svc-b { font-size: 15px; color: ${p.inkSoft}; line-height: 1.55; padding-top: 4px; }
    .dirAv2 .svc-tog { font-size: 22px; color: ${p.sageDeep}; text-align: right; padding-top: 2px; transition: transform .2s; }
    .dirAv2 .svc.open .svc-tog { transform: rotate(45deg); }
    .dirAv2 .svc-body { display:none; padding: 0 24px 36px 112px; }
    .dirAv2 .svc.open .svc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
    .dirAv2 .svc-item { font-size: 14px; color: ${p.inkSoft}; padding: 8px 0; padding-left: 20px; position: relative; line-height: 1.5; border-top: 1px solid ${p.line}; }
    .dirAv2 .svc-item::before { content:"→"; position: absolute; left: 0; color: ${p.sageDeep}; }

    /* PROCESS — dark band */
    .dirAv2 .process { padding: 96px 56px; background: ${p.ink}; color: ${p.bg}; }
    .dirAv2 .process .ph { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 56px; }
    .dirAv2 .process .lbl { font-size: 11px; letter-spacing: 0.12em; opacity: 0.55; text-transform: uppercase; margin-bottom: 18px; }
    .dirAv2 .process h2 { font-size: 48px; letter-spacing: -0.025em; font-weight: 500; margin: 0; line-height: 1.05; }
    .dirAv2 .process .sub { font-size: 16px; opacity: 0.7; margin: 0; max-width: 480px; line-height: 1.6; }
    .dirAv2 .steps { display:grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
    .dirAv2 .step { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); position: relative; }
    .dirAv2 .step::before { content:""; position:absolute; top: -1px; left:0; width: 32px; height: 2px; background: ${p.sage}; }
    .dirAv2 .step-n { font-size: 12px; opacity: 0.5; margin-bottom: 14px; }
    .dirAv2 .step-t { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
    .dirAv2 .step-b { font-size: 13px; line-height: 1.55; opacity: 0.78; }

    /* PEOPLE — relationship section */
    .dirAv2 .people { padding: 96px 56px; border-bottom: 1px solid ${p.line}; }
    .dirAv2 .pp-head { display:grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: end; margin-bottom: 56px; }
    .dirAv2 .pp-head .lbl { font-size: 11px; letter-spacing: 0.12em; color: ${p.inkSoft}; text-transform: uppercase; margin-bottom: 18px; }
    .dirAv2 .pp-head h2 { font-size: 48px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.05; margin: 0; }
    .dirAv2 .pp-head h2 em { font-style: normal; color: ${p.sageDeep}; }
    .dirAv2 .pp-head p { font-size: 16px; color: ${p.inkSoft}; line-height: 1.6; margin: 0; max-width: 520px; }
    .dirAv2 .team { display:grid; grid-template-columns: repeat(5, 1fr); gap: 24px; border-top: 1px solid ${p.line}; padding-top: 32px; }
    .dirAv2 .person { display: flex; flex-direction: column; }
    .dirAv2 .person-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: ${p.surface}; margin-bottom: 18px; border: 1px solid ${p.line}; }
    .dirAv2 .person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95); }
    .dirAv2 .person-n { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
    .dirAv2 .person-r { font-size: 11px; letter-spacing: 0.06em; color: ${p.sageDeep}; text-transform: uppercase; margin-bottom: 14px; line-height: 1.4; }
    .dirAv2 .person-li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: ${p.inkSoft}; text-decoration: none; font-weight: 500; }
    .dirAv2 .person-li:hover { color: ${p.ink}; }
    .dirAv2 .person-li svg { flex-shrink: 0; }

    /* MISSION band */
    .dirAv2 .mission { padding: 96px 56px; border-bottom: 1px solid ${p.line}; background: ${p.surface}; display:grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
    .dirAv2 .mission .lbl { font-size: 11px; letter-spacing: 0.12em; color: ${p.inkSoft}; text-transform: uppercase; margin-bottom: 18px; }
    .dirAv2 .mission h2 { font-size: 40px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.1; margin: 0; }
    .dirAv2 .mission h2 em { font-style: normal; color: ${p.sageDeep}; }
    .dirAv2 .mission p { font-size: 18px; line-height: 1.55; color: ${p.ink}; margin: 0 0 18px; max-width: 640px; }
    .dirAv2 .mission p:last-child { margin-bottom: 0; color: ${p.inkSoft}; font-size: 15px; }

    /* TESTIMONIAL */
    .dirAv2 .quote { padding: 96px 56px; display:grid; grid-template-columns: 1fr 2fr; gap: 56px; border-bottom: 1px solid ${p.line}; align-items: start; }
    .dirAv2 .quote .lbl { font-size: 11px; letter-spacing: 0.12em; color: ${p.inkSoft}; text-transform: uppercase; }
    .dirAv2 .quote .qmark { font-family: 'Fraunces', serif; font-size: 120px; line-height: 0.6; color: ${p.sageDeep}; margin-top: 20px; }
    .dirAv2 .quote blockquote { font-size: 28px; line-height: 1.35; letter-spacing: -0.015em; color: ${p.ink}; margin: 0 0 28px; font-weight: 500; max-width: 820px; }
    .dirAv2 .quote-attr { display:flex; align-items: center; gap: 14px; font-size: 13px; color: ${p.inkSoft}; }
    .dirAv2 .quote-attr::before { content:""; width: 32px; height: 1px; background: ${p.sageDeep}; }
    .dirAv2 .quote-attr strong { color: ${p.ink}; font-weight: 600; }

    /* CTA */
    .dirAv2 .cta { padding: 96px 56px; display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .dirAv2 .cta h2 { font-size: 56px; letter-spacing: -0.025em; font-weight: 500; line-height: 1.05; margin: 0 0 20px; }
    .dirAv2 .cta h2 em { font-style: normal; color: ${p.sageDeep}; }
    .dirAv2 .cta p { font-size: 17px; color: ${p.inkSoft}; line-height: 1.55; max-width: 480px; margin: 0; }
    .dirAv2 .cta-side { padding: 32px; background: ${p.surface}; border-radius: 14px; border: 1px solid ${p.line}; }
    .dirAv2 .cta-side .row { display:flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid ${p.line}; font-size: 14px; }
    .dirAv2 .cta-side .row:last-of-type { border-bottom: none; }
    .dirAv2 .cta-side .row span:first-child { color: ${p.inkSoft}; }
    .dirAv2 .cta-side .row span:last-child { font-weight: 500; }

    .dirAv2 .footer { padding: 40px 56px; border-top: 1px solid ${p.line}; display:flex; justify-content:space-between; align-items: center; font-size: 11px; color: ${p.inkSoft}; letter-spacing: 0.08em; text-transform: uppercase; }
  

    /* ============================================================
       RESPONSIVE — TABLET (≤ 1024px) and MOBILE (≤ 720px)
       ============================================================ */

    /* Tablet — collapse 2-up grids, shrink type */
    @media (max-width: 1024px) {
      .dirAv2 .nav { padding: 18px 32px; }
      .dirAv2 .nav-links { gap: 20px; }
      .dirAv2 .nav-links a { font-size: 13px; }

      .dirAv2 .hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 32px 48px; }
      .dirAv2 h1 { font-size: 56px; }
      .dirAv2 .lede { font-size: 17px; max-width: 100%; }
      .dirAv2 .collage { height: 460px; width: 100%; max-width: 560px; margin: 0 auto; }
      .dirAv2 .collage .ph.p1 { width: 180px; height: 226px; left: 0; top: 24px; }
      .dirAv2 .collage .ph.p2 { width: 170px; height: 214px; left: 170px; top: 0; }
      .dirAv2 .collage .ph.p3 { width: 180px; height: 226px; left: 320px; top: 18px; }
      .dirAv2 .collage .ph.p4 { width: 170px; height: 214px; left: 60px; top: 240px; }
      .dirAv2 .collage .ph.p5 { width: 180px; height: 226px; left: 240px; top: 230px; }
      .dirAv2 .collage .badge { right: 0; bottom: -50px; max-width: 200px; }

      .dirAv2 .pillars, .dirAv2 .services, .dirAv2 .process, .dirAv2 .people, .dirAv2 .mission, .dirAv2 .quote, .dirAv2 .cta { padding: 64px 32px; }
      .dirAv2 .pillars-h, .dirAv2 .section-head, .dirAv2 .pp-head, .dirAv2 .process .ph, .dirAv2 .mission, .dirAv2 .cta { grid-template-columns: 1fr; gap: 24px; }
      .dirAv2 .pillars-h h2, .dirAv2 .section-head h2, .dirAv2 .pp-head h2, .dirAv2 .process h2, .dirAv2 .mission h2 { font-size: 36px; }
      .dirAv2 .cta h2 { font-size: 42px; }
      .dirAv2 .quote { grid-template-columns: 1fr; gap: 24px; }
      .dirAv2 .quote blockquote { font-size: 22px; }

      .dirAv2 .pgrid { grid-template-columns: 1fr; }
      .dirAv2 .pillar { border-right: none; border-bottom: 1px solid ${p.line}; padding: 28px 0; }
      .dirAv2 .pillar:not(:first-child) { padding-left: 0; }
      .dirAv2 .pillar:not(:first-child)::before { left: 0; }
      .dirAv2 .pillar:last-child { border-bottom: none; }

      .dirAv2 .stats { grid-template-columns: 1fr; padding: 56px 32px; }
      .dirAv2 .stat { border-left: none; border-top: 1px solid ${p.line}; padding: 24px 0; }
      .dirAv2 .stat:first-child { border-top: none; padding-top: 0; }
      .dirAv2 .stat-v { font-size: 64px; }

      .dirAv2 .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
      .dirAv2 .team { grid-template-columns: repeat(3, 1fr); }

      .dirAv2 .svc-head { grid-template-columns: 60px 1fr 40px; gap: 16px; padding: 24px 16px 24px 0; }
      .dirAv2 .svc-b { display: none; }
      .dirAv2 .svc-t { font-size: 22px; }
      .dirAv2 .svc-body { padding: 0 16px 28px 76px; }
      .dirAv2 .svc.open .svc-body { grid-template-columns: 1fr; }
    }

    /* Mobile — single column, hide secondary nav, large tap targets */
    @media (max-width: 720px) {
      .dirAv2 .nav { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
      .dirAv2 .nav-links { display: none; }
      .dirAv2 .nav .nav-links.mobile-open { display: flex; flex-direction: column; gap: 16px; width: 100%; padding-top: 12px; border-top: 1px solid ${p.line}; align-items: flex-start; }
      .dirAv2 .nav .nav-links.mobile-open a { font-size: 15px; opacity: 1; }
      .dirAv2 .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid ${p.line}; border-radius: 8px; cursor: pointer; color: ${p.ink}; }
      .dirAv2 .nav-toggle svg { width: 18px; height: 18px; }

      .dirAv2 .hero { padding: 40px 20px 32px; gap: 32px; }
      .dirAv2 h1 { font-size: 40px; line-height: 1.05; }
      .dirAv2 .lede { font-size: 16px; }
      .dirAv2 .hero-cta { flex-direction: column; align-items: stretch; }
      .dirAv2 .btn { justify-content: center; padding: 14px 20px; }
      .dirAv2 .hero-meta { flex-wrap: wrap; gap: 20px; }
      .dirAv2 .hero-meta strong { font-size: 18px; }

      .dirAv2 .collage { height: 360px; max-width: 100%; }
      .dirAv2 .collage .ph.p1 { width: 140px; height: 175px; left: 0; top: 20px; }
      .dirAv2 .collage .ph.p2 { width: 130px; height: 165px; left: 130px; top: 0; }
      .dirAv2 .collage .ph.p3 { width: 140px; height: 175px; left: 250px; top: 14px; }
      .dirAv2 .collage .ph.p4 { width: 130px; height: 165px; left: 50px; top: 188px; }
      .dirAv2 .collage .ph.p5 { width: 140px; height: 175px; left: 190px; top: 178px; }
      .dirAv2 .collage .badge { right: 0; bottom: -40px; max-width: 180px; font-size: 11px; padding: 12px 14px; }

      .dirAv2 .pillars, .dirAv2 .services, .dirAv2 .process, .dirAv2 .people, .dirAv2 .mission, .dirAv2 .quote, .dirAv2 .cta, .dirAv2 .stats { padding: 48px 20px; }
      .dirAv2 .marquee { padding: 24px 20px; }
      .dirAv2 .pillars-h h2, .dirAv2 .section-head h2, .dirAv2 .pp-head h2, .dirAv2 .process h2, .dirAv2 .mission h2 { font-size: 28px; }
      .dirAv2 .cta h2 { font-size: 32px; }
      .dirAv2 .quote blockquote { font-size: 18px; }
      .dirAv2 .quote .qmark { font-size: 80px; }
      .dirAv2 .stat-v { font-size: 48px; }
      .dirAv2 .stat-v sup { font-size: 18px; }

      .dirAv2 .steps { grid-template-columns: 1fr; }
      .dirAv2 .team { grid-template-columns: repeat(2, 1fr); gap: 20px; }

      .dirAv2 .svc-head { grid-template-columns: 40px 1fr 32px; gap: 12px; padding: 20px 12px 20px 0; }
      .dirAv2 .svc-t { font-size: 18px; }
      .dirAv2 .svc-tog { font-size: 18px; }
      .dirAv2 .svc-body { padding: 0 12px 22px 52px; }

      .dirAv2 .footer { padding: 28px 20px; flex-direction: column; gap: 16px; align-items: flex-start; text-align: left; }
      .dirAv2 .footer .mono { font-size: 10px; word-break: break-all; }

      .dirAv2 .cta-side { padding: 24px; }
    }

    /* Hide the mobile nav toggle on desktop */
    .dirAv2 .nav-toggle { display: none; }

  `;

  const points = [42, 48, 45, 58, 62, 68, 71, 78, 82, 86, 91, 95];
  const w = 460, h = 160;
  const path = points.map((v, i) => {
    const x = (i / (points.length - 1)) * w;
    const y = h - ((v - 35) / 65) * h;
    return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(" ");
  const area = `${path} L${w},${h} L0,${h} Z`;

  const [openSvc, setOpenSvc] = React.useState(0);

  const initials = (name) => name.split(' ').filter(s => s[0] && s[0] === s[0].toUpperCase()).slice(0, 2).map(s => s[0]).join('');

  return (
    <>
      <style>{css}</style>
      <div className="dirAv2">
        {/* NAV */}
        <div className="nav">
          <AxiomLogo height={44} />
          <button className="nav-toggle" aria-label="Toggle menu" onClick={() => setNavOpen(o => !o)}>
            <svg viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2">
              {navOpen
                ? <path d="M3 3 L15 15 M15 3 L3 15"/>
                : <><path d="M2 5 H16"/><path d="M2 9 H16"/><path d="M2 13 H16"/></>
              }
            </svg>
          </button>
          <div className={"nav-links" + (navOpen ? " mobile-open" : "")} onClick={(e) => { if (e.target.tagName === 'A') setNavOpen(false); }}>
            <a href="#services">Services</a>
            <a href="#process">How we work</a>
            <a href="#schools">Schools</a>
            <a href="#team">Our team</a>
            <a href="#mission">About</a>
            <button className="btn btn-primary">Let's talk →</button>
          </div>
        </div>

        {/* HERO — board-confident copy */}
        <div className="hero">
          <div>
            <div className="eyebrow mono"><span className="pulse"/> Charter School Finance · Albuquerque, NM · Serving NM & NV</div>
            <h1>You focus on <em>students.</em><br/>We'll focus on the <em>financials.</em></h1>
            <p className="lede">CFO-grade financial modeling, governance support, compliance, and grants — built and delivered by school business officials with 15+ years inside New Mexico charters.</p>
            <div className="hero-cta">
              <button className="btn btn-primary">Let's start a conversation →</button>
              <a href="#team" className="btn btn-ghost">Meet the team</a>
            </div>
            <div className="hero-meta mono">
              <div><strong>13</strong>schools served</div>
              <div><strong>15+ yrs</strong>inside NM charters</div>
              <div><strong>100%</strong>audit-ready</div>
            </div>
          </div>

          <div className="collage">
            <div className="ph p1"><img src="assets/team-1.avif" alt="Team member"/></div>
            <div className="ph p2"><img src="assets/team-2.avif" alt="Team member"/></div>
            <div className="ph p3"><img src="assets/team-3.avif" alt="Team member"/></div>
            <div className="ph p4"><img src="assets/team-4.avif" alt="Team member"/></div>
            <div className="ph p5"><img src="assets/team-5.avif" alt="Team member"/></div>
            <div className="badge mono">
              <strong><span className="pulse"/>The team behind your books</strong>
              Real people, on a first-name basis with your school and your board.
            </div>
          </div>
        </div>

        {/* MARQUEE */}
        {/* PILLARS — three sources of value (moved up) */}
        <div className="pillars" id="about">
          <div className="pillars-h">
            <div>
              <div className="lbl mono">— THE AXIOM DIFFERENCE</div>
              <h2>Three things we bring<br/>to your school.</h2>
            </div>
            <p>Other firms sell hours. We bring <em>expertise</em> from years inside NM charters, <em>a partnership</em> with your leadership and board, and <em>advocacy</em> for the funding charter schools deserve.</p>
          </div>
          <div className="pgrid">
            {AXIOM_DATA.pillars.map((pl, i) => (
              <div className="pillar" key={pl.key}>
                <div className="num mono">/ 0{i + 1}</div>
                <div className="label">{pl.label}</div>
                <h3>{pl.title}</h3>
                <p>{pl.blurb}</p>
              </div>
            ))}
          </div>
        </div>

        {/* SERVICES — expandable detail */}
        <div className="services" id="services">
          <div className="section-head">
            <div>
              <div className="lbl mono">— WHAT WE DO</div>
              <h2>Four practices,<br/>one accountable team.</h2>
            </div>
            <p>We replace the patchwork of bookkeepers, treasurers, and vendor management groups that most charters cobble together. Everything below is included in a single CFO-level engagement.</p>
          </div>
          <div className="svc-list">
            {AXIOM_DATA.services.map((s, i) => (
              <div className={"svc" + (openSvc === i ? " open" : "")} key={s.key}>
                <div className="svc-head" onClick={() => setOpenSvc(openSvc === i ? -1 : i)}>
                  <div className="svc-num mono">/ {String(i + 1).padStart(2, "0")}</div>
                  <div className="svc-t">{s.title}</div>
                  <div className="svc-b">{s.blurb}</div>
                  <div className="svc-tog">+</div>
                </div>
                <div className="svc-body">
                  {s.items.map((it, j) => <div className="svc-item" key={j}>{it}</div>)}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* PROCESS */}
        <div className="process" id="process">
          <div className="ph">
            <div>
              <div className="lbl mono">— HOW WE WORK</div>
              <h2>A cadence the<br/>board can plan against.</h2>
            </div>
            <p className="sub">Reporting and forecasting are on a calendar everyone can see. No mystery. No fire drills. Just predictability.</p>
          </div>
          <div className="steps">
            {AXIOM_DATA.process.map(s => (
              <div className="step" key={s.step}>
                <div className="step-n mono">{s.step}</div>
                <div className="step-t">{s.title}</div>
                <div className="step-b">{s.blurb}</div>
              </div>
            ))}
          </div>
        </div>

        {/* PEOPLE — humanity */}
        <div className="people" id="team">
          <div className="pp-head">
            <div>
              <div className="lbl mono">— OUR TEAM</div>
              <h2>Reporting, modeling, governance,<br/>accounting — <em>covered,</em> by name.</h2>
            </div>
            <p>Schools we serve don't get passed from manager to manager. You'll know who's in your finance committee meetings and who's on the other end of the phone — because the same people show up, year after year.</p>
          </div>
          <div className="team">
            {AXIOM_DATA.team.map(person => (
              <div className="person" key={person.name}>
                <div className="person-photo"><img src={person.photo} alt={person.name}/></div>
                <div className="person-n">{person.name}</div>
                <div className="person-r mono">{person.role}</div>
                <a href={person.linkedin} className="person-li" target="_blank" rel="noopener noreferrer">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
                  LinkedIn
                </a>
              </div>
            ))}
          </div>
        </div>

        {/* MISSION — why we do this */}
        <div className="mission" id="mission">
          <div>
            <div className="lbl mono">— WHY WE DO THIS</div>
            <h2>We believe in <em>charter schools</em>.<br/>That's why we're here.</h2>
          </div>
          <div>
            <p>Charter schools change lives — and strong financials are what let mission-driven schools actually do their work. We're New Mexico-based, and we picked this work because we believe in the schools we serve. The same passion you bring to your students, we bring to your books.</p>
            <p>Locally based. Locally invested. In it for the long run.</p>
          </div>
        </div>

        {/* QUOTE */}
        <div className="quote">
          <div>
            <div className="lbl mono">— FROM A CLIENT</div>
            <div className="qmark">"</div>
          </div>
          <div>
            <blockquote>{AXIOM_DATA.testimonial.quote}</blockquote>
            <div className="quote-attr"><strong>{AXIOM_DATA.testimonial.attribution}</strong></div>
          </div>
        </div>

        {/* SCHOOLS — moved to bottom */}
        <div className="marquee" id="schools">
          <div className="marquee-label mono">— Trusted by 13 New Mexico charter schools</div>
          <div className="marquee-row">
            {AXIOM_DATA.schools.map(s => <span key={s}>{s}</span>)}
          </div>
        </div>

        {/* CTA */}
        <div className="cta" id="contact">
          <div>
            <h2>Organized financials<br/>and forecasts. Clear<br/>visibility. <em>Audit-ready,</em><br/>every cycle.</h2>
            <p>One conversation. One engagement letter. One team accountable end-to-end. We'll have a written assessment in your hands within the first week.</p>
          </div>
          <div className="cta-side">
            <div className="row"><span>Engagement</span><span>CFO-level retainer</span></div>
            <div className="row"><span>Onboarding</span><span>2–3 weeks</span></div>
            <div className="row"><span>Reporting cadence</span><span>Monthly close + GC packet</span></div>
            <div className="row"><span>Coverage</span><span>NM charter schools</span></div>
            <div style={{ paddingTop: 20 }}>
              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>Let's start a conversation →</button>
            </div>
          </div>
        </div>

        <div className="footer">
          <div><AxiomLogo height={20} /></div>
          <div className="mono">© 2026 AXIOM ANALYTICS · NEW MEXICO, USA · TECHSUPPORT@AXIOMANALYTICS.ORG</div>
        </div>
      </div>
    </>
  );
}



const MAILTO = "mailto:katie.rarick@axiomanalytics.org?subject=Axiom%20Analytics%20%E2%80%94%20Let%27s%20talk";

function App() {
  // Wire all CTA buttons to mailto via event delegation after render
  React.useEffect(() => {
    const root = document.getElementById('root');
    if (!root) return;
    const handler = (e) => {
      const btn = e.target.closest('button.btn');
      if (!btn) return;
      // Don't intercept anchor-style buttons that already have an href
      if (btn.tagName === 'A' && btn.getAttribute('href')) return;
      e.preventDefault();
      window.location.href = MAILTO;
    };
    root.addEventListener('click', handler);
    return () => root.removeEventListener('click', handler);
  }, []);

  const palette = {
    bg: "#fbfaf6",
    ink: "#0d2440",
    inkSoft: "#3d5170",
    sage: "#9bbf9a",
    sageDeep: "#5d8c5e",
    line: "rgba(13,36,64,0.10)",
    surface: "#ffffff",
    accent: "#0d2440",
  };

  return <DirectionAv2 palette={palette} />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);