/* components.css — Prime Real Estate Consultants ==========================
   Every reusable block on the site, in the order it appears down a page.
   Requires tokens.css and base.css to be loaded first, in that order.

   HOW TO READ THIS FILE
   Each component starts with a banner comment that says three things:
     WHAT it is · WHERE it is used · ANY RULE that binds it.
   A rule written in CAPITALS in a banner is a compliance or accessibility
   requirement, not a preference. Do not "tidy" those away.

   THE IDIOM, in one paragraph: this is an established professional office,
   not a product. Navy grounds, warm paper, a muted antique brass accent
   used only as a rule / border / small mark / one button, centred section
   headings over a short brass rule, generous body type, and no motion.

   BREAKPOINTS USED IN THIS FILE (rem, so they respect the reader's zoom)
     22.5rem  360px  the short hours line returns to the utility bar
     34rem    544px  button rows go horizontal
     40rem    640px  card grid goes to 2 columns
     48rem    768px  THE NAV BECOMES A HORIZONTAL BAR (required), footer grid
     56.25rem 900px  utility bar goes to one row, two-column blocks split
     62rem    992px  hero splits into copy + aside
     64rem   1024px  card grid goes to 3 columns
   ========================================================================= */


/* =========================================================================
   1. UTILITY BAR — .utility-bar
   WHAT: the dark strip at the very top of every page. Convention item 1 of
         the law-office idiom, and the single most consistent element on
         every real firm site we looked at.
   WHERE: first thing inside <header class="site-header">, on EVERY page.
   RULE: the telephone is the largest piece of type in the masthead and sits
         top-right from 900px up. It is never inside a menu, never an image,
         and never smaller than --text-phone. Hours sit beneath it.
   ========================================================================= */

.utility-bar {
  background-color: var(--color-bg-dark-alt);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse-muted);   /* navy-200 on navy-800 10.9:1  AA+ */
}
.utility-bar .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
}

/* The office name and street address. On a phone they are redundant — the
   wordmark is directly beneath, and the address is in the office panel and
   again in the footer — and they cost ~90px of the first screen. They come
   back at 900px, where there is room beside the phone. */
.utility-bar__office {
  display: none;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}
.utility-bar__office strong {
  display: block;
  color: var(--color-text-inverse);          /* white on navy-800 17.0:1  AA+ */
  font-size: var(--text-sm);
}

.utility-bar__call { display: block; text-decoration: none; }
/* Small label above the number. This is a LABEL for a control, not a
   decorative eyebrow floating above a heading — that pattern is banned. */
.utility-bar__label {
  display: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-800 9.3:1  AA+ */
}
.utility-bar__number {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-heading);
  font-size: var(--text-phone);              /* 26px phone -> 32px desktop */
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);          /* white on navy-800 17.0:1  AA+ */
}
.utility-bar__call:hover .utility-bar__number { color: var(--color-brass-text-on-dark); }

.utility-bar__hours { display: block; font-size: var(--text-xs); }
.utility-bar__hours--long { display: none; }
/* On a 320px phone even the short hours line is one more wrapped line
   standing between a frightened reader and the H1, so it waits until 360px. */
@media (max-width: 22.4375rem) { .utility-bar__hours { display: none; } }

@media (min-width: 56.25rem) {
  .utility-bar .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-xs);
  }
  .utility-bar__office { display: block; }
  .utility-bar__call-group { text-align: end; }
  .utility-bar__label { display: block; }
  .utility-bar__number { justify-content: flex-end; }
  .utility-bar__hours--long { display: block; }
  .utility-bar__hours--short { display: none; }
}


/* =========================================================================
   2. DISCLAIMER BAR — .disclaimer-bar / .disclaimer-bar__label
   WHAT: the federally required disclosure, 12 CFR 1015.4(a)(1), verbatim.
   WHERE: inside <header class="site-header">, directly under the utility
          bar, on EVERY page without exception.
   RULES — ALL OF THESE ARE COMPLIANCE, NOT DESIGN:
     · The sentence is required WORD FOR WORD. Do not edit or shorten it.
     · Minimum 19px. It may never be set smaller than surrounding body copy.
     · The "IMPORTANT NOTICE" label is bold and at least 2px LARGER than the
       sentence. That size relationship is written into 1015.4(a)(3).
     · It is never behind a toggle, an accordion, a tooltip or a hover state,
       never hidden at any viewport width, and never moved to the footer.
     · DO NOT SHRINK THIS COMPONENT to win back vertical space. If you need
       room, take it from something else.
   NOTE: the label is set INLINE rather than as its own stacked line. That
   keeps the whole notice to about five lines on a 375px phone instead of
   eight, without touching the required size relationship.
   ========================================================================= */

.disclaimer-bar {
  background-color: var(--color-bg-dark);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse);          /* white on navy-900 18.9:1  AA+ */
  border-block-end: var(--border-thick) solid var(--color-brass-rule-on-dark);
}
.disclaimer-bar .container { padding-block: var(--space-xs); }
.disclaimer-bar p {
  margin: 0;
  max-width: var(--measure-wide);
  font-size: var(--text-base);               /* 19px floor — never reduce */
  line-height: var(--leading-body);
}
/* A SECOND paragraph in this bar is reserved for the C.2 sentence — "Even if
   you accept this offer and use our service, your lender may not agree to
   change your loan" — on the pages that actually trigger it. Do NOT paste C.2
   onto a documentation-only page: there, that sentence itself implies we deal
   with the lender. Nothing else belongs in this bar. */
.disclaimer-bar p + p {
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) solid var(--color-border-on-dark);
}
.disclaimer-bar a { color: var(--color-text-inverse); }

.disclaimer-bar__label {
  font-size: var(--text-lg);                 /* 21 -> 24px: 2px+ larger than
                                                the 19 -> 21px sentence */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-900 10.3:1  AA+ */
  margin-inline-end: 0.6ch;
}

/* The brass left rule is a desktop ornament only. On a phone it costs 22px
   of measure, which is one extra wrapped line of a mandatory 133-character
   disclosure. The notice itself never changes. */
@media (min-width: 48rem) {
  .disclaimer-bar .container { padding-block: var(--space-sm); }
  .disclaimer-bar p {
    border-inline-start: var(--border-rule) solid var(--color-brass-rule-on-dark);
    padding-inline-start: var(--space-sm);
  }
  .disclaimer-bar p + p { border-inline-start-color: transparent; }
}

/* .disclaimer-block — the SAME disclosure repeated in the body of a page,
   e.g. the CB-1 / CB-3 compliance stack above the footer. It is a light-
   ground box, not a bar. Use .callout for anything that is not a required
   disclosure. */
.disclaimer-block {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-inline-start: var(--border-rule) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-block-end: var(--space-md);
}
.disclaimer-block:last-child { margin-block-end: 0; }
.disclaimer-block__title {
  font-size: var(--text-lg);
  margin-block: 0 var(--space-2xs);
}
.disclaimer-block p { max-width: none; }


/* =========================================================================
   3. SITE HEADER — .site-header / .site-header__band
   WHAT: the cream "letterhead" band. Circular monogram, the office name in
         Merriweather, a one-line descriptor, and the one brass button.
   WHERE: on EVERY page, byte-identical. It wraps the utility bar, the
          disclaimer bar, this band and the nav band, so that <header> is a
          single landmark containing all site chrome.
   RULE: the header must NEVER be display:none in print — the disclaimer bar
         lives inside it. See the print block in base.css.
   ========================================================================= */

.site-header { position: relative; z-index: var(--z-nav); }

.site-header__band {
  background-color: var(--color-bg);
  border-block-end: var(--border-thick) solid var(--color-brass-rule-on-light);
}
.site-header__band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* flex:1 matters: without it the brand shrinks to min-content on a 320px
     phone and the office name breaks into three lines, costing ~80px of the
     first screen. It must take the width the hidden CTA is not using. */
  flex: 1 1 auto;
  min-height: var(--tap-min);
  min-width: 0;               /* lets the long office name wrap, not overflow */
  color: inherit;
  text-decoration: none;
}
/* The monogram: the existing white brand mark inside a navy disc with a
   brass ring. A circle is the one round shape on this site. */
.site-header__monogram {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 7px;
  border-radius: 50%;
  background-color: var(--color-bg-dark-alt);
  border: var(--border-thin) solid var(--color-brass-rule-on-light);
}
.site-header__monogram img { width: 100%; height: auto; }

.site-header__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.1875rem, 1.05rem + 0.65vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);           /* navy-800 on paper 16.0:1  AA+ */
}
/* The descriptor line. Sentence case, brass, and it says what the business
   is — it is not a tracked-caps decorative label. Desktop only: on a phone
   it repeats the utility bar and the footer. */
.site-header__descriptor {
  display: none;
  margin-block-start: 3px;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-brass-text-on-light);   /* brass-700 on paper 6.0:1  AA */
}

/* The one brass button in the chrome. Hidden below 992px, where it would push
   the office name into three lines; the same call to action appears in the
   hero, so nothing is lost.
   NOTE THE SELECTOR: it must out-specify .btn{display:inline-flex} further
   down this file, or the button reappears on a 320px phone and costs ~80px of
   the first screen. Do not simplify it to .site-header__cta. */
.site-header__band .site-header__cta { display: none; }
@media (min-width: 62rem) {
  .site-header__band { border-block-end-width: var(--border-hairline); }
  .site-header__band .container { padding-block: var(--space-md); gap: var(--space-md); }
  .site-header__monogram { width: 78px; height: 78px; padding: 11px; border-width: var(--border-thick); }
  .site-header__descriptor { display: block; }
  .site-header__band .site-header__cta { display: inline-flex; flex: 0 0 auto; white-space: nowrap; }
}


/* =========================================================================
   4. NAV BAND — .nav / .nav__toggle / .nav__list / .nav__link / .nav__note
   WHAT: the dark navigation band, plus the standing compliance line at its
         right end. Turning that line into chrome is the point: it is on
         every page, in the same place, and it never scrolls out of a
         screenshot.
   WHERE: inside <header class="site-header">, on EVERY page.
   RULES:
     · FROM 768px UP THE NAV IS A VISIBLE HORIZONTAL BAR. The Menu
       disclosure exists only below 768px. Never collapse the desktop nav.
     · The site must work with JavaScript OFF. So the DEFAULT state here is:
       toggle hidden, link list open. site.js opts IN to the collapsible
       behaviour by setting data-nav="enhanced" — a reader is therefore never
       shown a button that cannot work.
     · The current page is marked with a 4px bar AND a colour change, never
       colour alone.
     · .nav__note is a compliance element. Do not hide it at any width.
   ========================================================================= */

.nav {
  background-color: var(--color-bg-dark);
  background-image: var(--navy-weave);
  border-block-end: var(--border-thick) solid var(--color-brass-rule-on-dark);
}
/* Tight padding below 768px: on a phone this band holds two rows (the Menu
   button, then the standing compliance line) and every pixel here is a pixel
   between a frightened reader and the H1. */
.nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-sm);
  padding-block: var(--space-3xs);
}

/* --- the mobile disclosure button (below 768px, and only with JS) -------- */
.nav__toggle {
  display: none;                 /* default: NO JS, no button */
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding-inline: var(--space-sm);
  background-color: transparent;
  color: var(--color-text-inverse);          /* white on navy-900 18.9:1  AA+ */
  border: var(--border-thin) solid var(--color-brass-rule-on-dark);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.nav__toggle:hover { background-color: var(--color-bg-dark-alt); }
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block; width: 24px; height: 3px;
  background-color: var(--color-brass-rule-on-dark);
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav__toggle-bars::before { top: -8px; }
.nav__toggle-bars::after  { top:  8px; }

/* --- the link list ------------------------------------------------------ */
.nav__list { flex: 1 1 100%; }
.nav[data-nav="enhanced"] .nav__toggle { display: inline-flex; }
.nav[data-nav="enhanced"] .nav__list { display: none; }
.nav[data-nav="enhanced"] .nav__toggle[aria-expanded="true"] + .nav__list { display: block; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: var(--space-2xs);
  color: var(--color-text-inverse);          /* white on navy-900 18.9:1  AA+ */
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-block-start: var(--border-hairline) solid rgba(217, 189, 122, 0.35);
  transition: color var(--transition);
}
.nav__link:hover { color: var(--color-brass-text-on-dark); }
.nav__link[aria-current="page"] {
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-900 10.3:1  AA+ */
  border-inline-start: var(--border-rule) solid var(--color-brass-rule-on-dark);
  padding-inline-start: var(--space-sm);
}

/* --- the standing compliance line --------------------------------------- */
.nav__note {
  /* flex-basis 0 below 768px: at its natural width this line is ~420px, which
     under flex-wrap sends it to a row of its own and costs ~48px of the first
     screen on a phone. Basis 0 lets it share the Menu button's row and wrap
     inside its own column instead. It is never hidden. */
  flex: 1 1 0;
  margin: 0;
  max-width: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-900 10.3:1  AA+ */
  margin-inline-start: auto;
  text-align: end;
}

/* --- 768px and up: the real horizontal bar ------------------------------ */
@media (min-width: 48rem) {
  .nav__inner { flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); padding-block: 0; }
  /* Belt and braces: the desktop nav is visible whether or not site.js ran. */
  .nav__toggle,
  .nav[data-nav="enhanced"] .nav__toggle { display: none; }
  .nav__list,
  .nav[data-nav="enhanced"] .nav__list,
  .nav[data-nav="enhanced"] .nav__toggle[aria-expanded="true"] + .nav__list {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
  }
  .nav__link {
    min-height: 56px;
    padding-block: 0;
    padding-inline: 2px;
    font-size: var(--text-sm);
    border-block-start: 0;
    border-block-end: 4px solid transparent;
  }
  .nav__link:hover { border-block-end-color: var(--color-brass-rule-on-dark); }
  .nav__link[aria-current="page"] {
    border-inline-start: 0;
    padding-inline-start: 2px;
    border-block-end-color: var(--color-brass-rule-on-dark);
  }
  /* Below about 1180px the note has no room beside six links, so it takes
     its own right-aligned row inside the same band. That is deliberate. */
  .nav__note { flex: 0 1 auto; padding-block: var(--space-2xs); }
}


/* =========================================================================
   5. BREADCRUMB — .breadcrumb
   WHAT: "Home > Services > $350 Foreclosure Audit".
   WHERE: first thing inside <main> on every page EXCEPT the home page.
   RULE: the current page is plain text, not a link, and carries
         aria-current="page".
   ========================================================================= */

.breadcrumb { padding-block: var(--space-sm); font-size: var(--text-sm); }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-xs); }
.breadcrumb li + li::before {
  content: "\203A";                      /* > */
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}
.breadcrumb a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);          /* 48px, not the legacy 44pt iOS figure */
  padding-inline: var(--space-2xs);     /* so short labels clear 48px of width too */
}
.breadcrumb [aria-current="page"] {
  color: var(--color-text-muted);        /* grey-600 on paper 6.2:1  AA */
  font-weight: var(--weight-bold);
}


/* =========================================================================
   6. SECTIONS AND SECTION HEADINGS — .section / .section-head / .rule
   WHAT: a page band, and the centred heading over a short brass rule that
         marks it. Convention item 5 of the idiom, and the single strongest
         "established office" signal on the page.
   WHERE: every content band on every page.
   RULE: the short rule is the ONLY decorative divider allowed in this
         project. It encodes a section boundary. Do not add others.
         There are NO tracked-caps eyebrow labels above these headings.
   ========================================================================= */

.section { padding-block: var(--section-gap); }
.section--sunk    { background-color: var(--color-surface-sunk); }
.section--surface { background-color: var(--color-surface); }
.section--dark {
  background-color: var(--color-bg-dark);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse);
}
.section--tight { padding-block: var(--space-xl); }

.section-head { text-align: center; margin-block-end: var(--space-xl); }
.section-head__title { margin-block: 0 var(--space-sm); font-size: var(--text-3xl); }
.section--dark .section-head__title { color: var(--color-text-inverse); }
.section-head__lede {
  max-width: var(--measure);
  margin-block-start: var(--space-md);
  margin-inline: auto;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--grey-700);                    /* grey-700 on paper 10.5:1  AA+ */
}
.section--dark .section-head__lede { color: var(--color-text-inverse-muted); }

/* The rule itself. Reset every <hr> default from base.css. */
.rule {
  width: var(--rule-width);
  height: var(--rule-height);
  border: 0;
  margin: 0 auto;
  background-color: var(--color-brass-rule-on-light);  /* on paper 4.7:1 (UI 3:1) */
}
.rule--start { margin: 0 0 var(--space-sm); }
@media (min-width: 48rem) { .rule--start { margin-block-end: var(--space-md); } }
.section--dark .rule,
.hero .rule { background-color: var(--color-brass-rule-on-dark); } /* on navy-900 6.2:1 */

/* Two-column body layout used inside sections (copy beside a panel). */
.split { display: grid; gap: var(--space-xl); }
@media (min-width: 56.25rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
}


/* =========================================================================
   7. HERO — .hero
   WHAT: the navy opening band. Copy on the left; on the right the office
         photograph in a bounded brass-bordered panel, the call card, and
         the page index.
   WHERE: the top of <main> on every page. On short pages the right column
          may hold only the call card.
   RULE: the sale-date urgency callout sits INSIDE the copy column, above
         the fold, in body type, in the same column as the claim. It is
         never a footnote and never behind a toggle.
   ========================================================================= */

.hero {
  background-color: var(--color-bg-dark);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse);
  border-block-end: var(--border-rule) solid var(--color-brass-rule-on-dark);
  padding-block: var(--space-sm) var(--space-xl);
}
.hero__grid { display: grid; gap: var(--space-xl); }
.hero__title {
  font-size: var(--text-4xl);
  color: var(--color-text-inverse);          /* white on navy-900 18.9:1  AA+ */
  margin-block-end: var(--space-md);
}
/* The claim sentence. Bold and large, because it is the one sentence the
   whole business rests on — and it may NEVER be published without the
   paragraph beneath it. Keep them adjacent, in this column. */
.hero__claim {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  max-width: 64ch;
}
.hero__body { color: var(--color-text-inverse-muted); max-width: 66ch; } /* 12.2:1  AA+ */
.hero__contact { color: var(--color-text-inverse); max-width: 66ch; }
.hero__contact a,
.hero__body a { color: var(--color-brass-text-on-dark); font-weight: var(--weight-bold); }
.hero__urgency { margin-block: var(--space-md); max-width: 64ch; }
.hero__actions { margin-block-start: var(--space-lg); }
.hero__aside { display: grid; gap: var(--space-lg); align-content: start; }

@media (min-width: 62rem) {
  .hero { padding-block: var(--space-2xl); }
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}


/* =========================================================================
   8. PAGE INDEX — .page-index            (graft: the numbered "what is on
   WHAT: a real <nav> listing this page's sections, 01..NN, each entry an
         anchor to a real id on a real section.
   WHERE: the hero's right column on the home page and on every long page.
          ON A SHORT PAGE, OMIT IT — do not pad it out to fill space.
   RULES:
     · It must be a <nav> with an accessible name (aria-labelledby).
     · Every href must point at an id that exists on the page.
     · The numbers are the page's real reading order. They are the one
       permitted use of 01/02/03 markers on this site.
     · Never list a Foreclosure-Terms-Explained term as an index entry.
   ========================================================================= */

.page-index {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
}
.page-index__head {
  background-color: var(--color-bg-dark-alt);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--border-thick) solid var(--color-brass-rule-on-dark);
}
.page-index__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-800 9.3:1  AA+ */
}
.page-index__head p {
  margin-block-start: var(--space-3xs);
  max-width: none;
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);    /* navy-200 on navy-800 10.9:1  AA+ */
}
.page-index__list li + li { border-block-start: var(--border-hairline) solid var(--color-border-hairline); }
.page-index__list a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-text);                  /* ink-900 on white 18.6:1  AA+ */
  font-size: var(--text-base);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.page-index__list a:hover { background-color: var(--color-surface-sunk); color: var(--color-link); }
.page-index__num {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-brass-text-on-light);   /* brass-700 on white 6.4:1  AA */
}
/* The label carries the underline, so the link still reads as a link with
   colour removed. */
.page-index__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }


/* =========================================================================
   9. CALL CARD — .call-card              (graft: "a person answers")
   WHAT: one large navy tap target: Call us / 516-499-1731 / hours / "A
         person answers."
   WHERE: the hero's right column on the home page; the sidebar or the
          bottom of the copy column elsewhere. Once per page.
   RULE: "A person answers." stays. It is the warmest true thing on the
         site, and it is true — do not soften it into "we are here to help".
   ========================================================================= */

.call-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 140px;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-bg-dark-alt);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse);
  border: var(--border-thick) solid var(--color-brass-rule-on-dark);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition), border-color var(--transition);
}
.call-card > * { max-width: 100%; }
.call-card__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-800 9.3:1  AA+ */
}
.call-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-phone);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--color-text-inverse);          /* white on navy-800 17.0:1  AA+ */
}
.call-card__hours {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-inverse-muted);    /* navy-200 on navy-800 10.9:1  AA+ */
}
.call-card:hover { background-color: var(--color-bg-dark); border-color: var(--color-brass-text-on-dark); }


/* =========================================================================
   10. OFFICE PANEL — .office-panel
   WHAT: the real office photograph inside a bounded, brass-bordered plate
         with the address beneath it.
   WHERE: the hero's right column on the home page; the contact and about
          pages.
   RULE: bounded at 34rem so the 812x442 source renders DOWN and stays
         sharp. Never stretch it full-bleed. Alt text describes the
         building, not the brand.
   ========================================================================= */

.office-panel {
  margin: 0;
  max-width: 34rem;
  background-color: var(--color-bg-dark-alt);
  border: var(--border-thick) solid var(--color-brass-rule-on-dark);
}
.office-panel img { width: 100%; }
.office-panel__caption {
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--border-thick) solid var(--color-brass-rule-on-dark);
  /* Real prose — the office address and hours. Holds the 19px floor; --text-xs
     rendered it at 17px, below the floor the rest of the site keeps. */
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-inverse-muted);    /* navy-200 on navy-800 10.9:1  AA+ */
}
.office-panel__caption strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-inverse);          /* white on navy-800 17.0:1  AA+ */
}


/* =========================================================================
   11. BUTTONS — .btn and variants, .btn-row
   WHAT: every call to action.
   WHERE: everywhere.
   RULES:
     · 48px minimum height, always. Labels are sentence case and say exactly
       what happens: "Call 516-499-1731", never "Learn more".
     · .btn--primary is the brass button and is reserved for
       "Order the $350 Foreclosure Audit". One per screenful.
     · On a navy ground use .btn--primary or .btn--outline-dark; on paper use
       .btn--primary, .btn--solid or .btn--outline.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-decoration: none;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Brass. White on brass-700 is 6.35:1  AA. */
.btn--primary {
  background-color: var(--color-cta);
  border-color: var(--color-cta);
  color: var(--color-text-inverse);
}
.btn--primary:hover {
  background-color: var(--color-cta-hover);  /* white on brass-800 8.4:1  AA+ */
  border-color: var(--color-cta-hover);
  color: var(--color-text-inverse);
}

/* Navy fill, for secondary actions on paper. White on navy-800 17.0:1. */
.btn--solid {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}
.btn--solid:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-inverse); }

/* Outlined, on paper. Navy on white 17.0:1; the border is the same navy. */
.btn--outline {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}
.btn--outline:hover { background-color: var(--color-info-bg); color: var(--color-text-strong); }

/* Outlined, on navy. White text 18.9:1; brass border 6.2:1; and on hover
   navy-900 sits on brass-500 at 6.2:1. */
.btn--outline-dark {
  background-color: transparent;
  border-color: var(--color-brass-rule-on-dark);
  color: var(--color-text-inverse);
}
.btn--outline-dark:hover {
  background-color: var(--color-brass-rule-on-dark);
  color: var(--color-bg-dark);
}

.btn--block { width: 100%; }

/* .btn-row — stacked on a phone so each target is full width and nothing is
   mis-tapped; side by side from 544px. */
.btn-row { display: flex; flex-direction: column; gap: var(--space-xs); }
.btn-row--center { align-items: center; }
@media (min-width: 34rem) {
  .btn-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-sm); }
  .btn-row--center { justify-content: center; }
}


/* =========================================================================
   12. CARDS — .card / .card-grid
   WHAT: the boxed "practice areas" grid of the idiom. A real border, a
         brass top edge, genuinely different content in each box.
   WHERE: the "what we do" band, service lists, resource lists.
   RULE: these are NOT a SaaS card kit. Each card carries a real heading
         that names its object AND its user, and real sentences. Never five
         clones distinguished only by an icon. Never a card inside a card.
   ========================================================================= */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);   /* on paper 3.5:1 (UI 3:1) */
  border-block-start: var(--border-rule) solid var(--color-brass-rule-on-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.card__title { margin-block: 0 var(--space-sm); font-size: var(--text-xl); }
.card__body { margin-block-end: auto; }
.card__body p { max-width: none; }
.card__meta {
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);            /* grey-600 on white 6.6:1  AA */
}
.card__price {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text-strong);
}
/* Whole-card link target. The heading holds the anchor; the pseudo-element
   makes the whole box clickable without nesting interactive elements. */
.card:has(.card__title a) { position: relative; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:has(.card__title a:hover) { border-color: var(--color-border-strong); }

/* grid-template-columns MUST be minmax(0, 1fr), not the implicit `auto` track.
   An auto track grows to its largest min-content contribution, and
   customerservice@primerealestateconsultants.com is an unbreakable 295px token —
   at 320px that pushed the card to 347px and the excess was CLIPPED, not
   scrollable, because body sets overflow-x:hidden. WCAG 2.2 SC 1.4.10. */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
/* `anywhere` not `break-word`: only `anywhere` reduces the min-content
   contribution, which is what actually stops the track from overflowing. */
.card a[href^="mailto:"], .card__body a[href^="mailto:"],
.contact-strip a[href^="mailto:"], .site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
@media (min-width: 64rem) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* =========================================================================
   13. CALLOUTS — .callout and variants
   WHAT: a bordered notice inside body copy.
   WHERE: compliance notices, the sale-date urgency line, free-help notices.
   VARIANTS
     (none)      white, navy left rule    — a neutral notice
     --info      navy tint                — background information
     --warn      amber tint               — read this before you act
     --urgent    red tint, red rule       — SALE DATES AND DEADLINES ONLY
     --help      green tint               — free help is available
   RULES:
     · Red is reserved. --urgent is for a sale date, a court date or a
       response deadline, and for nothing else. One per page.
     · The urgency callout is the ONE place this design spends boldness.
       Everything else stays quiet.
     · Colour never carries the meaning alone — every variant leads with a
       bold sentence that says what it is.
   ========================================================================= */

.callout {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-inline-start: var(--border-rule) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  max-width: var(--measure);
  color: var(--color-text);                  /* ink-900 on white 18.6:1  AA+ */
}
.callout p { max-width: none; color: inherit; }
.callout a { font-weight: var(--weight-bold); }
.callout__title { margin-block: 0 var(--space-2xs); font-size: var(--text-lg); }

.callout--info {
  background-color: var(--color-info-bg);
  border-inline-start-color: var(--color-border-strong);
}
.callout--info .callout__title { color: var(--color-info-text); } /* 15.0:1  AA+ */

.callout--warn {
  background-color: var(--color-warn-bg);
  border-inline-start-color: var(--color-warn-text);
}
.callout--warn .callout__title { color: var(--color-warn-text); } /* 7.2:1  AA */

.callout--urgent {
  background-color: var(--color-danger-bg);
  border-inline-start-color: var(--color-danger);   /* red-500 6px rule only */
  border-color: var(--color-danger-text);
}
.callout--urgent .callout__title,
.callout--urgent strong,
.callout--urgent a { color: var(--color-danger-text); }  /* red-700 on red-050 6.0:1  AA */

.callout--help {
  background-color: var(--color-success-bg);
  border-inline-start-color: var(--color-success-text);
}
.callout--help .callout__title { color: var(--color-success-text); } /* 5.9:1  AA */

/* On a navy ground a callout keeps its light face — that is what makes it
   readable and what makes the urgent one impossible to miss. */
.callout--center { margin-inline: auto; }


/* =========================================================================
   14. CHECKLIST — .checklist
   WHAT: "what is in the package" / "what to send us" lists.
   WHERE: the audit page, how-it-works, contact.
   RULE: the marker is a shape, not a colour cue. This list PRINTS — readers
         take it to an attorney — so base.css forces it onto one page.
   ========================================================================= */

.checklist { max-width: var(--measure); margin-block-end: var(--space-md); }
.checklist li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
}
.checklist li:last-child { border-block-end: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.05em;
  width: 12px; height: 12px;
  border-radius: 2px;
  background-color: var(--color-brass-rule-on-light);  /* 4.7:1 shape marker */
}
/* --done marks items already provided, with a tick rather than a square. */
.checklist--done li::before {
  content: "\2713";
  inset-block-start: 0.55em;
  width: auto; height: auto;
  background: none;
  color: var(--color-success-text);          /* green-700 on white 6.6:1  AA */
  font-weight: var(--weight-bold);
}
.checklist__note {
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* =========================================================================
   15. STEP LIST — .step-list
   WHAT: the numbered "how it works" sequence.
   WHERE: the home page and /how-it-works.html.
   RULE: numbers are allowed here because this IS a real sequence — step 2
         follows step 1. Numbered markers on anything that is not a sequence
         are banned. Use an <ol>, so the order is in the markup too.
   ========================================================================= */

.step-list { counter-reset: step; display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .step-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .step-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.step-list li {
  counter-increment: step;
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.step-list li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-block-end: var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-800 9.3:1  AA+ */
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.step-list__title { margin-block: 0 var(--space-3xs); font-size: var(--text-lg); }
.step-list p { max-width: none; font-size: var(--text-base); }


/* =========================================================================
   16. FAQ — .faq
   WHAT: questions and answers, built on native <details>/<summary>.
   WHERE: /faq.html and the question band on service pages.
   RULES:
     · Native elements only — they work with JavaScript off, they are
       keyboard operable for free, and the browser announces them correctly.
     · An answer that is a required disclosure NEVER goes inside a <details>.
       Collapsed is not "clear and prominent".
     · Every answer prints open. See base.css.
   ========================================================================= */

.faq { display: grid; gap: var(--space-sm); max-width: var(--measure); }
.faq details {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);           /* navy-800 on white 17.0:1  AA+ */
}
.faq summary:hover { background-color: var(--color-info-bg); }
.faq details[open] summary {
  border-block-end: var(--border-thin) solid var(--color-brass-rule-on-light);
}
.faq__answer { padding: var(--space-md); }
.faq__answer p { max-width: none; }


/* =========================================================================
   17. TABLES — .table / .table-scroll
   WHAT: office hours, fee-free comparisons, document checklists.
   WHERE: the contact strip, location pages, resource pages.
   RULE: a wide table scrolls INSIDE .table-scroll. The page itself must
         never scroll sideways at 320px. .table-scroll is focusable so a
         keyboard user can reach the scroll region.
   ========================================================================= */

.table-scroll {
  overflow-x: auto;
  margin-block-end: var(--space-md);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}
.table { background-color: var(--color-surface); font-size: var(--text-base); }
.table caption {
  padding: var(--space-sm) var(--space-md) var(--space-2xs);
  color: var(--color-text-strong);
  font-size: var(--text-base);
}
.table th, .table td {
  padding: var(--space-xs) var(--space-md);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  vertical-align: top;
}
.table thead th {
  background-color: var(--color-surface-sunk);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}
.table tbody th { color: var(--color-text-strong); font-weight: var(--weight-bold); width: 52%; }
.table tbody tr:last-child :is(th, td) { border-block-end: 0; }


/* =========================================================================
   18. FORMS — .form and children
   WHAT: the intake form and the contact form.
   WHERE: /contact.html and anywhere a reader sends us something.
   RULES:
     · The label is ALWAYS visible above the field. A placeholder is never
       a label.
     · Fields are 48px minimum and bordered in --color-border (3.5:1), never
       in a hairline.
     · An error says what went wrong AND how to fix it, is announced with
       role="alert", and is marked with a symbol as well as red.
     · Every form carries the intake notice: no attorney-client
       relationship, no confidentiality, call if a sale date is close.
   ========================================================================= */

.form { max-width: var(--measure-narrow); margin-block: var(--space-lg); }
.form__row { margin-block-end: var(--space-md); }
.form__label {
  display: block;
  margin-block-end: var(--space-3xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
}
.form__hint {
  display: block;
  margin-block-end: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);            /* grey-600 on paper 6.2:1  AA */
}
.form__required { font-weight: var(--weight-regular); color: var(--color-text-muted); }

.form__input, .form__select, .form__textarea {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
}
.form__textarea { min-height: 8rem; resize: vertical; }
.form__input:hover, .form__select:hover, .form__textarea:hover { border-color: var(--color-border-strong); }

.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: var(--tap-min);
}
.form__check input { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; margin-block-start: 0.2em; }
/* The label is the target, not the 28px box. Clicking a label toggles its
   control, so the label must fill the 48px row — otherwise the bottom of every
   checkbox row is a dead zone that looks tappable and is not. That is the exact
   failure this audience hits with a shaky hand on a phone. */
.form__check label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;            /* fill the row — without this the label is only as
                                wide as its text and the rest of the row is dead */
  min-height: var(--tap-min);
  font-weight: var(--weight-regular);
}

.form__row--error :is(.form__input, .form__select, .form__textarea) {
  border-color: var(--color-danger-text);
  border-width: var(--border-thick);
}
.form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3xs);
  margin-block-start: var(--space-3xs);
  color: var(--color-danger-text);           /* red-700 on paper 6.5:1  AA */
  font-weight: var(--weight-bold);
}
.form__error::before { content: "\26A0"; }   /* warning triangle — shape, not colour alone */
/* An error element is written into the page empty and revealed by removing
   hidden. Current browsers apply [hidden] with !important, so display:flex
   above loses to it — but older ones do not, and there the empty box renders
   as a bare warning triangle beside a field with nothing wrong. Say it, and
   it is true everywhere. */
.form__error[hidden] { display: none; }

.form__status {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border-inline-start: var(--border-rule) solid var(--color-success-text);
  background-color: var(--color-success-bg);
  margin-block-end: var(--space-md);
}
.form__status--error {
  border-inline-start-color: var(--color-danger);
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}


/* =========================================================================
   19. TESTIMONIAL — .testimonial / .testimonial-grid
   WHAT: a comment from a real client, with attribution.
   WHERE: not used at present. /testimonials.html was removed on 25 September
   2026 at the client's request; this stays for real client comments later.
   RULES:
     · NEVER write a quote. Every entry must be a real statement from a real
       client, collected in writing, published in their own words, with
       signed permission on file and dated.
     · No comment that claims a foreclosure was stopped, a case was won, or
       any other outcome may be published, even if the client said it.
     · The results disclaimer (CB-12) sits ADJACENT to the quotes, never in
       the footer.
     · .testimonial--slot is the unfilled placeholder. Its dashed border is
       there so an empty slot can never be mistaken for a published quote.
   ========================================================================= */

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 200px;
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-inline-start: var(--border-rule) solid var(--color-brass-rule-on-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.testimonial--slot { border-style: dashed; border-inline-start-style: solid; }
.testimonial__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-brass-text-on-light);   /* brass-700 on white 6.4:1  AA */
}
.testimonial blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  max-width: none;
  color: var(--color-text);
}
.testimonial__source {
  font-size: var(--text-sm);
  color: var(--color-text-muted);            /* grey-600 on white 6.6:1  AA */
  font-style: normal;
}


/* =========================================================================
   20. STATE BADGE — .state-badge
   WHAT: a small navy badge naming the state a page is written for.
   WHERE: the top of every /locations/ page, and the state block on the
          home page's "where we work" band.
   RULE: PER-STATE GATING IS BUILD-BLOCKING. New York statute references —
         RPAPL 1304, CPLR 3408, CPLR 5015, the 90-day notice, the settlement
         conference, surplus monies — may render only on New York pages and
         on pages not addressed to another state. This badge names the page's
         state so that rule is visible to whoever edits it next.
   ========================================================================= */

.state-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);             /* navy-800 on navy-050 15.0:1  AA+ */
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.state-badge--on-dark {
  background-color: transparent;
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-900 10.3:1  AA+ */
  border-color: var(--color-brass-rule-on-dark);
}


/* =========================================================================
   21. LINK ROW — .link-row
   WHAT: a wrapping row of large bordered links. Used for the seven
         "areas we serve" pages and for resource lists.
   WHERE: the home page "where we work" band, resource landing pages.
   RULE: each link is a full 48px target with a real gap between it and the
         next one, because these are tapped by someone with a shaky hand.
   ========================================================================= */

.link-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.link-row a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-md);
  background-color: var(--color-surface);
  color: var(--color-text-strong);           /* navy-800 on white 17.0:1  AA+ */
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
}
.link-row a:hover { background-color: var(--color-accent); color: var(--color-text-inverse); }


/* =========================================================================
   22. OFFER PANEL — .offer-panel
   WHAT: the bounded navy panel that carries the $350 Foreclosure Audit.
   WHERE: the home page audit band and /foreclosure-audit.html.
   RULES:
     · The offer and the price stay exactly as they are: "$350 Foreclosure
       Audit". Nothing anywhere on this site says when the fee is collected.
     · WHEREVER THE FORECLOSURE AUDIT REPORT IS NAMED, the paragraph
       beginning "A gap in the paperwork is not proof that anything went
       wrong" must sit adjacent to it, in body type, in this same panel.
       Use .offer-panel__qualifier. It is never a footnote or a tooltip.
     · One name for one thing, site-wide: "the Foreclosure Audit report".
   ========================================================================= */

.offer-panel {
  background-color: var(--color-bg-dark-alt);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse);
  border: var(--border-thick) solid var(--color-brass-rule-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.offer-panel p { color: var(--color-text-inverse); }   /* white on navy-800 17.0:1 */
.offer-panel__price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  margin-block: 0 var(--space-sm);
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-800 9.3:1  AA+ */
}
.offer-panel__qualifier {
  border-inline-start: var(--border-rule) solid var(--color-brass-rule-on-dark);
  padding-inline-start: var(--space-sm);
  font-size: var(--text-base);
}
.offer-panel a { color: var(--color-brass-text-on-dark); font-weight: var(--weight-bold); }
.offer-panel .btn { color: var(--color-text-inverse); }
.offer-panel .btn--outline-dark:hover { color: var(--color-bg-dark); }

/* A plain bulleted list on a navy ground — "what we look for". */
.list-plain { max-width: var(--measure); }
.list-plain li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-block-end: var(--border-hairline) solid rgba(217, 189, 122, 0.35);
}
.list-plain li:last-child { border-block-end: 0; }
.list-plain li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.05em;
  width: 10px; height: 10px;
  border-radius: 2px;
  background-color: var(--color-brass-rule-on-dark);
}


/* =========================================================================
   23. CONTACT STRIP — .contact-strip
   WHAT: the closing "Talk to a person" band: the phone at display size,
         the office hours table, and the address.
   WHERE: the bottom of EVERY content page, above the compliance stack.
          Byte-identical across pages.
   RULE: the phone is always written 516-499-1731, always a tel: link, never
         abbreviated, never inside an image.
   ========================================================================= */

.contact-strip {
  background-color: var(--color-surface-sunk);
  border-block-start: var(--border-rule) solid var(--color-brass-rule-on-light);
  border-block-end: var(--border-hairline) solid var(--color-border-hairline);
  padding-block: var(--section-gap);
}
.contact-strip__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 56.25rem) {
  .contact-strip__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: start; }
}
.contact-strip__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-heading);
  font-size: var(--text-phone-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);           /* navy-800 on sunk 14.8:1  AA+ */
  text-decoration: none;
  border-block-end: 4px solid var(--color-brass-rule-on-light);
}
.contact-strip__phone:hover { color: var(--color-link); border-block-end-color: var(--color-brass-text-on-light); }
.contact-strip__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);            /* grey-600 on sunk 5.7:1  AA */
}
.contact-strip address { font-size: var(--text-base); line-height: var(--leading-body); }


/* =========================================================================
   24. SITE FOOTER — .site-footer
   WHAT: address, hours, four link columns, and the legal bar.
   WHERE: EVERY page, byte-identical.
   RULE: the footer is NOT where a required disclosure lives. Footer
         placement alone is not "clear and prominent" — that is why the
         disclaimer bar sits at the top of the page.
   ========================================================================= */

.site-footer {
  background-color: var(--color-bg-dark);
  background-image: var(--navy-weave);
  color: var(--color-text-inverse-muted);    /* navy-200 on navy-900 12.2:1  AA+ */
  border-block-start: var(--border-rule) solid var(--color-brass-rule-on-dark);
}
.site-footer .container { padding-block: var(--section-gap); }
.site-footer a { color: var(--color-text-inverse); }   /* white 18.9:1  AA+ */
.site-footer a:hover { color: var(--color-brass-text-on-dark); }
.site-footer :is(h2, h3) {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brass-text-on-dark);    /* brass-300 on navy-900 10.3:1  AA+ */
  margin-block: 0 var(--space-sm);
  padding-block-end: var(--space-2xs);
  border-block-end: var(--border-thin) solid var(--color-brass-rule-on-dark);
}
.site-footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 48rem)  { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
@media (min-width: 62rem)  { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer address { font-size: var(--text-base); color: var(--color-text-inverse); }
.site-footer__hours { margin-block-start: var(--space-md); font-size: var(--text-sm); }
.site-footer__hours strong { color: var(--color-text-inverse); }
/* The footer link lists are plain <ul> elements so they keep their list
   semantics for a screen reader, but they must not show markers or the
   reading indent that base.css gives an unclassed list. */
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.site-footer__nav li { margin: 0; }
.site-footer__nav a { display: flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-sm); }

.site-footer__legal {
  background-color: var(--color-bg-dark-deep);
  border-block-start: var(--border-thin) solid var(--color-brass-rule-on-dark);
}
.site-footer__legal .container { padding-block: var(--space-lg); }
.site-footer__legal p {
  max-width: var(--measure-wide);
  font-size: var(--text-base);
  color: var(--color-text-inverse-muted);    /* navy-200 on navy-950 12.7:1  AA+ */
}
.site-footer__legal p + p { margin-block-start: var(--space-md); }
.site-footer__links {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-block-end: var(--space-md);
}
.site-footer__links a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}


/* --- Primary button on a dark ground ------------------------------------
   The brass surface (#7a5a1e) measures 2.97:1 against navy-900 and 2.67:1
   against navy-800 — under the 3:1 WCAG floor for a control boundary. The
   label contrast is fine; it is the edge of the control that disappears.
   Give it a light border on dark bands only. */
.section--dark .btn--primary,
.hero .btn--primary,
.site-header__band .btn--primary,
.utility-bar .btn--primary {
  border-color: var(--color-text-inverse);   /* white on brass: 5.9:1 */
}


/* --- .commercial ----------------------------------------------------------
   The product commercial. Markup and fill-in checklist:
   _content/COMMERCIAL-EMBED.html. Placement is decided once the cut is reviewed.

   Native <video controls>: no custom player and no JavaScript, so it works with
   scripts blocked and every control is the browser's own accessible one.

   NEVER autoplay. WCAG 2.2 SC 1.4.2 (audio that starts on its own), the zero
   motion budget in BUILD-STANDARDS, and readers on phones and metered data.
   preload="metadata" means the file is not downloaded until someone presses play.

   Captions are required (WCAG 2.2 SC 1.2.2). The transcript beneath the player
   is for readers who will not, or cannot, play video.

   Add ONE orientation modifier matching the file's real pixel dimensions. The
   frame's width is capped from its height, so a vertical cut never fills a
   desktop screen and nothing gets letterboxed. */
.commercial__figure { margin: 0; }

.commercial__frame {
  --commercial-ratio: 16 / 9;                /* landscape default */
  --commercial-max-h: min(80vh, 720px);
  aspect-ratio: var(--commercial-ratio);
  width: min(100%, calc(var(--commercial-max-h) * var(--commercial-ratio)));
  margin-inline: auto;
  background-color: var(--navy-900);
  border: var(--border-thick) solid var(--color-brass-rule-on-dark);
}
.commercial__frame--vertical { --commercial-ratio: 9 / 16; }
.commercial__frame--square   { --commercial-ratio: 1 / 1; }

.commercial__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--navy-900);
}

/* For light sections. --color-text-muted is not rated for navy grounds. */
.commercial__caption {
  margin-block-start: var(--space-sm);
  font-size: var(--text-base);                /* real prose: holds the 19px floor */
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  text-align: center;
}

.commercial__transcript { margin-block-start: var(--space-md); }
.commercial__transcript > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  cursor: pointer;
  font-weight: var(--weight-bold);
}
.commercial__transcript-body { padding-block: var(--space-sm); }

@media print {
  .commercial__frame { display: none; }      /* a video cannot print */
}



/* --- Intake form: spam trap and no-JavaScript status ------------------------
   .form__trap hides the honeypot from people, screen readers and browser
   autofill; bots that fill every input still fill it, and the Worker drops them.
   :target reveals the message the intake Worker redirects to when JavaScript is
   off. !important is needed to beat the [hidden] rule; do not remove it. */
.form__trap { display: none; }
.form__status:target[hidden] { display: block !important; }


/* =========================================================================
   40. EVEN BUTTON ROWS, SUBHEADS AND THE TRANSCRIPT CONTROL (23 Sep 2026)
   WHAT: .link-row--even gives a row of topic or state buttons equal widths and
   balanced rows: one per line on phones, three to a row on tablets, and one
   row of label-width buttons (topics) or four to a row (--wide, the states) on
   desktop, with a short
   last row centred instead of one button stranded on its own.
   ========================================================================= */
.link-row--even { justify-content: center; }
.link-row--even > li { display: flex; flex: 1 1 100%; }
.link-row--even a { flex: 1; justify-content: center; text-align: center; }
@media (min-width: 34rem) {
  .link-row--even > li { flex: 0 1 calc((100% - 2 * var(--space-xs)) / 3); }
}
@media (min-width: 56rem) {
  .link-row--even > li { flex: 0 1 auto; }   /* one centred row, each button sized to its label */
  .link-row--wide > li { flex: 0 1 calc((100% - 3 * var(--space-xs)) / 4); }
}
.link-row--wide { max-width: 72rem; margin-inline: auto; }
.link-row--wide a { padding-inline: var(--space-sm); }

.text-center { text-align: center; }
.section-subhead {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-strong);
  text-align: center;
  margin-block: var(--space-xl) var(--space-md);
}

/* The transcript control has to look like something you can press: a bordered
   button with a chevron that turns when it opens, centred under the video. */
.commercial__transcript > summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: var(--space-2xs) var(--space-xs);
  padding: var(--space-2xs) var(--space-md);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-strong);
  list-style: none;
}
.commercial__transcript > summary::-webkit-details-marker { display: none; }
.commercial__transcript > summary::before {
  content: "";
  align-self: center;
  width: 0.55em;
  height: 0.55em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.commercial__transcript[open] > summary::before { transform: rotate(45deg); }
[dir="rtl"] .commercial__transcript:not([open]) > summary::before { transform: rotate(135deg); }   /* points the reading way */
.commercial__transcript > summary:hover { background-color: var(--color-info-bg); }
.commercial__transcript-hint {
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.transcript-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-block: var(--space-md);
}
.transcript-langs[hidden] { display: none; }
.transcript-langs button {
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-strong);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.transcript-langs button:hover { background-color: var(--color-info-bg); }
.transcript-langs button[aria-pressed="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}
.transcript-lang + .transcript-lang { margin-block-start: var(--space-lg); }
.transcript-lang__notice { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .commercial__transcript > summary::before { transition: none; }
}
/* The topics row sits outside the reading measure so each name fits on one line. */
.topic-row { margin-block-start: var(--space-lg); }

/* A card keeps its own dark-on-light text even inside a dark section. Without
   this it inherited the section's white text on its own white ground, which
   hid the body copy of the About page's "What we believe" cards. */
.section--dark .card { color: var(--color-text); }
.section--dark .card a { color: var(--color-link); }

/* The page-end urgent line sits directly above "We are not a law firm." */
.page-end__urgent { margin-block-end: var(--space-md); }


/* =========================================================================
   41. POLISH (23 Sep 2026): even spacing between stacked boxes
   Notices, callouts, tables and panels that follow one another always get a
   clear gap. Several pages stacked two boxes with no space between them.
   ========================================================================= */
:is(.callout, .disclaimer-block, .table-scroll, .offer-panel, .commercial__transcript)
  + :is(.callout, .disclaimer-block, .table-scroll, .offer-panel) { margin-block-start: var(--space-md); }


/* =========================================================================
   42. ACCESS BAR AND LANGUAGE MENU — .access-bar / .lang-menu (23 Sep 2026)
   WHAT: the first strip of the header. The language menu lists every
   language in its own script with the English name beside it, and the
   Accessibility link opens the accessibility statement.
   RULES: native names are never translated; the menu must work without
   JavaScript; tap targets stay at least 44px.
   ========================================================================= */
.access-bar {
  background-color: var(--color-bg-dark-deep);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
}
.access-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-3xs);
}
.access-bar__link,
.lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-xs);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.access-bar__link:hover,
.lang-menu > summary:hover { color: var(--color-brass-text-on-dark); }
.access-bar__inner { position: relative; }
.lang-menu { position: static; }   /* the list anchors to the bar, so it never runs off a small screen */
.lang-menu > summary { cursor: pointer; list-style: none; text-decoration: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-inline-start: var(--space-3xs);
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.15em);
}
.lang-menu[open] > summary::after { transform: rotate(-135deg) translateY(-0.1em); }
.lang-menu__icon { flex: none; }
.lang-menu__list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
  gap: 0;
  min-width: min(22rem, calc(100vw - 2 * var(--space-md)));
  margin: 0;
  padding: var(--space-2xs);
  list-style: none;
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(6, 13, 51, 0.25);
}
/* Each link fills its cell, so a highlighted one-line row ("English") is as
   tall as its two-line neighbour instead of stopping partway down. */
.lang-menu__list > li { display: flex; }
.lang-menu__list a {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* every row aligns to the page's own start edge, whatever the script */
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  text-decoration: none;
}
.lang-menu__list a:hover { background-color: var(--color-info-bg); }
.lang-menu__list a[aria-current="true"] { background-color: var(--color-accent); color: var(--color-text-inverse); }
.lang-menu__list a[aria-current="true"] .lang-menu__en { color: var(--color-text-inverse); }
.lang-menu__en {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 30rem) {
  .lang-menu__list { inset-inline: var(--space-2xs); min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =========================================================================
   43. RIGHT-TO-LEFT AND COMPLEX SCRIPTS (23 Sep 2026)
   Phone numbers read left to right on Arabic, Urdu and Yiddish pages, and
   letter-spacing is off where it would break the joins between letters.
   ========================================================================= */
[dir="rtl"] :is(a[href^="tel:"], .utility-bar__number, .call-card__number, .contact-strip__phone) {
  direction: ltr;
  unicode-bidi: isolate;
}
:is(:lang(ar), :lang(ur), :lang(bn)) * { letter-spacing: normal !important; }