:root { --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; --spacing-40: 40px; --spacing-64: 64px; --bg-base: #0b0d14; --glass-bg: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.08); --accent: #00e5ff; --accent-hover: #00b3cc; --text-main: #f8fafc; --text-muted: #94a3b8; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
* { box-sizing: border-box; min-width: 0; }
body { margin: 0; padding: 0; font-family: var(--font-body); background-color: var(--bg-base); color: var(--text-main); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0 0 var(--spacing-16) 0; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.2; font-weight: 600; color: #ffffff; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-hover); }
img, svg { max-width: 100%; height: auto; display: block; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 0; padding: var(--spacing-8) var(--spacing-16); background: var(--accent); color: var(--bg-base); z-index: 1000; }
.skip-link:focus { top: 0; }
.glass-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-8) var(--spacing-16); background-color: var(--accent); color: var(--bg-base); font-weight: 600; border: 1px solid var(--accent); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; font-family: var(--font-body); font-size: 0.95rem; text-align: center; }
.button:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.button-outline { background-color: transparent; color: var(--text-main); border-color: var(--glass-border); }
.button-outline:hover { background-color: var(--glass-bg); color: var(--accent); border-color: var(--accent); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-24); width: 100%; }
.site-header { padding: var(--spacing-8) 0; min-height: 48px; border-bottom: 1px solid var(--glass-border); position: relative; z-index: 100; }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-24); }
.brand { display: inline-flex; align-items: center; gap: var(--spacing-8); font-weight: 700; color: var(--text-main); flex-shrink: 0; font-size: 1.1rem; text-transform: lowercase; letter-spacing: 0.5px; white-space: nowrap; }
.brand svg { width: 24px; height: 24px; fill: var(--accent); }
.menu-toggle { background: transparent; border: 1px solid var(--glass-border); color: var(--text-main); padding: var(--spacing-8); border-radius: 4px; cursor: pointer; display: flex; }
.menu-toggle svg { width: 24px; height: 24px; fill: currentColor; }
.main-nav { display: none; width: 100%; position: absolute; top: 100%; left: 0; background: var(--bg-base); border-bottom: 1px solid var(--glass-border); padding: var(--spacing-16) var(--spacing-24); }
.main-nav.is-open { display: block; }
.nav-list { list-style: none; padding: 0; margin: auto 0; display: flex; flex-direction: column; gap: var(--spacing-16); justify-content: flex-start; }
.nav-list a { color: var(--text-main); font-weight: 500; display: block; white-space: nowrap; overflow-wrap: anywhere; }
.nav-list a:hover { color: var(--accent); }
.desktop-cta { display: none; }
@media (min-width: 1024px) { .site-header { min-height: 64px; padding: var(--spacing-16) 0; } .menu-toggle { display: none; } .main-nav { display: flex; position: static; width: auto; background: transparent; border: none; padding: 0; } .nav-list { flex-direction: row; gap: var(--spacing-24); } .mobile-cta-item { display: none; } .desktop-cta { display: inline-flex; white-space: nowrap; } }
.main-content { flex: 1; padding: var(--spacing-64) 0; }
.hero { margin-bottom: var(--spacing-64); text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--spacing-24); background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 1.125rem; color: var(--text-muted); max-width: 700px; margin: 0 auto; }
.band { display: flex; flex-direction: column; gap: var(--spacing-40); margin-bottom: var(--spacing-64); padding: var(--spacing-24); }
.band-media { flex: 1; border-radius: 8px; overflow: hidden; }
.band-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.band-text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.band-text h2 { font-size: 1.75rem; color: var(--accent); }
.band-text p { color: var(--text-muted); margin-bottom: var(--spacing-24); }
.band-metrics { display: flex; gap: var(--spacing-24); margin-bottom: var(--spacing-24); padding-top: var(--spacing-16); border-top: 1px solid var(--glass-border); }
.metric-val { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin-bottom: var(--spacing-12); }
.metric-label { font-size: 0.875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
@media (min-width: 768px) { .band { flex-direction: row; align-items: center; padding: var(--spacing-40); } .band:nth-child(even) { flex-direction: row-reverse; } .band-metrics { gap: var(--spacing-40); } }
.lead-image { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 8px; margin-bottom: var(--spacing-40); }
.content-body { max-width: 800px; margin: 0 auto; }
.content-body h2 { margin-top: var(--spacing-40); font-size: 1.5rem; border-bottom: 1px solid var(--glass-border); padding-bottom: var(--spacing-8); }
.content-body h3 { margin-top: var(--spacing-24); font-size: 1.25rem; }
.content-body p { color: var(--text-muted); margin-bottom: var(--spacing-24); }
.site-footer { border-top: 1px solid var(--glass-border); padding: var(--spacing-64) 0 var(--spacing-40); margin-top: auto; font-size: 0.875rem; color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-40); margin-bottom: var(--spacing-40); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-col h3 { font-size: 1rem; color: var(--text-main); margin-bottom: var(--spacing-16); }
.footer-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-8); }
.footer-bottom { border-top: 1px solid var(--glass-border); padding-top: var(--spacing-24); display: flex; flex-direction: column; gap: var(--spacing-16); align-items: center; text-align: center; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: var(--spacing-16); border-radius: 0; border-bottom: none; border-left: none; border-right: none; }
.cookie-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-16); }
.cookie-content p { margin: 0; font-size: 0.875rem; }
.cookie-buttons { display: flex; flex-direction: column; gap: var(--spacing-8); width: 100%; }
.cookie-buttons .button { width: 100%; }
@media (min-width: 480px) { .cookie-buttons { flex-direction: row; flex-wrap: wrap; } .cookie-buttons .button { flex: 1 1 auto; } }
@media (min-width: 768px) { .cookie-content { flex-direction: row; align-items: center; justify-content: space-between; } .cookie-content p { max-width: 60%; } .cookie-buttons { width: auto; justify-content: flex-end; flex-wrap: nowrap; } }
.form-group { margin-bottom: var(--spacing-24); }
.form-label { display: block; margin-bottom: var(--spacing-8); font-weight: 500; font-size: 0.9rem; }
.form-input, .form-textarea { width: 100%; padding: var(--spacing-12); background: var(--bg-base); border: 1px solid var(--glass-border); color: var(--text-main); border-radius: 4px; font-family: inherit; font-size: 1rem; transition: border-color 0.2s ease; }
.form-input:focus, .form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.form-textarea { min-height: 150px; resize: vertical; }
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--spacing-64); }
@media (min-width: 768px) { .contact-layout { grid-template-columns: 1fr 1fr; } }
.contact-details { padding: var(--spacing-40); }
.address-block { font-style: normal; color: var(--text-muted); line-height: 1.8; margin-top: var(--spacing-16); }
.table-wrapper { overflow-x: auto; margin-bottom: var(--spacing-24); border-radius: 4px; border: 1px solid var(--glass-border); }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 600px; }
th, td { padding: var(--spacing-12) var(--spacing-16); border-bottom: 1px solid var(--glass-border); }
th { background: rgba(255,255,255,0.05); font-weight: 600; color: var(--text-main); }
/* ENDFILE */
<!-- FILE: script.js -->
document.addEventListener("DOMContentLoaded", () => {
  const toggle = document.querySelector(".menu-toggle");
  const nav = document.getElementById("main-nav");
  if (toggle && nav) {
    toggle.addEventListener("click", () => {
      const expanded = toggle.getAttribute("aria-expanded") === "true";
      toggle.setAttribute("aria-expanded", !expanded);
      nav.classList.toggle("is-open", !expanded);
    });
  }
  const banner = document.getElementById("cookie-banner");
  if (banner && !localStorage.getItem("choicegrd_cookie_choice")) {
    banner.removeAttribute("hidden");
  }
  document.querySelectorAll("[data-cookie-choice]").forEach(btn => {
    btn.addEventListener("click", (e) => {
      const choice = e.target.getAttribute("data-cookie-choice");
      localStorage.setItem("choicegrd_cookie_choice", choice);
      if (banner) banner.setAttribute("hidden", "true");
    });
  });
});
/* ENDFILE */
<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>choicegrdsocialsprout | Financial Consulting for Marketing Companies</title>
  <meta name="description" content="Analytical financial consulting for marketing and creative agencies. Evaluating working capital, profit margins, pricing models, and M&A structures.">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300e5ff'><path d='M12 2L2 22h20L12 2zm0 4.5l6.5 13h-13L12 6.5z'/></svg>">
</head>
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <header class="site-header glass-panel">
    <div class="container header-inner">
      <a href="index.html" class="brand">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2zm0 4.5l6.5 13h-13L12 6.5z"/></svg>
        choicegrdsocialsprout
      </a>
      <nav class="main-nav" id="main-nav" aria-label="Main Navigation">
        <ul class="nav-list">
          <li><a href="cash-flow.html">Cash Flow</a></li>
          <li><a href="pricing-models.html">Pricing Models</a></li>
          <li><a href="profit-margins.html">Profit Margins</a></li>
          <li><a href="mergers-acquisitions.html">M&A Structuring</a></li>
          <li><a href="tax-relief.html">R&D Tax Relief</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="mobile-cta-item"><a href="index.html#guides" class="button">Read the Index</a></li>
        </ul>
      </nav>
      <a href="index.html#guides" class="button desktop-cta">Read the Index</a>
      <button class="menu-toggle" aria-expanded="false" aria-controls="main-nav" aria-label="Toggle navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
      </button>
    </div>
  </header>
  <main id="main" class="main-content">
    <div class="container">
      <section class="hero">
        <h1>Structural Clarity for Agency Finance</h1>
        <p>Evaluating working capital, pricing models, and structural profitability for marketing firms through rigorous financial analysis and market comparison.</p>
      </section>
      <section id="guides" class="guides-index">
        <article class="band glass-panel">
          <div class="band-media">
            <img src="images/band-cash-flow.png" alt="Abstract gradient showing fluid transfer of resources indicating working capital cycles">
          </div>
          <div class="band-text">
            <h2>Cash Flow & Working Capital</h2>
            <p>Evaluating the friction between agency payroll liabilities and client payment terms. Examining the structural trade-offs of invoice factoring, organic capital reserves, and short-term debt facilities.</p>
            <div class="band-metrics">
              <div>
                <span class="metric-val">Duration</span>
                <span class="metric-label">Cycle Analysis</span>
              </div>
              <div>
                <span class="metric-val">Friction</span>
                <span class="metric-label">Receivables</span>
              </div>
            </div>
            <a href="cash-flow.html" class="button button-outline">Analyze Capital Cycles</a>
          </div>
        </article>
        <article class="band glass-panel">
          <div class="band-media">
            <img src="images/band-pricing-models.png" alt="Geometrical blocks balancing scale representing fixed versus variable pricing structures">
          </div>
          <div class="band-text">
            <h2>Pricing Models: Retainer vs Project</h2>
            <p>Examining structural differences between recurring revenue retainers and distinct project-based delivery. Weighing predictability against the challenge of margin capture and the persistent risk of over-servicing.</p>
            <div class="band-metrics">
              <div>
                <span class="metric-val">Fixed</span>
                <span class="metric-label">Retainer</span>
              </div>
              <div>
                <span class="metric-val">Variable</span>
                <span class="metric-label">Project</span>
              </div>
            </div>
            <a href="pricing-models.html" class="button button-outline">Compare Pricing Risk</a>
          </div>
        </article>
        <article class="band glass-panel">
          <div class="band-media">
            <img src="images/band-profit-margins.png" alt="Data distribution curves showing variable margin capture across distinct overhead segments">
          </div>
          <div class="band-text">
            <h2>Profit Margin Deconstruction</h2>
            <p>Deconstructing the layers of agency profitability. Comparing direct labor cost ratios against blended overhead allocations, and identifying how unbilled hours obscure structural margin analysis.</p>
            <div class="band-metrics">
              <div>
                <span class="metric-val">Direct</span>
                <span class="metric-label">Labor Cost</span>
              </div>
              <div>
                <span class="metric-val">Blended</span>
                <span class="metric-label">Overhead</span>
              </div>
            </div>
            <a href="profit-margins.html" class="button button-outline">Assess Margin Layers</a>
          </div>
        </article>
        <article class="band glass-panel">
          <div class="band-media">
            <img src="images/band-mergers-acquisitions.png" alt="Intersecting planes representing structural alignment and valuation thresholds in acquisitions">
          </div>
          <div class="band-text">
            <h2>Structuring Earn-Outs in M&A</h2>
            <p>Assessing the mechanisms of agency acquisitions. Weighing the trade-offs of upfront liquidity versus long-term upside in earn-out structures, alongside the complexities of evaluating cultural integration risk.</p>
            <div class="band-metrics">
              <div>
                <span class="metric-val">Upfront</span>
                <span class="metric-label">Liquidity</span>
              </div>
              <div>
                <span class="metric-val">Deferred</span>
                <span class="metric-label">Earn-out</span>
              </div>
            </div>
            <a href="mergers-acquisitions.html" class="button button-outline">Review M&A Structures</a>
          </div>
        </article>
        <article class="band glass-panel">
          <div class="band-media">
            <img src="images/band-tax-relief.png" alt="Layered concentric rings mapping boundaries of qualifying expenditure in regulatory frameworks">
          </div>
          <div class="band-text">
            <h2>Tax Relief for Creative R&D</h2>
            <p>Reviewing qualifying expenditure boundaries within the creative sector. Delineating the threshold between routine campaign adaptation and genuine technical uncertainty under statutory R&D frameworks.</p>
            <div class="band-metrics">
              <div>
                <span class="metric-val">Qualifying</span>
                <span class="metric-label">Expenditure</span>
              </div>
              <div>
                <span class="metric-val">Routine</span>
                <span class="metric-label">Adaptation</span>
              </div>
            </div>
            <a href="tax-relief.html" class="button button-outline">Examine Relief Boundaries</a>
          </div>
        </article>
      </section>
      <section class="content-body glass-panel" style="padding: var(--spacing-40); margin-top: var(--spacing-64);">
        <h2>Analytical Methodology</h2>
        <p>The financial architecture of a marketing firm requires more than superficial bookkeeping; it demands structural evaluation of how creative capacity translates into sustainable capital. The tension between fluid, subjective creative work and rigid financial timelines necessitates distinct analytical frameworks.</p>
        <p>By comparing pricing structures, margin allocation, and capital cycles, choicegrdsocialsprout isolates the mechanisms that distinguish volatile operations from structurally sound firms. The analyses detailed in the index above evaluate these mechanisms without assuming a universal standard, prioritising trade-off evaluation over prescriptive instruction.</p>
      </section>
    </div>
  </main>
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <h3>choicegrdsocialsprout</h3>
          <p>Analytical financial consulting for marketing companies. Evaluating structural profitability and capital allocation.</p>
        </div>
        <div class="footer-col">
          <h3>Registered Office</h3>
          <address style="font-style: normal;">
            Social Sprout Consulting Ltd<br>
            3rd Floor, The Exchange<br>
            12 Broad Street<br>
            Birmingham<br>
            B1 2AE<br>
            United Kingdom
          </address>
        </div>
        <div class="footer-col">
          <h3>Legal & Policy</h3>
          <ul class="footer-list">
            <li><a href="privacy-policy.html">Privacy Policy</a></li>
            <li><a href="terms-of-service.html">Terms of Service</a></li>
            <li><a href="cookie-policy.html">Cookie Policy</a></li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <span>&copy; 2026 Social Sprout Consulting Ltd. All rights reserved.</span>
        <span>Independent editorial and analytical content. Not affiliated with any regulatory body, financial institution, or marketing agency.</span>
      </div>
    </div>
  </footer>
  <aside class="cookie-banner glass-panel" id="cookie-banner" hidden>
    <div class="cookie-content">
      <p>This site relies on fundamental local storage mechanisms to maintain session stability and register functional preference choices.</p>
      <div class="cookie-buttons">
        <button data-cookie-choice="accept" class="button">Accept All</button>
        <button data-cookie-choice="reject" class="button button-outline">Reject Non-Essential</button>
        <button data-cookie-choice="preferences" class="button button-outline">Preferences</button>
      </div>
    </div>
  </aside>
  <script src="script.js"></script>
</body>
</html>