Build a professional website for a neurosurgery practice, in plain PHP with vanilla JS/CSS (no Composer, no Node.js, no build step, no jQuery or frontend frameworks unless there is genuinely no other way to accomplish something — flag it explicitly if so).

## Practice context
Dr. Evangelos M. Rokas, consultant neurosurgeon, Athens, Greece. 15+ years, specializing in minimally invasive brain and spine surgery, spine surgery, neuromodulation, and pain management. MD. Practices across Athens Medical Group (Peristeri, Psychiko), Metropolitan Hospital, Euroclinic Athens (Adults & Children), Henry Dunant Hospital Center, and a private practice/clinic in Mandra (Στρατηγού Νικολάου Ρόκα 30 — the only private neurosurgery office in the Thriasio Pedio area). House calls available by arrangement when the patient can't travel. Site must be bilingual: Greek (primary) and English, with a live GR/EN toggle (no page reload).

Contact: private office tel. +30 21 3043 5349, mobile +30 6944 25 16 92, email evrokas@gmail.com (supplied 2026-07-04).

## Content and structure source
Use web.erns.eu as the factual and structural source — same practice information, same section coverage, same navigation taxonomy (see below). Do NOT copy-paste any of its actual copy. Every sentence should be rewritten from scratch in a more sophisticated, editorial register (see Design direction). Where web.erns.eu content is thin or purely a stub, write real substantive content appropriate to that page rather than leaving a placeholder — flag any clinical claim you're not confident about instead of inventing specifics.

## Navigation — structure and behavior

Keep this exact menu taxonomy (translate/adapt labels for the EN version):

1. **Ο Ιατρός** (The Doctor)
   - Βιογραφικό (CV)
   - Ενδιαφέροντα (Interests)
   - Τομείς Έρευνας (Research Areas)
2. **Χειρουργική** (Surgery)
   - Χειρουργική Εγκεφάλου (Brain Surgery)
   - Χειρουργική Σπονδυλικής Στήλης (Spine Surgery)
   - Νευροτροποποίηση (Neuromodulation)
   - Αντιμετώπιση Πόνου (Pain Management)
3. **Ενημέρωση** (Information)
   - Νέα / Blog
   - Τεχνικές (Techniques)
   - Νεώτερες Τεχνικές (Newer Techniques)
   - Παθήσεις (Conditions)
   - Πληροφορίες για ασθενείς (Patient Information) — **has its own sub-submenu:**
     - Προεγχειρουργικές οδηγίες (Pre-op instructions)
     - Μετεγχειρητικές οδηγίες (Post-op instructions)
     - Μετεγχειρητικές ασκήσεις (Post-op exercises)
   - Πληροφορίες για ιατρούς (For referring doctors)
   - Πληροφορίες για επαγγελματίες υγείας (For health professionals)
4. **Δραστηριότητες** (Activities)
   - Φωτογραφίες (Photos)
   - Video
   - Συνέδρια (Conferences)
5. **Επικοινωνία** (Contact)
   - Κλείσιμο ραντεβού (Book an appointment)
   - Αποστολή email
   - Αποστολή εξετάσεων (Upload scans/DICOM)
   - Ιατρείο Μάνδρας (Mandra office)
   - Συνεργαζόμενες κλινικές (Partner clinics) — **has its own sub-submenu:**
     - Metropolitan Hospital
     - Ιατρικό Κέντρο Αθηνών – Κλινική Περιστερίου
     - Ευρωκλινική Αθηνών

**Desktop (≥ your chosen breakpoint):**
- Top-level items open their dropdown panel on `:hover`.
- Also support `:focus-within` so keyboard/Tab navigation opens the same dropdowns — mouse-only nav fails keyboard users.
- Nested items (Πληροφορίες για ασθενείς, Συνεργαζόμενες κλινικές) flyout as a secondary panel, positioned to avoid viewport clipping.
- Closing: on mouseleave with a short delay for diagonal mouse movement, and on Escape / focus leaving the menu.

**Mobile:**
- A nav button (hamburger) opens an off-canvas side menu (slide-in panel).
- Submenus open on tap/click only (no hover on touch).
- Accordion at every level: opening a submenu closes any other submenu open at the same level, recursively.
- Tapping a top-level item with children toggles its submenu; decide whether top-level items are also real landing pages or pure toggles, and handle both cases if mixed.
- Side menu closes on: tap outside, Escape, or selecting a leaf link.
- Vanilla JS event delegation, not one listener per item.

## Design direction — read this before writing any code
This must NOT look like a generic SaaS template or generic "elegant medical site." Avoid: warm cream + terracotta + serif display (current AI-design cliché), stock photos of smiling models in white coats, generic numbered process steps unless the content is a real sequence, vague trust-badge grids.

Synthesize three ideas:
1. **Symptom-first entry points** alongside the required nav — homepage and key landing content also offer plain-language complaint-based entry ("numbness running down my arm," "back pain that shoots into my leg," "facial pain like an electric shock"), cross-linked into Χειρουργική / Ενημέρωση content.
2. **Anatomical wayfinder as signature feature** — interactive spine/cranial SVG (pure SVG + vanilla JS), lightbox/radiology-viewer styling, cross-linking to symptom and procedure content through one shared data model.
3. **Clinical-journal editorial voice** — generous whitespace, real authored copy, conditions as short essays, typeset like a serious publication. Should read credibly to referring physicians (Πληροφορίες για ιατρούς), not just patients.

Typography: Cormorant Garamond (display) + Noto Sans (body, full Greek + Latin coverage). Clinical annotations/vertebral levels in a monospace face.

Color: derive a specific palette from the neuro-imaging/clinical world — not cream/terracotta, not near-black/neon. State the 4–6 hex values and rationale before implementing.

## SEO, Open Graph & Analytics
- Per-page `<title>` and meta description, templated per content type, written in both GR and EN — no duplicate/boilerplate descriptions across pages.
- Canonical URL on every page; `hreflang` alternates linking the GR and EN versions of each page plus `x-default`.
- Open Graph: `og:title`, `og:description`, `og:type`, `og:url`, `og:locale` (`el_GR` / `en_US` with `og:locale:alternate` for the other), `og:image` — dynamic per page (e.g. relevant anatomy illustration or a generated fallback) with a sensible site-wide default if none is set. Ensure `og:image` meets minimum size (1200×630).
- Twitter Card: `summary_large_image`, mapped from the same OG fields (don't duplicate content by hand per page).
- Structured data (JSON-LD): `Physician`/`MedicalOrganization`, `MedicalWebPage` per content page, `FAQPage` where relevant, `BreadcrumbList` site-wide. Build this from the same shared data model driving the nav/content, not hand-authored per page.
- `sitemap.xml` with hreflang alternates per URL, auto-generated from the route list; `robots.txt` referencing it.
- Google Search Console verification: a stub meta tag / file placeholder, with a single config constant to drop in the real verification code later.
- **Google Analytics (GA4) stub**: a single config file/constant for the Measurement ID (placeholder value, clearly marked `TODO`), loaded via the standard `gtag.js` snippet. Since this is a Greek/EU-based practice site, gate the analytics script behind a cookie-consent check — don't fire `gtag` until consent is given. A minimal vanilla-JS consent banner (accept/reject, stores choice, no third-party consent-management library) is in scope; keep it simple and unobtrusive, styled to match the site rather than looking bolted-on.
- Performance and SEO are linked here: keep the GA snippet `async`/deferred so it never blocks LCP.

## Technical requirements
- Plain PHP, lightweight custom router/template approach — reuse the existing MVC-style router + Twig-like renderer pattern from the current codebase if present; otherwise build a minimal equivalent
- Semantic HTML5, mobile-first responsive CSS (Grid/Flexbox, `clamp()` for fluid type), no CSS framework
- Vanilla JS only: IntersectionObserver for reveals, native `<dialog>` where modals are needed, event delegation for the nav
- Images: WebP with fallback, `srcset`, `loading="lazy"`
- Accessibility: visible keyboard focus throughout, full ARIA on the nav (`aria-expanded`, `aria-haspopup`, roving focus) and the wayfinder, reduced-motion respected, contrast checked
- Performance target: sub-2s LCP on mobile — verify with the chrome-devtools plugin after building

## Process
1. Propose the design token system (color, type scale, layout as ASCII wireframes, the one signature element) and show me before writing implementation code.
2. Self-critique the plan against the "generic AI site" failure modes above — revise anything that reads as a default rather than a deliberate choice.
3. Build in this order: shared data model (symptoms ↔ anatomy ↔ procedures ↔ SEO/schema fields) → nav component (desktop + mobile behavior, test both before moving on) → wayfinder → remaining page templates → SEO/OG/sitemap/analytics wiring.
4. Screenshot/trace as you go if tools allow it. Flag any place you had to compromise on the "no external library" constraint and why.

Ask me anything genuinely ambiguous before proceeding — don't guess on clinical content, specialty details, or contact information beyond what's given above.