@koehler8/cms 1.0.0-beta.15 → 1.0.0-beta.17

package/bin/cms-create-site.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptPath = path.resolve(__dirname, '..', 'scripts', 'create-site.mjs');
+await import(pathToFileURL(scriptPath).href);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koehler8/cms",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "description": "Vertex CMS — lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,8 @@
     "cms-validate-themes": "./bin/cms-validate-themes.js",
     "cms-validate-extensions": "./bin/cms-validate-extensions.js",
     "cms-create-theme": "./bin/cms-create-theme.js",
-    "cms-create-extension": "./bin/cms-create-extension.js"
+    "cms-create-extension": "./bin/cms-create-extension.js",
+    "cms-create-site": "./bin/cms-create-site.js"
   },
   "files": [
     "src",

package/scripts/create-site.mjs

@@ -0,0 +1,11 @@
+import { runScaffold } from './scaffold.mjs';
+
+const result = await runScaffold({
+  kind: 'site',
+  argv: process.argv.slice(2),
+});
+
+if (result.message) {
+  process[result.ok ? 'stdout' : 'stderr'].write(result.message + '\n');
+}
+process.exit(result.ok ? 0 : 1);

package/scripts/scaffold.mjs

@@ -53,11 +53,16 @@ async function pathExists(p) {
   }
 }
 
+// Files in the template tree that should never be copied into the
+// scaffolded output (OS junk, editor artifacts). Dotfiles in general
+// ARE copied — site templates need .nvmrc, .gitignore, .env.example.
+const TEMPLATE_SKIP = new Set(['.DS_Store', 'Thumbs.db', '.git']);
+
 async function collectTemplateFiles(dir) {
   const out = [];
   const entries = await readdir(dir, { withFileTypes: true });
   for (const entry of entries) {
-    if (entry.name.startsWith('.')) continue;
+    if (TEMPLATE_SKIP.has(entry.name)) continue;
     const full = path.join(dir, entry.name);
     if (entry.isDirectory()) {
       out.push(...(await collectTemplateFiles(full)));
@@ -86,7 +91,7 @@ function applySubstitutions(content, subs) {
  * @returns {Promise<{ok: boolean, slug?: string, targetDir?: string, message?: string}>}
  */
 export async function runScaffold({ kind, argv, cwd = process.cwd(), frameworkRoot } = {}) {
-  if (kind !== 'theme' && kind !== 'extension') {
+  if (kind !== 'theme' && kind !== 'extension' && kind !== 'site') {
     return { ok: false, message: `unknown kind: ${kind}` };
   }
   const root = frameworkRoot || defaultFrameworkRoot();
@@ -115,10 +120,18 @@ export async function runScaffold({ kind, argv, cwd = process.cwd(), frameworkRo
   const displayName = toDisplayName(slug);
   const subs = { __SLUG__: slug, __DISPLAY_NAME__: displayName };
   const templateDir = path.join(root, 'templates', 'scaffolds', kind);
-  const defaultDirName = kind === 'theme' ? 'themes' : 'extensions';
-  const targetDir = args.out
-    ? path.resolve(cwd, args.out)
-    : path.join(cwd, defaultDirName, slug);
+  // Default target dir: themes/<slug>/ for themes, extensions/<slug>/ for
+  // extensions, site-<slug>/ (sibling of cwd) for sites — matches the
+  // conventional koehler8/site-<slug> repo naming.
+  let defaultTarget;
+  if (kind === 'site') {
+    defaultTarget = path.join(cwd, `site-${slug}`);
+  } else if (kind === 'theme') {
+    defaultTarget = path.join(cwd, 'themes', slug);
+  } else {
+    defaultTarget = path.join(cwd, 'extensions', slug);
+  }
+  const targetDir = args.out ? path.resolve(cwd, args.out) : defaultTarget;
 
   if (!(await pathExists(templateDir))) {
     return {
@@ -153,8 +166,7 @@ export async function runScaffold({ kind, argv, cwd = process.cwd(), frameworkRo
 }
 
 function successHeader(kind, slug, targetRel) {
-  const fileCount = kind === 'theme' ? 5 : 4;
-  return `✓ Scaffolded ${kind} "${slug}" → ${targetRel}/ (${fileCount} files)`;
+  return `✓ Scaffolded ${kind} "${slug}" → ${targetRel}/`;
 }
 
 function nextSteps(kind, slug, targetRel) {
@@ -173,33 +185,57 @@ function nextSteps(kind, slug, targetRel) {
       '',
     ].join('\n');
   }
+  if (kind === 'extension') {
+    return [
+      '',
+      'Next steps:',
+      '  1. Add to your site\'s package.json dependencies:',
+      `       "cms-ext-${slug}": "file:./${targetRel}"`,
+      '  2. Run `npm install` to symlink it into node_modules.',
+      '  3. Add to vite.config.js\'s extensions array:',
+      `       extensions: ['cms-ext-${slug}'],`,
+      `  4. Add components to ${targetRel}/components/ as needed (see ${targetRel}/README.md).`,
+      `     Or, for one-off site-only components, prefer site/components/ instead.`,
+      '',
+    ].join('\n');
+  }
+  // site
   return [
     '',
     'Next steps:',
-    '  1. Add to your site\'s package.json dependencies:',
-    `       "cms-ext-${slug}": "file:./${targetRel}"`,
-    '  2. Run `npm install` to symlink it into node_modules.',
-    '  3. Add to vite.config.js\'s extensions array:',
-    `       extensions: ['cms-ext-${slug}'],`,
-    `  4. Add components to ${targetRel}/components/ as needed (see ${targetRel}/README.md).`,
-    `     Or, for one-off site-only components, prefer site/components/ instead.`,
+    `  1. cd ${targetRel}`,
+    '  2. nvm use && npm install',
+    '  3. npm run dev          # Vite dev server on http://localhost:5173',
+    '  4. Read CLAUDE.md       # navigation guide for "where things go"',
+    '',
+    'Then start customizing:',
+    `  - Edit site/content/en/site.json (title, description, theme key)`,
+    `  - Edit site/content/en/pages/home.json (hero copy, components)`,
+    `  - Add a theme:           npx cms-create-theme <slug>`,
+    `  - Add a local extension: npx cms-create-extension <slug>`,
+    `  - Add a one-off Vue component: drop a file in site/components/`,
     '',
   ].join('\n');
 }
 
 function usage(kind) {
-  const cmd = kind === 'theme' ? 'cms-create-theme' : 'cms-create-extension';
-  const dir = kind === 'theme' ? 'themes' : 'extensions';
+  const cmds = { theme: 'cms-create-theme', extension: 'cms-create-extension', site: 'cms-create-site' };
+  const cmd = cmds[kind];
+  const defaultDir = {
+    theme: './themes/<slug>/',
+    extension: './extensions/<slug>/',
+    site: './site-<slug>/',
+  }[kind];
   return `
 Usage: npx ${cmd} <slug> [--out <directory>] [--force]
 
-Scaffolds a new @koehler8/cms ${kind} into the current site.
+Scaffolds a new @koehler8/cms ${kind} into the current directory.
 
 Arguments:
   <slug>          Lowercase kebab-case slug (e.g. "coastal", "lush-canopy").
 
 Options:
-  --out <dir>     Where to create the ${kind}. Defaults to ./${dir}/<slug>/.
+  --out <dir>     Where to create the ${kind}. Defaults to ${defaultDir}.
   --force         Overwrite an existing target directory.
   -h, --help      Show this message.
 `;

package/src/components/ComingSoonModal.vue

@@ -68,6 +68,7 @@ const props = defineProps({
 const emit = defineEmits(['close']);
 
 const dialogRef = ref(null);
+const previousFocusedElement = ref(null);
 const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const dialogTitleId = computed(() => 'coming-soon-title');
 const dialogDescriptionId = computed(() => 'coming-soon-message');
@@ -76,6 +77,13 @@ const emitClose = () => {
   emit('close');
 };
 
+const onDocumentKeydown = (event) => {
+  if (event.key === 'Escape' || event.key === 'Esc') {
+    event.preventDefault();
+    emitClose();
+  }
+};
+
 const trapFocus = (event) => {
   if (!props.open) return;
   if (typeof document === 'undefined') return;
@@ -103,6 +111,9 @@ watch(
   (isOpen) => {
     if (typeof document === 'undefined') return;
     if (isOpen) {
+      // Capture whatever was focused before the modal opened so we can
+      // restore focus on close (WCAG 2.4.3 Focus Order).
+      previousFocusedElement.value = document.activeElement;
       if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
         window.requestAnimationFrame(() => {
           dialogRef.value?.focus();
@@ -111,8 +122,15 @@ watch(
         dialogRef.value?.focus();
       }
       document.addEventListener('keydown', trapFocus);
+      document.addEventListener('keydown', onDocumentKeydown);
     } else {
       document.removeEventListener('keydown', trapFocus);
+      document.removeEventListener('keydown', onDocumentKeydown);
+      const previous = previousFocusedElement.value;
+      if (previous && typeof previous.focus === 'function') {
+        previous.focus();
+      }
+      previousFocusedElement.value = null;
     }
   }
 );
@@ -121,12 +139,14 @@ onMounted(() => {
   if (typeof document === 'undefined') return;
   if (props.open) {
     document.addEventListener('keydown', trapFocus);
+    document.addEventListener('keydown', onDocumentKeydown);
   }
 });
 
 onBeforeUnmount(() => {
   if (typeof document === 'undefined') return;
   document.removeEventListener('keydown', trapFocus);
+  document.removeEventListener('keydown', onDocumentKeydown);
 });
 </script>
 
@@ -212,19 +232,31 @@ onBeforeUnmount(() => {
 
 .coming-soon-close {
   position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
+  top: 0.5rem;
+  right: 0.5rem;
   background: transparent;
   border: none;
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
-  color: #888;
-  padding: 0.25rem;
+  /* AA-safe color (#595959 = 7:1 on white) and a 32×32 hit area for
+     2.5.8 Target Size (Minimum). */
+  color: #595959;
+  padding: 0;
+  min-width: 32px;
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
 }
 
 .coming-soon-close:hover,
-.coming-soon-close:focus {
+.coming-soon-close:focus-visible {
   color: #111111;
 }
+.coming-soon-close:focus-visible {
+  outline: 2px solid #1f2a44;
+  outline-offset: 2px;
+}
 </style>

package/src/components/Contact.vue

@@ -21,43 +21,104 @@
 
           <div class="contact-grid">
             <div class="contact-field">
-              <input class="ui-form-control" type="text" :placeholder="placeholders.name" name="entry.757423084" required>
+              <label class="contact-label ui-label-sm" for="contact-name">
+                {{ placeholders.name }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
+              <input
+                id="contact-name"
+                class="ui-form-control"
+                type="text"
+                :placeholder="placeholders.name"
+                name="entry.757423084"
+                autocomplete="name"
+                required
+                aria-required="true"
+              >
             </div>
             <div class="contact-field">
-              <input class="ui-form-control" type="email" :placeholder="placeholders.email" name="entry.886201522" required>
+              <label class="contact-label ui-label-sm" for="contact-email">
+                {{ placeholders.email }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
+              <input
+                id="contact-email"
+                class="ui-form-control"
+                type="email"
+                :placeholder="placeholders.email"
+                name="entry.886201522"
+                autocomplete="email"
+                required
+                aria-required="true"
+              >
             </div>
             <div class="contact-field">
-              <input class="ui-form-control" type="text" :placeholder="placeholders.subject" name="entry.270717970">
+              <label class="contact-label ui-label-sm" for="contact-subject">{{ placeholders.subject }}</label>
+              <input
+                id="contact-subject"
+                class="ui-form-control"
+                type="text"
+                :placeholder="placeholders.subject"
+                name="entry.270717970"
+              >
             </div>
             <div class="contact-field">
-              <input class="ui-form-control" type="tel" :placeholder="placeholders.phone" name="entry.1570175907">
+              <label class="contact-label ui-label-sm" for="contact-phone">{{ placeholders.phone }}</label>
+              <input
+                id="contact-phone"
+                class="ui-form-control"
+                type="tel"
+                :placeholder="placeholders.phone"
+                name="entry.1570175907"
+                autocomplete="tel"
+              >
             </div>
             <div class="contact-field contact-field--full">
-              <textarea class="ui-form-control ui-form-textarea" rows="6" :placeholder="placeholders.message" name="entry.1743462629" required></textarea>
+              <label class="contact-label ui-label-sm" for="contact-message">
+                {{ placeholders.message }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
+              <textarea
+                id="contact-message"
+                class="ui-form-control ui-form-textarea"
+                rows="6"
+                :placeholder="placeholders.message"
+                name="entry.1743462629"
+                required
+                aria-required="true"
+              ></textarea>
             </div>
             <div class="contact-field contact-field--full">
-              <label class="contact-label ui-label-sm">{{ challenge.label }}</label>
+              <label class="contact-label ui-label-sm" for="contact-challenge">
+                {{ challenge.label }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
               <small
                 v-if="challenge.instructions"
+                id="contact-challenge-hint"
                 class="contact-hint ui-form-hint"
                 :class="{ 'contact-hint--inline': challenge.label.length < 18 }"
               >
                 {{ challenge.instructions }}
               </small>
               <div class="ui-input-group">
-                <span class="ui-input-group__addon">{{ challenge.question }}</span>
+                <span class="ui-input-group__addon" id="contact-challenge-prompt">{{ challenge.question }}</span>
                 <input
+                  id="contact-challenge"
                   type="text"
                   class="ui-input-group__input"
                   :placeholder="challenge.placeholder"
                   v-model="challengeAnswer"
                   autocomplete="off"
                   required
+                  aria-required="true"
+                  :aria-describedby="challengeDescribedBy"
+                  :aria-invalid="hasChallengeError ? 'true' : null"
                 >
               </div>
             </div>
           </div>
 
+          <p class="contact-required-note">
+            <span class="contact-required" aria-hidden="true">*</span> Required fields
+          </p>
+
           <div class="contact-actions">
             <div
               v-if="isConfirmationVisible"
@@ -69,7 +130,7 @@
             </div>
             <button class="primary-button contact-submit" type="submit">{{ submitLabel }}</button>
           </div>
-          <small id="msg" class="contact-feedback"></small>
+          <p id="msg" class="contact-feedback" role="status" aria-live="polite" aria-atomic="true"></p>
         </form>
       </div>
     </div>
@@ -77,7 +138,7 @@
 </template>
 
 <script setup>
-import { inject, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, inject, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { trackEvent } from '../utils/analytics.js';
 
 const title = ref('Contact Us')
@@ -129,6 +190,14 @@ const challenge = reactive({
 })
 
 const challengeAnswer = ref('')
+const hasChallengeError = ref(false)
+
+const challengeDescribedBy = computed(() => {
+  const ids = ['contact-challenge-prompt']
+  if (challenge.instructions) ids.push('contact-challenge-hint')
+  if (hasChallengeError.value) ids.push('msg')
+  return ids.join(' ')
+})
 
 let expectedChallengeAnswer = ''
 let activeChallengeType = 'arithmetic'
@@ -405,12 +474,14 @@ onMounted(() => {
 
     if (!isChallengeAnswerCorrect(challengeAnswer.value)) {
       msg.textContent = challenge.errorMessage
+      hasChallengeError.value = true
       emitSubmitEvent('challenge_failed')
       challengeAnswer.value = ''
       generateChallenge()
       return
     }
 
+    hasChallengeError.value = false
     msg.textContent = pendingMessage.value
 
     try {
@@ -491,6 +562,17 @@ onUnmounted(() => {
   color: var(--contact-label-color, var(--ui-text-primary, #1f2a44));
 }
 
+.contact-required {
+  margin-left: 0.2em;
+  color: var(--contact-required-color, #a83838); /* AA-safe critical text */
+}
+
+.contact-required-note {
+  margin: -8px 0 0;
+  font-size: 0.8rem;
+  color: var(--contact-required-note-color, var(--ui-text-muted, #54627b));
+}
+
 .contact-hint--inline {
   display: inline-block;
   margin-left: 6px;

package/src/components/Footer.vue

@@ -2,10 +2,10 @@
   <footer class="site-footer ui-footer" data-analytics-section="footer">
     <div class="container ui-footer__grid">
       <div class="ui-footer__brand">
-        <a class="ui-footer__logo" href="/" aria-label="Return home">
+        <a class="ui-footer__logo" href="/">
           <img
             :src="logoSrc"
-            :alt="siteName"
+            :alt="`${siteName} – home`"
             class="site-footer__logo-img"
             loading="lazy"
             decoding="async"
@@ -25,6 +25,7 @@
                 rel="noopener noreferrer"
               >
                 <span>{{ link.text }}</span>
+                <span class="ui-footer__sr-only">(opens in a new tab)</span>
                 <span class="ui-footer__link-icon" aria-hidden="true">&gt;</span>
               </a>
             </li>
@@ -62,4 +63,16 @@ const footerLinks = computed(() =>
 .ui-footer__text {
   margin-bottom: 0;
 }
+
+.ui-footer__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 </style>

package/src/components/FooterMinimal.vue

@@ -3,7 +3,7 @@
     <div class="container" role="presentation">
       <div class="footer-grid">
         <a class="footer-logo" href="/">
-          <img :src="logoSrc" :alt="siteName" class="img-fluid" />
+          <img :src="logoSrc" :alt="`${siteName} – home`" class="img-fluid" />
         </a>
         <p class="footer-text">{{ footerText }}</p>
         <p v-if="footerDisclaimer" class="footer-disclaimer">
@@ -78,7 +78,10 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
     --footer-bg,
     color-mix(in srgb, var(--brand-bg-900, #070410) 88%, var(--brand-bg-800, #120b1f) 12%)
   );
-  color: var(--footer-text, var(--ui-text-primary, var(--brand-card-text, #f0eaf3)));
+  /* Read from --brand-footer-text (defined by the theme via tokens.footer.text)
+     so the default light/text-on-dark pairing always holds. The intermediate
+     --footer-text exists for site-level overrides. */
+  color: var(--footer-text, var(--brand-footer-text, #f0eaf3));
   padding: 48px 0 28px;
 }
 
@@ -96,7 +99,7 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
 .footer-text {
   max-width: 520px;
   margin: 0;
-  color: var(--footer-text, var(--ui-text-primary, var(--brand-card-text, #f0eaf3)));
+  color: var(--footer-text, var(--brand-footer-text, #f0eaf3));
   font-size: 0.9rem;
   line-height: 1.55;
 }
@@ -107,10 +110,7 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
   font-size: 0.75rem;
   font-style: italic;
   line-height: 1.6;
-  color: var(
-    --footer-disclaimer,
-    color-mix(in srgb, var(--ui-text-muted, var(--brand-card-text, #f0eaf3)) 70%, transparent)
-  );
+  color: var(--footer-disclaimer, var(--brand-footer-text-muted, #c8c2cf));
 }
 
 .footer-links {
@@ -124,19 +124,20 @@ const footerDisclaimer = computed(() => footerContent.value?.disclaimer || '');
 }
 
 .footer-link {
-  color: var(
-    --footer-link-color,
-    color-mix(in srgb, var(--ui-text-primary, var(--brand-card-text, #f0eaf3)) 75%, transparent)
-  );
+  color: var(--footer-link-color, var(--brand-footer-link-color, #f0eaf3));
   text-decoration: none;
   transition: color 0.2s ease, text-decoration 0.2s ease;
 }
 
 .footer-link:hover,
 .footer-link:focus-visible {
-  color: var(--footer-link-hover, var(--brand-accent-electric, #27f3ff));
+  color: var(--footer-link-hover, var(--brand-footer-link-hover, #ffffff));
   text-decoration: underline;
 }
+.footer-link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
 
 @media (prefers-reduced-motion: reduce) {
   .footer-link {

package/src/components/Header.vue

@@ -8,10 +8,10 @@
       class="site-header__section ui-header__section"
       :class="{ 'ui-header__section--compact': isHeaderCompact }"
     >
-      <nav class="site-header__nav">
+      <nav class="site-header__nav" aria-label="Primary">
         <div class="container">
           <div class="site-header__inner">
-            <a href="/" ref="logoLinkRef" class="site-header__logo logo-flash-trigger">
+            <a href="/" ref="logoLinkRef" class="site-header__logo logo-flash-trigger" :aria-label="`${siteName || 'Home'} – home`">
               <!--
                 Logo slot. Default rendering: <img> if site/assets/img/logo.png
                 exists or `content.header.logoSrc` is set, otherwise text from
@@ -56,6 +56,8 @@
               v-if="showLocaleLinks && availableLocales.length > 1"
               ref="localeWrapperRef"
               class="locale-wrapper"
+              @keydown.esc="closeLocaleMenu($event, 'escape')"
+              @focusout="onLocaleWrapperFocusOut"
             >
               <button
                 id="languages-dropdown-invoker-2"
@@ -63,8 +65,8 @@
                 class="locale-toggle"
                 type="button"
                 aria-controls="languages-dropdown-2"
-                aria-haspopup="true"
                 :aria-expanded="isLangOpen ? 'true' : 'false'"
+                aria-label="Change language"
                 @click="toggleLocaleMenu"
               >
                 <span class="locale-flag" aria-hidden="true">
@@ -221,6 +223,37 @@ const updateLocaleMenuPosition = () => {
     }
   };
 
+  // Closes the dropdown and (for keyboard dismissal) returns focus to the
+  // toggle button. Without focus restoration, ESC would leave focus on a
+  // hidden menu item — failing 1.4.13 (Content on Hover or Focus).
+  const closeLocaleMenu = (event, trigger = 'escape') => {
+    if (!isLangOpen.value) return;
+    if (event) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+    }
+    isLangOpen.value = false;
+    trackEvent('header_locale_menu_toggle', {
+      state: 'close',
+      trigger,
+      active_locale: currentLocale.value || 'en',
+    });
+    if (trigger === 'escape') {
+      nextTick(() => langButtonRef.value?.focus());
+    }
+  };
+
+  // Closes the menu when keyboard focus leaves the wrapper entirely.
+  // Without this, Tab would walk past the dropdown but leave it visible
+  // and clickable — also fails 1.4.13's "dismissable" requirement.
+  const onLocaleWrapperFocusOut = (event) => {
+    if (!isLangOpen.value) return;
+    const wrapper = localeWrapperRef.value;
+    const next = event.relatedTarget;
+    if (wrapper && next && wrapper.contains(next)) return;
+    closeLocaleMenu(null, 'focusout');
+  };
+
   const prefersReducedMotion = () =>
     typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 

package/src/components/Hero.vue

@@ -7,7 +7,7 @@
 >
     <div class="container text-center hero-content hero-inner">
       <div class="hero-eyebrow fade-up-in js-scroll-fade" style="--fade-up-delay: 0s">
-        <h2
+        <p
           :class="[
             'h4',
             'text-uppercase',
@@ -16,9 +16,9 @@
           ]"
         >
           {{ tagLine }}
-        </h2>
+        </p>
       </div>
-      <h3
+      <h1
         :class="[
           'display-heading',
           'text-uppercase',
@@ -38,7 +38,7 @@
         >
           {{ part }}
         </span>
-      </h3>
+      </h1>
       <div
         class="hero-cta-stack fade-up-in js-scroll-fade"
         style="--fade-up-delay: 0.2s"
@@ -256,8 +256,9 @@ function getHeaderOffset() {
   letter-spacing: 0.12em;
   font-size: clamp(1.1rem, 1.5vw, 1.55rem);
   line-height: 1.35;
-  color: var(--hero-text-color, var(--ui-text-primary, var(--brand-fg-100, #111)));
+  color: var(--hero-eyebrow-color, var(--brand-hero-text-on-dark, var(--brand-hero-text, #f0eaf3)));
   border-bottom: 1px solid currentColor;
+  margin: 0;
 }
 
 .hero-headline {
@@ -266,7 +267,7 @@ function getHeaderOffset() {
   line-height: 1.08;
   margin-bottom: clamp(18px, 2.5vw, 28px);
   letter-spacing: 0.04em;
-  color: var(--hero-text-color, var(--ui-text-primary, var(--brand-fg-100, #111)));
+  color: var(--hero-text-color, var(--brand-hero-text-on-dark, var(--brand-hero-text, #f0eaf3)));
 }
 
 .promo-surface {