feat(vision): restyle Our Values as an exclusive-open accordion

Replace the 5 numbered value cards with a native <details name=values>
accordion — click a value to expand its description; opening one closes
the others. No JS, keyboard-accessible, degrades gracefully.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Avi6sNfBVonnK33knbkFDD

src/views/VisionValuesView.vue

@@ -48,24 +48,29 @@ const team = ['patrick', 'coco', 'charlie'] as const
       </p>
     </PageSection>
 
-    <!-- Philosophy -->
+    <!-- Values: accordion (exclusive-open) -->
-    <PageSection>
+    <PageSection width="narrow">
-      <div class="max-w-3xl">
+      <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
-        <h2 class="font-display text-2xl uppercase tracking-wider md:text-3xl">
+        {{ t('vision.philosophyTitle') }}
-          {{ t('vision.philosophyTitle') }}
+      </h2>
-        </h2>
+      <div class="mt-8 divide-y divide-border overflow-hidden rounded-lg border border-border">
-        <p class="mt-3 text-foreground/80">{{ t('vision.philosophySubtitle') }}</p>
+        <details v-for="(p, i) in philosophy" :key="p" name="values" class="group">
-      </div>
+          <summary
-      <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
+            class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-display text-base uppercase tracking-wider transition-colors hover:bg-muted/40 [&::-webkit-details-marker]:hidden"
-        <Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
+          >
-          <div class="font-display text-2xl text-accent">{{ i + 1 }}</div>
+            <span>
-          <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
+              <span class="text-accent">{{ i + 1 }}.</span> {{ t(`vision.philosophy.${p}Title`) }}
-            {{ t(`vision.philosophy.${p}Title`) }}
+            </span>
-          </h3>
+            <span
-          <p class="mt-2 text-sm leading-relaxed text-foreground/85">
+              class="shrink-0 text-xl leading-none text-accent transition-transform duration-300 group-open:rotate-45"
+            >
+              +
+            </span>
+          </summary>
+          <p class="px-5 pb-5 text-sm leading-relaxed text-foreground/85">
             {{ t(`vision.philosophy.${p}Body`) }}
           </p>
-        </Card>
+        </details>
       </div>
     </PageSection>