Keystone Home Lending — Mortgage Broker & Home Loan Website (9 Pages)

9 pages, each a complete, self-contained HTML page — a precise, data-forward mortgage lender design: a "dashboard" hero with a working payment calculator and live donut chart, Archivo display headlines over IBM Plex Sans with tabular figures, white and mint with emerald, deep ink green and a sparing gold accent, 8px hairline cards, 1px-ruled data tables and small-multiple grids, a faint ledger grid and keystone-arch line art. 1. Home (index.html) — dashboard hero with the payment calculator, sample-rate band with sparklines, count-up stats, six loan program cards, how-we-work list, 4-step pre-approval timeline, first-time buyer teaser, reviews, FAQ. 2. Loan Programs (loans.html) — program tabs (Conventional, FHA, VA, USDA, Jumbo, Refinance) with key figures, pros and watch-outs; comparison table; four scenario cards. 3. Today's Rates (rates.html) — sample rate table (rate, APR, points, P&I per $100k), dated "samples, not an offer" stamp, assumptions and payment example, rate-lever meters, points vs. no points table, FAQ. 4. Calculators (calculators.html) — payment calculator with donut, affordability calculator with DTI meters, refinance break-even calculator, and the formulas. 5. First-Time Buyers (first-time-buyers.html) — seven-step guide, down payment assistance, sample cash-to-close table, myth vs. fact, FAQ. 6. Refinance (refinance.html) — four refinance goals, break-even calculator, refinance options table, filling timeline, FAQ. 7. About & Team (about.html) — story and principles, count-up track record, four loan officer cards with monogram badges, six reviews, licensing and disclosures. 8. Resources (resources.html) — guide cards, interactive documents checklist, 12-term glossary, FAQ (FAQPage markup). 9. Get Pre-Approved (apply.html) — pre-approval request form, 4-step timeline, compact documents checklist, FAQ. ANIMATION. The header rate ticker scrolls (hover pauses it), the donut chart's arcs draw in when the calculator comes into view and re-flow live as inputs change, a thin ring and the keystone-arch outlines and rate sparklines draw themselves, the stat numbers count up (they read the number you type), the pre-approval timeline fills as you scroll, meters fill when seen, gold underlines sweep under accent words, and sections slide in. Everything is visible without JavaScript (calculators show their default results), and visitors who ask for reduced motion see a still page. CALCULATORS. All three run in the browser with the standard amortization formula and format money with Intl.NumberFormat. Defaults live in each input's value attribute. Payment calculator: mortgage insurance is estimated from the box's data-pmi attribute (0.55% of the loan per year, applied under 20% down). Affordability: taxes plus insurance are estimated from data-taxins (1.2% of price per year) and PMI from data-pmi; the debt-to-income options are 36/43/45%. Break-even: closing costs divided by monthly principal-and-interest savings. They are estimates only — keep the "Estimate only" labels and notes. DOCUMENTS CHECKLIST. Ticking items updates the count and progress bar in the browser; nothing is uploaded or saved. Edit the list items freely. TABS. Each loan program tab is a link; tabs and panels are matched by order, so keep them in the same sequence if you add, remove or reorder programs. FONTS. Archivo and IBM Plex Sans load from Google Fonts via @font-face in each page's style block, with system sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD — FinancialService with a MortgageLoan offer catalog on the home page, CollectionPage, FAQPage, AboutPage or ContactPage elsewhere). Copy it into your real <head> when you deploy, and update the domain, address, rating and service area. FORMS. The pre-approval form posts nowhere — connect it to your loan origination system or CRM before publishing. It deliberately asks for no Social Security number; collect sensitive data only through a secure portal. Review the contact-consent wording with your compliance team. EDITING. Change colors 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. COMPLIANCE — READ BEFORE PUBLISHING. Every rate, APR, point figure, payment, "as of" date and per-$100k payment on this site is an illustrative sample. Replace them with your own real, dated pricing and the assumptions behind it, or remove them. Under Regulation Z (Truth in Lending), advertising a "trigger term" — a payment amount, number of payments, term, down payment or finance charge — requires the full disclosures (down payment, terms of repayment, and the APR with any increase after consummation); the rates page carries a sample assumptions block and payment example to show the shape of that disclosure. Fill in your company NMLS ID, each loan officer's NMLS ID, state license numbers and the states you're licensed in; keep the Equal Housing Opportunity statement and logo, the NMLS Consumer Access link and the "not a commitment to lend" wording. Program guidelines (minimum down payments, credit guidance, MIP and funding-fee percentages, loan limits) are typical figures as of 2026 and change — verify each one against current program rules. Calculators are estimates only. Have your compliance officer or counsel review the site before launch. CLAIMS & SAMPLE CONTENT. The company name, NMLS and license numbers, address, phone, loan officers, statistics (loans closed, days to close, on-time rate), ratings, reviews and down payment assistance ranges are fictional placeholders. Replace them with your own verifiable details. Reviewers are shown by first name and last initial. IMAGES. All photography is real Unsplash stock, self-hosted under /content-images: houses, keys, paperwork and interiors. No photo shows a recognisable face (the loan officer holding a model house is cropped below the eyes). Loan officers are represented by monogram badges, so add your own team photos if you want them.