/* ==========================================================================================
   Spurling Bookkeeping Services — site stylesheet

   One file, no build step, no framework. Organised top to bottom:
     1. Fonts            self-hosted variable fonts and metric-matched fallbacks
     2. Tokens           colour, type scale, spacing, layout widths
     3. Base             reset-lite, typography, links, focus
     4. Layout           wrap, grid helpers, section rhythm
     5. Header and nav
     6. Components       buttons, ledger lists, offers, situations, steps, FAQ, portrait, forms
     7. Page sections    hero, fees band, Louisiana notes, CTA band, contact, about, 404
     8. Footer
     9. Utilities, print, reduced motion

   Design notes: the visual system is "the well-kept ledger" — paper ground, ink text, a ledger
   green for actions, brass for rules and marks, hairline rules instead of boxes and shadows.
   Every text/background pair used here was checked at 7:1 or better; UI borders at 3:1 or better.
   ========================================================================================== */

/* 1. Fonts ------------------------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3.woff2") format("woff2");
}
/* Metric-matched fallbacks: sized so the swap from system font to web font does not reflow.
   Values measured in the browser against the real fonts (see docs/research/technical-research.md
   for the technique). */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Segoe UI");
  size-adjust: 93%;
  ascent-override: 98%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* 2. Tokens ------------------------------------------------------------------------------ */

:root {
  --paper: #F7F3EC;
  --paper-deep: #EFE9DD;
  --ink: #1B1F1D;
  --ink-soft: #4A524E;
  --green: #1F4D3A;
  --green-deep: #163A2C;
  --brass: #B07A2A;
  --brass-deep: #8C5F1C;
  --sage: #E4EBE5;
  --rule: #CFC7B8;
  --rule-strong: #8A8477;
  --error: #8A2D1D;
  --focus: var(--ink);

  --font-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Source Sans Fallback", "Segoe UI", Arial, sans-serif;

  --text-0: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17 → 19px */
  --text--1: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --text-3: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  --leading: 1.55;
  --measure: 66ch;
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --section: clamp(3.5rem, 8vw, 6.5rem);

  --radius: 2px;
  --transition: 120ms ease-out;
}

/* 3. Base -------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  font-size: var(--text-0);
  line-height: var(--leading);
  font-variant-numeric: oldstyle-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }
.site-main:focus { outline: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--text-3); line-height: 1.04; }
h2 { font-size: var(--text-2); }
h3 { font-size: var(--text-1); line-height: 1.25; }
h4 { font-size: var(--text-0); font-family: var(--font-sans); font-weight: 600; }

p, ul, ol { margin: 0 0 var(--space-2); }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.35rem; }
strong { font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { color: var(--green-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-4) 0; }

.num, .tnum { font-variant-numeric: tabular-nums lining-nums; }

::selection { background: var(--sage); color: var(--ink); }

/* 4. Layout ------------------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}
.section + .section,
.section + .band { border-top: 1px solid var(--rule); }
.section--flush { padding-top: 0; border-top: 0; }
.section--noline { border-top: 0; }

.band { padding-block: var(--section); }
.band--deep { background: var(--paper-deep); }
.band--sage { background: var(--sage); }
.band--green { background: var(--green); color: var(--paper); --focus: var(--paper); }
.band--green h2, .band--green h3 { color: var(--paper); }
.band--green a { color: var(--paper); }

.section__head { max-width: 46rem; margin-bottom: var(--space-4); }
.section__head--sub { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 var(--space-1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--brass);
}
.band--green .eyebrow { color: var(--paper); }
.band--green .eyebrow::before { background: var(--paper); }
.section__lead { font-size: var(--text-1); line-height: 1.4; color: var(--ink-soft); max-width: var(--measure); }
.band--green .section__lead { color: var(--paper); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-2); }
.prose h2 { margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-3); }
@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 60em) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

/* 5. Header and nav ---------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--green);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 0.5rem; outline-color: var(--ink); }

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
/* On wider screens the header stays in view so the Contact button is always one click away.
   scroll-margin keeps a keyboard-focused element or an anchor target from hiding under it (2.4.11). */
@media (min-width: 48em) {
  .site-header { position: sticky; top: 0; z-index: 40; }
  html { scroll-padding-top: 5.5rem; }
  a, button, input, textarea, select, summary, [tabindex], [id] { scroll-margin-top: 5.5rem; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 4.5rem;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-block: 0.5rem;
}
.brand:hover { color: var(--green); }
.brand__mark { flex: none; color: var(--green); }
.brand__name-light { font-weight: 400; color: var(--ink-soft); }
.brand:hover .brand__name-light { color: var(--green); }

.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  width: 3rem;
  height: 3rem;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink);
}
.nav-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: var(--space-3); }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-3);
}
/* The body-text rule "li + li { margin-top }" must not reach navigation lists: it pushed every
   nav item after the first down by 0.35rem (the misaligned "Services" Curtis spotted). */
.site-nav__list li, .site-footer__nav li { margin: 0; }
.site-nav__list a {
  display: inline-block;
  padding: 0.6rem 0.1rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--green); border-bottom-color: var(--brass); }
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green); }
.site-nav__cta { min-height: 2.75rem; padding-block: 0.55rem; }

@media (max-width: 47.99em) {
  .js .nav-toggle { display: flex; }
  .js .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-3);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .js .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
  .site-nav__list a[aria-current="page"], .site-nav__list a:hover { border-bottom-color: var(--rule); }
  .site-nav__cta { margin-top: var(--space-2); text-align: center; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2); }
  html:not(.js) .site-nav { width: 100%; flex-wrap: wrap; }
}

/* 6. Components -------------------------------------------------------------------------- */

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  background: transparent;
  color: var(--green);
  font-family: var(--font-sans);
  font-size: var(--text-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.button:hover { background: var(--sage); color: var(--green-deep); border-color: var(--green-deep); }
.button--primary { background: var(--green); color: var(--paper); }
.button--primary:hover { background: var(--green-deep); color: var(--paper); }
.button--paper { background: var(--paper); color: var(--green); border-color: var(--paper); }
.button--paper:hover { background: var(--sage); color: var(--green-deep); border-color: var(--sage); }
.button[disabled] { opacity: 0.7; cursor: default; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.button-row--gap { margin-top: var(--space-3); }
.button-row--gap-lg { margin-top: var(--space-4); }
@media (max-width: 29.99em) {
  .button-row .button { flex: 1 1 100%; }
}

/* Ledger list: a ruled list with a mark in the left margin */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-2);
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.ledger > li:last-child { border-bottom: 1px solid var(--rule); }
.ledger__mark {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--brass-deep);
  font-size: 1.1em;
  line-height: 1.4;
}
.ledger__mark--tick {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3rem;
}
.ledger__body > :last-child { margin-bottom: 0; }

/* Offers: the three services on the home page */
.offers { list-style: none; margin: 0; padding: 0; }
.offer { padding: var(--space-3) 0 var(--space-3); border-top: 1px solid var(--rule); margin: 0; }
.offer__name { margin-bottom: 0.5rem; }
.offer__name a { color: var(--ink); text-decoration: none; display: inline-block; padding: 0.2rem 0; }
.offer__name a:hover { color: var(--green); text-decoration: underline; }
.offer__summary { margin: 0; color: var(--ink-soft); }
@media (min-width: 60em) {
  .offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .offer { border-top: 1px solid var(--ink); }
}

/* Situations: "sound familiar?" */
.situations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.situation { padding-top: var(--space-2); border-top: 1px solid var(--rule); margin: 0; }
.situation h3 { margin-bottom: 0.4rem; }
.situation p { margin: 0; color: var(--ink-soft); }
@media (min-width: 48em) {
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* Steps: how it works */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__num {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-2);
  line-height: 1;
  color: var(--brass-deep);
}
.step h3 { margin-bottom: 0.4rem; }
.step p { margin: 0; }
@media (min-width: 60em) {
  .steps:not(.steps--single) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .steps:not(.steps--single) .step:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}

/* Notes: the online tools, and the compliance calendar by state */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.note { margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--brass); }
.note h3 { font-size: var(--text-1); margin-bottom: 0.4rem; }
.note p { margin: 0; }
.note__items { list-style: none; margin: 0; padding: 0; }
.note__items li { margin: 0; padding: 0.55rem 0; border-top: 1px solid var(--rule); font-size: var(--text--1); }
.note__items li:first-child { border-top: 0; padding-top: 0.2rem; }
.note__items strong { display: block; font-size: var(--text-0); }
@media (min-width: 48em) {
  .notes--calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
}
@media (min-width: 60em) {
  .notes:not(.notes--calendar) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

/* FAQ */
.faq-list { max-width: 48rem; }
.faq {
  border-top: 1px solid var(--rule);
  padding: 0.25rem 0;
}
.faq:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__q {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  align-items: start;
  gap: var(--space-2);
  padding: 1rem 0;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--text-1);
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brass-deep);
  justify-self: end;
  margin-top: 0.1em;
}
.faq[open] .faq__q::after { content: "–"; }
.faq__q:hover { color: var(--green); }
.faq__a { padding: 0 2.5rem 1.25rem 0; max-width: var(--measure); }
.faq__a > :last-child { margin-bottom: 0; }

/* Portrait slot: a ruled panel with initials until a photograph exists */
.portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 22rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, transparent 2.25rem, var(--brass) 2.25rem, var(--brass) calc(2.25rem + 1px), transparent calc(2.25rem + 1px)),
    repeating-linear-gradient(180deg, transparent 0, transparent 1.75rem, var(--rule) 1.75rem, var(--rule) calc(1.75rem + 1px)),
    var(--paper-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait picture { display: contents; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__initials {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 500;
  color: var(--brass-deep);
  letter-spacing: 0.02em;
  background: var(--paper);
  padding: 0.25em 0.45em;
  border: 1px solid var(--rule);
}

/* Forms */
.form { max-width: 34rem; }
.field { margin-bottom: var(--space-3); }
.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.field__optional { font-weight: 400; color: var(--ink-soft); }
.field__hint { display: block; color: var(--ink-soft); font-size: var(--text--1); margin-bottom: 0.4rem; }
.field__input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  transition: border-color var(--transition);
}
textarea.field__input { min-height: 9rem; resize: vertical; }
.field__input:hover { border-color: var(--ink-soft); }
.field__input:focus { border-color: var(--green); outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field__error {
  display: block;
  margin-top: 0.4rem;
  color: var(--error);
  font-weight: 600;
  font-size: var(--text--1);
}
.form__status {
  margin: 0 0 var(--space-3);
  padding: 0.9rem 1rem;
  border: 1px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--error);
  font-weight: 600;
}
.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__after { color: var(--ink-soft); font-size: var(--text--1); margin-top: var(--space-2); }

/* 7. Page sections ----------------------------------------------------------------------- */

/* Hero */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem); }
.hero__inner { display: grid; gap: var(--space-4); align-items: center; }
.hero__text { max-width: 38rem; }
.hero h1 { margin-bottom: var(--space-3); text-wrap: pretty; }
.hero h1 .line { display: block; }
.hero__lead { font-size: var(--text-1); line-height: 1.45; margin-bottom: var(--space-3); max-width: 34rem; }
.hero__facts {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--ink-soft);
  font-size: var(--text--1);
}
.hero__facts li { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__facts li::before { content: ""; width: 0.4rem; height: 0.4rem; background: var(--brass); border-radius: 50%; flex: none; }
.hero__figure { margin: 0; max-width: 30rem; justify-self: center; width: 100%; }
.hero__figure svg { width: 100%; height: auto; }
.hero__caption { font-size: var(--text--1); color: var(--ink-soft); margin-top: var(--space-2); text-align: center; }
@media (min-width: 60em) {
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); }
  .hero__figure { justify-self: end; }
}

/* Fees band */
.fees { display: grid; gap: var(--space-4); }
.fees__points { list-style: none; margin: 0; padding: 0; }
.fees__points li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule-strong);
  margin: 0;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-2);
}
.fees__points li:last-child { border-bottom: 1px solid var(--rule-strong); }
.fees__points strong { display: block; margin-bottom: 0.2rem; }
.fees__points svg { width: 1.25rem; height: 1.25rem; margin-top: 0.3rem; }
@media (min-width: 60em) {
  .fees { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
}

/* About teaser */
.about-teaser { display: grid; gap: var(--space-4); align-items: start; }
.about-teaser .portrait { max-width: 18rem; }
@media (min-width: 48em) {
  .about-teaser { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5); }
}

/* Final call to action */
.cta { display: grid; gap: var(--space-3); max-width: 46rem; }
.cta h2 { margin-bottom: 0; }
.cta p { margin: 0; font-size: var(--text-1); line-height: 1.4; }
.cta .button-row { margin-top: var(--space-2); }
.cta__note { font-size: var(--text--1) !important; opacity: 0.9; }

/* Page header for inner pages */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head__lead { font-size: var(--text-1); line-height: 1.4; color: var(--ink-soft); max-width: var(--measure); margin: 0; }

/* Services page */
.service { padding-block: var(--space-4); border-top: 1px solid var(--rule); }
.service:first-of-type { border-top: 0; padding-top: 0; }
.service__name { font-size: var(--text-2); }
.service__summary { font-size: var(--text-1); line-height: 1.4; color: var(--ink-soft); max-width: var(--measure); }
.service__includes { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-width: var(--measure); }
.service__includes li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.service__includes li:last-child { border-bottom: 1px solid var(--rule); }
.service__includes li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--brass-deep);
  border-bottom: 2px solid var(--brass-deep);
  transform: rotate(-45deg);
}
.service__body { display: grid; gap: var(--space-3); }
.service__fit { max-width: var(--measure); }
.service__fit h3 { font-family: var(--font-sans); font-size: var(--text-0); font-weight: 600; margin: var(--space-3) 0 0.5rem; }
.service__fit ul { list-style: none; margin: 0; padding: 0; }
.service__fit li { margin: 0; padding: 0.5rem 0 0.5rem 1.25rem; border-left: 2px solid var(--brass); color: var(--ink-soft); }
.service__fit li + li { margin-top: 0.4rem; }
@media (min-width: 60em) {
  .service__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
  .service__fit h3 { margin-top: var(--space-3); }
}
.scope { max-width: var(--measure); }
.scope ul { list-style: none; padding: 0; margin: var(--space-2) 0; }
.scope li { padding: 0.5rem 0 0.5rem 1.25rem; border-left: 2px solid var(--rule-strong); margin: 0; }

/* Contact page */
.contact-layout { display: grid; gap: var(--space-4); }
.contact-aside { max-width: 30rem; }
.contact-aside h2 { font-size: var(--text-1); }
.contact-aside .ledger > li { padding: 0.75rem 0; }
.contact-direct { margin-top: var(--space-4); }
.contact-direct a { font-weight: 600; }
@media (min-width: 60em) {
  .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
}

/* About page */
.about-layout { display: grid; gap: var(--space-4); align-items: start; }
.about-layout .portrait { max-width: 20rem; }
.about-side { display: grid; gap: var(--space-3); }
.about-side dl { margin: 0; }
.about-side dt { font-weight: 600; margin-top: var(--space-2); }
.about-side dd { margin: 0.2rem 0 0; color: var(--ink-soft); }
.belief {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: var(--text-2);
  line-height: 1.2;
  color: var(--green);
  margin: var(--space-4) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--brass);
  max-width: 30ch;
}
@media (min-width: 48em) {
  .about-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5); }
}

/* Simple pages: privacy, thank-you, 404, first conversation */
.simple { max-width: var(--measure); }
.notfound { padding-block: clamp(4rem, 12vw, 8rem); text-align: left; }
.notfound .num { font-family: var(--font-serif); font-size: var(--text-3); color: var(--brass-deep); line-height: 1; margin-bottom: var(--space-2); }

/* 8. Footer ------------------------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  --focus: var(--paper);
  padding-block: var(--space-5) var(--space-4);
  margin-top: auto;
}
.site-footer__inner { display: grid; gap: var(--space-4); }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: #FFFFFF; }
.site-footer__name { font-family: var(--font-serif); font-size: var(--text-1); margin-bottom: 0.5rem; }
.site-footer__line { margin: 0 0 0.35rem; color: #D9D3C7; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__nav a { text-decoration: none; font-weight: 600; display: inline-block; padding: 0.25rem 0; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__legal { color: #D9D3C7; font-size: var(--text--1); }
.site-footer__legal p { margin-bottom: 0.4rem; }
@media (min-width: 48em) {
  .site-footer__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr); }
  .site-footer__legal { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid #3A403D; }
}

/* 9. Utilities, print, reduced motion ---------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.small-print { font-size: var(--text--1); color: var(--ink-soft); }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.steps--measure { max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .skip-link, .button-row, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  .faq { display: block; }
  .faq__a { display: block; }
}