/* Brackenhouse Accountants — first-party accountancy template (S115, rebuilt S291).
   All imagery is authored CSS or existing library photography. No fonts, icons, embeds, CDNs,
   analytics or tracking.

   Voice: ESTABLISHED AND PRECISE. Deep navy and brass gold on ivory, a serif display over a sans
   body, CRISP 8px radii and tight lines — the traditional, trustworthy register a finance firm
   trades on.

   S291 rebuild: the homepage no longer runs the library's shared hero → 3-up card grid →
   proof-grid → dark-band skeleton. It runs an accountant-native vocabulary instead (`.bk-*`): a
   live multi-deadline rail, a ledger of entry-point ROWS (not cards), an inline salary-and-
   dividends take-home calculator (the signature tool, in `main.js`), a fiscal-year quarter
   timeline, a cinematic full-bleed desk band, a reconciled proof section (tick marks + one
   featured case note, not three equal review cards) and an FAQ with FAQPage JSON-LD. `.item-grid`
   /`.card`/`.band` stay — `services.html`'s filterable catalogue and closing CTA still use them,
   the same way the library's other rebuilt exemplars keep those primitives on their interior
   pages while killing them on the homepage. */

:root {
  /* Theming for the shared accessibility panel (library/shared/a11y/). */
  --a11y-ink: var(--ink);
  --a11y-surface: var(--card);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);

  --navy: #1b2f4a;
  --navy-mid: #2c456b;
  --navy-soft: #e7ecf3;
  --gold: #bd9245;
  --gold-deep: #81612c;
  --ivory: #f6f2e8;
  --card: #fffdf8;
  --line: #e3ddce;
  --ink: #21252c;
  --muted: #5c6470;
  --radius: 8px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --assistant-accent: #1b2f4a;
  --assistant-accent-ink: #fff;
  --assistant-panel: #fffdf8;
  --assistant-ink: #21252c;
  --assistant-muted: #5c6470;
  --assistant-soft: #e7ecf3;
  --assistant-line: #e3ddce;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--ivory); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: -0.005em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 12; background: var(--navy); color: #fff; padding: 0.55rem 1.1rem; border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 700; transition: top 0.15s ease; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.35rem; background: var(--ivory); border-bottom: 1px solid var(--line); position: relative; }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; text-decoration: none; color: var(--navy); white-space: nowrap; }
.brand-mark { flex: none; width: 2.2rem; height: 2.2rem; }
.brand-mark-frame { fill: var(--navy); }
.brand-mark-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wordmark-copy { display: inline-block; }
.wordmark span[aria-hidden] { color: var(--gold-deep); }
.nav-disclosure summary { list-style: none; cursor: pointer; user-select: none; font-weight: 700; padding: 0.55rem 1.1rem; border: 1.5px solid var(--navy); border-radius: 6px; color: var(--navy); }
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--navy); color: #fff; }
.nav-disclosure nav { position: absolute; right: 1.35rem; left: 1.35rem; top: calc(100% + 0.5rem); z-index: 9; display: flex; flex-direction: column; gap: 0.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem; box-shadow: 0 18px 38px rgba(27, 47, 74, 0.18); }
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 700; padding: 0.6rem 0.8rem; border-radius: 6px; color: var(--navy); }
.nav-disclosure nav a:not(.button):hover { background: var(--navy-soft); }
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav { position: static; flex-direction: row; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0; box-shadow: none; }
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.8rem; }
.header-call { display: none; }
@media (max-width: 799px) { .site-header { gap: 0.6rem; } .header-call { display: inline-block; margin-left: auto; } }
@media (max-width: 479px) { .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; } .wordmark { font-size: 1.2rem; } .header-call { font-size: 0.9rem; } .nav-disclosure summary { padding: 0.42rem 0.85rem; font-size: 0.9rem; } }

/* ---------- Brackenhouse loader + mark ----------
   The loader is intentionally CSS/inline-SVG only. The head's tiny bk-js flag means a no-script
   visitor never gets trapped behind it; main.js removes it after the first paint. */
.bk-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--navy); color: #fff; opacity: 1; visibility: visible; transition: opacity 0.28s ease, visibility 0.28s ease; }
html:not(.bk-js) .bk-loader, .bk-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.bk-loader-card { display: grid; justify-items: center; gap: 0.8rem; padding: 2rem 2.3rem; text-align: center; }
.bk-loader-mark { width: 3.3rem; height: 3.3rem; color: var(--ivory); }
.bk-loader-name { font-family: var(--serif); font-size: 1.55rem; letter-spacing: 0.01em; }
.bk-loader-rule { width: 9rem; height: 2px; overflow: hidden; background: rgba(255,255,255,0.22); }
.bk-loader-rule span { display: block; width: 45%; height: 100%; background: var(--gold); transform: translateX(-100%); animation: bk-loader-pass 1.1s ease-in-out infinite; }
@keyframes bk-loader-pass { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(225%); } }

/* ---------- Buttons ---------- */
.button { display: inline-block; text-decoration: none; text-align: center; font-weight: 700; font-size: 1rem; background: var(--navy); color: #fff; border: 1.5px solid var(--navy); border-radius: 6px; padding: 0.8rem 1.75rem; cursor: pointer; transition: background 0.15s ease, transform 0.12s ease; }
.button:hover { background: var(--navy-mid); border-color: var(--navy-mid); transform: translateY(-1px); }
.button-small { padding: 0.5rem 1.05rem; font-size: 0.94rem; }
.button-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.button-outline:hover { background: var(--navy); color: #fff; }
.button-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.button-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.button-light { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.button-light:hover { background: #fff; border-color: #fff; }
.call-link { font-weight: 700; color: var(--gold-deep); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------------------------------------------------------
   S285 craft lift, kept through the S291 rebuild: the right-hand device is a fully AUTHORED "year
   at a glance" ledger — no photography, nothing generic to this vertical — built from ruled rows,
   a gold ledger-margin rule and a fixed-fee stamp, the way a bookkeeper's own statement paper
   looks. S291 adds one thing: a live deadline chip in the hero badges row, the first appearance of
   the deadline motif that repeats through the deadline rail, the quarter timeline and the close. */
.hero { background: radial-gradient(circle at 82% 12%, #fffdf8 0, var(--ivory) 38%, #ece6d8 100%); padding: clamp(2.7rem, 6vw, 5.5rem) 1.35rem clamp(3.6rem, 7vw, 6.4rem); overflow: hidden; }
.hero-inner { max-width: 78rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3.2rem; align-items: start; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 0.84fr 1.16fr; gap: clamp(2.75rem, 5vw, 4.75rem); } }
.hero-copy { min-width: 0; padding-top: 0.3rem; }
.eyebrow { display: inline-block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-deep); background: var(--navy-soft); border-radius: 4px; padding: 0.38rem 0.85rem; margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(2.6rem, 4.6vw, 3.9rem); max-width: 15ch; letter-spacing: -0.025em; }
.hero h1 em { font-style: italic; color: var(--gold-deep); }
.hero-sub { margin-top: 1.25rem; font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 46ch; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.7rem; }
.hero-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.98rem; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; padding: 0.5rem 0.05rem; }
.hero-link:hover { text-decoration-color: var(--gold-deep); }
.hero-link span { display: inline-block; transition: transform 0.15s ease; }
.hero-link:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .hero-link:hover span { transform: none; } }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 1.6rem; }
.hero-badges li { font-size: 0.93rem; font-weight: 600; color: var(--navy); padding-left: 1.25rem; position: relative; }
.hero-badges li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.6rem; background: var(--gold); transform: rotate(45deg); }
.bk-hero-deadline { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.75rem 0.32rem 0.6rem !important; background: var(--navy-soft); border-radius: 999px; }
.bk-hero-deadline::before { content: none; }
.bk-hero-deadline strong { color: var(--gold-deep); }

/* The ledger device. */
.hero-ledger {
  position: relative; isolation: isolate; min-width: 0;
  width: calc(100% + 1.5rem); margin-right: -1.5rem; margin-top: 0.6rem;
  padding: 1.7rem 1.7rem 1.85rem 2.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transform: rotate(1deg);
  box-shadow: 0.55rem 0.8rem 0 rgba(27, 47, 74, 0.05), 0 1.85rem 3.2rem rgba(27, 47, 74, 0.18);
}
.hero-ledger::before {
  /* the second "sheet" underneath — a stack of statements, not a lone card */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--radius);
  transform: rotate(-2.4deg) translate(0.55rem, 0.65rem);
}
.hero-ledger::after {
  /* the gold ledger-margin rule, quoting real accounting paper */
  content: ""; position: absolute; left: 1.2rem; top: 0.9rem; bottom: 0.9rem; width: 2px;
  background: var(--gold); opacity: 0.6;
}
.ledger-kicker { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 0.9rem; padding-bottom: 0.85rem; margin-bottom: 0.35rem; border-bottom: 2px solid var(--navy); }
.ledger-kicker-text { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--navy); line-height: 1.15; }
.ledger-tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold-deep); background: var(--navy-soft); border-radius: 4px; padding: 0.3rem 0.55rem; white-space: nowrap; }
.ledger-rows { margin-top: 0.15rem; }
.ledger-rows li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; align-items: center; gap: 0.7rem 0.9rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.row-label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.row-track { height: 0.5rem; border-radius: 999px; background: var(--navy-soft); overflow: hidden; }
.row-bar { display: block; height: 100%; background: var(--gold-deep); border-radius: inherit; }
.ledger-rows li:nth-child(1) .row-bar { width: 100%; }
.ledger-rows li:nth-child(2) .row-bar { width: 37%; }
.ledger-rows li:nth-child(3) .row-bar { width: 13%; }
.row-value { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; font-size: 0.93rem; white-space: nowrap; text-align: right; }
.ledger-total { margin-top: 1.05rem; padding: 0.8rem 1rem; background: var(--navy-soft); border-radius: 6px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.ledger-total span { font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.ledger-total strong { font-family: var(--serif); font-size: 1.45rem; color: var(--navy); font-variant-numeric: tabular-nums; }
/* The grand-total tally rule — a thin gold underline that draws in AFTER the three row bars have
   resolved, the moment the ledger "totals". Same bk-fill mechanism as the row bars, later delay. */
.ledger-total-tally { display: block; margin-top: 0.55rem; height: 2px; background: var(--gold-deep); transform-origin: left center; }
.ledger-caveat { margin-top: 0.85rem; max-width: calc(100% - 4.5rem); font-size: 0.78rem; line-height: 1.45; color: #3f4650; }
.ledger-stamp {
  position: absolute; right: -0.6rem; bottom: -0.9rem; z-index: 2;
  display: grid; place-items: center; text-align: center; line-height: 1.3;
  width: 5.6rem; height: 5.6rem; border-radius: 50%; padding: 0.4rem;
  background: var(--navy); color: #fff;
  transform: rotate(8deg);
  box-shadow: 0 0.6rem 1.3rem rgba(27, 47, 74, 0.32);
  font-family: var(--serif); font-size: 0.68rem; white-space: nowrap;
}
.ledger-stamp b { display: block; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: #fff; margin-bottom: 0.1rem; }

/* ---------- bk-deadlines: the live multi-deadline rail (recurring motif, part 1) ----------
   Replaces the old single-line `.countdown`. Three dates instead of one, each computed fresh from
   today's date in main.js — self-assessment (fixed), a VAT quarter-end and a PAYE payment date
   (both illustrative examples of the kind of date a business actually tracks). */
.bk-deadlines { background: var(--navy); color: #fff; padding: 1.7rem 1.35rem 2rem; }
.bk-deadlines-inner { max-width: 76rem; margin: 0 auto; }
.bk-deadlines-label { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.9rem; }
.bk-deadlines-list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bk-deadlines-list { grid-template-columns: repeat(3, 1fr); } }
.bk-deadline-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
@media (min-width: 760px) { .bk-deadline-row { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.3rem 1.4rem; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); } .bk-deadline-row:first-child { border-left: 0; padding-left: 0; } }
.bk-deadline-name { font-weight: 700; font-size: 0.9rem; color: #cbd4df; }
.bk-deadline-count { font-variant-numeric: tabular-nums; font-size: 0.96rem; }
.bk-deadline-count strong { color: var(--gold); }
.bk-deadlines-note { margin-top: 1.1rem; font-size: 0.78rem; line-height: 1.5; color: #94a2b8; max-width: 62ch; }

/* ---------- Section frame + filter strip (services.html) ---------- */
.section { max-width: 70rem; margin: 0 auto; padding: 3rem 1.35rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.section-intro { margin-top: 0.6rem; max-width: 54ch; color: var(--muted); }
.filter-count { color: var(--gold-deep); font-weight: 700; }
.strip { background: var(--navy-soft); padding: 1.4rem 1.35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-form { max-width: 70rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: end; }
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { color: var(--navy); font-size: 0.9rem; font-weight: 700; }
.filter-form select { width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.8rem; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; }

/* ---------- bk-ledger-choice: "which line are you" — statement ROWS, not a 3-up card grid ---------- */
.bk-ledger-choice { max-width: 76rem; margin: 0 auto; padding: 3.4rem 1.35rem; }
.bk-ledger-choice-head { max-width: 58rem; }
.bk-ledger-choice-head p:last-child { margin-top: 0.6rem; color: var(--muted); max-width: 62ch; }
.bk-ledger-rows-list { margin-top: 2rem; border-top: 2px solid var(--navy); }
.bk-ledger-line { display: grid; grid-template-columns: 2.6rem 1fr; grid-template-areas: "code who" "note note" "go go"; gap: 0.3rem 1rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--line); transition: background 0.15s ease; }
@media (min-width: 760px) { .bk-ledger-line { grid-template-columns: 3.2rem 11rem 1fr auto; grid-template-areas: "code who note go"; align-items: center; gap: 1.3rem; padding: 1.1rem 0.5rem; } }
.bk-ledger-line:hover, .bk-ledger-line:focus-within { background: var(--navy-soft); }
.bk-ledger-code { grid-area: code; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 6px; background: var(--navy); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 0.95rem; }
.bk-ledger-line--muted .bk-ledger-code { background: var(--gold-deep); }
.bk-ledger-who { grid-area: who; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--navy); }
.bk-ledger-note { grid-area: note; color: var(--muted); font-size: 0.93rem; }
.bk-ledger-go { grid-area: go; font-weight: 700; font-size: 0.9rem; color: var(--gold-deep); text-decoration: none; white-space: nowrap; }
.bk-ledger-go:hover { text-decoration: underline; }

/* ---------- Trust / proof rail ---------- */

/* ---------- Cards (services.html filterable catalogue) ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.9rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(27, 47, 74, 0.14); }
.card-body { padding: 1.2rem 1.35rem 1.45rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-size: 1.22rem; }
.card-where { font-size: 0.86rem; font-weight: 700; color: var(--gold-deep); white-space: nowrap; }
.card-meta { margin-top: 0.45rem; color: var(--muted); font-size: 0.96rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.card-tags li { font-size: 0.78rem; font-weight: 600; color: var(--navy); background: var(--navy-soft); border-radius: 4px; padding: 0.22rem 0.7rem; }
.card-art { height: 200px; display: block; width: 100%; object-fit: cover; }
.filter-empty { margin-top: 1.9rem; padding: 1.5rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- bk-calculator: the signature tool, rendered INLINE (logic in main.js) ----------
   Reuses the `.estimator`/`.est-*` output shell (also used on calculator.html's dedicated page)
   so both instances share one visual language. */
.bk-calculator { max-width: 76rem; margin: 0 auto; padding: 3.4rem 1.35rem; }
.bk-calculator-head { max-width: 60rem; }
.bk-calculator-note { margin-top: 0.6rem; color: var(--muted); max-width: 64ch; }
.bk-payslip { margin-top: 2rem; }
.bk-calculator-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.3rem; margin-top: 1.3rem; }
.estimator { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.estimator h2, .estimator h3 { font-size: 1.35rem; }
.estimator > p { color: var(--muted); margin-top: 0.5rem; max-width: 58ch; }
.est-controls { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0.2rem; }
@media (min-width: 680px) { .est-controls { grid-template-columns: 1fr 1fr; } }
.est-controls .field label { display: block; font-weight: 600; font-size: 0.95rem; }
.est-controls input, .est-controls select { width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem; font: inherit; color: var(--ink); background: var(--ivory); border: 1px solid var(--line); border-radius: 6px; }
.est-out { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.est-list { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .est-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.est-list li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.est-list .what { color: var(--ink); }
.est-list .leader { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-0.25em); min-width: 1.5rem; }
.est-list .qty { font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.est-total { margin-top: 1.25rem; padding: 1rem 1.2rem; background: var(--navy-soft); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; }
.est-total .label { font-weight: 700; color: var(--navy); }
.est-total .value { font-family: var(--serif); font-size: 1.7rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.est-caveat { margin-top: 1rem; font-size: 0.93rem; color: var(--muted); max-width: 64ch; }

/* ---------- bk-method: the tax year, quarter by quarter — a fiscal-year timeline ---------- */
.bk-method { background: var(--navy); color: #fff; padding: 3.4rem 1.35rem; }
.bk-method-inner { max-width: 76rem; margin: 0 auto; }
.bk-method-head { max-width: 46rem; }
.bk-method-head h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); margin-top: 0.5rem; }
.bk-method-note { margin-top: 0.7rem; color: #c3cede; }
.bk-eyebrow-light { display: inline-block; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); background: transparent; padding: 0; margin-bottom: 0.9rem; }
.bk-method-quarters { margin-top: 2.2rem; display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 800px) { .bk-method-quarters { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.bk-method-quarters li { padding: 1.2rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
@media (min-width: 800px) { .bk-method-quarters li { padding: 1.3rem 1.3rem 0 0; border-top: 2px solid var(--gold); } }
.bk-q-no { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--gold); }
.bk-q-range { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: #9fb0c4; text-transform: uppercase; margin-top: 0.2rem; }
.bk-method-quarters h3 { color: #fff; font-size: 1.1rem; margin-top: 0.7rem; }
.bk-method-quarters p { color: #c3cede; font-size: 0.92rem; margin-top: 0.4rem; max-width: 26ch; }

/* ---------- bk-desk: full-bleed cinematic band (existing photography, no CDN) ---------- */
.bk-desk { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: clamp(20rem, 40vw, 30rem); }
.bk-desk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; z-index: 0; }
.bk-desk-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16, 26, 42, 0.90) 0%, rgba(16, 26, 42, 0.80) 30%, rgba(16, 26, 42, 0.42) 60%, rgba(16, 26, 42, 0.06) 82%, rgba(16, 26, 42, 0) 100%); }
.bk-desk-inner { position: relative; z-index: 2; width: 100%; max-width: 76rem; margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.6rem) 1.35rem; }
.bk-desk-line { font-family: var(--serif); color: #fff; font-size: clamp(1.95rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 15ch; margin-top: 0.5rem; text-shadow: 0 1px 24px rgba(10, 18, 30, 0.35); }
.bk-desk-sub { margin-top: 1rem; max-width: 46ch; color: #dfe6ee; font-size: 1.02rem; }
@media (max-width: 619px) { .bk-desk-scrim { background: linear-gradient(90deg, rgba(16, 26, 42, 0.92) 0%, rgba(16, 26, 42, 0.82) 55%, rgba(16, 26, 42, 0.42) 100%); } }

/* ---------- bk-reconciled: proof, RECONCILED — tick marks + one featured case note, not
   three equal review cards, and no generic dark band tail. ---------- */
.bk-reconciled { max-width: 76rem; margin: 0 auto; padding: 3.6rem 1.35rem; }
@media (min-width: 900px) { .bk-reconciled { padding: 4.6rem 1.35rem; } }
.bk-reconciled-inner { position: relative; display: grid; gap: 2rem; }
@media (min-width: 900px) { .bk-reconciled-inner { grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "lead marks" "case case"; gap: 2.5rem 3.5rem; align-items: start; } .bk-reconciled-lead { grid-area: lead; } .bk-reconciled-marks { grid-area: marks; } .bk-reconciled-case { grid-area: case; } }
.bk-reconciled-note { margin-top: 0.7rem; color: var(--muted); max-width: 36ch; }
.bk-reconciled-marks { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
@media (min-width: 560px) { .bk-reconciled-marks { grid-template-columns: 1fr 1fr; margin-top: 0; } }
.bk-reconciled-marks li { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 0.95rem 1rem; }
.bk-mark-tick { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy-soft); color: var(--gold-deep); font-weight: 800; font-size: 0.9rem; }
.bk-reconciled-marks strong { display: block; font-family: var(--serif); font-size: 1.02rem; color: var(--navy); }
.bk-reconciled-marks span { color: var(--muted); font-size: 0.87rem; }
.bk-reconciled-case { margin: 2rem 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; }
@media (min-width: 560px) { .bk-reconciled-case { grid-template-columns: 11rem 1fr; align-items: stretch; margin-top: 0; } }
.bk-reconciled-case img { display: block; width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
.bk-reconciled-case blockquote { margin: 0; padding: 1.4rem 1.5rem 0.5rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.bk-reconciled-case .bk-case-placeholder { display: grid; align-content: center; gap: 0.55rem; font-family: var(--sans); font-size: 0.98rem; color: var(--muted); }
.bk-case-placeholder strong { font-family: var(--serif); font-size: 1.22rem; color: var(--navy); }
.bk-reconciled-case figcaption { padding: 0 1.5rem 1.4rem; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.bk-reconciled-case figcaption span { color: var(--muted); font-weight: 400; }

/* bk-stamp-audit — extends the hero's bk-stamp mechanism (same THUD-down character) to a second,
   scroll-triggered stamp: a red draft ring pressed over the top-right corner of the proof block.
   It marks the panel as a placeholder rather than claiming a real approval or accreditation. */
.bk-stamp-audit {
  position: absolute; z-index: 3; top: -0.5rem; right: 0.6rem;
  display: grid; place-items: center; text-align: center; line-height: 1.2;
  width: 6rem; height: 6rem; border-radius: 50%; padding: 0.5rem;
  border: 3px solid #9c2b2b; color: #9c2b2b; background: transparent;
  transform: rotate(8deg);
  font-family: var(--serif); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em;
  mix-blend-mode: multiply; pointer-events: none;
}
.bk-stamp-audit b { display: block; font-size: 0.92rem; font-weight: 800; letter-spacing: 0.02em; }

/* ---------- bk-faq: an accordion (full set on faq.html); JSON-LD in <head> ---------- */
.bk-faq { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-faq-inner { max-width: 76rem; margin: 0 auto; padding: 3.4rem 1.35rem; display: grid; gap: 1.75rem; }
@media (min-width: 880px) { .bk-faq-inner { grid-template-columns: 0.75fr 1.25fr; gap: 3rem; align-items: start; } }
.bk-faq-head .call-link { display: inline-block; margin-top: 0.9rem; }
.bk-faq-list { display: grid; gap: 0; border-top: 2px solid var(--navy); }
.bk-faq-item { border-bottom: 1px solid var(--line); }
.bk-faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 700; color: var(--navy); position: relative; }
.bk-faq-item summary::-webkit-details-marker { display: none; }
.bk-faq-item summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.8rem; font-family: var(--sans); font-weight: 700; font-size: 1.5rem; color: var(--gold-deep); transition: transform 0.2s ease; }
.bk-faq-item[open] summary::after { transform: rotate(45deg); }
.bk-faq-item p { padding: 0 0 1.1rem; color: var(--muted); max-width: 62ch; }
.bk-faq-item p a { color: var(--gold-deep); font-weight: 700; }

/* ---------- bk-close: the conversion moment, closing the deadline motif — not a generic dark band ---------- */
.bk-close { background: var(--navy); color: #fff; }
.bk-close-inner { max-width: 76rem; margin: 0 auto; padding: 3.4rem 1.35rem; display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 820px) { .bk-close-inner { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } }
.bk-close-copy h2 { color: #fff; }
.bk-close-copy p { margin-top: 0.8rem; color: #c3cede; max-width: 44ch; }
.bk-close-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
@media (min-width: 820px) { .bk-close-actions { align-items: flex-end; text-align: right; } }
.bk-close-deadline { font-size: 0.92rem; color: #c3cede; }
.bk-close-deadline strong { color: var(--gold); }
.bk-close-hours { font-size: 0.85rem; color: #9fb0c4; }

/* ---------- band (services.html closing CTA — kept: an interior-page primitive, not the
   homepage's dark-band tail that was killed) ---------- */
.band { background: var(--navy); color: #fff; padding: 3.5rem 1.35rem; text-align: center; }
.band-eyebrow { color: var(--gold); background: transparent; margin-bottom: 1rem; }
.band h2 { color: #fff; }
.band p { max-width: 52ch; margin: 0.9rem auto 1.7rem; color: #c3cede; }

/* ---------- Interior pages ---------- */
.page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.35rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--gold-deep); }
.page-hero { padding: 1.5rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); }
.page-hero p { margin-top: 0.9rem; max-width: 56ch; color: var(--muted); }

/* S301 calculator-opening repair — give the dedicated tool its own ledger-led first frame
   while keeping the current local, illustrative tax boundary explicit. */
.bk-calculator-page .page { max-width: 76rem; }
.bk-calculator-page .bk-calculator-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(17rem, .88fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; padding: 2rem 0 2.8rem; border-bottom: 1px solid var(--line); }
.bk-calc-kicker, .bk-calc-signpost__label { margin: 0 0 1rem; color: var(--gold-deep); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bk-calculator-page .bk-calculator-hero h1 { max-width: 12ch; font-size: clamp(3rem, 6vw, 5.3rem); letter-spacing: -.045em; }
.bk-calculator-page .bk-calculator-hero h1 em { color: var(--gold-deep); font-style: italic; }
.bk-calculator-page .bk-calculator-hero .hero-actions { margin-top: 1.5rem; }
.bk-calc-signpost { position: relative; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--navy); color: #fff; border: 1px solid var(--navy); box-shadow: .6rem .7rem 0 rgba(27, 47, 74, .08); }
.bk-calc-signpost::before { content: ""; position: absolute; top: 1.2rem; bottom: 1.2rem; left: 1rem; width: 2px; background: var(--gold); opacity: .8; }
.bk-calc-signpost > * { position: relative; margin-left: .8rem; }
.bk-calc-signpost__label { color: var(--gold); }
.bk-calc-signpost strong { display: block; max-width: 10ch; color: #fff; font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 3.1rem); line-height: .98; }
.bk-calc-signpost ul { display: grid; gap: .55rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.bk-calc-signpost li { color: #d2dbe7; font-size: .82rem; }
.bk-calculator-page .bk-calculator-hero + .estimator { margin-top: 2rem; border-top: 4px solid var(--gold); scroll-margin-top: 1.5rem; }
@media (max-width: 860px) {
  .bk-calculator-page .bk-calculator-hero { grid-template-columns: 1fr; gap: 1.6rem; }
  .bk-calc-signpost { max-width: 32rem; }
}

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.9rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start; }
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem; font: inherit; color: var(--ink); background: var(--ivory); border: 1px solid var(--line); border-radius: 6px; }
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--navy); min-height: 1.4em; }
.panel { background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; align-self: start; }
.panel h2 { font-size: 1.3rem; }
.steps { counter-reset: step; margin-top: 1.2rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -0.05rem; width: 2rem; height: 2rem; display: grid; place-items: center; font-weight: 700; color: var(--navy); background: var(--gold); border-radius: 6px; }
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--muted); font-size: 0.96rem; }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; max-width: 62ch; }

/* ---------- Footer ---------- */
footer { background: var(--navy); color: #a8b4c8; padding: 2.6rem 1.35rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem; }
.wordmark-footer { font-family: var(--serif); font-size: 1.4rem; color: #fff; margin-bottom: 0.5rem; }
footer .call-link { color: var(--gold); }
.footer-truth { max-width: 38ch; font-size: 0.88rem; color: #8e9aaf; align-self: end; }
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; color: #8e9aaf; }
.footer-powered { color: #fff; }

/* ---------- Responsive rhythm ---------- */
@media (max-width: 619px) {
  .hero { padding-top: 2.2rem; }
  .hero h1 { max-width: 12ch; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .hero-link { align-self: flex-start; }
  .hero-ledger { width: 100%; margin-right: 0; margin-top: 1.7rem; transform: rotate(0.6deg); padding: 1.4rem 1.4rem 1.65rem 1.9rem; }
  .hero-ledger::before { transform: rotate(-1.1deg) translate(0.4rem, 0.45rem); }
  .ledger-rows li { grid-template-columns: minmax(5.4rem, 7.5rem) 1fr auto; gap: 0.55rem 0.7rem; }
  .ledger-caveat { max-width: calc(100% - 3.8rem); }
  .ledger-stamp { width: 4.5rem; height: 4.5rem; right: -0.4rem; bottom: -0.9rem; font-size: 0.68rem; }
  /* S294 fix: absolute + right:0.3rem let the rotated draft proof stamp overflow past
     the viewport's right edge at 390px (and overlap the "add up." heading once the column narrows
     below ~380px). Below 620px the badge instead flows in normal document order — right after the
     lead block, before the checklist — and is pulled to the right edge of its own grid row with
     `justify-self`, so it can never sit on top of text or bleed off-screen at any mobile width. */
  .bk-stamp-audit {
    position: static; top: auto; right: auto; inset: auto;
    justify-self: end; margin: 0 0 0.2rem;
    width: 5rem; height: 5rem; font-size: 0.42rem; padding: 0.3rem;
  }
  .bk-stamp-audit b { font-size: 0.58rem; }
  .band { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .button:hover, .card:hover { transform: none; }
  .bk-loader-rule span { animation: none; transform: none; }
}

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). Layout only, no colour, so this block is copy-paste identical across every
   palette in the library. Inline links inside prose are deliberately NOT touched. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. These two must name THIS template's own variables — the 20
   templates do not share a vocabulary. check-library-a11y.mjs fails the build without both.
   ⚠ A boundary token goes to INK even when its value is light.
   ⛔ Demos are exempt from the STRICTER-than-AA layers this file used to chase precisely (S283);
   this pass covers the same load-bearing gold-on-navy spots the original did, at the same effort. */
html[data-a11y-contrast="high"] {
  --navy: #000; --navy-mid: #000; --gold: #000; --gold-deep: #000; --ink: #000;
  --muted: #000; --line: #000;
  --navy-soft: #fff; --ivory: #fff; --card: #fff;
  --assistant-accent: #000; --assistant-panel: #fff; --assistant-ink: #000;
  --assistant-muted: #000; --assistant-soft: #fff; --assistant-line: #000;
}
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] .footer-truth,
html[data-a11y-contrast="high"] .footer-powered,
html[data-a11y-contrast="high"] footer .call-link,
html[data-a11y-contrast="high"] .band p,
html[data-a11y-contrast="high"] .bk-deadlines-label,
html[data-a11y-contrast="high"] .bk-deadline-count strong,
html[data-a11y-contrast="high"] .bk-eyebrow-light,
html[data-a11y-contrast="high"] .bk-q-no,
html[data-a11y-contrast="high"] .bk-close-deadline strong,
html[data-a11y-contrast="high"] .bk-close-copy p { color: #fff; }

/* Okabe-Ito. ⚠ Navy and gold is a blue/yellow pair — the TRITANOPIA collapse specifically. */
html[data-a11y-colour="safe"] {
  --navy: #23282a; --navy-mid: #3a4245; --navy-soft: #e8f1f7;
  --gold: #0072b2; --gold-deep: #005a8d;
  --assistant-accent: #0072b2; --assistant-soft: #e8f1f7;
}

/* ⛔⛔⭐⭐⭐ S191 — THIS MODE WAS MAKING THE PAGE HARDER TO READ, AND EVERY GATE WAS GREEN ON IT.
   Measured with `scripts/prove-contrast.mjs --a11y-colour safe`:
   ✓ default state **0 failures** · ✓ colour-blind mode **failures wherever gold text sat ON navy
   chrome** — the accent and the chrome moved to a blue/blue-grey pair 2.88:1 apart, so gold-on-navy
   (4.74:1) collapsed to blue-on-navy (2.88:1) even though each substitution was individually
   correct. The house pair is BLUE ON LIGHT, AMBER ON DARK (fernwild/haldenreed/copperline); every
   spot below is gold text sitting on this template's navy chrome. */
html[data-a11y-colour="safe"] footer .call-link,
html[data-a11y-colour="safe"] .bk-deadline-count strong,
html[data-a11y-colour="safe"] .bk-eyebrow-light,
html[data-a11y-colour="safe"] .bk-q-no,
html[data-a11y-colour="safe"] .bk-close-deadline strong { color: #e69f00; }
html[data-a11y-colour="safe"] .button-gold { background: #e69f00; border-color: #e69f00; }

/* ⬜ And the quieter body text on the same navy grounds, retuned to the S191 values. */
html[data-a11y-colour="safe"] footer { color: #b0bcc6; }
html[data-a11y-colour="safe"] .footer-truth,
html[data-a11y-colour="safe"] .footer-powered { color: #98a6b3; }
html[data-a11y-colour="safe"] .band p,
html[data-a11y-colour="safe"] .bk-method-note,
html[data-a11y-colour="safe"] .bk-close-copy p { color: #bcc8d1; }

/* ---------- Motion — the ledger fills on load, the desk band gets a slow Ken-Burns, and every
   below-fold section eases in on the scroll view timeline. Transform/opacity only -> zero CLS;
   reduced-motion strips it all. ---------- */
@keyframes bk-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bk-enter {
  from { opacity: 0; transform: scale(1.045); filter: none; }
  to { opacity: 1; transform: scale(1); filter: none; }
}
/* The fixed-fee stamp THUDS down once the bars have resolved (scale 1.3->1, keeping its 8deg tilt). */
@keyframes bk-stamp { from { transform: rotate(8deg) scale(1.3); opacity: 0; } to { transform: rotate(8deg) scale(1); opacity: 1; } }
/* The desk band's slow Ken-Burns, scrubbed by the scroll view timeline. scale>=1 so it always covers. */
@keyframes bk-desk-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .row-bar { transform-origin: left center; animation: bk-fill 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .ledger-rows li:nth-child(1) .row-bar { animation-delay: 0.25s; }
  .ledger-rows li:nth-child(2) .row-bar { animation-delay: 0.42s; }
  .ledger-rows li:nth-child(3) .row-bar { animation-delay: 0.59s; }
  .ledger-stamp { animation: bk-stamp 0.5s cubic-bezier(0.18, 1.5, 0.4, 1) 0.9s both; }
  /* The grand-total tally rule draws in once every row bar has resolved (0.59s + 0.9s duration). */
  .ledger-total-tally { animation: bk-fill 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s both; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bk-desk-img {
      transform-origin: 60% 40%; animation: bk-desk-kenburns linear both;
      animation-timeline: view(); animation-range: entry 0% exit 100%;
    }
    .item-grid > .card, .bk-deadline-row, .bk-ledger-line, .bk-method-quarters li, .bk-reconciled-marks li, .bk-faq-item {
      animation: bk-enter linear both; animation-timeline: view(); animation-range: entry 4% cover 30%;
    }
    .item-grid > .card:nth-child(2), .bk-ledger-line:nth-child(2), .bk-method-quarters li:nth-child(2), .bk-reconciled-marks li:nth-child(2) { animation-range: entry 10% cover 34%; }
    .item-grid > .card:nth-child(3), .bk-ledger-line:nth-child(3), .bk-method-quarters li:nth-child(3), .bk-reconciled-marks li:nth-child(3) { animation-range: entry 16% cover 38%; }
    .bk-ledger-line:nth-child(4), .bk-method-quarters li:nth-child(4) { animation-range: entry 22% cover 42%; }
    /* bk-stamp-audit — the SAME bk-stamp keyframe as the hero's fixed-fee stamp, extended here to a
       scroll-linked trigger since this one lives well below the fold. */
    .bk-stamp-audit { animation: bk-stamp linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .row-bar { animation: none !important; transform: none !important; }
  .ledger-stamp { animation: none !important; transform: rotate(8deg) !important; opacity: 1 !important; }
  .ledger-total-tally { animation: none !important; transform: none !important; }
  .bk-desk-img { animation: none !important; animation-timeline: none !important; transform: none !important; }
  .item-grid > .card, .bk-deadline-row, .bk-ledger-line, .bk-method-quarters li, .bk-reconciled-marks li, .bk-faq-item {
    animation: none !important; animation-timeline: none !important; opacity: 1 !important; transform: none !important;
  }
  .bk-stamp-audit { animation: none !important; animation-timeline: none !important; transform: rotate(8deg) !important; opacity: 1 !important; }
}

/* ---------- Card image ZOOM on hover (premium gallery feel; hover/focus only, no idle, no CLS) ---------- */
.card { overflow: hidden; }
.card-art { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-art, .card:focus-within .card-art { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .card-art { transition: none; } .card:hover .card-art, .card:focus-within .card-art { transform: none; } }

/* S301 parity pass — restore the compact accountancy service rail visible in the reference
   before the ledger-led hero. Labels describe the fictional preview rather than credentials. */
.bracken-utility { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem 1.4rem; min-height:2.35rem; padding:.48rem 1.2rem; background:var(--navy); color:#eef2f7; border-bottom:1px solid rgba(189,146,69,.45); font-size:.7rem; }
.bracken-utility__label { color:var(--gold); font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.bracken-utility a { color:#f4dcae; font-weight:800; text-decoration:underline; text-underline-offset:.18em; }
@media (max-width:680px) { .bracken-utility { justify-content:flex-start; gap:.22rem .75rem; padding:.58rem .9rem; font-size:.63rem; } .bracken-utility > span:nth-child(2) { flex-basis:100%; } }
/* S301 parity repair — add the human/image role beside the ledger without fake proof. */
.bracken-proof-card { display:grid; grid-template-columns:minmax(14rem,.7fr) 1fr; gap:clamp(1.4rem,5vw,4rem); align-items:stretch; width:min(78rem,calc(100% - 2rem)); margin:clamp(2rem,5vw,4rem) auto 0; padding:1rem; background:#f3eee3; border:1px solid rgba(27,47,74,.2); }
.bracken-proof-card__image { display:flex; flex-direction:column; justify-content:flex-end; min-height:13rem; padding:1.2rem; color:#fff; background:linear-gradient(145deg,rgba(27,47,74,.1),rgba(27,47,74,.82)),linear-gradient(35deg,#c9b58a 0 46%,#71846f 46% 68%,#d8c8a4 68%); }
.bracken-proof-card__image span { font-size:.58rem; font-weight:900; letter-spacing:.15em; }
.bracken-proof-card__image strong { margin-top:.8rem; font-size:clamp(1.7rem,3vw,3rem); line-height:.95; }
.bracken-proof-card > div:last-child { display:flex; flex-direction:column; justify-content:center; padding:clamp(.6rem,3vw,2rem); }
.bracken-proof-card__kicker { color:#a06d25; font-size:.63rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.bracken-proof-card h2 { margin-top:.55rem; color:#1b2f4a; font-size:clamp(1.7rem,3.3vw,3.2rem); }
.bracken-proof-card > div:last-child p:not(.bracken-proof-card__kicker) { max-width:34rem; margin-top:.75rem; color:#536174; font-size:.85rem; }
.bracken-proof-card a { width:fit-content; margin-top:1rem; color:#1b2f4a; font-size:.7rem; font-weight:900; letter-spacing:.1em; text-decoration:underline; text-transform:uppercase; }
@media (max-width:680px) { .bracken-proof-card { grid-template-columns:1fr; width:calc(100% - 1rem); } .bracken-proof-card__image { min-height:10rem; } }

/* S301 opening-role closeout — the reference introduces its business/image collage beside the
   first calculation, so the local ledger must carry that visual role in the opening viewport too. */
.hero-ledger { padding-right: clamp(5.5rem, 11vw, 8.5rem); }
.bracken-hero-collage { position:absolute; top:-2.4rem; right:-1.65rem; z-index:3; width:min(13rem,38%); height:9rem; pointer-events:none; }
.bracken-hero-collage img { position:absolute; display:block; width:62%; height:62%; object-fit:cover; border:.35rem solid var(--card); box-shadow:.55rem .65rem 1rem rgba(27,47,74,.22); }
.bracken-hero-collage img:nth-child(1) { top:2%; left:2%; transform:rotate(-7deg); }
.bracken-hero-collage img:nth-child(2) { top:8%; right:1%; transform:rotate(6deg); }
.bracken-hero-collage img:nth-child(3) { right:16%; bottom:0; width:56%; height:52%; transform:rotate(-3deg); }
@media (max-width:680px) {
  .hero-ledger { padding-right:1.4rem; padding-top:5.2rem; }
  .bracken-hero-collage { top:.45rem; right:.65rem; width:7.5rem; height:4.6rem; }
  .bracken-hero-collage img { border-width:.22rem; }
}

/* S301 image-role repair — turn the proof block into an authored ledger collage rather than
   a flat gradient. All three frames are representative local media, not client evidence. */
.bracken-proof-card__image { position:relative; isolation:isolate; display:block; overflow:hidden; min-height:15rem; padding:0; background:#1b2f4a; }
.bracken-proof-card__image::after { position:absolute; inset:0; z-index:2; background:linear-gradient(145deg,rgba(27,47,74,.05),rgba(27,47,74,.82)); content:""; pointer-events:none; }
.bracken-proof-card__image img { position:absolute; z-index:1; width:62%; height:58%; object-fit:cover; border:.4rem solid #f3eee3; box-shadow:.7rem .7rem 1.4rem rgba(0,0,0,.22); }
.bracken-proof-card__image img:nth-child(1) { top:7%; left:6%; transform:rotate(-5deg); }
.bracken-proof-card__image img:nth-child(2) { top:16%; right:5%; transform:rotate(7deg); }
.bracken-proof-card__image img:nth-child(3) { right:14%; bottom:6%; width:54%; height:48%; transform:rotate(-3deg); }
.bracken-proof-card__image span, .bracken-proof-card__image strong { position:relative; z-index:3; display:block; margin-left:1.2rem; }
.bracken-proof-card__image span { padding-top:1.2rem; }
.bracken-proof-card__image strong { margin-top:8.4rem; }
@media (max-width:680px) { .bracken-proof-card__image { min-height:13rem; } .bracken-proof-card__image strong { margin-top:7.2rem; } }

/* S301 opening-parity closeout — London Accountants leads with a human business collage,
   so the rebrand uses the authored local conversation photograph as the primary opening role
   and keeps the ledger/chart plates as honest supporting frames. */
.hero-ledger.bracken-photo-panel { min-height:clamp(25rem,38vw,35rem); padding:0; overflow:visible; border:0; background:transparent; box-shadow:none; transform:none; }
.hero-ledger.bracken-photo-panel::before, .hero-ledger.bracken-photo-panel::after { display:none; }
.bracken-photo-collage { position:relative; height:100%; min-height:inherit; isolation:isolate; }
.bracken-photo { position:absolute; margin:0; overflow:hidden; border:.55rem solid var(--card); background:var(--card); box-shadow:.7rem .9rem 1.4rem rgba(27,47,74,.2); }
.bracken-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.bracken-photo--lead { inset:6% 4% 6% 8%; z-index:1; transform:rotate(1.3deg); }
.bracken-photo--lead img { object-position:52% 45%; }
.bracken-photo--lead figcaption { position:absolute; right:0; bottom:0; left:0; padding:.65rem .8rem; color:#fff; background:linear-gradient(transparent,rgba(27,47,74,.88)); font-size:.58rem; font-weight:900; letter-spacing:.12em; }
.bracken-photo--ledger { top:-3%; right:-3%; z-index:3; width:35%; height:30%; transform:rotate(7deg); }
.bracken-photo--chart { right:-5%; bottom:4%; z-index:4; width:33%; height:29%; transform:rotate(-4deg); }
.bracken-photo--building { bottom:-2%; left:-1%; z-index:3; width:30%; height:25%; transform:rotate(-6deg); }
.bracken-collage-note { position:absolute; right:7%; bottom:-1.9rem; z-index:5; padding:.55rem .75rem; color:#fff; background:var(--navy); box-shadow:.3rem .35rem 0 rgba(27,47,74,.18); font-size:.56rem; font-weight:900; letter-spacing:.12em; }
@media (max-width:680px) {
  .hero-ledger.bracken-photo-panel { min-height:21rem; margin-top:1.2rem; }
  .bracken-photo { border-width:.28rem; }
  .bracken-photo--lead { inset:6% 3% 7% 7%; }
  .bracken-collage-note { right:4%; bottom:-1.35rem; padding:.4rem .55rem; font-size:.46rem; }
}

/* S301 opening-parity closeout — the reference leads with a clean white canvas,
   a compact sans headline and a rounded human/business collage. */
body[data-page="home"] .hero { background:#fff; }
body[data-page="home"] .hero h1 { max-width:11ch; font-family:var(--sans); font-size:clamp(2.8rem,5vw,4.7rem); font-weight:800; letter-spacing:-.065em; line-height:.98; }
body[data-page="home"] .hero h1 em { color:var(--ink); font-style:normal; }
body[data-page="home"] .hero-sub { max-width:42ch; color:#68717b; }
body[data-page="home"] .hero-ledger.bracken-photo-panel { min-height:clamp(25rem,38vw,32rem); }
body[data-page="home"] .bracken-photo { border-radius:1.8rem; border-width:.42rem; }
body[data-page="home"] .bracken-photo--lead { inset:5% 12% 5% 16%; border-radius:2.4rem; }
body[data-page="home"] .bracken-photo--ledger { top:0; right:2%; width:30%; height:31%; border-radius:0 2rem 0 2rem; }
body[data-page="home"] .bracken-photo--chart { right:0; bottom:2%; width:29%; height:28%; border-radius:2rem 0 2rem 0; }
body[data-page="home"] .bracken-photo--building { bottom:1%; left:7%; width:25%; height:23%; border-radius:2rem 0 2rem 0; }
body[data-page="home"] .bracken-collage-note { right:10%; bottom:-1.45rem; background:var(--gold); color:var(--navy); }
@media (max-width:680px) {
  body[data-page="home"] .hero h1 { font-size:clamp(2.6rem,12vw,4rem); }
  body[data-page="home"] .bracken-photo { border-width:.24rem; border-radius:1.1rem; }
  body[data-page="home"] .bracken-photo--lead { border-radius:1.5rem; }
  body[data-page="home"] .bracken-collage-note { right:4%; bottom:-1.1rem; }
}

/* S301 visual gate repair — the services catalogue must remain readable in the ordinary
   motion state, not only after the reduced-motion shortcut has removed reveal styling. */
body[data-page="services"] .card-meta {
  color: #414b59;
  opacity: 1;
  filter: none;
}
body .item-grid .card-meta {
  color: #414b59;
  opacity: 1;
  filter: none;
}
body[data-page="services"] .item-grid > .card {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}