diff --git a/client-script.js b/client-script.js
new file mode 100644
index 0000000..ef5dc18
--- /dev/null
+++ b/client-script.js
@@ -0,0 +1,384 @@
+// =============================================================================
+// SLA Brief Advisor — Client-Facing Form
+// Client answers practical questions → we determine the brief type
+// and calculate the submission deadline from their go-live date.
+// All business rules loaded from config.json.
+// =============================================================================
+
+let CONFIG = null;
+
+// ---- Bootstrap ----
+document.addEventListener('DOMContentLoaded', async () => {
+  await loadConfig();
+  initDarkMode();
+  initDatePicker();
+  bindEvents();
+});
+
+async function loadConfig() {
+  try {
+    const res = await fetch('config.json?v=2026031302');
+    CONFIG = await res.json();
+  } catch (e) {
+    console.error('Failed to load config.json:', e);
+  }
+}
+
+// ---- Dark Mode ----
+function initDarkMode() {
+  const saved = localStorage.getItem('sla-dark-mode');
+  if (saved === 'true' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark');
+  }
+  updateDarkIcons();
+  document.getElementById('darkToggle').addEventListener('click', () => {
+    document.documentElement.classList.toggle('dark');
+    localStorage.setItem('sla-dark-mode', document.documentElement.classList.contains('dark'));
+    updateDarkIcons();
+  });
+}
+
+function updateDarkIcons() {
+  const isDark = document.documentElement.classList.contains('dark');
+  document.getElementById('sunIcon').classList.toggle('hidden', !isDark);
+  document.getElementById('moonIcon').classList.toggle('hidden', isDark);
+}
+
+// ---- Date Picker ----
+function initDatePicker() {
+  flatpickr('#golive', {
+    dateFormat: 'Y-m-d',
+    altInput: true,
+    altFormat: 'd M Y',
+    disableMobile: true,
+    minDate: 'today',
+    disable: [function(date) { return date.getDay() === 0 || date.getDay() === 6; }],
+    onChange: () => validateForm()
+  });
+}
+
+// ---- Event Bindings ----
+function bindEvents() {
+  document.getElementById('contentType').addEventListener('change', validateForm);
+  document.getElementById('golive').addEventListener('change', validateForm);
+  document.getElementById('clientForm').addEventListener('submit', onSubmit);
+  document.getElementById('resetBtn').addEventListener('click', resetForm);
+}
+
+function validateForm() {
+  const contentType = document.getElementById('contentType').value;
+  const golive = document.getElementById('golive').value;
+  document.getElementById('calcBtn').disabled = !(contentType && golive);
+}
+
+function onSubmit(e) {
+  e.preventDefault();
+  calculateAndRender();
+}
+
+function resetForm() {
+  document.getElementById('contentType').value = '';
+  document.getElementById('assetVolume').value = '0_30';
+  document.getElementById('needsVideo').checked = false;
+  document.getElementById('needsHTML').checked = false;
+  document.getElementById('needsTranslation').checked = false;
+  document.getElementById('needsSyndication').checked = false;
+  const goliveEl = document.getElementById('golive');
+  if (goliveEl._flatpickr) goliveEl._flatpickr.clear();
+  document.getElementById('calcBtn').disabled = true;
+  document.getElementById('results').classList.add('hidden');
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+// ---- Determine Brief Type from Form Answers ----
+// Maps practical client needs → config brief type ID
+function determineBriefType() {
+  const contentType = document.getElementById('contentType').value; // pdp | eventing
+  const needsVideo = document.getElementById('needsVideo').checked;
+  const needsHTML = document.getElementById('needsHTML').checked;
+  const needsTranslation = document.getElementById('needsTranslation').checked;
+  const needsSyndication = document.getElementById('needsSyndication').checked;
+
+  const needsProduction = needsVideo || needsHTML;
+
+  // Syndication only — no production, no translation
+  if (needsSyndication && !needsProduction && !needsTranslation) {
+    return 'country_retailer_request';
+  }
+
+  // Has production needs
+  if (needsProduction) {
+    // Video/motion → Adaptation (master exists, motion content)
+    return 'country_pull_adaptation';
+  }
+
+  // Translation only or simple resize/crop
+  if (needsTranslation) {
+    return 'country_pull_simple';
+  }
+
+  // Syndication + translation but no production
+  if (needsSyndication) {
+    if (contentType === 'pdp') return 'local_push_pdp';
+    return 'local_push_eventing';
+  }
+
+  // Fallback: simple pull
+  return 'country_pull_simple';
+}
+
+// ---- Business Day Arithmetic ----
+function addBusinessDays(startDate, days) {
+  const result = new Date(startDate);
+  let added = 0;
+  while (added < days) {
+    result.setDate(result.getDate() + 1);
+    if (result.getDay() !== 0 && result.getDay() !== 6) added++;
+  }
+  return result;
+}
+
+function subtractBusinessDays(endDate, days) {
+  const result = new Date(endDate);
+  let removed = 0;
+  while (removed < days) {
+    result.setDate(result.getDate() - 1);
+    if (result.getDay() !== 0 && result.getDay() !== 6) removed++;
+  }
+  return result;
+}
+
+function businessDaysBetween(start, end) {
+  let count = 0;
+  const d = new Date(start);
+  while (d < end) {
+    d.setDate(d.getDate() + 1);
+    if (d.getDay() !== 0 && d.getDay() !== 6) count++;
+  }
+  return count;
+}
+
+function formatDate(date) {
+  if (!date) return '--';
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  return date.getDate() + ' ' + months[date.getMonth()] + ' ' + date.getFullYear();
+}
+
+// ---- Calculation Engine ----
+function calculateAndRender() {
+  const briefId = determineBriefType();
+  const assetVolume = document.getElementById('assetVolume').value;
+  const goliveStr = document.getElementById('golive').value;
+  const needsTranslation = document.getElementById('needsTranslation').checked;
+  const needsSyndication = document.getElementById('needsSyndication').checked;
+
+  if (!briefId || !goliveStr) return;
+
+  const goLive = new Date(goliveStr + 'T00:00:00');
+  const cfg = CONFIG.stageConfigs;
+  const handoverDays = CONFIG.meta.handoverDays;
+
+  // Get brief type info
+  const bt = CONFIG.briefTypes.find(b => b.id === briefId);
+
+  // Start from the stage matrix, then overlay client toggles
+  const matrix = [...CONFIG.stageMatrix[briefId]];
+
+  // Force always-active stages (Opera Upload)
+  CONFIG.stages.forEach((stage, i) => {
+    const sCfg = cfg['stage' + stage.number];
+    if (sCfg && sCfg.alwaysActive) matrix[i] = true;
+  });
+
+  // Client toggles can activate translation/syndication even if the base
+  // brief type doesn't include them
+  if (needsTranslation) {
+    matrix[3] = true; // Translation (Salsify PDP)
+    matrix[4] = true; // Translation (Asset)
+  }
+  if (needsSyndication && !matrix[7]) {
+    matrix[7] = true; // Syndication
+  }
+
+  // Calculate total project days using a temp start date
+  const tempStart = new Date('2026-01-05T00:00:00'); // Arbitrary Monday
+  const stages = [];
+  let currentDate = new Date(tempStart);
+
+  // Stage 1: DMI Asset Creation
+  const s1 = calcStage(0, matrix[0], currentDate, () => {
+    const opt = cfg.stage1.fields.complexity.options.find(o => o.value === cfg.stage1.fields.complexity.default);
+    return { handover: handoverDays, wip: opt ? opt.days : 0, feedback: cfg.stage1.fields.marketApprovalDays.default, revisions: cfg.stage1.fields.revisionRounds.default * cfg.stage1.fields.revisionDays.default };
+  });
+  stages.push(s1);
+  currentDate = s1.end;
+
+  // Stage 2: Mastering / Copy
+  const s2 = calcStage(1, matrix[1], currentDate, () => {
+    const masterOpt = cfg.stage2.fields.masteringComplexity.options.find(o => o.value === cfg.stage2.fields.masteringComplexity.default);
+    const copyOpt = cfg.stage2.fields.copyComplexity.options.find(o => o.value === cfg.stage2.fields.copyComplexity.default);
+    return { handover: handoverDays, wip: (masterOpt ? masterOpt.days : 0) + (copyOpt ? copyOpt.days : 0), feedback: 0, revisions: 0 };
+  });
+  stages.push(s2);
+  currentDate = s2.end;
+
+  // Stage 3: Global Rollout
+  const s3 = calcStage(2, matrix[2], currentDate, () => {
+    return { handover: handoverDays, wip: cfg.stage3.fields.rolloutDays.default, feedback: 0, revisions: 0 };
+  });
+  stages.push(s3);
+  currentDate = s3.end;
+
+  // Stages 4 & 5: Translation (parallel)
+  const translationActive = matrix[3] || matrix[4];
+  const s45 = calcStage(3, translationActive, currentDate, () => {
+    const wcOpt = cfg.stage4_5.fields.wordCount.options.find(o => o.value === cfg.stage4_5.fields.wordCount.default);
+    return { handover: handoverDays, wip: wcOpt ? wcOpt.days : 0, feedback: cfg.stage4_5.fields.marketApprovalDays.default, revisions: cfg.stage4_5.fields.revisionRounds.default * cfg.stage4_5.fields.revisionDays.default };
+  });
+  stages.push({ ...s45, label: 'Translation' });
+  currentDate = s45.end;
+
+  // Stage 6: Production
+  const s6 = calcStage(5, matrix[5], currentDate, () => {
+    const complexity = cfg.stage6.fields.complexity.default;
+    const key = complexity + '_' + assetVolume;
+    const table = cfg.stage6.fields.crossReferenceTable;
+    return { handover: handoverDays, wip: table[key] || 0, feedback: cfg.stage6.fields.marketApprovalDays.default, revisions: cfg.stage6.fields.revisionRounds.default * cfg.stage6.fields.revisionDays.default };
+  });
+  stages.push(s6);
+  currentDate = s6.end;
+
+  // Stage 7: Opera Upload
+  const s7 = calcStage(6, matrix[6], currentDate, () => {
+    const daysMap = cfg.stage7.daysByAssetVolume;
+    return { handover: handoverDays, wip: daysMap[assetVolume] || cfg.stage7.defaultDays, feedback: 0, revisions: 0 };
+  });
+  stages.push(s7);
+  currentDate = s7.end;
+
+  // Stage 8: Syndication
+  const s8 = calcStage(7, matrix[7], currentDate, () => {
+    const complexity = cfg.stage8.fields.complexity.default;
+    const eanVolume = cfg.stage8.fields.eanVolume.default;
+    const key = complexity + '_' + eanVolume;
+    const table = cfg.stage8.fields.crossReferenceTable;
+    return { handover: handoverDays, wip: table[key] || 0, feedback: 0, revisions: 0 };
+  });
+  stages.push(s8);
+
+  // Total business days
+  const totalBizDays = businessDaysBetween(tempStart, s8.end);
+
+  // Add syndication buffer if applicable
+  let totalWithBuffer = totalBizDays;
+  if (matrix[7]) {
+    totalWithBuffer += CONFIG.meta.syndicationBufferDays;
+  }
+
+  // Work backwards from go-live
+  const submitBy = subtractBusinessDays(goLive, totalWithBuffer);
+  const estimatedCompletion = addBusinessDays(submitBy, totalBizDays);
+
+  renderResults({
+    briefType: bt,
+    stages: stages.filter(s => s.active),
+    goLive,
+    submitBy,
+    estimatedCompletion,
+    totalBizDays,
+    totalWithBuffer,
+    syndicationActive: matrix[7]
+  });
+}
+
+function calcStage(stageIndex, isActive, prevDate, getParams) {
+  const stage = CONFIG.stages[stageIndex];
+  if (!isActive) {
+    return { index: stageIndex, label: stage ? stage.label : '', active: false, days: 0, end: new Date(prevDate) };
+  }
+  const p = getParams();
+  const totalDays = p.handover + p.wip + p.feedback + p.revisions;
+  return { index: stageIndex, label: stage ? stage.label : '', active: true, days: totalDays, end: addBusinessDays(prevDate, totalDays) };
+}
+
+// ---- Render Results ----
+function renderResults(data) {
+  const resultsEl = document.getElementById('results');
+  resultsEl.classList.remove('hidden');
+
+  // Brief type
+  document.getElementById('resultBriefType').textContent = data.briefType.label;
+  const desc = Array.isArray(data.briefType.description) ? data.briefType.description.join(' · ') : data.briefType.description;
+  document.getElementById('resultBriefDesc').textContent = desc;
+
+  // Deadline banner
+  const banner = document.getElementById('deadlineBanner');
+  const today = new Date(); today.setHours(0, 0, 0, 0);
+  const submitDate = new Date(data.submitBy); submitDate.setHours(0, 0, 0, 0);
+  const isPast = submitDate < today;
+
+  if (isPast) {
+    banner.className = 'rounded-xl p-5 mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800';
+    banner.innerHTML = `
+      <div class="flex items-center gap-4">
+        <div class="w-14 h-14 rounded-full bg-red-500 dark:bg-red-600 flex items-center justify-center flex-shrink-0 shadow">
+          <svg class="w-8 h-8" fill="none" stroke="white" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        </div>
+        <div>
+          <p class="font-bold text-red-800 dark:text-red-300 text-lg">The submission deadline has already passed</p>
+          <p class="text-sm text-red-600 dark:text-red-400 mt-0.5">To go live on <strong>${formatDate(data.goLive)}</strong>, the brief needed to be submitted by <strong>${formatDate(data.submitBy)}</strong>.</p>
+          <p class="text-xs text-red-500 dark:text-red-400 mt-1">Please discuss an adjusted timeline with your project manager.</p>
+        </div>
+      </div>`;
+  } else {
+    banner.className = 'rounded-xl p-5 mb-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800';
+    banner.innerHTML = `
+      <div class="flex items-center gap-4">
+        <div class="w-14 h-14 rounded-full bg-green-500 dark:bg-green-600 flex items-center justify-center flex-shrink-0 shadow">
+          <svg class="w-8 h-8" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+        </div>
+        <div>
+          <p class="font-bold text-green-800 dark:text-green-300 text-lg">Submit your brief by ${formatDate(data.submitBy)}</p>
+          <p class="text-sm text-green-600 dark:text-green-400 mt-0.5">This gives us <strong>${data.totalBizDays} business days</strong> to deliver before your go-live on <strong>${formatDate(data.goLive)}</strong>.</p>
+          ${data.syndicationActive ? `<p class="text-xs text-green-500 dark:text-green-400 mt-1">Includes ${CONFIG.meta.syndicationBufferDays}-day syndication buffer for retailer requirements.</p>` : ''}
+        </div>
+      </div>`;
+  }
+
+  // Timeline summary
+  const summary = document.getElementById('timelineSummary');
+  summary.innerHTML = '<h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3 uppercase tracking-wide">What we need to do</h3>';
+
+  data.stages.forEach(s => {
+    const row = document.createElement('div');
+    row.className = 'flex items-center justify-between py-2.5 px-3 rounded-lg bg-gray-50 dark:bg-gray-700/40 text-sm';
+    row.innerHTML = `
+      <div class="flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-brand-500"></span>
+        <span class="font-medium text-gray-700 dark:text-gray-300">${s.label}</span>
+      </div>
+      <span class="text-gray-500 dark:text-gray-400 text-xs">${s.days} business day${s.days !== 1 ? 's' : ''}</span>
+    `;
+    summary.appendChild(row);
+  });
+
+  if (data.syndicationActive) {
+    const bufferRow = document.createElement('div');
+    bufferRow.className = 'flex items-center justify-between py-2.5 px-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 text-sm';
+    bufferRow.innerHTML = `
+      <div class="flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-amber-500"></span>
+        <span class="font-medium text-amber-700 dark:text-amber-300">Syndication Buffer</span>
+      </div>
+      <span class="text-amber-600 dark:text-amber-400 text-xs">${CONFIG.meta.syndicationBufferDays} business days</span>
+    `;
+    summary.appendChild(bufferRow);
+  }
+
+  // Summary cards
+  document.getElementById('summarySubmitBy').textContent = formatDate(data.submitBy);
+  document.getElementById('summaryCompletion').textContent = formatDate(data.estimatedCompletion);
+  document.getElementById('summaryDays').textContent = data.totalWithBuffer;
+
+  resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}