/* Design tokens — authored against design-system.md, which is the reference system
   for this site. This file was seeded from an Elementor export (templates/global.json);
   that kit is reference-only and is no longer the source of any value below. */

:root {
  /* ── Colour ────────────────────────────────────────────────────────────────
     PALETTE B, graphite and brass. Chosen 2026-09-03. The candidate tables, the
     selection rationale and the recorded dissent live in design-system.md, which does
     not ship. Do not restate them here: this file is served to the public, and a CSS
     comment is published text that view-source reads.

     Every ratio below is computed from sRGB relative luminance. Every alpha token is
     composited against its actual ground before measuring, because an rgba() value has
     no contrast ratio of its own. Nothing here is sampled from a screenshot. */
  --color-primary: #FFFFFF;              /* card / page surface */
  --color-background: #F4F3F0;           /* alternate light canvas ("bone") */
  --color-text: #202426;                 /* body — 15.65:1 on white, 14.10:1 on bone */
  --color-text-muted: #53595D;           /* eyebrows, captions — 7.11:1 on white, 6.40:1 on bone */
  --color-accent: #262A2C;               /* deepest ink — inline emphasis, 14.48:1 on white */
  --color-canvas-dark: #1C1F21;          /* dark canvas — white text 16.57:1 */
  --color-ink-deep: #111314;             /* footer / deepest ground — white text 18.63:1 */
  --color-text-on-dark: rgba(255, 255, 255, 0.72);
  --color-text-muted-on-dark: #ADB3B7;   /* 7.82:1 on canvas-dark */

  /* The accent. Brass, and rationed.

     The old rule was mechanical: micro-surfaces only, nothing larger than 40x40. That
     went with the rest of the reference-derived system on 2026-09-02. It is now a
     judgment, and in practice the accent still appears only on 6px squares, the arrow
     tile, hover and focus states, and one actor label. Its power is still scarcity. What
     changed is that a component may spend it where the component's own logic calls for
     it and be judged on the result, rather than against a pixel dimension.

     Brass is the one warm value in an otherwise neutral system, so it reads as placed
     wherever it lands. That is the reason to keep spending it sparingly, and it is a
     better reason than the size rule ever was. */
  --color-secondary: #C79A4E;            /* 6.44:1 on canvas-dark, 7.24:1 on ink-deep */
  --color-secondary-on-light: #7A5B1F;   /* same hue, AA on light — 6.28:1 on white */

  /* Hairline borders — derived from the text colour, no new hues.
     Depth is surface contrast + 1px hairlines.

     SHADOWS. The old system forbade them anywhere. The replacement permits them, and
     after this re-skin nothing uses one, which is a decision rather than an oversight:
     this palette's grounds are close in value (paper #FFFFFF, bone #F4F3F0, then a jump
     to #1C1F21), so a boundary between two light surfaces has to be drawn rather than
     implied, and a hairline draws it at a known contrast ratio while a shadow draws it
     at whatever the blur happens to produce. A soft drop shadow under a graphite card is
     also the single most generic gesture available on a page like this. No house shadow
     token is defined. If one is ever wanted, define it here with its measured edge
     contrast rather than adding box-shadow at a call site. */
  --color-hairline: rgba(32, 36, 38, 0.14);
  --color-hairline-strong: rgba(32, 36, 38, 0.35);
  --color-hairline-on-dark: rgba(255, 255, 255, 0.18);

  /* The resting boundary of an interactive control — a form field, a ghost
     button. Deliberately NOT one of the hairlines above: WCAG SC 1.4.11 asks
     3:1 of anything that identifies a component's boundary, and the hairlines
     are decorative values that measure 1.32:1 and 2.12:1 on white. Where a
     control's border is the only thing saying where the control begins, it has
     to be this token. It composites to #797C7D on white for 4.21:1, and to
     #757777 on the bone canvas for 4.06:1. */
  --color-border-control: rgba(32, 36, 38, 0.60);

  /* The same role on a dark ground. Every other role in this file is paired
     light/dark (--color-text, --color-text-muted, --color-hairline); this one
     was not, and the gap showed: two ghost buttons carried 1.77:1 boundaries
     while the identical component on light carried 3.55:1.

     Same alpha as its light-side sibling, deliberately — the pair is one
     decision applied to two grounds, and keeping the numbers equal is what
     makes that visible to whoever reads this next.

     Was 0.40 under the old palette. That measured 3.65:1 against --color-canvas-dark
     and passed, but the binding ground is not canvas-dark: .hero-canvas and
     .page-header::before both open on a gradient stop lighter than any flat ground
     here, and against that the border was 3.06:1 — 0.06 over the SC 1.4.11 floor,
     which is a rounding error, not a margin. 0.60 survived the re-skin unchanged.
     On palette B it measures 5.27:1 on the #373A3C gradient stop, 6.21:1 on
     --color-accent, 6.72:1 on --color-canvas-dark and 7.19:1 on --color-ink-deep.
     Drawn by .nav-toggle, .btn-nav, .btn-arrow and every dark-ground .btn-secondary.

     --color-hairline-on-dark stays at 0.18 for the dividers and container edges
     it correctly serves, exactly as --color-hairline does on the light side. */
  --color-border-control-on-dark: rgba(255, 255, 255, 0.60);

  /* ── Typography ────────────────────────────────────────────────────────────
     TWO WEIGHTS: 400 and 600. The single-weight rule was dropped with the rest of
     the reference-derived system on 2026-09-02 (Direction B). It was the reason
     size had to carry all the hierarchy, which is how a nav label ended up in a
     104px display slot while the sentence identifying the business sat at 20px.
     600 is rationed: the wordmark today, and whatever the replacement design
     system sanctions next. It is not a general-purpose emphasis weight, and
     `strong` still takes colour rather than weight.
     The Google Fonts request in each page head loads 400 and 600 and nothing
     else, so a stray `font-weight: 700` still has nothing to resolve to. Keep
     the load range and this rule in sync. */
  --font-heading: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-button: var(--font-mono);

  /* Type scale — sized against the hero's COLUMN, not the viewport.
     .hero-content is a 1fr 1fr grid sharing space with the SVG illustration, so the
     headline only ever has ~552px at container max-width. The previous 9vw / 132px
     ceiling was sized as though the hero were full-bleed, which overflowed the column. */
  /* 104 -> 80 -> 60. The ceiling came from the reference, which set a 158px hero
     over commissioned artwork and almost no running prose. This site has a great
     deal of prose and an H1 that names the work rather than sloganeering, and at
     80px it still took half the fold on a laptop. 60px is set to a constraint
     rather than to a number: the H1, the subhead and the trust bullets share the
     fold at 1440x900. Measured, not asserted. */
  --text-display: clamp(34px, 4.1vw, 60px);
  --text-display-line: 1.04;
  --text-h2: clamp(28px, 3.4vw, 52px);
  --text-h2-line: 1.12;

  /* Utility face — nav, buttons, labels, counters, metadata */
  --text-h3: 24px;
  --text-h3-line: 1.24;
  --text-h4: 20px;
  --text-h4-line: 1.5;
  --text-body: 16px;
  --text-body-line: 1.5;
  --text-small: 14px;
  --text-small-line: 1.45;
  --text-mono: 13px;
  --text-mono-lg: 14px;

  /* Two carve-outs, both deliberate, neither a general size.
     The 404 numeral is decorative and oversized on purpose; folding it into
     --text-display would lose that. The custody diagram's signature step is the
     one element that whole component elevates by size, which is the only
     hierarchy device this system allows, so flattening it into --text-h3 would
     undo the custody hierarchy it exists to express. */
  --text-error-code: clamp(80px, 14vw, 120px);
  --text-signature: clamp(23px, 2.4vw, 32px);

  /* Tracking — negative, scaling with size. Large type left at default tracking is what
     makes big headlines read loose and unresolved. Labels/caps track positive. */
  --tracking-display: -0.025em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.006em;
  --tracking-body: -0.001em;
  --tracking-label: 0.06em;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* ── Radius ────────────────────────────────────────────────────────────────
     Re-derived 2026-09-03, one of three conditions on the re-skin build. The set came
     from the reference and had never been examined. What that turned up:

       - --radius-pill (9999px) was declared and referenced ZERO times. Nothing on this
         site is a pill. It is gone. The four remaining `9999px` in this file are all
         `left: -9999px` visually-hidden positioning, which is unrelated.
       - Two values sat off the scale entirely: 9px on .nav-menu a (one pixel off
         --radius-sm, which is an accident rather than a decision) and 16px on
         .modal-card (which is exactly --radius-md, written as a literal). Both now
         reference the token.

     --radius-lg (40px) and --radius-canvas (28px) BOTH STAY, and the reason is
     recorded rather than assumed. They are 12px apart, which is close enough to look
     like a redundant step in a scale. They are not: canvas is the page-scale radius on
     the two full-bleed dark grounds (.hero-canvas, .page-header) where the corner is
     read against the viewport, and lg is the card radius on .about-graphic,
     .pricing-card and .module-placeholder where it is read against a 40px-padded card.
     The two never appear adjacent, so no reader ever compares them, which means
     collapsing them would buy nothing and would shrink every card corner — a shape
     change this build was not asked to make. */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 40px;
  --radius-canvas: 28px;

  /* ── Container ─────────────────────────────────────────────────────────────
     Re-derived 2026-09-03, the second condition. 1200px came from the reference.
     Measured at 1440x900 on the built homepage, what actually constrains it:

       - The header sets a FLOOR. Logo 205px, nav menu 687px, CTA 149px, with 16px
         minimum gaps, is 1073px of content. Plus 2x16px container padding, the header
         wraps below about 1105px. Today it renders with 95px of slack, so 1200 is not
         tight, but nothing narrower than ~1105 works without cutting a nav item.
       - Nothing sets a CEILING. Body prose is capped independently at 68ch, which
         measures 628px in the body face at 16px, so line length is governed by that cap
         and not by this width at any container size.

     So 1200px is a CHOICE inside a band, not a derived value, and this comment says so
     rather than dressing it up. It is kept because the band is wide, the header is the
     only real constraint, and changing it would move every grid on the site for no
     measured reason. Anyone narrowing it below 1105px has to deal with the header. */
  --container-width: 1200px;
  --container-padding: 1rem;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Text (text) - Inter 400, 16px, line-height 24px */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background);
  letter-spacing: 0;
  word-spacing: 0;
}

/* Container */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ── Typography ──────────────────────────────────────────────────────────────
   Every heading is weight 400. Hierarchy is size + tracking, never weight.
   Tracking goes more negative as size grows — large type left at default
   tracking is what makes big headlines read loose and unresolved. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  font-weight: 400;
  word-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--text-display-line);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  letter-spacing: var(--tracking-h3);
}

h4 {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  letter-spacing: var(--tracking-h3);
}

h5 {
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  letter-spacing: var(--tracking-h3);
}

/* Body metrics are deliberately left at 16px/24px: this site carries far longer
   prose than the reference does, and its 1.3 body leading is sized for marketing
   blocks, not multi-sentence legal writing. Sizes and tracking follow the
   reference; body leading does not. */
p, body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
  word-spacing: 0;
}

p { text-wrap: pretty; }

/* The global `* { margin: 0 }` reset left consecutive paragraphs touching, and
   only four scoped rules put it back. On a site written to be cross-examined,
   paragraph breaks carry the structure of the argument — losing them costs
   comprehension, not polish. */
p + p {
  margin-top: var(--spacing-sm);
}

/* Same reset left every heading with no space above it, so a run-in subhead sat
   flush against the paragraph it was separating from. Most visible on
   Methodology's "Built to fail toward review", where four subheads and their
   paragraphs ran together as one block. */
:where(p, ul, ol, figure, .disclaimer-text) + :where(h2, h3, h4, h5) {
  margin-top: var(--spacing-md);
}

/* A call to action following body copy. Same idea as the rule above, and the same
   value, because a button after a paragraph is the same kind of break as a heading
   after one.

   Measured at 1440px before this rule existed: ten CTAs across five pages sat at a
   0px gap from the paragraph or list above them, while the ones that looked right
   were at 32px. Nothing was styling either case. The 32px came from the container
   giving its own paragraphs a `margin-bottom` (.about-text, .app-text, .reports-text
   do; .module-text, .service-card, .ai-workflow-text, .ai-workflow-content and
   .cta-content do not), so the spacing under a CTA was an accident of which container
   it landed in.

   SCOPED ON PURPOSE, and this is the part not to "simplify". Written unscoped it would
   also apply in the containers whose paragraphs already carry a bottom margin, and
   those margins do not collapse against an inline-level button, so every one of the
   working 32px gaps would become 64px. The list is the set of containers that own no
   paragraph margin. A new container with the same shape needs adding here, or better,
   needs to stop setting paragraph margins at the container level at all — that is the
   real fix and it is a wider refactor than this one. */
:where(.module-text, .service-card, .ai-workflow-text, .ai-workflow-content, .cta-content)
  :where(p, ul, ol) + :where(a, button).btn {
  margin-top: var(--spacing-md);
}

/* In-prose links had no rule at all and fell through to the UA's #0000EE —
   the single most off-system colour on the pages carrying the most prose.
   6.28:1 on white, 5.66:1 on bone. */
:where(main p, main li) a {
  color: var(--color-secondary-on-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(main p, main li) a:hover {
  color: var(--color-accent);
}

/* Same links on a dark canvas. */
:where(.hero, .how-it-works, .cta, .contact-section, .page-header) :where(p, li) a {
  color: var(--color-secondary);
}

/* Emphasis is carried by the UTILITY FACE, not by weight and not by colour.

   Colour alone was measured at 1.13:1 against body text under the old palette and
   is 1.08:1 under this one — not a perceptible distinction at either, so the
   run-in labels read as ordinary prose. Weight and
   italic are both out: one weight is the identity of this system. What is left
   is the face, and the reference is explicit that the mono face is what carries
   "nav, buttons, labels, counters, and metadata."

   Every <strong> on this site is doing one of exactly two jobs, and mono is the
   right answer to both:
     - a run-in label at the head of a paragraph or list item ("What we are.",
       "Valid encounter.", "Coder review queue:") — 21 of them, which is a label
       by any reading;
     - a clinical term quoted as a word rather than used ("negated", "resolved",
       "history-of") — 5 of them, where the monospace convention for a term-being-
       mentioned is more accurate than bold ever was.

   TWO signals do the work here, not three: FACE and SIZE. The `color` below is
   --color-accent against body --color-text, which measures 1.08:1 — it is not a
   perceptible distinction and it is not what makes this read. It is set for
   consistency with the ink used elsewhere, nothing more. Anyone tempted to
   "simplify" by dropping the mono face on the belief that colour is carrying
   part of the load would reintroduce exactly the bug this rule replaced.

   0.94em is an optical match, not a round number: Roboto Mono sets wider than
   Inter Tight but with a smaller x-height, so at 1em it looks bigger and at
   0.9em it looks smaller than the prose it sits inside. */
:where(strong, b) {
  font-weight: inherit;
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0.01em;
  color: var(--color-accent);
}

/* <em> is stress emphasis — prosody, not labelling. Italic is out, weight is
   out, and underline is already spoken for by in-prose links.

   One device does survive all that: letterspacing. The system has the vocabulary
   for it (--tracking-label, and design-system.md's "size and tracking only"), and
   sperrsatz is the historical answer to exactly this problem. It is deliberately
   not used, for a different reason: an emphasis device needs repetition to read
   as intentional, and the site has ONE instance of stress emphasis in running
   prose. Used once, spaced-out lettering reads as a rendering fault rather than
   as stress. So <em> takes no treatment; it stays marked in the markup, where
   assistive tech still announces it.

   Every other <em> on the site wraps a whole disclaimer block, which is set apart
   by its own rule and muted colour instead. If the single running-prose instance
   ever needs to carry weight, the fix is the sentence, not the type. */
:where(em, i) {
  font-style: normal;
}

/* On a dark ground the ink colour would disappear; the labels take the canvas's
   own light value there. */
:where(.hero, .how-it-works, .cta, .contact-section, .page-header) :where(strong, b) {
  color: var(--color-primary);
}

/* Every disclaimer on the site wraps its text in <em>, and the rule above set
   colour directly — so it beat the inherited muted colour and the disclaimers
   rendered at full ink, promoting the very notes meant to be set apart. It
   would also have been 1.24:1 had a disclaimer ever landed on a dark canvas. */
/* A disclaimer is already set apart as a whole block, by a rule above it and a
   muted colour. Anything inside it stays in that one voice rather than taking
   the label treatment and promoting the very note meant to be quiet. */
.disclaimer-text :where(em, i, strong, b) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.big-text {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  font-weight: 400;
  letter-spacing: var(--tracking-body);
}

/* Utility face — the "instrumentation bench" character. Carries eyebrows,
   labels, counters and metadata everywhere on the site.
   (`.small-text`, an Elementor global with no markup using it, removed here.) */
.section-eyebrow,
.hero-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  word-spacing: 0;
}

/* Header & Navigation — floating pill bar over the hero canvas.
   Flat by design: no shadow anywhere. Separation comes from the pill surfaces
   themselves and 1px hairlines. See design-system.md → "Shape & depth". */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
}

.nav {
  padding: 20px 0;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Logo sits in its own light pill, as in the reference */
.logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The white pill is gone (owner, 2026-09-04). The mark and wordmark now sit directly
     on the header, which is safe at every scroll position because this header is never
     over a light ground: .header is `background: transparent` above the dark hero and
     page-header, and .header.is-stuck paints its own dark scrim. So the logo is drawn
     light-on-dark and stays legible throughout.

     Padding is kept for the tap target and pulled back out with a negative margin, so the
     glyph optically aligns to the container edge the way the pill used to while the hit
     area stays the size it was. */
  padding: 12px 18px;
  margin-left: -18px;
}

/* The mark, added 2026-09-04 from the supplied logo. Rebuilt as inline SVG rather
   than dropped in as the raster: it is five rectangles, so the vector is smaller than
   the PNG, stays sharp at every DPI, costs no request, and recolours itself if the
   palette ever moves to candidate A. .logo-link was already `inline-flex` with a 10px
   gap, so the mark slots in beside the wordmark with no layout change.

   Sized against the wordmark at each of its three tiers (19 / 14 / 13px), not set once
   and left to drift. The two smaller values are in the 768px and 430px blocks below.

   Colour: the bracket is --color-secondary, the full-strength brass, which measures
   2.57:1 on the white logo pill. That is below the 3:1 SC 1.4.11 asks of a graphical
   object, and it is allowed here for one specific reason rather than by oversight —
   1.4.11 exempts logotypes, and this is the brand mark. The wordmark beside it carries
   the identity at 14.48:1, so nothing about the header depends on reading the bracket.
   Do NOT copy this value to any non-logo surface; --color-secondary-on-light exists for
   that and reaches 6.28:1.

   The wordmark stays ONE colour. The supplied logo sets "aud" in brass, which would
   need the name split into two elements, and the name is a token: brand.config.json
   still governs it and the trademark search is pending, so a hardcoded split would
   break the revert that ROUTED-REQUESTS.md records as a four-value config edit. The
   brass lives in the mark until the name is final. */
.logo-mark {
  height: 26px;
  width: 23px;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
}

/* Stroke, not fill: the second artwork is line art. Inverted for the dark ground —
   the ink strokes are white (11.46:1 against the lightest gradient stop the header can
   sit over) and the bracket stays brass (4.45:1 there, and over the 3:1 floor even
   though a logotype is exempt from it). */
.logo-mark__ink { stroke: var(--color-primary); }
.logo-mark__accent { stroke: var(--color-secondary); }

.logo-text {
  font-size: 19px;
  margin: 0;
  color: var(--color-accent);
  /* The first use of the second weight. Verified to fit the header on one row at
     1440px for both "Chartaud" and the longer "Missing Legal Finder", since the
     rename is unstaged and either name can be the one that ships. */
  /* Matched to the supplied artwork's Variation 1 (the tighter of the two): light weight,
     open tracking. Was 600 / -0.015em, which was the header's own type rather than the
     logo's. 400 is the lighter of the two weights the font request loads. */
  font-weight: 400;
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}

/* The wordmark and the tagline stack, with the mark to their left. flex-column rather
   than two block elements so the 3px gap is the only thing setting their separation and
   neither carries a margin that the other has to cancel. */
.logo-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* The tagline from the supplied lockup, and the one place the artwork's proportions do
   not survive the header.

   In the artwork the tagline is narrower than the wordmark and sits inset under it. It
   cannot be that here. Measured in this font: "RISK ADJUSTMENT CHART REVIEW" is 177px at
   9px/0.14em, and the wordmark is 84px at its 19px tier. To reproduce the artwork's
   proportion the wordmark would have to be set around 40px, which is a different header.
   So the tagline overhangs the wordmark by design and the block is sized by the tagline.

   9px is the floor, not a preference. Below it the tracked capitals close up; above it
   the block stops fitting beside the nav. It is set in sentence case and uppercased here
   so the markup holds words rather than shouting.

   Hidden below 1200px, and that number is measured rather than chosen: the nav bar has
   165px of slack at 1200px and above (the container stops growing there), 46px at 1081px,
   and the tagline costs about 60px. It fits in the first case and overflows in the second.
   Showing it below 1200px would move the 1080px nav collapse up, which is a nav change and
   not one this asked for.

   aria-hidden: the link's accessible name stays "Chartaud" at every width. Without it the
   name would change when the tagline hides, so the same link would announce differently on
   a laptop and a phone.

   Colour: the lead takes --color-text-muted-on-dark (7.82:1 on --color-canvas-dark) rather
   than the wordmark's full white, so the tagline reads as secondary to the name. The tail
   is --color-secondary, mirroring the wordmark's own split and the artwork's. That brass
   measures 4.45:1 against the lightest gradient stop this header sits over, just under the
   4.5:1 SC 1.4.3 asks of small text — allowed here because 1.4.3 exempts text that is part
   of a logo, and this is the lockup's own tagline. No new token was invented for it; if a
   lighter brass is wanted for small text on dark, that is a design-system decision. */
.logo-tagline {
  display: none;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-tagline__lead { color: var(--color-text-muted-on-dark); }
.logo-tagline__tail { color: var(--color-secondary); }

@media (min-width: 1200px) {
  .logo-tagline { display: block; }
}

/* The two-tone wordmark. The split is driven by BRAND_NAME_LEAD / BRAND_NAME_TAIL in
   brand.config.json rather than hardcoded, because the name is not final: the trademark
   search is pending and ROUTED-REQUESTS.md records the revert as a config edit. To go
   back to a single-tone name, set LEAD to the whole name and TAIL to an empty string and
   nothing here needs touching. */
.logo-text__lead { color: var(--color-primary); }
.logo-text__tail { color: var(--color-secondary); }

/* Sticky variant once the hero has scrolled past. Kept per the owner's
   2026-09-02 call — see design-system.md → Adaptation. Depth here is the
   system's own: a translucent dark ground and one horizontal hairline.
   No shadow, which was the condition of keeping it. */
.header.is-stuck {
  position: fixed;
  /* Was rgba(8, 41, 44, 0.92) — #08292C, the retired teal canvas-dark. Missed by the
     2026-09-03 re-skin because it is written in decimal rgb rather than as a hex
     literal, so the sweep for old hex values did not see it. This is
     --color-canvas-dark #1C1F21 at the same alpha. */
  background: rgba(28, 31, 33, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-hairline-on-dark);
}

.nav { position: relative; }

/* ── Mobile nav toggle ───────────────────────────────────────────────────────
   This block MUST stay above the 768px media query that shows it. It used to
   sit at the end of the file; media queries add no specificity, so a later
   `display: none` beat the media block's `display: inline-grid` at every width
   and the hamburger never appeared. Below 768px that left the whole nav
   unreachable — the markup and nav.js were both fine, only the cascade was not. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  gap: 5px;
  align-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--color-border-control-on-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  width: 18px;
  height: 1.5px;
  background: var(--color-primary);
  display: block;
  transition: transform .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-3px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

.footer-email {
  margin: 8px 0;
}

.footer-entity {
  margin: 8px 0;
  font-size: var(--text-small);
  line-height: var(--text-small-line);
  color: var(--color-text-muted-on-dark);
}

/* --color-accent on the footer ground is 1.29:1 — and was 1.00:1, invisible,
   back when the footer shared that same value. This is the only contact address
   on the site, on every page. --color-text-on-dark is 9.89:1. */
.footer-email a {
  color: var(--color-text-on-dark);
  text-decoration: none;
}

.footer-email a:hover {
  text-decoration: underline;
}


/* ── Hero lower block and the chart-note artifact ────────────────────────────
   The headline stays full width; everything under it splits two ways, so the
   artifact fills the lower right without squeezing the display type into a
   narrow column.

   The artifact is a real finding on a fabricated chart, not a drawing of one.
   It replaces nothing: the hero had no figure at all, because the reference
   composition this hero came from assumed artwork on the right and the artwork
   was substituted away to two body-section SVGs. Authored in HTML so the text
   is selectable and re-skins with the tokens.

   Contrast on the white card: body #202426 is 15.65:1, labels #53595D are
   7.11:1 on white and 6.40:1 on the #F4F3F0 evidence ground. */
.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-lg);
  align-items: center;
}

.chart-note {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  background: var(--color-primary);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

/* On the face of the artifact, not in a footnote. */
.chart-note__stamp {
  margin: 0 0 var(--spacing-sm);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.chart-note__label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.chart-note__field { margin-bottom: var(--spacing-sm); }

.chart-note__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-h4);
  color: var(--color-text);
}

.chart-note__desc {
  margin: 4px 0 0;
  font-size: var(--text-small);
  line-height: var(--text-small-line);
  color: var(--color-text);
}

.chart-note__evidence {
  margin-bottom: var(--spacing-sm);
  padding: 14px 16px;
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.chart-note__evidence blockquote {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text);
}

.chart-note__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-hairline);
}

.chart-note__meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.chart-note__meta dd {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  color: var(--color-text);
}

/* A 6px square, the same micro-surface the hero eyebrow and the custody
   signature step use. The accent fills nothing larger anywhere on the site. */
.chart-note__mark {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--color-secondary-on-light);
}

.chart-note figcaption {
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--text-small);
  line-height: var(--text-small-line);
  color: var(--color-text-muted);
}

@media (max-width: 1080px) {
  .hero-lower { grid-template-columns: 1fr; }
  .chart-note { justify-self: start; max-width: 460px; }
}

/* ── Inner-page header ───────────────────────────────────────────────────────
   The same dark canvas and left-aligned display type as the homepage hero, so
   the four interior pages read as the same site — the hero now uses the same
   static field, so the two are the same treatment at different scale rather
   than a loud version and a quiet one.
   Was a centred light block with a bare <h1>, which inherited a 600 weight from
   the global heading rule and rendered as synthetic bold at display size. */
.page-header {
  position: relative;
  isolation: isolate;
  padding: 200px 0 var(--spacing-xl);
  background: var(--color-canvas-dark);
  border-radius: var(--radius-canvas);
  overflow: hidden;
  color: var(--color-primary);
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 100% at 12% 0%, #373A3C 0%, #1C1F21 52%, #111314 100%);
}

.page-header > .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  max-width: 20ch;
}

.page-header .big-text {
  color: var(--color-text-on-dark);
  max-width: 62ch;
  margin-bottom: 0;
}

/* Eyebrow above the page title — same mono + 6px accent dot as the hero. */
.page-header .section-eyebrow {
  color: var(--color-text-on-dark);
}

.page-header .section-eyebrow .hero-dot {
  background: var(--color-secondary);
}

@media (max-width: 768px) {
  .page-header {
    border-radius: 0;
    padding-top: 148px;
  }
}

/* ── Surface rhythm after the page header ────────────────────────────────────
   Depth in this system is surface contrast, so two adjacent sections must not
   share a ground. Making the page header dark changed what follows it on two
   pages; these three rules restore the alternation rather than recolouring the
   sections globally (they sit differently on the homepage).

   how-it-works.html opens with a dark section directly under a dark header —
   rather than fight it, the two are merged into one continuous dark block and
   the header drops its bottom radius so the seam disappears. */
.page-header:has(+ .how-it-works) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  padding-bottom: var(--spacing-lg);
}

/* The header's field lands on --color-ink-deep at its bottom edge, so the
   section below continues from that value rather than from --color-canvas-dark;
   otherwise the merge shows a seam where the two grounds meet. */
.page-header + .how-it-works {
  padding-top: 0;
  background: var(--color-ink-deep);
}

/* engagement.html and how-it-works.html: a bone section landing next to another
   bone section. Both selectors are specific enough to win over the single-class
   rules further down the file without depending on source order. */
.page-header + .ai-workflow,
.ai-workflow + .services {
  background: var(--color-primary);
}

/* Interior pages are left-aligned throughout, like the hero. Several shared
   section headers are centre-aligned because the homepage uses them that way;
   scoping by `.page-header ~` applies the interior treatment without changing
   the homepage, which is not in scope here. Centred display type next to
   left-aligned display type on the same page is the inconsistency this removes. */
.page-header ~ * :is(.ai-workflow-content, .how-it-works-header, .scoring-header, .services-text) {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.page-header ~ * .ai-workflow-content {
  max-width: 68ch;
  margin-left: 0;
}

.page-header ~ * :is(.ai-features-list, .module-features) {
  max-width: 68ch;
  margin-left: 0;
  margin-right: 0;
}

.page-header ~ * :is(.how-it-works-header, .scoring-header) {
  max-width: 68ch;
}

/* Three centred grids the first pass missed, each of which put its own left
   edge 88-134px inside the heading above it. The eye reads a left edge as a
   spine; three spines on one page reads as unfinished. */
.page-header ~ * :is(.services-grid-two, .services-grid-three, .fee-structures-grid.pricing-cards) {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.page-header ~ * .cta-content {
  text-align: left;
  max-width: 68ch;
}

/* methodology.html sets `max-width:800px;margin:0 auto` inline on four blocks;
   an inline style outranks any selector, so those are converted to this class
   in the markup rather than fought with specificity. */
.measure-block {
  max-width: 68ch;
}

.page-header ~ * .measure-block {
  margin-left: 0;
}

/* Nav links live inside one translucent pill, mono uppercase — the reference's
   "instrumentation bench" character. Individual links get their own pill on hover. */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 4px;
  align-items: center;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--color-hairline-on-dark);
  border-radius: var(--radius-md);
  padding: 5px;
  backdrop-filter: saturate(140%) blur(6px);
}

.nav-menu a {
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-mono);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  display: block;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--color-primary);
  color: var(--color-accent);
}

/* ── When the desktop nav actually stops fitting ─────────────────────────────
   The seven-item nav pill needs roughly 1060px alongside the logo and the CTA,
   but the collapse was set at 768px. Between those two widths the nav wrapped to
   three stacked rows and pushed the header down onto the page heading — visible
   across the whole tablet range. The collapse now happens when the nav runs out
   of room, not at an arbitrary phone width. The 768px block repeats these rules
   harmlessly; `.nav-menu.is-open` outranks `.nav-menu` on specificity, so the
   open state survives regardless of source order. */
@media (max-width: 1080px) {
  .nav-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--color-ink-deep);
    border: 1px solid var(--color-hairline-on-dark);
    border-radius: var(--radius-md);
    padding: 8px;
    display: none;
  }

  .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 12px 14px; }
  .nav-toggle { display: inline-grid; }
}

/* Buttons — opposite-surface pairing: dark fill on light sections, light fill on dark
   sections. The accent (--color-secondary) is rationed to hover states and borders only,
   never a primary button fill. */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--font-button);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

/* Hover deepens the ink rather than introducing a second hue. The accent is not
   spent on button fills at this size — see the accent note in the token block. */
.btn-primary:hover {
  background-color: var(--color-ink-deep);
  color: var(--color-primary);
}

.btn:focus-visible {
  outline: 3px solid var(--color-secondary-on-light);
  outline-offset: 2px;
}

/* On dark grounds the brass accent is the higher-contrast choice (5.63:1 on
   --color-accent, 6.44:1 on --color-canvas-dark). */
.hero .btn:focus-visible,
.how-it-works .btn:focus-visible,
.contact-section .btn:focus-visible,
.header .btn:focus-visible,
.arrow-btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  /* Same rule as the form fields: a ghost button's border is its only
     boundary, so it needs the control token, not a hairline. */
  border: 1px solid var(--color-border-control);
}

.btn-secondary:hover {
  border-color: var(--color-secondary-on-light);
  color: var(--color-secondary-on-light);
}

/* Dark-section context: flip fills so the button still pairs against the opposite surface */
.hero .btn-primary,
.how-it-works .btn-primary,
.contact-section .btn-primary,
.page-header .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-accent);
}

/* On a dark canvas the primary button is already the light surface, so hover
   recedes it slightly instead of inverting into a new colour. */
.hero .btn-primary:hover,
.how-it-works .btn-primary:hover,
.contact-section .btn-primary:hover,
.page-header .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.86);
  color: var(--color-accent);
}

.hero .btn-secondary,
.how-it-works .btn-secondary,
.cta .btn-secondary,
.contact-section .btn-secondary,
.page-header .btn-secondary {
  color: var(--color-primary);
  border-color: var(--color-border-control-on-dark);
}

.hero .btn-secondary:hover,
.how-it-works .btn-secondary:hover,
.cta .btn-secondary:hover,
.contact-section .btn-secondary:hover,
.page-header .btn-secondary:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* The contact form is a light "paper" card floating on the dark section — buttons inside
   it sit on a light surface, so they need the light-context treatment, not the dark one. */
.contact-form .btn-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.contact-form .btn-primary:hover {
  background-color: var(--color-ink-deep);
  color: var(--color-primary);
}

.btn-nav {
  background-color: var(--color-ink-deep);
  color: var(--color-primary);
  border: 1px solid var(--color-border-control-on-dark);
  padding: 13px 20px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.btn-nav:hover {
  background-color: var(--color-secondary);
  color: var(--color-accent);
}

.btn-large {
  padding: 16px 32px;
  font-size: var(--text-small);
}

/* Dark sections. Flat by design — depth comes from surface contrast and 1px
   hairlines, never shadow or glow. See design-system.md → "Shape & depth". */
.how-it-works,
.contact-section {
  position: relative;
  border-top: 1px solid var(--color-hairline-on-dark);
}

.hero .container,
.how-it-works .container,
.contact-section .container {
  position: relative;
  z-index: 1;
}

/* Hero Section — dark canvas, the site's one dramatic moment */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  padding: 132px 0 var(--spacing-xl);
  background: var(--color-canvas-dark);
  border-radius: var(--radius-canvas);
  overflow: hidden;
}

/* ── Static canvas ───────────────────────────────────────────────────────
   This was three blurred orbs drifting at 29-41s, a conic sheen and a grain
   overlay. All of it is gone, deliberately.

   The Adaptation table justified that canvas as a stand-in for the reference's
   commissioned 3D render. The reference has no such render and no hero motion
   at all: the source page describes a flat full-bleed ink ground, the live site
   ships no video, canvas or keyframes in its hero, and this repo's own
   design-system.md says "Motion: not specified by the source. Treat as
   near-zero." The substitution stood in for something that was never there.

   Measured before removal: the animation ran correctly at ~4 sRGB units of
   change per second, which is about the amplitude of image dither noise, and
   took 17s to cross half its range. It was not broken. It was invisible.

   If a still hero ever reads as unfinished, bringing motion back is a
   deliberate departure from the reference and belongs in the Adaptation table
   as one — not a repair of this. */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, #373A3C 0%, #1C1F21 46%, #111314 100%);
}

/* The scrim that used to sit here is gone with the orbs it existed for. Its
   own comment recorded the reason: "the warm orb's core drops white text to
   3.94:1". Nothing now moves under the text.

   Nothing but --color-canvas-dark and the gradient below now paints the hero,
   so the lightest ground any hero element can sit on is the gradient's own 0%
   stop, #373A3C — true at every viewport width by construction, not by
   sampling. Against it: headline 11.46:1, description and eyebrow 6.83:1,
   trust bullets 8.77:1, ghost-button border 5.27:1, accent dot 4.45:1, and
   --color-text-muted-on-dark 5.41:1 where .page-header .disclaimer-text lands
   on the same stop. All pass; the headline passes AAA.

   SIX, not five. The disclaimer is easy to miss in this list because it is on
   the interior pages rather than the homepage, but .page-header::before paints
   this same gradient, so it shares the binding ground.

   #373A3C is not a hue picked to sit near #1C1F21. The teal stop it replaces sat
   at 1.4460x the relative luminance of its own canvas-dark; #373A3C sits at
   1.4463x of this one, walked out along the neutral graphite line until the
   luminance matched. The gradient therefore has the same depth as before rather
   than a new one chosen by eye.

   The scrim was worth 0.36:1 on the headline under the old palette, and cost the
   gradient across the two-thirds of the hero the text sits on — it painted the
   gradient's own darkest stop over the gradient.

   #373A3C is the number to watch. Every margin above is measured against that
   stop, so lightening it erodes all of them at once. Ranked by how much headroom
   each actually has over its own floor, the order they fail in is: the page-header
   disclaimer (5.41:1 over 4.5, so 1.20x), the accent dot (4.45:1 over 3.0, 1.48x),
   then the description text (6.83:1 over 4.5, 1.52x). The dot looks like the
   closest call because its number is smallest; it is not. If the stop changes,
   re-measure all six, not just the one that looks closest. */

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 980px;
}

.hero-description,
.hero-trust-bullets { max-width: 54ch; }

/* Eyebrow label above the hero headline */
.hero-label,
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* The accent's only job at this scale: a 6px square. Rationed on purpose. */
.hero-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--color-secondary);
  border-radius: 1px;
}

/* Was var(--color-graphite, #4d5757) — a token this project never defined, so it
   silently fell back to the reference brand's own grey. Replaced with a muted
   drawn from this site's own ink: 7.11:1 on white, 6.40:1 on the bone canvas. */
.section-eyebrow { color: var(--color-text-muted); }
.section-eyebrow .hero-dot { background: var(--color-secondary-on-light); }

.hero-title {
  font-size: var(--text-display);
  line-height: var(--text-display-line);
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-display);
  max-width: 18ch;
  text-wrap: balance;
}

.hero-text {
  position: relative;
}

/* Big Text (084a63d) - Inter 400, 20px, line-height 32px */
.hero-description {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  margin-bottom: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-weight: 400;
  max-width: 560px;
}

.hero-ctas {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: 0;
  flex-wrap: wrap;
}

.hero-trust-bullets {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: var(--spacing-md) 0;
  padding: 0;
  border-top: 1px solid var(--color-hairline-on-dark);
}

/* Hairline-separated rows — depth from rules, not cards */
.hero-trust-bullets .trust-bullet {
  padding: 13px 0;
  border-bottom: 1px solid var(--color-hairline-on-dark);
}

/* The check is drawn, not a text glyph, so screen readers don't announce it */
.hero-trust-bullets .trust-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-color: var(--color-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.trust-bullet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
}

/* Off the type scale on purpose: font-size here sizes the masked check icon's
   box, not text. */
.trust-icon {
  color: var(--color-secondary);
  font-weight: 400;
  font-size: 18px;
}

/* Number Big (39cd22c) - Inter 700, 32px */
/* Number Small (292c6fe) - Poppins 600, 24px, line-height 32px */
.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  min-height: 350px;
}

.about-graphic svg {
  width: 100%;
  height: auto;
  max-width: 300px;
}

/* Captions are the utility face's job in this system, not an italic body face. */

/* ── The per-finding flow ────────────────────────────────────────────────────
   Replaced five equal rounded boxes joined by arrows. That diagram gave no step
   an actor, weighted the negation check the same as the signature, walked one
   code down a straight line through every stage, and ran a "Verdict" box into
   "Coder signs or overrides", which reads as the software deciding and the
   person initialling it.

   Two zones, separated by ground rather than by a rule, which is the device the
   custody diagram already uses. The evidence is a visible object that appears in
   the software zone and arrives again in the coder zone, so it is seen to travel
   rather than asserted to. The signature is terminal and carries the only 600 on
   the page apart from the wordmark.

   Both branches are the same width and neither is weighted. Roughly four in five
   submitted codes are surfaced (BUSINESS-CASE.md:116) and the design is
   deliberately biased toward over-referral (METHODOLOGY-DISCLOSURE.md:77), so a
   fork drawn to imply a filtered-out majority would be false as well as
   unmeasured. The caption says the diagram shows a path and not a proportion.

   Vertical connectors are used here. They were forbidden by the old system's
   horizontal-hairlines-only rule, which went with the rest of it on 2026-09-02. */
.finding-flow {
  margin: 0;
  display: grid;
  gap: 0;
}

.finding-flow__zone {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

/* #202426 on #F4F3F0 is 14.10:1; muted #53595D is 6.40:1. The border is not
   decoration: this component sits on a bone section on the homepage and a white
   one on Methodology, so ground alone cannot draw the zone boundary on both. The
   border does it on the ground it matches, and the connectors need an edge to
   meet or they read as floating. */
.finding-flow__zone--software {
  background: var(--color-background);
  border: 1px solid var(--color-hairline);
  color: var(--color-text);
}

/* White on #262A2C is 14.48:1; muted-on-dark #ADB3B7 is 6.83:1; accent 5.63:1. */
.finding-flow__zone--coder {
  background: var(--color-accent);
  color: var(--color-primary);
}

.finding-flow__zone--none {
  display: grid;
  gap: 10px;
  align-content: start;
  background: var(--color-background);
  color: var(--color-text-muted);
  border: 1px solid var(--color-hairline);
}

.finding-flow__actor {
  margin: 0 0 var(--spacing-sm);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.finding-flow__zone--coder .finding-flow__actor {
  border-bottom-color: var(--color-hairline-on-dark);
  color: var(--color-secondary);
}

.finding-flow__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--spacing-sm);
}

.finding-flow__steps li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 12px;
  align-items: start;
}

.finding-flow__steps p,
.finding-flow__zone--coder p,
.finding-flow__zone--none p {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--text-small-line);
}

.finding-flow__index {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-text-muted);
}

/* The object that travels. Same treatment in both zones on purpose. */
.finding-flow__evidence {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text);
}

.finding-flow__evidence--carried {
  margin: 10px 0;
}

/* The fork. Equal columns, deliberately. */
.finding-flow__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: 28px;
}

.finding-flow__branch {
  position: relative;
  padding-top: 40px;
  display: grid;
  align-content: start;
}

/* Vertical connector up into the software zone. */
.finding-flow__branch::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 1px;
  height: 56px;
  background: var(--color-hairline-strong);
}

.finding-flow__branch-label {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 2px 10px;
  background: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Terminal, and the only place the second weight appears outside the wordmark. */
.finding-flow__signature {
  margin: var(--spacing-sm) 0 0 !important;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-hairline-on-dark);
  font-size: var(--text-h4) !important;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-primary);
}

.finding-flow__disclosure {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--text-small-line);
}

.finding-flow figcaption {
  margin-top: var(--spacing-sm);
  font-size: var(--text-small);
  line-height: var(--text-small-line);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .finding-flow__branches { grid-template-columns: 1fr; gap: 28px; }
  .finding-flow__branch::before { left: 24px; }
  .finding-flow__branch-label { left: 24px; transform: translateX(-50%); }
}

.image-caption {
  text-align: center;
  margin-top: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--text-mono);
  line-height: 1.5;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
}

/* About Section */
.about {
  padding: var(--spacing-xl) 0;
  background: var(--color-primary);
  position: relative;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-image-wrapper,
.about-placeholder {
  min-height: 350px;
}

.about-text h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  margin-bottom: var(--spacing-md);
}

/* Big Text (084a63d) - Inter 400, 20px, line-height 32px */
.about-text p {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
}

.benefits-list {
  list-style: none;
  margin: var(--spacing-md) 0;
  padding: 0;
}

.benefits-list li {
  padding: 14px 0;
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
  font-family: var(--font-body);
}

.benefits-list li:not(:last-child) {
  border-bottom: 1px solid var(--color-hairline);
}

/* A limits/caveat note. Set apart by a horizontal rule above it and a muted
   colour rather than a boxed italic. Hairlines in this system are horizontal
   only — never vertical, doubled, or dashed (design-system.md, "Shape & depth"),
   so this is a top rule, not a left bar. */
.disclaimer-text {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-hairline);
  color: var(--color-text-muted);
  max-width: 68ch;
}

.disclaimer-text small {
  font-size: var(--text-mono-lg);
  line-height: 1.55;
  font-family: var(--font-body);
}

/* Same note on a dark canvas. */
.hero .disclaimer-text,
.how-it-works .disclaimer-text,
.cta .disclaimer-text,
.contact-section .disclaimer-text,
.page-header .disclaimer-text {
  border-top-color: var(--color-hairline-on-dark);
  color: var(--color-text-muted-on-dark);
}

/* Services Section */
.services {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
}

.services-content {
  display: grid;
  gap: var(--spacing-lg);
}

.services-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.services-text h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  margin-bottom: var(--spacing-sm);
}

/* Big Text (084a63d) - Inter 400, 20px, line-height 32px */
.services-text p {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.services-grid-two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1000px;
  margin: var(--spacing-lg) auto 0;
}

.services-grid-three {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin: var(--spacing-lg) auto 0;
}

.service-card {
  background: var(--color-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid var(--color-hairline);
  transition: transform 0.3s, border-color 0.3s;
}

/* No lift on hover. A translateY implies elevation, and this system has no
   elevation — depth is surface contrast and hairlines only. The hairline
   itself carries the state change. */
.service-card:hover {
  border-color: var(--color-secondary-on-light);
}

.service-icon-img {
  width: 56px;
  height: 56px;
  margin-bottom: var(--spacing-sm);
  display: block;
}

/* Heading H4 (e829dcb) - Poppins 600, 24px, line-height 32px */
.service-card h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  font-weight: 400;
  font-family: var(--font-heading);
  margin-bottom: var(--spacing-sm);
}

/* Text (text) - Inter 400, 16px, line-height 24px */
.service-card p {
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
}

/* ── Fee structures ──────────────────────────────────────────────────────────
   Was three separate teal surfaces with a scaled "featured" card — a SaaS
   pricing-table pattern inherited from the Elementor kit. The two structures
   are peers, not a good/better pair, so neither is promoted. Reference rule:
   card = paper on bone, radius 20-40px, padding 40px, no shadow. */
.pricing {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
  color: var(--color-text);
}

.pricing-header {
  max-width: 68ch;
  margin-bottom: var(--spacing-lg);
}

.pricing-header h2 {
  color: var(--color-text);
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* Two-structure variant (Engagement & Fees page) instead of the default three-column grid. */
.fee-structures-grid.pricing-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .fee-structures-grid.pricing-cards {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  background: var(--color-primary);
  border: 1px solid var(--color-hairline);
  padding: 40px;
  border-radius: var(--radius-lg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}

.pricing-card h3 {
  color: var(--color-text);
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  letter-spacing: var(--tracking-h3);
  margin-bottom: var(--spacing-xs);
}

/* Mono metadata line under the structure name — the utility face doing the
   labelling job it does everywhere else on the site. */
.pricing-subtitle {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--spacing-md);
  margin-top: 0;
}

.pricing-best-for {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.pricing-limits {
  margin-top: auto;
  padding-top: var(--spacing-md);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.5;
}

/* Run-in label inside a card. Mono, not a heavier weight. */
.pricing-features h4 {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--spacing-xs);
  margin-top: var(--spacing-md);
}

.pricing-features h4:first-of-type {
  margin-top: 0;
}

.pricing-notes {
  max-width: 68ch;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-hairline);
}

.pricing-notes p {
  margin: var(--spacing-sm) 0;
  color: var(--color-text);
}

.pricing-features ul {
  list-style: none;
  margin-bottom: var(--spacing-md);
}

/* Hairline-separated rows. No glyph bullet: the '✓' here was a text character,
   which screen readers announce, and it was set in a synthetic bold. Depth comes
   from the rule between rows, per the reference's flat depth strategy. */
.pricing-features li {
  padding: 12px 0;
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
}

.pricing-features li:not(:last-child) {
  border-bottom: 1px solid var(--color-hairline);
}

/* How It Works Section — dark canvas; step cards stay light for opposite-surface contrast */
.how-it-works {
  padding: var(--spacing-xl) 0;
  background: var(--color-canvas-dark);
  position: relative;
}

/* AI Workflow Section */
.ai-workflow {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
}

.ai-workflow-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.ai-workflow-text h2 {
  margin-bottom: var(--spacing-md);
}

.ai-features-list {
  list-style: none;
  margin: var(--spacing-lg) 0;
  padding: 0;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Hairline-separated rows, matching every other list on the site. The '✓' that
   was here was a text glyph, which screen readers announce as "check mark"
   before each item, and it spent the accent once per row. */
.ai-features-list li {
  padding: 14px 0;
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
  font-family: var(--font-body);
}

.ai-features-list li:not(:last-child) {
  border-bottom: 1px solid var(--color-hairline);
}

.how-it-works-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.how-it-works-header h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  font-weight: 400;
  font-family: var(--font-heading);
  margin-bottom: var(--spacing-sm);
}

.how-it-works-header .big-text {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  font-family: var(--font-body);
  font-weight: 400;
}

/* The white treatment belongs to the dark canvas, not to the class. It used to
   be unscoped, and methodology.html reuses .how-it-works-header inside LIGHT
   module sections — so four of its section headings were rendering white on
   white (1.00:1) and white on bone (1.06:1). They were invisible on the page
   defence counsel reads hardest. Scoped to the dark section, the light-section
   instances now inherit --color-text correctly. */
.how-it-works .how-it-works-header h2 {
  color: var(--color-primary);
}

.how-it-works .how-it-works-header .big-text {
  color: var(--color-text-on-dark);
}

/* Interior service cards follow the same left-aligned reading order. */
.page-header ~ * .service-card {
  text-align: left;
}

.services-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.how-it-works-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* App Section / What You Get */
.app {
  padding: var(--spacing-xl) 0;
  background: var(--color-background);
}

.what-you-get-list {
  list-style: none;
  margin: var(--spacing-md) 0;
  padding: 0;
  text-align: left;
}

.what-you-get-list li {
  padding: 14px 0;
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
  font-family: var(--font-body);
}

.what-you-get-list li:not(:last-child) {
  border-bottom: 1px solid var(--color-hairline);
}

.app-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

/* Grid items default to min-width:auto, so a track's min-content (its widest unbreakable
   word) can force the grid wider than its container — most visible on a single-column
   section (no second grid item to share the row), like "How We Work With Your Data". */
.app-text {
  min-width: 0;
}

/* Small Text (4b968b2) - Poppins 400, 16px, uppercase */
.app-label {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-secondary-on-light);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
  word-spacing: 0;
}

/* .app-label is also an <h2> (semantically the section's eyebrow label), so it must outrank
   .app-text h2's 56px heading size below — pre-existing specificity collision (0,1,0 vs
   0,1,1) that silently rendered the eyebrow label at 56px instead of 16px, wide enough to
   overflow the layout on narrow viewports. */
.app-text h2.app-label {
  font-size: var(--text-body);
  line-height: normal;
  margin-bottom: var(--spacing-sm);
}

.app-text h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  margin-bottom: var(--spacing-md);
}

/* Text (text) - Inter 400, 16px, line-height 24px */
.app-text p {
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-body);
  font-weight: 400;
}

/* FAQ Section */
.faq-section {
  padding: var(--spacing-xl) 0;
  background: var(--color-primary);
}

.faq-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--color-background);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-hairline);
}

.faq-item h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent);
}

.faq-item p {
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
  margin: 0;
}

/* Testimonials styles removed 2026-09-02 — the only markup that used them is the
   commented-out block in index.html, held until real client feedback exists. The
   set included a 50px accent-filled avatar circle, which broke the reference's
   micro-surfaces-only rule on the accent. Restore from git history if that
   section is ever un-commented, but restyle it to the system first. */

/* Contact / CTA Section — dark closing section; the white form card is the opposite-surface pairing */
.cta {
  padding: var(--spacing-xl) 0;
  background: var(--color-accent);
  color: var(--color-primary);
  position: relative;
}

.contact-section {
  background: var(--color-accent);
  color: var(--color-primary);
}

.contact-content {
  max-width: 800px;
  margin: 0 auto;
}

.contact-text {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.contact-text h2 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.contact-text .big-text {
  color: rgba(255, 255, 255, 0.8);
}

.contact-form {
  background: var(--color-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

/* Honeypot: visually and physically removed from the form for real users; bots still fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile widget spacing */
.cf-turnstile {
  margin-bottom: var(--spacing-md);
}

/* Thank-you modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 36, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
  animation: modal-fade 0.2s ease;
}
.modal-overlay[hidden] {
  display: none;
}
.modal-card {
  position: relative;
  background: var(--color-primary, #fff);
  border-radius: var(--radius-md);
  padding: 40px 32px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-hairline);
  animation: modal-pop 0.25s ease;
}
/* Was a 64px accent-filled circle. Reduced to the system's arrow-button size and
   given the ink treatment; at 40px this is a legal accent surface, at 64px it was
   not. See design-system.md, "Signature". */
.modal-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  color: var(--color-ink-deep);
  display: grid;
  place-items: center;
}
.modal-card h3 {
  font-family: var(--font-heading);
  color: var(--color-text, #202426);
  font-size: 1.5rem;
  margin: 0 0 12px;
}
.modal-card p {
  color: var(--color-text, #202426);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0 0 24px;
}
/* Off the type scale on purpose: this sizes the close glyph, a control, and it
   is not running type. Putting it on --text-h2 would clamp a button against the
   viewport for no reason. */
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text);
  /* Was opacity .5 = 2.77:1, below AA for a control. */
  opacity: 1;
  cursor: pointer;
}
.modal-close:hover {
  color: var(--color-accent);
}
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  /* The fields have no fill of their own on the white form card, so this 1px
     border is the only thing that says where an input begins. It was #6E8A8D
     (3.70:1); replacing that off-token hex with a decorative hairline dropped it
     to 1.96:1 and made the fields near-invisible to a low-vision user on the
     site's one conversion path. */
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  font-family: var(--font-body);
  color: var(--color-text);
  transition: border-color 0.3s;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-secondary-on-light);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Was #dc3545. In a one-accent system a second hue reads as an accident, so the
   message takes the ink and the utility face instead; the invalid border below
   carries the position. */
.field-error {
  display: block;
  color: var(--color-accent);
  font-size: var(--text-mono);
  margin-top: 6px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
}

.form-note {
  color: var(--color-text);
  opacity: 0.75;
  margin: -8px 0 16px;
}

/* Ink rather than a red the palette does not contain. Against the 1px
   --color-hairline-strong resting border this is a clear 3.4x step in weight of
   colour, and it never relies on hue alone — the .field-error text says what is
   wrong, which is what SC 1.4.1 actually asks for. */
.form-group input:invalid:not(:placeholder-shown) {
  border-color: var(--color-accent);
  border-width: 2px;
}

/* The accent on white is 2.57:1 — under the 3:1 that SC 1.4.11 requires of a
   non-text state indicator, and this border is the ONLY signal a field
   passed validation. The AA-safe tone of the same hue is 6.28:1. */
.form-group input:valid:not(:placeholder-shown) {
  border-color: var(--color-secondary-on-light);
}

.form-message {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 400;
}

/* Both states use the ground and the hairline, like every other set-apart note
   here. They were the Bootstrap alert palette — six hues this system does not
   have. `.error` is the state that actually ships (a successful submit opens the
   modal instead), so it is the one that mattered. */
.form-message.success,
.form-message.error {
  background: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
}

/* The error state still has to read as an error without a second hue: the
   utility face and a heavier hairline carry it, the way .disclaimer-text does. */
.form-message.error {
  border-color: var(--color-hairline-strong);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
}

.cta-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-content h2 {
  color: var(--color-primary);
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  margin-bottom: var(--spacing-md);
}

/* Footer takes the deepest ground. It was --color-accent, the same value as
   .cta / .contact-section directly above it, so the closing CTA and the footer
   merged into one dark mass separated only by a hairline — against this file's
   own rule that two adjacent sections must not share a ground. The token block
   already describes --color-ink-deep as the footer ground; now it is. */
.footer {
  background-color: var(--color-ink-deep);
  color: var(--color-primary);
  padding: var(--spacing-xl) 0 var(--spacing-md);
  border-top: 1px solid var(--color-hairline-on-dark);
}

.footer-content {
  display: grid;
  /* Three columns since the Resources column went: it held one live link (FAQ, now in
     Company) and three "(Coming Soon)" spans. A promised-and-missing policy link is a
     flag to a reader who checks representations for a living; an absent one is not. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* Heading H5 (2fecd88) - Inter 600, 20px */
.footer-col h3,
.footer-col h4 {
  color: var(--color-primary);
  font-size: var(--text-h4);
  font-weight: 400;
  font-family: var(--font-body);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0;
  word-spacing: 0;
}

/* Form Text (48f79c8) - Inter 14px, line-height 20px */
.footer-col p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-small);
  line-height: var(--text-small-line);
  font-family: var(--font-body);
  font-weight: 400;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0;
  word-spacing: 0;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: var(--color-primary);
}

/* Shown only when assets/config.js carries no FORM_ENDPOINT. No display property here,
   so the `hidden` attribute keeps working as the toggle. */
.form-unconfigured {
  margin: 0 0 var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  line-height: var(--text-small-line);
  color: var(--color-text);
}

.form-unconfigured a {
  color: var(--color-secondary-on-light);
}

/* With no endpoint the notice above is the whole form. Fields a visitor can fill in
   beside a button that cannot send are the same defect as the inert button below. */
.contact-form.is-unconfigured > :not(.form-unconfigured) {
  display: none;
}

/* Nothing styled :disabled before, so the contact form's submit button rendered
   identical to a live one while being inert. A control that looks ready and does
   nothing is the same class of defect as the form that reported a false success. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.social-links {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.social-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s;
}

.social-links a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.footer-bottom .firewall-disclosure {
  margin: 0 auto 16px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-hairline-on-dark);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-content,
  .about-content,
  .app-content {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid-two,
  .services-grid-three {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: var(--spacing-md);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reports Section */
.reports-section {
  padding: var(--spacing-xl) 0;
  background: var(--color-primary);
}

.reports-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.reports-features {
  list-style: none;
  margin: var(--spacing-md) 0;
  padding: 0;
}

/* The list-separator rule for the whole site, stated here because this is the
   one list that departs from it and the departure is deliberate:

     - rows that wrap to more than one line get 1px hairlines between them
       (.module-features, .ai-features-list, .pricing-features, .benefits-list,
       .what-you-get-list);
     - single-line rows that already open with a mono run-in label get spacing
       alone — the label is doing the separating, and a hairline as well would
       be double-signalling.

   Every row here is single-line and opens with a label, so this list has no
   hairlines. If its content ever grows to wrap, it takes them. */
.reports-features li {
  padding: var(--spacing-sm) 0;
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
}

/* Was two separate rules for the same selector, one setting a 600 weight the
   system does not have. Inline emphasis is handled globally by the face now. */

/* The diagram is 720px of viewBox. Sat in a half-width grid column it rendered
   its 13px labels near 10px; given a min-width instead it was clipped on wide
   screens and whole on small ones, which is backwards. It now takes a full-width
   row beneath the text, where 720px fits inside the 1168px container with room
   to spare and nothing has to scroll. */
/* Below the diagram's own width it scrolls in its own box rather than shrinking
   its labels; the page body still never scrolls sideways. */
.reports-image {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Scoring Section */
/* Paper, so it alternates against the bone fee-structures section above it
   (engagement.html is the only page that uses this section). */
.scoring-section {
  padding: var(--spacing-xl) 0;
  background: var(--color-primary);
}

.scoring-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.scoring-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.scoring-text h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 400;
}

.scoring-text p {
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
}

.scoring-text h3:first-child {
  margin-top: 0;
}

.scoring-images {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.scoring-image-item {
  position: relative;
}

/* Module Sections */
.module-section {
  padding: var(--spacing-xl) 0;
  background: var(--color-primary);
}

.module-section-alt {
  background: var(--color-background);
}

.module-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

/* Was `direction: rtl` on the grid with `direction: ltr` undone on each child —
   a layout hack that inverts the document's text direction to reorder two columns
   and breaks any real RTL localisation. `order` says what was actually meant. */
.module-content-reverse > .module-text {
  order: 2;
}

.module-text {
  position: relative;
}

.module-text h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-line);
  margin-bottom: var(--spacing-sm);
  font-weight: 400;
  font-family: var(--font-heading);
}

.module-text .big-text {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-body);
  font-weight: 400;
}

/* Hairline-separated rows, matching the hero's trust bullets. The previous
   treatment spent an accent-coloured bullet on every item in every list, which
   is precisely the rationing the reference warns about. */
.module-features {
  list-style: none;
  margin: var(--spacing-md) 0;
  padding: 0;
  border-top: 1px solid var(--color-hairline);
}

.module-features li {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--text-body);
  line-height: var(--text-body-line);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
}

/* The pull-quote panel beside each matter type. Was a 2px dashed accent box in
   italic — dashed and doubled borders and italics are all out of the system.
   It is now a quiet card: paper, one hairline, the utility face for the label. */
.module-placeholder {
  align-self: start;
  background: var(--color-primary);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--color-text);
}

.module-placeholder p {
  font-size: var(--text-h4);
  line-height: var(--text-h4-line);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

/* Paper card on the bone section, bone card on the paper section. They were
   each matching their own section exactly, leaving the hairline to carry all
   the separation — half the depth strategy doing all the work. */
.module-section .module-placeholder {
  background: var(--color-background);
}

.module-section-alt .module-placeholder {
  background: var(--color-primary);
}

/* Responsive adjustments for new sections */
@media (max-width: 1024px) {

  .reports-content,
  .scoring-content,
  .module-content {
    grid-template-columns: 1fr;
  }

  .module-content-reverse {
    direction: ltr;
  }
}

@media (max-width: 768px) {

  .nav-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* The nav collapse itself lives in the 1080px block, where it belongs — this
     query is a subset of that one, so repeating it here only created two places
     to edit and one of them would silently win. */
  .logo-text { font-size: var(--text-small); }
  .logo-mark { height: 21px; width: 19px; }
  .nav-content { gap: 10px; }
  .btn-nav { padding: 11px 14px; }

  .btn-nav {
    display: inline-block; /* Keep Request Demo button visible */
  }
  
  .services-grid,
  .pricing-cards {
    grid-template-columns: 1fr;
  }

  .services-grid-two,
  .services-grid-three {
    grid-template-columns: 1fr;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* 404 Page Styles */
/* Left-aligned like every other page header; the centred treatment was the last
   place on the site where a display heading did not share the common spine. */
.error-page {
  padding-bottom: var(--spacing-xl);
}

.error-page .btn {
  margin-top: var(--spacing-md);
}

/* 120px sits in the reference's -0.02em tracking band. It was the one display
   element on the site left at default tracking, which is exactly the failure
   design-system.md calls out. Colour drops to ink: 120px of accent is not a
   micro-surface by any reading. */
.error-code {
  font-size: var(--text-error-code);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  font-weight: 400;
  font-family: var(--font-heading);
  margin-bottom: var(--spacing-sm);
}

/* ── Hero CTAs: filled button + ghost button + the one accent-filled shape ── */
.hero-ctas { align-items: center; gap: 10px; }

.hero .btn-primary {
  background: var(--color-primary);
  color: var(--color-accent);
  border: 1px solid var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
}

.hero .btn-primary:hover { background: transparent; color: var(--color-primary); }

/* Sits beside .btn-primary in the hero CTA row. At the old 1.77:1 it read as
   floating text next to a solid button, which put the row's three controls in
   the wrong visual order — the 40x40 accent arrow, the least important of the
   three, was the most visible. */
.btn-arrow {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border-control-on-dark);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-arrow:hover { border-color: var(--color-primary); }

/* The ONLY shape the accent fills — 40x40, per design-system.md "Signature" */
.arrow-btn {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  background: var(--color-secondary);
  color: var(--color-ink-deep);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform .18s ease;
}

.arrow-btn:hover { transform: translateX(3px); }

/* ── Evidence strip: the relocated chart-note illustration ── */
/* Shorter rhythm than a full section: this is a one-paragraph statement band now,
   and 96px above and below a three-line block reads as an unfinished section
   rather than as calm. */
.evidence-strip { padding: var(--spacing-lg) 0; background: var(--color-primary); }

.evidence-strip__inner {
  display: grid;
  /* One column since the figure went; see the note in index.html. Capped to a
     reading measure so the heading does not stretch across the full 1200px. */
  grid-template-columns: 1fr;
  max-width: 820px;
  gap: var(--spacing-lg);
  align-items: center;
}

.evidence-strip__text h2 { margin-bottom: var(--spacing-sm); }
.evidence-strip__text p { max-width: 52ch; }

@media (max-width: 860px) {
  .evidence-strip__inner { grid-template-columns: 1fr; }
  /* The hero's only responsive rule. There were two, at 768 and 860, and both
     matched on a phone: the 768 one used the `padding` shorthand, so it set the
     bottom to 32px while a later padding-top patched the top back to 148px, and
     its `min-height: auto` computed to 0, which left align-items:center with
     nothing to centre. Longhand only here, and a real min-height. */
  .hero {
    border-radius: 0;
    padding-top: 148px;
    padding-bottom: var(--spacing-lg);
    min-height: min(78vh, 620px);
  }
  .hero-title { max-width: none; }
}

/* No motion for anyone who has asked not to have it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Page canvas: dark ground so the hero's rounded corners read as an inset panel ── */
body { background-color: var(--color-ink-deep); }

/* .page-header was in this list and, being later in the file at equal
   specificity, silently overrode its own --color-canvas-dark. The dark ground
   only rendered because ::before painted over it — an accident waiting to bite
   whoever touched that pseudo-element. */
main, .evidence-strip, .services, .about, .faq-section,
.reports-section, .ai-workflow, .app {
  background-color: var(--color-background);
}

/* ── Single-weight headings — the identity of this system.
   Hierarchy comes from size and tracking, never weight. ── */
h1, h2, h3, h4,
.hero-title, .page-header h1, .module-text h2 {
  font-weight: 400;
  font-family: var(--font-heading);
}

h2 { letter-spacing: var(--tracking-h2); }
h3, h4 { letter-spacing: -0.01em; }

/* Tokens reach the subpages too — these hardcoded 56px values bypassed the scale */
.module-text h2 { font-size: var(--text-h2); line-height: var(--text-h2-line); }

/* Buttons and labels take the utility face */
.btn, .btn-nav, .btn-primary, .btn-secondary { font-family: var(--font-mono); }

/* ── Card padding: the system specifies 40px. --spacing-lg is 64px, which was
   crushing body copy to ~21 characters a line in the step cards. ── */
.service-card,
.pricing-card,
.faq-item,
.contact-form,
.step-card {
  padding: 40px;
}

@media (max-width: 768px) {
  .service-card,
  .pricing-card,
  .faq-item,
  .contact-form,
  .step-card { padding: 24px; }

  .about-graphic { padding: var(--spacing-md); }
}

/* Skip link — there was none; every keyboard user tabbed the whole nav first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ── Custody diagram ─────────────────────────────────────────────────────────
   Who holds the matter at each stage, and what crosses each boundary.

   Replaces .steps-grid / .step-number-circle / .step-connector-line, which drew
   numbered circles in equal boxes. That form says "there are six of these and
   they happen in order" and nothing else. It also gave intake and coder sign-off
   identical weight, which misrepresents the product: the coder pass IS the
   service. Here the coder step is the largest thing on the page and carries the
   only accent surface in the component.

   Bands are separated by GROUND, not by rules. design-system.md permits
   horizontal hairlines only, and a lane diagram naturally wants vertical ones
   between the firm and us columns, so the middle band takes --color-primary
   against the page's --color-background instead. Depth from surface contrast is
   what the system prescribes anyway. */

.custody {
  padding: var(--spacing-xl) 0;
}

.custody__intro {
  max-width: 62ch;
  margin-bottom: var(--spacing-lg);
}

/* Four role tokens, so the same markup is correct on a light page and inside a
   dark section. The first render hard-coded --color-text and the firm bands
   landed at about 1.4:1 against .how-it-works' dark canvas. */
.custody__flow {
  --custody-ink: var(--color-text);
  --custody-muted: var(--color-text-muted);
  --custody-rule: var(--color-hairline);
  --custody-accent: var(--color-secondary-on-light);

  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--custody-rule);
}

/* Dark host section: white text 16.57:1, muted 7.82:1 on --color-canvas-dark. */
.how-it-works .custody__flow,
.cta .custody__flow,
.contact-section .custody__flow {
  --custody-ink: var(--color-primary);
  --custody-muted: var(--color-text-muted-on-dark);
  --custody-rule: var(--color-hairline-on-dark);
  --custody-accent: var(--color-secondary);
}

/* The white band re-sets them for its own ground, so it stays correct wherever
   the flow is placed. Children inherit, so nothing inside needs to know. */
.custody__band--us {
  --custody-ink: var(--color-text);
  --custody-muted: var(--color-text-muted);
  --custody-rule: var(--color-hairline);
  --custody-accent: var(--color-secondary-on-light);
}

.custody__band {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 0 var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--custody-rule);
}

/* The change of ground IS the lane boundary. Full-bleed so the band reads as a
   custody zone rather than as a card sitting on the page. */
.custody__band--us {
  background: var(--color-primary);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: calc(var(--spacing-md) * -1);
  margin-right: calc(var(--spacing-md) * -1);
}

.custody__lane {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--custody-muted);
  margin: 0;
  align-self: start;
  position: sticky;
  top: 96px;
}

.custody__lane span {
  display: block;
  margin-top: var(--spacing-xs);
  text-transform: none;
  letter-spacing: var(--tracking-body);
  font-family: var(--font-body);
  color: var(--custody-muted);
}

.custody__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.custody__step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 var(--spacing-sm);
  padding: var(--spacing-sm) 0;
}

.custody__step + .custody__step {
  border-top: 1px solid var(--custody-rule);
}

.custody__step:first-child { padding-top: 0; }
.custody__step:last-child { padding-bottom: 0; }

/* Plain mono numerals. The circles are gone: a ring around a digit is decoration
   that also competes with the one accent surface below. Numbers stay because a
   partner discussing the method says "step four". */
.custody__index {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  color: var(--custody-muted);
  padding-top: 0.35em;
}

.custody__step h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--text-h3-line);
  letter-spacing: var(--tracking-h3);
  color: var(--custody-ink);
  margin: 0 0 var(--spacing-xs);
}

.custody__step p {
  margin: 0;
  max-width: 58ch;
  color: var(--custody-muted);
}

/* The coder pass is the product. It gets size, which is the only hierarchy
   device this system allows, and the component's single accent surface. */
.custody__step--signature h3 {
  font-size: var(--text-signature);
  line-height: 1.16;
  letter-spacing: var(--tracking-h2);
  color: var(--custody-ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.custody__step--signature p {
  color: var(--custody-ink);
}

.custody__mark {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--custody-accent);
  border-radius: 1px;
  transform: translateY(-0.28em);
}

/* Boundary note: what actually crosses between lanes. */
.custody__cross {
  grid-column: 1 / -1;
  margin: var(--spacing-sm) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--custody-muted);
}

@media (max-width: 900px) {
  .custody__band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm) 0;
  }
  .custody__lane { position: static; }
  .custody__band--us {
    margin-left: calc(var(--spacing-sm) * -1);
    margin-right: calc(var(--spacing-sm) * -1);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

@media (max-width: 560px) {
  .custody__step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xs) 0;
  }
  .custody__index { padding-top: 0; }
  .custody__step h3 { font-size: var(--text-h4); }
}

/* ── Narrow-phone header trim — LAST IN THE FILE ON PURPOSE ──────────────────
   Below ~430px the logo pill, the CTA and the toggle stop fitting on one line.
   Trimming the two text elements buys back most of that range; at 320px the CTA
   still wraps to a second row, which the page header's 148px mobile top padding
   leaves room for. The CTA stays visible rather than being hidden behind the menu.

   Position is load-bearing. This block lived at line 422 and was dead at every
   width: the @media (max-width: 768px) block further down sets .logo-text
   font-size, .nav-content gap and .btn-nav padding at identical specificity, and
   ≤430 is a subset of ≤768, so on a phone both match and the later one wins.
   Media queries add no specificity — only source order separates them.

   Anything added below this block that touches these three properties will
   silently kill it again. Add such rules above, or widen this block. */
@media (max-width: 430px) {
  /* The negative margin that cancels the padding has to track the padding, or the
     glyph is pulled off the left edge of the viewport. 18px above, 12px here. */
  .logo-link { padding: 9px 12px; margin-left: -12px; }
  .logo-text { font-size: 13px; }
  .logo-mark { height: 19px; width: 17px; }
  .btn-nav { padding: 10px 11px; font-size: 12px; }
  .nav-content { gap: 8px; }
}

/* ── Request a Call page (request-a-call.html) and the home CTA band — 2026-10-24 ────────────
   The form moved off the home page so it can ask a few optional questions about the firm's
   practice (never a matter). Rules honoured: no shadows, hairlines draw boundaries, brass only
   on a checked control, focus and one 6px square; mono for labels and step indices; adjacent
   sections never share a ground (dark header → bone section → ink footer). */
.request-section { padding: var(--spacing-xl) 0; background: var(--color-background); }
.request-grid { display: grid; grid-template-columns: 8fr 4fr; gap: var(--spacing-lg); align-items: start; }
.request-card { background: var(--color-primary); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); padding: var(--spacing-lg); min-width: 0; }
.rc-block { padding: 0 0 var(--spacing-md); margin: 0 0 var(--spacing-md); border: 0; border-bottom: 1px solid var(--color-hairline); min-width: 0; }
.rc-block:last-of-type { border-bottom: 0; margin-bottom: 0; }
.rc-block legend { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--text-h3-line); color: var(--color-accent); }
.rc-block legend .idx { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
.rc-block .lead-note { margin: 0 0 var(--spacing-md); font-size: var(--text-small); line-height: var(--text-small-line); color: var(--color-text-muted); max-width: 62ch; }
.rc-field { margin-bottom: 22px; }
.rc-field > label, .rc-field .rc-label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.rc-field .opt { color: var(--color-text-muted); }
.rc-field .help { display: block; margin: -2px 0 8px; font-size: var(--text-small); line-height: var(--text-small-line); color: var(--color-text-muted); max-width: 62ch; }
.rc-field input[type=text], .rc-field input[type=email], .rc-field input[type=tel], .rc-field select, .rc-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border-control); border-radius: var(--radius-sm); background: var(--color-primary);
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.4; color: var(--color-text); }
.rc-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.rc-field textarea { min-height: 96px; resize: vertical; }
.rc-field input:focus-visible, .rc-field select:focus-visible, .rc-field textarea:focus-visible { outline: 3px solid var(--color-secondary-on-light); outline-offset: 2px; }
.rc-choices { display: grid; gap: 8px; }
.rc-choices.cols { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.rc-choice { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-body); line-height: 1.45; color: var(--color-text); cursor: pointer; }
.rc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-choice .box { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 5px; border: 1px solid var(--color-border-control); border-radius: 1px; background: var(--color-primary); }
.rc-choice input:checked + .box { background: var(--color-secondary-on-light); border-color: var(--color-secondary-on-light); }
.rc-choice input:focus-visible + .box { outline: 3px solid var(--color-secondary-on-light); outline-offset: 2px; }
.other-field { margin-top: 10px; }
.other-field[hidden] { display: none; }
.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; }
.rc-privilege { display: flex; align-items: center; gap: 10px; margin: var(--spacing-md) 0 var(--spacing-sm); padding: 14px 16px; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.rc-privilege .sq { width: 6px; height: 6px; flex: 0 0 6px; background: var(--color-secondary-on-light); }
.rc-submit { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.rc-submit .note { font-size: var(--text-small); line-height: var(--text-small-line); color: var(--color-text-muted); }
.request-card .form-unconfigured { margin-bottom: var(--spacing-sm); }
.request-done .section-eyebrow { color: var(--color-text-muted); }
.request-done .section-eyebrow .hero-dot { background: var(--color-secondary-on-light); }
.request-done h2 { font-size: var(--text-h3); line-height: var(--text-h3-line); margin-bottom: var(--spacing-sm); color: var(--color-accent); }
.request-done h2:focus { outline: none; }
.request-done p:not(.section-eyebrow) { margin-bottom: var(--spacing-md); max-width: 62ch; }
.request-done__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.request-rail { position: sticky; top: 96px; border-top: 1px solid var(--color-hairline-strong); }
.request-rail dl { margin: 0; }
.rail-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--color-hairline); }
.rail-row dt { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.rail-row dd { margin: 0; font-size: var(--text-small); line-height: var(--text-small-line); color: var(--color-text); }
.rail-foot { padding-top: 18px; font-size: var(--text-small); line-height: var(--text-small-line); color: var(--color-text-muted); }
.rail-foot a { color: var(--color-secondary-on-light); }
@media (max-width: 960px) {
  .request-grid { grid-template-columns: 1fr; }
  .request-rail { position: static; }
  .request-card { padding: var(--spacing-md); }
  .rail-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Home page CTA band (replaces the on-page form). Same accent ground as the old contact section. */
.contact-band .cta-content { max-width: 760px; margin: 0 auto; text-align: center; }
.contact-band .section-eyebrow { color: var(--color-text-on-dark); justify-content: center; }
.contact-band .section-eyebrow .hero-dot { background: var(--color-secondary); }
.contact-band h2 { color: var(--color-primary); margin-bottom: var(--spacing-sm); }
.contact-band .big-text { color: var(--color-text-on-dark); margin: 0 auto var(--spacing-md); max-width: 62ch; }