/* =========================================================
   SIGNET — Solutions (project-type work)
   ========================================================= */

const SOLUTIONS = [
  {
    id: "website-development",
    category: "Web & Digital",
    scope: "Marketing site → web app",
    title: "Website development by the team that already runs your network.",
    summary: "Marketing sites, customer portals, internal tools, and lightweight web applications — designed, built, hosted, and supported by the same engineers who keep the rest of your IT running. Every project starts with discovery: we sit with stakeholders, map the goals to actual user flows, and write the information architecture before anyone opens a design tool. From there it's modern, responsive design tuned to your brand; clean front-end code (React, Next.js, or a CMS-driven stack when that's the right call); a CMS your marketing team can actually edit without a ticket; and a back-end with proper authentication, role-based access, and the integrations your business actually depends on — CRM, ERP, payment, scheduling, ConnectWise, e-signature. We bake in SEO from day one (semantic markup, structured data, sitemaps, Core Web Vitals tuning), wire up GA4 and conversion tracking that survives a cookie banner, and meet WCAG 2.2 AA so your site isn't an ADA complaint waiting to happen. Hosting lives in Azure, AWS, or Cloudflare — with TLS, WAF, automated backups, staging environments, and patching all included — and once you're live we stay on as your dev team: small enhancements without re-bidding, monthly performance reports, and a real human on the other end of the ticket.",
    highlights: [
      { n: "Design → ship", l: "discovery → launch → support" },
      { n: "CMS", l: "editor-friendly" },
      { n: "A11y", l: "WCAG 2.2 AA" },
      { n: "Core Web", l: "Vitals green" },
    ],
  },
  {
    id: "access-control",
    category: "Physical Security",
    scope: "Single door → multi-site",
    title: "Access control, designed around how your people actually move.",
    summary: "Cloud-managed access control built on Ubiquiti UniFi Access — no per-door subscriptions, no monthly platform fees. Mobile credentials, NFC unlock, granular schedules, and a real audit trail. We size the door count to your building, install the readers and controllers, integrate with your directory, and hand you a system your office manager can actually run.",
    href: "https://ui.com/us/en/door-access",
    highlights: [
      { n: "Unifi Access", l: "subscription-free" },
      { n: "Mobile", l: "& NFC unlock" },
      { n: "AD/Entra", l: "identity sync" },
    ],
  },
  {
    id: "cctv",
    category: "Physical Security",
    scope: "1 → 2000+ cameras",
    title: "CCTV that records what matters and surfaces it in seconds.",
    summary: "IP-based video surveillance built on subscription-free Ubiquiti UniFi Protect — no per-camera cloud fees, footage stays on your NVR. We spec the cameras to the use case, plan the cable runs, configure smart motion zones and AI-driven person and vehicle search, and tune retention so storage isn't a runaway line item. License plate recognition cameras at gates, parking entrances, and drive-thrus — capture every plate that crosses the line, build allow- and watch-lists, and search history by plate number when something needs answering. When you need eyes on the feed around the clock, professional monitoring is available through our partner Sandru Monitoring — verified alarm response, live video review, and dispatch when something actually warrants it.",
    href: "https://ui.com/us/en/camera-security",
    highlights: [
      { n: "UniFi Protect", l: "subscription-free" },
      { n: "AI", l: "person & vehicle search" },
      { n: "LPR", l: "plate capture & allow-lists" },
      { n: "Monitoring", l: "optional via Sandru Monitoring" },
    ],
  },
  {
    id: "video-intercom",
    category: "Physical Security",
    scope: "Front door → multi-entry",
    title: "Video intercoms that ring the people who should answer.",
    summary: "Front-door and lobby video intercoms built on Ubiquiti UniFi Protect — visitors press a button, reception sees a live HD feed, talks back, and releases the door from a desk answering station, mobile app, or web console. Calls escalate through a roster so nobody's pressed against an empty front desk, every press is recorded alongside the rest of your camera footage, and the strike ties into the same UniFi Access doors you already have. For multi-tenant buildings, the included Signet phone line dials residents' cell phones or landlines directly from the directory — no resident app required, no per-unit telecom add-on. No per-station cloud fees, no separate platform to learn.",
    href: "https://ui.com/door-access/intercoms",
    highlights: [
      { n: "Two-way", l: "HD video & audio" },
      { n: "Dials residents", l: "free phone line included" },
      { n: "Access integrated", l: "buzz to unlock" },
    ],
  },
  {
    id: "fleet-tracking",
    category: "Physical Security",
    scope: "5 → 500 vehicles",
    title: "Vehicle fleet tracking that keeps the rubber side down and the books straight.",
    summary: "GPS telematics across your trucks, vans, and field vehicles — live map view of where everyone is, automated mileage logs that hold up to an audit, and driver-behavior reports flagging hard braking, speeding, idling, and harsh cornering. Geofence the yard so you know when crews land on a job site, and pull IFTA-ready reports without anyone tabbing through receipts at the end of the quarter.",
    highlights: [
      { n: "Real-time", l: "GPS map + history" },
      { n: "Auto-logged", l: "mileage · IFTA-ready" },
      { n: "Driver risk", l: "speed · braking · idling" },
    ],
  },
  {
    id: "conference-av",
    category: "Audio Visual",
    scope: "Huddle room → boardroom",
    title: "Conference room AV that works on the first click.",
    summary: "One-tap join, room-aware cameras, voice-tracking microphones, and displays sized to the room. We design rooms certified for Microsoft Teams Rooms or Zoom Rooms, run the cabling cleanly, and program the touch panel so guests don't have to flag down IT five minutes in.",
    highlights: [
      { n: "MTR", l: "& Zoom Rooms" },
      { n: "1-tap", l: "join experience" },
      { n: "Zero", l: "cables on the table" },
    ],
  },
  {
    id: "overhead-audio",
    category: "Audio Visual",
    scope: "Single zone → multi-site",
    title: "In-ceiling music and paging, zoned the way the building actually works.",
    summary: "Commercial-grade overhead speakers laid out for even coverage and tuned to the room — not the contractor-bag speakers leftover from the buildout. Independent zones so the lobby plays one playlist, the warehouse plays another, and the boardroom stays quiet. Licensed background music from SiriusXM for Business, Mood Media, or Soundtrack so you're not playing Spotify Personal at a public venue and waiting for the ASCAP letter. Overhead paging from any desk phone, softphone, or front-desk station — dial the zone, make the announcement, done. Emergency and life-safety paging integrated where code requires it. One system, one volume knob per zone, one ticket line when something needs us.",
    highlights: [
      { n: "Zoned", l: "independent per area" },
      { n: "Licensed", l: "SiriusXM · Mood · Soundtrack" },
      { n: "Page anywhere", l: "from any phone or station" },
    ],
  },
  {
    id: "digital-signage",
    category: "Audio Visual",
    scope: "Single screen → multi-site",
    title: "Digital signage that updates itself when the message changes.",
    summary: "Lobbies, breakrooms, retail floors, conference rooms — displays driven by Yodeck for content management. We spec the screens and players, mount and cable everything cleanly, and stand up the playlists, schedules, and user permissions so marketing or operations can swap content without filing a ticket.",
    href: "https://www.yodeck.com/",
    highlights: [
      { n: "Yodeck", l: "content management" },
      { n: "Remote", l: "playlist updates" },
      { n: "Multi-site", l: "centrally managed" },
    ],
  },
  {
    id: "custom-dashboards",
    category: "Web & Digital",
    scope: "Single view → executive cockpit",
    title: "Custom dashboards that compile numbers you can actually trust.",
    summary: "We build dashboards on top of the systems you already pay for — QuickBooks, Salesforce, HubSpot, Jira, Asana, Shopify, ConnectWise, Power BI, you name it. Financials and cash position, project status and burn, sales pipeline, helpdesk SLAs, manufacturing floor metrics, fleet location, donor and membership health for nonprofits, lobby and conference-room status — whatever your team is screenshotting into a deck every Friday. Refreshed live, scoped by role, viewable on the wall TV or the phone in line for coffee.",
    highlights: [
      { n: "Any source", l: "QBO · Salesforce · HubSpot · Jira · Power BI" },
      { n: "Live", l: "auto-refresh · role-scoped views" },
      { n: "Wall TV", l: "or phone-sized · whichever fits" },
    ],
  },
  {
    id: "ai-assistants",
    category: "Web & Digital",
    scope: "Pilot team → company-wide",
    title: "Custom AI assistants, trained on the knowledge your company actually runs on.",
    summary: "Purpose-built assistants — powered by Anthropic's Claude — and grounded in your own documents, drives, ticketing systems, CRM, and historical work, not the open internet. We stand up the retrieval layer over SharePoint, Google Drive, Confluence, network shares, Salesforce, HubSpot, and ConnectWise; wire in role-based permissions so the assistant only surfaces what each user is already allowed to see; and deliver it inside Teams, Slack, or a branded web chat your team already opens. Outputs land as usable artifacts — proposal drafts in your template, statement-of-work line items, redlined contracts, ticket summaries — not chat transcripts to copy-paste. Because the whole company shares one pooled, metered backend instead of a per-seat license per employee, it's the most cost-effective way to put real AI in front of every person on staff — hosted in your tenant, audited, and tuned by the same engineers who keep your network running.",
    highlights: [
      { n: "Claude", l: "by Anthropic" },
      { n: "Pooled", l: "metered · whole-company" },
      { n: "Internal", l: "role-scoped retrieval" },
    ],
  },
  {
    id: "structured-cabling",
    category: "Infrastructure",
    scope: "Single suite → full floor",
    title: "Structured cabling, labeled and documented like an engineer wishes it was.",
    summary: "Cat6A and fiber runs pulled to industry standard, terminated in a rack we'd be happy to take a photo of. Every drop is tested, labeled, and recorded in a port map you can hand to the next tech who walks in — including us, ten years from now.",
    highlights: [
      { n: "Cat6A", l: "& OM4 fiber" },
      { n: "Labeled", l: "to the port" },
      { n: "Tested", l: "every drop" },
    ],
  },
  {
    id: "office-buildout",
    category: "Infrastructure",
    scope: "New office → relocation",
    title: "New office buildouts, networked end to end before the furniture lands.",
    summary: "We sit at the GC table from day one. Cabling, IDF/MDF closets, Wi-Fi heatmaps, access control, CCTV, AV, printers, and circuits — all sequenced against the construction schedule so move-in day means plugging in laptops, not chasing punch lists.",
    highlights: [
      { n: "End-to-end", l: "scope of work" },
      { n: "GC-coord.", l: "on your team" },
      { n: "Day-1", l: "ready" },
    ],
  },
  {
    id: "wifi-design",
    category: "Infrastructure",
    scope: "Office → warehouse",
    title: "Wi-Fi designed from a heatmap, not a hope.",
    summary: "Predictive and on-site surveys to place access points where coverage actually needs to be — not where the ceiling tile happened to land. UniFi or Meraki, segmented SSIDs, guest isolation, and seamless roaming so the meeting doesn't drop when someone walks to the kitchen.",
    highlights: [
      { n: "Survey", l: "predictive + on-site" },
      { n: "Wi-Fi 6E", l: "& Wi-Fi 7 ready" },
      { n: "Seamless", l: "roaming" },
    ],
  },
  {
    id: "email-migration",
    category: "Communications",
    scope: "10 → 5,000 mailboxes",
    title: "Email migrations that finish on a Sunday and nobody notices Monday.",
    summary: "Cutovers between Microsoft 365, Google Workspace, GoDaddy, iCloud, and on-prem Exchange — planned around your calendar, not ours. Discovery and mailbox sizing, domain and DNS choreography, MX cutover with coexistence so mail never bounces, and mobile re-profiling for every device. Calendars, contacts, shared mailboxes, distribution lists, and public folders come along — not just the inbox.",
    highlights: [
      { n: "5 platforms", l: "M365 · Google · GoDaddy · iCloud · Exchange" },
      { n: "Zero", l: "downtime · MX coexistence" },
      { n: "Everything", l: "calendars + contacts preserved" },
    ],
  },
  {
    id: "voip-phones",
    category: "Communications",
    scope: "5 → 500 seats",
    title: "Cloud phone systems that don't feel like 2008.",
    summary: "Microsoft Teams Phone — provisioned with your numbers ported, auto-attendants written, call queues tuned, and desk phones or softphones deployed across your team. Reporting and call recording built in. Faxing handled too, when the industry still demands it. Carrier circuits and SIP trunking delivered through our partnership with Strong Fiber, so the dial tone, the porting, and the support all run through one accountable team.",
    href: "https://www.microsoft.com/en-us/microsoft-teams/microsoft-teams-phone",
    highlights: [
      { n: "Teams", l: "Phone certified" },
      { n: "Strong Fiber", l: "telco partner" },
      { n: "E911", l: "compliant" },
    ],
  },
  {
    id: "print-tracking",
    category: "Infrastructure",
    scope: "Single MFP → enterprise fleet",
    title: "Print tracking that turns the printer into a line item you can actually read.",
    summary: "PaperCut, deployed across your printer fleet — secure release at the device, per-user and per-department quotas, color-vs-mono cost tracking, and reports that finally answer \"who printed 4,000 pages last month.\" Find-me printing so jobs follow the user to whichever MFP they tap, and pull-print held until the right badge taps in. Pays for itself in toner and paper inside the first quarter.",
    href: "https://www.papercut.com/products/mf/",
    highlights: [
      { n: "PaperCut", l: "MF / NG" },
      { n: "Secure release", l: "badge / PIN" },
      { n: "Cost reports", l: "by user & dept" },
    ],
  },
  {
    id: "multifamily-internet",
    category: "Infrastructure",
    scope: "Single building → portfolio",
    title: "Managed whole-building internet, one bill for the property.",
    summary: "A single-payer model for multi-family buildings — the property pays one wholesale bill, residents get fast, included Wi-Fi from day one. Cuts total internet spend across the building by roughly 60% versus every unit buying retail service. We engineer the building with redundant uplinks from two carriers, automatic failover, and segmented per-unit networks so neighbors never see each other. Move-in is a QR code, not a four-day Comcast appointment.",
    highlights: [
      { n: "~60%", l: "lower vs. retail" },
      { n: "Redundant", l: "dual-carrier uplinks" },
      { n: "Per-unit", l: "isolated networks" },
    ],
  },
  {
    id: "building-automation",
    category: "Infrastructure",
    scope: "Single suite → multi-site",
    title: "Building automation that catches problems before the floor does.",
    summary: "Leak detection under the server room slab and behind the breakroom sink. Temperature and humidity sensors in the IDF, on the lab fridge, in the wine cellar. Motion sensors that flag after-hours activity where it shouldn't be. Sensors connect to your network, alerts route to the right people on the right channel — text, email, ticket — and history lands in a dashboard so insurance and compliance never go looking. Monitored 24/7 by our NOC, so even at 3am on a Sunday somebody is watching.",
    highlights: [
      { n: "Leak", l: "& water sensors" },
      { n: "Temp/RH", l: "monitoring + alerts" },
      { n: "Motion", l: "after-hours alerts" },
      { n: "24/7", l: "NOC monitored" },
    ],
  },
  {
    id: "vdi",
    category: "Web & Digital",
    scope: "Single department → enterprise",
    title: "Virtual desktop infrastructure so the desk follows the user, not the other way around.",
    summary: "Centrally-hosted Windows desktops your team reaches from anywhere — the office Chromebox, a laptop on the road, a tablet at a job site, a personal machine working from home. We design and stand up the VDI on Azure Virtual Desktop, Windows 365, or on-prem hypervisor depending on what fits the workload and the budget; size the host pools to actual usage so you're not paying for ghost capacity; and join everything to your identity stack with Conditional Access, MFA, and role-based app delivery. Data and IP stay on the server side — the endpoint is just a screen — which simplifies BYOD, contractor access, regulated data (PHI, CJIS, ITAR), and the laptop someone leaves in a rideshare. Profiles, app packages, GPU pools for CAD/design, and printer mapping all handled as part of the build; ongoing patching and image updates handled by the same team.",
    highlights: [
      { n: "AVD · W365", l: "or on-prem hypervisor" },
      { n: "BYOD-safe", l: "data stays server-side" },
      { n: "GPU pools", l: "for CAD & design" },
      { n: "Identity", l: "SSO · MFA · Conditional Access" },
    ],
  },
  {
    id: "data-recovery",
    category: "Web & Digital",
    scope: "Single drive → enterprise RAID",
    title: "Data recovery for the day the drive doesn't spin up.",
    summary: "When a hard drive stops mounting, a RAID array drops more disks than it can rebuild, or a thumb drive comes back from the field unreadable, we work the problem methodically — logical recovery in our lab first, software-level reconstruction of corrupted file systems and rebuilt parity, and full forensic imaging so the original drive is never the working copy. If the drive is physically damaged — clicking heads, seized motors, fire or water exposure, snapped USB stick — we ship it to our partner forensics lab for clean-room platter swaps and advanced reconstruction, then bring the recovered data back to you on encrypted media. Photos, accounting files, project archives, mailbox stores, virtual machine disks; spinning disks, SSDs, NVMe, thumb drives, SD cards. We tell you upfront what's recoverable, what isn't, and what it'll cost before anyone touches a screwdriver. Once your data is back, we'll design and stand up a real backup system — image-level local backups, offsite replication, retention policies, and tested restores — so you're never one bad sector away from losing it again.",
    highlights: [
      { n: "HDD · SSD", l: "NVMe · thumb · SD" },
      { n: "RAID", l: "rebuild & parity recovery" },
      { n: "Clean room", l: "forensics lab partner" },
      { n: "Backups", l: "designed & tested after" },
    ],
  },
  {
    id: "cmmc-consulting",
    category: "Compliance",
    scope: "Level 1 self-attest → Level 2 C3PAO",
    title: "CMMC consultation for the DoD contractors who actually have to pass.",
    summary: "Cybersecurity Maturity Model Certification is no longer a future problem — if you bid on DoD work or sit in a prime's supply chain, the clock is running. DFARS 252.204-7012 already requires NIST SP 800-171 compliance and incident reporting; CMMC is how the Department verifies it. We start with a gap assessment against the 110 NIST SP 800-171 controls (or the 17 Level 1 practices, if that's your scope), map every finding to the specific systems and processes that own it, and build a System Security Plan and Plan of Action & Milestones that an assessor will actually accept. From there we do the remediation work: tenant hardening in M365 GCC or GCC High, FIPS-validated encryption, MFA enforcement, logging and SIEM, incident response playbooks, media handling, physical and personnel controls, and the policy set behind all of it. We coach your team through the self-assessment, or stand alongside you for the C3PAO assessment when Level 2 is required. CUI-aware from day one — not bolted on after the auditor flags it.",
    highlights: [
      { n: "Levels 1 & 2", l: "self-attest → C3PAO" },
      { n: "DFARS 7012", l: "& NIST 800-171 mapped" },
      { n: "GCC / GCC High", l: "tenant build & harden" },
      { n: "SSP & POA&M", l: "auditor-ready artifacts" },
    ],
  },
  {
    id: "gcc-migration",
    category: "Compliance",
    scope: "Single tenant → multi-domain",
    title: "Public to GCC cloud migrations for orgs that can't stay in the commercial tenant.",
    summary: "Standard Microsoft 365 Commercial wasn't built for Controlled Unclassified Information, FedRAMP-required workloads, or the contract clauses that show up in DoD, federal civilian, state, local, and CJIS work. GCC, GCC High, and DoD tenants live in segregated cloud regions with US-only data residency, screened US-person support staff, FedRAMP High / IL5 baselines, and the DFARS 7012, ITAR, EAR, and CJIS coverage your contracting officer is asking about. We migrate you across the boundary cleanly — discovery and licensing analysis, tenant provisioning, mailbox and OneDrive cutover with PST and content reconciliation, Teams chat and channel migration, SharePoint sites with permissions preserved, Entra identity and SCIM rebuild, Intune re-enrollment, and the third-party app re-licensing that usually surprises people. CUI is identified and labeled along the way, retention and DLP policies land before the data does, and we keep the commercial tenant available read-only during the transition so nothing falls in a gap.",
    highlights: [
      { n: "GCC · GCC High", l: "& DoD tenants" },
      { n: "CUI · ITAR · CJIS", l: "boundary built right" },
      { n: "Mail · Files · Teams", l: "preserved & labeled" },
      { n: "Identity rebuild", l: "Entra · Intune · SCIM" },
    ],
  },
  {
    id: "hipaa-consulting",
    category: "Compliance",
    scope: "Solo practice → clinics",
    title: "HIPAA consultation that turns the binder of policies into a tenant you can actually defend.",
    summary: "HIPAA isn't a sticker on the door — the Privacy, Security, and Breach Notification Rules each carry concrete technical and administrative requirements, and OCR audits and ransomware notifications both end at the same risk analysis you should already have on file. We start with a full risk assessment against the HIPAA Security Rule (45 CFR §§ 164.308–164.312), inventory every system that touches ePHI — EHR, imaging, billing, email, file shares, backup, mobile devices, copiers, and the practice management vendors behind them — and identify where unencrypted PHI is moving or sitting. From there we remediate: encryption at rest and in transit, role-based access and unique user IDs, automatic logoff, audit logging, MDM on phones and tablets, secure messaging, and the policy + workforce training set behind it. Business Associate Agreements get reviewed and reconciled. We sign a BAA with you, host PHI workloads in HIPAA-eligible Microsoft 365 and Azure configurations, and stand alongside you if OCR or a breach response ever comes knocking. Built for medical practices, dental, behavioral health, home health, long-term care, and the business associates serving them.",
    highlights: [
      { n: "Security Rule", l: "§§ 164.308–164.312" },
      { n: "Risk analysis", l: "& remediation roadmap" },
      { n: "BAA", l: "signed · vendors reconciled" },
      { n: "ePHI", l: "encrypted · logged · trained" },
    ],
  },
  {
    id: "pci-consulting",
    category: "Compliance",
    scope: "SAQ A merchant → Level 1 enterprise",
    title: "PCI DSS consultation that shrinks the scope before it eats your budget.",
    summary: "Every business that takes a card is in PCI DSS scope — the only question is how much of your network the auditor gets to look at. We start by mapping the cardholder data environment: where the PAN is captured, where it flows, where it sits, and every system one hop away. Then we cut scope hard — P2PE terminals so plaintext card data never touches your network, tokenization at the processor, network segmentation that holds up under review, and getting e-commerce flows onto hosted payment fields so you qualify for SAQ A instead of SAQ D. From there we do the remediation work against the 12 PCI DSS v4.0 requirements: firewall and segmentation rules, default-password sweeps, encryption in transit, vulnerability scanning and ASV coordination, file integrity monitoring, logging and 12-month retention, MFA into the CDE, and the policy + awareness training behind it. We prep your Self-Assessment Questionnaire, coordinate with your QSA when one's required, and document the compensating controls that make the report defensible. For retail, restaurants, hotels, e-commerce, healthcare billing, and any service business that runs cards.",
    highlights: [
      { n: "v4.0", l: "12 requirements mapped" },
      { n: "Scope cut", l: "P2PE · tokenize · segment" },
      { n: "SAQ", l: "A → D-Merchant prep" },
      { n: "ASV scans", l: "& QSA coordination" },
    ],
  },
  {
    id: "soc2-consulting",
    category: "Compliance",
    scope: "Type I readiness → Type II report",
    title: "SOC 2 consultation for SaaS companies whose customers stopped asking nicely.",
    summary: "When your enterprise pipeline is gated by a vendor security questionnaire and the line item is \"SOC 2 Type II report,\" you don't have a year to figure it out from scratch. We run a readiness assessment against the AICPA Trust Services Criteria — Security is required, and we'll scope in Availability, Confidentiality, Processing Integrity, or Privacy depending on what your contracts actually demand. From there we write the policy set (access, change management, vendor management, incident response, BCP/DR, secure SDLC) in language an auditor accepts, and stand up the operating controls so they generate evidence on their own: SSO with MFA, role-based access reviews, ticketed change approvals, vulnerability scanning, log aggregation, background checks, and onboarding/offboarding workflows. We pick the auditor with you, manage the evidence room and PBC list during fieldwork, sit in interviews alongside your team, and translate findings into remediations that don't tank engineering velocity. Type I in months one–three; Type II observation window starts the day controls go live.",
    highlights: [
      { n: "Trust Criteria", l: "Security + scoped TSCs" },
      { n: "Type I → II", l: "readiness → audit support" },
      { n: "Policies", l: "written & operationalized" },
    ],
  },
  {
    id: "iso27001-consulting",
    category: "Compliance",
    scope: "Stage 1 gap → surveillance audits",
    title: "ISO/IEC 27001 consultation, scoped so the ISMS doesn't outweigh the company.",
    summary: "ISO 27001 is the international standard your overseas customers, your bank, and your largest enterprise prospects are increasingly asking for in writing. We build an Information Security Management System sized to the business — not a 400-page binder borrowed from a Fortune 500. Scope definition first: which products, locations, and data flows live inside the ISMS, and which sit cleanly outside. Then the mandatory clauses 4–10: context of the organization, leadership commitment, risk assessment and treatment methodology, Statement of Applicability against the 93 Annex A controls (2022 revision), measurable objectives, internal audit program, and management review cadence. We implement the Annex A controls that actually map to your environment — access, cryptography, supplier relationships, secure development, incident management — stand up the document control and risk register the registrar will ask for, and run the internal audit and management review at least once before stage 1. Then we coordinate the certification body, sit in the audits with you, and keep the ISMS alive through surveillance years 1 and 2 and the year-3 recertification. Pairs cleanly with an existing SOC 2 program — most controls are shared.",
    highlights: [
      { n: "Annex A 2022", l: "93 controls scoped" },
      { n: "ISMS", l: "clauses 4–10 stood up" },
      { n: "Stage 1 & 2", l: "+ surveillance support" },
      { n: "Maps to SOC 2", l: "shared control set" },
    ],
  },
  {
    id: "cjis-consulting",
    category: "Compliance",
    scope: "Single agency → multi-jurisdiction",
    title: "CJIS consultation for the agencies and vendors who touch criminal justice information.",
    summary: "If you store, process, or transmit Criminal Justice Information — NCIC, III, CHRI, fingerprints, mugshots, dispatch data — the FBI CJIS Security Policy applies, and your state's CJIS Systems Officer is the one who decides whether you're compliant. We work both sides: the law-enforcement agency that owns the data, and the vendor or integrator whose product is in the path. Personnel: fingerprint-based background checks and CJIS Security Awareness training for every role with logical or physical access, tracked and re-certified on schedule. Technical: advanced authentication (CJIS-grade MFA) for every CJI session, FIPS 140-validated encryption in transit and at rest, audit logging with the right retention, session lock and screen timeout, and segregated storage that keeps CJI out of any system that isn't covered. Physical: secure-area definitions, visitor controls, and media handling. Agreements: Management Control Agreements, CJIS Security Addendums, and signed Information Exchange Agreements with every party in the chain. We coordinate with your CSO/ISO, prep you for the state audit, and stand alongside through findings remediation. Built for police, sheriffs, courts, corrections, dispatch centers, and the RMS/CAD/body-cam/forensics vendors serving them.",
    highlights: [
      { n: "CJIS Policy", l: "v5.9+ mapped" },
      { n: "Advanced auth", l: "CJIS-grade MFA" },
      { n: "Personnel", l: "prints · training · attestation" },
    ],
  },
  {
    id: "cui-training",
    category: "Training",
    scope: "Cleared roles → full workforce",
    title: "CUI handling training so the contract doesn't end with a 7012 breach notification.",
    summary: "Controlled Unclassified Information is more than a banner on a SharePoint site. Anyone who creates, receives, transmits, or stores CUI has obligations under 32 CFR Part 2002, the NIST 800-171 controls, and DFARS 252.204-7012 — and a single mishandled file in the wrong inbox can flow back to a breach report, a contract termination, or a False Claims Act exposure. We train your people on the actual lifecycle: how to identify CUI at the source (CUI Registry categories, ITAR, EAR, CTI, basic vs specified, decontrol triggers), how to label it correctly (banner markings, portion markings, CUI/SP-XXX subcategories), how to protect it at rest and in motion (approved encryption, FIPS 140-validated, GCC High vs commercial, what \"need to know\" actually means in practice), how to send it (encrypted email, SFTP with the right safeguards, secure file transfer platforms — and what to NEVER use), and how to handle the moments that always trip people up: contractors leaving, laptops in airports, screenshots in Teams chats, the inherited email thread that suddenly contains CUI. Role-based delivery for engineering, contracts, IT admins, and executives, with practical scenarios drawn from your actual program. Pairs with our CMMC and GCC migration engagements; required for most Level 2 assessments.",
    highlights: [
      { n: "32 CFR · 800-171", l: "+ DFARS 7012" },
      { n: "Identify → send", l: "full lifecycle" },
      { n: "CMMC L2", l: "assessment-ready" },
    ],
  },
  {
    id: "ai-prompt-training",
    category: "Training",
    scope: "Single team → company-wide",
    title: "AI & prompt engineering training so your team gets real work out of the tools you're paying for.",
    summary: "Most companies pay for ChatGPT or Copilot seats and then quietly watch them go unused, or worse, used badly. We teach your team to actually drive these tools — prompt structure that gets useful output the first try, when to ask for revisions vs starting fresh, how to give the model the right context (documents, examples, constraints, role), and how to chain steps for longer tasks. Role-specific tracks: sales learns proposal drafting and discovery prep, engineering learns code review and documentation, ops learns SOP authoring and ticket triage, finance learns variance analysis and policy lookup. Equally important, we cover the boundaries: what data should never go into a public model, how Microsoft 365 Copilot / Claude Enterprise / ChatGPT Team handle confidentiality differently, when to use your custom in-tenant assistant instead, how to spot hallucinations and verify outputs before sending them downstream, and the prompt-injection and data-exfiltration risks you should actually plan for. Delivered as live workshops with hands-on labs in your own tools, plus a reference library of vetted prompt templates for the workflows we identify together. Pairs cleanly with our Custom AI Assistants engagement.",
    highlights: [
      { n: "Hands-on", l: "in your own tools" },
      { n: "Role tracks", l: "sales · eng · ops · finance" },
      { n: "Safety", l: "data boundaries & hallucinations" },
      { n: "Prompt library", l: "vetted templates" },
    ],
  },
  {
    id: "computer-literacy",
    category: "Training",
    scope: "1-on-1 → cohort onboarding",
    title: "Basic computer literacy training for the people whose job didn't used to require it.",
    summary: "Not every new hire grew up on a keyboard. We run patient, judgment-free sessions that meet people where they are: how Windows actually works — file explorer, Save vs Save As, where your downloads go and how to find them; how to use Microsoft 365 — Outlook conversations, Teams chat vs channels, Word and Excel basics, OneDrive and SharePoint without losing anything; what the address bar does, what tabs are, and why \"is this link real?\" is a question worth asking; printers, scanners, screen sharing, video calls, calendar invites, and the dozen small interactions modern work assumes you already know. Delivered as 1-on-1 sessions or small cohorts, in person or remote, with hand-out cheat sheets people can actually keep. Pairs naturally with new-hire orientation and with security awareness training — the same person who can confidently find a file is the same person who can confidently spot a phishing email.",
    highlights: [
      { n: "1-on-1", l: "or small cohorts" },
      { n: "In person", l: "or remote sessions" },
      { n: "Cheat sheets", l: "to take home" },
    ],
  },
  {
    id: "security-awareness-training",
    category: "Training",
    scope: "Annual rollout → ongoing program",
    title: "Cybersecurity awareness training built around your business, not a generic LMS playlist.",
    summary: "Off-the-shelf awareness videos are easy to ship and easy to ignore. We build a custom training program that names your actual tools, your actual processes, your actual people — finance learning how wire fraud targets *your* AP workflow in QuickBooks, engineering learning how source-code exfiltration looks on *your* GitHub repos, the front desk learning how to handle the visitor management *your* HIPAA scope requires. Curriculum is mapped to whatever frameworks you live under — CMMC AT.L2-3.2.x, HIPAA 164.308(a)(5), PCI 12.6, SOC 2 CC1.4, ISO 27001 A.6.3 — so the same training session knocks out four audit requirements at once. Delivered as a mix of recorded modules with role-specific tracks, live quarterly tabletops with leadership, and just-in-time micro-lessons triggered by phishing simulation clicks. Completion, scoring, and certificates land in a dashboard you can export for the assessor. Refreshed annually to cover whatever the threat landscape and your environment actually changed.",
    highlights: [
      { n: "Custom", l: "to your tools & processes" },
      { n: "Role-based", l: "tracks per department" },
      { n: "Certificates", l: "audit-exportable" },
    ],
  },
  {
    id: "phishing-simulation",
    category: "Training",
    scope: "5 → 5000+ seats",
    title: "Phishing simulation that turns the click-prone into the click-suspicious.",
    summary: "Realistic phishing campaigns sent to your team on a schedule you control — fake invoice notifications, OneDrive share lures, fake password resets, fake CEO wire requests, the works — each one tracked per user. When someone clicks, they don't get shamed; they get redirected to a short, focused training moment that explains exactly what they missed, and the result lands in a dashboard you can show the auditor (or the board) on demand. We run the program end to end: campaign authoring, sender-domain warmup, allowlist coordination with your mail filter so simulations actually land, monthly cadence, role-targeted templates (finance gets wire fraud, execs get whaling, ops gets vendor impersonation), and quarterly executive reports. Pairs with annual Security Awareness training video modules — CMMC, HIPAA, PCI, and SOC 2 all expect both. Built on KnowBe4 or Proofpoint depending on your stack; standalone or bundled inside a managed services agreement.",
    highlights: [
      { n: "Just-in-time", l: "micro-training on click" },
      { n: "Reporting", l: "audit-ready dashboards" },
      { n: "KnowBe4", l: "or Proofpoint" },
    ],
  },
  {
    id: "fixed-wireless",
    category: "Infrastructure",
    scope: "Backup link → primary WAN",
    title: "Fixed wireless and Starlink, installed like real infrastructure.",
    summary: "When the fiber order slips six months or the building just doesn't have it, we bring the internet to you. Starlink Business and licensed fixed-wireless links — properly mounted, grounded, and aimed; pulled through conduit, not duct-taped to a downspout. Licensed microwave point-to-point and point-to-multipoint configurations to bridge campuses, connect outbuildings, or hub multiple remote sites back to a central tower — engineered with a path study, FCC coordination where required, and the right antennas for the distance and weather. Configured as primary WAN or as automatic failover behind your existing circuit, with SD-WAN failover so a dropped link doesn't drop the call.",
    href: "https://www.starlink.com/business",
    highlights: [
      { n: "Starlink", l: "Business + Roam" },
      { n: "Auto-failover", l: "SD-WAN tuned" },
      { n: "Grounded", l: "& weatherproofed" },
    ],
  },
  {
    id: "hotel-hospitality",
    category: "Retail & Hospitality",
    scope: "Boutique → full-service",
    title: "Hotel guest Wi-Fi and business centers, run like an amenity.",
    summary: "Property-wide guest Wi-Fi engineered for the way guests actually use it — branded splash pages, PMS integration for room-number sign-on, tiered bandwidth for streaming and premium rooms, and a back-of-house network kept properly separate. Business center PCs locked down for kiosk use, with session reset between guests, secure print and scan, and a single ticket line for the front desk when something needs us.",
    highlights: [
      { n: "PMS", l: "splash & sign-on" },
      { n: "Wi-Fi 6E", l: "every floor" },
      { n: "Kiosk-mode", l: "guest PCs" },
    ],
  },
  {
    id: "point-of-sale",
    category: "Retail & Hospitality",
    scope: "Counter → multi-location",
    title: "Point of sale that rings the first sale on opening day.",
    summary: "Retail, restaurant, and hospitality POS designed around how your front-of-house actually runs — terminals, card readers, kitchen printers, cash drawers, and the network behind them. We spec the hardware, configure the menu or catalog, integrate payments and accounting, and train your team before the doors open. Hardened Wi-Fi and a backup cellular failover so a downed circuit doesn't down the register.",
    highlights: [
      { n: "EMV/NFC", l: "PCI-DSS ready" },
      { n: "Offline mode", l: "rings through outages" },
      { n: "QBO/Xero", l: "accounting sync" },
    ],
  },
];

// Placeholder visual — abstract gold-on-midnight blueprint motif.
// Variants keyed by category so each card reads differently at a glance.
const SolutionPlaceholder = ({ category, id }) => {
  // Pick a motif per category — simple geometric "blueprint" treatments.
  const motif = (() => {
    if (category === "Physical Security") return "security";
    if (category === "Audio Visual") return id === "overhead-audio" ? "audio" : "av";
    if (category === "Communications") return "av";
    if (category === "Web & Digital") return "web";
    if (category === "Retail & Hospitality") return "pos";
    if (category === "Compliance") return "compliance";
    if (category === "Training") return id === "phishing-simulation" ? "training" : id === "computer-literacy" ? "literacy" : id === "ai-prompt-training" ? "prompt" : id === "cui-training" ? "cui" : "awareness";
    if (id === "fixed-wireless") return "wireless";
    if (id === "data-recovery") return "recovery";
    if (id === "vdi") return "vdi";
    if (id === "gcc-migration") return "gcc";
    if (id === "hipaa-consulting") return "hipaa";
    if (id === "pci-consulting") return "pci";
    if (id === "soc2-consulting") return "soc2";
    if (id === "iso27001-consulting") return "iso";
    if (id === "cjis-consulting") return "cjis";
    if (id === "building-automation") return "sensors";
    if (id === "hotel-hospitality") return "hotel";
    if (id === "multifamily-internet") return "multifamily";
    if (id === "print-tracking") return "print";
    if (id === "email-migration") return "email";
    if (id === "custom-dashboards") return "dash";
    if (id === "ai-assistants") return "ai";
    if (id === "fleet-tracking") return "fleet";
    return "infra";
  })();

  return (
    <svg
      viewBox="0 0 320 200"
      preserveAspectRatio="xMidYMid slice"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id={`solGrad-${id}`} x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#1a2754" />
          <stop offset="100%" stopColor="#08112a" />
        </linearGradient>
        <pattern id={`solGrid-${id}`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#d4a85a" strokeWidth="0.3" opacity="0.18" />
        </pattern>
      </defs>

      <rect width="320" height="200" fill={`url(#solGrad-${id})`} />
      <rect width="320" height="200" fill={`url(#solGrid-${id})`} />

      {/* warm glow */}
      <circle cx="270" cy="40" r="60" fill="#d4a85a" opacity="0.08" />

      {motif === "security" && (
        <g stroke="#d4a85a" fill="none" strokeWidth="1">
          {/* floor plan rectangle */}
          <rect x="50" y="60" width="220" height="100" opacity="0.55" />
          <line x1="160" y1="60" x2="160" y2="160" opacity="0.4" />
          <line x1="50" y1="110" x2="270" y2="110" opacity="0.4" />
          {/* door icons */}
          {[{x:50,y:90},{x:160,y:60},{x:270,y:130},{x:110,y:160}].map((d,i) => (
            <g key={i}>
              <circle cx={d.x} cy={d.y} r="4" fill="#d4a85a" opacity="0.9" />
              <circle cx={d.x} cy={d.y} r="10" stroke="#d4a85a" strokeWidth="0.5" opacity="0.4" />
            </g>
          ))}
          {/* camera cone */}
          <g opacity="0.7">
            <circle cx="230" cy="85" r="3" fill="#d4a85a" />
            <path d="M 230 85 L 200 105 L 200 75 Z" fill="#d4a85a" opacity="0.18" stroke="#d4a85a" strokeWidth="0.5" />
          </g>
        </g>
      )}

      {motif === "av" && (
        <g stroke="#d4a85a" fill="none">
          {/* display */}
          <rect x="90" y="55" width="140" height="80" strokeWidth="1.2" opacity="0.7" />
          <rect x="98" y="63" width="124" height="64" strokeWidth="0.5" opacity="0.4" fill="#e9c578" fillOpacity="0.06" />
          <line x1="155" y1="135" x2="165" y2="135" strokeWidth="1" />
          <line x1="140" y1="148" x2="180" y2="148" strokeWidth="1" />
          {/* table */}
          <ellipse cx="160" cy="170" rx="80" ry="14" strokeWidth="0.8" opacity="0.55" />
          {/* mic pucks */}
          {[120, 160, 200].map((x) => (
            <g key={x}>
              <circle cx={x} cy="168" r="4" fill="#d4a85a" opacity="0.85" />
              <circle cx={x} cy="168" r="8" stroke="#d4a85a" strokeWidth="0.4" opacity="0.4" />
            </g>
          ))}
        </g>
      )}

      {motif === "web" && (
        <g stroke="#d4a85a" fill="none">
          {/* browser frame */}
          <rect x="50" y="50" width="220" height="120" strokeWidth="1" opacity="0.7" />
          <line x1="50" y1="68" x2="270" y2="68" strokeWidth="0.6" opacity="0.55" />
          {[60, 70, 80].map((x) => (
            <circle key={x} cx={x} cy="59" r="2.5" stroke="#d4a85a" strokeWidth="0.4" opacity="0.55" />
          ))}
          {/* content lines */}
          <rect x="66" y="84" width="80" height="6" fill="#d4a85a" fillOpacity="0.35" strokeWidth="0" />
          <rect x="66" y="98" width="160" height="3" fill="#d4a85a" fillOpacity="0.2" strokeWidth="0" />
          <rect x="66" y="106" width="140" height="3" fill="#d4a85a" fillOpacity="0.2" strokeWidth="0" />
          <rect x="66" y="114" width="120" height="3" fill="#d4a85a" fillOpacity="0.2" strokeWidth="0" />
          <rect x="66" y="134" width="50" height="18" stroke="#d4a85a" strokeWidth="0.6" opacity="0.65" />
          <rect x="124" y="134" width="50" height="18" stroke="#d4a85a" strokeWidth="0.6" opacity="0.4" />
        </g>
      )}

      {motif === "fleet" && (
        <g stroke="#d4a85a" fill="none">
          {/* map background — abstract street grid */}
          <g opacity="0.35">
            <path d="M 40 60 L 280 60" strokeWidth="0.4" />
            <path d="M 40 96 L 280 96" strokeWidth="0.4" />
            <path d="M 40 132 L 280 132" strokeWidth="0.4" />
            <path d="M 40 168 L 280 168" strokeWidth="0.4" />
            <path d="M 80 40 L 80 180" strokeWidth="0.4" />
            <path d="M 140 40 L 140 180" strokeWidth="0.4" />
            <path d="M 210 40 L 210 180" strokeWidth="0.4" />
            <path d="M 260 40 L 260 180" strokeWidth="0.4" />
          </g>

          {/* curving route */}
          <path d="M 60 150 Q 110 140, 130 110 T 200 80 Q 230 70, 260 60" stroke="#d4a85a" strokeWidth="1.2" fill="none" strokeDasharray="4 3" opacity="0.85" />

          {/* geofenced job site */}
          <g opacity="0.7">
            <circle cx="200" cy="80" r="22" stroke="#d4a85a" strokeWidth="0.5" strokeDasharray="2 3" fill="#d4a85a" fillOpacity="0.06" />
            <circle cx="200" cy="80" r="2.5" fill="#d4a85a" />
            <text x="200" y="62" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.8">JOB SITE</text>
          </g>

          {/* current vehicle pin */}
          <g transform="translate(130 110)">
            <circle r="20" stroke="#e9c578" strokeWidth="0.4" opacity="0.35" />
            <circle r="32" stroke="#e9c578" strokeWidth="0.3" opacity="0.2" strokeDasharray="2 3" />
            <g transform="translate(-12 -8)">
              {/* truck body */}
              <rect width="18" height="10" rx="1.5" fill="#d4a85a" />
              <rect x="18" y="2" width="8" height="8" rx="1" fill="#d4a85a" opacity="0.8" />
              {/* wheels */}
              <circle cx="4" cy="11" r="2" fill="#08112a" stroke="#d4a85a" strokeWidth="0.5" />
              <circle cx="22" cy="11" r="2" fill="#08112a" stroke="#d4a85a" strokeWidth="0.5" />
            </g>
          </g>

          {/* additional fleet vehicles */}
          <g opacity="0.7">
            <circle cx="70" cy="155" r="3" fill="#d4a85a" />
            <circle cx="100" cy="145" r="3" fill="#d4a85a" opacity="0.7" />
            <circle cx="252" cy="62" r="3" fill="#d4a85a" opacity="0.7" />
          </g>

          {/* HQ pin start */}
          <g transform="translate(60 150)" opacity="0.85">
            <path d="M 0 -8 L 4 -4 L 4 4 L -4 4 L -4 -4 Z" fill="#d4a85a" />
            <text x="0" y="14" textAnchor="middle" fill="#d4a85a" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.75">YARD</text>
          </g>

          {/* speedometer chip top-right */}
          <g transform="translate(240 160)" opacity="0.9">
            <rect x="-26" y="-12" width="52" height="22" rx="3" stroke="#d4a85a" strokeWidth="0.5" />
            <text x="-22" y="-2" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.14em" opacity="0.7">SPD</text>
            <text x="-22" y="7" fill="#e9c578" fontSize="9" fontFamily="Newsreader" fontStyle="italic">62 mph</text>
          </g>
        </g>
      )}

      {motif === "dash" && (
        <g stroke="#d4a85a" fill="none">
          {/* dashboard frame */}
          <rect x="40" y="34" width="240" height="132" rx="3" strokeWidth="1.1" opacity="0.7" />
          <line x1="40" y1="50" x2="280" y2="50" strokeWidth="0.5" opacity="0.5" />
          {[48, 56, 64].map((x) => (
            <circle key={x} cx={x} cy="42" r="1.6" stroke="#d4a85a" strokeWidth="0.4" opacity="0.55" />
          ))}

          {/* big KPI card top-left */}
          <g transform="translate(54 60)" opacity="0.9">
            <rect width="80" height="44" strokeWidth="0.6" opacity="0.7" />
            <line x1="6" y1="8" x2="36" y2="8" strokeWidth="0.4" opacity="0.55" />
            <text x="6" y="28" fill="#e9c578" fontSize="14" fontFamily="Newsreader" fontStyle="italic">$1.24M</text>
            <text x="6" y="38" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.15em" opacity="0.7">REVENUE · MTD</text>
          </g>

          {/* line chart top-right */}
          <g transform="translate(146 60)" opacity="0.9">
            <rect width="124" height="44" strokeWidth="0.6" opacity="0.7" />
            <polyline points="6,36 22,28 38,32 56,18 74,22 92,10 116,14" stroke="#d4a85a" strokeWidth="1" fill="none" />
            <polyline points="6,36 22,28 38,32 56,18 74,22 92,10 116,14 116,40 6,40" fill="#d4a85a" fillOpacity="0.12" stroke="none" />
            {[6, 22, 38, 56, 74, 92, 116].map((x) => (
              <circle key={x} cx={x} cy={[36,28,32,18,22,10,14][[6,22,38,56,74,92,116].indexOf(x)]} r="1" fill="#e9c578" />
            ))}
          </g>

          {/* small donut bottom-left */}
          <g transform="translate(80 138)" opacity="0.9">
            <circle r="14" strokeWidth="3" stroke="#d4a85a" opacity="0.35" fill="none" />
            <path d="M 0 -14 A 14 14 0 0 1 13.3 4.3" strokeWidth="3" stroke="#e9c578" fill="none" />
            <text x="0" y="3" textAnchor="middle" fill="#e9c578" fontSize="8" fontFamily="Newsreader" fontStyle="italic">72%</text>
          </g>

          {/* progress bars middle */}
          <g transform="translate(120 124)" opacity="0.85">
            {[
              { l: 90, v: 70 },
              { l: 90, v: 42 },
              { l: 90, v: 56 },
            ].map((b, i) => (
              <g key={i} transform={`translate(0 ${i * 10})`}>
                <rect width={b.l} height="4" strokeWidth="0.4" opacity="0.55" />
                <rect width={b.v} height="4" fill="#d4a85a" opacity="0.85" />
              </g>
            ))}
          </g>

          {/* bar chart bottom-right */}
          <g transform="translate(220 124)" opacity="0.9">
            {[
              { x: 0,  h: 14 },
              { x: 8,  h: 22 },
              { x: 16, h: 10 },
              { x: 24, h: 28 },
              { x: 32, h: 18 },
              { x: 40, h: 24 },
            ].map((b, i) => (
              <rect key={i} x={b.x} y={32 - b.h} width="5" height={b.h} fill="#d4a85a" opacity={0.45 + i * 0.08} />
            ))}
            <line x1="0" y1="32" x2="48" y2="32" strokeWidth="0.4" opacity="0.6" />
          </g>
        </g>
      )}

      {motif === "email" && (
        <g stroke="#d4a85a" fill="none">
          {/* source envelope (left) */}
          <g transform="translate(60 80)" opacity="0.85">
            <rect width="76" height="50" rx="2" strokeWidth="1.1" />
            <path d="M 0 0 L 38 32 L 76 0" strokeWidth="0.8" opacity="0.7" />
            <text x="38" y="62" textAnchor="middle" fill="#d4a85a" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">FROM</text>
          </g>

          {/* destination envelope (right) — slightly larger & filled */}
          <g transform="translate(184 70)" opacity="0.95">
            <rect width="76" height="50" rx="2" strokeWidth="1.2" fill="#d4a85a" fillOpacity="0.1" />
            <path d="M 0 0 L 38 32 L 76 0" strokeWidth="0.9" />
            <text x="38" y="62" textAnchor="middle" fill="#e9c578" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.85">TO</text>
          </g>

          {/* migration arrow */}
          <g opacity="0.9">
            <path d="M 140 100 L 180 95" strokeWidth="1.2" />
            <path d="M 173 90 L 180 95 L 173 100" strokeWidth="1.2" />
          </g>

          {/* small envelopes flowing across the path */}
          <g opacity="0.7">
            <rect x="146" y="83" width="8" height="6" strokeWidth="0.4" />
            <path d="M 146 83 L 150 87 L 154 83" strokeWidth="0.3" />
            <rect x="158" y="106" width="6" height="4.5" strokeWidth="0.4" opacity="0.7" />
            <rect x="166" y="78" width="7" height="5" strokeWidth="0.4" opacity="0.6" />
          </g>

          {/* platform tags above each envelope */}
          <g fontFamily="IBM Plex Mono" fontSize="6.5" letterSpacing="0.16em" opacity="0.75">
            <text x="98" y="68" textAnchor="middle" fill="#d4a85a">GOOGLE</text>
            <text x="222" y="58" textAnchor="middle" fill="#e9c578">M365</text>
          </g>

          {/* secondary platform chips, hovering — variety */}
          <g fontFamily="IBM Plex Mono" fontSize="6" letterSpacing="0.14em" opacity="0.55">
            <g transform="translate(40 36)">
              <rect width="44" height="12" rx="2" strokeWidth="0.4" />
              <text x="22" y="8" textAnchor="middle" fill="#d4a85a">GODADDY</text>
            </g>
            <g transform="translate(96 26)">
              <rect width="40" height="12" rx="2" strokeWidth="0.4" />
              <text x="20" y="8" textAnchor="middle" fill="#d4a85a">ICLOUD</text>
            </g>
            <g transform="translate(150 36)">
              <rect width="56" height="12" rx="2" strokeWidth="0.4" />
              <text x="28" y="8" textAnchor="middle" fill="#d4a85a">EXCHANGE</text>
            </g>
            <g transform="translate(216 22)">
              <rect width="56" height="12" rx="2" strokeWidth="0.4" />
              <text x="28" y="8" textAnchor="middle" fill="#d4a85a">WORKSPACE</text>
            </g>
          </g>

          {/* status check */}
          <g transform="translate(245 140)" opacity="0.9">
            <circle r="7" stroke="#d4a85a" strokeWidth="0.6" />
            <path d="M -3 0 L -1 2 L 3 -2" strokeWidth="1" />
          </g>
        </g>
      )}

      {motif === "print" && (
        <g stroke="#d4a85a" fill="none">
          {/* MFP body */}
          <g transform="translate(80 60)" opacity="0.85">
            <rect width="120" height="90" rx="3" strokeWidth="1.2" />
            {/* top scanner glass */}
            <rect x="10" y="8" width="100" height="14" strokeWidth="0.5" fill="#e9c578" fillOpacity="0.12" />
            {/* control panel screen */}
            <rect x="12" y="30" width="44" height="22" strokeWidth="0.6" fill="#e9c578" fillOpacity="0.18" />
            <line x1="18" y1="37" x2="48" y2="37" strokeWidth="0.4" opacity="0.6" />
            <line x1="18" y1="42" x2="42" y2="42" strokeWidth="0.4" opacity="0.5" />
            <line x1="18" y1="47" x2="36" y2="47" strokeWidth="0.4" opacity="0.5" />
            {/* control buttons */}
            <g opacity="0.7">
              <circle cx="68" cy="35" r="2.5" />
              <circle cx="78" cy="35" r="2.5" />
              <circle cx="88" cy="35" r="2.5" />
              <circle cx="98" cy="35" r="2.5" fill="#d4a85a" />
            </g>
            {/* paper trays */}
            <rect x="6" y="58" width="108" height="9" strokeWidth="0.5" />
            <rect x="6" y="70" width="108" height="9" strokeWidth="0.5" opacity="0.7" />
            <line x1="6" y1="82" x2="114" y2="82" strokeWidth="0.4" opacity="0.5" />
          </g>

          {/* page emerging from output tray */}
          <g transform="translate(140 58)" opacity="0.85">
            <rect width="40" height="48" strokeWidth="0.8" fill="#08112a" stroke="#d4a85a" />
            <line x1="6" y1="10" x2="34" y2="10" strokeWidth="0.4" opacity="0.55" />
            <line x1="6" y1="16" x2="30" y2="16" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="22" x2="32" y2="22" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="28" x2="26" y2="28" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="34" x2="32" y2="34" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="40" x2="22" y2="40" strokeWidth="0.4" opacity="0.5" />
          </g>

          {/* badge tap indicator near control panel */}
          <g transform="translate(218 100)" opacity="0.9">
            <rect x="-9" y="-6" width="18" height="12" rx="1.5" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.18" />
            <circle cx="0" cy="0" r="1.2" fill="#d4a85a" />
            <path d="M -3 0 A 3 3 0 0 1 3 0" strokeWidth="0.4" opacity="0.7" />
            <path d="M -6 0 A 6 6 0 0 1 6 0" strokeWidth="0.4" opacity="0.55" />
            <text x="0" y="20" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">TAP</text>
          </g>

          {/* bar chart in upper-right — usage report */}
          <g transform="translate(220 40)" opacity="0.8">
            <line x1="0" y1="0" x2="0" y2="32" strokeWidth="0.5" opacity="0.6" />
            <line x1="0" y1="32" x2="46" y2="32" strokeWidth="0.5" opacity="0.6" />
            {[
              { x: 4, h: 10 },
              { x: 14, h: 22 },
              { x: 24, h: 14 },
              { x: 34, h: 28 },
            ].map((b, i) => (
              <rect key={i} x={b.x} y={32 - b.h} width="6" height={b.h} fill="#d4a85a" opacity={0.5 + i * 0.12} />
            ))}
          </g>
        </g>
      )}

      {motif === "multifamily" && (
        <g stroke="#d4a85a" fill="none">
          {/* apartment building — 5 stories, 4 units wide */}
          <g transform="translate(50 50)" opacity="0.75">
            <rect width="120" height="120" strokeWidth="1" />
            {[0,1,2,3,4].map((row) => (
              <g key={row}>
                {[0,1,2,3].map((col) => (
                  <rect
                    key={col}
                    x={6 + col * 28}
                    y={6 + row * 22}
                    width="22"
                    height="14"
                    strokeWidth="0.4"
                    fill="#e9c578"
                    fillOpacity={((row * 7 + col * 3) % 5 === 0) ? 0.35 : 0.1}
                  />
                ))}
              </g>
            ))}
            {/* entrance band */}
            <rect x="44" y="108" width="32" height="12" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.18" />
          </g>

          {/* MDF / wholesale handoff node */}
          <g transform="translate(225 105)">
            <rect x="-22" y="-18" width="44" height="36" rx="3" strokeWidth="1" opacity="0.85" />
            {[-10, -2, 6].map((y) => (
              <line key={y} x1="-16" y1={y} x2="16" y2={y} strokeWidth="0.4" opacity="0.55" />
            ))}
            <circle cx="-14" cy="-12" r="1.2" fill="#d4a85a" />
            <circle cx="-10" cy="-12" r="1.2" fill="#d4a85a" opacity="0.7" />
            <text x="0" y="28" textAnchor="middle" fill="#d4a85a" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.15em" opacity="0.7">MDF</text>
          </g>

          {/* two redundant uplinks from carriers */}
          <g stroke="#d4a85a" fill="none" opacity="0.75">
            {/* uplink A — solid */}
            <path d="M 225 95 Q 252 70, 280 38" strokeWidth="1" />
            <circle cx="280" cy="38" r="3" fill="#d4a85a" />
            <text x="288" y="40" fill="#e9c578" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.15em">A</text>
            {/* uplink B — dashed alt path */}
            <path d="M 225 115 Q 252 142, 280 168" strokeWidth="1" strokeDasharray="3 3" opacity="0.85" />
            <circle cx="280" cy="168" r="3" fill="#d4a85a" />
            <text x="288" y="170" fill="#e9c578" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.15em">B</text>
          </g>

          {/* trunk from building to MDF */}
          <path d="M 170 110 L 203 105" stroke="#d4a85a" strokeWidth="1.2" opacity="0.8" />
          {/* small data pulse */}
          <circle cx="186" cy="108" r="1.6" fill="#e9c578" opacity="0.9" />
        </g>
      )}

      {motif === "hotel" && (
        <g stroke="#d4a85a" fill="none">
          {/* hotel facade — stacked rooms */}
          <g transform="translate(36 44)" opacity="0.7">
            <rect width="116" height="120" strokeWidth="1" />
            {[0,1,2,3].map((row) => (
              <g key={row}>
                {[0,1,2,3].map((col) => (
                  <rect
                    key={col}
                    x={8 + col * 26}
                    y={10 + row * 28}
                    width="18"
                    height="18"
                    strokeWidth="0.4"
                    fill="#e9c578"
                    fillOpacity={(row + col) % 3 === 0 ? 0.32 : 0.08}
                    opacity="0.85"
                  />
                ))}
              </g>
            ))}
            {/* entrance */}
            <rect x="46" y="100" width="24" height="20" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.15" />
          </g>

          {/* Wi-Fi waves emitting from top right */}
          <g transform="translate(220 60)" opacity="0.85">
            <circle r="2.5" fill="#d4a85a" />
            <path d="M -10 8 Q 0 -4, 10 8" strokeWidth="1" fill="none" />
            <path d="M -18 14 Q 0 -10, 18 14" strokeWidth="0.8" fill="none" opacity="0.7" />
            <path d="M -26 20 Q 0 -16, 26 20" strokeWidth="0.6" fill="none" opacity="0.45" />
          </g>

          {/* business center workstation */}
          <g transform="translate(200 122)" opacity="0.85">
            {/* monitor */}
            <rect x="-22" y="-22" width="44" height="28" rx="1" strokeWidth="1" />
            <rect x="-18" y="-18" width="36" height="20" strokeWidth="0.3" fill="#e9c578" fillOpacity="0.1" />
            <line x1="-14" y1="-13" x2="2" y2="-13" strokeWidth="0.4" opacity="0.6" />
            <line x1="-14" y1="-9" x2="10" y2="-9" strokeWidth="0.4" opacity="0.5" />
            <line x1="-14" y1="-5" x2="6" y2="-5" strokeWidth="0.4" opacity="0.5" />
            {/* stand */}
            <path d="M -3 6 L -3 14 L 3 14 L 3 6" strokeWidth="0.6" />
            <line x1="-12" y1="14" x2="12" y2="14" strokeWidth="0.6" />
            {/* keyboard */}
            <rect x="-22" y="22" width="44" height="6" strokeWidth="0.5" />
          </g>

          {/* corner ticks already drawn outside */}
          {/* connecting line from Wi-Fi to building */}
          <path d="M 220 66 Q 180 90, 144 78" strokeWidth="0.4" opacity="0.4" strokeDasharray="2 3" />
        </g>
      )}

      {motif === "sensors" && (
        <g stroke="#d4a85a" fill="none">
          {/* floor plan */}
          <rect x="40" y="40" width="240" height="130" strokeWidth="1" opacity="0.55" />
          <line x1="140" y1="40" x2="140" y2="120" strokeWidth="0.6" opacity="0.45" />
          <line x1="140" y1="120" x2="280" y2="120" strokeWidth="0.6" opacity="0.45" />
          <line x1="200" y1="40" x2="200" y2="120" strokeWidth="0.6" opacity="0.45" />
          {/* doorway gaps */}
          <line x1="140" y1="78" x2="140" y2="92" stroke="#08112a" strokeWidth="1.5" />
          <line x1="200" y1="78" x2="200" y2="92" stroke="#08112a" strokeWidth="1.5" />

          {/* leak/water sensor — droplet */}
          <g transform="translate(78 88)">
            <path d="M 0 -10 Q 7 -2, 7 4 A 7 7 0 0 1 -7 4 Q -7 -2, 0 -10 Z" fill="#d4a85a" opacity="0.85" />
            <circle r="14" stroke="#d4a85a" strokeWidth="0.4" opacity="0.4" />
            <circle r="20" stroke="#d4a85a" strokeWidth="0.3" opacity="0.22" strokeDasharray="2 3" />
          </g>
          {/* temp sensor — thermometer */}
          <g transform="translate(170 80)">
            <rect x="-2" y="-12" width="4" height="14" rx="2" fill="#d4a85a" opacity="0.85" />
            <circle cy="4" r="4" fill="#d4a85a" opacity="0.95" />
            <circle r="14" stroke="#d4a85a" strokeWidth="0.4" opacity="0.4" />
            <circle r="20" stroke="#d4a85a" strokeWidth="0.3" opacity="0.22" strokeDasharray="2 3" />
          </g>
          {/* motion sensor — radiating cone */}
          <g transform="translate(240 82)">
            <circle r="4" fill="#d4a85a" opacity="0.95" />
            <path d="M 0 0 L 26 -14 A 30 30 0 0 1 26 14 Z" fill="#d4a85a" fillOpacity="0.1" stroke="#d4a85a" strokeWidth="0.5" opacity="0.7" />
            <path d="M 0 0 L 14 -7 A 16 16 0 0 1 14 7 Z" stroke="#d4a85a" strokeWidth="0.35" opacity="0.4" fill="none" />
          </g>

          {/* secondary sensor dot */}
          <circle cx="100" cy="148" r="2.5" fill="#d4a85a" opacity="0.7" />
          <circle cx="100" cy="148" r="7" stroke="#d4a85a" strokeWidth="0.3" opacity="0.4" />

          {/* alert pulse indicator at top-right corner */}
          <g transform="translate(266 54)">
            <circle r="3" fill="#e9c578" />
            <circle r="6" stroke="#e9c578" strokeWidth="0.4" opacity="0.5" />
            <circle r="10" stroke="#e9c578" strokeWidth="0.3" opacity="0.25" />
          </g>

          {/* connection lines from sensors to corner hub */}
          <g stroke="#d4a85a" strokeWidth="0.3" opacity="0.35" strokeDasharray="1.5 3">
            <line x1="78" y1="88" x2="266" y2="54" />
            <line x1="170" y1="80" x2="266" y2="54" />
            <line x1="240" y1="82" x2="266" y2="54" />
            <line x1="100" y1="148" x2="266" y2="54" />
          </g>
        </g>
      )}

      {motif === "wireless" && (
        <g stroke="#d4a85a" fill="none">
          {/* horizon line */}
          <line x1="20" y1="160" x2="300" y2="160" strokeWidth="0.6" opacity="0.4" strokeDasharray="2 3" />
          {/* satellite arcs */}
          <path d="M 60 30 Q 160 5, 260 30" strokeWidth="0.5" opacity="0.35" strokeDasharray="3 3" />
          <path d="M 30 50 Q 160 -15, 290 50" strokeWidth="0.5" opacity="0.25" strokeDasharray="3 3" />
          {/* satellite */}
          <g opacity="0.85" transform="translate(220 28)">
            <rect x="-6" y="-3" width="12" height="6" fill="#d4a85a" />
            <rect x="-14" y="-1" width="6" height="2" fill="#d4a85a" opacity="0.65" />
            <rect x="8" y="-1" width="6" height="2" fill="#d4a85a" opacity="0.65" />
            <line x1="0" y1="3" x2="0" y2="10" strokeWidth="0.6" />
          </g>
          {/* downlink beam */}
          <path d="M 220 38 L 150 150 L 195 150 Z" fill="#d4a85a" fillOpacity="0.08" stroke="#d4a85a" strokeWidth="0.4" opacity="0.6" />
          {/* dish on roof */}
          <g transform="translate(170 138)">
            <path d="M -16 0 Q 0 -22, 16 0" strokeWidth="1.2" opacity="0.85" />
            <path d="M -12 -2 Q 0 -18, 12 -2" strokeWidth="0.4" opacity="0.5" />
            <circle cx="0" cy="-6" r="1.6" fill="#d4a85a" />
            <line x1="0" y1="0" x2="0" y2="14" strokeWidth="1" opacity="0.7" />
            <line x1="-6" y1="14" x2="6" y2="14" strokeWidth="0.8" opacity="0.7" />
          </g>
          {/* building silhouette */}
          <g opacity="0.55">
            <rect x="110" y="150" width="120" height="10" strokeWidth="0.6" />
            <rect x="125" y="155" width="6" height="5" strokeWidth="0.4" />
            <rect x="140" y="155" width="6" height="5" strokeWidth="0.4" />
            <rect x="200" y="155" width="6" height="5" strokeWidth="0.4" />
            <rect x="215" y="155" width="6" height="5" strokeWidth="0.4" />
          </g>
          {/* signal arcs from dish */}
          <g opacity="0.5">
            <path d="M 170 138 Q 175 132, 180 130" strokeWidth="0.5" />
            <path d="M 170 138 Q 180 126, 188 122" strokeWidth="0.5" />
            <path d="M 170 138 Q 184 120, 196 114" strokeWidth="0.4" opacity="0.55" />
          </g>
        </g>
      )}

      {motif === "pos" && (
        <g stroke="#d4a85a" fill="none">
          {/* counter line */}
          <line x1="30" y1="170" x2="290" y2="170" strokeWidth="0.8" opacity="0.5" />
          {/* tablet POS on stand */}
          <rect x="118" y="60" width="84" height="62" rx="3" strokeWidth="1.2" opacity="0.75" />
          <rect x="124" y="66" width="72" height="50" strokeWidth="0.4" fill="#e9c578" fillOpacity="0.06" opacity="0.6" />
          {/* screen content lines */}
          <rect x="130" y="72" width="30" height="3" fill="#d4a85a" fillOpacity="0.5" strokeWidth="0" />
          <rect x="130" y="80" width="60" height="2" fill="#d4a85a" fillOpacity="0.3" strokeWidth="0" />
          <rect x="130" y="86" width="50" height="2" fill="#d4a85a" fillOpacity="0.3" strokeWidth="0" />
          <rect x="130" y="92" width="55" height="2" fill="#d4a85a" fillOpacity="0.3" strokeWidth="0" />
          <rect x="130" y="104" width="22" height="8" stroke="#d4a85a" strokeWidth="0.5" opacity="0.7" />
          {/* stand */}
          <path d="M 152 122 L 152 145 L 168 145 L 168 122" strokeWidth="0.8" opacity="0.55" />
          <rect x="140" y="145" width="40" height="4" strokeWidth="0.8" opacity="0.6" />
          {/* card reader */}
          <rect x="218" y="118" width="32" height="34" rx="2" strokeWidth="1" opacity="0.7" />
          <rect x="222" y="124" width="24" height="14" strokeWidth="0.4" opacity="0.55" />
          <line x1="222" y1="146" x2="246" y2="146" strokeWidth="0.6" opacity="0.7" />
          {/* receipt printer */}
          <rect x="70" y="124" width="36" height="28" rx="2" strokeWidth="1" opacity="0.7" />
          <line x1="76" y1="134" x2="100" y2="134" strokeWidth="0.5" opacity="0.5" />
          {/* receipt curl */}
          <path d="M 88 124 Q 92 110, 100 108 Q 96 116, 94 124" strokeWidth="0.5" opacity="0.6" />
        </g>
      )}

      {motif === "ai" && (
        <g stroke="#d4a85a" fill="none">
          {/* source document stack (left) — knowledge base */}
          <g transform="translate(38 56)" opacity="0.85">
            {[0, 1, 2].map((i) => (
              <g key={i} transform={`translate(${i * 4} ${i * 4})`} opacity={0.55 + i * 0.15}>
                <rect width="46" height="58" strokeWidth="0.7" fill="#08112a" />
                <line x1="6" y1="10" x2="34" y2="10" strokeWidth="0.4" opacity="0.7" />
                <line x1="6" y1="16" x2="40" y2="16" strokeWidth="0.4" opacity="0.55" />
                <line x1="6" y1="22" x2="32" y2="22" strokeWidth="0.4" opacity="0.55" />
                <line x1="6" y1="28" x2="38" y2="28" strokeWidth="0.4" opacity="0.55" />
                <line x1="6" y1="34" x2="30" y2="34" strokeWidth="0.4" opacity="0.55" />
                <line x1="6" y1="40" x2="36" y2="40" strokeWidth="0.4" opacity="0.55" />
                <line x1="6" y1="46" x2="28" y2="46" strokeWidth="0.4" opacity="0.55" />
              </g>
            ))}
            <text x="28" y="76" textAnchor="middle" fill="#d4a85a" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">KNOWLEDGE</text>
          </g>

          {/* assistant node (center) — hex with brain dot */}
          <g transform="translate(160 100)" opacity="0.95">
            <polygon points="0,-26 22,-13 22,13 0,26 -22,13 -22,-13" stroke="#e9c578" strokeWidth="1" fill="#d4a85a" fillOpacity="0.12" />
            <polygon points="0,-18 16,-9 16,9 0,18 -16,9 -16,-9" stroke="#d4a85a" strokeWidth="0.5" opacity="0.6" />
            {/* inner cluster of nodes */}
            <g fill="#e9c578">
              <circle cx="0" cy="-6" r="1.6" />
              <circle cx="-6" cy="2" r="1.6" />
              <circle cx="6" cy="2" r="1.6" />
              <circle cx="0" cy="8" r="1.6" opacity="0.7" />
            </g>
            <g stroke="#d4a85a" strokeWidth="0.4" opacity="0.7">
              <line x1="0" y1="-6" x2="-6" y2="2" />
              <line x1="0" y1="-6" x2="6" y2="2" />
              <line x1="-6" y1="2" x2="0" y2="8" />
              <line x1="6" y1="2" x2="0" y2="8" />
              <line x1="-6" y1="2" x2="6" y2="2" />
            </g>
            <text x="0" y="42" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.85">ASSISTANT</text>
          </g>

          {/* input flow lines docs → assistant */}
          <g stroke="#d4a85a" strokeWidth="0.5" opacity="0.55" strokeDasharray="2 3" fill="none">
            <path d="M 92 78 Q 122 80, 138 92" />
            <path d="M 92 96 Q 120 100, 138 100" />
            <path d="M 92 114 Q 122 116, 138 108" />
          </g>

          {/* output flow line assistant → result */}
          <g opacity="0.9">
            <path d="M 182 100 L 222 100" stroke="#e9c578" strokeWidth="1.1" fill="none" />
            <path d="M 215 96 L 222 100 L 215 104" stroke="#e9c578" strokeWidth="1.1" fill="none" />
          </g>

          {/* output document (right) — proposal */}
          <g transform="translate(226 56)" opacity="0.95">
            <rect width="56" height="74" strokeWidth="1" fill="#d4a85a" fillOpacity="0.1" />
            {/* logo block */}
            <rect x="6" y="8" width="14" height="6" fill="#d4a85a" opacity="0.85" />
            <text x="24" y="13" fill="#e9c578" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.85">PROPOSAL</text>
            {/* heading + content lines */}
            <rect x="6" y="22" width="36" height="3" fill="#e9c578" fillOpacity="0.7" />
            <line x1="6" y1="32" x2="50" y2="32" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="37" x2="46" y2="37" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="42" x2="50" y2="42" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="47" x2="42" y2="47" strokeWidth="0.4" opacity="0.5" />
            <line x1="6" y1="52" x2="48" y2="52" strokeWidth="0.4" opacity="0.5" />
            {/* line-item table */}
            <line x1="6" y1="60" x2="50" y2="60" strokeWidth="0.4" opacity="0.7" />
            <line x1="6" y1="66" x2="50" y2="66" strokeWidth="0.4" opacity="0.5" />
            <line x1="40" y1="58" x2="40" y2="68" strokeWidth="0.3" opacity="0.5" />
            <text x="28" y="74" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">DRAFT v1</text>
          </g>

          {/* source tag chips floating top */}
          <g fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.14em" opacity="0.5">
            <g transform="translate(86 30)">
              <rect width="44" height="11" rx="2" strokeWidth="0.4" />
              <text x="22" y="7.5" textAnchor="middle" fill="#d4a85a">SHAREPOINT</text>
            </g>
            <g transform="translate(138 22)">
              <rect width="32" height="11" rx="2" strokeWidth="0.4" />
              <text x="16" y="7.5" textAnchor="middle" fill="#d4a85a">DRIVE</text>
            </g>
            <g transform="translate(178 30)">
              <rect width="34" height="11" rx="2" strokeWidth="0.4" />
              <text x="17" y="7.5" textAnchor="middle" fill="#d4a85a">CRM</text>
            </g>
          </g>

          {/* permission/lock indicator */}
          <g transform="translate(160 160)" opacity="0.85">
            <rect x="-6" y="-4" width="12" height="9" rx="1" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.18" />
            <path d="M -3 -4 L -3 -7 A 3 3 0 0 1 3 -7 L 3 -4" strokeWidth="0.6" fill="none" />
            <text x="0" y="18" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.65">SCOPED</text>
          </g>
        </g>
      )}

      {motif === "audio" && (
        <g stroke="#d4a85a" fill="none">
          {/* ceiling grid (drop-ceiling tiles) */}
          <g opacity="0.35">
            {[40, 70, 100, 130, 160].map((y) => (
              <line key={y} x1="20" y1={y} x2="300" y2={y} strokeWidth="0.4" />
            ))}
            {[50, 100, 150, 200, 250].map((x) => (
              <line key={x} x1={x} y1="30" x2={x} y2="170" strokeWidth="0.4" />
            ))}
          </g>

          {/* speaker 1 — zone A (lobby) */}
          <g transform="translate(80 80)">
            <circle r="12" stroke="#d4a85a" strokeWidth="1" opacity="0.85" fill="#d4a85a" fillOpacity="0.12" />
            <circle r="6" stroke="#d4a85a" strokeWidth="0.6" opacity="0.7" />
            <circle r="2" fill="#d4a85a" opacity="0.95" />
            {/* sound waves */}
            <g stroke="#e9c578" strokeWidth="0.5" opacity="0.7" fill="none">
              <path d="M -20 0 A 20 20 0 0 1 20 0" />
              <path d="M -30 0 A 30 30 0 0 1 30 0" opacity="0.55" />
              <path d="M -40 0 A 40 40 0 0 1 40 0" opacity="0.35" strokeDasharray="2 3" />
            </g>
            <text x="0" y="-32" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.75">ZONE A</text>
          </g>

          {/* speaker 2 — zone B (warehouse) — paging active */}
          <g transform="translate(220 110)">
            <circle r="12" stroke="#e9c578" strokeWidth="1.1" opacity="0.95" fill="#d4a85a" fillOpacity="0.2" />
            <circle r="6" stroke="#e9c578" strokeWidth="0.7" opacity="0.8" />
            <circle r="2" fill="#e9c578" opacity="1" />
            {/* louder sound waves */}
            <g stroke="#e9c578" strokeWidth="0.7" opacity="0.85" fill="none">
              <path d="M -22 0 A 22 22 0 0 1 22 0" />
              <path d="M -34 0 A 34 34 0 0 1 34 0" opacity="0.65" />
              <path d="M -46 0 A 46 46 0 0 1 46 0" opacity="0.45" strokeDasharray="2 3" />
            </g>
            <text x="0" y="-32" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.85">ZONE B</text>
          </g>

          {/* speaker 3 — zone C (small, quiet) */}
          <g transform="translate(150 150)" opacity="0.8">
            <circle r="10" stroke="#d4a85a" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.08" />
            <circle r="5" stroke="#d4a85a" strokeWidth="0.5" opacity="0.6" />
            <circle r="1.6" fill="#d4a85a" opacity="0.9" />
            <text x="0" y="-18" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">ZONE C</text>
          </g>

          {/* desk phone bottom-left initiating page */}
          <g transform="translate(50 152)" opacity="0.9">
            {/* base */}
            <rect x="-18" y="-2" width="36" height="14" rx="1.5" strokeWidth="0.9" fill="#08112a" stroke="#d4a85a" />
            {/* handset */}
            <path d="M -16 -6 Q -12 -12, -6 -10 L 14 -2 Q 18 0, 14 4 L -2 -2 Q -8 -4, -12 -4 Z" strokeWidth="0.9" fill="#d4a85a" fillOpacity="0.25" />
            {/* keypad dots */}
            <g fill="#d4a85a" opacity="0.7">
              <circle cx="-10" cy="4" r="0.9" />
              <circle cx="-4" cy="4" r="0.9" />
              <circle cx="2" cy="4" r="0.9" />
              <circle cx="8" cy="4" r="0.9" />
              <circle cx="-10" cy="9" r="0.9" />
              <circle cx="-4" cy="9" r="0.9" />
              <circle cx="2" cy="9" r="0.9" />
              <circle cx="8" cy="9" r="0.9" />
            </g>
            <text x="0" y="22" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">PAGE</text>
          </g>

          {/* signal line from phone to active speaker */}
          <path d="M 60 144 Q 130 116, 208 110" stroke="#e9c578" strokeWidth="0.6" opacity="0.55" strokeDasharray="2 3" fill="none" />

          {/* music note chip top-right */}
          <g transform="translate(265 44)" opacity="0.85">
            <circle cx="-3" cy="2" r="2.4" fill="#d4a85a" />
            <line x1="-1" y1="2" x2="-1" y2="-8" strokeWidth="0.8" />
            <line x1="-1" y1="-8" x2="6" y2="-10" strokeWidth="0.8" />
            <circle cx="4" cy="0" r="2.4" fill="#d4a85a" opacity="0.85" />
            <line x1="6" y1="0" x2="6" y2="-10" strokeWidth="0.8" />
          </g>
        </g>
      )}

      {motif === "recovery" && (
        <g stroke="#d4a85a" fill="none">
          {/* HDD chassis */}
          <g transform="translate(60 56)" opacity="0.9">
            <rect width="148" height="100" rx="3" strokeWidth="1.2" />
            {/* mounting holes */}
            <g fill="#d4a85a" opacity="0.5">
              <circle cx="6" cy="6" r="1.2" />
              <circle cx="142" cy="6" r="1.2" />
              <circle cx="6" cy="94" r="1.2" />
              <circle cx="142" cy="94" r="1.2" />
            </g>

            {/* platter */}
            <g transform="translate(58 50)">
              <circle r="42" strokeWidth="1" fill="#d4a85a" fillOpacity="0.08" />
              <circle r="34" strokeWidth="0.4" opacity="0.45" />
              <circle r="26" strokeWidth="0.4" opacity="0.4" />
              <circle r="18" strokeWidth="0.4" opacity="0.35" />
              <circle r="10" strokeWidth="0.4" opacity="0.3" />
              <circle r="6" fill="#d4a85a" opacity="0.85" />
              <circle r="2" fill="#08112a" />

              {/* recovered sector arc */}
              <path d="M 0 -42 A 42 42 0 0 1 36.4 21" stroke="#e9c578" strokeWidth="1.5" fill="none" opacity="0.95" />
              {/* damaged/missing sector arc — dashed */}
              <path d="M 36.4 21 A 42 42 0 0 1 -21 36.4" stroke="#d4a85a" strokeWidth="0.6" strokeDasharray="2 3" fill="none" opacity="0.55" />
            </g>

            {/* head actuator arm */}
            <g transform="translate(118 50)" opacity="0.85">
              <circle r="5" strokeWidth="0.8" fill="#08112a" stroke="#d4a85a" />
              <circle r="1.5" fill="#d4a85a" />
              <path d="M -2 -2 L -52 -10 L -54 -8 L -4 0 Z" fill="#d4a85a" fillOpacity="0.55" stroke="#d4a85a" strokeWidth="0.5" />
              {/* head tip */}
              <circle cx="-54" cy="-9" r="1.4" fill="#e9c578" />
            </g>

            {/* PCB connector strip */}
            <rect x="8" y="92" width="24" height="3" fill="#d4a85a" opacity="0.4" />
          </g>

          {/* recovered data card (right) — file list */}
          <g transform="translate(220 50)" opacity="0.95">
            <rect width="68" height="110" rx="2" strokeWidth="0.9" fill="#d4a85a" fillOpacity="0.08" />
            {/* header */}
            <line x1="0" y1="14" x2="68" y2="14" strokeWidth="0.4" opacity="0.5" />
            <text x="34" y="10" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.95">RECOVERED</text>

            {/* file rows */}
            {[20, 32, 44, 56, 68, 80, 92].map((y, i) => (
              <g key={y}>
                {/* check */}
                <g transform={`translate(7 ${y + 2})`} opacity={i === 4 ? 0.35 : 0.95}>
                  <circle r="2.6" stroke="#e9c578" strokeWidth="0.5" />
                  {i !== 4 && <path d="M -1.4 0 L -0.4 1 L 1.4 -0.8" stroke="#e9c578" strokeWidth="0.7" />}
                  {i === 4 && <line x1="-1.2" y1="-1.2" x2="1.2" y2="1.2" stroke="#d4a85a" strokeWidth="0.5" opacity="0.7" />}
                </g>
                <rect x="14" y={y} width={[36, 30, 42, 28, 24, 38, 32][i]} height="2.5" fill="#d4a85a" fillOpacity={i === 4 ? 0.25 : 0.6} />
                <rect x="14" y={y + 4} width={[20, 18, 26, 16, 14, 22, 20][i]} height="1.5" fill="#d4a85a" fillOpacity={i === 4 ? 0.18 : 0.4} />
              </g>
            ))}
          </g>

          {/* arrow drive → recovered */}
          <g opacity="0.9">
            <path d="M 208 100 L 220 100" stroke="#e9c578" strokeWidth="1.1" fill="none" />
            <path d="M 215 96 L 220 100 L 215 104" stroke="#e9c578" strokeWidth="1.1" fill="none" />
          </g>

          {/* media-format chips along the top */}
          <g fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.14em" opacity="0.55">
            <g transform="translate(56 28)">
              <rect width="30" height="11" rx="2" strokeWidth="0.4" />
              <text x="15" y="7.5" textAnchor="middle" fill="#d4a85a">HDD</text>
            </g>
            <g transform="translate(92 28)">
              <rect width="30" height="11" rx="2" strokeWidth="0.4" />
              <text x="15" y="7.5" textAnchor="middle" fill="#d4a85a">SSD</text>
            </g>
            <g transform="translate(128 28)">
              <rect width="36" height="11" rx="2" strokeWidth="0.4" />
              <text x="18" y="7.5" textAnchor="middle" fill="#d4a85a">NVMe</text>
            </g>
            <g transform="translate(170 28)">
              <rect width="34" height="11" rx="2" strokeWidth="0.4" />
              <text x="17" y="7.5" textAnchor="middle" fill="#d4a85a">RAID</text>
            </g>
          </g>

          {/* small thumb drive + SD card icons bottom-left */}
          <g opacity="0.75">
            {/* thumb drive */}
            <g transform="translate(46 168)">
              <rect x="0" y="-3" width="20" height="6" rx="1" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.18" />
              <rect x="-6" y="-2" width="6" height="4" strokeWidth="0.5" fill="#d4a85a" opacity="0.85" />
              <line x1="-4" y1="-2" x2="-4" y2="2" strokeWidth="0.3" stroke="#08112a" />
              <line x1="-2" y1="-2" x2="-2" y2="2" strokeWidth="0.3" stroke="#08112a" />
            </g>
            {/* SD card */}
            <g transform="translate(82 162)">
              <path d="M 0 0 L 14 0 L 14 14 L 0 14 L 0 4 L 4 0 Z" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.18" />
              <line x1="3" y1="3" x2="3" y2="6" strokeWidth="0.4" />
              <line x1="6" y1="3" x2="6" y2="6" strokeWidth="0.4" />
              <line x1="9" y1="3" x2="9" y2="6" strokeWidth="0.4" />
            </g>
          </g>

          {/* clean-room / forensics tag */}
          <g transform="translate(248 168)" opacity="0.85">
            <rect x="-30" y="-7" width="60" height="14" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.1" />
            <text x="0" y="2.5" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.2em">CLEAN ROOM</text>
          </g>
        </g>
      )}

      {motif === "vdi" && (
        <g stroke="#d4a85a" fill="none">
          {/* central server stack (datacenter host) */}
          <g transform="translate(160 100)" opacity="0.95">
            {/* rack outline */}
            <rect x="-26" y="-44" width="52" height="88" rx="2" strokeWidth="1.1" fill="#08112a" />
            {/* server units */}
            {[-36, -24, -12, 0, 12, 24, 32].map((y, i) => (
              <g key={y}>
                <rect x="-22" y={y} width="44" height="8" strokeWidth="0.5" fill="#d4a85a" fillOpacity={i === 2 ? 0.28 : 0.12} />
                {/* led */}
                <circle cx="-17" cy={y + 4} r="0.9" fill="#e9c578" opacity={i === 2 ? 1 : 0.55} />
                <circle cx="-13" cy={y + 4} r="0.9" fill="#d4a85a" opacity="0.55" />
                {/* vents */}
                <line x1="-2" y1={y + 2} x2="18" y2={y + 2} strokeWidth="0.3" opacity="0.5" />
                <line x1="-2" y1={y + 5} x2="18" y2={y + 5} strokeWidth="0.3" opacity="0.5" />
              </g>
            ))}
            {/* host label */}
            <text x="0" y="58" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.95">HOST POOL</text>
          </g>

          {/* connection lines from rack out to four endpoints */}
          <g stroke="#d4a85a" strokeWidth="0.55" opacity="0.6" strokeDasharray="2 3" fill="none">
            <path d="M 134 80 Q 100 70, 64 56" />
            <path d="M 134 120 Q 100 134, 60 152" />
            <path d="M 186 80 Q 220 70, 258 54" />
            <path d="M 186 120 Q 220 134, 262 150" />
          </g>

          {/* endpoint 1 — laptop (top-left) */}
          <g transform="translate(48 46)" opacity="0.95">
            <rect x="-16" y="-9" width="32" height="20" rx="1" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.1" />
            <rect x="-13" y="-6" width="26" height="14" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.25" />
            <path d="M -19 12 L 19 12 L 16 16 L -16 16 Z" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.18" />
            {/* mini desktop content */}
            <g opacity="0.7">
              <rect x="-11" y="-4" width="6" height="6" fill="#e9c578" opacity="0.55" />
              <line x1="-3" y1="-3" x2="11" y2="-3" strokeWidth="0.3" />
              <line x1="-3" y1="-1" x2="9" y2="-1" strokeWidth="0.3" />
              <line x1="-3" y1="1" x2="11" y2="1" strokeWidth="0.3" />
              <line x1="-11" y1="4" x2="11" y2="4" strokeWidth="0.3" opacity="0.5" />
              <line x1="-11" y1="6" x2="6" y2="6" strokeWidth="0.3" opacity="0.5" />
            </g>
            <text x="0" y="26" textAnchor="middle" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">LAPTOP</text>
          </g>

          {/* endpoint 2 — thin client / desktop (bottom-left) */}
          <g transform="translate(46 154)" opacity="0.95">
            {/* monitor */}
            <rect x="-15" y="-12" width="30" height="18" rx="1" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.1" />
            <rect x="-12" y="-9" width="24" height="12" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.25" />
            {/* stand */}
            <line x1="0" y1="6" x2="0" y2="11" strokeWidth="1" />
            <line x1="-6" y1="11" x2="6" y2="11" strokeWidth="1" />
            {/* thin client box */}
            <rect x="-8" y="13" width="16" height="3" fill="#d4a85a" opacity="0.6" />
            <text x="0" y="24" textAnchor="middle" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">THIN CLIENT</text>
          </g>

          {/* endpoint 3 — tablet (top-right) */}
          <g transform="translate(272 44)" opacity="0.95">
            <rect x="-12" y="-15" width="24" height="30" rx="2" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.1" />
            <rect x="-9.5" y="-12" width="19" height="22" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.25" />
            {/* home indicator */}
            <line x1="-4" y1="13" x2="4" y2="13" strokeWidth="0.6" />
            <g opacity="0.7">
              <rect x="-7.5" y="-10" width="5" height="5" fill="#e9c578" opacity="0.55" />
              <line x1="-1" y1="-8" x2="7" y2="-8" strokeWidth="0.3" />
              <line x1="-1" y1="-6" x2="5" y2="-6" strokeWidth="0.3" />
              <line x1="-7.5" y1="-2" x2="7.5" y2="-2" strokeWidth="0.3" opacity="0.5" />
              <line x1="-7.5" y1="0" x2="5" y2="0" strokeWidth="0.3" opacity="0.5" />
              <line x1="-7.5" y1="2" x2="7.5" y2="2" strokeWidth="0.3" opacity="0.5" />
            </g>
            <text x="0" y="24" textAnchor="middle" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">TABLET</text>
          </g>

          {/* endpoint 4 — phone (bottom-right) */}
          <g transform="translate(272 152)" opacity="0.95">
            <rect x="-7" y="-13" width="14" height="26" rx="2" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.1" />
            <rect x="-5.5" y="-10" width="11" height="18" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.25" />
            <line x1="-2" y1="11" x2="2" y2="11" strokeWidth="0.5" />
            <text x="0" y="22" textAnchor="middle" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">PHONE</text>
          </g>

          {/* cloud over rack */}
          <g transform="translate(160 36)" opacity="0.7">
            <path d="M -22 4 Q -26 4, -26 0 Q -26 -6, -18 -6 Q -16 -12, -6 -12 Q 2 -14, 6 -8 Q 14 -10, 18 -4 Q 24 -4, 24 2 Q 24 6, 18 6 L -18 6 Q -22 6, -22 4 Z" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.1" />
            <text x="0" y="0" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.85">AZURE</text>
          </g>

          {/* identity lock chip bottom-center */}
          <g transform="translate(160 172)" opacity="0.85">
            <rect x="-28" y="-7" width="56" height="14" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.1" />
            <g transform="translate(-18 0)">
              <rect x="-3" y="-2.5" width="6" height="5" rx="0.8" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.4" />
              <path d="M -1.6 -2.5 L -1.6 -4.5 A 1.6 1.6 0 0 1 1.6 -4.5 L 1.6 -2.5" strokeWidth="0.5" fill="none" />
            </g>
            <text x="3" y="2.5" textAnchor="middle" fill="#e9c578" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em">SSO · MFA</text>
          </g>
        </g>
      )}

      {motif === "compliance" && (
        <g stroke="#d4a85a" fill="none">
          {/* shield with checkmark (center-left) */}
          <g transform="translate(80 102)" opacity="0.95">
            <path d="M 0 -44 L 32 -32 L 32 4 Q 32 28, 0 44 Q -32 28, -32 4 L -32 -32 Z" strokeWidth="1.2" fill="#d4a85a" fillOpacity="0.1" />
            <path d="M 0 -34 L 24 -24 L 24 2 Q 24 22, 0 34 Q -24 22, -24 2 L -24 -24 Z" strokeWidth="0.5" opacity="0.55" />
            {/* checkmark */}
            <path d="M -12 0 L -4 10 L 14 -10" stroke="#e9c578" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
            <text x="0" y="60" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.95">CMMC L2</text>
          </g>

          {/* controls grid (right) — 110 cells, some checked */}
          <g transform="translate(150 46)" opacity="0.95">
            <text x="64" y="-2" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.85">110 CONTROLS · 800-171</text>
            {Array.from({ length: 110 }).map((_, i) => {
              const col = i % 11;
              const row = Math.floor(i / 11);
              const x = col * 12;
              const y = row * 10;
              // mark ~75% as compliant
              const ok = (i * 7 + 3) % 10 < 8;
              return (
                <g key={i}>
                  <rect x={x} y={y + 4} width="10" height="8" rx="1" strokeWidth="0.4" fill={ok ? "#d4a85a" : "#08112a"} fillOpacity={ok ? 0.4 : 1} opacity={ok ? 0.85 : 0.6} />
                  {ok && (
                    <path d={`M ${x + 2.5} ${y + 8} L ${x + 4.5} ${y + 10} L ${x + 7.5} ${y + 6.5}`} stroke="#e9c578" strokeWidth="0.7" fill="none" />
                  )}
                </g>
              );
            })}
            {/* legend */}
            <g transform="translate(0 110)" fontFamily="IBM Plex Mono" fontSize="5" letterSpacing="0.15em" opacity="0.7">
              <rect x="0" y="0" width="6" height="6" rx="0.8" fill="#d4a85a" fillOpacity="0.4" stroke="#d4a85a" strokeWidth="0.4" />
              <text x="10" y="5" fill="#d4a85a">COMPLIANT</text>
              <rect x="62" y="0" width="6" height="6" rx="0.8" stroke="#d4a85a" strokeWidth="0.4" fill="none" />
              <text x="72" y="5" fill="#d4a85a">POA&amp;M</text>
            </g>
          </g>

          {/* CUI tag chip */}
          <g transform="translate(48 34)" opacity="0.85">
            <rect width="46" height="14" rx="2" strokeWidth="0.7" fill="#d4a85a" fillOpacity="0.15" />
            <text x="23" y="9" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em">CUI</text>
          </g>

          {/* GCC High chip */}
          <g transform="translate(98 34)" opacity="0.8">
            <rect width="50" height="14" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.08" />
            <text x="25" y="9" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.18em">GCC HIGH</text>
          </g>

          {/* DFARS / NIST 800-171 bottom-left stamp */}
          <g transform="translate(48 168)" opacity="0.75">
            <rect width="64" height="14" rx="1" strokeWidth="0.5" />
            <text x="32" y="9" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.16em">DFARS 252.204</text>
          </g>
        </g>
      )}

      {motif === "gcc" && (
        <g stroke="#d4a85a" fill="none">
          {/* commercial cloud (left) */}
          <g transform="translate(72 80)" opacity="0.85">
            <path d="M -36 8 Q -42 8, -42 2 Q -42 -8, -30 -8 Q -28 -16, -16 -16 Q -8 -20, -2 -12 Q 8 -16, 14 -8 Q 26 -8, 26 0 Q 26 8, 18 8 L -30 8 Q -36 10, -36 8 Z" strokeWidth="1" fill="#d4a85a" fillOpacity="0.08" />
            <text x="-8" y="-4" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.9">M365</text>
            <text x="-8" y="4" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.65">COMMERCIAL</text>
            {/* small data icons inside */}
            <g transform="translate(-26 -2)" opacity="0.7">
              <rect width="6" height="7" strokeWidth="0.4" />
              <line x1="1" y1="2" x2="5" y2="2" strokeWidth="0.3" />
              <line x1="1" y1="4" x2="4" y2="4" strokeWidth="0.3" />
            </g>
            <text x="0" y="26" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.55">SHARED · GLOBAL</text>
          </g>

          {/* gov cloud (right) — bolder, with lock + star */}
          <g transform="translate(248 80)" opacity="0.95">
            <path d="M -40 8 Q -46 8, -46 2 Q -46 -10, -32 -10 Q -30 -18, -16 -18 Q -8 -22, 0 -14 Q 10 -18, 18 -10 Q 30 -10, 30 0 Q 30 8, 22 8 L -32 8 Q -40 10, -40 8 Z" strokeWidth="1.3" stroke="#e9c578" fill="#d4a85a" fillOpacity="0.18" />
            <text x="-6" y="-5" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="1">GCC HIGH</text>
            {/* lock */}
            <g transform="translate(-30 -2)">
              <rect x="-3" y="-2" width="6" height="5" rx="0.8" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.5" />
              <path d="M -1.6 -2 L -1.6 -4 A 1.6 1.6 0 0 1 1.6 -4 L 1.6 -2" strokeWidth="0.5" fill="none" />
            </g>
            {/* star */}
            <g transform="translate(20 -2)" fill="#e9c578" opacity="0.95">
              <polygon points="0,-3 0.9,-0.9 3,-0.9 1.3,0.6 2,3 0,1.5 -2,3 -1.3,0.6 -3,-0.9 -0.9,-0.9" />
            </g>
            <text x="-6" y="4" textAnchor="middle" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.75">US-ONLY · FEDRAMP HIGH</text>
            <text x="0" y="26" textAnchor="middle" fill="#e9c578" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.85">SCREENED US-PERSON</text>
          </g>

          {/* migration arrow */}
          <g opacity="0.95">
            <path d="M 110 80 L 200 80" stroke="#e9c578" strokeWidth="1.4" fill="none" />
            <path d="M 192 74 L 200 80 L 192 86" stroke="#e9c578" strokeWidth="1.4" fill="none" />
            <text x="155" y="74" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.95">MIGRATE</text>
          </g>

          {/* boundary divider */}
          <g opacity="0.55">
            <line x1="155" y1="38" x2="155" y2="48" stroke="#d4a85a" strokeWidth="0.4" strokeDasharray="2 2" />
            <line x1="155" y1="108" x2="155" y2="170" stroke="#d4a85a" strokeWidth="0.4" strokeDasharray="2 2" />
            <text x="155" y="36" textAnchor="middle" fill="#d4a85a" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.7">BOUNDARY</text>
          </g>

          {/* workload row at bottom — what gets moved */}
          <g transform="translate(0 144)" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.14em" opacity="0.85">
            {[
              { x: 28, label: "MAIL" },
              { x: 76, label: "FILES" },
              { x: 124, label: "TEAMS" },
              { x: 172, label: "ENTRA" },
              { x: 220, label: "INTUNE" },
              { x: 270, label: "APPS" },
            ].map((w) => (
              <g key={w.label} transform={`translate(${w.x} 0)`}>
                <rect x="-18" y="0" width="36" height="14" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.08" />
                <text x="0" y="9" textAnchor="middle" fill="#d4a85a">{w.label}</text>
              </g>
            ))}
            {/* mini ticks below to show progress */}
            <g transform="translate(28 18)">
              {[0, 48, 96, 144, 192, 242].map((x, i) => (
                <g key={x}>
                  <line x1={x - 14} y1="0" x2={x + 14} y2="0" strokeWidth="0.6" stroke="#d4a85a" opacity="0.4" />
                  <line x1={x - 14} y1="0" x2={x - 14 + (i < 4 ? 28 : i === 4 ? 18 : 8)} y2="0" strokeWidth="1.3" stroke="#e9c578" opacity="0.9" />
                </g>
              ))}
            </g>
          </g>
        </g>
      )}

      {motif === "hipaa" && (
        <g stroke="#d4a85a" fill="none">
          {/* shield with caduceus */}
          <g transform="translate(110 100)" opacity="0.95">
            <path d="M 0 -50 L 36 -36 L 36 4 Q 36 30, 0 50 Q -36 30, -36 4 L -36 -36 Z" strokeWidth="1.2" fill="#d4a85a" fillOpacity="0.1" />
            <path d="M 0 -40 L 28 -28 L 28 2 Q 28 24, 0 40 Q -28 24, -28 2 L -28 -28 Z" strokeWidth="0.4" opacity="0.55" />
            {/* caduceus staff */}
            <line x1="0" y1="-26" x2="0" y2="26" stroke="#e9c578" strokeWidth="1.5" />
            {/* wings */}
            <path d="M -2 -22 Q -16 -22, -18 -14 Q -10 -16, -2 -14" stroke="#e9c578" strokeWidth="1" fill="none" />
            <path d="M 2 -22 Q 16 -22, 18 -14 Q 10 -16, 2 -14" stroke="#e9c578" strokeWidth="1" fill="none" />
            {/* snakes */}
            <path d="M 0 -18 C -8 -12, 8 -6, 0 0 C -8 6, 8 12, 0 18" stroke="#e9c578" strokeWidth="0.9" fill="none" />
            <path d="M 0 -18 C 8 -12, -8 -6, 0 0 C 8 6, -8 12, 0 18" stroke="#e9c578" strokeWidth="0.9" fill="none" />
            {/* top sphere */}
            <circle cx="0" cy="-28" r="2" fill="#e9c578" />
          </g>

          {/* ePHI workload chips (right) */}
          <g transform="translate(190 50)" fontFamily="IBM Plex Mono" fontSize="6" letterSpacing="0.18em" opacity="0.95">
            <text x="48" y="-2" textAnchor="middle" fill="#d4a85a" opacity="0.85">ePHI WORKLOADS</text>
            {["EHR", "IMAGING", "BILLING", "EMAIL", "BACKUP", "MOBILE"].map((label, i) => (
              <g key={label} transform={`translate(0 ${i * 16})`}>
                <rect x="0" y="0" width="96" height="12" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.08" />
                {/* lock icon */}
                <g transform="translate(8 6)" opacity="0.9">
                  <rect x="-2.5" y="-1.5" width="5" height="4" rx="0.5" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.5" />
                  <path d="M -1.3 -1.5 L -1.3 -3 A 1.3 1.3 0 0 1 1.3 -3 L 1.3 -1.5" strokeWidth="0.4" fill="none" />
                </g>
                <text x="18" y="8.5" fill="#d4a85a">{label}</text>
                {/* check */}
                <g transform={`translate(86 6)`}>
                  <circle r="3" stroke="#e9c578" strokeWidth="0.5" />
                  <path d="M -1.5 0 L -0.4 1.2 L 1.6 -1" stroke="#e9c578" strokeWidth="0.7" fill="none" />
                </g>
              </g>
            ))}
          </g>

          {/* BAA stamp bottom-left */}
          <g transform="translate(60 168)" opacity="0.85">
            <rect width="40" height="14" rx="1" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.12" />
            <text x="20" y="9" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em">BAA</text>
          </g>

          {/* OCR audit tag */}
          <g transform="translate(110 168)" opacity="0.7">
            <rect width="68" height="14" rx="1" strokeWidth="0.5" />
            <text x="34" y="9" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em">45 CFR § 164</text>
          </g>
        </g>
      )}

      {motif === "pci" && (
        <g stroke="#d4a85a" fill="none">
          {/* credit card (left) */}
          <g transform="translate(80 76)" opacity="0.95">
            <rect x="-44" y="-28" width="88" height="56" rx="4" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.12" />
            {/* mag stripe */}
            <rect x="-44" y="-18" width="88" height="6" fill="#d4a85a" opacity="0.55" />
            {/* chip */}
            <rect x="-36" y="-4" width="14" height="11" rx="1.5" strokeWidth="0.6" fill="#e9c578" fillOpacity="0.5" />
            <line x1="-29" y1="-4" x2="-29" y2="7" strokeWidth="0.4" />
            <line x1="-36" y1="1.5" x2="-22" y2="1.5" strokeWidth="0.4" />
            {/* PAN — masked except last 4 */}
            <g fontFamily="IBM Plex Mono" fontSize="6" letterSpacing="0.18em" fill="#e9c578">
              <text x="-18" y="14">•••• •••• ••••</text>
              <text x="34" y="14" textAnchor="end" fill="#d4a85a">4242</text>
            </g>
            <text x="-40" y="26" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">CARDHOLDER</text>
          </g>

          {/* CDE boundary (dashed) wrapping card + processor */}
          <g opacity="0.55">
            <rect x="22" y="38" width="124" height="80" rx="6" strokeWidth="0.7" strokeDasharray="3 3" />
            <text x="84" y="34" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">CDE BOUNDARY</text>
          </g>

          {/* P2PE arrow → tokenizer */}
          <g opacity="0.9">
            <path d="M 130 78 L 168 78" stroke="#e9c578" strokeWidth="1.2" fill="none" />
            <path d="M 162 74 L 168 78 L 162 82" stroke="#e9c578" strokeWidth="1.2" fill="none" />
            <text x="148" y="72" textAnchor="middle" fill="#e9c578" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em">P2PE</text>
          </g>

          {/* tokenizer box (right) */}
          <g transform="translate(208 76)" opacity="0.95">
            <rect x="-36" y="-28" width="72" height="56" rx="3" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.08" />
            <text x="0" y="-14" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em">TOKENIZER</text>
            {/* token output */}
            <g fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.16em" fill="#d4a85a" opacity="0.85">
              <text x="0" y="0" textAnchor="middle">tk_9F4A2C0E</text>
              <text x="0" y="9" textAnchor="middle">tk_77B1D4E8</text>
              <text x="0" y="18" textAnchor="middle">tk_31E920B7</text>
            </g>
            <text x="0" y="32" textAnchor="middle" fill="#d4a85a" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">OUT OF SCOPE</text>
          </g>

          {/* 12 requirements grid (bottom) */}
          <g transform="translate(40 138)" opacity="0.95">
            <text x="115" y="-2" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">12 REQUIREMENTS · v4.0</text>
            {Array.from({ length: 12 }).map((_, i) => {
              const x = i * 20;
              const ok = i !== 4 && i !== 9;
              return (
                <g key={i}>
                  <rect x={x} y="0" width="16" height="14" rx="1" strokeWidth="0.5" fill={ok ? "#d4a85a" : "#08112a"} fillOpacity={ok ? 0.35 : 1} />
                  <text x={x + 8} y="9" textAnchor="middle" fill={ok ? "#e9c578" : "#d4a85a"} fontSize="5.5" fontFamily="IBM Plex Mono" opacity={ok ? 0.95 : 0.7}>{i + 1}</text>
                </g>
              );
            })}
          </g>

          {/* SAQ + ASV chips */}
          <g transform="translate(40 168)" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.16em" opacity="0.8">
            <g transform="translate(0 0)">
              <rect width="40" height="12" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.12" />
              <text x="20" y="8" textAnchor="middle" fill="#e9c578">SAQ A</text>
            </g>
            <g transform="translate(48 0)">
              <rect width="56" height="12" rx="2" strokeWidth="0.5" />
              <text x="28" y="8" textAnchor="middle" fill="#d4a85a">ASV SCAN</text>
            </g>
            <g transform="translate(112 0)">
              <rect width="38" height="12" rx="2" strokeWidth="0.5" />
              <text x="19" y="8" textAnchor="middle" fill="#d4a85a">QSA</text>
            </g>
          </g>
        </g>
      )}

      {motif === "soc2" && (
        <g stroke="#d4a85a" fill="none">
          {/* central report document */}
          <g transform="translate(160 100)" opacity="0.95">
            <rect x="-40" y="-58" width="80" height="116" rx="2" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.1" />
            {/* folded corner */}
            <path d="M 28 -58 L 40 -46 L 28 -46 Z" strokeWidth="0.7" fill="#d4a85a" fillOpacity="0.25" />
            {/* AICPA-style stamp ring */}
            <g transform="translate(0 -34)">
              <circle r="16" stroke="#e9c578" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.18" />
              <circle r="11" stroke="#e9c578" strokeWidth="0.5" opacity="0.7" />
              <text x="0" y="-2" textAnchor="middle" fill="#e9c578" fontSize="6.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em">SOC 2</text>
              <text x="0" y="6" textAnchor="middle" fill="#e9c578" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">TYPE II</text>
            </g>
            {/* report heading line */}
            <line x1="-30" y1="-10" x2="30" y2="-10" strokeWidth="0.5" opacity="0.5" />
            <text x="-30" y="-3" fill="#d4a85a" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.8">INDEPENDENT SERVICE AUDITOR</text>
            {/* body lines */}
            {[6, 12, 18, 24, 30, 36].map((y) => (
              <line key={y} x1="-30" y1={y} x2={y === 36 ? 8 : 30} y2={y} strokeWidth="0.4" opacity="0.5" />
            ))}
            {/* signature line */}
            <line x1="-30" y1="48" x2="-2" y2="48" strokeWidth="0.6" />
            <text x="-30" y="54" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">CPA · OPINION ISSUED</text>
          </g>

          {/* Trust Services Criteria orbiting chips */}
          <g fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.18em" opacity="0.9">
            <g transform="translate(54 50)">
              <rect width="60" height="14" rx="2" strokeWidth="0.7" fill="#e9c578" fillOpacity="0.2" stroke="#e9c578" />
              <text x="30" y="9" textAnchor="middle" fill="#e9c578">SECURITY</text>
            </g>
            <g transform="translate(214 50)">
              <rect width="68" height="14" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
              <text x="34" y="9" textAnchor="middle" fill="#d4a85a">AVAILABILITY</text>
            </g>
            <g transform="translate(40 92)">
              <rect width="76" height="14" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
              <text x="38" y="9" textAnchor="middle" fill="#d4a85a">CONFIDENTIAL</text>
            </g>
            <g transform="translate(220 92)">
              <rect width="74" height="14" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
              <text x="37" y="9" textAnchor="middle" fill="#d4a85a">PROC. INTEG.</text>
            </g>
            <g transform="translate(64 140)">
              <rect width="48" height="14" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
              <text x="24" y="9" textAnchor="middle" fill="#d4a85a">PRIVACY</text>
            </g>
          </g>

          {/* tie-lines from chips into the report */}
          <g stroke="#d4a85a" strokeWidth="0.4" strokeDasharray="2 3" opacity="0.5" fill="none">
            <path d="M 114 58 L 130 70" />
            <path d="M 214 58 L 192 70" />
            <path d="M 116 100 L 130 100" />
            <path d="M 220 100 L 192 100" />
            <path d="M 112 148 L 134 130" />
          </g>

          {/* evidence/control flow at bottom */}
          <g transform="translate(36 172)" fontFamily="IBM Plex Mono" fontSize="5" letterSpacing="0.16em" opacity="0.85">
            <text x="124" y="-5" textAnchor="middle" fill="#d4a85a" opacity="0.7">CONTROL EVIDENCE · CONTINUOUS</text>
            {["SSO/MFA", "ACCESS", "CHANGE", "VULN", "BACKUP", "TRAIN"].map((label, i) => (
              <g key={label} transform={`translate(${i * 42} 0)`}>
                <rect width="38" height="12" rx="1.5" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.12" />
                <text x="19" y="8" textAnchor="middle" fill="#d4a85a">{label}</text>
              </g>
            ))}
          </g>
        </g>
      )}

      {motif === "iso" && (
        <g stroke="#d4a85a" fill="none">
          {/* PDCA cycle ring (left) */}
          <g transform="translate(86 100)" opacity="0.95">
            <circle r="46" stroke="#d4a85a" strokeWidth="0.7" fill="#d4a85a" fillOpacity="0.06" />
            <circle r="34" stroke="#e9c578" strokeWidth="1" fill="none" opacity="0.85" />
            {/* arrows around ring */}
            <g stroke="#e9c578" strokeWidth="1" fill="none" opacity="0.9">
              <path d="M 34 0 A 34 34 0 0 1 0 34" />
              <path d="M -4 28 L 0 34 L 6 30" />
              <path d="M -34 0 A 34 34 0 0 1 0 -34" />
              <path d="M -4 -28 L 0 -34 L 6 -30" />
              <path d="M -34 0 A 34 34 0 0 0 0 34" opacity="0.55" />
              <path d="M 34 0 A 34 34 0 0 0 0 -34" opacity="0.55" />
            </g>
            {/* PDCA letters */}
            <g fontFamily="IBM Plex Mono" fontSize="7" letterSpacing="0.22em" fill="#e9c578" opacity="0.95">
              <text x="0" y="-22" textAnchor="middle">PLAN</text>
              <text x="26" y="2" textAnchor="middle">DO</text>
              <text x="0" y="26" textAnchor="middle">CHECK</text>
              <text x="-26" y="2" textAnchor="middle">ACT</text>
            </g>
            <text x="0" y="60" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">ISMS</text>
          </g>

          {/* Annex A control grid (right) - 93 controls in 4 categories */}
          <g transform="translate(168 50)" opacity="0.95">
            <text x="60" y="-2" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">ANNEX A · 93 CONTROLS</text>
            {/* category 1: Organizational (A.5) - 37 */}
            {Array.from({ length: 37 }).map((_, i) => {
              const x = (i % 13) * 7;
              const y = Math.floor(i / 13) * 7;
              return <rect key={`o${i}`} x={x} y={y} width="5" height="5" strokeWidth="0.3" fill="#d4a85a" fillOpacity={0.25 + ((i * 17) % 5) * 0.08} />;
            })}
            <text x="0" y="32" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">A.5 · ORG</text>

            {/* category 2: People (A.6) - 8 */}
            {Array.from({ length: 8 }).map((_, i) => {
              const x = (i % 13) * 7;
              const y = Math.floor(i / 13) * 7 + 40;
              return <rect key={`p${i}`} x={x} y={y} width="5" height="5" strokeWidth="0.3" fill="#e9c578" fillOpacity="0.35" />;
            })}
            <text x="0" y="55" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">A.6 · PEOPLE</text>

            {/* category 3: Physical (A.7) - 14 */}
            {Array.from({ length: 14 }).map((_, i) => {
              const x = (i % 13) * 7;
              const y = Math.floor(i / 13) * 7 + 64;
              return <rect key={`y${i}`} x={x} y={y} width="5" height="5" strokeWidth="0.3" fill="#d4a85a" fillOpacity={0.3 + ((i * 5) % 4) * 0.08} />;
            })}
            <text x="0" y="80" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">A.7 · PHYSICAL</text>

            {/* category 4: Technological (A.8) - 34 */}
            {Array.from({ length: 34 }).map((_, i) => {
              const x = (i % 13) * 7;
              const y = Math.floor(i / 13) * 7 + 88;
              return <rect key={`t${i}`} x={x} y={y} width="5" height="5" strokeWidth="0.3" fill="#e9c578" fillOpacity={0.3 + ((i * 11) % 5) * 0.08} />;
            })}
            <text x="0" y="120" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">A.8 · TECH</text>
          </g>

          {/* certification stamp bottom-left */}
          <g transform="translate(86 168)" opacity="0.9">
            <rect x="-32" y="-7" width="64" height="14" rx="2" strokeWidth="0.7" fill="#d4a85a" fillOpacity="0.15" />
            <text x="0" y="2.5" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em">ISO 27001:2022</text>
          </g>
        </g>
      )}

      {motif === "cjis" && (
        <g stroke="#d4a85a" fill="none">
          {/* badge / seven-pointed star (left) */}
          <g transform="translate(82 100)" opacity="0.95">
            {/* outer star */}
            <polygon
              points="0,-48 11,-15 44,-15 18,5 28,38 0,18 -28,38 -18,5 -44,-15 -11,-15"
              strokeWidth="1.2"
              fill="#d4a85a"
              fillOpacity="0.12"
            />
            {/* inner star outline */}
            <polygon
              points="0,-32 7,-10 30,-10 12,3 19,26 0,12 -19,26 -12,3 -30,-10 -7,-10"
              strokeWidth="0.5"
              opacity="0.55"
            />
            {/* inner badge label */}
            <text x="0" y="-2" textAnchor="middle" fill="#e9c578" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.22em">CJIS</text>
            <text x="0" y="8" textAnchor="middle" fill="#e9c578" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">CRIMINAL JUSTICE</text>
            <text x="0" y="56" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">FBI · SECURITY POLICY</text>
          </g>

          {/* CJI data types (right column) */}
          <g transform="translate(180 50)" opacity="0.95">
            <text x="60" y="-2" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">CJI DATA TYPES</text>
            {[
              { label: "NCIC HOTFILES", row: 0 },
              { label: "III · CHRI", row: 1 },
              { label: "FINGERPRINTS", row: 2 },
              { label: "MUGSHOTS", row: 3 },
              { label: "CAD / DISPATCH", row: 4 },
              { label: "BODY-CAM EVIDENCE", row: 5 },
            ].map(({ label, row }) => (
              <g key={label} transform={`translate(0 ${row * 16})`}>
                <rect x="0" y="0" width="120" height="12" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
                {/* lock icon */}
                <g transform="translate(8 6)" opacity="0.9">
                  <rect x="-2.5" y="-1.5" width="5" height="4" rx="0.5" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.5" />
                  <path d="M -1.3 -1.5 L -1.3 -3 A 1.3 1.3 0 0 1 1.3 -3 L 1.3 -1.5" strokeWidth="0.4" fill="none" />
                </g>
                <text x="18" y="8.5" fill="#d4a85a" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.16em">{label}</text>
                {/* encrypted check */}
                <g transform="translate(110 6)">
                  <circle r="3" stroke="#e9c578" strokeWidth="0.5" />
                  <path d="M -1.5 0 L -0.4 1.2 L 1.6 -1" stroke="#e9c578" strokeWidth="0.7" fill="none" />
                </g>
              </g>
            ))}
          </g>

          {/* MFA / FIPS / Audit chip row */}
          <g transform="translate(36 168)" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.16em" opacity="0.9">
            <g transform="translate(0 0)">
              <rect width="62" height="12" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.12" />
              <text x="31" y="8" textAnchor="middle" fill="#e9c578">ADV. AUTH</text>
            </g>
            <g transform="translate(70 0)">
              <rect width="56" height="12" rx="2" strokeWidth="0.5" />
              <text x="28" y="8" textAnchor="middle" fill="#d4a85a">FIPS 140</text>
            </g>
            <g transform="translate(134 0)">
              <rect width="52" height="12" rx="2" strokeWidth="0.5" />
              <text x="26" y="8" textAnchor="middle" fill="#d4a85a">AUDIT</text>
            </g>
          </g>
        </g>
      )}

      {motif === "training" && (
        <g stroke="#d4a85a" fill="none">
          {/* phishing email envelope (left) */}
          <g transform="translate(76 84)" opacity="0.95">
            <rect x="-46" y="-30" width="92" height="60" rx="2" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.1" />
            {/* envelope flap */}
            <path d="M -46 -30 L 0 6 L 46 -30" strokeWidth="1" fill="none" />
            {/* hook through the envelope */}
            <g transform="translate(28 -38)" opacity="0.95">
              <path d="M 0 0 L 0 14 Q 0 22, -8 22 Q -16 22, -16 14" stroke="#e9c578" strokeWidth="1.4" fill="none" strokeLinecap="round" />
              <line x1="0" y1="-6" x2="0" y2="0" stroke="#e9c578" strokeWidth="1.4" />
              <line x1="-3" y1="-6" x2="3" y2="-6" stroke="#e9c578" strokeWidth="1.4" />
            </g>
            {/* "from" line — suspicious */}
            <g transform="translate(-40 14)" opacity="0.85" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.14em">
              <text x="0" y="0" fill="#d4a85a">FROM</text>
              <text x="20" y="0" fill="#e9c578">payroll@signet-hr.co</text>
              <text x="0" y="8" fill="#d4a85a">SUBJ</text>
              <text x="20" y="8" fill="#e9c578">Direct Deposit Update Required</text>
            </g>
            <text x="0" y="48" textAnchor="middle" fill="#d4a85a" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">SIMULATED LURE</text>
          </g>

          {/* arrow → click → training */}
          <g opacity="0.95">
            <path d="M 126 100 L 168 100" stroke="#e9c578" strokeWidth="1.2" fill="none" />
            <path d="M 162 96 L 168 100 L 162 104" stroke="#e9c578" strokeWidth="1.2" fill="none" />
            <text x="147" y="94" textAnchor="middle" fill="#e9c578" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em">CLICK</text>
          </g>

          {/* training moment card (center-right) */}
          <g transform="translate(196 60)" opacity="0.95">
            <rect width="84" height="80" rx="3" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.12" />
            {/* lightbulb icon */}
            <g transform="translate(42 22)">
              <path d="M -8 -2 A 8 8 0 0 1 8 -2 L 8 4 Q 8 8, 4 10 L -4 10 Q -8 8, -8 4 Z" stroke="#e9c578" strokeWidth="0.9" fill="#d4a85a" fillOpacity="0.25" />
              <line x1="-3" y1="13" x2="3" y2="13" strokeWidth="0.6" />
              <line x1="-2" y1="16" x2="2" y2="16" strokeWidth="0.6" />
              {/* sparkles */}
              <g opacity="0.7">
                <line x1="-13" y1="-6" x2="-10" y2="-4" strokeWidth="0.4" />
                <line x1="13" y1="-6" x2="10" y2="-4" strokeWidth="0.4" />
                <line x1="0" y1="-13" x2="0" y2="-10" strokeWidth="0.4" />
              </g>
            </g>
            <text x="42" y="48" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.2em" opacity="0.95">TEACHABLE MOMENT</text>
            {/* checklist lines */}
            <g opacity="0.6">
              <line x1="10" y1="58" x2="74" y2="58" strokeWidth="0.4" />
              <line x1="10" y1="65" x2="64" y2="65" strokeWidth="0.4" />
              <line x1="10" y1="72" x2="70" y2="72" strokeWidth="0.4" />
            </g>
          </g>

          {/* dashboard / report KPIs at bottom */}
          <g transform="translate(28 158)" opacity="0.95">
            <text x="132" y="-3" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.22em" opacity="0.85">QUARTERLY REPORT</text>
            {[
              { label: "CLICK RATE", value: "4.2%", color: "#e9c578", w: 18 },
              { label: "REPORTED", value: "76%", color: "#e9c578", w: 76 },
              { label: "TRAINED", value: "98%", color: "#e9c578", w: 96 },
            ].map((kpi, i) => (
              <g key={kpi.label} transform={`translate(${i * 92} 0)`}>
                <rect x="0" y="0" width="84" height="22" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.08" />
                <text x="6" y="10" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.14em" opacity="0.7">{kpi.label}</text>
                <text x="6" y="18" fill={kpi.color} fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.1em">{kpi.value}</text>
                {/* mini bar */}
                <rect x="44" y="14" width="36" height="2" fill="#d4a85a" opacity="0.18" />
                <rect x="44" y="14" width={Math.max(2, (kpi.w / 100) * 36)} height="2" fill={kpi.color} opacity="0.9" />
              </g>
            ))}
          </g>
        </g>
      )}

      {motif === "awareness" && (
        <g stroke="#d4a85a" fill="none">
          {/* central screen with curriculum modules */}
          <g transform="translate(160 100)" opacity="0.95">
            {/* monitor */}
            <rect x="-70" y="-50" width="140" height="86" rx="4" strokeWidth="1.2" fill="#08112a" />
            <rect x="-66" y="-46" width="132" height="78" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
            {/* play button */}
            <g transform="translate(0 -22)">
              <circle r="11" stroke="#e9c578" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.2" />
              <polygon points="-3,-5 -3,5 5,0" fill="#e9c578" />
            </g>
            {/* progress bar */}
            <g transform="translate(0 0)">
              <rect x="-50" y="-2" width="100" height="3" rx="1.5" fill="#d4a85a" fillOpacity="0.15" />
              <rect x="-50" y="-2" width="68" height="3" rx="1.5" fill="#e9c578" />
              <text x="-50" y="-7" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">MODULE 4 OF 6</text>
              <text x="50" y="-7" fill="#e9c578" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" textAnchor="end" opacity="0.85">68%</text>
            </g>
            {/* module list */}
            {[
              { y: 8, title: "PASSWORDS & MFA", done: true },
              { y: 16, title: "PHISHING & SOCIAL ENG.", done: true },
              { y: 24, title: "DATA HANDLING", done: true },
            ].map((m) => (
              <g key={m.title} transform={`translate(-46 ${m.y})`} opacity="0.85">
                <circle cx="0" cy="0" r="2.4" stroke="#e9c578" strokeWidth="0.5" fill={m.done ? "#e9c578" : "transparent"} fillOpacity={m.done ? 0.5 : 0} />
                {m.done && <path d="M -1.2 0 L -0.3 1 L 1.4 -1" stroke="#08112a" strokeWidth="0.6" fill="none" />}
                <text x="8" y="1.5" fill="#d4a85a" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.12em">{m.title}</text>
              </g>
            ))}
            {/* monitor stand */}
            <line x1="0" y1="36" x2="0" y2="42" strokeWidth="1.2" />
            <line x1="-12" y1="42" x2="12" y2="42" strokeWidth="1.2" />
          </g>

          {/* framework chips around screen */}
          <g fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.2em" opacity="0.9">
            <g transform="translate(36 38)">
              <rect width="42" height="12" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.15" />
              <text x="21" y="8" textAnchor="middle" fill="#e9c578">CMMC</text>
            </g>
            <g transform="translate(84 24)">
              <rect width="44" height="12" rx="2" strokeWidth="0.5" />
              <text x="22" y="8" textAnchor="middle" fill="#d4a85a">HIPAA</text>
            </g>
            <g transform="translate(192 24)">
              <rect width="34" height="12" rx="2" strokeWidth="0.5" />
              <text x="17" y="8" textAnchor="middle" fill="#d4a85a">PCI</text>
            </g>
            <g transform="translate(238 38)">
              <rect width="44" height="12" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.15" />
              <text x="22" y="8" textAnchor="middle" fill="#e9c578">SOC 2</text>
            </g>
            <g transform="translate(34 156)">
              <rect width="38" height="12" rx="2" strokeWidth="0.5" />
              <text x="19" y="8" textAnchor="middle" fill="#d4a85a">ISO 27001</text>
            </g>
          </g>

          {/* role-based audience badges bottom */}
          <g transform="translate(78 168)" opacity="0.9">
            {["FINANCE", "ENG", "OPS", "EXEC", "FRONT DESK"].map((label, i) => (
              <g key={label} transform={`translate(${i * 36} 0)`}>
                <rect x="0" y="0" width="32" height="12" rx="6" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.08" />
                <text x="16" y="8" textAnchor="middle" fill="#d4a85a" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.14em">{label}</text>
              </g>
            ))}
          </g>

          {/* certificate ribbon top-right */}
          <g transform="translate(260 56)" opacity="0.85">
            <circle r="10" stroke="#e9c578" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.18" />
            <text x="0" y="2" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.16em">CERT</text>
            <path d="M -5 9 L -3 16 L 0 14 L 3 16 L 5 9" stroke="#e9c578" strokeWidth="0.7" fill="#d4a85a" fillOpacity="0.2" />
          </g>
        </g>
      )}

      {motif === "literacy" && (
        <g stroke="#d4a85a" fill="none">
          {/* keyboard (bottom) */}
          <g transform="translate(58 130)" opacity="0.95">
            <rect width="200" height="40" rx="4" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.08" />
            {/* key grid */}
            {Array.from({ length: 4 }).map((_, row) =>
              Array.from({ length: 13 }).map((_, col) => {
                const w = 12, h = 6;
                const x = 6 + col * 14.5 + (row === 3 ? 6 : 0);
                const y = 6 + row * 8;
                const isHighlight = (row === 2 && col === 1) || (row === 2 && col === 7) || (row === 2 && col === 9); // a, j, l
                return (
                  <rect
                    key={`${row}-${col}`}
                    x={x}
                    y={y}
                    width={w}
                    height={h}
                    rx="1"
                    strokeWidth="0.3"
                    fill={isHighlight ? "#e9c578" : "#d4a85a"}
                    fillOpacity={isHighlight ? 0.55 : 0.15}
                  />
                );
              })
            )}
            {/* space bar */}
            <rect x="60" y="30" width="80" height="6" rx="1" strokeWidth="0.3" fill="#d4a85a" fillOpacity="0.2" />
          </g>

          {/* monitor (top) — showing a "first steps" screen */}
          <g transform="translate(158 70)" opacity="0.95">
            <rect x="-60" y="-38" width="120" height="74" rx="3" strokeWidth="1.2" fill="#08112a" />
            <rect x="-56" y="-34" width="112" height="66" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.1" />
            {/* "Save" dialog mock */}
            <g transform="translate(-46 -26)" opacity="0.95">
              <rect width="92" height="14" rx="1.5" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.18" />
              <text x="6" y="9" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.16em">SAVE AS \u2026</text>
              <rect x="62" y="3" width="26" height="8" rx="1" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.35" />
              <text x="75" y="9" textAnchor="middle" fill="#e9c578" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em">OK</text>
            </g>
            {/* file tree */}
            <g transform="translate(-46 -8)" opacity="0.85" fontFamily="IBM Plex Mono" fontSize="5" letterSpacing="0.14em" fill="#d4a85a">
              <text x="0" y="0">\u25B8 DOCUMENTS</text>
              <text x="0" y="8">\u25BE DOWNLOADS</text>
              <text x="8" y="16" fill="#e9c578">\u00B7 invoice.pdf</text>
              <text x="8" y="24">\u00B7 photos.zip</text>
              <text x="0" y="32">\u25B8 ONEDRIVE</text>
            </g>
            {/* helper arrow + label */}
            <g transform="translate(34 8)" opacity="0.85">
              <path d="M -10 -2 Q -2 -6, 4 0" stroke="#e9c578" strokeWidth="0.8" fill="none" />
              <path d="M 1 -2 L 4 0 L 1 2" stroke="#e9c578" strokeWidth="0.8" fill="none" />
              <text x="6" y="2" fill="#e9c578" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.12em">HERE</text>
            </g>
            {/* monitor stand */}
            <line x1="0" y1="36" x2="0" y2="42" strokeWidth="1.2" />
            <line x1="-12" y1="42" x2="12" y2="42" strokeWidth="1.2" />
          </g>

          {/* coffee mug */}
          <g transform="translate(64 96)" opacity="0.8">
            <path d="M 0 0 L 0 10 Q 0 14, 4 14 L 14 14 Q 18 14, 18 10 L 18 0 Z" strokeWidth="0.8" fill="#d4a85a" fillOpacity="0.15" />
            <path d="M 18 3 Q 24 3, 24 7 Q 24 11, 18 11" strokeWidth="0.8" fill="none" />
            {/* steam */}
            <g opacity="0.6" stroke="#e9c578">
              <path d="M 4 -4 Q 6 -8, 4 -12" strokeWidth="0.5" fill="none" />
              <path d="M 10 -4 Q 12 -8, 10 -12" strokeWidth="0.5" fill="none" />
              <path d="M 14 -4 Q 12 -8, 14 -12" strokeWidth="0.5" fill="none" />
            </g>
          </g>

          {/* cheat sheet stack right */}
          <g transform="translate(260 92)" opacity="0.9">
            {[0, 1, 2].map((i) => (
              <g key={i} transform={`translate(${i * 2} ${i * 2})`} opacity={0.6 + i * 0.15}>
                <rect width="30" height="38" rx="1" strokeWidth="0.5" fill="#08112a" stroke="#d4a85a" />
                <line x1="4" y1="6" x2="26" y2="6" strokeWidth="0.4" opacity="0.6" />
                <line x1="4" y1="11" x2="22" y2="11" strokeWidth="0.3" opacity="0.5" />
                <line x1="4" y1="15" x2="26" y2="15" strokeWidth="0.3" opacity="0.5" />
                <line x1="4" y1="19" x2="20" y2="19" strokeWidth="0.3" opacity="0.5" />
                <line x1="4" y1="23" x2="24" y2="23" strokeWidth="0.3" opacity="0.5" />
                <line x1="4" y1="27" x2="22" y2="27" strokeWidth="0.3" opacity="0.5" />
                <line x1="4" y1="31" x2="18" y2="31" strokeWidth="0.3" opacity="0.5" />
              </g>
            ))}
            <text x="14" y="46" textAnchor="middle" fill="#d4a85a" fontSize="5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.75">CHEAT SHEETS</text>
          </g>

          {/* friendly badge bottom-left */}
          <g transform="translate(36 36)" opacity="0.85">
            <rect width="72" height="14" rx="3" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.12" />
            <text x="36" y="9" textAnchor="middle" fill="#e9c578" fontSize="6" fontFamily="IBM Plex Mono" letterSpacing="0.22em">NO JUDGMENT</text>
          </g>
        </g>
      )}

      {motif === "prompt" && (
        <g stroke="#d4a85a" fill="none">
          {/* terminal-style prompt panel */}
          <g transform="translate(36 60)" opacity="0.95">
            <rect width="156" height="100" rx="3" strokeWidth="1.1" fill="#08112a" stroke="#d4a85a" />
            {/* window controls */}
            <g transform="translate(8 8)" opacity="0.7">
              <circle cx="0" cy="0" r="2" fill="#d4a85a" />
              <circle cx="8" cy="0" r="2" fill="#d4a85a" opacity="0.6" />
              <circle cx="16" cy="0" r="2" fill="#d4a85a" opacity="0.45" />
            </g>
            <text x="78" y="11" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.6">PROMPT</text>
            {/* multi-line prompt with structure */}
            <g fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.04em">
              <text x="10" y="26" fill="#e9c578">role:</text>
              <text x="34" y="26" fill="#d4a85a">SR ESTIMATOR</text>
              <text x="10" y="38" fill="#e9c578">context:</text>
              <text x="44" y="38" fill="#d4a85a">RFP-2026-AV-OFFICE.pdf</text>
              <text x="10" y="50" fill="#e9c578">task:</text>
              <text x="34" y="50" fill="#d4a85a">draft BOM + price guidance</text>
              <text x="10" y="62" fill="#e9c578">constraints:</text>
              <text x="58" y="62" fill="#d4a85a">UniFi only, US labor</text>
              <text x="10" y="74" fill="#e9c578">format:</text>
              <text x="38" y="74" fill="#d4a85a">markdown table, qty / sku</text>
              {/* blinking cursor */}
              <text x="10" y="88" fill="#e9c578">▌</text>
            </g>
          </g>

          {/* arrow → output */}
          <g opacity="0.95">
            <path d="M 196 108 L 222 108" stroke="#e9c578" strokeWidth="1.2" fill="none" />
            <path d="M 216 104 L 222 108 L 216 112" stroke="#e9c578" strokeWidth="1.2" fill="none" />
          </g>

          {/* AI output document */}
          <g transform="translate(226 56)" opacity="0.95">
            <rect width="60" height="108" rx="2" strokeWidth="1" fill="#d4a85a" fillOpacity="0.1" />
            <text x="30" y="12" textAnchor="middle" fill="#e9c578" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.2em">OUTPUT</text>
            {/* heading */}
            <rect x="6" y="18" width="40" height="3" fill="#e9c578" fillOpacity="0.7" />
            {/* table-like rows */}
            {[28, 36, 44, 52, 60, 68, 76, 84].map((y, i) => (
              <g key={y}>
                <line x1="6" y1={y} x2="22" y2={y} strokeWidth="0.4" opacity="0.6" />
                <line x1="26" y1={y} x2="54" y2={y} strokeWidth="0.4" opacity={i === 3 ? 0.95 : 0.5} stroke={i === 3 ? "#e9c578" : "#d4a85a"} />
              </g>
            ))}
            <line x1="24" y1="24" x2="24" y2="88" strokeWidth="0.3" opacity="0.5" />
            <text x="30" y="100" textAnchor="middle" fill="#d4a85a" fontSize="4.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em" opacity="0.7">BOM v1</text>
          </g>

          {/* safety guardrails — three chips along bottom */}
          <g transform="translate(36 168)" opacity="0.95" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.18em">
            {/* PII / data boundary */}
            <g transform="translate(0 0)">
              <rect width="76" height="14" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.12" />
              <g transform="translate(8 7)">
                <rect x="-3" y="-2" width="6" height="5" rx="0.6" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.5" />
                <path d="M -1.5 -2 L -1.5 -3.5 A 1.5 1.5 0 0 1 1.5 -3.5 L 1.5 -2" strokeWidth="0.4" fill="none" />
              </g>
              <text x="40" y="9" textAnchor="middle" fill="#e9c578">DATA BOUNDARY</text>
            </g>
            {/* hallucination check */}
            <g transform="translate(84 0)">
              <rect width="76" height="14" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.12" />
              <text x="38" y="9" textAnchor="middle" fill="#e9c578">VERIFY OUTPUT</text>
            </g>
            {/* prompt-injection */}
            <g transform="translate(168 0)">
              <rect width="78" height="14" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.12" />
              <text x="39" y="9" textAnchor="middle" fill="#e9c578">INJECTION-AWARE</text>
            </g>
          </g>

          {/* tools chip row top */}
          <g transform="translate(36 36)" fontFamily="IBM Plex Mono" fontSize="5" letterSpacing="0.18em" opacity="0.8">
            {["CLAUDE", "COPILOT", "CHATGPT", "GEMINI"].map((label, i) => (
              <g key={label} transform={`translate(${i * 60} 0)`}>
                <rect width="50" height="12" rx="2" strokeWidth="0.4" fill="#d4a85a" fillOpacity="0.08" />
                <text x="25" y="8" textAnchor="middle" fill="#d4a85a">{label}</text>
              </g>
            ))}
          </g>
        </g>
      )}

      {motif === "cui" && (
        <g stroke="#d4a85a" fill="none">
          {/* document with CUI banner */}
          <g transform="translate(54 50)" opacity="0.95">
            <rect width="100" height="124" rx="2" strokeWidth="1.1" fill="#d4a85a" fillOpacity="0.1" />
            {/* top banner — CUI */}
            <rect x="0" y="0" width="100" height="14" fill="#e9c578" fillOpacity="0.85" />
            <text x="50" y="10" textAnchor="middle" fill="#08112a" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.32em" fontWeight="700">CUI</text>
            {/* portion-marking section: (CUI) prefix */}
            <g transform="translate(8 24)" opacity="0.95" fontFamily="IBM Plex Mono" fontSize="5.5" letterSpacing="0.06em">
              <text x="0" y="0" fill="#e9c578">(CUI)</text>
              <text x="20" y="0" fill="#d4a85a">Project Helm progress report</text>
              <text x="0" y="10" fill="#d4a85a">summarizing milestones M3\u2013M5</text>
              <text x="0" y="20" fill="#e9c578">(CUI)</text>
              <text x="20" y="20" fill="#d4a85a">Component lead times remain</text>
              <text x="0" y="30" fill="#d4a85a">within nominal envelope.</text>
              <text x="0" y="44" fill="#e9c578">(U)</text>
              <text x="14" y="44" fill="#d4a85a">No schedule impact.</text>
            </g>
            {/* category line */}
            <g transform="translate(8 90)" opacity="0.85">
              <line x1="0" y1="0" x2="84" y2="0" strokeWidth="0.4" opacity="0.5" />
              <text x="0" y="8" fill="#d4a85a" fontSize="4.8" fontFamily="IBM Plex Mono" letterSpacing="0.14em">CATEGORY</text>
              <text x="0" y="16" fill="#e9c578" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.16em">CTI \u00b7 SP-EXPT</text>
            </g>
            {/* bottom banner */}
            <rect x="0" y="110" width="100" height="14" fill="#e9c578" fillOpacity="0.85" />
            <text x="50" y="120" textAnchor="middle" fill="#08112a" fontSize="7" fontFamily="IBM Plex Mono" letterSpacing="0.32em" fontWeight="700">CUI</text>
          </g>

          {/* lifecycle ring on the right */}
          <g transform="translate(232 100)" opacity="0.95">
            <circle r="48" stroke="#d4a85a" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.06" />
            <circle r="36" stroke="#e9c578" strokeWidth="0.7" fill="none" opacity="0.7" />
            {/* arrows around */}
            <g stroke="#e9c578" strokeWidth="0.8" fill="none" opacity="0.85">
              <path d="M 36 0 A 36 36 0 0 1 0 36" />
              <path d="M -4 30 L 0 36 L 6 32" />
              <path d="M -36 0 A 36 36 0 0 1 0 -36" />
              <path d="M -4 -30 L 0 -36 L 6 -32" />
            </g>
            {/* labels at quadrants */}
            <g fontFamily="IBM Plex Mono" fontSize="6" letterSpacing="0.18em" fill="#e9c578" opacity="0.95">
              <text x="0" y="-22" textAnchor="middle">IDENTIFY</text>
              <text x="24" y="3" textAnchor="middle">LABEL</text>
              <text x="0" y="26" textAnchor="middle">PROTECT</text>
              <text x="-24" y="3" textAnchor="middle">SEND</text>
            </g>
          </g>

          {/* approved channels chips bottom */}
          <g transform="translate(38 170)" fontFamily="IBM Plex Mono" fontSize="5" letterSpacing="0.16em" opacity="0.9">
            <text x="0" y="-3" fill="#d4a85a" opacity="0.7">APPROVED CHANNELS</text>
            {[
              { label: "GCC HIGH", ok: true },
              { label: "FIPS 140", ok: true },
              { label: "ENCRYPTED EMAIL", ok: true },
              { label: "S/MIME", ok: true },
            ].map((c, i) => (
              <g key={c.label} transform={`translate(${i * 60} 4)`}>
                <rect width="54" height="12" rx="2" strokeWidth="0.5" fill="#d4a85a" fillOpacity="0.12" />
                <text x="27" y="8" textAnchor="middle" fill="#e9c578">{c.label}</text>
              </g>
            ))}
          </g>

          {/* warning chip — don'ts */}
          <g transform="translate(170 36)" opacity="0.9">
            <rect width="118" height="14" rx="2" strokeWidth="0.6" fill="#d4a85a" fillOpacity="0.08" />
            <text x="59" y="9" textAnchor="middle" fill="#d4a85a" fontSize="5.5" fontFamily="IBM Plex Mono" letterSpacing="0.18em">NO PERSONAL CLOUD</text>
          </g>
        </g>
      )}

      {motif === "infra" && (
        <g stroke="#d4a85a" fill="none">
          {/* server rack */}
          <rect x="120" y="40" width="80" height="130" strokeWidth="1.2" opacity="0.7" />
          {[52, 68, 84, 100, 116, 132, 148].map((y) => (
            <g key={y}>
              <rect x="126" y={y} width="68" height="10" strokeWidth="0.5" opacity="0.55" />
              <circle cx="132" cy={y + 5} r="1" fill="#e9c578" opacity={y % 32 === 20 ? 0.9 : 0.35} />
              <circle cx="138" cy={y + 5} r="1" fill="#e9c578" opacity="0.35" />
            </g>
          ))}
          {/* cables coming out the side */}
          <path d="M 200 70 Q 240 80, 250 110 Q 258 130, 280 140" strokeWidth="0.8" opacity="0.5" />
          <path d="M 200 90 Q 244 100, 252 125 Q 260 145, 282 155" strokeWidth="0.8" opacity="0.4" />
          <path d="M 120 100 Q 80 110, 70 130 Q 62 150, 40 155" strokeWidth="0.8" opacity="0.4" />
        </g>
      )}

      {/* corner ticks — blueprint vibe */}
      <g stroke="#d4a85a" strokeWidth="0.6" opacity="0.5">
        <line x1="14" y1="14" x2="26" y2="14" />
        <line x1="14" y1="14" x2="14" y2="26" />
        <line x1="306" y1="14" x2="294" y2="14" />
        <line x1="306" y1="14" x2="306" y2="26" />
        <line x1="14" y1="186" x2="26" y2="186" />
        <line x1="14" y1="186" x2="14" y2="174" />
        <line x1="306" y1="186" x2="294" y2="186" />
        <line x1="306" y1="186" x2="306" y2="174" />
      </g>
    </svg>
  );
};

const SOLUTION_IMAGES = {
  "access-control": { src: "assets/access-control.png", alt: "Ubiquiti UniFi Access reader with mobile credential" },
  "cctv": { src: "assets/cctv.png", alt: "Security operations desk with a 9-up CCTV monitoring wall showing hallway, lobby, and parking-lot camera feeds, a CAM list and PTZ control panel on the right, a handheld radio in its charger, a Security mug, a Security Operations binder, a 24/7 Protection sign, and a PTZ dome camera on the desk" },
  "video-intercom": { src: "assets/video-intercom.png", alt: "UniFi video intercom mounted on a concrete column outside a glass-walled office, screen showing Main Office directory and PIN entry" },
  "conference-av": { src: "assets/conference-av.png", alt: "Modern conference room with Teams Rooms display and soundbar" },
  "digital-signage": { src: "assets/digital-signage.png", alt: "Two large digital signage displays mounted in a cafe showing menu and promotional content" },
  "website-development": { src: "assets/website-development.png", alt: "Desktop monitor, smartphone, and laptop on a designer's desk all displaying the same modern responsive website mockup for Creative Web Solutions with a hero of snowy mountains, alongside a paint chip color fan, a coffee mug, and a sketch notebook — representing end-to-end web design and development" },
  "structured-cabling": { src: "assets/structured-cabling.png", alt: "Overhead cable tray with neatly bundled blue and teal Cat6 runs into server racks" },
  "office-buildout": { src: "assets/office-buildout.png", alt: "Office under construction with exposed ceiling, glass walls, ladder, drywall pallets, and blueprints" },
  "wifi-design": { src: "assets/wifi-design.png", alt: "Engineer holding a tablet showing a Wi-Fi heatmap survey of an office floor" },
  "voip-phones": { src: "assets/voip-phones.png", alt: "VoIP desk phone on an office desk with a global network overlay and a headset in the background" },
  "fixed-wireless": { src: "assets/fixed-wireless.png", alt: "Starlink dish on a ski lodge deck at sunset with a laptop and coffee, mountains in the background" },
  "point-of-sale": { src: "assets/point-of-sale.png", alt: "Cafe countertop POS — tablet showing a new sale with espresso, bagel, salad, and latte, alongside a card terminal showing $22.95" },
  "building-automation": { src: "assets/building-automation.png", alt: "Front desk monitor showing a building automation dashboard with a leak detected alert, sensor status list, and water usage chart" },
  "hotel-hospitality": { src: "assets/hotel-hospitality.png", alt: "Hotel business center with two workstations, monitors showing a welcome screen, a multifunction printer, and a Business Center sign" },
  "multifamily-internet": { src: "assets/multifamily-internet.png", alt: "Cutaway view of a modern multi-family building at dusk with access points on each floor and Wi-Fi coverage radiating to a central hub" },
  "print-tracking": { src: "assets/print-tracking.png", alt: "Illustration of a person releasing a print job at a multifunction printer with an office building and a colleague on a laptop in the background" },
  "email-migration": { src: "assets/email-migration.png", alt: "Illustration of email migrating from an on-prem server and laptop to a cloud destination laptop and server stack, with a green checkmark confirming success" },
  "custom-dashboards": { src: "assets/custom-dashboards.png", alt: "Sales dashboard with KPI tiles for revenue, opportunities, win rate, and deal size, plus pipeline funnel, revenue source donut, revenue trend line, and recent activities feed" },
  "fleet-tracking": { src: "assets/fleet-tracking.png", alt: "Live fleet tracking dashboard with a city map showing trucks and vans with route lines, a vehicle list with speeds and statuses, and a geofence panel" },
  "ai-assistants": { src: "assets/ai-assistants.png", alt: "AI Assistant interface showing a chat panel summarizing Q2 sales performance with a bar chart, alongside feature callouts for smart conversations, task automation, and data insights" },
  "overhead-audio": { src: "assets/overhead-audio.png", alt: "Modern office ceiling with two recessed in-ceiling speakers radiating concentric sound waves, alongside a wall-mounted zone control panel showing Zone A, B, and C and a PAGE button" },
  "data-recovery": { src: "assets/data-recovery.png", alt: "Data recovery lab bench with an opened 3.5-inch hard drive exposing the platter and actuator arm, a technician's gloved hands holding it, precision screwdrivers in the foreground, a diagnostic recovery unit and microscope in the background" },
  "vdi": { src: "assets/vdi.png", alt: "Laptop on a desk showing the Windows 11 Start menu in front of a rack of dark-blue datacenter servers, with a glowing cloud icon connected by dashed lines to monitor, laptop, and phone icons indicating virtual desktops delivered to any device" },
  "cmmc-consulting": { src: "assets/cmmc.png", alt: "Brushed steel military shield with a five-pointed star centered on an olive-green camouflage background, surrounded by faint circuit traces and icons for lock, globe, users, and checkmark — symbolizing CMMC and DFARS compliance" },
  "gcc-migration": { src: "assets/gcc-migration.png", alt: "M365 GCC Migrations marketing graphic showing a navy Microsoft 365 GCC cloud icon next to a steel shield with a padlock, a laptop displaying Outlook, Word, Excel, PowerPoint, Teams, SharePoint, OneDrive, and Defender app icons, with the US Capitol dome in the background and four feature callouts beneath: Government Compliant, Enhanced Security, Seamless Migration, Expert Support" },
  "hipaa-consulting": { src: "assets/hipaa.png", alt: "Navy steel shield embossed with the caduceus medical symbol on a desk, next to a laptop displaying a glowing padlock surrounded by health icons and a stethoscope and clipboard in the foreground, with a softly blurred hospital corridor in the background — representing HIPAA security and compliance" },
  "pci-consulting": { src: "assets/pci.png", alt: "Steel shield with a padlock standing on a desk in front of a laptop showing a PCI Compliance dashboard with a credit card graphic and icons for Secure Network, Data Protection, Access Control, Monitoring, and Policy Management — a payment terminal with an inserted card sits in the foreground" },
  "iso27001-consulting": { src: "assets/iso27001.png", alt: "Navy steel shield reading ISO 27001 Information Security Management on a desk next to a laptop showing an ISMS diagram with Asset Management, Risk Management, Access Control, Incident Response, and Continual Improvement, alongside a navy binder labeled ISMS Policies & Procedures and a notebook with Confidentiality, Integrity, and Availability checked off" },
  "soc2-consulting": { src: "assets/soc2.png", alt: "Navy steel shield reading SOC 2 Compliance with a padlock on a desk next to a laptop displaying the five SOC 2 Trust Services Criteria — Security, Availability, Confidentiality, Processing Integrity, Privacy — beside a notebook with all five criteria checked off and a printed SOC 2 Report" },
  "cjis-consulting": { src: "assets/cjis.png", alt: "Navy steel shield reading CJIS Criminal Justice Information Services with a padlock, on a desk next to a laptop showing a CJIS Compliance dashboard with Access Control, Personnel Security, Data Integrity, Audit & Accountability, and Encryption & Protection icons, alongside a CJIS Security Policy notebook, a police patch and badge, a radio, and handcuffs in a dispatch center setting" },
  "phishing-simulation": { src: "assets/phishing-simulation.png", alt: "KnowBe4 Human Risk Management marketing graphic showing a laptop with a KnowBe4 dashboard — Risk Score 78 Moderate, Phishing Security Tests 12.4% click rate, Training Progress 85% completion, 152 At-Risk Users — beside icons for Security Awareness Training, Simulated Phishing Attacks, Behavioral Risk Insights, and Stronger Security Culture; tagline reads Reduce Risk. Build Resilience." },
  "security-awareness-training": { src: "assets/security-awareness-training.png", alt: "Cybersecurity trainer standing in a modern conference room pointing to a large wall display showing a glowing shield with a padlock surrounded by icons for email, cloud, user, mobile, laptop, and database, while four attendees with open laptops — each screen showing a padlock — watch the session" },
  "computer-literacy": { src: "assets/computer-literacy.png", alt: "Friendly trainer in a small office classroom pointing to a wall display titled Computer Training — Build skills. Work smarter. with checkmarks for Essential Skills, Productivity Tools, Real-World Applications, and Confidence for Success; four adult learners of varied ages and backgrounds follow along on open laptops showing the same Computer Training screen" },
  "ai-prompt-training": { src: "assets/ai-prompt-training.png", alt: "AI Training session in a modern conference room — instructor pointing at a wall display showing a glowing wireframe profile and four pillars labeled Understand AI, Apply to Real Work, Enhance Productivity, and Use AI Responsibly, while four attendees with open laptops featuring neural-network and dashboard visuals take notes around a wooden table" },
  "cui-training": { src: "assets/cui-training.png", alt: "CUI handling training session — instructor presenting in front of a wall display showing a glowing CUI hub connected by lines to folder, document, user, and email icons, while six adult learners seated around a conference table follow along with notebooks" },
};

const Solutions = ({ go }) => {
  const [filter, setFilter] = React.useState("All");
  const categories = ["All", ...new Set(SOLUTIONS.map((s) => s.category))];
  const filtered = filter === "All" ? SOLUTIONS : SOLUTIONS.filter((s) => s.category === filter);

  return (
    <main className="page-fade">
      <section className="page-head">
        <div className="shell">
          <span className="eyebrow">Solutions</span>
          <h1>Project work, scoped and <em style={{ fontStyle: "italic", color: "var(--gold-bright)" }}>signed</em> end to end.</h1>
          <p>
            Beyond the monthly managed services, these are the project-shape
            engagements we deliver — designed, installed, and documented by
            the same engineers who'll keep them running afterward.
            {" "}
            <strong style={{ color: "var(--gold-bright)" }}>
              Clients with a Managed Services Agreement receive 20% off all project work.
            </strong>
          </p>
          <div className="topics" style={{ marginTop: 32 }}>
            {categories.map((c) => (
              <span
                key={c}
                className={`topic ${filter === c ? "active" : ""}`}
                onClick={() => setFilter(c)}
              >
                {c}
              </span>
            ))}
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="shell">
          <div className="case-grid">
            {filtered.map((s) => {
              const Wrap = s.href ? "a" : "div";
              const wrapProps = s.href
                ? { href: s.href, target: "_blank", rel: "noopener noreferrer", className: "case-card", style: { cursor: "pointer", textDecoration: "none" } }
                : { className: "case-card", style: { cursor: "default" } };
              return (
              <Wrap key={s.id} {...wrapProps}>
                <div className="case-img">
                  {SOLUTION_IMAGES[s.id] ? (
                    <img
                      src={SOLUTION_IMAGES[s.id].src}
                      alt={SOLUTION_IMAGES[s.id].alt}
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    />
                  ) : (
                    <SolutionPlaceholder category={s.category} id={s.id} />
                  )}
                </div>
                <div className="case-body">
                  <div className="case-meta">
                    <span>{s.category}</span>
                    <span>·</span>
                    <span>{s.scope}</span>
                  </div>
                  <h3>{s.title}</h3>
                  <p>{s.summary}</p>
                  <div className="results">
                    {s.highlights.map((h, i) => (
                      <div key={i} className="result">
                        <div className="n">{h.n}</div>
                        <div className="l">{h.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </Wrap>
              );
            })}
          </div>
        </div>
      </section>

      <CtaStrip go={go} />
    </main>
  );
};

window.Solutions = Solutions;
