Meridian Span Engineering — Civil & Structural Engineering Firm Website (8 Pages)

8 pages, each a complete, self-contained HTML page — a blueprint-technical engineering design: deep cyanotype blueprint panels with white linework alternating with drafting-paper bands, JetBrains Mono for labels, dimensions and navigation over Inter Tight headings and body, safety-orange highlights, sharp-cornered title-block cards, dimension-line section headings and circled section-cut markers. 1. Home (index.html) — blueprint hero with a truss bridge elevation that draws itself and a title block, disciplines ticker, six service detail cards, count-up stats, animated load-path diagram, three featured projects, lifecycle dimension chain, client review notes, RFP call to action. 2. Services (services.html) — six discipline rows (structural, civil site, bridges & culverts, stormwater, forensic/condition assessments, construction administration) with codes and deliverables, a standards glossary, civil + structural split, FAQ. 3. Sectors (sectors.html) — five stacking sector sheets (municipal, education, healthcare, industrial, multifamily) with count-up metrics, firm-wide stats and a public procurement explainer. 4. Projects (projects.html) — a filterable portfolio of eight projects and a featured case sheet. 5. Approach (approach.html) — the project lifecycle drawn as a dimension chain, QA/QC review gates, tools (named generically) and construction-phase response meters. 6. Team (team.html) — six leadership title-block cards with monograms, a licensure tile map and list, firm facts. 7. Careers (careers.html) — six expandable open roles, benefits, path to licensure. 8. Contact / RFP (contact.html) — project inquiry form, next steps, proposals desk, procurement FAQ. ANIMATION. The hero truss elevation draws itself line by line on the blueprint grid and its labels fade in after; dimension lines in section headings extend outward as each heading scrolls in; stats and sector metrics count up (they read the number you type); the load-path arrows pulse from load to slab to beam to column to footing in step with the list beside them; meters fill; the disciplines ticker scrolls; sector sheets stack as you scroll (on wide screens); and hovering or focusing a project card wipes a section-cut drawing across its photo. Everything is visible without JavaScript, and visitors who ask for reduced motion see a still page. PROJECT PORTFOLIO. Filtering happens in the browser: each project card's data-sector attribute (municipal, education, healthcare, industrial, multifamily) matches a chip's data-filter. Chip counts and the "Showing X of Y" line update themselves, so you can duplicate, delete or re-tag cards freely. The section-cut drawing on each card is decorative SVG. TITLE BLOCKS & DRAWING LABELS. The hero drawing's labels (spans, pier, scale) are ordinary text positioned over the SVG, so you can edit them; the linework itself is decorative. Title-block cells, sheet numbers (S-01…S-08) and "DWG" captions are plain text — keep them consistent with your own projects. The S-xx numbers in the navigation are generated from link order. FONTS. JetBrains Mono and Inter Tight load from Google Fonts via @font-face in each page's style block, with system monospace and sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD — a ProfessionalService with additionalType Engineering on every page, plus WebPage, CollectionPage, AboutPage or ContactPage). Copy it into your real <head> when you deploy, and update the domain, address and areas served. FORMS. The project inquiry / RFP form posts nowhere — connect it to your CRM or form service before publishing. It has no file upload; it tells visitors to email RFPs to your proposals address instead. EDITING. Change colours and fonts site-wide in the editor's Theme panel; edit the header or footer once and use "Apply to all pages"; sections can be moved, duplicated, hidden or deleted; use the Tablet and Mobile views for device-specific tweaks. CLAIMS & SAMPLE CONTENT. The company, people, address, phone, emails, projects, clients, project sizes, statistics, sector metrics, construction-phase response rates, client notes, pay ranges and benefits are fictional samples. Credentials (PE, SE, CFM, NBIS team leader), licensure states and license counts are also samples: list only licenses your firm and engineers actually hold, and use the PE and SE titles only for licensed engineers — state engineering boards restrict who may use them and what may be sealed. Code references are general; your jurisdiction's adopted editions govern. Replace everything with your own verified details before publishing. IMAGES. All photography is real Unsplash stock, self-hosted under /content-images: structures, sites and aerials, with any workers shown tiny or from a distance, so no photo shows a recognisable face. Photos are captioned like drawing sheets — rename captions to match your own projects, and replace the sample project photos with your own work.