/* Diane's Bookkeeping Services — design system v3 "The Kept Ledger"
   A senior bookkeeper's desk, typeset like a financial statement. Paper ground, a navy drawn from
   Diane's own logo, copper as the single action colour. Source Serif 4 for headings, Source Sans 3 for reading at 19px,
   Source Code Pro for figures. One shadow, 1px rules, no pills, no fades. */

:root {
  /* ground and surfaces */
  --paper: #F7F3EC;
  --surface: #FFFFFF;
  --surface-tint: #E9EFF5;
  --surface-warm: #F4E3D6;
  /* text. Secondary tones are kept close to the primary on purpose: hierarchy comes from size
     and weight, not from fading the words out. Nothing below 7:1 on paper. */
  --ink: #16241D;
  --ink-2: #2E3A34;
  --ink-muted: #45514B;
  /* brand. Derived from the one brand asset Diane supplied: her logo, whose azure samples at
     #01A0FF. That azure is only 2.5:1 on paper, so it stays the logo mark and large graphics
     while this deepened navy carries the brand. Copper remains the single action colour. */
  --brand: #12314F;
  --brand-hover: #0C2540;
  --brand-band: #0A1F34;
  --brand-soft: #C9DCEC;
  --azure: #01A0FF;
  --azure-on-dark: #4FBBFF;
  --copper: #9C4A1E;
  --copper-hover: #7E3A16;
  --copper-on-dark: #E0956A;
  --paper-on-dark: #F7F3EC;
  --muted-on-dark: #BCCBD9;
  /* lines, states */
  --line: #D8D4CB;
  --line-strong: #12314F;
  --focus: #9C4A1E;
  --success: #2E7D4F;
  --success-bg: #E6F1EA;
  --error: #B3261E;
  --error-bg: #F9E9E7;
  --gold: #B47708;
  --gold-bg: #F7EBCF;
  /* type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Source Code Pro', Consolas, 'Courier New', monospace;
  --text-display: clamp(2.5rem, 1.55rem + 2.1vw, 4rem);      /* 40 -> 64 */
  --text-h1: clamp(2.125rem, 1.62rem + 1.15vw, 3rem);        /* 34 -> 48 */
  --text-h2: clamp(1.8125rem, 1.5rem + 0.75vw, 2.375rem);    /* 29 -> 38 */
  --text-h3: clamp(1.375rem, 1.24rem + 0.32vw, 1.625rem);    /* 22 -> 26 */
  --text-h4: clamp(1.1875rem, 1.12rem + 0.16vw, 1.3125rem);  /* 19 -> 21 */
  --text-lead: clamp(1.1875rem, 1.08rem + 0.25vw, 1.375rem); /* 19 -> 22 */
  --text-body: clamp(1.125rem, 1.09rem + 0.09vw, 1.1875rem); /* 18 -> 19 */
  --text-small: clamp(0.9375rem, 0.92rem + 0.06vw, 1rem);    /* 15 -> 16 */
  --text-caption: 0.875rem;                                  /* 14 */
  --text-button: clamp(1.0625rem, 1.03rem + 0.08vw, 1.125rem);
  --text-nav: 1.0625rem;
  --text-overline: 0.875rem;
  --text-figure: clamp(1rem, 0.95rem + 0.1vw, 1.0625rem);
  /* layout */
  --container: 75rem;          /* 1200 */
  --container-narrow: 47.5rem; /* 760 */
  --gutter: clamp(1.5rem, 4vw, 3rem);
  /* Band padding. This lands on BOTH sides of every .section, so two stacked sections cost twice
     this much dead ground. At the old 64->96 that read as 128->192px of empty paper between any
     two bands, which is what made sparse pages look abandoned. */
  --section: clamp(2.5rem, 2rem + 1.4vw, 3.5rem);  /* 40 -> 56; was 48 -> 72, which put 140px of paper between any two bands at 1440 */
  --r-btn: 6px;
  --r-card: 8px;
  --shadow: 0 8px 24px rgba(10, 31, 52, 0.10);
  --header-h: 72px;
  --callbar-h: 65px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); interpolate-size: allow-keywords; }
html, body { overflow-x: clip; }
@media (max-width: 1023.98px) { :root { --header-h: 60px; } }
body:has(.nav-mobile[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-body) / 1.65 var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; }
h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 700; line-height: 1.4; }
.prose h2, .prose h3 { margin-top: 1.5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
p { margin: 0 0 1em; }
a { color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 150ms ease-out; }
a:hover { color: var(--copper-hover); }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }
strong { font-weight: 700; }
blockquote {
  margin: 1.5em 0; padding: 0.25em 0 0.25em 1.25em;
  border-left: 2px solid var(--copper);
  font: italic 500 var(--text-h3) / 1.4 var(--font-display);
  color: var(--ink);
}
hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
table {
  border-collapse: collapse; width: 100%; margin: 0 0 1.5em;
  font-size: var(--text-figure); font-variant-numeric: tabular-nums;
}
th, td { text-align: left; padding: 0.75em 0.9em; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-body); font-weight: 700; background: var(--surface-tint); color: var(--ink); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); max-width: 56rem; }
.table-wrap table { margin: 0; min-width: 36rem; }
::selection { background: var(--brand-soft); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.site-footer :focus-visible, .cta-band :focus-visible { outline-color: var(--copper-on-dark); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--brand); color: var(--paper-on-dark); padding: 0.75rem 1.25rem; }
.skip-link:focus { left: 0; }

/* ---------- layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section); background: transparent; }
.section--white { background: var(--surface); }
.section--deep { background: var(--surface-tint); }
.section--white, .section--deep { border-top: 1px solid var(--line); }
.ledger-lines { background: transparent; }
.prose { max-width: 66ch; }
/* A prose section keeps the page's left edge. Constraining the container itself would centre the
   measure and make the left edge jump against every banner, grid and band above and below it. */
.container.prose { max-width: var(--container); }
.container.prose > * { max-width: 66ch; }
.container.prose > .table-wrap { max-width: 56rem; }

/* Long reading pages: measure on the left, a sticky rail in the space that would otherwise be
   dead. The rail carries the offer and the next step, so the margin does conversion work. */
.page-body { display: grid; gap: 0; }
@media (min-width: 1024px) {
  .page-body { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 4rem; align-items: start; }
  .page-body__main { min-width: 0; }
  .page-body__rail { position: sticky; top: calc(var(--header-h) + 2rem); }
}
/* Sections inside the reading column carry their own rhythm, not the full band padding, or the
   gaps double up and the column reads as a list of disconnected slabs. */
.page-body__main .section { padding-block: 0; background: transparent; border-top: 0; }
.page-body__main .section + .section { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.page-body__main .container { padding-inline: 0; max-width: none; }
.page-body__main .faq-wrap { max-width: none; }
@media (max-width: 1023.98px) { .page-body__rail { margin-top: var(--section); } }
.rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; }
.rail-card + .rail-card { margin-top: 1.25rem; }
.rail-card h2, .rail-card h3 { font: 600 var(--text-h4) / 1.3 var(--font-body); margin: 0 0 0.75rem; }
.rail-card p { font-size: var(--text-small); color: var(--ink); margin-bottom: 0.9rem; }
.rail-card .btn { width: 100%; }
.rail-card ul { list-style: none; padding: 0; margin: 0; }
.rail-card li { font-size: var(--text-small); margin-bottom: 0.5em; overflow-wrap: anywhere; }
.rail-card li a { color: var(--ink); text-decoration-color: var(--line); }
.rail-card li a:hover { color: var(--copper); }
.rail-card__note { font-size: var(--text-caption); color: var(--ink-2); margin: 0.75rem 0 0; }
.rail-card--brand { background: var(--surface-tint); border-color: var(--brand-soft); }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--ink); }
.muted { color: var(--ink-2); }
.small { font-size: var(--text-small); line-height: 1.5; }
.caption { font-size: var(--text-caption); color: var(--ink-2); letter-spacing: 0.01em; }
.center { text-align: center; }
.overline {
  display: inline-flex; align-items: center; gap: 0.6rem; text-wrap: balance;
  font: 600 var(--text-overline) / 1.3 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper);
  margin-bottom: 0.9rem;
}
.overline::before { content: ""; width: 28px; height: 1px; background: var(--copper); }
.overline--center { justify-content: center; }
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 7fr 5fr; gap: 3rem; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font: 600 var(--text-button) / 1 var(--font-body); letter-spacing: 0.01em;
  padding: 0 1.5rem; min-height: 52px; border-radius: var(--r-btn);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.btn--primary { background: var(--copper); color: #fff; border-color: var(--copper); }
.btn--primary:hover { background: var(--copper-hover); border-color: var(--copper-hover); color: #fff; }
.btn--secondary, .btn--call { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--secondary:hover, .btn--call:hover { background: var(--brand); color: #fff; }
.btn--block { width: 100%; }
.btn svg { flex: none; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin: 1.75rem 0 1rem; }
.micro-trust { font-size: var(--text-small); color: var(--ink-muted); margin-top: 0.75rem; }
.arrow-link { font-weight: 600; text-decoration: none; }
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { text-decoration: underline; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 120;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 0.7rem; min-height: 48px; text-decoration: none; color: var(--ink); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font: 600 clamp(1.05rem, 4.5vw, 1.25rem) / 1.1 var(--font-display); letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; }
.brand__sub { font: 600 0.8125rem / 1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.2rem; }
.nav-desktop { display: none; }
.header-actions { display: none; }
.header-phone { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 var(--text-nav) / 1 var(--font-body); color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--copper); }
.header-actions .btn { min-height: 48px; padding-inline: 1.5rem; white-space: nowrap; }
/* Nothing in the header shrinks (brand, six nav items, phone and CTA all set white-space: nowrap),
   so the desktop layout only works once it fits outright: brand 247 + nav 476 + actions 190 plus
   gaps needs about 1005px. Below 1024 the hamburger and the sticky call bar take over. Dropping the
   phone NUMBER to just its icon through the middle widths is what buys the rest of the room. */
@media (min-width: 1024px) and (max-width: 1199.98px) { .header-phone span { display: none; } }
/* below 1024px: logo, phone icon, hamburger */
@media (max-width: 1023.98px) {
  .header-actions { display: flex; align-items: center; gap: 0; }
  .header-actions .btn { display: none; }
  .header-phone { width: 48px; height: 48px; justify-content: center; }
  .header-phone span { display: none; }
  .site-header .container { gap: 0.5rem; }
  .nav-mobile { margin-left: 0; }
}

.nav-mobile { position: relative; }
.nav-mobile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-btn); color: var(--ink); }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary .icon-close { display: none; }
.nav-mobile[open] > summary .icon-open { display: none; }
.nav-mobile[open] > summary .icon-close { display: block; }
.nav-mobile__panel {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; overflow-y: auto;
  background: var(--paper); border-top: 1px solid var(--line); z-index: 110;
}
.nav-mobile__panel a {
  display: flex; align-items: center; min-height: 54px; padding: 0 var(--gutter);
  text-decoration: none; font: 600 1.1875rem / 1.2 var(--font-body); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-mobile__panel a.sub { padding-left: calc(var(--gutter) + 1.25rem); font-weight: 400; color: var(--ink-2); }
.nav-mobile__cta { display: grid; gap: 0.75rem; padding: 1.25rem var(--gutter); border-bottom: 1px solid var(--line); background: var(--surface-tint); }
.nav-group summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 var(--gutter);
  font: 600 1.1875rem / 1.2 var(--font-body); color: var(--ink); cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--line);
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary .plus { color: var(--copper); transition: transform 200ms ease-out; }
.nav-group[open] summary .plus { transform: rotate(45deg); }
.nav-group__links { background: var(--surface); }

@media (min-width: 1024px) {
  .nav-mobile { display: none; }
  .nav-desktop { display: block; }
  .header-actions { display: flex; align-items: center; gap: 1.25rem; }
  .nav-desktop ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
  .nav-desktop li { position: relative; margin: 0; }
  .nav-desktop a {
    display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
    font: 600 var(--text-nav) / 1 var(--font-body); color: var(--ink); text-decoration: none;
    padding: calc((var(--header-h) - 1.0625rem) / 2) 0; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color 150ms ease-out, border-color 150ms ease-out;
  }
  .nav-desktop li:hover > a, .nav-desktop li:focus-within > a { color: var(--copper); border-bottom-color: var(--copper); }
  .nav-desktop .dropdown {
    position: absolute; left: 50%; top: 100%; min-width: 16rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--shadow); padding: 0.5rem 0; z-index: 100;
    opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px);
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
  }
  .nav-desktop li:hover .dropdown, .nav-desktop li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
  .nav-desktop .dropdown a { display: block; padding: 0.65rem 1.25rem; font-weight: 400; border-bottom: none; margin: 0; }
  .nav-desktop .dropdown a:hover { background: var(--surface-tint); color: var(--ink); }
}

/* ---------- lead capture ---------- */
/* The compact form appears in the rail, under every article and on the homepage, so it has to work
   in a 19rem column and in a full-width band without two sets of overrides. */
.lead-form { display: grid; gap: 0.85rem; }
.lead-form__title { font: 600 var(--text-h4) / 1.3 var(--font-body); color: var(--ink); margin: 0; }
.lead-form__sub { font-size: var(--text-small); color: var(--ink); margin: 0; }
.lead-form .field label { font-size: var(--text-small); margin-bottom: 0.25rem; }
.lead-form .field input, .lead-form .field textarea { padding: 0.6rem 0.75rem; }
.lead-form .field textarea { min-height: 0; }
.lead-form .btn { width: 100%; }
.lead-form__note { font-size: var(--text-caption); color: var(--ink-2); margin: 0; }
.lead-block { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
@media (min-width: 640px) { .lead-block { padding: 2rem 2.25rem; } }
.lead-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .lead-split { grid-template-columns: 5fr 6fr; gap: 3rem; } }

/* ---------- mobile sticky bar ---------- */
.call-bar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.5rem var(--gutter);
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line);
}
.call-bar[hidden] { display: none; }
.call-bar a {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px;
  font: 600 var(--text-button) / 1 var(--font-body); text-decoration: none; border-radius: var(--r-btn);
}
.call-bar__call { color: var(--brand); border: 1px solid var(--brand); }
.call-bar__book { color: #fff; background: var(--copper); }
.call-bar a { white-space: nowrap; }
@media (max-width: 429.98px) { .call-bar a svg { display: none; } }
@media (max-width: 1023.98px) { body { padding-bottom: calc(var(--callbar-h) + 0.5rem + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .call-bar { display: none; } }

/* ---------- homepage hero: paper, portrait + close packet ---------- */
.hero { padding-block: clamp(3rem, 5vw, 5rem) var(--section); }
.hero .hero__grid { align-items: start; }
.hero__title { font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; max-width: 18ch; }
.hero .lead { max-width: 52ch; }
.hero > .container > .hero__grid > div:first-child > p:not(.lead):not(.micro-trust) { max-width: 56ch; }
.hero__visual { position: relative; }
@media (max-width: 899.98px) { .hero__visual .portrait { max-width: 26rem; } }

/* Hero split: the reading order changes by breakpoint. On desktop the copy stacks beside the
   artifact. On a phone the visitor gets headline, subhead, the button, then the artifact, and
   only then the detail, so the product is never pushed off the first screen. */
.hero__split { display: grid; gap: 0; }
.hero__lead { grid-area: lead; }
.hero__cta { grid-area: cta; }
.hero__visual { grid-area: visual; }
.hero__detail { grid-area: detail; }
@media (min-width: 900px) {
  .hero__split { grid-template-columns: 6.5fr 5.5fr; column-gap: 3rem; grid-template-areas: "lead visual" "cta visual" "detail visual"; align-items: start; }
}
@media (max-width: 899.98px) {
  .hero__split { grid-template-areas: "lead" "cta" "visual" "detail"; }
  .hero__split .hero__visual { margin: 1.75rem 0 0; }
  .hero__split .hero__detail { margin-top: 1.75rem; }
  .hero__split .packet-caption { max-width: none; }
}
@media (max-width: 479.98px) { .cta-row { flex-direction: column; align-items: stretch; } }
.portrait { position: relative; display: block; margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.portrait img { display: block; width: 100%; height: auto; }
.portrait::after { content: ""; position: absolute; inset: 0; background: rgba(156, 74, 30, 0.06); pointer-events: none; }
.hero__visual .portrait { width: 100%; aspect-ratio: 4 / 5; }
.hero__visual .portrait img { height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 899.98px) { .hero__visual { margin-top: 0.5rem; } }
.proof-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.75rem; font: 600 var(--text-small) / 1.3 var(--font-body); color: var(--ink-2); }
.proof-row > * { display: inline-flex; align-items: center; gap: 0.5rem; }
.proof-row > * + * { border-left: 1px solid var(--line); padding-left: 1rem; }
.proof-row a { color: inherit; display: inline-block; padding: 0.4rem 0; margin: -0.4rem 0; }
@media (max-width: 639.98px) {
  .proof-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .proof-row > * { width: 100%; padding: 0.6rem 0; }
  .proof-row > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}
.proof-row .proadvisor-badge { height: 44px; }

/* the product: Monthly Close Packet artifact, built in HTML */
.packet { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 1.5rem 1.6rem 1.25rem; color: var(--ink); max-width: 35rem; }
.packet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.8rem; margin-bottom: 0.6rem; }
.packet__head > div { min-width: 0; }
.packet__title { font: 600 1.375rem / 1.2 var(--font-display); margin: 0; }
.packet__meta { font: 600 0.875rem / 1.4 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); margin: 0.35rem 0 0; }
.packet__stamp { flex: none; font: 600 0.875rem / 1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper); border: 1px solid var(--copper); padding: 0.35rem 0.5rem; }
.packet__list { list-style: none; padding: 0; margin: 0 0 0.9rem; }
.packet__list li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; margin: 0; }
.packet__list li span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; }
.packet__list svg { color: var(--brand); flex: none; }
.packet__list time { font: 400 0.9375rem / 1 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.packet__pl { width: 100%; border-collapse: collapse; font: 400 1.0625rem / 1.4 var(--font-mono); font-variant-numeric: tabular-nums; margin: 0; }
.packet__pl th, .packet__pl td { padding: 0.26rem 0; border: none; background: transparent; font-weight: 400; }
.packet__pl td:last-child, .packet__pl th:last-child { text-align: right; white-space: nowrap; }
.packet__pl th { font-family: var(--font-body); font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 0.45rem; }
.packet__pl tr.total td { font-weight: 500; border-top: 1px solid var(--line-strong); padding-top: 0.35rem; }
.packet__pl tr.net td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 3px double var(--line-strong); padding-block: 0.35rem; }
.packet__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; font-size: var(--text-small); color: var(--ink-2); }
.packet__foot .proadvisor-badge { height: 32px; }

/* hero variant: the packet with a column per property, and a stamp set like a real one */
.packet--matrix { max-width: 33rem; padding: 1.75rem; border-radius: 2px; }
.packet__stamp--rotate { transform: rotate(4deg); }
.packet__pl--matrix { table-layout: fixed; }
.packet__pl--matrix caption { text-align: left; font: 600 0.875rem / 1.3 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 0.5rem; }
.packet__pl--matrix caption span { color: var(--ink-muted); }
.packet__pl--matrix th, .packet__pl--matrix td { font: 400 0.9375rem / 1.3 var(--font-mono); padding: 0.34rem 0 0.34rem 0.55rem; text-align: right; text-transform: none; letter-spacing: 0; width: 16%; }
.packet__pl--matrix thead th { font: 600 var(--text-caption) / 1.25 var(--font-body); letter-spacing: 0.03em; color: var(--ink-2); text-transform: none; vertical-align: bottom; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.4rem; background: transparent; }
.packet__pl--matrix tbody th[scope="row"], .packet__pl--matrix thead th:first-child { text-align: left; font: 400 0.9375rem / 1.3 var(--font-body); color: var(--ink); text-transform: none; letter-spacing: 0; padding-left: 0; width: 36%; background: transparent; }
.packet__pl--matrix tbody tr:not(.net) td, .packet__pl--matrix tbody tr:not(.net) th { border-bottom: 1px solid var(--line); }
.packet__pl--matrix tr.net th, .packet__pl--matrix tr.net td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 3px double var(--line-strong); padding-block: 0.4rem; }
@media (max-width: 600px) {
  .packet--matrix { padding: 1.25rem; }
  .packet__pl--matrix .col-prop { display: none; }
  .packet__pl--matrix th, .packet__pl--matrix td { width: auto; }
  .packet__pl--matrix tbody th[scope="row"], .packet__pl--matrix thead th:first-child { width: auto; }
}

/* named byline: the human as proof, not as the subject */
.byline-chip { display: flex; align-items: center; gap: 0.75rem; margin: 1.75rem 0 0; font-size: var(--text-small); line-height: 1.4; color: var(--ink-2); }
.byline-chip img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid var(--line); }
.byline-chip strong { color: var(--ink); }
.hero__micro { font-size: var(--text-small); color: var(--ink-2); margin: 0.85rem 0 0; max-width: 52ch; }
.hero__detail { margin-top: 1.5rem; }
.statement { font: 400 var(--text-h3) / 1.5 var(--font-body); color: var(--ink); max-width: 62ch; margin: 0; }
.statement strong { font-weight: 700; }
.hero__rule { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0 0; }
.hero .proof-row { margin-top: 1.25rem; }
.packet-caption { font-size: var(--text-small); color: var(--ink-2); margin: 1rem 0 0; max-width: 33rem; }
.cta-inline { font-weight: 600; }

/* ---------- page headers (inner pages): paper, copy left, photo right ---------- */
.page-banner { background: var(--paper); border-bottom: 1px solid var(--line); }
.page-banner .container { display: grid; gap: 2rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.page-banner .banner-content { order: 1; }
.page-banner .banner-media { order: 2; }
.page-banner .banner-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); border: 1px solid var(--line); }
.page-banner h1 { max-width: 20ch; }
.page-banner .lead { max-width: 58ch; }
.page-banner .breadcrumbs { padding: 0; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .page-banner .container { grid-template-columns: 7fr 5fr; gap: 3rem; } }

/* ---------- trust strip ---------- */
.trust-bar { background: var(--surface-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 2rem; }
.trust-bar .container { display: grid; grid-template-columns: 1fr; gap: 0; }
.trust-item { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 1.0625rem / 1.3 var(--font-body); color: var(--ink-2); padding: 0.7rem 0; border-top: 1px solid var(--line); }
.trust-item:first-child { border-top: 0; padding-top: 0; }
.trust-item svg { color: var(--brand); flex: none; }
.trust-item a { color: inherit; white-space: nowrap; }
@media (min-width: 640px) and (max-width: 899.98px) {
  .trust-bar .container { grid-template-columns: repeat(2, auto); justify-content: center; gap: 0.75rem 2.5rem; }
  .trust-item { border-top: 0; padding: 0; white-space: nowrap; }
}
@media (min-width: 900px) {
  .trust-bar .container { display: flex; justify-content: center; gap: 0; }
  .trust-item { padding: 0 1.75rem; border-top: 0; white-space: nowrap; }
  .trust-item + .trust-item { border-left: 1px solid var(--line); }
}
.proadvisor-badge { display: inline-block; height: 56px; width: auto; }
.proadvisor-badge--lg { height: 160px; }
.trust-bar .proadvisor-badge { height: 48px; }
.badge-gold {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--gold); background: var(--gold-bg); color: #4A3A10;
  border-radius: 4px; padding: 0.3rem 0.65rem;
  font: 600 var(--text-overline) / 1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 16px; height: 16px; }
.hero__stars { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-small); }

/* ---------- reasons people call me (QUALIFY) ---------- */
.reason-grid { display: grid; gap: 1.5rem 2rem; margin-top: 2rem; }
@media (min-width: 640px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reason-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.reason { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; display: grid; gap: 0.5rem; align-content: start; }
.reason__quote { font: 600 var(--text-h3) / 1.3 var(--font-display); color: var(--ink); margin: 0; }
.reason__quote::before { content: "\201C"; color: var(--copper); }
.reason__quote::after { content: "\201D"; color: var(--copper); }
.reason__answer { font-size: var(--text-body); color: var(--ink); margin: 0; }

/* ---------- cards ---------- */
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 2rem; transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
/* The whole card is the click target (.stretch::before), so it has to read as one. Border alone
   was too quiet to say that. */
.card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.card__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--brand); margin-bottom: 1rem; }
.card__icon svg { width: 36px; height: 36px; }
/* A tinted card that ends a resource grid on the next step instead of on an empty cell.
   Same box as .card so the row stays even. */
.card--offer { background: var(--surface-tint); border-color: var(--brand-soft); }
.card--offer .card__icon { color: var(--copper); }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--ink); margin-bottom: 0.75em; }
.card .stretch::before { content: ""; position: absolute; inset: 0; }
.check-list { list-style: none; padding: 0; margin: 0 0 1em; }
.check-list li { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.5em; }
.check-list svg { color: var(--brand); flex: none; margin-top: 0.3em; width: 20px; height: 20px; }
.check-list.small li { font-size: var(--text-small); }

/* compact industry rows (services page, lists) */
.industry-row {
  position: relative; display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 1rem 1.25rem; transition: border-color 150ms ease-out;
}
.industry-row:hover { border-color: var(--brand); }
.industry-row > svg { color: var(--brand); flex: none; }
.industry-row a, .industry-row strong { font-weight: 700; text-decoration: none; color: var(--ink); }
.industry-row a::after { content: ""; position: absolute; inset: 0; }
.industry-row:hover a { color: var(--copper); }
.industry-row span { display: block; font-size: 1.0625rem; color: var(--ink-2); font-weight: 400; margin-top: 0.15rem; }

/* alternating photo rows (homepage industries) */
.feature-rows { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: 2.5rem; }
.feature { display: grid; gap: 1.5rem; align-items: center; }
.feature__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); border: 1px solid var(--line); }
.feature__body h3 { margin-bottom: 0.4em; }
.feature__body h3 a { color: var(--ink); text-decoration: none; }
.feature__body h3 a:hover { color: var(--copper); }
.feature__body p { color: var(--ink); max-width: 52ch; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 6fr; gap: 3rem; }
  .feature:nth-child(even) .feature__media { order: 2; }
}

/* ---------- steps ---------- */
.step-list { list-style: none; counter-reset: step; padding: 0; margin: 2rem 0 0; display: grid; gap: 2rem; }
@media (min-width: 900px) { .step-list { grid-template-columns: repeat(3, 1fr); gap: 3rem; } .step-list--4 { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.step-list li { counter-increment: step; margin: 0; border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.step-list li::before { content: counter(step, decimal-leading-zero); display: block; font: 500 3rem / 1 var(--font-mono); color: var(--copper); margin-bottom: 0.9rem; font-variant-numeric: tabular-nums; }
.step-list h3 { margin-bottom: 0.45em; }
.step-list p { color: var(--ink); margin: 0; font-size: var(--text-body); }
/* stacked variant: numerals in a left column, used beside the close packet */
.step-list.step-list--stack { grid-template-columns: 1fr; gap: 0; margin-top: 1.5rem; }
.step-list--stack li { display: grid; grid-template-columns: 4.25rem 1fr; column-gap: 0.75rem; padding-block: 1.4rem; }
.step-list--stack li::before { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 2.125rem; line-height: 1.2; }
.step-list--stack li > * { grid-column: 2; }
.step-list--stack h3 { margin-top: 0.15rem; }
.packet-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.packet-aside .caption { margin-top: 1rem; }

/* ---------- reviews ---------- */
.review-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.review-card::before { content: "\201C"; position: absolute; top: 0.6rem; right: 1.25rem; font: 600 4rem / 1 var(--font-display); color: var(--copper); }
.review-card p { font: italic 400 var(--text-lead) / 1.4 var(--font-display); color: var(--ink); margin: 0; }
.review-card footer { font-size: var(--text-small); color: var(--ink-muted); margin-top: auto; }
.review-card footer strong { color: var(--ink); font-weight: 700; }
.review-card--featured { background: var(--surface-tint); border-color: var(--brand-soft); }
.review-card--featured p { font-size: var(--text-h3); font-style: normal; }

/* ---------- pricing ---------- */
.pricing-grid { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.price-card__body { padding: 2rem; display: flex; flex-direction: column; flex: 1; }
.price-card__body .btn { margin-top: auto; }
.price-card--featured { border-color: var(--brand); box-shadow: var(--shadow); }
.price-card__head { background: var(--surface); padding: 1.1rem 2rem; min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.price-card--featured .price-card__head { background: var(--surface-warm); }
.price-card__head h3 { margin: 0; }
.price-figure { font: 500 2rem / 1.1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; margin: 0 0 1rem; }
.price-figure small { font: 400 var(--text-small) / 1 var(--font-body); color: var(--ink-muted); }
.price-line { font: 500 1.25rem / 1.3 var(--font-mono); color: var(--ink); margin: 0 0 1rem; }
@media (max-width: 899.98px) { .pricing-grid { display: flex; flex-direction: column; } .price-card--featured { order: -1; } }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: var(--container-narrow); margin-inline: 0; }
.faq { display: grid; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.1rem 0; min-height: 56px; cursor: pointer; list-style: none;
  font: 600 var(--text-h3) / 1.3 var(--font-display); color: var(--ink);
  transition: color 150ms ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper); }
.faq summary .plus { flex: none; color: var(--copper); transition: transform 200ms ease-out; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 200ms ease-out, content-visibility 200ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .faq__a { padding: 0 0 1.4rem; color: var(--ink); max-width: 66ch; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--brand-band); color: var(--paper-on-dark); position: relative; overflow: hidden; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--paper-on-dark); font-size: var(--text-h2); max-width: 24ch; }
.cta-band p { color: var(--muted-on-dark); max-width: 56ch; font-size: var(--text-lead); }
.cta-band .btn--call { color: var(--paper-on-dark); border-color: var(--paper-on-dark); }
.cta-band .btn--call:hover { background: var(--paper-on-dark); color: var(--brand-band); }
.cta-band .micro-trust { color: var(--muted-on-dark); }
.cta-band__mark { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: clamp(180px, 22vw, 320px); height: auto; opacity: 0.45; pointer-events: none; }
@media (max-width: 899.98px) { .cta-band__mark { display: none; } }

/* ---------- where I work band ---------- */
.band-photo { position: relative; background: var(--brand-band); color: var(--paper-on-dark); overflow: hidden; }
.band-photo__media { position: absolute; inset: 0; }
.band-photo__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.32; }
.band-photo .container { position: relative; z-index: 1; }
.band-photo h2 { color: var(--paper-on-dark); }
.band-photo p { color: var(--muted-on-dark); }
.band-photo .overline { color: var(--copper-on-dark); }
.band-photo .overline::before { background: var(--copper-on-dark); }
.band-photo .pill-list a { background: transparent; border-color: rgba(247, 243, 236, 0.35); color: var(--paper-on-dark); }
.band-photo .pill-list a:hover { border-color: var(--paper-on-dark); }
.band-photo .map-card { background: rgba(247, 243, 236, 0.08); border-color: rgba(247, 243, 236, 0.2); }
.band-photo .map-card__caption { color: var(--muted-on-dark); }

/* ---------- map, booking, misc ---------- */
.map-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.5rem; }
.map-card iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 4px; }
.map-card__caption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0.5rem 0.35rem; font-size: var(--text-small); color: var(--ink-2); }
/* Google Calendar appointment schedule, a plain iframe. Google sizes nothing for us and posts no
   events to the parent, so the height is ours to set and there is no script to load. */
.booking-embed { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.booking-embed iframe { display: block; width: 100%; height: 900px; border: 0; }
.booking-fallback { margin-top: 1rem; font-size: var(--text-small); color: var(--ink-2); }
@media (max-width: 639.98px) { .booking-embed iframe { height: 1000px; } }
/* link clouds set as running text with middots, not chips */
.pill-list { list-style: none; padding: 0; margin: 0; font-size: var(--text-body); line-height: 1.9; color: var(--ink-2); }
.pill-list li { display: inline; margin: 0; }
.pill-list li + li::before { content: "\00B7"; margin: 0 0.5rem; color: var(--ink-muted); }
.pill-list a { display: inline-block; padding: 0.15rem 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.pill-list a:hover { color: var(--copper); text-decoration-color: var(--copper); }
.photo-frame { display: block; width: 100%; border-radius: var(--r-card); border: 1px solid var(--line); }
.cta-box { background: var(--surface-tint); border: 1px solid var(--brand-soft); border-radius: var(--r-card); padding: 1.75rem 2rem; margin: 2rem 0; }
.cta-box h3 { margin-top: 0; }
.cta-box .btn { margin-top: 0.25rem; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 1.1rem; }
.field label { display: block; font: 600 1rem / 1.3 var(--font-body); margin-bottom: 0.35rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 0.8rem 0.95rem; min-height: 52px; font: 400 1.0625rem / 1.4 var(--font-body);
  transition: border-color 150ms ease-out;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312314F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: 2px solid var(--focus); outline-offset: 2px; }
.field--error input, .field--error textarea { border-color: var(--error); background: var(--error-bg); }
.field__error { font-size: var(--text-small); color: var(--error); margin-top: 0.3rem; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.banner { border-radius: var(--r-btn); padding: 0.9rem 1.2rem; margin-bottom: 1.4rem; font-size: var(--text-small); }
.banner--success { background: var(--success-bg); border: 1px solid var(--success); }
.banner--error { background: var(--error-bg); border: 1px solid var(--error); }

/* ---------- breadcrumbs, article ---------- */
.breadcrumbs { font-size: var(--text-small); color: var(--ink-muted); padding-top: 1.25rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; display: inline-block; padding: 0.5rem 0; margin: -0.5rem 0; }
.breadcrumbs a:hover { color: var(--copper); text-decoration: underline; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--ink-muted); }
.byline { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 0; margin: 1.5rem 0 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--text-small); color: var(--ink-2); }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.byline strong { color: var(--ink); }
.disclaimer { font-size: var(--text-small); color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.5rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-band); color: var(--paper-on-dark); padding: 4rem 0 2rem; border-top: 1px solid rgba(247, 243, 236, 0.15); }
.site-footer a { color: var(--muted-on-dark); text-decoration: none; transition: color 150ms ease-out; }
.site-footer a:hover { color: var(--paper-on-dark); text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }
.footer-col__title { font: 600 var(--text-overline) / 1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-on-dark); margin: 0 0 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.25em; font-size: 1rem; }
.footer-col li a { display: inline-block; padding: 0.25rem 0; }
.footer-col address { font-style: normal; font-size: 1rem; line-height: 1.7; color: var(--muted-on-dark); margin: 1.25rem 0 1rem; }
.footer-brand .brand__name { color: var(--paper-on-dark); }
.footer-brand .brand__sub { color: var(--muted-on-dark); }
.footer-brand p { color: var(--muted-on-dark); max-width: 34ch; }
.footer-areas { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(247, 243, 236, 0.15); font-size: var(--text-small); color: var(--muted-on-dark); line-height: 1.9; }
.footer-areas > span:first-child { color: var(--copper-on-dark); font-weight: 600; margin-right: 0.5rem; }
.footer-areas a { display: inline-block; padding: 0.15rem 0; }
.footer-bottom { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(247, 243, 236, 0.15); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem 1.75rem; font-size: var(--text-caption); color: var(--muted-on-dark); }

.cta-band__mark svg { display: block; width: 100%; height: auto; }
.photo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: clamp(120px, 16vw, 220px); overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-mark { flex: none; }

/* ---------- motion: colours and accordions only. No fades, no parallax, no reveals. ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- print: checklists become branded handouts ---------- */
@media print {
  .site-header, .call-bar, .cta-row, .cta-band, .cta-box, .site-footer .footer-grid, .nav-mobile, .breadcrumbs, .booking-embed, .btn { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; font-size: 11pt; }
  main::before { content: "Diane's Bookkeeping Services, LLC · dianesbookeeping.com · (417) 323-2629"; display: block; font: 600 10pt var(--font-body); border-bottom: 1pt solid #000; padding-bottom: 6pt; margin-bottom: 12pt; }
  .check-list li, .card, li { page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* Comparison table (pricing). The third column is the whole point of the table, so on phones it
   stacks into cards instead of hiding behind a horizontal scroll. Diane's row is marked so the
   eye lands on it without a second header-looking tint. */
.table-wrap--compare tr[data-mine] td:first-child { box-shadow: inset 3px 0 0 var(--copper); }
.table-wrap--compare tr[data-mine] td { font-weight: 500; }
.table-wrap--compare tr[data-mine] td:first-child { font-weight: 700; }
@media (max-width: 639.98px) {
  .table-wrap--compare { overflow: visible; background: none; border: 0; border-radius: 0; }
  .table-wrap--compare table { min-width: 0; display: block; }
  .table-wrap--compare thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table-wrap--compare tbody { display: block; }
  .table-wrap--compare tr {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-card); padding: 1rem 1.15rem;
  }
  .table-wrap--compare tr + tr { margin-top: 0.85rem; }
  .table-wrap--compare tr[data-mine] { border-left: 3px solid var(--copper); }
  .table-wrap--compare td { display: block; border: 0; padding: 0; }
  .table-wrap--compare td + td { margin-top: 0.7rem; }
  .table-wrap--compare td::before {
    content: attr(data-label); display: block; margin-bottom: 0.15rem;
    font: 700 var(--text-caption) / 1.3 var(--font-body); letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .table-wrap--compare tr[data-mine] td:first-child { box-shadow: none; }
  .table-wrap--compare td:first-child {
    font-size: 1.0625rem; font-weight: 700; box-shadow: none;
    padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
  }
  .table-wrap--compare td:first-child::before { content: none; }
}

/* ---------- quick facts (city pages): the answer, before the essay ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.facts__item { padding: 0.85rem 1rem; border-top: 1px solid var(--line); }
.facts__item:nth-child(-n+2) { border-top: 0; }
.facts__item:nth-child(2n) { border-left: 1px solid var(--line); }
.facts dt { font: 600 var(--text-caption) / 1.3 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.2rem; }
.facts dd { font: 600 var(--text-small) / 1.35 var(--font-body); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.facts dd a { color: var(--copper); }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts__item:nth-child(-n+3) { border-top: 0; }
  .facts__item:nth-child(2n) { border-left: 0; }
  .facts__item:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
}

/* ---------- lead capture, sharpened (2026-09-06) ---------- */
/* Help lines and the note are multi-line body text, so they sit at --text-small (15-16px) in
   --ink-2, never at the 14px caption size. Selects match the compact inputs. */
.lead-form__help { font-size: var(--text-small); color: var(--ink-2); margin: 0.3rem 0 0; line-height: 1.4; }
.lead-form .field select { padding: 0.6rem 2.5rem 0.6rem 0.75rem; min-height: 48px; }
.lead-form .field input { min-height: 48px; }
.lead-form .field label .muted { font-weight: 400; color: var(--ink-2); }
.lead-form__note { font-size: var(--text-small); color: var(--ink-2); margin: 0; line-height: 1.45; }
.lead-form__proof { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--ink-2); line-height: 1.4; }
.lead-form__proof img { display: block; height: 36px; width: auto; flex: none; }
.lead-form__proof a { color: inherit; }
.lead-form__proof a:hover { color: var(--copper); }
.field__error { font-size: var(--text-small); color: var(--error); margin: 0.3rem 0 0; }
.btn[disabled] { opacity: 0.7; cursor: default; }
/* the three steps that follow a send, beside every full-width form */
.after-send { margin-top: 1.5rem; max-width: 56ch; }
.after-send__title { font: 600 var(--text-h4) / 1.3 var(--font-body); color: var(--ink); margin: 0 0 0.35rem; }
.after-send__steps { list-style: none; counter-reset: as; padding: 0; margin: 0; }
.after-send__steps li { counter-increment: as; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.5rem; padding: 0.7rem 0; border-top: 1px solid var(--line); margin: 0; font-size: var(--text-body); line-height: 1.5; color: var(--ink); }
.after-send__steps li::before { content: counter(as); font: 500 1.25rem / 1.35 var(--font-mono); color: var(--copper); }
/* one dated sentence from the tax calendar, beside the ask and nowhere else */
.deadline-note { margin: 1rem 0 0; padding: 0.75rem 1rem; border-left: 3px solid var(--copper); background: var(--surface-warm); font-size: var(--text-body); line-height: 1.5; color: var(--ink); max-width: 60ch; }
.rail-card .deadline-note { font-size: var(--text-small); }
.cta-band .deadline-note { background: rgba(247, 243, 236, 0.08); color: var(--paper-on-dark); border-left-color: var(--copper-on-dark); }
/* the rail form outgrows a short laptop viewport; stick only where the whole card fits */
@media (min-width: 1024px) and (max-height: 879.98px) { .page-body__rail { position: static; } }
/* articles carry their own form under the text; a phone shows that one, not two */
@media (max-width: 1023.98px) { .article .page-body__rail .rail-card--brand { display: none; } }
/* in-flow ask under a page's opening paragraph */
.ask-line { font-size: var(--text-body); margin: 0 0 1.25em; }
.ask-line strong { white-space: nowrap; }

/* ---------- the capture card and the in-place success state (2026-09-06, evening) ---------- */
/* Optional questions sit behind a native <details>; the browser owns the toggle. */
.lead-form__more { border-top: 1px solid var(--line); }
.lead-form__more summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; list-style: none; cursor: pointer; padding: 0.7rem 0; font: 600 1rem / 1.3 var(--font-body); color: var(--ink); }
.lead-form__more summary::-webkit-details-marker { display: none; }
.lead-form__more summary .muted { font-weight: 400; color: var(--ink-2); margin-left: -0.35rem; }
.lead-form__more summary .plus { margin-left: auto; color: var(--copper); display: inline-flex; transition: transform 200ms ease-out; }
.lead-form__more[open] summary .plus { transform: rotate(45deg); }
.lead-form__more > .field { margin-top: 0.85rem; }
.lead-form__more > .field + .field { margin-top: 0.85rem; }
.lead-form--compact .lead-form__proof img { height: 32px; }
.btn--primary:active { background: var(--copper-hover); border-color: var(--copper-hover); transform: translateY(1px); }
/* success: the fields step aside and the confirmation takes the form's place, same width */
.lead-form--done .lead-form__body { display: none; }
.lead-form--done .lead-form__title, .lead-form--done .lead-form__sub { display: none; }
.lead-form__done[hidden] { display: none; }
.lead-form__done { display: grid; gap: 0.6rem; outline: none; }
.lead-form__done .overline { margin-bottom: 0; }
.lead-form__check { color: var(--copper); width: 40px; height: 40px; }
.lead-form__done:not([hidden]) .lead-form__check-path { animation: dbk-draw 400ms ease-out; }
@keyframes dbk-draw { from { stroke-dasharray: 60; stroke-dashoffset: 60; } to { stroke-dasharray: 60; stroke-dashoffset: 0; } }
.lead-form__done-title { font: 600 var(--text-h3) / 1.25 var(--font-display); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.lead-form__done p { margin: 0; font-size: var(--text-body); color: var(--ink); }
.lead-form__receipt { font: 600 var(--text-small) / 1.4 var(--font-body); color: var(--copper); }
.lead-form__receipt:empty { display: none; }
.lead-form__done .after-send { margin-top: 0.5rem; max-width: none; }
.lead-form__done .lead-form__note { font-size: var(--text-small); color: var(--ink-2); }
.js-lead-form .banner--error { margin-bottom: 0; }

/* ---------- homepage hero, media variant: a still under a navy shade, the card in the fold ---------- */
.hero--media { position: relative; isolation: isolate; overflow: hidden; background: var(--brand-band); color: var(--paper-on-dark); padding-block: clamp(1.75rem, 4vw, 3.5rem); }
.hero-media__photo { position: absolute; inset: 0; z-index: -2; }
.hero-media__photo picture, .hero-media__photo img { display: block; width: 100%; height: 100%; }
.hero-media__photo img { object-fit: cover; object-position: 62% 50%; }
/* The left column reads as solid navy (paper on it stays above 7:1 whatever the photo does);
   the lamp only breathes behind the card. A second gradient darkens the floor under the proof strip. */
.hero-media__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 31, 52, 0) 70%, rgba(10, 31, 52, 0.85) 100%), linear-gradient(90deg, rgba(10, 31, 52, 0.96) 0%, rgba(10, 31, 52, 0.94) 40%, rgba(10, 31, 52, 0.70) 58%, rgba(10, 31, 52, 0.30) 100%); }
.hero-media__grid { display: grid; gap: 1.25rem; grid-template-areas: "title" "card" "pricing" "lead" "proof"; }
.hero-media__title { grid-area: title; color: var(--paper-on-dark); margin: 0; max-width: 16ch; }
.hero-card { grid-area: card; }
.hero-media__pricing { grid-area: pricing; margin: 0; font-size: var(--text-body); }
.hero-media__lead { grid-area: lead; }
.hero-proof { grid-area: proof; }
.hero-media__lead .lead { color: var(--paper-on-dark); max-width: 44ch; margin-bottom: 0; }
.hero-media__lead .cta-row { margin: 1.25rem 0 0.75rem; }
.hero-media__lead .hero__micro { color: var(--paper-on-dark); margin-top: 0.5rem; max-width: 52ch; }
.hero-media__lead a, .hero-media__pricing a, .hero-proof a { color: var(--copper-on-dark); }
.hero-media__lead a:hover, .hero-media__pricing a:hover, .hero-proof a:hover { color: var(--paper-on-dark); }
.on-dark.btn--call { color: var(--paper-on-dark); border-color: var(--paper-on-dark); }
.on-dark.btn--call:hover { background: var(--paper-on-dark); color: var(--brand-band); }
.hero--media :focus-visible { outline-color: var(--copper-on-dark); }
.hero-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 1.5rem; width: 100%; max-width: 26rem; justify-self: end; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
.hero-card:focus-within { border-color: var(--brand); box-shadow: 0 14px 36px rgba(10, 31, 52, 0.22); }
.hero-card :focus-visible { outline-color: var(--focus); }
.hero-card .lead-form__title { font-family: var(--font-display); font-size: var(--text-h3); }
/* proof strip along the bottom of the hero */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding-top: 1rem; border-top: 1px solid rgba(247, 243, 236, 0.25); font: 600 var(--text-small) / 1.3 var(--font-body); color: var(--paper-on-dark); }
.hero-proof > * { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-proof > * + * { border-left: 1px solid rgba(247, 243, 236, 0.25); padding-left: 1rem; }
.hero-proof .byline-chip { margin: 0; color: var(--muted-on-dark); }
.hero-proof .byline-chip strong { color: var(--paper-on-dark); }
.hero-proof .byline-chip img { border-color: rgba(247, 243, 236, 0.35); }
.hero-proof__badge img { display: block; height: 40px; width: auto; background: var(--paper); border-radius: 4px; padding: 3px; }
.hero-proof .stars { color: var(--copper-on-dark); }
@media (max-width: 899.98px) {
  .hero-media__photo { display: none; }
  .hero-media__shade { background: var(--brand-band); }
  .hero-media__title { font-size: clamp(2.25rem, 8.5vw, 2.75rem); }
  .hero-media__lead .cta-row .btn--call { display: none; }
  .hero-card { max-width: none; justify-self: stretch; padding: 1.25rem; }
}
@media (max-width: 639.98px) {
  .hero-proof { flex-direction: column; align-items: flex-start; gap: 0; }
  .hero-proof > * { width: 100%; padding: 0.6rem 0; }
  .hero-proof > * + * { border-left: 0; padding-left: 0; border-top: 1px solid rgba(247, 243, 236, 0.25); }
}
@media (min-width: 900px) {
  .hero--media { display: flex; align-items: center; min-height: clamp(560px, 78vh, 800px); }
  .hero-media__grid { width: 100%; grid-template-columns: 7fr 5fr; column-gap: 3rem; row-gap: 0; grid-template-areas: "title card" "lead card" "proof proof"; grid-template-rows: auto 1fr auto; align-items: start; }
  .hero-media__lead { margin-top: 1.25rem; }
  .hero-media__pricing { display: none; }
  .hero-proof { margin-top: 2.5rem; }
}

/* a long checklist in two columns on wide screens, so a list of nine is not a screen of paper */
@media (min-width: 900px) {
  .two-col-list { columns: 2; column-gap: 3rem; }
  .two-col-list li { break-inside: avoid; }
}

/* ---------- photo cards (homepage industries): six rows became a grid ---------- */
.photo-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.photo-card__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 0; border-radius: 0; }
.photo-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.photo-card__body h3 { margin-bottom: 0.4em; }
.photo-card__body h3 a { color: var(--ink); text-decoration: none; }
.photo-card:hover h3 a { color: var(--copper); }
.photo-card__body p { margin-bottom: 0; }
/* on a phone six photographs cost 1,200px of scroll before the reader reaches the next band */
@media (max-width: 639.98px) { .photo-card__media { display: none; } .photo-card { padding: 0; } }

/* ---------- human check (Cloudflare Turnstile, 2026-09-06) ---------- */
/* The widget mounts above the button in interaction-only mode: nothing is visible until Cloudflare
   needs a click, then its 65px iframe appears in the flow. The spacing rides on the iframe, so an
   invisible widget adds no gap. Flexible size fills the form column. */
.lead-form__verify { display: block; min-width: 0; }
.lead-form__verify iframe { margin: 0 0 0.9rem; max-width: 100%; }