// Case Study Page — data-driven, supports NEC, Revere, EdExchange, NCARE, Concord
// Each case: meta, lede, sections[], outcomes[], deliverables[], nextCases[]

const CASES = {
  nec: {
    id: 'nec',
    crumbs: ['Work', 'Higher Education', 'New England Conservatory'],
    eyebrow: 'Case study',
    h1: <>A five-year digital transformation for the <em>oldest independent music conservatory in the country.</em></>,
    meta: [
      { label: 'Segment',     value: 'Higher Education' },
      { label: 'Services',    value: 'Strategy · Technology' },
      { label: 'Duration',    value: 'Five-year partnership' },
      { label: 'Recognition', value: '2025 CASE Circle of Excellence' },
    ],
    visualTag: 'Institutional Transformation',
    visualAward: '2025 CASE Circle of Excellence Award',
    visualImage: 'assets/nec-hero.jpg',
    lede: 'The New England Conservatory did not need a visual refresh. They needed a platform that could hold a 155-year-old institution with doctoral students, pre-college parents, 800 annual performances, and dozens of departments that had all grown their own digital habits.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>NEC is the oldest independent music conservatory in the United States. The audience sprawls — prospective undergraduates, doctoral candidates, parents of pre-college students, alumni, concertgoers, faculty, press, donors — and each one arrived at the site with a different job to do.</p>
            <p>The previous platform treated them as one. Performances were hard to find. The faculty directory was thin. Media assets lived in a dozen places. Mobile was an afterthought. Dozens of academic departments and ensembles had improvised their own subsites over the years. The result was a digital presence that worked for none of its audiences and was painful to maintain.</p>
            <p>This was not a visual problem. It was a structural one.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We started with stakeholder interviews. Admissions, advancement, communications, academic leadership, the performance office, the faculty. Thirty-plus conversations before anything was designed. The pattern that surfaced was not surprising: people did not disagree about what the site needed to do. They disagreed about which audience was the priority, and nobody had resolved it.</p>
            <p>So we resolved it. We mapped user journeys, audited the existing analytics, and inventoried every piece of content the institution produced. From that work we built a content architecture that treated each major audience as a first-class reader — and a governance model that let departments keep their voices without producing twenty inconsistent subsites.</p>
            <p>Then we built. A custom CMS designed around rich media, complex academic structure, and a dynamic performance calendar. A design system that holds institutional identity and artistic personality at once. A mobile experience that was designed first, not retrofitted. Integrated events. A redesigned faculty directory. Video, photography, and sound woven throughout the experience rather than bolted on.</p>
            <div className="q-pull">
              Strategic insight, technical expertise, and a collaborative spirit. Quarterdeck helped us launch a dynamic, high-performing site that engages our audience and advances our mission.
              <span className="q-pull-by">Ryan Durkin <span className="role">· Director of Content Strategy and Data Analytics, New England Conservatory</span></span>
            </div>
            <p>We ran this as a multi-phase engagement over several years, not a single six-month sprint. That was deliberate. A rebuild of that scope doesn't survive contact with a real institution unless you iterate with it.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>The navigation simplified. Pages got faster. Mobile stopped being a compromise. The events calendar — something the conservatory actually lives by — became something you could use rather than work around. The faculty directory earned the conservatory it represents. Each department kept its voice, and the whole held together.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">155</div>
                <div className="label">Years of institutional history</div>
                <p className="desc">Held in a platform built to flex with the next 155.</p>
              </div>
              <div className="q-outcome">
                <div className="n">800+</div>
                <div className="label">Annual performances</div>
                <p className="desc">Now findable, filterable, and actually usable on a phone.</p>
              </div>
              <div className="q-outcome">
                <div className="n">2025</div>
                <div className="label">CASE Circle of Excellence</div>
                <p className="desc">"Striking design, seamless navigation, and excellent use of storytelling." — CASE judges</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The CASE award is the public version of a quieter result. The people inside NEC who had been fighting the old platform for years could finally do the work the platform was supposed to support.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Research</span><span>Thirty-plus stakeholder interviews, user journey mapping, analytics audits, and a full content inventory across departments.</span></li>
            <li><span className="t">Architecture</span><span>Content model and information architecture treating each audience — prospective students, donors, concertgoers, faculty — as a first-class reader.</span></li>
            <li><span className="t">Platform</span><span>Custom CMS supporting rich media, complex academic structure, and a dynamic performance calendar integrated with institutional systems.</span></li>
            <li><span className="t">Design system</span><span>A typographic and visual system that carries institutional identity and artistic personality without leaning on either at the expense of the other.</span></li>
            <li><span className="t">Mobile</span><span>Designed first rather than adapted after. Accessible by default.</span></li>
            <li><span className="t">Governance</span><span>A light-touch editorial model letting departments keep their voices without breaking the whole.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['revere', 'edexchange'],
  },

  revere: {
    id: 'revere',
    crumbs: ['Work', 'Business', 'Revere Auctions'],
    eyebrow: 'Case study',
    h1: <>Five years and counting: custom technology for a <em>three-hundred-year-old industry.</em></>,
    meta: [
      { label: 'Segment',  value: 'Business' },
      { label: 'Services', value: 'Technology' },
      { label: 'Duration', value: 'Five-year partnership (ongoing)' },
      { label: 'Entry',    value: 'Website rebuild' },
    ],
    visualTag: 'Technology · Business',
    visualAward: null,
    visualImage: 'assets/Revere%20-%20Case%20Study%20Hero%20Image.jpg',
    lede: 'Revere Auctions did not need a technology vendor. They needed a partner who would stay in the room long enough to understand how a traditional auction house actually works — and build the infrastructure around that reality.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>Sean Blanchet runs one of New England's established auction houses. The auction industry has a three-hundred-year model; technology has complicated it more than it simplified it. Multi-platform listing, invoicing, inventory tracking, item processing — all manual, all time-consuming, all friction that compounds across every sale.</p>
            <p>The problem was not that the tools didn't exist. The problem was that no existing tool understood the specific shape of an auction house's operation. The workflows were too particular, the data too idiosyncratic, and the pace too fast for any off-the-shelf solution to stick.</p>
            <p>The question was not whether to invest in technology. The question was whether anyone would bother learning the business well enough to build something that actually fit.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We started with the website — a rebuilt digital backbone that worked for buyers, sellers, and staff at once. That first phase forced us to understand the business. What moves through an auction house. How items are sourced, processed, listed, sold, invoiced, and retrieved. How a sale day actually runs.</p>
            <p>That understanding is what made the next phases possible. We built multi-platform integration connecting Revere's inventory to Live Auctioneers and other listing platforms — eliminating the manual re-entry that was eating staff time before every sale. We built custom invoicing and payment processing tools designed around how auction transactions actually work, not how a generic payments platform assumes they work.</p>
            <p>Then, as AI tools matured and we understood the bottlenecks well enough to be specific, we built proprietary automation for item processing. Description, categorization, workflow routing — work that had required careful human attention for every single lot, now handled by tools built for this operation and no other.</p>
            <div className="q-pull">
              Our investment in their work pays dividends daily and has freed up hours a day of staff time.
              <span className="q-pull-by">Sean Blanchet <span className="role">· Owner, Revere Auctions</span></span>
            </div>
            <p>None of this was a single sprint. Five-plus years of compounding — each phase building on the last because the team doing the building never stopped understanding the business it was building for.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>Hours of daily staff time freed. Manual processes that used to require careful human attention for every lot — eliminated or automated. The business grew; the digital infrastructure scaled with it rather than becoming the thing holding it back.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">5+</div>
                <div className="label">Years of partnership</div>
                <p className="desc">Ongoing. Each phase compounds on the last.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Hours</div>
                <div className="label">Of daily staff time freed</div>
                <p className="desc">Proprietary AI tools handling what used to require manual attention for every lot.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Custom</div>
                <div className="label">Built for this operation</div>
                <p className="desc">Not adapted from a generic platform. Built around the actual shape of the business.</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The competitive advantage is not the technology itself. It is the depth of understanding behind it. No vendor learning Revere from scratch will replicate what five years of working inside the operation produces.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Website</span><span>Full rebuild serving buyers, sellers, and staff. The digital backbone for the business.</span></li>
            <li><span className="t">Integrations</span><span>Multi-platform listing connections to Live Auctioneers and other sale platforms, eliminating manual re-entry across every sale cycle.</span></li>
            <li><span className="t">Invoicing</span><span>Custom invoicing and payment processing tools built around auction transaction logic, not generic payments assumptions.</span></li>
            <li><span className="t">Inventory</span><span>Inventory management systems designed around the pace and structure of an auction operation.</span></li>
            <li><span className="t">AI automation</span><span>Proprietary item processing tools — description, categorization, workflow routing — built for this operation specifically.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['nec', 'ncare'],
  },

  edexchange: {
    id: 'edexchange',
    crumbs: ['Work', 'Higher Education', 'EdExchange at Brown'],
    eyebrow: 'Case study',
    h1: <>Sustainability strategy for a nationally recognized <em>education research platform.</em></>,
    meta: [
      { label: 'Segment',  value: 'Higher Education' },
      { label: 'Services', value: 'Strategy' },
      { label: 'Client',   value: 'Annenberg Institute at Brown University' },
      { label: 'Entry',    value: 'Strategic positioning engagement' },
    ],
    visualTag: 'Strategy · Higher Education',
    visualAward: null,
    visualImage: 'assets/EdExchange%20Annenberg%20Brown%20-%20Case%20Study%20Hero%20Image.jpg',
    lede: 'EdExchange is not a typical education nonprofit. It is a platform — a curated exchange for applied research, hosted at the Annenberg Institute at Brown University — and it was at a strategic crossroads: significant scale, nationally recognized, and asking the right questions about what it should become.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>EdExchange occupies a genuinely unusual position: it sits between the rigor of university-based research and the practical urgency of educators and policymakers who need that research to be usable. That position is valuable. It is also hard to fund.</p>
            <p>Leadership came to Quarterdeck with a set of questions they had been living with for a while. What is EdExchange's distinctive contribution in an education research ecosystem that has many well-funded players? What does sustainability actually look like for a platform like this — not in theory, but in the specific? And if the current model has limits, what are the real alternatives?</p>
            <p>Sustainability was not a crisis — it was a question, and they wanted a rigorous answer before it became one.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We started with the landscape. Stakeholder interviews inside EdExchange and with the broader community it serves. Market and landscape analysis situating EdExchange against peer platforms, adjacent organizations, and the funding patterns that sustain them. Customer discovery with the educators and policymakers who actually use the platform — understanding what they value, what they would pay for, and what they cannot get elsewhere.</p>
            <p>From that research we built a clear picture of where EdExchange's integrated ecosystem value actually lived — the specific combination of research quality, curation, and accessibility that no peer organization fully replicated. That clarity was the foundation for everything that followed.</p>
            <p>We then modeled multiple strategic paths. Not a single recommended scenario, but a set of viable business models combining philanthropic support, partnership structures, and earned-revenue approaches — each with financial frameworks and organizational implications spelled out specifically enough to be evaluated, not just considered.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>The engagement produced something specific: a clearer value proposition, a set of decision-ready strategic options, and the financial modeling to understand what each one would actually require. Leadership left with a foundation for long-term decisions rather than a document that would age out in six months.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">Clear</div>
                <div className="label">Value proposition</div>
                <p className="desc">The distinctive contribution EdExchange makes — named and positioned against the broader ecosystem.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Multiple</div>
                <div className="label">Viable business models</div>
                <p className="desc">Not one answer. A range of real options with financial frameworks attached.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Decision-ready</div>
                <div className="label">Strategic framework</div>
                <p className="desc">Organizational structures matched to each operating model. Built to survive a leadership conversation.</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The work gave EdExchange leadership a clearer, more structured foundation for long-term decision-making — and the ability to have a specific conversation with their board and funders about what they are building toward.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Research</span><span>Stakeholder interviews, landscape analysis, and customer discovery across EdExchange's community of educators and policymakers.</span></li>
            <li><span className="t">Positioning</span><span>A clear statement of EdExchange's distinctive value in the education research ecosystem — grounded in what users cannot get elsewhere.</span></li>
            <li><span className="t">Business models</span><span>Multiple viable paths combining philanthropic support, partnership structures, and earned revenue — each modeled specifically, not gestured at.</span></li>
            <li><span className="t">Financial frameworks</span><span>Scenario modeling for each strategic path, built to support real decisions rather than illustrate possibilities.</span></li>
            <li><span className="t">Org design</span><span>Organizational structures aligned to potential operating models, with implications for team, governance, and resource allocation.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['ncare', 'nec'],
  },

  ncare: {
    id: 'ncare',
    crumbs: ['Work', 'Higher Education', 'NCARE at Northwestern'],
    eyebrow: 'Case study',
    h1: <>Rebranding, funding strategy, and go-to-market for an <em>education research consortium at an inflection point.</em></>,
    meta: [
      { label: 'Segment',  value: 'Higher Education' },
      { label: 'Services', value: 'Strategy' },
      { label: 'Client',   value: 'Northwestern University' },
      { label: 'Entry',    value: 'Organizational strategy engagement' },
    ],
    visualTag: 'Strategy · Higher Education',
    visualAward: null,
    visualImage: 'assets/Ncare%20-%20Case%20Study%20Hero%20Image.jpg',
    lede: 'The organization had a new name, a new mandate, and a funding model that no longer fit. NCARE — the Collaborative for Applied Research in Education at Northwestern University — arrived at an organizational inflection point. The research was serious. The question was whether the structure around it could hold.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>The organization had recently rebranded from the E4 Center to NCARE, reflecting a shift from a single-funder model to a broader consortium approach. The research priorities were genuine — student attendance, teacher workforce, digital learning, postsecondary pathways — and focused on the districts that most of the education research world ignored: small, mid-sized, and rural.</p>
            <p>The problem was structural. A good research agenda and a clear commitment to underserved districts is not, by itself, a funding strategy. The existing model had been built around one anchor funder. The consortium model required NCARE to become legible to a different and more diverse set of funders — and it was not yet.</p>
            <p>The distinctiveness was real. The question was whether it could be made visible.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We started with the landscape. Who else was doing applied education research, and what gaps in the field did NCARE actually fill? The answer was more specific than NCARE had been able to articulate: the combination of research rigor and a genuine commitment to the districts that university-based research rarely reaches is not common. That intersection was the position.</p>
            <p>We worked with leadership to make that position legible. A messaging framework that named what NCARE does differently — not in the language of a mission statement, but in the language a program officer at a major foundation reads and recognizes as distinct. Four core research priorities, sharpened and sequenced. A funding strategy built around the new consortium model rather than the old anchor-funder logic.</p>
            <p>Then we built the materials that made the strategy usable: funder-ready documents, engagement strategies for target states and audiences, an operating model that reflected where NCARE was trying to go.</p>
            <div className="q-pull">
              They have the ability to listen carefully and translate what they hear into action steps. And most importantly — they are committed to results that make a difference.
              <span className="q-pull-by">Paul Goren <span className="role">· Executive Director, NCARE</span></span>
            </div>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>NCARE left the engagement with a market position that was specific, a funding strategy designed for the model it was actually running, and materials ready for the funder conversations it needed to have. The research hadn't changed. What changed was that the work around the research could now hold it.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">Rebranded</div>
                <div className="label">E4 → NCARE</div>
                <p className="desc">Identity aligned to the consortium model and the expanded mandate.</p>
              </div>
              <div className="q-outcome">
                <div className="n">4</div>
                <div className="label">Core research priorities</div>
                <p className="desc">Sharpened, sequenced, and positioned for funders — not just for researchers.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Diversified</div>
                <div className="label">Funding model</div>
                <p className="desc">Built for multi-partner consortium logic rather than single-funder dependence.</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The work gave NCARE the language and the materials to have different conversations — with funders, with partners, and internally. That is what a strategy engagement should do.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Research</span><span>Stakeholder interviews, landscape analysis, and market positioning — understanding where NCARE fits in the education research ecosystem and where it doesn't.</span></li>
            <li><span className="t">Messaging</span><span>A framework positioning NCARE at the intersection of research rigor and practical impact, legible to the funders and partners it needs to reach.</span></li>
            <li><span className="t">Funding strategy</span><span>A multi-partner approach built for the consortium model — with engagement strategies for target states, funders, and audiences.</span></li>
            <li><span className="t">Funder materials</span><span>Foundation-ready documents built to support real conversations with program officers, not adapted from a generic template.</span></li>
            <li><span className="t">Operating model</span><span>An organizational structure that reflects where NCARE is going, not where it started.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['edexchange', 'revere'],
  },

  concord: {
    id: 'concord',
    crumbs: ['Work', 'Education', 'Concord Academy'],
    eyebrow: 'Case study',
    h1: <>Rebuilding 1,500 pages of institutional history for <em>one of New England's most respected independent schools.</em></>,
    meta: [
      { label: 'Segment',  value: 'K–12 Education' },
      { label: 'Services', value: 'Technology' },
      { label: 'Client',   value: 'Concord Academy' },
      { label: 'Entry',    value: 'Platform rebuild' },
    ],
    visualTag: 'Technology · Education',
    visualAward: null,
    visualImage: 'assets/concord-academy-hero.jpg',
    lede: 'Concord Academy\'s website had grown into a 1,500-page sprawl built on infrastructure that had been patched rather than rethought. The CMS made routine updates painful. The technical debt was real. The communications and IT teams who lived inside the platform every day were carrying the overhead of every shortcut that had been taken over the years.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>Concord Academy is a nationally recognized independent school with a reputation that its digital presence had stopped reflecting. The website had grown organically over years — new sections added as needs arose, old content accumulating, the CMS becoming less manageable with each successive round of updates. The result was a platform that technically existed but operationally struggled.</p>
            <p>Content lived in disconnected areas. News, academics, athletics, and alumni archives had each evolved their own structures, and the lack of coherence showed. Event calendars required manual management. Forms were inconsistent. The system worked until it didn't — and the team maintaining it could tell you exactly where the pain points were, because they encountered them daily.</p>
            <p>The challenge was not cosmetic. A visual refresh would not have solved it. What Concord needed was a platform rebuilt from the ground up — one that could hold an institution of this complexity and actually be maintained by the people responsible for it.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We rebuilt the platform entirely within a modern WordPress architecture — not a visual refresh, but a structural overhaul that preserved the institution's 1,500+ pages of content while replacing the foundation underneath them. The migration covered news, academic departments, athletics, alumni archives, and every other content area the school had built up over years. Nothing was left behind; the question was how to bring it forward in a form that would hold.</p>
            <p>New modular templates addressed the full range of content types the school produces. Improved data structures for news, events, and media galleries meant the content could be found and managed consistently, rather than in the ad-hoc formats each section had developed independently. Custom functionality for calendars, giving, and forms was built around how the school actually operated — not adapted from generic plugins that almost fit.</p>
            <p>We set up Pantheon-based Dev→Test→Live deployment environments, giving the IT team a reliable and structured path from development to production. Automated backup and update workflows removed the manual overhead that had been absorbing staff time. Performance optimization — caching, image compression, database cleanup — made the platform faster in ways the school's audiences would notice without knowing why.</p>
            <p>The engagement closed with technical documentation and hands-on training for the communications and IT teams who would own the platform going forward. The goal was not a handoff that would require constant outside support. It was a platform the school could run.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>The platform the school had maintained became something that maintained itself. Routine updates that had required careful navigation of a fragile system became straightforward. The communications team could create content using modular components without needing technical support. The IT team had a structured deployment pipeline instead of a single environment where changes went directly to production.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">1,500+</div>
                <div className="label">Pages migrated</div>
                <p className="desc">Every content area — news, academics, athletics, alumni archives — brought forward intact.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Modular</div>
                <div className="label">Content system</div>
                <p className="desc">Templates built for the full range of content the school produces. Updates the team can make themselves.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Pantheon</div>
                <div className="label">Dev→Test→Live</div>
                <p className="desc">A structured deployment pipeline replacing a single fragile environment. IT finally had a real workflow.</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The result was a unified, flexible platform that supports day-to-day operations while dramatically reducing the technical overhead the school had been absorbing. What had been a source of operational friction became something Concord could run — and maintain — with confidence.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Platform rebuild</span><span>Full WordPress rebuild within a modern Divi-based architecture. Structural overhaul, not a visual refresh.</span></li>
            <li><span className="t">Content migration</span><span>1,500+ pages migrated: news, academic departments, athletics, alumni archives, media galleries — all brought forward intact.</span></li>
            <li><span className="t">Template system</span><span>Modular design components covering the full range of content types the school produces. Built for in-house creation without technical support.</span></li>
            <li><span className="t">Custom functionality</span><span>Calendars, giving pages, and forms built around how the school actually operates — not adapted from generic plugins.</span></li>
            <li><span className="t">Performance optimization</span><span>Caching, image compression, and database cleanup. Faster pages without changing what users see.</span></li>
            <li><span className="t">Deployment environments</span><span>Pantheon-based Dev→Test→Live pipeline with automated backup and update workflows.</span></li>
            <li><span className="t">Training and documentation</span><span>Hands-on training for communications and IT staff. Technical documentation built for the people who would own the platform.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['nec', 'revere'],
  },

  'womens-edge': {
    id: 'womens-edge',
    crumbs: ['Work', 'Non-Profits', "The Women's Edge"],
    eyebrow: 'Case study',
    h1: <>Ten years of legacy content, one platform that finally <em>works the way the organization does.</em></>,
    meta: [
      { label: 'Segment',  value: 'Non-Profits' },
      { label: 'Services', value: 'Technology' },
      { label: 'Client',   value: "The Women's Edge" },
      { label: 'Entry',    value: 'Technical rebuild' },
    ],
    visualTag: 'Non-Profits · Technology',
    visualAward: null,
    visualImage: 'assets/womens-edge-hero.jpg',
    lede: "The Women's Edge had a website that reflected a decade of incremental decisions — plugins added as needs arose, a codebase that had aged past its compatibility window, and a content structure that had grown organically rather than intentionally. The organization was not failing. But the platform it was running on was increasingly in the way.",
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>The Women's Edge supports the advancement of women leaders across business and the broader community — a membership organization with a growing events calendar, active research programs, and an audience that expects a digital presence commensurate with the organization's reputation. The website had not kept pace.</p>
            <p>The underlying WordPress codebase had been built and extended over nearly a decade. It predated PHP 8, which meant it was running on infrastructure the hosting environment was phasing out. Plugins had accumulated without consolidation. Custom post types and taxonomies had been added to solve individual problems without a coherent data model behind them. The team responsible for maintaining the site had inherited a system that required constant workarounds.</p>
            <p>The risk was not theoretical. An aging PHP version is a security surface. A fragile plugin stack is a liability that compounds with every WordPress update. The question was not whether to modernize — it was whether to do it in a way that would actually hold.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We rebuilt the platform from the ground up — not a visual redesign, but a structural overhaul that brought the codebase into a state where it could be maintained and extended without constant firefighting. That meant rebuilding for PHP 8 and Pantheon compatibility, replacing deprecated plugins with consolidated functionality, and establishing a Composer-based build workflow with version control that gave the team a real development process rather than direct edits to a production environment.</p>
            <p>Ten years of legacy content came with us. We migrated the full content archive and restructured the underlying data architecture — refactoring custom post types and taxonomies so the content model actually matched how the organization produces and uses its content. Events, membership resources, research programs: each type got a structure that would serve the organization long-term, not just survive the transition.</p>
            <p>We built automated Dev→Test→Live deployment pipelines on Pantheon, replacing the ad-hoc approach that had made changes to the live site feel risky. Caching and CDN optimization brought load speeds up to where they should be for an organization whose audience includes senior business leaders and donors. Full QA testing before launch. Documentation and staff training after.</p>
            <p>The relationship didn't end at launch. Ongoing support through quarterly code audits and feature enhancements means the platform continues to improve rather than slowly accumulating the same technical debt that prompted the rebuild in the first place.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>The team that had been working around the platform could work with it. Deployments that had felt risky became routine. The content structure that had grown without a plan became something the communications team could navigate and extend. And the organization had a development relationship — not a vendor who delivered something and left — that would keep the platform current.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">10 yrs</div>
                <div className="label">Of legacy content migrated</div>
                <p className="desc">Full archive brought forward into a restructured data model built for the long term.</p>
              </div>
              <div className="q-outcome">
                <div className="n">PHP 8</div>
                <div className="label">Modern codebase</div>
                <p className="desc">A decade of technical debt resolved. Security surface closed. Platform built to stay current.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Ongoing</div>
                <div className="label">Quarterly partnership</div>
                <p className="desc">Code audits and feature enhancements. The platform keeps improving rather than drifting.</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The result is a faster, more resilient platform that can evolve with the organization's growing membership, events, and research programs — maintained by a team that knows what they're working with, supported by a partner who stays in the room.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Platform rebuild</span><span>Full WordPress rebuild for PHP 8 and Pantheon compatibility. Composer-based build workflow with version control.</span></li>
            <li><span className="t">Content migration</span><span>Ten years of legacy content migrated and restructured. Custom post types and taxonomies refactored for long-term maintainability.</span></li>
            <li><span className="t">Plugin consolidation</span><span>Deprecated plugins replaced and functionality consolidated. Fewer moving parts, more stable stack.</span></li>
            <li><span className="t">Performance</span><span>Caching and CDN optimization for load speed and uptime. Full QA testing pre-launch.</span></li>
            <li><span className="t">Deployment pipeline</span><span>Automated Dev→Test→Live environments on Pantheon. Changes tested before they reach production.</span></li>
            <li><span className="t">Training and documentation</span><span>Staff training for ongoing maintenance. Documentation built for the people who own the platform day-to-day.</span></li>
            <li><span className="t">Ongoing support</span><span>Quarterly code audits and feature enhancements. A continuing relationship, not a handoff.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['nec', 'concord'],
  },

  hazelden: {
    id: 'hazelden',
    crumbs: ['Work', 'Foundations', 'Hazelden Betty Ford Foundation'],
    eyebrow: 'Case study',
    h1: <>Reimagining lifelong recovery for one of <em>the most trusted names in addiction treatment.</em></>,
    meta: [
      { label: 'Segment',  value: 'Foundations · Healthcare' },
      { label: 'Services', value: 'Strategy' },
      { label: 'Client',   value: 'Hazelden Betty Ford Foundation' },
      { label: 'Entry',    value: 'Strategic planning engagement' },
    ],
    visualTag: 'Foundations · Strategy',
    visualAward: null,
    visualImage: 'assets/hazelden-hero.jpg',
    lede: 'Hazelden Betty Ford Foundation is one of the most trusted names in addiction treatment — a legacy built on clinical excellence, spirituality, and the 12-step tradition. The question was how to build on that success: evolving the organization\'s approach to lifelong recovery support to better meet the needs of a changing recovery landscape.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>The Dan Anderson Renewal Center — HBFF's hub for alumni engagement and lifelong recovery support — was at a strategic inflection point. Referral patterns had shifted. The organization had navigated significant staffing transitions. Consumer expectations around virtual and hybrid care had changed, permanently, in ways the field was still absorbing. The historic operating assumptions that had guided this center were no longer reliable.</p>
            <p>At the same time, the underlying demand was growing. The need for recovery support beyond acute treatment — peer connection, ongoing programming, family services, sustained engagement — was real and increasing. The challenge was not whether lifelong recovery programming mattered. The challenge was how to deliver it in ways that were financially sustainable, accessible across different models of care, and measurable enough to make the case internally and to funders.</p>
            <p>HBFF came to Quarterdeck with four strategic questions that they had not been able to answer from inside the organization: How should lifelong recovery and alumni engagement evolve in a post-COVID, hybrid care environment? What role should in-person, virtual, and digital offerings play going forward? How could renewal programming be financially sustainable while staying true to the mission? And how might these offerings reinforce the foundation's long-term strategic position — rather than functioning as peripheral programs?</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We led a structured, multi-phase strategy and innovation process to answer HBFF's core questions using evidence — not assumptions.</p>
            <p><strong>Internal insight and alignment.</strong> We began by interviewing HBFF leadership, clinicians, and program teams to understand how the organization viewed renewal and lifelong recovery support. These conversations highlighted a strong commitment to the mission, identified opportunities to further integrate services and strengthen coordination, and established a clear set of hypotheses to test through external research.</p>
            <p><strong>Consumer insight.</strong> We conducted qualitative and quantitative research across three groups: alumni engaged in renewal programming, alumni not currently engaged, and individuals in recovery outside the HBFF community. Understanding both engagement and non-engagement was as important as understanding why people participate. This research surfaced clear differences in needs, preferences, recovery capital, and engagement patterns across in-person, virtual, and hybrid models — and confirmed that support needs evolve across stages of recovery.</p>
            <p><strong>Market and competitive landscape.</strong> We analyzed recovery support models including peer networks, digital tools, retreat programming, and family services. We assessed reimbursement dynamics across private pay, insurance, government, and philanthropy, and broader trends including value-based care, virtual delivery, and the integration of mental health into behavioral health. This clarified where HBFF's strengths — brand trust, clinical credibility, spiritual programming, and family services — create real differentiation, and where new capabilities or partnerships could expand impact.</p>
            <p><strong>Financial and operating model design.</strong> We worked closely with HBFF leadership to analyze program-level economics across renewal and related offerings, including cost structures, staffing models, and utilization trends. We modeled multiple scenarios to assess evolving demand and referral patterns, and to design funding and operating models that are both mission-aligned and financially sustainable.</p>
            <p><strong>Innovation and product strategy.</strong> Using a structured, design-based process — including facilitated workshops and advisory input — we worked with HBFF leadership to identify, prioritize, and evaluate new product and program opportunities. This included ideation, concept refinement, and business modeling, with a clear path from pilot to scale.</p>
            <p><strong>Alignment and execution planning.</strong> We translated the work into a clear strategic direction, a set of prioritized initiatives, and a pilot framework designed for implementation — enabling leadership to move from analysis to action.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>HBFF left the engagement with something the organization had not previously had: a market-informed strategy for renewal and lifelong recovery that was grounded in real consumer research, honest about the financial realities, and aligned with the mission rather than in tension with it. The renewal programming that had sometimes been treated as a legacy obligation was repositioned — both strategically and organizationally — as a core component of HBFF's long-term impact and competitive relevance.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">3</div>
                <div className="label">Distinct audience segments researched</div>
                <p className="desc">Engaged alumni, non-engaged alumni, and people in recovery outside the HBFF ecosystem — including the people not engaging, which mattered most.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Clear</div>
                <div className="label">Strategic direction</div>
                <p className="desc">From four unresolved strategic questions to a defined path — with product concepts, pilot priorities, and financial models attached.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Mission-aligned</div>
                <div className="label">Financial sustainability</div>
                <p className="desc">Operating models designed to work across private pay, insurance, philanthropy, and government — without trading mission for margin.</p>
              </div>
            </div>
            <p style={{ marginTop: 40 }}>The harder outcome — the one that matters more than any deliverable — was the internal alignment the process produced. Leadership teams at legacy institutions often know what needs to change. What they need is the external rigor and structured process to resolve the questions that internal consensus alone cannot answer. That is what this engagement was designed to produce, and what it did.</p>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Internal Stakeholder Research</span><span>Interviews across leadership, clinicians, and program teams — capturing internal perspectives and identifying opportunities to better integrate and align recovery support services.</span></li>
            <li><span className="t">Consumer and Alumni Research</span><span>Qualitative and quantitative research across three distinct populations — including engaged alumni, non-engaged alumni, and individuals outside the HBFF community — surfacing differences in needs, preferences, and engagement patterns across stages of recovery.</span></li>
            <li><span className="t">Market and Competitive Analysis</span><span>Comprehensive assessment of recovery support models, reimbursement dynamics, and macro trends — clarifying where HBFF's strengths create meaningful differentiation.</span></li>
            <li><span className="t">Financial and Operating Model</span><span>Program-level economics, including cost and staffing models, and scenario planning to support sustainable, mission-aligned growth.</span></li>
            <li><span className="t">Product and Program Strategy</span><span>Defined opportunities and a structured approach for prioritizing, piloting, and scaling new offerings across delivery models.</span></li>
            <li><span className="t">Strategic Roadmap and Pilot Plan</span><span>A clear go-forward direction with prioritized initiatives and a pilot framework designed for implementation.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['edexchange', 'ncare'],
  },

  kvc: {
    id: 'kvc',
    crumbs: ['Work', 'Business', 'KVC Builders'],
    eyebrow: 'Case study',
    h1: <>Technical build for a high-end New England contractor whose work <em>deserves to be seen.</em></>,
    meta: [
      { label: 'Segment',  value: 'Business' },
      { label: 'Services', value: 'Technology' },
      { label: 'Client',   value: 'KVC Builders' },
      { label: 'Entry',    value: 'Website build' },
    ],
    visualTag: 'Business · Technology',
    visualAward: null,
    visualImage: 'assets/KVC.jpg',
    lede: 'KVC Builders constructs custom homes and high-end renovations across Metro Boston, Cape Cod, the Islands, and beyond. The work is exceptional. The challenge was a website that could hold that work — fast-loading, technically solid, and built to make image-heavy portfolios look the way they should on every screen.',
    sections: [
      {
        id: 'challenge',
        label: '01 · Challenge',
        h2: <><span className="sec-num">01</span> The challenge</>,
        body: (
          <>
            <p>KVC's portfolio spans coastal homes, traditional New England architecture, contemporary renovations, and custom detail work that doesn't survive compression or slow load times. For a firm whose reputation is built on craft, a website that loads slowly, breaks on mobile, or compromises the photography is not a minor problem — it's a direct misrepresentation of the work.</p>
            <p>The graphic design and visual direction for the site came from another firm. Quarterdeck's role was technical: take the design system and bring it to life in a way that performed at the level the work demanded. That meant image optimization without visible quality loss, responsive behavior across every viewport, and a platform stable enough that the team could maintain and update it without outside help for every change.</p>
          </>
        ),
      },
      {
        id: 'approach',
        label: '02 · What we did',
        h2: <><span className="sec-num">02</span> What we did</>,
        body: (
          <>
            <p>We built the site to handle the visual weight of high-resolution photography without sacrificing speed. Image optimization, lazy loading, caching, and CDN configuration were not afterthoughts — they were architectural decisions made before a line of code was written. The result is a site that loads quickly even on the pages that lead with full-bleed photography of finished interiors and architectural details.</p>
            <p>Responsive behavior was built carefully rather than adapted after the fact. KVC's audience includes clients and referral partners who encounter the site on every kind of device — a portfolio that breaks on a phone or displays poorly on a tablet is a missed opportunity at the moments that matter. Every layout was tested across viewports as a first-class concern, not a final QA checkbox.</p>
            <p>The CMS was configured to give the KVC team genuine control over their portfolio. Adding new projects, updating project categories, and managing content doesn't require a developer for routine changes — which matters for a firm whose portfolio grows with every project they complete.</p>
          </>
        ),
      },
      {
        id: 'outcome',
        label: '03 · What changed',
        h2: <><span className="sec-num">03</span> What changed</>,
        body: (
          <>
            <p>A site that represents the quality of the work it's showing. Photography that loads fast and renders well. A portfolio the team can maintain and extend themselves. Consistent behavior across the devices their clients actually use.</p>
            <div className="q-outcomes">
              <div className="q-outcome">
                <div className="n">Fast</div>
                <div className="label">Image-heavy pages</div>
                <p className="desc">Optimized delivery so high-resolution photography doesn't come at the cost of load time.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Every</div>
                <div className="label">Viewport</div>
                <p className="desc">Responsive behavior designed first, not retrofitted. Works the way it should on phone, tablet, and desktop.</p>
              </div>
              <div className="q-outcome">
                <div className="n">Team-managed</div>
                <div className="label">CMS</div>
                <p className="desc">Portfolio updates, new projects, content changes — all manageable without a developer in the room.</p>
              </div>
            </div>
          </>
        ),
      },
      {
        id: 'deliver',
        label: '04 · Deliverables',
        h2: <><span className="sec-num">04</span> Deliverables</>,
        body: (
          <ul className="deliver-list">
            <li><span className="t">Technical build</span><span>Full site development from an existing design system. Implementation, not design — executed to match the visual intent precisely.</span></li>
            <li><span className="t">Image optimization</span><span>Delivery pipeline for high-resolution photography: CDN configuration, lazy loading, and compression that preserves quality while cutting load time.</span></li>
            <li><span className="t">Responsive build</span><span>Careful implementation across all viewports. Every layout tested on phone, tablet, and desktop as a primary concern.</span></li>
            <li><span className="t">CMS configuration</span><span>Portfolio management configured for the team — new projects, categories, and content updates without developer involvement.</span></li>
          </ul>
        ),
      },
    ],
    nextCases: ['revere', 'womens-edge'],
  },
};

const CASE_NEXT_LABELS = {
  nec:        { tag: 'Higher Education · Technology', title: 'New England Conservatory', body: 'Five-year digital transformation for the oldest independent music conservatory in the country.' },
  revere:     { tag: 'Business · Technology',          title: 'Revere Auctions',           body: 'Five years, one compounding partnership. Started with a website; evolved into proprietary AI tools that free hours of staff time daily.' },
  edexchange: { tag: 'Higher Education · Strategy',    title: 'EdExchange at Brown',       body: 'Sustainability frameworks and strategic scenarios for a nationally recognized education research platform.' },
  ncare:      { tag: 'Higher Education · Strategy',    title: 'NCARE at Northwestern',     body: 'Rebranding, consortium funding model, and go-to-market strategy at an organizational inflection point.' },
  concord:       { tag: 'K–12 Education · Technology', title: 'Concord Academy',       body: 'A 1,500-page platform rebuild for one of New England\'s most respected independent schools — from legacy sprawl to a unified, maintainable system.' },
  'womens-edge': { tag: 'Non-Profits · Technology',    title: "The Women's Edge",      body: 'Full technical rebuild of a decade-old WordPress platform — modernized codebase, restructured content, and a deployment pipeline that made changes feel safe again.' },
  kvc:           { tag: 'Business · Technology',        title: 'KVC Builders',          body: 'Technical build for a high-end New England contractor — image-heavy portfolio site engineered for performance, responsiveness, and team-managed content.' },
  hazelden:      { tag: 'Foundations · Strategy',        title: 'Hazelden Betty Ford Foundation', body: 'Reimagining lifelong recovery programming for one of the most trusted names in addiction treatment — consumer research, market analysis, and a financially sustainable path forward.' },
};

function CasePage({ setRoute, caseId: caseIdProp }) {
  const [caseId, setCaseId] = React.useState(caseIdProp || 'nec');
  const [active, setActive] = React.useState('challenge');

  React.useEffect(() => {
    window.scrollTo({ top: 0 });
    setActive('challenge');
  }, [caseId]);

  React.useEffect(() => {
    const ids = ['challenge', 'approach', 'outcome', 'deliver'];
    const onScroll = () => {
      let cur = 'challenge';
      for (const id of ids) {
        const el = document.getElementById('sec-' + id);
        if (el && el.getBoundingClientRect().top < 140) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [caseId]);

  const scrollTo = (id) => {
    const el = document.getElementById('sec-' + id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };

  const c = CASES[caseId];
  if (!c) return null;

  return (
    <div data-screen-label={`Case Study — ${c.crumbs[2]}`}>
      <SiteNav route="case" setRoute={setRoute} theme="light" />

      <section className="q-case-hero">
        <div className="q-wrap">
          <div className="q-case-crumbs">
            <a onClick={() => setRoute('work')}>Work</a>
            {c.crumbs.slice(1).map((crumb, i) => (
              <React.Fragment key={i}>
                <span className="sep">/</span>
                <span>{crumb}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="q-case-header">
            <div className="q-eyebrow">{c.eyebrow}</div>
            <h1>{c.h1}</h1>
          </div>
          <dl className="q-case-meta">
            {c.meta.map(m => (
              <div key={m.label}><dt>{m.label}</dt><dd>{m.value}</dd></div>
            ))}
          </dl>
          <div className="q-case-visual" style={c.visualImage ? { backgroundImage: `url(${c.visualImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}}>
            <div className="q-case-visual-inner">
              <div className="tag">{c.visualTag}</div>
              {c.visualAward && <div className="award">{c.visualAward}</div>}
            </div>
          </div>
        </div>
      </section>

      <section className="q-case-body">
        <div className="q-wrap">
          <div className="q-case-layout">
            <nav className="q-case-toc" aria-label="On this page">
              {c.sections.map(s => (
                <a
                  key={s.id}
                  className={active === s.id ? 'active' : ''}
                  onClick={() => scrollTo(s.id)}
                >{s.label}</a>
              ))}
            </nav>
            <article className="q-case-article">
              <p className="lede">{c.lede}</p>
              {c.sections.map(s => (
                <section className="section" id={'sec-' + s.id} key={s.id}>
                  <h2>{s.h2}</h2>
                  {s.body}
                </section>
              ))}
            </article>
          </div>
        </div>
      </section>

      <section className="q-case-next">
        <div className="q-wrap">
          <div className="q-case-next-head">
            <h3>More recent work</h3>
            <a className="qlink qlink--on-dark" onClick={() => setRoute('work')}>All case studies <Arrow /></a>
          </div>
          <div className="q-case-next-grid">
            {c.nextCases.map(id => {
              const n = CASE_NEXT_LABELS[id];
              return (
                <div key={id} className="q-case-next-card" onClick={() => setRoute('case', id)}>
                  <div className="tag">{n.tag}</div>
                  <h4>{n.title}</h4>
                  <p>{n.body}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { CasePage });
