/* Values arrive from /assets/tokens.f2d6258863.css, which the control plane writes from
   this bundle's tokens.json with whatever theme the site resolved to merged
   over the top. The fallback after each var() is what keeps the bundle
   renderable on its own, and is the only place in this file a literal colour is
   written.

   Nothing here assumes a pale page. This was drawn as a printed statement of
   account on off-white stock, but a theme is free to hand it a black ground, so
   every shade between the ink and the paper is mixed out of --text instead of
   typed as a grey. A literal #8d9195 is a quiet grey on one of those and an
   illegible smear on the other.

   The idea the whole sheet is built on: this is a trade that publishes numbers,
   so numbers get the right-hand edge and everything is ruled. Section headings
   sit on a full-width rule with the content beneath them, figures are set in
   tabular numerals so a column of fees lines up under itself, and prose is held
   to a measure that can be read without a return sweep. Nothing is centred, for
   the same reason nothing on an invoice is. */
:root {
  --bg: var(--color-bg, #f7f6f2);
  --text: var(--color-text, #1b1d1e);
  --primary: var(--color-primary, #1c5c4a);
  --accent: var(--color-accent, #a03a24);
  --panel: var(--color-surface, color-mix(in srgb, var(--text) 5%, var(--bg)));

  --tight: var(--spacing-sm, 0.5rem);
  --space: var(--spacing-md, 1.25rem);
  --gap: var(--spacing-lg, 3.8rem);

  --font-body-stack: var(--font-body, 'Segoe UI', system-ui, Arial, sans-serif);
  --font-heading-stack: var(--font-heading, 'Helvetica Neue', Helvetica, Arial, sans-serif);

  /* The heading ladder. Two registers and nothing between them: the opening
     sentence and the section titles are display type, set the way the name of
     a firm is cut into a brass plate, and everything a client actually reads —
     the fees, the dates, the answers — stays at desk size. --type-scale only
     nudges the display steps (--display): a theme that asks for 1.6 would
     otherwise push one headline past the right-hand edge of the window. */
  --scale: var(--type-scale, 1);
  --display: calc(0.6 + 0.4 * var(--scale));
  --h1: min(calc(clamp(2.4rem, 6.1vw, 5.7rem) * var(--display)), 6.1rem);
  --h2: calc(clamp(1.55rem, 3.05vw, 2.85rem) * var(--display));
  --h3: calc(clamp(1.02rem, 1.3vw, 1.14rem) * var(--scale));
  --heading-weight: var(--type-heading-weight, 600);
  --heading-tracking: var(--type-heading-tracking, -0.005em);
  --heading-case: var(--type-heading-case, none);

  --r-sm: var(--radius-sm, 2px);
  --r-md: var(--radius-md, 3px);
  --r-pill: var(--radius-pill, 2px);

  /* A floor under the theme's width: a statement printed on a third of the
     sheet with blank margins either side looks like a page that ran short. */
  --width: max(var(--layout-width, 1060px), 1140px);
  --hair: var(--layout-border, 1px);

  /* The measure. Prose is held to it everywhere; tables and grids are not, and
     that difference is most of what makes this bundle look like the trade it is
     for. */
  --measure: 36rem;
}
/* The greys are all mixed from the ink, and are mixed again on any section
   that brings its own ground (the rhythm rules near the end turn some over),
   so a rule drawn on a reversed block is still a faint line and not a hole. */
:root, main > section {
  --muted: color-mix(in srgb, var(--text) 68%, transparent);
  --faint: color-mix(in srgb, var(--text) 46%, transparent);
  --rule: color-mix(in srgb, var(--text) 18%, transparent);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body-stack);
  font-size: 1rem;
  line-height: 1.65;
  /* Every figure on this site sits in a column under another figure — a fee
     against a fee, a date against a date — so the digits are the same width
     wherever they appear rather than only inside the tables. */
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .brand, .fee-figure, .date-when {
  font-family: var(--font-heading-stack);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-case);
  line-height: 1.22;
}
a { color: inherit; }
p { margin: 0 0 0.95rem; }
p:last-child { margin-bottom: 0; }

.inner { max-width: var(--width); margin: 0 auto; padding: 0 var(--space); }
/* A column of prose, wherever prose appears. */
.col, .lede { max-width: var(--measure); }
.lede { color: var(--muted); margin-bottom: 1.4rem; }

/* One row: the practice's name at the left, the pages at the right, closed
   underneath by a hairline and opened above by a bar in the brand colour — the
   coloured band across the top of a statement, and the one place on the page
   where the brand appears as a block of colour rather than as ink. */
.site-header { border-top: 3px solid var(--primary); border-bottom: var(--hair) solid var(--rule); background: var(--bg); }
.head-row {
  max-width: var(--width); margin: 0 auto; padding: 1.1rem var(--space);
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem 1.8rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 0.5em; font-size: 1.3rem; text-decoration: none; }
.brand-mark { flex: none; display: block; }
.site-nav { display: flex; gap: 1.35rem; flex-wrap: wrap; font-size: 0.9rem; }
.site-nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

section { padding: calc(var(--gap) * 0.55) 0; }

/* A section heading sits on its own rule with the content underneath. Not in
   a margin wherever the content is a table or a grid: a table cannot give up a
   twelve-rem column at the left without losing the thing that makes it a
   table. (Prose-only sections are the exception, further down.) */
.rule-head {
  margin: 0 0 1.15rem;
  padding-top: 0.65rem;
  border-top: 2px solid var(--primary);
  font-size: var(--h2);
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border: var(--hair) solid var(--text); border-radius: var(--r-pill);
  color: var(--text); text-decoration: none;
  font-family: var(--font-heading-stack); font-size: 0.95rem; font-weight: var(--heading-weight);
  white-space: nowrap;
}
.btn:hover { background: var(--text); color: var(--bg); }
/* Ink on a solid brand button is the page colour. The token contract promises
   that primary clears 3:1 against bg, which makes it the one value provably
   readable on the brand without knowing what either of them turned out to be. */
.btn-solid { background: var(--primary); border-color: var(--primary); color: var(--bg); }
.btn-solid:hover { background: color-mix(in srgb, var(--primary) 82%, var(--text)); border-color: transparent; }

/* An inner page opens with its own name under a heavy rule — the way a
   continuation sheet is headed, so that the first thing below the masthead is a
   title and not a section heading standing in for one. */
.folio { max-width: var(--width); margin: 0 auto; padding: 2.3rem var(--space) 0; }
.folio h1 { margin: 0; padding-top: 0.9rem; border-top: 3px solid var(--primary); font-size: calc(var(--h1) * 0.74); max-width: 20ch; }
.sheet-stack { padding-bottom: var(--gap); }

/* The opening. One sentence, set large, closed by a rule with the qualifying
   line on the left of it and the way in on the right — which is where the
   figure and the total sit on everything else this trade prints. */
.opening { padding-top: 2.6rem; padding-bottom: calc(var(--gap) * 0.6); }
.opening-tag {
  margin: 0 0 1rem; color: var(--accent);
  font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase;
}
.opening h1 { margin: 0 0 2rem; font-size: var(--h1); max-width: 17ch; }
.opening-foot {
  border-top: 2px solid var(--primary); padding-top: 1.2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space) calc(var(--space) * 2); align-items: start;
}
.opening-lede { margin: 0; color: var(--muted); max-width: 44ch; }
@media (max-width: 700px) {
  .opening-foot { grid-template-columns: 1fr; }
}

/* Prose with a photograph. With no photograph the grid does not apply and the
   paragraph simply runs at the measure — there is no empty panel on a live
   page, because a practice that has not photographed its own office has a
   finished paragraph rather than a broken layout. */
.pic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: calc(var(--space) * 2); align-items: start; }
.pic-copy > p { max-width: var(--measure); color: var(--muted); }
.pic-shot { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }
/* The ruled plate a slot draws in a preview, so an operator can read which
   photograph is being asked of them before one exists. */
.plate-wanted {
  display: flex; align-items: flex-end; padding: var(--space);
  border: var(--hair) dashed var(--rule); background: var(--panel);
  color: var(--faint); font-size: 0.8rem; line-height: 1.4;
}
@media (max-width: 780px) { .pic-grid { grid-template-columns: 1fr; } }

/* Numbered rows. A tick would be a claim about quality; a number is an item on
   a list a client can come back to and ask why the fourth one did not happen. */
.points { list-style: none; counter-reset: pt; margin: 0; padding: 0; max-width: var(--measure); }
.points li {
  counter-increment: pt;
  position: relative; padding: 0.7rem 0 0.7rem 2.5rem;
  border-top: var(--hair) solid var(--rule);
}
.points li:last-child { border-bottom: var(--hair) solid var(--rule); }
.points li::before {
  content: counter(pt, decimal-leading-zero);
  position: absolute; left: 0; top: 0.7rem;
  font-family: var(--font-heading-stack); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.06em;
}

/* The closing block, in a filled panel so it reads as the foot of the sheet
   rather than as one more paragraph. The button keeps the right-hand edge every
   figure on this site is aligned to. */
.close-box {
  border: var(--hair) solid var(--rule); border-left: 3px solid var(--primary); border-radius: var(--r-md);
  background: var(--panel); padding: calc(var(--space) * 1.3);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space) calc(var(--space) * 1.5); align-items: center;
}
.close-copy h2 { margin: 0; font-size: var(--h2); }
.close-copy p { margin: 0.5rem 0 0; color: var(--muted); max-width: var(--measure); }
@media (max-width: 620px) { .close-box { grid-template-columns: 1fr; } }

/* Contact details and opening hours share one shape: they are read in the same
   breath, and two different treatments would look like two sections that
   arrived from different sites. */
.reach-rows, .hours { display: block; margin: 0; max-width: 32rem; }
.reach-row, .hours-row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem;
  border-top: var(--hair) solid var(--rule); padding: 0.6rem 0;
}
.reach-row:last-child, .hours-row:last-child { border-bottom: var(--hair) solid var(--rule); }
.reach-row dt, .hours-row dt { color: var(--muted); font-size: 0.88rem; }
.reach-row dd, .hours-row dd { margin: 0; }
.reach-row dd a { text-decoration: none; border-bottom: var(--hair) solid var(--rule); }
.hours-row { grid-template-columns: minmax(0, 1fr) auto; }
.hours-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.88rem; max-width: var(--measure); }

/* Questions and answers. The answer is body text, not small print. */
.asked { max-width: var(--measure); }
.asked-item { border-top: var(--hair) solid var(--rule); padding: 1rem 0; }
.asked-item:last-child { border-bottom: var(--hair) solid var(--rule); }
.asked-item h3 { margin: 0 0 0.35rem; font-size: var(--h3); }
.asked-item p { margin: 0; color: var(--muted); }

/* Standing figures. Cells across the sheet, each under its own rule: the number
   large in the brand colour with what it counts beneath. A column of totals,
   not a row of trophies. */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 calc(var(--space) * 1.6); margin: 0; }
.figure-cell { border-top: 2px solid var(--rule); padding: 0.8rem 0 0.2rem; }
.figure-cell dt { font-family: var(--font-heading-stack); font-size: calc(var(--h1) * 0.7); line-height: 1.05; color: var(--primary); }
.figure-cell dd { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.88rem; }

/* The stages of a piece of work. The number hangs in the heading's own margin,
   and what the client has to supply gets a ruled line of its own so that a
   reader scanning for their part does not have to read the practice's. */
.stages { list-style: none; counter-reset: stage; margin: 0; padding: 0; }
.stage { counter-increment: stage; border-top: var(--hair) solid var(--rule); padding: 1.05rem 0; }
.stage:last-child { border-bottom: var(--hair) solid var(--rule); }
.stage h3 { margin: 0 0 0.35rem; font-size: var(--h3); display: flex; align-items: baseline; gap: 0.7rem; }
.stage-no::before { content: counter(stage, decimal-leading-zero); }
.stage-no { flex: none; color: var(--accent); font-size: 0.8rem; letter-spacing: 0.06em; font-weight: 400; }
.stage p { margin: 0; color: var(--muted); max-width: var(--measure); }
.stage-yours {
  margin-top: 0.6rem; padding-top: 0.5rem; border-top: var(--hair) dotted var(--rule);
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.8rem;
  color: var(--text); font-size: 0.9rem; max-width: var(--measure);
}
.stage-yours span { color: var(--faint); font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; }
@media (max-width: 560px) { .stage-yours { grid-template-columns: 1fr; gap: 0.2rem; } }

/* What clients said. The sentence at reading size, the person under it against
   a rule in the accent colour: here the quotation is the claim and the line
   below it is the evidence, which is the reverse of a pull quote. */
.said { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: calc(var(--space) * 1.6); }
.said-one { margin: 0; }
.said-one blockquote { margin: 0 0 0.7rem; font-size: 1.02rem; line-height: 1.55; }
.said-one figcaption { border-top: 2px solid var(--accent); padding-top: 0.5rem; font-size: 0.86rem; }
.said-one figcaption strong { font-family: var(--font-heading-stack); font-weight: var(--heading-weight); }
.said-one figcaption span { display: block; color: var(--muted); }

/* People. Small square portrait, then the name, then the qualification in the
   accent colour directly beneath it — because the letters after the name are
   what a stranger came to this page to check, and a sentence is where they go
   to be missed. */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: calc(var(--space) * 1.3); }
.person { margin: 0; border: var(--hair) solid var(--rule); border-radius: var(--r-md); background: var(--panel); padding: var(--space); }
.person-plate {
  aspect-ratio: 1 / 1; width: 5.5rem; border-radius: var(--r-sm); border: var(--hair) solid var(--rule);
  background:
    radial-gradient(circle 16px at 50% 40%, color-mix(in srgb, var(--text) 14%, transparent) 99%, transparent 100%),
    var(--bg);
}
/* A supplied portrait fills the plate's box exactly, so nothing on the page
   moves when one arrives. The plate's own drawing has to be cleared, since it
   is a background and a transparent file would sit on top of it. */
.person-img { display: block; object-fit: cover; background: none; }
.person figcaption { display: block; margin-top: 0.8rem; }
.person-name { display: block; font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: var(--h3); }
.person-qual { display: block; color: var(--accent); font-size: 0.82rem; letter-spacing: 0.04em; }
.person-role { display: block; color: var(--muted); font-size: 0.84rem; }
.person-note { display: block; margin-top: 0.45rem; color: var(--muted); font-size: 0.88rem; }

/* Registration and cover, as entries rather than as marks. */
.standing { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space) calc(var(--space) * 2); }
.standing li { border-top: var(--hair) solid var(--rule); padding-top: 0.65rem; }
.standing strong { display: block; font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: 0.98rem; }
.standing span { display: block; color: var(--muted); font-size: 0.88rem; }

/* The fee table. The figure column is right-aligned and set in the brand
   colour, because running a finger down it is the reason the page was opened.
   The detail line sits under the name of the work, in the first column, so the
   table stays three columns wide on a laptop instead of four. */
.fees { width: 100%; border-collapse: collapse; text-align: left; }
.fees th {
  font-family: var(--font-body-stack); font-weight: 400;
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  padding: 0 0.9rem 0.55rem 0; border-bottom: 2px solid var(--rule);
}
.fees td { padding: 0.85rem 0.9rem 0.85rem 0; border-bottom: var(--hair) solid var(--rule); vertical-align: baseline; }
.fees td:last-child, .fees th:last-child { padding-right: 0; }
.fees .col-work strong { display: block; font-family: var(--font-heading-stack); font-weight: var(--heading-weight); }
.fees .col-work span { display: block; color: var(--muted); font-size: 0.87rem; }
.fees .col-who { color: var(--muted); font-size: 0.92rem; }
.fees .col-fee {
  text-align: right; white-space: nowrap;
  font-family: var(--font-heading-stack); font-size: 1.15rem; color: var(--primary);
}
.fees th.col-fee { font-family: var(--font-body-stack); font-size: 0.74rem; color: var(--muted); }
.fees-scroll { overflow-x: auto; }
.fees-note { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.87rem; max-width: var(--measure); }
@media (max-width: 620px) {
  /* Three columns inside 320px is three words a line. Each row becomes a
     block, and the header row goes with it — a table header floating above
     stacked blocks labels nothing. */
  .fees thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fees tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: var(--hair) solid var(--rule); padding: 0.8rem 0; }
  .fees td { display: block; border: 0; padding: 0; }
  .fees .col-fee { grid-row: 1; grid-column: 2; }
  .fees .col-who { grid-column: 1; }
}

/* The dates. The day and month lead each row in the accent colour, at the width
   of the longest one, so twelve of them can be read as a column. */
.dates { list-style: none; margin: 0; padding: 0; }
.date-row {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 calc(var(--space) * 1.5);
  border-top: var(--hair) solid var(--rule); padding: 1rem 0;
}
.date-row:last-child { border-bottom: var(--hair) solid var(--rule); }
.date-when { margin: 0; color: var(--accent); font-size: 1rem; }
.date-what h3 { margin: 0 0 0.3rem; font-size: var(--h3); }
.date-who { margin: 0; color: var(--faint); font-size: 0.84rem; letter-spacing: 0.03em; }
.date-note { margin: 0.4rem 0 0; color: var(--muted); max-width: var(--measure); font-size: 0.92rem; }
.dates-note { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.87rem; max-width: var(--measure); }
@media (max-width: 620px) { .date-row { grid-template-columns: 1fr; gap: 0.3rem; } }

/* Software, as named entries. Somebody else's logo is somebody else's asset,
   and a row of grey rectangles is what a template looks like when nobody
   supplied the pictures. */
.systems { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space) calc(var(--space) * 2); }
.system { border-top: 2px solid var(--rule); padding-top: 0.7rem; }
.system h3 { margin: 0 0 0.3rem; font-size: var(--h3); }
.system-use { margin: 0; color: var(--muted); font-size: 0.92rem; }
.system-note { margin: 0.45rem 0 0; color: var(--faint); font-size: 0.86rem; }
.systems-note { margin: 1.2rem 0 0; color: var(--muted); font-size: 0.87rem; max-width: var(--measure); }

/* The services, as ruled entries with the monthly fee holding the right-hand
   edge. A grid of cards would give each service the width of a caption and put
   the figure — the thing being compared — somewhere different on every tile. */
.services { display: block; }
.service {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem var(--space);
  text-decoration: none; border-top: var(--hair) solid var(--rule); padding: 1.15rem 0;
}
.service:last-child { border-bottom: var(--hair) solid var(--rule); }
.service:hover .service-name { color: var(--primary); }
.service-name { grid-column: 1; font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: calc(1.5rem * var(--scale)); }
.service-fee { grid-column: 2; grid-row: 1; text-align: right; font-family: var(--font-heading-stack); font-size: 1.1rem; color: var(--primary); white-space: nowrap; }
.service-who { grid-column: 1; color: var(--muted); max-width: var(--measure); font-size: 0.94rem; }
.service-when { grid-column: 1 / -1; margin-top: 0.45rem; color: var(--faint); font-size: 0.82rem; letter-spacing: 0.03em; }
@media (max-width: 560px) {
  .service { grid-template-columns: 1fr; }
  .service-fee { grid-column: 1; grid-row: auto; text-align: left; }
}

/* One service's facts, at the head of its own page. The fee is given the first
   cell and the largest type: it is the fact the page is being opened to check,
   and burying it under three lines of qualification is how a practice ends up
   answering the same question on the telephone all week. */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space) calc(var(--space) * 2); margin: 0;
  border-top: 3px solid var(--primary); border-bottom: var(--hair) solid var(--rule); padding: 1.1rem 0;
}
.fact dt { color: var(--faint); font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; }
.fact dd { margin: 0.3rem 0 0; }
.fact-fee dd { font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: 1.5rem; line-height: 1.1; color: var(--primary); }
.facts-covers { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.35rem calc(var(--space) * 2); }
.facts-covers li { padding-left: 1.1rem; position: relative; font-size: 0.94rem; }
.facts-covers li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.site-footer { border-top: 2px solid var(--primary); margin-top: var(--gap); color: var(--muted); font-size: 0.9rem; }
.foot-top {
  max-width: var(--width); margin: 0 auto; padding: 1.6rem var(--space) 1rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem 2rem; flex-wrap: wrap;
  border-bottom: var(--hair) solid var(--rule);
}
.foot-name { margin: 0; color: var(--text); font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: 1.1rem; }
.foot-reach { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-reach a { text-decoration: none; }
.foot-reach a:hover { color: var(--text); }
.foot-cols {
  max-width: var(--width); margin: 0 auto; padding: 1.2rem var(--space);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space) calc(var(--space) * 2);
}
.foot-col { display: grid; gap: 0.3rem; align-content: start; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { color: var(--text); }
.foot-head { margin: 0 0 0.25rem; color: var(--faint); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-rule { max-width: var(--width); margin: 0 auto; padding: 0 var(--space) 2rem; font-size: 0.84rem; }

/* The guides — the index, and one of them.
   Ruled rows rather than cards: the entries are of very different lengths, and
   a card grid makes the short ones look unfinished. */
.guide-index { list-style: none; margin: 2rem 0 0; padding: 0; }
.guide-row { border-top: var(--hair) solid var(--rule); padding: 1.2rem 0; }
.guide-row:last-child { border-bottom: var(--hair) solid var(--rule); }
.guide-row time { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.06em; }
.guide-row h2 { margin: 0.25rem 0 0.3rem; font-size: calc(1.4rem * var(--scale)); }
.guide-row h2 a { text-decoration: none; }
.guide-row h2 a:hover { color: var(--primary); }
.guide-row p { margin: 0; color: var(--muted); max-width: var(--measure); }

.guide { max-width: var(--width); margin: 0 auto; padding: 1.6rem var(--space) 0; }
.trail { font-size: 0.84rem; color: var(--muted); margin-bottom: 1.1rem; }
.trail a { color: inherit; text-decoration: none; }
.trail a:hover { color: var(--text); }
.guide h1 { margin: 0; padding-top: 0.9rem; border-top: 3px solid var(--primary); font-size: calc(var(--h1) * 0.6); max-width: 22ch; }
.guide > time { display: block; color: var(--muted); font-size: 0.84rem; margin: 0.6rem 0 1.7rem; }
.guide p { max-width: var(--measure); margin: 0 0 1rem; }
/* A subheading, a pulled sentence and a list are structure the renderer reads
   out of the prose, so a long guide arrives as something that can be scanned
   rather than as nine identical paragraphs. */
.guide h2 { font-size: calc(var(--h3) * 1.18); margin: 2rem 0 0.7rem; max-width: 34ch; }
.guide h2:first-of-type { margin-top: 1.3rem; }
.guide blockquote {
  margin: 1.6rem 0; padding: 0.2rem 0 0.2rem var(--space);
  border-left: 3px solid var(--accent);
  font-size: 1.1rem; line-height: 1.5; max-width: 34ch; color: var(--text);
}
.guide-list { margin: 0 0 1.2rem; padding-left: 1.2rem; max-width: var(--measure); }
.guide-list li { margin-bottom: 0.35rem; }
.guide-list li::marker { color: var(--accent); }
.guide-more { max-width: var(--width); margin: 2rem auto 0; padding: 1.1rem var(--space) 0; border-top: var(--hair) solid var(--rule); }
.guide-more h2 { margin: 0 0 0.6rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body-stack); font-weight: 400; }
.guide-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.guide-more a { text-decoration: none; font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: 1.02rem; }
.guide-more a:hover { color: var(--primary); }
.guide-back { max-width: var(--width); margin: 1.8rem auto 0; padding: 1rem var(--space) 0; border-top: var(--hair) solid var(--rule); }
.guide-back a { text-decoration: none; color: var(--muted); }
.guide-back a:hover { color: var(--text); }

/* Arrangements — sections/<type>.<name>.html beside sections/<type>.html.
   A site draws one layout per section type, chosen by its own host, and never
   sees the other one. So nothing below is a variation on a rule above: each is
   the only shape that section has on the site that got it, and has to be
   finished on its own terms. The fields are identical either way, which is why
   none of this needed a line of schema. */

/* hero "slab". The plain opening is ink on the page. This one puts the whole
   statement inside a filled block with the line above the headline turned into
   a tab on its top edge — a cover sheet rather than a first paragraph. It suits
   a practice whose first screen is meant to state a price and stop; the plain
   one suits a practice that would rather look like its own correspondence. */
.opening-slab { padding-top: 1.8rem; }
.opening-slab .slab {
  background: var(--panel); border: var(--hair) solid var(--rule); border-top: 4px solid var(--primary);
  border-radius: var(--r-md); padding: calc(var(--space) * 2);
}
.opening-slab .opening-tag { margin-bottom: 0.9rem; }
.opening-slab h1 { margin-bottom: 1.2rem; max-width: 18ch; }
.opening-slab .opening-lede { max-width: 48ch; margin-bottom: 1.6rem; }
@media (max-width: 640px) { .opening-slab .slab { padding: calc(var(--space) * 1.2); } }

/* fee_table "cards". The table asks a reader to compare down the fee column,
   which is right where the prices are the argument. This deals the same rows
   out as panels, each headed by its own figure, which is right for a practice
   with four packages rather than a schedule of twelve — and it is a grid on a
   phone rather than a table pretending to be one. */
.fees-cards .fee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space); align-items: start; }
.fees-cards .fee-card {
  border: var(--hair) solid var(--rule); border-top: 3px solid var(--primary); border-radius: var(--r-md);
  background: var(--panel); padding: var(--space);
}
.fees-cards .fee-figure { margin: 0 0 0.4rem; font-size: 1.6rem; line-height: 1.05; color: var(--primary); }
.fees-cards .fee-card h3 { margin: 0 0 0.35rem; font-size: var(--h3); }
.fees-cards .fee-who { margin: 0; color: var(--muted); font-size: 0.9rem; }
.fees-cards .fee-note { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: var(--hair) solid var(--rule); color: var(--faint); font-size: 0.86rem; }

/* calendar "ledger". Stacked entries read as a list of warnings taken one at a
   time, which is right on a service page where two of them apply. A table reads
   as a schedule to be checked against a diary, which is right on a page that is
   nothing but the year. */
.dates-ledger .dates-scroll { overflow-x: auto; }
.dates-table { width: 100%; border-collapse: collapse; text-align: left; }
.dates-table th {
  font-family: var(--font-body-stack); font-weight: 400;
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  padding: 0 0.9rem 0.55rem 0; border-bottom: 2px solid var(--rule); white-space: nowrap;
}
.dates-table td { padding: 0.8rem 0.9rem; border-bottom: var(--hair) solid var(--rule); vertical-align: baseline; }
.dates-table td:first-child, .dates-table th:first-child { padding-left: 0; }
.dates-table td:last-child, .dates-table th:last-child { padding-right: 0; }
.dates-table .col-when { font-family: var(--font-heading-stack); font-weight: var(--heading-weight); color: var(--accent); white-space: nowrap; }
.dates-table .col-due { font-family: var(--font-heading-stack); font-weight: var(--heading-weight); }
.dates-table .col-whom { color: var(--faint); font-size: 0.88rem; }
.dates-table .col-means { color: var(--muted); font-size: 0.9rem; min-width: 16rem; }
@media (max-width: 700px) {
  .dates-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dates-table tr { display: block; border-bottom: var(--hair) solid var(--rule); padding: 0.85rem 0; }
  .dates-table td { display: block; border: 0; padding: 0; }
  .dates-table .col-means { min-width: 0; margin-top: 0.35rem; }
}

/* steps "panels". A column of ruled stages is read downwards by somebody
   working through it. Panels say instead that there are only four of them and
   none is frightening, which is the argument a switching page is making. What
   the client supplies keeps its rule at the foot of each panel, so it is still
   the last thing read. */
.stages-panels .stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space); }
.stages-panels .stage {
  border: var(--hair) solid var(--rule); border-top: 3px solid var(--primary); border-radius: var(--r-md);
  background: var(--panel); padding: var(--space); display: block;
}
.stages-panels .stage:last-child { border-bottom: var(--hair) solid var(--rule); }
.stages-panels .stage-no { display: block; margin-bottom: 0.4rem; }
.stages-panels .stage h3 { display: block; margin-bottom: 0.4rem; }
.stages-panels .stage-yours { max-width: none; grid-template-columns: 1fr; gap: 0.15rem; }

/* ========================================================================
   Display, pictures, rhythm and motion.
   Everything below came after the sheet above, and leans on it: the rules
   up there say what a section is, these say how loud it is set, where the
   photographs go and how the colour falls down the page.
   ======================================================================== */

/* At seventy pixels and up the headline is set solid and drawn in: the
   tracking a face carries for running text turns into daylight between the
   letters at that size. */
h1 { line-height: 1.0; letter-spacing: calc(var(--heading-tracking) - 0.028em); text-wrap: balance; }
h2 { line-height: 1.08; letter-spacing: calc(var(--heading-tracking) - 0.014em); text-wrap: balance; }
section { padding: calc(var(--gap) * 0.95) 0; }
.rule-head { margin-bottom: 1.6rem; padding-top: 0.9rem; max-width: 26ch; }
.lede { font-size: 1.08rem; }

/* Sections that are only prose or a short list keep it at the measure, and
   the measure is a third of a wide window. So the heading is moved into the
   left-hand column, as an account's title is written in the narrative column
   of a ledger, and the content takes the money columns at the right. Tables,
   fee lists and grids never do this; they need the width more than a margin. */
:is(.s-points, .s-text, .s-reach, .s-hours, .s-asked:not(.asked-indexed), .s-withpic:not(:has(.pic-grid))) > .inner:has(> .rule-head) {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
}
:is(.s-points, .s-text, .s-reach, .s-hours, .s-asked, .s-withpic) > .inner:has(> .rule-head) > :not(.rule-head) { grid-column: 2; }
:is(.s-points, .s-text, .s-reach, .s-hours, .s-asked, .s-withpic) > .inner:has(> .rule-head) > .rule-head {
  grid-column: 1; grid-row: 1 / span 6; font-size: calc(var(--h2) * 0.82);
}
.s-asked .asked, .s-points .points, .s-text .col { max-width: 40rem; }
.s-text .col, .s-withpic .pic-copy > p { font-size: 1.06rem; }
.sheet-stack > section:first-of-type { padding-top: calc(var(--gap) * 0.7); }
@media (max-width: 820px) {
  :is(.s-points, .s-text, .s-reach, .s-hours, .s-asked:not(.asked-indexed), .s-withpic:not(:has(.pic-grid))) > .inner:has(> .rule-head) { display: block; }
}

/* The picture of the building. One shape everywhere it sits in the column:
   a long strip, wider than any sentence above it. */
.hero-img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-md); }
.strip-img { margin-top: calc(var(--gap) * 0.75); }

/* slab with a photograph: the words take the left two-thirds of the sheet and
   the picture stands in the last third at the full height of the block. */
.slab-pictured { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: calc(var(--space) * 2.2); align-items: stretch; }
.slab-pictured h1 { font-size: calc(var(--h1) * 0.84); }
.slab-img { height: 100%; min-height: 20rem; aspect-ratio: auto; }
@media (max-width: 860px) {
  .slab-pictured { grid-template-columns: 1fr; }
  .slab-img { aspect-ratio: 21 / 9; min-height: 0; }
}

/* half: the left page in the panel colour, its text lined up with the
   column every later section uses; the right page runs to the window edge. */
.opening-half { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 0; min-height: min(80vh, 48rem); }
.half-words {
  display: grid; align-items: center; background: var(--panel);
  padding: calc(var(--gap) * 1.1) calc(var(--space) * 2.6) calc(var(--gap) * 1.1) max(var(--space), calc((100vw - var(--width)) / 2 + var(--space)));
}
.opening-half h1 { font-size: calc(var(--h1) * 0.74); max-width: 15ch; margin-bottom: 1.6rem; }
.opening-half .opening-lede { margin-bottom: 1.8rem; }
.half-img { height: 100%; min-height: 24rem; border-radius: 0; aspect-ratio: auto; }
/* The ruled account sheet that stands in for a photograph: feint lines across
   in the page colour, a double margin rule down the left, and the double rule
   of a closed total near the foot. Drawn, not waiting. */
.account-sheet {
  position: relative;
  background:
    linear-gradient(to right, transparent 17%, color-mix(in srgb, var(--bg) 55%, transparent) 17%, color-mix(in srgb, var(--bg) 55%, transparent) calc(17% + 2px), transparent calc(17% + 2px), transparent calc(17% + 6px), color-mix(in srgb, var(--bg) 55%, transparent) calc(17% + 6px), color-mix(in srgb, var(--bg) 55%, transparent) calc(17% + 8px), transparent calc(17% + 8px)),
    repeating-linear-gradient(to bottom, transparent 0 2.35rem, color-mix(in srgb, var(--bg) 24%, transparent) 2.35rem calc(2.35rem + 1px)),
    var(--primary);
}
.account-sheet span {
  position: absolute; left: calc(17% + 2.4rem); right: 14%; bottom: 18%; height: 9px;
  border-top: 3px solid var(--bg); border-bottom: 3px solid var(--bg);
}
@media (max-width: 860px) {
  .opening-half { grid-template-columns: 1fr; min-height: 0; }
  .half-words { padding: calc(var(--gap) * 0.8) var(--space); }
  .half-img { min-height: 0; aspect-ratio: 21 / 9; }
}

/* statement: twelve columns; the sentence takes nine, the total column the
   last three, with the lede and the button sitting on its foot. */
.statement-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space); align-items: end; }
.statement-grid .opening-tag { grid-column: 1 / -1; }
.opening-statement h1 { grid-column: 1 / 10; margin: 0; font-size: var(--h1); max-width: none; }
.statement-total { grid-column: 10 / 13; border-top: 2px solid var(--primary); padding-top: 1rem; }
.statement-total .opening-lede { margin-bottom: 1.3rem; font-size: 0.98rem; }
.band-img { margin-top: calc(var(--gap) * 0.85); border-radius: 0; max-height: 38rem; }
.opening-statement:has(.band-img) { padding-bottom: 0; }
.final-rule { margin: calc(var(--gap) * 0.7) 0 0; height: 7px; border: 0; border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary); }
@media (max-width: 900px) {
  .opening-statement h1, .statement-total { grid-column: 1 / -1; }
  .statement-total { margin-top: 1.6rem; }
}

/* Figures beside a photograph: the object upright at the left, the totals
   squared into two by two beside it and set larger, since they now have the
   height of a picture to fill. */
.figures-pictured { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.figs-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.figures-pictured .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
.figures-pictured .figure-cell dt { font-size: calc(var(--h1) * 0.82); }
@media (max-width: 760px) { .figures-pictured { grid-template-columns: 1fr; } }
.figure-cell dt { letter-spacing: -0.02em; }

/* The paragraph-and-photograph section, given the room the wider column made. */
.pic-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 780px) { .pic-grid { grid-template-columns: 1fr; } }

/* faq "index": number, question, answer — three ruled columns. */
.asked-index { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.asked-row {
  counter-increment: q;
  display: grid; grid-template-columns: 3.2rem minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 0 calc(var(--space) * 2);
  border-top: var(--hair) solid var(--rule); padding: 1.3rem 0;
}
.asked-row:last-child { border-bottom: var(--hair) solid var(--rule); }
.asked-row::before { content: counter(q, decimal-leading-zero); color: var(--accent); font-family: var(--font-heading-stack); font-size: 0.85rem; letter-spacing: 0.06em; padding-top: 0.25rem; }
.asked-row h3 { margin: 0; font-size: calc(var(--h3) * 1.18); line-height: 1.3; }
.asked-row p { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .asked-row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .asked-row p { grid-column: 2; margin-top: 0.4rem; }
}

/* No portrait: the plate becomes a monogram. The whole name is in the box,
   shrunk to nothing, and only its first letter is drawn back at size. */
.person-mono {
  display: block; overflow: hidden; background: var(--primary); border-color: transparent;
  font-size: 0; line-height: 5.5rem; text-align: center; color: var(--bg);
}
.person-mono::first-letter { font-family: var(--font-heading-stack); font-weight: var(--heading-weight); font-size: 2.4rem; }

/* ------------------------------------------------------------------------
   The page's rhythm — <body data-rhythm>, drawn per site from its host by
   the renderer. Sections already run edge to edge (only their .inner holds
   the column), so a ground set on a section is a band without any tricks.
   ------------------------------------------------------------------------ */

/* bands: the fanfold listing paper accounts were once printed on — every
   second section on a pale stripe of the brand colour. A panel inside a
   stripe takes the page colour so it does not vanish into it. */
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main > section:where(:nth-child(even of section):not(.opening)) {
  --panel: var(--bg);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}
[data-rhythm="blocks"] main > section:where(:nth-child(even of section):not(.opening)) {
  background: color-mix(in srgb, var(--accent) 11%, var(--bg));
}

/* blocks: the standing figures and the clients' words are turned over —
   paper becomes ink and ink becomes paper — so the two places where the
   practice is quoting evidence stand out as printed in reverse. The tokens
   are swapped rather than repainted, so every shade mixed from --text above
   comes out right on the new ground. */
[data-rhythm="blocks"] main > section:is(.s-figures, .s-said) {
  --bg: var(--color-text, #1b1d1e);
  --text: var(--color-bg, #f7f6f2);
  --panel: color-mix(in srgb, var(--text) 7%, var(--bg));
  --primary: color-mix(in srgb, var(--color-primary, #1c5c4a) 50%, var(--text));
  --accent: color-mix(in srgb, var(--color-accent, #a03a24) 50%, var(--text));
  background: var(--bg); color: var(--text);
}

/* bands and blocks close the page on the brand colour, wall to wall: the
   line under the last figure, made into the way out. Calm keeps the boxed
   foot of the sheet. */
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main > section.s-close:last-child {
  --text: var(--color-bg, #f7f6f2);
  --bg: var(--color-primary, #1c5c4a);
  background: var(--bg); color: var(--text);
  padding-block: calc(var(--gap) * 1.3);
}
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main > section.s-close:last-child .close-box { background: none; border: 0; padding: 0; border-radius: 0; }
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main > section.s-close:last-child .close-copy h2 { font-size: calc(var(--h2) * 1.2); max-width: 20ch; }
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main > section.s-close:last-child .close-copy p { font-size: 1.08rem; }
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main > section.s-close:last-child .btn-solid { background: var(--text); border-color: var(--text); color: var(--bg); font-size: 1.05rem; padding: 0.85rem 1.7rem; }
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main:has(> section.s-close:last-child) { padding-bottom: 0; }
:is([data-rhythm="bands"], [data-rhythm="blocks"]) main:has(> section.s-close:last-child) + .site-footer { margin-top: 0; }
.close-copy h2 { font-size: var(--h2); }

/* ------------------------------------------------------------------------
   How photographs are cut — <body data-pictures>. Every picture on a site
   is cut the same way; the full-bleed ones keep square edges in every look.
   ------------------------------------------------------------------------ */
[data-pictures="arch"] :is(.pic-shot, .figs-img, .slab-img) {
  border-radius: 999px 999px var(--r-sm) var(--r-sm) / 40% 40% var(--r-sm) var(--r-sm);
}
[data-pictures="arch"] .strip-img { border-radius: 14rem 14rem var(--r-sm) var(--r-sm) / 9rem 9rem var(--r-sm) var(--r-sm); }
/* frame: a print mounted on card with a block of the accent behind it, as
   a photograph is pasted into the front of an annual report. */
[data-pictures="frame"] :is(.pic-shot, .figs-img, .strip-img, .slab-img) {
  padding: clamp(0.45rem, 0.9vw, 0.8rem); background: var(--panel);
  border: var(--hair) solid var(--rule); border-radius: var(--r-sm);
  box-shadow: 0.85rem 0.85rem 0 color-mix(in srgb, var(--accent) 70%, var(--bg));
}
/* mono: greys printed over a pale tint of the brand colour by the filter
   the footer carries. */
[data-pictures="mono"] :is(.hero-img, .pic-shot, .figs-img, .person-img) { filter: url(#look-tone); }
[data-pictures="mono"] :is(.pic-shot, .figs-img, .strip-img, .slab-img) { border-radius: 0; }
.tone-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tone-defs feFlood { flood-color: color-mix(in srgb, var(--color-primary, #1c5c4a) 32%, #fff); }

/* Motion, small and once. The opening sentence lifts into place, the picture
   of the building comes into focus from a slight enlargement, and rows and
   buttons answer the pointer. Nothing is hidden waiting for a scroll — a page
   captured whole, by a reviewer or a crawler, shows every word — and none of
   it runs for a visitor whose system asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .opening :is(.opening-tag, h1, .opening-lede, .btn) { animation: ledger-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .opening h1 { animation-delay: 0.06s; }
  .opening .opening-lede { animation-delay: 0.16s; }
  .opening .btn { animation-delay: 0.24s; }
  .opening :is(.hero-img, .account-sheet) { animation: ledger-focus 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .btn, .service, .fee-card, .stage, .person { transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
  .btn:hover { transform: translateY(-2px); }
  .service:hover { transform: translateX(6px); }
  :is(.fee-card, .stages-panels .stage, .person):hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem -1.4rem rgb(0 0 0 / 0.4); }
  :is(.pic-shot, .figs-img) { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  :is(.pic-shot, .figs-img):hover { transform: scale(1.015); }
}
@keyframes ledger-rise { from { opacity: 0; transform: translateY(1.2rem); } }
@keyframes ledger-focus { from { opacity: 0.55; transform: scale(1.05); filter: blur(3px); } }