{
  "client": {
    "name": "H Grant Designs",
    "url": "https://hgrantdesigns.com/",
    "vertical": "Regional NJ web design + digital marketing agency",
    "audience": "Owner-operated small/mid-sized New Jersey businesses, chamber-of-commerce-style local clients",
    "differentiators": [
      "12 years in business",
      "Relationship-driven, transparent process",
      "Measurable results across web, SEO, social, and print",
      "Local NJ presence — Bergen County focus"
    ]
  },
  "phone": "(201) 606-2626",
  "section_order": [
    "header",
    "hero (with services strip)",
    "about (split with stat)",
    "blog (6-card grid)",
    "testimonials (Google reviews block)",
    "contact (split with form)",
    "footer (dark multi-column)"
  ],
  "research_notes": "2026 marketing-agency web design has split into three distinct camps after the 2023–2025 gradient/blur saturation: (1) editorial-minimal restraint with serif display type and warm paper palettes (Pentagram, Mubi, Linear marketing site, ceramic-studio aesthetics), (2) expressive/brutalist confidence with oversized display serif + grotesk, lime/electric accents, marquees, and bento layouts (Family Studio, Order, Locomotive, Read.cv-flavored agencies), and (3) dark-mode/aurora/glassmorphism for tech-forward studios signaling AI, automation, and modern stack fluency (Linear, Vercel, Resend, Supabase aesthetic now ubiquitous in agency work). All three are credible 2026 directions; they target different psychographic profiles within the same NJ small-business buyer pool.",
  "mockups": [
    {
      "id": "mockup-1",
      "codename": "Beacon",
      "direction": "Editorial Modern Minimal — warm-paper editorial with serif/sans pairing",
      "file": "/tmp/hgrant-mockups/mockup-1/index.html",
      "trend_references": [
        "editorial-minimal (Pentagram, Mubi, Variable Faces era)",
        "warm neutral palettes / soft luxury",
        "post-gradient restraint",
        "magazine-style asymmetric grids"
      ],
      "typography": {
        "display": "Fraunces (variable serif, optical sizing, italic accents on key phrases)",
        "body": "Inter",
        "approach": "Serif display headlines with italic emphasis on phrases like 'your business does' and '12'. Sans body and UI for legibility."
      },
      "color": {
        "base": "#f6f1e8 (warm paper)",
        "ink": "#11202c (deep navy/ink)",
        "accent": "#e26d3a (tangerine)",
        "strategy": "Warm paper foreground, deep ink for headlines, single tangerine accent for hover/emphasis. Premium, confident, restrained."
      },
      "layout_system": "Asymmetric editorial grids — section headers split into headline column + supporting copy column. About section uses 1fr / 1.05fr split with stacked image grid (1 lead + 2 small).",
      "motion": [
        "Cursor-tracked tangerine spotlight in hero",
        "Animated underline reveals on nav links",
        "Hover-scale on imagery (slow 1s ease)",
        "Scroll-reveal fade-up on sections",
        "CTA color-shift to tangerine + arrow nudge"
      ],
      "vibe": "The agency the chamber president hired. Trustworthy, premium, takes itself seriously without being stuffy.",
      "fit_for_client": "Strongest for the trust-and-craft pitch: positions H Grant as the considered, mature choice for established local businesses who want their site to feel like a respected brand — law firms, family practices, professional services. The 12-year stat reads as gravitas here, not just experience."
    },
    {
      "id": "mockup-2",
      "codename": "Garden State Bold",
      "direction": "Expressive Brutalist — oversized Instrument Serif, electric lime, bento grid, marquee energy",
      "file": "/tmp/hgrant-mockups/mockup-2/index.html",
      "trend_references": [
        "expressive/brutalist agency sites (Family, Order, Locomotive)",
        "Instrument Serif italic display revival",
        "bento-grid services layout",
        "marquee tickers and offset shadows",
        "noise/grain texture overlays",
        "Read.cv / CV-card aesthetic"
      ],
      "typography": {
        "display": "Instrument Serif (with heavy italic usage)",
        "body": "Space Grotesk",
        "mono": "JetBrains Mono (for eyebrows, labels, technical bits)",
        "approach": "Massive 11vw display serif with italic phrase swaps mid-sentence ('that actually works'). Lime highlight backgrounds on key words. Sans for body, mono for metadata signals."
      },
      "color": {
        "cream": "#f3efe6 (warm cream)",
        "ink": "#161514 (near-black)",
        "lime": "#ccff00 (electric lime accent)",
        "strategy": "Cream + ink + a single electric lime that gets used loudly — highlight backgrounds, hover fills, CTA inversions. Subtle paper-grain noise overlay throughout."
      },
      "layout_system": "Bento services grid (6-col, mixed spans + tall feature tile), full-width black marquee ticker between hero and services, dark inverted testimonial section with horizontally-scrolling quote cards, oversized stat treatment (140px digit with lime '+').",
      "motion": [
        "Infinite-scroll marquee under hero (services/keywords)",
        "Horizontally-scrolling testimonial track (pause on hover)",
        "Hover-fill bento tiles to lime + 3px translate w/ offset shadow",
        "Magnetic CTA — translate + box-shadow stamp on hover",
        "Lime highlight backdrop slides up on nav hover"
      ],
      "vibe": "NJ swagger. Confident, expressive, the most interesting design shop in Bergen County. Reads as creative-forward without being inaccessible.",
      "fit_for_client": "Strongest for the differentiation pitch: positions H Grant as a creative studio, not a templating shop. Best for clients who want their own site to stand out — restaurants, fitness brands, boutiques, contractors who hate looking generic. The marquee + bento read as 'we know what's current' to younger business owners."
    },
    {
      "id": "mockup-3",
      "codename": "After Hours",
      "direction": "Dark-Mode Aurora — modern tech-studio dark palette with glassmorphic cards and aurora gradients",
      "file": "/tmp/hgrant-mockups/mockup-3/index.html",
      "trend_references": [
        "Linear / Vercel / Resend / Supabase dark-aurora aesthetic",
        "glassmorphism revival (refined, not 2021-flavored)",
        "Geist + Geist Mono typography",
        "subtle animated grid backgrounds",
        "floating pill navigation",
        "AI-aware / search-aware positioning copy"
      ],
      "typography": {
        "display": "Geist (Vercel's geometric sans, 600 weight)",
        "body": "Geist",
        "mono": "Geist Mono (for eyebrows, labels, badges)",
        "approach": "Tight letter-spacing geometric sans. Aurora-gradient text fills on key headline phrases. Mono for technical/secondary signals."
      },
      "color": {
        "bg": "#07080d (deep midnight)",
        "text": "#f4f5fa (off-white)",
        "aurora": "#9b6bff → #4ec9ff → #ff7ad9 (violet → cyan → magenta gradient)",
        "strategy": "Pure dark mode with subtle animated grid + multi-stop aurora glow at the page top. Gradient text + glow on CTAs. Glassmorphic frosted cards for testimonial and contact form."
      },
      "layout_system": "Floating pill header that sticks 16px from top. Hero stays centered/symmetric (more conventional than mockup-2). Glassmorphic stat card replaces dividers. Testimonial sits in a single hero-quote frosted card with aurora glow. Contact form is a frosted backlit card.",
      "motion": [
        "Animated mask-revealed grid background",
        "Aurora-gradient halo glow on CTAs (24px shadow on hover)",
        "Cursor-tracked spotlight on each blog card",
        "Service tiles get an animated gradient border on hover",
        "Sticky floating pill header with backdrop blur"
      ],
      "vibe": "Tech-forward, AI-aware, modern. Reads as 'we understand 2026' to a younger or more digitally-native client.",
      "fit_for_client": "Strongest for the modernization pitch: positions H Grant as a future-facing studio that gets AI search, performance, and technical web — best for clients in tech-adjacent verticals (SaaS, ecommerce, healthcare-tech, B2B services) who want their site to signal sophistication. Slightly riskier for the most traditional chamber-of-commerce buyer — but the most likely to win the agency new client categories."
    }
  ],
  "shared_decisions": {
    "section_order_preserved": true,
    "real_copy": "All hero, about, testimonial, blog, and contact copy is plausible H Grant content (NJ web design / WordPress / SEO / Bergen County positioning). No lorem ipsum.",
    "phone_used": "(201) 606-2626 in hero/contact/footer of all three",
    "imagery": "Unsplash placeholders with stable URLs and ?w= sizing to keep loads light",
    "interactivity": "Vanilla JS only — IntersectionObserver scroll-reveal on all three; mockup-1 adds cursor-tracked hero spotlight; mockup-2 adds CSS marquees; mockup-3 adds cursor-tracked card glow",
    "responsive": "Each mockup has full breakpoints at ~980px and ~520px (services strip collapses, splits stack, footer-grid reflows)"
  }
}