# PROJECT.md — autotq-modern-ejs

## 1) Site overview
- Stack: Node/Express + EJS templates + global CSS/JS.
- Brand/entity: **AutoTQ** / Golden Hour Medical, Inc.
- Content source remains `site.config.js` for factual data (team, literature, testimonials, news, contact).
- This revision focused on UX/content-structure consistency for people imagery and team bio presentation.

## 2) Updated file structure notes (files changed in this pass)
- `views/company.ejs`
- `public/css/style.css`
- `public/js/main.js`
- `PROJECT.md`

## 3) Navigation/routes
- Primary nav remains: `/`, `/about-autotq`, `/company`, `/research`, `/literature`, `/news`, `/testimonials`, `/contact`.
- Team profile links from the Company roster continue to use slug routes (e.g., `/<member.slug>`).

## 4) Design system notes (this revision)
- Reinforced visual logic: profile/headshot treatment is now isolated to the team roster cards.
- Narrative sections (Company mission and Operating mission) continue using neutral/non-profile supporting media (`company4`, `company5`).
- Added dedicated team-roster card styles and a clear CTA hierarchy for bio reveal (`Read bio` button + collapsible panel).

## 5) Component patterns now used
- Existing split sections and capability cards retained for company narrative blocks.
- New team-specific component set:
  - `.team-roster` (2-column responsive grid)
  - `.team-person-card` (headshot + person details)
  - `.btn-team-bio` (bio reveal control)
  - `.team-bio-panel` (collapsible bio region)
- Bio reveal behavior is managed by progressive JS and keeps native button keyboard behavior.

## 6) Content/layout updates by page
- **Company (`company.ejs`)**
  - Kept non-team sections free of employee portraits in mission/operating mission blocks.
  - Reworked “Leadership and specialists” into a true roster with each person’s headshot, name, role, and a `Read bio` button.
  - Added collapsible bio panel per person instead of displaying long bios inline by default.
- **Audit pass completed (no edits required):**
  - `views/literature.ejs`
  - `views/testimonials.ejs`
  - `views/about-autotq.ejs`
  - `views/research.ejs`
  - `views/index.ejs`
  - These pages were verified to use non-employee support visuals in narrative sections.

## 7) JS behavior updates
- `public/js/main.js` now includes a scoped team bio accordion behavior:
  - Uses `.team-bio-toggle` buttons with `aria-expanded` + `aria-controls`.
  - Toggles `hidden` state on associated `.team-bio-panel`.
  - Keeps one bio open at a time within the company roster for cleaner scanning.
  - Button labels switch between **Read bio** / **Hide bio**.

## 8) Accessibility/UX notes
- Team bio interaction is button-based and keyboard accessible by default.
- ARIA state and controlled-region linkage are implemented per card.
- Visual hierarchy now clearly separates abstract/company claims from individual people content.

## 9) Known TODOs
- Optional next pass: animate panel expansion/collapse while preserving reduced-motion preferences.
- Optional next pass: consolidate legacy unused classes (`.people-list`, `.person-row`, `.team-grid`, `.team-card`) if no longer referenced elsewhere.