# Wix Page — Build Brief v1
**Output:** `public/wix/index.html`
**Goal:** Layout, effects, and copy visible. NO real images — placeholders only.

---

## Copy
Use copy exactly as written in `work/pitches/wix/copy-v2.md`. Do not rewrite.

---

## Layout System — Made Thought × Marfala

**Overall:**
- White background `#ffffff`
- Body type: `#1a1a1a`
- Section numbers/labels: `#cc0000` (CE red) — used sparingly, numbers only
- Secondary text: `#666666`
- Fonts: Typekit `https://use.typekit.net/ffj8sbd.css` + Inter from Google Fonts
- Max content width: 1200px, centered, 80px horizontal padding on desktop
- Border separators: `1px solid #e5e5e5`

**Typography scale:**
- Hero headline: 96px, font-weight 700, tight letter-spacing (-0.02em), uppercase
- Story body: 24px, font-weight 300, line-height 1.6, max-width 680px
- Section label: 11px, uppercase, letter-spacing 0.15em, CE red
- Section line (the "Built to hold" lines): 32px, font-weight 500
- Caption: 16px, font-weight 300, color #666, max-width 480px
- Team label: 13px, uppercase, letter-spacing 0.1em, #999

---

## Section Structure

### NAV (fixed, minimal)
- Left: "CE" wordmark in black, 14px, font-weight 600
- Right: "curiousendeavor.com" in #999, 13px
- Border-bottom: 1px solid #e5e5e5
- Background: rgba(255,255,255,0.96), backdrop-filter blur

---

### HERO (100vh)
- Vertically and horizontally centered
- Headline: "ONE DIRECTOR. ONE METHODOLOGY. EVERY PROJECT." — break as 3 lines
- Subline below: "Not an agency. A production system." — 18px, #666, margin-top 24px
- Small scroll cue at bottom center: "↓" in #999, 12px, animated subtle bounce

---

### STORY SECTION
- Full-width section, 160px vertical padding
- Left column (40%): Large section marker — "Curious Endeavor" in 11px uppercase red, then a thin red horizontal rule 40px wide
- Right column (60%): The story paragraph at 24px
  > "Two decades building creative departments at scale — Paris, New York — then encoding everything that made them work. The workflows became instructions. The instructions became agents. A studio where methodology is the infrastructure."
- No box, no card. Just type on white.

---

### WORK SECTIONS (3 sections, numbered)
Each section follows the same grid:

```
[01] / [BRAND IDENTITY]          [large placeholder right]
Built to hold —
not just to launch.

Olevia — deeptech food startup...
```

**Left column (45%):**
- Red number "01" at 11px uppercase + label "BRAND IDENTITY" on same line, separated by "/" 
- 32px line (the main proposition)
- 16px caption below in #666
- 40px gap between number-row and the line

**Right column (55%):**
- A placeholder box: `background: #f4f4f4`, aspect ratio 4:3
- Inside: centered text in #aaa, 12px: "[ Olevia brand work ]" / "[ Asset generator ]" / "[ Competitive research tool ]"
- The placeholder has a subtle 1px border: #e0e0e0

**Section divider:** 1px solid #e5e5e5 at top of each section
**Vertical padding:** 120px top and bottom per section

Sections:
1. 01 / BRAND IDENTITY → "Built to hold — not just to launch." → Olevia caption
2. 02 / ASSET CREATION → "Brief in. On-brand creative out." → Future Forward caption
3. 03 / RESEARCH & INTELLIGENCE → "Seventeen competitors. Every one mapped — identity, positioning, channel." → eToro caption

---

### TEAM SECTION
Two rows, clean grid. 160px vertical padding. Border-top separator.

**Row label:** "THE PEOPLE" — 11px, uppercase, red, margin-bottom 48px

**Row 1 — Partners (4 columns):**
Each column:
- Placeholder circle avatar: 72px diameter, background #f0f0f0, border 1px solid #e0e0e0
- Name below: 15px, font-weight 500
- Role: 13px, #999

Names + roles:
- Assaf / Creative Direction
- Dan / Art Direction
- Lukas / Strategy
- Felipe / Engineering

**Divider line between rows** — 1px solid #e5e5e5, margin 48px 0

**Row label 2:** "THE SPECIALISTS" — 11px, uppercase, #999, margin-bottom 32px

**Row 2 — Agents (8 columns):**
Smaller: 48px circle placeholders, #f4f4f4
- Kitt / Orchestration
- Gerri / Operations
- Ogilvy / Copy
- Tatiana / Visual
- Jessica / Art Direction
- Julia / Research
- Thibault / Engineering
- Anton / Quality

**Below both rows, full width centered:**
"Taste and accountability aren't features. They're inputs."  — 20px, #1a1a1a, text-align center, margin-top 64px
"The methodology runs. The director closes the loop." — 16px, #666, text-align center, margin-top 12px

---

### FOOTER
- 48px padding
- Left: "© Curious Endeavor 2026"
- Right: "assaf@curiousendeavor.com"
- Both in 13px, #999
- Border-top: 1px solid #e5e5e5

---

## Effects (GSAP + ScrollTrigger via CDN)

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
```

**Hero:**
- Headline: 3 lines each animate in with `opacity:0, y:30` → `opacity:1, y:0`, stagger 0.15s, `ease:"power3.out"`, on page load after 300ms delay

**Story section:**
- Paragraph reveals word by word OR as a block: `opacity:0, y:20` → `opacity:1, y:0` on scroll entry, `ease:"power2.out"`

**Each work section:**
- Left column (text): slides in from left: `opacity:0, x:-30` → `opacity:1, x:0`
- Right column (placeholder): slides in from right: `opacity:0, x:30` → `opacity:1, x:0`
- Both triggered simultaneously on scroll entry, `duration:0.7`

**Team rows:**
- Each avatar stagger: `opacity:0, y:20` → `opacity:1, y:0`, stagger 0.05s per item

**Section borders:**
- Each section border draws in: `scaleX:0` → `scaleX:1`, transform-origin left, `duration:0.6`

**Rules:**
- ease: "power3.out" everywhere
- NO bounce, NO elastic
- start: "top 80%" for all scroll triggers
- scrub: false — snap reveals, not continuous scroll-linked

---

## Done When
- File at `public/wix/index.html`, self-contained
- All 5 sections present: nav, hero, story, 3 work sections, team, footer
- Copy matches `copy-v2.md` exactly
- All placeholders clearly labeled with what will go there
- GSAP effects working on scroll
- Looks clean and precise at 1440px wide
- Commit: `git add public/wix/ && git commit -m "feat: Wix page v1 — layout and effects, no images"`
