/* ==========================================================================
   Cedar & Vale Estate Law — Austin, Texas
   --------------------------------------------------------------------------
   Design intent: a law-review offprint, not a landing page. The body is set
   in a serif — that single decision is what makes this site feel unlike the
   other two Orabeam builds before a reader has registered a colour. Dense
   editorial measure, sections divided by rules rather than boxed into cards,
   corners square, shadows absent. Authority here is claimed by restraint and
   by citation, the way a printed brief claims it.

   Deliberately NOT shared with the other two sites: body face, type ratio,
   spacing step, component idiom, motion. See tasks/orabeam-sites-rebuild-2026.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Typography
     4.  Layout primitives
     5.  Demo ribbon
     6.  Header & navigation
     7.  Buttons & links
     8.  Hero
     9.  Sections: proof strip, problem, approach, services
     10. Calculator
     11. Method & FAQ
     12. Contact & form
     13. Footer
     14. Reveals & motion
     15. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Ink — the near-black is warm, not blue-black; it reads as print. */
  --ink-900: #14181d;
  --ink-800: #1f2933;
  --ink-700: #35414e;
  --ink-600: #4d5a68;
  --ink-500: #64707d;
  --ink-400: #97a1ac;
  --ink-300: #c3cad2;
  --ink-200: #dfe4e9;
  --ink-100: #eef1f4;

  /* Paper — warm off-white. Pure #fff looks cheap at large areas. */
  --paper: #fcfbf9;
  --paper-raised: #ffffff;
  --paper-sunken: #f5f3ef;

  /* Navy — the firm colour. Deep enough to hold white text at 4.5:1+. */
  --navy-900: #0e1b2c;
  --navy-800: #16283f;
  --navy-700: #1e3a5c;
  --navy-600: #2b5183;

  /* Brass — the single accent. Used for rules, marks, and emphasis only.
     Never for body text: it fails contrast on paper. */
  --brass-700: #7d6236;
  --brass-600: #9a7b4f;
  --brass-400: #c4a877;
  --brass-100: #f0e8d8;

  /* Semantic */
  --positive-700: #1f5f47;
  --positive-100: #e4f0ea;
  --caution-700: #7a4a1c;
  --caution-100: #f7ebdd;
  --neutral-700: var(--ink-700);
  --neutral-100: var(--ink-100);
  --danger-700: #8c2f2f;

  /* Type */
  /* The body face is the serif. Inter survives only for things that are
     furniture rather than prose — labels, buttons, table headers, the nav —
     where a serif at 12px turns to mud. */
  --font-display: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype',
    Palatino, Georgia, 'Times New Roman', serif;
  --font-ui: 'Source Serif 4', 'Iowan Old Style', Georgia,
    'Times New Roman', serif;
  --font-meta: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Roughly a minor third (1.22), and it starts higher than a sans scale
     would: Source Serif's x-height is small, so 15px of serif reads smaller
     than 15px of Inter. 17px is the floor for comfortable running text here.
     These values are deliberately not the ones the other two sites use. */
  --t-xs: 0.6875rem;   /* 11 — meta only, always sans */
  --t-sm: 0.8125rem;   /* 13 */
  --t-base: 1rem;      /* 16 */
  --t-md: 1.0625rem;   /* 17 — running text */
  --t-lg: 1.375rem;    /* 22 */
  --t-xl: 1.75rem;     /* 28 */
  --t-2xl: 2.25rem;    /* 36 */
  --t-3xl: 3rem;       /* 48 */
  --t-4xl: 4.25rem;    /* 68 */

  /* Serif at a long measure wants more leading, not less. */
  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-base: 1.68;
  --lh-loose: 1.82;

  /* Space — 8px base, doubling at the top end for section rhythm. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5rem;
  --s-10: 6.5rem;

  /* A narrow column is the point. 32rem of serif is about 68 characters —
     the measure a law review sets to, and much tighter than the other two. */
  --measure: 32rem;
  --shell: 70rem;
  --shell-narrow: 52rem;

  /* Square. A printed page has no rounded corners. */
  --radius-sm: 0;
  --radius: 1px;
  --radius-lg: 2px;

  /* There are no shadows on this site. Ink does not float above paper.
     The tokens survive only so the one sticky element (the header, which
     genuinely does overlap content) has a hairline to fall back on. */
  --lift-1: 0 1px 0 rgba(20, 24, 29, 0.06);
  --lift-2: none;
  --lift-3: none;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: var(--lh-base);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

::selection { background: var(--brass-100); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--navy-800);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: -0.028em; }
h2 { font-size: var(--t-3xl); line-height: var(--lh-snug); letter-spacing: -0.022em; }
h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--t-lg); line-height: var(--lh-snug); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--ink-600);
  max-width: var(--measure);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  font-family: var(--font-meta);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-700);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--brass-400);
}
.eyebrow--on-dark { color: var(--brass-400); }
.eyebrow--on-dark::before { background: var(--brass-600); }

.section-note {
  max-width: var(--measure);
  color: var(--ink-600);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
}

strong { font-weight: 650; color: var(--ink-900); }

abbr[title] { text-decoration: underline dotted; cursor: help; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* A citation to a statute. Small, monospaced, unmistakably a reference. */
.cite {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  color: var(--ink-500);
}
.cite a { color: inherit; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section--sunken { background: var(--paper-sunken); }
.section--ink {
  background: var(--navy-900);
  color: var(--ink-200);
}
.section--ink h2,
.section--ink h3 { color: #fff; }
.section--ink .lede,
.section--ink .section-note { color: rgba(255, 255, 255, 0.72); }

.section__head {
  max-width: 44rem;
  margin-bottom: var(--s-7);
}

.rule {
  border: 0;
  border-top: 1px solid var(--ink-200);
  margin: 0;
}

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-8); }

/* ==========================================================================
   5. DEMO RIBBON
   --------------------------------------------------------------------------
   This site is a demonstration build. Saying so in the first 40px is the
   difference between a portfolio piece and a misrepresentation.
   ========================================================================== */

.demo-ribbon {
  position: relative;
  z-index: 60;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.demo-ribbon__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
}
.demo-ribbon__tag {
  flex: none;
  padding: 0.15rem var(--s-3);
  border: 1px solid var(--brass-600);
  border-radius: 999px;
  color: var(--brass-400);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.demo-ribbon__text { margin: 0; }
.demo-ribbon__close {
  margin-left: auto;
  flex: none;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--t-lg);
  line-height: 1;
  padding: var(--s-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.demo-ribbon__close:hover { color: #fff; }

/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 251, 249, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--ink-200);
  box-shadow: var(--lift-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 4.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark__mark {
  color: var(--brass-600);
  font-size: 1.1em;
  line-height: 0;
  transform: translateY(0.06em);
}
.wordmark__sub {
  font-family: var(--font-meta);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 500;
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__list a:hover {
  color: var(--ink-900);
  border-bottom-color: var(--brass-400);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: var(--ink-800);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before,
.nav-toggle__bar::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -0.35rem; }
.nav-toggle__bar::after { top: 0.35rem; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::before { transform: translateY(0.35rem) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar::after { transform: translateY(-0.35rem) rotate(-45deg); }

.header-cta { flex: none; }

/* ==========================================================================
   7. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  --btn-bd: var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.72rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-meta);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-800);
  --btn-bd: var(--ink-300);
}
.btn--ghost:hover {
  --btn-bg: var(--paper-raised);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--ink-400);
}

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-bd: #fff;
}
.btn--on-dark:hover { --btn-bg: var(--brass-100); --btn-bd: var(--brass-100); }

.btn--lg { padding: 0.95rem 1.85rem; font-size: var(--t-md); }
.btn--block { width: 100%; }

.link-quiet {
  color: var(--navy-700);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-300);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-quiet:hover { color: var(--navy-600); border-bottom-color: var(--brass-400); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--navy-700);
  font-weight: 600;
  font-size: var(--t-base);
  text-decoration: none;
}
.link-arrow::after {
  content: '\2192';
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover::after { transform: translateX(0.2rem); }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--s-10) var(--s-9);
  overflow: hidden;
}
/* A single hairline grid, barely visible. Suggests a document rule, not a
   background pattern. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--ink-100) 1px, transparent 1px);
  background-size: 100% 2.25rem;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-8);
  align-items: center;
}

.hero h1 { margin-bottom: var(--s-5); }
.hero h1 em {
  font-style: normal;
  color: var(--navy-700);
  background-image: linear-gradient(transparent 68%, var(--brass-100) 68%);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.hero__reassure {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-500);
}

/* The hero card restates the calculator's promise in one glance. */
.hero__card {
  background: var(--paper-raised);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  padding: var(--s-6);
}
.hero__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: var(--s-5);
}
.hero__card-title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink-900);
}
.hero__card-tag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-700);
}
.hero__card-list {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.hero__card-list li {
  position: relative;
  padding-left: 2.1rem;
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--ink-700);
}
.hero__card-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brass-600);
  font-weight: 700;
  line-height: 1.5;
}

/* ==========================================================================
   9. PROOF STRIP / PROBLEM / APPROACH / SERVICES
   ========================================================================== */

.proof {
  border-block: 1px solid var(--ink-200);
  background: var(--paper-raised);
  padding-block: var(--s-6);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.proof__item { display: grid; gap: var(--s-2); }
.proof__figure {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--navy-800);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.proof__label {
  font-size: var(--t-base);
  color: var(--ink-700);
  line-height: var(--lh-snug);
  max-width: 22rem;
}
.proof__source {
  font-size: var(--t-xs);
  color: var(--ink-500);
}
.proof__source a { color: inherit; }

/* Data-source disclosure. Every figure on this page traces to one of these. */
.sources {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-200);
  font-size: var(--t-sm);
  color: var(--ink-500);
  line-height: var(--lh-base);
}
.sources__title {
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--s-2);
}
.sources ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-2); }
.sources a { color: var(--ink-600); }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.card--hover:hover {
  box-shadow: var(--lift-2);
  border-color: var(--ink-300);
  transform: translateY(-2px);
}
.card__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brass-700);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-600); font-size: var(--t-base); line-height: var(--lh-loose); }

.card__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-base);
  color: var(--ink-600);
}
.card__list li {
  position: relative;
  padding-left: 1.75rem;
}
.card__list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brass-600);
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-100);
}
.card__price-figure {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--ink-900);
}
.card__price-note { font-size: var(--t-sm); color: var(--ink-500); }

/* The candid pull-quote: the argument the rest of the market won't make. */
.candid {
  border-left: 2px solid var(--brass-600);
  padding-left: var(--s-6);
  max-width: 40rem;
}
.candid p {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  letter-spacing: -0.012em;
}
.candid footer {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-500);
}

/* ==========================================================================
   10. CALCULATOR
   ========================================================================== */

.calc { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: var(--s-7); }

.calc__controls {
  background: var(--paper-raised);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  align-self: start;
  position: sticky;
  top: 6.5rem;
  box-shadow: var(--lift-1);
}

.field { margin-bottom: var(--s-5); }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: var(--s-3);
}
.field__value {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}
.field__hint {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-500);
  line-height: 1.5;
}

input[type='number'],
input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea {
  width: 100%;
  padding: 0.62rem 0.75rem;
  background: var(--paper);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius);
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-400); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(43, 81, 131, 0.14);
}
input[aria-invalid='true'] { border-color: var(--danger-700); }
textarea { resize: vertical; min-height: 6rem; line-height: var(--lh-base); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234d5a68' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--ink-200);
  border-radius: 999px;
}
input[type='range']::-moz-range-track {
  height: 3px;
  background: var(--ink-200);
  border-radius: 999px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  background: var(--navy-800);
  border: 2px solid var(--paper-raised);
  box-shadow: var(--lift-2);
}
input[type='range']::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--navy-800);
  border: 2px solid var(--paper-raised);
  box-shadow: var(--lift-2);
}

.field--inline { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  cursor: pointer;
  font-size: var(--t-base);
  color: var(--ink-700);
  line-height: 1.5;
}
.check input { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--navy-700); }

/* --- results ------------------------------------------------------------ */

.calc__results { display: grid; gap: var(--s-5); align-content: start; }

.verdict {
  border: 1px solid var(--ink-200);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  background: var(--paper-raised);
}
.verdict.is-positive { border-left-color: var(--positive-700); background: var(--positive-100); }
.verdict.is-neutral { border-left-color: var(--ink-500); background: var(--neutral-100); }
.verdict.is-caution { border-left-color: var(--caution-700); background: var(--caution-100); }

.verdict__figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-4);
}
.verdict__amount {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.verdict__amount.is-negative { color: var(--caution-700); }
.verdict__label { font-size: var(--t-base); color: var(--ink-600); }
.verdict__time {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-700);
  padding: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
}
.verdict__text {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--lh-loose);
  color: var(--ink-800);
  max-width: 42rem;
}

.path {
  background: var(--paper-raised);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
}
.path__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-2);
}
.path__note {
  margin: 0;
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  color: var(--ink-600);
}
.path__note em { color: var(--ink-900); font-style: italic; }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }

.ledger {
  background: var(--paper-raised);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: grid;
  align-content: start;
}
.ledger__head { margin-bottom: var(--s-4); }
.ledger__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-1);
}
.ledger__sub { font-size: var(--t-sm); color: var(--ink-500); }

.ledger__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block: 1px solid var(--ink-100);
  margin-bottom: var(--s-4);
}
.ledger__total-figure {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.ledger__total-time { font-size: var(--t-sm); color: var(--ink-600); }

.bar {
  height: 4px;
  border-radius: 999px;
  background: var(--ink-100);
  overflow: hidden;
  margin-bottom: var(--s-5);
}
.bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  transition: width 320ms var(--ease);
}
#bar-probate::after { background: var(--caution-700); }
#bar-trust::after { background: var(--positive-700); }

.line-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.line-item { padding-bottom: var(--s-4); border-bottom: 1px dotted var(--ink-200); }
.line-item:last-child { border-bottom: 0; padding-bottom: 0; }
.line-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
}
.line-item__label { font-size: var(--t-base); font-weight: 600; color: var(--ink-800); }
.line-item__value {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.line-item__note {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-500);
}

.calc__disclaimer {
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  color: var(--ink-500);
  background: var(--paper-sunken);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.calc__disclaimer strong { color: var(--ink-700); }

/* ==========================================================================
   11. METHOD & FAQ
   ========================================================================== */

.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--ink-200);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--brass-700);
  padding-top: 0.35rem;
  letter-spacing: 0.06em;
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-600); font-size: var(--t-base); line-height: var(--lh-loose); max-width: 42rem; }

.faq { display: grid; gap: 0; max-width: 48rem; }
.faq details {
  border-bottom: 1px solid var(--ink-200);
}
.faq details:first-of-type { border-top: 1px solid var(--ink-200); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-meta);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--brass-600);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div {
  padding-bottom: var(--s-5);
  max-width: var(--measure);
  color: var(--ink-600);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
}

/* ==========================================================================
   12. CONTACT & FORM
   ========================================================================== */

.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); }

.contact__detail {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.contact__detail:last-of-type { border-bottom: 0; }
.contact__detail-label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-400);
}
.contact__detail-value { font-size: var(--t-md); color: #fff; }
.contact__detail-value a { color: #fff; }
.contact__detail-note { font-size: var(--t-sm); color: rgba(255, 255, 255, 0.55); }

/* A placeholder that admits it is one. */
.pending {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--brass-400);
  letter-spacing: 0.04em;
}
.pending::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brass-400);
}
.pending--on-light { color: var(--brass-700); }
.pending--on-light::before { background: var(--brass-600); }

.form-card {
  background: var(--paper-raised);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  box-shadow: var(--lift-3);
  color: var(--ink-800);
}
.form-card h3 { margin-bottom: var(--s-2); }
.form-card > p { color: var(--ink-600); font-size: var(--t-base); margin-bottom: var(--s-6); }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-field { margin-bottom: var(--s-5); }
.form-field label {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: var(--s-2);
}
.form-field .req { color: var(--danger-700); }
.form-error {
  display: block;
  margin-top: var(--s-2);
  min-height: 1.1rem;
  font-size: var(--t-sm);
  color: var(--danger-700);
}

.form-status {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  font-size: var(--t-base);
  line-height: var(--lh-base);
}
.form-status:empty { display: none; }
.form-status.is-error { background: #fbeaea; color: var(--danger-700); }
.form-status.is-info { background: var(--ink-100); color: var(--ink-700); }

.form-legal {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  color: var(--ink-500);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.62);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-base);
}
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer .wordmark { color: #fff; }
.site-footer .wordmark__sub { color: rgba(255, 255, 255, 0.5); }
.site-footer__blurb { margin-top: var(--s-4); max-width: 26rem; line-height: var(--lh-loose); }

.site-footer h4 {
  color: #fff;
  font-family: var(--font-meta);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  padding-top: var(--s-6);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.45);
}
.site-footer__bottom p { margin: 0; max-width: 46rem; line-height: var(--lh-base); }

/* ==========================================================================
   14. REVEALS & MOTION
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 68rem) {
  :root { --t-4xl: 3rem; --t-3xl: 2.25rem; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .calc { grid-template-columns: 1fr; }
  .calc__controls { position: static; }
  .contact { grid-template-columns: 1fr; }
  .grid--split { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 52rem) {
  :root {
    --t-4xl: 2.5rem;
    --t-3xl: 1.9rem;
    --t-2xl: 1.6rem;
    --s-9: 4rem;
    --s-10: 4.5rem;
  }
  .shell { padding-inline: var(--s-5); }

  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--lift-2);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
  }
  .nav__list a {
    display: block;
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--ink-100);
  }

  .grid--2, .grid--3, .compare, .form-row, .proof__grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .verdict__amount { font-size: var(--t-2xl); }
  .form-card { padding: var(--s-5); }
  .demo-ribbon__text { font-size: var(--t-xs); }
}

@media print {
  .demo-ribbon, .site-header, .nav, .site-footer, .btn { display: none !important; }
  body { background: #fff; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   16. HOUSE IDIOM — the print treatment
   --------------------------------------------------------------------------
   Everything above builds the page. This section decides what it looks like,
   and it is the part that must not resemble the other two Orabeam sites.

   The rule is simple and applied without exception: this page is set, not
   assembled. Content is divided by rules the way a printed brief divides it.
   Nothing is boxed, nothing is rounded, nothing casts a shadow, nothing
   moves except to appear. A card with a drop shadow is a web convention
   borrowed from Material Design; a law review has never needed one.

   Kept as a separate, last section on purpose — it is the layer a future
   editor would touch to re-skin the site, and it should be findable.
   ========================================================================== */

/* --- the double rule ---------------------------------------------------
   A 3px double border renders as hairline / gap / hairline: the filet that
   sits under a running head in a printed journal. It is the single most
   recognisable mark on this site and it does the work a card border used
   to do — saying "a new thing starts here" — without enclosing anything. */

.section__head { position: relative; padding-bottom: var(--s-5); }
.section__head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5.5rem;
  border-top: 3px double var(--brass-600);
}
.section--ink .section__head::after { border-top-color: var(--brass-400); }

/* --- cards become entries ---------------------------------------------- */

.card {
  background: none;
  border: 0;
  border-top: 3px double var(--ink-300);
  border-radius: 0;
  padding: var(--s-5) 0 0;
  transition: border-top-color var(--dur) var(--ease);
}
.card--hover:hover {
  box-shadow: none;
  transform: none;
  border-top-color: var(--brass-600);
}
.card--hover:hover .card__index { color: var(--brass-600); }

.card__index {
  font-family: var(--font-meta);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--s-3);
  transition: color var(--dur) var(--ease);
}

/* --- panels lose their walls -------------------------------------------
   The hero card, the calculator controls, the verdict, the ledger and the
   contact form were all the same floating white rectangle. They become
   ruled blocks on the same sheet of paper as everything else. */

.hero__card,
.calc__controls,
.form-card {
  background: none;
  border: 0;
  border-top: 3px double var(--ink-800);
  border-bottom: 1px solid var(--ink-200);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-5) 0 var(--s-6);
}

.path,
.ledger,
.verdict {
  background: none;
  border: 0;
  border-top: 1px solid var(--ink-200);
  border-radius: 0;
  padding: var(--s-5) 0 0;
}
/* The verdict is the one place a tint is load-bearing: it is the answer the
   reader came for, and it must be findable when scanning. It gets a rule in
   the semantic colour and a margin note, not a filled panel. */
.verdict {
  border-top-width: 3px;
  border-top-style: double;
  padding-left: var(--s-5);
  border-left: 2px solid var(--ink-300);
}
.verdict.is-positive { background: none; border-left-color: var(--positive-700); border-top-color: var(--positive-700); }
.verdict.is-neutral  { background: none; border-left-color: var(--ink-400);      border-top-color: var(--ink-400); }
.verdict.is-caution  { background: none; border-left-color: var(--caution-700);  border-top-color: var(--caution-700); }

.verdict__time {
  background: none;
  border: 1px solid var(--ink-300);
  border-radius: 0;
  font-family: var(--font-meta);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- furniture is sans, and small ---------------------------------------
   Serif below ~13px stops being legible and starts being texture. Anything
   that is a label rather than a sentence switches face here. */

.nav__list a,
.field__label,
.btn,
.hero__card-tag,
.proof__source,
.sources__title,
.card__price-note,
.contact__detail-label,
.form-card label,
.form-card input,
.form-card select,
.form-card textarea,
.form-hint,
.badge {
  font-family: var(--font-meta);
}
.field__label { font-size: var(--t-sm); letter-spacing: 0.02em; }
.hero__card-tag { font-size: var(--t-xs); }

/* --- links draw their own underline -------------------------------------
   Not a decoration: a link in running serif needs to be distinguishable
   without colour alone, and an underline that arrives on hover reads as
   deliberate where a permanent one would stripe the whole page. */

.link-arrow,
.prose a,
.sources a,
.proof__source a {
  text-decoration: none;
  background-image: linear-gradient(var(--brass-600), var(--brass-600));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 260ms var(--ease);
}
.link-arrow:hover,
.prose a:hover,
.sources a:hover,
.proof__source a:hover { background-size: 100% 1px; }

/* --- motion: appear, do not arrive --------------------------------------
   The other two sites move things. This one does not. Content fades in over
   200ms with no translation, because a page that slides is a page that is
   performing, and this firm does not perform.

   The hidden state stays scoped to .js — see the reveal notes in script.js.
   Any new reveal added to this site must keep that scoping or it will
   reintroduce the blank-page bug. */

/* Body content does not animate in on this site at all — and that is the
   design, not a concession.

   It started as a 200ms fade, which is about as restrained as a fade gets.
   Two things argued it away. The register: a printed brief does not
   assemble itself in front of you, and every other decision here follows
   from that. And the measurement: text part-way through a fade renders at a
   fraction of its declared contrast, which an automated accessibility scan
   samples and fails, correctly — 15px of ink-600 measures 3.3:1 mid-fade
   against 6.8:1 settled.

   So the two things that do move are the two things that are drawn rather
   than set: the seal inking itself, and Figure 1 plotting itself. Both are
   images being made, which is a gesture this page can justify. Everything
   else is simply on the page when the page arrives.

   [data-reveal] stays in the markup: script.js still uses it to decide when
   to arm those two, and leaving the hooks in place means a future editor can
   restore an entrance without re-marking the document. */
.js [data-reveal],
.js [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; }

/* --- watermark ----------------------------------------------------------
   A section number set enormous and nearly invisible, the way a chapter
   opening is marked in print. Pure type, no asset, no request. */

.section { position: relative; overflow: clip; }
.section > .shell { position: relative; z-index: 1; }
.section[data-folio]::before {
  content: attr(data-folio);
  position: absolute;
  top: -0.28em;
  right: -0.06em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 22rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink-900);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
}
.section--ink[data-folio]::before { color: #fff; opacity: 0.05; }

/* --- the seal -----------------------------------------------------------
   An engraved firm seal, drawn here rather than fetched: no image request,
   no licence question, sharp at any zoom, and it recolours with the theme.
   The ring of marks is one dashed circle rather than forty-eight lines —
   same result on screen, a fraction of the markup.

   It draws itself in on load. That is the only motion on this page that is
   not a fade, and it is allowed because an engraving being inked is the one
   gesture that belongs to the register. */

.seal {
  width: 7.25rem;
  height: 7.25rem;
  margin-bottom: var(--s-6);
  color: var(--brass-600);
  overflow: visible;
}
.seal__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.85;
}
.seal__ticks circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-dasharray: 1 5.09;   /* 48 marks around r=46.5 */
  opacity: 0.5;
}
.seal__legend {
  font-family: var(--font-meta);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  fill: currentColor;
}
.seal__mono {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--navy-800);
}
.seal__rule { stroke: currentColor; stroke-width: 1; opacity: 0.7; }

.js .seal__ring,
.js .seal__ticks circle {
  stroke-dashoffset: 0;
  animation: seal-ink 1400ms var(--ease) both;
}
.js .seal__ring { stroke-dasharray: 400; }
.js .seal__ring:nth-of-type(2) { animation-delay: 90ms; }
.js .seal__ring:nth-of-type(3) { animation-delay: 180ms; }
.js .seal__ticks circle { animation: seal-fade 900ms 500ms var(--ease) both; }
.js .seal__legend,
.js .seal__mono,
.js .seal__rule { animation: seal-fade 700ms 700ms var(--ease) both; }

@keyframes seal-ink {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: 0; }
}
@keyframes seal-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .seal__ring { animation: none; stroke-dasharray: none; }
  .js .seal__ticks circle,
  .js .seal__legend,
  .js .seal__mono,
  .js .seal__rule { animation: none; }
}

/* --- the form is a printed form ----------------------------------------
   Stripping panel backgrounds is right everywhere except here. The contact
   section is navy, and a form with no ground puts dark labels, a dark
   submit button and a dark disclaimer on a dark field — three contrast
   failures at once.

   The fix is not to recolour a dozen children. It is to notice that a form
   you fill in is a sheet of paper, and to lay one on the section. That is
   truer to the idiom than the floating white card ever was: square, unlifted,
   ruled at the head like every other block on the site. */

.section--ink .form-card {
  background: var(--paper);
  color: var(--ink-800);
  border-top: 3px double var(--navy-700);
  border-bottom: 0;
  padding: var(--s-6);
}
.section--ink .form-card h3 { color: var(--ink-900); }
.section--ink .form-card > p,
.section--ink .form-card .form-hint { color: var(--ink-600); }
.section--ink .form-card label { color: var(--ink-800); }
.section--ink .form-card input,
.section--ink .form-card select,
.section--ink .form-card textarea {
  background: var(--paper-raised);
  border-color: var(--ink-300);
}

/* --- contrast corrections ------------------------------------------------
   Two more colours were doing a job they were not dark enough for. Both are
   text, so both have to clear 4.5:1 against the darkest ground they sit on
   (--paper-sunken), not the lightest. Measured with scripts/page_audit.js. */

/* --ink-400 is a hairline colour at 2.5:1 — fine for a rule, illegible as a
   label. The section index reads better in brass anyway; it is a folio mark,
   and folios in print are set in the accent. */
.card__index { color: var(--brass-700); }

/* brass-600 is 3.6:1 on sunken. The seal legend is 9px of real text, so it
   takes the darker brass. The rings keep brass-600 — strokes, not text. */
.seal__legend { fill: var(--brass-700); }

/* --- dark surfaces --------------------------------------------------------
   `strong { color: var(--ink-900) }` is right on paper and catastrophic on a
   dark ground: the footer background IS --ink-900, so "Demonstration build."
   was being painted in exactly its own backdrop — a 1:1 contrast ratio and a
   sentence no reader could see. It has been that way since the first build.

   Emphasis on a dark ground has to go lighter than its surroundings, not
   darker, which is the opposite instruction from the one on paper. */

.site-footer strong,
.section--ink strong {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
}
/* ...but the contact form is a sheet of paper laid on the dark section, so
   emphasis inside it goes back to ink. */
.section--ink .form-card strong { color: var(--ink-900); }

/* 0.45 white on --ink-900 measures 4.49:1 — under AA by a hundredth, which is
   still under. */
.site-footer__bottom { color: rgba(255, 255, 255, 0.52); }

/* --- Figure 1 -------------------------------------------------------------
   A plate in a white paper. Ruled, captioned, numbered, and set on the page
   rather than floated above it — the same instruction as everything else on
   this site, applied to a chart. Built by drawFigure() in script.js from the
   calculator's own model. */

.plot {
  margin: 0 0 var(--s-8);
  padding-top: var(--s-5);
  border-top: 3px double var(--ink-800);
}
.plot__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.plot__folio {
  font-family: var(--font-meta);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-700);
}
.plot__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink-900);
}
.plot__svg { width: 100%; height: auto; }

.plot__rule { stroke: var(--ink-200); stroke-width: 1; }
.plot__base { stroke: var(--ink-800); stroke-width: 1; }
.plot__tick {
  font-family: var(--font-meta);
  font-size: 11px;
  fill: var(--ink-600);
  font-variant-numeric: tabular-nums;
}

.plot__line { stroke-width: 2; stroke-linejoin: round; }
.plot__line--probate { stroke: var(--navy-700); }
.plot__line--trust   { stroke: var(--brass-700); stroke-dasharray: 7 4; }
.plot__zero { stroke: var(--ink-800); stroke-width: 1.25; }

.plot__tierline { stroke: var(--ink-300); stroke-width: 1; stroke-dasharray: 2 4; }

/* The gap annotation is the load-bearing element of this figure: the two
   lines are only a few pixels apart on purpose, so the number has to carry
   what the geometry deliberately does not exaggerate. */
.plot__gap {
  font-family: var(--font-meta);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--ink-900);
}
.plot__leader { stroke-width: 1; }
.plot__leader--probate { stroke: var(--navy-700); }
.plot__leader--trust { stroke: var(--brass-700); }
.plot__serieslabel { font-family: var(--font-meta); font-size: 11px; font-weight: 600; }
.plot__serieslabel--probate { fill: var(--navy-700); }
.plot__serieslabel--trust { fill: var(--brass-700); }

.plot__note {
  margin: var(--s-4) 0 0;
  max-width: 42rem;
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  color: var(--ink-600);
}

/* The curves plot themselves left to right when the figure is reached: a rect
   in a clipPath scaled from zero width. `.is-armed` is added by script.js and
   only there — if the script never runs, the class is never added and the
   finished figure is simply drawn. Same failure direction as the reveals. */
.plot__wiper {
  transform-box: view-box;
  transform-origin: left center;
}
.plot__svg.is-armed .plot__wiper { animation: plot-wipe 1600ms var(--ease) forwards; }
.plot__svg.is-armed .plot__cross { animation: plot-appear 600ms 1450ms var(--ease) both; }

@keyframes plot-wipe   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes plot-appear { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .plot__svg.is-armed .plot__wiper,
  .plot__svg.is-armed .plot__cross { animation: none; transform: none; opacity: 1; }
}

@media (max-width: 52rem) {
  .plot { border-top-width: 3px; }
  .plot__title { font-size: var(--t-md); }
}