System Requirements Document for mediainthemiddle

1. Introduction

Media in the Middle is a two-person marketing agency in Orcutt, California, serving Central Coast small businesses and organizations. This document specifies a one-page marketing website delivered as a single self-contained, responsive HTML file (HTML, CSS, and vanilla JavaScript, no framework) that the agency can preview locally and then move to its host.

The site's purpose is to explain, in plain words for busy owners and nonprofit directors, what the agency does (social media, email newsletters, websites, and local ad planning run as one coordinated plan), why it is credible (campaign-tested, local, two senior people with no junior hand-offs), how it works (peer partner, fixed packages, clear scope, written approvals), and to convert visitors into a free 20-minute call request through a contact form. The audience is Central Coast small businesses and organizations in Orcutt, Santa Maria, Nipomo, and Lompoc first. Copy must avoid agency jargon and spell out acronyms.

The site is anonymous and public: there is no account, login, or application-owned identity. The only visitor-submitted data is the contact form, whose action remains the placeholder [FORM ENDPOINT] with an explanatory comment for the agency to connect.

2. System Overview

2a. Product Interpretation and Delivery Boundary

The product is a single public web page. All content — navigation, hero, service-area strip, problem statement, services, proof points, process timeline, packages, about, contact form, and footer — lives in one HTML document with embedded CSS and vanilla JavaScript. There is no server-side application logic, no database-backed feature, no authentication, and no multi-page routing. The page is anonymous and publicly reachable; every visitor sees the same content.

Delivery is a static file the agency hosts. The contact form is intentionally left unconnected: its action attribute is the literal placeholder [FORM ENDPOINT], accompanied by an HTML comment explaining that the agency must replace it with a real form-handling endpoint (for example, a form service or mail handler) before launch. Until that endpoint is connected, form submission behavior is governed by the placeholder and the client-side validation and success-state logic described below.

The provisioned scaffold (a shared FastAPI backend, a MariaDB database, and a React frontend) is infrastructure inventory only. It does not add product requirements: this product is a static HTML file, so no backend API, database entity, or React UI is required by the accepted behavior. The static file is the deliverable; the scaffold services remain available but are not exercised by this product's accepted scope.

Removed from scope: none. No concept from the authoritative requirement thread was removed or superseded.

2b. Source Content Inventory

Not applicable — no reference directive with content_source was supplied.

2c. Page Content and Component Coverage

Media in the Middle

The single page is the anonymous public entry surface. It is organized into the following in-page sections, each reachable from the sticky navigation where applicable.

Global page shell

• Information/state: page <title> and <meta name="description"> that both mention Orcutt, Santa Maria, Nipomo, and Lompoc; LocalBusiness JSON-LD schema markup; lang attribute; viewport meta for mobile-first rendering.
• Primary actions: none at shell level beyond navigation.
• Component responsibilities: document head with SEO metadata and schema; page-load fade-in-from-black overlay; global background (near-black navy vertical wash #05070C → #0B0F18 with ~5% opacity hex/grain texture); reduced-motion detection.
• States: loading (fade from black, ~400ms); success (page visible); reduced-motion (fade, parallax, reveals, and shine disabled).

Sticky glass navigation bar

• Information/state: logo [placeholder]; links to Services / Why Us / How We Work / Packages / Contact; glowing "Book a free call" button.
• Primary actions: jump to each section; "Book a free call" scrolls to the contact form.
• Component responsibilities: frosted-glass sticky bar with hairline border; anchor links; CTA button.
• States: default; scrolled (stays pinned); keyboard focus visible on every link and button; reduced-motion (no transition flourish).

Hero

• Information/state: headline "Your marketing, finally run by someone."; subhead "Social, email, website and local ads, run as one plan by two senior people in Orcutt."; primary CTA "Book a free 20-minute call"; secondary CTA "See packages"; tracked uppercase pill tag "Orcutt · Santa Maria · Nipomo · Lompoc"; crescent moon (top) and star field (bottom) as layered parallax decoration.
• Primary actions: "Book a free 20-minute call" → contact form; "See packages" → Packages section.
• Component responsibilities: oversized Lexend 300 headline with drawn blue underline; layered parallax layers (moon slowest, stars faster, text fixed in front); CTA buttons.
• States: default; scrolled (moon drifts up and out, stars move faster, text stays); reduced-motion (static composition); mobile (parallax simplified to a single subtle layer).
• Constraint: a clear CTA is visible within one scroll at every screen size.

Service-area strip

• Information/state: "Orcutt · Santa Maria · Nipomo · Lompoc".
• Primary actions: none (informational).
• Component responsibilities: full-width strip with tracked label styling.

The problem

• Information/state: one short paragraph — the visitor knows they need to show up consistently and nobody has time to run it.
• Primary actions: none (informational).
• Component responsibilities: section heading with numbered marker and drawn underline; body paragraph.

What we do (Services)

• Information/state: four glass cards — Social Media, Email Newsletters, Websites, Local Ad Planning — each with a one-line outcome; a glowing connector line threading the cards to express "one coordinated plan."
• Primary actions: none required (informational); cards may link to the contact form as supporting action.
• Component responsibilities: bento grid of four frosted cards; single luminous 1px connector line that draws across the grid on scroll; hover lift 2px with soft blue halo.
• States: default; revealed (fade up from slight blur, once); hover; reduced-motion (connector shown statically, no reveal).

Why us

• Information/state: three numbered proof cards — (1) Campaign-tested: deadlines, approvals, compliance, paid media; (2) Local; (3) Two senior people with no hand-offs.
• Primary actions: none (informational).
• Component responsibilities: three frosted cards with oversized outlined numerals; hover lift and halo.
• States: default; revealed; hover; reduced-motion.

How we work

• Information/state: three-step horizontal timeline — Peer partner → Fixed package and clear scope → Written approvals.
• Primary actions: none (informational).
• Component responsibilities: horizontal timeline whose connecting line draws left-to-right on scroll; step labels.
• States: default; drawn (on scroll into view); reduced-motion (line shown fully drawn, no animation); mobile (stacked or horizontally scrollable so each step is fully readable).

Packages

• Information/state: three fixed-package cards; names, prices, and inclusions are [PLACEHOLDERS] and must not be invented; each card has a "Start here" button.
• Primary actions: "Start here" jumps to the contact form.
• Component responsibilities: three frosted cards with placeholder fields; CTA buttons.
• States: default; revealed; hover; focus; reduced-motion.

About

• Information/state: Sam (social media) and Morgan (email and website), each with a photo [placeholder] and one line each.
• Primary actions: none (informational).
• Component responsibilities: two-person layout with labelled glass photo placeholders (not fake portraits) and one-line bios.

Contact form (main CTA, repeated at the bottom)

• Information/state: fields — Name; Business or organization; Email; Phone (optional); Town (select: Orcutt / Santa Maria / Nipomo / Lompoc / Other); What do you need? (checkboxes: Social, Email, Website, Local ads, Not sure yet); Message; Best way to reach you. Visible labels on every field. Form action is [FORM ENDPOINT] with an explanatory comment.
• Primary actions: submit the form.
• Component responsibilities: labelled inputs; inline validation messages; friendly success state after submit; keyboard-operable; visible focus states; focused fields get a tighter, darker glow ring.
• States: default; focused; invalid (inline error per field); submitting; success (friendly confirmation); error/recovery (validation errors shown inline, user can correct and resubmit).
• Constraint: no phone number is displayed anywhere on the page.

Footer

• Information/state: "125 N. 1st St., Orcutt, CA · [contact email] · 'Proudly made in Orcutt, California' · © 2026".
• Primary actions: none required (contact email is a placeholder).
• Component responsibilities: footer text block; no phone number.

Back-to-top control

• Information/state: round button that appears after scrolling (~600px).
• Primary actions: scroll to top.
• Component responsibilities: fixed round button with glow; keyboard focusable.
• States: hidden (top of page); visible (after scroll); focus; reduced-motion (appears without flourish).

3. Functional Requirements

FR-1 — Single self-contained HTML file. As a site owner, I should receive the entire website as one self-contained, responsive HTML file using HTML, CSS, and vanilla JavaScript with no framework, so that I can preview it and move it to my host. (explicit)

• Trigger/input: the delivered file.
• Observable result: opening the file renders the full page with embedded styles and scripts; no external framework dependency.
• Failure/recovery: if a browser blocks a feature, the page still renders content and remains usable.
• Continuation: the owner previews, then uploads to the host.

FR-2 — Plain-language copy for busy owners and directors. As a busy Central Coast owner or nonprofit director, I should read plain words with no agency jargon and spelled-out acronyms, so that I understand the offer quickly. (explicit)

• Observable result: copy avoids jargon and spells out acronyms.
• Acceptance: no unexplained acronyms in visible copy.

FR-3 — One coordinated plan framing. As a visitor, I should see social media, email newsletters, websites, and local ad planning presented as one coordinated plan rather than separate vendors. (explicit)

• Observable result: the Services section presents the four services together with a connector expressing one plan.

FR-4 — Why-us proof. As a visitor, I should see why the agency is credible: it ran a congressional campaign's content on deadline with approvals, compliance, and paid media; it is local; it is two senior people with no junior hand-offs. (explicit)

• Observable result: the Why Us section shows three numbered proof cards with these points.

FR-5 — How-we-work statement. As a visitor, I should see how the agency works: peer partner not order-taker, fixed packages, clear scope, written approvals. (explicit)

• Observable result: the How We Work timeline shows the three steps.

FR-6 — Navigation. As a visitor, I should use a nav with a logo placeholder, links to Services / Why Us / How We Work / Packages / Contact, and a glowing "Book a free call" button. (explicit)

• Trigger: click/tap a link or the button.
• Observable result: the page scrolls to the corresponding section; the button scrolls to the contact form.
• Access state: anonymous public.
• Failure/recovery: anchor targets exist for every link; keyboard focus is visible.

FR-7 — Hero content and CTAs. As a visitor, I should see the headline "Your marketing, finally run by someone.", the subhead "Social, email, website and local ads, run as one plan by two senior people in Orcutt.", a primary CTA "Book a free 20-minute call", and a secondary CTA "See packages". (explicit)

• Trigger: click primary → contact form; click secondary → Packages section.
• Observable result: correct scroll destination.
• Constraint: a clear CTA is visible within one scroll at every screen size.

FR-8 — Service-area strip. As a visitor, I should see "Orcutt · Santa Maria · Nipomo · Lompoc". (explicit)

FR-9 — The problem paragraph. As a visitor, I should read one short paragraph about needing to show up consistently with nobody having time to run it. (explicit)

FR-10 — Four service cards with connector. As a visitor, I should see four glass cards (Social Media, Email Newsletters, Websites, Local Ad Planning), each with a one-line outcome, connected by a glowing line showing one coordinated plan. (explicit)

• Observable result: four cards rendered; connector line visible (drawn on scroll, static under reduced motion).

FR-11 — Three numbered proof cards. As a visitor, I should see three numbered proof cards: campaign-tested (deadlines, approvals, compliance, paid media), local, and two senior people with no hand-offs. (explicit)

FR-12 — Three-step timeline. As a visitor, I should see a three-step horizontal timeline that draws on scroll: Peer partner → Fixed package and clear scope → Written approvals. (explicit)

• Observable result: line draws left-to-right when the section enters view; fully drawn under reduced motion.

FR-13 — Three fixed-package cards with placeholders. As a visitor, I should see three fixed-package cards whose names, prices, and inclusions are placeholders (not invented), each with a "Start here" button that jumps to the form. (explicit)

• Trigger: click "Start here".
• Observable result: page scrolls to the contact form.
• Constraint: placeholders must not be replaced with invented content.

FR-14 — About section. As a visitor, I should see Sam (social media) and Morgan (email and website) with photo placeholders and one line each. (explicit)

• Observable result: two labelled glass photo placeholders and one-line bios; no fake portraits.

FR-15 — Contact form fields. As a visitor, I should complete a contact form with Name, Business or organization, Email, Phone (optional), Town (Orcutt / Santa Maria / Nipomo / Lompoc / Other), What do you need? (checkboxes: Social, Email, Website, Local ads, Not sure yet), Message, and Best way to reach you. (explicit)

• Observable result: all fields present with visible labels; Town is a select with the five options; needs are checkboxes with the five options.

FR-16 — Visible labels, inline validation, friendly success state. As a visitor, I should see visible labels, receive inline validation, and get a friendly success state after submit. (explicit)

• Trigger: submit with valid or invalid input.
• Observable result: invalid fields show inline messages and remain correctable; valid submission shows a friendly confirmation.
• Failure/recovery: user corrects errors and resubmits.
• Access state: anonymous public.

FR-17 — Form endpoint placeholder. As a site owner, I should find the form action left as [FORM ENDPOINT] with a comment explaining what to connect. (explicit)

• Observable result: the HTML contains the literal placeholder and an explanatory comment.

FR-18 — Footer. As a visitor, I should see "125 N. 1st St., Orcutt, CA · [contact email] · 'Proudly made in Orcutt, California' · © 2026". (explicit)

FR-19 — No phone number displayed. As a visitor, I should not see a phone number anywhere on the page. (explicit)

• Observable result: no phone number in visible content.

FR-20 — Mobile-first at 375px. As a visitor on a phone, I should get a layout that works at 375px with no sideways scrolling. (explicit)

• Observable result: no horizontal overflow at 375px; readable text and controls stay whole.

FR-21 — WCAG AA, focus, keyboard form. As a visitor, I should get WCAG AA contrast, visible focus states, and a keyboard-usable form. (explicit)

• Observable result: contrast meets AA; focus rings visible; form operable by keyboard.

FR-22 — Local SEO. As a site owner, I should have a page title and meta description that mention the four towns, plus LocalBusiness schema markup. (explicit)

• Observable result: <title> and <meta name="description"> mention Orcutt, Santa Maria, Nipomo, and Lompoc; JSON-LD LocalBusiness present.

FR-23 — Clear CTA within one scroll. As a visitor, I should see a clear CTA within one scroll on every screen size. (explicit)

• Observable result: hero CTA visible without scrolling past the first viewport at 375px, 768px, and 1280px.

FR-24 — Night studio look and feel. As a visitor, I should experience the specified night-studio visual system: near-black navy background (#05070C to #0B0F18) with ~5% hex/grain texture; crescent moon at top and stars at bottom; frosted glass panels with thin light-blue hairline borders; Lexend only with large 300-weight headlines and tight letter spacing; small uppercase tracked labels in outlined pill tags; single accent electric blue #4D8BFF for glow, links, and primary button (solid #1F56D8, white text); no other accent colors; editorial, roomy layout with oversized headline, bento-style card grids, numbered section markers 01, 02, 03. (explicit)

FR-25 — Motion behavior. As a visitor, I should experience: quick fade in from black on load; hero layered scroll parallax (moon slowest, stars faster, text in front, moon scrolling away); once-only scroll reveal fading up from slight blur; heading underline drawing in then catching a slow shine every few seconds; hover cards lifting 2px with soft blue glow halo; buttons glowing brighter; pressed/focused fields getting a tighter darker glow; sticky glass nav; round back-to-top button after scrolling. (explicit)

FR-26 — Reduced motion and performance. As a visitor with reduced-motion preference, I should get parallax, reveals, and shine turned off; parallax simplified on phones; only transform and opacity animated, kept fast. (explicit)

• Observable result: under prefers-reduced-motion, no parallax/reveal/shine; animations limited to transform and opacity.

4. User Personas

Central Coast small business owner

• Product context: Runs a small business in Orcutt, Santa Maria, Nipomo, or Lompoc. Knows consistent marketing matters but has no one to run it and is short on time.
• Primary goal: Find a trustworthy local partner who will run social, email, website, and local ads as one coordinated plan, and book a free 20-minute call.
• Distinct responsibilities: Scans the hero and service-area strip to confirm local relevance; reads the problem paragraph and four service cards to see whether the offer matches their need; checks the Why Us proof (campaign-tested, local, two senior people) and the How We Work timeline (peer partner, fixed package, written approvals); reviews the three package cards; then submits the contact form with town, needs, and best way to reach them.
• Inputs/decisions: Decides whether the agency is credible and local enough; chooses which needs apply (Social, Email, Website, Local ads, or Not sure yet); chooses a town; states the best way to reach them.
• Interactions: Reads about Sam and Morgan; uses nav links and CTAs; submits the form and reads the success state.
• Observable success: A friendly confirmation after submitting a valid form, with confidence that a real local person will follow up.

Nonprofit director

• Product context: Directs a Central Coast organization that needs coordinated social, email, website, and local ad work without hiring staff.
• Primary goal: Evaluate fixed packages and clear scope, then request a free call describing what the organization needs.
• Distinct responsibilities: Looks for scope clarity and written approvals (relevant to board/oversight); checks the fixed-package framing and the How We Work steps; uses the contact form to describe organizational needs and the best way to reach them.
• Inputs/decisions: Decides whether fixed packages and written approvals fit organizational oversight; selects needs and town; provides business/organization name.
• Interactions: Reads proof and process; submits the form; reads the success state.
• Observable success: A friendly confirmation and a clear path to a free call.

5. Core User Flows

Flow A — Small business owner books a free call

1. Owner opens the page (anonymous, public). The page fades in from black; the hero shows the headline, subhead, and a clear CTA within one scroll.
2. Owner confirms local relevance via the service-area strip (Orcutt · Santa Maria · Nipomo · Lompoc).
3. Owner reads the problem paragraph and the four service cards, seeing the glowing connector that expresses one coordinated plan.
4. Owner reviews Why Us (campaign-tested, local, two senior people) and the How We Work timeline (peer partner → fixed package and clear scope → written approvals).
5. Owner reviews the three package cards (placeholders) and clicks "Start here" (or the hero primary CTA "Book a free 20-minute call"), which jumps to the contact form.
6. Owner fills Name, Business or organization, Email, optional Phone, Town, needs checkboxes, Message, and Best way to reach you.
7. On submit, inline validation runs. If a required field is invalid, an inline message appears and the owner corrects it and resubmits (recovery).
8. On valid submit, a friendly success state appears. Continuation: the agency follows up using the stated best way to reach them (once [FORM ENDPOINT] is connected).

Flow B — Nonprofit director requests a free call

1. Director opens the page (anonymous, public).
2. Director reads the problem paragraph and service cards to confirm the coordinated-plan offer.
3. Director checks How We Work for fixed packages, clear scope, and written approvals, and reviews the package cards.
4. Director clicks a CTA ("Book a free call" in nav, hero primary CTA, or "Start here") to reach the contact form.
5. Director completes the form, entering the organization name, town, needs, message, and best way to reach them.
6. Inline validation catches any missing required field; the director corrects and resubmits.
7. A friendly success state confirms receipt. Continuation: the agency follows up via the stated best way to reach them.

Flow C — Visitor explores and returns to top

1. Visitor scrolls through sections; the sticky glass nav stays pinned and the round back-to-top button appears after scrolling.
2. Visitor uses nav links to jump to Services / Why Us / How We Work / Packages / Contact, or the back-to-top button to return to the hero.
3. Under reduced-motion preference, parallax, reveals, and shine are off and the page remains fully usable.

6. Visuals Colors and Theme

Muse and headline: Night studio glass after Michal Malewicz — "a quiet studio lit by one blue light."

Color tokens (dark mode):

• Background base: #05070C rising to #0B0F18 in a soft vertical wash.
• Surface (frosted panels): rgba(11,15,24,0.55) with backdrop-filter: blur(...).
• Hairline border: 1px rgba(77,139,255,0.22).
• Text: #E8EEFB; secondary text: #8C9AB8 (AA at 16px+).
• Primary button: solid #1F56D8 with #FFFFFF text.
• Accent (only accent): #4D8BFF — underlines, links, glows, star field, timeline line, focus halos.
• Texture: ~5% opacity hex/grain overlay across the ground.
• No second hue anywhere.

Typography: Lexend only. Display headlines weight 300, letter-spacing -0.03em, sentence case. Small uppercase labels 11–12px, weight 500, letter-spacing 0.18em inside outlined pill tags. Scale (1.333 modular): hero clamp(44px, 9vw, 104px); section heads clamp(32px, 5vw, 60px); card titles 20px; body 17px; labels 11px tracked. Line-height 1.05 display, 1.6 body.

Shape language: Frosted glass rectangles with 20–24px radii and 1px light-blue hairlines; pill tags at full radius; soft blue glow halos instead of hard shadows; 24–32px panel padding; a single luminous 1px connector line threading the four service cards.

Layout rhythm: Mobile-first single column opening into a bento grid at 768px and 1280px; hero text left-weighted with the moon bleeding off the top-right; full-width town strip; asymmetric card grids; huge negative space between blocks; numbered markers 01–03 beside major headings.

Imagery style: No photography of people or stock offices. Imagery is the night sky: a thin crescent moon drawn in CSS/SVG with a soft blue rim glow at the top of the hero, a scattered star field (1–2px dots at varying opacity) drifting up from the bottom, a 5% hex/grain texture, and glowing hairline connectors. Sam and Morgan photo slots are labelled glass placeholders, not fake portraits.

7. Signature Design Concept

The public entry is a full-viewport night scene, not a centered SaaS stack. The oversized Lexend 300 headline "Your marketing, finally run by someone." sits flush-left on a 9-column measure at clamp(44px, 9vw, 104px), its final word underlined by a drawn blue rule. The subhead sits at 20px in #8C9AB8 beneath, with two CTAs stacked left: a solid #1F56D8 "Book a free 20-minute call" and a glass-outline "See packages". To the upper right, a thin crescent moon (~180px, blue rim glow) bleeds past the container edge and floats over the deep navy; the star field begins low and center. A tracked uppercase pill tag "Orcutt · Santa Maria · Nipomo · Lompoc" sits above the headline. On scroll, the moon drifts up and out slowest, stars move faster, and the text stays put. The four service cards are threaded by a single 1px luminous blue connector line that draws itself across the bento grid on scroll, physically showing "one coordinated plan." Every section heading carries a thin blue underline that draws in, then catches a slow travelling shine every few seconds. Readable text and controls stay whole at every viewport; the moon and stars may bleed and crop as decoration.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the crescent moon (CSS/SVG with soft #4D8BFF rim glow) bleeding off the hero's top-right, with a star field rising from the bottom.
• Input → transformation → outcome thesis: as the visitor scrolls, the moon drifts up and out at 0.25x, the star field moves at 0.5x, and the text stays fixed in front — producing a layered night-sky depth that never obstructs the headline or CTAs.
• Motion vocabulary: page-load fade from black (~400ms); scroll-linked parallax on moon and stars; once-only scroll reveals (fade up from 6px offset with brief 4px blur via IntersectionObserver); heading underlines drawing in over 500ms then a slow 4s blue shine; card hover lift 2px with soft halo; button brighten; focused fields tighter darker glow ring; sticky frosted nav; round back-to-top after 600px.
• Composed first frame: deep navy ground, moon upper-right with rim glow, star field low and center, flush-left oversized headline with drawn underline, subhead, two stacked CTAs, town pill above the headline.
• Reduced-motion state: parallax, reveals, and shine off; static composition with all content and controls fully visible and usable; parallax simplified to a single subtle layer on screens under 768px.

9. Non-Functional Requirements

• Single-file delivery (explicit): one self-contained HTML file with embedded CSS and vanilla JS; no framework.
• Responsive, mobile-first (explicit): works at 375px with no sideways scrolling; readable text and controls stay whole at 375px, 768px, and 1280px.
• Accessibility (explicit): WCAG AA contrast; visible focus states; keyboard-usable form; visible labels; inline validation.
• Local SEO (explicit): page title and meta description mention Orcutt, Santa Maria, Nipomo, and Lompoc; LocalBusiness JSON-LD schema.
• CTA visibility (explicit): a clear CTA within one scroll on every screen size.
• Motion performance (explicit): animate only transform and opacity; keep it fast; respect prefers-reduced-motion by disabling parallax, reveals, and shine; simplify parallax on phones.
• Content integrity (explicit): package names, prices, and inclusions remain placeholders; logo, photos, and contact email remain placeholders; no phone number displayed; form action remains [FORM ENDPOINT] with an explanatory comment.
• Tone (explicit): plain words, no agency jargon, acronyms spelled out.

10. Tech Stack

• Frontend: one self-contained HTML file using HTML, CSS, and vanilla JavaScript (no framework), with Lexend as the only typeface. (explicit)
• Hosting: static file moved to the agency's host after local preview. (explicit)
• Form handling: external endpoint to be connected by the agency at [FORM ENDPOINT]; not implemented in this deliverable. (explicit)
• Provisioned scaffold (inventory only, not exercised by this product): shared FastAPI backend, MariaDB database, React frontend. These do not add product requirements; the accepted deliverable is the static HTML file.

11. Assumptions and Constraints

• Assumption: The page is anonymous and public; no login, account, or application-owned identity is required. (required_inference — consistent with a public marketing site and no source-stated accounts.)
• Assumption: The contact form's success state is client-side confirmation; actual delivery depends on the agency connecting [FORM ENDPOINT]. (required_inference — the source leaves the endpoint as a placeholder.)
• Constraint: Package names, prices, and inclusions must not be invented; they remain placeholders. (explicit)
• Constraint: Logo, Sam/Morgan photos, and contact email remain placeholders. (explicit)
• Constraint: No phone number is displayed. (explicit)
• Constraint: Form action remains [FORM ENDPOINT] with an explanatory comment. (explicit)
• Constraint: One self-contained HTML file; HTML/CSS/vanilla JS only; no framework. (explicit)
• Constraint: Mobile-first; no sideways scrolling at 375px. (explicit)
• Constraint: WCAG AA, visible focus, keyboard-usable form. (explicit)
• Constraint: Page title and meta description mention the four towns; LocalBusiness schema included. (explicit)
• Constraint: Clear CTA within one scroll at every screen size. (explicit)
• Constraint: Single accent color #4D8BFF; primary button #1F56D8 with white text; no other accent colors. (explicit)
• Constraint: Lexend only; 300-weight display headlines; uppercase tracked pill labels. (explicit)
• Constraint: Respect prefers-reduced-motion; animate only transform and opacity. (explicit)

12. Glossary

• Media in the Middle: the two-person marketing agency in Orcutt, California, that this site represents.
• Night studio: the visual theme — near-black navy ground, frosted glass panels, one electric-blue accent, crescent moon and stars.
• Coordinated plan: social media, email newsletters, websites, and local ad planning run together rather than by separate vendors.
• Campaign-tested: experience running a congressional campaign's content on deadline with approvals, compliance, and paid media.
• Paid media: advertising that is paid for placement (as opposed to organic reach).
• Compliance: adherence to required rules and approvals, especially in campaign content.
• Peer partner: a working relationship where the agency collaborates as an equal rather than taking orders.
• Fixed package: a predefined scope of work with set inclusions (names, prices, and inclusions are placeholders here).
• Written approvals: documented sign-off on work before it proceeds.
• LocalBusiness schema: structured data (JSON-LD) describing the business for search engines.
• [FORM ENDPOINT]: the placeholder form action the agency must replace with a real form-handling endpoint.
• prefers-reduced-motion: a user OS/browser setting the site honors by disabling parallax, reveals, and shine.
• Bento grid: an asymmetric card-grid layout.
• Parallax: layered scroll movement where background elements move at different speeds than foreground text.