Browse products

Accounting Firm Template: Margin Note

Accounting and bookkeeping firm site: fixed monthly prices, a 'What will it cost?' quote builder with a tweened fee, UK tax dates counted down from today, and margin notes that write themselves in.

Compare Add to Prompt Builder
Loading

AI prompt

Recreate this effect with any AI tool

Paste into Claude, Cursor, v0, Lovable or Bolt. 3460 words of exact values — rewritten live as you tune the Playground.

prompt.md · Accounting Firm Template: Margin Note 
### EFFECT: Accounting Firm Template: Margin Note
**What it does (visual):** A complete, light, single-page website for a fictional firm of chartered accountants in Leeds, UK ("Margin Note", bookkeeping, VAT, payroll, Self Assessment and year-end accounts for sole traders, limited companies, partnerships and landlords). A small-business owner recognises it in two seconds as an accountant's site with prices, then remembers it for its creative layer: **an accountant's notes in the margin**. Biro-blue arrows draw themselves and handwritten words write in left to right, prices are circled by a loose pen ellipse, "fixed monthly fee" gets a highlighter swipe, and the quote total gets the accountant's double underline. Palette `ledger` (default ledger: cool off-white `#f6f7f2` ground, white `#ffffff` cards, pale green `#dcefe2` and highlighter-yellow `#fbf4c9` colour fields, highlighter `#f6e463`, deep green ink `#10231c`, muted `#4c5a53`), one brand colour `#12704a` (default ledger green `#12704a`) and the note ink `#2747c9` (default biro blue `#2747c9`). Headline set `plain`; margin notes `true`. One motion language: entrances `power3.out` (0.5–0.9 s), state changes and wipes `expo.inOut` (0.6–1.1 s), scroll-linked pieces `ease: 'none'` + scrub, Lenis smooth scroll. Every travel distance × `1`.

Sections, top to bottom (neighbouring sections never share a layout):
1. **Sticky header** (78px; 66px on phones): rounded-square green logo mark with a white tick and a faint margin rule, "**Margin Note**" (Newsreader 600) over "Accountants · Leeds"; links Services · Pricing · Tax dates · Team · Contact (underline grows from the left on hover); the phone `0113 496 0274`; a magnetic pill "Free consultation". Under 1180px a round burger opens a full-height menu (40px display links, Book + Call buttons); Escape and link taps close it; Lenis stops while it is open.
2. **Hero** 7/5 grid. Left: headline in exactly two lines, each `.mgn__line` `white-space: nowrap` with `overflow: hidden` (the line mask), size `clamp(33px, 5.5vw, 88px)` (8.7vw on phones), leading 1.0, tracking −0.035em; line 2 italic in the accent. Plain: "Accountants for small / businesses in Leeds"; fixed: "Fixed-fee accountants / for Leeds businesses"; deadline: "Never miss an HMRC / deadline again". One sentence (bookkeeping, VAT, payroll and tax returns for sole traders and limited companies, for a **fixed monthly fee** agreed before we start; the three words in a `<mark>` highlighter). Buttons: magnetic "Book a free consultation" + ghost "See what it costs". Under the primary button a margin note: a hand-drawn curved arrow pointing up at it + "30 minutes, free, no obligation" in Caveat 600 25px. Trust row (top rule, four columns): 312 Leeds businesses on our books (sample) · ★ 4.9 on Google (sample) · ICAEW Chartered accountants · £0 to switch from your old accountant (312 and 4.9 count up). Right: a 4:4.4 photo (accountant and client at a desk, brick wall, `object-position: 72% 50%`) with a white **Next HMRC deadline** card overlapping its bottom-left edge (−44px): the next deadline's title (Newsreader 21px), the date (34px) and "**8** days to go" circled by the biro ellipse, link "All tax dates →". The card is computed from today with the same rules as section 11.
3. **Photo band**: overhead desk photo (laptop with a spreadsheet, calculator, notebook, receipts), `height: clamp(360px, 72vh, 760px)`, with a white tag bottom-right: Caveat "How the books get done" + "Snap the receipt on your phone. We match it to your bank feed every week." On phones the tag sits under the photo.
4. **Services, priced by the month** — 4/8 grid, sticky heading + paragraph left (fixed monthly fee by Direct Debit, no hourly billing, no charge for a phone call, prices exclude VAT at 20%). Right: a ledger (2px ink top rule, hairlines between rows); each row = name (Newsreader 28px) | description | "from **£X** /month" with the price (38px) hand-circled: Bookkeeping £75 (weekly bank reconciliation, receipts from your phone, one-page P&L on the 10th, MTD quarterly updates for sole traders and landlords) · VAT returns £35 (quarterly MTD returns, scheme check standard/flat rate/cash accounting, reminders) · Payroll £25 (payslips, RTI, auto-enrolment, P60s, P11Ds; up to 5 employees then £4 each) · Self Assessment £20 (sole trader, landlord or director; payments on account explained; filed by December) · Year-end accounts £45 (sole trader/partnership accounts, or statutory accounts + CT600 + Companies House for limited companies). Margin note under it: "Most clients pick 3 of these. Price yours below."
5. **What will it cost?** (signature) on the pale-green field. Heading row ("What will it cost?" left, one sentence right). 7/5 grid. Left, three fieldsets: **Your business** (4 radio cards: Sole trader, Limited company, Partnership, Landlord), **Turnover a year** (4 radio cards: Under £50k, £50k–£90k, £90k–£250k, £250k–£1m), **What you need** (2-column checkbox cards: Bookkeeping, VAT returns, Payroll + an employees stepper 1–50, Self Assessment + a returns stepper 1–6, Year-end accounts with the name per type). Radio/checkbox inputs are real, visually hidden, so Tab / arrows / Space work and touch targets are ≥ 58px. Right, sticky: a **fee note** on white paper with a red margin rule at 38px: "Fee note — Limited company, £90k–£250k", one line per service with a small sub-line and the price, then "Monthly fee" and a huge Newsreader total (`clamp(64px, 6.4vw, 96px)`) with a **double underline** (two 2px rules) that redraws `scaleX 0 → 1` on each change, "£390 a month including VAT · £3,900 a year", and up to two handwritten context notes with a small circle bullet. Below: magnetic "Book a call about this quote" (writes the quote into the booking form and shows "Your guide price is attached: £X a month + VAT" in Caveat) and the fine print (guide price, confirmed in writing after a free call, fixed for 12 months). Start state `limited`.
   Price list (all + VAT, round to £5): turnover multipliers bookkeeping ×[1, 1.25, 1.6, 2.3], VAT ×[1, 1, 1.25, 1.6], year-end ×[1, 1.1, 1.3, 1.7]. Bookkeeping base sole £75 / partnership £85 / landlord £60 / limited £95. VAT returns £35. Payroll £25 + £4 per employee over 5. Self Assessment £20 per return. Year-end: sole "Year-end accounts" £45, partnership "Partnership accounts & return" £65 (incl. SA800), landlord "Annual property accounts" £40, limited "Year-end accounts & CT600" £85 (incl. Companies House). Default limited, £90k–£250k, bookkeeping + VAT + 1 Self Assessment + year-end = £150 + £45 + £20 + £110 = **£325**. Notes: over £90k without VAT → "Over £90k a year means you must be VAT-registered." + button "Add VAT returns"; over £90k with VAT → "Over £90k, VAT registration is compulsory, so it's in."; under £90k with VAT → "Under £90k, VAT is optional…"; limited without year-end → "Every limited company files accounts and a CT600 each year." + "Add them"; landlord with VAT → "Residential rent is VAT-exempt…"; sole trader/landlord £50k+ → "Making Tax Digital applies to you now…"; under £50k → "…reaches you in April 2027 if your income is over £30,000." Switching to Partnership sets at least 2 returns.
6. **Who we do the books for**: heading + sentence (owner-run businesses, up to 50 staff, Leeds, Bradford, Harrogate), then six big rows (Newsreader `clamp(28px, 3.2vw, 48px)` | the tax quirk): Cafés, restaurants & street food (hot and cold takeaway VAT, tronc, till takings) · Salons & barbers (chair renters vs employees, stock, card takings) · Shops & florists (stock counts, seasonal cash flow, import VAT) · Makers & online sellers (marketplace payouts, fees, postage, stock) · Freelancers & contractors (sole trader or limited, IR35, working from home) · Landlords (mortgage interest tax credit, MTD from April 2026). Desktop: hovering a row turns its name green, nudges it 18px and shows a 300px 4:3 photo of that kind of owner at work following the cursor. Phones: a 96px thumbnail on each row.
7. **How switching works** on white: heading + "about two weeks, you never need to speak to your old accountant" left, a 16:9 photo (accountant and client reading a report) right. Then four steps in a row joined by a hand-drawn biro line: Day 1 "A free 30-minute call" · Day 2 "A fixed quote in writing" · Days 3–14 "We take it from there" (professional clearance, HMRC agent access, bank feeds) · Every month "One named accountant" (figures on the 10th, reply within a working day). Each step has a 56px circle-and-tick and a Caveat "when" label.
8. **Software we work in** on the highlighter field: Xero, *QuickBooks*, FreeAgent, *Sage*, Dext, *Hubdoc*, Pleo, *BrightPay* as big plain text (Newsreader `clamp(34px, 4.6vw, 68px)`, alternate words italic, no logos) + note "Still on spreadsheets? We move you over for free."
9. **The people who answer the phone**: five monogram cards (4:5 pastel colour fields with italic initials, no photos): Ruth Okonjo FCA, Founder · Callum Firth ACCA, Senior accountant · Sana Mirza ACA, Accountant · Mei Lin Hart MCIPP, Payroll lead · Joe Barraclough MAAT, Bookkeeper, each with a specialism and "member since … (sample)".
10. **What clients say** on the pale-green field: heading, "4.9 from 186 Google reviews", "Sample reviews, template content"; one big quote card (8 cols) beside the heading and three cards below. First names + business + Leeds area only.
11. **UK tax dates, counted down**: filter pills (Everyone · Sole traders & landlords · Limited companies · Employers · VAT-registered, `aria-pressed`), then the next 7 deadlines from `new Date()`: big date numeral + month, title + one-line detail, "in N days". The first row has a highlighter gradient and its "in N days" is circled. Rules (generate for last/this/next years, keep dates ≥ today): 31 Jan online Self Assessment + balancing payment + first payment on account; 5 Apr tax year ends; 31 May P60s; 6 Jul P11Ds; 31 Jul second payment on account; 5 Oct register for Self Assessment; 31 Oct paper return; 22nd monthly PAYE (only the next one); 7 Feb/May/Aug/Nov VAT for calendar quarters; 7 Aug/Nov/Feb/May MTD quarterly updates (from 7 Aug 2026); 31 Dec accounts to Companies House, 1 Jan Corporation Tax, 31 Mar CT600 (31 March year end). Fine print about the year-end assumption and the £50k / £30k MTD thresholds.
12. **Questions we hear every week**: 4/8 grid, six accordions (typical cost; switching mid-year; the £90,000 rolling VAT threshold; MTD for Income Tax; do I have to use Xero; are you regulated).
13. **Book a free consultation** on the highlighter field: heading, sentence and a photo left; a white form right: Full name, Email, Phone (optional), Your business (select), How would you like to meet? (Video call / At Park Square / Phone pills), What would you like help with? (textarea), full-width "Request my free consultation". Inline validation; success state with a drawn circle-and-tick: "Thanks, Sam. Request received." and who will email whom about which kind of consultation. Nothing is sent.
14. **Find us on Park Square**: address (3rd floor, 21 Park Square East, Leeds LS1 2NE, sample), phone, email, an hours table (Thursday to 7pm, Saturday closed but 9–1 in January) with a Caveat "Today" on today's row; a drawn map (blocks, white streets, the green square with trees, St Paul's Street, Park Place, Wellington Street, Park Square E., Leeds station box, biro walking route from the station, green pin + "Margin Note" label) and Walk / Park / Access notes.
15. **Footer** in deep green ink: "Margin Note" big, a Caveat line "your books, kept in order", Visit / Services / Useful columns, "Margin Note Accountants Ltd … company no. 00000000 (sample) … regulated by the ICAEW (sample)", "Fictional brand — template content."
16. **Mobile sticky bar** (`true`): outlined "Call" + filled "Book a free consultation"; in once the hero buttons scroll away, out over the booking form.

**Tech stack:**
- GSAP 3.13+ with ScrollTrigger, Lenis 1.x, HTML, CSS and inline SVG. No other libraries.
- CDN: `https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js` + `https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js` + `https://cdn.jsdelivr.net/npm/lenis@1/dist/lenis.min.js`
- npm: `import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Lenis from "lenis"; gsap.registerPlugin(ScrollTrigger);` then `ScrollTrigger.config({ ignoreMobileResize: true })`.
- Lenis: `new Lenis({ duration: 1.15, smoothWheel: true })`, `lenis.on('scroll', ScrollTrigger.update)`, `gsap.ticker.add(t => lenis.raf(t * 1000))`, `gsap.ticker.lagSmoothing(0)`; in-page links use `lenis.scrollTo(y - headerHeight, { duration: 1.2 })`.
- Fonts (Google Fonts, OFL): **Newsreader** 400–600 (headlines, prices, numerals, monograms; italic for the second headline line), **Hanken Grotesk** 400–700 (17px body, leading 1.55), **Caveat** 600 (every margin note).

**HTML structure:**
```html
<div class="mgn" data-palette="ledger" data-notes="on" style="--knob-accent:#12704a; --note-ink:#2747c9" data-bar-on>
  <header class="mgn__nav">logo · nav · tel · a.mgn__btn[data-magnetic] · button.mgn__burger + #mgn-menu[hidden]</header>
  <main>
    <section class="mgn__hero">
      <div class="mgn__hero-copy">
        <h1 class="mgn__h1"><span class="mgn__line"><span class="mgn__li">Accountants for small</span></span> <span class="mgn__line"><span class="mgn__li">businesses in Leeds</span></span></h1>
        <p class="mgn__lede">… <mark class="mgn__hl">fixed monthly fee</mark> …</p>
        <div class="mgn__hero-actions">2 × a.mgn__btn · p.mgn__note[data-note] > svg > path[data-draw] + span</div>
        <ul class="mgn__trust">li > strong > span[data-count]</ul>
      </div>
      <div class="mgn__hero-media"><figure class="mgn__hero-photo"><img></figure><aside class="mgn__due">… span[data-circle] …</aside></div>
    </section>
    <div class="mgn__band"><figure class="mgn__band-frame"><img><figcaption class="mgn__band-tag"></figcaption></figure></div>
    <section class="mgn__svc"><div class="mgn__svc-head"></div><ol class="mgn__ledger">li.mgn__lrow > h3 + p + p.mgn__lprice > b[data-circle]</ol></section>
    <section class="mgn__quote"><form class="mgn__qb">fieldsets (radios, checkboxes, .mgn__step) + .mgn__fee > .mgn__fee-paper (ul[data-fee-lines], [data-fee-total], .mgn__dbl, [data-fee-notes])</form></section>
    <section class="mgn__who"><ul>li.mgn__wrow[data-img] > img.mgn__wthumb + h3 + p</ul><figure class="mgn__follow"><img></figure></section>
    <section class="mgn__how">photo · .mgn__steps > svg.mgn__steps-line + ol > li > .mgn__tick svg (circle + path)</section>
    <section class="mgn__soft"> · <section class="mgn__team"> · <section class="mgn__rev"> · <section class="mgn__dl" id="mgn-deadlines"> (filter + ol[data-dl-list])
    <section class="mgn__faq"> (button[aria-expanded][aria-controls] + div[role=region][hidden]) · <section class="mgn__book"> (form + .mgn__done[hidden]) · <section class="mgn__visit"> (table + svg map)
  </main>
  <footer class="mgn__foot"></footer>
  <div class="mgn__bar">Call · Book a free consultation</div>
</div>
```

**CSS requirements:**
- Palettes on `.mgn[data-palette]` redefine `--bg --surface --text --muted --line --field --field-2 --hl --tone-1…5 --map-* --foot`; `html:has(.mgn[data-palette="ledger"]) body { background: #f6f7f2 }` so it never opens dark. paper: `#fbfbf8` + pale blue `#e3ebf8`; sky: `#f3f7fb` + `#dae8f7`; night: `#0f1a17` ground, `#16231f` surface, note ink `#9fb4ff`.
- Grid: max width 1320px, gutter `max(20px, 5.6vw)`. Radius 6px on every photo and card, pills on every button. Five type sizes far apart; tabular figures on every number.
- `.mgn__note`: Caveat 600 25px in `var(--note-ink)`, inline SVG arrows `stroke-width: 2.4; stroke-linecap: round`. `.mgn__circ` is an absolutely positioned SVG `left:-16px; top:-12px; width: calc(100% + 32px); height: calc(100% + 24px)`. `.mgn__hl` = `linear-gradient(transparent 52%, var(--hl) 52%, var(--hl) 94%, transparent 94%)` with `background-size` animated. `[data-notes="off"]` hides notes, circles and the highlighter.
- Fee paper: white, `box-shadow: 0 24px 60px -30px rgba(16,35,28,.4)`, red margin rule via a 1.5px `linear-gradient` at 38px. `.mgn__dbl`: `border-top` + `border-bottom` 2px, 7px tall, `transform-origin: 0 50%`.
- `overflow-x: clip` on `.mgn`; `.mgn svg { max-width: none }`; under 960px everything stacks (fee note no longer sticky); under 768px the hero buttons go full width and the deadline card sits under the photo (−56px overlap).

**Animation spec (exact values):**
- Hero timeline (`defaults: { ease: 'power3.out' }`): `.mgn__li` `yPercent: 112 → 0`, 0.85 s, stagger 0.09 at 0 · `[data-hero-fade]` opacity 0 → 1 + `y: 18 × 1`, 0.6 s, stagger 0.08 at 0.2 · photo `clipPath: inset(14% 0 0 0 round 6px) → none`, 1.0 s `expo.inOut` at 0.05, its img `scale 1.14 → 1` 1.2 s · deadline card opacity/y 24 at 0.45 · highlighter `backgroundSize: '0% 100%' → '100% 100%'` 0.8 s `expo.inOut` at 0.7 · counters 0 → value 1.1 s at 0.35. Whole intro under 1.3 s; nothing blocks first paint.
- Margin notes (`[data-note]`, ScrollTrigger `top 88%`, once): arrow paths `pathLength=1`, `strokeDasharray: '1 2'`, `strokeDashoffset: 1 → 0`, 0.6 s, stagger 0.1; the words `clipPath: inset(-10% 100% -10% 0) → inset(-10% 0% -10% 0)`, 0.9 s `power2.inOut` at 0.25 (the hero note waits 1.1 s).
- Biro circles: built in JS from each element's size (Catmull-Rom through 27 points on an ellipse that grows 0.97 → 1.04 and overshoots its start by 0.55 rad, seeded jitter ±2%), `strokeDashoffset 1 → 0`, 0.8 s at `top 85%`. Rebuilt after `document.fonts.ready`.
- Reveals: one `ScrollTrigger.batch('[data-reveal]', { start: 'top 88%' })` → opacity 0 → 1, `y: 28 × 1`, 0.8 s, stagger 0.08. Image wipes `[data-wipe]`: `clipPath: inset(0 0 100% 0) → inset(0)`, 1.1 s `expo.inOut`, img scale 1.12 → 1.
- Photo band (≥768px): `clipPath: inset(0 9% 0 9% round 8px) → inset(0 1.2% 0 1.2% round 6px)`, `ease: 'none'`, trigger band `top bottom → top 15%`, scrub 0.6; img `scale 1.16 → 1` across the band.
- Switching timeline: one scrubbed timeline (trigger `.mgn__steps`, `top 82% → bottom 50%`, scrub 0.6): the line dashoffset 1 → 0 over 4 units; at 0, 1.13, 2.27, 3.4 each step's circle draws (0.45) then its tick (0.3).
- Quote: on every change the total tweens from the shown value, 0.7 s `power3.out` (kill the previous tween), new lines slide in `x: 16`, double underline `scaleX 0 → 1` 0.7 s `expo.inOut` delay 0.15, notes write in with the clip-path reveal.
- Deadlines: filter swap rebuilds rows (opacity/y 14, stagger 0.04) and redraws the circle on the first row.
- Map (`top 75%`, once): blocks fade 0.8 s, roads draw stagger 0.08, labels at 0.6, walking route draws 1.1 s at 0.9, pin drops from y −40 at 1.8, label at 2.05.
- FAQ: `height: 0 ↔ auto`, 0.6 s / 0.5 s `expo.inOut`, then `ScrollTrigger.refresh()`.

**Interaction:**
- Quote builder: native radios and checkboxes (arrow keys move between radio cards, Space toggles), steppers are buttons with `aria-label`s and an `aria-live` output, disabled at their limits; "Add VAT returns"/"Add them" buttons inside the notes tick the box. "Book a call about this quote" fills the textarea, selects the business type, scrolls to the form and focuses Full name.
- Sector rows (desktop, fine pointer): `gsap.quickTo` x/y (0.6 s `power3.out`), card clamped inside the viewport, photo scale 1.12 → 1 on each swap, fades out on leave.
- Magnetic buttons (desktop): `quickTo` x = offset × 0.25 × `1`, y = offset × 0.4, back to 0 on leave.
- Deadline filters: `aria-pressed` pills; list is `aria-live="polite"`.
- Form: name ≥ 2 characters and a valid email, errors under the fields with `aria-invalid`, success state takes focus; "Send another request" resets.

**Responsive behavior:** `gsap.matchMedia()` with `(min-width: 768px)` and `(hover: hover) and (pointer: fine)`. Phones: no band clip animation (rounded photo with the tag below), no cursor card (thumbnails instead), no magnetic buttons, quote cards in 2 columns, steps stacked with the tick on the left, deadline rows two columns, form single column, sticky Call / Book bar. Headline stays two lines from 320px to 1920px.

**Accessibility:** Skip link; landmarks; every section labelled by its heading; visible focus ring in the note ink (3px, offset 3px); burger has `aria-expanded` + live label; FAQ buttons with `aria-controls` and regions; deadline list and fee lines `aria-live="polite"`; decorative SVGs `aria-hidden`; map has `role="img"` + title. Contrast AA on every palette (button text flips to ink on light brand colours). `prefers-reduced-motion: reduce`: no Lenis, no masks or wipes, counters show final values, notes/circles/ticks/map are drawn, the total changes instantly.

**Performance rules:** transforms, opacity, clip-path and dash offsets only; one `gsap.context()` + one `gsap.matchMedia()` reverted on rebuild; listeners on one `AbortController`; the fee tween is killed before a new one; images lazy except the hero (`fetchpriority="high"`), WebP ≤ 180 KB; `ml:pause` stops Lenis and the fee tween.

**Customization knobs:**
- `palette` = `ledger` (ledger / paper / sky / night)
- `accent` = `#12704a` — buttons, chosen options, the italic headline line, map pin
- `noteInk` = `#2747c9` — every handwritten note, circle, arrow, tick and the walking route
- `headline` = `plain` (plain / fixed / deadline)
- `startBusiness` = `limited` (limited / sole / partnership / landlord: preselects type, turnover band and services)
- `notes` = `true` (margin notes, circles and highlighter on or off)
- `stickyBar` = `true`
- `intensity` = `1` (0 = fades only)
- Image slots (Unsplash demo images are not included; use your own): `hero-meeting` 4:4.4 (accountant and client at a desk) · `books-overhead` 3:2 full-bleed (laptop, calculator, receipts from above) · `review-meeting` 16:9 (reading a report together) · `consultation-tablet` 4:3 (meeting with a tablet) · six 4:3 sector photos `client-street-food`, `client-salon`, `client-florist`, `client-maker`, `client-cafe-laptop`, `signing-documents` (owners at work, people as ambience only, no faces on team or review cards).

**Acceptance criteria:**
- [ ] Opens light; "Accountants for small businesses in Leeds" in two lines at 375px and 1440px; "Book a free consultation" and the phone are visible without scrolling
- [ ] The hero card and the tax-date list are computed from today's date, never hard-coded
- [ ] The quote builder works by mouse, touch and keyboard; the default reads £325; every line, the VAT-inclusive and yearly figures and the context notes are correct for every combination
- [ ] Margin notes write themselves in, prices are circled, the highlighter swipes; `notes` off removes all of them
- [ ] Desktop sector rows show the cursor photo; phones show thumbnails
- [ ] FAQ, menu, filters, form validation and success all work; nothing is sent
- [ ] Every rating, review, address and registration is marked sample; footer says "Fictional brand — template content."
- [ ] No console errors, no horizontal overflow, ≤ 3 long tasks

Source

Full source code

<div class="mgn" id="mgn-top" data-palette="ledger" data-notes="on">
  <a class="mgn__skip" href="#mgn-main">Skip to content</a>

  <!-- ============ header ============ -->
  <header class="mgn__nav" data-nav>
    <div class="mgn__nav-in">
      <a class="mgn__logo" href="#mgn-top" aria-label="Margin Note Accountants, home">
        <svg class="mgn__mark" viewBox="0 0 40 40" aria-hidden="true"><rect width="40" height="40" rx="9" fill="var(--knob-accent)"/><path d="M11 9v22" stroke="var(--on-acc)" stroke-width="2.4" stroke-linecap="round" opacity=".55"/><path d="M16 21.5l4.6 4.8L30 14" fill="none" stroke="var(--on-acc)" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span class="mgn__logo-txt"><b>Margin Note</b><span>Accountants · Leeds</span></span>
      </a>
      <nav class="mgn__links" aria-label="Main">
        <a href="#mgn-services">Services</a>
        <a href="#mgn-quote">Pricing</a>
        <a href="#mgn-deadlines">Tax dates</a>
        <a href="#mgn-team">Team</a>
        <a href="#mgn-visit">Contact</a>
      </nav>
      <div class="mgn__nav-cta">
        <a class="mgn__nav-phone" href="tel:+441134960274">0113 496 0274</a>
        <a class="mgn__btn mgn__btn--sm" href="#mgn-book" data-magnetic>Free consultation</a>
        <button class="mgn__burger" type="button" aria-expanded="false" aria-controls="mgn-menu" data-burger>
          <span class="mgn__sr" data-burger-label>Open menu</span><i></i><i></i>
        </button>
      </div>
    </div>
    <div class="mgn__menu" id="mgn-menu" hidden data-menu>
      <nav aria-label="Mobile">
        <a href="#mgn-services">Services</a>
        <a href="#mgn-quote">Pricing</a>
        <a href="#mgn-deadlines">Tax dates</a>
        <a href="#mgn-team">Team</a>
        <a href="#mgn-visit">Contact</a>
      </nav>
      <div class="mgn__menu-foot">
        <a class="mgn__btn" href="#mgn-book">Book a free consultation</a>
        <a class="mgn__btn mgn__btn--ghost" href="tel:+441134960274">Call 0113 496 0274</a>
      </div>
    </div>
  </header>

  <main id="mgn-main" tabindex="-1">
    <!-- ============ hero ============ -->
    <section class="mgn__hero" aria-labelledby="mgn-h1">
      <div class="mgn__hero-copy">
        <h1 class="mgn__h1" id="mgn-h1" data-headline><span class="mgn__line">Accountants for small</span> <span class="mgn__line">businesses in Leeds</span></h1>
        <p class="mgn__lede" data-hero-fade>Bookkeeping, VAT, payroll and tax returns for sole traders and limited companies, for a <mark class="mgn__hl" data-hl>fixed monthly fee</mark> agreed before we start.</p>
        <div class="mgn__hero-actions" data-hero-fade>
          <a class="mgn__btn mgn__btn--lg" href="#mgn-book" data-magnetic>Book a free consultation</a>
          <a class="mgn__btn mgn__btn--ghost mgn__btn--lg" href="#mgn-quote">See what it costs</a>
          <p class="mgn__note mgn__note--cta" data-note><svg viewBox="0 0 70 44" aria-hidden="true"><path data-draw d="M66 38C48 40 22 34 10 10M10 10l-1 12M10 10l11 4"/></svg><span>30 minutes, free, no obligation</span></p>
        </div>
        <ul class="mgn__trust" data-hero-fade>
          <li><strong><span data-count="312">312</span></strong><span>Leeds businesses on our books <em>(sample)</em></span></li>
          <li><strong><svg class="mgn__star" viewBox="0 0 20 20" aria-hidden="true"><path d="m10 1.8 2.5 5.3 5.8.7-4.3 4 1.1 5.7L10 14.7l-5.1 2.8 1.1-5.7-4.3-4 5.8-.7Z"/></svg><span data-count="4.9" data-dec="1">4.9</span></strong><span>on Google <em>(sample)</em></span></li>
          <li><strong>ICAEW</strong><span>Chartered accountants</span></li>
          <li><strong>£0</strong><span>to switch from your old accountant</span></li>
        </ul>
      </div>
      <div class="mgn__hero-media">
        <figure class="mgn__hero-photo" data-hero-photo><img src="/assets/the-margin-note/hero-meeting.webp" width="1600" height="1067" alt="An accountant and a client talking through figures at a desk in a brick-walled office" fetchpriority="high"></figure>
        <aside class="mgn__due" aria-labelledby="mgn-due-h" data-hero-card>
          <p class="mgn__due-k" id="mgn-due-h">Next HMRC deadline</p>
          <p class="mgn__due-t" data-due-title>Paper Self Assessment return</p>
          <p class="mgn__due-row"><span class="mgn__due-d" data-due-date>31 Oct</span><span class="mgn__due-in" data-circle><b data-due-days>8</b> <span data-due-unit>days</span> to go</span></p>
          <a class="mgn__due-link" href="#mgn-deadlines">All tax dates <i aria-hidden="true">→</i></a>
        </aside>
      </div>
    </section>

    <!-- ============ photo band: frame opens on scroll ============ -->
    <div class="mgn__band" data-band>
      <figure class="mgn__band-frame" data-band-frame>
        <img src="/assets/the-margin-note/books-overhead.webp" width="1600" height="1067" alt="Overhead view of a desk with a laptop showing a spreadsheet, a calculator, a notebook and receipts" loading="lazy">
        <figcaption class="mgn__band-tag">
          <span class="mgn__band-k">How the books get done</span>
          <span class="mgn__band-v">Snap the receipt on your phone. We match it to your bank feed every week.</span>
        </figcaption>
      </figure>
    </div>

    <!-- ============ services with fixed monthly prices ============ -->
    <section class="mgn__svc" id="mgn-services" aria-labelledby="mgn-svc-h">
      <div class="mgn__svc-head" data-reveal>
        <h2 class="mgn__h2" id="mgn-svc-h">Services, priced by the month</h2>
        <p class="mgn__body">Every price below is a fixed monthly fee, paid by Direct Debit. No hourly billing, no charge for a phone call, and the fee only changes if your business does. Prices exclude VAT at 20%.</p>
      </div>
      <ol class="mgn__ledger" data-ledger>
        <li class="mgn__lrow" data-reveal>
          <h3 class="mgn__lname">Bookkeeping</h3>
          <p class="mgn__ldesc">Bank feeds reconciled every week, receipts captured from your phone, and a one-page profit and loss on the 10th of each month. Making Tax Digital quarterly updates included for sole traders and landlords.</p>
          <p class="mgn__lprice"><small>from</small> <b data-circle>£75</b><small>/month</small></p>
        </li>
        <li class="mgn__lrow" data-reveal>
          <h3 class="mgn__lname">VAT returns</h3>
          <p class="mgn__ldesc">Quarterly returns filed through Making Tax Digital software, a check that you are on the right scheme (standard, flat rate or cash accounting), and a reminder three weeks before every payment.</p>
          <p class="mgn__lprice"><small>from</small> <b data-circle>£35</b><small>/month</small></p>
        </li>
        <li class="mgn__lrow" data-reveal>
          <h3 class="mgn__lname">Payroll</h3>
          <p class="mgn__ldesc">Payslips, RTI submissions to HMRC, workplace pension auto-enrolment, P60s and P11Ds. Covers up to five employees, then £4 a month for each extra person.</p>
          <p class="mgn__lprice"><small>from</small> <b data-circle>£25</b><small>/month</small></p>
        </li>
        <li class="mgn__lrow" data-reveal>
          <h3 class="mgn__lname">Self Assessment</h3>
          <p class="mgn__ldesc">Your personal tax return as a sole trader, landlord or company director, with your payments on account worked out and explained. Filed by December, so January is quiet.</p>
          <p class="mgn__lprice"><small>from</small> <b data-circle>£20</b><small>/month</small></p>
        </li>
        <li class="mgn__lrow" data-reveal>
          <h3 class="mgn__lname">Year-end accounts</h3>
          <p class="mgn__ldesc">Annual accounts for sole traders and partnerships, or statutory accounts, the CT600 Corporation Tax return and the Companies House filing for limited companies.</p>
          <p class="mgn__lprice"><small>from</small> <b data-circle>£45</b><small>/month</small></p>
        </li>
      </ol>
      <p class="mgn__note mgn__note--svc" data-note><svg viewBox="0 0 60 40" aria-hidden="true"><path data-draw d="M4 30c12 4 30 2 44-14M48 16l-10 1M48 16l-1 10"/></svg><span>Most clients pick 3 of these. Price yours below.</span></p>
    </section>

    <!-- ============ signature: quote builder ============ -->
    <section class="mgn__quote" id="mgn-quote" aria-labelledby="mgn-quote-h">
      <div class="mgn__quote-in">
        <div class="mgn__quote-head" data-reveal>
          <h2 class="mgn__h2" id="mgn-quote-h">What will it cost?</h2>
          <p class="mgn__body">Pick your business, your turnover and what you need. This is the monthly fee we would put in writing.</p>
        </div>
        <form class="mgn__qb" data-qb novalidate aria-describedby="mgn-quote-h">
          <div class="mgn__qb-controls">
            <fieldset class="mgn__qf">
              <legend>Your business</legend>
              <div class="mgn__seg" role="radiogroup" aria-label="Business type" data-q-type>
                <label><input type="radio" name="mgn-type" value="sole"><span>Sole trader</span></label>
                <label><input type="radio" name="mgn-type" value="limited" checked><span>Limited company</span></label>
                <label><input type="radio" name="mgn-type" value="partnership"><span>Partnership</span></label>
                <label><input type="radio" name="mgn-type" value="landlord"><span>Landlord</span></label>
              </div>
            </fieldset>
            <fieldset class="mgn__qf">
              <legend>Turnover a year</legend>
              <div class="mgn__band-pick" data-q-band>
                <label><input type="radio" name="mgn-band" value="0"><span>Under £50k</span></label>
                <label><input type="radio" name="mgn-band" value="1"><span>£50k–£90k</span></label>
                <label><input type="radio" name="mgn-band" value="2" checked><span>£90k–£250k</span></label>
                <label><input type="radio" name="mgn-band" value="3"><span>£250k–£1m</span></label>
              </div>
            </fieldset>
            <fieldset class="mgn__qf">
              <legend>What you need</legend>
              <div class="mgn__svcs" data-q-svcs>
                <label class="mgn__chk"><input type="checkbox" value="books" checked><span class="mgn__chk-box" aria-hidden="true"></span><span class="mgn__chk-t">Bookkeeping</span></label>
                <label class="mgn__chk"><input type="checkbox" value="vat" checked><span class="mgn__chk-box" aria-hidden="true"></span><span class="mgn__chk-t">VAT returns</span></label>
                <div class="mgn__chk-wrap">
                  <label class="mgn__chk"><input type="checkbox" value="payroll"><span class="mgn__chk-box" aria-hidden="true"></span><span class="mgn__chk-t">Payroll</span></label>
                  <div class="mgn__step" data-step="staff" hidden>
                    <button type="button" data-dec aria-label="One fewer employee">−</button>
                    <output data-val aria-live="polite">3</output><span data-unit>employees</span>
                    <button type="button" data-inc aria-label="One more employee">+</button>
                  </div>
                </div>
                <div class="mgn__chk-wrap">
                  <label class="mgn__chk"><input type="checkbox" value="sa" checked><span class="mgn__chk-box" aria-hidden="true"></span><span class="mgn__chk-t">Self Assessment</span></label>
                  <div class="mgn__step" data-step="people">
                    <button type="button" data-dec aria-label="One fewer tax return">−</button>
                    <output data-val aria-live="polite">1</output><span data-unit>return</span>
                    <button type="button" data-inc aria-label="One more tax return">+</button>
                  </div>
                </div>
                <label class="mgn__chk"><input type="checkbox" value="ye" checked><span class="mgn__chk-box" aria-hidden="true"></span><span class="mgn__chk-t" data-ye-name>Year-end accounts &amp; CT600</span></label>
              </div>
            </fieldset>
          </div>

          <div class="mgn__fee" aria-labelledby="mgn-fee-h">
            <div class="mgn__fee-paper">
              <p class="mgn__fee-k" id="mgn-fee-h">Fee note <span data-fee-for>Limited company, £90k–£250k</span></p>
              <ul class="mgn__fee-lines" data-fee-lines aria-live="polite"></ul>
              <div class="mgn__fee-total">
                <span class="mgn__fee-tl">Monthly fee</span>
                <span class="mgn__fee-num"><span class="mgn__fee-cur">£</span><span data-fee-total>325</span><span class="mgn__dbl" aria-hidden="true"></span></span>
              </div>
              <p class="mgn__fee-sub"><span data-fee-vat>£390 a month including VAT</span> · <span data-fee-year>£3,900 a year</span></p>
              <div class="mgn__fee-notes" data-fee-notes aria-live="polite"></div>
            </div>
            <a class="mgn__btn mgn__btn--lg mgn__fee-cta" href="#mgn-book" data-quote-book data-magnetic>Book a call about this quote</a>
            <p class="mgn__fee-fine">A guide price. We confirm it in writing after a free 30-minute call, and it is fixed for 12 months.</p>
          </div>
        </form>
      </div>
    </section>

    <!-- ============ who we work with: hover photo previews ============ -->
    <section class="mgn__who" aria-labelledby="mgn-who-h">
      <div class="mgn__who-head" data-reveal>
        <h2 class="mgn__h2" id="mgn-who-h">Who we do the books for</h2>
        <p class="mgn__body">Owner-run businesses with up to 50 staff, mostly in Leeds, Bradford and Harrogate. Each sector has its own tax quirks, and we know them.</p>
      </div>
      <ul class="mgn__who-list" data-who>
        <li class="mgn__wrow" data-img="client-street-food" data-alt="A street-food trader in an apron checking an order on his phone beside the grill">
          <img class="mgn__wthumb" src="/assets/the-margin-note/client-street-food.webp" width="1600" height="1067" alt="" loading="lazy">
          <h3>Cafés, restaurants &amp; street food</h3>
          <p>Hot and cold takeaway VAT, tips through a tronc, daily takings from your till.</p>
        </li>
        <li class="mgn__wrow" data-img="client-salon" data-alt="A receptionist checking in a client at the front desk of a busy salon">
          <img class="mgn__wthumb" src="/assets/the-margin-note/client-salon.webp" width="1600" height="1067" alt="" loading="lazy">
          <h3>Salons &amp; barbers</h3>
          <p>Chair renters or employees, product stock, card-machine takings matched to the bank.</p>
        </li>
        <li class="mgn__wrow" data-img="client-florist" data-alt="A florist wrapping a bouquet at the counter of her shop, framed by plants">
          <img class="mgn__wthumb" src="/assets/the-margin-note/client-florist.webp" width="1600" height="1067" alt="" loading="lazy">
          <h3>Shops &amp; florists</h3>
          <p>Stock counts at year end, seasonal cash flow, wholesale and import VAT.</p>
        </li>
        <li class="mgn__wrow" data-img="client-maker" data-alt="A maker packing orders at a workbench in her studio, paper bags on the wall">
          <img class="mgn__wthumb" src="/assets/the-margin-note/client-maker.webp" width="1100" height="1650" alt="" loading="lazy">
          <h3>Makers &amp; online sellers</h3>
          <p>Marketplace payouts matched to orders, fees and postage split out, stock valued properly.</p>
        </li>
        <li class="mgn__wrow" data-img="client-cafe-laptop" data-alt="Two people working through figures on a laptop at a café table">
          <img class="mgn__wthumb" src="/assets/the-margin-note/client-cafe-laptop.webp" width="1600" height="1068" alt="" loading="lazy">
          <h3>Freelancers &amp; contractors</h3>
          <p>Sole trader or limited company, IR35 checks, what you can claim for working from home.</p>
        </li>
        <li class="mgn__wrow" data-img="signing-documents" data-alt="Two people signing paperwork at a light grey table">
          <img class="mgn__wthumb" src="/assets/the-margin-note/signing-documents.webp" width="1600" height="1067" alt="" loading="lazy">
          <h3>Landlords</h3>
          <p>Rental income and costs, the mortgage interest tax credit, and Making Tax Digital from April 2026.</p>
        </li>
      </ul>
      <figure class="mgn__follow" aria-hidden="true" data-follow><img alt="" data-follow-img></figure>
    </section>

    <!-- ============ how it works: drawn timeline ============ -->
    <section class="mgn__how" aria-labelledby="mgn-how-h" data-how>
      <div class="mgn__how-top">
        <div data-reveal>
          <h2 class="mgn__h2" id="mgn-how-h">How switching works</h2>
          <p class="mgn__body">Most clients move to us mid-year. It takes about two weeks and you do not need to speak to your old accountant.</p>
        </div>
        <figure class="mgn__how-photo" data-wipe><img src="/assets/the-margin-note/review-meeting.webp" width="1600" height="1065" alt="An accountant and a client reading through a printed report together at a desk" loading="lazy"></figure>
      </div>
      <div class="mgn__steps">
        <svg class="mgn__steps-line" viewBox="0 0 1000 20" preserveAspectRatio="none" aria-hidden="true"><path d="M2 10C120 4 240 15 360 9S600 4 740 11 920 8 998 10" data-steps-line/></svg>
        <ol>
          <li class="mgn__stepc" data-stepc>
            <span class="mgn__tick" aria-hidden="true"><svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18"/><path d="M11 21l6 6 12-14"/></svg></span>
            <p class="mgn__step-when">Day 1</p>
            <h3>A free 30-minute call</h3>
            <p>On video or at our office on Park Square. Bring last year’s accounts if you have them.</p>
          </li>
          <li class="mgn__stepc" data-stepc>
            <span class="mgn__tick" aria-hidden="true"><svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18"/><path d="M11 21l6 6 12-14"/></svg></span>
            <p class="mgn__step-when">Day 2</p>
            <h3>A fixed quote in writing</h3>
            <p>One monthly figure, what it covers, and the date of your first deadline with us.</p>
          </li>
          <li class="mgn__stepc" data-stepc>
            <span class="mgn__tick" aria-hidden="true"><svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18"/><path d="M11 21l6 6 12-14"/></svg></span>
            <p class="mgn__step-when">Days 3–14</p>
            <h3>We take it from there</h3>
            <p>We ask your old accountant for professional clearance, get agent access from HMRC and connect your bank feeds.</p>
          </li>
          <li class="mgn__stepc" data-stepc>
            <span class="mgn__tick" aria-hidden="true"><svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18"/><path d="M11 21l6 6 12-14"/></svg></span>
            <p class="mgn__step-when">Every month</p>
            <h3>One named accountant</h3>
            <p>Your figures on the 10th, a reply within one working day, and every deadline handled before it is due.</p>
          </li>
        </ol>
      </div>
    </section>

    <!-- ============ software, in plain text ============ -->
    <section class="mgn__soft" aria-labelledby="mgn-soft-h">
      <div class="mgn__soft-in">
        <h2 class="mgn__h3" id="mgn-soft-h" data-reveal>Software we work in</h2>
        <ul class="mgn__soft-list" data-reveal>
          <li>Xero</li><li>QuickBooks</li><li>FreeAgent</li><li>Sage</li><li>Dext</li><li>Hubdoc</li><li>Pleo</li><li>BrightPay</li>
        </ul>
        <p class="mgn__note mgn__note--soft" data-note><svg viewBox="0 0 60 40" aria-hidden="true"><path data-draw d="M56 6C40 4 20 10 8 30M8 30l2-11M8 30l10-4"/></svg><span>Still on spreadsheets? We move you over for free.</span></p>
      </div>
    </section>

    <!-- ============ team ============ -->
    <section class="mgn__team" id="mgn-team" aria-labelledby="mgn-team-h">
      <div class="mgn__team-head" data-reveal>
        <h2 class="mgn__h2" id="mgn-team-h">The people who answer the phone</h2>
        <p class="mgn__body">Five qualified accountants and bookkeepers. You get one of them by name, and they stay with you.</p>
      </div>
      <ul class="mgn__team-grid">
        <li class="mgn__person" data-reveal><span class="mgn__mono" style="--tone:var(--tone-1)" aria-hidden="true">RO</span><p class="mgn__role">Founder</p><h3>Ruth Okonjo FCA</h3><p>Limited companies and tax planning for owner-directors.</p><p class="mgn__reg">ICAEW member since 2004 <em>(sample)</em></p></li>
        <li class="mgn__person" data-reveal><span class="mgn__mono" style="--tone:var(--tone-2)" aria-hidden="true">CF</span><p class="mgn__role">Senior accountant</p><h3>Callum Firth ACCA</h3><p>Sole traders, landlords and Making Tax Digital.</p><p class="mgn__reg">ACCA member since 2015 <em>(sample)</em></p></li>
        <li class="mgn__person" data-reveal><span class="mgn__mono" style="--tone:var(--tone-3)" aria-hidden="true">SM</span><p class="mgn__role">Accountant</p><h3>Sana Mirza ACA</h3><p>Hospitality and retail clients, VAT schemes.</p><p class="mgn__reg">ICAEW member since 2019 <em>(sample)</em></p></li>
        <li class="mgn__person" data-reveal><span class="mgn__mono" style="--tone:var(--tone-4)" aria-hidden="true">ML</span><p class="mgn__role">Payroll lead</p><h3>Mei Lin Hart MCIPP</h3><p>Payroll, pensions auto-enrolment and P11Ds.</p><p class="mgn__reg">CIPP member <em>(sample)</em></p></li>
        <li class="mgn__person" data-reveal><span class="mgn__mono" style="--tone:var(--tone-5)" aria-hidden="true">JB</span><p class="mgn__role">Bookkeeper</p><h3>Joe Barraclough MAAT</h3><p>Weekly bookkeeping and VAT returns.</p><p class="mgn__reg">AAT member <em>(sample)</em></p></li>
      </ul>
    </section>

    <!-- ============ reviews (sample) ============ -->
    <section class="mgn__rev" aria-labelledby="mgn-rev-h">
      <div class="mgn__rev-in">
        <div class="mgn__rev-head" data-reveal>
          <h2 class="mgn__h2" id="mgn-rev-h">What clients say</h2>
          <p class="mgn__rev-score"><b>4.9</b> from 186 Google reviews</p>
          <p class="mgn__rev-flag">Sample reviews, template content</p>
        </div>
        <figure class="mgn__q mgn__q--big" data-reveal>
          <blockquote><p>We were two days from the January deadline with a shoebox of receipts. Callum filed it on time and then set us up so it never happens again.</p></blockquote>
          <figcaption><b>Danielle</b> · street-food trader, Kirkgate Market</figcaption>
        </figure>
        <figure class="mgn__q" data-reveal>
          <blockquote><p>The monthly fee has not moved in three years. I have never had a bill for a phone call.</p></blockquote>
          <figcaption><b>Imran</b> · director, joinery company, Headingley</figcaption>
        </figure>
        <figure class="mgn__q" data-reveal>
          <blockquote><p>Mei Lin moved our payroll from spreadsheets in a fortnight. The pension letters went out without me touching them.</p></blockquote>
          <figcaption><b>Claire</b> · owner, hair salon, Chapel Allerton</figcaption>
        </figure>
        <figure class="mgn__q" data-reveal>
          <blockquote><p>They told me straight that going limited would not save me money yet. My last accountant just sent the forms.</p></blockquote>
          <figcaption><b>Tom</b> · freelance designer, Meanwood</figcaption>
        </figure>
      </div>
    </section>

    <!-- ============ deadlines calendar ============ -->
    <section class="mgn__dl" id="mgn-deadlines" aria-labelledby="mgn-dl-h">
      <div class="mgn__dl-head" data-reveal>
        <h2 class="mgn__h2" id="mgn-dl-h">UK tax dates, counted down</h2>
        <p class="mgn__body">The next deadlines from today. Pick who you are to see only yours. Clients get a reminder three weeks before each one.</p>
      </div>
      <div class="mgn__dl-filter" role="group" aria-label="Show deadlines for" data-dl-filter>
        <button type="button" aria-pressed="true" data-f="all">Everyone</button>
        <button type="button" aria-pressed="false" data-f="sole">Sole traders &amp; landlords</button>
        <button type="button" aria-pressed="false" data-f="ltd">Limited companies</button>
        <button type="button" aria-pressed="false" data-f="emp">Employers</button>
        <button type="button" aria-pressed="false" data-f="vat">VAT-registered</button>
      </div>
      <ol class="mgn__dl-list" data-dl-list aria-live="polite">
        <li class="mgn__dlrow"><span class="mgn__dl-date"><b>31</b>Oct</span><span class="mgn__dl-what"><b>Paper Self Assessment return</b><span>For the 2025/26 tax year, if you still file on paper.</span></span><span class="mgn__dl-in">in 8 days</span></li>
        <li class="mgn__dlrow"><span class="mgn__dl-date"><b>7</b>Nov</span><span class="mgn__dl-what"><b>VAT return and payment</b><span>Quarter to 30 September.</span></span><span class="mgn__dl-in">in 15 days</span></li>
        <li class="mgn__dlrow"><span class="mgn__dl-date"><b>31</b>Jan</span><span class="mgn__dl-what"><b>Online Self Assessment return and tax bill</b><span>Balancing payment for 2025/26 and the first payment on account.</span></span><span class="mgn__dl-in">in 100 days</span></li>
      </ol>
      <p class="mgn__dl-fine">Company dates assume a 31 March year end. Making Tax Digital updates apply to sole traders and landlords with qualifying income over £50,000 from April 2026, over £30,000 from April 2027.</p>
    </section>

    <!-- ============ FAQ ============ -->
    <section class="mgn__faq" aria-labelledby="mgn-faq-h">
      <div class="mgn__faq-head" data-reveal>
        <h2 class="mgn__h2" id="mgn-faq-h">Questions we hear every week</h2>
        <p class="mgn__body">Anything else, ask on the free call. Or ring <a href="tel:+441134960274">0113 496 0274</a>.</p>
      </div>
      <div class="mgn__faq-list" data-faq>
        <div class="mgn__fq"><h3><button type="button" aria-expanded="false" aria-controls="mgn-fa1" id="mgn-fq1">How much does an accountant cost for a small business?<i aria-hidden="true"></i></button></h3><div class="mgn__fa" id="mgn-fa1" role="region" aria-labelledby="mgn-fq1" hidden><p>Most of our sole traders pay £45–£110 a month and most limited companies £150–£350, depending on turnover and how many services you need. The quote builder above uses the same price list we do.</p></div></div>
        <div class="mgn__fq"><h3><button type="button" aria-expanded="false" aria-controls="mgn-fa2" id="mgn-fq2">Can you take over from my current accountant mid-year?<i aria-hidden="true"></i></button></h3><div class="mgn__fa" id="mgn-fa2" role="region" aria-labelledby="mgn-fq2" hidden><p>Yes. We write to them for professional clearance and your records, set up agent access with HMRC and pick up from the last thing they filed. You do not need to have that conversation yourself.</p></div></div>
        <div class="mgn__fq"><h3><button type="button" aria-expanded="false" aria-controls="mgn-fa3" id="mgn-fq3">When do I need to register for VAT?<i aria-hidden="true"></i></button></h3><div class="mgn__fa" id="mgn-fa3" role="region" aria-labelledby="mgn-fq3" hidden><p>When your VAT-taxable turnover goes over £90,000 in any rolling 12 months (you then have 30 days to register), or when you expect to go over £90,000 in the next 30 days alone. We watch the rolling total for you every month.</p></div></div>
        <div class="mgn__fq"><h3><button type="button" aria-expanded="false" aria-controls="mgn-fa4" id="mgn-fq4">What is Making Tax Digital for Income Tax?<i aria-hidden="true"></i></button></h3><div class="mgn__fa" id="mgn-fa4" role="region" aria-labelledby="mgn-fq4" hidden><p>Sole traders and landlords with qualifying income over £50,000 now keep digital records and send HMRC a short update every quarter, plus a final declaration after the year. The threshold drops to £30,000 in April 2027. Our bookkeeping fee includes the quarterly updates.</p></div></div>
        <div class="mgn__fq"><h3><button type="button" aria-expanded="false" aria-controls="mgn-fa5" id="mgn-fq5">Do I have to use Xero?<i aria-hidden="true"></i></button></h3><div class="mgn__fa" id="mgn-fa5" role="region" aria-labelledby="mgn-fq5" hidden><p>No. We work in Xero, QuickBooks, FreeAgent and Sage. If you have no software yet we recommend one for your type of business and include the setup in your first month.</p></div></div>
        <div class="mgn__fq"><h3><button type="button" aria-expanded="false" aria-controls="mgn-fa6" id="mgn-fq6">Are you regulated?<i aria-hidden="true"></i></button></h3><div class="mgn__fa" id="mgn-fa6" role="region" aria-labelledby="mgn-fq6" hidden><p>Yes. We are a firm of chartered accountants regulated by the ICAEW, supervised for anti-money laundering, and we hold professional indemnity insurance. Our engagement letter sets out exactly what we do for your fee.</p></div></div>
      </div>
    </section>

    <!-- ============ booking form ============ -->
    <section class="mgn__book" id="mgn-book" aria-labelledby="mgn-book-h">
      <div class="mgn__book-in">
        <div class="mgn__book-side">
          <h2 class="mgn__h2" id="mgn-book-h">Book a free consultation</h2>
          <p class="mgn__body">30 minutes with a qualified accountant, on video or at Park Square. We reply within one working day to confirm a time.</p>
          <figure class="mgn__book-photo" data-wipe><img src="/assets/the-margin-note/consultation-tablet.webp" width="1600" height="1067" alt="An accountant showing a client figures on a tablet across a meeting table" loading="lazy"></figure>
        </div>
        <form class="mgn__form" data-form novalidate>
          <div class="mgn__form-fields" data-form-fields>
            <div class="mgn__fld"><label for="mgn-name">Full name</label><input id="mgn-name" name="name" type="text" autocomplete="name" required aria-describedby="mgn-name-err"><p class="mgn__err" id="mgn-name-err" data-err></p></div>
            <div class="mgn__fld"><label for="mgn-email">Email</label><input id="mgn-email" name="email" type="email" autocomplete="email" required aria-describedby="mgn-email-err"><p class="mgn__err" id="mgn-email-err" data-err></p></div>
            <div class="mgn__fld"><label for="mgn-phone">Phone <span>(optional)</span></label><input id="mgn-phone" name="phone" type="tel" autocomplete="tel"></div>
            <div class="mgn__fld"><label for="mgn-btype">Your business</label>
              <select id="mgn-btype" name="btype"><option value="sole">Sole trader</option><option value="limited" selected>Limited company</option><option value="partnership">Partnership</option><option value="landlord">Landlord</option><option value="starting">Not started yet</option></select></div>
            <fieldset class="mgn__fld mgn__fld--wide mgn__how-meet"><legend>How would you like to meet?</legend>
              <label><input type="radio" name="meet" value="video" checked><span>Video call</span></label>
              <label><input type="radio" name="meet" value="office"><span>At Park Square</span></label>
              <label><input type="radio" name="meet" value="phone"><span>Phone</span></label>
            </fieldset>
            <div class="mgn__fld mgn__fld--wide"><label for="mgn-msg">What would you like help with?</label><textarea id="mgn-msg" name="msg" rows="4" placeholder="e.g. I’m a sole trader about to go over the VAT threshold"></textarea><p class="mgn__quote-chip" data-quote-chip hidden></p></div>
            <button class="mgn__btn mgn__btn--lg mgn__fld--wide" type="submit">Request my free consultation</button>
            <p class="mgn__form-fine mgn__fld--wide">We only use your details to reply. Nothing is sent from this demo.</p>
          </div>
          <div class="mgn__done" data-done hidden tabindex="-1">
            <svg viewBox="0 0 80 80" aria-hidden="true"><circle cx="40" cy="40" r="34" data-done-c/><path d="M24 42l11 11 22-26" data-done-t/></svg>
            <h3 data-done-h>Thanks, we have your request</h3>
            <p data-done-p>Ruth will email you within one working day to confirm a time for your free consultation.</p>
            <button class="mgn__btn mgn__btn--ghost" type="button" data-again>Send another request</button>
          </div>
        </form>
      </div>
    </section>

    <!-- ============ hours + map ============ -->
    <section class="mgn__visit" id="mgn-visit" aria-labelledby="mgn-visit-h">
      <div class="mgn__visit-info">
        <h2 class="mgn__h2" id="mgn-visit-h">Find us on Park Square</h2>
        <address class="mgn__addr">Margin Note Accountants<br>3rd floor, 21 Park Square East<br>Leeds LS1 2NE <em>(sample address)</em></address>
        <p class="mgn__contact"><a href="tel:+441134960274">0113 496 0274</a><br><a href="mailto:[email protected]">[email protected]</a></p>
        <table class="mgn__hours" data-hours>
          <caption class="mgn__sr">Office hours</caption>
          <tbody>
            <tr data-d="1"><th scope="row">Monday</th><td>8:30am – 5:30pm</td></tr>
            <tr data-d="2"><th scope="row">Tuesday</th><td>8:30am – 5:30pm</td></tr>
            <tr data-d="3"><th scope="row">Wednesday</th><td>8:30am – 5:30pm</td></tr>
            <tr data-d="4"><th scope="row">Thursday</th><td>8:30am – 7pm</td></tr>
            <tr data-d="5"><th scope="row">Friday</th><td>8:30am – 5pm</td></tr>
            <tr data-d="6"><th scope="row">Saturday</th><td>Closed <span>(9am – 1pm in January)</span></td></tr>
            <tr data-d="0"><th scope="row">Sunday</th><td>Closed</td></tr>
          </tbody>
        </table>
        <p class="mgn__visit-fine">Eight minutes’ walk from Leeds station. Pay-and-display parking on Park Square West.</p>
      </div>
      <figure class="mgn__map" aria-labelledby="mgn-map-cap">
        <svg viewBox="0 0 640 520" role="img" aria-labelledby="mgn-map-t" data-map>
          <title id="mgn-map-t">Map illustration: the office on Park Square East, with the walking route from Leeds station</title>
          <rect width="640" height="520" class="mgn__map-ground"/>
          <g class="mgn__map-blocks">
            <rect x="24" y="24" width="150" height="96" rx="6"/><rect x="200" y="24" width="176" height="96" rx="6"/><rect x="402" y="24" width="214" height="96" rx="6"/>
            <rect x="24" y="148" width="150" height="190" rx="6"/><rect x="402" y="148" width="214" height="80" rx="6"/><rect x="402" y="254" width="214" height="84" rx="6"/>
            <rect x="24" y="366" width="150" height="130" rx="6"/><rect x="200" y="366" width="176" height="56" rx="6"/><rect x="402" y="366" width="96" height="56" rx="6"/>
          </g>
          <rect x="216" y="160" width="146" height="164" rx="10" class="mgn__map-park"/>
          <g class="mgn__map-trees"><circle cx="246" cy="196" r="9"/><circle cx="330" cy="200" r="11"/><circle cx="252" cy="290" r="10"/><circle cx="334" cy="286" r="9"/></g>
          <g class="mgn__map-roads">
            <path d="M0 134H640"/><path d="M0 352H640"/><path d="M187 0V520"/><path d="M389 0V520"/><path d="M200 146H376M200 338H376" class="mgn__map-minor"/>
            <path d="M0 438C200 434 420 448 640 440" class="mgn__map-major"/>
          </g>
          <rect x="510" y="456" width="122" height="52" rx="8" class="mgn__map-station"/>
          <g class="mgn__map-txt">
            <text x="289" y="128" text-anchor="middle">St Paul’s Street</text>
            <text x="289" y="346" text-anchor="middle">Park Place</text>
            <text x="394" y="118" transform="rotate(-90 394 118)" class="mgn__map-v">Park Square E.</text>
            <text x="289" y="246" text-anchor="middle" class="mgn__map-parkname">Park Square</text>
            <text x="40" y="432">Wellington Street</text>
            <text x="571" y="486" text-anchor="middle" class="mgn__map-stn">Leeds station</text>
          </g>
          <path class="mgn__map-walk" d="M546 456C526 444 486 440 446 438C410 436 390 424 389 396V230C389 214 396 206 412 206"/>
          <g data-pin><g class="mgn__map-pin"><path d="M420 206c-12-16-18-26-18-36a18 18 0 0 1 36 0c0 10-6 20-18 36Z"/><circle cx="420" cy="170" r="6.5"/></g></g>
          <g class="mgn__map-label"><rect x="448" y="152" width="140" height="34" rx="17"/><text x="518" y="174" text-anchor="middle">Margin Note</text></g>
        </svg>
        <figcaption id="mgn-map-cap"><span><b>Walk</b> 8 min from Leeds station</span><span><b>Park</b> Park Square West, pay and display</span><span><b>Access</b> Lift to the 3rd floor</span></figcaption>
      </figure>
    </section>
  </main>

  <!-- ============ footer ============ -->
  <footer class="mgn__foot">
    <div class="mgn__foot-in">
      <div class="mgn__foot-brand">
        <p class="mgn__foot-name">Margin Note</p>
        <p class="mgn__note mgn__note--foot">your books, kept in order</p>
      </div>
      <div><h3>Visit</h3><p>3rd floor, 21 Park Square East<br>Leeds LS1 2NE</p><p><a href="tel:+441134960274">0113 496 0274</a><br><a href="mailto:[email protected]">[email protected]</a></p></div>
      <div><h3>Services</h3><ul><li><a href="#mgn-services">Bookkeeping</a></li><li><a href="#mgn-services">VAT returns</a></li><li><a href="#mgn-services">Payroll</a></li><li><a href="#mgn-services">Self Assessment</a></li><li><a href="#mgn-services">Year-end accounts</a></li></ul></div>
      <div><h3>Useful</h3><ul><li><a href="#mgn-quote">Price your fee</a></li><li><a href="#mgn-deadlines">UK tax dates</a></li><li><a href="#mgn-book">Free consultation</a></li></ul></div>
    </div>
    <div class="mgn__foot-base">
      <p>Margin Note Accountants Ltd, registered in England and Wales, company no. 00000000 <em>(sample)</em>. Chartered accountants regulated by the ICAEW <em>(sample)</em>.</p>
      <p>Fictional brand — template content.</p>
    </div>
  </footer>

  <!-- ============ mobile sticky bar ============ -->
  <div class="mgn__bar" data-bar aria-label="Quick contact">
    <a class="mgn__btn mgn__btn--ghost" href="tel:+441134960274">Call</a>
    <a class="mgn__btn" href="#mgn-book">Book a free consultation</a>
  </div>
</div>
All section templates →