/* ==========================================================================
   Go2Appraiser
   --------------------------------------------------------------------------
   Palette, type, and the per-page motion budget are all client-mandated. The
   design decision is structural: every claim sits beside its substantiation in
   a fixed support column, on every page. That column is the design.

   Type makes its decision on the axes rather than the faces, because both
   faces were specified and both are neutral workhorses:
     - labels use Archivo's real wdth axis at 87.5%, drawn from the logo
       wordmark, rather than synthesised small caps
     - figures switch by meaning: oldstyle in prose, lining tabular in anything
       evidentiary
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
/* Self-hosted: Google's subsets are not guaranteed to keep onum/tnum, type is
   the design here so a third-party connection on the critical path costs LCP,
   and half this audience lands on a divorce or bankruptcy URL. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 600 700;
  font-stretch: 70% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sourcesans3-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks. Measured from the real font tables with a
   frequency-weighted advance width, not guessed. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 106.39%;
  ascent-override: 82.53%;
  descent-override: 19.74%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS3 Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 94.51%;
  ascent-override: 108.35%;
  descent-override: 42.32%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  /* Scott's palette, with his own contrast ratios against white. */
  --blue: #165682;          /* 7.81:1  headings, primary buttons, links */
  --navy: #0E3A57;          /* 11.92:1 button hover, dark sections, footer */
  --pale: #EBF2F7;          /* alternating section backgrounds, card fills */
  --ink: #1A1A1A;           /* 17.4:1  body copy */
  --slate: #5A6672;         /* 5.87:1  secondary text, captions, helper text */
  --rule: #D8DEE4;          /* non-text only: rules, borders, table lines */
  --signal: #B4661C;        /* 4.32:1  accent only, 18px+ semibold if it carries text */
  --signal-dark: #8F4F12;   /* 6.37:1  use whenever white text sits on it */
  --page: #FFFFFF;

  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "Source Sans 3", "SS3 Fallback", system-ui, sans-serif;

  /* Rhythm unit: one body line. All vertical spacing is a multiple. */
  --u: 1.7rem;
  --pad-tight: clamp(1.5rem, 2vw, 2.2rem);
  --pad-base: clamp(3.4rem, 6vw, 5.5rem);
  --pad-major: clamp(6rem, 11vw, 10rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell: 72rem;
  /* The left edge of the text column, resolved to the same place as the brand
     mark in the header, so the page has one alignment rather than two.
     Percentages in grid track sizing resolve against the grid's inline size,
     so this avoids the scrollbar drift that 100vw would introduce. */
  --edge: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  --head-h: 4rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Evidentiary figures: digits column-align and read as record, not copy. */
  --num: tabular-nums lining-nums;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);  /* 17 -> 18px */
  line-height: 1.6;
  /* Oldstyle, proportional figures in running prose: numbers sit inside the
     line instead of shouting. Evidentiary contexts override this. */
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

/* Anything that is a number of record. */
.num, .params__list dd, .cred dd, dl.cred .num, time, .steps li h3,
table.cmp, .site-foot__contact, .closing__tel {
  font-variant-numeric: var(--num);
}

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

/* ------------------------------------------------------------------ type -- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 var(--u);
  text-wrap: balance;
  font-variant-numeric: var(--num);
}

h1 {
  font-size: clamp(2.05rem, 1.45rem + 2.3vw, 3.15rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
}
/* Inner pages keep the filed-and-stamped rule above the title. Home does not:
   its hero is a composition rather than a document head. */
.spine:not(.hero) > .text > h1 { border-top: 3px solid var(--blue); padding-top: var(--u); }

h2 {
  font-size: clamp(1.6rem, 1.24rem + 1.6vw, 2.35rem);
  letter-spacing: -0.014em;
  line-height: 1.14;
}

h3 {
  font-size: clamp(1.2rem, 1.09rem + 0.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.25;
  margin-bottom: calc(var(--u) * 0.4);
}

p { margin: 0 0 var(--u); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--navy); }

.lede {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--ink);
}

/* The label system. Archivo's real width axis at 87.5%, uppercase, drawn from
   the logo wordmark. Never font-variant-caps: the Google build cannot be
   relied on for smcp and browsers synthesise it badly at exactly this size. */
.docket__label, .card__label, .strip__label, .pkg__tag, .support__h,
.params__h, .faq__group-h, .req {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 87.5%;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--slate);
  margin: 0 0 calc(var(--u) * 0.5);
}

.pull {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blue);
  margin-bottom: var(--u);
}

.note, .help, figcaption, .cmp__cap, .docket__std, .pkg__for {
  color: var(--slate);
  font-size: 0.9375rem;
  line-height: 1.5;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--signal-dark);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- spine -- */
/* Two content tracks declared once: text carries the prose, support carries
   the substantiation beside it. Left-biased rather than centred, so the text
   edge lines up with the brand mark in the header. */

.spine {
  display: grid;
  grid-template-columns:
    [full-start] var(--edge)
    [text-start] minmax(0, 66ch)
    [text-end] 3rem
    [support-start] 15rem
    [support-end] minmax(var(--edge), 1fr) [full-end];
  column-gap: 0;
  padding: var(--pad-base) 0;
  border-top: 1px solid var(--rule);
}

.spine > * { grid-column: text; }
/* Grid children default to min-width:auto, so any wide child (the map, a
   comparison table) refuses to shrink and pushes the whole page sideways.
   This is what keeps 375px free of horizontal scroll. */
.spine > * { min-width: 0; }
.spine > .support { grid-column: support; }
.spine > .full { grid-column: full; padding: 0 var(--gutter); margin-top: var(--u); }

.spine.hero { border-top: 0; background: var(--pale); }
.home-hero { border-top: 0; padding: 0; background: var(--pale); display: block; }
.hero__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 3rem) var(--gutter) clamp(1.75rem, 3.5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__body {
  max-width: 66ch;
  min-width: 0;
}
/* Appraisal workspace illustration—shows the work, not the person. */
.hero__fig { margin: 0; position: relative; min-width: 0; }
.hero__fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--page);
}
/* Portrait removed from home hero. Lives on About page. */
.hero__cred { display: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; align-items: center; margin-top: var(--u); }
.hero__tel {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: var(--num);
  font-size: 1.35rem; color: var(--blue); text-decoration: none; white-space: nowrap;
}
.hero__tel:hover { text-decoration: underline; }
.hero__meta {
  margin-top: var(--u);
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  font-size: 0.875rem; color: var(--slate);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__meta span::before {
  content: ""; width: 0.55rem; height: 1px; background: var(--signal);
}
@media (max-width: 56rem) {
  .hero__in { grid-template-columns: 1fr; gap: 2rem; }
  .hero__fig { max-width: 22rem; margin: 0 auto; }
}
.spine.wide > .text { max-width: none; grid-column: text-start / support-end; }
/* Full shell width, for grids and galleries that need three columns rather
   than two. Still centred on the same shell as the header, so the left edge
   stays on the one alignment the page uses. */
.spine.span > .text {
  grid-column: full;
  max-width: none;
  margin: 0;
  padding-inline: var(--edge);
}
.spine.major { padding: var(--pad-base) 0; background: var(--pale); }
.spine.tint { background: var(--pale); }
.spine.tint + .spine.tint { border-top-color: #DCE6EE; }
.spine.dark { background: var(--navy); color: #D6E2EC; border-top: 0; }
.spine.dark h2, .spine.dark h3 { color: #fff; }
.spine.dark .lede, .spine.dark p { color: #C7D8E6; }
.spine.dark a { color: #fff; }
.spine.quiet { padding: var(--pad-tight) 0 var(--pad-base); }

.hero__display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--signal-dark);
  margin-bottom: calc(var(--u) * 0.75);
}

/* ------------------------------------------------------- support margin -- */

.support {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}
.support ul { list-style: none; margin: 0; padding: 0; }
.support li { margin-bottom: 0.5rem; padding-left: 1.1rem; text-indent: -1.1rem; font-variant-numeric: var(--num); }
.support li::before {
  content: ""; display: inline-block; width: 0.6rem; height: 1px;
  background: var(--signal); vertical-align: middle; margin-right: 0.5rem;
}
/* An empty support margin is an argument, not an omission. It still carries
   real text for a screen reader, so the argument does not disappear. */
.support--empty { min-height: 3rem; }

/* ------------------------------------------------------------- docket ---- */

.docket, .cards, .work, .which, .ticks, .rel, .counties-list, .pkgs {
  list-style: none; margin: 0; padding: 0;
}

.docket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.25rem;
}
.docket__item--cta {
  border-top-color: var(--blue);
  background: var(--pale);
}
.docket__item--cta .docket__go a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  text-decoration: none;
}
.docket__item--cta .docket__go a:hover { text-decoration: underline; }
.docket__item {
  display: flex; flex-direction: column; align-items: start;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--signal);
  background: var(--page);
  padding: 1.35rem 1.4rem 1.2rem;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.docket__item h3 { margin-bottom: 0.45rem; }
.docket__std {
  font-size: 0.8125rem; color: var(--slate); margin: 0 0 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--rule);
}
.docket__go a, .work__go a { font-weight: 600; }

/* --------------------------------------------------------------- cards --- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.card {
  border: 1px solid var(--rule);
  padding: 1.4rem;
  background: var(--page);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.card h3 { margin-bottom: 0.5rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card--alt { background: var(--pale); }

.which li {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
}
.which span { flex: 1 1 16rem; }

.ticks li, .rel li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.work li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }

/* -------------------------------------------------- assignment parameters -- */

.params {
  background: var(--page);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  padding: 1.6rem;
}
.params__note { color: var(--slate); font-size: 0.9375rem; margin-bottom: var(--u); }
.params__list { margin: 0; }
.params__row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.5rem 1.5rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}
.params__row dt {
  font-family: var(--font-display); font-weight: 600; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem;
  color: var(--slate); padding-top: 0.2rem;
}
.params__row dd { margin: 0; }

/* ------------------------------------------------------------ comparison -- */
/* The signature moment. The appraisal column's support cell is full; the other
   two are empty, and the vacancy is the argument. */

.cmp__head { max-width: 62ch; margin-bottom: var(--u); }
.cmp__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .cmp { min-width: 36rem; font-size: 0.875rem; }
  .cmp th, .cmp td { padding: 0.75rem 0.9rem; }
  .cmp tbody th { width: 8rem; font-size: 0.65rem; }
  .cmp__head { margin-bottom: 0.8rem; }
}
@media (max-width: 480px) {
  /* On mobile, hide the empty columns (estimate and CMA) and show only certified appraisal */
  .cmp { min-width: auto; width: 100%; font-size: 0.8125rem; }
  .cmp th:nth-child(-n+2),
  .cmp td:nth-child(-n+2) { display: none; }
  .cmp thead th { font-size: 0.875rem; }
  .cmp tbody th { width: auto; font-size: 0.65rem; letter-spacing: 0.04em; }
  .cmp th, .cmp td { padding: 0.6rem 0.75rem; }
  .cmp__cap { margin-top: 0.75rem; font-size: 0.875rem; }
}
.cmp th, .cmp td {
  text-align: left; vertical-align: top;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--rule);
}
.cmp thead th {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--blue); border-top: 0; border-bottom: 3px solid var(--blue);
}
.cmp thead th:not(:last-child) { border-bottom-color: var(--rule); }
/* The appraisal column is the one carrying support, so it is the one that
   reads as solid. */
.cmp tr > *:last-child { background: var(--page); }
.cmp thead th:last-child { padding-top: 1.25rem; }
.cmp tbody th {
  font-family: var(--font-display); font-weight: 600; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem;
  color: var(--slate); width: 11rem;
}
.cmp__suprow td, .cmp__suprow th { border-top: 1px solid var(--blue); }
.cmp__sup ul { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.cmp__sup li { margin-bottom: 0.4rem; color: var(--slate); }
.cmp__sup li::before {
  content: ""; display: inline-block; width: 0.6rem; height: 1px;
  background: var(--signal); vertical-align: middle; margin-right: 0.5rem;
}
.cmp__sup--empty { min-height: 6rem; }
/* Hold the space open. One rule where the first item would sit, and then
   nothing, so the emptiness reads as an answer rather than a gap. The visible
   argument and the screen-reader text say the same thing. */
.cmp__sup--empty::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--rule);
  margin-top: 0.55rem;
}
.cmp__cap { margin-top: var(--u); max-width: 68ch; }

/* ------------------------------------------------------------- measuring -- */
/* The one page with a real motion budget, and the only equal-height cards. */

.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.pkg {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  padding: 1.5rem;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.pkg__inc { list-style: none; margin: 0 0 var(--u); padding: 0; flex: 1; font-size: 0.9375rem; }
.pkg__inc li { padding: 0.4rem 0; border-top: 1px solid var(--rule); }
.pkg__price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--signal-dark); margin: 0;
}
.sketches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.sketch { margin: 0; }
.sketch img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--page);
}
.sketch figcaption {
  margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.45; color: var(--slate);
}

.notice {
  border-left: 3px solid var(--signal); background: var(--pale);
  padding: 1rem 1.25rem; margin: 0; font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ faq --- */
/* Native details/summary: the answer is in the DOM and in the accessibility
   tree whether open or closed, with no JavaScript involved. Scott's rule that
   every answer must render even when collapsed is satisfied structurally. */

.faq__h { margin-bottom: var(--u); }
.faq__group { margin-bottom: var(--pad-tight); }
.faq__group-h { margin-bottom: 0.4rem; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--pad-tight) 2.5rem var(--pad-tight) 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--blue);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%;
  width: 0.7rem; height: 0.7rem; margin-top: -0.5rem;
  border-right: 2px solid var(--signal-dark);
  border-bottom: 2px solid var(--signal-dark);
  transform: rotate(45deg);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: -0.15rem; }
.faq__a { padding: 0 2.5rem var(--pad-tight) 0; max-width: 68ch; }

/* -------------------------------------------------------------- service --- */

.strip { background: var(--navy); color: #fff; padding: var(--pad-base) 0; }
.strip__in { padding: 0 var(--edge); }
.strip__in > * { max-width: 62ch; }
.strip h2 { color: #fff; }
.strip p { line-height: 1.68; }     /* light on dark needs the extra */
.strip__label { color: #A9C3D6; }
.strip__go a { color: #fff; font-weight: 600; }

.about-strip { display: grid; grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: start; }
.spine.dark .pull { color: #fff; }
.spine.dark .support { border-top-color: rgba(255,255,255,0.2); color: #A9C3D6; }
.portrait { border: 1px solid var(--rule); display: block; width: 100%; height: auto; }
.portrait--lg { max-width: 17rem; margin-bottom: var(--u); }

.cred { margin: 0 0 var(--u); }
.cred > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem 1.5rem;
  padding: 0.7rem 0; border-top: 1px solid var(--rule);
}
.cred dt {
  font-family: var(--font-display); font-weight: 600; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem;
  color: var(--slate); padding-top: 0.2rem;
}
.cred dd { margin: 0; }

.counties { color: var(--slate); font-size: 0.9375rem; }
.counties-list { columns: 2; column-gap: 2.5rem; }
.counties-list li { break-inside: avoid; margin-bottom: var(--u); }
.counties-list h3 { font-size: 1rem; margin-bottom: 0.2rem; }
.counties-list p { font-size: 0.9375rem; color: var(--slate); margin: 0; }

.map { margin: 0; }
.map__frame {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  background: var(--page);
}
.area-map {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 36rem;
}
@media (max-width: 480px) {
  .area-map { min-width: 32rem; }
}
.map figcaption { margin-top: 0.75rem; }

/* --------------------------------------------------------------- crumbs --- */

.crumbs { max-width: var(--shell); margin: 0 auto; padding: 1rem var(--gutter) 0; font-size: 0.875rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--rule); }

/* ----------------------------------------------------------------- form --- */

.commit { border-top: 1px solid var(--signal); padding-top: 0.9rem; margin-bottom: var(--u); }
.commit h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }

.intake { max-width: 44rem; }
.intake fieldset { border: 0; border-top: 1px solid var(--rule); margin: 0 0 var(--pad-tight); padding: var(--u) 0 0; }
.intake legend {
  font-family: var(--font-display); font-weight: 600; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: 0.085em; font-size: 0.72rem;
  color: var(--slate); padding: 0;
}
.f { margin-bottom: 1.1rem; }
.f label, .f__label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.radios .radio label { display: inline; font-weight: 400; margin: 0; }
.f input, .f select, .f textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--page);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.6rem 0.7rem;
}
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--blue); }
.f--key select { border-color: var(--blue); border-width: 2px; }
.req { display: inline; font-size: 0.65rem; color: var(--signal-dark); margin-left: 0.4rem; }
.help { margin: 0.35rem 0 0; }
.radios { display: flex; gap: 1.25rem; }
.radio, .check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.radio input, .check input { width: auto; margin-top: 0.3rem; }
.ack { border: 1px solid var(--rule); background: var(--pale); padding: 1rem 1.25rem; margin-bottom: var(--u); }
.hp { position: absolute; left: -9999px; }
.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: s; padding: 0.9rem 0 0.9rem 3rem; border-top: 1px solid var(--rule); position: relative; }
.steps li::before {
  content: "0" counter(s);
  position: absolute; left: 0; top: 1.1rem;
  font-family: var(--font-display); font-weight: 600; font-stretch: 75%;
  font-variant-numeric: var(--num); font-size: 0.78rem; color: var(--signal-dark);
}
.intake__status { margin-top: var(--u); font-weight: 600; }
.intake__status[data-state="error"] { color: var(--signal-dark); }

/* ---------------------------------------------------------------- button -- */

.btn {
  display: inline-block;
  background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; line-height: 1;
  padding: 0.95rem 1.5rem;
  border: 0; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  min-height: 44px; min-width: 44px;
  transition: background-color 180ms var(--ease);
}
.btn:hover { background: var(--navy); color: #fff; }
.btn--lg { font-size: 1.0625rem; padding: 1.1rem 1.9rem; }

/* ---------------------------------------------------------------- header -- */

.preview {
  margin: 0;
  padding: 0.6rem var(--gutter);
  background: var(--signal-dark);
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
}

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--page);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms linear;
}
.site-head[data-scrolled] { border-bottom-color: var(--rule); }
.site-head__in {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  min-height: var(--head-h);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-stretch: 87.5%;
  font-size: 1.05rem; letter-spacing: -0.01em; color: var(--blue);
}
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: 0.9375rem; text-decoration: none; color: var(--ink); }
.nav a:hover, .nav a[aria-current] { color: var(--blue); text-decoration: underline; }
.nav__cta { font-weight: 600; color: var(--blue) !important; }
.site-head__tel {
  font-family: var(--font-display); font-weight: 700; font-stretch: 87.5%;
  font-variant-numeric: var(--num);
  font-size: 1rem; color: var(--blue); text-decoration: none; white-space: nowrap;
}
.nav__toggle { display: none; background: none; border: 0; padding: 0.6rem; cursor: pointer; min-height: 44px; min-width: 44px; }
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 22px; height: 2px; background: var(--blue); position: relative;
}
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -7px; }
.nav__bars::after { top: 7px; }
.m-nav { border-top: 1px solid var(--rule); padding: 0.5rem var(--gutter) 1rem; }
.m-nav ul { list-style: none; margin: 0; padding: 0; }
.m-nav li { border-bottom: 1px solid var(--rule); }
.m-nav a { display: block; padding: 0.85rem 0; text-decoration: none; color: var(--ink); }

/* --------------------------------------------------------------- closing -- */
/* The phone number is the call to action. */

.closing { background: var(--pale); border-top: 3px solid var(--blue); padding: var(--pad-base) 0 var(--pad-major); }
.closing__in {
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.closing__facts { margin: 0; }
.closing__facts > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.4rem 1.25rem;
  padding: 0.65rem 0; border-top: 1px solid #C9D9E6;
}
.closing__facts dt {
  font-family: var(--font-display); font-weight: 600; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem;
  color: var(--slate); padding-top: 0.15rem;
}
.closing__facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 56rem) {
  .closing__in { grid-template-columns: 1fr; }
}
.closing__tel {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: var(--num);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  letter-spacing: -0.015em; line-height: 1.1;
  color: var(--blue); text-decoration: none;
  margin-bottom: var(--u);
}
.closing__tel:hover { text-decoration: underline; }
.closing__line { max-width: 52ch; color: var(--slate); }

/* ---------------------------------------------------------------- footer -- */

.site-foot { background: var(--navy); color: #D6E2EC; padding: var(--pad-base) 0 0; }
.site-foot a { color: #fff; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot__in {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
}
.site-foot h2 {
  font-family: var(--font-display); font-weight: 600; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: 0.085em; font-size: 0.72rem;
  color: #A9C3D6; margin-bottom: 0.8rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.site-foot li { margin-bottom: 0.5rem; }
.site-foot__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: 0.5rem; }
.site-foot__cred { font-size: 0.875rem; margin-bottom: 0.5rem; font-variant-numeric: var(--num); }
.site-foot__geo, .site-foot__private { font-size: 0.875rem; margin-bottom: 0.5rem; }
.site-foot__contact { font-size: 0.9375rem; font-variant-numeric: var(--num); }
.site-foot__base {
  max-width: var(--shell); margin: var(--pad-base) auto 0; padding: 1.25rem var(--gutter);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.8125rem; color: #A9C3D6;
}
.site-foot__base p { margin: 0; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 62rem) {
  .spine {
    grid-template-columns:
      [full-start] var(--edge)
      [text-start] minmax(0, 68ch)
      [text-end] minmax(var(--gutter), 1fr) [full-end];
  }
  .spine > .support { grid-column: text; margin-top: var(--u); }
  .spine.wide > .text { grid-column: text; }
  .site-foot__in { grid-template-columns: 1fr 1fr; }
  .about-strip { grid-template-columns: 1fr; }
  .portrait { max-width: 15rem; }
}

@media (max-width: 52rem) {
  .nav, .site-head__tel { display: none; }
  .nav__toggle { display: block; margin-left: auto; }
  .counties-list { columns: 1; }
  .params__row, .cred > div { grid-template-columns: 1fr; }
  .site-foot__in { grid-template-columns: 1fr; }
}

@media (min-width: 52.01rem) { .m-nav { display: none !important; } }

/* ---------------------------------------------------------------- motion -- */
/* Scott's budget, per page. Everything sits inside no-preference so the
   reduced-motion default is the static site. */

@media (prefers-reduced-motion: no-preference) {
  .fade { opacity: 0; transform: translateY(12px); }
  .fade[data-in] {
    opacity: 1; transform: none;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }
  .card:hover { transform: translateY(-2px); border-color: var(--blue); }
  .docket__item:hover { transform: translateY(-2px); border-color: var(--blue); }
  .pkg:hover { transform: translateY(-3px); border-color: var(--blue); }
}

/* Reduced motion: disable smooth scroll for vestibular safety. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Divorce, estate, bankruptcy, and litigation get none, scoped so nothing
   sneaks in from the global sheet. */
body[data-motion="none"] *,
body[data-motion="none"] *::before,
body[data-motion="none"] *::after {
  transition: none !important;
  animation: none !important;
}
body[data-motion="none"] .fade { opacity: 1; transform: none; }

/* Two heavy pages: larger type, narrower measure, softer ground. Stress
   narrows working memory, so this reduces load. Invisible, and deliberate. */
body[data-tone="heavy"] { font-size: 1.1875rem; line-height: 1.65; }
body[data-tone="heavy"] .spine { --gutter: clamp(1.25rem, 4vw, 3rem); }
body[data-tone="heavy"] .spine > .text { max-width: 62ch; }
body[data-tone="heavy"] main { background: var(--pale); }
body[data-tone="heavy"] .spine { border-top-color: #DCE6EE; }
/* Signal is withheld entirely here: orange reads as alert, which is the wrong
   register beside this content. */
body[data-tone="heavy"] .support li::before,
body[data-tone="heavy"] .docket__item { border-color: var(--rule); }
body[data-tone="heavy"] .support li::before { background: var(--rule); }
body[data-tone="heavy"] .faq__q::after { border-color: var(--blue); }
body[data-tone="heavy"] .sketches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.sketch { margin: 0; }
.sketch img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--page);
}
.sketch figcaption {
  margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.45; color: var(--slate);
}

/* Professional documentation image on measuring page */
.doc-image { margin: 0; }
.doc-image img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--rule);
  background: var(--page);
}
.doc-image figcaption {
  margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--slate);
  max-width: 68ch;
}

.notice { border-left-color: var(--blue); }

/* ----------------------------------------------------------------- print -- */
/* Attorneys and executors print pages and attach them to email. */

@media print {
  @page { margin: 18mm; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }
  .site-head, .m-nav, .skip, .closing, .nav__toggle, .crumbs { display: none !important; }
  .spine { display: block; padding: 0 0 12pt; border-top: 0; }
  .support {
    float: right; width: 33%; margin: 0 0 8pt 10pt;
    border-top: 0.5pt solid #999; font-size: 9pt;
  }
  .support--empty, .cmp__sup--empty { display: none; }
  .strip, .spine.major { background: #fff !important; color: #000 !important; }
  .strip h2 { color: #000; }
  h1, h2, h3 { color: #000; break-after: avoid; }
  .faq__item[open] .faq__a, .faq__a { display: block !important; }
  .faq__q::after { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .site-foot { background: #fff; color: #000; border-top: 0.5pt solid #999; }
  .site-foot a { color: #000; }
  .cmp { min-width: 0; font-size: 9pt; }
}